:root{
  --green:#10b981;
  --blue:#3b82f6;
  --red:#ef4444;
  --yellow:#eab308;
  --muted:#6b7280;
  --bg:#0b1120;
  --card:#111827;
  --elev:#0f172a;
  --text:#e5e7eb;
  --soft:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Naskh Arabic, Noto Sans Arabic, "Tahoma", Arial, sans-serif;
  background:linear-gradient(180deg,#0b1120,#111827);
  color:var(--text);
}
.container{padding:16px 16px 96px}
.hidden{display:none}
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(17,24,39,0.8); backdrop-filter: blur(6px);
  border-bottom:1px solid #1f2937;
}
.app-header h1{margin:0;font-size:1.4rem}
.btn{
  border:none; border-radius:14px; padding:8px 12px; cursor:pointer;
  background:var(--soft); color:var(--text);
  transition: transform .05s ease, background .2s ease;
}
.btn:active{transform: translateY(1px)}
.btn.primary{background:linear-gradient(90deg,var(--green),#34d399); color:#052e2b; font-weight:700}
.btn.ghost{background:transparent; border:1px solid #374151}
.btn.danger{background:linear-gradient(90deg,#ef4444,#f97316); color:#280b0b; font-weight:700}

.fab{
  position:fixed; right:16px; bottom:16px; width:56px; height:56px;
  border-radius:50%; display:grid; place-items:center; font-size:26px;
  color:#052e2b; background:linear-gradient(90deg,var(--green),#34d399);
  border:none; box-shadow:0 10px 30px rgba(16,185,129,.35);
  cursor:pointer;
}

.subjects-list{display:grid; gap:12px}
.subject-card{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px;
  background:var(--card); border:1px solid #1f2937; cursor:pointer;
  transition:transform .05s ease, box-shadow .2s ease;
}
.subject-card:active{transform:scale(.995)}
.subject-icon{font-size:24px}
.subject-meta{display:flex; gap:10px; align-items:center; color:#cbd5e1}
.badge{padding:2px 8px; border-radius:999px; font-size:.75rem; background:#0b1220; border:1px solid #1f2937}

.dialog{border:none; padding:0; background: transparent}
.dialog::backdrop{background:rgba(0,0,0,.5); backdrop-filter: blur(2px)}
.dialog-body{
  width:min(560px, 92vw);
  background:#0b1220; border:1px solid #1f2937; border-radius:20px; padding:16px; margin:auto;
}
.dialog-header{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.field{display:grid; gap:8px; margin:10px 0}
.field input[type="text"], .field input:not([type]), .field textarea, input, textarea{
  width:100%; background:#0e1726; border:1px solid #1f2937; color:var(--text);
  border-radius:12px; padding:10px 12px; outline:none;
}
.field textarea{resize:vertical}
.icon-grid{display:grid; grid-template-columns: repeat(8, 1fr); gap:8px}
.icon-btn{
  font-size:22px; cursor:pointer; background:#0e1726; border:1px solid #1f2937; border-radius:12px; padding:8px;
}
.icon-btn.active{outline:2px solid var(--green)}
.understanding{display:grid; grid-template-columns: repeat(3, 1fr); gap:8px}
.level-btn{padding:8px; border-radius:10px; border:1px solid #1f2937; background:#0e1726; cursor:pointer}
.level-btn.active{outline:2px solid var(--green)}

.subject-view{padding-bottom:96px}
.subject-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px}
.subject-title{display:flex; align-items:center; gap:10px}

.tabs{display:flex; gap:8px; padding:0 16px}
.tab{flex:1; padding:10px; border-radius:999px; border:1px solid #1f2937; background:#0e1726; color:#cbd5e1; cursor:pointer}
.tab.active{border-color:transparent; color:#111827; font-weight:700}
.tab[data-color="green"].active{background:var(--green)}
.tab[data-color="blue"].active{background:var(--blue)}
.tab[data-color="red"].active{background:var(--red)}
.tab[data-color="yellow"].active{background:var(--yellow)}

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

.card-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px}
.note-card{
  background:#0e1726; border:1px solid #1f2937; border-radius:14px; padding:10px; cursor:pointer;
}
.note-card h4{margin:0 0 6px}
.note-card p{margin:0; color:#cbd5e1; max-height:3.2em; overflow:hidden}

.list-rows{display:grid; gap:10px}
.row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#0e1726; border:1px solid #1f2937; border-radius:14px; padding:10px;
}
.row .meta{display:flex; gap:10px; align-items:center}
.row .name{font-weight:600}
.row .time{font-size:.85rem; color:#9ca3af}

.image-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:8px}
.image-tile{position:relative; border-radius:12px; overflow:hidden; border:1px solid #1f2937; background:#0e1726; cursor:pointer}
.image-tile img{width:100%; height:100%; object-fit:cover; display:block}

.toast{
  position:fixed; bottom:84px; right:16px; background:#111827; border:1px solid #1f2937;
  color:#e5e7eb; padding:10px 12px; border-radius:10px; opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.toast.show{opacity:1}