:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --accent:#0d6efd;
  --radius:12px;
  --shadow: 0 8px 24px rgba(15,23,42,0.08);
  font-family: "Segoe UI", Tahoma, Arial, "Noto Naskh Arabic", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#0b1220;
  -webkit-font-smoothing:antialiased;
  direction:rtl;
}

header{
  background:linear-gradient(90deg,var(--accent),#0b5ed7);
  color:white;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
header h1{margin:0;font-size:20px}
header button{background:rgba(255,255,255,0.14);border:0;padding:8px 12px;border-radius:8px;color:white;cursor:pointer}

main{padding:16px}

/* list of subjects */
.list{display:flex;flex-direction:column;gap:12px}

/* subject horizontal card */
.subject-card{
  display:flex;
  gap:12px;
  align-items:center;
  background:var(--card);
  padding:12px;
  border-radius:14px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s;
}
.subject-card:hover{transform:translateY(-3px)}
.subject-card .icon{
  width:64px;height:64px;border-radius:12px;flex:0 0 64px;display:flex;align-items:center;justify-content:center;font-weight:700;color:white;font-size:20px}
.subject-card .meta .name{font-weight:800}
.subject-card .meta .level{font-size:13px;color:#607085}
.subject-card .actions{margin-left:auto}
.subject-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-weight:700}

/* fab */
.fab{
  position:fixed;
  bottom:20px;
  right:20px;
  width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;border:0;font-size:32px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);cursor:pointer;
}

/* subject view */
#subjectView{padding:8px}
.subject-header{display:flex;gap:12px;align-items:center;justify-content:space-between;background:transparent;padding:8px}
.subject-actions button{margin-left:6px;padding:8px 10px;border-radius:8px;border:0;background:#f1f3f5;cursor:pointer}
.tabs{display:flex;gap:8px;margin-top:12px}
.tab{flex:1;padding:10px;border-radius:10px;border:0;cursor:pointer;color:white;font-weight:700}
.tab-notes{background:linear-gradient(90deg,#66bb6a,#43a047)}
.tab-pdfs{background:linear-gradient(90deg,#42a5f5,#1e88e5)}
.tab-images{background:linear-gradient(90deg,#ef5350,#e53935)}
.tab-audio{background:linear-gradient(90deg,#ffca28,#fbc02d)}

.tab-content{margin-top:14px;min-height:240px}

/* small cards inside tabs */
.small-card{
  background:var(--card);padding:12px;border-radius:12px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;cursor:pointer;
}
.note-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}

/* image boxes */
.boxes{display:flex;flex-wrap:wrap;gap:10px}
.box{
  width:140px;height:140px;border-radius:12px;padding:10px;color:white;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;box-shadow:var(--shadow);
}
.box .title{font-weight:800}
.box .count{font-size:13px;opacity:0.9}

/* image grid */
.images-grid{display:flex;flex-wrap:wrap;gap:8px}
.images-grid .img-box{width:100px;height:100px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #eef2f7}
.fullscreen{
  position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999;
}
.fullscreen img{max-width:95%;max-height:95%;transform-origin:center;transition:transform .15s}

/* audio item */
.audio-row{display:flex;gap:8px;align-items:center;width:100%}
.time{font-size:12px;color:#444}
.progress{flex:1;height:8px;background:#eee;border-radius:8px;overflow:hidden}
.progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd54f,#ffb300)}

/* modal */
.modal{
  position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:999;
}
.modal .card{background:white;padding:14px;border-radius:10px;min-width:320px}

input,textarea,select{width:100%;padding:8px;margin:6px 0;border-radius:8px;border:1px solid #e6eef6}

button.primary{background:var(--accent);color:white;border:0;padding:8px 12px;border-radius:8px}
button.ghost{background:#f1f1f1;border:0;padding:8px 12px;border-radius:8px}
.back{background:transparent;border:0;cursor:pointer}

/* helper small */
.small{font-size:13px;color:#6b7b8a}
.hidden{display:none}