:root{
  --primary:#0B2E5C;
  --primary-deep:#071D3D;
  --secondary:#1565C0;
  --accent:#42A5F5;
  --white:#FFFFFF;
  --bg:#F5F9FF;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border:#DBEAFE;
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body.app-body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
  overscroll-behavior:none;min-height:100dvh;
  padding-top:calc(60px + env(safe-area-inset-top,0px));
  padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased;
}

/* ===== HEADER (brand left, hamburger right end) ===== */
.app-header{
  position:fixed;top:0;left:0;right:0;
  height:calc(60px + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(135deg,var(--primary) 0%, #0A2550 100%);
  color:#fff;
  display:flex;align-items:center;
  padding-left:12px;padding-right:12px;gap:10px;
  z-index:1000;box-shadow:0 2px 8px rgba(11,46,92,.2);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:1;min-width:0}
.brand-mark{
  width:36px;height:36px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent) 0%, var(--secondary) 100%);
  border-radius:10px;
  display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(66,165,245,.4);
  padding:4px;
}
.brand-logo{width:100%;height:100%;display:block}
.brand-name{
  font-weight:700;font-size:15px;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header-right{
  display:flex;gap:8px;align-items:center;flex-shrink:0;
}
.badge{
  background:rgba(255,255,255,.18);
  color:#fff;border:1px solid rgba(255,255,255,.25);
  padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;
  white-space:nowrap;
}
.header-install{
  display:flex;align-items:center;gap:5px;
  background:var(--accent);color:#fff;
  border:0;padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:700;cursor:pointer;min-height:34px;
  font-family:inherit;white-space:nowrap;
  box-shadow:0 2px 6px rgba(66,165,245,.35);
}
.header-install:active{transform:scale(.96)}
.header-install svg{flex-shrink:0}
.hamburger{
  background:rgba(255,255,255,.1);border:0;padding:8px;cursor:pointer;color:#fff;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  min-height:40px;min-width:40px;flex-shrink:0;
}
.hamburger:active,.hamburger:hover{background:rgba(255,255,255,.2)}

/* Very small screens — compact install button */
@media (max-width:380px){
  .header-install-text{display:none}
  .header-install{padding:8px 10px}
  .badge{font-size:11px;padding:4px 8px}
  .brand-name{font-size:14px}
}

/* ===== FOOTER ===== */
.app-footer{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(68px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--surface);border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(5,1fr);
  z-index:1000;box-shadow:0 -1px 3px rgba(11,46,92,.06);
}
.foot-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-decoration:none;color:var(--muted);font-size:11px;
  min-height:44px;padding:6px 4px;transition:color .15s;
  background:none;border:0;font-family:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.foot-item span{font-size:21px;line-height:1}
.foot-item.active,.foot-item:hover,.foot-item:focus{color:var(--secondary);outline:none}
.foot-item.disabled{opacity:.4;pointer-events:none}

/* ===== MAIN ===== */
.app-main{
  min-height:calc(100dvh - 128px);
  padding:16px;max-width:1100px;margin:0 auto;
}
.app-main.no-chrome{
  padding:20px;min-height:100dvh;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary) 0%, #0A2550 50%, #071D3D 100%);
}
.app-main.auth-main{
  display:flex;align-items:center;justify-content:center;
  padding:20px 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(21,101,192,.1) 0%, transparent 55%),
    linear-gradient(180deg,#F5F9FF 0%,#E3F2FD 100%);
}

/* ===== DRAWER (slides from RIGHT) ===== */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(11,46,92,.55);
  z-index:1100;opacity:0;pointer-events:none;transition:opacity .22s;
  backdrop-filter:blur(2px);
}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:290px;max-width:85vw;
  background:var(--surface);z-index:1200;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;display:flex;flex-direction:column;
  box-shadow:-4px 0 24px rgba(11,46,92,.15);
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  padding:calc(18px + env(safe-area-inset-top,0px)) 16px 18px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--primary), #0A2550);
  color:#fff;font-weight:700;font-size:15px;
  position:sticky;top:0;z-index:2;
}
.drawer-head .brand-mark{width:36px;height:36px}
.drawer-head span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-close{
  background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;
  border-radius:8px;padding:6px;display:flex;align-items:center;justify-content:center;
  min-height:34px;min-width:34px;flex-shrink:0;
}
.drawer-close:active{background:rgba(255,255,255,.25)}
.drawer-nav{display:flex;flex-direction:column;padding:8px 0}
.drawer-nav a{
  padding:13px 20px;text-decoration:none;color:var(--text);font-size:15px;
  min-height:48px;display:flex;align-items:center;gap:10px;
  transition:background .15s;
}
.drawer-nav a:hover,.drawer-nav a:active{background:var(--bg);color:var(--secondary)}
.drawer-nav hr{border:0;border-top:1px solid var(--border);margin:8px 20px}
.drawer-install-btn{
  background:linear-gradient(135deg,var(--secondary),var(--accent));
  color:#fff;border:0;margin:8px 16px;padding:12px 16px;
  text-align:left;font-size:15px;font-weight:700;cursor:pointer;
  min-height:48px;display:flex;align-items:center;gap:10px;
  font-family:inherit;border-radius:10px;
  box-shadow:0 3px 10px rgba(21,101,192,.3);
}
.drawer-install-btn:active{transform:scale(.98)}

/* ===== AUTH CARD ===== */
.auth-wrap{width:100%;max-width:420px}
.auth-card{
  background:var(--surface);border-radius:20px;padding:28px;
  box-shadow:0 20px 60px rgba(11,46,92,.18), 0 4px 12px rgba(11,46,92,.08);
}
.auth-head{text-align:center;margin-bottom:22px}
.auth-logo{
  width:64px;height:64px;
  background:linear-gradient(135deg,var(--accent) 0%, var(--secondary) 100%);
  border-radius:18px;
  display:inline-grid;place-items:center;padding:8px;
  margin-bottom:14px;
  box-shadow:0 6px 20px rgba(21,101,192,.35);
}
.auth-logo svg{width:100%;height:100%}
.auth-head h1{margin:0 0 6px;font-size:22px;color:var(--primary)}
.auth-head p{margin:0;color:var(--muted);font-size:14px}

/* ===== FORMS ===== */
form label{display:block;font-size:13px;font-weight:600;color:#334155;margin:14px 0 6px}
form input,form select,form textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:11px;
  font-size:16px;font-family:inherit;background:var(--surface);color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
form input:focus,form select:focus,form textarea:focus{
  outline:none;border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(21,101,192,.15);
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 22px;border:0;border-radius:12px;
  font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;
  min-height:44px;transition:transform .1s, opacity .15s;
  font-family:inherit;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg,var(--secondary),#0B2E5C);
  color:#fff;width:100%;margin-top:20px;
  box-shadow:0 4px 12px rgba(21,101,192,.3);
}
.btn-primary:hover{opacity:.94}
.btn-secondary{background:var(--accent);color:#fff}
.btn-ghost{background:var(--bg);color:var(--text)}

.auth-links{display:flex;justify-content:space-between;margin-top:18px;font-size:14px;gap:8px;flex-wrap:wrap}
.auth-links a{color:var(--secondary);text-decoration:none;font-weight:600}
.auth-links a:hover{color:var(--primary);text-decoration:underline}

/* ===== INSTALL BUTTON (login page — same as Sign In) ===== */
.install-section{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--border);
}
.install-btn{
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.install-btn svg{flex-shrink:0}
.install-hint{
  text-align:center;font-size:11px;color:var(--muted);margin-top:10px;
}

/* ===== ALERTS ===== */
.alert{padding:12px 16px;border-radius:11px;font-size:14px;margin-bottom:14px}
.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.alert-success{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

/* ===== DASHBOARD ===== */
.dash-greet{
  background:linear-gradient(135deg,var(--primary) 0%, var(--secondary) 100%);
  color:#fff;padding:22px;border-radius:16px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.dash-greet::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle, rgba(66,165,245,.4), transparent 70%);
}
.dash-greet h2{margin:0 0 4px;font-size:19px;position:relative}
.dash-greet p{margin:0;font-size:13px;opacity:.9;position:relative}
.dash-balance{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;position:relative}
.dash-balance div{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  padding:11px 16px;border-radius:12px;font-size:12px;
  backdrop-filter:blur(6px);
}
.dash-balance strong{display:block;font-size:17px;margin-top:3px;color:#fff}

/* ===== PWA BANNER (dashboard) ===== */
.pwa-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--secondary),var(--accent));
  color:#fff;padding:14px 16px;border-radius:14px;
  margin-bottom:16px;box-shadow:0 4px 16px rgba(21,101,192,.3);
}
.pwa-banner-icon{font-size:28px}
.pwa-banner-text{flex:1;font-size:13px;font-weight:600;line-height:1.3}
.pwa-banner-text small{display:block;font-weight:400;opacity:.9;margin-top:2px;font-size:11px}
.pwa-banner-btn{
  background:var(--primary);color:#fff;border:0;padding:9px 16px;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;min-height:38px;white-space:nowrap;
  font-family:inherit;
}
.pwa-banner-btn:active{transform:scale(.96)}
.pwa-banner-close{
  background:none;border:0;color:#fff;font-size:20px;
  cursor:pointer;padding:4px 8px;opacity:.7;
}

/* ===== ICON GRID ===== */
.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(min-width:640px){.icon-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.icon-grid{grid-template-columns:repeat(6,1fr)}}
.icon-tile{
  background:var(--surface);border-radius:16px;padding:16px 8px;text-align:center;
  text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:104px;justify-content:center;border:1px solid var(--border);
  transition:transform .12s, box-shadow .15s;
}
.icon-tile:hover{box-shadow:0 4px 16px rgba(21,101,192,.1);border-color:var(--accent)}
.icon-tile:active{transform:scale(.97)}
.icon-tile .ico{
  width:46px;height:46px;
  background:linear-gradient(135deg,var(--secondary),var(--primary));
  color:var(--accent);
  border-radius:13px;display:grid;place-items:center;font-size:22px;
  box-shadow:0 3px 10px rgba(11,46,92,.25);
}
.icon-tile small{font-size:12px;font-weight:600;line-height:1.2;color:var(--text)}
.icon-tile.disabled{opacity:.5}

/* ===== PWA VISIBILITY ===== */
@media (display-mode: standalone) {
  [data-pwa-install], .pwa-banner { display: none !important; }
}
body.is-standalone [data-pwa-install],
body.is-standalone .pwa-banner { display: none !important; }
body.banner-dismissed .pwa-banner { display: none !important; }