:root{
    --teal:#0e9aa1;
    --teal-light:#1abfc2;
    --teal-dark:#0a6e73;
    --teal-deepest:#052f32;
    --pink:#ec66ac;
    --pink-deep:#d9438f;
    --violet:#8b7ee6;
    --bg:#f3f8f8;
    --card:#ffffff;
    --ink:#0f2b2a;
    --ink-soft:#5d7877;
    --ink-faint:#8ba3a2;
    --border:#e4eeed;
    --success:#12b886;
    --success-bg:#e7f9f3;
    --warning:#f0a83c;
    --warning-bg:#fdf3e3;
    --danger:#ef5f5f;
    --danger-bg:#fdecec;
    --info-bg:#eef1fd;
    --radius-lg:18px;
    --radius-md:12px;
    --radius-sm:8px;
    --shadow: 0 2px 10px rgba(6,45,44,0.05), 0 1px 2px rgba(6,45,44,0.04);
    --font-head:'Plus Jakarta Sans',sans-serif;
    --font-body:'Inter',sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:#cfe3e2; border-radius:8px;}
  ::-webkit-scrollbar-track{background:transparent;}

  /* ---------- Layout ---------- */
  .app{display:flex; min-height:100vh;}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:264px; flex-shrink:0;
    background:linear-gradient(190deg, var(--teal-deepest) 0%, var(--teal-dark) 62%, var(--teal) 130%);
    color:#eafbfa;
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0;
    z-index:40;
    transition:transform .25s ease;
  }
  .sidebar-brand{
    display:flex; align-items:center; gap:12px;
    padding:22px 20px 18px 20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .sidebar-brand img{width:42px; height:42px; border-radius:10px; background:#fff; padding:3px;}
  .sidebar-brand .name{font-family:var(--font-head); font-weight:800; font-size:19px; letter-spacing:.2px;}
  .sidebar-brand .tag{font-size:10.5px; color:#a9d9d6; letter-spacing:.4px; margin-top:1px;}

  .sidebar-nav{padding:16px 12px; overflow-y:auto; flex:1;}
  .nav-section-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:1px;
    color:#7cbcb8; padding:14px 12px 6px; font-weight:600;
  }
  .nav-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:10px; cursor:pointer;
    font-size:14px; font-weight:500; color:#d6f0ee;
    margin-bottom:2px;
    transition:background .15s ease, color .15s ease;
  }
  .nav-item svg{width:18px; height:18px; flex-shrink:0; opacity:.85;}
  .nav-item:hover{background:rgba(255,255,255,0.08); color:#fff;}
  .nav-item.active{
    background:linear-gradient(90deg, rgba(236,102,172,.28), rgba(236,102,172,.08));
    color:#fff; box-shadow:inset 3px 0 0 var(--pink);
  }
  .nav-item.active svg{opacity:1;}
  .nav-badge{
    margin-left:auto; background:var(--pink); color:#fff; font-size:10.5px;
    font-weight:700; padding:1px 7px; border-radius:20px;
  }
  .sidebar-footer{
    padding:16px 20px 20px; border-top:1px solid rgba(255,255,255,0.08);
    font-size:11.5px; color:#8fc7c3;
  }

  /* ---------- Main ---------- */
  .main{margin-left:264px; flex:1; display:flex; flex-direction:column; min-width:0;}

  .topbar{
    height:72px; background:var(--card); border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:16px; padding:0 26px;
    position:sticky; top:0; z-index:30;
  }
  .menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .menu-toggle svg{width:22px;height:22px; color:var(--ink);}
  .search-box{
    flex:1; max-width:380px; display:flex; align-items:center; gap:8px;
    background:var(--bg); border:1px solid var(--border); border-radius:10px;
    padding:9px 14px;
  }
  .search-box svg{width:16px; height:16px; color:var(--ink-faint);}
  .search-box input{border:none; background:none; outline:none; font-size:13.5px; width:100%; font-family:var(--font-body); color:var(--ink);}
  .topbar-right{margin-left:auto; display:flex; align-items:center; gap:18px;}
  .icon-btn{
    position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
    background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .icon-btn svg{width:18px; height:18px; color:var(--ink-soft);}
  .icon-btn .dot{position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--pink); border:1.5px solid #fff;}
  .profile{display:flex; align-items:center; gap:10px; padding-left:14px; border-left:1px solid var(--border); cursor:pointer;}
  .profile .avatar{
    width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--teal), var(--pink));
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--font-head); font-size:14px;
  }
  .profile .who{line-height:1.25;}
  .profile .who .n{font-size:13.5px; font-weight:600;}
  .profile .who .r{font-size:11.5px; color:var(--ink-faint);}

  .content{padding:26px 30px 60px;}
  .page{display:none;}
  .page.active{display:block; animation:fadeIn .25s ease;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

  .page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px;}
  .page-head h1{font-family:var(--font-head); font-size:24px; font-weight:800; letter-spacing:-.2px;}
  .page-head p{color:var(--ink-soft); font-size:13.5px; margin-top:4px;}

  .range-pills{display:flex; gap:6px; background:var(--card); border:1px solid var(--border); padding:4px; border-radius:10px;}
  .range-pill{padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--ink-soft); border-radius:7px; cursor:pointer;}
  .range-pill.active{background:var(--teal); color:#fff;}

  .quick-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .qa-btn{
    display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:10px;
    font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--ink);
  }
  .qa-btn svg{width:15px; height:15px;}
  .qa-btn.primary{background:var(--teal); color:#fff; border-color:var(--teal);}
  .qa-btn.pink{background:var(--pink); color:#fff; border-color:var(--pink);}
  .qa-btn:hover{filter:brightness(0.97);}

  /* KPI cards */
  .kpi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px; margin-bottom:22px;}
  .kpi-card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:18px; box-shadow:var(--shadow);
  }
  .kpi-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .kpi-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
  .kpi-icon svg{width:18px; height:18px;}
  .kpi-delta{font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:20px; display:flex; align-items:center; gap:3px;}
  .kpi-delta.up{color:var(--success); background:var(--success-bg);}
  .kpi-delta.down{color:var(--danger); background:var(--danger-bg);}
  .kpi-value{font-family:var(--font-head); font-size:25px; font-weight:800; letter-spacing:-.3px;}
  .kpi-label{font-size:12.5px; color:var(--ink-soft); margin-top:3px; font-weight:500;}

  .tint-teal{background:rgba(14,154,161,.12); color:var(--teal-dark);}
  .tint-pink{background:rgba(236,102,172,.14); color:var(--pink-deep);}
  .tint-violet{background:rgba(139,126,230,.14); color:var(--violet);}
  .tint-warning{background:var(--warning-bg); color:var(--warning);}
  .tint-success{background:var(--success-bg); color:var(--success);}
  .tint-danger{background:var(--danger-bg); color:var(--danger);}

  /* Grid layout for charts/panels */
  .grid-2{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px;}
  .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px;}
  @media (max-width:1080px){ .grid-2, .grid-3{grid-template-columns:1fr;} }

  .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow);}
  .card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .card-head h3{font-family:var(--font-head); font-size:15.5px; font-weight:700;}
  .card-head .sub{font-size:12px; color:var(--ink-faint); margin-top:2px;}
  .link-more{font-size:12.5px; font-weight:600; color:var(--teal-dark); cursor:pointer;}

  /* Riders leaderboard */
  .rider-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);}
  .rider-row:last-child{border-bottom:none;}
  .rider-rank{width:22px; height:22px; border-radius:50%; background:var(--bg); color:var(--ink-soft); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .rider-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--teal-light),var(--violet)); color:#fff; font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .rider-info{flex:1; min-width:0;}
  .rider-info .n{font-size:13.5px; font-weight:600;}
  .rider-info .a{font-size:11.5px; color:var(--ink-faint);}
  .rider-bar{width:100%; height:5px; border-radius:6px; background:var(--border); margin-top:5px; overflow:hidden;}
  .rider-bar span{display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--pink)); border-radius:6px;}
  .rider-val{font-size:13px; font-weight:700; text-align:right; white-space:nowrap;}
  .rider-val .s{display:block; font-size:10.5px; font-weight:500; color:var(--ink-faint);}

  /* Tables */
  .table-wrap{overflow-x:auto;}
  table{width:100%; border-collapse:collapse; font-size:13px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--ink-faint); font-weight:700; padding:0 12px 10px; border-bottom:1px solid var(--border); white-space:nowrap;
  }
  tbody td{padding:12px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--ink);}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--bg);}
  .cell-strong{font-weight:600;}
  .cell-soft{color:var(--ink-soft); font-size:12.5px;}

  .pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px;}
  .pill.dot::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}

  .avatar-sm{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0;}

  /* Filter bar (generic) */
  .filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
  .filter-select, .filter-input{
    border:1px solid var(--border); background:var(--card); border-radius:9px; padding:9px 12px;
    font-size:12.5px; font-family:var(--font-body); color:var(--ink); font-weight:500;
  }
  .filter-input{min-width:180px;}

  /* Stat strip (used in several modules) */
  .stat-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:18px;}
  .stat-box{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px;}
  .stat-box .v{font-family:var(--font-head); font-size:20px; font-weight:800;}
  .stat-box .l{font-size:12px; color:var(--ink-soft); margin-top:2px;}

  /* Settings */
  .settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:900px){.settings-grid{grid-template-columns:1fr;}}
  .settings-row{display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border);}
  .settings-row:last-child{border-bottom:none;}
  .settings-row .t{font-size:13.5px; font-weight:600;}
  .settings-row .d{font-size:12px; color:var(--ink-faint); margin-top:2px;}
  .toggle{width:40px; height:22px; border-radius:20px; background:var(--border); position:relative; cursor:pointer; flex-shrink:0;}
  .toggle.on{background:var(--teal);}
  .toggle .knob{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s ease; box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .toggle.on .knob{left:20px;}

  .btn{padding:9px 16px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:#fff;}
  .btn.primary{background:var(--teal); color:#fff; border-color:var(--teal);}

  .empty-note{font-size:12px; color:var(--ink-faint); padding:10px 0;}

  .notif-item{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--border);}
  .notif-item:last-child{border-bottom:none;}
  .notif-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .notif-icon svg{width:16px; height:16px;}
  .notif-body .t{font-size:13.5px; font-weight:600;}
  .notif-body .d{font-size:12px; color:var(--ink-faint); margin-top:2px;}
  .notif-time{margin-left:auto; font-size:11.5px; color:var(--ink-faint); white-space:nowrap;}

  /* Mobile */
  @media (max-width:960px){
    .sidebar{transform:translateX(-100%);}
    .sidebar.open{transform:translateX(0);}
    .main{margin-left:0;}
    .menu-toggle{display:flex;}
    .search-box{display:none;}
  }
  .overlay{display:none; position:fixed; inset:0; background:rgba(5,30,30,.4); z-index:35;}
  .overlay.show{display:block;}

  /* ---------- Login / connection ---------- */
  .login-overlay{
    position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg, var(--teal-deepest), var(--teal-dark) 60%, var(--pink-deep) 140%);
    padding:20px;
  }
  .login-card{
    width:100%; max-width:380px; background:#fff; border-radius:var(--radius-lg);
    padding:32px 28px; box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center;
  }
  .login-card img{width:64px; height:64px; margin-bottom:10px;}
  .login-card h1{font-family:var(--font-head); font-size:20px; font-weight:800;}
  .login-card p{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px;}
  .login-card label{display:block; text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); margin:12px 0 5px;}
  .login-card input{
    width:100%; border:1px solid var(--border); border-radius:9px; padding:10px 12px;
    font-size:13.5px; font-family:var(--font-body); outline:none;
  }
  .login-card input:focus{border-color:var(--teal);}
  .login-error{
    background:var(--danger-bg); color:var(--danger); font-size:12px; font-weight:600;
    border-radius:8px; padding:9px 12px; margin-bottom:6px; text-align:left;
  }
  .login-hint{font-size:11px; color:var(--ink-faint); margin-top:16px; line-height:1.6; text-align:left; background:var(--bg); border-radius:8px; padding:10px 12px;}
  .login-hint b{color:var(--ink-soft);}
  .login-card.signup-open{max-width:460px; text-align:left;}
  .login-card.signup-open h1,.login-card.signup-open>p{text-align:center;}
  .signup-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px;}
  .signup-grid .wide{grid-column:1/-1;}
  .signup-actions{grid-column:1/-1; display:grid; gap:9px; margin-top:14px;}
  .signup-link{border:0; background:none; color:var(--teal-dark); cursor:pointer; font:inherit; font-weight:700; padding:8px 0;}
  @media(max-width:480px){.signup-grid{grid-template-columns:1fr;}.signup-grid .wide,.signup-actions{grid-column:auto;}}
  #appRoot{display:none;}
  #riderRoot{display:none; min-height:100vh; background:var(--bg);}
  .rider-shell{width:min(1120px,100%); margin:0 auto; padding:24px;}
  .rider-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px;}
  .rider-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--teal-deepest);}
  .rider-brand img{width:40px; height:40px; border-radius:10px; background:#fff; padding:3px; border:1px solid var(--border);}
  .rider-profile{display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:13px;}
  .rider-avatar-large{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--teal),var(--pink));}
  .rider-hero{background:linear-gradient(135deg,var(--teal-deepest),var(--teal-dark)); color:#fff; border-radius:18px; padding:24px; margin-bottom:18px;}
  .rider-hero h1{font-family:var(--font-head); font-size:26px; font-weight:800;}
  .rider-hero p{margin-top:5px; color:#bde4e1; font-size:13px;}
  .rider-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px;}
  .rider-stat{background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow);}
  .rider-stat .v{font-family:var(--font-head); font-size:23px; font-weight:800; color:var(--ink);}
  .rider-stat .l{font-size:12px; color:var(--ink-soft); margin-top:4px;}
  .rider-orders{background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
  .rider-orders-head{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
  .rider-orders-head h2{font-family:var(--font-head); font-size:17px; font-weight:800;}
  .rider-order{display:grid; grid-template-columns:1.1fr 1.4fr 1fr .8fr auto; gap:14px; align-items:center; padding:17px 20px; border-bottom:1px solid var(--border); font-size:13px;}
  .rider-order:last-child{border-bottom:0;}
  .rider-order .muted{color:var(--ink-soft); font-size:12px; margin-top:3px;}
  .rider-order button{border:0; border-radius:8px; padding:8px 11px; background:var(--teal); color:#fff; font-weight:700; cursor:pointer; font-size:12px;}
  .rider-order button.secondary{background:var(--warning);}
  .rider-empty{padding:36px 20px; text-align:center; color:var(--ink-soft);}
  .rider-customer-form{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); background:#f8fbfb;}
  .rider-customer-form input,.rider-customer-form select{min-width:0; border:1px solid var(--border); border-radius:8px; padding:9px 10px; font:inherit; font-size:12px; background:#fff; color:var(--ink);}
  .rider-customer-form input[name="address"]{grid-column:span 2;}
  .rider-customer-form button{border:0; border-radius:8px; padding:9px 12px; background:var(--teal); color:#fff; font-weight:700; cursor:pointer;}
  .rider-customer{display:grid; grid-template-columns:1.2fr 1fr 2fr .8fr .8fr; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); align-items:start; font-size:13px;}
  .rider-customer:last-child{border-bottom:0;}
  .rider-customer .muted{font-size:12px; color:var(--ink-soft); margin-top:3px;}
  .rider-customer-error{display:none; padding:0 20px 12px; color:var(--danger); font-size:12px;}
  @media(max-width:720px){.rider-shell{padding:16px}.rider-stats{grid-template-columns:repeat(2,1fr)}.rider-order{grid-template-columns:1fr 1fr;}.rider-order button{grid-column:1/-1; width:100%;}}
  @media(max-width:720px){.rider-customer-form{grid-template-columns:1fr 1fr}.rider-customer-form input[name="address"]{grid-column:1/-1}.rider-customer{grid-template-columns:1fr 1fr}.rider-customer>*:nth-child(3){grid-column:1/-1}}

  .conn-banner{
    display:none; align-items:center; gap:10px; background:var(--danger-bg); color:var(--danger);
    border:1px solid #f6c9c9; border-radius:10px; padding:11px 16px; font-size:12.5px; font-weight:600;
    margin-bottom:18px;
  }
  .conn-banner.show{display:flex;}
  .conn-banner svg{width:16px; height:16px; flex-shrink:0;}
  .conn-banner .retry{margin-left:auto; cursor:pointer; text-decoration:underline; font-weight:700;}

  .spinner{
    display:inline-block; width:15px; height:15px; border-radius:50%;
    border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; vertical-align:-3px;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .skeleton{background:linear-gradient(90deg,#eef5f4 25%,#f7fbfb 37%,#eef5f4 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:6px;}
  @keyframes shimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}

  .report-preview{margin-top:12px; border-top:1px solid var(--border); padding-top:12px; font-size:12px; max-height:220px; overflow:auto;}
  .report-preview table{font-size:11.5px;}
  .conn-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;}
  .conn-dot.ok{background:var(--success);}
  .conn-dot.bad{background:var(--danger);}
  .modal-backdrop{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(5,47,50,.48);}
  .modal-backdrop.show{display:flex;}
  .modal{width:min(640px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--card); border-radius:var(--radius-lg); box-shadow:0 20px 60px rgba(5,47,50,.25);}
  .modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--border);}
  .modal-head h2{font-family:var(--font-head); font-size:19px; font-weight:800;}
  .modal-head p{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
  .modal-close{border:0; background:transparent; color:var(--ink-soft); font-size:24px; line-height:1; cursor:pointer;}
  .modal-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:22px;}
  .modal-form label{display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--ink-soft);}
  .modal-form label.full{grid-column:1/-1;}
  .modal-form input,.modal-form select,.modal-form textarea{width:100%; border:1px solid var(--border); border-radius:9px; padding:10px 11px; color:var(--ink); background:#fff; font:inherit; font-size:13px;}
  .modal-form textarea{min-height:70px; resize:vertical;}
  .category-create-row{display:flex; gap:7px; align-items:center;}
  .category-create-row select{flex:1; min-width:0;}
  .category-create-row button{flex:none; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--teal-dark); padding:9px 11px; font-weight:700; cursor:pointer;}
  .expense-category-panel{display:none; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; margin-top:7px;}
  .expense-category-panel input{min-width:0;}
  .expense-category-error{display:none; color:var(--danger); font-size:11px; font-weight:600; margin-top:5px;}
  .modal-actions{grid-column:1/-1; display:flex; justify-content:flex-end; gap:9px; padding-top:4px;}
  .modal-error{grid-column:1/-1; display:none; color:var(--danger); background:var(--danger-bg); border-radius:9px; padding:10px 12px; font-size:12.5px;}
  .row-actions{display:flex; gap:7px; align-items:center; white-space:nowrap;}
  .row-action{border:0; background:none; color:var(--teal-dark); cursor:pointer; font-size:12px; font-weight:700; padding:3px 0;}
  .row-action.danger{color:var(--danger);}
  .row-action:hover{text-decoration:underline;}
  @media(max-width:560px){.modal-form{grid-template-columns:1fr;}.modal-form label.full,.modal-actions,.modal-error{grid-column:auto;}}

  /* ---------- Additions: shared UI kit ---------- */
  [hidden]{display:none !important;}
  :focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
  button{font-family:inherit;}
  .btn:disabled,.qa-btn[aria-disabled="true"],.row-action:disabled{opacity:.55; cursor:not-allowed;}
  .btn.danger{background:var(--danger); border-color:var(--danger); color:#fff;}
  .btn.ghost{background:transparent;}
  .btn.sm{padding:6px 11px; font-size:12px;}
  .muted{color:var(--ink-soft); font-size:12px;}
  .text-danger{color:var(--danger);}
  .text-success{color:var(--success);}
  .nowrap{white-space:nowrap;}
  .wrap{white-space:normal;}
  .cell-name{display:flex; align-items:center; gap:10px;}
  .stack{display:flex; flex-direction:column; gap:3px;}

  .toast-host{position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:min(380px,calc(100vw - 40px));}
  .toast{background:var(--teal-deepest); color:#fff; padding:12px 16px; border-radius:10px; font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.2); animation:fadeIn .2s ease;}
  .toast.error{background:var(--danger);}
  .toast.success{background:#0b7a58;}

  .pager{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap;}
  .pager .btn{padding:6px 12px;}

  .items-editor{grid-column:1/-1; display:flex; flex-direction:column; gap:8px;}
  .items-editor .item-row{display:grid; grid-template-columns:minmax(0,2fr) 90px auto; gap:8px; align-items:center;}
  .items-editor .item-row.with-price{grid-template-columns:minmax(0,2fr) 80px 110px auto;}
  .items-editor .add-line{justify-self:start;}
  .items-total{font-size:12.5px; color:var(--ink-soft); text-align:right;}
  .form-hint{grid-column:1/-1; font-size:12px; color:var(--ink-soft); background:var(--bg); border-radius:9px; padding:9px 12px;}
  .modal-form label.check{flex-direction:row; align-items:center; gap:8px;}
  .modal-form label.check input{width:auto;}
  .modal.wide{width:min(860px,100%);}
  .detail-body{padding:20px 22px; display:flex; flex-direction:column; gap:18px;}
  .detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px;}
  .detail-grid .k{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-faint); font-weight:700;}
  .detail-grid .v{font-size:13.5px; font-weight:600; margin-top:3px;}
  .detail-actions{display:flex; gap:8px; flex-wrap:wrap;}
  .copy-box{display:flex; gap:8px; align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:8px 10px; font-size:12px; word-break:break-all;}
  .notif-item.unread .notif-body .t::after{content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pink); margin-left:7px; vertical-align:middle;}
  .notif-item{cursor:default;}
  .search-results{position:absolute; top:60px; left:26px; width:min(460px,calc(100vw - 52px)); background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(5,47,50,.15); padding:8px; z-index:50;}
  .search-results .group{font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-faint); padding:8px 8px 4px; font-weight:700;}
  .search-results button{display:block; width:100%; text-align:left; border:0; background:none; padding:8px; border-radius:8px; cursor:pointer; font-size:13px;}
  .search-results button:hover{background:var(--bg);}
  .bar-track{height:7px; border-radius:6px; background:var(--border); overflow:hidden; margin-top:6px;}
  .bar-track span{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--pink));}
  .bar-track.warn span{background:var(--warning);}
  .login-card img.logo{width:64px; height:64px; margin-bottom:10px;}
  .sidebar-brand img, .rider-brand img{object-fit:contain;}
  .chart-box{position:relative; height:260px;}
  .chart-box.sm{height:220px;}
  .report-controls{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center;}
  .rider-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
  .rider-order button.ghost{background:#fff; color:var(--teal-dark); border:1px solid var(--border);}
  @media(max-width:720px){.items-editor .item-row,.items-editor .item-row.with-price{grid-template-columns:1fr 1fr;}}
  td.wrap{white-space:normal; min-width:150px;}
  /* Rider cards: info columns on top, actions on their own row */
  .rider-order{grid-template-columns:minmax(90px,.7fr) 1.6fr 1.3fr auto;}
  .rider-order > .rider-actions{grid-column:1/-1; justify-content:flex-start;}
  .rider-order.simple{grid-template-columns:1fr 1fr;}
  .rider-customer{grid-template-columns:1.2fr 1fr 1.6fr .8fr auto;}
  @media(max-width:720px){.rider-order{grid-template-columns:1fr 1fr;} .rider-customer{grid-template-columns:1fr 1fr;}}
  /* Row actions are real buttons everywhere; .link keeps text-link style (e.g. order numbers) */
  .row-action{border:1px solid var(--border); background:#fff; border-radius:8px; padding:5px 11px; font-size:12px; font-weight:700; color:var(--teal-dark); line-height:1.4;}
  .row-action:hover{text-decoration:none; background:var(--bg); border-color:#cfe3e2;}
  .row-action.danger{color:var(--danger); border-color:#f6c9c9;}
  .row-action.danger:hover{background:var(--danger-bg);}
  .row-action.link{border:0; background:none; padding:0; color:var(--teal-dark);}
  .row-action.link:hover{text-decoration:underline; background:none;}
  thead th{padding-left:10px; padding-right:10px;}
  tbody td{padding:11px 10px;}
  .row-actions{gap:5px;}
  .row-action{padding:5px 9px;}
  /* Account dropdown */
  .dropdown-menu{position:absolute; z-index:120; min-width:220px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(5,47,50,.16); padding:6px; animation:fadeIn .15s ease;}
  .dropdown-header{padding:10px 12px 8px;}
  .dropdown-header .t{font-size:13.5px; font-weight:700;}
  .dropdown-header .d{font-size:12px; color:var(--ink-faint); margin-top:2px;}
  .dropdown-divider{height:1px; background:var(--border); margin:6px 0;}
  .dropdown-item{display:block; width:100%; text-align:left; border:0; background:none; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;}
  .dropdown-item:hover,.dropdown-item:focus-visible{background:var(--bg); outline:none;}
  .dropdown-item.danger{color:var(--danger);}
  .dropdown-item.danger:hover{background:var(--danger-bg);}

  /* =====================================================================
     Rider app (mobile-first): deep-teal bag strip + jobs + bottom tab bar
     ===================================================================== */
  ::selection{background:#bfe7e5; color:#052f32;}
  #riderRoot{background:#e3efee;}
  .ra{--ra-deep:#052f32; --ra-teal:#0e9aa1; --ra-teal-ink:#0a6e73; --ra-pink:#c2387a; --ra-pink-ink:#a62d67; --ra-ground:#eef5f4; --ra-sub:#a9d9d6;
    max-width:560px; margin:0 auto; min-height:100vh; background:var(--ra-ground);
    padding-bottom:calc(92px + env(safe-area-inset-bottom)); font-variant-numeric:tabular-nums;}
  .ra h2,.ra h3{color:var(--ink);}

  .ra-top{position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:0 16px; background:var(--ra-deep); color:#fff;}
  .ra-brand{display:flex; align-items:center; gap:10px; min-width:0;}
  .ra-brand img{width:34px; height:34px; border-radius:9px; background:#fff; padding:2px; flex-shrink:0;}
  .ra-who{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
  .ra-who strong{font-family:var(--font-head); font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ra-who span{font-size:12px; color:var(--ra-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ra-top-actions{display:flex; gap:8px; flex-shrink:0;}
  .ra-icon-btn,.ra-avatar{width:42px; height:42px; border-radius:12px; border:0; display:grid; place-items:center; cursor:pointer;}
  .ra-icon-btn{background:rgba(255,255,255,.1); color:#d6f0ee;}
  .ra-icon-btn:hover{background:rgba(255,255,255,.18);}
  .ra-icon-btn svg{width:20px; height:20px;}
  .ra-icon-btn.spin svg{animation:spin .8s linear infinite;}
  .ra-avatar{background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); color:#fff; font-family:var(--font-head); font-weight:800; font-size:14px;}
  .ra-top :focus-visible,.ra-bag:focus-visible{outline-color:#fff;}

  .ra-bag{position:sticky; top:64px; z-index:19; width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:6px 16px 16px; background:var(--ra-deep); color:#fff; border:0; border-radius:0 0 20px 20px; text-align:left; cursor:pointer;
    font:inherit; box-shadow:0 10px 20px -8px rgba(5,47,50,.45);}
  .ra-bag-items{display:flex; gap:6px; flex-wrap:wrap; min-width:0;}
  .ra-bag-item{display:flex; flex-direction:column; align-items:flex-start; min-width:52px; padding:6px 12px 6px 0; margin-right:6px; border-right:1px solid rgba(255,255,255,.14);}
  .ra-bag-item:last-child{border-right:0; margin-right:0;}
  .ra-bag-item .n,.ra-bag-cash .v{display:inline-block; font-family:var(--font-head); font-weight:800; letter-spacing:-.02em;}
  .ra-bag-item .n{font-size:28px; line-height:1.05;}
  .ra-bag-item .l{font-size:12px; font-weight:700; color:var(--ra-sub); margin-top:1px;}
  .ra-bag-empty{font-size:13.5px; color:var(--ra-sub); padding:8px 0;}
  .ra-bag-cash{display:flex; flex-direction:column; align-items:flex-end; white-space:nowrap;}
  .ra-bag-cash .k{font-size:11.5px; font-weight:600; color:var(--ra-sub);}
  .ra-bag-cash .v{font-size:21px; line-height:1.15;}
  .tick{animation:ra-tick .75s cubic-bezier(.16,1,.3,1);}
  @keyframes ra-tick{0%,40%{color:#7fe3dd;} 100%{color:inherit;}}

  .ra-main{padding:16px;}
  .ra-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:4px; margin-bottom:14px;}
  .ra-seg-btn{border:0; background:none; border-radius:10px; min-height:44px; padding:0 4px; display:flex; justify-content:center; align-items:center; gap:6px;
    font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;}
  .ra-seg-btn .c{min-width:22px; padding:1px 7px; border-radius:20px; background:var(--bg); font-size:12px; text-align:center;}
  .ra-seg-btn[aria-selected="true"]{background:var(--ra-teal-ink); color:#fff;}
  .ra-seg-btn[aria-selected="true"] .c{background:rgba(255,255,255,.22);}

  .ra-list{display:flex; flex-direction:column; gap:10px;}
  .ra-job{display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px;}
  .ra-job.is-out{border:2px solid var(--ra-teal-ink); background:#f7fcfc;}
  .ra-skel{display:block;}
  .ra-job-num{width:34px; height:34px; border-radius:50%; background:var(--bg); color:var(--ra-teal-ink); display:grid; place-items:center;
    font-family:var(--font-head); font-weight:800; font-size:15px;}
  .ra-job.is-out .ra-job-num{background:var(--ra-teal-ink); color:#fff;}
  .ra-job.is-done .ra-job-num{background:var(--success-bg); color:#0b7a58;}
  .ra-job-num svg{width:18px; height:18px;}
  .ra-job-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .ra-job-head h3,.ra-cust h3{font-family:var(--font-head); font-size:16px; font-weight:800; line-height:1.25; overflow-wrap:anywhere;}
  .ra-status{flex-shrink:0; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--warning-bg); color:#7a4f08;}
  .ra-status.out{background:#e2f4f3; color:var(--ra-teal-ink);}
  .ra-addr{font-size:13px; color:var(--ink-soft); margin-top:3px;}
  .ra-items{font-size:14.5px; font-weight:700; margin-top:8px;}
  .ra-meta{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
  .ra-note{font-size:12.5px; background:var(--bg); border-radius:8px; padding:6px 9px; margin-top:8px;}
  .ra-owe,.ra-owe-inline{color:var(--ra-pink-ink); font-weight:800;}
  .ra-owe{flex-shrink:0; font-family:var(--font-head); font-size:17px;}
  .ra-time{flex-shrink:0; font-size:12px; color:var(--ink-soft);}
  .ra-links{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
  .ra-link{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; border-radius:10px; background:var(--bg);
    color:var(--ra-teal-ink); font-weight:700; font-size:13px;}
  .ra-link:hover{background:#e2f0ef;}
  .ra-link svg{width:16px; height:16px;}
  .ra-actions{display:flex; align-items:center; gap:8px; margin-top:12px;}
  .ra-actions > .ra-btn:first-child{flex:1; min-width:0;}
  .ra-actions-wide > .ra-btn{flex:1;}
  .ra-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:0 16px; border-radius:12px;
    border:1px solid transparent; font:inherit; font-size:14.5px; font-weight:800; white-space:nowrap; cursor:pointer; transition:transform .12s ease, filter .12s ease;}
  .ra-btn svg{width:18px; height:18px;}
  .ra-btn:hover{filter:brightness(1.06);}
  .ra-btn:active{transform:translateY(1px);}
  .ra-btn:disabled{opacity:.5; cursor:not-allowed; filter:none; transform:none;}
  .ra-btn-primary{background:var(--ra-teal-ink); color:#fff;}
  .ra-btn-pink{background:var(--ra-pink); color:#fff;}
  .ra-btn-ghost{background:#fff; border-color:var(--border); color:var(--ink);}
  .ra-btn-ghost:hover{filter:none; background:var(--bg);}
  .ra-btn-sm{min-height:38px; padding:0 12px; border-radius:10px; font-size:13px;}

  .ra-stamps{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; align-items:center;}
  .ra-stamp{display:inline-block; transform:rotate(-4deg); border:3px double var(--ra-teal-ink); color:var(--ra-teal-ink); border-radius:8px;
    padding:4px 12px; font-family:var(--font-head); font-size:17px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; line-height:1.2;}
  .ra-stamp.paid{transform:rotate(3deg); border-color:#0b7a58; color:#0b7a58;}
  .ra-stamp.owe{transform:rotate(3deg); border-color:var(--ra-pink-ink); color:var(--ra-pink-ink);}

  .ra-empty{background:#fff; border:1px dashed #c6dedd; border-radius:16px; padding:28px 20px; text-align:center;}
  .ra-empty strong{font-family:var(--font-head); font-size:16px;}
  .ra-empty p{font-size:13px; color:var(--ink-soft); margin:6px auto 14px; max-width:36ch;}
  .ra-empty p:last-child{margin-bottom:0;}

  .ra-viewhead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:4px 0 12px;}
  .ra-viewhead h2{font-family:var(--font-head); font-size:21px; font-weight:800;}
  .ra-search{display:flex; align-items:center; gap:8px; min-height:48px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:0 12px; margin-bottom:12px;}
  .ra-search:focus-within{border-color:var(--ra-teal);}
  .ra-search svg{width:18px; height:18px; color:var(--ink-faint); flex-shrink:0;}
  .ra-search input{flex:1; min-width:0; min-height:46px; border:0; outline:0; background:none; font:inherit; font-size:15px; color:var(--ink);}
  .ra-cust{background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px;}
  .ra-cust .ra-chip{margin-top:0; flex-shrink:0;}
  .ra-cust .ra-btn-sm{min-height:48px;}
  .ra-round{flex-shrink:0; width:48px; height:48px; border-radius:12px; background:var(--bg); color:var(--ra-teal-ink); display:grid; place-items:center;}
  .ra-round:hover{background:#e2f0ef;}
  .ra-round svg{width:20px; height:20px;}
  .ra-textlink{margin-top:8px; padding:6px 0; border:0; background:none; font:inherit; font-size:13px; font-weight:700; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
  .ra-textlink:hover{color:var(--ink);}
  .ra-chip{display:inline-block; margin-top:8px; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:700;}
  .ra-chip.owe{background:#fde8f2; color:var(--ra-pink-ink);}

  .ra-stock{background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden;}
  .ra-stock-row{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border);}
  .ra-stock-row:last-child{border-bottom:0;}
  .ra-stock-row .l{font-weight:700;}
  .ra-stock-row .n{font-family:var(--font-head); font-size:28px; font-weight:800;}
  .ra-actions-wide{margin-top:14px;}
  .ra-hint{font-size:12.5px; color:var(--ink-soft); margin-top:10px; text-align:center;}

  .ra-note-row{display:flex; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px;}
  .ra-note-row h3{font-size:14px; font-weight:700;}
  .ra-note-row p{font-size:13px; color:var(--ink-soft); margin-top:2px;}
  .ra-note-row time{flex-shrink:0; font-size:11.5px; color:var(--ink-faint);}
  .ra-note-row.unread h3::after{content:""; display:inline-block; width:7px; height:7px; margin-left:6px; border-radius:50%; background:var(--ra-teal); vertical-align:middle;}

  .ra-nav{position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:30; width:100%; max-width:560px;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end; background:#fff; border-top:1px solid var(--border);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -8px 20px -10px rgba(5,47,50,.18);}
  .ra-nav-btn{position:relative; min-height:54px; border:0; border-radius:12px; background:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:inherit; font-size:11px; font-weight:700; color:var(--ink-faint);}
  .ra-nav-btn svg{width:23px; height:23px;}
  .ra-nav-btn:hover{color:var(--ink-soft);}
  .ra-nav-btn[aria-current="page"]{color:var(--ra-teal-ink);}
  .ra-nav-btn[aria-current="page"]::before{content:""; position:absolute; top:-6px; left:30%; right:30%; height:3px; border-radius:0 0 3px 3px; background:var(--ra-teal-ink);}
  .ra-nav-new{position:relative; justify-self:center; align-self:center; margin-top:-30px; width:64px; height:64px; border-radius:50%; border:4px solid #fff;
    background:var(--ra-pink); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 16px -4px rgba(194,56,122,.5);}
  .ra-nav-new svg{width:28px; height:28px;}
  .ra-nav-new span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .ra-nav-new:active{transform:scale(.96);}
  .ra-dot{position:absolute; top:7px; left:calc(50% + 6px); width:10px; height:10px; border-radius:50%; background:var(--ra-teal); border:2px solid #fff;}

  @media (min-width:600px){
    .ra{box-shadow:0 0 0 1px var(--border);}
    .ra-main{padding:20px;}
  }
  @media (prefers-reduced-motion:reduce){.tick,.ra-icon-btn.spin svg{animation:none;}}
  /* Toasts sit above the rider bottom bar */
  body:has(.ra) .toast-host{left:16px; right:16px; bottom:calc(104px + env(safe-area-inset-bottom)); max-width:528px; margin:0 auto;}