:root{
  --bg:#0B0A08;
  --surface:#14110C;
  --surface-2:#1B1710;
  --gold:#D4AF37;
  --gold-glow:#F2D680;
  --brass:#AE8A3C;
  --line:rgba(201,162,39,.28);
  --line-soft:rgba(201,162,39,.15);
  --ivory:#F3EAD8;
  --muted:#9C8E72;
  --r:12px;
  --shadow:0 18px 40px -24px rgba(0,0,0,.9);
  /* مقاسات عناصر التحكم — أكبر وأسهل للمس */
  --ctl-h:52px;
  --ctl-h-sm:46px;
  --ctl-h-big:58px;
  --ctl-pad:20px;
  --ctl-font:15.5px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ivory);
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:'Aref Ruqaa',serif;letter-spacing:0}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;direction:ltr;display:inline-block}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lattice{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;
  background-image:
    repeating-linear-gradient(45deg,transparent 0 17px,#D4AF37 17px 18px,transparent 18px 35px),
    repeating-linear-gradient(-45deg,transparent 0 17px,#D4AF37 17px 18px,transparent 18px 35px);
}

/* ---------- shell ---------- */
.shell{position:relative;z-index:1;display:flex;min-height:100vh}
.sidenav{
  flex:0 0 104px;width:104px;height:100vh;position:sticky;top:0;
  display:flex;flex-direction:column;align-items:center;
  border-inline-end:1px solid var(--line);
  background:linear-gradient(180deg,#100D09,#0B0A08);
}
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 0 12px}
.brand-mark{font-family:'Aref Ruqaa',serif;font-size:22px;color:var(--gold);line-height:1.1}
.brand-sub{font-size:9px;letter-spacing:.22em;color:var(--brass)}
.nav-scroll{display:flex;flex-direction:column;gap:2px;width:100%;padding:0 6px 16px;overflow-y:auto;flex:1}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 2px;border:0;background:transparent;color:var(--muted);
  border-radius:10px;cursor:pointer;user-select:none;transition:color .15s,background .15s;
  min-height:52px;
}
.nav-item svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.nav-item .nav-label{font-size:10px;line-height:1.2;text-align:center}
.nav-item:hover{color:var(--gold-glow);background:rgba(212,175,55,.07)}
.nav-item.active{color:var(--gold);background:rgba(212,175,55,.12);box-shadow:inset 0 0 0 1px var(--line-soft)}
.nav-item:focus-visible{outline:2px solid var(--gold-glow);outline-offset:2px}

.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 18px;background:rgba(11,10,8,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar h2{font-size:19px;color:var(--gold-glow)}
.topbar-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  font-size:11px;color:var(--muted);border:1px solid var(--line-soft);
  border-radius:999px;padding:4px 11px;background:#0E0C08;white-space:nowrap;max-width:46vw;
  overflow:hidden;text-overflow:ellipsis;
}
.pill.good{color:var(--gold-glow);border-color:var(--line)}
.pill.bad{color:#E0A08A;border-color:rgba(224,160,138,.35)}

.main{flex:1;padding:18px 16px 90px;max-width:1280px;width:100%;margin:0 auto}
@media(min-width:900px){
  .main{padding:26px clamp(18px,3.4vw,52px) 64px}
  .topbar{padding:14px 32px}
}

/* ---------- views ---------- */
.view{display:none}
.view.active{display:block;animation:fade .3s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.active{animation:none}}
.view-head{margin-bottom:20px}
.view-head h1{font-size:30px;color:var(--gold-glow);line-height:1.35}
.view-head p{margin:6px 0 0;color:var(--muted);font-size:14px;max-width:70ch}

/* ---------- layout ---------- */
.grid-2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:1000px){.grid-2{grid-template-columns:1.08fr .92fr;gap:22px}}
.grid-3{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr 1fr}}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:26px}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg,var(--surface),#110E09);
  border:1px solid var(--line-soft);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);
}
@media(min-width:640px){.card{padding:20px}}
.h3{font-size:19px;color:var(--gold-glow);margin-bottom:8px}
.h4{font-size:16px;color:var(--gold-glow);margin:14px 0 6px}
.rule{border:0;border-top:1px solid var(--line-soft);margin:16px 0}
.hint{color:var(--muted);font-size:13px;margin:6px 0 0}
.tiny{font-size:12px;line-height:1.6}
.lbl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;letter-spacing:.01em}

/* ---------- form ---------- */
textarea,input[type=text],input[type=file],input:not([type]),select{
  width:100%;background:#0E0C08;color:var(--ivory);
  border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;font-size:16px;
  transition:border-color .15s,box-shadow .15s;
}
textarea{resize:vertical;min-height:120px;line-height:1.8}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.14)}
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239C8E72' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:left 12px center;
  padding-left:38px;
}
input[type=file]{padding:10px 12px;font-size:13px}
.field{display:block}
.check,.consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.6}
.check input,.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold)}
.consent{background:#0E0C08;border:1px solid var(--line-soft);border-radius:10px;padding:12px;margin-bottom:14px}

input[type=range]{
  -webkit-appearance:none;appearance:none;height:34px;background:transparent;flex:1;min-width:120px;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brass),var(--gold))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brass),var(--gold))}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-8px;
  background:radial-gradient(circle at 35% 30%,#FFF3C9,var(--gold));border:1px solid #6E541C;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--gold);border:1px solid #6E541C;cursor:pointer;
}
.bpm-row{display:flex;align-items:center;gap:12px}
.bpm-row .lbl{margin:0;flex:0 0 auto}
.bpm-row output{min-width:44px;text-align:center;color:var(--gold-glow);font-size:15px}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit;font-size:var(--ctl-font);font-weight:500;min-height:var(--ctl-h);
  padding:0 var(--ctl-pad);border-radius:12px;
  border:1.5px solid var(--line);background:#171309;color:var(--ivory);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,color .15s,border-color .15s,transform .08s,box-shadow .15s;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  text-decoration:none;line-height:1.2;letter-spacing:.01em;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--gold-glow);outline-offset:3px}
.btn.gold{
  background:linear-gradient(180deg,var(--gold-glow),var(--gold));color:#1A1408;
  border-color:#E6C766;font-weight:700;
  box-shadow:0 10px 22px -14px rgba(212,175,55,.9);
}
.btn.gold:hover{background:linear-gradient(180deg,#FFEDAE,#E2BE48);color:#1A1408}
.btn.ghost{border-color:rgba(201,162,39,.42);background:#14110B}
.btn.ghost:hover{background:rgba(212,175,55,.14);border-color:var(--gold);color:var(--gold-glow)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.sm{min-height:var(--ctl-h-sm);padding:0 16px;font-size:13.5px;border-radius:10px}
.btn.big{min-height:var(--ctl-h-big);font-size:18px;width:100%;border-radius:14px;font-weight:700}
.status{font-size:13px;color:var(--muted);min-height:18px;margin:10px 0 0}
.status.err{color:#E7A796}
.status.ok{color:var(--gold-glow)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid rgba(201,162,39,.32);background:#14110B;color:var(--ivory);
  border-radius:999px;padding:10px 16px;font-size:14px;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;gap:6px;user-select:none;transition:all .15s;
}
.chip:hover{border-color:var(--line);color:var(--ivory)}
.chip.on{background:rgba(212,175,55,.15);border-color:var(--gold);color:var(--gold-glow)}
.chip:focus-visible{outline:2px solid var(--gold-glow);outline-offset:2px}

/* ---------- create ---------- */
.gen-card{position:sticky;top:72px}
@media(max-width:999px){.gen-card{position:static}}
.maqam-mini svg{width:100%;height:auto;display:block}
.result{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
.player{
  width:100%;height:46px;border-radius:10px;background:#0E0C08;
  border:1px solid var(--line-soft);color-scheme:dark;
}
.wave{width:100%;height:84px;display:block;background:#0A0906;border:1px solid var(--line-soft);border-radius:10px;margin-top:12px}
.timer{color:var(--gold-glow);font-size:14px}

/* ---------- notices ---------- */
.notice{
  border:1px solid var(--line);border-radius:var(--r);background:rgba(212,175,55,.06);
  color:var(--ivory);font-size:13.5px;padding:14px 16px;margin-bottom:18px;line-height:1.75;
}
.notice b{color:var(--gold-glow)}
.banner{
  border:1px solid var(--line);background:rgba(212,175,55,.08);border-radius:var(--r);
  padding:12px 14px;margin-bottom:16px;font-size:13.5px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
}

/* ---------- maqam ---------- */
.maqam-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.maqam-card{
  background:linear-gradient(180deg,var(--surface),#100D08);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:12px;text-align:start;
  cursor:pointer;color:var(--ivory);transition:border-color .15s,transform .15s,background .15s;
  user-select:none;display:flex;flex-direction:column;gap:6px;min-height:96px;
}
.maqam-card:hover{border-color:var(--line);transform:translateY(-2px)}
.maqam-card.on{border-color:var(--gold);background:rgba(212,175,55,.09)}
.maqam-card .nm{font-family:'Aref Ruqaa',serif;font-size:19px;color:var(--gold-glow)}
.maqam-card .jn{font-size:11.5px;color:var(--muted);line-height:1.5}
.maqam-card .ct{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--brass);direction:ltr}
.cents-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cents-row span{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;direction:ltr;
  border:1px solid var(--line-soft);border-radius:6px;padding:3px 7px;color:var(--muted);background:#0E0C08;
}
.cents-row span.hi{color:var(--gold-glow);border-color:var(--line)}
.tag{
  font-size:11px;border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;color:var(--muted);white-space:nowrap;
}

/* ---------- notes editor ---------- */
.notes-bar{display:flex;gap:6px;overflow-x:auto;padding:10px 4px;min-height:74px;border:1px dashed var(--line-soft);border-radius:10px;background:#0A0906}
.note-card{
  flex:0 0 auto;min-width:62px;border:1px solid var(--line-soft);background:#100D08;border-radius:9px;
  color:var(--ivory);padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;font-size:11px;user-select:none;transition:all .12s;
}
.note-card b{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--gold-glow);direction:ltr}
.note-card em{font-style:normal;color:var(--muted);font-size:10.5px;direction:ltr;font-family:'IBM Plex Mono',monospace}
.note-card.on{border-color:var(--gold);background:rgba(212,175,55,.14)}

/* ---------- rhythm pattern ---------- */
.pattern{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;margin-top:14px}
.pattern i{
  display:block;height:38px;border-radius:5px;border:1px solid var(--line-soft);background:#0E0C08;
  font-style:normal;font-size:10px;color:#4a4030;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
}
.pattern i.d{background:rgba(212,175,55,.28);border-color:var(--line);color:var(--gold-glow)}
.pattern i.t{background:rgba(212,175,55,.12);color:var(--muted)}
.pattern i.beat{border-color:var(--line)}

/* ---------- mixer ---------- */
.mixer{display:flex;flex-direction:column;gap:10px}
.mix-row{display:grid;grid-template-columns:78px 1fr 44px;gap:10px;align-items:center}
.mix-row span{font-size:13px;color:var(--ivory)}
.mix-row output{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);text-align:center}
.mix-row.muted span{color:#5C5442;text-decoration:line-through}
.meter{height:8px;border-radius:6px;background:#0E0C08;border:1px solid var(--line-soft);overflow:hidden;margin-top:16px}
.meter i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--brass),var(--gold-glow));transition:width .12s linear}
.export-meter{margin-top:14px}
.export-meter i{transition:width .18s ease-out}

/* ---------- instrument groups ---------- */
.igroup{margin-bottom:14px}
.igroup h4{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--brass);letter-spacing:.06em;margin-bottom:8px}

/* ---------- library ---------- */
.cards-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.cards-grid{grid-template-columns:1fr 1fr}}
.lib-card{border:1px solid var(--line-soft);border-radius:var(--r);background:linear-gradient(180deg,var(--surface),#100D08);padding:16px}
.lib-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.lib-top h4{font-family:'Aref Ruqaa',serif;font-size:18px;color:var(--gold-glow);margin:0}
.lib-card .meta{font-size:12px;color:var(--muted);margin:4px 0 10px}
.empty{border:1px dashed var(--line-soft);border-radius:var(--r);padding:28px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- lists ---------- */
.fmt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.fmt-list li{padding-inline-start:24px;position:relative;line-height:1.6;color:var(--muted)}
.fmt-list li::before{content:'';position:absolute;inset-inline-start:0;top:8px;width:12px;height:12px;border-radius:3px}
.fmt-list li.ok::before{background:linear-gradient(180deg,var(--gold-glow),var(--gold))}
.fmt-list li.no::before{border:1px solid #6b5f45}
.fmt-list li b{color:var(--ivory)}
.fmt-list li.no b{color:#B9A98A}
.steps{margin:0;padding-inline-start:18px;font-size:13.5px;color:var(--muted);line-height:1.9}

/* ---------- AI output ---------- */
.ai-out{
  margin-top:12px;background:#0A0906;border:1px solid var(--line-soft);border-radius:10px;
  padding:12px;font-size:14px;line-height:1.85;color:var(--ivory);white-space:pre-wrap;word-break:break-word;
  max-height:320px;overflow:auto;
}

/* ---------- chat ---------- */
.chat-card{display:flex;flex-direction:column;gap:12px;min-height:60vh}
.chat-log{display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:52vh;padding:4px}
.msg{max-width:88%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.msg.me{align-self:flex-start;background:rgba(212,175,55,.12);border:1px solid var(--line-soft);color:var(--ivory)}
.msg.ai{align-self:flex-end;background:#0E0C08;border:1px solid var(--line-soft);color:var(--ivory)}
.msg.sys{align-self:center;background:transparent;border:1px dashed var(--line-soft);color:var(--muted);font-size:12.5px;text-align:center}
.chat-input textarea{min-height:74px}

/* ---------- mobile nav ---------- */
@media(max-width:899px){
  .shell{display:block}
  .sidenav{
    position:fixed;inset-block-end:0;inset-inline:0;width:auto;height:auto;flex:1 1 auto;
    flex-direction:row;align-items:stretch;border-inline-end:0;border-block-start:1px solid var(--line);
    background:rgba(11,10,8,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:60;
    padding-bottom:0;
  }
  .brand{display:none}
  .nav-scroll{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:6px 8px;gap:2px;scrollbar-width:none}
  .nav-scroll::-webkit-scrollbar{display:none}
  .nav-item{flex:0 0 auto;width:76px;min-height:60px;padding:8px 2px;gap:4px}
  .nav-item .nav-label{font-size:10.5px}
  .topbar{padding:10px 14px}
  .topbar h2{font-size:16px}
  .pill{font-size:10px;padding:3px 8px}
  .view-head h1{font-size:24px}
}
/* ---------- دليل الاستوديو ---------- */
.guide-wrap{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.guide-wrap{grid-template-columns:296px 1fr;align-items:start}}
.guide-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.guide-tabs::-webkit-scrollbar{display:none}
@media(min-width:900px){.guide-tabs{flex-direction:column;overflow:visible;padding-bottom:0}}
.guide-tab{
  flex:0 0 auto;min-width:200px;text-align:start;cursor:pointer;color:var(--ivory);
  background:linear-gradient(180deg,var(--surface),#100D08);
  border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;
  display:flex;flex-direction:column;gap:2px;min-height:58px;
  transition:border-color .15s,background .15s;user-select:none;
}
.guide-tab b{font-size:14.5px;font-weight:600;color:var(--ivory);line-height:1.4}
.guide-tab em{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.5}
.guide-tab:hover{border-color:var(--line)}
.guide-tab.on{border-color:var(--gold);background:rgba(212,175,55,.1)}
.guide-tab.on b{color:var(--gold-glow)}
.guide-tab:focus-visible{outline:2px solid var(--gold-glow);outline-offset:2px}
.guide-panel{min-height:250px}
.guide-panel:focus{outline:none}
.guide-steps{list-style:none;counter-reset:gs;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.guide-steps li{position:relative;padding-inline-start:36px;counter-increment:gs}
.guide-steps li::before{
  content:counter(gs);position:absolute;inset-inline-start:0;top:1px;
  width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:12px;direction:ltr;
  color:var(--gold-glow);border:1px solid var(--line);background:rgba(212,175,55,.1);
}
.guide-steps li b{display:block;font-size:14.5px;color:var(--ivory);margin-bottom:3px;line-height:1.5}
.guide-steps li p{margin:0;font-size:13.5px;line-height:1.8;color:var(--muted)}
.plan-list{display:flex;flex-direction:column;gap:8px}
.plan-item{
  display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;
  border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;background:#0E0C08;
}
.plan-item input{width:20px;height:20px;accent-color:var(--gold);margin:0;cursor:pointer}
.plan-item label{font-size:13.5px;color:var(--ivory);cursor:pointer;line-height:1.6}
.plan-item.done{border-color:var(--line)}
.plan-item.done label{color:var(--muted);text-decoration:line-through}
.plan-item .btn{min-height:44px;padding:0 16px;font-size:13px;border-radius:10px}
@media(max-width:430px){
  .plan-item{grid-template-columns:22px 1fr;row-gap:8px}
  .plan-item .btn{grid-column:1 / -1;justify-self:stretch}
}

/* ---------- الحفظ التلقائي ---------- */
.autosave{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--brass);white-space:nowrap;
  transition:color .2s ease-out;
}
.autosave::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.55;flex:0 0 auto;
  transition:opacity .2s ease-out;
}
.autosave.on{color:var(--gold-glow)}
.autosave.on::before{opacity:1}
.pill.autosave{font-size:10.5px;padding:3px 9px}
@media(max-width:430px){
  .pill.autosave{font-size:10px;padding:3px 8px}
}

/* ---------- تقليل الحركة ---------- */
body.reduce-motion .lattice{display:none}
body.reduce-motion .view.active{animation:none}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;
}
.view-head h1:focus{outline:none}

/* ---------- متطلبات المشروع ---------- */
.brief-summary{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:16px}
@media(min-width:700px){.brief-summary{grid-template-columns:repeat(4,1fr)}}
.bsum{
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),#100D08);
  padding:12px 14px;display:flex;flex-direction:column;gap:2px;
}
.bsum b{font-family:'IBM Plex Mono',monospace;font-size:22px;color:var(--gold-glow);direction:ltr;line-height:1.2}
.bsum span{font-size:12px;color:var(--muted);line-height:1.5}
.bsum.partial b{color:#E4C27A}
.bsum.no b{color:#C9958A}
.brief-list{display:flex;flex-direction:column;gap:12px}
.brief-card{
  border:1px solid var(--line-soft);border-inline-start:3px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,var(--surface),#100D08);
  padding:14px 16px;
}
.brief-card.ok{border-inline-start-color:var(--gold)}
.brief-card.partial{border-inline-start-color:#8A7132}
.brief-card.no{border-inline-start-color:#6B4A42}
.brief-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brief-num{
  font-size:12px;color:var(--brass);border:1px solid var(--line-soft);
  border-radius:6px;padding:1px 7px;direction:ltr;
}
.brief-title{font-size:17px;color:var(--gold-glow);flex:1 1 auto;min-width:0;line-height:1.5}
.brief-state{
  font-size:11px;border-radius:999px;padding:3px 10px;
  border:1px solid var(--line-soft);color:var(--muted);white-space:nowrap;
}
.brief-state.ok{color:var(--gold-glow);border-color:var(--line);background:rgba(212,175,55,.12)}
.brief-state.partial{color:#E4C27A;border-color:rgba(228,194,122,.35);background:rgba(228,194,122,.07)}
.brief-state.no{color:#C9958A;border-color:rgba(201,149,138,.35);background:rgba(201,149,138,.07)}
.brief-ask{margin:10px 0 6px;font-size:13.5px;color:var(--ivory);line-height:1.8}
.brief-ask b{color:var(--brass);font-weight:600}
.brief-note{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.85}
@media(max-width:430px){
  .brief-card{padding:12px 13px}
  .brief-title{font-size:16px}
}

/* ---------- إمكانية الوصول ---------- */
.a11y-list{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:860px){.a11y-list{grid-template-columns:1fr 1fr}}
.a11y-card{
  border:1px solid var(--line-soft);border-inline-start:3px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,var(--surface),#100D08);
  padding:14px 16px;display:flex;flex-direction:column;gap:9px;
}
.a11y-card.full{border-inline-start-color:var(--gold)}
.a11y-card.partial{border-inline-start-color:#8A7132}
.a11y-card.none{border-inline-start-color:#6B4A42}
.a11y-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.a11y-name{display:flex;align-items:center;gap:9px;min-width:0}
.a11y-ico{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-soft);background:rgba(212,175,55,.08);color:var(--gold-glow);
}
.a11y-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.a11y-name b{display:block;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;font-weight:600;color:var(--ivory);line-height:1.4}
.a11y-name em{display:block;font-style:normal;font-size:10.5px;color:var(--brass);direction:ltr;text-align:start;letter-spacing:.04em}
.a11y-state{
  font-size:11px;border-radius:999px;padding:3px 10px;white-space:nowrap;
  border:1px solid var(--line-soft);color:var(--muted);background:#0E0C08;
}
.a11y-state.full{color:var(--gold-glow);border-color:var(--line);background:rgba(212,175,55,.12)}
.a11y-state.partial{color:#E4C27A;border-color:rgba(228,194,122,.35);background:rgba(228,194,122,.07)}
.a11y-state.none{color:#C9958A;border-color:rgba(201,149,138,.35);background:rgba(201,149,138,.07)}
.a11y-card p{margin:0;font-size:13px;line-height:1.85;color:var(--muted)}
.a11y-card p b{color:var(--brass);font-weight:600}
.a11y-card .btn{align-self:flex-start;margin-top:2px}
.contrast-table{display:flex;flex-direction:column;gap:6px}
.contrast-row{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  font-size:12px;border:1px solid var(--line-soft);border-radius:8px;padding:6px 9px;background:#0A0906;color:var(--ivory);
}
.contrast-row .sw{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid rgba(255,255,255,.22);margin-inline-end:4px;vertical-align:-1px}
.contrast-row .ratio{font-family:'IBM Plex Mono',monospace;direction:ltr;color:var(--gold-glow);font-size:11.5px}
.contrast-row .ok{color:var(--gold-glow);font-size:11px}
.contrast-row .fail{color:#E7A796;font-size:11px}
@media(max-width:430px){
  .contrast-row{grid-template-columns:1fr auto;row-gap:2px}
  .contrast-row .ok,.contrast-row .fail{grid-column:1 / -1;justify-self:start}
}
/* وضع التمييز دون الاعتماد على اللون وحده */
body.differentiate .chip.on::before{content:'✓';font-size:11px;color:var(--gold-glow)}
body.differentiate .maqam-card.on .nm::before{content:'✓ '}
body.differentiate .note-card.on b::before{content:'✓ '}
body.differentiate .guide-tab.on b::after{content:' ✓'}
body.differentiate .plan-item.done label::before{content:'✓ ';color:var(--gold-glow)}
body.differentiate .a11y-state::before{content:'● ';font-size:8px;vertical-align:1px}

@media print{
  .sidenav,.topbar,.btn,.lattice{display:none !important}
  body{background:#fff;color:#000}
}