* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #0a0e17; color: #e0e6ed; -webkit-text-size-adjust: 100%; }

#app { display: flex; height: 100vh; height: 100dvh; }
#sidebar { width: 420px; min-width: 320px; max-width: 100vw; background: #111827; display: flex; flex-direction: column; border-right: 1px solid #1f2937; z-index: 1000; }
#map-container { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }

/* Header */
.sidebar-header { padding: 16px 20px; background: linear-gradient(135deg, #1e3a5f, #0f2440); border-bottom: 1px solid #1f2937; }
.sidebar-header h1 { font-size: 18px; font-weight: 700; color: #60a5fa; letter-spacing: -0.3px; }
.sidebar-header p { font-size: 11px; color: #94a3b8; margin-top: 4px; }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid #1f2937; background: #0f1729; }
.tab { flex: 1; padding: 10px 8px; font-size: 11px; font-weight: 600; text-align: center; border-bottom: 2px solid transparent; color: #64748b; transition: all 0.2s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tab:hover { color: #94a3b8; background: #1a2332; }
.tab.active { color: #60a5fa; border-bottom-color: #3b82f6; background: #111827; }

/* Search */
.search-box { padding: 12px 16px; border-bottom: 1px solid #1f2937; }
.search-box input { width: 100%; padding: 8px 12px; background: #1e293b; border: 1px solid #374151; border-radius: 6px; color: #e0e6ed; font-size: 13px; outline: none; }
.search-box input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.search-box input::placeholder { color: #4b5563; }

/* Tab panels */
#explorer-panel, #calculator-panel, #compare-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* Panel content */
.panel-content { flex: 1; overflow-y: auto; padding: 12px 16px; min-height: 0; }
.panel-content::-webkit-scrollbar { width: 6px; }
.panel-content::-webkit-scrollbar-track { background: #111827; }
.panel-content::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }

/* Country card */
.country-card { background: #1e293b; border: 1px solid #2d3748; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; transition: all 0.15s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.country-card:hover { border-color: #3b82f6; transform: translateX(2px); }
.country-card.selected { border-color: #3b82f6; background: #1a2744; }
.country-card .cc-header { display: flex; justify-content: space-between; align-items: center; }
.country-card .cc-name { font-size: 14px; font-weight: 600; color: #f1f5f9; }
.country-card .cc-code { font-size: 11px; color: #64748b; font-family: monospace; background: #0f172a; padding: 2px 6px; border-radius: 4px; }
.country-card .cc-detail { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.country-card .cc-stat { font-size: 11px; color: #94a3b8; }
.country-card .cc-stat strong { color: #e0e6ed; font-size: 13px; }

/* Rate badges */
.rate-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.rate-low { background: #064e3b; color: #6ee7b7; }
.rate-mid { background: #713f12; color: #fcd34d; }
.rate-high { background: #7f1d1d; color: #fca5a5; }

/* Openness badges */
.open-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.open-open { background: #064e3b; color: #6ee7b7; }
.open-partial { background: #713f12; color: #fcd34d; }
.open-restricted { background: #7f1d1d; color: #fca5a5; }

/* Detail panel */
.detail-panel { display: none; }
.detail-panel.visible { display: block; }
.detail-back { display: flex; align-items: center; gap: 6px; color: #60a5fa; font-size: 13px; margin-bottom: 12px; padding: 6px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px; }
.detail-back:hover { color: #93c5fd; }
.detail-title { font-size: 20px; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }
.detail-subtitle { font-size: 12px; color: #64748b; margin-bottom: 16px; }
.detail-section { margin-bottom: 16px; }
.detail-section h3 { font-size: 12px; font-weight: 600; color: #60a5fa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #1f2937; }
.detail-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #1a2332; }
.detail-row .label { color: #94a3b8; }
.detail-row .value { color: #e0e6ed; font-weight: 500; text-align: right; max-width: 60%; }
.bracket-table { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 6px; }
.bracket-table th { text-align: left; color: #64748b; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid #2d3748; }
.bracket-table td { padding: 4px 8px; color: #e0e6ed; border-bottom: 1px solid #1a2332; }

/* Calculator */
.calc-input { display: flex; gap: 8px; margin-top: 8px; margin-bottom: 16px; }
.calc-input input { flex: 1; padding: 8px 12px; background: #1e293b; border: 1px solid #374151; border-radius: 6px; color: #e0e6ed; font-size: 14px; }
.calc-input button { padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; font-weight: 600; font-size: 13px; }
.calc-input button:hover { background: #2563eb; }
.calc-result { background: #0f2440; border: 1px solid #1e3a5f; border-radius: 8px; padding: 14px; }
.calc-result .cr-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.calc-result .cr-total { font-size: 16px; font-weight: 700; color: #60a5fa; border-top: 1px solid #1e3a5f; padding-top: 8px; margin-top: 8px; }

/* Comparison */
.compare-grid { display: grid; gap: 8px; }
.compare-col { background: #1e293b; border: 1px solid #2d3748; border-radius: 8px; padding: 12px; }
.compare-col h4 { font-size: 14px; color: #f1f5f9; margin-bottom: 8px; }

/* Layer controls on map */
.layer-control { position: absolute; top: 10px; right: 10px; z-index: 1000; background: #111827; border: 1px solid #2d3748; border-radius: 8px; padding: 12px; min-width: 200px; }
.layer-control h3 { font-size: 12px; color: #60a5fa; margin-bottom: 8px; font-weight: 600; }
.layer-option { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: #e0e6ed; }
.layer-option input { accent-color: #3b82f6; }

/* Legend */
.map-legend { position: absolute; bottom: 20px; left: 10px; z-index: 1000; background: #111827; border: 1px solid #2d3748; border-radius: 8px; padding: 8px; width: 150px; word-wrap: break-word; overflow-wrap: break-word; }
.map-legend h4 { font-size: 9px; color: #60a5fa; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; }
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #94a3b8; padding: 1px 0; }
.legend-color { width: 12px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* Stats bar */
.stats-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #1f2937; background: #0f1729; }
.stat-chip { flex: 1; text-align: center; padding: 6px 8px; background: #1e293b; border-radius: 6px; }
.stat-chip .sv { font-size: 16px; font-weight: 700; color: #60a5fa; }
.stat-chip .sl { font-size: 10px; color: #64748b; margin-top: 2px; }

/* Leaflet overrides */
.leaflet-popup-content-wrapper { background: #1e293b; color: #e0e6ed; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.leaflet-popup-tip { background: #1e293b; }
.leaflet-popup-content { font-size: 13px; line-height: 1.5; margin: 12px 16px; }
.leaflet-popup-content h3 { color: #60a5fa; margin-bottom: 6px; }
.leaflet-popup-content .popup-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #2d3748; }
.leaflet-popup-content .popup-row:last-child { border-bottom: none; }
.leaflet-container { background: #0a0e17; }
.leaflet-control-zoom a { background: #1e293b !important; color: #e0e6ed !important; border-color: #374151 !important; }
.leaflet-control-attribution { background: rgba(17,24,39,0.8) !important; color: #4b5563 !important; }
.leaflet-control-attribution a { color: #60a5fa !important; }

/* Legend description */
.legend-desc { font-size: 8px; color: #64748b; margin-top: 6px; padding-top: 4px; border-top: 1px solid #2d3748; line-height: 1.3; word-wrap: break-word; overflow-wrap: break-word; }

/* Calculator mode toggle */
.calc-mode-toggle { display: flex; gap: 4px; margin: 10px 0; }
.calc-mode-btn { flex: 1; padding: 6px 8px; font-size: 11px; font-weight: 600; background: #1e293b; border: 1px solid #374151; border-radius: 6px; color: #94a3b8; transition: all 0.15s; }
.calc-mode-btn:hover { border-color: #60a5fa; color: #e0e6ed; }
.calc-mode-btn.active { background: #1e3a5f; border-color: #3b82f6; color: #60a5fa; }

/* Calculator result sections */
.cr-section-header { font-size: 11px; font-weight: 600; color: #60a5fa; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 0 4px; margin-top: 6px; border-top: 1px solid #1e3a5f; }
.cr-subtotal { font-size: 13px; font-weight: 600; color: #94a3b8; padding-top: 4px; }
.cr-total { font-size: 16px; font-weight: 700; color: #60a5fa; border-top: 2px solid #1e3a5f; padding-top: 8px; margin-top: 8px; }

/* Tablet and below */
@media (max-width: 900px) {
    #app { flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; }
    #sidebar { width: 100%; min-width: unset; height: 50vh; height: 50dvh; }
    #map-container { height: 50vh; height: 50dvh; }

    .layer-control { max-width: 200px; min-width: unset; font-size: 11px; padding: 10px; }
    .map-legend { width: 138px; }
}

/* Small tablets / large phones */
@media (max-width: 600px) {
    .sidebar-header { padding: 12px 14px; }
    .sidebar-header h1 { font-size: 16px; }

    .stats-bar { gap: 4px; padding: 8px 10px; }
    .stat-chip { padding: 5px 4px; }
    .stat-chip .sv { font-size: 14px; }
    .stat-chip .sl { font-size: 9px; }

    .tab { padding: 12px 6px; font-size: 11px; min-height: 44px; }

    .search-box { padding: 8px 10px; }
    .panel-content { padding: 8px 10px; }

    .country-card { padding: 10px 12px; }
    .country-card .cc-name { font-size: 13px; }
    .country-card .cc-detail { gap: 8px; }

    .detail-row { flex-wrap: wrap; gap: 2px; }
    .detail-row .value { max-width: 100%; text-align: left; }

    .layer-control { top: 8px; right: 8px; max-width: 170px; padding: 8px; }
    .layer-control h3 { font-size: 11px; margin-bottom: 4px; }
    .layer-option { font-size: 11px; padding: 3px 0; min-height: 32px; }

    .map-legend { bottom: 10px; left: 8px; width: 125px; padding: 6px; }

    .calc-input { flex-direction: column; }
    .calc-input button { min-height: 44px; }
    .calc-mode-toggle { flex-wrap: wrap; }
    .calc-mode-btn { min-height: 40px; font-size: 11px; }

    .compare-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .leaflet-popup-content { margin: 8px 10px; font-size: 12px; }
}

/* Phones */
@media (max-width: 420px) {
    #sidebar { height: 55vh; height: 55dvh; }
    #map-container { height: 45vh; height: 45dvh; }

    .sidebar-header h1 { font-size: 14px; }
    .sidebar-header p { font-size: 10px; }

    .detail-title { font-size: 17px; }
    .detail-subtitle { font-size: 11px; }

    .layer-control { max-width: 150px; }
    .layer-option { font-size: 10px; }
}