*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
:root{--green:#22c55e;--blue:#3b82f6;--red:#ef4444;--yellow:#eab308;--accent:#0ea5a4;--bg:#f6f7f8;--fg:#0f172a;--card:#fff;--muted:#64748b}
:root.dark{--bg:#0b1220;--fg:#e2e8f0;--card:#0f172a;--muted:#8a9bb3}
body{background:var(--bg);color:var(--fg)}
.app-bar{position:sticky;top:0;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--card);border-bottom:1px solid #0001;z-index:5}
h1,h2{margin:.25rem 0}
.icon-btn{background:transparent;border:1px solid #0002;border-radius:12px;padding:.35rem .55rem;font-size:1.05rem;cursor:pointer}
.icon-btn:hover{background:#0001}
.spacer{flex:1}
.view{display:none;padding:1rem 1rem 5rem}
.view.active{display:block}
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.subject-card{display:flex;align-items:center;gap:.75rem;background:var(--card);border:1px solid #0001;border-radius:16px;padding:.9rem .9rem;box-shadow:0 6px 18px #0000000b;cursor:pointer;position:relative}
.subject-card .icon{font-size:1.3rem}
.subject-card .title{font-weight:700}
.subject-card .meta{font-size:.85rem;color:var(--muted)}
.color-dot{width:12px;height:12px;border-radius:999px;border:1px solid #0004}
.badge{padding:.15rem .45rem;border-radius:999px;border:1px solid #0002;font-size:.75rem}
.level-1{background:#e2fced}
.level-2{background:#e3f2ff}
.level-3{background:#fff4e6}
.level-4{background:#ffe6e6}
.level-5{background:#f1e6ff}
.level-6{background:#e6ffe6}
.fab{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;width:56px;height:56px;border-radius:999px;border:none;background:var(--accent);color:white;font-size:1.6rem;box-shadow:0 10px 24px #0000002b;cursor:pointer;z-index:6}
.subject-header{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 1rem}
.tabs{display:flex;gap:.5rem;position:sticky;top:56px;background:var(--bg);padding:.25rem 0 .5rem;z-index:4}
.tab{border:none;padding:.5rem .8rem;border-radius:999px;background:#00000010;color:var(--fg);cursor:pointer}
.tab.active{box-shadow:inset 0 -2px 0 #0002}
.tab.green{background:color-mix(in oklab, var(--green) 20%, transparent)}
.tab.blue{background:color-mix(in oklab, var(--blue) 20%, transparent)}
.tab.red{background:color-mix(in oklab, var(--red) 20%, transparent)}
.tab.yellow{background:color-mix(in oklab, var(--yellow) 20%, transparent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}
.note-card{background:var(--card);border:1px solid #0001;border-radius:16px;padding:.75rem;box-shadow:0 6px 18px #0000000b;cursor:pointer;min-height:90px;display:flex;flex-direction:column;gap:.4rem}
.list-rows{display:flex;flex-direction:column;gap:.6rem}
.row{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid #0001;border-radius:14px;padding:.6rem .8rem;box-shadow:0 6px 18px #0000000b}
.row .title{font-weight:600}
.row .sub{font-size:.85rem;color:var(--muted)}
.album-box{display:flex;align-items:center;gap:.6rem}
.album-color{width:14px;height:14px;border-radius:4px;border:1px solid #0004}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin-top:.5rem}
.photo-grid img{width:100%;height:100px;object-fit:cover;border-radius:10px;cursor:pointer}
audio{width:100%}
dialog::backdrop{background:#0006}
dialog{border:none;border-radius:18px;padding:0;overflow:hidden;max-width:min(560px,92vw)}
.dialog-body{padding:1rem;background:var(--card);color:var(--fg)}
.form-row{display:flex;gap:.5rem;margin:.5rem 0}
.form-row > *{flex:1}
input,select,textarea{width:100%;padding:.6rem .7rem;border-radius:12px;border:1px solid #0002;background:var(--bg);color:var(--fg')}
label{font-size:.9rem;color:var(--muted);display:block;margin-bottom:.25rem}
form .actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
button.primary{background:var(--accent);color:#fff;border:none;padding:.6rem 1rem;border-radius:12px;cursor:pointer}
button.ghost{background:transparent;border:1px solid #0002;padding:.6rem 1rem;border-radius:12px;cursor:pointer}
.hidden{display:none}
#lightbox{position:fixed;inset:0;background:#000e;display:flex;align-items:center;justify-content:center}
#lightbox img{max-width:95vw;max-height:95vh;object-fit:contain}
@media (prefers-color-scheme: dark){:root{color-scheme:dark}}