:root{
  --blue:#1f4b7a;
  --blue-2:#2f6fa6;
  --blue-soft:#eaf2f9;
  --blue-mist:#f4f8fc;
  --ink:#172433;
  --muted:#6b7b8c;
  --line:#dce5ee;
  --bg:#f7f9fc;
  --card:#ffffff;
  --gold:#b79a63;
  --green:#2e7d5b;
  --amber:#b77a18;
  --red:#b84848;
  --shadow:0 8px 28px rgba(21,49,78,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#173e66;color:white;padding:24px 18px;display:flex;flex-direction:column;gap:22px}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 16px}
.brand-mark{width:42px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:20px;background:rgba(255,255,255,.08)}
.brand-name{font-weight:800;font-size:20px;line-height:1.05}.brand-sub{font-size:12px;opacity:.7;margin-top:3px}
.nav{display:flex;flex-direction:column;gap:7px}.nav button{border:0;background:transparent;color:rgba(255,255,255,.78);text-align:start;padding:11px 12px;border-radius:12px;display:flex;gap:10px;align-items:center}.nav button.active,.nav button:hover{background:rgba(255,255,255,.12);color:white}.nav .ico{width:20px;text-align:center}
.sidebar-footer{margin-top:auto;display:grid;gap:10px}.small-btn{border:1px solid rgba(255,255,255,.22);color:white;background:rgba(255,255,255,.06);padding:10px 12px;border-radius:12px;text-align:start}
.main{min-width:0}.topbar{height:76px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:10}.top-title{font-weight:700}.top-actions{display:flex;gap:10px;align-items:center}.chip{border:1px solid var(--line);background:white;padding:8px 11px;border-radius:999px;color:var(--ink)}
.content{padding:28px 30px 42px;max-width:1450px;margin:auto}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.page-head h1{margin:0 0 7px;font-size:30px;letter-spacing:-.4px}.page-head p{margin:0;color:var(--muted)}
.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:700}.btn-primary{background:var(--blue);color:white}.btn-secondary{background:var(--blue-soft);color:var(--blue)}.btn-ghost{background:white;border:1px solid var(--line);color:var(--ink)}.btn-danger{background:#fff0f0;color:var(--red);border:1px solid #f1cccc}.btn-sm{padding:8px 11px;border-radius:10px;font-size:13px}
.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.stat{display:flex;justify-content:space-between;align-items:flex-start}.stat-label{color:var(--muted);font-size:13px}.stat-value{font-size:30px;font-weight:800;margin-top:7px}.stat-icon{width:40px;height:40px;border-radius:13px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue);font-weight:800}
.section{margin-top:22px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-title{font-size:18px;font-weight:800}.muted{color:var(--muted)}
.teacher-row,.student-row,.issue-row{display:flex;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line)}.teacher-row:last-child,.student-row:last-child,.issue-row:last-child{border-bottom:0}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:800;flex:0 0 auto}.row-main{min-width:0;flex:1}.row-title{font-weight:800}.row-sub{font-size:13px;color:var(--muted);margin-top:3px}.score-pill{font-weight:800;border-radius:999px;padding:7px 11px;font-size:13px}.good{background:#e9f6ef;color:var(--green)}.warn{background:#fff3dc;color:var(--amber)}.bad{background:#fdeaea;color:var(--red)}.neutral{background:var(--blue-soft);color:var(--blue)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:white}.table{width:100%;border-collapse:collapse;min-width:760px}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#f8fafc;text-align:start;padding:13px 14px}.table td{padding:14px;border-top:1px solid var(--line);vertical-align:middle}.table tr:hover td{background:#fbfdff}.cell-ok{color:var(--green);font-weight:700}.cell-warn{color:var(--amber);font-weight:700}.cell-bad{color:var(--red);font-weight:700}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px}.tab{border:0;background:transparent;padding:12px 14px;color:var(--muted);font-weight:700;border-bottom:2px solid transparent}.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.student-hero{display:flex;gap:18px;align-items:center}.student-hero .avatar{width:58px;height:58px;font-size:20px}.student-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.meta-pill{font-size:12px;padding:6px 9px;background:var(--blue-mist);border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.day-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:white}.day-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.day-title{font-weight:800}.assignment{display:grid;grid-template-columns:1fr 1fr;gap:10px}.assign-box{background:var(--blue-mist);border:1px solid #dbe8f3;border-radius:13px;padding:12px}.assign-label{font-size:12px;color:var(--muted);margin-bottom:5px}.assign-value{font-weight:700}.day-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.plan-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px}.choice-card{border:2px solid var(--line);background:white;border-radius:16px;padding:18px;text-align:start}.choice-card:hover,.choice-card.selected{border-color:var(--blue);background:var(--blue-mist)}.choice-card h3{margin:0 0 7px}.choice-card p{margin:0;color:var(--muted);font-size:13px}
.plan-grid{display:grid;gap:12px;margin-top:16px}.plan-row{display:grid;grid-template-columns:130px 1fr 1fr;gap:12px;align-items:stretch}.plan-day{display:flex;align-items:center;font-weight:800}.picker-box{border:1px solid var(--line);border-radius:14px;background:white;padding:13px}.picker-box .label{font-size:12px;color:var(--muted);margin-bottom:6px}.picker-box button{width:100%;border:0;background:var(--blue-mist);color:var(--blue);padding:10px;border-radius:10px;text-align:start;font-weight:700}
.progressbar{height:9px;background:#edf2f7;border-radius:999px;overflow:hidden}.progressbar > span{display:block;height:100%;background:var(--blue);border-radius:999px}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,25,40,.5);display:grid;place-items:center;padding:18px;z-index:100}.modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:white;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.22);padding:22px}.modal-lg{width:min(980px,100%)}.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}.modal-head h2{margin:0}.close{width:36px;height:36px;border:0;border-radius:50%;background:#eef3f8;font-size:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px}.field label{font-size:12px;color:var(--muted);font-weight:700}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:white;color:var(--ink)}.field textarea{min-height:84px;resize:vertical}.days{display:flex;gap:8px;flex-wrap:wrap}.day-toggle{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 11px}.day-toggle.active{background:var(--blue);color:white;border-color:var(--blue)}
.score-grid{display:grid;gap:14px}.score-line{display:grid;grid-template-columns:180px 1fr 58px;gap:14px;align-items:center}.score-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.score-btn{border:1px solid var(--line);background:white;border-radius:10px;padding:10px;font-weight:800}.score-btn.selected{background:var(--blue);color:white;border-color:var(--blue)}.score-total{text-align:center;font-weight:900;font-size:20px}.bonus-note{padding:11px 13px;border-radius:12px;background:#fff7e7;color:#7f5a14;font-size:13px}
.mushaf-toolbar{display:grid;grid-template-columns:1fr 130px 130px;gap:10px;margin-bottom:14px}.mushaf-sheet{background:#fffdf7;border:1px solid #e8deca;border-radius:18px;padding:22px;min-height:360px}.mushaf-info{text-align:center;color:#7e725e;font-size:13px;margin-bottom:16px}.ayah-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.ayah{border:1px solid #e4d9c2;background:#fffefb;border-radius:12px;min-height:58px;padding:9px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#6e6049}.ayah.selected{background:#dcecf9;border-color:#8bb7dc;color:#15466e}.range-summary{margin-top:14px;padding:13px;border:1px solid #cfe0ef;background:#f4f9fd;border-radius:13px}
.share-card{width:min(660px,100%);margin:auto;background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden}.share-top{background:var(--blue);color:white;padding:22px;text-align:center}.share-top h2{margin:0 0 5px}.share-body{padding:18px}.share-table{width:100%;border-collapse:collapse}.share-table th,.share-table td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:start}.share-table th{font-size:12px;color:var(--muted)}.share-footer{text-align:center;color:var(--muted);font-size:12px;padding:12px}
.empty{padding:30px;text-align:center;color:var(--muted)}
.mobile-nav{display:none}
.notice{border:1px solid #cfe0ef;background:#f4f9fd;color:#345a77;padding:12px 14px;border-radius:13px;font-size:13px}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{padding:0 16px}.content{padding:20px 16px 92px}.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--line);z-index:50;padding-bottom:max(6px,env(safe-area-inset-bottom))}.mobile-nav button{border:0;background:white;padding:10px 4px 7px;font-size:10px;color:var(--muted);display:grid;gap:3px;place-items:center}.mobile-nav button.active{color:var(--blue);font-weight:800}.mobile-nav span{font-size:18px}.plan-row{grid-template-columns:90px 1fr 1fr}.page-head h1{font-size:25px}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.page-head{display:grid}.form-grid{grid-template-columns:1fr}.plan-choice{grid-template-columns:1fr}.plan-row{grid-template-columns:1fr}.plan-day{padding-top:8px}.assignment{grid-template-columns:1fr}.score-line{grid-template-columns:1fr}.mushaf-toolbar{grid-template-columns:1fr 1fr}.mushaf-toolbar .surah{grid-column:1 / -1}.ayah-grid{grid-template-columns:repeat(4,1fr)}.top-title{display:none}.chip.role-chip{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card{padding:16px}}
@media print{body{background:white}.app-shell,.modal-backdrop{display:none!important}.print-only{display:block!important}.share-card{border:0;box-shadow:none;width:100%}}
.print-only{display:none}
html[dir="rtl"] .nav button,html[dir="rtl"] .picker-box button,html[dir="rtl"] .table th,html[dir="rtl"] .table td,html[dir="rtl"] .share-table th,html[dir="rtl"] .share-table td{text-align:right}