:root{
        --orange:#fc7a13; --orange-dark:#d96404; --blue:#0b62bf; --blue-dark:#084e99;
        --navy:#06101b;
        --bg:#eef1f5; --surface:#ffffff; --surface-2:#f5f7fa; --ink:#131a23; --muted:#5d6a78;
        --line:#dde3ea; --good:#1d8a4e; --warn:#b97a08; --bad:#c23325;
        --pill-bg:#eef3f9;
        --shadow:0 1px 2px rgba(6,16,27,.06),0 6px 18px rgba(6,16,27,.06);
        --tabbar-bg:rgba(255,255,255,.96);
      }
      @media (prefers-color-scheme: dark){
        :root{
          --bg:#04090f; --surface:#0b1622; --surface-2:#101e2e; --ink:#edf2f7; --muted:#9db0c2;
          --line:#1d2c3d; --pill-bg:#122335;
          --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
          --tabbar-bg:rgba(7,15,24,.96);
        }
      }
      *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
      html,body{margin:0;padding:0;}
      body{
        font-family:"Barlow",system-ui,sans-serif; background:var(--bg); color:var(--ink);
        font-size:16px; line-height:1.45;
      }
      @media (min-width:760px){
        body{background:var(--navy);}
        .app{border-left:1px solid var(--line); border-right:1px solid var(--line);}
      }
      .app{max-width:460px; margin:0 auto; min-height:100dvh; background:var(--bg); position:relative;}
      h1,h2,h3,.cond{font-family:"Barlow Condensed","Barlow",sans-serif; letter-spacing:.01em;}
      button{font-family:inherit; cursor:pointer;}
      input,select,textarea{font-family:inherit; font-size:16px; color:var(--ink);}
      a{color:var(--blue);}
      :focus-visible{outline:3px solid rgba(252,122,19,.55); outline-offset:2px;}

      /* ---------- top bar ---------- */
      .topbar{
        position:sticky; top:0; z-index:40; background:var(--navy); color:#fff;
        padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
        display:flex; align-items:center; gap:10px;
      }
      .shopbtn{
        display:flex; align-items:center; gap:10px; background:none; border:0; color:#fff;
        padding:4px 2px; text-align:left; flex:1; min-width:0;
      }
      .shopmark{
        width:40px; height:40px; border-radius:9px; flex:none;
        background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center;
        font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:19px; letter-spacing:.02em;
      }
      .shopbtn .sname{display:block; font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:21px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
      .shopbtn .scity{font-size:12.5px; color:#b9c9da; display:flex; align-items:center; gap:4px;}
      .chev{flex:none; color:#b9c9da;}
      .bellbtn{position:relative; background:#0d2036; border:1px solid #1d3857; color:#fff; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none;}
      .belldot{position:absolute; top:8px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--orange); border:2px solid #0d2036;}

      /* ---------- layout ---------- */
      main{padding:16px 14px calc(96px + env(safe-area-inset-bottom));}
      .view{display:none;}
      .view.active{display:block; animation:vin .18s ease-out;}
      @keyframes vin{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
      @media (prefers-reduced-motion: reduce){ .view.active{animation:none;} }
      .viewhead{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:2px 0 12px;}
      .viewhead h1{font-size:31px; font-weight:700; margin:0; line-height:1; text-transform:uppercase;}
      .viewhead .sub{color:var(--muted); font-size:13.5px; margin-top:3px;}
      .backbtn{display:inline-flex; align-items:center; gap:5px; background:none; border:0; color:var(--blue); font-weight:600; font-size:15px; padding:6px 4px 6px 0; margin-bottom:2px;}

      /* ---------- cards & lists ---------- */
      .card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
      .rowcard{
        display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
        background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
        padding:13px 14px; margin-bottom:10px; color:var(--ink);
      }
      .rowcard:active{transform:scale(.995);}
      .rowmain{flex:1; min-width:0;}
      .rowtitle{font-weight:600; font-size:16.5px; line-height:1.25;}
      .rowsub{color:var(--muted); font-size:13.5px; margin-top:1px;}
      .rowmeta{font-size:13px; color:var(--muted); margin-top:4px;}
      .avatar{
        width:44px; height:44px; border-radius:50%; flex:none; background:var(--blue); color:#fff;
        display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px;
      }
      .avatar.orange{background:var(--orange);}
      .avatar.navy{background:var(--navy);}
      .amt{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:22px; white-space:nowrap;}
      .chev-r{color:var(--muted); flex:none; align-self:center;}

      .pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--pill-bg); color:var(--muted); white-space:nowrap;}
      .pill.new{background:#fde8d7; color:#9a4a02;}
      .pill.blue{background:#dcebf9; color:var(--blue-dark);}
      .pill.good{background:#dcf2e4; color:#146c3a;}
      .pill.warn{background:#fbeecb; color:#8a5c04;}
      .pill.bad{background:#fadcd8; color:#a0281c;}
      @media (prefers-color-scheme: dark){
        .pill.new{background:#3d2708; color:#f5b877;} .pill.blue{background:#0e2c4c; color:#8fc0f5;}
        .pill.good{background:#0d2f1d; color:#7fd6a4;} .pill.warn{background:#38300c; color:#eccd7e;}
        .pill.bad{background:#3d130e; color:#f2a197;}
      }
      .dotsep::before{content:"·"; margin:0 5px; color:var(--muted);}

      /* ---------- buttons ---------- */
      .btn{
        display:inline-flex; align-items:center; justify-content:center; gap:7px;
        border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
        font-weight:600; font-size:15px; padding:11px 14px; min-height:46px;
      }
      .btn.primary{background:var(--orange); border-color:var(--orange); color:#fff;}
      .btn.primary:active{background:var(--orange-dark);}
      .btn.blue{background:var(--blue); border-color:var(--blue); color:#fff;}
      .btn.ghost{border-color:transparent; background:transparent; color:var(--blue); min-height:40px; padding:8px 10px;}
      .btn.danger-ghost{border-color:transparent; background:transparent; color:var(--bad); min-height:40px; padding:8px 10px;}
      .btn.block{width:100%;}
      .btn.sm{min-height:38px; padding:7px 11px; font-size:14px; border-radius:9px;}
      .btnrow{display:flex; gap:9px;}
      .btnrow .btn{flex:1;}

      /* ---------- dashboard ---------- */
      .greet{font-size:14px; color:var(--muted); margin:0 0 2px;}
      .statgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
      .stat{
        background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
        padding:13px 14px 11px; text-align:left; color:var(--ink); width:100%;
      }
      .stat .k{font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); display:flex; align-items:center; gap:6px;}
      .stat .v{font-family:"Barlow Condensed",sans-serif; font-size:37px; font-weight:700; line-height:1.05; margin-top:2px;}
      .stat .v.orange{color:var(--orange-dark);} .stat .v.blue{color:var(--blue);} .stat .v.bad{color:var(--bad);}
      @media (prefers-color-scheme: dark){ .stat .v.orange{color:var(--orange);} }
      .stat .s{font-size:13px; color:var(--muted);}
      .secttl{font-size:21px; font-weight:700; text-transform:uppercase; margin:20px 0 9px; display:flex; align-items:center; justify-content:space-between;}
      .secttl .more{font-family:"Barlow",sans-serif; font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0;}
      .attn{display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:8px; color:var(--ink); box-shadow:var(--shadow);}
      .attn .ic{width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:#fde8d7; color:#9a4a02;}
      .attn .ic.blue{background:#dcebf9; color:var(--blue-dark);}
      .attn .ic.red{background:#fadcd8; color:#a0281c;}
      @media (prefers-color-scheme: dark){
        .attn .ic{background:#3d2708; color:#f5b877;} .attn .ic.blue{background:#0e2c4c; color:#8fc0f5;} .attn .ic.red{background:#3d130e; color:#f2a197;}
      }
      .attn b{font-size:15.5px;} .attn p{margin:1px 0 0; font-size:13.5px; color:var(--muted);}
      .jobline{display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--line);}
      .jobline:last-child{border-bottom:0;}
      .jobtime{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:17px; width:64px; flex:none; color:var(--blue);}
      .quickgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
      .quick{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 13px; font-weight:600; font-size:15px; color:var(--ink); box-shadow:var(--shadow); text-align:left;}
      .quick svg{color:var(--orange-dark); flex:none;}
      @media (prefers-color-scheme: dark){ .quick svg{color:var(--orange);} }

      /* ---------- pipeline ---------- */
      .chips{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:none; margin:0 -14px; padding-left:14px; padding-right:14px;}
      .chips::-webkit-scrollbar{display:none;}
      .chip{
        flex:none; border:1px solid var(--line); background:var(--surface); color:var(--muted);
        border-radius:999px; padding:7px 12px; font-size:13.5px; font-weight:600;
      }
      .chip.on{background:var(--navy); border-color:var(--navy); color:#fff;}
      .chip .n{opacity:.75; font-weight:700;}
      .stagehead{display:flex; align-items:center; gap:8px; margin:16px 0 8px;}
      .stagehead h3{margin:0; font-size:19px; font-weight:700; text-transform:uppercase;}
      .stagehead .cnt{font-size:12.5px; color:var(--muted); font-weight:600;}
      .stagebar{height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px;}
      .stagebar i{display:block; height:100%; background:var(--orange);}
      .jobcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:13px 14px 11px; margin-bottom:10px;}
      .jobcard .top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
      .jobacts{display:flex; gap:8px; margin-top:11px;}
      .jobacts .btn{flex:1;}
      .lostbox{margin-top:6px;}
      .lostitem{display:flex; justify-content:space-between; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:14.5px;}
      .lostitem:last-child{border-bottom:0;}

      /* ---------- detail screens ---------- */
      .fieldgrid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:12px;}
      .field{background:var(--surface); padding:10px 13px;}
      .field.full{grid-column:1 / -1;}
      .field .fk{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);}
      .field .fv{font-weight:600; font-size:15.5px; margin-top:1px; word-break:break-word;}
      .msgbubble{background:var(--surface-2); border:1px solid var(--line); border-radius:4px 14px 14px 14px; padding:12px 14px; font-size:15.5px; margin-bottom:12px;}
      .photogrid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px;}
      .photogrid button{padding:0; border:0; background:none; border-radius:12px; overflow:hidden; display:block;}
      .photogrid img{width:100%; height:118px; object-fit:cover; display:block;}
      .vehcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:13px 14px; margin-bottom:10px;}
      .vehcard h3{margin:0 0 2px; font-size:20px; font-weight:700;}
      .histline{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:14.5px;}
      .histline:first-of-type{border-top:0;}

      /* ---------- quote builder ---------- */
      .segctl{display:grid; gap:8px;}
      .segctl.two{grid-template-columns:1fr 1fr;}
      .opt{
        border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:11px 13px;
        text-align:left; color:var(--ink); font-weight:600; font-size:15px; width:100%;
      }
      .opt small{display:block; font-weight:400; color:var(--muted); font-size:13px; margin-top:1px;}
      .opt.on{border-color:var(--orange); background:#fff6ec;}
      @media (prefers-color-scheme: dark){ .opt.on{background:#2a1a08;} }
      .tiergrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
      .tier{
        border:1.5px solid var(--line); background:var(--surface); border-radius:13px; padding:11px 10px;
        text-align:left; color:var(--ink); width:100%; position:relative;
      }
      .tier.on{border-color:var(--orange); background:#fff6ec;}
      @media (prefers-color-scheme: dark){ .tier.on{background:#2a1a08;} }
      .tier .tk{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
      .tier.on .tk{color:var(--orange-dark);}
      @media (prefers-color-scheme: dark){ .tier.on .tk{color:var(--orange);} }
      .tier .tf{font-weight:700; font-size:15.5px; line-height:1.2; margin-top:2px;}
      .tier .tp{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:26px; margin-top:3px;}
      .tier .tw{font-size:12px; color:var(--muted); line-height:1.3;}
      .tier .tm{font-size:12px; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); color:var(--muted); line-height:1.5;}
      .tier .tm b{color:var(--good);}
      .bestflag{position:absolute; top:-9px; right:8px; background:var(--blue); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.05em;}
      .addon{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:8px; width:100%; text-align:left; color:var(--ink);}
      .addon .cb{width:24px; height:24px; border-radius:7px; border:2px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; color:#fff;}
      .addon.on .cb{background:var(--orange); border-color:var(--orange);}
      .addon .ap{margin-left:auto; font-weight:700; white-space:nowrap;}
      .totals{background:var(--navy); color:#fff; border-radius:14px; padding:15px 16px; margin-top:14px;}
      .totals .tr{display:flex; justify-content:space-between; font-size:15px; padding:3px 0; color:#c8d6e5;}
      .totals .tr.grand{border-top:1px solid #27405c; margin-top:7px; padding-top:10px; color:#fff; font-weight:700; font-size:17px;}
      .totals .tr .tv{font-family:"Barlow Condensed",sans-serif; font-size:21px; font-weight:700; color:#fff;}
      .totals .tr.grand .tv{font-size:27px; color:var(--orange);}
      .depwrap{display:flex; align-items:center; gap:8px; background:#0d2036; border:1px solid #27405c; border-radius:10px; padding:6px 12px;}
      .depwrap span{color:#c8d6e5; font-size:14px; font-weight:600;}
      .depwrap input{width:84px; background:transparent; border:0; color:#fff; font-weight:700; text-align:right; padding:4px 0;}
      .depwrap input:focus{outline:none;}
      .switchrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px;}
      .switch{position:relative; width:52px; height:30px; flex:none; border:0; border-radius:999px; background:var(--line); transition:background .15s;}
      .switch::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .15s;}
      .switch.on{background:var(--orange);}
      .switch.on::after{left:25px;}
      label.flabel{display:block; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:14px 0 7px;}
      select.inp, input.inp, textarea.inp{
        width:100%; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:11px 12px;
      }

      /* ---------- invoices ---------- */
      .invlines{padding:4px 14px;}
      .invline{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px;}
      .invline:last-child{border-bottom:0;}
      .invline .d{color:var(--muted); font-size:13px;}
      .invtot{padding:12px 14px 14px;}
      .invtot .tr{display:flex; justify-content:space-between; padding:3px 0; font-size:15px; color:var(--muted);}
      .invtot .tr.bal{color:var(--ink); font-weight:700; font-size:17px; border-top:1px solid var(--line); margin-top:6px; padding-top:10px;}
      .invtot .tr .tv{font-family:"Barlow Condensed",sans-serif; font-size:20px; font-weight:700; color:var(--ink);}

      /* ---------- reminders / reviews ---------- */
      .trackcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden;}
      .trackhead{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);}
      .trackhead h3{margin:0; font-size:20px; font-weight:700; text-transform:uppercase; flex:1;}
      .trackpaused{opacity:.55;}
      .qitem{display:flex; gap:11px; padding:11px 14px; border-bottom:1px solid var(--line); align-items:flex-start;}
      .qitem:last-child{border-bottom:0;}
      .qitem .when{font-size:12.5px; font-weight:700; color:var(--blue); white-space:nowrap; margin-top:1px;}
      @media (prefers-color-scheme: dark){ .qitem .when{color:#8fc0f5;} }
      .stars{color:var(--orange); font-size:16px; letter-spacing:2px;}
      .stars .off{color:var(--line);}
      .seq{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px;}
      .seq .arr{color:var(--muted); font-size:12px;}

      /* ---------- settings ---------- */
      .setcard{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px; margin-bottom:10px; color:var(--ink);}
      .setcard .ic{width:40px; height:40px; border-radius:10px; background:var(--pill-bg); display:flex; align-items:center; justify-content:center; color:var(--blue); flex:none;}
      .setcard b{font-size:16.5px; display:block;}
      .setcard span{font-size:13.5px; color:var(--muted); display:block;}
      .svc-row{display:grid; grid-template-columns:1fr 86px 86px; gap:8px; align-items:end; padding:11px 0; border-bottom:1px solid var(--line);}
      .svc-row:last-child{border-bottom:0;}
      .svc-row .sn{font-weight:600; font-size:15px;}
      .svc-row .sd{font-size:12.5px; color:var(--muted);}
      .svc-row label{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:block; margin-bottom:3px;}
      .svc-row input{width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:8px 9px;}
      .mkup{font-size:12.5px; font-weight:700; color:var(--good); margin-top:4px;}
      .hourrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line);}
      .hourrow:last-child{border-bottom:0;}
      .hourrow select{width:118px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:8px;}

      /* ---------- tab bar / sheets / toast ---------- */
      .tabbar{
        position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(460px,100%); z-index:50;
        background:var(--tabbar-bg); backdrop-filter:blur(10px); border-top:1px solid var(--line);
        display:grid; grid-template-columns:repeat(5,1fr); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
      }
      .tab{
        background:none; border:0; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px;
        font-size:11px; font-weight:600; padding:5px 0 3px; position:relative; border-radius:10px;
      }
      .tab.on{color:var(--orange-dark);}
      @media (prefers-color-scheme: dark){ .tab.on{color:var(--orange);} }
      .tab .bdg{position:absolute; top:0; right:calc(50% - 19px); background:var(--orange); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px;}
      .sheetwrap{position:fixed; inset:0; z-index:80; display:none;}
      .sheetwrap.open{display:block;}
      .sheetbg{position:absolute; inset:0; background:rgba(3,8,14,.55);}
      .sheet{
        position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:min(460px,100%);
        background:var(--surface); border-radius:18px 18px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom));
        max-height:82dvh; overflow-y:auto;
      }
      .sheet .grab{width:38px; height:4px; border-radius:2px; background:var(--line); margin:2px auto 12px;}
      .sheet h3{margin:0 0 4px; font-size:23px; font-weight:700; text-transform:uppercase;}
      .sheetopt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:13px 14px; margin-top:9px; color:var(--ink); font-weight:600; font-size:15.5px;}
      .sheetopt small{display:block; font-weight:400; color:var(--muted); font-size:13px;}
      .sheetopt .tick{margin-left:auto; color:var(--orange-dark); font-weight:700;}
      .lightbox{position:fixed; inset:0; z-index:90; background:rgba(2,6,11,.94); display:none; align-items:center; justify-content:center; padding:18px;}
      .lightbox.open{display:flex;}
      .lightbox img{max-width:100%; max-height:86dvh; border-radius:10px;}
      .lightbox button{position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; background:#122335; color:#fff; border:1px solid #27405c; border-radius:10px; width:42px; height:42px; font-size:19px;}
      .toast{
        position:fixed; left:50%; transform:translate(-50%,20px); bottom:calc(88px + env(safe-area-inset-bottom)); z-index:95;
        background:var(--navy); color:#fff; border:1px solid #27405c; border-radius:12px; padding:11px 16px;
        font-weight:600; font-size:14.5px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:88%;
        box-shadow:0 10px 30px rgba(0,0,0,.35); text-align:center;
      }
      .toast.show{opacity:1; transform:translate(-50%,0);}
      .empty{padding:26px 16px; text-align:center; color:var(--muted); font-size:14.5px;}
      .brandfoot{text-align:center; color:var(--muted); font-size:12.5px; margin:26px 0 4px;}
      .brandfoot b{font-family:"Barlow Condensed",sans-serif; font-size:15px; letter-spacing:.06em; color:var(--ink);}
      .searchbar{position:relative; margin-bottom:12px;}
      .searchbar input{width:100%; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:11px 12px 11px 38px;}
      .searchbar svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted);}
    

      /* ============ production additions ============ */
      .hidden { display: none !important; }
      .preboot { visibility: hidden; }
      #demoBanner {
        position: fixed; top: 0; left: 0; right: 0; z-index: 150;
        background: var(--orange, #fc7a13); color: #06101b;
        font: 600 13.5px/1.35 "Barlow", system-ui, sans-serif;
        padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
        display: flex; align-items: center; gap: 10px; justify-content: space-between;
      }
      #demoBanner button {
        background: #06101b; color: #fff; border: 0; border-radius: 999px;
        padding: 5px 14px; font: 600 13px "Barlow", system-ui, sans-serif; flex: none;
      }
      #tellBtn {
        position: fixed; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 120;
        background: #0b62bf; color: #fff; border: 0; border-radius: 999px;
        padding: 10px 16px; font: 600 14.5px "Barlow", system-ui, sans-serif;
        box-shadow: 0 6px 18px rgba(6,16,27,.35); display: flex; align-items: center; gap: 7px;
      }
      #tellBtn .dot { width: 8px; height: 8px; border-radius: 50%; background: #fc7a13; flex: none; }
      #loginScreen {
        position: fixed; inset: 0; z-index: 200; overflow-y: auto;
        background: #06101b; color: #eef3f8; padding: calc(28px + env(safe-area-inset-top)) 20px 40px;
        font-family: "Barlow", system-ui, sans-serif;
      }
      #loginScreen .wrap { max-width: 400px; margin: 0 auto; }
      #loginScreen img.logo { width: 84px; height: 84px; border-radius: 20px; display: block; margin: 12px auto 10px; }
      #loginScreen h1 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 40px; text-align: center; margin: 0; letter-spacing: .01em; }
      #loginScreen .tag { text-align: center; color: #9fb4c8; margin: 4px 0 22px; font-size: 15.5px; }
      #loginScreen .cardbox { background: #0d1b2a; border: 1px solid #1d3247; border-radius: 16px; padding: 18px 16px; }
      #loginScreen .flabel { color: #9fb4c8; }
      #loginScreen .inp { background: #06101b; border-color: #1d3247; color: #eef3f8; }
      #loginScreen .err { color: #ff9d7a; font-size: 14.5px; min-height: 20px; margin: 8px 0 0; }
      #loginScreen .linkish { background: none; border: 0; color: #6db3f5; font: 600 14.5px "Barlow", system-ui, sans-serif; padding: 6px 0; }
      #loginScreen .divider { display: flex; align-items: center; gap: 12px; color: #5f7a94; }
      #loginScreen .fine { color: #7e96ab; font-size: 13.5px; text-align: center; margin-top: 14px; }