:root{
  --bg:#f5f5f5;
  --card:#fff;
  --accent:#1976d2;
  --radius:12px;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
  direction:rtl;
}
.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background:linear-gradient(90deg,var(--accent),#1565c0);
  color:white;
}
.main{padding:12px}
.subjects{display:flex;flex-direction:column;gap:10px}
.subject-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:10px;
  color:#111;
  cursor:pointer;
}
.subject-icon{
  width:52px;height:52px;border-radius:8px;background:rgba(255,255,255,0.6);
  display:flex;align-items:center;justify-content:center;font-weight:bold;
}
.subject-meta .subject-name{font-weight:700}
.subject-meta .subject-level{font-size:12px;color:rgba(0,0,0,0.6)}
.fab{
  position:fixed;bottom:20px;left:20px; /* left because RTL */
  width:62px;height:62px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;font-size:32px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.2);
}
.small-btn{background:rgba(255,255,255,0.15);border:none;padding:6px 10px;border-radius:8px;color:white}
.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-card{background:var(--card);padding:16px;border-radius:12px;width:100%;max-width:420px;direction:rtl}
.modal-card label{display:block;margin:8px 0}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.primary{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:8px}
.icon-list{display:flex;gap:6px;flex-wrap:wrap}
.icon-item{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;cursor:pointer}
.icon-item.selected{outline:3px solid rgba(0,0,0,0.08)}
.subject-view{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column}
.subject-header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(0,0,0,0.06);background:linear-gradient(90deg,rgba(255,255,255,0.9),rgba(255,255,255,0.8))}
.tabs{display:flex;gap:6px;padding:8px}
.tab{padding:10px;border-radius:8px;color:white;border:none;flex:1}
.tab.active{box-shadow:0 4px 10px rgba(0,0,0,0.08)}
.tab-content{padding:12px;flex:1;overflow:auto}
.small-card{padding:8px;border-radius:8px;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.small-row{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:10px;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,0.04);margin-bottom:8px}
.note-card{min-height:60px}
.file-card{min-height:48px}
.image-thumb{width:120px;height:120px;border-radius:8px;background:#eee;display:inline-block;object-fit:cover;margin:6px}
/* image modal */
.image-full{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center}
.image-full img{max-width:95%;max-height:95%}
.small{font-size:12px;color:rgba(0,0,0,0.6)}
.danger{background:#e53935;color:white}