/* ==== Reset & Base ==== */
:root{
  --bg:#0b1020;
  --card:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --primary:#10b981;
  --danger:#ef4444;
  --blue:#3b82f6;
  --red:#ef4444;
  --yellow:#f59e0b;
  --green:#10b981;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;
}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:linear-gradient(90deg, #0ea5e9 0%, #10b981 100%);
}
.app-header h1{ margin:0; font-size:24px }

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

.fab{
  position:fixed; right:16px; bottom:16px;
  width:56px; height:56px; border-radius:50%;
  border:none; font-size:22px; cursor:pointer;
  background:var(--primary); color:#00140e; box-shadow:0 10px 20px rgba(0,0,0,.35);
}
button{ border:none; border-radius:14px; padding:10px 14px; cursor:pointer; }
button.primary{ background:var(--primary) }
button.ghost{ background:transparent; border:1px solid #334155; color:var(--text) }
button.small{ padding:6px 10px; font-size:12px }
button.danger{ border-color:transparent; background:var(--danger); color:#fff }

/* Home / Subjects */
.subjects-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px;
}
.subject-card{
  background:var(--card); border:1px solid #1f2937; border-radius:18px;
  display:flex; gap:12px; padding:14px; cursor:pointer; transition:.15s transform;
}
.subject-card:hover{ transform:translateY(-3px) }
.subject-icon{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:24px; color:#00140e; font-weight:700
}
.subject-title{ margin:2px 0 6px 0; font-size:18px }
.understanding-pill{ font-size:12px; color:#00140e; background:#a7f3d0; padding:4px 8px; border-radius:999px }

/* Subject View */
.subject-header{
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:8px
}
.subject-meta{ display:flex; gap:8px; align-items:center; }
.title-input{ background:var(--card); color:var(--text); border:1px solid #334155; border-radius:12px; padding:8px 10px; min-width:200px }
.icon-select, .understanding{
  background:var(--card); color:var(--text); border:1px solid #334155; border-radius:12px; padding:8px 10px;
}
.tabs{ display:flex; gap:8px; margin:8px 0 16px }
.tab{
  padding:10px 12px; border-radius:999px; border:1px solid #334155; background:transparent; color:var(--text);
}
.tab.active{ background:var(--card); outline:2px solid var(--primary); border-color:transparent }
.tab::after{ content:""; display:block; height:3px; background:var(--primary) }

.tab-panel{ display:none }
.tab-panel.active{ display:block }

.panel-header{ display:flex; gap:8px; align-items:center; margin-bottom:12px }
.file-btn{ border:1px dashed #475569; padding:8px 12px; border-radius:12px; cursor:pointer }

.list{ display:flex; flex-direction:column; gap:8px }
.list .item{
  background:var(--card); border:1px solid #1f2937; border-radius:14px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center
}
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px }
.note-card{
  background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:10px; min-height:110px; position:relative
}
.note-title{ font-weight:700; margin-bottom:6px }
.note-body{ color:var(--muted); font-size:14px; line-height:1.6; max-height:6lh; overflow:hidden }

/* Album */
.album-view.hidden{ display:none }
.album-toolbar{ display:flex; align-items:center; gap:10px; margin:12px 0 }
.album-title{ font-weight:700 }
.image-tile{ border-radius:14px; overflow:hidden; aspect-ratio:1/1; background:#0f172a; position:relative }
.image-tile img{ width:100%; height:100%; object-fit:cover; display:block }
.image-tile .overlay{ position:absolute; inset:0; display:none; background:rgba(0,0,0,.35) }
.image-tile:active .overlay{ display:block }

/* Dialog */
dialog{ border:none; border-radius:16px; width:min(600px,92vw); }
.dialog-content{ display:flex; flex-direction:column; gap:8px }
input, textarea, select{ background:var(--card); color:var(--text); border:1px solid #334155; border-radius:12px; padding:8px 10px }
textarea{ resize:vertical }

/* Fullscreen Image */
.fullscreen{
  position:fixed; inset:0; background:rgba(0,0,0,.9); display:grid; place-items:center; z-index:9999
}
.fullscreen img{ max-width:95vw; max-height:90vh }

/* Utilities */
.badge{ padding:2px 8px; border-radius:999px; font-size:12px; }
.flex{ display:flex; gap:8px; align-items:center }