:root{
  --bg:#f7f7fb;
  --card-radius:12px;
  --fab-bg:#1976d2;
}
*{box-sizing:border-box;font-family:system-ui, "Segoe UI", Roboto, "Noto Sans Arabic", "Tahoma";}

body{margin:0;background:var(--bg);color:#111;min-height:100vh;direction:rtl}
.app-header{padding:14px 16px;background:linear-gradient(90deg,#4facfe,#00f2fe);color:white}
.app-header h1{margin:0;font-size:20px}
main{padding:12px}
.list{display:flex;flex-direction:column;gap:10px}
.empty{text-align:center;color:#666;margin-top:40px}

/* Subject card */
.subject-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--card-radius);color:#111}
.subject-icon{width:56px;height:56px;border-radius:10px;flex-shrink:0;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.subject-info{flex:1}
.subject-name{font-size:16px;font-weight:700}
.subject-meta{font-size:12px;color:#333;opacity:0.8}

/* modal */
.modal form{display:flex;flex-direction:column;gap:8px;padding:12px;width:320px}
.modal input, .modal select{padding:8px;border-radius:8px;border:1px solid #ddd;width:100%}
.icons-grid{display:flex;flex-wrap:wrap;gap:6px}
.icons-grid button{width:40px;height:40px;border-radius:8px;border:1px solid transparent;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* subject view */
.hidden{display:none}
.subject-topbar{display:flex;align-items:center;gap:8px;padding:8px;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.subject-topbar h2{flex:1;margin:0;text-align:center}
.subject-actions{display:flex;gap:6px}
.icon{background:transparent;border:none;font-size:18px;padding:6px;cursor:pointer}
.icon.danger{color:#b00020}

/* tabs */
.tabs{display:flex;gap:6px;padding:10px;background:transparent}
.tab{flex:1;padding:10px;border:none;border-bottom:4px solid transparent;background:white;border-radius:10px;cursor:pointer}
.tab.active{box-shadow:0 2px 8px rgba(0,0,0,0.06)}

/* tab content */
.tab-content{padding:12px;display:grid;gap:10px}
.small{width:100%;border-radius:10px;padding:10px;background:white;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.05)}

/* note */
.note-card p{margin:6px 0 0 0;color:#333;max-height:48px;overflow:hidden}

/* pdf */
.pdf-card{display:flex;align-items:center;justify-content:space-between}

/* images */
.image-thumb img{width:100%;Height:120px;object-fit:cover;border-radius:8px}

/* audio */
.audio-row{display:flex;align-items:center;gap:8px;justify-content:space-between}

/* fab */
.fab{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:var(--fab-bg);color:white;border:none;font-size:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.16);cursor:pointer}

/* fullscreen preview */
.fullscreen{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;padding:10px}
.fullscreen img{max-width:98%;max-height:98%;object-fit:contain;touch-action:pan-y;}

/* responsive */
@media(min-width:700px){main{max-width:720px;margin:0 auto}}