@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root{
  --bg:#fbf9f8;
  --surface:#ffffff;
  --surface-soft:#f6f3f2;
  --surface-high:#eae8e7;
  --text:#1b1c1c;
  --muted:#667276;
  --line:#dce3e5;
  --line-strong:#c5d0d4;
  --primary:#006879;
  --primary-hover:#005664;
  --cyan:#00b7d4;
  --cyan-soft:#e9fafd;
  --green:#22a06b;
  --green-soft:#dff8ec;
  --orange:#d97800;
  --orange-soft:#fff0df;
  --red:#ba1a1a;
  --red-soft:#ffdad6;
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --radius:14px;
  --radius-lg:18px;
}

html,body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
}

h1,h2,h3,.page-title,.topbar-title strong{
  font-family:"Hanken Grotesk",Inter,sans-serif;
  letter-spacing:-.02em;
}

code,.mono,.network-code-box,.connector-network-code,.receipt-code{
  font-family:"JetBrains Mono",ui-monospace,monospace;
}

/* Uniform brand */
.brand-logo,
.station-title-logo,
.app-history .brand img,
.app-site .brand-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
}

.brand-logo-login{width:auto;height:100px;max-height:none;display:block;margin:0 auto 8px}
.brand-logo-sidebar{width:auto;height:100px;max-height:none;display:block;margin:0 auto 8px}
.brand-logo-map-mobile{width:160px;max-height:42px}
.brand-logo-site{width:170px;max-height:46px}
.station-title-logo{width:152px;max-height:44px;object-fit:contain}
.app-history .brand img{width:170px;max-height:46px}

/* Unified buttons. Primary actions use the map primary teal.
   Secondary actions stay white. Destructive actions stay red. */
.app-station button:not(.map-home-button),
.app-admin button:not(.icon),
.app-manage button,
.app-history button,
.app-site .nav-cta,
.app-site .btn-primary{
  border-radius:10px;
  font-family:Inter,sans-serif;
  font-weight:700;
}

.app-station button:not(.secondary):not(.danger):not(.icon),
.app-admin button:not(.secondary):not(.danger):not(.icon):not(.tab),
.app-manage button:not(.secondary):not(.danger):not(.tab):not(.side-link),
.app-history button:not(.secondary),
.app-site .nav-cta,
.app-site .btn-primary{
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
  box-shadow:none;
}

.app-station button:not(.secondary):not(.danger):hover,
.app-admin button:not(.secondary):not(.danger):not(.icon):not(.tab):hover,
.app-manage button:not(.secondary):not(.danger):not(.tab):not(.side-link):hover,
.app-history button:not(.secondary):hover,
.app-site .nav-cta:hover,
.app-site .btn-primary:hover{
  background:var(--primary-hover);
  border-color:var(--primary-hover);
  filter:none;
}

.app-station .secondary,
.app-admin button.secondary,
.app-manage button.secondary,
.app-history .secondary,
.app-site .btn-secondary{
  background:#fff;
  color:var(--primary);
  border:1px solid #a9cbd1;
  box-shadow:none;
}

.app-station .secondary:hover,
.app-admin button.secondary:hover,
.app-manage button.secondary:hover,
.app-history .secondary:hover,
.app-site .btn-secondary:hover{
  background:#f3fafb;
  color:var(--primary-hover);
  border-color:#7db9c3;
}

.app-admin .danger,
.app-manage .danger,
.app-station .danger{
  background:var(--red-soft)!important;
  color:var(--red)!important;
  border:1px solid #f4b8b2!important;
}

button:disabled,.disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none!important;
}

/* Inputs */
.app-station input,.app-station select,
.app-admin input,.app-admin select,
.app-manage input,.app-manage select,
.app-history input,.app-history select{
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:#fff;
  color:var(--text);
}

.app-station input:focus,.app-station select:focus,
.app-admin input:focus,.app-admin select:focus,
.app-manage input:focus,.app-manage select:focus,
.app-history input:focus,.app-history select:focus{
  outline:0;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,183,212,.10);
}

/* Cards and panels */
.app-station .card,
.app-admin .login-card,.app-admin .panel,.app-admin .station,.app-admin .metric,
.app-manage .login-card,.app-manage .panel,.app-manage .station,.app-manage .metric,
.app-history .card{
  border-color:var(--line);
  box-shadow:var(--shadow);
}

/* Unified status palette */
.status.available,.status.ok,.status.success{
  color:#086c45!important;
  background:var(--green-soft)!important;
}
.status.preparing{
  color:var(--primary)!important;
  background:var(--cyan-soft)!important;
}
.status.occupied,.status.busy{
  color:#8d4a00!important;
  background:var(--orange-soft)!important;
}
.status.unavailable,.status.offline{
  color:#697478!important;
  background:#eef0f1!important;
}

/* Station */
.app-station{
  background:radial-gradient(circle at 50% -10%,#edf9fb 0,transparent 30rem),var(--bg);
}
.app-station .card{border-radius:var(--radius-lg)}
.app-station .station-heading{align-items:flex-start}
.app-station .station-title-copy{flex:1;min-width:0}
.app-station .network-code-box{
  background:#fff;
  color:var(--primary);
  border:1px solid #a9cbd1;
}
.app-station .status-accent{background:var(--cyan)}

/* Admin and Manage */
.app-admin,.app-manage{background:var(--bg)}
.app-admin .sidebar,.app-manage .sidebar{
  background:var(--surface-soft);
  border-color:var(--line);
}
.app-admin .tab.active,.app-manage .tab.active{
  background:#dff6fa;
  color:var(--primary);
}
.app-admin .tab:hover,.app-manage .tab:hover{
  background:#e9f2f4;
  color:var(--primary);
}
.app-admin .sidebar-primary,.app-manage .primary-btn{
  background:var(--primary)!important;
  color:#fff!important;
}
.app-admin .topbar,.app-manage .topbar{background:#fff;border-color:var(--line)}
.app-admin .metric-link small,.app-manage .metric-link small{color:var(--primary)}
.app-admin .connector-network-code,.app-manage .connector-network-code{
  color:var(--primary);
  border-color:#a9cbd1;
}

/* History */
.app-history{
  background:radial-gradient(circle at 15% 0%,rgba(0,183,212,.07),transparent 34%),var(--bg);
}
.app-history .brand-copy{display:none}
.app-history .eyebrow{color:var(--primary)}
.app-history .hero-card::before{
  background:linear-gradient(90deg,var(--primary),var(--cyan));
}
.app-history .receipt-code{
  color:var(--primary);
  border-color:#a9cbd1;
}
.app-history .total{color:var(--primary)}
.app-history .tabs{
  background:var(--surface-soft);
  border-color:var(--line);
}
.app-history .tab.active{
  color:var(--primary);
  background:#fff;
}
.app-history .recent-item strong{color:var(--primary)}

/* Landing page restyled to match the map */
.app-site{
  --accent:var(--primary);
  --accent-2:var(--cyan);
  --success:var(--green);
  --text:var(--text);
  --muted:var(--muted);
  --line:var(--line);
  background:var(--bg)!important;
  color:var(--text)!important;
}
.app-site .site-header{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 3px 14px rgba(0,0,0,.04);
}
.app-site .brand{color:var(--primary)!important}
.app-site .brand>span{display:none}
.app-site .nav-links{color:#4e5a5e!important}
.app-site .nav-links a:hover{color:var(--primary)!important}
.app-site .mobile-toggle{
  background:var(--surface-soft)!important;
  color:var(--primary)!important;
  border:1px solid var(--line)!important;
}
.app-site .hero{padding-top:74px}
.app-site .eyebrow{
  color:var(--primary)!important;
  background:var(--cyan-soft)!important;
  border-color:#b9edf5!important;
}
.app-site .gradient-text{
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:var(--primary)!important;
}
.app-site h1,.app-site h2,.app-site h3{color:var(--text)!important}
.app-site .hero-copy,
.app-site .hero-note,
.app-site .section-head p,
.app-site .feature p,
.app-site .step p,
.app-site .faq p,
.app-site footer{
  color:var(--muted)!important;
}
.app-site .btn-secondary{
  color:var(--primary)!important;
  background:#fff!important;
}
.app-site .feature,
.app-site .step,
.app-site .price-card,
.app-site .faq,
.app-site .demo-card,
.app-site .benefit{
  background:#fff!important;
  border-color:var(--line)!important;
  box-shadow:var(--shadow)!important;
}
.app-site .section,
.app-site .features,
.app-site .pricing,
.app-site .faq-section{
  background:transparent!important;
}
.app-site .phone{
  background:#f2f5f6!important;
  border-color:#ccd6da!important;
}
.app-site .phone-screen{
  background:#fff!important;
  color:var(--text)!important;
}
.app-site footer{
  border-color:var(--line)!important;
}

/* Map remains the visual source of truth. Only normalize logo sizing and CTA colors. */
.app-map .brand-logo{width:auto !important;height:100px !important;max-height:none !important;object-fit:contain}
.app-map .chip.active{
  border-color:rgba(0,183,212,.45);
  background:#ecfbfe;
  color:var(--primary);
}

/* Responsive */
@media(max-width:760px){
  .brand-logo-login{width:170px}
  .brand-logo-sidebar{width:148px}
  .station-title-logo{width:136px;max-height:40px}
  .app-history .brand img{width:150px;max-height:42px}
  .brand-logo-site{width:150px;max-height:42px}
}