/* صفحة «الستايلات» — بطاقات اختيار شكل القائمة الجانبية (styles-page.js).
   كل الأسماء بالبادئة stp- كي لا تتصادم مع app.css. الألوان من رموز app.css
   فتتبع الوضع الداكن؛ معاينتا الشريطين والهالة داكنتان في الوضعين لأن
   الستايلين نفسيهما داكنان. */

.stp{max-width:1180px}
.stp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}

/* ---------- البطاقة ---------- */
.stp-card{
  position:relative;display:flex;flex-direction:column;cursor:pointer;outline:none;
  background:var(--surface);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .2s,box-shadow .25s;
}
.stp-card:hover{transform:translateY(-3px);border-color:var(--primary-light);box-shadow:var(--shadow-lg)}
.stp-card:focus-visible{outline:3px solid var(--primary-light);outline-offset:3px}
.stp-card.on{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(124,77,189,.16),var(--shadow-lg);
}
.stp-card[aria-disabled="true"]{cursor:not-allowed;opacity:.62;filter:saturate(.55)}
.stp-card[aria-disabled="true"]:hover{transform:none;border-color:var(--border);box-shadow:var(--shadow)}

.stp-frame{padding:14px 14px 0;background:
  radial-gradient(120% 90% at 100% 0%,rgba(169,127,214,.14),transparent 60%),var(--surface-2)}
.stp-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.stp-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stp-title h2{margin:0;font-family:var(--fdisplay);font-size:18px;font-weight:800;color:var(--text)}
.stp-body p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}

.stp-badge{
  display:none;align-items:center;gap:5px;padding:4px 10px 4px 11px;border-radius:999px;
  background:var(--good-bg);color:var(--good);border:1px solid var(--good-line);
  font-size:12px;font-weight:800;white-space:nowrap;
}
.stp-badge svg{width:13px;height:13px}
.stp-card.on .stp-badge{display:inline-flex}
.stp-card.pop .stp-badge{animation:stp-pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes stp-pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}

.stp-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center}
.stp-act{
  display:inline-flex;align-items:center;justify-content:center;min-width:96px;padding:9px 18px;border-radius:12px;
  background:var(--grad);color:#fff;font-size:13px;font-weight:800;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.stp-card:hover .stp-act{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.stp-card:active .stp-act{transform:scale(.97)}
.stp-cur{display:none;color:var(--primary);font-size:13px;font-weight:700}
.stp-card.on .stp-act{display:none}
.stp-card.on .stp-cur{display:inline}
.stp-card[aria-disabled="true"] .stp-act{background:var(--border);color:var(--muted);box-shadow:none}

.stp-note{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px;border-radius:14px;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);font-size:13.5px;font-weight:600;line-height:1.6;
}
.stp-note svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.stp-live{min-height:20px;margin:14px 0 0;color:var(--muted);font-size:13px}
.stp-live.err{color:var(--crit);font-weight:700}

/* ---------- إطار المعاينة المشترك ---------- */
.stp-pv{
  position:relative;display:flex;height:170px;border-radius:14px 14px 0 0;overflow:hidden;
  background:var(--bg);box-shadow:0 0 0 1px var(--border-soft),0 -6px 22px -14px rgba(60,20,90,.35);
}
/* محتوى وهمي على يسار القائمة — يتبع ألوان اللوحة */
.stp-pv-main{flex:1;min-width:0;padding:14px 12px;display:flex;flex-direction:column;gap:9px}
.stp-pv-main i{display:block;border-radius:6px;background:var(--surface);box-shadow:0 0 0 1px var(--border-soft)}
.stp-sk-h{height:12px;width:58%}
.stp-sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.stp-sk-row i{height:30px}
.stp-sk-b{flex:1}
.stp-pv-generic .stp-gen{width:30%;background:var(--surface-2);border-inline-end:1px solid var(--border)}

/* ---------- الشريطان: شريط أيقونات ضيّق + لوحة القسم ---------- */
.stp-rail>*,.stp-panel>*,.stp-halo>*,.stp-classic>*{flex-shrink:0}
.stp-rail{
  width:34px;flex:0 0 34px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0;overflow:hidden;
  background:linear-gradient(180deg,#1f1238 0%,#1b1030 45%,#160c28 100%);
}
.stp-logo{width:18px;height:18px;border-radius:30%;margin-bottom:2px;
  background:radial-gradient(120% 120% at 30% 15%,#fff 0%,#f1e8fc 55%,#dcc8f5 100%);
  box-shadow:0 5px 12px -5px rgba(169,127,214,.9)}
.stp-rb{position:relative;width:17px;height:17px;border-radius:50%;
  background:rgba(255,255,255,.06);display:grid;place-items:center;
  transition:border-radius .35s cubic-bezier(.3,1.25,.5,1),background-color .25s}
.stp-rb::after{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
.stp-rb.on{border-radius:32%;background:var(--c);box-shadow:0 5px 12px -5px var(--c)}
.stp-rb.on::after{background:#1b1030;opacity:.75}
/* حبّة القسم المفتوح على حافة الشريط */
.stp-rb.on::before{content:"";position:absolute;inset-inline-start:-8px;top:50%;width:3px;height:14px;margin-top:-7px;
  border-radius:3px;background:var(--c);box-shadow:0 0 8px var(--c)}
.stp-av{margin-top:auto;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(140deg,#d3b5f3,#a97fd6 40%,#7c4dbd);box-shadow:0 0 0 2px #1b1030,0 0 0 3px rgba(169,127,214,.55)}
.stp-panel{
  width:86px;flex:0 0 86px;display:flex;flex-direction:column;gap:6px;padding:11px 8px;
  background:#22163a;box-shadow:inset 1px 0 0 rgba(255,255,255,.05);
}
.stp-panel i{display:block;border-radius:4px}
.stp-pt{height:8px;width:70%;background:rgba(255,255,255,.55);margin-bottom:4px}
.stp-ph{height:4px;width:38%;background:rgba(255,255,255,.16);margin-top:3px}
.stp-pl{height:13px;background:rgba(255,255,255,.045);position:relative}
.stp-pl::after{content:"";position:absolute;inset-inline-start:6px;top:4.5px;height:4px;width:55%;border-radius:2px;background:rgba(255,255,255,.22)}
.stp-pl.s::after{width:38%}
.stp-pl.on{background:color-mix(in srgb,var(--c) 24%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.stp-pl.on::after{background:var(--c);width:62%}

/* ---------- الهالة: زجاج داكن بمربّعات مضيئة وخطّ عمودي ملوّن ---------- */
.stp-halo{
  position:relative;isolation:isolate;overflow:hidden;width:112px;flex:0 0 112px;
  display:flex;flex-direction:column;gap:6px;padding:10px 9px;
  background:radial-gradient(120% 60% at 100% 0%,rgba(124,77,189,.22),transparent 60%),
             linear-gradient(180deg,#140c24 0%,#110a1f 45%,#0d0818 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.07);
}
.stp-aur{position:absolute;z-index:-1;top:-18px;right:-10px;width:90px;height:54px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,92,246,.75),transparent),
             radial-gradient(closest-side at 20% 60%,rgba(236,72,153,.45),transparent);
  filter:blur(12px);opacity:.75;transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.stp-card:hover .stp-aur{transform:translate(-22px,8px) scale(1.15)}
.stp-hb{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.stp-hb b{width:17px;height:17px;border-radius:6px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 5px 12px -5px rgba(139,92,246,.9)}
.stp-hb i{height:6px;width:52%;border-radius:3px;background:linear-gradient(90deg,#c9a8f0,#fff)}
.stp-hr{display:flex;align-items:center;gap:6px;padding:2px;border-radius:7px}
.stp-hr b{width:13px;height:13px;flex:0 0 13px;border-radius:4px;
  background:color-mix(in srgb,var(--c) 26%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 9px -2px var(--c)}
.stp-hr i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.24)}
.stp-hr.open{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.stp-hr.open b{background:var(--c);box-shadow:0 0 12px 1px var(--c)}
.stp-hr.open i{background:rgba(255,255,255,.75)}
.stp-hsub{position:relative;display:flex;flex-direction:column;gap:5px;padding-inline-start:16px;margin:-2px 0 1px}
.stp-hsub::before{content:"";position:absolute;inset-inline-start:7px;top:0;bottom:2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 45%,transparent) 60%,transparent);
  box-shadow:0 0 6px var(--c)}
.stp-hsub i{display:block;height:4px;width:60%;border-radius:2px;background:rgba(255,255,255,.16)}
.stp-hsub i.on{height:9px;width:78%;border-radius:4px;background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent)}

/* ---------- الكلاسيكي: القائمة البسيطة الحالية ---------- */
.stp-classic{
  width:100px;flex:0 0 100px;display:flex;flex-direction:column;gap:4px;padding:10px 8px;overflow:hidden;
  background:var(--nav-bg);border-inline-end:1px solid var(--nav-border);
}
.stp-cb{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.stp-cb b{width:16px;height:16px;border-radius:50%;background:var(--grad)}
.stp-cb i{height:6px;width:50%;border-radius:3px;background:var(--nav-text);opacity:.55}
.stp-cl{display:block;height:3px;width:34%;border-radius:2px;background:var(--nav-text-dim);opacity:.6;margin:4px 0 1px}
.stp-cr{display:flex;align-items:center;gap:6px;padding:3px 5px;border-radius:7px}
.stp-cr b{width:9px;height:9px;flex:0 0 9px;border-radius:3px;border:1.6px solid var(--c)}
.stp-cr i{display:block;height:4px;border-radius:2px;background:var(--nav-text);opacity:.32}
.stp-cr.on{background:var(--nav-active-bg)}
.stp-cr.on b{border-color:#fff}
.stp-cr.on i{background:#fff;opacity:.9}

@media (max-width:560px){
  .stp-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .stp-card,.stp-act,.stp-rb,.stp-aur{transition:none}
  .stp-card:hover{transform:none}
  .stp-card:hover .stp-aur{transform:none}
  .stp-card.pop .stp-badge{animation:none}
}