/* ===========================================================================
   استوديو المنتج (index.html) — ترتيب الصفحة
   كله تحت #studio عشان يغلب ستايل الصفحة القديم و theme-queue من غير ما
   نمسح منهم سطر. المنطق نفسه (IDs والأكورديون) زي ما هو.
   =========================================================================== */

#studio{ font-size:14px; }
#studio svg{ flex-shrink:0; }

/* ---- راس الصفحة ---- */
#studio .st-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:4px 0 18px; }
#studio .st-head h1{ font-size:22px; font-weight:800; margin:0; color:var(--text); }
#studio .st-head p{ font-size:13px; color:var(--text-dim); margin:4px 0 0; line-height:1.6; }
#studio .st-head-acts{ display:flex; gap:8px; }
#studio .st-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:inherit; font-size:13px;
  font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .12s, background .12s; }
#studio .st-btn svg{ width:15px; height:15px; }
#studio .st-btn:hover{ border-color:var(--green-deep); }
#studio .st-btn.pri{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
#studio .st-btn.pri:hover{ background:#26594B; }

/* ---- التقسيمة: الخطوات + كارت التوليد ---- */
#studio .st-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
#studio .st-side{ position:sticky; top:20px; }
#studio .st-group{ font-size:12.5px; font-weight:700; color:var(--text-dim); margin:18px 2px 8px; }
#studio .st-group:first-child{ margin-top:0; }
#studio .st-group span{ font-weight:500; opacity:.8; margin-right:6px; }

/* ---- الخطوات ---- */
#studio .panel{ border-radius:12px; margin-bottom:10px; box-shadow:none; }
#studio .step-panel{ padding:0; }
#studio .step-panel > h2{ display:flex; align-items:center; justify-content:flex-start; gap:12px; margin:0; padding:13px 16px;
  font-size:15px; font-weight:700; color:var(--text); cursor:pointer; user-select:none; transition:background .12s; }
#studio .step-panel > h2:hover{ background:var(--surface-2); }
#studio .step-panel:not(.collapsed) > h2{ border-bottom:1px solid var(--border); }
#studio .step-panel:not(.collapsed) > h2:hover{ background:none; }
#studio .step-panel > h2::after{ font-size:18px; margin-inline-start:4px; }
#studio .sn{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); color:var(--text-dim); font-size:13px; font-weight:800; transition:all .15s; }
#studio .step-panel:not(.collapsed) .sn{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
#studio .step-panel.is-done.collapsed .sn{ background:var(--q-good-soft); border-color:var(--q-good-soft); color:var(--green-deep); }
#studio .stt{ display:flex; flex-direction:column; min-width:0; line-height:1.35; }
#studio .stt b{ font-size:15px; font-weight:700; color:var(--text); }
#studio .stt small{ font-size:12px; font-weight:500; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#studio .chip{ margin-inline-start:auto; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap;
  background:var(--surface-2); color:var(--text-dim); }
#studio .chip:empty{ display:none; }
#studio .chip.ok{ background:var(--q-good-soft); color:var(--green-deep); }
#studio .chip.req{ background:var(--q-warn-soft); color:var(--q-warn); }

#studio .step-panel .panel-body{ padding:16px 18px 18px; }
#studio .panel .sub{ font-size:13px; line-height:1.75; margin:0 0 14px; }
#studio label{ font-size:13px; }
#studio .field{ margin-bottom:14px; }
#studio input[type=text], #studio input[type=number], #studio input[type=url], #studio textarea, #studio select{
  font-size:14px; padding-top:10px; padding-bottom:10px; border-radius:9px; }
#studio textarea{ min-height:110px; line-height:1.7; }
#studio .btn{ font-size:14px; }

/* ---- كارت التوليد ---- */
#studio .st-gen{ padding:16px; margin:0; }
#studio .st-gen-h{ font-size:15px; font-weight:800; margin-bottom:12px; color:var(--text); }
#studio .st-check{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:4px; }
#studio .st-check li{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; font-size:13px; cursor:pointer; color:var(--text); }
#studio .st-check li:hover{ background:var(--surface-2); }
#studio .st-check li .dot{ width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); color:transparent; }
#studio .st-check li .dot svg{ width:12px; height:12px; }
#studio .st-check li.ok .dot{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
#studio .st-check li.miss .dot{ border-color:var(--q-warn); }
#studio .st-check li .t{ flex:1; }
#studio .st-check li small{ color:var(--text-dim); font-size:12px; }
#studio .st-outs{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 0 14px; border-top:1px solid var(--border); margin-bottom:2px; }
#studio .st-outs .o{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--text); }
#studio .st-outs .none{ font-size:12.5px; color:var(--q-warn); font-weight:600; }
#studio .st-outs-h{ width:100%; font-size:12px; color:var(--text-dim); font-weight:600; }
#studio #generateBtn{ height:46px; font-size:15px; font-weight:800; }

/* ---- النتايج في تابات ---- */
#studio .st-results{ margin-top:24px; }
#studio .res-tabs{ display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:11px; margin-bottom:12px;
  width:fit-content; max-width:100%; overflow-x:auto; }
#studio .res-tabs:empty{ display:none; }
#studio .res-tab{ position:relative; display:flex; align-items:center; gap:7px; height:38px; padding:0 16px; border:none; border-radius:8px;
  background:none; color:var(--text-dim); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
#studio .res-tab:hover{ color:var(--text); }
#studio .res-tab.on{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
#studio .res-tab .new{ width:7px; height:7px; border-radius:50%; background:var(--green-deep); }
#studio .res-off{ display:none !important; }
#studio .st-results .result-area > h2, #studio #wpCreateProductPanel > h2{ display:none; }
#studio .st-results .panel{ padding:18px; }

@media (max-width:1100px){
  #studio .st-layout{ grid-template-columns:minmax(0,1fr) 280px; }
}
@media (max-width:900px){
  #studio .st-layout{ grid-template-columns:1fr; }
  #studio .st-side{ position:static; }
  #studio .st-head-acts{ width:100%; }
  #studio .st-head-acts .st-btn{ flex:1; justify-content:center; }
  #studio .stt small{ white-space:normal; }
}