/* Core minimal, critical-first CSS for fast FCP */
:root {--bg:#0b0d12;--fg:#e8eef7;--muted:#a9b4c1;--brand:#4f8cff;--card:#121620;--border:#1e2430;--ok:#1db954;--warn:#f5a524;--err:#ff4d4f}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans SC",sans-serif;line-height:1.6}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
header,main,footer{max-width:1100px;margin:0 auto;padding:16px}
header{padding-top:24px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.hero h1{font-size:2rem;margin:0 0 8px 0}
.hero p{color:var(--muted);margin:0 0 12px 0}
.hero img{width:100%;height:auto}
.grid{display:grid;gap:16px}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.card h2{margin:0 0 10px 0;font-size:1.25rem}
.sep{height:1px;background:var(--border);margin:16px 0}
label{display:block;margin:8px 0 6px 0;color:var(--muted)}
input[type="text"],input[type="number"],input[type="datetime-local"],select{width:100%;padding:10px 12px;background:#0e131c;color:var(--fg);border:1px solid var(--border);border-radius:10px}
/* date parts layout */
.date-parts{display:flex;gap:8px;flex-wrap:wrap}
.date-parts input{flex:1 1 8ch;min-width:4ch}

/* Replace native number spinners with subtle custom arrows */
.date-parts input[type="number"]{
	-moz-appearance: textfield;
	appearance: textfield;
	/* make room for custom arrows */
	padding-right: 36px;
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 12px 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'><polygon points='6,3 10,9 2,9' fill='%23a9b4c1'/><polygon points='6,13 10,7 2,7' fill='%23a9b4c1'/></svg>");
}

/* Hide default webkit spin buttons */
.date-parts input[type="number"]::-webkit-outer-spin-button,
.date-parts input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

/* Focus state: change arrow color to brand and add subtle focus ring */
.date-parts input[type="number"]:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(79,140,255,0.08);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'><polygon points='6,3 10,9 2,9' fill='%234f8cff'/><polygon points='6,13 10,7 2,7' fill='%234f8cff'/></svg>");
}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Ensure KPI (timestamp) can grow/shrink but unit-toggle stays fixed to avoid shifting */
.row > .kpi{flex:1 1 auto;min-width:6ch}
.unit-toggle{display:flex;gap:8px;align-items:center;flex:0 0 auto;min-width:140px;justify-content:flex-end}
/* radio label text spacing */
.radio-label-text{margin-left:6px;display:inline-block}
@media(max-width:520px){
	.unit-toggle{min-width:0;justify-content:flex-start}
	.row > .kpi{flex:0 1 auto}
}
.btn{background:#182033;color:var(--fg);border:1px solid var(--border);padding:10px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;min-width:6ch}
.btn:hover{background:#1b263a}
.btn.primary{background:var(--brand);border-color:transparent;color:white}
.kpi{font-size:1.5rem;font-weight:700}
.muted{color:var(--muted)}
.unit-toggle,.tz-select{display:flex;gap:8px;align-items:center}
.code{background:#0e131c;border:1px solid var(--border);border-radius:10px;padding:12px;overflow:auto;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:.9rem}
.tabs{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.tab{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#0f1420;color:var(--fg);cursor:pointer}
.tab.active{background:#182033;border-color:var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
footer{color:var(--muted);font-size:.9rem;padding-bottom:40px}
.lang-fab{position:fixed;top:12px;right:12px;z-index:50;background:#0f1420;border:1px solid var(--border);border-radius:10px;padding:6px 8px;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.lang-fab select{background:transparent;color:#ffffff;border:none;outline:none}
.lang-fab option{color:#ffffff;background:#0f1420}
.lang-fab option:checked{color:#0b0d12;background:#cfe0ff}

/* Footer */
.footer {
    background: #0b0d12;
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: auto;
}

.footer-text {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}