/* style_new.css — minimal version for .block + .kv layout */

/* Theme variables */
:root {
    --bg: #fafafa;
    --surface: #ffffff;
    --text: #1f1f1f;
    --muted: #666666;
    --border: #e5e5e5;
    --primary: #2b6cb0;
    --accent: #0fa3b1;
    --ok: #2f9e44;
    --warn: #b76e00;
    --err: #d64545;
    --shadow: 0 2px 10px rgba(0,0,0,.06);
    --radius: 14px;
    --spacing: 14px;
    --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --gap: 14px;
    --row-h: 48px;
    --pad: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #282a36;
        --surface: #2b2d3a;
        --text: #f8f8f2;
        --muted: #b0b0b8;
        --border: #3b3e52;
        --primary: #8be9fd;
        --accent: #bd93f9;
        --ok: #50fa7b;
        --warn: #f1fa8c;
        --err: #ff5555;
        --shadow: 0 6px 20px rgba(0,0,0,.35);
    }
}

/* explicit theme override hooks */
html[data-theme="light"] {
    --bg: #fafafa; --surface: #ffffff; --text: #1f1f1f; --muted: #666; --border: #e5e5e5;
    --primary:#2b6cb0; --accent:#0fa3b1; --ok:#2f9e44; --warn:#b76e00; --err:#d64545;
    --shadow:0 2px 10px rgba(0,0,0,.06);
}

html[data-theme="dark"] {
    --bg:#282a36; --surface:#2b2d3a; --text:#f8f8f2; --muted:#b0b0b8; --border:#3b3e52;
    --primary:#8be9fd; --accent:#bd93f9; --ok:#50fa7b; --warn:#f1fa8c; --err:#ff5555;
    --shadow:0 6px 20px rgba(0,0,0,.35);
}

/* Base layout */
* { box-sizing:border-box }
html, body { height:100% }

body{
    margin:0;
    background: radial-gradient(1200px 800px at 50% -200px, var(--surface) 0%, var(--bg) 60%);
    background-attachment:fixed;
    color:var(--text);
    font:16px/1.4 var(--font);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container{
    width:min(900px,100%);
    margin-inline:auto;
    padding:16px;
}

/* Header / titles */
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 0 12px;
}

h1,h2,h3{margin:0; font-weight:650}
h1{font-size:1.3rem}
h2{font-size:1.1rem; color:var(--muted)}
h3{font-size:1rem; color:var(--muted)}

/* Block / card wrapper */
.block{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    padding:var(--pad);
    margin:12px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.block > .title{
    margin:0 0 8px 0;
    font-size:1.05rem;
    font-weight:700;
}

.block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.block-header .title {
    margin: 0;
}

.block-header .val {
    /*font-size: 0.95rem;*/
}

/* Two-column grid for each block */
.kv{
    display:grid;
    grid-template-columns: 1fr 1fr; /* equal column widths */
    align-items:center;             /* vertical centering */
    gap:8px 14px;                   /* row gap | column gap */
    min-height:var(--row-h);        /* consistent row height */
    border-top:1px dashed var(--border);
    padding:6px 0;
}
.kv:first-of-type{ border-top:none; }

.name{
    color:var(--muted);
    font-weight:600;
    letter-spacing:.1px;
}
.val{
    text-align:right;
    font-family:var(--mono);
    font-size:1.25rem;   /* comfy on mobile */
    font-weight:600;
    overflow-wrap:anywhere;
}

/* Utility classes */
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.badge{
    padding:2px 8px;
    border-radius:999px;
    border:1px solid var(--border);
}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.err{color:var(--err)}

/* Theme toggle */
.theme-toggle{
    display:inline-flex;
    gap:8px;
    align-items:center;
}

/* Center the switch + text when used on a label */
label.theme-toggle{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    gap:8px;
}

.theme-toggle input{
    appearance:none;
    width:36px;
    height:22px;
    position:relative;
    border-radius:999px;
    background:var(--border);
    outline:none;
    cursor:pointer;
    transition:background .2s ease;
}
.theme-toggle input::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:50%;
    transition:left .2s ease;
}
.theme-toggle input:checked{background:var(--accent);}
.theme-toggle input:checked::after{left:17px}

/* Responsive tweaks */
@media (min-width:720px){
    .val{ font-size:18px; }
    :root{ --row-h:44px; }
}