*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Legacy vars */
  --y:#FFCC00;--yl:rgba(255,204,0,0.1);--yd:#e6b800;--yt:#9a7b00;
  --bg:#FAFAFA;--white:#FFFFFF;--dark:#1A1A2E;
  --text:#1A1A2E;--sub:#6B7280;--bor:#E5E7EB;
  --card:#FFFFFF;--rad:14px;--shadow:0 2px 12px rgba(0,0,0,0.06);
  /* Backgrounds */
  --bg-primary:#FAFAFA;--bg-card:#FFFFFF;--bg-elevated:#FFFFFF;
  /* Text */
  --text-primary:#1A1A2E;--text-secondary:#6B7280;--text-tertiary:#737373;
  /* Brand */
  --accent:#F5C518;--accent-hover:#E5B600;--accent-text:#1A1A2E;
  /* Functional */
  --success:#10B981;--error:#EF4444;--info:#3B82F6;
  --border:#E5E7EB;--border-light:#F3F4F6;
  /* Shadows */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.12);
  /* Radius */
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;
  /* Animation */
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-decelerate:cubic-bezier(0,0,0.2,1);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  /* Typography */
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media(prefers-color-scheme:dark){:root:not(.light-mode){--bg:#0F0F0F;--white:#1E1E1E;--dark:#F0F0F0;--text:#F0F0F0;--sub:#A0A0A0;--bor:#333333;--card:#1E1E1E;--shadow:0 2px 12px rgba(0,0,0,0.4);--yl:rgba(255,204,0,0.12);--yt:#FFCC00;--bg-primary:#0F0F0F;--bg-card:#1E1E1E;--bg-elevated:#252525;--text-primary:#F0F0F0;--text-secondary:#A0A0A0;--border:#333333;--border-light:#2A2A2A;--text-tertiary:#9CA3AF}}
.dark-mode{--bg:#0F0F0F;--white:#1E1E1E;--dark:#F0F0F0;--text:#F0F0F0;--sub:#A0A0A0;--bor:#333333;--card:#1E1E1E;--shadow:0 2px 12px rgba(0,0,0,0.4);--yl:rgba(255,204,0,0.12);--yt:#FFCC00;--bg-primary:#0F0F0F;--bg-card:#1E1E1E;--bg-elevated:#252525;--text-primary:#F0F0F0;--text-secondary:#A0A0A0;--border:#333333;--border-light:#2A2A2A;--text-tertiary:#9CA3AF}
.dark-mode .hdr{background:var(--y)}.dark-mode nav{background:var(--card);border-color:var(--bor)}.dark-mode .drawer{background:var(--card)}.dark-mode .drawer-item{color:var(--text)}.dark-mode .litem{background:var(--card);border-color:var(--bor)}.dark-mode input{background:var(--card);color:var(--text);border-color:var(--bor)}
.dark-mode .hero-greeting{background:linear-gradient(135deg,rgba(255,204,0,0.15),rgba(255,204,0,0.05))!important}.dark-mode .hero-greeting .greeting-text{color:var(--y)}.dark-mode .hero-greeting .city-label{color:var(--sub)}.dark-mode .hero-weather .hw-temp{color:var(--y)}
.dark-mode .info-banner{background:linear-gradient(135deg,rgba(255,204,0,0.15),rgba(255,204,0,0.08))!important;box-shadow:0 4px 16px rgba(255,204,0,0.08)}.dark-mode .info-banner .ib-title,.dark-mode .info-banner .ib-desc{color:var(--text)}
.dark-mode .stat-card.sc-gray{background:var(--card);border-color:var(--bor)}.dark-mode .occ-bar{background:var(--card)}.dark-mode .pk-item{background:var(--card)}.dark-mode .tile-v2{background:var(--card)}.dark-mode .qa-btn{background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.dark-mode .ncard-v2{background:var(--card)}.dark-mode .form-group input,.dark-mode .form-group textarea,.dark-mode .form-group select{background:var(--card);color:var(--text);border-color:var(--bor)}
.dark-mode .skel{background:linear-gradient(90deg,var(--bor) 25%,#2a2a3a 50%,var(--bor) 75%);background-size:200px 100%}
.dark-mode .city-chip{background:var(--card);border-color:var(--bor)}.dark-mode .city-chip .cc-name{color:var(--text)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.skip-link{position:absolute;top:-100px;left:0;background:var(--y);color:#000;padding:12px 24px;z-index:10001;font-weight:800;font-size:14px;border-radius:0 0 8px 0;transition:top .2s}.skip-link:focus{top:0}
@keyframes skeleton{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.skel{background:linear-gradient(90deg,var(--bor) 25%,#e8e8e8 50%,var(--bor) 75%);background-size:200px 100%;animation:skeleton 1.5s infinite;border-radius:8px}
body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes slideOut{from{transform:none}to{transform:translateX(-100%)}}
.fi{animation:fadeIn .3s ease both}

/* SVG ICON SYSTEM — replaces emoji in key areas */
.svg-ico{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-0.125em}
.svg-ico svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:0}
/* Stroke-based icons */
.svg-ico.str svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* HEADER */
.hdr{position:sticky;top:0;z-index:100;background:var(--y);padding:0 14px;height:52px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.hdr-left{display:flex;align-items:center;gap:10px}
.hdr .ham{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:var(--hdr-ham-bg,rgba(0,0,0,0.08));border-radius:8px;cursor:pointer;font-size:18px;color:var(--hdr-text,#000);position:relative;z-index:202}
.hdr h1{font-size:16px;font-weight:800;color:var(--hdr-text,#000);letter-spacing:-.02em}
.back-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:none;background:var(--hdr-ham-bg,rgba(0,0,0,0.08));border-radius:8px;cursor:pointer;font-size:13px;color:var(--hdr-text,#000);font-weight:700;-webkit-tap-highlight-color:transparent;padding:0 10px;height:36px;white-space:nowrap}.back-btn:active{background:rgba(0,0,0,0.15)}.back-btn .ba{font-size:18px}
.hdr-right{display:flex;gap:6px;align-items:center}
.lang-btn{padding:5px 10px;border-radius:8px;border:2px solid var(--hdr-ham-bg,rgba(0,0,0,0.15));background:var(--hdr-ham-bg,rgba(0,0,0,0.05));font-size:12px;font-weight:700;color:var(--hdr-text,#000);cursor:pointer}

/* SIDE DRAWER */
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}.overlay.open{opacity:1;pointer-events:auto}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--bg-card);z-index:201;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,0.15)}
.drawer.open{transform:none}
.drawer-head{background:var(--y);padding:24px 16px 16px;display:flex;align-items:center;gap:12px;position:relative}
.drawer-logo{width:48px;height:48px;border-radius:14px;background:var(--y);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--hdr-text,#000);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.drawer-head .info h2{font-size:15px;font-weight:800;color:#000}
.drawer-head .info p{font-size:11px;color:rgba(0,0,0,0.6)}
.drawer-sep{height:1px;background:#eee;margin:8px 16px}
.drawer-item{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;transition:background .15s;font-size:14px;color:var(--text-primary);border:none;background:none;width:100%;text-align:left;font-family:inherit}
.drawer-item:hover,.drawer-item.act{background:var(--yl)}
.drawer-item.act{color:#000;font-weight:700}
.drawer-item .dic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--yl);font-size:16px}
.svg-drawer svg{width:18px;height:18px;stroke:var(--y);stroke-width:2}
.drawer-foot{padding:16px;border-top:1px solid #eee;margin-top:8px}
.drawer-foot a{display:block;padding:8px 0;font-size:12px;color:var(--text-secondary);text-decoration:none}

/* BOTTOM NAV */
nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--bg-card);border-top:1px solid var(--bor);padding:6px 0 max(6px,env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,0.05)}
.ni{display:flex;max-width:500px;margin:0 auto;justify-content:space-around}
.ni button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border:none;background:none;cursor:pointer;font-size:9px;color:var(--text-secondary);font-family:inherit;-webkit-tap-highlight-color:transparent;transition:color .15s;min-width:48px;min-height:48px;justify-content:center}
.ni .on{color:var(--yt)}
.ni .on .nic{color:var(--yt)}
.ni .nic{font-size:24px;line-height:1.2}

/* MAIN */
main{max-width:800px;margin:0 auto;padding:0 0 80px}

/* CARDS */
.card{background:var(--card);border-radius:var(--rad);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:active{transform:scale(0.98)}
.card-pad{padding:14px 16px}
.card-img{width:100%;height:160px;object-fit:cover;background:#eee}

/* SECTION HEADER */
.sec-hdr{padding:18px 16px 10px;display:flex;align-items:center;justify-content:space-between}
.sec-hdr h2{font-size:20px;font-weight:800;color:var(--yt);letter-spacing:-.01em}
.sec-hdr .more{padding:6px 14px;border-radius:20px;border:2px solid var(--yt);background:none;color:var(--yt);font-size:11px;font-weight:700;cursor:pointer}

/* WEATHER */
.weather-box{padding:16px;display:flex;align-items:center;justify-content:space-between}
.weather-box .wt{font-size:13px;color:var(--text-secondary)}
.weather-box .wtemp{font-size:36px;font-weight:800;color:#000;display:flex;align-items:center;gap:8px}
.weather-box .wico{font-size:32px}

/* SEARCH */
.search-bar{margin:12px 16px;position:relative}
.search-bar input{width:100%;padding:12px 16px 12px 42px;border-radius:25px;border:1px solid #ddd;background:var(--bg-card);font-size:14px;color:var(--text-primary);outline:none;font-family:inherit;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.search-bar input:focus{border-color:var(--y);box-shadow:0 2px 12px rgba(255,204,0,0.15)}
.search-bar .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--text-secondary)}

/* CAROUSEL */
.carousel{display:flex;gap:12px;overflow-x:auto;padding:0 16px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.carousel>.card{min-width:280px;max-width:320px;scroll-snap-align:start;flex-shrink:0}

/* GRID */
.grid{display:grid;gap:12px;padding:0 16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* MODULE TILES */
.tile{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--bg-card);border-radius:var(--rad);box-shadow:var(--shadow);cursor:pointer;transition:transform .15s;min-height:76px;box-sizing:border-box}
.tile:active{transform:scale(0.97)}
.tile .tico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.tile .tinfo h3{font-size:13px;font-weight:700;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.tile .tinfo p{font-size:11px;color:var(--text-secondary);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* STAT BOXES */
.stats{display:flex;gap:10px;padding:0 16px;margin:10px 0}
.sbox{flex:1;background:var(--bg-card);border-radius:12px;padding:12px 8px;text-align:center;box-shadow:var(--shadow)}
.sbox .sv{font-size:22px;font-weight:800;color:#000}.sbox .sl{font-size:9px;color:var(--text-secondary);margin-top:3px}

/* LIST ITEMS */
.litem{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-card);border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background .1s}
.litem:hover{background:#fafafa}
.litem:last-child{border-bottom:none}
.litem .li-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--yl);flex-shrink:0}
.litem .li-info{flex:1;min-width:0}
.litem .li-info h4{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.litem .li-info p{font-size:11px;color:var(--text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* TAB BAR — see chip-bar override below */

/* MAP */
.map-wrap{border-radius:var(--rad);overflow:hidden;margin:0 16px 12px;height:300px;box-shadow:var(--shadow)}
.map-wrap .leaflet-container{height:100%;width:100%;background:#f8f8f8}

/* PROGRESS BAR */
.pbar{height:6px;border-radius:3px;background:#eee;overflow:hidden;margin-top:6px}
.pfill{height:100%;border-radius:3px;transition:width .5s ease}

/* LIVE BADGE */
.live{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:rgba(34,197,94,0.08);font-size:10px;font-weight:700;color:#15803d}
.live .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* CHAT */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 140px);height:calc(100dvh - 140px)}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.cmsg{max-width:82%;padding:11px 15px;border-radius:16px;font-size:13px;line-height:1.6;white-space:pre-wrap;animation:fadeIn .25s ease}
.cmsg-u{align-self:flex-end;background:var(--y);color:var(--hdr-text,#000);border-bottom-right-radius:4px}
.cmsg-a{align-self:flex-start;background:#f0f0f0;color:var(--text-primary);border-bottom-left-radius:4px}
.chat-input{display:flex;gap:8px;padding:12px 16px;background:var(--bg-card);border-top:1px solid #eee}
.chat-input input{flex:1;padding:10px 16px;border-radius:24px;border:1px solid #ddd;font-size:14px;outline:none;font-family:inherit}
.chat-input input:focus{border-color:var(--y)}
.chat-input button{width:40px;height:40px;border-radius:50%;border:none;background:var(--y);color:#000;font-size:18px;font-weight:700;cursor:pointer}

/* FORM */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;border-radius:12px;border:1px solid #ddd;font-size:14px;color:var(--text-primary);outline:none;font-family:inherit;background:var(--bg-card)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--y)}
.btn-y{padding:12px 24px;border-radius:var(--radius-pill,999px);border:none;background:var(--y);color:#000;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s var(--ease-standard,cubic-bezier(.4,0,.2,1)),box-shadow .2s var(--ease-standard,cubic-bezier(.4,0,.2,1))}
.btn-y:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.btn-o{padding:8px 18px;border-radius:var(--radius-pill,999px);border:2px solid var(--y);background:transparent;color:#000;font-weight:700;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .2s var(--ease-standard,cubic-bezier(.4,0,.2,1))}
.btn-o:hover{border-color:var(--yd);background:var(--yl)}

/* LOADER */
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 20px}
.spin{width:32px;height:32px;border:3px solid #eee;border-top-color:var(--y);border-radius:50%;animation:spin .7s linear infinite}
.loader p{margin-top:12px;font-size:13px;color:var(--text-secondary)}

/* LANG DROPDOWN */
.lang-dd{position:absolute;top:calc(100% + 4px);right:0;background:var(--bg-card);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.15);overflow:hidden;z-index:300;min-width:140px}
.lang-dd button{display:flex;align-items:center;gap:8px;width:100%;padding:11px 16px;border:none;background:none;font-size:13px;color:var(--text-primary);cursor:pointer;font-family:inherit;text-align:left}
.lang-dd button:hover{background:#f5f5f5}
.lang-dd .la{background:var(--yl);font-weight:700;color:#000}

/* NEWS CARD */
.ncard{background:var(--bg-card);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow)}
.ncard img{width:100%;height:140px;object-fit:cover;background:linear-gradient(135deg,var(--y),var(--yd))}
.ncard img[src=""]{display:none}
.ncard-v2 .nc-img{background:linear-gradient(135deg,var(--y),var(--yd))}
.ncard .nc-body{padding:12px 14px}
.ncard .nc-body h4{font-size:13px;font-weight:700;line-height:1.4;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ncard .nc-body p{font-size:11px;color:var(--text-secondary);margin-top:4px}

/* EVENT CARD */
.ecard{background:var(--bg-card);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);display:flex}
.ecard .ec-date{width:70px;background:var(--y);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;flex-shrink:0}
.ecard .ec-date .ed{font-size:24px;font-weight:800;color:#000}.ecard .ec-date .em{font-size:11px;font-weight:700;color:rgba(0,0,0,0.6)}
.ecard .ec-info{padding:12px;flex:1;min-width:0}
.ecard .ec-info h4{font-size:13px;font-weight:700;color:var(--text-primary)}
.ecard .ec-info p{font-size:11px;color:var(--text-secondary);margin-top:3px}


.desk-nav{display:none;align-items:center;gap:2px;flex:1;justify-content:center}
.desk-nav button{padding:6px 12px;border-radius:8px;border:none;background:transparent;color:var(--hdr-text-sub,rgba(0,0,0,0.6));font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:4px}
.desk-nav button:hover{background:var(--hdr-ham-bg,rgba(0,0,0,0.08))}.desk-nav button.on{background:var(--hdr-ham-bg,rgba(0,0,0,0.12));color:var(--hdr-text,#000);font-weight:700}
.desk-nav .dn-ico{font-size:14px}
.hdr-logo{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hdr-logo .lbadge{background:var(--hdr-badge-bg,#222);color:var(--hdr-badge-text,#FFCC00);font-weight:900;font-size:16px;padding:4px 10px;border-radius:6px;letter-spacing:-1px;min-width:44px;text-align:center}
.hdr-logo .ltxt{font-size:10px;line-height:1.2;color:var(--hdr-text-sub,rgba(0,0,0,0.6))}
.hdr-logo .ltxt b{display:block;font-size:12px;font-weight:800;color:var(--hdr-text,#000)}
@media(min-width:768px){nav.mob-nav{display:none!important}.desk-nav{display:flex}.hdr{height:56px}main{padding-top:0;padding-bottom:20px}}
/* RTL */
[dir="rtl"] .drawer{left:auto;right:0;transform:translateX(100%)}
[dir="rtl"] .drawer.open{transform:none}
[dir="rtl"] .lang-dd{right:auto;left:0}
.user-dot{width:16px;height:16px;border-radius:50%;background:#2563eb;border:3px solid #fff;box-shadow:0 0 0 2px rgba(37,99,235,0.3),0 0 12px rgba(37,99,235,0.4);position:relative}
.user-dot::after{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:50%;background:rgba(37,99,235,0.15);animation:userPulse 2s infinite}
@keyframes userPulse{0%{transform:scale(1);opacity:.4}50%{transform:scale(1.8);opacity:0}100%{transform:scale(1);opacity:0}}
.loc-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:20px;border:none;background:#2563eb;color:#fff;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.loc-btn.locating{background:#93c5fd;pointer-events:none}
.route-box{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:0 16px 12px;background:var(--bg-card);border-radius:var(--rad);box-shadow:var(--shadow);border-left:4px solid #2563eb}
.route-box .rv{font-size:18px;font-weight:800}
.route-box .rl{font-size:10px;color:var(--text-secondary)}

/* === HOMESCREEN v3 — MAJOR VISUAL UPGRADE === */
/* Hero with city-color gradient background + skyline silhouette */
.hero-greeting{background:linear-gradient(135deg,var(--y),var(--yd));border-radius:0 0 28px 28px;padding:24px 20px 20px;box-shadow:0 8px 32px rgba(0,0,0,0.1);position:relative;overflow:hidden}
.hero-greeting::before{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40'%3E%3Crect x='10' y='15' width='18' height='25' rx='1' fill='rgba(0,0,0,0.06)'/%3E%3Crect x='32' y='20' width='14' height='20' rx='1' fill='rgba(0,0,0,0.04)'/%3E%3Crect x='50' y='8' width='20' height='32' rx='1' fill='rgba(0,0,0,0.07)'/%3E%3Crect x='74' y='4' width='3' height='36' rx='1' fill='rgba(0,0,0,0.08)'/%3E%3Crect x='82' y='12' width='16' height='28' rx='1' fill='rgba(0,0,0,0.05)'/%3E%3Crect x='102' y='18' width='12' height='22' rx='1' fill='rgba(0,0,0,0.04)'/%3E%3Crect x='130' y='10' width='22' height='30' rx='1' fill='rgba(0,0,0,0.06)'/%3E%3Crect x='156' y='14' width='16' height='26' rx='1' fill='rgba(0,0,0,0.05)'/%3E%3Crect x='180' y='6' width='24' height='34' rx='1' fill='rgba(0,0,0,0.07)'/%3E%3Crect x='208' y='22' width='10' height='18' rx='1' fill='rgba(0,0,0,0.04)'/%3E%3Crect x='224' y='12' width='18' height='28' rx='1' fill='rgba(0,0,0,0.06)'/%3E%3Crect x='248' y='16' width='14' height='24' rx='1' fill='rgba(0,0,0,0.05)'/%3E%3Crect x='268' y='8' width='20' height='32' rx='1' fill='rgba(0,0,0,0.06)'/%3E%3Crect x='294' y='18' width='12' height='22' rx='1' fill='rgba(0,0,0,0.04)'/%3E%3Crect x='312' y='4' width='4' height='36' rx='1' fill='rgba(0,0,0,0.07)'/%3E%3Crect x='322' y='14' width='16' height='26' rx='1' fill='rgba(0,0,0,0.05)'/%3E%3Crect x='344' y='10' width='20' height='30' rx='1' fill='rgba(0,0,0,0.06)'/%3E%3Crect x='370' y='20' width='14' height='20' rx='1' fill='rgba(0,0,0,0.04)'/%3E%3Crect x='388' y='12' width='12' height='28' rx='1' fill='rgba(0,0,0,0.05)'/%3E%3C/svg%3E") repeat-x bottom/400px 40px;pointer-events:none;opacity:.5}
.hero-greeting::after{content:"";position:absolute;top:0;right:-20px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.08)}
.hero-greeting .greeting-text{font-size:28px;font-weight:900;color:var(--hdr-text,#000);letter-spacing:-0.5px}
.hero-greeting .city-label{font-size:12px;color:var(--hdr-text-sub,rgba(0,0,0,0.5));font-weight:600;margin-top:2px}
.hero-weather{display:flex;align-items:center;gap:8px}
.hero-weather .hw-temp{font-size:42px;font-weight:900;color:var(--hdr-text,#000);letter-spacing:-2px}
.hero-weather .hw-icon{font-size:36px}
.hero-weather .hw-feels{font-size:11px;color:var(--hdr-text-sub,rgba(0,0,0,0.45));text-align:right;font-weight:600}

/* Quick Actions — prominent, scrollable */
.quick-actions{display:flex;gap:12px;padding:16px 16px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.quick-actions::-webkit-scrollbar{display:none}
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px;border-radius:18px;border:none;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,0.07);cursor:pointer;font-family:inherit;min-width:76px;flex-shrink:0;transition:all .2s ease;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.qa-btn::after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:3px;border-radius:3px;background:var(--y);opacity:0;transition:opacity .2s}
.qa-btn:hover::after,.qa-btn:active::after{opacity:1}
.qa-btn:active{transform:scale(0.92);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.qa-btn .qa-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .2s}
.qa-btn:active .qa-ico{transform:scale(1.15)}
.qa-btn .qa-lbl{font-size:10px;font-weight:700;color:var(--text);white-space:nowrap;letter-spacing:-0.2px}

/* Tiles — colored left accent + arrow */
.tile-v2{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,0.05);cursor:pointer;transition:all .2s ease;min-height:76px;border:none;border-left:4px solid var(--y);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.tile-v2:active{transform:scale(0.97);box-shadow:0 1px 6px rgba(0,0,0,0.08)}
.tile-v2:hover{box-shadow:0 6px 24px rgba(0,0,0,0.1);transform:translateY(-1px)}
.tile-v2 .tico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;transition:transform .2s}
.tile-v2:active .tico{transform:scale(1.1)}
.tile-v2 .tinfo{flex:1;min-width:0}
.tile-v2 .tinfo h3{font-size:14px;font-weight:700;color:var(--dark);letter-spacing:-0.2px}
.tile-v2 .tinfo p{font-size:11px;color:var(--sub);margin-top:3px;line-height:1.3}
.tile-v2 .tile-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:16px;color:#ccc;font-weight:300;transition:all .2s}
.tile-v2:hover .tile-arrow{color:var(--y);transform:translateY(-50%) translateX(3px)}
.tile-v2 .tile-badge{position:absolute;top:10px;right:10px}

/* Section Headers — bold with accent dot */
.sec-v2{padding:22px 16px 10px;display:flex;align-items:center;gap:8px}
.sec-v2 .sec-icon{font-size:20px}
.sec-v2 h2{font-size:16px;font-weight:800;color:var(--dark);letter-spacing:-0.3px}
.sec-v2 .sec-line{flex:1;height:2px;background:linear-gradient(90deg,var(--bor),transparent);margin-left:8px}

/* Skeleton Loading */
.tile-skeleton{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border-radius:16px;min-height:72px}
.tile-skeleton .ts-ico{width:44px;height:44px;border-radius:12px;background:var(--bor);animation:skeleton 1.5s infinite}
.tile-skeleton .ts-info{flex:1;display:flex;flex-direction:column;gap:6px}
.tile-skeleton .ts-line{height:12px;border-radius:6px;background:var(--bor);animation:skeleton 1.5s infinite}
.tile-skeleton .ts-line.short{width:60%}

/* Empty State */
.empty-state{display:flex;flex-direction:column;align-items:center;padding:48px 24px;text-align:center}
.empty-state .es-icon{font-size:48px;margin-bottom:12px;opacity:0.6}
.empty-state .es-title{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:6px}
.empty-state .es-desc{font-size:13px;color:var(--sub);line-height:1.5;max-width:280px}

/* Enhanced News Cards — larger, better spacing */
.ncard-v2{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all .25s;min-width:280px;max-width:320px;scroll-snap-align:start;flex-shrink:0;cursor:pointer}
.ncard-v2:active{transform:scale(0.97)}
.ncard-v2:hover{box-shadow:0 8px 32px rgba(0,0,0,0.12);transform:translateY(-2px)}
.ncard-v2 .nc-img{width:100%;height:160px;object-fit:cover;background:var(--bor)}
.ncard-v2 .nc-img-placeholder{width:100%;height:160px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,var(--y) 0%,var(--yd) 100%)}
.ncard-v2 .nc-body{padding:14px 16px}
.ncard-v2 .nc-date{font-size:10px;color:var(--sub);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.ncard-v2 .nc-title{font-size:15px;font-weight:700;line-height:1.4;color:var(--dark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}
.ncard-v2 .nc-desc{font-size:12px;color:var(--sub);line-height:1.5;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Stagger animation */
.grid-stagger > *:nth-child(1){animation-delay:0ms}
.grid-stagger > *:nth-child(2){animation-delay:50ms}
.grid-stagger > *:nth-child(3){animation-delay:100ms}
.grid-stagger > *:nth-child(4){animation-delay:150ms}
.grid-stagger > *:nth-child(5){animation-delay:200ms}
.grid-stagger > *:nth-child(6){animation-delay:250ms}

/* Info Banner — gradient card */
.info-banner{margin:0 16px 16px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,var(--y),var(--yd));display:flex;align-items:center;gap:16px;box-shadow:0 6px 24px rgba(255,204,0,0.3);position:relative;overflow:hidden}
.info-banner::after{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.12)}
.info-banner .ib-icon{font-size:32px;flex-shrink:0;position:relative;z-index:1}
.info-banner .ib-title{font-size:15px;font-weight:800;color:#000;position:relative;z-index:1}
.info-banner .ib-desc{font-size:12px;color:rgba(0,0,0,0.55);margin-top:3px;line-height:1.4;position:relative;z-index:1}

/* City Switcher */
.city-chip{padding:14px 18px;border-radius:18px;border:2px solid var(--bor);background:var(--card);cursor:pointer;white-space:nowrap;min-width:120px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,0.05);transition:all .2s;flex-shrink:0}
.city-chip:active{transform:scale(0.95)}
.city-chip.active{border-color:var(--y);background:var(--yl);box-shadow:0 6px 20px rgba(255,204,0,0.2)}.city-chip.active .cc-mods{color:var(--text-primary)}
.city-chip .cc-logo{font-size:14px;font-weight:900;letter-spacing:-0.3px;margin-bottom:4px}
.city-chip .cc-name{font-size:14px;font-weight:700;color:var(--dark)}
.city-chip .cc-mods{font-size:11px;color:var(--text-secondary);margin-top:3px}

/* Search bar upgrade */
.search-bar-v2{margin:14px 16px;position:relative}
.search-bar-v2 input{width:100%;padding:14px 18px 14px 46px;border-radius:16px;border:2px solid var(--bor);background:var(--card);font-size:15px;color:var(--text);outline:none;font-family:inherit;box-shadow:0 2px 12px rgba(0,0,0,0.04);transition:all .2s}
.search-bar-v2 input:focus{border-color:var(--y);box-shadow:0 4px 20px rgba(255,204,0,0.15)}
.search-bar-v2 .si{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--sub)}

/* === SUBPAGE UPGRADES (Parken, etc.) === */
/* Page Hero Banner */
.page-hero{padding:20px 16px 16px;position:relative}
.page-hero .ph-title{font-size:22px;font-weight:900;color:var(--dark);letter-spacing:-0.5px;margin-bottom:4px}
.page-hero .ph-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Stat Cards v2 — colored gradient */
.stat-row{display:flex;gap:10px;padding:0 16px;margin:12px 0}
.stat-card{flex:1;padding:16px 12px;border-radius:16px;text-align:center;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;top:-20px;right:-20px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.15)}
.stat-card .sc-val{font-size:24px;font-weight:900;position:relative;z-index:1}
.stat-card .sc-lbl{font-size:10px;font-weight:600;margin-top:2px;position:relative;z-index:1;opacity:0.7}
.stat-card.sc-green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}
.stat-card.sc-amber{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff}
.stat-card.sc-red{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}
.stat-card.sc-blue{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff}
.stat-card.sc-gray{background:var(--card);color:var(--dark);border:1px solid var(--bor)}
.stat-card.sc-gray .sc-lbl{color:var(--sub)}

/* Occupancy Bar */
.occ-bar{margin:0 16px 12px;padding:14px 16px;background:var(--card);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.occ-bar .ob-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.occ-bar .ob-lbl{font-size:12px;color:var(--sub);font-weight:600}
.occ-bar .ob-val{font-size:14px;font-weight:800}
.occ-bar .ob-track{height:10px;border-radius:5px;background:var(--bor);overflow:hidden}
.occ-bar .ob-fill{height:100%;border-radius:5px;transition:width .8s ease}

/* Tab Switcher v2 */
.tab-switch{display:flex;gap:4px;padding:0 16px;margin:12px 0}
.tab-switch button{flex:1;padding:10px;border-radius:12px;border:none;background:var(--card);color:var(--sub);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.tab-switch button.ta{background:var(--y);color:#000;box-shadow:0 4px 12px rgba(255,204,0,0.3)}

/* Parking List Item v2 */
.pk-item{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);margin:0 16px 8px;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,0.05);cursor:pointer;transition:all .2s;border-left:4px solid var(--y)}
.pk-item:active{transform:scale(0.98)}
.pk-item:hover{box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.pk-item .pk-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;flex-shrink:0}
.pk-item .pk-info{flex:1;min-width:0}
.pk-item .pk-name{font-size:14px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-item .pk-sub{font-size:11px;color:var(--sub);margin-top:3px}
.pk-item .pk-bar{height:5px;border-radius:3px;background:var(--bor);overflow:hidden;margin-top:6px}
.pk-item .pk-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.pk-item .pk-free{font-size:22px;font-weight:900;flex-shrink:0;min-width:50px;text-align:right}
.pk-item .pk-dist{display:flex;align-items:center;gap:4px;margin-top:4px}
.pk-item .pk-dist span{font-size:11px;color:#2563eb;font-weight:600}
.pk-item .pk-dist button{font-size:10px;padding:3px 10px;border-radius:8px;border:none;background:var(--y);color:#000;font-weight:700;cursor:pointer}

/* Map Container v2 */
.map-v2{border-radius:18px;overflow:hidden;margin:0 16px 16px;height:380px;box-shadow:0 4px 20px rgba(0,0,0,0.1);border:2px solid var(--bor)}
.map-v2 .leaflet-container{height:100%;width:100%;background:var(--bg)}

/* === GLOBAL COMPONENT UPGRADES (affects ALL pages) === */

/* Upgraded stat boxes — more padding, better typography, subtle border */
.sbox{flex:1;background:var(--card);border-radius:16px;padding:16px 10px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.05);border:1px solid var(--bor);transition:all .2s}
.sbox .sv{font-size:24px;font-weight:900;letter-spacing:-0.5px}.sbox .sl{font-size:10px;color:var(--sub);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}

/* Upgraded list items — card style, left accent, hover effect */
.litem{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0 16px 8px;background:var(--card);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,0.04);cursor:pointer;transition:all .2s;border-left:3px solid var(--y);border-bottom:none}
.litem:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-1px)}
.litem:active{transform:scale(0.98)}
.litem:last-child{border-bottom:none}
.litem .li-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--yl);flex-shrink:0}
.litem .li-info{flex:1;min-width:0}
.litem .li-info h4{font-size:14px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.litem .li-info p{font-size:11px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Upgraded tab buttons — see chip-bar override below */

/* Upgraded map container — taller, more rounded, better border */
.map-wrap{border-radius:18px;overflow:hidden;margin:0 16px 16px;height:360px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:2px solid var(--bor)}
.map-wrap .leaflet-container{height:100%;width:100%;background:var(--bg)}

/* Upgraded loader — skeleton cards instead of spinner */
.loader{display:flex;flex-direction:column;gap:12px;padding:16px}
.loader .spin{display:none}

/* Upgraded section header — consistent with sec-v2 */
.sec-hdr{padding:20px 16px 10px;display:flex;align-items:center;gap:8px}
.sec-hdr h2{font-size:16px;font-weight:800;color:var(--dark);letter-spacing:-0.3px;flex:1}
.sec-svg{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}
.sec-svg svg{width:20px;height:20px;stroke:var(--y);stroke-width:2}
.svg-tile svg{width:26px;height:26px;stroke:var(--y);stroke-width:1.8}
/* Toast Notifications */
.toast-container{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:calc(100% - 32px);max-width:400px}
.toast{padding:12px 16px;border-radius:12px;background:#1a1a2e;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,0.2);animation:toastIn .3s ease;pointer-events:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.toast.success{background:linear-gradient(135deg,#059669,#34d399);color:#fff}
.toast.error{background:linear-gradient(135deg,#dc2626,#f87171);color:#fff}
.toast.info{background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}
/* Pull to Refresh */
.ptr-indicator{position:fixed;top:50px;left:50%;transform:translateX(-50%);z-index:999;width:40px;height:40px;border-radius:50%;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,0.12);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,transform .2s}
.ptr-indicator.active{opacity:1}
.ptr-indicator.loading{animation:ptrSpin .8s linear infinite}
.ptr-indicator svg{width:20px;height:20px;stroke:var(--y);stroke-width:2.5;fill:none;transition:transform .2s}
@keyframes ptrSpin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
.sec-hdr .more{padding:6px 14px;border-radius:12px;border:2px solid var(--y);background:none;color:var(--y);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}
.sec-hdr .more:hover{background:var(--y);color:#000}

/* Upgraded live badge — slightly larger, bolder */
.live{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:rgba(34,197,94,0.1);font-size:11px;font-weight:700;color:#15803d;letter-spacing:0.2px}
.live .dot{width:7px;height:7px;border-radius:50%;background:#16a34a;animation:pulse 2s infinite}

/* Card upgrade — more rounded, better shadow */
.card{background:var(--card);border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,0.06);overflow:hidden;transition:all .2s}
.card:active{transform:scale(0.98)}
.card:hover{box-shadow:0 6px 24px rgba(0,0,0,0.1)}

/* Stats row spacing */
.stats{display:flex;gap:10px;padding:0 16px;margin:12px 0}

/* Form upgrades */
.form-group input,.form-group textarea,.form-group select{border-radius:14px;border:2px solid var(--bor);transition:all .2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--y);box-shadow:0 0 0 3px rgba(255,204,0,0.15)}
.btn-y{border-radius:var(--radius-pill,999px);font-size:15px;padding:14px 28px;box-shadow:0 4px 16px rgba(255,204,0,0.3)}
.btn-y:hover:not(:disabled){box-shadow:0 6px 24px rgba(255,204,0,0.45);transform:translateY(-2px) scale(1.01)}
.btn-y:active{transform:scale(0.97)}
.btn-o{border-radius:var(--radius-pill,999px)}
.btn-o:hover{background:var(--y);color:#000;border-color:var(--y)}

/* === PILL BUTTON SYSTEM === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--radius-pill,999px);border:none;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .15s ease;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-primary{background:var(--y);color:#000;box-shadow:0 4px 16px rgba(255,204,0,0.3)}
.btn-primary:hover:not(:disabled){box-shadow:0 6px 24px rgba(255,204,0,0.45);transform:translateY(-1px)}
.btn-primary:active:not(:disabled){transform:scale(0.97);box-shadow:0 2px 8px rgba(255,204,0,0.2)}
.btn-secondary{background:transparent;color:var(--text-primary,#1A1A2E);border:2px solid var(--border,#E5E7EB)}
.btn-secondary:hover:not(:disabled){border-color:var(--y);background:var(--yl,rgba(255,204,0,.1))}
.btn-ghost{background:transparent;color:var(--text-secondary,#6B7280);border:none}
.btn-ghost:hover:not(:disabled){background:var(--yl,rgba(255,204,0,.1));color:var(--text-primary,#1A1A2E)}
.btn-sm{padding:7px 16px;font-size:12px}
.btn-lg{padding:15px 32px;font-size:16px}
.btn-block{width:100%;display:flex}

/* Chat messages — better bubbles */
.cmsg{max-width:82%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.6;white-space:pre-wrap;animation:fadeIn .25s ease}
.cmsg-u{background:var(--y);color:var(--hdr-text,#000);border-bottom-right-radius:4px;box-shadow:0 2px 8px rgba(255,204,0,0.2)}
.cmsg-a{background:var(--card);color:var(--text);border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid var(--bor)}
.chat-input{gap:8px;padding:12px 16px;background:var(--card);border-top:1px solid var(--bor);box-shadow:0 -4px 16px rgba(0,0,0,0.04)}
.chat-input input{border-radius:24px;border:2px solid var(--bor);padding:12px 18px;font-size:15px}
.chat-input input:focus{border-color:var(--y);box-shadow:0 0 0 3px rgba(255,204,0,0.15)}
.chat-input button{width:44px;height:44px;border-radius:50%;font-size:20px;box-shadow:0 4px 12px rgba(255,204,0,0.3)}

/* News cards global upgrade */
.ncard{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.06);transition:all .2s}
.ncard:hover{box-shadow:0 6px 24px rgba(0,0,0,0.1)}
.ncard .nc-body{padding:14px 16px}
.ncard .nc-body h4{font-size:14px;line-height:1.4}

/* Drawer upgrade */
.drawer{width:300px;border-radius:0 20px 20px 0;box-shadow:8px 0 40px rgba(0,0,0,0.2)}
.drawer-item{border-radius:10px;margin:2px 8px;padding:12px 14px;font-size:14px}
.drawer-item:hover,.drawer-item.act{background:var(--yl);border-radius:10px}

/* Bottom nav upgrade */
nav{background:var(--card);border-top:none;box-shadow:0 -4px 24px rgba(0,0,0,0.08);border-radius:20px 20px 0 0}
.ni button{gap:3px;padding:6px 12px;font-size:10px;font-weight:600;border-radius:12px;transition:all .2s}
.ni .on{color:#000;background:var(--yl);border-radius:12px}
/* SVG Icon System */
.svg-nav{display:inline-flex;align-items:center;justify-content:center}
.svg-nav svg{width:20px;height:20px;stroke:var(--sub);stroke-width:1.8;transition:all .2s}
.ni .on .svg-nav svg{stroke:var(--y);stroke-width:2.2;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1))}
.dn-ico.svg-nav svg{width:16px;height:16px;stroke:currentColor}
.svg-qa{display:flex;align-items:center;justify-content:center}
.svg-qa svg{width:24px;height:24px;stroke-width:1.8;stroke:currentColor}
/* City Hero Image */
.city-hero{position:relative;margin:0 16px 16px;border-radius:20px;overflow:hidden;height:160px;background:linear-gradient(135deg,var(--y),#f59e0b);box-shadow:0 8px 32px rgba(0,0,0,0.12)}
.city-hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 20px;background:linear-gradient(0deg,rgba(0,0,0,0.5) 0%,transparent 60%);color:#fff;z-index:1}
.city-hero h2{font-size:22px;font-weight:900;letter-spacing:-0.5px;margin:0;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.city-hero p{font-size:12px;opacity:0.9;margin:4px 0 0;font-weight:500}
.city-skyline{position:absolute;bottom:0;left:0;right:0;height:60px;z-index:0;overflow:hidden;max-height:60px;pointer-events:none}
.city-skyline svg{width:100%;height:100%;max-height:60px;display:block}

/* Route box upgrade */
.route-box{border-radius:16px;border-left:4px solid #2563eb;box-shadow:0 4px 16px rgba(37,99,235,0.1)}

/* Search bar global */
.search-bar{margin:14px 16px}
.search-bar input{border-radius:16px;border:2px solid var(--bor);padding:14px 18px 14px 46px;font-size:15px;box-shadow:0 2px 10px rgba(0,0,0,0.04)}
.search-bar input:focus{border-color:var(--y);box-shadow:0 4px 20px rgba(255,204,0,0.15)}

/* Progress bar upgrade */
.pbar{height:8px;border-radius:4px;background:var(--bor)}
.pfill{border-radius:4px}

/* Language dropdown */
.lang-dd{border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.18)}
.lang-dd button{padding:12px 16px;font-size:14px;border-radius:8px;margin:2px 4px}

/* === ICON SYSTEM UPGRADE — Professional emoji containers === */
.qa-ico{background:linear-gradient(135deg,var(--ico-bg,#FFF8E1),var(--ico-bg2,#FFF3E0))!important;box-shadow:0 3px 12px rgba(0,0,0,0.08);border:1.5px solid rgba(0,0,0,0.04)}
.li-ico{background:linear-gradient(135deg,var(--ico-bg,var(--yl)),rgba(255,255,255,0.8))!important;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)}
.tico{background:linear-gradient(135deg,var(--ico-bg,var(--yl)),rgba(255,255,255,0.6))!important;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)}
.pk-icon{box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)}
.dic{background:linear-gradient(135deg,var(--yl),rgba(255,204,0,0.15))!important;box-shadow:0 2px 6px rgba(0,0,0,0.05)}
.stat-card{box-shadow:0 4px 16px rgba(0,0,0,0.08)}
.ncard-v2{box-shadow:0 4px 20px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)}

/* === DARK MODE FINE-TUNING === */
.dark-mode .qa-ico,.dark-mode .li-ico,.dark-mode .tico,.dark-mode .dic{border-color:rgba(255,255,255,0.08)!important;box-shadow:0 2px 8px rgba(0,0,0,0.2)!important}
.dark-mode .tile-v2{border-color:var(--bor);box-shadow:0 2px 10px rgba(0,0,0,0.15)}
.dark-mode .tile-v2:hover{box-shadow:0 4px 20px rgba(0,0,0,0.25)}
.dark-mode .pk-item{border-color:var(--bor);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.dark-mode .card{border:1px solid var(--bor)}
.dark-mode .ncard-v2{border-color:var(--bor)}
.dark-mode .litem{box-shadow:0 2px 6px rgba(0,0,0,0.12);border-color:var(--bor)}
.dark-mode .sbox{border-color:var(--bor);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.dark-mode .search-bar input,.dark-mode .search-bar-v2 input{background:var(--card);color:var(--text);border-color:var(--bor)}
.dark-mode .hero-greeting{box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.dark-mode .info-banner{box-shadow:0 6px 24px rgba(0,0,0,0.3)}
.dark-mode .stat-card{box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.dark-mode .form-group input,.dark-mode .form-group textarea,.dark-mode .form-group select{background:var(--card);color:var(--text);border-color:var(--bor)}
.dark-mode .chat-input{background:var(--card);border-color:var(--bor)}
.dark-mode .chat-input input{background:var(--bg);color:var(--text);border-color:var(--bor)}
.dark-mode .overlay.open{background:rgba(0,0,0,0.6)}
.dark-mode .lang-dd{background:var(--card);border:1px solid var(--bor)}
.dark-mode .lang-dd button{color:var(--text)}
.dark-mode .lang-dd button:hover{background:var(--yl)}
.dark-mode .occ-bar{background:var(--card);border:1px solid var(--bor)}
.dark-mode .route-box{background:var(--card);border-color:var(--bor)}
.dark-mode .svg-nav svg{stroke:var(--sub)}
.dark-mode .ni .on .svg-nav svg{stroke:var(--y)}
.dark-mode .svg-qa svg{stroke:currentColor;opacity:0.9}
.dark-mode .hero-greeting{background:linear-gradient(135deg,rgba(255,204,0,0.2),rgba(255,204,0,0.05))!important}
.dark-mode .drawer{background:var(--card)}
.dark-mode .drawer-head{background:var(--y)}
.dark-mode .drawer-sep{background:var(--bor)}
.dark-mode .drawer-foot{border-color:var(--bor)}
.dark-mode .city-chip{background:var(--card);border-color:var(--bor)}
.dark-mode .city-chip.active{border-color:var(--y);background:var(--yl)}
.dark-mode .cc-name{color:var(--dark)}
.dark-mode nav{box-shadow:0 -4px 24px rgba(0,0,0,0.2)}

/* === ENHANCED SKELETON LOADERS === */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{background:linear-gradient(90deg,var(--bor) 25%,rgba(255,255,255,0.15) 37%,var(--bor) 63%);background-size:800px 100%;animation:shimmer 1.8s ease-in-out infinite;border-radius:8px}
.dark-mode .skel{background:linear-gradient(90deg,#2a2a3e 25%,#3a3a50 37%,#2a2a3e 63%);background-size:800px 100%}

/* Smooth page transitions */
main{animation:fadeIn .2s ease}

/* === DESIGN SYSTEM FOUNDATION === */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

/* [data-theme=dark] block */
[data-theme="dark"] {
  --bg-primary:#0F0F0F;--bg-card:#1E1E1E;--bg-elevated:#252525;
  --text-primary:#F0F0F0;--text-secondary:#A0A0A0;--text-tertiary:#6B6B6B;
  --accent:#FFD60A;--accent-hover:#FFC800;
  --border:#333333;--border-light:#2A2A2A;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.5);
  --bg:#0F0F0F;--card:#1E1E1E;--text:#F0F0F0;--sub:#A0A0A0;--bor:#333333;
}

/* Skeleton loader using new tokens */
.skeleton{background:var(--border-light);border-radius:var(--radius-sm);position:relative;overflow:hidden;}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:shimmer 1.5s ease-out infinite;}

/* Token utility classes */
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}
.radius-sm{border-radius:var(--radius-sm)}.radius-md{border-radius:var(--radius-md)}.radius-lg{border-radius:var(--radius-lg)}

html{scroll-behavior:smooth}

/* === MICRO ANIMATIONS V2 === */
/* List item stagger entrance */
.stagger-in>*{opacity:0;transform:translateY(16px);animation:fadeSlideIn .3s var(--ease-decelerate,cubic-bezier(0,0,.2,1)) forwards}
.stagger-in>*:nth-child(1){animation-delay:0ms}
.stagger-in>*:nth-child(2){animation-delay:50ms}
.stagger-in>*:nth-child(3){animation-delay:100ms}
.stagger-in>*:nth-child(4){animation-delay:150ms}
.stagger-in>*:nth-child(5){animation-delay:200ms}
.stagger-in>*:nth-child(6){animation-delay:250ms}
.stagger-in>*:nth-child(n+7){animation-delay:300ms}
@keyframes fadeSlideIn{to{opacity:1;transform:translateY(0)}}
/* Page transition */
.page-enter{animation:pageIn .3s var(--ease-decelerate,cubic-bezier(0,0,.2,1)) forwards}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Card lift */
.card-lift{transition:transform .2s var(--ease-standard,cubic-bezier(.4,0,.2,1)),box-shadow .2s ease}
.card-lift:active{transform:scale(0.98) translateY(1px)}
@media(hover:hover){.card-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg,0 4px 16px rgba(0,0,0,0.12))}}
/* Counter animation */
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.count-animate{animation:countUp .4s var(--ease-decelerate,cubic-bezier(0,0,.2,1))}
/* Badge pulse */
.badge-pulse{animation:badgePulse 2s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* Bottom sheet */
.bottom-sheet{transform:translateY(100%);transition:transform .4s var(--ease-bounce,cubic-bezier(.34,1.56,.64,1))}
.bottom-sheet.open{transform:translateY(0)}
.bottom-sheet .sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--text-tertiary,#9CA3AF);margin:8px auto}
/* Toast upgrade */
@keyframes toastIn{from{transform:translateY(100px) scale(0.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes toastOut{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(100px) scale(0.9);opacity:0}}
/* Card-lift applied globally to key elements */
.listing-card,.litem,.sbox{transition:transform .2s var(--ease-standard,cubic-bezier(.4,0,.2,1)),box-shadow .2s ease}
.listing-card:active,.litem:active,.sbox:active{transform:scale(0.98)}
@media(hover:hover){.listing-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg,0 4px 16px rgba(0,0,0,0.12))}}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* === FILTER / TAB CHIPS V2 === */
.chip-bar{display:flex;gap:8px;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chip-bar::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-pill,999px);border:1.5px solid var(--border,#E5E7EB);background:transparent;font-size:14px;font-weight:500;white-space:nowrap;min-height:36px;cursor:pointer;transition:all .2s var(--ease-standard,cubic-bezier(.4,0,.2,1));color:var(--text-secondary,#6B7280);font-family:var(--font);-webkit-tap-highlight-color:transparent}
.chip:active{transform:scale(0.96)}
.chip.active,.chip.selected{background:var(--accent,#F5C518);color:var(--accent-text,#1A1A2E);border-color:var(--accent,#F5C518);font-weight:600;box-shadow:0 2px 8px rgba(245,197,24,0.25)}
.chip .chip-count{background:rgba(0,0,0,0.1);border-radius:var(--radius-pill,999px);padding:1px 6px;font-size:11px;font-weight:600}
.chip.active .chip-count{background:rgba(0,0,0,0.15)}
/* Segmented Control */
.seg-control{display:inline-flex;background:var(--border-light,#F3F4F6);border-radius:var(--radius-pill,999px);padding:4px;gap:2px}
.seg-item{padding:8px 18px;border-radius:var(--radius-pill,999px);font-size:13px;font-weight:500;border:none;background:transparent;color:var(--text-secondary,#6B7280);cursor:pointer;transition:all .25s var(--ease-standard,cubic-bezier(.4,0,.2,1));font-family:var(--font)}
.seg-item.active{background:var(--bg-card,#fff);color:var(--text-primary,#1A1A2E);font-weight:600;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.06))}
/* Override .tabs to use chip-bar look */
.tabs{display:flex;gap:8px;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:4px 0}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-pill,999px)!important;border:1.5px solid var(--border,#E5E7EB)!important;background:transparent!important;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s var(--ease-standard,cubic-bezier(.4,0,.2,1));color:var(--text-secondary,#6B7280);font-family:var(--font);box-shadow:none!important;flex:unset!important}
.tabs button:active{transform:scale(0.96)}
.tabs .ta{background:var(--accent,#F5C518)!important;color:var(--accent-text,#1A1A2E)!important;border-color:var(--accent,#F5C518)!important;font-weight:600!important;box-shadow:0 2px 8px rgba(245,197,24,0.25)!important}
.dark-mode .chip,.dark-mode .tabs button{border-color:var(--bor);color:var(--sub)}
.dark-mode .chip.active,.dark-mode .tabs .ta{background:var(--y)!important;color:#000!important;border-color:var(--y)!important}

/* === LISTING CARDS V2 — Image-First === */
.listing-card{background:var(--bg-card);border-radius:var(--radius-md,12px);overflow:hidden;box-shadow:var(--shadow-md,0 2px 8px rgba(0,0,0,0.08));transition:transform .2s ease,box-shadow .2s ease;margin-bottom:12px}
.listing-card:active{transform:scale(0.98);box-shadow:var(--shadow-sm)}
.listing-card__img-wrap{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--border-light,#F3F4F6)}
.listing-card__img-wrap img{width:100%;height:100%;object-fit:cover}
.listing-card__badge{position:absolute;top:8px;left:8px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(255,255,255,0.92);backdrop-filter:blur(4px);color:var(--text-primary)}
.listing-card__badge.deal{background:var(--success,#10B981);color:#fff}
.listing-card__badge.fair{background:var(--accent,#F5C518);color:#000}
.listing-card__fav{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.85);backdrop-filter:blur(4px);display:grid;place-items:center;border:none;cursor:pointer;font-size:16px;transition:transform .15s ease}
.listing-card__fav:active{transform:scale(1.2)}
.listing-card__fav.active{color:#ef4444}
.listing-card__body{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.listing-card__price{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-0.02em}
.listing-card__title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listing-card__specs{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.listing-card__spec{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);background:var(--border-light,#F3F4F6);padding:3px 8px;border-radius:999px}
.listing-card__market{font-size:12px;color:var(--text-tertiary,#9CA3AF);margin-top:4px}
.listing-card__actions{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 14px}
.listing-card__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#F3F4F6,#E5E7EB);font-size:48px}
.dark-mode .listing-card__spec{background:var(--card);color:var(--sub)}
.dark-mode .listing-card__placeholder{background:linear-gradient(135deg,#2a2a3e,#1e1e2e)}

/* === ONBOARDING === */
.ob-wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.ob-progress{display:flex;gap:4px;padding:16px 16px 0}
.ob-progress-bar{flex:1;height:4px;border-radius:4px;transition:all .3s}
.ob-step-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}
.ob-step-pad{flex:1;padding:20px}
.ob-emoji{font-size:64px;margin-bottom:16px}
.ob-title{font-size:24px;font-weight:900;margin-bottom:8px;letter-spacing:-.02em;color:var(--text-primary)}
.ob-sub{color:var(--text-secondary);font-size:14px;max-width:300px;line-height:1.5;margin-bottom:24px}
.ob-cities{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px;width:100%}
.ob-city-btn{padding:14px 8px;border-radius:14px;border:2px solid var(--border,#eee);background:var(--bg-card,#fff);cursor:pointer;font-family:var(--font);transition:all .15s;text-align:center}
.ob-city-btn.selected{border-color:var(--accent,#FFCC00);background:var(--yl)}
.ob-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:340px;margin:0 auto}
.ob-cat-btn{padding:16px;border-radius:14px;border:2px solid var(--border,#eee);background:var(--bg-card,#fff);cursor:pointer;font-family:var(--font);text-align:center;transition:all .15s}
.ob-cat-btn.selected{border-color:var(--accent,#FFCC00);background:var(--yl)}
.ob-actions{display:flex;gap:10px;margin-top:24px;justify-content:center}
.ob-cta{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px}
.ob-back{padding:12px 24px;border-radius:var(--radius-pill,999px);border:1.5px solid var(--border,#ddd);background:transparent;cursor:pointer;font-size:14px;font-family:var(--font);color:var(--text-primary);transition:all .2s}
.ob-back:hover{background:var(--yl)}
.ob-ghost{padding:12px;border-radius:var(--radius-pill,999px);border:1.5px solid var(--border,#ddd);background:transparent;cursor:pointer;font-size:13px;font-family:var(--font);color:#2563eb;transition:all .2s;width:100%}
.dark-mode .ob-city-btn,.dark-mode .ob-cat-btn{background:var(--card);border-color:var(--bor)}

/* SAFE AREA */
.hdr{padding-top:env(safe-area-inset-top)}
main{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
.modal,.overlay-content,.drawer{padding-top:env(safe-area-inset-top)}
/* === TOUCH TARGETS (min 44px) ===*/
.drawer-item,.ni button,.chip,.tabs button,.filter-chip,.listing-card__fav,.back-btn,.ham,.lang-btn{min-height:44px}
a,button{min-height:44px;min-width:44px}

/* === DEFENSIVE: Prevent decorative pseudo-elements from overflowing on subpages === */
main{overflow:hidden;position:relative}
main *{max-width:100vw}

/* PWA OVERSCROLL + USER-SELECT */
@media (display-mode: standalone) { html, body { overscroll-behavior: none; } }
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

/* MODULE TILE ICON — gradient-aware contrast */
.tile-v2 .tico{background-size:100% 100%}

/* NUCLEAR BLOB FIX — kill any escaped SVG/shape that overflows main */
main svg{max-height:200px!important}
main [style*="position:absolute"][style*="bottom:0"]{max-height:60px!important;overflow:hidden!important}
.city-skyline,.city-hero{overflow:hidden!important;max-height:160px!important}
svg path[d^="M0,60"]{pointer-events:none}


/* === Mobile Text-Fit Fixes v2 (2026-07, Runline) === */
.chip{flex-shrink:0}
.tile .tinfo,.tile-v2 .tinfo{min-width:0;flex:1 1 auto}
.tile .tinfo h3,.tile-v2 .tinfo h3,.tinfo h3{overflow-wrap:break-word;word-break:normal;-webkit-hyphens:auto;hyphens:auto;letter-spacing:-0.2px}
.tile .tinfo p,.tile-v2 .tinfo p{overflow-wrap:break-word;word-break:normal}
.tile-v2 .tile-badge .live,.tile .tile-badge .live,.tile-badge .live{font-size:8px;padding:2px 5px;line-height:1;gap:3px}
.tile{position:relative}
.tile:has(> button) .tinfo{padding-right:52px}
/* MOBIL: eine Kachel pro Reihe, damit nichts mehr staucht */
@media (max-width:600px){
  .grid.g2{grid-template-columns:1fr !important}
  .tile,.tile-v2{min-height:60px}
  .tile-v2 .tinfo h3{font-size:15px}
}
.hdr h1{overflow-wrap:break-word;line-height:1.15;font-size:16px}

/* Premium: Anmeldung seitlich statt ganz unten (24.07.2026) */
.prem-split{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.prem-split>.prem-side{order:-1;overflow:hidden}
.prem-split>.prem-main{min-width:0}
@media(min-width:820px){
  .prem-split{flex-direction:row;align-items:flex-start;gap:18px}
  .prem-split>.prem-side{order:0;flex:0 0 330px;width:330px;position:sticky;top:80px}
  .prem-split>.prem-main{flex:1 1 auto}
}
@media(min-width:1100px){
  .prem-split>.prem-side{flex:0 0 380px;width:380px}
}

/* Header-Ueberlauf auf schmalen Displays (24.07.2026):
   hdr-right darf nicht schrumpfen, der linke Teil kuerzt stattdessen mit ... */
.hdr-left{min-width:0;flex:1 1 auto;overflow:hidden}
.hdr-right{flex:0 0 auto}
.hdr-left>*{flex-shrink:0}
@media(max-width:430px){
  .hdr{padding:0 10px}
  .hdr-left{gap:6px}
  .hdr-left>span,.hdr-left>div:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Kopfzeile aufgeraeumt (24.07.2026):
   Menue immer ganz links, Zurueck nur als Pfeil, Produktname nur auf der Startseite */
.hdr-left .ham{order:-1}
.hdr-left .back-btn{order:0;padding:6px 8px;min-width:34px;gap:0}
.hdr-left .back-btn .ba{font-size:20px;line-height:1}
.hdr.hdr-sub .ltxt{display:none}
.hdr.hdr-sub .hdr-logo{gap:0}
.hdr-left h1{font-size:16px;font-weight:800;line-height:1.15;max-height:2.4em;overflow:hidden}

/* Menue-Schublade: schmaler, ohne sichtbare Bildlaufleiste (weisser Streifen) */
.drawer{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.drawer::-webkit-scrollbar{width:0;height:0;display:none}
@media(max-width:520px){
  .drawer.drawer{width:min(78vw,264px);border-radius:0 16px 16px 0}
}

/* 24.07.2026: Auf dem Desktop darf die linke Kopfhaelfte nicht mehr dehnen,
   sonst schiebt sie die mittige Navigation nach rechts. Auf Mobil bleibt sie
   dehnbar, weil dort der Seitentitel mit Auslassungspunkten kuerzen muss. */
@media(min-width:768px){
  .hdr-left{flex:0 0 auto}
  .hdr-right{flex:0 0 auto}
  .desk-nav{flex:1 1 auto;justify-content:center;min-width:0}
}
@media(min-width:1280px){
  .desk-nav{position:absolute;left:50%;transform:translateX(-50%);flex:0 0 auto}
}

/* 24.07.2026: Bereichs-Koepfe und Hero-Karten kompakter, damit oben weniger
   Platz verloren geht und mehr Inhalt ohne Scrollen sichtbar ist. */
.sec-hdr h2{font-size:19px;line-height:1.15}
.sec-hdr{padding-top:10px;padding-bottom:6px}
@media(max-width:600px){
  .sec-hdr h2{font-size:17px}
  .sec-hdr{padding-top:8px;padding-bottom:4px}
}