:root{--bg:#f7f7f8;--card:#fff;--accent:#6ab04c}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{margin:0;background:var(--bg);color:#222}
.app{max-width:900px;margin:0 auto;padding:16px}
.app-header{display:flex;align-items:center;justify-content:space-between}
.app-header h1{margin:0;font-size:1.5rem}
.subjects-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.subject-card{min-width:200px;flex:1 1 240px;padding:12px;border-radius:12px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:12px}
.subject-card .meta{flex:1}
.fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#111;color:#fff;border:none;font-size:28px}
.fab.small{width:44px;height:44px;bottom:80px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:16px}
.hidden{display:none}
.modal-content{background:var(--card);padding:16px;border-radius:10px;min-width:300px}
.modal-content label{display:block;margin:8px 0}
.modal-content input, .modal-content select{width:100%;padding:8px;margin-top:6px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.page{background:var(--card);padding:12px;border-radius:12px;margin-top:12px}
.subject-top{display:flex;justify-content:space-between;align-items:center}
.tabs{display:flex;gap:6px;margin-top:12px}
.tab{flex:1;padding:10px;border-radius:8px;border:none;background:#eee;cursor:pointer}
.tab.active{color:#fff}
.tab-content{margin-top:12px;min-height:200px}
.card-item{background:#fff;padding:10px;border-radius:8px;margin:8px 0;display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.grid .img-thumb{aspect-ratio:1/1;border-radius:6px;object-fit:cover;cursor:pointer}
.top-actions button{margin-left:8px}
.subject-actions button{margin-left:6px}