.app-header{padding:var(--s3) 0}
.app-header-inner{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--text);min-width:0;flex:1 1 220px}
.brand-text{min-width:0}
.brand-name{font-family:var(--font-display);font-size:1.35rem;line-height:1.1;display:block}
.brand-sub{font-size:.8rem;color:var(--muted);display:block;line-height:1.3}
.header-actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.nav-ext{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s3);color:var(--text);font-weight:700;text-decoration:none;border-radius:var(--radius-s)}
.nav-ext:hover{background:var(--butter)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);
  font:700 1rem var(--font-body);color:var(--text);background:var(--pink);border:var(--border);border-radius:999px;
  box-shadow:3px 3px 0 var(--outline);cursor:pointer;text-decoration:none;transition:transform .12s}
.btn:hover{transform:translate(-1px,-1px)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--outline)}
.btn.secondary{background:var(--sky)}
.btn.small{min-height:44px;padding:0 var(--s3);font-size:.9rem}
.lang{display:inline-flex;border:var(--border);border-radius:999px;overflow:hidden;background:var(--surface)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:48px;padding:0 var(--s3);font:700 .9rem var(--font-body);color:var(--text);text-decoration:none}
.lang a[aria-current="true"]{background:var(--butter);box-shadow:inset 0 0 0 2px var(--outline)}
.main{flex:1;width:100%;max-width:var(--page-max);margin:0 auto;padding:var(--s2) var(--gutter) var(--s5)}
.layout{display:grid;gap:var(--s4);grid-template-columns:1fr}
.col-info{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.card{background:var(--surface);border:var(--border);border-radius:var(--radius-l);padding:var(--card-pad);box-shadow:var(--shadow-sticker);min-width:0}
.card.tilt-l{transform:rotate(-.6deg)}
.card.blue{box-shadow:var(--shadow-sticker-blue)}
.card.wobble{position:relative;isolation:isolate;border:0;background:transparent;box-shadow:none}
.card.wobble::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink);border:var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-sticker-blue);filter:url(#wobble)}
.hero{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.hero-body{flex:1 1 220px;min-width:0}
.flight-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.fi-group+.fi-group,.fi-more>.fi-group:first-of-type{margin-top:var(--s4)}
.fi-day{margin:0 0 var(--s2);font:700 .85rem var(--font-body);color:var(--muted);text-transform:none;letter-spacing:.02em}
.fi{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);border:2px solid var(--outline);border-radius:var(--radius-m);padding:var(--s2) var(--s2) var(--s2) var(--s4);background:var(--bg);min-height:60px}
.fi-leg{display:flex;align-items:center;gap:var(--s3);flex:1;min-width:0}
.fi-pt{display:flex;flex-direction:column;line-height:1.15}
.fi-pt.end{text-align:right}
.fi-code{font:600 1.15rem var(--font-display);letter-spacing:.02em}
.fi-time{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fi-plus{font-size:.65rem;margin-left:2px;color:var(--text);font-weight:800}
.fi-line{flex:1;min-width:20px;max-width:120px;border-top:3px dotted var(--pink-deep);height:0}
.fi-side{display:flex;align-items:center;gap:var(--s2);flex:none}
.fi-ident{font:600 .9rem var(--font-display);background:var(--surface);border:2px solid var(--outline);border-radius:999px;padding:1px 10px}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--sky);border:2px solid var(--outline);color:var(--text);text-decoration:none;transition:transform .12s,background .12s}
.icon-link:hover{background:#a9d4fb;transform:translate(-1px,-1px)}
.photo-card{margin:0;padding:var(--s2);box-shadow:var(--shadow-sticker-blue)}
.photo-card img{display:block;width:100%;height:auto;border-radius:var(--radius-m);border:2px solid var(--outline);background:var(--bg)}
.photo-card figcaption{padding:var(--s2) var(--s2) var(--s1);font-size:.8rem;color:var(--muted)}
.reg-chip{font:600 .8rem var(--font-body);vertical-align:middle;background:var(--butter);border:2px solid var(--outline);border-radius:999px;padding:1px 10px;margin-left:var(--s2)}
.fi.is-now{background:#fff;border-color:var(--pink-deep);box-shadow:0 0 0 2px var(--pink)}
.fi.is-now{position:relative;margin-top:var(--s2)}
.fi-now{position:absolute;top:-10px;left:var(--s4);font:700 .75rem/1.3 var(--font-body);background:var(--pink);border:2px solid var(--outline);border-radius:999px;padding:0 10px}
.fi-hint{margin:var(--s3) 0 0}
.fi-more{margin-top:var(--s3)}
.fi-more>summary{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);font-weight:700;cursor:pointer;border:2px dashed var(--outline);border-radius:999px;list-style:none}
.fi-more>summary::-webkit-details-marker{display:none}
.fi-more>summary::after{content:"";width:8px;height:8px;border-right:3px solid var(--outline);border-bottom:3px solid var(--outline);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.fi-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fi-more[open]>summary{margin-bottom:var(--s3)}
.map-card{padding:var(--s2);background:var(--sky);box-shadow:var(--shadow-sticker);position:relative}
.map-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s1) calc(var(--card-pad) - var(--s2)) var(--s2)}
.map-title{margin:0;font-size:1.1rem}
#map{position:relative;overflow:hidden;width:100%;height:60vh;min-height:320px;border:var(--border);border-radius:var(--radius-m);background:#eef6fb;z-index:0}
.map-tools{display:flex;gap:var(--s2);flex-wrap:wrap;padding-top:var(--s2)}
.map-empty{background:var(--surface);border:2px solid var(--outline);border-radius:999px;padding:2px 12px;font-size:.8rem;font-weight:700}
.jmap{display:block;width:100%;height:100%;cursor:grab;touch-action:none;border-radius:inherit}
.jmap:active{cursor:grabbing}
.jmap:focus-visible{outline:3px solid var(--link);outline-offset:-3px}
.jmap-label{font-family:var(--font-body);font-weight:800;fill:var(--text);paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.jmap-jet{cursor:pointer}
.jmap-jet:focus-visible{outline:none}
.map-legend{position:absolute;left:var(--s2);bottom:var(--s2);display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.88);border:2px solid var(--outline);border-radius:var(--radius-s);padding:var(--s1) var(--s3);font-size:.8rem;font-weight:700;pointer-events:none}
.map-legend .sw{display:inline-block;width:22px;height:0;margin-right:8px;vertical-align:middle;border-top:3px dotted var(--outline)}
.map-legend .sw-jet{display:inline-block;width:22px;height:22px;margin-right:8px;vertical-align:middle}
.jmap-flabel{font-family:var(--font-body);font-weight:800;fill:#6A4FB8;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.map-legend .sw.fut{border-top-color:#9B7FE0}
.map-zoom{position:absolute;top:var(--s2);right:var(--s2);display:flex;flex-direction:column;gap:var(--s1)}
.map-zoom .btn{min-width:44px;min-height:44px;padding:0;font-size:1.3rem;line-height:1}
.status-line{margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.status-line .warn{color:var(--text);background:var(--butter);border:2px solid var(--outline);border-radius:999px;padding:0 var(--s3);font-weight:700}
.banner{border:var(--border);border-radius:var(--radius-m);background:var(--butter);padding:var(--s3) var(--s4);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.banner.err{background:var(--bad)}
.banner .grow{flex:1 1 200px}
.loader{display:flex;align-items:center;gap:var(--s3);padding:var(--s4)}
.loader::before{content:"";width:28px;height:28px;flex:none;border:4px solid var(--pink);border-top-color:var(--pink-deep);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loader::before{animation:none}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--s4) + var(--safe-b));z-index:3000;max-width:calc(100vw - 24px);
  background:var(--surface);border:var(--border);border-radius:var(--radius-m);box-shadow:var(--shadow-sticker);padding:var(--s3) var(--s4);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.prose{max-width:760px;margin:0 auto;padding:var(--s5) clamp(var(--card-pad),5vw,40px)}
.prose section{margin-bottom:var(--s5)}
.prose ul{padding-left:var(--s5)}
.prose .btn{margin-top:var(--s2)}
@media (max-width:959px){
  .col-info{display:contents}
  .col-map{order:2}
  .map-card{height:auto}
}
@media (min-width:640px){
  h1{font-size:2rem}
  #map{height:56vh}
}
@media (min-width:960px){
  .layout{grid-template-columns:minmax(360px,5fr) 7fr;align-items:stretch}
  .col-map{display:flex}
  .map-card{display:flex;flex-direction:column;flex:1;position:sticky;top:12px;align-self:flex-start;height:calc(100vh - 100px);min-height:520px}
  #map{flex:1;height:auto}
}

.offline-main{display:grid;place-items:center}
.offline-card{max-width:420px;text-align:center}