:root{
  --bg:#eef2f4;
  --bg-elevated:#ffffff;
  --bg-sunken:#e4e9ec;
  --ink:#151d24;
  --ink-soft:#4c5a63;
  --ink-faint:#7c8891;
  --border:#d3dbe0;
  --border-soft:#e3e8eb;
  --accent:#0c7a8f;
  --accent-ink:#ffffff;
  --accent-soft:#dcf0f2;
  --amber:#a4650a;
  --amber-soft:#fbecd6;
  --green:#37704a;
  --green-soft:#e2efe4;
  --red:#a14536;
  --red-soft:#f6e4e0;
  --shadow: 0 1px 2px rgba(15,25,32,0.04), 0 8px 24px -12px rgba(15,25,32,0.14);
  --radius: 12px;
  --font-display: 'Spectral', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a1219; --bg-elevated:#101b24; --bg-sunken:#0d161d;
    --ink:#e8eef1; --ink-soft:#a9b8c1; --ink-faint:#71828c;
    --border:#243541; --border-soft:#1a2830;
    --accent:#3fc4d9; --accent-ink:#06171b; --accent-soft:#123039;
    --amber:#eba64a; --amber-soft:#2c2213;
    --green:#7bc48d; --green-soft:#16281c;
    --red:#e0917f; --red-soft:#2c1a17;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6);
  }
}
*{box-sizing:border-box;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:0 0 8px 0; font-weight:600; font-size:.9rem;
}
.skip-link:focus{left:0;}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.55;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-family:var(--font-display); margin:0 0 .4em; text-wrap:balance;}
p{margin:0 0 1em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
code, .mono{font-family:var(--font-mono);}

/* ---- nav ---- */
nav.topbar{border-bottom:1px solid var(--border); background:var(--bg-elevated); position:sticky; top:0; z-index:10;}
nav.topbar .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto;}
nav.topbar .brand{font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--ink); display:flex; align-items:center; gap:8px;}
nav.topbar .brand::before{content:"📡"; font-size:1.1rem;}
nav.topbar .links{display:flex; gap:18px; align-items:center; font-size:.92rem;}
nav.topbar .links a{color:var(--ink-soft);}
nav.topbar .links a:hover{color:var(--accent); text-decoration:none;}
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:600; font-size:.88rem;
  padding:8px 16px; border-radius:8px; border:1px solid var(--accent); color:var(--accent);
  background:transparent; cursor:pointer;
}
.btn:hover{background:var(--accent-soft); text-decoration:none;}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn.primary:hover{opacity:.9;}
.btn.small{padding:5px 11px; font-size:.78rem;}

/* ---- messages ---- */
.messages{max-width:1180px; margin:14px auto 0; padding:0 24px; display:flex; flex-direction:column; gap:8px;}
.msg{padding:10px 14px; border-radius:8px; font-size:.9rem; border:1px solid;}
.msg.success{background:var(--green-soft); border-color:var(--green); color:var(--green);}
.msg.error{background:var(--red-soft); border-color:var(--red); color:var(--red);}
.msg.info, .msg.debug{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
.msg.warning{background:var(--amber-soft); border-color:var(--amber); color:var(--amber);}

main{padding:34px 0 60px;}

/* ---- badges ---- */
.badge{font-family:var(--font-mono); font-size:.72rem; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.badge.diff-BASLANGIC{background:var(--green-soft); color:var(--green);}
.badge.diff-ORTA{background:var(--amber-soft); color:var(--amber);}
.badge.diff-ILERI{background:var(--red-soft); color:var(--red);}
.badge.neutral{background:var(--bg-sunken); color:var(--ink-soft); border:1px solid var(--border-soft);}
.badge.locked{background:var(--red-soft); color:var(--red);}

/* ---- cards ---- */
.card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;}

/* ---- forms ---- */
form.stack{display:flex; flex-direction:column; gap:14px; max-width:420px;}
label{font-size:.85rem; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:4px;}
input[type=text], input[type=password], input[type=email], textarea, select{
  width:100%; font-family:var(--font-body); font-size:.95rem; padding:9px 12px;
  border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--ink);
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.helptext{font-size:.78rem; color:var(--ink-faint); margin-top:3px;}
ul.errorlist{color:var(--red); font-size:.82rem; margin:4px 0; padding-left:16px;}

footer{border-top:1px solid var(--border); padding:24px; color:var(--ink-faint); font-size:.82rem; text-align:center;}

table{border-collapse:collapse; width:100%; font-size:.88rem;}
thead th{text-align:left; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); background:var(--bg-sunken); padding:9px 12px; position:sticky; top:0;}
tbody td{padding:8px 12px; border-top:1px solid var(--border-soft);}
.table-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:12px;}

/* ---- rf simulator ---- */
.rf-panel{margin-bottom:12px;}
.rf-row-label{font-size:.76rem; color:var(--ink-faint); margin-bottom:4px;}
.rf-canvas{width:100%; height:120px; display:block; border-radius:8px; background:#0d161d; cursor:crosshair;}
.rf-tabs button{cursor:pointer;}
#rf-sim select, #rf-sim input[type=number]{width:100%;}
#rf-sim input[type=range]{accent-color:var(--accent);}