/* mono+ border pack dashboard */

:root{
  --bg:#0d0d0f; --surface:#161619; --surface2:#1d1d21;
  --line:#2a2a30; --text:#e8e4df; --muted:#8b8b93;
  --accent:#c9a962; --danger:#d98a7a; --ok:#8fae8f;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;max-width:100%}
html,body{overflow-x:hidden}
img,video,svg,canvas{max-width:100%}

html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0;border-bottom:1px solid var(--line);margin-bottom:36px}
.brand{font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand b{color:var(--accent);font-weight:700}
.brand span{color:var(--muted);font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;margin-left:12px}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}

/* buttons */
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;color:var(--text);border:1px solid var(--line);
  padding:9px 16px;border-radius:7px;cursor:pointer;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--accent)}
.btn-go{background:var(--accent);border-color:var(--accent);color:#15110a;font-weight:600}
.btn-go:hover{filter:brightness(1.06)}
.btn-quiet{color:var(--muted)}
.btn-danger:hover{border-color:var(--danger);color:var(--danger)}
.btn[disabled]{opacity:.45;cursor:default}

/* forms */
label.field{display:block;margin:0 0 16px}
label.field .lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
input[type=text],input[type=password],input[type=number],select{width:100%;background:var(--surface2);
  color:var(--text);border:1px solid var(--line);border-radius:7px;padding:10px 12px;
  font-family:var(--sans);font-size:15px}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.row{display:flex;gap:12px}
.row>*{flex:1}

/* login */
.login{min-height:80vh;display:flex;align-items:center;justify-content:center}
.login .card{width:100%;max-width:340px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:30px}
.login h1{font-size:18px;margin:0 0 4px}
.login .sub{color:var(--muted);font-size:13px;margin:0 0 22px}
.err{color:var(--danger);font-size:13px;min-height:18px;margin-top:10px}

/* table */
.packs{width:100%;border-collapse:collapse}
.packs th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:left;font-weight:400;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.packs td{padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.packs tr:hover td{background:var(--surface)}
.packs .pname{font-weight:600}
.packs .pid,.packs .num{font-family:var(--mono);font-size:12px;color:var(--muted)}
.packs .qd{min-width:120px}.packs .qd img,.packs .qd canvas{width:110px;height:110px;display:block;border-radius:8px;background:#fff;padding:6px}
.acts{display:flex;gap:8px;justify-content:flex-end}
.empty{color:var(--muted);padding:50px 0;text-align:center}
.empty .eyebrow{margin-bottom:10px}

/* builder layout */
.build{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start}
@media (max-width:840px){.build{grid-template-columns:1fr;gap:32px}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
.panel h2{font-size:15px;margin:0 0 18px;font-weight:600}
.panel + .panel{margin-top:24px}

/* frame list */
.frames{list-style:none;margin:0;padding:0}
.frames li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.frames li:first-child{border-top:0}
.thumb{width:44px;height:44px;border-radius:6px;background:#fff url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="%23eee"/></svg>) center/cover;
  flex:none;background-size:cover;background-position:center;border:1px solid var(--line)}
.frames .fmeta{flex:1;min-width:0}
.frames .fname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frames .ftype{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* preview */
.previewbox{aspect-ratio:1/1;background:var(--surface2);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.previewbox canvas{display:block;width:100%;height:100%}
.previewbox .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* qr */
.qrcard{text-align:center}
.qrcanvas{width:200px;height:200px;margin:0 auto;background:#fff;border-radius:10px;padding:12px}
.mpb{font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all;
  background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;margin:16px 0}
.hint{color:var(--muted);font-size:12.5px;margin:8px 0 0}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--surface2);border:1px solid var(--line);color:var(--text);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}

.spacer{height:14px}
.muted{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Stage 2 — guided flow additions */

/* tabs */
.tabs{display:flex;gap:4px;margin-bottom:18px}
.tab{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;color:var(--muted);border:1px solid var(--line);
  padding:8px 14px;border-radius:6px;cursor:pointer;transition:border-color .15s,color .15s}
.tab:hover{border-color:var(--accent);color:var(--text)}
.tab.active{border-color:var(--accent);color:var(--accent);background:rgba(201,169,98,.06)}

/* textarea */
textarea{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--line);
  border-radius:7px;padding:10px 12px;font-family:var(--mono);font-size:12.5px;
  resize:vertical;min-height:100px}
textarea:focus{outline:none;border-color:var(--accent)}

/* progress bar */
.progress-bar{display:flex;align-items:flex-start;justify-content:center;
  gap:0;padding:24px 0 40px;margin:0 auto;max-width:580px}
.prog-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none}
.prog-line{flex:1 1 32px;height:1px;background:var(--line);margin-top:16px;
  min-width:20px;max-width:72px;transition:background .2s}
.prog-line.done{background:var(--accent)}
.step-dot{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);
  background:transparent;display:flex;align-items:center;justify-content:center;
  cursor:default;color:var(--muted);font-family:var(--mono);font-size:11px;
  padding:0;transition:border-color .2s,background .2s,color .2s}
.step-dot.current{border-color:var(--accent);color:var(--accent)}
.step-dot.done{border-color:var(--accent);background:var(--accent);color:#15110a}
.step-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;white-space:nowrap}
.prog-step.current .step-lbl{color:var(--accent)}
.prog-step.done .step-lbl{color:var(--text)}

/* step panels */
.panel-step{margin-bottom:48px}
.step-card{max-width:480px;margin:0 auto}
.step-narrow{max-width:680px;margin:0 auto}
.step-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.step-actions.center{justify-content:center;gap:12px}

/* type selector */
.type-row{display:flex;gap:6px}
.type-btn{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;color:var(--muted);border:1px solid var(--line);
  padding:8px 14px;border-radius:6px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.type-btn:hover:not(.active){border-color:var(--accent);color:var(--text)}
.type-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(201,169,98,.06)}

/* spec hint */
.spec-hint{font-size:12px;color:var(--muted);margin:10px 0 14px;font-family:var(--sans);
  line-height:1.5;padding:9px 12px;background:var(--surface2);border-radius:6px;
  border:1px solid var(--line);min-height:38px}

/* dropzone */
.dropzone{border:1.5px dashed var(--line);border-radius:10px;
  padding:28px 20px;text-align:center;margin:14px 0;
  cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:rgba(201,169,98,.04)}
.dropzone.uploading{opacity:.6;pointer-events:none}
.dz-inner{pointer-events:none}
.dz-icon{font-size:22px;color:var(--muted);margin-bottom:6px}
.dz-text{color:var(--muted);font-size:13px;margin:0}
.dz-sm{padding:14px 18px}
.dz-sm .dz-text{font-size:12px}
.dz-err{color:var(--danger);font-size:12px;margin:6px 0 0;min-height:16px;pointer-events:none}
.btn-link{background:none;border:none;color:var(--accent);cursor:pointer;
  font-family:var(--sans);font-size:13px;padding:0;text-decoration:underline;pointer-events:auto}

/* count badge */
.count-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;
  text-align:center;background:var(--accent);color:#15110a;border-radius:9px;
  font-family:var(--mono);font-size:10px;font-weight:700;padding:0 5px;
  margin-left:6px;vertical-align:middle}

/* empty hint */
.empty-hint{color:var(--muted);font-size:13px;padding:10px 0;margin:0}

/* sticky preview on large screens */
@media (min-width:841px){.sticky-preview{position:sticky;top:24px}}

/* look list */
.look-list{list-style:none;margin:0;padding:0}
.look-list li{display:flex;align-items:center;gap:12px;
  padding:10px 0;border-top:1px solid var(--line)}
.look-list li:first-child{border-top:0}
.look-thumb{width:44px;height:44px;flex:none;border-radius:6px;overflow:hidden}
.look-thumb img{width:44px;height:44px;object-fit:cover}
.look-thumb-swatch{width:44px;height:44px;border-radius:6px;
  background:linear-gradient(135deg,#2a2a34,#0d0d11);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.look-thumb-swatch span{font-family:var(--mono);font-size:7px;letter-spacing:.1em;
  color:var(--muted);text-align:center}
.look-meta{flex:1;min-width:0}
.look-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.look-kind{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* review */
.review-section{margin:0 0 22px}
.review-section h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:400}
.review-frames{display:flex;flex-wrap:wrap;gap:10px}
.review-frame{width:88px}
.review-frame img{width:88px;height:88px;object-fit:cover;border-radius:7px;border:1px solid var(--line);display:block}
.review-frame-name{font-size:11px;color:var(--text);margin-top:5px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-frame-type{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);text-align:center}
.review-empty{color:var(--danger);font-size:13px;margin:0 0 14px}

/* code step */
.code-panel{max-width:400px;margin:0 auto;text-align:center}
.qr-big{border-radius:14px;background:#fff;padding:16px;display:block;margin:20px auto}
.mpb-url{font-family:var(--mono);font-size:10.5px;color:var(--muted);word-break:break-all;
  background:var(--surface2);border:1px solid var(--line);border-radius:7px;
  padding:10px 12px;margin:0 0 18px;text-align:left}
/* Stage 4 additions */

/* status badges */
.badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border-radius:4px;font-weight:600;white-space:nowrap}
.badge-active{background:rgba(143,174,143,.18);color:var(--ok);border:1px solid rgba(143,174,143,.3)}
.badge-pending{background:rgba(201,169,98,.12);color:var(--accent);border:1px solid rgba(201,169,98,.25)}
.badge-disabled{background:rgba(217,138,122,.1);color:var(--danger);border:1px solid rgba(217,138,122,.22)}

/* published toggle buttons */
.pub-on{border-color:var(--ok);color:var(--ok)}
.pub-on:hover{background:rgba(143,174,143,.08)}
.pub-off{border-color:var(--muted);color:var(--muted)}
.pub-off:hover{border-color:var(--accent);color:var(--accent)}

/* register link on index */
.login .hint a{color:var(--accent)}