/* ===================== Amazon Bestseller Studio — light UI ===================== */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#fafbfc; --border:#e4e7ec;
  --border-strong:#d0d5dd; --text:#1d2939; --muted:#667085; --muted-2:#98a2b3;
  --brand:#ff9900; --brand-ink:#b45309; --accent:#146eb4; --accent-ink:#0b4f86;
  --green:#12b76a; --green-bg:#ecfdf3; --red:#f04438; --red-bg:#fef3f2;
  --amber:#f79009; --amber-bg:#fffaeb; --star:#f5a623;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 4px 16px rgba(16,24,40,.10);
  --shadow-lg:0 12px 32px rgba(16,24,40,.16);
  --radius:12px; --radius-sm:8px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
::selection{background:#ffe2b8}
.hidden{display:none!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);padding:8px 14px;border-radius:var(--radius-sm);
  font-weight:600;font-size:13px;transition:.15s;white-space:nowrap;box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--surface-2);border-color:var(--muted-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#3a2400}
.btn.primary:hover{background:#f59300;border-color:#f59300}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-ink)}
.btn.ghost{border-color:transparent;box-shadow:none;background:transparent}
.btn.ghost:hover{background:#eef1f5}
.btn.danger{color:var(--red);border-color:#f7c9c4}
.btn.danger:hover{background:var(--red-bg)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.block{width:100%;justify-content:center}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:600;background:#eef1f5;color:var(--muted)}
.chip.amber{background:var(--amber-bg);color:var(--brand-ink)}
.chip.green{background:var(--green-bg);color:#027a48}
.chip.accent{background:#eaf3fb;color:var(--accent-ink)}

input,select{font-family:inherit;font-size:13px;color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 10px;outline:none;width:100%}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(20,110,180,.12)}
label.fld{display:block;font-size:11px;font-weight:600;color:var(--muted);margin:0 0 4px 2px;text-transform:uppercase;letter-spacing:.03em}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(1200px 600px at 50% -10%,#fff,transparent),var(--bg)}
.login-card{width:380px;max-width:92vw;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:34px 30px}
.login-card .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:4px}
.login-card .sub{color:var(--muted);margin-bottom:22px;font-size:13px}
.login-card .fld{margin-bottom:14px}
.login-err{color:var(--red);font-size:13px;margin-top:10px;min-height:18px}
.demo-note{margin-top:18px;font-size:12px;color:var(--muted);background:var(--amber-bg);
  border:1px solid #fde79b;border-radius:var(--radius-sm);padding:10px 12px}

.logo-badge{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#ffb84d);
  display:grid;place-items:center;color:#3a2400;font-weight:900;box-shadow:var(--shadow-sm)}

/* ---------- app shell ---------- */
.app{display:none;grid-template-rows:auto 1fr;height:100vh;overflow:hidden}
.app.on{display:grid}
.topbar{display:flex;align-items:center;gap:16px;padding:0 18px;height:58px;
  background:var(--surface);border-bottom:1px solid var(--border);z-index:20;box-shadow:var(--shadow-sm)}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
.topbar .grow{flex:1}
.search-box{position:relative;flex:1;max-width:520px}
.search-box input{padding-left:34px}
.search-box svg{position:absolute;left:10px;top:9px;color:var(--muted-2)}
.demo-badge{font-size:11px;font-weight:700;color:var(--brand-ink);background:var(--amber-bg);
  border:1px solid #fde79b;padding:3px 9px;border-radius:999px}

.main{display:grid;grid-template-columns:264px 1fr;overflow:hidden}
.sidebar{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:12px}
.content{overflow-y:auto;padding:0}

/* ---------- sidebar tree ---------- */
.side-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2);
  padding:10px 8px 6px}
.root-item,.sub-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--radius-sm);
  cursor:pointer;font-size:13px;color:var(--text);user-select:none}
.root-item:hover,.sub-item:hover{background:#f2f4f7}
.root-item.active,.sub-item.active{background:#eaf3fb;color:var(--accent-ink);font-weight:600}
.root-item .name,.sub-item .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.root-item .cnt,.sub-item .cnt{font-size:11px;color:var(--muted-2);font-weight:600}
.root-item .caret{transition:.15s;color:var(--muted-2)}
.root-item.open .caret{transform:rotate(90deg)}
.sub-list{margin:2px 0 6px 10px;border-left:1px solid var(--border);padding-left:6px}
.sub-item{padding-left:12px;font-size:12.5px}
.sub-item .archive{opacity:0;color:var(--muted-2)}
.sub-item:hover .archive{opacity:1}
.sub-item .archive:hover{color:var(--red)}

/* ---------- toolbar ---------- */
.toolbar{position:sticky;top:0;background:var(--surface-2);border-bottom:1px solid var(--border);
  padding:12px 18px;display:flex;flex-direction:column;gap:10px;z-index:10}
.crumbs{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crumbs b{color:var(--text)}
.filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.filters .f{min-width:96px}
.filters .f.mini{min-width:74px}
.filters .spacer{flex:1}
.range-2{display:flex;gap:6px;align-items:center}
.range-2 span{color:var(--muted-2)}

/* ---------- selection bar ---------- */
.selbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow-sm)}
.selbar .n{font-weight:700}
.selbar .grow{flex:1}

/* ---------- product grid ---------- */
.grid-wrap{padding:16px 18px 60px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.15s;position:relative;box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow);border-color:var(--border-strong)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(20,110,180,.25)}
.card .imgbox{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:12px;border-bottom:1px solid var(--border)}
.card .imgbox img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.card .imgbox .ph{color:var(--muted-2);font-size:12px;text-align:center}
.card .rank{position:absolute;top:8px;left:8px;background:rgba(29,41,57,.86);color:#fff;
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}
.card .pick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;
  border:1.5px solid var(--border-strong);background:#fff;display:grid;place-items:center;cursor:pointer}
.card.sel .pick{background:var(--accent);border-color:var(--accent);color:#fff}
.card .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .title{font-size:12.5px;line-height:1.35;color:var(--text);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.card .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.card .price{font-weight:800;font-size:15px}
.card .price.na{color:var(--muted-2);font-weight:600;font-size:12px}
.stars{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--muted)}
.stars .s{position:relative;display:inline-block;width:70px;height:13px}
.stars .s .bg,.stars .s .fg{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;letter-spacing:2px}
.stars .s .bg{color:#dfe3e8}.stars .s .fg{color:var(--star)}
.card .badges{display:flex;gap:5px;flex-wrap:wrap}
.card .rowbtns{display:flex;gap:6px;margin-top:2px}
.card .rowbtns .btn{flex:1;justify-content:center;padding:5px}

/* ---------- results (ideas) panel ---------- */
.results{margin:16px 18px 0;background:linear-gradient(180deg,#fffdf7,#fff);border:1px solid #fde79b;
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.results .rh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #fde79b;background:#fffaeb}
.results .rh h3{margin:0;font-size:14px}
.results .rh .grow{flex:1}
.idea-list{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto}
.idea{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 8px}
.idea .drag{color:var(--muted-2);cursor:grab}
.idea input{border:none;box-shadow:none;padding:4px 6px;background:transparent;font-weight:500}
.idea input:focus{background:#f7f9fb}
.idea .x{color:var(--muted-2)}.idea .x:hover{color:var(--red)}
.idea-empty{color:var(--muted);padding:18px;text-align:center;font-size:13px}
.dup-wrap{border-top:1px dashed #f0c674;background:#fffdf5}
.dup-h{display:flex;align-items:center;gap:8px;padding:8px 16px 4px;font-size:12px;font-weight:700;color:var(--brand-ink)}
.dup-h .dup-title{text-transform:uppercase;letter-spacing:.03em}
.dup-list{padding-top:4px}
.dup-list .idea{background:#fbfbfb;border-style:dashed}
.dup-list .idea .txt{flex:1;color:var(--muted);text-decoration:line-through;text-decoration-color:#d0b06a;padding:4px 6px;font-size:13px}
.dup-list .idea .keep{color:var(--green);border-color:#a6e6c3}
.dup-list .idea .keep:hover{background:var(--green-bg)}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px}
.pager .pinfo{color:var(--muted);font-size:13px}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(16,24,40,.45);backdrop-filter:blur(2px);
  display:grid;place-items:center;z-index:100;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  width:640px;max-width:96vw;max-height:90vh;overflow:auto}
.modal .mh{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal .mh h3{margin:0;flex:1;font-size:15px}
.modal .mb{padding:20px}
.modal .mf{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border)}
textarea{width:100%;min-height:220px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12.5px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:12px;resize:vertical;line-height:1.5}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(20,110,180,.12)}

/* collage preview */
.collage{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:12px}
.collage .ci{position:relative;border:1px solid var(--border);border-radius:8px;padding:6px;aspect-ratio:1;display:grid;place-items:center}
.collage .ci img{max-width:100%;max-height:100%;object-fit:contain}
.collage .ci .num{position:absolute;top:2px;left:2px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;border-radius:4px;padding:1px 5px}
.collage .ci.drop{opacity:.4;border-color:var(--red)}
.collage .ci.keep{border-color:var(--green);box-shadow:0 0 0 2px var(--green-bg)}

/* toast */
.toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:#1d2939;color:#fff;padding:11px 15px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  font-size:13px;max-width:340px;animation:slideIn .2s}
.toast.err{background:#912018}.toast.ok{background:#05603a}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* empty / loading */
.state{display:grid;place-items:center;padding:60px 20px;color:var(--muted);text-align:center}
.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d7dbe0;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#c2c8cf}