:root{
  --bg:#0b1220;
  --fg:#e5e7eb;
  --muted:#9aa4b2;
  --card:#111827;
  --primary:#10b981;
  --blue:#3b82f6;
  --red:#ef4444;
  --yellow:#f59e0b;
  --green:#22c55e;
  --shadow: 0 10px 30px rgba(0,0,0,.20);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
}

.app.light{ --bg:#f8fafc; --fg:#0f172a; --muted:#64748b; --card:#ffffff; }
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--card); box-shadow: var(--shadow);
}
.app-header h1{ margin:0; font-size:24px }
.header-actions{ display:flex; gap:8px }
.icon-btn,.btn.small{ padding:8px 10px; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:12px; color:var(--fg); cursor:pointer }
.app.light .icon-btn{ border-color:#e2e8f0 }

.view{ display:none; padding:16px }
.view.active{ display:block }

.subjects{ display:grid; gap:12px }
.subject-card{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:16px; background:var(--card); box-shadow: var(--shadow);
  cursor:pointer; border:1px solid rgba(255,255,255,.06);
}
.subject-card .subject-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px }
.subject-card .subject-name{ margin:0 0 4px 0; font-size:18px }
.badge{ font-size:12px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); margin-inline-end:6px }
.badge.level{ border:1px dashed rgba(255,255,255,.2) }

.fab{
  position:fixed; bottom:22px; right:22px; width:56px; height:56px; border-radius:50%;
  border:none; background:var(--primary); color:white; font-size:28px; cursor:pointer; box-shadow: var(--shadow);
}

.subject-header{ display:flex; align-items:center; gap:12px; }
.subject-header h2{ margin:0; flex:1 }
.subject-actions{ display:flex; gap:8px }
.btn{ padding:10px 14px; border-radius:12px; border:none; cursor:pointer; background:var(--card); color:var(--fg); box-shadow: var(--shadow) }
.btn.primary{ background:var(--primary); color:white }
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.15) }
.btn.danger{ background:var(--red); color:white }

.tabs{ display:flex; gap:8px; margin:12px 0 }
.tab{ flex:1; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:var(--card); color:var(--fg); cursor:pointer }
.tab.green.active{ outline:3px solid var(--green) }
.tab.blue.active{ outline:3px solid var(--blue) }
.tab.red.active{ outline:3px solid var(--red) }
.tab.yellow.active{ outline:3px solid var(--yellow) }

.tab-content{ display:none; min-height:50vh }
.tab-content.active{ display:block }

.cards-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap:12px }
.note-card{
  background:var(--card); border-radius:16px; padding:12px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.06);
  cursor:pointer; position:relative;
}
.note-card h4{ margin:0 0 6px 0 }
.note-card p{ margin:0; color:var(--muted); line-height:1.5 }

.list{ display:grid; gap:10px }
.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.06);
}
.list-item span.meta{ color:var(--muted); font-size:13px }
.list-item .actions{ display:flex; gap:8px }

dialog{ border:none; border-radius:16px; padding:0; width:min(560px,92vw); box-shadow: var(--shadow); background:var(--card); color:var(--fg) }
dialog::backdrop{ background:rgba(0,0,0,.45) }
.form{ padding:16px; display:grid; gap:12px }
.form label{ display:grid; gap:6px; font-weight:500 }
input[type="text"], textarea, input[type="color"]{
  width:100%; padding:10px 12px; border-radius:12px; background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--fg)
}
.icons-grid,.levels-grid{ display:grid; grid-template-columns: repeat(8, 1fr); gap:8px }
.levels-grid{ grid-template-columns: repeat(6, 1fr) }
.choice{ padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.15); text-align:center; cursor:pointer; user-select:none }
.choice.selected{ outline:3px solid var(--primary) }
.dialog-menu{ display:flex; justify-content:flex-end; gap:8px; padding-top:6px }

.image-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap:8px; padding:16px }
.image-grid img{ width:100%; border-radius:12px; cursor:pointer }

.image-viewer{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:grid; place-items:center }
.image-viewer.hidden{ display:none }
.image-viewer img{ max-width:96vw; max-height:96vh; }

/* Utility */
.hidden{ display:none !important }