    :root {
      --bg: #0f172a;
      --card-bg: #1e293b;
      --accent: #38bdf8;
      --text: #f8fafc;
      --muted: #94a3b8;
    }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      padding: 20px;
    }
    header {
      max-width: 1000px;
      margin: 0 auto 20px;
      border-bottom: 1px solid #334155;
      padding-bottom: 16px;
    }
    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    h1 { margin: 0; font-size: 1.8rem; color: var(--accent); }
    .updated { font-size: 0.85rem; color: var(--muted); text-align: right; }

    @media (max-width: 640px) {
      body { padding: 12px; }
      header { margin-bottom: 14px; padding-bottom: 12px; }
      .header-top {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 10px;
      }
      .header-top h1 { font-size: 1.65rem; }
      .header-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
      }
      .header-right .control-dropdown {
        flex: 0 1 auto;
        max-width: calc(100vw - 24px);
      }
      .updated {
        flex-basis: 100%;
        width: 100%;
        text-align: left;
        font-size: 0.72rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
      }
    }
    
    .filter-row {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .select-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .select-label {
      font-size: 0.9rem;
      color: var(--muted);
      font-weight: bold;
    }

    @media (max-width: 640px) {
      .filter-row { margin-bottom: 9px; }
      .select-group { width: 100%; }
      .select-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .country-dropdown {
        width: auto;
        max-width: 100%;
        padding: 6px 10px;
      }
    }

    .control-dropdown {
      background: #1e293b;
      color: #38bdf8;
      border: 1px solid #334155;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 0.88rem;
      font-weight: bold;
      cursor: pointer;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .control-dropdown:hover { border-color: #38bdf8; }
    .lang-dropdown { background: #0f172a; color: #cbd5e1; }
    .country-dropdown { background: #1e293b; color: #38bdf8; border-color: #0284c7; }
    .weather-map-link {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid #334155;
      border-radius: 6px;
      background: #0f172a;
      color: #7dd3fc;
      text-decoration: none;
      font-size: .8rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .weather-map-link:hover { border-color: #38bdf8; color: #bae6fd; }

    .sub-nav-bar, .tag-nav-bar, .day-nav-bar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .sub-btn, .tag-btn, .day-btn {
      background: #334155;
      color: var(--text);
      border: 1px solid #475569;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s ease;
    }
    .sub-btn { font-size: 0.82rem; padding: 4px 10px; background: #1e293b; }
    .tag-btn { font-size: 0.78rem; padding: 3px 8px; background: #0f172a; border-color: #334155; border-radius: 12px; }
    .day-btn { font-size: 0.82rem; padding: 4px 12px; background: #1e293b; border-color: #0284c7; color: #38bdf8; }

    @media (max-width: 640px) {
      .day-nav-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        flex-wrap: nowrap;
        border: 1px solid #0284c7;
        border-radius: 8px;
        overflow: hidden;
      }
      .day-nav-bar .day-btn {
        width: 100%;
        min-width: 0;
        border: 0;
        border-right: 1px solid #0284c7;
        border-radius: 0;
        padding: 7px 6px;
        white-space: nowrap;
        text-align: center;
      }
      .day-nav-bar .day-btn:last-child { border-right: 0; }

      .sub-nav-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        margin-right: -12px;
        padding-right: 12px;
      }
      .sub-nav-bar::-webkit-scrollbar { display: none; }
      .sub-nav-bar .sub-btn {
        flex: 0 0 auto;
        white-space: nowrap;
      }
    }
    
    .sub-btn.active { background: #0284c7; border-color: #38bdf8; color: #fff; font-weight: bold; }
    .tag-btn.active { background: #38bdf8; color: #0f172a; border-color: #38bdf8; font-weight: bold; }
    .tag-btn[aria-pressed="true"] { background: #38bdf8; color: #0f172a; border-color: #38bdf8; font-weight: bold; }
    .tag-btn:focus { outline: 1px solid #475569; outline-offset: 1px; }
    .tag-btn.active:focus { outline-color: #38bdf8; }
    .day-btn.active { background: #0284c7; color: #fff; font-weight: bold; }
    .tag-count { margin-left: 4px; color: #94a3b8; font-size: .72em; font-weight: 600; }
    .tag-btn.active .tag-count, .tag-btn[aria-pressed="true"] .tag-count { color: #0f172a; }
    .advanced-filter { margin: 2px 0 10px; }
    .advanced-filter summary {
      display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
      color: #94a3b8; font-size: .82rem; font-weight: 700; user-select: none;
      padding: 4px 0;
    }
    .advanced-filter summary:hover { color: #cbd5e1; }
    .advanced-filter[open] summary { color: #38bdf8; }
    .advanced-filter-body {
      margin-top: 6px; padding: 8px 10px; border: 1px solid #334155;
      border-radius: 8px; background: rgba(15,23,42,.45);
    }
    .filter-result-summary {
      color: #94a3b8; font-size: .78rem; margin: -2px 0 10px;
      display: flex; align-items: center; gap: 8px; min-height: 20px;
    }
    .filter-result-summary.narrow { color: #fbbf24; }
    .clear-secondary-filter {
      border: 1px solid #475569; border-radius: 10px; background: #0f172a;
      color: #cbd5e1; padding: 2px 7px; font-size: .72rem; cursor: pointer;
    }
    .clear-secondary-filter:hover { border-color: #38bdf8; color: #38bdf8; }
    .discovery-row {
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      flex-wrap:wrap; margin: 8px 0 6px;
    }
    .discovery-title { font-size:.95rem; font-weight:800; color:#e2e8f0; }
    .place-search {
      min-width:220px; flex:1; max-width:360px;
      background:#0f172a; color:#f8fafc; border:1px solid #334155;
      border-radius:8px; padding:7px 10px; font-size:.84rem; outline:none;
    }
    .place-search:focus { border-color:#38bdf8; box-shadow:0 0 0 1px rgba(56,189,248,.2); }
    .rank-summary { color:#94a3b8; font-size:.78rem; margin-bottom:10px; }

    @media (max-width:640px) {
      .discovery-row {
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        align-items:center;
        gap:8px;
        margin:5px 0 4px;
      }
      .discovery-title { font-size:.84rem; white-space:nowrap; }
      .place-search {
        width:100%;
        min-width:0;
        max-width:none;
        padding:6px 9px;
        font-size:.8rem;
      }
      .rank-summary { font-size:.72rem; margin-bottom:7px; }
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
    }
    .card {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
      border: 1px solid #334155;
      cursor:pointer;
      transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      height: 100%;
      box-sizing: border-box;
    }
    @media (hover:hover) and (pointer:fine) {
      .card:hover {
        transform:translateY(-2px);
        border-color:rgba(56,189,248,.72);
        box-shadow:0 8px 18px -6px rgba(0,0,0,.5);
        background:#202b3d;
      }
    }
    .card:active { transform:translateY(0) scale(.995); }
    .card:focus-visible {
      outline:2px solid #38bdf8;
      outline-offset:3px;
      border-color:#38bdf8;
    }
    .card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
    .card-header-actions { display:flex; align-items:flex-start; gap:7px; flex:0 0 auto; }
    
    /* 雙語景點名稱獨立兩排排版樣式 */
    .spot-title-group { display: flex; flex-direction: column; gap: 2px; }
    @media (min-width:641px) {
      .spot-title-group { min-height: 52px; }
      .tags-wrapper { min-height: 20px; }
    }
    .spot-name { font-size: 1.15rem; font-weight: bold; color: #f8fafc; line-height: 1.3; }
    .spot-local-name { font-size: 0.8rem; color: #94a3b8; font-weight: normal; line-height: 1.2; word-break: break-word; }

    .fav-btn {
      position:static;
      width:30px;
      height:30px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      background:#0f172a;
      border:1px solid #334155;
      border-radius:8px;
      font-size:1.05rem;
      cursor:pointer;
      color:#475569;
      transition:transform .18s ease,border-color .18s ease,background .18s ease;
    }
    .fav-btn.active { color:#f59e0b; }
    .fav-btn:hover { transform:scale(1.06); border-color:#475569; background:#111827; }

    .score-badge { padding: 4px 10px; border-radius: 8px; font-weight: 800; color: #fff; font-size: 0.95rem; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .score-label { display:none; }
    @media (max-width:640px) {
      .score-badge { min-width:46px; text-align:center; line-height:1.05; }
      .score-label { display:block; margin-top:3px; font-size:.58rem; font-weight:700; letter-spacing:0; opacity:.92; }
    }
    .score-gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: 1px solid #fef08a; }
    .score-high { background: #10b981; }
    .score-mid { background: #0284c7; }
    .score-low { background: #475569; }

    .recommendation-reasons {
      margin-top:6px;
      padding:7px 9px;
      border-radius:8px;
      background:rgba(15,23,42,.38);
    }
    .recommendation-reasons-label {
      margin-bottom:4px;
      color:#94a3b8;
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.02em;
    }
    .indicator-pill { display: inline-block; margin-top: 0; font-size: 0.8rem; background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); padding: 3px 8px; border-radius: 6px; font-weight: 600; }
    .factor-row { margin-top: 6px; display:flex; gap:5px; flex-wrap:wrap; }
    .factor-pill { font-size:.7rem; padding:2px 6px; border-radius:9px; border:1px solid #334155; }
    .factor-plus { color:#86efac; background:rgba(34,197,94,.08); }
    .factor-minus { color:#fca5a5; background:rgba(239,68,68,.08); }
    .factor-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
    .factor-pill { font-size:0.72rem; padding:2px 7px; border-radius:10px; border:1px solid #334155; }
    .factor-plus { color:#86efac; background:rgba(34,197,94,.09); border-color:rgba(34,197,94,.3); }
    .factor-minus { color:#fca5a5; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.3); }
    .factor-more { display:none; color:#94a3b8; background:#0f172a; }
    @media (max-width:640px) {
      .factor-row.card-factor-row .factor-pill:nth-child(n+3):not(.factor-more) { display:none; }
      .factor-row.card-factor-row .factor-more { display:inline-block; }
    }
    .shooting-summary {
      margin:4px 0 7px;
      padding:8px 10px;
      border:1px solid rgba(56,189,248,.18);
      border-left:3px solid rgba(56,189,248,.65);
      border-radius:8px;
      background:rgba(15,23,42,.58);
    }
    .theme-winner { display:block; margin:0 0 4px; font-size:.84rem; color:#fbbf24; font-weight:800; line-height:1.35; }
    .best-window-row { margin:2px 0 0; font-size:.88rem; color:#e2e8f0; }
    .best-window-row b { color:#7dd3fc; font-size:.94rem; }
    @media (max-width:640px) {
      .shooting-summary { margin:3px 0 6px; padding:7px 9px; }
      .theme-winner { font-size:.82rem; margin-bottom:3px; }
      .best-window-row { font-size:.82rem; margin-bottom:0; }
      .best-window-row b { font-size:.9rem; }
    }
    .astro-row { font-size:.76rem; color:#a5b4fc; margin-top:5px; }
    .modal-summary {
      background:#111827;
      border:1px solid #273449;
      border-radius:9px;
      padding:10px 12px;
      margin-bottom:9px;
      color:#cbd5e1;
      font-size:.8rem;
      line-height:1.5;
    }
    .modal-summary-main { color:#f8fafc; font-size:.9rem; font-weight:800; }
    .modal-summary-window { margin-top:4px; color:#7dd3fc; font-weight:700; }
    .modal-summary-extra { margin-top:4px; color:#a5b4fc; font-size:.76rem; }
    .kp-pill { display: inline-block; margin-top: 6px; margin-left: 4px; font-size: 0.8rem; background: rgba(255, 235, 59, 0.15); color: #ffeb3b; border: 1px solid rgba(255, 235, 59, 0.4); padding: 3px 8px; border-radius: 6px; font-weight: 600; }

    .category-tag {
      display:inline-block;
      font-size:.68rem;
      font-weight:600;
      line-height:1.2;
      color:#94a3b8;
      background:rgba(51,65,85,.45);
      border:1px solid rgba(71,85,105,.45);
      padding:2px 6px;
      border-radius:5px;
    }
    .scene-pill {
      font-size:.66rem;
      line-height:1.2;
      color:#94a3b8;
      background:transparent;
      border:1px solid rgba(71,85,105,.45);
      padding:2px 6px;
      border-radius:10px;
      margin-right:3px;
    }
    .scene-more { display:none; color:#64748b; }
    .tags-wrapper { margin-top:3px; margin-bottom:7px; opacity:.88; }
    @media (max-width:640px) {
      .category-tag { font-size:.65rem; }
      .tags-wrapper { margin-top:2px; margin-bottom:6px; }
      .tags-wrapper .scene-pill:nth-child(n+3):not(.scene-more) { display:none; }
      .tags-wrapper .scene-more { display:inline-block; }
    }
    .info-row { font-size: 0.88rem; color: #cbd5e1; margin: 4px 0; }
    .local-time-label { display:inline; }
    .cloud-base-unit-long { display:inline; }
    .cloud-base-unit-short { display:none; }
    .forecast-status-row { display:block; }
    .forecast-meta-row { display:none; }
    .card-secondary-meta {
      margin-top:7px;
      padding-top:7px;
      border-top:1px solid rgba(51,65,85,.55);
      display:grid;
      gap:4px;
    }
    .card-secondary-meta .info-row { margin:0; }
    .card-meta-row {
      display:flex;
      align-items:flex-start;
      gap:6px;
      line-height:1.4;
    }
    .card-meta-row + .forecast-meta-row { margin-top:-1px; }
    .card-meta-astro,
    .card-meta-dark { color:#a5b4fc; }
    .card-meta-access {
      margin-top:2px !important;
      padding-top:5px;
      border-top:1px dashed rgba(71,85,105,.45);
    }
    @media (min-width:641px) {
      .card-secondary-meta .info-row {
        font-size:.79rem;
        color:#94a3b8;
        line-height:1.4;
      }
      .card-secondary-meta .forecast-status-row { color:#cbd5e1; }
      .card-secondary-meta .access-note { color:#fbbf24; }
    }
    @media (max-width:640px) {
      .card-secondary-meta { gap:3px; padding-top:6px; }
      .local-time-row { font-size:.76rem; color:#94a3b8; }
      .card-meta-row { font-size:.76rem; }
      .card-meta-access { padding-top:4px; }
      .local-time-label { display:none; }
      .cloud-base-unit-long { display:none; }
      .cloud-base-unit-short { display:inline; }
      .forecast-status-row { font-size:.8rem; line-height:1.4; }
      .forecast-meta-row {
        display:flex;
        flex-wrap:wrap;
        gap:5px 10px;
        margin-top:3px;
        color:#94a3b8;
        font-size:.76rem;
      }
      .forecast-status-row .desktop-forecast-meta { display:none; }
    }
    .access-note { color:#fbbf24; }
    @media (max-width: 640px) {
      .card { padding: 14px; }
      .card-header { margin-bottom: 6px; }
      .tags-wrapper { margin-bottom: 6px; }
      .theme-winner { margin-bottom: 3px; }
      .info-row { margin: 3px 0; }
      .access-note {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.45;
      }
      .card-footer-tools { margin-top: 9px; }
    }
    
    .card-footer-tools {
      margin-top:12px;
      padding-top:8px;
      border-top:1px dashed #334155;
    }
    .card-footer-tools > div:first-child { display:none; }
    .card-footer-tools > div:last-child {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:7px;
    }
    .tool-link {
      display:flex;
      align-items:center;
      justify-content:center;
      min-width:0;
      font-size:0.78rem;
      line-height:1.2;
      text-align:center;
      white-space:nowrap;
      color:var(--accent);
      text-decoration:none;
      background:#0f172a;
      padding:6px 8px;
      border-radius:6px;
      border:1px solid #334155;
      transition:background .2s ease,border-color .2s ease,color .18s ease,transform .12s ease;
      cursor:pointer;
    }
    .tool-link:hover { background:#334155; border-color:#64748b; color:#7dd3fc; }
    .tool-link:active { transform:translateY(1px); }
    .card-footer-tools { cursor:default; }
    .tool-link.disabled { color:#64748b; cursor:not-allowed; opacity:.75; }
    .tool-link.disabled:hover { background:#0f172a; }

    @media (max-width:640px) {
      .card-footer-tools {
        margin-top:10px;
        padding-top:8px;
      }
      .card-footer-tools > div:last-child { gap:6px; }
      .card-footer-tools .tool-link {
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:0;
        padding:7px 5px;
        font-size:.74rem;
        line-height:1.2;
        text-align:center;
        white-space:nowrap;
      }
    }

    #loading {
      max-width:520px;
      margin:36px auto 0;
      padding:16px 18px;
      text-align:center;
      font-size:.95rem;
      line-height:1.5;
      color:var(--muted);
      background:rgba(30,41,59,.55);
      border:1px solid #334155;
      border-radius:10px;
    }
    .empty-state {
      grid-column:1/-1;
      margin:18px 0 0;
      padding:22px 16px;
      text-align:center;
      color:var(--muted);
      background:rgba(30,41,59,.45);
      border:1px dashed #475569;
      border-radius:10px;
      line-height:1.5;
    }

    .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 15px; }
    .modal { background: #0c0c0c; border: 1px solid #333; border-radius: 8px; max-width: 950px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; font-family: "Courier New", Courier, monospace; color: #ffffff; box-shadow: 0 0 20px rgba(0,255,255,0.1); }
    .modal-header { padding: 12px 16px; background: #181818; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
    .modal-title { font-size: 1.1rem; font-weight: bold; color: #38bdf8; }
    .close-btn {
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:34px;
      height:34px;
      padding:0;
      background:none;
      border:1px solid transparent;
      border-radius:8px;
      color:#888;
      font-size:1.4rem;
      line-height:1;
      cursor:pointer;
    }
    .close-btn:hover { color:#fff; border-color:#334155; background:#111827; }
    .modal-body {
      min-height:0;
      padding:12px;
      overflow-y:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }
    
    .terminal-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; color: #ffffff; }
    .terminal-table th, .terminal-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #222; }
    .terminal-table th { background: #141414; color: #ff79c6; position: sticky; top: 0; }
    
    .terminal-table tr.past-row { color: #888888 !important; background: #080808; }
    .terminal-table tr.best-row { background: rgba(56, 189, 248, 0.22); border-left: 3px solid #38bdf8; color: #ffffff !important; }
    .tag-past { font-size: 0.7rem; color: #aaa; border: 1px solid #555; padding: 1px 4px; border-radius: 3px; }
    .tag-best {
      display:inline-block;
      margin-left:5px;
      padding:1px 5px;
      border-radius:4px;
      border:1px solid rgba(56,189,248,.72);
      background:rgba(56,189,248,.16);
      color:#7dd3fc;
      font-size:.66rem;
      font-weight:800;
      letter-spacing:.02em;
      vertical-align:middle;
    }

    .timeline-mobile { display: none; }
    .timeline-mobile-card {
      border: 1px solid #2b3442;
      border-radius: 10px;
      background: #111;
      padding: 10px 12px;
      margin-bottom: 9px;
    }
    .timeline-mobile-card.past-row { opacity: .58; background: #080808; }
    .timeline-mobile-card.best-row {
      background: rgba(56, 189, 248, 0.14);
      border-color: #38bdf8;
      box-shadow: inset 3px 0 0 #38bdf8;
    }
    .timeline-mobile-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 7px;
    }
    .timeline-mobile-time { font-size: .84rem; color: #e2e8f0; font-weight: 700; }
    .timeline-score-badge {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:34px;
      padding:2px 6px;
      border-radius:6px;
      font-weight:800;
      line-height:1.2;
      color:#fff;
      background:#475569;
    }
    .timeline-score-badge.high { background:#10b981; }
    .timeline-score-badge.mid { background:#0284c7; }
    .timeline-score-badge.low { background:#475569; }
    .timeline-mobile-score { font-size:1rem; white-space:nowrap; }
    .timeline-mobile-status { color: #fbbf24; font-size: .76rem; margin-top: 2px; line-height: 1.35; }
    .timeline-mobile-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px 10px;
      color: #cbd5e1;
      font-size: .74rem;
      line-height: 1.35;
    }
    .timeline-mobile-metric b { color:#94a3b8; font-weight:600; }
    .timeline-mobile-metric.primary {
      padding:4px 6px;
      border-radius:6px;
      background:rgba(56,189,248,.07);
    }
    .timeline-mobile-metric.primary b { color:#7dd3fc; }
    .terminal-table th.key-metric { color:#7dd3fc; }
    .terminal-table td.key-metric {
      background:rgba(56,189,248,.05);
      color:#e2e8f0;
      font-weight:700;
    }
    .timeline-mobile-astro {
      margin-top: 7px;
      color: #a5b4fc;
      font-size: .72rem;
      line-height: 1.4;
    }

    @media (max-width: 640px) {
      .modal-overlay {
        padding:8px;
        align-items:flex-start;
        overscroll-behavior:contain;
      }
      .modal {
        max-height:calc(100vh - 16px);
        max-height:calc(100dvh - 16px);
        margin-top:8px;
      }
      .modal-header {
        gap:10px;
        padding:9px 10px 9px 12px;
        align-items:flex-start;
      }
      .modal-title {
        min-width:0;
        flex:1 1 auto;
        font-size:1rem;
        line-height:1.3;
        overflow-wrap:anywhere;
      }
      .close-btn {
        width:40px;
        height:40px;
        margin:-4px -2px -4px 0;
        font-size:1.55rem;
        background:#111827;
        border-color:#273449;
      }
      .modal-body { padding: 10px; }
      .timeline-table-wrap { display: none; }
      .timeline-mobile { display: block; }
      .modal-summary { font-size: .76rem; }
    }
    .place-guide-modal { max-width: 820px; background: #111827; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    .place-guide-time-note { color:#94a3b8; font-size:.78rem; margin-bottom:10px; line-height:1.45; }
    .place-guide-section-title { color:#e2e8f0; font-size:.88rem; font-weight:800; margin-bottom:8px; }
    .place-guide-intro { color:#94a3b8; font-size:.84rem; margin-bottom:12px; line-height:1.5; }
    .place-guide-empty { border:1px dashed #475569; border-radius:9px; padding:14px 12px; color:#94a3b8; background:#0f172a; font-size:.84rem; line-height:1.5; text-align:center; }
    .place-guide-more { margin-top:14px; border:1px solid #334155; border-radius:10px; overflow:hidden; background:rgba(15,23,42,.55); }
    .place-guide-more > summary { cursor:pointer; list-style:none; padding:11px 13px; color:#cbd5e1; font-size:.84rem; font-weight:800; user-select:none; }
    .place-guide-more > summary::-webkit-details-marker { display:none; }
    .place-guide-more > summary::after { content:"＋"; float:right; color:#64748b; }
    .place-guide-more[open] > summary::after { content:"−"; }
    .place-guide-more[open] > summary { border-bottom:1px solid #334155; }
    .place-guide-more-body { padding:12px; }
    .opportunity-list { display:flex; flex-direction:column; gap:12px; }
    .opportunity-card { border:1px solid #334155; border-radius:10px; background:#172033; padding:12px 14px; }
    .opportunity-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
    .opportunity-title { font-weight:800; color:#f8fafc; line-height:1.35; }
    .opportunity-score { min-width:42px; text-align:center; font-weight:800; border-radius:7px; padding:4px 8px; background:#334155; }
    .opportunity-score.high { background:#10b981; }
    .opportunity-score.mid { background:#0284c7; }
    .opportunity-score.low { background:#475569; }
    .opportunity-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:5px 12px; color:#cbd5e1; font-size:.82rem; margin-bottom:8px; }
    .opportunity-current { margin:0 0 8px; padding:7px 9px; border-radius:8px; background:#0f172a; color:#cbd5e1; font-size:.8rem; line-height:1.45; }
    .score-explain { margin-top:8px; border-top:1px dashed #334155; padding-top:7px; }
    .score-explain summary { cursor:pointer; color:#7dd3fc; font-size:.8rem; font-weight:700; user-select:none; }
    .score-explain[open] summary { margin-bottom:6px; }
    .score-explain-body { color:#cbd5e1; font-size:.8rem; line-height:1.5; }
    .score-explain-status { margin-bottom:5px; }
    .score-explain .factor-row { margin-top:5px; }
    .research-details { margin-top:8px; border-top:1px dashed #334155; padding-top:7px; }
    .research-details summary { cursor:pointer; color:#7dd3fc; font-size:.8rem; font-weight:700; user-select:none; }
    .research-details[open] summary { margin-bottom:6px; }
    .research-block { font-size:.82rem; line-height:1.55; color:#cbd5e1; }
    .research-label { color:#7dd3fc; font-weight:700; }
    .variant-name { color:#e2e8f0; font-weight:700; margin-top:6px; }
    @media (max-width:640px) {
      .place-guide-time-note { margin-bottom:8px; }
      .place-guide-section-title { font-size:.84rem; }
      .place-guide-intro { font-size:.78rem; margin-bottom:9px; }
      .place-guide-more { margin-top:11px; }
      .place-guide-more > summary { padding:10px 11px; }
      .place-guide-more-body { padding:10px; }
      .opportunity-list { gap:9px; }
      .opportunity-card { padding:11px 12px; }
      .opportunity-head { margin-bottom:7px; }
      .opportunity-meta { grid-template-columns:1fr; gap:4px; margin-bottom:7px; }
    }
    .unresearched-note { border:1px solid #475569; border-radius:8px; padding:12px; color:#cbd5e1; background:#0f172a; line-height:1.55; }

/* B102 desktop stage 1: wider dashboard, sticky unified filters, denser cards */
.site-header {
  max-width: 1600px;
  margin: 0 auto 10px;
  padding-bottom: 0;
  border-bottom: 0;
}
.filter-shell {
  position: sticky;
  top: 0;
  z-index: 120;
  margin: 0 auto 16px;
  background: rgba(15, 23, 42, .96);
  border-bottom: 1px solid #334155;
  backdrop-filter: blur(10px);
}
.filter-toolbar {
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 0 9px;
}
.filter-toolbar .filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  align-items: center;
  gap: 10px 12px;
  margin: 0;
}
.filter-toolbar .sub-nav-bar {
  margin: 0;
  min-width: 0;
}
.filter-toolbar .place-search {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.filter-toolbar-secondary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.filter-toolbar-secondary .day-nav-bar {
  flex: 0 0 auto;
  margin: 0;
}
.filter-toolbar-secondary .discovery-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  flex: 1;
  margin: 0;
}
.filter-toolbar-secondary .rank-summary {
  margin: 0;
  white-space: nowrap;
}

.container {
  max-width: 1600px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.card {
  padding: 14px;
}
.card-header {
  margin-bottom: 5px;
}
.spot-title-group {
  min-height: 0;
}
.tags-wrapper {
  min-height: 0;
  margin-bottom: 5px;
}
.shooting-summary {
  margin: 3px 0 5px;
  padding: 7px 9px;
}
.recommendation-reasons {
  margin-top: 4px;
  padding: 0;
  background: transparent;
}
.recommendation-reasons-label {
  display: none;
}
.card-secondary-meta {
  margin-top: 6px;
  padding-top: 6px;
  gap: 3px;
}
.card-secondary-meta .info-row {
  font-size: .75rem;
}
.card-footer-tools {
  margin-top: 9px;
  padding-top: 7px;
}

.deferred-group {
  grid-column: 1 / -1;
  margin-top: 4px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: rgba(30, 41, 59, .32);
  overflow: hidden;
}
.deferred-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  color: #cbd5e1;
  font-size: .86rem;
  font-weight: 800;
  user-select: none;
}
.deferred-group > summary::-webkit-details-marker { display: none; }
.deferred-group > summary::after {
  content: "＋";
  float: right;
  color: #64748b;
}
.deferred-group[open] > summary::after { content: "−"; }
.deferred-group[open] > summary {
  border-bottom: 1px solid #334155;
}
.deferred-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

@media (min-width: 700px) {
  .container,
  .deferred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .container,
  .deferred-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .container,
  .deferred-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .filter-toolbar .filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  }
  .filter-toolbar .place-search {
    grid-column: auto;
  }
  .filter-toolbar-secondary {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }
}

@media (max-width: 640px) {
  .site-header {
    margin-bottom: 8px;
  }
  .filter-shell {
    position: static;
    margin-bottom: 12px;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
  }
  .filter-toolbar {
    padding: 0;
  }
  .filter-toolbar .filter-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 9px;
  }
  .filter-toolbar .sub-nav-bar {
    order: 1;
    width: auto;
    flex: 1 1 auto;
    margin-right: 0;
  }
  .filter-toolbar .place-search {
    order: 2;
    flex: 1 1 150px;
    width: auto;
  }
  .filter-toolbar-secondary {
    display: block;
    margin-top: 0;
  }
  .filter-toolbar-secondary .day-nav-bar {
    margin-bottom: 7px;
  }
  .filter-toolbar-secondary .discovery-row {
    display: block;
    margin: 0;
  }
  .filter-toolbar-secondary .rank-summary {
    margin-top: 3px;
    white-space: normal;
  }
  .deferred-grid {
    padding: 12px;
    gap: 12px;
  }
}


/* B103 card density pass: compact secondary metadata for desktop scanning */
.card-quick-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.card-timezone {
  color:#94a3b8;
  font-size:.72rem;
  white-space:nowrap;
}
.card-metric-chips {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}
.metric-chip {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:1px 6px;
  border:1px solid rgba(71,85,105,.55);
  border-radius:8px;
  background:rgba(15,23,42,.38);
  color:#cbd5e1;
  font-size:.7rem;
  line-height:1.2;
  white-space:nowrap;
}
@media (min-width:641px) {
  .forecast-status-row {
    color:#94a3b8 !important;
    font-size:.72rem !important;
    line-height:1.35 !important;
  }
}
@media (max-width:640px) {
  .card-quick-meta {
    align-items:flex-start;
  }
  .card-timezone {
    font-size:.72rem;
  }
  .metric-chip {
    font-size:.7rem;
  }
}


/* B104/B137 country-aware first-level administrative-area filter */
.admin-filter-host {
  flex: 0 0 auto;
}
.admin-filter {
  position: relative;
}
.admin-filter > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #1e293b;
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.admin-filter > summary::-webkit-details-marker { display: none; }
.admin-filter[open] > summary {
  border-color: #38bdf8;
  color: #7dd3fc;
}
.admin-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 180;
  width: min(620px, 78vw);
  max-height: min(70vh, 720px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #111827;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.admin-area-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 9px;
  padding: 7px 9px;
  border: 1px solid #334155;
  border-radius: 7px;
  background: #0f172a;
  color: #f8fafc;
  font-size: .76rem;
  outline: none;
}
.admin-area-search:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56,189,248,.16);
}
.admin-area-groups {
  display: grid;
  gap: 10px;
}
.admin-area-group + .admin-area-group {
  padding-top: 9px;
  border-top: 1px solid rgba(51,65,85,.55);
}
.admin-area-group-title {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: #7dd3fc;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.admin-area-group-title::-webkit-details-marker { display: none; }
.admin-area-group-chevron {
  color: #64748b;
  transition: transform .16s ease;
}
.admin-area-group[open] > .admin-area-group-title .admin-area-group-chevron {
  transform: rotate(180deg);
}
.admin-area-empty {
  padding: 12px 4px 4px;
  color: #64748b;
  font-size: .76rem;
  text-align: center;
}
.admin-area-btn[hidden],
.admin-area-group[hidden],
.admin-area-empty[hidden] {
  display: none !important;
}
.admin-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: .74rem;
  font-weight: 800;
}
.admin-filter-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-clear-btn {
  border: 0;
  background: transparent;
  color: #38bdf8;
  font: inherit;
  cursor: pointer;
}
.admin-filter-footer,
.admin-mobile-handle,
.admin-picker-backdrop {
  display: none;
}
.admin-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.admin-close-btn:hover,
.admin-close-btn:focus-visible {
  border-color: #475569;
  background: rgba(71,85,105,.22);
  color: #e2e8f0;
  outline: none;
}
.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.admin-area-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #334155;
  border-radius: 7px;
  background: #0f172a;
  color: #cbd5e1;
  font-size: .74rem;
  cursor: pointer;
}
.admin-area-name {
  order: 1;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  text-align: left;
}
.admin-area-check {
  width: 12px;
  flex: 0 0 12px;
  color: #38bdf8 !important;
  font-size: .7rem !important;
  font-style: normal;
  visibility: hidden;
}
.admin-area-btn.active .admin-area-check {
  visibility: visible;
}
.admin-area-count {
  order: 2;
  color: #64748b;
  font-size: .68rem;
}
.admin-area-btn:hover {
  border-color: #64748b;
}
.admin-area-btn.active {
  border-color: #38bdf8;
  background: rgba(56,189,248,.12);
  color: #7dd3fc;
}
.admin-area-btn.active .admin-area-count {
  color: #7dd3fc;
}
.admin-area-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
  border-color: #263244;
  color: #64748b;
  background: #0b1220;
}
.admin-area-btn:disabled .admin-area-count,
.admin-area-btn:disabled .admin-area-name {
  color: #475569;
}

@media (max-width: 900px) {
  .admin-filter-menu {
    width: min(440px, 82vw);
  }
  .admin-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 641px) {
  .admin-area-group > .admin-area-group-title {
    pointer-events: none;
  }
  .admin-area-group-chevron {
    display: none;
  }
}

@media (max-width: 640px) {
  body.admin-picker-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
  .admin-filter-host {
    margin: 7px 0;
  }
  .admin-filter {
    width: 100%;
  }
  .admin-filter > summary {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 8px 12px;
    border-color: #475569;
    border-radius: 8px;
    font-size: .86rem;
  }
  .admin-picker-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(2, 6, 23, .68);
    backdrop-filter: blur(2px);
  }
  .admin-filter-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 220;
    width: 100%;
    height: min(72dvh, 680px);
    max-height: 82dvh;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #334155;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: #111827;
    box-shadow: 0 -18px 46px rgba(0,0,0,.5);
    animation: admin-sheet-in .18s ease-out;
  }
  .admin-mobile-handle {
    display: block;
    flex: 0 0 auto;
    width: 42px;
    height: 4px;
    margin: 8px auto 3px;
    border-radius: 999px;
    background: #475569;
  }
  .admin-filter-head {
    flex: 0 0 auto;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 10px 5px 14px;
    border-bottom: 1px solid rgba(51,65,85,.72);
    color: #e2e8f0;
    font-size: .88rem;
  }
  .admin-filter-head-actions {
    gap: 2px;
  }
  .admin-filter-head .admin-clear-btn {
    min-height: 40px;
    padding: 0 8px;
    font-size: .78rem;
  }
  .admin-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #cbd5e1;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
  }
  .admin-close-btn:active {
    background: rgba(71,85,105,.35);
  }
  .admin-area-search {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    margin: 10px 14px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .86rem;
  }
  .admin-area-groups {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 14px;
  }
  .admin-area-group {
    padding: 0;
    border: 0;
  }
  .admin-area-group + .admin-area-group {
    padding-top: 0;
    border-top: 1px solid rgba(51,65,85,.55);
  }
  .admin-area-group-title {
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 2px 9px;
    color: #7dd3fc;
    font-size: .84rem;
    cursor: pointer;
    user-select: none;
  }
  .admin-area-group-chevron {
    display: inline-block;
    font-size: .9rem;
  }
  .admin-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 0 10px;
  }
  .admin-area-btn {
    min-height: 44px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .84rem;
  }
  .admin-area-check {
    width: 14px;
    flex-basis: 14px;
    font-size: .78rem !important;
  }
  .admin-area-count {
    font-size: .76rem;
  }
  .admin-area-empty {
    flex: 0 0 auto;
    padding: 14px;
    font-size: .82rem;
  }
  .admin-filter-footer {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 9px;
    flex: 0 0 auto;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #334155;
    background: #111827;
  }
  .admin-footer-clear,
  .admin-done-btn {
    min-height: 46px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
  }
  .admin-footer-clear {
    border: 1px solid #475569;
    background: #0f172a;
    color: #cbd5e1;
  }
  .admin-done-btn {
    border: 1px solid #38bdf8;
    background: #0284c7;
    color: #fff;
  }
  .admin-footer-clear:active,
  .admin-done-btn:active {
    transform: translateY(1px);
  }
}

@keyframes admin-sheet-in {
  from { transform: translateY(18px); opacity: .92; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-filter-menu,
  .admin-area-group-chevron {
    animation: none !important;
    transition: none !important;
  }
}

/* 2026-09-30 desktop visual hierarchy pass
   Goal: make the forecast board easier to scan on wide displays without
   changing mobile behavior or any scoring / data logic. */
@media (min-width: 901px) {
  :root { --desktop-shell-max: 1720px; }

  body {
    padding-left: clamp(18px, 2vw, 36px);
    padding-right: clamp(18px, 2vw, 36px);
  }

  .site-header,
  .filter-toolbar,
  .container {
    max-width: var(--desktop-shell-max);
  }

  .site-header {
    margin-bottom: 6px;
  }

  .header-top {
    min-height: 48px;
    margin-bottom: 0;
    gap: 20px;
  }

  .header-right {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  h1 {
    font-size: 1.62rem;
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  .control-dropdown,
  .weather-map-link {
    min-height: 34px;
    box-sizing: border-box;
  }

  .updated {
    flex-basis: 100%;
    margin-top: -2px;
    font-size: .72rem;
  }

  .filter-shell {
    margin-left: calc(clamp(18px, 2vw, 36px) * -1);
    margin-right: calc(clamp(18px, 2vw, 36px) * -1);
    padding-left: clamp(18px, 2vw, 36px);
    padding-right: clamp(18px, 2vw, 36px);
    box-shadow: 0 8px 20px -18px rgba(0,0,0,.9);
  }

  .filter-toolbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .filter-toolbar .filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  }

  .place-search {
    height: 36px;
    border-color: #3b4b61;
    background: #111b2e;
  }

  .filter-toolbar-secondary {
    margin-top: 7px;
  }

  .discovery-title {
    font-size: .9rem;
  }

  .rank-summary {
    font-size: .74rem;
  }

  .container,
  .deferred-grid {
    gap: 14px;
  }

  .card {
    border-radius: 10px;
    padding: 13px 14px 12px;
    border-color: rgba(71,85,105,.72);
    box-shadow: 0 3px 10px -7px rgba(0,0,0,.9);
  }

  .card-header {
    gap: 10px;
    margin-bottom: 4px;
  }

  .spot-name {
    font-size: 1.06rem;
    letter-spacing: -.01em;
  }

  .spot-local-name {
    font-size: .74rem;
  }

  .card-header-actions {
    gap: 6px;
  }

  .score-badge {
    min-width: 44px;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: .86rem;
    letter-spacing: .2px;
    box-shadow: none;
  }

  .fav-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: .96rem;
  }

  .category-tag {
    font-size: .63rem;
    padding: 1px 5px;
    opacity: .9;
  }

  .tags-wrapper {
    margin-top: 1px;
    margin-bottom: 5px;
  }

  .scene-pill {
    font-size: .62rem;
    padding: 1px 5px;
  }

  .shooting-summary {
    padding: 7px 9px 7px 10px;
    border-left-width: 2px;
    background: rgba(15,23,42,.44);
  }

  .theme-winner {
    font-size: .79rem;
    margin-bottom: 2px;
  }

  .best-window-row {
    font-size: .8rem;
  }

  .best-window-row b {
    font-size: .86rem;
  }

  .indicator-pill,
  .factor-pill {
    font-size: .67rem;
  }

  .card-secondary-meta {
    margin-top: 5px;
    padding-top: 5px;
  }

  .card-secondary-meta .info-row {
    font-size: .71rem;
  }

  .card-quick-meta {
    min-height: 22px;
  }

  .metric-chip,
  .card-timezone {
    font-size: .67rem;
  }

  .card-footer-tools {
    margin-top: 8px;
    padding-top: 7px;
  }

  .tool-link {
    min-height: 30px;
    padding: 5px 7px;
    font-size: .72rem;
    color: #9bdcf8;
    background: rgba(15,23,42,.66);
  }

  @media (hover:hover) and (pointer:fine) {
    .card:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px -16px rgba(0,0,0,.95);
    }
    .tool-link:hover {
      background: #26364d;
      border-color: #52657f;
    }
  }
}

@media (min-width: 1700px) {
  .container,
  .deferred-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}



/* Place discovery: explicit sort + compact area filtering */
.sort-control {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
}
.sort-control label {
  color: #94a3b8;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}
.sort-select {
  min-height: 30px;
  max-width: 190px;
  padding: 4px 28px 4px 9px;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #1e293b;
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
.sort-select:hover,
.sort-select:focus-visible {
  border-color: #38bdf8;
}
.sort-status {
  max-width: 210px;
  color: #7dd3fc;
  font-size: .7rem;
  line-height: 1.25;
}

.admin-area-empty-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 9px;
  padding: 4px 8px;
  border: 1px dashed #334155;
  border-radius: 7px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}
.admin-area-empty-toggle:hover,
.admin-area-empty-toggle:focus-visible {
  border-color: #64748b;
  color: #cbd5e1;
  outline: none;
}

.spot-region-section {
  grid-column: 1 / -1;
  min-width: 0;
}
.spot-region-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 3px 0 10px;
  padding: 0 2px 7px;
  border-bottom: 1px solid rgba(71,85,105,.72);
  color: #7dd3fc;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .01em;
}
.spot-region-count {
  color: #64748b;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.spot-region-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 700px) {
  .spot-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .spot-region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .spot-region-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sort-control {
    width: 100%;
  }
  .sort-status {
    margin-left: auto;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .sort-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
  }
  .sort-control label {
    font-size: .78rem;
  }
  .sort-select {
    width: 100%;
    max-width: none;
    min-height: 44px;
    font-size: .84rem;
  }
  .sort-status {
    grid-column: 1 / -1;
    margin: -1px 0 0;
    font-size: .72rem;
  }
  .admin-area-empty-toggle {
    flex: 0 0 auto;
    margin: 0 14px 8px;
    min-height: 36px;
    justify-content: center;
  }
  .spot-region-heading {
    margin-top: 1px;
    font-size: .88rem;
  }
}

/* V2 evaluation strip inside place modal (GUIDANCE-only) */
.v2-eval-block{margin-top:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.03)}
.v2-title{font-size:.78rem;font-weight:600;color:#8fa1b3;margin-bottom:6px}
.v2-day{display:flex;align-items:center;gap:8px;font-size:.8rem;padding:2px 0;flex-wrap:wrap}
.v2-day-label{color:#cfd8e3;min-width:3.2em}
.v2-badge{padding:1px 8px;border-radius:999px;font-size:.72rem;font-weight:600}
.v2-badge.v2-ok{background:rgba(46,160,67,.18);color:#3fb950}
.v2-badge.v2-bad{background:rgba(248,81,73,.15);color:#f85149}
.v2-badge.v2-unk{background:rgba(187,128,9,.18);color:#d29922}
.v2-hours{color:#8fa1b3;font-size:.75rem}
.v2-fail-by{color:#f0817c;font-size:.72rem;padding-left:3.4em}
.v2-now,.v2-next{font-size:.78rem;color:#cfd8e3;margin-top:4px}
.v2-note{font-size:.75rem;color:#8fa1b3}
.v2-past-note{font-size:.72rem;color:#8fa1b3;padding-left:3.4em}

/* V2 subject replacement (owner directive 2026-10-31) */
.v2-genre-chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:600;background:rgba(88,166,255,.15);color:#58a6ff;vertical-align:middle}
.v2-chip-ok{color:#3fb950;font-weight:600}
.v2-chip-bad{color:#f85149;font-weight:600}
.v2-conditions{margin-top:8px;font-size:.8rem}
.v2-cond-group{margin-top:6px}
.v2-cond{padding:3px 0;border-top:1px dashed rgba(255,255,255,.08)}
.v2-cond:first-of-type{border-top:none}
.v2-cond-live{margin-top:2px;font-size:12px;color:#8fd0ff}
.v2-th{color:#58a6ff;font-size:.75rem}
.v2-why{color:#8fa1b3;font-size:.72rem;margin-top:1px}

.v2-none{color:#c9d1d9}

/* CL-UI-14: weather-modal consistency + user-view UI */
.modal-headline{color:#f8fafc;font-size:.95rem;font-weight:800;line-height:1.55;margin-bottom:7px}
.modal-next-window{color:#0f172a;background:#38bdf8;border-radius:8px;padding:8px 11px;font-weight:800;font-size:.86rem;margin-bottom:9px}
.modal-next-window b{color:#082f49}
.modal-day-switch{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.modal-day-btn{padding:8px 14px;min-height:36px;border-radius:8px;border:1px solid #334155;background:#111827;color:#cbd5e1;font-weight:700;font-size:.8rem;cursor:pointer}
.modal-day-btn:hover{border-color:#38bdf8;color:#e2e8f0}
.modal-day-btn.active{background:#38bdf8;border-color:#38bdf8;color:#0f172a}
.modal-overview{border:1px solid #1e293b;border-radius:9px;padding:9px 11px;margin-bottom:10px;display:flex;flex-direction:column;gap:5px;background:rgba(15,23,42,.45)}
.modal-day-row{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:.8rem;color:#cbd5e1;align-items:baseline}
.modal-day-label{color:#e2e8f0;font-weight:800}
.modal-day-none{color:#94a3b8}
.modal-day-window{color:#7dd3fc}
.modal-day-window b{color:#f8fafc}
.timeline-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.74rem;color:#94a3b8;padding:5px 2px;align-items:center}
.timeline-legend .legend-title{color:#64748b;font-weight:700}
.timeline-legend .legend-ok{color:#34d399}
.timeline-legend .legend-chance{color:#fbbf24}
.timeline-legend .legend-bad{color:#f87171}
.timeline-legend .legend-outside{color:#94a3b8}
.astro-missing{color:#64748b;font-size:.74rem}
.terminal-table th:first-child,.terminal-table td:first-child{position:sticky;left:0;z-index:1}
.terminal-table td:first-child{background:#0c0c0c}
.terminal-table tr.past-row td:first-child{background:#080808}
.terminal-table tr.best-row td:first-child{background:#12304a}
#modal-close-mobile{display:none}
.modal-close-mobile-btn{width:100%;min-height:46px;border-radius:10px;border:1px solid #334155;background:#111827;color:#e2e8f0;font-size:1rem;font-weight:800;cursor:pointer}
@media (max-width:640px){
  .modal-headline{font-size:.9rem}
  .modal-overview{font-size:.78rem;padding:8px 9px}
  .modal-day-row{font-size:.78rem}
  .modal-day-btn{min-height:40px;padding:9px 14px;font-size:.82rem}
  .timeline-mobile-card{padding:12px 13px}
  .timeline-mobile-metrics{font-size:.8rem}
  .timeline-mobile-time{font-size:.92rem}
  .timeline-mobile-status{font-size:.82rem}
  .modal-summary{font-size:.8rem}
  .timeline-legend{font-size:.78rem}
  #modal-close-mobile{display:block;position:sticky;bottom:0;padding:10px 2px 2px;background:linear-gradient(transparent,#0c0c0c 40%)}
}
