*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:"Cairo",system-ui,Arial,sans-serif}
:root{--bg:#0b1220;--card:#101827;--muted:#94a3b8;--text:#e2e8f0;--primary:#0ea5e9;--green:#10b98120;--blue:#3b82f620;--red:#ef444420;--yellow:#f59e0b20}
body{background:#0b1220;color:var(--text)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#0d1b2a;position:sticky;top:0;z-index:10;border-bottom:1px solid #1f2937}
.app-title{margin:0;font-size:1.25rem}
.left,.right{display:flex;gap:.5rem;align-items:center}
.search{background:#0b1324;border:1px solid #1f2937;color:var(--text);padding:.5rem .75rem;border-radius:.75rem;min-width:200px}
.view{display:none;padding:1rem}
.view.active{display:block}
.fab{position:fixed;right:1rem;bottom:1rem;background:var(--primary);color:#fff;border:none;padding:.85rem 1rem;border-radius:999px;font-size:1.25rem;box-shadow:0 10px 25px #00000040;cursor:pointer}
.btn{background:#0b1324;color:var(--text);border:1px solid #223042;border-radius:.75rem;padding:.5rem .75rem;cursor:pointer}
.btn.small{padding:.25rem .5rem;font-size:.9rem}
.btn.primary{background:var(--primary);border-color:transparent}
.btn.danger{background:#7f1d1d;border-color:#ef4444}
.subjects-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.subject-card{display:flex;align-items:center;gap:.75rem;background:#0b1324;border:1px solid #1f2937;border-radius:1rem;padding:.75rem;cursor:pointer;position:relative}
.subject-icon{font-size:1.4rem;min-width:2.2rem;text-align:center}
.subject-meta{display:flex;flex-direction:column;gap:.25rem}
.subject-name{font-weight:700}
.badge{font-size:.75rem;opacity:.8}
.badge.level{border:1px dashed #334155;border-radius:.5rem;padding:.15rem .4rem}
.badge.color{width:16px;height:16px;border-radius:4px;border:1px solid #1f2937;display:inline-block}
.subject-header{display:flex;align-items:center;gap:1rem;justify-content:space-between;background:#0d1b2a;border:1px solid #1f2937;border-radius:1rem;padding:.5rem 1rem;margin-bottom:1rem}
.subject-title-wrap{display:flex;align-items:center;gap:.5rem;flex:1}
.subject-title{font-size:1.1rem;background:#0b1324;border:1px solid #1f2937;color:var(--text);padding:.4rem .6rem;border-radius:.5rem;width:100%}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.75rem}
.tab{background:#0b1324;border:1px solid #1f2937;color:var(--text);padding:.6rem;border-radius:.75rem;cursor:pointer}
.tab-content{display:none;border:1px solid #1f2937;background:#0b1324;border-radius:1rem;padding:1rem;min-height:45vh;position:relative}
.tab-content.active{display:block}
.green{box-shadow:0 0 0 2px #10b98160 inset;background:var(--green)}
.blue{box-shadow:0 0 0 2px #3b82f660 inset;background:var(--blue)}
.red{box-shadow:0 0 0 2px #ef444460 inset;background:var(--red)}
.yellow{box-shadow:0 0 0 2px #f59e0b60 inset;background:var(--yellow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}
.note-card{background:#0b1324;border:1px solid #1f2937;border-radius:.75rem;padding:.6rem;cursor:pointer}
.note-title{font-weight:700;margin-bottom:.35rem}
.list .row{display:flex;align-items:center;justify-content:space-between;background:#0b1324;border:1px solid #1f2937;border-radius:.75rem;padding:.6rem .75rem;margin-bottom:.5rem}
.row .name{font-weight:600}
.row .muted{opacity:.8;font-size:.9rem}
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.album-card{background:#0b1324;border:1px dashed #334155;border-radius:1rem;padding:.75rem}
.album-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.album-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.5rem;cursor:pointer}
.dialog-form{min-width:300px;max-width:90vw;background:#0d1b2a;border:1px solid #1f2937;border-radius:1rem;padding:1rem;color:var(--text)}
dialog::backdrop{background:#0008}
.choices{display:flex;flex-wrap:wrap;gap:.4rem}
.choices .pill{padding:.4rem .6rem;border-radius:.75rem;border:1px solid #334155;background:#0b1324;cursor:pointer}
.choices .pill.active{background:var(--primary);border-color:transparent}
.choices.icons .pill{font-size:1.2rem;width:2.25rem;text-align:center}
.choices.colors .pill{width:28px;height:28px;border-radius:.5rem;padding:0}
.subject-card .level-dot{position:absolute;right:.6rem;bottom:.5rem;font-size:.9rem;opacity:.8}
.image-viewer{padding:0;border:none}
.image-viewer img{max-width:90vw;max-height:85vh;display:block}
/* light mode */
.light body{background:#f4f7fb;color:#111827}