:root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --border:#d7dbe7;
    --text:#1f2937;
    --muted:#6b7280;
    --ok:#22c55e;
    --bad:#ef4444;
    --accent:#2563eb;
    --accent2:#e8edf8;
    --page-pad:24px;
}

body.dark{
    --bg:#0f172a;
    --card:#111827;
    --border:#334155;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --accent:#3b82f6;
    --accent2:#1e293b;
}

*{box-sizing:border-box}

html{
    background:var(--bg);
}

body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:var(--page-pad);
    padding-bottom:calc(var(--page-pad) + env(safe-area-inset-bottom));
}

.wrap{
    max-width:1000px;
    margin:auto;
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

h1{
    margin:0;
    font-size:1.8rem;
}

.version{
    font-size:0.7em;
    color:var(--muted);
}

.hint{
    color:var(--muted);
    margin:10px 0 14px;
    line-height:1.45;
}

.progress{
    display:flex;
    gap:6px;
    margin:10px 0 8px;
    flex-wrap:wrap;
}

.box{
    width:22px;
    height:22px;
    border-radius:4px;
    background:#cbd5e1;
    flex:0 0 auto;
}

.box.ok{background:var(--ok)}
.box.bad{background:var(--bad)}

table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
    table-layout:fixed;
}

th,td{
    border:1px solid var(--border);
    text-align:center;
    height:70px;
    padding:6px;
}

th{
    background:var(--accent2);
}

.rowhead{
    text-align:left;
    padding-left:10px;
    font-weight:bold;
}

.given{
    font-weight:bold;
    font-size:1.1rem;
}

.overline{
    text-decoration:overline;
    text-decoration-thickness:2px;
}

input{
    width:80px;
    max-width:100%;
    padding:10px 8px;
    text-align:center;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
    font-size:1rem;
}

input.correct{
    border-color:var(--ok);
    background:color-mix(in srgb, var(--ok) 12%, var(--card));
}

input.wrong{
    border-color:var(--bad);
    background:color-mix(in srgb, var(--bad) 12%, var(--card));
}

.controls{
    margin-top:16px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

button{
    padding:10px 14px;
    border-radius:10px;
    border:none;
    font-weight:bold;
    cursor:pointer;
    min-height:44px;
    font-size:1rem;
}

.primary{
    background:var(--accent);
    color:white;
}

.secondary{
    background:var(--accent2);
    color:var(--text);
    border:1px solid var(--border);
}

.message{
    margin-top:12px;
    font-weight:bold;
    min-height:1.2em;
}

@media (max-width: 700px){
    :root{
        --page-pad:8px;
    }

    body{
        font-size:18px;
    }

    .card{
        padding:10px;
        border-radius:12px;
    }

    .topbar{
        align-items:flex-start;
    }

    h1{
        font-size:1.2rem;
        line-height:1.2;
    }

    .hint{
        font-size:0.95rem;
    }

    table{
        font-size:1.05rem;
    }

    th,td{
        height:64px;
        padding:6px 4px;
    }

    .rowhead{
        padding-left:4px;
        font-size:0.9rem;
    }

    input{
        width:64px;
        height:42px;
        font-size:1.1rem;
    }

    button{
        flex:1 1 100%;
        font-size:1.05rem;
        min-height:48px;
    }

    .progress{
        gap:4px;
    }

    .box{
        width:20px;
        height:20px;
    }
}