:root{
  --green:#10b981; --blue:#3b82f6; --red:#ef4444; --yellow:#f59e0b;
  --bg:#0b1220; --card:#111827; --muted:#6b7280; --text:#e5e7eb; --accent:#22c55e;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic UI", "Noto Kufi Arabic", Arial, sans-serif;
  background:linear-gradient(180deg,#0b1220 0%, #060a12 100%); color:var(--text);
}
.app-header{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:rgba(17,24,39,.8); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06); z-index:10;
}
.icon-btn{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:6px 10px; cursor:pointer}
.icon-btn:hover{ background:rgba(255,255,255,.06) }
h1{ margin:0; font-size:20px;}

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

.subjects{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap:12px;}
.subject-card{
  background:var(--card); border:1px solid rgba(255,255,255,.08); padding:14px; border-radius:var(--radius);
  display:flex; gap:10px; align-items:center; cursor:pointer; position:relative; overflow:hidden;
}
.subject-card .badge{ width:40px; height:40px; display:grid; place-items:center; font-size:22px; border-radius:12px; background:rgba(255,255,255,.06);}
.subject-card .meta{ flex:1 }
.subject-card h3{ margin:0 0 6px 0; font-size:17px; }
.meta .row{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; }
.level{ background:rgba(255,255,255,.06); padding:2px 8px; border-radius:999px; }
.color-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; border:1px solid rgba(0,0,0,.4)}

.fab{
  position: fixed; bottom: 18px; right: 18px; width:56px; height:56px; font-size:28px; border:none; border-radius:50%;
  background:var(--accent); color:#04220f; cursor:pointer; box-shadow: 0 10px 30px rgba(16,185,129,.45);
}
.fab:active{ transform: translateY(1px) }

.tabs{ display:flex; gap:8px; margin-bottom:12px; }
.tab{
  border:none; border-radius:12px; padding:10px 12px; cursor:pointer; background:rgba(255,255,255,.06); color:var(--text);
}
.tab.active[data-color="green"]{ background:var(--green) }
.tab.active[data-color="blue"]{ background:var(--blue) }
.tab.active[data-color="red"]{ background:var(--red) }
.tab.active[data-color="yellow"]{ background:var(--yellow) }

.tab-panel{ position:relative; min-height:50vh; }
.notes{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.note-card{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px;
}
.pdfs{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:12px;}
.pdf-card{
  background:linear-gradient(160deg, rgba(59,130,246,.15), rgba(59,130,246,.04)); border:1px solid rgba(59,130,246,.35);
  border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; min-height:140px; cursor:pointer;
}
.images{ display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:8px;}
.images img{ width:100%; height:120px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.08); cursor:pointer; }
.audios{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.audio-item{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; display:flex; align-items:center; gap:10px;}
.time{ font-variant:tabular-nums; color:var(--muted)}

dialog{ border:none; border-radius:16px; padding:0; background:#0f172a; color:var(--text); }
.dialog-form{ padding:16px; min-width:300px; display:flex; flex-direction:column; gap:10px; }
.dialog-form input, .dialog-form textarea{ width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:#0b1220; color:var(--text)}
.dialog-actions{ display:flex; gap:8px; justify-content:flex-end; padding-top:6px; }
.dialog-actions .primary{ background:var(--accent); color:#04220f; border:none; padding:8px 16px; border-radius:10px; cursor:pointer}
.icon-grid, .level-grid{ display:grid; grid-template-columns: repeat(8,1fr); gap:6px; }
.icon-grid button, .level-grid button{ padding:8px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--text); cursor:pointer }
.icon-grid button.selected, .level-grid button.selected{ background:rgba(34,197,94,.2); border-color:var(--accent)}

.pdf-viewer-header{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.pdf-viewer-body{ width:80vw; height:80vh; background:#000; }
.lightbox-header{ position:fixed; top:10px; left:10px; right:10px; display:flex; gap:10px; justify-content:center; align-items:center; z-index:5 }
#imageLightbox img{ max-width:90vw; max-height:80vh; display:block; margin:60px auto 20px; border-radius:12px; }