:root{ --green:#10b981; --blue:#3b82f6; --red:#ef4444; --yellow:#f59e0b; --card:#0f1724; --text:#f8fafc; --edge:#1f2937 }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui, -apple-system, "Noto Sans Arabic", Roboto, sans-serif;background:#08101a;color:var(--text)}
.app-bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#071018cc;border-bottom:1px solid var(--edge)}
.back-btn{border:none;background:#0f172a;color:#cbd5e1;border-radius:999px;width:40px;height:40px;cursor:pointer}
.container{padding:16px 16px 96px}
.view{display:none}.view.active{display:block}
.fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;border:none;background:#22c55e;color:#071017;font-size:28px}
.fab.minor{right:86px;background:#ef4444}
.list{display:flex;flex-direction:column;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.card{width:min(560px,92vw);border:1px solid var(--edge);background:#0b1118;color:var(--text);border-radius:20px;padding:0}
.dialog .actions{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--edge)}
.subject-card{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:16px;color:#071017;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.chip{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#0ea5e9;color:#00111a;font-weight:900}
.tab{padding:8px 10px;border-radius:12px;background:#0b1118;color:#cbd5e1;border:1px solid var(--edge);cursor:pointer}
.tab.active{outline:2px solid #22c55e}
.tab-notes.active{background:var(--green);color:#071017}
.tab-pdfs.active{background:var(--blue);color:#071017}
.tab-images.active{background:var(--red);color:#071017}
.tab-audio.active{background:var(--yellow);color:#071017}
.note-card,.pdf-item,.audio-item,.album-item{border:1px solid var(--edge);background:#071022;padding:12px;border-radius:12px;cursor:pointer}
.image-tile{aspect-ratio:1/1;border:1px solid var(--edge);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#071022}
.icon-picker,.level-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:6px}
.pill{padding:8px;text-align:center;border:1px solid var(--edge);border-radius:10px;cursor:pointer;background:#0b1118;color:#cbd5e1}
.pill.active{background:#22c55e;color:#071017;border-color:#16a34a}