:root{--bg:#f8fafc;--card-radius:12px}
*{box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Kufi Arabic",sans-serif}
body{background:var(--bg);margin:0;padding:0;color:#0f172a}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:white;box-shadow:0 1px 4px rgba(2,6,23,0.06)}
.cards-row{display:flex;gap:12px;padding:16px;flex-wrap:wrap}
.subject-card{min-width:160px;max-width:320px;padding:12px;border-radius:10px;color:white;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;box-shadow:0 2px 6px rgba(2,6,23,0.08)}
.subject-card .meta{display:flex;align-items:center;gap:8px}
.icon-box{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-weight:bold}
.fab{position:fixed;right:18px;bottom:18px;background:#10b981;color:white;border:none;width:56px;height:56px;border-radius:50%;font-size:28px;box-shadow:0 6px 18px rgba(16,185,129,0.24)}
.fab.small{width:44px;height:44px;bottom:86px;right:18px}
.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-content{background:white;padding:16px;border-radius:12px;max-width:540px;width:100%}
.modal-content h2,h3{margin-top:0}
.icon-picker{display:grid;grid-template-columns:repeat(4,48px);gap:8px;margin:8px 0}
.icon-item{width:48px;height:48px;border-radius:8px;background:#eef2ff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.icon-item.selected{outline:3px solid #60a5fa}
.subject-header{display:flex;justify-content:space-between;align-items:center;padding:12px}
.tabs{display:flex;border-bottom:1px solid #e6eef8}
.tab{flex:1;padding:12px;text-align:center;background:transparent;border:none;cursor:pointer}
.tab.active{font-weight:700}
.tab-content{padding:12px}
.note-card{width:120px;height:120px;border-radius:10px;background:white;padding:8px;box-shadow:0 2px 6px rgba(2,6,23,0.06);cursor:pointer;overflow:hidden}
.small-grid{display:grid;grid-template-columns:repeat(auto-fill,96px);gap:8px}
.pdf-card{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;min-width:200px}
.viewer{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center}
#viewer img{max-width:90%;max-height:90%}
.subject-controls .btn{margin-left:6px}
.btn{padding:8px 10px;border-radius:8px;border:none;background:#e6eef8}
.btn.primary{background:#2563eb;color:white}
.btn.danger{background:#ef4444;color:white}