:root{
  --bg:#0b1020;
  --panel:#111a33;
  --text:#e7ecff;
  --muted:#aab4e6;
  --accent:#7aa2ff;
  --border:#243059;
}
html,body{height:100%;}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#070a14);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1100px;margin:0 auto;padding:28px 18px 64px;}
header{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;}
h1{font-size:28px;margin:0;}
.meta{color:var(--muted);font-size:14px;}
.controls{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
input[type="search"]{
  flex:1 1 320px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(17,26,51,.65);
  color:var(--text);
  outline:none;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(17,26,51,.55);
  color:var(--text);
}
.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}
.tag{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  margin-right:6px;
}
.tag.ok{border-color:#2c5b3c;background:rgba(44,91,60,.25);color:#c7ffd2;}
.tag.todo{border-color:#5a3b24;background:rgba(90,59,36,.25);color:#ffd9c2;}

.table-wrap{
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(17,26,51,.55);
}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;}
table.tbl thead th{
  position:sticky; top:0; z-index:1;
  text-align:left;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--muted);
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:rgba(17,26,51,.92);
}
table.tbl thead th.sortable{cursor:pointer; user-select:none;}
table.tbl thead th.sortable:hover{background:rgba(17,26,51,.98);}
table.tbl thead th .arrow{margin-left:6px; opacity:.7; font-size:11px;}
table.tbl tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(36,48,89,.65);
  vertical-align:top;
}
table.tbl tbody tr:hover{background:rgba(17,26,51,.75);}
table.tbl td.ref a{font-weight:650;}
table.tbl td.small{white-space:nowrap;}
.list{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.row{
  border:1px solid var(--border);
  background:rgba(17,26,51,.55);
  border-radius:14px;
  padding:12px 14px 11px;
}
.row-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.ref{font-weight:650; font-size:16px;}
.summary{color:var(--muted); font-size:14px; margin-top:6px;}
.kvs{display:flex;gap:8px;flex-wrap:wrap; align-items:center;}
.kv{color:var(--muted); font-size:12px; border:1px solid var(--border); border-radius:999px; padding:2px 10px;}
.ts{color:var(--muted);font-size:12px;}
.grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;}
@media (min-width: 880px){
  .grid{grid-template-columns:1fr 1fr;}
}
.greek{
  font-family: ui-serif, "New Athena Unicode", "Palatino Linotype", Palatino, serif;
  font-size:16px;
  line-height:1.55;
  white-space:pre-wrap;
}
.english{
  font-size:15px;
  line-height:1.55;
  white-space:pre-wrap;
}
.pending{color:var(--muted);font-style:italic;}
.hl{padding:0 2px;border-radius:4px;}
.hl-h{background:rgba(255,214,10,.22);}
.hl-s{background:rgba(122,162,255,.22);}
.swatch{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:4px;
  margin-right:8px;
  vertical-align:-2px;
  border:1px solid rgba(231,236,255,.18);
}
.c0{background:rgba(255,214,10,.22);}
.c1{background:rgba(122,162,255,.22);}
.c2{background:rgba(100,231,173,.20);}
.c3{background:rgba(255,143,171,.20);}
.c4{background:rgba(255,170,0,.20);}
.c5{background:rgba(0,210,255,.18);}
.c6{background:rgba(186,104,200,.20);}
.c7{background:rgba(239,83,80,.18);}
.c8{background:rgba(149,117,205,.20);}
.c9{background:rgba(76,175,80,.18);}
.gadget-frame{
  width:100%;
  height:390px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(17,26,51,.35);
}
details{margin-top:10px;}
details summary{cursor:pointer; color:var(--accent);}
pre{
  background:rgba(17,26,51,.45);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  overflow:auto;
  white-space:pre-wrap;
}
footer{margin-top:26px;color:var(--muted);font-size:13px;}