/* Shared visual layer. Existing behavior and theme tokens remain intact. */
:root { --saas-border: #dfe7e5; --saas-focus: #27876e; }
.sidebar,.map-shell { border-radius:12px; box-shadow:none; }
.nav-tabs { border:1px solid var(--saas-border); border-radius:10px; padding:4px; gap:4px; }
.nav-tab { min-height:44px; border-radius:8px; transition:background-color .18s ease,color .18s ease; }
.nav-tab.active { box-shadow:none; color:var(--green); background:var(--paper); }
.route-card,.plan-field,.search-wrap input,.round-btn,.map-controls button,.map-layer-panel,.selected-route-panel { border-radius:10px; box-shadow:none; }
.route-card:hover { transform:none; box-shadow:none; border-color:#a9c9bc; background:#f7fbf9; }
.route-card.selected { box-shadow:none; border-color:var(--green); }
button,input,select,a { transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--saas-focus); outline-offset:2px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.mobile-glass-dock-item svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:820px) and (orientation:portrait) {
 .mobile-glass-dock { border-radius:12px; border:1px solid var(--saas-border); background:var(--paper); box-shadow:0 4px 16px #10205212; backdrop-filter:none; -webkit-backdrop-filter:none; }
 .mobile-glass-dock-item { border-radius:8px; min-height:52px; }
 .map-controls button { min-width:44px; min-height:44px; }
 .sidebar { border-radius:12px 12px 0 0; }
}
@media (prefers-reduced-motion:reduce) { button,input,select,a { transition:none; } }

/* Sobat Transum UI system: reusable surfaces, controls and outline icons. */
.st-auth-layout { border-radius:12px; box-shadow:none; }
.st-auth-showcase { background:#102052; padding:40px; }
.st-auth-showcase::before,.st-auth-showcase::after { display:none; }
.st-auth-route-labels span { border-radius:8px; backdrop-filter:none; }
.st-auth-demo-label,.st-auth-input-wrap,.st-auth-primary,.st-auth-google,.st-auth-message { border-radius:10px; }
.st-auth-primary,.st-auth-primary:hover { box-shadow:none; transform:none; }
.st-auth-field .st-auth-input-icon { display:grid; place-items:center; width:44px; }
.st-auth-input-icon svg,.search-icon svg,.nav-tab svg { display:block; width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-tab { display:flex; align-items:center; justify-content:center; gap:8px; }
.nav-tab.active { font-weight:800; }
.search-icon { display:grid; place-items:center; }
.map-controls button,.round-btn { min-width:44px; min-height:44px; }
.st-account-menu-icon svg,.journey-inline-action svg,.journey-swap svg,.map-controls svg { stroke-width:1.8; }
.st-account-box,.st-account-menu,.journey-location-field,.journey-plan-submit,.journey-pick-map,.map-control-group,.smart-search-panel { border-radius:10px; }
.st-account-box,.journey-location-field,.smart-search-panel { box-shadow:none; }
.st-account-menu button,.st-account-outline,.st-account-primary,.journey-pick-map { min-height:44px; }
.st-auth-show-pass,.st-auth-plain-btn { min-height:44px; }
button:active:not(:disabled) { filter:brightness(.97); }
button:disabled,button[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
@media(max-width:820px) {
 .nav-tab svg,.search-icon svg,.st-auth-input-icon svg { width:21px; height:21px; }
 .nav-tab { gap:4px; font-size:11px; }
 .st-auth-layout { border-radius:0; }
 .map-controls button,.round-btn { min-width:44px; min-height:44px; }
}
@media(max-width:380px) { .nav-tab svg { display:none; } }

/* Login password visibility control */
#stLoginForm .st-auth-show-pass { display:grid; place-items:center; width:44px; min-width:44px; height:44px; padding:0; color:var(--st-ui-muted,#536581); }
#stLoginForm .st-auth-show-pass svg { width:20px; height:20px; }
#stLoginForm .st-auth-show-pass .st-eye-slash { display:none; }
#stLoginForm .st-auth-show-pass[aria-pressed="true"] .st-eye-slash { display:block; }

/* Keep form focus visible without the oversized green rectangle. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--st-ui-blue, #148ff5);
}
.st-auth-input-wrap:focus-within { box-shadow:none; }

/* Dashboard components share the same outline icon and spacing rules. */
.st-ui-icon { width:19px; height:19px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.st-ui-icon-sm { width:16px; height:16px; }
.route-card { gap:12px; padding:12px; border:1px solid var(--st-ui-border,#dfe7e5); border-radius:10px; }
.route-title { font-size:13px; line-height:1.4; }
.route-desc { font-size:11px; line-height:1.4; }
.route-meta { gap:8px; align-items:center; }
.meta-pill,.st-stop-access-tag { display:inline-flex; align-items:center; gap:4px; border-radius:8px; }
.mode-badge { border-radius:8px; }
.st-demo-free .filter-chip.st-access-locked:after,.st-demo-free .nav-tab.st-access-plan-locked:after { content:""; display:inline-block; width:14px; height:14px; margin-left:4px; vertical-align:middle; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat; }
.mode-filters .filter-chip { min-height:44px; border-radius:8px; }
.sidebar .nav-tabs { background:var(--st-ui-soft,#f4f6f6); }
.sidebar .nav-tab.active { background:var(--st-ui-surface,#fff); color:var(--st-ui-blue-text,#105392); }
.map-control-group { border:1px solid var(--st-ui-border,#dfe7e5); box-shadow:none; }
.map-controls button { border-radius:8px; }
.st-account-menu button { border-radius:8px; }
@media(max-width:820px) {
 .st-ui-icon { width:21px; height:21px; }
 .st-ui-icon-sm { width:18px; height:18px; }
 .route-card { padding:12px; }
}
@media(min-width:821px) {
 .brand-row { gap:8px; padding:16px; }
 .brand-row .brand { min-width:0; }
 .brand-row .brand-name { white-space:nowrap; }
 .brand-row .st-brand-actions { gap:4px; }
 .brand-row .st-account-trigger { padding:3px; min-width:44px; min-height:44px; box-shadow:none; }
 .brand-row .st-account-trigger .st-account-name,.brand-row .st-account-trigger .st-account-chevron { display:none; }
}

/* Panel-inspired visual system: restrained surfaces and consistent controls. */
:root { --panel-radius:10px; --panel-stroke:var(--st-ui-border,#dce5ef); --panel-surface:var(--st-ui-surface,#fff); --panel-subtle:var(--st-ui-soft,#eef6ff); --panel-ink:var(--st-ui-text,#172329); --panel-muted:var(--st-ui-muted,#536581); }
.app { gap:12px; padding:12px; }
.sidebar,.map-shell { border:1px solid var(--panel-stroke); border-radius:12px; box-shadow:none; }
.brand-row { gap:8px; }
.nav-tabs { gap:4px; padding:4px; border:1px solid var(--panel-stroke); border-radius:10px; background:var(--panel-subtle); }
.nav-tab { min-height:44px; color:var(--panel-muted); font-weight:650; }
.sidebar .nav-tab.active { box-shadow:inset 0 -2px 0 #148ff5; color:var(--st-ui-blue-text,#105392); }
.hero-copy h1 { line-height:1.2; letter-spacing:-.035em; }
.hero-copy p,.journey-planner-heading p { line-height:1.55; }
.search-wrap input,.journey-location-field,.plan-field { border:1px solid var(--panel-stroke); border-radius:10px; background:var(--panel-surface); }
.route-card,.st-account-box,.st-sbx-payment,.nearby-transit-panel,.selected-route-panel,.map-layer-panel,.journey-suggestions { border:1px solid var(--panel-stroke); border-radius:10px; box-shadow:none; }
.route-card { background:var(--panel-surface); color:var(--panel-ink); }
.route-card:hover { background:var(--panel-subtle); }
.route-card.selected { border-color:var(--st-ui-blue,#148ff5); }
.route-title { color:var(--panel-ink); }
.route-desc,.route-detail-note { color:var(--panel-muted); }
.filter-chip,.journey-pick-map,.journey-plan-submit,.st-account-primary,.st-account-outline,.st-sbx-action,.st-sbx-refresh,.st-sbx-open { border-radius:8px; min-height:44px; }
.st-account-panel { background:var(--panel-surface); box-shadow:-4px 0 20px #10205214; }
.st-account-head { min-height:64px; padding:16px 20px; }
.st-account-close,.st-account-back { width:44px; height:44px; border-radius:8px; }
.st-account-user .st-account-avatar { border-radius:10px; background:#102052; }
.st-account-membership,.st-account-membership.is-premium { border-radius:10px; background:var(--panel-subtle); box-shadow:none; }
.st-account-menu button { min-height:48px; border-radius:8px; }
.st-account-menu-icon { border-radius:8px; }
.st-account-membership button,.st-auth-primary,.st-auth-google { border-radius:8px; box-shadow:none; }
.map-controls button,.round-btn { min-width:44px; min-height:44px; }
.st-auth-input-wrap { border-radius:8px; }
.st-auth-input-wrap:focus-within { border-color:var(--st-ui-blue,#148ff5); box-shadow:none; }
@media(max-width:820px) {
 .app { padding:0; }
 .sidebar { border-radius:12px 12px 0 0; }
 .map-shell { border:0; border-radius:0; }
 .st-account-panel { border-radius:12px 12px 0 0; }
 .st-account-scroll { padding:16px; }
 .mobile-glass-dock { border:1px solid var(--panel-stroke); border-radius:12px; background:var(--panel-surface); box-shadow:0 4px 16px #10205212; }
 .mobile-glass-dock-item { min-width:44px; min-height:48px; border-radius:8px; }
}
@media(prefers-reduced-motion:reduce) { .st-account-panel,.st-account-backdrop { transition:none; } }