/* موادي - أنماط */
:root{
  --green:#10b981;
  --blue:#3b82f6;
  --red:#ef4444;
  --yellow:#f59e0b;
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --shadow: 0 10px 25px rgba(0,0,0,.2);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic UI", "Tajawal", Arial, sans-serif;
  background: linear-gradient(180deg, #0b1220, #0f172a);
  color:var(--text);
}
.app-header{
  position:sticky; top:0; z-index:10;
  background:rgba(15,23,42,.8); backdrop-filter: blur(10px);
  padding:14px 16px; box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
}
h1{margin:0; font-size:22px}
.subject-header{display:flex; gap:8px; align-items:center}
.hidden{display:none !important}
.view{padding:14px 12px 90px}
.list{display:flex; flex-direction:column; gap:12px}
.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:12px}

.card{
  background:var(--card); border-radius:var(--radius);
  padding:12px; box-shadow: var(--shadow);
  display:flex; align-items:center; gap:12px; min-height:64px;
}
.card.row{flex-direction:row}
.card.col{flex-direction:column; align-items:flex-start}
.card .title{font-weight:600}
.card .meta{font-size:12px; color:var(--muted)}
.badge{padding:4px 8px; border-radius:999px; font-size:12px; background:#111827; color:#cbd5e1}

.subject-pill{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border:2px solid transparent; border-radius:16px; padding:12px 14px;
}
.subject-left{display:flex; align-items:center; gap:10px}
.icon{font-size:22px}
.level{font-size:12px; color:#94a3b8}
.color-dot{width:14px; height:14px; border-radius:50%}

.tabs{display:flex; gap:8px; margin:6px 0 12px}
.tab{flex:1; border:none; border-radius:14px; padding:10px; color:white; font-weight:700; box-shadow:var(--shadow); opacity:.7}
.tab.active{opacity:1}
.tab.green{background:var(--green)}
.tab.blue{background:var(--blue)}
.tab.red{background:var(--red)}
.tab.yellow{background:var(--yellow)}
.tab-panel{display:none}
.tab-panel.active{display:block}

.hint{font-size:12px; color:var(--muted); margin-bottom:8px}

.note-tile{
  background:var(--card); border-radius:16px; padding:10px; min-height:90px; position:relative; overflow:hidden; box-shadow:var(--shadow)
}
.note-tile h4{margin:0 0 6px}
.note-tile p{margin:0; color:#cbd5e1; line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}

.pdf-row, .audio-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border-radius:14px; padding:12px; box-shadow:var(--shadow)
}
.pdf-row .left, .audio-row .left{display:flex; align-items:center; gap:10px}

.image-thumb{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); background:#0b1220
}
.image-viewer{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.image-viewer img{max-width:95vw; max-height:95vh; cursor:zoom-out}

.fab{
  position:fixed; right:16px; bottom:16px; z-index:20;
  width:56px; height:56px; border-radius:50%; border:none; font-size:28px; font-weight:700;
  color:white; background:linear-gradient(135deg, #22c55e, #16a34a); box-shadow: var(--shadow);
}
.fab:active{transform:scale(0.98)}

.dialog{border:none; border-radius:18px; padding:0; box-shadow: var(--shadow); width:min(560px, 92vw); background:#0b1220; color:var(--text)}
.dialog::backdrop{background:rgba(0,0,0,.5)}
.form{padding:16px; display:flex; flex-direction:column; gap:12px}
.form label{display:flex; flex-direction:column; gap:6px; font-size:14px}
.form input, .form textarea{
  background:#0f172a; border:1px solid #1f2937; color:#e5e7eb; border-radius:12px; padding:10px 12px;
}
.choices{display:flex; gap:8px; flex-wrap:wrap}
.choices.icons button, .choices.levels button, .choices.colors button{
  border:1px solid #1f2937; background:#0f172a; color:#e5e7eb; padding:8px 10px; border-radius:12px; cursor:pointer;
}
.choices button.selected{outline:2px solid #22c55e}
.btn{border:none; background:#1f2937; color:#e5e7eb; padding:8px 12px; border-radius:12px; cursor:pointer}
.btn.primary{background:#16a34a}
.btn.small{padding:6px 8px; font-size:12px}
.btn.danger{background:#ef4444}

/* RTL fixes */
[dir="rtl"] .left{flex-direction:row-reverse}