/* Dashboard design system. Plain, friendly, owner-first. */
:root{
  --brand:#2f6f8f; --brand-d:#235873; --accent:#e08a3c;
  --good:#2e7d52; --good-bg:#e8f4ec; --watch:#b9770e; --watch-bg:#fbf1df; --act:#c0392b; --act-bg:#fbe9e7;
  --ink:#21303a; --muted:#637079; --bg:#f6f4ef; --card:#ffffff; --line:#e8e3d8;
  --radius:16px; --shadow:0 1px 2px rgba(28,40,48,.06),0 6px 20px rgba(28,40,48,.06);
  --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; font-size:16px;
}
h1,h2,h3{line-height:1.2; margin:0}
a{color:var(--brand)}
b{font-weight:700}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; background:var(--brand);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 18px; flex-wrap:wrap;
}
.topbar .brand{font-weight:800; font-size:1.05rem; letter-spacing:.2px; display:flex; gap:8px; align-items:center}
.topbar a.brand{color:#fff; text-decoration:none}
.upload-inline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.data-status{font-size:.85rem; opacity:.92}
.btn-upload,.btn-reset,.btn{
  cursor:pointer; border:0; border-radius:999px; font-weight:700; font-size:.85rem;
  padding:8px 14px; background:#fff; color:var(--brand-d);
}
.btn-reset{background:rgba(255,255,255,.16); color:#fff}
.btn-upload:hover{background:#f0f6f8}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:20px 18px 60px}
.dash-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:8px 2px 18px}
.eyebrow{color:var(--brand); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.8px}
.dash-head h1{font-size:2rem; margin:2px 0}
.period{color:var(--muted); font-size:.92rem}
.head-badge{background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 14px; font-size:.82rem; color:var(--muted); text-align:right}
.head-badge b{color:var(--ink)}

/* ---------- hero numbers ---------- */
.hero-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.hero{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); border-top:4px solid var(--brand)}
.hero.tone-good{border-top-color:var(--good)} .hero.tone-watch{border-top-color:var(--watch)}
.hero.tone-act{border-top-color:var(--act)} .hero.tone-brand{border-top-color:var(--brand)} .hero.tone-ink{border-top-color:var(--accent)}
.hero-label{color:var(--muted); font-size:.82rem; font-weight:600}
.hero-value{font-size:1.7rem; font-weight:800; margin:4px 0 2px; letter-spacing:-.4px}
.hero-sub{color:var(--muted); font-size:.8rem}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); margin-bottom:16px}
.card h2{font-size:1.25rem; margin-bottom:4px}
.card h3{font-size:1.05rem}
.muted{color:var(--muted); font-size:.9rem}
.takeaway{color:var(--brand-d); font-weight:600; margin:2px 0 14px; font-size:1rem}
.summary p{margin:10px 0 0; font-size:1.05rem}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px}

/* ---------- lists (going well / watch) ---------- */
.list-card ul{list-style:none; padding:0; margin:10px 0 0}
.list-card li{position:relative; padding:8px 0 8px 26px; border-bottom:1px solid var(--line); font-size:.97rem}
.list-card li:last-child{border-bottom:0}
.list-card li:before{content:""; position:absolute; left:6px; top:14px; width:9px; height:9px; border-radius:50%}
.list-card.tone-good li:before{background:var(--good)}
.list-card.tone-watch li:before{background:var(--watch)}
.list-card.tone-act li:before{background:var(--act)}
.mover-list li{display:flex; justify-content:space-between; align-items:center; padding-left:6px}
.mover-list li:before{display:none}
.mover-list b.up{color:var(--good)} .mover-list b.down{color:var(--act)}

/* ---------- actions ---------- */
.actions .action{display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:12px; margin-top:12px; background:#faf9f6; border:1px solid var(--line)}
.action.tone-act{background:var(--act-bg); border-color:#f1c9c2}
.action.tone-watch{background:var(--watch-bg); border-color:#f0ddb9}
.action.tone-good{background:var(--good-bg); border-color:#c8e3d2}
.action-n{flex:0 0 28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; display:grid; place-items:center; font-size:.9rem}
.action.tone-act .action-n{background:var(--act)} .action.tone-watch .action-n{background:var(--watch)} .action.tone-good .action-n{background:var(--good)}
.action-title{font-weight:700; font-size:1.02rem}
.action-detail{color:#46545d; font-size:.94rem; margin-top:2px}

/* ---------- charts ---------- */
.chart-box{position:relative; width:100%; overflow:visible}
.chart{width:100%; height:auto; display:block}
.grid{stroke:#eee7da; stroke-width:1}
.ytick,.xtick{fill:var(--muted); font-size:11px}
.barval{fill:var(--ink); font-size:11px; font-weight:700}
.bar{transition:opacity .12s} .bar:hover,.arc:hover,.dot:hover{opacity:.82; cursor:default}
.hlabel{fill:var(--ink); font-size:12.5px}
.hval{fill:var(--muted); font-size:12px; font-weight:700}
.lline{stroke-linejoin:round; stroke-linecap:round}
.lline.dashed{stroke-dasharray:5 5}
.band{fill:rgba(154,167,177,.18); stroke:none}
.donut .arc{stroke-linecap:butt}
.donut-top{font-size:18px; font-weight:800; fill:var(--ink)} .donut-bot{font-size:10px; fill:var(--muted)}
.forecast-note{margin-top:12px; background:#f3f6f8; border-left:3px solid var(--brand); padding:10px 14px; border-radius:8px; font-size:.9rem; color:#46545d}

/* ---------- donut + legend ---------- */
.donut-wrap{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.donut-wrap .chart-box{flex:0 0 220px; max-width:220px}
.legend{flex:1; min-width:220px; display:flex; flex-direction:column; gap:7px}
.leg{font-size:.92rem; display:flex; align-items:center; gap:8px}
.leg .dot,.mini .dot{width:11px; height:11px; border-radius:3px; display:inline-block; flex:0 0 auto}

/* ---------- callouts ---------- */
.callout{margin-top:14px; padding:12px 16px; border-radius:10px; font-size:.95rem}
.callout.act{background:var(--act-bg); border:1px solid #f1c9c2}
.callout.watch{background:var(--watch-bg); border:1px solid #f0ddb9}
.callout.good{background:var(--good-bg); border:1px solid #c8e3d2}

/* ---------- channels (multi-channel net) ---------- */
.chan-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px}
.chan{border:1px solid var(--line); border-radius:12px; padding:16px; background:#faf9f6}
.chan-store{border-top:4px solid var(--good)} .chan-del{border-top:4px solid var(--watch)}
.chan-name{font-weight:800; font-size:1.1rem; margin-bottom:8px}
.chan-row{display:flex; justify-content:space-between; padding:5px 0; font-size:.95rem; border-bottom:1px dashed var(--line)}
.chan-row.fee b{color:var(--act)}
.chan-row.keep{border-bottom:0; border-top:2px solid var(--line); margin-top:4px; padding-top:8px; font-weight:800; font-size:1.05rem}
.chan-margin{margin-top:10px; font-weight:700}
.warn-pill,.good-pill{font-size:.72rem; padding:2px 8px; border-radius:999px; font-weight:700; vertical-align:middle}
.warn-pill{background:var(--act-bg); color:var(--act)} .good-pill{background:var(--good-bg); color:var(--good)}

/* ---------- reorder ---------- */
.reorder-list{margin-top:8px}
.reorder-row{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-top:8px; background:#faf9f6}
.reorder-row.urgent{background:var(--act-bg); border-color:#f1c9c2}
.ro-item{font-weight:700} .ro-sup{display:block; color:var(--muted); font-weight:400; font-size:.82rem}
.ro-days{text-align:right} .ro-days b{display:block} .ro-days span{font-size:.8rem; color:var(--muted)}
.ro-act{font-weight:700; font-size:.9rem; white-space:nowrap}

/* ---------- mini stats + customers ---------- */
.mini-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0}
.mini{background:#faf9f6; border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center}
.mini.mini-warn{background:var(--watch-bg); border-color:#f0ddb9}
.mini-v{font-size:1.6rem; font-weight:800} .mini-l{color:var(--muted); font-size:.8rem}
.top-cust{margin-top:14px}
.tc-head{font-weight:700; margin-bottom:6px}
.tc-row{display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.95rem}
.tc-row b{color:var(--brand-d)} .tc-sub{color:var(--muted); font-size:.84rem; text-align:right}

/* ---------- how / details ---------- */
.how{cursor:pointer} .how summary{font-weight:700; color:var(--brand-d)}
.how p{color:#46545d; font-size:.92rem; margin-top:10px}
.warn{border-left:4px solid var(--act)}

/* ---------- tooltip ---------- */
.ss-tip{position:absolute; z-index:80; pointer-events:none; background:#21303a; color:#fff; font-size:.82rem; padding:6px 9px; border-radius:7px; max-width:260px; box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* ---------- landing / upload ---------- */
.landing{max-width:920px; margin:0 auto; padding:30px 18px 60px}
.hello{text-align:center; margin:18px 0 26px}
.hello h1{font-size:2.3rem} .hello p{color:var(--muted); font-size:1.1rem; max-width:620px; margin:10px auto 0}
.pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.pick{display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s}
.pick:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(28,40,48,.12)}
.pick .pic{font-size:2.2rem} .pick h3{margin:10px 0 6px; font-size:1.25rem; color:var(--brand-d)}
.pick p{color:var(--muted); font-size:.95rem; margin:0}
.pick .tags{margin-top:12px; display:flex; gap:6px; flex-wrap:wrap}
.tag{background:#eef3f5; color:var(--brand-d); font-size:.76rem; padding:3px 9px; border-radius:999px; font-weight:600}
.note-row{margin-top:22px; font-size:.9rem; color:var(--muted); text-align:center}

/* ---------- intro video ---------- */
.intro{text-align:center; margin:4px 0 28px}
.intro h2{font-size:1.6rem; color:var(--brand-d)}
.intro-sub{color:var(--muted); font-size:1rem; max-width:560px; margin:8px auto 16px}
.video-frame{position:relative; width:100%; max-width:720px; margin:0 auto; aspect-ratio:16 / 9; background:#0e171d; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.video-el{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; object-fit:contain}
.video-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px; background:linear-gradient(160deg,#eef3f5,#dfe9ee); border:2px dashed var(--brand); border-radius:var(--radius)}
.video-play{width:66px; height:66px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:1.5rem; padding-left:5px; box-shadow:0 8px 20px rgba(47,111,143,.4)}
.video-ph-sub{color:var(--muted); font-size:.9rem}

/* ---------- submit to Malki ---------- */
.submit{margin-top:26px}
.submit-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 30px; box-shadow:var(--shadow); border-top:4px solid var(--accent)}
.submit-card h2{font-size:1.5rem; color:var(--brand-d)}
.submit-sub{color:var(--muted); font-size:1rem; margin:8px 0 20px; line-height:1.6; max-width:640px}
.submit-card .field{margin-bottom:16px}
.submit-card label{display:block; font-weight:700; font-size:.95rem; margin-bottom:6px}
.submit-card .opt{font-weight:400; color:var(--muted)}
.submit-card input[type=text],.submit-card input[type=email],.submit-card textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fdfdfb;
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;
}
.dropzone{cursor:pointer; text-align:center; background:#fdfdfb; border:2px dashed var(--brand); border-radius:12px; padding:22px 18px; transition:background .12s,border-color .12s}
.dropzone:hover{background:#eef6f9}
.dropzone.drag{background:#eef6f9; border-color:var(--brand-d)}
.dropzone:focus{outline:none; border-color:var(--brand-d); box-shadow:0 0 0 3px rgba(47,111,143,.15)}
.dropzone-icon{font-size:1.7rem; line-height:1}
.dropzone-text{color:var(--ink); font-size:.98rem; margin-top:6px}
.dropzone-text b{color:var(--brand-d)}
.dropzone-files{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.chosen-file{background:var(--good-bg); color:var(--good); border-radius:999px; padding:5px 12px; font-size:.86rem; font-weight:700}
.chosen-size{font-weight:400; opacity:.85}
.submit-card input:focus,.submit-card textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,111,143,.15)}
.submit-card textarea{resize:vertical; min-height:70px}
.submit-card .hint{color:var(--muted); font-size:.84rem; margin:5px 0 0}
.form-error{background:var(--act-bg); border:1px solid #f1c9c2; color:var(--act); font-weight:600; font-size:.92rem; padding:10px 13px; border-radius:10px; margin:4px 0 14px}
.btn-send{cursor:pointer; border:0; border-radius:999px; font-weight:800; font-size:1rem; padding:13px 30px; background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(47,111,143,.28)}
.btn-send:hover{background:var(--brand-d)}
.btn-send:disabled{opacity:.6; cursor:default}
.submit-fine{color:var(--muted); font-size:.84rem; margin:14px 0 0}
.thankyou{text-align:center; padding:20px 10px}
.thankyou-tick{width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--good-bg); color:var(--good); display:grid; place-items:center; font-size:2rem; font-weight:800}
.thankyou h3{font-size:1.4rem; color:var(--brand-d)}
.thankyou p{color:var(--muted); font-size:1.02rem; max-width:520px; margin:10px auto 0; line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .two-col,.chan-grid,.pick-grid{grid-template-columns:1fr}
  .mini-stats{grid-template-columns:1fr 1fr}
  .dash-head h1{font-size:1.6rem}
}
@media (max-width:460px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .reorder-row{grid-template-columns:1fr auto}
  .ro-act{grid-column:1 / -1; text-align:right}
}