@import url('./styles/components.css');

@font-face {
  font-family:"Smiley Sans";
  src:url('./assets/fonts/SmileySans-Oblique.ttf.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* 钓咩鱼啊
 * Layout is defined once per breakpoint. Feature styles live in components.css.
 * Glass is translucent at the panel boundary; content surfaces stay readable.
 */
:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --ink: #1d1d1f; --ink-2: #48484a; --ink-3: #6e6e73;
  --aqua: #51545c; --aqua-2: #303238; --aqua-soft: #3c3c4310;
  --gold: #86868b; --lime: #248a3d; --sand: #b25000; --coral: #d70015; --violet: #8944ab;
  --surface: #ffffff; --ground: #f2f2f7; --glass: #ffffff58; --glass-2: #f9f9fbdc;
  --line: #3c3c4325; --line-soft: #3c3c4314; --highlight: #ffffffdc;
  --control: #ffffff58; --control-hover: #ffffffb3; --blur: 26px;
  --shadow: 0 12px 36px -16px #00000032, 0 2px 6px #00000007;
  --radius: 26px; --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.4,.64,1);
  --top: max(18px, env(safe-area-inset-top)); --side: 22px; --sheet-w: 364px; --rail-w: 350px;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --ink: #f5f5f7; --ink-2: #d1d1d6; --ink-3: #98989d;
  --aqua: #e3e4e9; --aqua-2: #f5f5f7; --aqua-soft: #ffffff14;
  --gold: #98989d; --lime: #30d158; --sand: #ff9f0a; --coral: #ff6961; --violet: #bf5af2;
  --surface: #1c1c1e; --ground: #111113; --glass: #1c1c1e70; --glass-2: #242426e8;
  --line: #ffffff2b; --line-soft: #ffffff14; --highlight: #ffffff40;
  --control: #ffffff0b; --control-hover: #ffffff1c;
  --shadow: 0 16px 40px -16px #0000009c, 0 2px 8px #0002;
}
* { box-sizing: border-box; }
html,body { width:100%;height:100%;height:100dvh; }
body { margin:0; overflow:hidden; color:var(--ink); background:var(--ground); font:14px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { cursor:wait; opacity:.5; }
a { color:var(--aqua-2); }
h1,h2,h3,h4,p { margin:0; }
ul,ol { list-style:none; margin:0; padding:0; }
svg { display:block; flex:none; }
/* Leaflet supplies its own SVG viewport dimensions; only bare icons use 20px. */
svg:not([width]):not([height]) { width:20px; height:20px; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
.sprite { width:0;height:0;position:absolute;overflow:hidden; }
:focus-visible { outline:2px solid var(--aqua);outline-offset:4px; }
::selection { background:var(--aqua);color:var(--surface); }
.logo-night { display:none; }
[data-theme="night"] .logo-day { display:none; }
[data-theme="night"] .logo-night { display:block; }

/* Light refracts at the edge; the center remains calm for reading. */
.glass {
  position:relative; color:var(--ink); border:1px solid var(--highlight); border-radius:var(--radius);
  background:linear-gradient(132deg,#ffffff2b 0%,#ffffff06 28%,transparent 55%,#ffffff14 100%),var(--glass);
  backdrop-filter:blur(var(--blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:var(--shadow),inset 0 1px 1px #ffffffa6,inset 1px 0 0 #ffffff38,inset 0 -1px 1px #ffffff4d;
}
.glass::before { content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;border:1px solid transparent;border-top-color:#ffffff38;border-left-color:#ffffff25; }
[data-theme="night"] .glass { background:linear-gradient(132deg,#ffffff1c,transparent 32%,#ffffff07 80%),var(--glass);box-shadow:var(--shadow),inset 0 1px 1px #ffffff47,inset 1px 0 0 #ffffff0c,inset 0 -1px 1px #ffffff0f; }
[data-theme="night"] .glass::before { border-top-color:#ffffff12;border-left-color:#ffffff08; }
.aurora { position:fixed;inset:0;pointer-events:none;background:var(--ground); }
.blob,.grain { display:none; }
.map,.leaflet-container { background:var(--ground); }
.map { position:fixed;inset:0;z-index:1; }
.leaflet-tile-pane { opacity:.9;filter:saturate(.65); }
[data-theme="night"] body:not([data-tiles="sat"]) .leaflet-tile-pane { filter:invert(.92) hue-rotate(180deg) saturate(.15) brightness(.76);opacity:.88; }
[data-theme="night"] body[data-tiles="sat"] .leaflet-tile-pane { filter:brightness(.68) saturate(.5); }

/* Header: brand, one destination search, quiet personal tools. */
.topbar { position:fixed;z-index:700;top:var(--top);left:var(--side);right:var(--side);height:76px;display:flex;align-items:center;gap:28px;padding:10px 16px 10px 12px;border-radius:25px; }
.brand { display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;color:var(--ink); }
.brand-mark { width:50px;height:50px;flex:none; }
.brand-mark img { width:50px;height:50px;object-fit:contain; }
.brand-type { display:flex;align-items:center; }
.brand-type strong { font:700 24px/1.15 var(--font);letter-spacing:.12em; }
.brand-name,.brand-type strong.brand-name { font-family:var(--brand-font,"Smiley Sans"),var(--font);font-weight:var(--brand-font-weight,400);font-style:normal;font-synthesis:none;letter-spacing:0;white-space:nowrap; }
.brand-type em { font-style:normal;font-size:10px;letter-spacing:.12em;color:var(--ink-3); }
.search { display:flex;align-items:center;gap:10px;flex:1;max-width:600px;min-width:120px;height:46px;padding:5px 5px 5px 16px;border:1px solid var(--line);border-radius:16px;background:var(--control);box-shadow:inset 0 1px 2px #00000007; }
.search>.ico { width:18px;height:18px;color:var(--aqua); }
.search input { width:100%;flex:1;min-width:0;padding:0;border:0;outline:0;background:none;font-size:13px; }
.search input::placeholder { color:var(--ink-3); }
.search:focus-within { border-color:var(--aqua);box-shadow:0 0 0 3px var(--aqua-soft); }
.search kbd { font:12px var(--font);border:1px solid var(--line);border-radius:5px;padding:0 5px;color:var(--ink-3); }
.search-btn { display:flex;align-items:center;justify-content:center;gap:9px;flex:none;min-width:108px;height:34px;border:1px solid #ffffff1c;border-radius:11px;background:var(--aqua-2);color:var(--surface);font-size:12px;padding:0 13px;white-space:nowrap; }
.search-btn svg { width:16px;height:16px; }
[data-theme="night"] .search-btn { background:#e3e4e9;color:#242529; }
.header-actions { display:flex;align-items:center;gap:6px;margin-left:auto; }
.portal-home { display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;min-height:36px;padding:0 6px;flex:none;color:var(--ink-2);font-size:11px;text-decoration:none;white-space:nowrap;border-radius:8px; }
.portal-home svg { width:15px;height:15px;transform:rotate(180deg); }
.portal-home:hover { color:var(--ink);background:var(--control-hover); }
.portal-home:focus-visible { outline:2px solid var(--aqua);outline-offset:2px; }
@media (max-width:1400px) { .portal-home span { display:none; } .portal-home { padding:0;width:32px; } }
.header-link { display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:none;color:var(--ink-2);font-size:12px;white-space:nowrap;padding:10px;min-height:44px;border-radius:12px; }
.header-link svg { width:17px;height:17px; }
.header-link:hover { background:var(--control-hover); }
.header-divider { width:1px;height:22px;background:var(--line);margin:0 8px; }
.icon-btn { display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:14px;border:1px solid var(--line);background:var(--control);color:var(--ink-2); }
.icon-btn:hover { background:var(--control-hover);color:var(--ink); }
.topbar-user { position:relative; }
.user-dot { position:absolute;right:7px;top:7px;width:7px;height:7px;border:1px solid var(--surface);border-radius:50%;background:var(--aqua); }
.topbar-map { display:none; }
.map-context { position:fixed;top:calc(var(--top) + 94px);left:calc(var(--side) + var(--sheet-w) + 20px);z-index:500;display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 14px;font-size:11px;border-radius:13px;color:var(--ink-2); }
.live-dot { width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px var(--aqua-soft); }
.map-context>i { width:1px;height:10px;background:var(--line); }
.context-hint { color:var(--ink-3); }
.weather-chip { position:fixed;top:calc(var(--top) + 142px);left:calc(var(--side) + var(--sheet-w) + 20px);z-index:500;display:flex;align-items:center;gap:14px;padding:8px 13px;border-radius:14px; }
.wx-item { display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2); }
.wx-item svg { width:15px;height:15px;color:var(--aqua); }
.wx-item b { font-weight:600; }
.wx-item small,.wx-item em,.wx-time { font-size:10px;font-style:normal;color:var(--ink-3); }
.rose { display:block;flex:none;transform:rotate(var(--r,0deg)); }
.wx-dir { white-space:nowrap; }
.wx-dir em { color:var(--ink-2); }
body:not(.has-plan) .weather-chip { display:none; }
.is-analyzing .live-dot { animation:status-pulse 1s ease-in-out infinite alternate; }
@keyframes status-pulse { to { opacity:.35;box-shadow:0 0 0 6px var(--aqua-soft); } }

/* Paired desktop panels retain a generous map canvas. */
.sheet,.rail { position:fixed;z-index:600;top:calc(var(--top) + 94px);bottom:96px;display:flex;flex-direction:column;pointer-events:none; }
.sheet { left:var(--side);width:var(--sheet-w); }
.rail { right:var(--side);width:var(--rail-w);transition:transform .28s var(--ease),opacity .28s; }
.sheet-scroll,.rail-scroll { display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 3px 12px;pointer-events:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent; }
.sheet-scroll::-webkit-scrollbar,.rail-scroll::-webkit-scrollbar { width:3px; }
.sheet-scroll::-webkit-scrollbar-thumb,.rail-scroll::-webkit-scrollbar-thumb { border-radius:10px;background:var(--line); }
.sheet-grip,.rail-grip { display:none; }
.rail-head { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 20px; }
.rail-head .eyebrow { color:var(--gold);font-size:9px;letter-spacing:.16em; }
.rail-head h2 { font:650 23px/1.6 var(--font);margin-top:4px; }
.rail-close { display:grid;width:34px;height:34px; }
body.rail-hidden .rail { transform:translateX(calc(100% + 32px));opacity:0;pointer-events:none; }
body.rail-hidden .rail-scroll { pointer-events:none; }
body:not(.has-plan) .rail { display:none; }
.card { padding:20px;border-radius:24px; }
.card-head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px; }
.eyebrow { display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-2); }
.eyebrow svg { width:16px;height:16px;color:var(--aqua); }
.badge,.conf,.mini { display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;line-height:1.5;min-height:22px;border-radius:7px;padding:3px 7px;color:var(--ink-3);background:var(--control);border:1px solid var(--line-soft);white-space:nowrap; }
.badge { background:var(--aqua-soft);color:var(--aqua-2); }
.conf[data-level="high"] { color:var(--lime); }
.conf[data-level="medium"] { color:var(--sand); }
.conf[data-level="low"] { color:var(--coral); }
.place { font:650 24px/1.35 var(--font);overflow-wrap:anywhere; }
.sub { font-size:12px;color:var(--ink-3);line-height:1.65;margin-top:7px; }
.locate-row { display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:17px; }
.coord { width:100%;font-size:10px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums; }
.scope { font-size:11px;color:var(--ink-3);margin-top:8px; }
.scope:before { content:"";display:inline-block;width:4px;height:4px;background:var(--gold);border-radius:50%;margin:0 6px 2px 0; }
.pill { display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:500;background:var(--control);color:var(--ink-2);transition:background .2s,transform .2s; }
.pill svg { width:16px;height:16px; }
.pill:hover { background:var(--control-hover); }
.pill:active { transform:scale(.97); }
.pill.primary { background:linear-gradient(145deg,#666970,#3b3e45);border-color:#ffffff1a;color:#ffffff;box-shadow:inset 0 1px 0 #ffffff29,0 5px 13px -8px #00000030; }
[data-theme="night"] .pill.primary { background:linear-gradient(145deg,#f1f2f5,#c5c7ce);color:#242529; }
.method-row { display:flex;align-items:center;gap:3px;border-top:1px solid var(--line-soft);padding-top:16px;margin-top:15px; }
.method-row>span { color:var(--ink-3);font-size:11px;margin-right:auto; }
.method-row button { flex:0 1 64px;min-height:36px;border:1px solid transparent;border-radius:10px;background:none;color:var(--ink-3);font-size:12px; }
.method-row button.is-active { background:var(--control-hover);color:var(--aqua-2);border-color:var(--line);box-shadow:0 2px 4px #00000008; }
.decision-row { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px;margin-top:14px; }
.decision-row label { display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--ink-3); }
.decision-row select { width:100%;min-width:0;min-height:40px;padding:8px 26px 8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--control);font-size:12px;color:var(--ink); }
select option { color:var(--ink);background:var(--surface); }
.panel-footnote { display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:10px;color:var(--ink-3); }
.panel-footnote svg { width:13px;height:13px; }
body:not(.has-plan) [data-card="spots"] { display:none; }
body:not(.has-plan) [data-card="location"] .place,body:not(.has-plan) [data-card="location"] .sub,body:not(.has-plan) [data-card="location"] .locate-row,body:not(.has-plan) [data-card="location"] .scope,body:not(.has-plan) [data-card="location"] .badge { display:none; }
body:not(.has-plan) [data-card="location"] .method-row { border:0;margin-top:0;padding-top:0; }
body:not(.has-plan) [data-card="location"] .card-head { margin-bottom:12px; }

/* Welcome identity follows the same day and night brand assets as the header. */
.welcome-card { padding:25px 24px 0;overflow:hidden;flex:none; }
.welcome-kicker { display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:10px;letter-spacing:.07em; }
.welcome-kicker>span { width:14px;height:1px;background:var(--gold); }
.welcome-art { position:relative;float:right;width:120px;height:146px;margin:15px -5px 0 -50px;display:grid;place-items:center; }
.welcome-art img { position:relative;width:94px;height:94px;object-fit:contain;z-index:1; }
.water-orbit { position:absolute;border:1px solid var(--gold);opacity:.25;width:126px;height:45px;border-radius:50%;transform:rotate(-18deg);top:98px; }
.orbit-two { width:151px;height:63px;top:90px;opacity:.13; }
.welcome-card h2 { font:400 36px/1.4 "Smiley Sans",var(--font);font-synthesis:none;letter-spacing:0;margin-top:25px; }
.welcome-card>p { font-size:12px;line-height:1.9;color:var(--ink-3);margin-top:14px; }
.welcome-tools { clear:both;display:grid;gap:8px;padding-top:22px; }
.welcome-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.welcome-actions .pill { min-width:0;width:100%;min-height:48px;padding:10px 8px;border-radius:14px;font-size:13px;font-weight:500; }
.welcome-actions .pill svg { width:17px;height:17px;flex:none; }
.welcome-library { display:flex;align-items:center;gap:8px;min-height:44px;width:100%;margin:0;padding:10px 12px;border:0;border-radius:12px;background:transparent;font-size:12px;color:var(--ink-2);text-align:left; }
.welcome-library:hover { background:var(--control); }
.welcome-library svg { width:16px;height:16px;flex:none; }
.welcome-library small { margin-left:auto;font-size:11px;color:var(--ink-3); }
.welcome-library svg:last-child { transform:rotate(-90deg);width:13px;height:13px; }
.welcome-tools button:focus-visible { outline:2px solid var(--ink);outline-offset:2px; }
.has-plan .welcome-card { display:none; }

/* Five clear destinations; optional map layers stay together. */
.dock { position:fixed;z-index:660;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;border-radius:23px; }
.dock-btn { display:flex;align-items:center;justify-content:center;gap:8px;min-width:90px;min-height:44px;padding:9px 14px;border:1px solid transparent;border-radius:16px;background:none;color:var(--ink-2);font-size:12px;transition:background .2s,color .2s; }
.dock-btn svg { width:18px;height:18px; }
.dock-btn:hover { background:var(--control); }
.dock-btn[aria-pressed="true"],.dock-btn[aria-expanded="true"] { background:var(--control-hover);color:var(--aqua-2);border-color:var(--line);box-shadow:0 2px 6px #0000000a,inset 0 1px 0 var(--highlight); }
.dock-sep { display:block;height:21px;width:1px;background:var(--line);margin:0 3px; }
.sheet-tab { display:none; }
.map-settings { position:fixed;z-index:680;left:50%;bottom:100px;transform:translateX(-50%);width:330px;max-height:calc(100dvh - 214px);overflow:auto;overscroll-behavior:contain;padding:20px;background-color:var(--glass-2); }
.map-settings-head { display:flex;justify-content:space-between;align-items:center; }
.map-settings-head h2 { font:650 23px var(--font); }
.map-settings-head .icon-btn { width:32px;height:32px;border:0; }
.map-settings>p { font-size:11px;color:var(--ink-3);margin:5px 0 16px; }
.layer-options { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.layer-options button { display:flex;align-items:center;gap:7px;min-height:47px;padding:10px;border:1px solid var(--line);background:var(--control);border-radius:12px;color:var(--ink-2);font-size:11px; }
.layer-options svg { width:17px;height:17px; }
.layer-options i { width:6px;height:6px;flex:none;border-radius:50%;background:var(--line);margin-left:auto; }
.layer-options button[aria-pressed="true"] { color:var(--aqua-2);border-color:var(--aqua);background:var(--aqua-soft); }
.layer-options button[aria-pressed="true"] i { background:var(--aqua); }
.tile-switch { display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--control);font-size:12px; }
.tile-switch>b { margin-left:auto;font-weight:500;color:var(--aqua); }
.tile-switch svg { width:17px;height:17px; }
.map-settings .map-settings-note { font-size:10px;margin:12px 0 0; }
.flow-help { margin:0 0 14px;border:1px solid var(--line);border-radius:12px;padding:0 12px;color:var(--ink-2); }
.flow-help summary { min-height:42px;align-content:center;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink); }
.flow-help summary:focus-visible { outline:2px solid var(--ink-2);outline-offset:3px;border-radius:5px; }
.flow-help ol { margin:4px 0 12px;padding-left:19px; }
.flow-help li { margin-bottom:12px;padding-left:3px;font-size:12px;line-height:1.65; }
.flow-help li::marker { color:var(--ink-3); }
.flow-help b { color:var(--ink);font-weight:600; }
.flow-help p { margin:3px 0 0; }
.flow-help .flow-help-note { border-top:1px solid var(--line);padding:10px 0 12px;font-size:11px;line-height:1.65;color:var(--ink-3); }
.map-locate { position:fixed;z-index:500;right:calc(var(--side) + var(--rail-w) + 18px);bottom:190px;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--ink-2); }
body:not(.has-plan) .map-locate,body.rail-hidden .map-locate { right:var(--side); }
.point-bar { position:fixed;z-index:685;left:50%;bottom:100px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:12px 14px;max-width:calc(100vw - 24px);border-radius:20px;background-color:var(--glass-2); }
.point-bar>div { display:flex;flex-direction:column;min-width:100px; }
.point-bar span { font-size:10px;color:var(--ink-3); }
.point-bar b { font-size:12px;font-weight:500;white-space:nowrap; }
.point-bar .pill { white-space:nowrap; }
.point-bar .icon-btn { width:32px;height:32px;background:none;border:0; }
.map-preview-dot { width:18px;height:18px;border-radius:50%;border:3px solid var(--surface);background:var(--aqua);box-shadow:0 0 0 8px var(--aqua-soft),0 2px 8px #0004; }

/* Feature surfaces share the current palette and readable type. */
.plan-text { color:var(--ink);font-size:13px;line-height:1.85; }
.plan-primary-actions { margin-top:16px; }
.plan-primary-actions .pill { width:100%; }
.advanced-tools { border-top:1px solid var(--line-soft);padding-top:12px;margin-top:17px; }
.advanced-tools summary { display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:11px;color:var(--ink-3);list-style:none;min-height:30px; }
.advanced-tools summary::-webkit-details-marker { display:none; }
.advanced-tools summary svg { width:13px;height:13px; }
.advanced-tools[open] summary svg { transform:rotate(180deg); }
.card .mini.link { font-size:11px;color:var(--aqua-2);background:none;border:0; }
.card .meta { font-size:10px;line-height:1.7;color:var(--ink-3); }
.spot-list { gap:8px; }
.spot-item { min-height:68px;padding:12px 10px;border:1px solid var(--line-soft);background:var(--control); }
.spot-item:hover,.spot-item.is-active { background:var(--control-hover); }
.spot-type { font-size:14px; }
.spot-rank { background:var(--aqua-soft);border-color:var(--line);width:28px;height:28px;color:var(--aqua); }
.spot-rank.is-first { background:linear-gradient(145deg,#737780,#43464e);color:#fff; }
.spot-fish span { font-size:11px;background:var(--control); }
.spot-detail ul li,.cast-main p,.spot-empty,.knowledge-item p,.knowledge-grid div,.knowledge-detail ul,.gear-advice,.gear-item,.field-hint,.history-item p,.finding-rule p { font-size:12px;line-height:1.7; }
.spot-more,.tl-open { min-height:40px; }
.spot-dims span,.spot-water,.data-boundary,.knowledge-banner,.gbif-note,.spot-unknown { background:var(--control);border-color:var(--line); }
.ring::before { background:var(--surface); }
.fish-ico { background:var(--aqua-soft);border-color:var(--line); }
.field-chips button { min-height:40px; }
.depth-track,.tl-detail { background:var(--control); }
.band { color:var(--ink-2); }
.knowledge-item:hover { background:var(--control-hover); }
.auth-tabs button.is-active { background:var(--control-hover); }
.modal { border:1px solid var(--highlight);background:var(--glass-2);color:var(--ink);max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border-radius:28px; }
.modal::backdrop { background:#00000040;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); }
[data-theme="night"] .modal::backdrop { background:#0008; }
.modal-head { margin-bottom:16px;gap:12px; }
.modal-head h2,.knowledge-modal .modal-head h2,.gear-modal .modal-head h2,.timeline-modal .modal-head h2 { font:650 27px/1.4 var(--font); }
.modal-head .icon-btn { width:40px;height:40px;background:var(--control); }
.modal input,.modal textarea,.modal select { background:var(--control);border-color:var(--line);color:var(--ink); }
.modal input,.modal select { min-height:42px; }
.modal .pill { min-height:40px; }
.form-note,.modal-hint,.gear-hint,.field-hint { font-size:12px; }
.form-error { background:var(--control);color:var(--coral); }
.knowledge-modal,.gear-modal { width:min(900px,calc(100vw - 48px)); }
.timeline-modal { width:min(1060px,calc(100vw - 48px)); }
.toast-wrap { position:fixed;z-index:900;top:calc(var(--top) + 86px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100vw - 28px); }
.toast { background:var(--surface);color:var(--ink);border-color:var(--line);font-size:12px;box-shadow:var(--shadow);max-width:min(90vw,460px); }
.toast[data-kind="err"] { color:var(--coral); }
.toast[data-kind="warn"] { color:var(--sand); }
.toast[data-kind="ok"] { color:var(--lime); }
.boot.is-done { display:none; }
.leaflet-bottom.leaflet-right { right:calc(var(--side) + var(--rail-w) + 16px);bottom:85px; }
body:not(.has-plan) .leaflet-bottom.leaflet-right,body.rail-hidden .leaflet-bottom.leaflet-right { right:var(--side); }
.leaflet-control-zoom a { background:var(--glass-2) !important;color:var(--ink) !important;border-color:var(--line) !important;width:42px !important;height:42px !important;line-height:42px !important;box-shadow:var(--shadow); }
.leaflet-control-zoom a:hover { background:var(--surface) !important; }
.leaflet-control-attribution { position:fixed;bottom:0;right:0;max-width:100vw;background:var(--glass-2) !important;color:var(--ink-3) !important;font-size:9px !important;line-height:1.4 !important; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background:var(--surface) !important;border-color:var(--line);color:var(--ink) !important; }
.mk-spot em,.mk-wind-label { background:var(--surface);color:var(--ink-2);border-color:var(--line); }
.region-bar { background-color:var(--glass-2);bottom:100px; }
.safety-line { color:var(--sand); }

@media (max-width:1240px) and (min-width:901px) {
  :root { --side:16px;--sheet-w:320px;--rail-w:304px; }
  .topbar { gap:18px; }
  .header-link span { display:none; }
  .header-link { padding:10px 7px; }
  .header-divider { margin:0 4px; }
  .brand-type em { font-size:9px; }
  .welcome-card { padding:22px 20px 0; }
  .welcome-card h2 { font-size:34px; }
  .welcome-art { width:97px;margin-right:-10px; }
  .welcome-art img { width:80px;height:80px; }
  .context-hint,.map-context>i { display:none; }
  .wx-item:nth-child(3),.wx-time { display:none; }
  .card { padding:17px; }
  .dock-btn { min-width:83px;padding:9px 11px; }
  .locate-row .pill { font-size:11px;padding:8px 9px; }
}

@media (max-width:900px) {
  :root { --top:max(12px,env(safe-area-inset-top));--side:12px;--blur:22px; }
  .topbar { height:108px;display:grid;grid-template-columns:1fr auto;grid-template-rows:44px 42px;gap:8px;padding:9px 12px;border-radius:23px; }
  .brand { gap:8px;min-width:0; }
  .brand-mark,.brand-mark img { width:40px;height:40px; }
  .brand-type { gap:2px; }
  .brand-type strong { font-size:21px; }
  .brand-type em { display:none; }
  .search { grid-column:1/-1;grid-row:2;max-width:none;width:100%;height:40px;border-radius:12px;padding:4px 4px 4px 12px; }
  .search input { font-size:16px; }
  .search input::placeholder { font-size:12px; }
  .search-btn { min-width:100px;height:30px;font-size:11px;padding:0 10px;border-radius:9px; }
  .search kbd { display:none; }
  .header-actions { grid-row:1;grid-column:2;gap:5px; }
  .header-actions .icon-btn { width:36px;height:36px;border-radius:12px; }
  .header-link { padding:0;width:32px;min-height:36px; }
  .header-link span,.header-divider,#btn-history-shortcut,.topbar-map { display:none; }
  .map-context { top:calc(var(--top) + 120px);left:var(--side);font-size:10px;padding:6px 11px;min-height:30px;border-radius:11px; }
  .map-context .context-hint,.map-context>i { display:none; }
  .weather-chip { top:calc(var(--top) + 120px);left:auto;right:var(--side);gap:10px;padding:6px 10px;border-radius:11px; }
  .wx-item { font-size:11px; }
  .wx-item:nth-child(3),.wx-time { display:none; }
  .sheet,.rail { top:auto;left:var(--side);right:var(--side);width:auto;bottom:calc(87px + env(safe-area-inset-bottom));max-height:calc(100dvh - 267px - env(safe-area-inset-bottom));border:1px solid var(--highlight);border-radius:26px;background:var(--glass);backdrop-filter:blur(var(--blur)) saturate(145%);-webkit-backdrop-filter:blur(var(--blur)) saturate(145%);box-shadow:var(--shadow),inset 0 1px 0 var(--highlight);overflow:hidden; }
  .sheet { display:none; }
  .sheet.is-open { display:flex; }
  .rail,body.rail-hidden .rail { display:none;transform:none;opacity:1; }
  .rail.is-open { display:flex;pointer-events:auto;z-index:640; }
  body:not(.has-plan) .rail.is-open { display:none; }
  body.env-open .sheet { display:none; }
  .sheet-scroll,.rail-scroll { padding:0 0 20px;gap:0; }
  .sheet-scroll .glass,.rail-scroll .glass { border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none; }
  .sheet-scroll .glass::before,.rail-scroll .glass::before { display:none; }
  .sheet-scroll>.card,.rail-scroll>.card { border-top:1px solid var(--line);margin:0 15px;padding:19px 5px; }
  .sheet-scroll>.card:first-child { border-top:0; }
  .sheet-grip { display:flex;align-items:center;justify-content:center;flex:none;gap:7px;height:36px;min-height:36px;pointer-events:auto;cursor:grab;position:relative;touch-action:none; }
  .sheet-grip>i,.rail-grip>i { width:34px;height:4px;border-radius:8px;background:var(--ink-3);opacity:.38; }
  .sheet-grip>span { position:absolute;left:19px;font-size:10px;letter-spacing:.05em;color:var(--ink-3); }
  .sheet-grip>svg { position:absolute;right:19px;width:14px;height:14px;color:var(--ink-3); }
  .rail-grip { display:flex;align-items:center;justify-content:center;height:25px;min-height:25px;pointer-events:auto;touch-action:none; }
  .rail-head { padding:4px 20px 15px; }
  .rail-head h2 { font-size:19px; }
  .rail-head .eyebrow { display:none; }
  .rail-head .eyebrow { font-size:8px; }
  .rail-close { width:36px;height:36px; }
  .welcome-card { padding:0 18px 16px; }
  .welcome-card .welcome-kicker,.welcome-card .welcome-art,.welcome-card h2,.welcome-card>p { display:none; }
  .welcome-tools { padding-top:0; }
  body:not(.has-plan) .sheet { max-height:330px; }
  body:not(.has-plan) .panel-footnote { display:none; }
  .welcome-card h2 { font-size:34px;margin-top:15px; }
  .welcome-art { width:112px;height:130px;margin-top:0;margin-right:6px; }
  .welcome-art img { width:90px;height:90px; }
  .welcome-card>p { margin-top:8px;font-size:12px; }
  .card { border-radius:22px;padding:19px; }
  .card-head { margin-bottom:13px; }
  .place { font-size:26px; }
  .pill { min-height:44px; }
  .locate-row .pill { flex:1; }
  .method-row button { min-height:40px; }
  .decision-row select { min-height:44px;font-size:16px; }
  .coord { display:none; }
  .panel-footnote { padding:12px 0 0; }
  .dock { width:calc(100vw - 24px);max-width:520px;bottom:calc(13px + env(safe-area-inset-bottom));gap:2px;padding:6px;border-radius:23px; }
  .dock-btn { flex:1;min-width:0;min-height:54px;padding:6px 3px;border-radius:17px;flex-direction:column;gap:4px;font-size:10px;line-height:1.2; }
  .dock-btn svg { width:21px;height:21px; }
  .dock-btn span { display:block; }
  .dock-sep { display:none; }
  .sheet-tab { display:flex;align-items:center;gap:7px;position:fixed;z-index:650;left:var(--side);bottom:calc(96px + env(safe-area-inset-bottom));min-height:42px;padding:9px 15px;border-radius:15px;font-size:12px;color:var(--ink-2); }
  .sheet.is-open ~ .sheet-tab,body.env-open .sheet-tab { display:none; }
  .map-settings { bottom:calc(91px + env(safe-area-inset-bottom));width:calc(100vw - 24px);max-width:420px;max-height:calc(100dvh - 250px);overflow:auto; }
  .layer-options button { min-height:48px;font-size:12px; }
  .tile-switch { min-height:46px; }
  .map-locate,body:not(.has-plan) .map-locate,body.rail-hidden .map-locate { right:var(--side);bottom:auto;top:calc(var(--top) + 162px);width:40px;height:40px;border-radius:13px; }
  .leaflet-bottom.leaflet-right,body:not(.has-plan) .leaflet-bottom.leaflet-right,body.rail-hidden .leaflet-bottom.leaflet-right { right:var(--side);bottom:auto;top:calc(var(--top) + 210px); }
  .leaflet-control-zoom a { width:40px !important;height:40px !important;line-height:40px !important; }
  .leaflet-control-attribution { font-size:8px !important;max-width:100vw; }
  .point-bar,.region-bar { width:calc(100vw - 24px);bottom:calc(91px + env(safe-area-inset-bottom));gap:8px;max-width:500px; }
  .point-bar>div { flex:1;min-width:0; }
  .point-bar b { overflow-wrap:anywhere;white-space:normal;font-size:11px; }
  .point-bar .pill { flex:none;font-size:12px; }
  .modal,.knowledge-modal,.gear-modal,.timeline-modal { width:calc(100vw - 20px);max-width:640px;max-height:calc(100dvh - 36px);padding:22px 18px;border-radius:25px; }
  .modal input,.modal select,.modal textarea { font-size:16px; }
  .modal-head h2,.knowledge-modal .modal-head h2,.gear-modal .modal-head h2,.timeline-modal .modal-head h2 { font-size:25px; }
  .modal-actions { position:sticky;bottom:-23px;background:var(--surface);padding:12px 0;margin-top:15px;z-index:3;border-top:1px solid var(--line-soft); }
  .modal .pill,.field-chips button,.presets button { min-height:44px; }
  .knowledge-list,.knowledge-grid,.gear-columns,.field-grid,.finding-rules,.tl-detail { grid-template-columns:1fr; }
  .gear-columns { gap:25px; }
  .tl-facts { grid-template-columns:1fr 1fr; }
  .tl-detail { padding:15px 12px; }
  .tl-when .tl-time { font-size:28px; }
  .field-chips { gap:7px; }
  .field-photo,.field-notes { margin-top:18px; }
  .toast-wrap { top:calc(var(--top) + 116px); }
  .toast { font-size:12px; }
  .wx-rows { flex-direction:column; }
  .wx-row { width:100%; }
}
@media (max-width:374px) {
  :root { --side:8px; }
  .header-actions { gap:3px; }
  .header-link { display:none; }
  .welcome-card { padding-left:18px;padding-right:18px; }
  .welcome-card h2 { font-size:30px; }
  .welcome-art img { width:76px;height:76px; }
  .welcome-art { width:88px; }
  .pill { padding:8px 10px; }
  .dock { width:calc(100vw - 16px); }
  .dock-btn { font-size:10px; }
}
@media (orientation:landscape) and (max-height:540px) and (max-width:900px) {
  :root { --top:8px; }
  .topbar { height:58px;display:flex;padding:7px 10px;gap:16px; }
  .brand-mark,.brand-mark img { width:38px;height:38px; }
  .brand-type strong { font-size:20px; }
  .brand-type em,.header-link { display:none; }
  .search { flex:1;width:auto;max-width:none;height:40px; }
  .header-actions { gap:5px; }
  .map-context { top:76px;left:auto;right:12px; }
  .weather-chip { display:none; }
  .sheet,.rail { top:76px;left:12px;right:auto;bottom:79px;width:min(350px,47vw);max-height:none; }
  .rail { left:auto;right:12px; }
  .welcome-card h2 { font-size:30px; }
  .dock { bottom:8px;width:440px; }
  .dock-btn { min-height:47px; }
  .map-locate,body:not(.has-plan) .map-locate,body.rail-hidden .map-locate { top:119px;right:12px; }
  .leaflet-bottom.leaflet-right,body:not(.has-plan) .leaflet-bottom.leaflet-right,body.rail-hidden .leaflet-bottom.leaflet-right { top:169px;right:12px; }
  .sheet-tab { left:12px;bottom:14px; }
  .map-settings { bottom:80px;max-height:calc(100dvh - 155px);width:330px; }
  .point-bar,.region-bar { bottom:80px; }
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
  .glass,.sheet,.rail { background:var(--surface); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important; } }

.trip-settings { margin-top:14px; }
.trip-settings>summary { display:none;list-style:none; }
.trip-settings>summary::-webkit-details-marker { display:none; }
.flow-legend { position:fixed;z-index:500;top:calc(var(--top) + 190px);left:calc(var(--side) + var(--sheet-w) + 20px);width:min(300px,calc(100vw - 32px));padding:13px 15px;border-radius:18px;font-size:11px;line-height:1.7; }
.flow-legend-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px; }
.flow-legend-head>span { font-weight:600; }
.flow-legend-actions { display:flex;gap:6px;flex-shrink:0; }
.flow-legend-key { display:flex;flex-wrap:wrap;gap:14px;color:var(--ink-2); }
.flow-legend-key:has(>span:not([hidden])) { margin-bottom:5px; }
.flow-legend-key>span { display:inline-flex;align-items:center;gap:6px; }
.flow-legend-key>span[hidden] { display:none; }
.flow-swatch { position:relative;display:inline-block;width:28px;height:2px;border-radius:2px;background:var(--flow-color);box-shadow:0 0 0 1px var(--flow-outline);--flow-color:#636366;--flow-outline:#fff; }
.flow-swatch::after { content:'';position:absolute;right:-1px;top:-1px;width:4px;height:4px;border-radius:50%;background:var(--flow-color);box-shadow:0 0 0 1px var(--flow-outline); }
.flow-swatch.water { width:20px;--flow-color:#007aff; }
.flow-swatch.wind { height:10px;box-shadow:none;background:radial-gradient(ellipse,var(--flow-color),transparent 72%);opacity:.5; }
.flow-swatch.wind::after { display:none; }
[data-theme="night"] .flow-swatch { --flow-outline:#1c1c1e;--flow-color:#f2f2f7; }
[data-theme="night"] .flow-swatch.water { --flow-color:#64d2ff; }
.flow-legend-head button { min-height:30px;border:1px solid var(--line);border-radius:9px;background:var(--control);color:var(--ink-2);font-size:10px;padding:5px 9px; }
#wind-legend-text,#flow-legend-text { color:var(--ink-2); }
#wind-legend-text:empty,#flow-legend-text:empty { display:none; }
@media (max-width:900px) {
  .has-plan .sheet { max-height:min(46dvh,calc(100dvh - 267px - env(safe-area-inset-bottom))); }
  .trip-settings>summary { display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;color:var(--ink-2);font-size:12px;cursor:pointer; }
  .trip-settings>summary svg { width:14px;height:14px; }
  .trip-settings[open]>summary svg { transform:rotate(180deg); }
  body:not(.has-plan) .trip-settings { margin:0; }
  body:not(.has-plan) .trip-settings>summary { display:none; }
  .flow-legend { top:calc(var(--top) + 160px);left:var(--side);width:calc(100vw - 78px);max-width:320px;padding:11px 13px;font-size:11px; }
}
@media (orientation:landscape) and (max-height:540px) and (max-width:900px) {
  .has-plan .sheet { max-height:none; }
  .flow-legend { top:115px;left:auto;right:62px;width:240px; }
}