:root{
  --bg: #0b1020;
  --card: #12182b;
  --muted: #9aa4b2;
  --fg: #e9eef5;
  --brand: #4f7cff;
  --accent: #22c55e;
  --warn: #f59e0b;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(180deg, #0e142a, #0b1020);
  color: var(--fg);
}
.container{max-width:1100px;margin:0 auto;padding:24px}
header.top{
  position:sticky;top:0;background:rgba(11,16,32,.7);backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);z-index:10;
}
header.top .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand{display:flex;gap:10px;align-items:center}
.badge{background:rgba(255,255,255,.08);color:#cfe1ff;padding:6px 10px;border-radius:999px;font-weight:600}
.controls{display:flex;gap:10px;align-items:center}
button,input,select{border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#0f162d;color:var(--fg);padding:10px 12px}
button.primary{background:var(--brand);border-color:transparent}
.grid{display:grid;gap:16px}
.cards{grid-template-columns: repeat(auto-fill, minmax(280px,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:16px;display:grid;gap:10px}
.card .title{font-weight:700;font-size:1.05rem}
.card .meta{color:var(--muted);font-size:.9rem}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{flex:1;min-width:260px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:.75rem;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#b6c3d4}
.card a{color:#9ad0ff;text-decoration:none}
.card a:hover{text-decoration:underline}
footer{opacity:.7;padding:30px;text-align:center;color:var(--muted)}
hr.sep{border:0;border-top:1px dashed rgba(255,255,255,.16);margin:8px 0}
.empty{padding:30px;text-align:center;color:var(--muted)}
.lang-rtl{direction:rtl}
.lang-rtl .row{flex-direction:row-reverse}
.lang-rtl .card{text-align:right}
.small{font-size:.85rem;color:var(--muted)}
kbd{background:#0f162d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:2px 6px}