:root { --ink:#173642; --muted:#617983; --line:#d6e2e4; --sea:#007c83; --sea-soft:#e2f2f1; --sun:#f2a900; --paper:#f7faf9; --warn:#9d5f00; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.45 Inter, "Microsoft YaHei", system-ui, sans-serif; }
header { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line); background:#fff; }
.eyebrow { margin:0 0 2px; color:var(--sea); font-size:10px; font-weight:700; letter-spacing:.12em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:21px; line-height:1.2; } h2 { margin-bottom:10px; font-size:15px; }
.method-chip { padding:6px 10px; color:#245862; border:1px solid #b9d8d7; border-radius:20px; background:#f1fafa; font-size:12px; white-space:nowrap; }
main { display:grid; grid-template-columns:minmax(0,1fr) 380px; height:calc(100vh - 74px); min-height:650px; }
.map-pane { position:relative; min-height:520px; } #map { width:100%; height:100%; background:#cbe4e5; }
.map-note,.legend { position:absolute; z-index:500; background:rgba(255,255,255,.94); box-shadow:0 2px 12px rgba(20,54,64,.15); }
.map-note { top:14px; left:14px; padding:8px 10px; border-radius:5px; font-size:12px; }.legend { bottom:50px; left:14px; display:flex; gap:14px; padding:7px 10px; border-radius:5px; font-size:11px; }
.basemap-picker,.place-search,.mouse-coordinates{font-family:inherit}.basemap-picker{position:relative;border:0!important;border-radius:8px!important;box-shadow:0 2px 12px rgba(20,54,64,.18)}.basemap-toggle{display:flex;align-items:center;gap:5px;margin:0;padding:8px 10px;border:0;border-radius:8px;background:rgba(255,255,255,.96);color:#183b56;font:12px inherit;cursor:pointer}.basemap-cards{position:absolute;top:calc(100% + 6px);right:0;display:none;grid-template-columns:repeat(3,1fr);gap:7px;width:238px;padding:8px;border-radius:8px;background:rgba(255,255,255,.97);box-shadow:0 2px 12px rgba(20,54,64,.2)}.basemap-picker.open .basemap-cards{display:grid}.basemap-card{margin:0;padding:4px;border:2px solid transparent;border-radius:7px;background:transparent;color:#334e68;font:11px inherit;font-weight:700;cursor:pointer}.basemap-card.active{border-color:#008c95;color:#007c83}.basemap-thumb{display:block;height:46px;margin-bottom:4px;border-radius:4px;background-position:center;background-size:180%}.place-search{width:286px;border:0!important;border-radius:8px!important;overflow:hidden;background:rgba(255,255,255,.96);box-shadow:0 2px 12px rgba(20,54,64,.18)}.place-search-form{display:flex;gap:5px;padding:7px}.place-search-form input{min-width:0;flex:1;margin:0;padding:6px 8px;border:1px solid var(--line);border-radius:5px;font:12px inherit}.place-search-form button{margin:0;padding:6px 9px;border:0;border-radius:5px;background:#008c95;color:#fff;font:12px inherit;cursor:pointer}.place-search-status{margin:0;padding:0 9px 7px;color:var(--muted);font-size:10px}.place-search-results{display:none;max-height:190px;overflow:auto;border-top:1px solid var(--line)}.place-search.open .place-search-results{display:block}.place-search-result{display:block;width:100%;margin:0;padding:7px 10px;border:0;border-bottom:1px solid #edf2f3;background:#fff;color:#29485f;text-align:left;font:12px inherit;font-weight:700;cursor:pointer}.place-search-result:hover{background:#eff8f8}.place-search-result small{display:block;margin-top:2px;color:#6b8297;font-size:10px;font-weight:400}.place-search-message{padding:9px 10px;color:var(--muted);font-size:11px}.mouse-coordinates{min-width:176px;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.92);box-shadow:0 1px 5px rgba(16,42,67,.22);color:#29485f;font-size:11px}
.map-locate { border:0!important; border-radius:7px!important; box-shadow:0 2px 10px rgba(20,54,64,.22); }.map-locate button { display:grid; place-items:center; width:36px; height:36px; margin:0; padding:0; border:0; border-radius:7px; background:rgba(255,255,255,.96); color:#008c95; cursor:pointer; }.map-locate button svg { display:block; width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }.map-locate button:hover { background:#e7f6f5; }
.legend span { display:flex; align-items:center; gap:5px; } .legend i { display:inline-block; }.sun-dot { width:9px; height:9px; border-radius:50%; background:var(--sun); }.view-line,.alt-line{ width:14px;height:0;border-top:3px solid var(--sea);}
.angle-label { display:flex; align-items:center; justify-content:center; width:38px; height:20px; color:#8a5700; font:700 12px/1 system-ui,-apple-system,"Microsoft YaHei",sans-serif; text-shadow:0 1px 2px #fff,1px 0 2px #fff,-1px 0 2px #fff; pointer-events:none; }
.control-pane { overflow:auto; padding:20px 22px 30px; background:#fff; border-left:1px solid var(--line); }
.control-pane section { padding:0 0 17px; margin-bottom:17px; border-bottom:1px solid var(--line); }.control-pane section:last-child { border:0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.section-head h2 { margin-bottom:10px; }.icon-button,.text-button { border:0; background:transparent; color:var(--sea); cursor:pointer; font:inherit; }.icon-button { font-size:23px; line-height:1; }.text-button { padding:0; font-size:12px; text-decoration:underline; }
.location-name { margin-bottom:5px; font-weight:600; }.coords { display:flex; gap:12px; color:var(--muted); font-feature-settings:"tnum"; }.hint { margin:6px 0 0; color:var(--muted); font-size:12px; }
label { display:block; margin-bottom:4px; color:var(--muted); font-size:12px; } input[type="date"],select { width:100%; padding:8px; border:1px solid var(--line); border-radius:4px; color:var(--ink); background:#fff; font:inherit; }.timezone-row { margin-top:10px; }.time-row { margin-top:10px; }.time-row label { display:flex; justify-content:space-between; align-items:center; }.time-row label span { display:flex; align-items:center; gap:7px; }.time-row output { color:var(--ink); font-weight:700; }.now-button { padding:2px 6px; border:1px solid #9bc8c8; border-radius:4px; background:#fff; color:var(--sea); font:11px inherit; cursor:pointer; }.time-inputs { display:grid; grid-template-columns:92px 1fr; align-items:center; gap:10px; }.time-inputs input[type="time"] { width:100%; padding:6px; border:1px solid #9bc8c8; border-radius:4px; color:var(--ink); background:#fff; font:inherit; } input[type="range"] { width:100%; accent-color:var(--sea); }.ticks { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
 .today-window { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }.today-window-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px; }.today-window-head strong { font-size:14px; }.today-window-head span { color:var(--muted); font-size:11px; }
.solar-summary { background:linear-gradient(90deg,#fffbeb,white); }.solar-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.solar-values div { min-width:0; padding-left:8px; border-left:3px solid var(--sun); border-radius:3px; }.solar-values div.angle-warning { padding:5px 5px 5px 8px; border-left-color:#c53d35; background:#ffe9e6; }.solar-values div.angle-warning span,.solar-values div.angle-warning strong { color:#b32f28; }.solar-values div.angle-ok { padding:5px 5px 5px 8px; border-left-color:#168061; background:#e2f5eb; }.solar-values div.angle-ok span,.solar-values div.angle-ok strong { color:#126c53; }.solar-values span,.direction span { display:block; color:var(--muted); font-size:12px; }.solar-values strong { font-size:18px; white-space:nowrap; }.solar-values #sunAzimuth small { display:block; margin-top:1px; color:#365866; font-size:12px; font-weight:600; white-space:nowrap; }#solarNote:empty{display:none;}
.recommendation { display:flex; align-items:center; gap:16px; }.compass { position:relative; flex:0 0 104px; width:104px; height:104px; border:1px solid var(--line); border-radius:50%; background:radial-gradient(circle,#fff 0 28%,#f5fbfb 29%); }.compass:before { content:"北"; position:absolute; top:4px; left:44px; color:var(--muted); font-size:11px; }.direction strong { display:block; margin:3px 0; color:var(--sea); font-size:22px; }.direction small { display:block; margin-bottom:7px; color:var(--muted); }.geometry-text { margin:12px 0 0; padding:9px 10px; background:var(--sea-soft); color:#21565a; font-size:12px; }.caution { margin:9px 0 0; color:#816238; font-size:11px; }
.quick-guide { background:linear-gradient(135deg,#f8fcfc,#fffaf0); }.guide-diagrams { display:grid; grid-template-columns:1.55fr 1fr; gap:8px; align-items:start; }.guide-diagrams figure { margin:0; padding:6px 4px 4px; border:1px solid #e1ecec; border-radius:7px; background:rgba(255,255,255,.72); text-align:center; }.guide-diagrams svg { display:block; width:100%; height:auto; }.guide-diagrams figcaption { color:var(--muted); font-size:10px; }.guide-steps { margin:10px 0 0; padding-left:19px; color:#365866; font-size:12px; }.guide-steps li+li { margin-top:4px; }.guide-steps strong { color:#006f77; }
.geometry-guide { background:linear-gradient(135deg,#f8fcfc,#fff); }.geometry-rules { display:grid; gap:6px; }.geometry-rules div { display:grid; grid-template-columns:1.15fr .85fr; align-items:baseline; column-gap:8px; padding:7px 9px; border-left:3px solid var(--sea); border-radius:4px; background:#edf8f7; }.geometry-rules span { color:var(--muted); font-size:12px; }.geometry-rules strong { color:#006f77; font-size:15px; }.geometry-rules small { grid-column:1/-1; margin-top:1px; color:#557480; font-size:11px; }.geometry-guide p { margin:9px 0 0; color:#45636d; font-size:12px; }
.geometry-guide .geometry-reference { margin-top:7px; color:#667d83; font-size:10px; line-height:1.5; }.geometry-reference a { color:#007c83; }
.solar-rule { margin-top:10px; padding:9px 10px; border-left:3px solid #d88700; border-radius:4px; background:#fff7e4; color:#5f4a21; font-size:12px; }.solar-rule strong,.solar-rule span,.solar-rule small { display:block; }.solar-rule span { margin-top:3px; }.solar-rule small { margin-top:4px; color:#786944; font-size:11px; }
.status { padding:3px 7px; border-radius:10px; background:#edf2f2; color:var(--muted); font-size:11px; font-weight:600; }.status.good { color:#00656c; background:#dff2ee; }.status.warn { color:var(--warn); background:#fff1cf; }.status.bad { color:#9b3830; background:#ffe5e1; }
.outline-button { padding:5px 7px; border:1px solid #9bc8c8; border-radius:4px; background:#fff; color:var(--sea); cursor:pointer; font:12px inherit; }.outline-button:disabled { opacity:.55; cursor:wait; }.height-row { display:grid; grid-template-columns:1fr 95px; align-items:end; gap:8px; }.height-row label { margin:0; }.height-row input { width:100%; padding:7px; border:1px solid var(--line); border-radius:4px; color:var(--ink); font:inherit; }.water-result { margin:8px 0 0; padding:9px 10px; border-left:3px solid #74afb4; background:#f1f8f8; color:#28555a; font-size:12px; }
.timeline { position:relative; display:flex; align-items:flex-end; height:57px; padding:0 3px; border-bottom:1px solid var(--line); gap:2px; background:linear-gradient(to top,transparent 43%,#edf2f2 44%,transparent 46%); }.bar { position:relative; flex:1 1 0; min-width:2px; background:#a7cfd0; cursor:pointer; }.bar:hover { background:#f2a900; }.bar:hover::after { content:attr(data-time); position:absolute; bottom:calc(100% + 5px); left:50%; z-index:3; transform:translateX(-50%); padding:3px 5px; border-radius:3px; background:#173642; color:#fff; font-size:10px; line-height:1; white-space:nowrap; pointer-events:none; }.bar.valid { background:var(--sea); }.bar.current { outline:2px solid var(--sun); outline-offset:1px; }.timeline-ticks { display:flex; justify-content:space-between; margin-top:4px; color:var(--muted); font-size:10px; }.window-section { padding-bottom:22px !important; }
.leaflet-div-icon { background:transparent; border:0; }.station-marker { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:var(--sea); box-shadow:0 1px 5px #254b55; }.sun-marker { width:42px; height:42px; filter:drop-shadow(0 2px 3px rgba(122,77,0,.34)); }.sun-marker svg { display:block; width:100%; height:100%; }.map-label { padding:3px 5px; border-radius:3px; background:rgba(255,255,255,.9); color:#23515a; font-size:11px; font-weight:700; white-space:nowrap; }
@media (max-width:800px) { header{padding:12px 15px}.method-chip{display:none}main{grid-template-columns:1fr;height:auto;min-height:0}.map-pane{height:55vh;min-height:380px}.control-pane{border-left:0;border-top:1px solid var(--line)}.map-note{display:none}.legend{bottom:44px;left:10px;gap:8px;font-size:10px}.place-search{width:min(286px,calc(100vw - 100px))}.mouse-coordinates{min-width:154px}.guide-diagrams{grid-template-columns:1.55fr 1fr} }