/* Gill Sans is a system font — no import needed */
:root{--bg:#0f0f12;--surface:#18181e;--surface2:#1e1e26;--border:#2a2a36;--accent:#f4bdc3;--accent-dim:rgba(244,189,195,0.09);--text:#f0f0ee;--muted:#8888a0;--muted2:#55556a;--radius:8px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;justify-content:center;}
.app-container{width:100%;max-width:1536px;display:flex;flex-direction:column;flex:1;overflow:hidden;}

.app{display:grid;grid-template-columns:350px 1fr;flex:1;overflow:hidden;}
aside{border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);overflow:hidden;height:100%;width:350px;position:relative;}

/* Custom scrollbar */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted2);}
* { scrollbar-width:thin; scrollbar-color:var(--border) var(--bg); }
.settings-btn{position:absolute;top:50%;right:10px;transform:translateY(-50%);background:none;border:1px solid var(--border);cursor:pointer;color:var(--muted);padding:4px 7px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s,border-color .15s;font-size:1.1rem;line-height:1;}
.settings-btn:hover{color:var(--text);background:var(--surface2);border-color:var(--text);}
.sidebar-inner{padding:0 16px 0;display:flex;flex-direction:column;gap:8px;flex:1;align-items:center;overflow:hidden;}
.sidebar-inner > *{width:100%;max-width:350px;}
.sidebar-inner label, .sidebar-inner .ctrl label, .s-label, .edition-pills{text-align:center;justify-content:center;}

/* Settings panel */
.settings-panel{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:var(--surface);z-index:10;padding:18px 16px;flex-direction:column;gap:18px;overflow-y:auto;}
.settings-panel.open{display:flex;}
.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.settings-header h2{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--text);}
.settings-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:2px 6px;border-radius:4px;transition:color .15s;}
.settings-close:hover{color:var(--text);}
.s-label{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}

.ctrl{display:flex;flex-direction:column;gap:6px;}
.ctrl label{font-size:.6rem;color:var(--muted);}
.ctrl select,.ctrl input{background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;font-size:.68rem;padding:6px 8px;outline:none;transition:border-color .15s;width:100%;}
.ctrl select:focus,.ctrl input:focus{border-color:var(--accent);}
.ctrl input::placeholder{color:var(--muted2);}

.card-form{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:14px;margin-bottom:10px;text-align:center;}
.card-form.collapsed{gap:0;}
.card-form.collapsed .card-form-body{display:none;}
.collapse-btn{background:none;border:none;cursor:pointer;color:var(--muted);padding:0 0 0 6px;font-size:.75rem;line-height:1;transition:transform .15s;display:flex;align-items:center;}
.collapse-btn:hover{color:var(--text);}
.card-form.collapsed .collapse-btn{transform:rotate(-90deg);}
.card-form-header{display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:.72rem;color:var(--muted);cursor:pointer;user-select:none;}
.remove-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.7rem;padding:2px 6px;border-radius:4px;transition:all .15s;}
.remove-btn:hover{color:#ff6b6b;background:rgba(255,107,107,.1);}

.set-row{display:flex;align-items:center;gap:6px;width:100%;position:relative;}
.set-row .card-picker{flex:1;min-width:0;}
.set-sym-thumb{width:24px;height:24px;object-fit:contain;border-radius:3px;background:var(--bg);flex-shrink:0;position:absolute;right:6px;pointer-events:none;}
.edition-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;}
.edition-pill{padding:4px 10px;border-radius:20px;font-size:.6rem;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;transition:all .15s;}
.edition-pill:hover:not(:disabled){border-color:var(--accent);background:var(--accent-dim);color:var(--text);}
.edition-pill.selected{background:var(--accent);color:#111;border-color:var(--accent);}
.edition-pill:disabled{opacity:.5;cursor:default;}

.add-card-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border:1.5px dashed var(--border);border-radius:var(--radius);background:transparent;color:var(--muted);font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;font-size:.68rem;cursor:pointer;transition:all .15s;width:100%;}
.add-card-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:7px;font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;font-size:.7rem;font-weight:500;cursor:pointer;border:none;width:100%;transition:all .15s;}
.btn-primary{background:var(--accent);color:#111;}
.btn-primary:hover{background:#c9848d;}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted);}
.btn-ghost:hover{border-color:var(--text);color:var(--text);}

.btn-danger{background:transparent;border:1px solid rgba(255,100,100,.3);color:#ff7070;}
.btn-danger:hover{background:rgba(255,100,100,.1);}

#preview{padding:24px 28px;overflow-x:hidden;overflow-y:auto;background:var(--bg);height:100%;}
.page-scale-wrap{overflow:hidden;position:relative;margin:0 auto 32px;}
.page-scale-wrap .page-wrap{transform-origin:top left;margin:0!important;}
.preview-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.preview-top h2{font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.05em;}
.page-label{font-size:.58rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.page-label::after{content:'';flex:1;height:1px;background:var(--border);}

.page-wrap{background:white;margin:0;box-shadow:0 4px 40px rgba(0,0,0,.5);border-radius:2px;display:flex;align-items:center;justify-content:center;}
.card-grid{display:grid;}

/* ── CARD SLOT: 2.5" x 3.5" = 240 x 336px ─────────────────────────── */
.card-slot{
  width:240px; height:336px;
  background:white;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  overflow:visible; flex-shrink:0;
  position:relative;
}

/* Default: no border, dots only */
.card-slot { border: 1px solid transparent; margin: -1px; }

/* Border type variants */
.border-solid .card-slot  { border: 1px solid #999; margin: -1px; }
.border-dotted .card-slot { border: 1px dashed #999; margin: -1px; }
.border-solid .card-grid  { border: 1px solid #999; }
.border-dotted .card-grid { border: 1px dashed #999; }
.border-none .card-slot   { border: 1px solid transparent; margin: -1px; }

/* Dots mode: hide the border, show corner dots */
.border-dots .card-slot   { border: 1px solid transparent; margin: -1px; }

/* Corner dot spans injected by JS */
.corner-dot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #000;
  z-index: 2;
  display: none;
}
.border-dots .corner-dot { display: block; }
.corner-dot.tl { top: -1px; left: -1px; transform: translate(-50%, -50%); }
.corner-dot.tr { top: -1px; right: -1px; transform: translate(50%, -50%); }
.corner-dot.bl { bottom: -1px; left: -1px; transform: translate(-50%, 50%); }
.corner-dot.br { bottom: -1px; right: -1px; transform: translate(50%, 50%); }

.card-slot.empty{
  background:white;
  display:flex; align-items:center; justify-content:center;
}

/* Card content wrapper */
.cs-inner{
  display:flex; flex-direction:column; align-items:center;
  width:100%; height:100%;
  padding:14px 20px 0;
  overflow:hidden;
}

/* Top zone: name + number */
.cs-top{
  flex: 0 0 120px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  width:100%;
  padding-bottom:8px;
}

/* Symbol zone */
.cs-symbol-wrap{
  flex: 0 0 104px;
  width:84px;
  display:flex; align-items:center; justify-content:center;
}
.cs-symbol{ max-width:80px; max-height:80px; width:auto; height:auto }

/* Bottom zone */
.cs-bottom{
  flex: 0 0 112px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:100%;
  padding-top:8px;
}

/* Name */
.cs-name{
  font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
  font-size:1.85rem; font-weight:700;
  color:#111; line-height:1.1;
  margin-bottom:4px;
  width:100%;
  overflow:hidden;
}

/* Number */
.cs-number{
  font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
  font-size:1.45rem; font-weight:700;
  color:#111;
  margin-bottom:0;
}

/* Set name */
.cs-set{
  font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
  font-size:1.2rem; font-weight:700;
  color:#111; line-height:1.2;
  margin-bottom:4px;
  width:100%;
}

/* Edition/variant */
.cs-variant-label{
  font-size:1.1rem; font-weight:400;
  color:#333;
  margin-bottom:2px;
}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:12px;text-align:center;}
.card-slot.promo{background:white;display:flex;align-items:center;justify-content:center;}
.promo-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;}
.promo-title{font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;font-size:1.45rem;font-weight:700;color:#111;text-align:center;line-height:1.2;}
.promo-logo{width:80px;height:auto;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;}
.promo-qr{width:60px;height:60px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;}
.empty-icon{width:60px;height:60px;border:1.5px dashed var(--border);border-radius:12px;display:grid;place-items:center;}
.empty-state h3{font-size:.85rem;color:var(--muted);font-weight:400;}
.empty-state p{font-size:.65rem;color:var(--muted);opacity:.7;}

@media print {
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body{background:white!important;margin:0;}
  header,aside,.preview-top,.page-label{display:none!important;}
  .app{display:block!important;}
  #preview{padding:0!important;background:white!important;overflow:visible!important;}
  .page-wrap{box-shadow:none!important;border-radius:0!important;page-break-after:always;break-after:page;margin:0!important;}
  .page-wrap:last-child{page-break-after:avoid;break-after:avoid;}
  .card-slot{break-inside:avoid;page-break-inside:avoid;}
  .empty-state{display:none!important;}
}

@media (max-width: 600px) and (orientation: portrait) {
  .app{grid-template-columns:1fr;}
  #preview{display:none;}
  aside{height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;width:100%;border-right:none;zoom:1.15;}
  .sidebar-header{width:100%;max-width:350px;}
  .sidebar-scroll{width:100%;max-width:350px;}
  .sidebar-scroll #card-forms{width:100%;}
  .sidebar-scroll .add-card-btn{width:100%;}
  .sidebar-inner{width:100%;max-width:350px;}
  aside > div:last-of-type{width:100%;max-width:350px;}
  .site-logo{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transform:scale(calc(1/1.15));transform-origin:left center;}
}

/* Landscape mobile: no preview, full-width sidebar, maximise scroll area */
@media (max-height: 500px) and (orientation: landscape) {
  body{overflow:hidden;}
  .app{display:block;height:100dvh;overflow:hidden;}
  #preview{display:none!important;}
  aside{width:100%;height:100dvh;overflow:hidden;zoom:1;border-right:none;display:flex;flex-direction:column;}

  /* Header */
  .sidebar-header{padding:4px 44px 3px;flex-shrink:0;}
  .sidebar-header > div > div:first-child{font-size:.7rem;}
  .sidebar-header > div > div:last-child{display:none;}

  /* Pokémon picker area */
  .sidebar-inner{padding:3px 10px 3px;flex:0 0 auto;overflow:visible;}
  /* Outer wrapper: no bottom margin */
  #poke-filter-wrap{margin-bottom:0!important;}
  /* Picker row + checkboxes all in one flex row */
  #poke-filter-wrap{display:flex;flex-direction:row;align-items:center;gap:5px;flex-wrap:nowrap;}
  #poke-picker-row{flex:1;min-width:0;gap:4px!important;}
  #poke-picker-row #poke-picker-wrap{flex:1;min-width:0;}
  #poke-picker-row .btn{padding:3px 7px!important;font-size:.55rem!important;width:auto;flex-shrink:0;}
  #poke-checkboxes-row{display:flex!important;flex-direction:column!important;gap:3px!important;margin-top:0!important;flex-shrink:0;}
  #poke-checkboxes-row label{font-size:.52rem!important;gap:3px!important;white-space:nowrap;}
  #poke-picker-input-global{font-size:.66rem;padding:4px 7px;}

  /* Card forms scroll area */
  .sidebar-scroll{flex:1;overflow-y:auto;padding:0 10px;}

  /* Card form shell */
  .card-form{padding:5px 7px;gap:3px;margin-bottom:3px;}
  .card-form-header{font-size:.6rem;}

  /* Two dropdowns side by side */
  .dropdowns-row{display:flex!important;flex-direction:row!important;gap:4px!important;align-items:flex-start;}
  .dropdowns-row > .ctrl{flex:1!important;min-width:0!important;margin-top:0!important;}
  .dropdowns-row > div:not(.ctrl){flex:1!important;min-width:0!important;}
  .card-picker-input{font-size:.59rem;padding:3px 5px;}
  .set-row{gap:3px;}
  .set-sym-thumb{width:18px;height:18px;}

  /* Pills row: single scrollable line */
  .ctrl[style*="margin-top:10px"]{margin-top:2px!important;}
  .edition-pills{gap:3px;margin-top:0;flex-wrap:nowrap;overflow-x:auto;}
  .edition-pill{padding:2px 6px;font-size:.51rem;white-space:nowrap;flex-shrink:0;}
  .card-picker-dropdown{max-height:90px;}

  /* Bottom bar */
  aside > div:last-of-type{flex:0 0 auto;padding:4px 10px 5px;gap:4px;}
  #btn-row{flex-direction:row!important;gap:4px;align-items:stretch;}
  #btn-row > div{flex:1;gap:4px;}
  #btn-row > div > button{flex:1;padding:5px 6px;font-size:.57rem;}
  #pdf-btn{flex:0 0 95px;width:auto;padding:5px 8px;font-size:.57rem;}
  .add-card-btn{padding:5px 6px;font-size:.57rem;}
  aside > div:last-of-type > div:last-child{display:none;}
}

/* Searchable card picker */
.card-picker{position:relative;}
.card-picker-input{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:5px;color:var(--text);font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
  font-size:.68rem;padding:6px 8px;outline:none;transition:border-color .15s;
  cursor:pointer;
}
#poke-picker-input-global{font-size:.82rem;padding:9px 10px;}
.card-picker-input:read-only{cursor:pointer;caret-color:transparent;}
.card-picker-input:focus{border-color:var(--accent);}
.card-picker-input::placeholder{color:var(--muted2);}
.card-picker-dropdown{
  position:absolute;top:100%;left:0;right:0;z-index:999;
  background:var(--surface2);border:1px solid var(--accent);
  border-top:none;border-radius:0 0 5px 5px;
  max-height:200px;overflow-y:auto;
  display:none;
}
.card-picker-dropdown.open{display:block;}
.card-picker-dropdown::-webkit-scrollbar{width:4px;}
.card-picker-dropdown::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.card-picker-option{
  padding:6px 8px;font-size:.66rem;cursor:pointer;color:var(--text);
  transition:background .1s;
  font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
}
.card-picker-option:hover,.card-picker-option.highlighted{background:var(--accent-dim);color:var(--accent);}
.card-picker-option.no-results{color:var(--muted);cursor:default;}
.pg-label{font-size:.62rem;color:var(--muted);font-weight:400;margin-left:10px;}
@keyframes loadbar{0%{width:0;margin-left:0;}50%{width:60%;margin-left:20%;}100%{width:0;margin-left:100%;}}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px 24px 20px;max-width:340px;width:90%;display:flex;flex-direction:column;gap:14px;}
.modal-title{font-size:.85rem;font-weight:700;color:var(--text);letter-spacing:.04em;}
.modal-body{font-size:.7rem;color:var(--muted);line-height:1.6;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}
.modal-btn{padding:7px 16px;border-radius:6px;font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;font-size:.7rem;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted);transition:all .15s;}
.modal-btn:hover{border-color:var(--text);color:var(--text);}
.modal-btn-confirm{background:var(--accent);color:#111;border-color:var(--accent);}
.modal-btn-confirm:hover{background:#e0a8af;border-color:#e0a8af;color:#111;}