/* RIVAK Studio - skeuomorphic dashboard (reel design) */
:root{
  --cream:#ece5d8; --cream2:#e4dcc9; --card:#f7f2e8; --card2:#efe8da; --edge:#d9cfbe;
  --dark:#2b2119; --dark2:#241b13; --ink:#3a2e21; --muted:#93826b;
  --orange:#e8641c; --orange2:#f07c2e; --teal:#2f9e8f;
  --up:#3d9955; --dn:#d05540;
  --serif:'Instrument Serif',serif; --sans:'Space Grotesk',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);font-family:var(--sans);color:var(--ink);min-height:100vh;padding:18px 18px 120px}
::selection{background:#f4c9a8}

/* ---------- top bar ---------- */
#topbar{position:sticky;top:14px;z-index:50;max-width:1240px;margin:0 auto 18px;height:64px;border-radius:40px;
  background:linear-gradient(#382c22,var(--dark));display:flex;align-items:center;padding:0 22px;gap:16px;
  box-shadow:0 14px 30px rgba(43,33,25,.35), inset 0 2px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.3)}
#topbar .who{display:flex;align-items:center;gap:12px;color:#e9dfce;font-size:17px;font-weight:500;min-width:0}
#topbar .avatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#c9a37e,#6b4c33);border:2px solid #4a3a2b;color:#f7ead7;font-family:var(--serif);font-size:19px}
#topbar .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar .pill{position:absolute;left:50%;transform:translateX(-50%);background:#1d1510;border-radius:40px;padding:9px 22px;
  display:flex;align-items:center;gap:10px;box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08);max-width:44%}
#topbar .pill .orb{width:18px;height:18px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#d9b3ff,#7b3ff2 60%,#3d1a86)}
#topbar .pill span{font-family:var(--serif);font-style:italic;font-size:16px;color:#7ddfc0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar .bell{margin-left:auto;width:38px;height:38px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#f3e9d8,#cbb694);
  display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 -2px 3px rgba(90,70,45,.4)}
#topbar .bell svg{width:17px;height:17px;stroke:#4a3a28}
#topbar .bell .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:#d8452c;border:1.5px solid #f3e9d8}

/* ---------- layout ---------- */
#shell{max-width:1240px;margin:0 auto;display:flex;gap:20px;align-items:flex-start}
#rail{position:sticky;top:96px;width:64px;border-radius:36px;background:linear-gradient(#382c22,#261d15);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12), 0 6px 14px rgba(43,33,25,.3);
  display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:8px;flex:none}
#rail button{width:44px;height:44px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background .15s}
#rail button svg{width:20px;height:20px;stroke:#a08e77;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#rail button:hover{background:rgba(242,233,216,.08)}
#rail button.on{background:#f2e9d8;box-shadow:0 0 0 5px rgba(242,233,216,.12)}
#rail button.on svg{stroke:#2b2119}
#rail button .tip{position:absolute;left:56px;top:50%;transform:translateY(-50%);background:#f7f2e8;border:1px solid var(--edge);color:var(--ink);
  font-size:12px;padding:4px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:0 4px 10px rgba(80,62,40,.2)}
#rail button:hover .tip{opacity:1}
#rail .sep{width:26px;height:1px;background:rgba(242,233,216,.16);margin:6px 0}

#panel{flex:1;min-width:0;background:var(--cream2);border-radius:34px;position:relative;padding:30px 34px 40px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(120,100,75,.15), 0 18px 44px rgba(80,62,40,.18)}
#panel::before,#panel::after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9cfbe,#a2937d);box-shadow:inset 0 -1px 2px rgba(0,0,0,.25)}
#panel::before{top:12px;left:14px}
#panel::after{top:12px;right:14px}

/* ---------- views ---------- */
.view{display:none;animation:fade .35s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-family:var(--serif);font-weight:400;font-size:40px;color:var(--ink);letter-spacing:.3px}
.sub{color:var(--muted);font-size:15px;margin-top:4px}
.hrow{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hrow .spacer{flex:1}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:20px 22px;position:relative;min-width:0;
  box-shadow:inset 0 2px 0 #fff, inset 0 -3px 0 rgba(120,100,75,.16), 0 5px 12px rgba(80,62,40,.13)}
.g3a{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,360px)}
@media (max-width:1250px){.g3a{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.g3a>.span2{grid-column:1/-1}}
@media (max-width:760px){.g3a{grid-template-columns:minmax(0,1fr)}}
.card h4{font-size:14px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:8px;letter-spacing:.2px}
.card h4 .dot{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.card h4 .dot svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}
.big{font-size:34px;font-weight:700;color:var(--ink);margin-top:8px;letter-spacing:-.5px;white-space:nowrap}
.chg{font-size:13px;margin-top:5px}
.up{color:var(--up)}.dn{color:var(--dn)}.mut{color:var(--muted)}
.card.orange{background:linear-gradient(140deg,var(--orange2),#d9541a);border:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(120,40,0,.25), 0 6px 14px rgba(200,90,20,.35)}
.card.orange h4,.card.orange .big,.card.orange .chg{color:#fff}
.card.teal{background:linear-gradient(140deg,#35ab98,#238b7c);border:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,60,50,.25), 0 6px 14px rgba(30,120,105,.3)}
.card.teal h4,.card.teal .big,.card.teal .chg{color:#fff}

/* buttons */
.btn{background:linear-gradient(#382c22,var(--dark2));color:#f2e9d8;border:none;border-radius:26px;padding:10px 20px;
  font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 3px 8px rgba(43,33,25,.3);transition:transform .1s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.lt{background:var(--card2);color:var(--ink);border:1px solid var(--edge);box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(80,62,40,.12)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* pills / segmented */
.seg{display:inline-flex;background:var(--card2);border:1px solid var(--edge);border-radius:24px;padding:4px;gap:2px;flex-wrap:wrap;
  box-shadow:inset 0 1px 3px rgba(120,100,75,.18)}
.seg button{border:none;background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;padding:7px 16px;border-radius:18px;cursor:pointer;white-space:nowrap}
.seg button.on{background:linear-gradient(#382c22,var(--dark2));color:#f2e9d8;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.seg button .n{opacity:.65;font-size:12px;margin-left:4px}

/* inputs */
.inp{background:var(--card2);border:1px solid var(--edge);border-radius:22px;padding:9px 16px 9px 36px;font-family:var(--sans);
  font-size:14px;color:var(--ink);width:220px;box-shadow:inset 0 2px 4px rgba(120,100,75,.15);outline:none}
.inp:focus{border-color:#c3b394}
.inpwrap{position:relative;display:inline-flex;align-items:center}
.inpwrap svg{position:absolute;left:13px;width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2}
select.inp{padding-left:16px;width:auto;appearance:none;cursor:pointer}

/* progress */
.pbar{height:12px;border-radius:8px;background:var(--card2);border:1px solid var(--edge);overflow:hidden;box-shadow:inset 0 1px 3px rgba(120,100,75,.2)}
.pbar>div{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--orange2),#d9541a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.pbar.dark>div{background:linear-gradient(90deg,#4a3a28,var(--dark2))}

/* wallets / channels */
.wallet{background:var(--card2);border:1px solid var(--edge);border-radius:14px;padding:11px 14px;margin-top:10px;
  display:flex;justify-content:space-between;align-items:center;box-shadow:inset 0 1px 0 #fff}
.wallet .wl{display:flex;align-items:center;gap:10px;font-size:14px}
.wallet .flag{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:radial-gradient(circle at 35% 30%,#e8dcc6,#b7a488);box-shadow:inset 0 -2px 3px rgba(90,70,45,.3)}
.wallet .flag svg{width:14px;height:14px;stroke:#4a3a28;fill:none;stroke-width:2}
.wallet .amt{font-size:17px;font-weight:700}
.wallet .lim{font-size:11px;color:var(--muted);margin-top:1px}
.stchip{font-size:10px;padding:2px 8px;border-radius:10px;margin-left:8px;font-weight:500}
.stchip.on{background:#e2f0e4;color:var(--up)}
.stchip.off{background:#eee4d2;color:var(--muted)}

/* tables */
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px}
.tbl th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:8px 10px;border-bottom:1px solid var(--edge);
  letter-spacing:.3px;cursor:pointer;user-select:none;white-space:nowrap}
.tbl th .ar{opacity:.5;font-size:10px;margin-left:3px}
.tbl td{padding:9px 10px;border-bottom:1px solid #e9e1d1;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:#f2ecdf}
.tbl .oid{font-weight:600;white-space:nowrap}
.tbl .it{display:flex;align-items:center;gap:9px;min-width:0}
.tbl .it img{width:30px;height:30px;border-radius:8px;object-fit:cover;border:1px solid var(--edge);flex:none;background:var(--card2)}
.tbl .it .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.tbl .pr{font-weight:600;white-space:nowrap}
.tbl .dt{color:var(--muted);white-space:nowrap;font-size:12.5px}
.st{padding:3px 11px;border-radius:14px;font-size:11.5px;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.st.new{background:#e8e4ee;color:#6b5fc7}
.st.confirmed{background:#e2f0e4;color:var(--up)}
.st.packed{background:#f7e8d6;color:#c97b1e}
.st.shipped{background:#e0ecf5;color:#3a7ca8}
.st.delivered{background:#e2f0e4;color:var(--up)}
.st.rto{background:#f5e2dc;color:var(--dn)}
.st.cancelled{background:#eee4d2;color:var(--muted)}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:13px;color:var(--muted)}
.pager button{border:1px solid var(--edge);background:var(--card2);color:var(--ink);border-radius:14px;padding:5px 12px;cursor:pointer;font-family:var(--sans)}
.pager button:disabled{opacity:.4;cursor:default}

/* feed */
.frow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #e9e1d1;font-size:13px}
.frow:last-child{border-bottom:none}
.frow .fi{width:28px;height:28px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--edge)}
.frow .fi svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2}
.frow .ft{flex:1;min-width:0}
.frow .ft .t1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .ft .t2{font-size:11px;color:var(--muted)}
.frow .fa{font-weight:600;white-space:nowrap}
.live{font-size:11px;color:var(--up);font-weight:600;display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--up);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* goals */
.ringwrap{position:relative;width:92px;height:92px;margin:2px auto}
.ringwrap svg{transform:rotate(-90deg)}
.ringwrap .rp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringwrap .rp .v{font-size:19px;font-weight:700}
.ringwrap .rp .l{font-size:9.5px;color:var(--muted)}
.goal{text-align:center;padding:16px 12px}
.goal .gname{font-size:14px;font-weight:500;margin-top:6px}
.goal .gamt{font-size:12px;color:var(--muted);margin-top:2px}
.goal .gdate{position:absolute;top:12px;right:12px;font-size:10.5px;background:var(--card2);border:1px solid var(--edge);border-radius:10px;padding:2px 9px;color:var(--muted)}
.goal.newgoal{border:1.5px dashed #c9bca6;background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-height:170px;color:var(--muted)}
.goal.newgoal:hover{background:#f3ecdd}
.goal.newgoal .plus{width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--edge);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--ink)}
.goal form{display:flex;flex-direction:column;gap:8px;width:100%}
.goal form .inp{width:100%;padding-left:14px}

/* toggles */
.tglrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--edge);font-size:14px}
.tglrow:last-child{border-bottom:none}
.tglrow .td{font-size:11.5px;color:var(--muted);margin-top:2px}
.sw{width:46px;height:26px;border-radius:16px;background:#d8cfc0;position:relative;cursor:pointer;flex:none;border:none;
  box-shadow:inset 0 2px 4px rgba(120,100,75,.3);transition:background .15s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.sw.on{background:var(--orange)}
.sw.on::after{left:23px}

/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:16px}
.pcard{background:var(--card);border:1px solid var(--edge);border-radius:18px;overflow:hidden;position:relative;
  box-shadow:inset 0 2px 0 #fff, inset 0 -3px 0 rgba(120,100,75,.14), 0 5px 12px rgba(80,62,40,.12)}
.pcard .pimg{height:170px;background:var(--card2);position:relative;overflow:hidden}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .pimg .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}
.pcard .badge{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:12px;z-index:2}
.badge.so{background:#3a2e21;color:#f2e9d8}
.badge.hd{background:#efe4cd;color:var(--muted);left:auto;right:10px}
.pcard .pbody{padding:13px 15px 15px}
.pcard .pnm{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .ptp{font-size:11.5px;color:var(--muted);margin-top:1px}
.pcard .prow{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.pcard .ppr{font-size:17px;font-weight:700}
.pcard .pmrp{font-size:12px;color:var(--muted);text-decoration:line-through}
.pcard .pmg{font-size:11px;color:var(--up);margin-left:auto;font-weight:500}
.pcard .pstats{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:8px;border-top:1px solid #e9e1d1;padding-top:8px}
.pcard .pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.pcard .pfoot .lbl{font-size:11.5px;color:var(--muted)}

/* reviews */
.rev{border-bottom:1px solid #e9e1d1;padding:10px 0;font-size:13.5px}
.rev:last-child{border-bottom:none}
.rev .rh{display:flex;align-items:center;gap:8px}
.rev .stars{color:#e8a13c;font-size:13px;letter-spacing:1px}
.rev .rn{font-weight:600}
.rev .rp2{margin-left:auto;font-size:11px;color:var(--muted)}
.rev .rt{color:var(--muted);font-size:12.5px;margin-top:3px}

/* misc */
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #e9e1d1;font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;text-align:right}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--edge);border-radius:14px;
  padding:4px 12px;font-size:12px;color:var(--ink)}
.legend{margin-top:12px;font-size:13px}
.legend .li{display:flex;align-items:center;gap:9px;margin-top:8px}
.legend .sw2{width:13px;height:13px;border-radius:4px;flex:none}
.legend .bar{flex:1;height:7px;border-radius:5px;background:var(--card2);border:1px solid var(--edge);overflow:hidden;margin:0 8px}
.legend .bar>div{height:100%;border-radius:5px}
.legend .pc{color:var(--muted);font-size:12px;width:38px;text-align:right}
.tooltip{position:fixed;z-index:99;pointer-events:none;background:#2b2119;color:#f2e9d8;font-size:12px;padding:7px 12px;border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;transition:opacity .1s;white-space:nowrap}
.emptynote{color:var(--muted);font-size:13px;text-align:center;padding:26px 0}

/* ---------- bottom tab bar ---------- */
#tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;background:linear-gradient(#382c22,var(--dark2));
  border-radius:40px;padding:9px 12px;display:flex;gap:2px;align-items:center;
  box-shadow:0 12px 30px rgba(43,33,25,.5), inset 0 1px 0 rgba(255,255,255,.14)}
#tabbar button{border:none;background:transparent;color:#a08e77;font-family:var(--sans);font-size:13.5px;padding:10px 17px;
  border-radius:26px;cursor:pointer;white-space:nowrap;transition:color .15s}
#tabbar button:hover{color:#e9dfce}
#tabbar button.on{background:#f2e9d8;color:#2b2119;font-weight:600}
#tabbar .plus{background:#f2e9d8;color:#2b2119;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;font-size:22px;margin-left:6px;border:none;cursor:pointer;font-weight:300;padding:0}

/* toast */
#toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(10px);background:linear-gradient(#382c22,var(--dark2));
  color:#f2e9d8;font-size:13.5px;padding:11px 22px;border-radius:24px;box-shadow:0 10px 26px rgba(43,33,25,.5);opacity:0;
  pointer-events:none;transition:all .25s;z-index:70}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  #rail{display:none}
}
@media (max-width:760px){
  body{padding:10px 10px 110px}
  #topbar{top:8px;height:56px;padding:0 14px}
  #topbar .pill{display:none}
  #panel{padding:20px 16px 30px;border-radius:24px}
  h1{font-size:30px}
  .grid{grid-template-columns:1fr!important}
  .inp{width:100%}
  #tabbar{bottom:12px;max-width:calc(100vw - 16px);overflow-x:auto;padding:7px 9px}
  #tabbar button{padding:9px 13px;font-size:12.5px}
  .big{font-size:28px}
  .tblwrap{overflow-x:auto}
}
.g3b{display:grid;grid-template-columns:minmax(0,255px) minmax(0,1.8fr) minmax(0,320px)}
@media (max-width:1250px){.g3b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.g3b>.span2{grid-column:1/-1}}
@media (max-width:760px){.g3b{grid-template-columns:minmax(0,1fr)}}
.wallet .amt{white-space:nowrap}
.tbl .it .nm{max-width:150px}
.tbl td,.tbl th{padding-left:7px;padding-right:7px}

.g3b .st{padding:3px 8px;font-size:10.5px}