:root{
  --bg:#0b1220; --card:#121a2b; --muted:#93a4c8; --text:#e6eefc;
  --accent:#16a34a; --radius:18px; --shadow:0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic UI", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  background:linear-gradient(180deg,#0b1220,#0e1527);
  color:var(--text);
}
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#0d1629e6; backdrop-filter:blur(8px); border-bottom:1px solid #1c2947;
}
.title{font-size:20px; font-weight:700; letter-spacing:1px}
.btn{
  border:1px solid #223456; background:#162342; color:#cfe2ff;
  padding:8px 12px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(1.05)}
.btn.primary{background:var(--accent); border-color:transparent; color:white}
.btn.danger{background:#dc2626; border-color:transparent; color:white}
.btn.back, .btn.edit{font-size:14px}
.btn.install{background:#2563eb; border-color:#1d4ed8;}

.view{display:none; padding:12px}
.view.active{display:block}

.subjects-list{display:flex; flex-direction:column; gap:10px; padding-bottom:72px}
.subject-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);
  border:1px solid #1c2947;
}
.subject-card .left{display:flex; align-items:center; gap:12px}
.subject-icon{
  width:40px;height:40px;border-radius:12px; display:grid; place-items:center; font-size:22px; font-weight:700; color:white
}
.subject-name{font-size:17px; font-weight:700}
.subject-meta{font-size:12px; color:var(--muted)}

.fab{
  position:fixed; bottom:18px; right:18px;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-size:28px; background:var(--accent); color:white; border:0; box-shadow:var(--shadow); cursor:pointer;
}

.subject-header{display:flex; align-items:center; gap:10px; padding:6px 4px}
.subject-title-wrap{display:flex; align-items:center; gap:10px}
.subject-title-wrap h1{font-size:20px; margin:0}

.tabs{display:flex; gap:8px; padding:8px}
.tab{
  flex:1; border:0; padding:10px; border-radius:14px; background:#121a2b; color:var(--text);
  border:1px solid #1c2947; cursor:pointer
}
.tab.active{outline:2px solid var(--tab-color)}

.tab-content{position:relative; min-height:60vh; padding-bottom:72px}
.tab-panel{display:none}
.tab-panel.active{display:block}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.card{
  background:#0f192d; border:1px solid #1c2947; border-radius:16px; padding:12px; box-shadow:var(--shadow);
}

.note-card{min-height:80px}
.note-title{font-weight:700; margin-bottom:6px}
.note-body{font-size:13px; color:var(--muted); max-height:48px; overflow:hidden}

.pdf-card, .image-card, .bucket-card{display:flex; align-items:center; gap:10px}
.pdf-thumb, .img-thumb{
  width:56px; height:56px; border-radius:12px; background:#0b1220; display:grid; place-items:center; font-weight:800; border:1px solid #1c2947;
}
.bucket-color{width:12px;height:12px;border-radius:50%}

.list{display:flex; flex-direction:column; gap:10px}
.audio-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; border-radius:14px; border:1px solid #1c2947; background:#0f192d
}
.audio-name{font-weight:700}
.audio-time{font-variant-numeric:tabular-nums; color:#93a4c8}

.dialog-form{min-width:280px; max-width:520px}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog{border:1px solid #1c2947; background:#0f192d; color:var(--text); border-radius:16px; padding:16px}

.subview{display:none}
.subview.active{display:block}

.viewer{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center}
.viewer img{max-width:96vw; max-height:92vh; border-radius:12px; box-shadow:var(--shadow)}
.viewer .close{position:fixed; top:10px; left:10px}

.icons8{display:grid; grid-template-columns:repeat(8,1fr); gap:6px}
.icon-chip{padding:8px; border-radius:10px; border:1px solid #334; text-align:center; cursor:pointer}
.icon-chip.active{background:#1f2b46; border-color:#4b6}
.levels{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.level-chip{padding:8px; border-radius:10px; border:1px solid #334; text-align:center; cursor:pointer}
.level-chip.active{background:#1f2b46; border-color:#4b6}

.enlarged {
  transform: scale(2);
  transition: transform 0.3s ease;
  z-index: 9999;
}


.back-button {
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 24px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: background 0.3s ease;
  z-index: 9999;
  pointer-events: auto; /* فقط الزر نفسه يستجيب للضغط */
}

.back-button:hover {
  background: #f0f0f0;
}