.deck-maker-page { min-height: 100vh; }
.deck-maker-shell { max-width: 1280px; }
.deck-maker-hero { padding: 56px 0 32px; }
.deck-maker-hero h1 { font-size: clamp(38px, 7vw, 72px); }
.deck-maker-hero > p:last-child { max-width: 760px; color: #b7c6d1; line-height: 1.8; }
.deck-workspace { display: grid; gap: 18px; padding-bottom: 72px; }
.deck-topbar, .selected-panel, .catalog-panel, .validation-panel { border: 1px solid var(--line); background: rgba(10,21,31,.92); border-radius: 18px; padding: 18px; }
.deck-topbar { display: flex; gap: 14px; align-items: end; justify-content: space-between; position: sticky; top: 82px; z-index: 8; backdrop-filter: blur(12px); }
.deck-name-field { display: grid; gap: 7px; color: var(--muted); font-size: 11px; width: min(520px, 100%); }
.deck-name-field input, .deck-maker-filters select { width: 100%; border: 1px solid var(--line); background: #071019; color: var(--text); border-radius: 12px; padding: 12px 13px; }
.deck-actions-primary { display: flex; gap: 8px; }
.deck-actions-primary button, .zone-tabs button, .quantity button { border: 1px solid var(--line); background: #0e1b27; color: var(--text); border-radius: 11px; padding: 11px 14px; }
.deck-actions-primary .primary, .zone-tabs .is-active { background: var(--accent); color: #04121a; border-color: var(--accent); font-weight: 800; }
.zone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: sticky; top: 166px; z-index: 7; }
.zone-tabs button { display: flex; justify-content: center; gap: 8px; }
.panel-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-head h2 { font-size: clamp(24px, 3.5vw, 34px); }
.panel-head > span, .panel-head > strong { color: var(--muted); font-size: 12px; }
.selected-list { display: grid; gap: 8px; }
.selected-card { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid #1b3040; border-radius: 13px; padding: 8px; background: #08131d; }
.selected-card img { width: 54px; aspect-ratio: 5/7; object-fit: cover; border-radius: 7px; background: #132433; }
.selected-card .card-copy { min-width: 0; }
.selected-card .card-copy strong, .selected-card .card-copy small { display: block; overflow-wrap: anywhere; }
.selected-card .card-copy small { color: var(--muted); margin-top: 3px; }
.quantity { display: grid; grid-template-columns: 42px 34px 42px; align-items: center; text-align: center; }
.quantity button { padding: 9px 0; font-size: 18px; }
.deck-maker-filters { display: grid; grid-template-columns: minmax(220px,1fr) 150px 160px auto; gap: 9px; align-items: center; margin-bottom: 14px; }
.preview-only { display: flex; gap: 7px; align-items: center; font-size: 12px; color: #c5d3dc; white-space: nowrap; }
.deck-card-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.deck-card { position: relative; border: 1px solid #203646; border-radius: 12px; background: #08131d; color: var(--text); padding: 6px; text-align: left; min-width: 0; }
.deck-card:hover { border-color: var(--accent); }
.deck-card img { width: 100%; aspect-ratio: 5/7; object-fit: cover; border-radius: 8px; display: block; background: #132433; }
.deck-card .card-name { display: block; margin-top: 7px; font-size: 11px; font-weight: 800; line-height: 1.35; min-height: 30px; }
.deck-card .card-id { color: var(--muted); font-size: 9px; }
.card-badge { position: absolute; top: 10px; left: 10px; background: #ffcc66; color: #201400; font-weight: 900; font-size: 9px; padding: 4px 6px; border-radius: 999px; box-shadow: 0 2px 10px #0008; }
.card-count-badge { position: absolute; top: 10px; right: 10px; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #03121a; font-weight: 900; box-shadow: 0 2px 10px #0008; }
.validation-list { display: grid; gap: 7px; }
.validation-item { border-left: 3px solid #e7b95a; padding: 8px 10px; background: #101a21; color: #d9e2e8; font-size: 12px; line-height: 1.5; }
.validation-item.error { border-color: #ff6b73; }
.validation-ok { color: #86efac; font-weight: 800; }
.empty-copy { color: var(--muted); margin: 8px 0; }
.deck-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%,20px); opacity: 0; pointer-events: none; background: #effbff; color: #071019; border-radius: 999px; padding: 10px 15px; font-size: 12px; font-weight: 800; transition: .18s ease; z-index: 30; box-shadow: 0 10px 30px #0008; }
.deck-toast.show { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 980px) { .deck-card-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .deck-maker-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .deck-maker-hero { padding-top: 34px; }
  .deck-topbar { top: 70px; display: grid; }
  .deck-actions-primary { display: grid; grid-template-columns: 1fr 1fr; }
  .zone-tabs { top: 196px; }
  .deck-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .deck-maker-filters { grid-template-columns: 1fr 1fr; }
  .deck-maker-filters input { grid-column: 1 / -1; }
  .selected-card { grid-template-columns: 46px minmax(0,1fr) auto; }
  .selected-card img { width: 46px; }
  .quantity { grid-template-columns: 38px 28px 38px; }
}
@media (max-width: 420px) { .deck-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .zone-tabs button { padding-inline: 6px; font-size: 12px; } }

/* Mobile containment for deck maker */
.deck-maker-page { overflow-x: clip; }
.deck-maker-shell, .deck-workspace, .deck-topbar, .zone-tabs,
.selected-panel, .catalog-panel, .validation-panel { min-width: 0; width: 100%; }
.deck-maker-filters > * { min-width: 0; }
@media (max-width: 720px) {
  .deck-maker-page .header-nav { max-width: 42vw; }
  .deck-maker-page .header-nav a[aria-current="page"] { display: none; }
  .deck-maker-hero > p:last-child { overflow-wrap: anywhere; }
  .zone-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zone-tabs button { min-width: 0; padding: 9px 4px; gap: 3px; flex-direction: column; align-items: center; line-height: 1.15; }
  .zone-tabs button strong { font-size: 11px; }
}

@media (max-width: 720px) {
  .deck-maker-page .zone-tabs {
    grid-template-columns: repeat(3, calc((100% - 16px) / 3));
    overflow: hidden;
  }
  .deck-maker-page .zone-tabs button {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
  }
}

.deck-maker-return{border:1px solid rgba(86,215,255,.24);border-radius:18px;background:rgba(10,21,31,.92);padding:18px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.deck-maker-return>div:first-child{display:grid;gap:5px}.deck-maker-return span{color:var(--muted);font-size:12px;line-height:1.6}.deck-maker-return>div:last-child{display:flex;gap:8px;flex:0 0 auto}.deck-maker-return a{border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--accent-2);text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
@media(max-width:720px){.deck-maker-return{display:grid}.deck-maker-return>div:last-child{display:grid;grid-template-columns:1fr 1fr}.deck-maker-return a{text-align:center}}

.png-preview-overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.78);display:grid;place-items:center;padding:18px}
.png-preview-card{width:min(960px,100%);max-height:92vh;overflow:auto;background:#0b151e;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 20px 60px #000a}
.png-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.png-preview-head strong{font-size:16px}.png-preview-head button{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#12202c;color:var(--text);font-size:22px}
.png-preview-card img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}.png-preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.png-preview-actions a{min-height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;color:var(--text);text-decoration:none;font-weight:800}.png-preview-actions a.primary{background:var(--accent);border-color:var(--accent);color:#04121a}.png-preview-card small{display:block;margin-top:10px;color:var(--muted);line-height:1.5}
@media(max-width:720px){.png-preview-overlay{padding:8px}.png-preview-card{padding:10px;border-radius:14px}.png-preview-actions{grid-template-columns:1fr}.png-preview-card small{font-size:11px}}

/* feedback round 1 */
.deck-topbar{position:static!important;top:auto!important}
.deck-sticky-tools{position:sticky;top:68px;z-index:12;display:grid;gap:8px;padding:8px 0;background:linear-gradient(#050d14 82%,transparent)}
.deck-sticky-tools .zone-tabs{position:static;top:auto}
.deck-search-sticky{width:100%;min-height:44px;border:1px solid var(--line);background:#071019;color:var(--text);border-radius:12px;padding:11px 13px;font-size:16px}
.quick-filter{display:flex;gap:6px;align-items:center;justify-content:center;min-height:40px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;color:#c5d3dc;font-size:12px;white-space:nowrap}
.leader-suggestions{border:1px solid rgba(86,215,255,.3);border-radius:14px;padding:12px 14px;background:#0b1924;display:flex;align-items:center;justify-content:space-between;gap:12px}.leader-suggestions[hidden]{display:none}.leader-suggestions>div{display:grid;gap:3px}.leader-suggestions span{color:var(--muted);font-size:11px}.leader-suggestions button{border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#04121a;font-weight:900;padding:9px 12px;white-space:nowrap}
@media(max-width:720px){.deck-sticky-tools{top:60px}.deck-maker-filters{grid-template-columns:1fr 1fr 1fr!important}.deck-maker-filters select{grid-column:auto}.preview-only{justify-content:center;min-height:40px;border:1px solid var(--line);border-radius:10px;padding:7px}.leader-suggestions{display:grid}.leader-suggestions button{width:100%}}

/* feedback round 2 */
.deck-maker-filters{grid-template-columns:repeat(6,minmax(0,1fr));}
.deck-maker-filters input[type="checkbox"]{width:18px!important;height:18px!important;min-width:18px;margin:0;padding:0;accent-color:var(--accent);}
.preview-only,.quick-filter{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:7px 9px;color:#c5d3dc;font-size:12px;white-space:nowrap;background:#0b1620;}
@media(max-width:720px){.deck-maker-filters{grid-template-columns:repeat(3,minmax(0,1fr))!important;}.deck-maker-filters select{grid-column:auto!important;}}