:root{
  --green:#10b981; --blue:#3b82f6; --red:#ef4444; --yellow:#f59e0b;
  --bg:#0b0f14; --card:#121821; --muted:#8b9bb3; --text:#f1f5f9; --edge:#1f2937;
  --shadow:0 10px 25px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Noto Sans Arabic, Arial, sans-serif;
  background:linear-gradient(180deg,#0b0f14,#0e141c);
  color:var(--text);
}
.app-bar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#0b1118cc; backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge);
}
.back-btn{border:none;background:#0f172a;color:#cbd5e1;border-radius:999px;width:40px;height:40px;cursor:pointer}
.back-btn:active{transform:translateY(1px)}
h1{margin:0;font-size:20px}
.container{padding:16px 16px 96px}
.view{display:none}
.view.active{display:block}
.empty{opacity:.7; text-align:center; margin-top:20vh}
.fab{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px;
  border-radius:50%; border:none; background:#22c55e; color:#081018; font-size:28px;
  box-shadow:var(--shadow); cursor:pointer;
}
.fab.minor{right:86px; background:#22d3ee}
.btn{border:none; padding:10px 14px; border-radius:14px; cursor:pointer; box-shadow:var(--shadow)}
.btn.primary{background:#22c55e; color:#071017}
.btn.ghost{background:#0b1118; color:#cbd5e1; border:1px solid var(--edge)}
.btn.danger{color:#fecaca; border-color:#7f1d1d}

.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:var(--card);
  color:var(--text); border-radius:20px; padding:0;
}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog .actions{display:flex; gap:10px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--edge)}
dialog form{padding:12px 16px}
dialog h3{margin:6px 0 12px}
label{display:block; font-size:14px; color:var(--muted); margin:10px 0}
input,textarea{width:100%; padding:10px 12px; border-radius:14px; border:1px solid var(--edge); background:#0b1118; color:var(--text)}
textarea{resize:vertical}
.row{display:flex; gap:12px}
.w-50{width:50%}

.subject-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-radius:16px; color:#071017; cursor:pointer;
  box-shadow:var(--shadow); border:1px solid var(--edge); background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
}
.subject-left{display:flex; align-items:center; gap:10px}
.subject-title{font-weight:700}
.chip{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:#0ea5e9; color:#00111a; font-weight:900}

.subject-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 12px}
.subject-title{display:flex; align-items:center; gap:10px}
.subject-actions{display:flex; gap:8px}

.tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0 14px}
.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{
  border:1px solid var(--edge); background:var(--card); border-radius:16px; padding:12px; cursor:pointer;
}
.note-card h4{margin:0 0 6px}
.note-card p{margin:0; opacity:.85}

.pdf-item, .audio-item, .album-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; border:1px solid var(--edge); background:var(--card); border-radius:16px;
}
.badge{padding:4px 8px; border-radius:999px; font-size:12px; background:#0b1118; border:1px solid var(--edge); color:#cbd5e1}

.image-tile{aspect-ratio:1/1; border:1px solid var(--edge); border-radius:16px; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; background:#0b1118}
.image-tile img{width:100%; height:100%; object-fit:cover}

.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}
.level{font-size:12px}

.toast{position:fixed; bottom:90px; right:18px; background:#111827; color:#f8fafc; padding:10px 14px; border-radius:12px; border:1px solid var(--edge); box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:.25s}
.toast.show{opacity:1; transform:translateY(0)}