:root{--bg:#061b24;--panel:#0a2530;--line:#24505d;--text:#eef8f8;--muted:#93adb4;--accent:#21d0c5}
*{box-sizing:border-box;user-select:none;-webkit-user-select:none}
input,textarea,select,option{user-select:text;-webkit-user-select:text}
body{margin:0;background:#03131a;color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;overflow:hidden}
.app-shell{height:100vh;display:grid;grid-template-rows:58px 1fr}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #173945;background:#041820}
.brand{display:flex;gap:12px;align-items:center}.brand strong{font-size:19px;letter-spacing:.2px}.brand span{margin-left:14px;color:#a9b8bd;font-size:12px}.logo{width:34px;height:34px;border:1px solid #12c6bd;border-radius:50%;display:grid;place-items:center;color:#12c6bd}.shared-workspace-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.editor-name{display:flex;align-items:center;gap:7px;color:#a7bdc2;font-size:11px;white-space:nowrap}.editor-name input{width:110px;background:#071f29;border:1px solid #29505b;border-radius:6px;color:#fff;padding:7px 9px;font:600 12px "Segoe UI",Arial,sans-serif}.topbar-button{background:#0b2833;border:1px solid #2c5965;color:#fff;border-radius:6px;padding:8px 11px;cursor:pointer;font-weight:700;white-space:nowrap}.save-state{display:flex;flex-direction:column;min-width:190px;color:#9cfb8a;font-size:12px;line-height:1.25}.save-state strong{font-size:11px;letter-spacing:.2px}.save-state span{color:#98aeb4;margin:2px 0 0}.save-state.saving strong{color:#ffe58a}.save-state.error strong{color:#ff9f9f}.save-state.conflict strong{color:#ffd37d}
.workspace{display:grid;grid-template-columns:minmax(500px,1fr) 210px minmax(650px,1.3fr);min-height:0}
.preview-pane,.types-pane,.editor-pane{background:var(--panel);border-right:1px solid #173945;min-height:0}
.preview-pane{display:flex;flex-direction:column}.preview-toolbar{height:48px;padding:8px 18px;border-bottom:1px solid #173945;display:flex;gap:8px;align-items:center}
.preview-toolbar button,.secondary,.export-actions button,.row-controls button,.mask-toolbar button,.submask-toolbar button{background:#0b2833;border:1px solid #2c5965;color:white;border-radius:6px;padding:9px 13px;cursor:pointer}
.preview-stage{flex:1;display:grid;place-items:center;overflow:auto;background:radial-gradient(circle,#0d2b35,#061820)}
canvas#cardCanvas{width:360px;height:auto;filter:drop-shadow(0 22px 35px rgba(0,0,0,.55));transform-origin:center}
.tip{padding:12px 18px;border-top:1px solid #173945;color:#b9cbcf;font-size:12px}
.types-pane{padding:18px 12px;overflow:auto}.types-pane h3,.section h3{font-size:12px;color:#b7c7cb;letter-spacing:.4px}.type-buttons{display:flex;flex-direction:column;gap:8px}.type-btn{padding:10px 12px;border:1px solid transparent;border-radius:6px;color:#fff;text-align:left;font-weight:700;cursor:pointer}.type-btn.active{outline:2px solid rgba(255,255,255,.55)}.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.swatch{height:30px;border-radius:5px;border:1px solid rgba(255,255,255,.15);cursor:pointer}
.editor-pane{overflow:hidden;display:flex;flex-direction:column}.tabs{height:48px;display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid #173945;flex:none}.tab{background:#071f29;color:#c3d0d3;border:0;border-right:1px solid #173945;font-weight:800;cursor:pointer}.tab:hover{background:#0c303c}.tab.active{background:#0f3b47;color:#fff;border-top:2px solid #30d7cd}.tab-panel{display:none;overflow:auto;flex:1}.tab-panel.active{display:block}
.form-grid{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid.compact{padding:10px 0 0}.form-grid label{font-size:12px;color:#c4d3d6}.form-grid input,.form-grid select,textarea,.tag-grid input{width:100%;margin-top:7px;background:#071f29;border:1px solid #29505b;border-radius:7px;color:#fff;padding:12px;font:600 14px/1.4 "Segoe UI",Arial,sans-serif}.section{padding:18px;border-top:1px solid #173945}.hero-section{padding:28px}.hero-section h2,.section h2{margin:0 0 8px;font-size:22px}.hero-section p,.muted{color:var(--muted);max-width:760px}.muted{line-height:1.5}
.rarity-icons{display:grid;grid-template-columns:repeat(6,minmax(70px,1fr));gap:10px}.rarity-choice{background:transparent;border:1px solid transparent;border-radius:8px;padding:8px 4px;text-align:center;font-size:10px;color:#c6d4d7;cursor:pointer}.rarity-choice:hover,.rarity-choice.active{background:#0d3441;border-color:#3f6d78}.rarity-choice .star{font-size:28px;width:46px;height:46px;border:1px solid #50707a;border-radius:50%;display:grid;place-items:center;margin:auto auto 5px}.rarity-choice img{width:42px;height:42px;object-fit:contain;display:block;margin:auto auto 5px}.rarity-choice span{display:block}
.texture-controls,.row-controls,.mask-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.texture-controls input[type=color]{width:58px;height:48px;border:1px solid #55737b;background:none;border-radius:5px}.upload{display:inline-block;background:#0b2833;border:1px solid #2c5965;border-radius:6px;padding:10px 14px;cursor:pointer}.upload input{display:none}.upload.large{margin:12px 8px 0 0}.helper{color:#7f9aa1;font-size:11px;margin-top:10px}textarea{height:180px;resize:vertical;font:600 15px/1.5 "Segoe UI",Arial,sans-serif}.prompt-box{height:230px}.prompt-counter{margin-top:7px;color:#87a2a9;font-size:11px;font-variant-numeric:tabular-nums;text-align:right}.prompt-counter.near-limit{color:#ffd37d}.prompt-counter.at-limit{color:#ff9f9f;font-weight:800}.tag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.range-label{display:block;margin-top:22px;color:#c4d3d6}.range-label output{float:right;color:#75e7de;font-weight:700}.range-label input{width:100%;margin-top:10px}.export-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.primary{background:#008c86!important;border-color:#0dc7bc!important;font-weight:800}
.mask-toolbar{margin:14px 0}.submask-toolbar{margin-top:0}.mask-toolbar .active-mode{background:#006f69;border-color:#19d8cd}.mask-wrap{max-width:680px;background:#041820;border:1px solid #2c5965;border-radius:8px;padding:10px}.mask-wrap canvas{display:block;width:100%;height:auto;cursor:crosshair;background:#102e37}.toggle-row{display:flex;align-items:center;gap:9px;color:#d8e6e8}.toggle-row input{width:18px;height:18px}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:12px;padding-top:8px}.check-grid label{display:flex;gap:10px;align-items:center;background:#071f29;border:1px solid #29505b;border-radius:8px;padding:12px;color:#dbe6e8}.check-grid input{width:18px;height:18px}.small-pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#0e3340;color:#bfe8e5;font-size:11px;margin-left:8px}
@media(max-width:1200px){.workspace{grid-template-columns:470px 185px 1fr}.check-grid{grid-template-columns:1fr}}
.mask-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:16px;align-items:start}.mask-preview-panel{background:#041820;border:1px solid #2c5965;border-radius:8px;padding:10px}.mask-preview-panel h3{margin:0 0 8px}.mask-preview-panel canvas{display:block;width:100%;height:auto;background:#000;border-radius:5px}.preview-stage{perspective:1000px}canvas#cardCanvas{transition:transform .14s ease-out;will-change:transform}
@media(max-width:1050px){.mask-editor-grid{grid-template-columns:1fr}.mask-preview-panel{max-width:190px}}
.mask-editor-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(190px,1fr);gap:14px;align-items:start}.mask-preview-wrap{background:#041820;border:1px solid #2c5965;border-radius:8px;padding:10px}.mask-preview-wrap canvas{display:block;width:100%;height:auto;background:#000}@media(max-width:1050px){.mask-editor-grid{grid-template-columns:1fr}.mask-preview-wrap{max-width:360px}}

.card-search{width:100%;background:#071f29;border:1px solid #29505b;border-radius:7px;color:#fff;padding:10px;margin:4px 0 10px;font:600 13px "Segoe UI",Arial,sans-serif}.card-list{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto;padding-right:3px}.card-list button{background:#071f29;border:1px solid #274d58;border-radius:6px;color:#dce9eb;text-align:left;padding:8px 9px;cursor:pointer;font:700 12px "Segoe UI",Arial,sans-serif}.card-list button:hover,.card-list button.active{background:#12404c;border-color:#2fd5ca}.card-list small{display:block;color:#7f9aa1;font-size:10px;margin-top:2px}.helper-inline{font-size:12px;color:#a9c0c5}.mask-toolbar button.active-mode{background:#7c176f;border-color:#ff4ee7}.mask-wrap canvas{cursor:crosshair}.foil-readout{font-weight:800;color:#7ff6ed}
/* v5.8 fixed set-card library and mask preview */
.workspace{grid-template-columns:250px minmax(470px,1fr) 210px minmax(650px,1.3fr)}
.cards-pane{background:#071f29;border-right:1px solid #173945;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.cards-pane-head{padding:14px;border-bottom:1px solid #173945;display:flex;flex-direction:column;gap:10px;flex:none}
.cards-pane-head strong{font-size:12px;letter-spacing:.5px}
.cards-pane-head input{width:100%;background:#061b24;border:1px solid #2c5965;color:#fff;border-radius:6px;padding:10px}
.card-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:7px}
.card-list button{background:#0a2631;border:1px solid #28505c;color:#fff;border-radius:7px;padding:9px 10px;text-align:left;cursor:pointer;font-weight:700}
.card-list button:hover,.card-list button.active{background:#10404f;border-color:#3dc8bf}
.card-list button small{display:block;color:#8fa9b0;font-weight:500;margin-top:4px}
.card-list button.shared-saved{border-color:#2b8d86;background:linear-gradient(90deg,rgba(33,208,197,.11),#0a2631 34%)}
.card-list button.shared-saved small::after{content:"  •  ☁ Saved";color:#78e2d9;font-weight:700}
.mask-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;align-items:start}
.mask-preview-wrap{background:#020202;border:1px solid #2c5965;border-radius:8px;padding:8px;display:grid;place-items:center;min-height:320px}
.mask-preview-wrap canvas{width:100%;height:auto;max-height:420px;object-fit:contain}
.helper-inline{color:#90aab1;font-size:11px;margin-bottom:6px}
@media(max-width:1450px){.workspace{grid-template-columns:220px 450px 185px 1fr}.mask-editor-grid{grid-template-columns:1fr}}

.cards-pane-head select{width:100%;background:#061b24;border:1px solid #2c5965;color:#fff;border-radius:6px;padding:9px;font:600 13px "Segoe UI",Arial,sans-serif}
.ai-generation-status{margin-top:10px;padding:10px 12px;border:1px solid rgba(85,201,40,.28);border-radius:8px;background:rgba(85,201,40,.08);color:#c8f3b7;font-size:12px;line-height:1.45}
.ai-generation-status.loading::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor;animation:aiPulse 1.1s ease-in-out infinite}
.ai-generation-status.error{border-color:rgba(255,91,91,.38);background:rgba(255,91,91,.09);color:#ffb7b7}
.ai-generation-status.success{border-color:rgba(80,191,255,.34);background:rgba(80,191,255,.08);color:#b8e7ff}
button:disabled{opacity:.55;cursor:not-allowed}
@keyframes aiPulse{50%{opacity:.35;transform:scale(.72)}}
@media(max-width:1350px){.brand span{display:none}.editor-name{display:none}.save-state{min-width:150px}.topbar-button{padding:7px 8px;font-size:11px}}

[hidden]{display:none!important}
.card-lock-button{border-color:#55737b}.card-lock-button.locked{background:#5d4212;border-color:#f1b642;color:#fff2ca;box-shadow:0 0 0 1px rgba(241,182,66,.18) inset}.card-locked-badge{margin-left:auto;padding:5px 9px;border:1px solid #d79c31;border-radius:999px;background:rgba(103,69,12,.72);color:#ffe3a2;font-size:10px;font-weight:900;letter-spacing:.45px}.mask-launch-card{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,rgba(33,208,197,.08),rgba(8,29,39,.1))}.mask-launch-card h2{margin-bottom:4px}.mask-launch-card p{margin:0}.mask-launch-button{flex:none;padding:12px 18px!important}.mask-selection-summary{display:inline-flex;margin-top:12px;padding:5px 9px;border:1px solid #2e5a65;border-radius:999px;background:#071f29;color:#9fb8be;font-size:11px;font-weight:750}.mask-selection-summary.has-selection{border-color:#2d8a82;color:#87e7df;background:rgba(24,111,103,.18)}

.modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,8,12,.76);backdrop-filter:blur(12px) saturate(.7);-webkit-backdrop-filter:blur(12px) saturate(.7)}body.modal-open{overflow:hidden}.mask-editor-modal{width:min(1800px,96vw);height:min(940px,94vh);display:flex;flex-direction:column;overflow:hidden;border:1px solid #315965;border-radius:14px;background:#071b24;box-shadow:0 30px 100px rgba(0,0,0,.72),0 0 0 1px rgba(99,224,216,.05) inset}.mask-modal-header{height:70px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 22px;border-bottom:1px solid #21424c;background:linear-gradient(180deg,#0d2a34,#081e27)}.mask-modal-kicker{display:block;margin-bottom:3px;color:#62d8d0;font-size:9px;font-weight:900;letter-spacing:1.4px}.mask-modal-header h2{margin:0;font-size:22px}.mask-modal-header-actions{display:flex;align-items:center;gap:12px}.mask-modal-lock-state{padding:6px 10px;border:1px solid #946820;border-radius:999px;background:rgba(111,74,10,.42);color:#ffdda0;font-size:11px;font-weight:800}.mask-close-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #3c6069;border-radius:8px;background:#102f39;color:#d9e9eb;font-size:26px;line-height:1;cursor:pointer}.mask-close-button:hover{background:#18424d;color:#fff}

.mask-modal-body{min-height:0;flex:1;display:grid;grid-template-columns:82px minmax(0,1fr)}.mask-tool-rail{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:12px 9px;border-right:1px solid #1d3d47;background:#06171f}.mask-tool{min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:8px;background:transparent;color:#93aeb4;cursor:pointer}.mask-tool span{font-size:22px;line-height:1}.mask-tool small{font-size:9px;font-weight:800;letter-spacing:.25px}.mask-tool:hover{background:#102d37;color:#fff}.mask-tool.active-mode{border-color:#28c7bd;background:rgba(20,131,122,.28);color:#b9fff9;box-shadow:0 0 0 1px rgba(40,199,189,.08) inset}.mask-tool-danger{margin-top:auto;color:#e8a2a2}.mask-tool-danger:hover{background:rgba(136,34,34,.26);color:#ffc3c3}.mask-tool-separator{height:1px;margin:3px 5px;background:#1d3d47}

.mask-workspace{min-width:0;min-height:0;display:flex;flex-direction:column}.mask-command-bar{min-height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid #1d3d47;background:#09212a}.mask-command-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.mask-command-bar button{border:1px solid #315965;border-radius:6px;background:#0d2c36;color:#e6f1f2;padding:8px 10px;font:700 11px "Segoe UI",Arial,sans-serif;cursor:pointer}.mask-command-bar button:hover{background:#15404b}.mask-view-controls{justify-content:flex-end}.mask-tool-status{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7de1da;font-size:11px;font-weight:800}.mask-zoom-readout{padding:0 5px;color:#8da7ad;font-size:11px}.mask-zoom-readout strong{color:#e5fbfa}

.mask-split{--mask-left:80%;min-height:0;flex:1;display:flex;align-items:stretch;padding:12px;background:#04151c}.mask-pane{min-width:0;min-height:0;display:flex;flex-direction:column}.mask-art-pane{flex:0 0 var(--mask-left)}.mask-result-pane{flex:1}.mask-pane-heading{height:42px;flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:0 4px 7px;color:#dcebed}.mask-pane-heading strong{font-size:12px}.mask-pane-heading span{color:#77939a;font-size:10px;text-align:right}.mask-divider{position:relative;width:14px;flex:0 0 14px;display:grid;place-items:center;cursor:col-resize;touch-action:none;outline:none}.mask-divider::before{content:"";position:absolute;inset:0 4px;border-radius:7px;background:#12313a;border:1px solid #294d57}.mask-divider span{position:relative;width:2px;height:32px;border-left:1px solid #79b5b2;border-right:1px solid #79b5b2;opacity:.65}.mask-divider:hover::before,.mask-divider:focus-visible::before,.mask-divider.dragging::before{background:#176e68;border-color:#39d2c8}.mask-wrap,.mask-preview-wrap{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;container-type:size;border:1px solid #294c56;border-radius:8px;background:repeating-conic-gradient(#102d36 0 25%,#0b252e 0 50%) 50%/18px 18px;padding:10px}.mask-wrap{max-width:none}.mask-wrap canvas{display:block;width:min(100cqw,calc(100cqh * 4 / 3));height:auto;max-width:100%;max-height:100%;aspect-ratio:4 / 3;object-fit:contain;cursor:crosshair;background:#102e37;box-shadow:0 12px 32px rgba(0,0,0,.3)}.mask-wrap canvas.tool-edit{cursor:default}.mask-wrap canvas.tool-pan{cursor:grab}.mask-wrap canvas.tool-pan.panning{cursor:grabbing}.mask-wrap canvas.card-locked{cursor:not-allowed}.mask-preview-wrap{min-height:0;background:#020202}.mask-preview-wrap canvas{display:block;width:min(100cqw,calc(100cqh * 733 / 1024));height:auto;max-width:100%;max-height:100%;aspect-ratio:733 / 1024;object-fit:contain;background:#000;box-shadow:0 12px 32px rgba(0,0,0,.38)}.mask-help-bar{min-height:40px;flex:none;display:flex;align-items:center;justify-content:center;gap:18px;padding:7px 12px;border-top:1px solid #1d3d47;background:#071b24;color:#809ba1;font-size:10px}.mask-help-bar kbd{display:inline-block;min-width:20px;margin-right:3px;padding:2px 5px;border:1px solid #3c5a62;border-bottom-width:2px;border-radius:4px;background:#102c35;color:#d8e8ea;font:700 10px "Segoe UI",Arial,sans-serif;text-align:center}

.confirm-modal-backdrop{z-index:1100}.confirm-modal-card{width:min(440px,92vw);padding:30px;border:1px solid #3d5e67;border-radius:14px;background:linear-gradient(180deg,#0d2a34,#071b24);box-shadow:0 28px 90px rgba(0,0,0,.7);text-align:center}.confirm-lock-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 14px;border:1px solid #8e671e;border-radius:50%;background:rgba(130,88,16,.28);font-size:27px}.confirm-modal-card h2{margin:0 0 9px}.confirm-modal-card p{margin:0;color:#9eb3b8;line-height:1.55}.confirm-modal-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.confirm-modal-actions button{padding:10px 15px;border-radius:7px;color:#fff;cursor:pointer}

body.card-is-locked .editor-pane input:disabled,body.card-is-locked .editor-pane textarea:disabled,body.card-is-locked .editor-pane select:disabled{color:#789097;background:#07191f;border-color:#203d45}body.card-is-locked .types-pane{filter:saturate(.58)}body.card-is-locked .swatch{pointer-events:none;opacity:.45}.mask-editor-modal button:disabled{opacity:.35;cursor:not-allowed}.mask-editor-modal button:disabled:hover{background:inherit}

@media(max-width:1050px){.mask-editor-modal{width:98vw;height:96vh}.mask-modal-body{grid-template-columns:68px minmax(0,1fr)}.mask-tool-rail{padding:10px 6px}.mask-tool{min-height:56px}.mask-help-bar{gap:8px;flex-wrap:wrap}.mask-pane-heading span{display:none}.mask-split{--mask-left:68%}}