/* RTL UI */
:root{
  --bg:#0b1020;
  --card:#131a2a;
  --muted:#8ba0b3;
  --text:#e7edf5;
  --accent:#0ea5e9;
  --green:#22c55e;--blue:#3b82f6;--red:#ef4444;--yellow:#eab308;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
[hidden]{display:none !important} /* ضمان إخفاء عناصر الـlightbox */
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b1020,#0d1428);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial;direction:rtl}
.app-header{position:sticky;top:0;display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:12px 16px;background:rgba(10,15,28,.6);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid #1f2a44;z-index:10}
#app-title{margin:0;font-size:1.25rem;font-weight:700}
.icon-btn{background:#0000;border:1px solid #334155;color:var(--text);padding:6px 10px;border-radius:12px;cursor:pointer}
.install-btn{background:var(--accent);border:none;color:#001018;padding:8px 12px;border-radius:12px;cursor:pointer;font-weight:700}
.view{display:none;min-height:calc(100vh - 56px);padding:16px}
.view.active{display:block}
.page-title{font-size:1.2rem;margin:8px 4px 16px;color:#cfe3ff}
.subjects{display:flex;flex-direction:column;gap:12px}
.subject-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid #1e293b;border-right:6px solid var(--color);padding:14px;border-radius:16px;box-shadow:var(--shadow);cursor:pointer}
.subject-icon{font-size:22px;width:36px;height:36px;display:grid;place-items:center;background:#0f172a;border-radius:10px;border:1px solid #243045}
.subject-meta{display:flex;flex-direction:column;gap:4px}
.subject-name{font-weight:800}
.subject-row{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:30px;border:none;background:linear-gradient(135deg,#22d3ee,#0ea5e9);color:#002033;font-size:28px;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;z-index:5}
.chip{background:#0f172a;border:1px solid #263247;color:var(--text);padding:8px 10px;border-radius:20px;cursor:pointer}
.chip.danger{border-color:#581a1a;color:#fecaca;background:#2a0f11}
.subject-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.subject-title-wrap{display:flex;align-items:center;gap:10px}
.subject-color{width:14px;height:24px;border-radius:6px;border:1px solid #334155}
.tabs{display:flex;gap:8px;margin:12px 0 8px}
.tab{flex:1;background:#0f172a;border:1px solid #263247;color:var(--text);padding:10px;border-radius:999px;cursor:pointer;position:relative}
.tab.active{box-shadow:inset 0 0 0 2px var(--tab-color)}
.tab-panel{position:relative;min-height:60vh}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.card{background:var(--card);border:1px solid #22314a;padding:12px;border-radius:16px;box-shadow:var(--shadow)}
.card .title{font-weight:700;margin-bottom:6px}
.hint{color:var(--muted);margin:6px 2px}
.list-rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid #22314a;padding:10px;border-radius:16px}
.row .grow{flex:1}
.progress{height:6px;background:#0f172a;border-radius:10px;overflow:hidden;border:1px solid #22314a}
.progress>div{height:100%;width:0;background:var(--yellow)}
.floating-form{position:fixed;inset:auto 12px 88px 12px;background:#0b1325;border:1px solid #25324a;border-radius:16px;padding:12px;box-shadow:var(--shadow);display:grid;gap:10px;z-index:20}
.floating-form .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.floating-form label{font-size:.9rem;color:#c3d1e6}
.input, textarea{width:100%;background:#0f172a;border:1px solid #263247;color:var(--text);padding:8px;border-radius:10px}
textarea{min-height:90px;resize:vertical}
.select-icons{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.icon-choice{display:grid;place-items:center;padding:8px;border-radius:10px;border:1px solid #263247;background:#0f172a;cursor:pointer}
.icon-choice.selected{outline:2px solid var(--accent)}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.level{padding:8px;border-radius:12px;border:1px solid #263247;text-align:center;cursor:pointer}
.level.selected{outline:2px solid var(--accent)}
.color-row{display:flex;gap:8px;align-items:center}
.color{width:22px;height:22px;border-radius:6px;border:1px solid #334155;cursor:pointer}
.color.selected{outline:2px solid var(--accent)}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end}
.btn{padding:8px 12px;border-radius:12px;border:1px solid #2b3b57;background:#0f172a;color:var(--text);cursor:pointer}
.btn.primary{background:var(--accent);color:#002033;border:none}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;place-items:center;z-index:50}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:16px;border:1px solid #2b3b57;box-shadow:var(--shadow)}
.lightbox .nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#111827;color:#e5e7eb;border:1px solid #374151;border-radius:50%;width:44px;height:44px;font-size:28px;cursor:pointer}
.lightbox .left{left:16px}.lightbox .right{right:16px}
.lightbox .abs.top-left{position:absolute;top:16px;left:16px}
.abs{position:absolute}
.small{font-size:.85rem;color:var(--muted)}