header { background: linear-gradient(90deg, #b91c1c, #f59e0b) !important; }
header h1, header p { color: #fff7ed !important; }
.panel .body { padding: 10px 14px 14px; }
.ctrl { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 14px 0; }
.ctrl label { font-size:.88rem; color:var(--muted); display:inline-flex; gap:6px; align-items:center; }
.ctrl select, .ctrl input { padding:6px 10px; border-radius:8px; border:1px solid var(--border,#e0d4a8); background:var(--input-bg,#fff); color:var(--ink); font-size:.9rem; }
.ctrl .spacer { flex:1; }
.seg { display:inline-flex; flex-wrap:wrap; gap:6px; }
.seg button { appearance:none; border:1px solid var(--border,#e0d4a8); background:var(--row,#fffdf5); color:var(--heading,#78350f); font-weight:700; font-size:.82rem; padding:6px 10px; border-radius:8px; cursor:pointer; }
.seg button.active { background:var(--accent,#d97706); color:#fff; border-color:var(--accent-hover,#b45309); }
.map-grid { display:grid; grid-template-columns: 1.6fr 1fr; gap:12px; }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; } }
.chart-map { height: 430px; }
.chart-rank { height: 430px; }
.panel .src { padding: 0 14px 12px; font-size:.78rem; color:var(--muted); }
.card .v small { font-size:.75rem; font-weight:600; color:var(--muted); }
td.tag { font-size:.78rem; }
.tag-c { color:#b91c1c; font-weight:700; } .tag-b { color:#78716c; }
html.mobile .chart-map, html.pd-mobile .chart-map { height: 300px; }
html.mobile .chart-rank, html.pd-mobile .chart-rank { height: 360px; }
.species-bar { position: sticky; top: var(--nav-sticky-h, 3.25rem); z-index: 40; }
.species-bar .seg button { font-size: .85rem; }
.unit-seg button { padding: 4px 8px; font-size: .78rem; }
.sp-dd { position: relative; }
.sp-dd summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--border,#e0d4a8); border-radius: 8px; background: var(--input-bg,#fff); font-weight: 700; color: var(--heading,#78350f); max-width: 520px; }
.sp-dd summary::-webkit-details-marker { display: none; }
.sp-menu { position: absolute; z-index: 60; top: 110%; left: 0; min-width: 300px; max-height: 70vh; overflow: auto; background: var(--card,#fff8e7); border: 1px solid var(--border,#e0d4a8); border-radius: 10px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.sp-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.sp-actions button { appearance: none; border: 1px solid var(--border,#e0d4a8); background: var(--row,#fffdf5); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-weight: 700; color: var(--heading,#78350f); }
.sp-group { padding: 4px 0; border-top: 1px solid var(--border,#e0d4a8); }
.sp-group label { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer; font-size: .92rem; color: var(--ink); }
.sp-parent { font-weight: 700; }
.sp-child { padding-left: 24px !important; }
.sp-group input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent,#d97706); }
html.mobile .sp-menu, html.pd-mobile .sp-menu { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; }
html.mobile .sp-dd summary, html.pd-mobile .sp-dd summary { max-width: 80vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }