/* ===== أساسيات وموضوع عام (Light/Dark) ===== */
:root{
  --bg:#0f1326; --layer:#12183a; --glass:rgba(255,255,255,.06);
  --ink:#e9edff; --muted:#b6c2df; --border:rgba(255,255,255,.12);
  --brand:#6aa8ff; --brand2:#40e0c6; --accent:linear-gradient(135deg,var(--brand),var(--brand2));
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --radius:18px; --radius-lg:24px; --shadow:0 18px 50px rgba(0,0,0,.35);
}
html[data-theme="light"]{
  --bg:#f6f8ff; --layer:#ffffff; --glass:rgba(20,35,85,.06);
  --ink:#0b1020; --muted:#5c6a8a; --border:#dbe1ff;
  --brand:#2d6cdf; --brand2:#00c2a8; --shadow:0 16px 40px rgba(17,28,56,.12);
}
body{ background:var(--bg); color:var(--ink) }
.container{ width:min(1200px,94%); margin-inline:auto }
.card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--layer); color:var(--ink); box-shadow:var(--shadow) }
.glass{ background:var(--glass); backdrop-filter:saturate(1.2) blur(10px) }
.muted{ color:var(--muted) }

/* ===== HERO ===== */
.tl2-hero{ position:relative; padding:26px 0 14px; overflow:hidden }
.tl2-hero__bg{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 360px at 80% -20%, color-mix(in oklab, var(--brand) 28%, transparent), transparent 60%),
    radial-gradient(800px 320px at 15% -30%, color-mix(in oklab, var(--brand2) 30%, transparent), transparent 55%);
  filter:blur(6px); opacity:.35;
}
.tl2-hero__title{ margin:0 0 6px; font-weight:900; font-size:clamp(24px,3.6vw,36px) }
.tl2-hero__title i{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.tl2-hero__sub{ margin:0 0 10px; color:var(--muted) }
.tl2-hero__actions{ display:flex; gap:8px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); font-weight:800; cursor:pointer }
.btn-primary{ background:var(--accent); color:#0b1020; border-color:transparent; box-shadow:0 12px 32px rgba(64,224,198,.28) }
.btn-ghost{ background:var(--glass); color:var(--ink) }
.btn-danger{ background:var(--bad); color:#fff; border-color:transparent }
.btn:hover{ filter:brightness(1.03) }

/* ===== Alerts ===== */
.tl2-alert{ padding:10px 12px; border-radius:12px; margin:10px 0; border:1px solid var(--border); background:var(--glass); box-shadow:var(--shadow) }
.tl2-alert.ok{ border-color:color-mix(in oklab, var(--ok) 40%, var(--border) 60%); color:var(--ok) }
.tl2-alert.bad{ border-color:color-mix(in oklab, var(--bad) 40%, var(--border) 60%); color:var(--bad) }

/* ===== Filters panel ===== */
.tl2-filters{ margin:10px 0 }
.tl2-filters__summary{ display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; font-weight:900 }
.tl2-filters__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 12px 12px }
@media (max-width:900px){ .tl2-filters__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .tl2-filters__grid{ grid-template-columns:1fr } }
.tl2-field{ display:grid; gap:6px }
.tl2-input{ padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--glass); color:var(--ink) }

/* ===== Choose grade (لـ guest) ===== */
.tl2-choose-grade{ padding:14px }
.tl2-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--glass); font-weight:800 }

/* ===== Grid & Cards ===== */
.tl2-wrap{ padding-bottom:28px }
.tl2-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; align-items:stretch }
.tl2-card{ display:flex; flex-direction:column; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.tl2-card:hover{ transform:translateY(-4px); box-shadow:0 22px 54px rgba(0,0,0,.35); border-color:color-mix(in oklab, var(--border) 60%, var(--brand) 40%) }

/* Media */
.tl2-card .media{ position:relative }
.tl2-card .thumb{ width:100%; height:150px; object-fit:cover; display:block; filter:contrast(1.02) saturate(1.05) }
.tl2-card .thumb.ph{ background:linear-gradient(135deg,#1a2750,#0f183a) }
html[data-theme="light"] .tl2-card .thumb.ph{ background:linear-gradient(135deg,#e8f0ff,#eff6ff) }
.pill{
  position:absolute; top:10px; right:10px; margin-left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  font-weight:800; font-size:13px; color:#0d2a66; background:#fff; border:1px solid #eaefff;
  box-shadow:0 6px 18px rgba(25,42,89,.15);
}
.pill + .pill{ right:auto; left:10px }
.type-enrich{ background:#ecfeff; border-color:#cffafe; color:#0b6471 }
.type-hw    { background:#eef7ff; border-color:#dbeafe; color:#0b3f8a }
.type-train { background:#f6ffed; border-color:#dcfce7; color:#0b6a3c }
.type-proj  { background:#fff7ed; border-color:#ffedd5; color:#8a3d0b }
.type-default{ background:#f5f5ff; border-color:#e7e7ff; color:#403885 }
.st-ok   { background:#ecfdf5; border-color:#bbf7d0; color:#065f46 }
.st-warn { background:#fffdea; border-color:#fde68a; color:#92400e }
.st-bad  { background:#fef2f2; border-color:#fecaca; color:#7f1d1d }
.st-none { background:#f3f4f6; border-color:#e5e7eb; color:#374151 }

/* Body */
.tl2-card .body{ padding:12px 12px 6px }
.tl2-card .title{ margin:0 0 6px; font-size:18px; font-weight:900 }
.tl2-card .meta{ display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:14px }
.tl2-card .meta .sep{ opacity:.5 }
.tl2-card .info{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; color:color-mix(in oklab, var(--ink) 70%, var(--muted) 30%) }
.tl2-card .info .sep{ opacity:.5 }
.tl2-card .progress{ height:8px; background:rgba(255,255,255,.08); border:1px solid var(--border); border-radius:999px; overflow:hidden }
html[data-theme="light"] .tl2-card .progress{ background:#f1f5ff; border-color:#e0e7ff }
.tl2-card .progress>span{ display:block; height:100%; background:var(--accent) }

/* Actions */
.tl2-card .actions{ display:flex; gap:8px; padding:12px; border-top:1px dashed var(--border); flex-wrap:wrap; align-items:center }
.btn.btn-ghost{ background:var(--glass); color:var(--ink) }

/* Empty */
.tl2-empty{ text-align:center; padding:24px }
.tl2-empty .ico{ font-size:40px; margin-bottom:6px }

/* Reveal */
[data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease }
[data-reveal].is-visible{ opacity:1; transform:translateY(0) }