.commerce-screen{--craft-gold:#e8c784;--craft-jade:#a2e9c9;--craft-ink:#101a22;max-width:1540px;margin:0 auto;padding-bottom:30px}
.commerce-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:5px 0 18px;padding:21px 25px;border:1px solid #a0844e88;border-radius:17px;background:linear-gradient(90deg,#111b25f5,#141c2c99),var(--commerce-art) center/cover;box-shadow:inset 0 0 0 3px #ceb47d0c,0 9px 30px #0005}
.commerce-heading h1{font:clamp(2rem,4vw,3rem) var(--serif);margin:4px 0 5px}.commerce-heading p{color:var(--muted);font-size:.86rem;max-width:680px;margin:0}.commerce-wallet{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:125px}.commerce-currency{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid #af8c4b9c;border-radius:99px;background:#0c1522dc;color:var(--craft-gold);white-space:nowrap}.commerce-currency svg{width:20px;height:20px}.commerce-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px;padding:5px;background:#111622b8;border:1px solid #9b7e456b;border-radius:11px}.commerce-tabs .tab{flex:1;padding:11px 15px;min-width:max-content;border-radius:7px}.commerce-tabs .tab.selected{background:linear-gradient(#7b613d,#413b2d);box-shadow:inset 0 1px #ffe6aa77,0 2px 7px #0006;color:#fff0ce}
.commerce-controls{display:flex;gap:12px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin:13px 0}.commerce-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.commerce-controls .filter,.commerce-filters .filter{display:grid;gap:5px}.commerce-controls .filter>span,.commerce-filters .filter>span{font-size:.72rem;color:#c7baa8}.commerce-controls select,.commerce-filters select{max-width:180px}.commerce-count{font-size:.76rem;color:#d7c394;white-space:nowrap;margin-left:auto}.commerce-search{display:flex;align-items:end;gap:7px}.commerce-search input{width:min(240px,45vw)}
.commerce-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:18px}.commerce-card{min-width:0;transition:filter .18s,transform .18s}.commerce-card .collection-body{gap:6px}.commerce-card .card-image{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;border:1px solid #c0af8a88}.commerce-card .card-image img{width:100%;height:100%;object-fit:cover}.commerce-card h3{font-size:1rem;line-height:1.2;min-height:2.4em;margin:8px 0 3px;overflow-wrap:anywhere}.commerce-card .effect-badges{justify-content:center}.commerce-card .cost{z-index:3}.commerce-card .card-actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:auto;padding-top:12px}.commerce-card .card-actions .btn{padding:7px 9px;font-size:.7rem}.commerce-card .card-rare{text-align:center}.commerce-card .technique-type{margin:4px auto}.commerce-card .collection-body{min-height:190px;display:flex;flex-direction:column;align-items:center;text-align:center}.commerce-card.is-selected{filter:drop-shadow(0 0 10px #98ffcf66)}.commerce-card.is-locked .card-image img{filter:saturate(.62) brightness(.72)}.commerce-card .commerce-lock{position:absolute;right:7px;bottom:7px;display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:7px;background:#0d1221e8;color:#e0c7f4;font-size:.67rem;z-index:2}.commerce-lock svg{width:14px;height:14px}.card-level-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid #b6995d88;background:#0e1825de;border-radius:5px;color:#f4dca9;padding:3px 7px;font-size:.68rem;white-space:nowrap}.card-level-pill svg{width:13px;height:13px}.commerce-card .level-overlay{position:absolute;left:7px;bottom:7px}.commerce-owned{font-size:.72rem;color:#c4cfca}.commerce-price{color:#ffe4a4;font-size:.83rem;display:flex;align-items:center;justify-content:center;gap:5px}.commerce-price svg{width:16px;height:16px}.commerce-requirement{font-size:.67rem;color:#cbb2e5;line-height:1.4;min-height:1.4em}.commerce-pages{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:23px;color:#d4c398;font-size:.85rem}.commerce-empty{padding:45px 22px;text-align:center;border:1px dashed #a28a5366;background:#111a2588;border-radius:16px}.commerce-empty>svg{height:40px;width:40px;color:#baaa7a}.commerce-empty h3{margin:10px}.commerce-empty p{color:var(--muted);font-size:.85rem}.commerce-empty .dialog-actions{justify-content:center}
.material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:13px}.material-card{display:flex;gap:13px;padding:15px;align-items:center;min-width:0;border:1px solid #a18a5666;border-radius:13px;background:linear-gradient(145deg,#242932e8,#121c27ed);box-shadow:inset 0 1px #fff1}.material-card h3{font-size:1rem;margin:3px 0 5px}.material-card .material-info{flex:1;min-width:0}.material-card .material-info p{font-size:.73rem;line-height:1.4;color:#bdb4a5;margin:5px 0}.material-card .material-info .btn{margin-top:8px;padding:7px 10px;font-size:.74rem}.material-icon{display:inline-grid;place-items:center;flex-shrink:0;width:64px;height:64px;padding:5px;border:2px solid #8e9b8d;border-radius:15px;background:radial-gradient(circle at 35% 22%,#b3f4dc36,#10222a 65%);box-shadow:inset 1px 1px #efffe24d,inset -2px -3px #0008,0 3px 7px #0005;overflow:hidden}.material-icon svg{width:37px;height:37px;color:var(--material-color,#adedd4);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--material-color,#adedd4),transparent 50%))}.material-icon img{width:100%;height:100%;object-fit:cover;border-radius:9px}.material-icon.grade-uncommon{border-color:#72b98e}.material-icon.grade-rare{border-color:#87a3eb}.material-icon.grade-legendary{border-color:#e4b766}.material-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;color:#bcac91;font-size:.65rem}.material-tier{padding:3px 5px;border:1px solid #8e7a4980;border-radius:4px;background:#111b26;color:#dfc799}.material-card .material-count{font-size:.74rem;color:#bdd1c9}
.workbench-layout{display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:22px;align-items:start}.workbench-layout .commerce-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,165px),1fr));gap:13px}.workbench-layout .commerce-card h3{font-size:.9rem}.workbench-layout .commerce-card .collection-body{min-height:170px}.workbench-panel{position:sticky;top:16px;border:1px solid #af945a9c;border-radius:17px;padding:19px;background:linear-gradient(150deg,#29302ce8,#101b27f5 55%);box-shadow:inset 0 0 0 3px #e8c87c0b,0 12px 35px #0008}.workbench-panel>.eyebrow{margin-bottom:8px}.workbench-panel h2{font:1.6rem var(--serif);margin:6px 0}.workbench-output{display:flex;align-items:center;gap:15px;margin:13px 0 17px}.workbench-output>img{width:88px;height:102px;object-fit:cover;border-radius:12px;border:2px solid #a3905e;box-shadow:0 5px 13px #0006}.workbench-output h3{font:1.17rem var(--serif);margin:5px 0 7px}.workbench-output .type-line{font-size:.7rem;color:#c4bea9}.workbench-output .type-line .technique-type{justify-content:flex-start}.workbench-caption{font-size:.75rem;color:#bfb9a8;line-height:1.5}.workbench-divider{height:1px;background:linear-gradient(90deg,transparent,#c5a96a77,transparent);margin:16px 0}.ingredient-list{display:grid;gap:8px;margin:13px 0}.ingredient-row{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid #a28b5b4d;border-radius:9px;background:#0b162187}.ingredient-row .material-icon{width:44px;height:44px;border-radius:10px;padding:3px}.ingredient-row .material-icon svg{width:26px;height:26px}.ingredient-row .ingredient-label{min-width:0;flex:1}.ingredient-row b{font-size:.76rem;display:block}.ingredient-row small{display:block;color:#aea897;font-size:.63rem;line-height:1.35;margin-top:3px}.ingredient-row .ingredient-quantity{font-size:.79rem;white-space:nowrap;color:#bdebc9}.ingredient-row.short{border-color:#ac697a7a}.ingredient-row.short .ingredient-quantity{color:#f7bac2}.ingredient-row .ingredient-quantity em{font-style:normal;color:#a9a18d}.ingredient-row .material-link{border:0;background:transparent;color:#e2c487;font-size:.65rem;padding:3px 0;margin:3px 0 0;cursor:pointer;text-decoration:underline}.workbench-fee{display:flex;justify-content:space-between;align-items:center;font-size:.83rem;padding:10px 1px;border-bottom:1px solid #c3a9692e}.workbench-fee b{display:flex;gap:5px;align-items:center;color:#f4d79c}.workbench-fee b svg{width:17px;height:17px}.workbench-blockers{display:grid;gap:7px;padding:12px;background:#281b2eaa;border:1px solid #a479a444;border-radius:9px;margin:13px 0;list-style:none}.workbench-blockers li{display:flex;gap:7px;color:#e0c0db;font-size:.74rem;line-height:1.45}.workbench-blockers svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}.workbench-panel .workbench-primary{width:100%;justify-content:center;margin-top:14px;min-height:45px}.workbench-panel .workbench-links{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:12px}.workbench-panel .workbench-links .btn{font-size:.7rem;padding:6px 8px}.workbench-notice{font-size:.72rem;line-height:1.5;color:#c5c0aa;padding:10px;border-left:2px solid #c0aa70;background:#d4b26b0a;margin:11px 0}.workbench-notice.danger{border-color:#cc7c8c;color:#efc1c7}.workbench-steps{display:flex;gap:6px;margin:12px 0;justify-content:center}.workbench-step{height:7px;flex:1;border-radius:3px;background:#1b2630;border:1px solid #85734a88}.workbench-step.filled{background:linear-gradient(#d7e6b9,#57866a);box-shadow:0 0 7px #9bd7b533}.upgrade-comparison{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center;margin:14px 0}.upgrade-comparison .effect-badges{justify-content:center;flex-wrap:wrap}.upgrade-comparison>svg{width:20px;color:#dfc689}.upgrade-comparison .comparison-side{text-align:center;background:#0e17228f;border:1px solid #b0965b44;border-radius:9px;padding:10px 6px}.upgrade-comparison small{font-size:.65rem;color:#aaa990;display:block;margin-bottom:8px}.upgrade-comparison .comparison-side:last-child{border-color:#94cf9a7a}.upgrade-rules{list-style:none;display:grid;gap:7px;margin:10px 0;padding:0;color:#c9c3b4;font-size:.76rem}.upgrade-rules li{padding-left:11px;border-left:2px solid #71866d}
.purchase-form,.workshop-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:15px 0}.purchase-form .field,.workshop-form .field{flex:1;min-width:75px}.purchase-form input,.workshop-form input{width:100%;min-width:75px}.purchase-form .btn,.workshop-form .btn{min-height:42px}.purchase-summary{padding:15px;border-radius:12px;background:#101d27;border:1px solid #ac945d66}.purchase-summary .material-card{border:0;padding:0;background:none;box-shadow:none}.purchase-summary .commerce-price{margin-top:10px;font-size:1rem}.card-inspect-links{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:15px 0}.card-inspect-links .btn{font-size:.75rem;padding:9px 11px}.inspection-level{display:flex;justify-content:center;align-items:center;gap:7px;margin:12px 0;color:#d4c3a1;font-size:.8rem}.commerce-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px}.commerce-item{display:flex;gap:12px;padding:14px;border-radius:12px;background:linear-gradient(140deg,#2c2c30e6,#131e2be6);border:1px solid #a68c5955}.commerce-item>button{border:0;padding:0;background:transparent;align-self:start}.commerce-item>button img{width:68px;height:68px;object-fit:cover;border-radius:10px;border:1px solid #bead825d}.commerce-item>div{min-width:0;flex:1}.commerce-item h3{font-size:1rem;margin:3px 0 7px}.commerce-item p{color:#c1b7a4;font-size:.74rem;line-height:1.4;margin-bottom:9px}.commerce-item .btn{padding:7px 9px;font-size:.73rem}.commerce-item .ingredient-list{margin-top:10px}.commerce-item .ingredient-row{padding:5px}.commerce-item .ingredient-row img{width:27px;height:27px;object-fit:cover;border-radius:5px}.commerce-item .ingredient-row .ingredient-label{font-size:.68rem}.commerce-subtabs{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}.commerce-subtabs .btn{font-size:.72rem;padding:7px 10px}.commerce-subtabs .selected{border-color:#ddc78f;background:#5b5032}
.deck-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}.deck-workspace .commerce-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:13px}.deck-workspace .commerce-card h3{font-size:.93rem}.deck-presets{display:flex;gap:10px;overflow-x:auto;margin:12px 0 18px;padding:3px 1px 9px;scrollbar-width:thin}.deck-preset{min-width:185px;max-width:235px;flex-shrink:0;display:grid;grid-template-columns:40px 1fr;gap:8px 11px;text-align:left;padding:12px;border:1px solid #947e4b7c;border-radius:12px;background:linear-gradient(145deg,#2c2c2aee,#14202c);color:#e8ddc4;cursor:pointer}.deck-preset.active{border-color:#a4dba8;box-shadow:inset 0 0 0 1px #8bdcb32e}.deck-preset.editing{background:linear-gradient(145deg,#414633,#182a2f)}.deck-preset>svg{height:35px;width:35px;color:#d7c18a;grid-row:1/3;align-self:center}.deck-preset b{font-size:.87rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deck-preset small{font-size:.66rem;color:#bfb5a0}.deck-preset-new{min-width:130px;grid-template-columns:1fr;place-items:center;text-align:center;border-style:dashed}.deck-preset-new>svg{grid-row:auto;width:23px;height:23px}.deck-tray{position:sticky;top:16px;padding:18px;border-radius:16px;border:1px solid #af945c91;background:linear-gradient(155deg,#2c322fe8,#101a26f5);box-shadow:inset 0 0 0 3px #d5bc7c09,0 14px 35px #0007}.deck-tray h2{font:1.5rem var(--serif);margin:4px 0 13px}.deck-tray .deck-status{display:flex;justify-content:space-between;gap:10px;margin-bottom:15px;font-size:.8rem;color:#b4d4bf}.deck-tray .deck-status .incomplete{color:#eab7b9}.deck-tray .field input{width:100%}.deck-tray-list{display:grid;gap:6px;max-height:430px;overflow-y:auto;padding-right:3px;margin:14px 0;scrollbar-width:thin}.deck-tray-row{display:flex;align-items:center;gap:8px;background:#0f1821d4;border:1px solid #9c865047;border-radius:8px;padding:5px 7px;min-width:0}.deck-tray-row img{width:35px;height:42px;object-fit:cover;border:1px solid #bca9746b;border-radius:5px}.deck-tray-row .deck-tray-name{min-width:0;flex:1}.deck-tray-row b{font-size:.72rem;display:block;overflow-wrap:anywhere}.deck-tray-row small{font-size:.61rem;color:#baae95}.deck-tray-row .btn{padding:4px 7px;font-size:.74rem;min-width:26px;min-height:30px}.deck-tray-row .deck-copy-count{font-size:.76rem;color:#ead8af;min-width:15px;text-align:center}.deck-tray-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.deck-tray-actions .btn{flex:1;justify-content:center;font-size:.76rem;padding:9px 10px}.deck-tray-actions .quiet{flex:auto}.deck-tray .deck-curve{display:flex;align-items:end;gap:9px;height:65px;padding:10px 7px 0;border-bottom:1px solid #b7a36d55;margin:12px 0 6px}.deck-curve>div{flex:1;display:flex;align-items:center;flex-direction:column;justify-content:end;height:100%;gap:3px;position:relative}.deck-curve i{width:75%;min-height:3px;background:linear-gradient(#c3edda,#477e6b);border:1px solid #9cbba27d;border-radius:3px 3px 0 0;display:block}.deck-curve b{font-size:.61rem;color:#d9c99d;font-weight:normal}.deck-curve-label{text-align:center;font-size:.65rem;color:#aea995}.deck-schools{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}.deck-school-pill{font-size:.63rem;border:1px solid #9384556b;border-radius:5px;padding:4px 6px;color:#ccc2a5;background:#101e25}.deck-change-notice{padding:9px 10px;border:1px solid #b095594d;border-radius:8px;background:#ddbc6310;font-size:.7rem;color:#dfd0a9;line-height:1.5}.deck-counter{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:auto;padding-top:9px}.deck-counter .btn{min-width:32px;padding:5px 9px}.deck-counter span{font-size:.74rem;color:#c8d6c9}.deck-workspace .commerce-card .collection-body{min-height:150px}
.material-icon>img.material-icon{border:0;padding:0;background:none;box-shadow:none;border-radius:9px}
@media(min-width:1500px){.workbench-layout{grid-template-columns:minmax(0,1fr) 395px}.deck-workspace{grid-template-columns:minmax(0,1fr) 370px}}
@media(max-width:1100px){.workbench-layout{grid-template-columns:minmax(0,1fr) 325px;gap:15px}.deck-workspace{grid-template-columns:minmax(0,1fr) 300px;gap:15px}.workbench-panel,.deck-tray{padding:15px}.commerce-heading{padding:17px}.commerce-grid{gap:12px}}
@media(max-width:780px){.workbench-layout,.deck-workspace{grid-template-columns:1fr}.workbench-panel,.deck-tray{position:static;grid-row:1}.workbench-layout .commerce-grid,.deck-workspace .commerce-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-tray-list{max-height:240px}.deck-tray .deck-curve{height:50px}.commerce-heading{align-items:start}.commerce-heading p{font-size:.76rem}.commerce-wallet{min-width:auto}.commerce-currency{padding:7px 9px}.commerce-tabs{gap:3px}.commerce-tabs .tab{padding:9px 10px;font-size:.74rem}.commerce-controls{gap:9px}.commerce-filters{gap:7px}.commerce-filters .filter{flex:1;min-width:90px}.commerce-filters select{width:100%;max-width:none}.commerce-count{font-size:.69rem}.commerce-search{width:100%}.commerce-search .filter{flex:1}.commerce-search input{width:100%}.commerce-search>.btn{min-height:38px}.commerce-heading .commerce-wallet{flex-direction:column}.commerce-heading h1{font-size:2rem}.workbench-output{margin-bottom:12px}.workbench-panel .ingredient-list{grid-template-columns:1fr 1fr}.workbench-panel .ingredient-row{flex-wrap:wrap;min-width:0}.workbench-panel .ingredient-row .ingredient-label{min-width:70px}.workbench-panel .ingredient-row .ingredient-quantity{margin-left:auto}.workbench-panel .workbench-primary{margin-top:9px}.upgrade-comparison{max-width:420px;margin-inline:auto}.deck-tray .deck-tray-actions{margin-top:8px}}
@media(max-width:520px){.commerce-heading{padding:14px;gap:9px;margin-top:0}.commerce-heading h1{font-size:1.75rem}.commerce-heading .eyebrow{font-size:.56rem}.commerce-currency{font-size:.77rem;gap:4px}.commerce-currency svg{width:16px;height:16px}.commerce-grid,.workbench-layout .commerce-grid,.deck-workspace .commerce-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.commerce-card.seal-card.collection-card{padding:24px 10px 25px}.commerce-card h3,.workbench-layout .commerce-card h3,.deck-workspace .commerce-card h3{font-size:.83rem;min-height:2.4em}.commerce-card .collection-body{min-height:173px}.commerce-card .card-actions .btn{font-size:.64rem;padding:6px}.commerce-card .commerce-requirement{font-size:.61rem}.commerce-card .card-level-pill{font-size:.6rem;padding:3px 4px}.commerce-card .commerce-owned{font-size:.64rem}.commerce-card .effect-badges{gap:3px}.commerce-card .effect-badges>span{font-size:.65rem}.commerce-filters select{font-size:.72rem}.commerce-filters .filter>span{font-size:.65rem}.commerce-tabs .tab{font-size:.69rem;min-width:auto;flex-basis:calc(50% - 6px);padding:10px 6px}.commerce-item-grid,.material-grid{grid-template-columns:1fr}.commerce-item{padding:11px}.workbench-panel{padding:15px}.workbench-panel .ingredient-list{grid-template-columns:1fr}.workbench-panel .ingredient-row{flex-wrap:nowrap}.deck-tray{padding:14px}.deck-preset{min-width:170px}.deck-preset-new{min-width:110px}.deck-tray-actions .btn{font-size:.72rem}.commerce-card .commerce-lock{font-size:.56rem;padding:4px}.commerce-owned{font-size:.67rem}.commerce-price{font-size:.76rem}.deck-counter{gap:5px}.deck-counter .btn{min-width:28px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.commerce-card{transition:none}.commerce-card.is-selected{transform:none}}
.commerce-card .level-overlay{z-index:2;background:#102a25fa;border-color:#d3b875;color:#ffe9bb;font-weight:700;box-shadow:0 1px 6px #000b}