:root{
    --bg: #0a1420;
    --bg-elev: #0f1e2e;
    --panel: #132538;
    --panel-2: #172c42;
    --border: #22405c;
    --text: #eaf2fa;
    --text-dim: #8fa8bf;
    --text-faint: #5d7590;
    --accent: #3d94ff;
    --accent-soft: rgba(61,148,255,.14);
    --ok: #35e0ae;
    --warn: #ffb020;
    --danger: #ff6b5b;
    --f92: #3d94ff;
    --f91: #35d0e0;
    --fpropan: #ffb020;
    --fdizel: #6bd06f;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow: 0 12px 28px rgba(0,0,0,.35);
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    --bg:#eef3f8; --bg-elev:#ffffff; --panel:#ffffff; --panel-2:#f4f8fc;
    --border:#d7e2ec; --text:#0f2337; --text-dim:#5b7085; --text-faint:#8ea0b3;
    --accent:#1f6fe0; --accent-soft: rgba(31,111,224,.10);
    color-scheme: light;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#eef3f8; --bg-elev:#ffffff; --panel:#ffffff; --panel-2:#f4f8fc;
      --border:#d7e2ec; --text:#0f2337; --text-dim:#5b7085; --text-faint:#8ea0b3;
      --accent:#1f6fe0; --accent-soft: rgba(31,111,224,.10);
      color-scheme: light;
    }
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Manrope', system-ui, -apple-system, sans-serif;
    min-height:100vh;
    -webkit-tap-highlight-color: transparent;
  }
  .num{ font-family:'Space Mono', 'Courier New', monospace; font-weight:700; letter-spacing:0.3px; }

  .app{ max-width:980px; margin:0 auto; padding:16px 16px 100px; }

  /* Header */
  header.top{
    position:sticky; top:0; z-index:30; background:var(--bg);
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 2px 18px; flex-wrap:wrap; gap:10px;
  }
  .brand{ display:flex; align-items:center; gap:10px; min-width:0; }
  .header-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .brand-mark{
    width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .brand-mark img, .login-mark img{
    width:100%; height:100%; display:block; object-fit:contain;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.32));
  }
  img[data-logo]:not([src]){ visibility:hidden; }
  .brand-text h1{ font-size:16px; margin:0; font-weight:800; letter-spacing:-0.2px; }
  .brand-text p{ margin:1px 0 0; font-size:12px; color:var(--text-dim); }

  .tabs{ display:flex; gap:4px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:4px; }
  .tab-btn{
    border:none; background:transparent; color:var(--text-dim); font-family:inherit;
    font-size:13px; font-weight:700; padding:8px 14px; border-radius:9px; cursor:pointer;
    transition:.15s; white-space:nowrap;
  }
  .tab-btn.active{ background:var(--accent); color:#fff; }
  @media (max-width:520px){
    .brand{ order:1; flex:1; min-width:0; }
    .header-right{ order:2; }
    .tabs{ width:100%; order:3; }
    .tab-btn{ flex:1; padding:8px 6px; font-size:12px; }
  }

  /* Home: big fuel buttons */
  .fuel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:6px; }
  @media (max-width:640px){ .fuel-grid{ grid-template-columns:repeat(2,1fr); } }

  /* Login gate */
  .login-overlay{
    position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
    background:var(--bg); padding:20px; overflow-y:auto;
  }
  .login-overlay.hide{ display:none; }
  .login-card{
    width:100%; max-width:380px; background:var(--bg-elev); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow); text-align:center;
    margin:auto;
  }
  .login-mark{
    width:96px; height:96px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
  }
  .login-card h2{ margin:0 0 4px; font-size:18px; font-weight:800; }
  .login-sub{ margin:0 0 20px; font-size:12.5px; color:var(--text-dim); }
  .login-back-btn{
    display:block; background:none; border:none; color:var(--text-dim); font-family:inherit;
    font-size:12.5px; font-weight:700; cursor:pointer; padding:0; margin-bottom:10px; text-align:left;
  }
  .login-back-btn:hover{ color:var(--accent); }
  .auth-field{ text-align:left; margin-bottom:14px; }
  .auth-field input{
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
    padding:12px 13px; font-size:14px; color:var(--text); font-family:inherit; outline:none;
  }
  .auth-field input:focus{ border-color:var(--accent); }
  .auth-submit-btn{ width:100%; padding:13px; font-size:14.5px; }
  .field-label{ display:block; font-size:11.5px; font-weight:700; color:var(--text-dim); margin-bottom:6px; }
  .login-links{ display:flex; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
  .login-link-btn{
    background:none; border:none; color:var(--accent); font-family:inherit; font-size:11.5px;
    font-weight:700; cursor:pointer; padding:0;
  }
  .login-link-btn:hover{ text-decoration:underline; }

  .google-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px;
    font-family:inherit; font-size:13.5px; font-weight:700; color:#3c4043; cursor:pointer; margin-bottom:14px;
  }
  .google-btn:hover{ box-shadow:0 1px 4px rgba(0,0,0,.15); }
  .login-divider{
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
    color:var(--text-faint); font-size:11px; font-weight:700;
  }
  .login-divider::before, .login-divider::after{ content:''; flex:1; height:1px; background:var(--border); }
  .demo-btn{
    width:100%; margin-top:10px; padding:12px; border-radius:10px; border:1px dashed var(--accent);
    background:transparent; color:var(--accent); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  }
  .demo-btn:hover{ background:var(--accent-soft); }
  .demo-tabs{ display:flex; gap:8px; margin-bottom:14px; }
  .demo-tab{
    flex:1; padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text-dim); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer;
  }
  .demo-tab.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .demo-staff-list{ display:flex; flex-direction:column; gap:8px; max-height:240px; overflow-y:auto; margin-bottom:6px; text-align:left; }
  .demo-staff-btn{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:10px;
    border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-family:inherit;
    font-size:13px; font-weight:700; cursor:pointer; text-align:left;
  }
  .demo-staff-btn:hover{ border-color:var(--accent); }
  .demo-staff-btn .dsb-role{
    font-size:9.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
    border-radius:6px; padding:2px 7px; flex-shrink:0;
  }
  .demo-empty{ font-size:12px; color:var(--text-faint); padding:10px 2px; text-align:center; }
  .auth-success{ color:var(--ok); font-size:12.5px; font-weight:700; margin:0 0 14px; text-align:left; }

  .role-select-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .role-select-btn{
    background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:12px 6px; text-align:center; cursor:pointer; font-family:inherit; color:var(--text);
  }
  .role-select-btn:hover{ border-color:var(--accent); }
  .role-select-btn.selected{ border-color:var(--accent); background:var(--accent-soft); }
  .role-select-btn .rs-icon{
    width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; margin:0 auto 6px;
  }
  .role-select-btn .rs-icon svg{ width:14px; height:14px; }
  .role-select-btn .rs-name{ font-size:11px; font-weight:700; }
  .role-select-btn:disabled{ opacity:.4; cursor:not-allowed; }

  /* Hamburger menu */
  .menu-backdrop{
    position:fixed; inset:0; background:rgba(3,9,16,.55); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:44;
  }
  .menu-backdrop.show{ opacity:1; pointer-events:auto; }
  .menu-drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(320px, 88vw); z-index:45;
    background:var(--bg-elev); border-left:1px solid var(--border); box-shadow:var(--shadow);
    display:flex; flex-direction:column; padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    transform:translateX(100%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
  }
  .menu-drawer.open{ transform:none; visibility:visible; transition:transform .22s ease, visibility 0s; }
  .menu-top-row{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:2px; }
  .menu-head{
    display:flex; align-items:center; gap:8px; padding-bottom:16px; margin-bottom:12px; width:100%;
    border-bottom:1px solid var(--border);
  }
  .menu-head-main{
    display:flex; align-items:center; gap:12px; flex:1; min-width:0;
    border:none; background:transparent; font-family:inherit; text-align:left; cursor:pointer; border-radius:12px;
    padding:8px; margin:-8px 0 -8px -8px;
  }
  .menu-head-main:hover{ background:var(--panel-2); }
  .menu-head-main:disabled{ cursor:default; }
  .menu-head-main:disabled:hover{ background:transparent; }
  .menu-avatar{
    width:46px; height:46px; border-radius:50%; flex-shrink:0; font-weight:800; font-size:18px; color:#fff;
    background:linear-gradient(145deg, var(--accent), #1c4fa0);
    display:flex; align-items:center; justify-content:center; text-transform:uppercase;
  }
  .menu-user{ flex:1; min-width:0; }
  .menu-user-name{ font-size:14.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .menu-user-role{ font-size:11.5px; font-weight:700; color:var(--accent); margin-top:2px; }
  .menu-user-email{ font-size:11px; color:var(--text-faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .menu-list{ display:flex; flex-direction:column; gap:6px; flex:1; }
  .menu-spacer{ flex:1; }
  .menu-item{
    display:flex; align-items:center; gap:12px; width:100%; padding:13px 12px; border-radius:12px;
    border:1px solid transparent; background:transparent; color:var(--text); font-family:inherit;
    font-size:14px; font-weight:700; cursor:pointer; text-align:left;
  }
  .menu-item:hover{ background:var(--panel-2); border-color:var(--border); }
  .menu-item svg{ width:19px; height:19px; flex-shrink:0; color:var(--text-dim); }
  .menu-tab.active{ background:var(--accent); color:#fff; border-color:transparent; }
  .menu-tab.active svg{ color:#fff; }
  .menu-tab.active:hover{ background:var(--accent); border-color:transparent; }
  .menu-divider{ height:1px; background:var(--border); margin:8px 4px; }
  .menu-item-danger{ color:var(--danger); }
  .menu-item-danger svg{ color:var(--danger); }
  .menu-item-danger:hover{ background:rgba(255,107,91,.1); border-color:var(--danger); }

  /* Computer version: the drawer becomes a permanent left sidebar instead of a
     slide-in panel, and the header shows a profile avatar + theme toggle where
     the hamburger button sits on phones. */
  @media (min-width:881px){
    body{ padding-left:248px; }
    #menuBtn{ display:none !important; }
    .header-user .user-badge{ display:none; }
    .header-desktop-controls{ display:flex !important; }
    .menu-backdrop{ display:none !important; }
    .menu-drawer{
      left:0; right:auto; top:0; width:248px;
      border-left:none; border-right:1px solid var(--border); box-shadow:none;
      transform:none !important; visibility:visible !important; transition:none;
      padding-top:22px;
    }
    .menu-head{ display:none; }
    #menuCloseBtn{ display:none; }
    .menu-top-row{ display:none; }
  }

  .header-user{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

  /* Theme toggle: two icons stacked, only the active one shown */

  /* Desktop-only header controls (profile avatar + theme toggle); hidden on phones, where the hamburger drawer is used instead */
  .header-desktop-controls{ display:none; align-items:center; gap:8px; flex-shrink:0; }
  .header-avatar-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0; font-weight:800; font-size:14px; color:#fff;
    background:linear-gradient(145deg, var(--accent), #1c4fa0); text-transform:uppercase;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .header-avatar-btn:hover{ filter:brightness(1.12); box-shadow:0 0 0 3px var(--accent-soft); }
  .menu-divider-mobile{ display:none; }

  .user-badge{
    font-size:11.5px; font-weight:700; color:var(--text-dim); background:var(--panel);
    border:1px solid var(--border); border-radius:20px; padding:7px 12px; white-space:nowrap;
    max-width:140px; overflow:hidden; text-overflow:ellipsis;
  }
  .header-icon-btn{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--panel);
    color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .header-icon-btn:hover{ color:var(--accent); border-color:var(--accent); }
  .notif-bell{ position:relative; }
  .notif-badge{
    position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--danger); color:#fff; font-size:10px; font-weight:800; line-height:18px; text-align:center;
    border:2px solid var(--bg);
  }
  .header-icon-btn svg{ width:17px; height:17px; }
  #logoutBtn:hover{ color:var(--danger); border-color:var(--danger); }

  .admin-modal{ max-width:420px; max-height:82vh; overflow-y:auto; }

  /* Settings page */
  .st-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; max-width:640px; }
  .fuel-btn.st-tile{
    flex-direction:row; align-items:center; text-align:left; gap:14px; padding:12px 16px; width:100%;
  }
  .fuel-btn.st-tile[hidden]{ display:none; }
  .st-tile .fuel-icon{ width:46px; height:46px; flex-shrink:0; }
  .st-tile .fuel-icon svg{ width:22px; height:22px; }
  .st-tile-avatar{ font-size:20px; font-weight:800; color:var(--fuel-color); text-transform:uppercase; }
  .st-tile-text{ flex:1; min-width:0; }
  .st-tile .fname-row{ justify-content:flex-start; }
  .st-tile .fname{ font-size:14.5px; }
  .st-tile-sub{
    margin-top:2px; font-size:12px; font-weight:700; color:var(--text-dim);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .st-sub{ max-width:520px; }
  .premium-btn{
    width:auto; padding:0 12px; gap:6px; font-family:inherit; font-weight:800; font-size:12.5px;
    color:#0ea5e9; background:rgba(56,189,248,.16); border:1px solid #38bdf8;
  }
  .premium-btn svg{ width:16px; height:16px; }
  .premium-btn:hover{ color:#0284c7; border-color:#0ea5e9; background:rgba(56,189,248,.26); }
  @media (max-width:440px){ .premium-btn .pm-label{ display:none; } .premium-btn{ width:38px; padding:0; } }
  .unread-dot{
    position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%;
    background:var(--danger); border:2px solid var(--bg);
  }
  .header-desktop-controls{ position:relative; }
  .menu-count{
    margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--danger);
    color:#fff; font-size:11px; font-weight:800; line-height:20px; text-align:center;
  }
  .st-sub .st-card{ margin-bottom:14px; }
  .sup-links{ display:flex; flex-direction:column; gap:8px; }
  .sup-link{
    display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; border:1px solid var(--border);
    background:var(--panel-2); color:var(--text); text-decoration:none; font-size:13px; font-weight:700;
  }
  .sup-link:hover{ border-color:var(--accent); color:var(--accent); }
  .sup-link span{ color:var(--text-dim); font-weight:600; font-size:12px; margin-left:auto; }
  .sup-item{ border:1px solid var(--border); background:var(--panel-2); border-radius:12px; padding:11px 12px; margin-bottom:8px; }
  .sup-item-head{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; color:var(--text-dim); margin-bottom:5px; }
  .sup-chip{ border-radius:6px; padding:2px 7px; font-size:10px; font-weight:800; background:var(--accent-soft); color:var(--accent); }
  .sup-item-text{ font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
  /* Boshqaruv paneli (today at a glance) */
  .dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
  .dash-stat{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; min-width:0; }
  .dash-stat span{ display:block; font-size:10.5px; font-weight:700; color:var(--text-dim); margin-bottom:5px; }
  .dash-stat b{ display:block; font-size:16px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dash-stat small{ font-size:10.5px; font-weight:700; color:var(--text-faint); }
  .dash-title{ font-size:12px; font-weight:800; color:var(--text-dim); margin:4px 2px 10px; }
  .dash-fuels{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr)); gap:12px; margin-bottom:16px; }
  .dash-fuel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:13px 14px; position:relative; overflow:hidden; }
  .dash-fuel::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--fc); }
  .df-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; font-weight:800; }
  .df-head .dash-chip{ margin-left:auto; }
  .dash-chip{ font-size:10px; font-weight:800; border-radius:20px; padding:3px 9px; }
  .dash-chip.ok{ color:var(--ok); background:rgba(53,224,174,.14); }
  .dash-chip.warn{ color:var(--warn); background:rgba(255,176,32,.16); }
  .dash-chip.danger{ color:var(--danger); background:rgba(255,107,91,.15); }
  .df-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .df-grid div{ min-width:0; }
  .df-grid span{ display:block; font-size:10px; font-weight:700; color:var(--text-dim); }
  .df-grid b{ display:block; font-size:13px; font-weight:800; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .df-foot{ margin-top:10px; padding-top:9px; border-top:1px solid var(--border); font-size:11.5px; font-weight:700; color:var(--text-dim); }
  .df-foot.bad{ color:var(--warn); }
  .dash-notif{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; }
  .dash-notif div{ flex:1; font-size:13px; font-weight:700; }
  .dash-notif .btn{ width:auto; padding:9px 16px; font-size:12.5px; }
  @media (max-width:420px){ .dash-stats{ grid-template-columns:1fr 1fr; } .dash-stats .dash-stat:last-child{ grid-column:1 / -1; } }
  /* Step-by-step account set-up */
  .ob-top{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
  .ob-progress{ flex:1; height:6px; border-radius:6px; background:var(--panel-2); overflow:hidden; }
  .ob-bar{ height:100%; width:25%; border-radius:6px; background:linear-gradient(90deg, var(--accent), #38bdf8); transition:width .45s cubic-bezier(.22,.9,.3,1); }
  .ob-count{ font-size:11px; font-weight:800; color:var(--text-dim); min-width:34px; text-align:right; }
  .ob-stage{ min-height:236px; }
  .ob-step{ display:none; }
  .ob-step.active{ display:block; animation-duration:.4s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.9,.3,1); }
  .ob-step.active.fwd{ animation-name:obInRight; }
  .ob-step.active.back{ animation-name:obInLeft; }
  .ob-step.shake{ animation:obShake .4s; }
  .ob-ico{
    width:68px; height:68px; margin:0 auto 14px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; animation:obPop .55s both;
  }
  .ob-ico svg{ width:30px; height:30px; }
  .ob-avatar{ width:96px; height:96px; font-size:36px; margin:0 auto 14px; animation:obPop .55s both; }
  .ob-input{
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:14px;
    font-family:inherit; font-size:15px; font-weight:700; color:var(--text); outline:none; text-align:center;
  }
  .ob-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .ob-actions{ display:flex; gap:10px; margin-top:18px; }
  .ob-actions .btn{ flex:1; padding:13px; font-size:14px; }
  .ob-check{ width:84px; height:84px; margin:4px auto 12px; display:block; animation:obPop .55s both; }
  .ob-check-circle{ stroke:var(--ok); stroke-width:3; stroke-linecap:round; }
  .ob-check-mark{ stroke:var(--ok); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
  .ob-step.active .ob-check-circle{ stroke-dasharray:145; stroke-dashoffset:145; animation:obDraw .6s .1s ease forwards; }
  .ob-step.active .ob-check-mark{ stroke-dasharray:36; stroke-dashoffset:36; animation:obDraw .4s .55s ease forwards; }
  @keyframes obInRight{ from{ opacity:0; transform:translateX(34px); } to{ opacity:1; transform:none; } }
  @keyframes obInLeft{ from{ opacity:0; transform:translateX(-34px); } to{ opacity:1; transform:none; } }
  @keyframes obShake{ 0%,100%{ transform:translateX(0); } 20%,60%{ transform:translateX(-8px); } 40%,80%{ transform:translateX(8px); } }
  @keyframes obPop{ 0%{ transform:scale(.4); opacity:0; } 70%{ transform:scale(1.08); } 100%{ transform:scale(1); opacity:1; } }
  @keyframes obDraw{ to{ stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce){
    .ob-step.active, .ob-step.shake, .ob-ico, .ob-avatar, .ob-check, .ob-check-circle, .ob-check-mark{ animation:none !important; }
    .ob-check-circle, .ob-check-mark{ stroke-dashoffset:0 !important; }
    .ob-bar{ transition:none; }
  }
  /* ===== Phones & tablets: bottom nav + Menyu page ===== */
  .bottom-nav, #headerBellBtn, .more-banner{ display:none; }
  @media (max-width:880px){
    #menuBtn{ display:none !important; }
    #headerBellBtn{ display:flex; }
    .menu-drawer, .menu-backdrop{ display:none !important; }
    .app{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
    .bottom-nav{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:42;
      background:var(--bg-elev); border-top:1px solid var(--border);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -8px 24px rgba(0,0,0,.18);
    }
    .bn-item{
      position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
      padding:7px 2px 5px; border:0; background:none; font-family:inherit; font-size:10.5px; font-weight:700;
      color:var(--text-faint); cursor:pointer; border-radius:12px; transition:color .2s, transform .15s;
    }
    .bn-item svg{ width:23px; height:23px; transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
    .bn-item span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bn-item:active{ transform:scale(.94); }
    .bn-item.active{ color:var(--accent); }
    .bn-item.active svg{ transform:translateY(-1px) scale(1.12); }
    .bn-item.active::before{ content:""; position:absolute; top:-7px; left:30%; right:30%; height:3px; border-radius:0 0 4px 4px; background:var(--accent); }
    .bn-dot{ position:absolute; top:6px; left:calc(50% + 6px); width:9px; height:9px; border-radius:50%; background:var(--danger); border:2px solid var(--bg-elev); }
    .note-fab-row{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
    .toast{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
    .more-banner{
      display:flex; align-items:center; gap:14px; width:100%; margin:0 0 18px; padding:16px; border:0; border-radius:16px; cursor:pointer;
      font-family:inherit; text-align:left; color:#fff; background:linear-gradient(120deg,#0b78c8,#1ea0f2); box-shadow:0 10px 24px rgba(30,160,242,.28);
    }
    .mb-gem{ width:54px; height:54px; flex-shrink:0; display:grid; place-items:center; color:#ffe27a; filter:drop-shadow(0 0 8px rgba(255,226,122,.7)); animation:pmStar 3.2s ease-in-out infinite; }
    .mb-gem svg{ width:46px; height:46px; fill:currentColor; }
    .mb-txt b{ display:block; font-size:18px; font-weight:800; }
    .mb-txt small{ display:block; margin-top:3px; font-size:12.5px; opacity:.92; font-weight:700; }
  }
  .more-title{ font-size:15px; font-weight:800; margin:4px 2px 10px; }
  .more-list{ display:flex; flex-direction:column; gap:8px; }
  .more-row{
    display:flex; align-items:center; gap:14px; width:100%; padding:11px 14px; border-radius:14px; cursor:pointer;
    background:var(--panel); border:1px solid var(--border); color:var(--text); font-family:inherit; text-align:left;
  }
  .more-row[hidden]{ display:none; }
  .more-row:active{ transform:scale(.985); }
  .more-ico{ width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); overflow:hidden; font-weight:800; }
  .more-ico svg{ width:22px; height:22px; }
  .more-ico img{ width:100%; height:100%; object-fit:cover; }
  .more-txt{ flex:1; min-width:0; }
  .more-txt b{ display:block; font-size:15.5px; font-weight:800; }
  .more-txt small{ display:block; margin-top:2px; font-size:12px; color:var(--text-dim); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .more-chev{ width:18px; height:18px; color:var(--text-faint); flex-shrink:0; }
  .more-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; line-height:20px; text-align:center; }
  .more-logout{ margin-top:14px; border-color:var(--danger); }
  .more-logout .more-txt b{ color:var(--danger); }
  @media (min-width:881px){ #viewMore{ display:none !important; } }
  .msg-list{ display:flex; flex-direction:column; gap:8px; padding-bottom:10px; min-height:160px; }
  .msg-day{ align-self:center; font-size:11px; font-weight:800; color:var(--text-faint); background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:3px 12px; margin:6px 0 2px; }
  .msg-b{ max-width:82%; padding:9px 12px 7px; border-radius:16px; background:var(--panel); border:1px solid var(--border); align-self:flex-start; animation:pmUp .35s cubic-bezier(.2,.8,.2,1) both; word-break:break-word; }
  .msg-b.me{ align-self:flex-end; background:linear-gradient(135deg,#2b7bff,#6a3df0); border-color:transparent; color:#fff; border-bottom-right-radius:5px; }
  .msg-b:not(.me){ border-bottom-left-radius:5px; }
  .msg-who{ font-size:11.5px; font-weight:800; color:var(--accent); margin-bottom:3px; display:flex; gap:6px; align-items:center; }
  .msg-who i{ font-style:normal; font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:6px; background:var(--accent-soft); }
  .msg-t{ font-size:14px; line-height:1.45; white-space:pre-wrap; }
  .msg-time{ font-size:10px; margin-top:3px; text-align:right; opacity:.65; }
  .msg-compose{ position:sticky; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); display:flex; gap:8px; align-items:flex-end; padding:8px; border-radius:18px; background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); z-index:5; }
  @media (min-width:881px){ .msg-compose{ bottom:16px; } }
  .msg-compose textarea{ flex:1; min-width:0; resize:none; max-height:120px; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14.5px; padding:9px 8px; }
  .msg-compose button{ flex:none; width:42px; height:42px; border:0; border-radius:50%; cursor:pointer; color:#fff; background:linear-gradient(135deg,#2b7bff,#8a4dff); display:grid; place-items:center; }
  .msg-compose button:disabled{ opacity:.5; }
  .msg-compose button svg{ width:20px; height:20px; }
  .rpt-tools{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; }
  .rpt-tools-note{ font-size:12px; font-weight:700; color:var(--text-faint); }
  .rpt-excel{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:0; border-radius:12px; cursor:pointer; font-family:inherit; font-weight:800; font-size:13.5px; color:#fff; background:linear-gradient(135deg,#1f9d55,#2fbf71); box-shadow:0 6px 16px rgba(47,191,113,.3); transition:transform .15s, opacity .2s; }
  .rpt-excel svg{ width:18px; height:18px; }
  .rpt-excel:active{ transform:scale(.96); } .rpt-excel:disabled{ opacity:.6; cursor:progress; }
  /* ===== Premium to'lov oynasi ===== */
  .pay-ov{ position:fixed; inset:0; z-index:380; background:rgba(8,12,24,.62); display:none; align-items:center; justify-content:center; padding:16px; }
  .pay-ov.show{ display:flex; }
  .pay-box{ position:relative; width:100%; max-width:380px; max-height:92vh; overflow:auto; background:var(--card,#fff); color:var(--text,#111); border-radius:20px; padding:22px 18px 18px; box-shadow:0 20px 50px rgba(0,0,0,.35); }
  .pay-box h3{ margin:0 0 2px; font-size:17px; } .pay-amount{ font-size:26px; font-weight:800; margin-bottom:14px; }
  .pay-x{ position:absolute; top:8px; right:12px; border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:inherit; opacity:.6; }
  .pay-note{ font-size:13.5px; line-height:1.55; margin:10px 0 16px; color:var(--text-dim,#555); }
  .pay-minnote{ font-size:12px; opacity:.7; margin:-8px 0 8px; }
  .pay-step{ font-size:13px; margin:12px 0 6px; color:var(--text-dim,#555); }
  .pay-cardbox{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:14px; background:rgba(120,120,160,.12); }
  .pay-card{ font-size:18px; font-weight:800; letter-spacing:1px; } .pay-holder{ font-size:12px; opacity:.7; margin-top:2px; }
  .pay-copy{ border:0; padding:8px 12px; border-radius:10px; background:#3d94ff; color:#fff; font-weight:700; cursor:pointer; }
  .pay-in{ width:100%; box-sizing:border-box; padding:11px 12px; border-radius:12px; border:1px solid rgba(120,120,160,.35); background:transparent; color:inherit; font:inherit; margin-bottom:12px; }
  .pay-pending{ margin-top:10px; font-size:12.5px; text-align:center; color:#b7791f; }
  .pay-or{ text-align:center; font-size:12px; opacity:.6; margin:12px 0 8px; }
  .pay-gp{ width:100%; padding:12px; border-radius:12px; border:0; background:#000; color:#fff; font-weight:700; cursor:pointer; }
  /* ===== Premium promo popup ===== */
  .promo-ov{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(4,8,20,.62); backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity .35s ease; }
  .promo-ov.show{ opacity:1; pointer-events:auto; }
  .promo-card{ position:relative; width:100%; max-width:380px; padding:3px; border-radius:28px; background:conic-gradient(from var(--pm-angle),#3d94ff,#a64dff,#ff7ad9,#ffd36b,#35e0ae,#3d94ff); animation:pmSpin 4s linear infinite; box-shadow:0 30px 80px rgba(110,70,240,.5); transform:translateY(40px) scale(.9); opacity:0; }
  .promo-ov.show .promo-card{ animation:promoIn .7s cubic-bezier(.2,1.2,.3,1) .05s both, pmSpin 4s linear infinite; }
  .promo-inner{ position:relative; overflow:hidden; border-radius:25px; padding:30px 22px 20px; text-align:center; color:#fff; background:linear-gradient(150deg,#14257a,#4b2bc4 55%,#8a2fc9); }
  .promo-orb{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.55; animation:pmFloat 7s ease-in-out infinite; }
  .po1{ width:150px; height:150px; background:#35c9ff; left:-50px; top:-40px; } .po2{ width:140px; height:140px; background:#ff6ad5; right:-50px; bottom:40px; animation-delay:-3s; } .po3{ width:90px; height:90px; background:#ffd36b; right:20%; top:-30px; opacity:.3; animation-delay:-5s; }
  .promo-sp{ position:absolute; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(255,255,255,.85); animation:pmTwinkle 2.4s ease-in-out infinite; animation-delay:var(--d); }
  .promo-x{ position:absolute; top:10px; right:10px; z-index:3; width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:14px; cursor:pointer; }
  .promo-x:hover{ background:rgba(255,255,255,.28); }
  .promo-gem{ position:relative; z-index:1; width:84px; height:84px; margin:0 auto 12px; display:grid; place-items:center; color:#ffe27a; border-radius:50%; background:rgba(255,255,255,.14); box-shadow:0 0 0 1px rgba(255,255,255,.3) inset; animation:pmStar 3s ease-in-out infinite; }
  .promo-gem::before,.promo-gem::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(255,255,255,.35); animation:pmRing 2.6s ease-out infinite; } .promo-gem::after{ animation-delay:1.3s; }
  .promo-gem svg{ width:46px; height:46px; filter:drop-shadow(0 0 10px rgba(255,226,122,.95)); }
  .promo-badge{ position:relative; z-index:1; display:inline-block; padding:4px 14px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:1.6px; color:#3a2600; background:linear-gradient(90deg,#ffd36b,#ffb020); box-shadow:0 6px 16px rgba(255,176,32,.5); animation:pmBob 2.2s ease-in-out infinite; }
  .promo-inner h2{ position:relative; z-index:1; margin:12px 0 6px; font-size:24px; line-height:1.25; font-weight:800; }
  .promo-inner h2 span{ background:linear-gradient(90deg,#fff,#ffe27a,#fff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:pmShine 3s linear infinite; }
  .promo-sub{ position:relative; z-index:1; margin:0 0 16px; font-size:13.5px; opacity:.88; }
  .promo-list{ position:relative; z-index:1; list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; text-align:left; }
  .promo-list li{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; font-size:14px; font-weight:700; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); opacity:0; transform:translateX(-24px); }
  .promo-list li b{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.18); font-size:16px; }
  .promo-ov.show .promo-list li{ animation:promoLi .55s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(.55s + var(--i) * .13s); }
  .promo-price{ position:relative; z-index:1; margin-bottom:14px; font-size:13px; opacity:.95; }
  .promo-price b{ font-family:'Space Mono',monospace; font-size:26px; color:#ffe27a; margin:0 2px; }
  .promo-price small{ opacity:.8; }
  .promo-cta{ position:relative; z-index:1; overflow:hidden; width:100%; border:0; cursor:pointer; padding:15px; border-radius:16px; font:inherit; font-weight:800; font-size:16px; color:#4a2bd0; background:#fff; box-shadow:0 12px 26px rgba(0,0,0,.3); animation:promoPulse 2s ease-in-out infinite; }
  .promo-cta::after{ content:""; position:absolute; top:0; bottom:0; width:60px; left:-80px; background:linear-gradient(90deg,transparent,rgba(120,80,240,.35),transparent); transform:skewX(-20deg); animation:pmSweep 2.8s ease-in-out infinite; }
  .promo-later{ position:relative; z-index:1; margin-top:10px; border:0; background:none; color:rgba(255,255,255,.78); font:inherit; font-weight:700; font-size:13px; cursor:pointer; padding:6px 10px; }
  @keyframes promoIn{ from{ opacity:0; transform:translateY(60px) scale(.85) rotate(-2deg); } to{ opacity:1; transform:none; } }
  @keyframes promoLi{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:none; } }
  @keyframes promoPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
  @media (max-height:640px){ .promo-gem{ width:60px; height:60px; margin-bottom:8px; } .promo-gem svg{ width:32px; height:32px; } .promo-list li{ padding:7px 10px; } .promo-inner{ padding-top:22px; } }
  @media (prefers-reduced-motion: reduce){ .promo-ov *, .promo-card{ animation:none !important; } .promo-card{ opacity:1; transform:none; } .promo-list li{ opacity:1; transform:none; } }
  /* ===== Splash / loading ===== */
  .splash{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff;
    background:radial-gradient(circle at 50% 38%, #123a86 0%, #0a1c4a 45%, #050a1c 100%); transition:opacity .6s ease, transform .6s ease; animation:splashFailsafe 0s 9s forwards; }
  .splash.out{ opacity:0; transform:scale(1.07); pointer-events:none; }
  @keyframes splashFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
  .sp-orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; animation:pmFloat 9s ease-in-out infinite; }
  .so1{ width:300px; height:300px; background:#2b7bff; left:-90px; top:-60px; } .so2{ width:280px; height:280px; background:#a64dff; right:-90px; bottom:-60px; animation-delay:-4s; }
  .sp-center{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 20px; }
  .sp-logo{ position:relative; width:172px; height:172px; display:grid; place-items:center; animation:spIn .9s cubic-bezier(.2,1.2,.3,1) both; }
  .sp-ring{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from var(--pm-angle),transparent 0 55%,#35c9ff,#a64dff,#ff7ad9,#ffd36b,transparent);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); animation:pmSpin 1.8s linear infinite; }
  .sp-ring.r2{ inset:12px; opacity:.55; animation-duration:2.8s; animation-direction:reverse; }
  .sp-glow{ position:absolute; inset:18px; border-radius:50%; background:radial-gradient(circle,rgba(80,150,255,.55),transparent 70%); animation:spGlow 2.2s ease-in-out infinite; }
  .sp-mark{ position:relative; width:112px; height:112px; border-radius:50%; display:grid; place-items:center; overflow:hidden; animation:spFloat 3s ease-in-out infinite; }
  .sp-mark img{ width:92px; height:92px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); position:relative; z-index:1; }
  .sp-shine{ position:absolute; z-index:2; top:-10%; bottom:-10%; width:34px; left:-60px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-20deg); animation:pmSweep 2.3s ease-in-out .9s infinite; }
  .sp-name{ margin-top:22px; font-size:28px; font-weight:800; letter-spacing:.5px; }
  .sp-name span{ display:inline-block; opacity:0; transform:translateY(14px); animation:spLetter .5s cubic-bezier(.2,.9,.3,1) both; background:linear-gradient(180deg,#fff,#cfe0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sp-tag{ margin-top:6px; font-size:13px; opacity:0; animation:spFade .7s ease 1.2s both; color:#a9c1ee; font-weight:600; letter-spacing:.4px; }
  .sp-bar{ margin-top:26px; width:170px; height:5px; border-radius:5px; background:rgba(255,255,255,.14); overflow:hidden; opacity:0; animation:spFade .5s ease 1s both; }
  .sp-bar i{ display:block; height:100%; width:45%; border-radius:5px; background:linear-gradient(90deg,#35c9ff,#a64dff,#ff7ad9); animation:spBar 1.4s ease-in-out infinite; }
  @keyframes spIn{ from{ opacity:0; transform:scale(.4) rotate(-12deg); } to{ opacity:1; transform:none; } }
  @keyframes spFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  @keyframes spGlow{ 0%,100%{ transform:scale(.85); opacity:.6; } 50%{ transform:scale(1.15); opacity:1; } }
  @keyframes spLetter{ to{ opacity:1; transform:none; } }
  @keyframes spFade{ to{ opacity:1; } }
  @keyframes spBar{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }
  @media (prefers-reduced-motion: reduce){
    .splash *{ animation:none !important; } .sp-name span, .sp-tag, .sp-bar{ opacity:1 !important; transform:none !important; } .sp-ring{ opacity:.6; }
  }

  /* ===== PIN lock (phone / tablet only) ===== */
  .pin-mobile-only{ display:none; }
  @media (max-width:880px){ .pin-mobile-only{ display:block; } }
  .pn{ position:fixed; inset:0; z-index:390; display:none; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; color:#fff;
    background:radial-gradient(circle at 50% 30%, #123a86 0%, #0a1c4a 48%, #050a1c 100%); padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 14px);
    opacity:0; transition:opacity .35s ease, transform .35s ease; }
  .pn.show{ display:flex; } .pn.in{ opacity:1; } .pn.out{ opacity:0; transform:scale(1.05); }
  .pn-orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.45; animation:pmFloat 9s ease-in-out infinite; pointer-events:none; }
  .pn-o1{ width:260px; height:260px; background:#2b7bff; left:-80px; top:-50px; } .pn-o2{ width:240px; height:240px; background:#a64dff; right:-80px; bottom:-40px; animation-delay:-4s; }
  .pn-box{ position:relative; z-index:1; width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .pn-logo{ position:relative; width:84px; height:84px; display:grid; place-items:center; margin-bottom:12px; animation:spIn .8s cubic-bezier(.2,1.2,.3,1) both; }
  .pn-logo .sp-ring{ animation-duration:2.4s; } .pn-logo .sp-ring.r2{ inset:7px; animation-duration:3.4s; }
  .pn-logo img{ width:52px; height:52px; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation:spFloat 3s ease-in-out infinite; }
  .pn-title{ font-size:21px; font-weight:800; letter-spacing:.2px; }
  .pn-sub{ margin-top:4px; font-size:13px; color:#a9c1ee; min-height:18px; font-weight:600; }
  .pn-stage{ display:none; width:100%; flex-direction:column; align-items:center; }
  .pn-stage.on{ display:flex; animation:pnSlide .35s cubic-bezier(.2,.9,.3,1) both; }
  @keyframes pnSlide{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
  .pn-dots{ display:flex; gap:16px; margin:20px 0 6px; height:20px; }
  .pn-dots.shake{ animation:pnShake .45s ease; }
  @keyframes pnShake{ 0%,100%{ transform:none; } 20%{ transform:translateX(-12px); } 40%{ transform:translateX(10px); } 60%{ transform:translateX(-7px); } 80%{ transform:translateX(5px); } }
  .pn-dots i{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.55); transition:all .18s ease; }
  .pn-dots i.on{ background:linear-gradient(135deg,#35c9ff,#a64dff); border-color:transparent; transform:scale(1.18); box-shadow:0 0 14px rgba(120,150,255,.8); }
  .pn-dots.good i{ background:#3ddc97; border-color:transparent; box-shadow:0 0 14px rgba(61,220,151,.8); }
  .pn-err{ min-height:18px; font-size:12.5px; color:#ff9aa8; font-weight:700; margin-bottom:6px; }
  .pn-pad{ display:grid; grid-template-columns:repeat(3,72px); gap:14px 22px; margin-top:6px; }
  .pn-pad button{ width:72px; height:72px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.09); color:#fff; font:700 26px/1 inherit; font-family:inherit;
    cursor:pointer; -webkit-tap-highlight-color:transparent; backdrop-filter:blur(6px); transition:transform .12s ease, background .12s ease; display:grid; place-items:center; touch-action:manipulation; }
  .pn-pad button:active{ transform:scale(.88); background:rgba(255,255,255,.24); }
  .pn-pad button.ghost{ background:transparent; border-color:transparent; font-size:13px; color:#a9c1ee; }
  .pn-pad button svg{ width:28px; height:28px; }
  .pn-pad button[hidden]{ visibility:hidden; display:grid; }
  .pn-links{ margin-top:16px; display:flex; flex-direction:column; gap:6px; align-items:center; min-height:24px; }
  .pn-link{ background:none; border:0; color:#a9c1ee; font:700 13.5px/1 inherit; font-family:inherit; cursor:pointer; padding:8px 12px; }
  .pn-big{ width:104px; height:104px; border-radius:50%; display:grid; place-items:center; margin:18px 0 14px; position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
  .pn-big svg{ width:54px; height:54px; position:relative; z-index:1; }
  .pn-big::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(120,170,255,.6); animation:pnPulse 1.8s ease-out infinite; }
  @keyframes pnPulse{ from{ transform:scale(.85); opacity:.9; } to{ transform:scale(1.35); opacity:0; } }
  .pn-ok{ width:104px; height:104px; margin:20px 0 14px; }
  .pn-ok circle{ fill:none; stroke:#3ddc97; stroke-width:5; stroke-dasharray:302; stroke-dashoffset:302; animation:pnDraw .7s ease forwards; transform-origin:center; transform:rotate(-90deg); }
  .pn-ok path{ fill:none; stroke:#3ddc97; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:pnDraw .45s ease .55s forwards; }
  @keyframes pnDraw{ to{ stroke-dashoffset:0; } }
  .pn-btn{ width:100%; margin-top:10px; padding:14px; border-radius:14px; border:0; font:800 15px/1 inherit; font-family:inherit; cursor:pointer; color:#fff;
    background:linear-gradient(120deg,#1b6dff,#8a4dff); box-shadow:0 10px 24px rgba(70,90,255,.4); }
  @media (max-height:700px){ .pn-pad{ gap:9px 20px; grid-template-columns:repeat(3,62px); } .pn-pad button{ width:62px; height:62px; font-size:23px; } .pn-logo{ width:64px; height:64px; margin-bottom:6px; } .pn-logo img{ width:40px; height:40px; } .pn-dots{ margin:12px 0 2px; } .pn-big{ margin:8px 0; } }
  @media (prefers-reduced-motion: reduce){ .pn *{ animation:none !important; } .pn-ok circle,.pn-ok path{ stroke-dashoffset:0; } }
  /* chat extras */
  .msg-new{ align-self:stretch; display:flex; align-items:center; gap:10px; color:var(--accent); font-size:11.5px; font-weight:800; margin:6px 0 2px; }
  .msg-new::before,.msg-new::after{ content:""; flex:1; height:1px; background:var(--accent); opacity:.35; }
  .msg-b{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .msg-del{ display:none; margin-top:6px; padding:5px 10px; border-radius:9px; border:1px solid rgba(255,107,91,.5); background:rgba(255,107,91,.14); color:var(--danger); font:700 12px/1 inherit; font-family:inherit; cursor:pointer; }
  .msg-b.me .msg-del{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); color:#fff; }
  .msg-b.sel .msg-del{ display:inline-block; animation:pmUp .25s ease both; }
  .msg-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .msg-clear{ border:0; background:none; color:var(--danger); font:700 12.5px/1 inherit; font-family:inherit; cursor:pointer; padding:6px 4px; }
  .pin-seg{ display:flex; gap:6px; margin-top:8px; }
  .pin-seg button{ flex:1; padding:9px 4px; border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--text); font:700 12.5px/1.1 inherit; font-family:inherit; cursor:pointer; }
  .pin-seg button.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .xfer-warn{ margin:10px 0; padding:10px 12px; border-radius:12px; background:rgba(255,184,77,.14); border:1px solid rgba(255,184,77,.45); font-size:13px; line-height:1.45; }
  .sr-xfer{ color:var(--accent); }
  .staff-login-btn{ display:block; width:100%; margin:-2px 0 12px; padding:11px; border-radius:12px; border:1px solid var(--accent,#3d94ff); background:transparent; color:var(--accent,#3d94ff); font:inherit; font-weight:700; cursor:pointer; }
  .staff-login-btn:hover{ background:var(--accent-soft,rgba(61,148,255,.1)); }
  .acc-cred{ margin-top:12px; padding:12px; border-radius:12px; background:rgba(53,224,174,.12); font-size:13px; line-height:1.7; word-break:break-all; }
  .acc-nick-line{ font-size:12.5px; margin:0 0 10px; color:var(--text-dim); }
  /* ===== PREMIUM ===== */
  @property --pm-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .pm-wrap{ max-width:760px; margin:0 auto; padding:2px 0 28px; position:relative; }
  .pm-anim{ opacity:1; }
  #viewPremium.pm-play .pm-anim{ animation:pmUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 70ms); }
  .pm-hero{ position:relative; overflow:hidden; border-radius:22px; padding:34px 20px 28px; text-align:center; color:#fff;
    background:linear-gradient(120deg,#1b4fd8,#6a3df0,#c04bf0,#2b7bff); background-size:300% 300%; animation:pmGradient 10s ease infinite;
    box-shadow:0 18px 40px rgba(80,70,240,.35); }
  .pm-orb{ position:absolute; border-radius:50%; filter:blur(26px); opacity:.55; animation:pmFloat 8s ease-in-out infinite; }
  .pm-o1{ width:150px; height:150px; background:#4fd1ff; left:-40px; top:-40px; }
  .pm-o2{ width:130px; height:130px; background:#ff7ad9; right:-30px; bottom:-40px; animation-delay:-3s; }
  .pm-o3{ width:90px; height:90px; background:#ffd36b; right:25%; top:-30px; animation-delay:-5s; opacity:.35; }
  .pm-spark{ position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; box-shadow:0 0 12px 3px rgba(255,255,255,.8); animation:pmTwinkle 2.6s ease-in-out infinite; animation-delay:var(--d); }
  .pm-star{ position:relative; width:78px; height:78px; margin:0 auto 14px; display:grid; place-items:center; color:#ffe27a; border-radius:50%;
    background:rgba(255,255,255,.16); backdrop-filter:blur(4px); box-shadow:0 0 0 1px rgba(255,255,255,.3) inset; animation:pmStar 3.2s ease-in-out infinite; }
  .pm-star::before,.pm-star::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(255,255,255,.35); animation:pmRing 2.6s ease-out infinite; }
  .pm-star::after{ animation-delay:1.3s; }
  .pm-star svg{ filter:drop-shadow(0 0 8px rgba(255,226,122,.9)); }
  .pm-title{ position:relative; margin:0; font-size:26px; font-weight:800; letter-spacing:.2px; }
  .pm-title span{ background:linear-gradient(90deg,#fff,#ffe27a,#fff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:pmShine 3.5s linear infinite; }
  .pm-sub{ position:relative; margin:8px 0 14px; opacity:.9; font-size:14px; }
  .pm-cur{ position:relative; display:inline-block; padding:6px 14px; border-radius:999px; font-size:12.5px; background:rgba(255,255,255,.18); }
  .pm-toggle{ position:relative; display:flex; width:max-content; max-width:100%; margin:20px auto 16px; padding:4px; border-radius:999px; background:var(--panel); border:1px solid var(--border); }
  .pm-toggle button{ position:relative; z-index:1; border:0; background:none; color:var(--text-dim); font:inherit; font-weight:700; font-size:14px; padding:9px 18px; border-radius:999px; cursor:pointer; transition:color .25s; display:flex; align-items:center; gap:6px; }
  .pm-toggle button.on{ color:#fff; }
  .pm-toggle em{ font-style:normal; font-size:10.5px; padding:2px 7px; border-radius:999px; background:var(--ok); color:#06281e; animation:pmPulse 2s ease-in-out infinite; }
  .pm-pill{ position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:0; border-radius:999px; background:linear-gradient(90deg,#3d94ff,#8a4dff); box-shadow:0 6px 16px rgba(90,80,240,.4); transition:transform .4s cubic-bezier(.3,1.3,.5,1), width .4s cubic-bezier(.3,1.3,.5,1); }
  .pm-plans{ display:grid; gap:14px; grid-template-columns:1fr; }
  @media(min-width:640px){ .pm-plans{ grid-template-columns:1fr 1.15fr; align-items:stretch; } }
  .pm-plan{ position:relative; border-radius:20px; padding:22px 20px; background:var(--panel); border:1px solid var(--border); }
  .pm-plan-name{ font-weight:800; font-size:15px; color:var(--text-dim); letter-spacing:.6px; text-transform:uppercase; }
  .pm-plan-price{ margin:8px 0 12px; display:flex; align-items:baseline; gap:6px; }
  .pm-plan-price b{ font-family:'Space Mono',monospace; font-size:34px; color:var(--text); }
  .pm-plan-price span{ color:var(--text-dim); font-size:14px; } .pm-plan-price i{ font-style:normal; }
  .pm-note{ font-size:12.5px; color:var(--text-faint); margin:-4px 0 12px; }
  .pm-list{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px; }
  .pm-list li{ position:relative; padding-left:28px; font-size:14px; color:var(--text); }
  .pm-list li::before{ content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--accent-soft); color:var(--accent); }
  .pm-plan-foot{ text-align:center; padding:11px; border-radius:12px; background:var(--panel-2); color:var(--text-faint); font-size:13px; font-weight:700; }
  .pm-pro{ border:2px solid transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box, conic-gradient(from var(--pm-angle),#3d94ff,#a64dff,#ff7ad9,#ffd36b,#35e0ae,#3d94ff) border-box; animation:pmSpin 5s linear infinite; box-shadow:0 14px 34px rgba(110,80,240,.22); }
  .pm-pro .pm-plan-name{ background:linear-gradient(90deg,#3d94ff,#a64dff); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pm-pro .pm-plan-price b{ background:linear-gradient(90deg,#3d94ff,#a64dff); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pm-ribbon{ position:absolute; top:-12px; right:16px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:800; color:#3a2600; background:linear-gradient(90deg,#ffd36b,#ffb020); box-shadow:0 6px 14px rgba(255,176,32,.45); animation:pmBob 2.4s ease-in-out infinite; }
  .pm-cta{ position:relative; overflow:hidden; width:100%; border:0; cursor:pointer; padding:14px; border-radius:14px; font:inherit; font-weight:800; font-size:15px; color:#fff;
    background:linear-gradient(90deg,#3d94ff,#8a4dff,#d24bf0); background-size:200% 100%; animation:pmGradient 5s ease infinite; box-shadow:0 10px 22px rgba(120,80,240,.4); transition:transform .15s, box-shadow .2s; }
  .pm-cta::after{ content:""; position:absolute; top:0; bottom:0; width:60px; left:-80px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:pmSweep 3.2s ease-in-out infinite; }
  .pm-cta:hover{ transform:translateY(-2px); } .pm-cta:active{ transform:scale(.97); }
  .pm-cta:disabled{ filter:grayscale(.6); opacity:.65; cursor:not-allowed; animation:none; } .pm-cta:disabled::after{ display:none; }
  .pm-cta.done{ background:linear-gradient(90deg,#1fbf8f,#35e0ae); animation:none; }
  .pm-cta-light{ background:#fff; color:#4a2bd0; box-shadow:0 10px 22px rgba(0,0,0,.25); animation:none; max-width:320px; }
  .pm-cta-light.done{ background:#d8fff0; color:#087a58; }
  .pm-h{ margin:26px 2px 12px; font-size:17px; font-weight:800; color:var(--text); }
  .pm-feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  @media(min-width:640px){ .pm-feats{ grid-template-columns:repeat(3,1fr); } }
  .pm-feat{ padding:16px 14px; border-radius:16px; background:var(--panel); border:1px solid var(--border); display:grid; gap:4px; transition:transform .25s, border-color .25s, box-shadow .25s; }
  .pm-feat:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 24px rgba(61,148,255,.18); }
  .pm-feat i{ font-style:normal; font-size:22px; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); margin-bottom:6px; }
  .pm-feat b{ font-size:14px; } .pm-feat span{ font-size:12.5px; color:var(--text-dim); line-height:1.4; }
  .pm-table{ border-radius:16px; overflow:hidden; background:var(--panel); border:1px solid var(--border); }
  .pm-tr{ display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:12px 14px; font-size:13.5px; border-top:1px solid var(--border); text-align:center; align-items:center; }
  .pm-tr span:first-child{ text-align:left; color:var(--text); } .pm-tr span{ color:var(--text-dim); }
  .pm-th{ border-top:0; background:var(--panel-2); font-weight:800; } .pm-th span:last-child{ color:var(--accent); }
  .pm-tr .y{ color:var(--ok); font-weight:800; } .pm-tr .n{ color:var(--text-faint); }
  .pm-faq{ display:grid; gap:8px; }
  .pm-faq-item{ border-radius:14px; background:var(--panel); border:1px solid var(--border); overflow:hidden; }
  .pm-faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px; border:0; background:none; color:var(--text); font:inherit; font-weight:700; font-size:14px; text-align:left; cursor:pointer; }
  .pm-faq-q i{ flex:none; width:20px; height:20px; position:relative; transition:transform .35s; }
  .pm-faq-q i::before,.pm-faq-q i::after{ content:""; position:absolute; left:3px; right:3px; top:9px; height:2px; border-radius:2px; background:var(--accent); }
  .pm-faq-q i::after{ transform:rotate(90deg); transition:transform .35s; }
  .pm-faq-item.open .pm-faq-q i{ transform:rotate(180deg); } .pm-faq-item.open .pm-faq-q i::after{ transform:rotate(0); }
  .pm-faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
  .pm-faq-a > p{ overflow:hidden; margin:0; padding:0 14px; font-size:13.5px; color:var(--text-dim); line-height:1.5; transition:padding .35s; }
  .pm-faq-item.open .pm-faq-a{ grid-template-rows:1fr; } .pm-faq-item.open .pm-faq-a > p{ padding:0 14px 14px; }
  .pm-faq-a{ display:grid; } .pm-faq-a > p{ min-height:0; }
  .pm-final{ position:relative; overflow:hidden; margin-top:26px; padding:28px 20px; text-align:center; color:#fff; border-radius:22px; background:linear-gradient(120deg,#1b4fd8,#6a3df0,#c04bf0); background-size:250% 250%; animation:pmGradient 9s ease infinite; box-shadow:0 16px 36px rgba(80,70,240,.3); }
  .pm-final h3{ margin:0 0 6px; font-size:21px; } .pm-final p{ margin:0 0 16px; opacity:.92; font-size:14px; }
  .pm-final .pm-cta{ margin:0 auto; display:block; }
  .pm-confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:90; }
  #viewPremium.pm-play .pm-hero{ animation:pmUp .7s cubic-bezier(.2,.8,.2,1) both, pmGradient 10s ease infinite; }
  #viewPremium.pm-play .pm-pro{ animation:pmUp .7s cubic-bezier(.2,.8,.2,1) both, pmSpin 5s linear infinite; animation-delay:calc(var(--i) * 70ms), 0s; }
  #viewPremium.pm-play .pm-final{ animation:pmUp .7s cubic-bezier(.2,.8,.2,1) both, pmGradient 9s ease infinite; animation-delay:calc(var(--i) * 70ms), 0s; }
  .pm-secure{ margin-top:10px; text-align:center; font-size:12px; color:var(--text-faint); }
  .pm-cta .pm-g{ display:inline-flex; vertical-align:middle; margin-right:8px; background:#fff; border-radius:50%; padding:3px; }
  .pm-cta .pm-g svg{ width:16px; height:16px; display:block; }
  .rpt-lock{ display:flex; align-items:center; gap:10px; justify-content:space-between; margin:0 0 12px; padding:11px 14px; border-radius:14px; background:linear-gradient(90deg,rgba(138,77,255,.16),rgba(61,148,255,.16)); border:1px solid var(--border); font-size:13px; color:var(--text); }
  .rpt-lock button{ flex:none; border:0; cursor:pointer; padding:8px 14px; border-radius:10px; font:inherit; font-weight:800; font-size:13px; color:#fff; background:linear-gradient(90deg,#3d94ff,#8a4dff); }
  @keyframes pmGradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
  @keyframes pmFloat{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,22px)} }
  @keyframes pmStar{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(8deg)} }
  @keyframes pmRing{ 0%{transform:scale(.9);opacity:.8} 100%{transform:scale(1.7);opacity:0} }
  @keyframes pmShine{ to{ background-position:-200% 0; } }
  @keyframes pmTwinkle{ 0%,100%{opacity:.1;transform:scale(.5)} 50%{opacity:1;transform:scale(1.3)} }
  @keyframes pmBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
  @keyframes pmSpin{ to{ --pm-angle:360deg; } }
  @keyframes pmPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
  @keyframes pmSweep{ 0%{left:-80px} 55%,100%{left:120%} }
  @keyframes pmUp{ from{opacity:0;transform:translateY(26px) scale(.97)} to{opacity:1;transform:none} }
  @keyframes pmPop{ 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }
  @media (prefers-reduced-motion: reduce){
    .pm-wrap *, .pm-wrap *::before, .pm-wrap *::after{ animation:none !important; transition:none !important; }
    #viewPremium.pm-play .pm-anim{ animation:none !important; }
  }
  .stn-logo-row{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
  .stn-logo{
    width:84px; height:84px; border-radius:16px; flex-shrink:0; overflow:hidden; background:var(--panel-2);
    border:1px dashed var(--border); display:flex; align-items:center; justify-content:center;
  }
  .stn-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
  .stn-logo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
  .st-back-btn{
    display:inline-block; background:none; border:none; padding:0; margin:0 0 10px; color:var(--accent);
    font-family:inherit; font-weight:800; font-size:13px; cursor:pointer;
  }
  .st-ghost-btn{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); }
  .st-ghost-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .premium-page{ max-width:520px; }

  /* Notification center */
  .notif-modal{ max-width:440px; }
  .notif-actions{ display:flex; gap:8px; margin-bottom:12px; }
  .notif-actions button{
    flex:1; padding:8px 6px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text-dim); font-family:inherit; font-weight:700; font-size:11.5px; cursor:pointer;
  }
  .notif-actions button:hover{ border-color:var(--accent); color:var(--accent); }
  .notif-list{ display:flex; flex-direction:column; gap:8px; }
  .notif-item{
    position:relative; display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
    padding:11px 12px; border-radius:12px; border:1px solid var(--border); background:var(--panel-2);
    font-family:inherit; color:var(--text); cursor:pointer;
  }
  .notif-item:hover{ border-color:var(--accent); }
  .notif-item.unread{ border-color:var(--accent); background:var(--accent-soft); }
  .notif-ico{
    width:34px; height:34px; border-radius:10px; flex-shrink:0; background:var(--panel); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
  }
  .notif-ico svg{ width:17px; height:17px; }
  .notif-ico.reminder{ color:var(--accent); }
  .notif-ico.stock{ color:var(--warn); }
  .notif-ico.meter{ color:var(--ok); }
  .notif-ico.danger{ color:var(--danger); }
  .notif-body{ flex:1; min-width:0; padding-right:12px; }
  .notif-title{ font-size:13px; font-weight:800; }
  .notif-text{ font-size:12px; color:var(--text-dim); margin-top:2px; line-height:1.4; word-break:break-word; }
  .notif-time{ font-size:10.5px; color:var(--text-faint); margin-top:4px; }
  .notif-dot{ position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
  .notif-perm{ margin-top:14px; padding:12px; border-radius:12px; border:1px dashed var(--border); font-size:12px; color:var(--text-dim); line-height:1.5; }
  .st-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr)); gap:14px; align-items:start; }
  .st-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; text-align:left; }
  .st-card-title{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; margin-bottom:14px; }
  .st-card-title svg{ width:17px; height:17px; color:var(--accent); flex-shrink:0; }
  .st-card-title .admin-add-btn{ margin-left:auto; }
  .st-label{ display:block; font-size:11px; font-weight:700; color:var(--text-dim); margin:12px 0 5px; }
  .st-inline{ display:flex; gap:8px; }
  .st-input{
    flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
    padding:10px 12px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--text); outline:none;
  }
  .st-input:focus{ border-color:var(--accent); }
  .st-save-btn{ width:auto; padding:0 16px; font-size:12.5px; flex-shrink:0; }
  .st-wide-btn{ width:100%; padding:11px; font-size:13px; margin-top:12px; }
  .st-profile-head{ display:flex; align-items:center; gap:14px; margin-bottom:4px; }
  .st-avatar{
    width:58px; height:58px; border-radius:50%; flex-shrink:0; font-weight:800; font-size:22px; color:#fff;
    background:linear-gradient(145deg, var(--accent), #1c4fa0); text-transform:uppercase;
    display:flex; align-items:center; justify-content:center;
  }
  .st-profile-row{
    display:flex; align-items:center; gap:14px; width:100%; padding:12px; background:var(--panel-2);
    border:1px solid var(--border); border-radius:14px; font-family:inherit; text-align:left; color:var(--text); cursor:pointer;
  }
  .st-profile-row:hover{ border-color:var(--accent); }
  .st-prow-main{ flex:1; min-width:0; }
  .st-prow-sub{ font-size:11.5px; font-weight:700; color:var(--accent); margin-top:2px; }
  .st-prow-contact{ font-size:11.5px; color:var(--text-dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .st-prow-chev{ width:18px; height:18px; flex-shrink:0; color:var(--text-faint); }
  .pe-photo-row{ display:flex; align-items:center; gap:14px; margin-bottom:4px; }
  .pe-photo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
  .pe-photo-btn{
    padding:8px 14px; border-radius:9px; border:1px solid var(--accent); background:var(--accent-soft);
    color:var(--accent); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer;
  }
  .pe-photo-remove{ background:none; border:none; padding:0; color:var(--danger); font-family:inherit; font-weight:700; font-size:11.5px; cursor:pointer; }
  .pe-input{ width:100%; }
  .pe-input:disabled{ opacity:.6; cursor:not-allowed; }
  .pe-role{
    background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px;
    font-size:13.5px; font-weight:700; color:var(--text-dim);
  }
  .st-pname{ font-size:16px; font-weight:800; margin-bottom:5px; word-break:break-word; }
  .st-role-badge{
    display:inline-block; font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
    border-radius:6px; padding:3px 9px;
  }
  .st-rows{ margin-top:12px; }
  .st-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 2px; border-top:1px solid var(--border); font-size:12.5px;
  }
  .st-row-flat{ border-top:none; padding-bottom:2px; }
  .st-row span{ color:var(--text-dim); font-weight:700; }
  .st-row b{ text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
  .st-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .st-seg button{
    padding:10px 4px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text-dim); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer;
  }
  .st-seg button.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .st-price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .st-price-field label{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text-dim); margin-bottom:4px; }
  .st-price-field label .d{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .st-price-field .st-input{ width:100%; text-align:right; font-family:'Space Mono', monospace; }
  .st-sec-row{ display:flex; align-items:center; gap:12px; }
  .st-sec-icon{
    width:40px; height:40px; border-radius:10px; flex-shrink:0; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .st-sec-icon svg{ width:20px; height:20px; }
  .st-sec-method{ font-size:14px; font-weight:800; }
  .st-logout-btn{
    width:100%; margin-top:14px; padding:11px; border-radius:10px; border:1px solid var(--danger);
    background:transparent; color:var(--danger); font-family:inherit; font-weight:700; font-size:13px; cursor:pointer;
  }
  .st-logout-btn:hover{ background:rgba(255,107,91,.1); }
  .settings-hint-text{ font-size:11.5px; color:var(--text-faint); margin:0; line-height:1.5; }
  @media (max-width:520px){
    .staff-row{ flex-wrap:wrap; }
    .staff-row .sr-actions{ width:100%; flex-wrap:wrap; }
  }
  .premium-card{
    background:linear-gradient(145deg, var(--accent-soft), transparent); border:1px solid var(--accent);
    border-radius:var(--radius-md); padding:16px;
  }
  .premium-card-head{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--text-dim); margin-bottom:12px; }
  .premium-badge{
    font-size:10.5px; font-weight:800; color:var(--accent); background:var(--bg-elev);
    border:1px solid var(--accent); border-radius:20px; padding:3px 10px;
  }
  .premium-benefits{ margin:0 0 16px; padding-left:20px; font-size:12.5px; color:var(--text-dim); line-height:1.9; }
  .premium-upgrade-btn{ width:100%; padding:12px; font-size:13.5px; margin-bottom:10px; }

  .admin-section-title{
    font-size:12px; font-weight:800; color:var(--text-dim); margin:18px 0 10px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .admin-section-title-first{ margin-top:2px; }
  .admin-add-btn{
    width:24px; height:24px; border-radius:7px; border:1px solid var(--accent); background:transparent;
    color:var(--accent); font-size:16px; font-weight:700; line-height:1; cursor:pointer;
  }
  .admin-add-btn:hover{ background:var(--accent-soft); }
  .staff-row{
    display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border);
    border-radius:10px; padding:10px 12px; margin-bottom:8px;
  }
  .staff-row .sr-info{ flex:1; min-width:0; }
  .staff-row .sr-name{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .staff-row .sr-meta{ font-size:10.5px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .staff-row .sr-role-badge{
    font-size:9.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
    border-radius:6px; padding:2px 6px; margin-left:6px; text-transform:none;
  }
  .staff-row .sr-actions{ display:flex; gap:6px; flex-shrink:0; }
  .staff-row .sr-actions button{
    padding:6px 9px; border-radius:8px; border:1px solid var(--border); background:var(--panel);
    color:var(--text-dim); font-family:inherit; font-weight:700; font-size:10.5px; cursor:pointer;
  }
  .staff-row .sr-actions button:hover{ border-color:var(--accent); color:var(--accent); }
  .staff-row .sr-actions button.sr-del:hover{ border-color:var(--danger); color:var(--danger); }
  .admin-perm-row{
    display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border);
    border-radius:10px; padding:10px 12px; margin-bottom:8px;
  }
  .admin-perm-row .apr-name{ flex:1; font-size:13px; font-weight:700; }
  .admin-perm-row .apr-hint{ font-size:10.5px; color:var(--text-faint); }
  .toggle-switch{
    position:relative; width:40px; height:23px; flex-shrink:0; border-radius:20px; background:var(--border);
    border:none; cursor:pointer; transition:background .15s ease;
  }
  .toggle-switch::before{
    content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
    background:#fff; transition:transform .15s ease;
  }
  .toggle-switch.on{ background:var(--accent); }
  .toggle-switch.on::before{ transform:translateX(17px); }

  .stock-chip{
    position:absolute; top:10px; right:10px; z-index:2;
    background:var(--stock-color, var(--accent)); color:#fff;
    font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:20px;
    cursor:default; line-height:1.2; box-shadow:0 2px 6px rgba(0,0,0,.25);
  }

  .stock-panel{
    position:absolute; top:8px; right:8px; z-index:5;
    background:var(--bg-elev); border:1px solid var(--stock-color, var(--accent)); border-radius:12px;
    padding:12px 10px 10px; box-shadow:var(--shadow); width:172px; text-align:left; cursor:default;
  }
  .stock-panel .sp-close{
    position:absolute; top:6px; right:6px; width:20px; height:20px; border:none; background:transparent;
    color:var(--text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .stock-panel .sp-close svg{ width:12px; height:12px; }
  .stock-panel .sp-label{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--text-faint); margin-bottom:4px; }
  .stock-panel .sp-sum{ font-size:12.5px; font-weight:800; color:var(--stock-color, var(--accent)); margin-bottom:9px; }
  .stock-panel .sp-row{ display:flex; gap:6px; }
  .stock-panel input{
    width:100%; min-width:0; background:var(--panel-2); border:1px solid var(--accent); border-radius:7px;
    padding:6px 6px; font-family:'Space Mono', monospace; font-size:13px; color:var(--text); font-weight:700; text-align:center;
  }
  .stock-panel .stock-inline-save, .stock-panel .stock-inline-cancel{
    width:26px; height:26px; flex-shrink:0; border-radius:7px; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .stock-panel .stock-inline-save{ background:var(--ok); color:#06251c; }
  .stock-panel .stock-inline-cancel{ background:var(--panel-2); color:var(--text-dim); border:1px solid var(--border); }
  .stock-panel .stock-inline-save svg, .stock-panel .stock-inline-cancel svg{ width:13px; height:13px; }

  .fuel-btn{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:26px 14px; cursor:pointer; text-align:center; color:var(--text);
    display:flex; flex-direction:column; align-items:center; gap:12px;
    transition:transform .12s ease, border-color .12s ease, background .12s ease;
    font-family:inherit; position:relative; overflow:visible;
  }
  .fuel-btn:active{ transform:scale(.97); }
  .fuel-btn:hover{ border-color:var(--fuel-color); background:var(--panel-2); }
  .fuel-icon{
    width:56px; height:56px; border-radius:50%;
    background:var(--fuel-soft); display:flex; align-items:center; justify-content:center;
  }
  .fuel-icon svg{ width:26px; height:26px; stroke:var(--fuel-color); }
  .fname-row{ display:flex; align-items:center; justify-content:center; }
  .fuel-btn .fname{ font-weight:800; font-size:15px; }
  .fuel-btn .fprice-mini{
    font-size:12.5px; color:var(--text-dim); display:inline-flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:20px; border:1px dashed var(--border); cursor:pointer;
  }
  .fuel-btn .fprice-mini:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
  .fuel-btn .fprice-mini .pencil-hint{ width:11px; height:11px; opacity:.7; flex-shrink:0; }
  .fuel-btn .price-inline{ margin-top:0; cursor:default; }

  .section-title{ font-size:13px; font-weight:800; color:var(--text-dim); margin:26px 2px 12px; letter-spacing:.2px; }
  .tx-section-title{ margin-top:40px; padding-top:22px; border-top:1px dashed var(--border); }

  /* Recent list on home */
  .recent-list{ display:flex; flex-direction:column; gap:8px; }
  .recent-row{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:12px 14px; display:flex; align-items:center; gap:12px;
  }
  .recent-dot{ width:10px; height:10px; border-radius:50%; background:var(--fuel-color); flex-shrink:0; margin-top:2px; align-self:flex-start; }
  .recent-row .rt-fuel-stack{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .recent-row .rt-fuel{ font-weight:700; font-size:13.5px; min-width:0; display:flex; align-items:center; gap:6px; }
  .recent-row .rt-fuel-name{ white-space:nowrap; }
  .recent-row .rt-time{ font-size:12px; color:var(--text-faint); align-self:flex-start; }
  .recent-row .rt-val{ text-align:right; align-self:flex-start; }
  .recent-row .rt-val .l{ font-size:13px; }
  .recent-row .rt-val .s{ font-size:11px; color:var(--text-dim); }
  .empty-hint{ color:var(--text-faint); font-size:13px; padding:18px 4px; text-align:center; }

  /* Reports view */
  .calendar-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; }
  .calendar-card.standalone-calendar{ margin-bottom:18px; }
  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .cal-head .cal-title{ font-weight:800; font-size:14.5px; }
  .cal-nav-btn{
    width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .cal-nav-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .cal-weekdays, .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .cal-weekdays div{ text-align:center; font-size:11px; color:var(--text-faint); font-weight:700; padding-bottom:3px; }
  .cal-day{
    position:relative; height:30px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; font-size:13px; cursor:pointer; color:var(--text); border:1px solid transparent;
    background:transparent;
  }
  .cal-day.pad{ visibility:hidden; cursor:default; }
  .cal-day:hover:not(.pad){ background:var(--panel-2); }
  .cal-day.today{ border-color:var(--accent); }
  .cal-day.selected{ background:var(--accent); color:#fff; font-weight:800; }
  .cal-day .dot{ position:absolute; bottom:2px; width:4px; height:4px; border-radius:50%; background:var(--ok); }
  .cal-day.selected .dot{ background:#fff; }
  .cal-jump-today{
    margin-top:8px; width:100%; padding:7px; border-radius:9px; border:1px dashed var(--border);
    background:transparent; color:var(--text-dim); font-family:inherit; font-size:12.5px; cursor:pointer; font-weight:700;
  }
  .cal-jump-today:hover{ color:var(--accent); border-color:var(--accent); }

  .report-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; min-height:200px; }
  .report-date-title{ font-size:17px; font-weight:800; margin:0 0 2px; }
  .report-date-sub{ font-size:12.5px; color:var(--text-dim); margin:0 0 16px; }

  /* Meter (hisoblagich) view */
  .meter-day-nav{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .meter-day-title{ font-weight:800; font-size:15px; flex:1; text-align:center; }
  .meter-today-btn{ width:auto; margin-top:0; padding:8px 14px; }
  #meterCards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:start; }
  @media (max-width:520px){ #meterCards{ grid-template-columns:1fr; } }
  .meter-card{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:14px; position:relative; overflow:hidden;
  }
  .meter-card::before{
    content:''; position:absolute; left:0; top:0; right:0; height:3px; background:var(--mfuel-color, var(--accent));
  }
  .meter-card .mc-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .meter-card .mc-dot{ width:9px; height:9px; border-radius:50%; background:var(--mfuel-color, var(--accent)); flex-shrink:0; }
  .meter-card .mc-name{ font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .meter-readings{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px; }
  .meter-field label{ display:block; font-size:10.5px; font-weight:700; color:var(--text-dim); margin-bottom:5px; }
  .meter-field input{
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:9px;
    padding:9px 10px; font-family:'Space Mono', monospace; font-size:13px; color:var(--text); outline:none;
  }
  .meter-field input:focus{ border-color:var(--accent); }
  .meter-field .mf-hint{ font-size:10px; color:var(--text-faint); margin-top:4px; }
  .meter-save-btn{
    width:100%; padding:9px; border-radius:9px; border:none; background:var(--panel-2); color:var(--text-dim);
    border:1px solid var(--border); font-family:inherit; font-weight:700; font-size:11.5px; cursor:pointer; margin-bottom:14px;
  }
  .meter-save-btn:hover{ color:var(--accent); border-color:var(--accent); }

  .delivery-section{ border-top:1px solid var(--border); padding-top:12px; margin-bottom:12px; }
  .delivery-section .ds-label{ font-size:10.5px; font-weight:700; color:var(--text-dim); margin-bottom:8px; }
  .delivery-list{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
  .delivery-row{
    display:flex; align-items:center; justify-content:space-between; background:var(--panel-2);
    border-radius:7px; padding:6px 6px 6px 9px; font-size:11px; gap:8px;
  }
  .delivery-row .dr-time{ color:var(--text-faint); font-family:'Space Mono', monospace; flex-shrink:0; }
  .delivery-row .dr-vals{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  .delivery-row .dr-vals .num:last-child{ font-size:9.5px; color:var(--text-faint); font-weight:700; }
  .dr-delete{
    width:20px; height:20px; flex-shrink:0; border-radius:6px; border:none; background:transparent;
    color:var(--text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .dr-delete:hover{ color:var(--danger); background:rgba(255,107,91,.12); }
  .dr-delete svg{ width:12px; height:12px; }
  .delivery-empty{ font-size:11px; color:var(--text-faint); padding:2px 0 8px; }
  .delivery-add-row{ display:flex; flex-direction:column; gap:6px; }
  .delivery-add-fields{ display:flex; gap:6px; }
  .delivery-add-row input{
    flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--border); border-radius:8px;
    padding:8px 9px; font-family:'Space Mono', monospace; font-size:12px; color:var(--text); outline:none;
  }
  .delivery-add-row button{
    padding:8px 12px; border-radius:8px; border:none; background:var(--panel-2); color:var(--accent);
    border:1px solid var(--accent); font-weight:700; font-size:11.5px; cursor:pointer; font-family:inherit;
  }

  .meter-compare{ border-top:1px solid var(--border); padding-top:12px; }
  .mcmp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .mcmp-cols-single{ grid-template-columns:1fr; }
  .mcmp-col{ background:var(--panel-2); border-radius:9px; padding:8px 9px; min-width:0; }
  .mcmp-label{ font-size:9.5px; font-weight:700; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
  .mcmp-sum{ font-size:13px; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mcmp-l{ font-size:10.5px; color:var(--text-dim); margin-top:1px; }
  .mcmp-diff{
    display:flex; align-items:center; justify-content:space-between; margin-top:8px;
    padding:9px 10px; border-radius:9px; font-size:11.5px; font-weight:800;
    background:var(--panel-2); border:1px solid var(--border); color:var(--ok); gap:6px;
  }
  .mcmp-diff > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mcmp-diff-vals{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex-shrink:0; }
  .mcmp-diff-vals .num{ white-space:nowrap; }
  .mcmp-diff-vals .num:last-child{ font-size:10px; font-weight:700; opacity:.8; }
  .mcmp-diff.bad{ background:rgba(255,107,91,.12); border-color:var(--danger); color:var(--danger); }
  .mcmp-diff.pending{ background:var(--panel-2); border-color:var(--border); color:var(--text-faint); font-weight:700; }

  .day-prices{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .day-price-chip{
    display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--border);
    border-radius:20px; padding:6px 12px; font-size:12px;
  }
  .day-price-chip .chip-dot{ width:8px; height:8px; border-radius:50%; }
  .day-price-chip .num{ font-size:12px; }

  .tx-filter-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .tx-filter-chip{
    display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--border);
    border-radius:20px; padding:7px 13px; font-size:12.5px; font-weight:700; color:var(--text-dim);
    cursor:pointer; font-family:inherit; transition:.12s;
  }
  .tx-filter-chip .chip-dot{ width:7px; height:7px; border-radius:50%; }
  .tx-filter-chip:hover{ border-color:var(--chip-color, var(--accent)); color:var(--text); }
  .tx-filter-chip.active{ background:var(--chip-color, var(--accent)); border-color:var(--chip-color, var(--accent)); color:#fff; }
  .tx-filter-chip.active .chip-dot{ background:#fff !important; }

  .tx-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
  .tx-row{
    display:grid; grid-template-columns:56px 1fr auto auto; gap:10px; align-items:center;
    padding:9px 10px; border-radius:9px; background:var(--panel-2);
  }
  .tx-list-multiday .tx-row{ grid-template-columns:auto 1fr auto auto; }
  .tx-row .tx-time{ font-size:12px; color:var(--text-faint); font-family:'Space Mono', monospace; }
  .tx-row .tx-fuel{ display:flex; align-items:flex-start; gap:8px; font-size:13px; font-weight:600; min-width:0; }
  .tx-row .tx-fuel .d{ width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
  .tx-row .tx-fuel-stack{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .tx-row .tx-fuel-main{ display:flex; align-items:center; gap:6px; min-width:0; }
  .tx-row .tx-fuel-name{ white-space:nowrap; }
  .tx-row .tx-liters{ font-size:13px; color:var(--text-dim); text-align:right; white-space:nowrap; }
  .tx-row .tx-sum{ font-size:13px; font-weight:700; text-align:right; white-space:nowrap; }

  .subtotals{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
  @media (max-width:640px){ .subtotals{ grid-template-columns:repeat(2,1fr); } }
  .report-subhead{ font-size:12px; font-weight:800; color:var(--text-dim); margin:0 0 10px; }

  /* Date-based sales split: retail vs organizations tables, side by side */
  .date-split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px; }
  @media (max-width:640px){ .date-split-grid{ grid-template-columns:1fr; } }
  .payment-split-grid{ margin-top:6px; }
  .daily-group-card{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:18px; margin-bottom:26px;
  }
  .daily-group-card .period-picker-row{ background:var(--panel-2); }
  .daily-group-card #dailyTotalBand{ margin-top:2px; }
  .period-picker-row{
    display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px;
  }
  .period-picker-field{ display:flex; flex-direction:column; gap:6px; }
  .period-picker-field label{ font-size:11.5px; font-weight:700; color:var(--text-dim); }
  .period-picker-input{
    background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:9px 10px;
    font-family:inherit; font-size:13px; color:var(--text); outline:none;
  }
  .period-picker-input:focus{ border-color:var(--accent); }
  .period-picker-btn{
    background:var(--accent); color:#fff; border:none; border-radius:8px; padding:10px 18px;
    font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  }
  .period-picker-btn:hover{ filter:brightness(1.08); }

  .range-field{ position:relative; }
  .range-input{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:8px;
    padding:9px 11px; font-size:13px; color:var(--text); cursor:pointer; min-width:230px;
  }
  .range-input:hover{ border-color:var(--accent); }
  .range-input.active{ border-color:var(--accent); }
  .range-input svg{ width:15px; height:15px; color:var(--text-faint); flex-shrink:0; }
  .range-input .num{ font-family:'Space Mono', monospace; }
  .range-popover{
    position:absolute; top:calc(100% + 6px); left:0; z-index:60;
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:14px; box-shadow:var(--shadow); display:flex; gap:18px; flex-wrap:wrap;
  }
  .range-month-panel{ width:216px; }
  .range-month-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .range-month-title{ font-size:12.5px; font-weight:800; }
  .range-nav-btn{
    width:24px; height:24px; border-radius:6px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px;
  }
  .range-nav-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .range-nav-btn.spacer{ visibility:hidden; cursor:default; }
  .range-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:3px; }
  .range-weekdays div{ text-align:center; font-size:9.5px; color:var(--text-faint); font-weight:700; }
  .range-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .range-day{
    aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    font-size:11.5px; cursor:pointer; color:var(--text); border-radius:6px; position:relative;
  }
  .range-day.pad{ visibility:hidden; cursor:default; }
  .range-day:hover:not(.pad){ background:var(--panel-2); }
  .range-day.today{ border:1px solid var(--accent); }
  .range-day.in-range{ background:var(--accent-soft); border-radius:0; }
  .range-day.range-start{ background:var(--accent); color:#fff; font-weight:800; border-radius:6px 0 0 6px; }
  .range-day.range-end{ background:var(--accent); color:#fff; font-weight:800; border-radius:0 6px 6px 0; }
  .range-day.range-start.range-end{ border-radius:6px; }
  @media (max-width:520px){ .range-popover{ flex-direction:column; } .range-month-panel{ width:100%; } }
  .check-sub{ margin:0 2px 12px; font-size:12px; color:var(--text-dim); }
  .check-table-wrap{
    overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel);
  }
  .check-table{ width:100%; border-collapse:collapse; }
  .check-table th, .check-table td{ padding:10px 10px; text-align:right; white-space:nowrap; }
  .check-table th:nth-child(1), .check-table td:nth-child(1){ text-align:center; width:34px; color:var(--text-faint); }
  .check-table th:nth-child(2), .check-table td:nth-child(2){ text-align:left; }
  .check-table thead th{
    font-size:10.5px; font-weight:800; color:var(--text-dim); border-bottom:1px solid var(--border);
    text-transform:uppercase; letter-spacing:.3px;
  }
  .check-table tbody tr{ border-bottom:1px solid var(--border); }
  .check-table tbody tr:last-child{ border-bottom:none; }
  .check-table td{ font-size:12.5px; font-weight:700; }
  .check-table .ct-name{ display:flex; align-items:center; gap:8px; }
  .check-table .ct-name .d{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .check-input{
    width:120px; text-align:right; background:var(--panel-2); border:1px solid var(--border); border-radius:8px;
    padding:8px 9px; font-family:'Space Mono', monospace; font-size:12.5px; color:var(--text); outline:none;
  }
  .check-input:focus{ border-color:var(--accent); }
  .check-diff{ color:var(--text-faint); }
  .check-diff.ok{ color:var(--ok); }
  .check-diff.bad{ color:var(--danger); }
  .check-table tfoot td{ font-weight:800; border-top:2px solid var(--border); padding-top:12px; background:var(--panel-2); }
  .check-apps-title{ font-size:13px; font-weight:800; color:var(--text-dim); margin:26px 2px 4px; }
  .check-app{ margin-top:14px; }
  .check-app-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; margin:0 2px 8px; }
  .check-app-title .d{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  @media (max-width:520px){
    .check-table th, .check-table td{ padding:9px 4px; }
    .check-table thead th{ white-space:normal; font-size:9px; line-height:1.25; letter-spacing:0; }
    .check-table td{ font-size:11px; }
    .check-table td.num, .check-table .num{ letter-spacing:0; }
    .check-table .ct-name{ gap:5px; }
    .check-table .ct-name .d{ width:7px; height:7px; }
    .check-input{ width:78px; padding:7px 5px; font-size:11px; letter-spacing:0; }
    .check-table th:nth-child(1), .check-table td:nth-child(1){ width:16px; padding-left:6px; padding-right:0; }
  }
  .check-save-btn{ width:auto; padding:12px 28px; margin-top:14px; font-size:13.5px; }

  /* Notes */
  .note-list{ display:flex; flex-direction:column; gap:8px; padding-bottom:70px; }
  .note-card{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
    overflow:hidden;
  }
  .note-row-head{
    display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px;
    background:transparent; border:none; font-family:inherit; text-align:left; cursor:pointer; color:var(--text);
  }
  .note-row-head:hover{ background:var(--panel-2); }
  .note-row-main{ flex:1; min-width:0; }
  .note-title{ font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .note-row-meta{ font-size:10.5px; color:var(--text-faint); margin-top:2px; }
  .note-chevron{ width:16px; height:16px; flex-shrink:0; color:var(--text-faint); transition:transform .15s ease; }
  .note-card.open .note-chevron{ transform:rotate(180deg); }
  .note-detail{ padding:0 14px 14px; }
  .note-img-btn{
    flex-shrink:0; width:32px; height:32px; border-radius:9px; border:1px solid var(--border);
    background:var(--panel-2); color:var(--accent); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .note-img-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .note-img-btn svg{ width:16px; height:16px; }
  .note-row-head:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

  /* Full-size image viewer */
  #noteImageOverlay.note-viewer{ background:rgba(0,0,0,.94); backdrop-filter:none; z-index:70; padding:12px; cursor:zoom-out; }
  .note-viewer img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
  .note-viewer-close{
    position:fixed; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:none;
    background:rgba(255,255,255,.16); color:#fff; font-size:16px; cursor:pointer; z-index:71;
  }
  .note-text{ font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
  .note-meta{
    display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
    padding-top:10px; border-top:1px solid var(--border);
  }
  .note-meta-info{ font-size:11px; color:var(--text-faint); }
  .note-meta-info b{ color:var(--text-dim); font-weight:700; }
  .note-del-btn{
    flex-shrink:0; width:26px; height:26px; border-radius:7px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .note-del-btn:hover{ color:var(--danger); border-color:var(--danger); }
  .note-del-btn svg{ width:13px; height:13px; }

  /* Floating action buttons */
  .note-fab-row{
    position:fixed; right:22px; bottom:26px; display:flex; align-items:center; gap:12px; z-index:40;
  }
  .note-fab{
    width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  }
  .note-fab svg{ width:22px; height:22px; }
  .note-fab-calc{ background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); }
  .note-fab-calc:hover{ color:var(--accent); border-color:var(--accent); }
  .note-fab-add{ background:var(--accent); color:#fff; }
  .note-fab-add:hover{ filter:brightness(1.08); }
  @media (min-width:881px){ .note-fab-row{ right:40px; bottom:34px; } }

  /* Add-note modal */
  .note-title-input{
    width:100%; background:var(--panel-2); border:1px solid var(--border);
    border-radius:10px; padding:11px 12px; font-family:inherit; font-weight:700; font-size:13.5px; color:var(--text); outline:none;
    margin-bottom:8px;
  }
  .note-title-input:focus{ border-color:var(--accent); }
  .note-textarea{
    width:100%; resize:vertical; min-height:80px; background:var(--panel-2); border:1px solid var(--border);
    border-radius:10px; padding:11px 12px; font-family:inherit; font-size:13.5px; color:var(--text); outline:none;
    margin-bottom:10px;
  }
  .note-textarea:focus{ border-color:var(--accent); }
  .note-attach-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:11px; border-radius:10px; border:1px dashed var(--border); background:var(--panel-2);
    color:var(--text-dim); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer; margin-bottom:12px;
  }
  .note-attach-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .note-attach-btn svg{ width:16px; height:16px; }
  .note-image-preview-wrap{ position:relative; margin-bottom:12px; }
  .note-image-preview{ width:100%; max-height:220px; object-fit:cover; border-radius:10px; display:block; }
  .note-image-remove{
    position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; border:none;
    background:rgba(10,20,32,.72); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .note-add-btn{ width:100%; padding:12px; font-size:13.5px; }
  #noteReminderOverlay{ z-index:60; }
  .note-remind-row{ margin-bottom:12px; }
  .note-remind-label{
    display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:6px;
  }
  .note-remind-label svg{ width:14px; height:14px; color:var(--accent); }
  .note-remind-input{
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px;
    font-family:inherit; font-size:13.5px; font-weight:700; color:var(--text); outline:none; color-scheme:dark;
  }
  :root[data-theme="light"] .note-remind-input{ color-scheme:light; }
  @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .note-remind-input{ color-scheme:light; } }
  .note-remind-input:focus{ border-color:var(--accent); }
  .note-remind-line{
    display:flex; align-items:center; gap:5px; margin-top:3px; font-size:10.5px; font-weight:700; color:var(--accent);
  }
  .note-remind-line svg{ width:11px; height:11px; flex-shrink:0; }
  .note-remind-line.done{ color:var(--text-faint); }
  .note-reminder-list{ display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow-y:auto; margin-bottom:16px; text-align:left; }
  .note-reminder-item{ background:var(--panel-2); border:1px solid var(--accent); border-radius:12px; padding:12px 14px; }
  .nri-title{ font-size:14px; font-weight:800; margin-bottom:4px; }
  .nri-text{ font-size:13px; line-height:1.5; color:var(--text-dim); white-space:pre-wrap; word-break:break-word; max-height:120px; overflow-y:auto; }
  .nri-time{ margin-top:8px; font-size:10.5px; font-weight:700; color:var(--accent); }

  /* Calculator — a floating, draggable panel rather than a blocking modal */
  #calcOverlay{
    background:transparent; backdrop-filter:none; pointer-events:none;
    align-items:flex-start; justify-content:flex-start; padding:0;
  }
  .calc-modal{
    max-width:300px !important; position:fixed; right:22px; bottom:92px; pointer-events:none;
    transform:none; cursor:default;
  }
  #calcOverlay.show .calc-modal{ transform:none; pointer-events:auto; }
  .calc-drag-handle{ cursor:grab; user-select:none; touch-action:none; }
  .calc-drag-handle:active{ cursor:grabbing; }
  .calc-display{
    background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:18px 16px;
    text-align:right; font-family:'Space Mono', monospace; font-size:30px; font-weight:700; color:var(--text);
    margin-bottom:12px; overflow-x:auto; white-space:nowrap;
  }
  .calc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  .calc-btn{
    padding:16px 0; border-radius:12px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text); font-family:inherit; font-weight:700; font-size:16px; cursor:pointer;
  }
  .calc-btn:hover{ background:var(--panel); }
  .calc-btn-fn{ color:var(--accent); background:var(--accent-soft); border-color:transparent; }
  .calc-btn-op{ color:var(--accent); font-size:18px; }
  .calc-btn-eq{ background:var(--accent); color:#fff; border-color:transparent; }
  .calc-btn-eq:hover{ filter:brightness(1.08); }
  .calc-btn-wide{ grid-column:span 2; }

  .payment-fuel-table-wrap{
    overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel);
  }
  .payment-fuel-table{ width:100%; border-collapse:collapse; }
  .payment-fuel-table th, .payment-fuel-table td{ padding:10px 14px; text-align:right; white-space:nowrap; }
  .payment-fuel-table th:first-child, .payment-fuel-table td:first-child{ text-align:left; }
  .payment-fuel-table thead th{
    font-size:11px; font-weight:800; color:var(--text-dim); border-bottom:1px solid var(--border);
    text-transform:uppercase; letter-spacing:.3px;
  }
  .payment-fuel-table tbody tr{ border-bottom:1px solid var(--border); }
  .payment-fuel-table tbody tr:last-child{ border-bottom:none; }
  .pft-row-label{ font-size:12.5px; font-weight:700; }
  .pft-l{ font-size:11px; color:var(--text-dim); }
  .pft-s{ font-size:12.5px; font-weight:700; margin-top:1px; }
  .pft-empty{ color:var(--text-faint); font-size:13px; }
  .payment-fuel-table tfoot td{ font-weight:800; border-top:2px solid var(--border); padding-top:12px; }
  .payment-fuel-table tfoot .pft-row-label{ font-size:13px; }
  .payment-fuel-table tfoot .pft-s{ color:var(--accent); font-size:13.5px; }
  .payment-fuel-table .pft-jami-col{ border-left:2px solid var(--border); background:var(--panel-2); }
  .payment-fuel-table .pft-jami-col .pft-s{ color:var(--accent); }
  .payment-fuel-table thead .pft-jami-col{ background:transparent; }
  .today-split-col{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px 12px 4px;
  }
  .tsc-title{ font-size:12px; font-weight:800; color:var(--text-dim); margin-bottom:6px; }
  .tsc-rows{ display:grid; grid-template-columns:10px 1fr auto auto; column-gap:8px; align-items:center; }
  .tsc-row{ display:contents; }
  .tsc-dot, .tsc-name, .tsc-l, .tsc-s{ padding:5px 0; border-bottom:1px solid var(--border); }
  .tsc-row:last-child .tsc-dot,
  .tsc-row:last-child .tsc-name,
  .tsc-row:last-child .tsc-l,
  .tsc-row:last-child .tsc-s{ border-bottom:none; }
  .tsc-dot{ width:8px; height:8px; border-radius:50%; align-self:center; }
  .tsc-name{ font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tsc-l{ font-size:11.5px; color:var(--text-dim); white-space:nowrap; text-align:right; }
  .tsc-s{ font-size:12px; font-weight:700; white-space:nowrap; text-align:right; margin-left:10px; }
  .tsc-total-row .tsc-name,
  .tsc-total-row .tsc-l,
  .tsc-total-row .tsc-s{
    border-top:1px solid var(--border); border-bottom:none; padding-top:7px; margin-top:1px;
    font-weight:800; color:var(--text);
  }
  .tsc-total-row .tsc-s{ color:var(--accent); font-size:12.5px; }

  .subtotal-card{ background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; }
  .subtotal-card .st-name{ font-size:11.5px; color:var(--text-dim); font-weight:700; display:flex; align-items:center; gap:6px; }
  .subtotal-card .st-name .d{ width:7px; height:7px; border-radius:50%; }
  .subtotal-card .st-s{ font-size:17px; font-weight:800; margin-top:6px; }
  .subtotal-card .st-l{ font-size:12px; color:var(--text-dim); font-weight:400; margin-top:2px; }

  .fuel-compare-card{ background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; }
  .fuel-compare-card .st-name{ font-size:11.5px; color:var(--text-dim); font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
  .fuel-compare-card .st-name .d{ width:7px; height:7px; border-radius:50%; }
  .fuel-compare-card .mcmp-col{ background:var(--panel); }

  .grand-total{
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(135deg, var(--accent-soft), transparent);
    border:1px solid var(--accent); border-radius:var(--radius-md); padding:16px 18px;
  }
  .daily-compare-cols{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
    background:linear-gradient(135deg, var(--accent-soft), transparent);
    border:1px solid var(--accent); border-radius:var(--radius-md); padding:16px 18px;
  }
  .daily-compare-col{ min-width:0; }
  .daily-compare-col:last-child{ text-align:right; }
  .dcc-label{ font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:6px; }
  .dcc-sum{ font-size:22px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dcc-l{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
  .daily-compare-diff{
    display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px;
    padding:11px 14px; border-radius:var(--radius-md); font-size:13px; font-weight:800;
    background:var(--panel-2); border:1px solid var(--border); color:var(--ok);
  }
  .daily-compare-diff.bad{ background:rgba(255,107,91,.12); border-color:var(--danger); color:var(--danger); }
  .dcd-vals{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  .dcd-vals .num:last-child{ font-size:11.5px; font-weight:700; opacity:.8; }
  #dailyTotalBand{ margin-bottom:18px; }
  #dailyFuelSubtotals.subtotals{ margin-bottom:26px; grid-template-columns:repeat(2,1fr); }
  @media (max-width:640px){ #dailyFuelSubtotals.subtotals{ grid-template-columns:1fr; } }
  .grand-total .gt-label{ font-size:13px; font-weight:700; color:var(--text-dim); }
  .grand-total .gt-vals{ text-align:right; }
  .grand-total .gt-sum{ font-size:22px; }
  .grand-total .gt-liters{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }

  /* Modal */
  .overlay{
    position:fixed; inset:0; background:rgba(3,9,16,.6); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;
    opacity:0; pointer-events:none; transition:opacity .15s ease;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-lg);
    width:100%; max-width:380px; padding:22px; box-shadow:var(--shadow);
    transform:translateY(8px) scale(.98); transition:transform .15s ease;
  }
  .overlay.show .modal{ transform:translateY(0) scale(1); }
  .modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .modal-head .mfuel-icon{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .modal-head .mfuel-icon svg{ width:20px; height:20px; }
  .modal-head h3{ margin:0; font-size:16px; font-weight:800; }
  .modal-head p{ margin:2px 0 0; font-size:12.5px; color:var(--text-dim); }
  .close-x{ margin-left:auto; width:28px; height:28px; border-radius:8px; border:none; background:var(--panel-2); color:var(--text-dim); cursor:pointer; }

  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:6px; }
  .field .input-wrap{ position:relative; }
  .field input{
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
    padding:13px 46px 13px 14px; font-size:18px; color:var(--text); font-family:'Space Mono', monospace;
    outline:none;
  }
  .field input:focus{ border-color:var(--accent); }
  .field .unit{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-faint); font-family:'Manrope'; }
  .swap-hint{ text-align:center; font-size:11.5px; color:var(--text-faint); margin:2px 0 16px; }

  #stockPassOverlay .field input{
    font-size:14px; font-family:inherit; padding:12px 13px; text-align:left;
  }
  .auth-error{ color:var(--danger); font-size:12.5px; font-weight:700; margin:0 0 14px; text-align:left; }

  .step-payment-summary{
    text-align:center; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
    padding:12px; margin-bottom:14px; font-size:15px; font-weight:800;
  }
  .step-payment-hint{ text-align:center; font-size:12.5px; color:var(--text-dim); font-weight:700; margin:0 0 14px; }
  .payment-method-row-big{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
  .payment-method-btn-big{
    display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 8px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:12px; cursor:pointer;
    color:var(--text); font-family:inherit; font-size:12.5px; font-weight:700; transition:.12s;
  }
  .payment-method-btn-big:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .payment-method-btn-big:focus{ outline:none; border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 3px var(--accent-soft); }
  .payment-method-btn-big:focus-visible{ outline:none; border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 3px var(--accent-soft); }

  .qr-provider-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .qr-provider-btn{
    display:flex; align-items:center; gap:10px; padding:12px; background:var(--panel-2);
    border:1px solid var(--border); border-radius:12px; cursor:pointer; color:var(--text);
    font-family:inherit; font-size:13px; font-weight:700; text-align:left; transition:.12s;
  }
  .qr-provider-btn:hover{ border-color:var(--qrp-color, var(--accent)); background:var(--accent-soft); }
  .qr-provider-btn:focus{ outline:none; border-color:var(--qrp-color, var(--accent)); box-shadow:0 0 0 3px var(--accent-soft); }
  .qr-provider-btn:focus-visible{ outline:none; border-color:var(--qrp-color, var(--accent)); box-shadow:0 0 0 3px var(--accent-soft); }
  .qr-provider-btn .qrp-avatar{
    width:32px; height:32px; border-radius:9px; background:var(--qrp-color, var(--accent)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;
  }

  .morning-price-grid{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
  .morning-price-row{ display:flex; align-items:center; gap:10px; }
  .morning-price-row .mp-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .morning-price-row label{ flex:1; font-size:13px; font-weight:700; }
  .morning-price-row input{
    width:130px; background:var(--panel-2); border:1px solid var(--border); border-radius:9px;
    padding:10px 11px; font-family:'Space Mono', monospace; font-size:14px; color:var(--text); text-align:right;
  }
  .morning-price-row input:focus{ border-color:var(--accent); }
  .payment-method-btn-big svg{ width:24px; height:24px; }
  .payment-method-btn-big .pmb-icon-wrap{
    width:44px; height:44px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }

  .modal-actions{ display:flex; gap:10px; margin-top:6px; }
  .btn{
    flex:1; padding:13px; border-radius:10px; border:none; font-family:inherit; font-weight:800;
    font-size:14px; cursor:pointer; transition:.12s;
  }
  .btn-primary{ background:var(--accent); color:#fff; }
  .btn-primary:hover{ filter:brightness(1.08); }
  .btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
  .btn-ghost{ background:var(--panel-2); color:var(--text-dim); border:1px solid var(--border); }
  .btn-ghost:hover{ color:var(--text); }

  /* Inline per-tile price editing */
  .price-inline{ display:flex; align-items:center; gap:6px; margin-top:8px; }
  .price-inline input{
    width:100%; min-width:0; background:var(--panel-2); border:1px solid var(--accent); border-radius:8px;
    padding:8px 8px; font-family:'Space Mono', monospace; font-size:15px; color:var(--text); font-weight:700;
  }
  .price-inline-save, .price-inline-cancel{
    width:30px; height:30px; flex-shrink:0; border-radius:8px; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .price-inline-save{ background:var(--ok); color:#06251c; }
  .price-inline-cancel{ background:var(--panel-2); color:var(--text-dim); border:1px solid var(--border); }
  .price-inline-save svg, .price-inline-cancel svg{ width:14px; height:14px; }

  /* Organizations modal */
  .org-add-row{ display:flex; gap:8px; margin-bottom:14px; }
  .org-add-row input{
    flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
    padding:11px 12px; font-size:14px; color:var(--text); font-family:inherit; outline:none;
  }
  .org-add-row input:focus{ border-color:var(--accent); }
  .org-add-row button{
    flex:0 0 auto; padding:0 16px; border-radius:10px; border:none; background:var(--accent); color:#fff;
    font-weight:800; font-size:13px; cursor:pointer; font-family:inherit;
  }
  .org-list{ display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; }
  .org-row{
    display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border);
    border-radius:10px; padding:12px 14px; cursor:pointer; transition:.12s; text-align:left; width:100%;
  }
  .org-row:hover{ border-color:var(--accent); }
  .org-row .org-avatar{
    width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0;
  }
  .org-row .org-info{ flex:1; min-width:0; }
  .org-row .org-name{ font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .org-row .org-totals{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
  .org-row .org-totals-all{ color:var(--text-faint); }
  .org-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .org-summary-card{
    background:linear-gradient(135deg, var(--accent-soft), transparent);
    border:1px solid var(--accent); border-radius:10px; padding:12px 14px;
  }
  .org-summary-card .osc-label{ font-size:11px; font-weight:700; color:var(--text-dim); }
  .org-summary-card .osc-sum{ font-size:16px; margin-top:5px; }
  .org-summary-card .osc-l{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
  .org-row .org-chevron{ color:var(--text-faint); flex-shrink:0; }
  .org-empty{ text-align:center; color:var(--text-faint); font-size:13px; padding:20px 4px; }

  .org-fuel-pick-header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .org-fuel-pick-header .ofp-title{ font-weight:800; font-size:14.5px; }
  .org-back-btn{
    width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .org-back-btn:hover{ color:var(--accent); border-color:var(--accent); }
  .org-fuel-pick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .org-fuel-pick-btn{
    background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:18px 10px;
    display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; color:var(--text); font-family:inherit;
  }
  .org-fuel-pick-btn:hover{ border-color:var(--fuel-color); background:var(--panel); }
  .org-fuel-pick-btn .ofp-icon{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .org-fuel-pick-btn .ofp-icon svg{ width:18px; height:18px; }
  .org-fuel-pick-btn .ofp-name{ font-size:12.5px; font-weight:700; }
  .org-fuel-pick-btn .ofp-price{ font-size:11px; color:var(--text-dim); }

  .org-tag{
    font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
    padding:2px 7px; border-radius:8px; margin-left:6px; white-space:nowrap; flex-shrink:0;
  }
  .org-tag-stacked{ margin-left:0; align-self:flex-start; }
  .payment-badge{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
    border-radius:6px; background:var(--panel-2); color:var(--text-dim); margin-left:6px; flex-shrink:0;
    vertical-align:middle;
  }
  .payment-badge svg{ width:11px; height:11px; }

  .org-search-row{ display:flex; gap:8px; margin-bottom:12px; align-items:center; }
  .org-search-wrap{ position:relative; flex:1; min-width:0; }
  .org-search-wrap .search-icon{
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; color:var(--text-faint); pointer-events:none;
  }
  .org-search-wrap input{
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
    padding:10px 12px 10px 34px; font-size:13.5px; color:var(--text); font-family:inherit; outline:none;
  }
  .org-search-wrap input:focus{ border-color:var(--accent); }
  .org-add-toggle-btn{
    width:40px; height:40px; border-radius:10px; border:none; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .org-add-toggle-btn svg{ width:18px; height:18px; }
  .org-add-toggle-btn.active{ background:var(--panel-2); color:var(--text-dim); border:1px solid var(--border); }
  .org-add-inline{ display:flex; gap:8px; margin-bottom:14px; }
  .org-add-inline input{
    flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--accent); border-radius:10px;
    padding:10px 12px; font-size:13.5px; color:var(--text); font-family:inherit; outline:none;
  }
  .org-delete-btn{
    width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .org-delete-btn:hover{ color:var(--danger); border-color:var(--danger); }
  .org-delete-btn svg{ width:14px; height:14px; }

  /* Toast */
  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    background:var(--bg-elev); border:1px solid var(--ok); color:var(--text);
    padding:12px 20px; border-radius:12px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition:.2s ease; z-index:60;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  .toast .tdot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0; }
  .toast-action{
    margin-left:6px; padding:5px 12px; border-radius:8px; border:1px solid var(--accent);
    background:transparent; color:var(--accent); font-family:inherit; font-weight:800; font-size:12px; cursor:pointer;
    flex-shrink:0;
  }
  .toast-action:hover{ background:var(--accent-soft); }

  .view{ display:none; }
  .view.active{ display:block; }

  .storage-note{
    display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-faint);
    background:var(--panel-2); border:1px solid var(--border); border-radius:9px; padding:8px 12px; margin-bottom:16px;
  }