/* AlltagsPilot V9 — Midnight Edition | mobile-first visual system. */
:root{
  --bg:#070d19;--panel:#111d2e;--panel2:#16253a;--line:#25364a;
  --text:#f4f7fc;--muted:#a7b6ca;--mint:#78e4d1;--blue:#9bbcff;
  --orange:#f7c995;--red:#ffabb0;--radius:22px;
  --v9-elevated:#132137;--v9-stroke:#24364d;--v9-hairline:rgba(161,190,222,.12);
}
html{color-scheme:dark;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,Roboto,sans-serif;
  background:
    radial-gradient(ellipse 57% 27% at 11% -9%,rgba(47,101,137,.18),transparent 82%),
    radial-gradient(ellipse 50% 31% at 98% 0%,rgba(55,75,133,.13),transparent 83%),
    #070d19;
  color:var(--text);letter-spacing:-.09px;
}
.app{max-width:1210px;padding:0 clamp(18px,3.5vw,46px) 100px}
button,input,textarea,select{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.v9-dock-item:focus-visible{outline:2px solid #91f2e2;outline-offset:3px}
/* Masthead */
.bar{height:76px;border-bottom:1px solid var(--v9-hairline);background:transparent;gap:12px}
.brand{font-size:21px;letter-spacing:-.8px;gap:12px;white-space:nowrap}
.brand-name{display:flex;flex-direction:column;font-size:21px;line-height:1.1;font-weight:820;letter-spacing:-.75px}
.brand-name small{margin-top:5px;font-size:9px;letter-spacing:1.8px;color:#8ea4bb;font-weight:700}
.brand-mark{width:44px;height:44px;flex-shrink:0;border-radius:14px;
  background:linear-gradient(142deg,#99eee0 0%,#75c7db 62%,#829fea 100%);
  box-shadow:inset 0 1px 0 #ffffff85,0 6px 22px rgba(71,175,183,.12);color:#0d2640;font-size:25px}
.bar-right{gap:12px}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(18,35,52,.77);border:1px solid #294c57;
  color:#a1e2d7;font-size:10px;letter-spacing:1.15px;font-weight:800;border-radius:99px;padding:9px 13px}
.beta-dot,.v9-live i{display:inline-block;width:6px;height:6px;background:#80e7d2;border-radius:50%;box-shadow:0 0 0 3px rgba(120,228,209,.13)}
.v9-profile{border:1px solid #33495e;color:#d8e8f7;background:#17253a;width:40px;height:40px;border-radius:14px;font-size:12px;font-weight:800}
.v9-profile:hover{background:#1e344d}
.user-dot{display:none}
/* Compact, calm hero */
.hero{position:relative;padding:39px 0 31px;grid-template-columns:minmax(0,1fr) 268px;gap:45px;align-items:center}
.hero .eyebrow{letter-spacing:2.1px;font-size:10px;color:#89dbcf;margin:0 0 14px}
.v9-spark{font-size:17px;vertical-align:middle;margin-right:7px;color:#b9caff}
.hero h1{font-size:clamp(38px,4.35vw,54px);line-height:1.08;letter-spacing:-2.15px;margin-bottom:13px;font-weight:820}
.hero h1 .colored{color:#8be7d5}
.lead{font-size:14px;color:#aab9ce;max-width:540px;line-height:1.72}
.v9-hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:19px}
.v9-hero-actions .primary,.v9-hero-actions .secondary{min-height:42px;font-size:12px;padding:11px 17px}
.v9-hero-actions span{margin-left:6px}
.hero-art{min-height:188px;padding:20px 21px;background:linear-gradient(142deg,#12243a,#111e33 66%,#162743);
  border:1px solid #294258;box-shadow:0 14px 35px #00000023;border-radius:24px}
.hero-art:before{width:160px;height:160px;background:#78e4d115;right:-65px;top:-65px;filter:blur(45px)}
.art-head{font-size:10px;letter-spacing:1px;color:#acc1d3}
.v9-live{display:flex;align-items:center;gap:8px;font-size:10px}
.art-ring{width:104px;height:104px;border-width:9px;border-color:#263a53;border-top-color:#8be7d5;border-right-color:#8be7d5;margin-top:10px}
.art-ring span{font-size:11px;color:#9fb6ca}
.art-ring b{font-size:24px;color:#eef9f6}
.art-bottom{margin-top:8px;font-size:11px;color:#8ea7be}
.install-banner{background:linear-gradient(100deg,#10272f,#102032 85%);border:1px solid #294852;border-radius:17px;padding:13px 18px;margin:0 0 19px}
.install-banner strong{font-size:13px;color:#d7f8f2}
.install-banner p{color:#9fb4c9;font-size:12px}
/* Desktop tabs */
.tabs{gap:5px;margin:0 0 26px;padding:10px 0 13px;border-bottom:1px solid var(--v9-hairline);
  background:rgba(7,13,25,.96);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  scrollbar-color:#344b63 transparent;scrollbar-width:thin;scroll-snap-type:x proximity}
.tab{background:transparent;color:#92a5bb;font-size:12px;letter-spacing:.01em;padding:11px 13px;border:1px solid transparent;border-radius:12px;min-height:43px}
.tab:hover{background:#17263c;color:#dce8f6}
.tab.active{background:#1c3b47;color:#b0f4e6;border:1px solid #356b6d;box-shadow:inset 0 1px 0 rgba(158,238,221,.08)}
/* Shared surfaces and controls */
.card{border:1px solid #25354a;background:linear-gradient(152deg,rgba(19,32,52,.97),rgba(12,23,40,.98));
  box-shadow:0 16px 42px rgba(0,0,0,.10);border-radius:20px;padding:clamp(18px,2.3vw,25px)}
.card h2{font-size:19px;letter-spacing:-.4px;color:#edf3fa}
.section-top{margin-top:24px}.section-top h2{font-size:21px;color:#eef5fc}
.subtitle,.v8-lead{color:#9eafc3;font-size:13px}
.primary{background:linear-gradient(135deg,#8cebd7,#82d7d5);border:1px solid #a6f7e0;color:#082c34;font-size:13px;
  font-weight:800;letter-spacing:-.05px;border-radius:12px;box-shadow:none;padding:12px 18px;transition:background .18s,transform .18s}
.primary:hover{background:linear-gradient(135deg,#a2f3e3,#9be1de);box-shadow:0 6px 22px #74e6ce26}
.secondary{background:#18283c;border:1px solid #33475f;color:#cfdff0;border-radius:12px;font-size:12px;padding:11px 14px;box-shadow:none}
.secondary:hover{background:#22364f;border-color:#49637c}
.input-box,.v8-field,.cal-quick,.route-field,.weather-field,.shop-field,.cam-edited,.cal-form input,.cal-form textarea,.cal-form select{
  background:#0b1828;color:#eff7ff;border-color:#32455d;border-radius:12px;font-size:16px}
.input-box::placeholder,.v8-field::placeholder,.route-field::placeholder,.shop-field::placeholder{color:#8093aa}
.input-label,.v8-label,.cal-form label{color:#c8d7e5}
.kpi,.v8-stat,.shop-stat,.route-stats>div,.weather-fact{background:#13243a;border:1px solid #263a52;border-radius:16px;box-shadow:none}
.v8-stat.highlight{background:#15323e;border-color:#2e5a60}
.v8-stat .label,.v8-stat small{color:#a2b4c8}
.v8-stat strong{color:#f0f6ff;font-weight:780}
.v8-stats{gap:12px}
.v8-section-header h2{color:#f2f7fc}
.v8-section-header p{color:#9cafc3}
.v8-kicker{color:#8fe3d4}
.day-hello{background:linear-gradient(123deg,#172d3c,#15243b 63%,#1a2a45);border:1px solid #345064;
  box-shadow:inset 0 1px 0 rgba(200,234,251,.04);padding:26px 30px;border-radius:23px;margin-bottom:17px}
.day-hello:before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;background:linear-gradient(#8de7d6,#8ab8f1);border-radius:0 4px 4px 0;opacity:.8}
.day-hello:after{color:#9bcbe811;font-size:180px;right:28px;top:-36px}
.day-hello h2{font-size:clamp(27px,3.4vw,38px);letter-spacing:-1.3px}
.day-hello p{color:#a8bfd0;font-size:13px}
.day-weather-card{background:linear-gradient(140deg,#14263c,#132035);border-color:#29465a}
.day-item,.task,.rem-item,.fin-item,.cal-item,.shop-item{background:#101f32;border-color:#293e54;border-radius:13px}
.day-item:hover{background:#182b42}
.v8-action{background:#152b40;border:1px solid #2b475e;color:#d8e6f2;border-radius:13px;font-weight:690;font-size:12px}
.v8-action:hover{background:#213b54}
.v8-note,.tip,.cam-notice,.route-privacy,.weather-notice{background:#10252f;border:1px solid #2b4e55;color:#b5d2d4;border-radius:14px}
.v8-note strong{color:#e3f6f2}
.v8-badge,.v8-pill{background:#173a3f;border:1px solid #2d6766;color:#9ee9d5}
.v8-voice-visual{background:radial-gradient(circle at center,#1c4654,#13233b 73%);border-color:#335f67}
.idea,.focus,.weather-box,.weather-day,.weather-hour,.route-result,.shop-item,.cal-day,.cal-next,.cal-item{background:#102237;border-color:#2b3e54}
.idea p,.cal-hint,.cam-hint,.weather-when,.weather-day .w-day{color:#a8b9c9}
.route-result,.cal-next,.weather-advice{background:#122f35;border-color:#305b5e;color:#bee5d9}
.route-stats strong,.fin-positive{color:#8ee2d2}
.ki-grid textarea,.ki-grid input,.ki-grid select{color-scheme:dark}
.weather-choice button{background:#162a3b;border-color:#35516a;color:#d6e9f4}
.cal-day.is-today{outline-color:#8be7d5}
.cal-day.is-picked{background:#1a464b;border-color:#79dbcd;color:#e8fffa}
.cal-day .dots i,.shop-item .shop-check[aria-pressed="true"]{background:#8be7d5}
.shop-item .shop-check[aria-pressed="true"]{color:#15322c;border-color:#8be7d5}
.foot{color:#849bb1;border-color:var(--v9-hairline);font-size:11px;line-height:1.75;margin-top:36px}
.legal-link{color:#b4d7e5}
/* Small, intentional info details */
.v9-kicker{color:#9fe6d7;font-size:10px;letter-spacing:1.8px;font-weight:800}
.v9-dock,.v9-backdrop,.v9-more{display:none}
@media(max-width:850px){
  .hero{grid-template-columns:minmax(0,1fr);gap:15px}.hero-art{display:none}
  .grid,.v8-layout,.v8-split,.camera-grid,.route-grid,.weather-grid,.cal-layout{grid-template-columns:1fr}
}
@media(max-width:780px){
  .app{padding:0 17px calc(118px + env(safe-area-inset-bottom,0px))}
  .bar{height:67px;gap:7px}
  .brand{gap:9px}.brand-mark{width:39px;height:39px;border-radius:13px;font-size:23px}
  .brand-name{font-size:19px}.brand-name small{font-size:7px;letter-spacing:1.25px;margin-top:4px}
  .badge{font-size:9px;letter-spacing:.7px;padding:7px 9px;gap:7px;white-space:nowrap}
  .bar-right{gap:7px}.v9-profile{display:none}
  .hero{padding:25px 0 23px;margin:0;gap:0}
  .hero .eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:12px}
  .hero h1{font-size:clamp(32px,9vw,41px);letter-spacing:-1.6px;margin:0 0 11px}
  .hero .lead{max-width:400px;line-height:1.6;font-size:13px;color:#a8b7ca}
  .v9-hero-actions{margin-top:16px;gap:9px}
  .v9-hero-actions .primary,.v9-hero-actions .secondary{font-size:12px;padding:10px 12px;min-height:42px}
  .tabs{display:none!important}
  .install-banner{padding:12px 13px;margin:0 0 18px;gap:11px;flex-wrap:wrap}
  .install-banner strong{font-size:12px}.install-banner button{width:auto}
  .day-hello{padding:24px 23px;margin-bottom:13px}
  .day-hello h2{font-size:30px;margin:6px 0}
  .day-hello p{font-size:12px}
  .card{border-radius:17px;padding:18px}
  .v8-stats{gap:8px;margin-bottom:14px}.v8-stat{padding:13px 11px;border-radius:14px}
  .v8-stat strong{font-size:26px}.v8-stat small{font-size:10px}.v8-stat .label{font-size:11px}
  .v8-actions{gap:9px}
  .v8-action{padding:12px 11px}
  .v8-action span{font-size:19px}
  .section-top h2,.card h2{font-size:19px}
  .v8-section-header h2{font-size:27px}
  .idea-grid{grid-template-columns:1fr}
  /* Native-feeling dock, always reachable on iOS */
  .v9-dock{position:fixed;z-index:102;bottom:max(9px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
    width:min(540px,calc(100% - 22px));height:66px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
    padding:5px;border-radius:22px;background:rgba(17,29,48,.96);border:1px solid #355065;
    box-shadow:0 15px 49px rgba(0,0,0,.55),inset 0 1px 0 rgba(211,240,255,.07);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
  .v9-dock-item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:1px solid transparent;border-radius:16px;background:transparent;color:#92a7bf;font-size:10px;font-weight:660;letter-spacing:-.1px;padding:5px 2px}
  .v9-dock-ico{display:grid;place-items:center;width:25px;height:25px;color:inherit}
  .v9-dock-ico svg{width:21px;height:21px}
  .v9-dock-item.is-active{color:#92eddc;background:#183c43;border-color:#2c6064}
  .v9-dock-item:active{transform:scale(.97)}
  .v9-backdrop:not([hidden]){position:fixed;display:block;z-index:99;inset:0;background:rgba(2,7,14,.67);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .v9-more:not([hidden]){position:fixed;display:block;z-index:101;bottom:calc(max(9px,env(safe-area-inset-bottom,0px)) + 74px);
    left:50%;transform:translateX(-50%);width:min(540px,calc(100% - 22px));
    max-height:min(68vh,580px);overflow:auto;overscroll-behavior:contain;border-radius:23px;
    background:linear-gradient(145deg,#17283d,#0c192b);border:1px solid #37536c;
    box-shadow:0 25px 75px rgba(0,0,0,.7);padding:21px}
  .v9-more-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
  .v9-more-head h2{font-size:19px;letter-spacing:-.6px;margin:5px 0 0;color:#f1f7fd}
  .v9-more-close{background:#20364d;color:#e6eef9;border:1px solid #3d566e;border-radius:12px;min-height:42px;min-width:42px;font-size:25px}
  .v9-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .v9-more-grid button{min-height:51px;text-align:left;display:flex;align-items:center;gap:11px;border:1px solid #32475d;
    border-radius:13px;background:#17293e;color:#dbe7f3;font-size:12px;font-weight:680;padding:10px 12px}
  .v9-more-grid button:active,.v9-more-grid button:hover{background:#22394f}
  .v9-more-grid button span{display:grid;place-items:center;border-radius:9px;flex-shrink:0;width:28px;height:28px;
    color:#99e9d9;background:#204447;font-size:16px}
  .v9-more-foot{color:#93a8bc;font-size:11px;line-height:1.6;margin:15px 0 0}
  .foot{margin-top:30px}
}
@media(max-width:380px){
  .badge{font-size:8px;padding:7px 7px}.brand-name{font-size:17px}.brand-name small{font-size:6px}
  .hero h1{font-size:32px}.v9-hero-actions .secondary{display:none}
  .v8-stat .label{font-size:10px}.v8-stat strong{font-size:24px}
  .v9-more{padding:16px}
}
/* Light setting remains supported without losing contrast. */
html[data-v8-theme="light"]{color-scheme:light;--bg:#f5f8fc;--panel:#fff;--panel2:#f2f6fd;--line:#d4dfec;--text:#15253b;--muted:#566e83}
html[data-v8-theme="light"] body{background:#f4f8fc;color:#17273e}
html[data-v8-theme="light"] .bar{border-color:#dce6ed}
html[data-v8-theme="light"] .brand-name small{color:#657f92}
html[data-v8-theme="light"] .hero .eyebrow{color:#257e74}
html[data-v8-theme="light"] .hero .colored{color:#168c78}
html[data-v8-theme="light"] .hero .lead{color:#546980}
html[data-v8-theme="light"] .tabs{background:#f4f8fcf0;border-color:#d8e5ee}
html[data-v8-theme="light"] .tab.active{background:#cbece6;color:#14564c;border-color:#9acbc4}
html[data-v8-theme="light"] .card{background:#fff;color:#172740;border-color:#dae3ee}
html[data-v8-theme="light"] .card h2{color:#18304b}
html[data-v8-theme="light"] .day-hello{background:linear-gradient(125deg,#d8f3ef,#e3edfb);border-color:#bddcd7}
html[data-v8-theme="light"] .v8-stat,html[data-v8-theme="light"] .kpi{background:#fff;color:#1d3852;border-color:#d5e0ed}
html[data-v8-theme="light"] .v8-stat.highlight{background:#e5f5f1}
html[data-v8-theme="light"] .v8-stat strong{color:#15374d}
html[data-v8-theme="light"] .secondary{background:#e9f0f8;border-color:#c3d5e5;color:#25506a}
html[data-v8-theme="light"] .v8-action,html[data-v8-theme="light"] .day-item,html[data-v8-theme="light"] .task{background:#f1f6fb;color:#20415e;border-color:#d2e1eb}
html[data-v8-theme="light"] .v9-dock{background:#fff;border-color:#bbd7dc;box-shadow:0 11px 30px #17344b24}
html[data-v8-theme="light"] .v9-dock-item{color:#587189}
html[data-v8-theme="light"] .v9-dock-item.is-active{background:#d8f3ee;border-color:#b9ded7;color:#176658}
html[data-v8-theme="light"] .v9-more:not([hidden]){background:#fff;border-color:#d1e0eb}
html[data-v8-theme="light"] .v9-more-head h2{color:#17354e}
html[data-v8-theme="light"] .v9-more-grid button{background:#f1f7fb;color:#25415a;border-color:#d7e4ed}
html[data-v8-theme="light"] .v9-more-grid button span{background:#d9f0ec;color:#176a59}
html[data-v8-theme="light"] .v9-more-foot{color:#617a90}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary,.v9-dock-item{transition:none}}