anycoder-c72069ee / index.html
elfersol's picture
Upload folder using huggingface_hub
fce7e93 verified
Raw History Blame Contribute Delete
28.2 kB
<!DOCTYPE html> <!-- L3 Dashboard v2026-03-30 build:1774874368 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>L3 Grants Planning Dashboard</title> <script src="https://accounts.google.com/gsi/client" async defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --bg: #f0f2f5; --surface: #ffffff; --surface2: #f7f8fa; --border: #e2e5ea; --border-strong: #c8cdd6; --text: #111827; --text-2: #4b5563; --text-3: #9ca3af; --accent: #1d4ed8; --accent-hover: #1e40af; --accent-light: #eff6ff; --danger: #dc2626; --success: #16a34a; --warn: #d97706; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); --shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04); --radius: 8px; --radius-sm: 5px; } * { box-sizing: border-box; margin: 0; padding: 0 } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } input[type=number] { -moz-appearance: textfield } body { font-family: 'Inter', sans-serif; font-size: 13px; background: var(--bg); color: var(--text); line-height: 1.5 } /* ── HEADER ── */ header { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: #fff; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); position: relative; z-index: 20; } header h1 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; flex: 1 } header .header-badge { font-size: 10px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); padding: 3px 10px; border-radius: 20px; font-weight: 500; letter-spacing: .02em; white-space: nowrap } .header-actions { display: flex; gap: 8px; align-items: center } .header-btn { padding: 6px 14px; font-size: 11px; font-weight: 600; border-radius: 5px; cursor: pointer; letter-spacing: .02em; transition: all .15s; border: none; display: flex; align-items: center; gap: 5px } .header-btn-primary { background: #2563eb; color: #fff } .header-btn-primary:hover { background: #1d4ed8 } .header-btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border-strong) } .header-btn-secondary:hover { background: #e5e7eb } /* ── LAYOUT ── */ .layout { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 56px) } /* ── SIDEBAR ── */ .sidebar { background: #ffffff; border-right: 1px solid var(--border); padding: 14px 14px 20px; overflow-y: auto; height: 100%; color: #111827 } .panel { margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #ffffff } .panel-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); padding: 9px 12px; background: #f7f8fa; border-bottom: 1px solid transparent } .panel-title.collapsible { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; border-bottom: none } .panel-title.collapsible:hover { color: var(--text); background: #eef0f3 } .panel-title.collapsible.open { border-bottom: 1px solid var(--border) } .panel-title.collapsible.open .chevron { transform: rotate(180deg) } .chevron { transition: transform .2s; font-size: 9px; color: var(--text-3) } .panel-body { padding: 12px } .panel-body.hidden { display: none } .calc-tooltip-wrap { position: relative; display: inline-flex; align-items: center } .calc-tooltip-wrap .tt { display: none; position: fixed; z-index: 200; max-width: 260px; background: #1e293b; color: #e2e8f0; font-size: 10px; line-height: 1.7; padding: 10px 12px; border-radius: 6px; pointer-events: none; box-shadow: var(--shadow-md) } .calc-tooltip-wrap:hover .tt { display: block } .tt strong { color: #fbbf24 } .field { margin-bottom: 10px } .field label { display: block; font-size: 10px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em } .field input[type=number] { width: 100%; border: 1px solid var(--border-strong); padding: 6px 8px; font-size: 12px; border-radius: var(--radius-sm); font-family: inherit; transition: border-color .15s; background: var(--surface) } .field input[type=number]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1) } .field select { width: 100%; border: 1px solid var(--border-strong); padding: 6px 8px; font-size: 12px; border-radius: var(--radius-sm); background: var(--surface); font-family: inherit } .section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-bottom: 8px; margin-top: 2px } .radio-group { display: flex; flex-wrap: wrap; gap: 5px } .radio-group label { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; cursor: pointer; background: var(--surface2); padding: 4px 9px; border-radius: 4px; border: 1px solid var(--border); transition: all .12s } .radio-group input { cursor: pointer; accent-color: var(--accent) } .radio-group label:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent) } .tier-table { width: 100%; border-collapse: collapse; font-size: 11px } .tier-table th { background: var(--surface2); padding: 5px 7px; text-align: left; font-weight: 600; border: 1px solid var(--border); font-size: 10px; color: var(--text-2) } .tier-table td { padding: 4px 7px; border: 1px solid var(--border) } .tier-table input[type=number] { width: 58px; border: 1px solid var(--border); padding: 3px 5px; font-size: 11px; border-radius: 3px; background: var(--surface) } .donor-row input[type=text] { border: 1px solid var(--border); padding: 4px 6px; font-size: 11px; border-radius: 4px; width: 100%; background: var(--surface); font-family: inherit } .donor-row input[type=number] { border: 1px solid var(--border); padding: 4px 6px; font-size: 11px; border-radius: 4px; width: 100%; text-align: right; background: var(--surface); font-family: inherit } #eligMatrix th { background: var(--surface2); padding: 6px 10px; border: 1px solid var(--border); font-size: 10px; font-weight: 600; text-align: center; position: sticky; top: 0; z-index: 2; white-space: nowrap; color: var(--text-2) } #eligMatrix th.ctry-col { text-align: left; min-width: 160px; position: sticky; left: 0; z-index: 3; background: var(--surface2) } #eligMatrix td { padding: 5px 8px; border: 1px solid var(--border); text-align: center } #eligMatrix td.ctry-col { text-align: left; font-size: 11px; padding: 5px 10px; position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--border) } #eligMatrix tr:nth-child(odd) td.ctry-col { background: var(--surface) } /* ── ALTERNATING ROW COLORS ── */ #eligMatrix tr:nth-child(even) td { background: #fafbfc !important } #eligMatrix tr:nth-child(even) td.ctry-col { background: #fafbfc !important } #eligMatrix tr:hover td { background: #eff6ff !important } #mechEligBody tr:nth-child(even) td { background: #fafbfc !important } #mechEligBody tr:hover td { background: #eff6ff !important } #tblBody tr:nth-child(even) td { background: #fafbfc } #tierTbody tr:nth-child(even) td { background: #fafbfc } #donorRows tr:nth-child(even) td { background: #fafbfc } /* mech cost table β€” no fixed id, use class hook */ .mech-cost-table tbody tr:nth-child(even) td { background: #fafbfc } /* fx panel table */ #fxPanel table tr:nth-child(even) td { background: #fafbfc } #eligMatrix tr:hover td { background: #eff6ff !important } .elig-check { cursor: pointer; width: 14px; height: 14px; accent-color: var(--accent) } .btn { display: block; width: 100%; padding: 8px 12px; background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; border-radius: var(--radius-sm); margin-top: 4px; font-family: inherit; transition: background .15s } .btn:hover { background: var(--accent-hover) } .btn-outline { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong) } .btn-outline:hover { background: var(--surface2); border-color: var(--text) } .btn-sm { font-size: 10px; padding: 5px 10px } /* ── MAIN AREA ── */ .main { display: flex; flex-direction: column; overflow: hidden; height: 100% } .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm) } .kpi-val { font-size: 20px; font-weight: 700; line-height: 1; color: var(--text) } .kpi-label { font-size: 10px; color: var(--text-3); margin-top: 5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500 } .kpi-sub { font-size: 10px; color: var(--text-3); margin-top: 2px } .charts-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px } .chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm) } .chart-box h3 { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 10px; font-weight: 600 } .chart-wrap { position: relative; height: 160px } /* ── TABS ── */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 16px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .04) } .tab { padding: 12px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; border: none; background: none; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; font-family: inherit } .tab:hover { color: var(--text-2) } .tab.active { color: var(--accent); border-bottom-color: var(--accent) } #page-r1 { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0 } #page-r1-map { flex: 1; overflow: hidden; min-height: 0 } .tbl-controls { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border) } .tbl-controls input, .tbl-controls select { border: 1px solid var(--border-strong); padding: 5px 9px; font-size: 11px; background: var(--surface); border-radius: var(--radius-sm); font-family: inherit; color: var(--text) } .tbl-controls input:focus, .tbl-controls select:focus { outline: none; border-color: var(--accent) } .tbl-controls .tbl-export-btn { margin-left: auto; padding: 5px 12px; font-size: 10px; font-weight: 600; background: var(--surface2); color: var(--text-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; letter-spacing: .03em; text-transform: uppercase; transition: all .15s; font-family: inherit } .tbl-controls .tbl-export-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent) } .tbl-wrap { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0 0 0 } table { width: 100%; border-collapse: collapse; font-size: 11px } thead { position: sticky; top: 0; z-index: 2 } .tbl-wrap thead th { background: #1e293b; color: #e2e8f0; padding: 6px 5px; text-align: left; cursor: pointer; white-space: normal; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; font-weight: 600; border-right: 1px solid rgba(255, 255, 255, .06); line-height: 1.3 } .tbl-wrap thead th:hover { background: #334155 } .tbl-wrap thead th.sorted { background: #2563eb } tbody tr { border-bottom: 1px solid var(--border) } tbody tr:hover { background: var(--accent-light) } tbody td { padding: 7px 11px; vertical-align: middle } .badge { display: inline-block; padding: 2px 8px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 20px } .b-vl { background: #fee2e2; color: #991b1b } .b-l { background: #fef3c7; color: #92400e } .b-lm { background: #fef9c3; color: #713f12 } .b-um { background: #dcfce7; color: #166534 } .b-h { background: #dbeafe; color: #1e3a8a } .b-u { background: #f1f5f9; color: #475569 } .m-rr { color: #16a34a; font-weight: 600 } .m-el { color: #2563eb; font-weight: 600 } .m-cv { color: #d97706; font-weight: 600 } .m-tbd { color: var(--text-3) } td select { border: 1px solid var(--border); padding: 3px 5px; font-size: 11px; background: var(--surface); width: 100%; border-radius: 3px; font-family: inherit } td input[type=number] { border: 1px solid var(--border); padding: 3px 6px; font-size: 11px; width: 58px; border-radius: 3px; background: var(--surface); font-family: inherit } /* ── SUMMARY BAR ── */ .summary-bar { background: linear-gradient(135deg, #0f172a, #1e3a5f); color: #fff; padding: 5px 20px; display: flex; gap: 20px; font-size: 11px; z-index: 30; flex-wrap: nowrap; align-items: center; width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; right: 0; height: 36px } .summary-bar .s-item { display: flex; flex-direction: column; gap: 1px } .summary-bar .s-label { font-size: 9px; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: .06em; font-weight: 500 } .summary-bar .s-val { font-size: 12px; font-weight: 700; color: #fff } .summary-bar .s-divider { width: 1px; height: 28px; background: rgba(255, 255, 255, .15); align-self: center } .map-mode-btn { padding: 4px 11px; font-size: 10px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; transition: all .12s; font-family: inherit } .map-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent) } .map-mode-btn:hover:not(.active) { background: var(--surface2); border-color: var(--text-2) } #mapSvg { width: 100%; height: 100%; background: #ffffff; cursor: grab } #mapSvg:active { cursor: grabbing } /* ── MODAL OVERLAY ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px) } .modal-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md), 0 0 0 1px var(--border); padding: 24px; max-width: 680px; width: 90%; max-height: 85vh; display: flex; flex-direction: column } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px } .modal-title { font-size: 14px; font-weight: 700; color: var(--text) } .modal-sub { font-size: 11px; color: var(--text-3); margin-top: 2px } .modal-close { border: none; background: none; cursor: pointer; font-size: 20px; color: var(--text-3); line-height: 1; padding: 0 4px; transition: color .12s } .modal-close:hover { color: var(--text) } .modal-body { flex: 1; overflow-y: auto } .modal-footer { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; align-items: center } .modal-textarea { width: 100%; height: 260px; font-family: 'Courier New', monospace; font-size: 11px; border: 1px solid var(--border-strong); padding: 10px; border-radius: var(--radius-sm); resize: vertical; color: var(--text); background: var(--surface2) } .modal-textarea:focus { outline: none; border-color: var(--accent) } .modal-btn { padding: 7px 16px; font-size: 11px; font-weight: 600; border-radius: 5px; cursor: pointer; border: none; font-family: inherit; transition: all .15s } .modal-btn-primary { background: var(--accent); color: #fff } .modal-btn-primary:hover { background: var(--accent-hover) } .modal-btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border-strong) } .modal-btn-secondary:hover { background: var(--bg) } .modal-btn-danger { background: #dc2626; color: #fff } .modal-btn-danger:hover { background: #b91c1c } .status-msg { font-size: 11px; margin-right: auto } .status-ok { color: var(--success) } .status-err { color: var(--danger) } /* ── NOTIFICATION TOAST ── */ .toast { position: fixed; bottom: 60px; right: 20px; background: #1e293b; color: #fff; padding: 10px 18px; border-radius: 6px; font-size: 12px; font-weight: 500; z-index: 99999; opacity: 0; transform: translateY(6px); transition: all .25s; pointer-events: none } .toast.show { opacity: 1; transform: translateY(0) } .toast.toast-ok { border-left: 3px solid var(--success) } .toast.toast-err { border-left: 3px solid var(--danger) } /* Google connect overlay */ #gsOverlay { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 23, 42, .85); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center } #gsOverlayBox { background: var(--surface); border-radius: 12px; padding: 40px 48px; text-align: center; max-width: 400px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4) } #gsOverlayBox h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text) } #gsOverlayBox p { font-size: 13px; color: var(--text-2); margin-bottom: 28px; line-height: 1.6 } #gsOverlayBtn { padding: 12px 28px; font-size: 13px; font-weight: 700; background: #2563eb; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; transition: background .15s } #gsOverlayBtn:hover { background: #1d4ed8 } #gsOverlayStatus { margin-top: 16px; font-size: 12px; color: var(--text-3); min-height: 18px } /* custom combobox dropdown */ .mcb-wrap { position: relative; display: inline-block } .mcb-input { font-size: 11px; border: none; background: transparent; font-family: inherit; color: var(--text) } .mcb-input:focus { outline: none; border-color: var(--accent) } .mcb-list { position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; box-shadow: var(--shadow-md); max-height: 180px; overflow-y: auto; min-width: 140px; display: none } .mcb-list.open { display: block } .mcb-item { padding: 5px 10px; font-size: 11px; cursor: pointer; color: var(--text) } .mcb-item:hover, .mcb-item.active { background: var(--accent-light); color: var(--accent) } /* scrollbar styling */ .sidebar::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar { width: 5px; height: 5px } .sidebar::-webkit-scrollbar-track, .tbl-wrap::-webkit-scrollbar-track { background: transparent } .sidebar::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px } .sidebar::-webkit-scrollbar-thumb:hover { background: #9ca3af } @media print { /* Hide everything except the active round table */ .sidebar, header, .tabs, #tblFilters, .summary-bar, #page-elig, #page-mech, #page-countries, #page-r1-map, #page-r1-charts, .tbl-controls, #kpiBar { display: none !important; } /* Full-width layout */ .layout { display: block !important; height: auto !important; } .main { display: block !important; height: auto !important; overflow: visible !important; } #page-r1 { display: block !important; height: auto !important; overflow: visible !important; } .tbl-wrap { overflow: visible !important; height: auto !important; } /* Table formatting */ table { font-size: 9px !important; width: 100% !important; } thead th { background: #1e293b !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 5px 6px !important; } tbody td { padding: 4px 6px !important; } .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Print header */ body::before { content: "Limitless 3 β€” Grants Planning Β· " attr(data-print-round) " Β· " attr(data-print-date); display: block; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #e2e8f0; } @page { margin: 12mm; size: A4 landscape; } } </style> </head> <body> <header> <h1>IFRC Limitless 3 Seed-Funding Dashboard</h1> <span class="header-badge" id="headerBadge">128 countries Β· 4,489 EOI regs Β· R1 &amp; R2</span> <!-- Built with anycoder link added as requested --> <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color:rgba(255,255,255,0.7); text-decoration:none; font-size:10px; margin-left:10px; border:1px solid rgba(255,255,255,0.3); padding:2px 6px; border-radius:4px;">Built with anycoder</a> <div class="header-actions"> <div id="gsStatus" style="font-size:10px;color:rgba(255,255,255,.6);display:none"></div> <div id="lastEditedBadge" style="font-size:10px;color:rgba(255,255,255,.5);display:none">Last saved: <span id="lastEditedTime"></span> </div> </div> </header> <div class="layout"> <!-- ═══ SIDEBAR ═══════════════════════════════════════════════════════════════ --> <div class="sidebar" style="display:flex;flex-direction:column;gap:0;padding:0;overflow-y:auto"> <!-- ── Header ── --> <div style="padding:10px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);flex-shrink:0"> L3 Dashboard </div> <!-- ── Colour legend ── --> <div style="padding:8px 14px;border-bottom:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0"> <span style="
<!DOCTYPE html>
<!-- L3 Dashboard v2026-03-30 build:1774874368 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>L3 Grants Planning Dashboard</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--bg: #f0f2f5;
--surface: #ffffff;
--surface2: #f7f8fa;
--border: #e2e5ea;
--border-strong: #c8cdd6;
--text: #111827;
--text-2: #4b5563;
--text-3: #9ca3af;
--accent: #1d4ed8;
--accent-hover: #1e40af;
--accent-light: #eff6ff;
--danger: #dc2626;
--success: #16a34a;
--warn: #d97706;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
--radius: 8px;
--radius-sm: 5px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
input[type=number] {
-moz-appearance: textfield
}
body {
font-family: 'Inter', sans-serif;
font-size: 13px;
background: var(--bg);
color: var(--text);
line-height: 1.5
}
/* ── HEADER ── */
header {
background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
color: #fff;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
position: relative;
z-index: 20;
}
header h1 {
font-size: 15px;
font-weight: 700;
letter-spacing: -.01em;
flex: 1
}
header .header-badge {
font-size: 10px;
background: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .8);
padding: 3px 10px;
border-radius: 20px;
font-weight: 500;
letter-spacing: .02em;
white-space: nowrap
}
.header-actions {
display: flex;
gap: 8px;
align-items: center
}