:root{
    --bg:#0c0c0e; --bg2:#131316; --card:#1b1b20; --card2:#26262c;
    --line:#2e2e35; --text:#f5f5f7; --muted:#9a9aa3; --muted2:#6f6f78;
    --accent:#f97316; --accent2:#fb923c; --star:#fbbf24; --ok:#34d399;
    --radius:22px;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    background:#000; color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
    display:flex; justify-content:center;
  }
  #phone{
    width:100%; max-width:430px; height:100dvh; background:var(--bg);
    position:relative; overflow:hidden; display:flex; flex-direction:column;
  }
  @media (min-width:500px){
    body{align-items:center}
    #phone{height:min(920px,96dvh); border-radius:40px; border:1px solid #222;
      box-shadow:0 30px 80px rgba(0,0,0,.8)}
  }
  #screen{flex:1; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; padding-bottom:110px}
  #screen::-webkit-scrollbar{display:none}

  /* ---------- generic ---------- */
  .pad{padding:0 18px}
  .h-eyebrow{color:var(--accent); font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; margin:26px 0 6px}
  .h-big{font-size:34px; font-weight:800; letter-spacing:-.5px; margin-bottom:10px}
  .sub{color:var(--muted); font-size:16px; line-height:1.5}
  .pill-btn{
    display:inline-flex; align-items:center; gap:8px; background:var(--card);
    border:1px solid var(--line); color:var(--text); font-size:16px; font-weight:600;
    padding:12px 20px; border-radius:999px; cursor:pointer; user-select:none;
  }
  .pill-btn:active{transform:scale(.97)}
  button{font-family:inherit}

  /* ---------- home ---------- */
  .searchwrap{margin:18px 18px 14px; position:relative}
  .searchwrap input{
    width:100%; background:var(--card); border:1px solid var(--line); border-radius:999px;
    padding:16px 18px 16px 58px; color:var(--text); font-size:17px; outline:none;
  }
  .searchwrap input::placeholder{color:var(--muted2)}
  .searchwrap .mag{
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:38px;height:38px;border-radius:50%; background:var(--accent);
    display:flex;align-items:center;justify-content:center; font-size:16px; color:#fff;
  }
  .chiprow{display:flex; gap:10px; padding:0 18px 4px; overflow-x:auto; scrollbar-width:none}
  .chiprow::-webkit-scrollbar{display:none}
  .chip{
    flex:0 0 auto; display:flex; align-items:center; gap:8px; background:var(--card);
    border:1px solid var(--line); border-radius:999px; padding:11px 18px;
    color:var(--text); font-size:16px; font-weight:600; cursor:pointer; white-space:nowrap;
  }
  .chip.active{border-color:var(--accent); color:var(--accent)}
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px 18px}
  .rcard{
    position:relative; border-radius:20px; overflow:hidden; aspect-ratio:.92;
    cursor:pointer; display:flex; align-items:flex-end; border:1px solid rgba(255,255,255,.05);
  }
  .rcard:active{transform:scale(.97)}
  .rcard .emoji{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:74px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
  .rcard .shade{position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.72))}
  .rcard .name{position:relative; padding:12px; font-size:17px; font-weight:700; line-height:1.25; text-shadow:0 2px 8px rgba(0,0,0,.6)}
  .rcard .badge{position:absolute; top:10px; right:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border-radius:999px; padding:5px 10px; font-size:12px; font-weight:700}
  .empty{padding:60px 30px; text-align:center; color:var(--muted)}
  .empty .big{font-size:44px; margin-bottom:12px}

  /* ---------- tabbar ---------- */
  #tabbar{
    position:absolute; left:14px; right:14px; bottom:14px; z-index:40;
    background:rgba(22,22,26,.92); backdrop-filter:blur(18px);
    border:1px solid var(--line); border-radius:28px;
    display:flex; padding:8px;
  }
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 0 7px; border-radius:20px; cursor:pointer; color:var(--muted);
    font-size:13px; font-weight:600; border:1px solid transparent;
  }
  .tab svg{width:24px;height:24px}
  .tab.active{color:var(--accent); background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.35)}

  /* ---------- top nav in subscreens ---------- */
  .topnav{
    position:sticky; top:0; z-index:30; display:flex; justify-content:space-between;
    align-items:center; padding:14px 18px 10px;
    background:linear-gradient(180deg,var(--bg) 55%,transparent);
  }
  .navpill{
    display:flex; align-items:center; gap:8px; background:rgba(27,27,32,.9);
    backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:999px;
    padding:12px 20px; font-size:17px; font-weight:600; cursor:pointer; color:var(--text);
  }
  .navdots{
    width:48px;height:48px;border-radius:50%; background:rgba(27,27,32,.9);
    border:1px solid var(--line); display:flex;align-items:center;justify-content:center;
    font-size:20px; cursor:pointer; letter-spacing:1px;
  }

  /* ---------- detail ---------- */
  .hero{
    margin:0 10px; border-radius:26px; height:390px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.05);
  }
  .hero .emoji{font-size:130px; filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
  .watchbtn{
    display:flex; margin:-24px auto 0; position:relative; z-index:2;
    background:#3a2418; border:1px solid #5b3a24; color:#fff; gap:10px;
    align-items:center; padding:13px 26px; border-radius:999px; font-size:17px; font-weight:600; cursor:pointer;
  }
  .dtitle{font-size:40px; font-weight:800; text-align:center; line-height:1.1; letter-spacing:-1px; margin:26px 16px 18px}
  .ratecard{
    margin:0 18px 18px; background:var(--card); border:1px solid var(--line);
    border-radius:18px; padding:16px 18px; cursor:pointer;
  }
  .ratehead{display:flex; align-items:center; gap:10px}
  .stars{color:var(--star); font-size:19px; letter-spacing:2px}
  .ratehead b{font-size:20px}
  .ratehead span{color:var(--muted); font-size:16px}
  .ratehead .chev{margin-left:auto; color:var(--muted); transition:transform .2s}
  .ratecard.open .chev{transform:rotate(180deg)}
  .reviewlist{display:none; margin-top:14px; border-top:1px solid var(--line); padding-top:6px}
  .ratecard.open .reviewlist{display:block}
  .review{padding:10px 0; border-bottom:1px solid var(--line)}
  .review:last-child{border-bottom:none}
  .review .who{font-weight:700; font-size:14px; margin-bottom:2px}
  .review .txt{color:var(--muted); font-size:14px; line-height:1.45}

  .maccard{margin:0 18px 18px; background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden}
  .maccard .mhead{padding:18px; text-align:center; background:var(--card2)}
  .maccard .mhead b{font-size:20px}
  .maccard .mhead div{color:var(--muted); font-size:14px; margin-top:4px}
  .macgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px}
  .macbox{background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center}
  .macbox .lab{color:var(--muted); font-size:15px}
  .macbox .val{font-size:26px; font-weight:800; margin-top:2px}

  .actgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 18px 18px}
  .actbtn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:16px; color:var(--text); font-size:16px; font-weight:600; cursor:pointer;
  }
  .actbtn.on{border-color:var(--accent); color:var(--accent)}

  .notecard{margin:0 18px 18px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px}
  .notecard h4{font-size:18px; margin-bottom:12px; display:flex; gap:8px; align-items:center}
  .notecard textarea{
    width:100%; background:transparent; border:1.5px dashed var(--line); border-radius:12px;
    padding:14px; color:var(--text); font-size:15px; min-height:54px; resize:vertical; outline:none; font-family:inherit;
  }
  .notecard .hint{color:var(--muted2); font-size:13px; margin-top:8px}
  .tipcard{margin:0 18px 18px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; display:flex; gap:14px}
  .tipcard .bulb{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:20px}
  .tipcard h4{font-size:18px; margin-bottom:6px}
  .tipcard p{color:var(--muted); font-size:15px; line-height:1.55}

  .rowset{margin:0 18px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .rowset .lab{font-size:18px; font-weight:700}
  .switch{width:56px;height:32px;border-radius:999px;background:var(--card2);border:1px solid var(--line);position:relative;cursor:pointer;transition:.2s}
  .switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#888;transition:.2s}
  .switch.on{background:var(--accent)}
  .switch.on::after{left:27px;background:#fff}
  .stepper{display:flex;align-items:center;gap:12px}
  .stepbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:20px;cursor:pointer}
  .stepval{font-size:22px;font-weight:800;min-width:28px;text-align:center}
  .seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px}
  .seg button{border:none;background:transparent;color:var(--muted);padding:8px 16px;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer}
  .seg button.active{background:#e8e8ec;color:#111}

  .ingsec{margin:6px 18px 18px}
  .ingsec h3{font-size:26px; font-weight:800; margin:18px 0 12px; letter-spacing:-.5px}
  .ingsec ul{list-style:none}
  .ingsec li{display:flex; gap:12px; padding:9px 0; font-size:17px; line-height:1.4; border-bottom:1px solid rgba(255,255,255,.04)}
  .ingsec li::before{content:"•"; color:var(--accent); font-size:20px; line-height:1.2}
  .pantrybtn{margin:4px 0 8px}

  .instcard{margin:0 18px 18px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px}
  .instcard h3{font-size:26px; font-weight:800; margin-bottom:14px}
  .instcard ol{padding-left:22px}
  .instcard li{font-size:16px; line-height:1.6; color:#e6e6ea; margin-bottom:16px}

  .revform{margin:0 18px 24px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px}
  .revform h3{font-size:20px; margin-bottom:4px}
  .revform .sub2{color:var(--muted); font-size:14px; margin-bottom:14px}
  .revform .lab2{color:var(--muted); font-size:13px; font-weight:700; letter-spacing:1.5px; margin:14px 0 8px}
  .starrow{display:flex; gap:10px; align-items:center}
  .starbtn{width:46px;height:46px;border-radius:50%;background:var(--card2);border:1px solid var(--line);font-size:20px;cursor:pointer;color:#555}
  .starbtn.on{color:var(--star); box-shadow:0 0 14px rgba(251,191,36,.25)}
  .revform textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--text);font-size:15px;min-height:100px;resize:vertical;outline:none;font-family:inherit}
  .submitrev{
    margin-top:16px; margin-left:auto; display:flex; gap:8px; align-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border:none;
    padding:14px 24px; border-radius:999px; font-size:16px; font-weight:700; cursor:pointer;
  }

  /* ---------- sheets & overlays ---------- */
  #ovl{position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:50; display:none}
  #ovl.show{display:block}
  .sheet{
    position:absolute; left:0; right:0; bottom:0; z-index:60; background:var(--bg2);
    border-radius:26px 26px 0 0; border-top:1px solid var(--line);
    max-height:88%; display:none; flex-direction:column;
  }
  .sheet.show{display:flex}
  .sheet .sbody{overflow-y:auto; padding:22px 20px 10px}
  .sheet .x{position:absolute; top:16px; right:18px; font-size:22px; color:var(--muted); cursor:pointer; z-index:2}
  .fgrouph{display:flex; align-items:baseline; gap:12px; margin:18px 0 12px}
  .fgrouph:first-child{margin-top:0}
  .fgrouph b{color:var(--muted); font-size:15px; font-weight:800; letter-spacing:2px}
  .fgrouph span{color:var(--muted2); font-size:12.5px}
  .fwrap{display:flex; flex-wrap:wrap; gap:10px}
  .fopt{
    background:var(--card); border:1px solid var(--line); color:var(--text);
    padding:11px 20px; border-radius:999px; font-size:16px; cursor:pointer;
  }
  .fopt.active{background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; color:#fff; font-weight:700}
  .macroinput{display:flex; align-items:center; gap:10px; margin-top:12px}
  .macroinput input{
    flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:14px; color:var(--text); font-size:16px; outline:none;
  }
  .macroinput span{color:var(--muted)}
  .fhint{color:var(--muted2); font-size:13px; margin-top:8px}
  .sheetfoot{display:flex; gap:12px; padding:14px 20px 8px; border-top:1px solid var(--line)}
  .sheetfoot .cancel{flex:1; background:transparent; border:1px solid var(--line); color:var(--text); padding:15px; border-radius:16px; font-size:17px; font-weight:600; cursor:pointer}
  .sheetfoot .apply{flex:1.4; background:#f2f2f5; border:none; color:#111; padding:15px; border-radius:16px; font-size:17px; font-weight:700; cursor:pointer}
  .clearall{text-align:center; color:var(--muted); padding:10px 0 18px; cursor:pointer; font-size:16px}

  /* actions popover */
  #popover{
    position:absolute; top:70px; right:16px; z-index:70; width:290px;
    background:#141418; border:1px solid var(--line); border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.7); display:none; overflow:hidden;
  }
  #popover.show{display:block}
  #popover .ph{padding:16px 18px 10px; color:var(--muted); font-size:12.5px; font-weight:800; letter-spacing:2px; border-bottom:1px solid var(--line)}
  .pitem{display:flex; gap:14px; align-items:center; padding:12px 18px; cursor:pointer}
  .pitem:active{background:var(--card)}
  .pitem .ic{width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:17px}
  .pitem b{font-size:16.5px; display:block}
  .pitem span{color:var(--muted); font-size:13.5px}
  .pshare{margin:8px 14px 14px; border:1px solid var(--line); border-radius:14px; display:flex; gap:12px; align-items:center; padding:12px 16px; cursor:pointer; font-weight:600}

  /* toast */
  #toast{
    position:absolute; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#1f1f24; border:1px solid var(--line); color:var(--text);
    padding:12px 22px; border-radius:999px; font-size:15px; font-weight:600;
    opacity:0; transition:.25s; z-index:80; white-space:nowrap; pointer-events:none;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
  }
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  /* ---------- ingredient match ---------- */
  .ingadd{margin:18px; position:relative}
  .ingadd input{
    width:100%; background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:17px 18px; color:var(--text); font-size:17px; outline:none;
  }
  .sugg{display:flex; flex-wrap:wrap; gap:10px; padding:0 18px}
  .sugg .fopt{font-size:15px; padding:9px 16px; color:var(--muted)}
  .mychips{display:flex; flex-wrap:wrap; gap:10px; padding:14px 18px 0}
  .mychip{display:flex; gap:8px; align-items:center; background:rgba(249,115,22,.15); border:1px solid rgba(249,115,22,.5); color:var(--accent2); padding:9px 16px; border-radius:999px; font-size:15px; font-weight:600; cursor:pointer}
  .findbtn{
    margin:18px; width:calc(100% - 36px); display:flex; justify-content:center; gap:10px; align-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#fff;
    padding:18px; border-radius:999px; font-size:18px; font-weight:700; cursor:pointer;
  }
  .findbtn:disabled{opacity:.45}
  .matchbox{margin:0 18px 18px; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:26px 20px; text-align:center; color:var(--muted)}
  .matchbox .icirc{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.4);display:flex;align-items:center;justify-content:center;font-size:28px}
  .matchbox h3{color:var(--text); font-size:21px; margin-bottom:8px}
  .msect{padding:6px 18px 2px; font-size:14px; font-weight:800; letter-spacing:1.5px; color:var(--muted)}
  .msect.green{color:var(--ok)}
  .mrow{display:flex; gap:14px; margin:10px 18px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px; cursor:pointer; align-items:center}
  .mrow .thumb{width:64px;height:64px;flex:0 0 64px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px}
  .mrow b{font-size:16.5px; display:block; line-height:1.25}
  .mrow .miss{font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.35}
  .mrow .miss.ok{color:var(--ok)}

  /* ---------- library ---------- */
  .bookgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 18px}
  .book{cursor:pointer}
  .bcover{
    aspect-ratio:.78; border-radius:14px; padding:16px 14px; display:flex; flex-direction:column;
    justify-content:space-between; border:1px solid rgba(255,255,255,.08);
    box-shadow:6px 8px 22px rgba(0,0,0,.5), inset -8px 0 14px rgba(0,0,0,.25);
    position:relative; overflow:hidden;
  }
  .bcover::after{content:"";position:absolute;top:0;bottom:0;left:8px;width:2px;background:rgba(0,0,0,.25)}
  .bcover .bt{font-weight:900; font-size:19px; line-height:1.15; letter-spacing:-.3px}
  .bcover .bs{font-size:12px; font-weight:700; opacity:.85}
  .bcover .bemoji{font-size:40px; align-self:center}
  .book .bname{margin-top:10px; font-weight:700; font-size:16px; line-height:1.3}
  .book .bcount{color:var(--muted); font-size:13.5px; margin-top:2px}

  /* ---------- plan ---------- */
  .segwide{margin:16px 18px 4px; display:flex; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:5px}
  .segwide button{flex:1; border:none; background:transparent; color:var(--muted); padding:12px; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer}
  .segwide button.active{background:var(--accent); color:#fff}
  .daycard{margin:12px 18px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 16px}
  .daycard .dh{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
  .daycard .dh b{font-size:17px}
  .daycard .dh span{color:var(--muted2); font-size:13px}
  .planrow{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid rgba(255,255,255,.05)}
  .planrow .pthumb{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 44px}
  .planrow .pn{flex:1; font-size:15.5px; font-weight:600; line-height:1.3; cursor:pointer}
  .planrow .pmac{color:var(--muted2); font-size:12.5px}
  .planrow .rm{color:var(--muted2); font-size:18px; cursor:pointer; padding:4px 8px}
  .dayempty{color:var(--muted2); font-size:14px; padding:10px 0 4px}
  .daytotal{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); color:var(--muted); font-size:13.5px}
  .grocitem{display:flex; gap:14px; align-items:center; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer}
  .grocitem .cb{width:26px;height:26px;border-radius:8px;border:2px solid var(--line);flex:0 0 26px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
  .grocitem.done .cb{background:var(--accent); border-color:var(--accent)}
  .grocitem .gn{flex:1; font-size:16px}
  .grocitem.done .gn{color:var(--muted2); text-decoration:line-through}
  .grocitem .gq{color:var(--muted); font-size:14px}
  .grocclear{margin:16px 18px; text-align:center; color:var(--muted); cursor:pointer; font-size:15px}

  /* ---------- profile ---------- */
  .statrow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; padding:14px 18px}
  .stat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 8px; text-align:center}
  .stat .v{font-size:26px; font-weight:800; color:var(--accent)}
  .stat .l{color:var(--muted); font-size:13px; margin-top:4px}
  .sect-h{padding:20px 18px 6px; font-size:21px; font-weight:800}
  .favrow{display:flex; gap:14px; margin:10px 18px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px; cursor:pointer; align-items:center}

  /* modal */
  #modal{position:absolute; inset:0; z-index:90; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; padding:30px}
  #modal.show{display:flex}
  .modbox{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px 24px; text-align:center; max-width:320px}
  .modbox .memoji{font-size:44px; margin-bottom:12px}
  .modbox h3{margin-bottom:8px}
  .modbox p{color:var(--muted); font-size:15px; line-height:1.5; margin-bottom:18px}
  .modbox button{background:var(--accent); border:none; color:#fff; padding:12px 28px; border-radius:999px; font-size:16px; font-weight:700; cursor:pointer}

  /* ---------- plan v2 ---------- */
  .banner{margin:18px 18px 0; background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.35);
    border-radius:18px; padding:16px 18px; display:flex; gap:12px; justify-content:space-between}
  .banner b{font-size:17px}
  .banner .bx{color:var(--muted); cursor:pointer; font-size:17px; padding:2px 4px}
  .datenav{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .navcirc{width:44px;height:44px;border-radius:50%;background:var(--card2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;color:var(--muted)}
  .planstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);padding-top:14px}
  .pstat{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
  .pstat .l{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:2px}
  .pstat .v{font-size:23px;font-weight:800;margin-top:2px}
  .slottag{display:inline-block;background:rgba(249,115,22,.15);color:var(--accent2);border:1px solid rgba(249,115,22,.4);
    border-radius:8px;padding:1px 8px;font-size:11.5px;font-weight:800;letter-spacing:.5px;margin-right:4px;vertical-align:1px}
  .remcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px}
  .cbbig{width:30px;height:30px;border-radius:9px;border:2px solid var(--line);display:flex;align-items:center;
    justify-content:center;color:#fff;font-size:15px;cursor:pointer;flex:0 0 30px}
  .cbbig.on{background:#2f7ef7;border-color:#2f7ef7}

  /* ---------- forms ---------- */
  .flabel{color:var(--muted);font-size:12.5px;font-weight:800;letter-spacing:2px;margin:16px 0 8px}
  .finput{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:14px;
    padding:14px;color:var(--text);font-size:16px;outline:none;font-family:inherit;margin-bottom:2px}
  select.finput{appearance:none;-webkit-appearance:none}
  .formcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:6px}
  .formcard .flabel:first-child{margin-top:0}
  .ghostbtn{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;background:transparent;
    border:1px solid var(--line);color:var(--text);padding:13px;border-radius:14px;font-size:16px;
    font-weight:600;cursor:pointer;margin-top:10px}

  /* ---------- library v2 / profile v2 ---------- */
  .catrow{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px 0}
  .catrow h3{font-size:24px;font-weight:800}
  .catrow span{color:var(--muted);font-size:14px}
  .avatar{width:96px;height:96px;border-radius:50%;margin:0 auto;font-size:44px;display:flex;align-items:center;
    justify-content:center;background:linear-gradient(140deg,#8b5cf6,#6366f1);
    box-shadow:0 0 40px rgba(139,92,246,.45)}
  .probadge{display:inline-flex;gap:6px;align-items:center;margin-top:12px;color:var(--accent);
    border:1px solid rgba(249,115,22,.5);background:rgba(249,115,22,.08);border-radius:999px;
    padding:8px 18px;font-size:13.5px;font-weight:800;letter-spacing:1.5px}
  .trialtag{color:var(--accent);border:1px solid rgba(249,115,22,.5);background:rgba(249,115,22,.1);
    border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;letter-spacing:1.5px}
  .micon{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:rgba(249,115,22,.1);
    border:1px solid rgba(249,115,22,.35);display:flex;align-items:center;justify-content:center;font-size:19px}
  .offbox{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:12px}
  .offbox b{font-size:17px}
  .signout{margin:8px 18px 24px;border:1px solid rgba(220,60,60,.5);background:rgba(220,60,60,.08);
    color:#f87171;border-radius:16px;padding:15px;text-align:center;font-size:16.5px;font-weight:700;cursor:pointer}

  /* ---------- light mode ---------- */
  body.light #phone{--bg:#f4f4f6;--bg2:#ffffff;--card:#ffffff;--card2:#ececf0;--line:#dcdce2;
    --text:#17171b;--muted:#5f5f68;--muted2:#8e8e96}
  body.light #tabbar{background:rgba(255,255,255,.92)}
  body.light .navpill,body.light .navdots{background:rgba(255,255,255,.92)}
  body.light #popover{background:#fff}
  body.light .sheet{background:#f4f4f6}
  body.light #toast{background:#fff;color:#111}
  body.light .sheetfoot .apply{background:#17171b;color:#fff}
  body.light .seg button.active{background:#17171b;color:#fff}