/* DEUTSCHORA learner web. Logical properties only (margin-inline, padding-block…) so Arabic RTL mirrors without a second stylesheet. */
:root { --ink:#14213D; --bg:#F6F4EF; --surface:#FFFFFF; --accent:#8A6508; --accent-ink:#FFFFFF; --danger:#B00020; --success:#1B7F4B; --muted:#4A5568; --line:#D9D5CB; --focus:#0B5FFF; --r:10px; --gap:16px; }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif; }
.app { min-block-size: 100dvh; display: flex; flex-direction: column; }
.main { flex: 1; inline-size: min(100%, 46rem); margin-inline: auto; padding: var(--gap); outline: none; }
.page { display: flex; flex-direction: column; gap: var(--gap); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; } h2 { font-size: 1.15rem; margin: .75rem 0 .35rem; } h3 { font-size: 1rem; margin: .5rem 0 .25rem; }
p { margin: .25rem 0; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .big { font-size: 2rem; font-weight: 700; margin: 0; } .lead { font-size: 1.15rem; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.success { color: var(--success); font-weight: 600; } .error-text { color: var(--danger); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--gap); display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .row.spread { justify-content: space-between; }
.notice { background: #FFF6DB; border: 1px solid #E5C76B; border-radius: var(--r); padding: 10px 12px; }
.error { background: #FDECEF; border: 1px solid #E8A3B0; border-radius: var(--r); padding: 10px 12px; }
.dev-banner { background: #14213D; color: #fff; text-align: center; padding: 6px 12px; font-size: .8rem; }
.btn { font: inherit; min-block-size: 44px; padding: 0 18px; border-radius: var(--r); border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary { background: var(--ink); color: #fff; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); } .btn-danger { background: var(--danger); color: #fff; } .btn-link { background: none; color: var(--ink); text-decoration: underline; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; inset-inline-start: -999px; } .skip:focus { inset-inline-start: 8px; inset-block-start: 8px; background: #fff; padding: 8px; z-index: 10; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav { display: flex; gap: 4px; background: var(--surface); border-block-end: 1px solid var(--line); padding: 6px var(--gap); overflow-x: auto; }
.nav a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); white-space: nowrap; min-block-size: 44px; display: inline-flex; align-items: center; }
.nav a.active { background: var(--ink); color: #fff; }
.field { display: flex; flex-direction: column; gap: 4px; } label { font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=search], textarea, select { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); min-block-size: 44px; inline-size: 100%; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } legend { font-weight: 600; padding: 0; margin-block-end: 4px; }
.choice { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; font-weight: 400; cursor: pointer; min-block-size: 44px; background: #fff; }
.choice:has(input:checked) { border-color: var(--ink); background: #EEF1F8; }
.choice input { inline-size: 20px; block-size: 20px; flex: none; }
.prompt { margin-block-end: 8px; } .prompt-ui { font-weight: 600; } .prompt-de { font-size: 1.15rem; }
.de { unicode-bidi: isolate; } .strong { font-weight: 700; }
.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; } .key { min-inline-size: 44px; min-block-size: 44px; font: inherit; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.tokens { display: flex; flex-wrap: wrap; gap: 8px; min-block-size: 52px; padding: 8px; border-radius: 8px; } .tokens.placed { border: 2px dashed var(--line); background: #fff; } .token { font: inherit; min-block-size: 44px; padding: 0 14px; border-radius: 8px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
.match-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-block-end: 8px; }
.bar { block-size: 10px; background: #E6E2D8; border-radius: 999px; overflow: hidden; } .bar-fill { block-size: 100%; background: var(--accent); inline-size: 0; }
.bar-fill[data-pct="0"] { inline-size: 0; } 
.feedback { padding: 10px 12px; border-radius: 8px; font-weight: 700; } .feedback-correct { background: #E3F4EA; color: #0F5132; } .feedback-wrong { background: #FDECEF; color: #7A0016; } .feedback-pending { background: #EEF1F8; }
.flash { font-size: 2rem; text-align: center; padding: 24px 0; margin: 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; } .tab { font: inherit; min-block-size: 44px; padding: 0 14px; border-radius: 8px; border: 2px solid var(--line); background: #fff; cursor: pointer; } .tab.active { border-color: var(--ink); background: #EEF1F8; font-weight: 700; }
.chat { display: flex; flex-direction: column; gap: 8px; } .bubble { padding: 10px 12px; border-radius: var(--r); max-inline-size: 90%; } .bubble-you { background: #EEF1F8; align-self: flex-end; } .bubble-tutor { background: #fff; border: 1px solid var(--line); align-self: flex-start; }
.clock { font-size: 1.25rem; font-weight: 700; margin: 0; } .clock[data-state="warning"] { color: #8A4B00; } .clock[data-state="expired"] { color: var(--danger); }
.exam-bar { position: sticky; inset-block-start: 0; background: var(--bg); padding-block: 8px; z-index: 2; }
.levels, .list, .skills, .vocab { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .level { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; } .level-locked { opacity: .6; }
.certificate { background: #fff; border: 3px double var(--accent); border-radius: var(--r); padding: 28px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.loading { padding: 32px; text-align: center; color: var(--muted); }
@media (min-width: 720px) { .main { padding: 24px; } .nav { justify-content: center; } }
@media (prefers-reduced-motion: no-preference) { .bar-fill { transition: inline-size .3s; } }
@media print { .nav, .no-print, .dev-banner, .skip { display: none !important; } body { background: #fff; } .certificate { border-color: #000; } }

/* Admin additions: dense tables and two-column grids on desktop. Still no inline styles (CSP style-src 'self'). */
.main { inline-size: min(100%, 80rem); }
.grow { flex: 1; }
.nav { align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.table-wrap { overflow-x: auto; }
.table { border-collapse: collapse; inline-size: 100%; font-size: .92rem; }
.table th, .table td { text-align: start; padding: 8px 10px; border-block-end: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 700; background: #FAF8F3; white-space: nowrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; } .kv dt { font-weight: 600; color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 1px solid var(--line); background: #fff; white-space: nowrap; }
.badge-ok { background: #E3F4EA; color: #0F5132; border-color: #A7D7BA; } .badge-warn { background: #FFF6DB; color: #6B4E00; border-color: #E5C76B; } .badge-bad { background: #FDECEF; color: #7A0016; border-color: #E8A3B0; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; } .filters .field { min-inline-size: 11rem; }
.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tab { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; inline-size: 100%; min-block-size: 20rem; }
.code-view { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: auto; max-block-size: 38rem; font-size: .85rem; }
.action-box { display: flex; flex-direction: column; gap: 8px; }
.panel-body { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.nav .btn { min-block-size: 36px; }