:root{--bg:#0a0e15;--panel:#111722;--panel2:#0e141e;--line:#273143;--text:#edf3fb;--muted:#8f9caf;--accent:#6ee7ff;--accent2:#8b7bff;--danger:#ff6b7a;--ok:#7ee787;--shadow:0 18px 55px rgba(0,0,0,.32)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(circle at 15% -10%,#1d2a47 0,#0a0e15 40%),#0a0e15;color:var(--text);font:14px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit}body{overflow:hidden}.app-shell{height:100%;display:flex;flex-direction:column}.topbar{height:68px;display:flex;align-items:center;gap:22px;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(9,13,20,.92);backdrop-filter:blur(14px);z-index:10}.brand{display:flex;align-items:center;gap:10px;min-width:210px}.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:900;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#06111a;box-shadow:0 10px 32px rgba(110,231,255,.18)}.brand strong{display:block;font-size:15px}.brand span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.main-tabs{display:flex;gap:6px;flex:1;align-items:center}.tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:9px 12px;border-radius:9px}.tab.active{background:#192131;border-color:#334158;color:var(--text)}.top-actions{display:flex;gap:8px;align-items:center}.save-state{font-size:11px;color:var(--muted);min-width:50px;text-align:right}.btn{border:1px solid #364258;background:#17202e;border-radius:9px;padding:8px 11px;transition:.15s}.btn:hover{transform:translateY(-1px);border-color:#4d5d78}.btn.primary{background:linear-gradient(135deg,#5e75ff,#45d4e5);border:0;color:#071018;font-weight:800}.btn.ghost{background:#131a25}.btn.danger{border-color:#5a2730;color:#ff9aa4}.full{width:100%}.hidden{display:none!important}.view{display:none;height:calc(100vh - 68px)}.view.active{display:block}.workspace{height:100%;padding:12px;gap:12px;display:grid;min-height:0}.extractor-grid{grid-template-columns:260px minmax(0,1fr) 300px}.library-grid{grid-template-columns:260px minmax(0,1fr)}.mapper-grid{grid-template-columns:280px minmax(0,1fr) 290px}.panel{background:linear-gradient(180deg,rgba(20,27,39,.98),rgba(13,18,27,.98));border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:0;min-height:0;overflow:hidden}.left-panel,.preview-panel,.library-sidebar,.mapper-sidebar,.map-export-panel{display:flex;flex-direction:column}.panel-title{height:46px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.12em;color:#c7d1e2}.panel-title span:last-child{color:var(--muted);letter-spacing:0}.drop-zone{margin:12px;border:1px dashed #3c4d69;border-radius:12px;min-height:115px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:var(--muted);text-align:center;padding:14px;background:rgba(13,19,30,.65)}.drop-zone:hover{border-color:var(--accent);background:rgba(110,231,255,.04)}.drop-zone strong{color:var(--text)}.drop-icon{width:40px;height:40px;border-radius:12px;background:#192333;display:grid;place-items:center;color:var(--accent);font-size:24px}.controls,.map-controls{padding:0 12px}.control-stack{display:flex;flex-direction:column;gap:10px}.controls label,.control-stack label{color:#aeb9c9;font-size:11px;display:flex;flex-direction:column;gap:5px}.controls input,.controls select,.map-controls input,.search{background:#0c121b;border:1px solid #2e394d;color:var(--text);border-radius:8px;padding:8px;outline:none}.controls input:focus,.controls select:focus,.map-controls input:focus,.search:focus{border-color:#5a6e93}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.inline-check{flex-direction:row!important;align-items:center;gap:7px!important;color:#abb6c8!important}.inline-check input{accent-color:#6ee7ff}.hint{color:var(--muted);font-size:11px;margin:0;line-height:1.55}.atlas-actions{padding:12px;margin-top:auto}.atlas-panel{display:flex;flex-direction:column}.panel-toolbar{height:48px;padding:0 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-toolbar>div:first-child{min-width:0}.panel-toolbar strong{font-size:12px;display:inline-block;margin-right:8px}.panel-toolbar span{color:var(--muted);font-size:11px}.toolbar-right{display:flex;align-items:center;gap:7px;white-space:nowrap}.icon-btn{width:31px;height:31px;border:1px solid #344158;background:#141c29;border-radius:8px}.checkerboard,.map-viewport{position:relative;flex:1;overflow:auto;background-color:#161d29;background-image:linear-gradient(45deg,#121925 25%,transparent 25%),linear-gradient(-45deg,#121925 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121925 75%),linear-gradient(-45deg,transparent 75%,#121925 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.checkerboard canvas,.map-viewport canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;max-width:none;max-height:none}.checkerboard #atlasCanvas{z-index:1}.checkerboard #atlasOverlay{z-index:2;pointer-events:auto}.map-viewport{background:#0a0f16}.map-viewport canvas{left:0;top:0;transform:none}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--muted);pointer-events:none;text-align:center}.empty-state strong{color:#cbd6e6}.empty-state.hidden{display:none}.preview-toolbar{padding:9px;border-bottom:1px solid var(--line);display:flex;gap:7px}.search{width:100%;height:34px}.asset-list{padding:8px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px}.asset-card{border:1px solid #2b3548;background:#0d141e;border-radius:9px;padding:6px;display:grid;grid-template-columns:50px 1fr;gap:7px;min-width:0}.asset-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px rgba(110,231,255,.14) inset}.thumb{width:50px;height:50px;border-radius:6px;background-color:#1a2230;background-image:linear-gradient(45deg,#151d2a 25%,transparent 25%),linear-gradient(-45deg,#151d2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#151d2a 75%),linear-gradient(-45deg,transparent 75%,#151d2a 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;display:grid;place-items:center;overflow:hidden}.thumb img{max-width:100%;max-height:100%;image-rendering:pixelated}.asset-card .asset-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-card .meta{font-size:10px;color:var(--muted);margin-top:2px}.asset-card .mini-actions{display:flex;gap:4px;margin-top:5px}.mini{font-size:10px;padding:3px 5px;border-radius:6px;border:1px solid #2c394e;background:#151d2a}.footer-actions{padding:9px;border-top:1px solid var(--line);margin-top:auto}.subhead{font-size:10px;letter-spacing:.13em;color:#aeb9c9;margin-bottom:7px}.layer-box,.tool-box,.asset-picker-box{padding:11px;border-top:1px solid var(--line)}.layer{display:flex;align-items:center;gap:7px;padding:7px 8px;border:1px solid transparent;border-radius:7px;margin-bottom:4px;background:#101722}.layer.active{border-color:#405069;background:#172131}.layer-name{flex:1;font-size:11px}.layer button{border:0;background:transparent;color:var(--muted);font-size:12px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tool-btn{border:1px solid #2d394c;background:#111925;border-radius:8px;padding:7px;font-size:11px}.tool-btn.active{border-color:var(--accent);background:#142630;color:var(--accent)}.map-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-height:260px;overflow:auto}.palette-item{aspect-ratio:1;border:1px solid #2c374b;border-radius:7px;background:#0d141e;display:grid;place-items:center;overflow:hidden;position:relative}.palette-item img{max-width:100%;max-height:100%;image-rendering:pixelated}.palette-item span{position:absolute;left:3px;right:3px;bottom:2px;background:rgba(0,0,0,.65);font-size:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:3px;padding:1px 3px}.map-export-panel{padding-bottom:10px}.export-card{margin:11px;padding:11px;border:1px solid #2b364a;border-radius:10px;background:#101722}.export-card strong{font-size:12px}.export-card p{color:var(--muted);font-size:11px;line-height:1.55;margin:6px 0 9px}.library-main{display:flex;flex-direction:column}.library-sidebar{padding-bottom:12px}.library-sidebar .search{margin:12px;width:calc(100% - 24px)}.library-tools{padding:0 12px}.library-grid-cards{padding:12px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.library-card{border:1px solid #2d384c;border-radius:11px;background:#0e151f;overflow:hidden}.library-card .lib-thumb{height:140px;display:grid;place-items:center;background-color:#1b2230;background-image:linear-gradient(45deg,#141b27 25%,transparent 25%),linear-gradient(-45deg,#141b27 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#141b27 75%),linear-gradient(-45deg,transparent 75%,#141b27 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.library-card img{max-width:94%;max-height:94%;image-rendering:pixelated}.library-meta{padding:9px;border-top:1px solid #252e40}.library-meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.library-meta span{display:block;color:var(--muted);font-size:10px;margin-top:2px}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#eaf4ff;color:#0a1420;padding:9px 13px;border-radius:9px;box-shadow:0 16px 40px rgba(0,0,0,.3);font-weight:700;font-size:12px;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1100px){.extractor-grid{grid-template-columns:220px minmax(0,1fr) 250px}.mapper-grid{grid-template-columns:250px minmax(0,1fr) 240px}.main-tabs{gap:2px}.top-actions .ghost{display:none}.brand{min-width:auto}.brand span{display:none}}
@media (max-width:820px){body{overflow:auto}.app-shell{min-height:100vh}.topbar{height:auto;min-height:58px;flex-wrap:wrap;padding:8px}.main-tabs{order:3;flex-basis:100%;overflow:auto}.view{height:auto;min-height:calc(100vh - 105px)}.workspace,.extractor-grid,.mapper-grid,.library-grid{grid-template-columns:1fr}.panel{min-height:280px}.atlas-panel,.map-panel{height:70vh}.left-panel,.mapper-sidebar{min-height:0}.preview-panel,.map-export-panel{max-height:none}.top-actions{margin-left:auto}}