[hidden]{display:none!important}
:root{
  --bg:#edf2f8; --surface:#ffffff; --surface2:#f4f7fb; --ink:#10243b; --muted:#64748a;
  --line:#dbe4ee; --accent:#b88628; --accent-ink:#fffdf7; --accent-soft:#fcf2d9; --brand:#091a2e; --brand-ink:#f9f1df;
  --var:#a9761c; --var-soft:#fff3d9; --ts:#2c678f; --ok:#447b62; --img:#276d9d; --img-soft:#e3f0fa;
  --shadow:0 1px 2px rgba(11,31,54,.06),0 8px 26px rgba(11,31,54,.08);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07111f; --surface:#0d1b2d; --surface2:#11243a; --ink:#f5f1e8; --muted:#a7b6c9;
    --line:#213954; --accent:#d4aa52; --accent-ink:#101724; --accent-soft:#2d2618; --brand:#050d19; --brand-ink:#fbf2df;
    --var:#e5bb63; --var-soft:#332b17; --ts:#80bad6; --ok:#80b894; --img:#84bce5; --img-soft:#152e47;
    --shadow:0 1px 2px rgba(0,0,0,.38),0 10px 28px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#07111f; --surface:#0d1b2d; --surface2:#11243a; --ink:#f5f1e8; --muted:#a7b6c9;
  --line:#213954; --accent:#d4aa52; --accent-ink:#101724; --accent-soft:#2d2618; --brand:#050d19; --brand-ink:#fbf2df;
  --var:#e5bb63; --var-soft:#332b17; --ts:#80bad6; --ok:#80b894; --img:#84bce5; --img-soft:#152e47;
  --shadow:0 1px 2px rgba(0,0,0,.38),0 10px 28px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(circle at 10% -10%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 28%),radial-gradient(circle at 96% 8%,#17375c 0,transparent 26%),var(--bg);color:var(--ink);font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;font-size:15px;line-height:1.6}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.3}
.muted{color:var(--muted)} .small{font-size:12.5px}
.pill{background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--muted);white-space:nowrap}

.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:color-mix(in srgb,var(--brand) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--accent) 26%,var(--line))}
.brand{display:flex;align-items:center;gap:12px}
.logo{position:relative;width:42px;height:42px;border-radius:11px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex:none;font-family:Inter,Arial,sans-serif;font-weight:800;font-size:15px;letter-spacing:-1px}
.logo::after{content:"";position:absolute;top:6px;left:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.brand h1{font-size:18px;font-weight:700}
.sub{margin:0;font-size:12.5px;color:var(--muted)}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{border-color:var(--accent)}

.layout{display:grid;grid-template-columns:250px minmax(300px,380px) 1fr;gap:16px;padding:16px 20px;align-items:start;max-width:1600px;margin:0 auto}
.sidebar,.list-col,.editor-col{min-width:0}
.sidebar{position:sticky;top:78px;display:flex;flex-direction:column;gap:10px}
.search-wrap input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);outline:none}
.search-wrap input:focus{border-color:var(--accent)}
.section-nav{display:flex;flex-direction:column;gap:4px}
.nav-btn{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:start;padding:9px 12px;border-radius:10px;border:1px solid transparent;background:none;cursor:pointer}
.nav-btn:hover{background:var(--surface)}
.nav-btn.active{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow);font-weight:600}
.nav-btn .ico{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:13px;flex:none}
.nav-btn .lbl{flex:1}
.nav-btn .n{font-size:12px;color:var(--muted)}
.fav-filter{padding:9px 12px;border-radius:10px;border:1px dashed var(--line);background:none;cursor:pointer;text-align:start;color:var(--muted)}
.fav-filter.active{border-style:solid;border-color:var(--accent);color:var(--accent);font-weight:600}

.list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.list-head h2{font-size:17px}
.list-head p{margin:2px 0 0;font-size:12.5px}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.chip{white-space:nowrap;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:13px}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.prompt-list{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 190px);overflow:auto;padding-inline-end:4px}
.card{text-align:start;width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent)}
.card.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.code{font-family:Inter,sans-serif;font-size:11.5px;font-weight:600;color:var(--accent);direction:ltr}
.card-title{font-weight:600;font-size:14.5px}
.card-note{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--muted)}
.card .star-mini{color:var(--accent)}
.kind{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:600;white-space:nowrap}
.kind.edit{background:var(--img-soft);color:var(--img)} .kind.txt{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.no-results{padding:30px;text-align:center;color:var(--muted)}

.editor-col{position:sticky;top:78px}
.empty-state{border:1px dashed var(--line);border-radius:var(--r);padding:60px 24px;text-align:center;color:var(--muted);background:var(--surface)}
.empty-state svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.empty-state h3{color:var(--ink);margin:10px 0 6px}
#editorBody{display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 100px);overflow:auto;padding-inline-end:4px}
.ed-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ed-head h2{font-size:20px;margin-top:2px}
.ed-head p{margin:4px 0 0;font-size:13px}
.ed-tags{display:flex;gap:8px;align-items:center}
.star{font-size:18px;color:var(--muted)} .star.on{color:var(--accent);border-color:var(--accent)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.panel-head h3{font-size:15px;display:flex;align-items:center;gap:8px}
.bulk{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.bulk button{padding:3px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);cursor:pointer;font-size:12.5px}
.bulk button:hover{border-color:var(--accent)}

.vars{display:flex;flex-direction:column;gap:12px}
.var{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface2)}
.var.focus{border-color:var(--var)}
.var-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.var-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.var-num{width:22px;height:22px;border-radius:6px;background:var(--var);color:#fff;display:grid;place-items:center;font-size:12px;font-family:Inter,sans-serif}
.cat{font-size:11.5px;color:var(--muted);font-weight:500}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:5px 11px;cursor:pointer;font-size:12.5px;border-inline-start:1px solid var(--line)}
.seg button:first-child{border-inline-start:0}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.var-body{display:flex;flex-direction:column;gap:6px}
.default-text{direction:ltr;text-align:left;font-family:Inter,sans-serif;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--muted)}
.var select,.var input[type=text]{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);outline:none}
.var input[type=text]{direction:ltr;text-align:left;font-family:Inter,sans-serif;font-size:13.5px}
.var select:focus,.var input:focus{border-color:var(--accent)}
.custom-row{display:grid;grid-template-columns:1fr 230px;gap:10px;align-items:start}
.hint{font-size:12px;line-height:1.55;background:var(--accent-soft);color:var(--ink);border-radius:8px;padding:8px 10px;border-inline-start:3px solid var(--accent)}
.hint b{color:var(--accent)}
.hint .ex{direction:ltr;text-align:left;font-family:Inter,sans-serif;font-size:11.5px;color:var(--muted);margin-top:4px;word-break:break-word}
.img-mode{font-size:12.5px;background:var(--img-soft);color:var(--img);border-radius:8px;padding:8px 10px}
.img-mode code{direction:ltr;display:block;text-align:left;font-family:Inter,sans-serif;margin-top:4px;font-size:12px}

.img-drop{border:1.5px dashed var(--line);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center;cursor:pointer;background:var(--surface2)}
.img-drop:hover,.img-drop.drag{border-color:var(--img)}
.img-drop img{width:120px;height:90px;object-fit:cover;border-radius:8px}
.img-drop #imgHint{display:flex;flex-direction:column;gap:4px}

.out-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:13.5px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost:hover{border-color:var(--accent)}
.prompt-out{font-family:Inter,sans-serif;font-size:14px;line-height:1.75;text-align:left;background:var(--surface2);border:1px solid var(--line);border-inline-end:4px solid var(--accent);border-radius:10px;padding:14px 16px;white-space:pre-wrap;word-break:break-word}
.prompt-out .v{background:var(--var-soft);color:var(--var);font-weight:600;border-radius:4px;padding:0 3px;cursor:pointer}
.prompt-out .v.img{background:var(--img-soft);color:var(--img)}
.prompt-out .pre{color:var(--img);font-weight:500}
.output #imgNote{margin:8px 0 0;color:var(--img)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1150px){
  .layout{grid-template-columns:230px 1fr}
  .editor-col{grid-column:1 / -1;position:static}
  #editorBody{max-height:none}
}
@media (max-width:760px){
  .layout{grid-template-columns:1fr;padding:12px 16px}
  .sidebar{position:static}
  .section-nav{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .nav-btn{white-space:nowrap}
  .nav-btn .n{display:none}
  .prompt-list{max-height:48vh}
  .custom-row{grid-template-columns:1fr}
  .topbar{padding:10px 16px}
  .brand h1{font-size:16px}
}

.top-actions{display:flex;gap:10px;align-items:center}
.user-chip{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;font-weight:600}
.user-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.user-chip .logout{color:var(--muted);text-decoration:none;font-weight:500;border-inline-start:1px solid var(--line);padding-inline-start:8px}
.user-chip .logout:hover{color:var(--accent)}
.test-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.test-controls select{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.test-stage{margin-top:10px;border:1px dashed var(--line);border-radius:12px;background:var(--surface2);min-height:220px;display:grid;place-items:center;overflow:hidden}
.test-stage img{width:100%;height:auto;display:block;border-radius:11px}
.stage-empty{color:var(--muted);font-size:13px}
.spinner{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.spinner span{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner span{animation-duration:2.4s}}
.test-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.test-error{white-space:pre-wrap;direction:rtl;margin:10px 0 0;padding:10px 12px;border-radius:10px;font-size:13px;color:#a33726;background:color-mix(in srgb,#a33726 10%,transparent)}
@media (max-width:760px){.user-chip #userExp{display:none}}
/* the prompt is copied with the button, not by selecting text */
.prompt-out,.card,.default-text{-webkit-user-select:none;user-select:none}

/* ---------- plan / quota card ---------- */
.plan-card{background:var(--brand);color:var(--brand-ink);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.plan-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;opacity:.92}
.plan-row strong{font-family:Inter,sans-serif;font-size:13px;direction:ltr}
.bar{height:5px;border-radius:99px;background:color-mix(in srgb,var(--brand-ink) 18%,transparent);overflow:hidden;margin-bottom:4px}
.bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .4s}
.bar.full span{background:#d9534f}
.plan-reset{display:flex;justify-content:space-between;align-items:center;border-top:1px solid color-mix(in srgb,var(--brand-ink) 18%,transparent);padding-top:8px;margin-top:2px;font-size:12.5px}
.countdown{font-family:Inter,sans-serif;font-variant-numeric:tabular-nums;font-size:16px;letter-spacing:.5px;color:#fff}
.tier-badge{font-family:Inter,sans-serif;font-size:11px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.tier-badge.pro{background:linear-gradient(135deg,#c8a15b,#b9714a);color:#fff;border-color:transparent}
.test-controls .field{display:flex;flex-direction:column;gap:2px}
.test-controls .field select{min-width:150px}
.test-controls{align-items:flex-end;flex-wrap:wrap}
.test-ref{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12.5px;color:var(--muted)}
.test-ref img{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
#testImg{max-height:70vh;object-fit:contain}
a.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center}

/* ---------- brand block: name + designer same font & width, subtitle below ---------- */
.brand{gap:14px;min-width:0}
.logo{width:54px;height:54px;border-radius:14px;font-size:18px}
.logo::after{top:8px;left:8px;width:7px;height:7px}
.brand-text{display:flex;flex-direction:column;min-width:0}
.names{display:inline-flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%}
.brand h1,.brand .designer{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;font-weight:700;white-space:nowrap;direction:ltr;letter-spacing:0}
.brand h1{font-size:19px;line-height:1.25}
.brand .designer{margin:1px 0 0;font-size:16px;line-height:1.25;color:var(--ink);opacity:.7}
.brand .sub{margin-top:4px}

/* ---------- middle panel: all group tabs visible, no sideways scroll ---------- */
.chips{flex-wrap:wrap;overflow:visible;gap:6px;padding:0 0 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;font-size:12.5px;line-height:1.5;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--accent)}
.chip .c{font-family:Inter,sans-serif;font-size:10.5px;font-weight:600;min-width:20px;padding:0 5px;border-radius:99px;background:var(--surface2);color:var(--muted);text-align:center}
.chip.active .c{background:color-mix(in srgb,var(--accent-ink) 25%,transparent);color:var(--accent-ink)}
.list-col{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 97%,#1a3658),var(--surface));border:1px solid var(--line);border-radius:16px;padding:14px 12px 12px;box-shadow:var(--shadow)}
.list-col .card{background:var(--surface2)}
.list-col .card:hover,.list-col .card.active{background:var(--surface)}
.prompt-list{max-height:calc(100vh - 300px)}

/* ---------- contact bar ---------- */
.contact-bar{margin-top:24px;background:var(--brand);color:var(--brand-ink)}
.cb-inner{max-width:1600px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cb-head{display:flex;flex-direction:column;line-height:1.4}
.cb-head .muted{color:color-mix(in srgb,var(--brand-ink) 65%,transparent)}
.cb-links{display:flex;gap:8px;flex-wrap:wrap}
.cb-link{position:relative;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;text-decoration:none;color:var(--brand-ink);
  background:color-mix(in srgb,var(--brand-ink) 9%,transparent);border:1px solid color-mix(in srgb,var(--brand-ink) 16%,transparent);font-size:13px;font-weight:600;transition:background .15s,transform .15s}
.cb-link:hover,.cb-link:focus-visible{background:color-mix(in srgb,var(--brand-ink) 16%,transparent);transform:translateY(-1px);outline:none}
.cb-link .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.cb-link .ic svg{width:15px;height:15px}
.cb-link.whatsapp .ic{background:#25a35a} .cb-link.phone .ic{background:#3c5a4e} .cb-link.email .ic{background:var(--accent)} .cb-link.facebook .ic{background:#1877f2}
.cb-link .val{display:none;font-family:Inter,sans-serif;font-weight:500;font-size:12px;opacity:.8}
/* hint bubble with the details */
.cb-link::after{content:attr(data-hint);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;direction:ltr;
  padding:6px 10px;border-radius:8px;background:var(--surface);color:var(--ink);font-family:Inter,sans-serif;font-size:12px;font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:.15s}
.cb-link:hover::after,.cb-link:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.cb-link::after{display:none}.cb-link .val{display:inline}}

/* ---------- tablet ---------- */
@media (max-width:1150px){
  .prompt-list{max-height:60vh}
}
/* ---------- mobile: header, then the three panels stacked ---------- */
@media (max-width:760px){
  .topbar{position:static;flex-wrap:wrap;padding:12px 16px;gap:10px}
  .brand{width:100%}
  .logo{width:48px;height:48px;font-size:16px}
  .brand h1{font-size:17px}
  .top-actions{width:100%;justify-content:space-between}
  .user-chip{flex:1;min-width:0;justify-content:flex-start;overflow:hidden}
  .user-chip #userName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .layout{grid-template-columns:1fr;gap:14px;padding:12px 16px}
  .sidebar,.list-col,.editor-col{grid-column:1 / -1}
  .sidebar{position:static;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
  .section-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:visible}
  .nav-btn{white-space:normal;border:1px solid var(--line);background:var(--surface2);padding:8px 10px;font-size:13px;line-height:1.35}
  .nav-btn.active{border-color:var(--accent);background:var(--accent-soft)}
  .nav-btn .n{display:inline}
  .nav-btn .ico{width:24px;height:24px}
  .prompt-list{max-height:62vh}
  .test-controls .field,.test-controls .field select{width:100%}
  .test-controls .btn{width:100%}
  .out-actions{flex-wrap:wrap}
  .cb-inner{flex-direction:column;align-items:stretch;padding:16px}
  .cb-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-link{min-width:0}
  .cb-link{border-radius:14px;flex-wrap:wrap;padding:8px 10px}
  .cb-link .val{display:block;width:100%;overflow-wrap:anywhere;font-size:11px;padding-inline-start:36px;margin-top:-4px}
}

/* ---------- prompt cards with preview thumbnails ---------- */
.card{flex-direction:row;align-items:stretch;gap:12px}
.card-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.card-top,.card-title,.card-note{display:block}
.card-top{display:flex}
.card .thumb{flex:0 0 108px;align-self:stretch;min-height:80px;border-radius:9px;overflow:hidden;background:var(--surface2);border:1px solid var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.05)}
.ed-preview{margin:0 0 14px;position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface2);cursor:zoom-in;box-shadow:var(--shadow)}
.ed-preview img{display:block;width:100%;max-height:340px;object-fit:cover}
.ed-preview figcaption{position:absolute;inset-inline-start:12px;bottom:12px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;color:#fff;background:rgba(15,20,18,.62);backdrop-filter:blur(6px)}

/* ---------- ready-made looks ---------- */
.presets{margin:-2px 0 14px;padding:12px;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.presets-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.presets-head strong{font-size:14px;color:var(--accent)}
.preset-chips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{padding:6px 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.pchip:hover{border-color:var(--accent);transform:translateY(-1px)}
.pchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.preset-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset-row label{display:flex;flex-direction:column;gap:3px}
.preset-row select{width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}

/* ---------- header buttons ---------- */
.gal-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:13px}
.gal-btn:hover{border-color:var(--accent)}
.gal-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gal-btn b{font-family:Inter,sans-serif;font-size:11px;min-width:20px;padding:1px 6px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.tier-badge{cursor:pointer}
.plans-btn{margin-top:4px;padding:8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--brand-ink) 25%,transparent);background:color-mix(in srgb,var(--brand-ink) 8%,transparent);color:var(--brand-ink);cursor:pointer;font-weight:600;font-size:13px}
.plans-btn:hover{background:color-mix(in srgb,var(--brand-ink) 16%,transparent)}
.linkish{background:none;border:0;padding:0;margin:-2px 0 6px;color:var(--accent);font-weight:600;font-size:12.5px;cursor:pointer}
.linkish:hover{text-decoration:underline}

/* ---------- modal ---------- */
body.no-scroll{overflow:hidden}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(10,14,12,.55);backdrop-filter:blur(4px)}
.modal[hidden]{display:none!important}
.modal-card{width:min(560px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.modal-card.wide{width:min(980px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px}
.modal-body{padding:16px;overflow:auto}
.lightbox{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:12px;background:var(--surface2)}
.plans{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.plans th,.plans td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--line)}
.plans td:first-child{text-align:start;color:var(--ink);font-weight:500}
.plans th{font-size:15px}
.plans th small{display:block;font-size:11px;font-weight:600;color:var(--accent)}
.plans th.pro{color:#fff;background:linear-gradient(135deg,#c8a15b,#b9714a);border-radius:12px 12px 0 0}
.plans th.pro small{color:#fff;opacity:.9}
.plans td.pro{background:color-mix(in srgb,#c8a15b 10%,transparent);font-weight:600}
.plans .yes{color:var(--ok);font-weight:800} .plans .no{color:var(--muted)}
.plans-cta{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.plans-cta .btn{padding:12px 20px}
.ok-line{color:var(--ok);font-weight:700;margin:0}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.gal-item{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2);cursor:pointer;text-align:start}
.gal-item:hover{border-color:var(--accent)}
.gal-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gal-item span{padding:8px 10px;display:flex;flex-direction:column;min-width:0}
.gal-item b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-item small{font-size:11px;color:var(--muted)}
.gal-note{margin:0 0 10px}
.gal-empty{padding:30px 10px;text-align:center;color:var(--muted)}
.gal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn.danger{color:#a33726}
@media (max-width:760px){
  .card .thumb{flex-basis:92px;min-height:70px}
  .gal-btn span{display:none}
  .preset-row{grid-template-columns:1fr}
  .ed-preview img{max-height:220px}
  .gal-grid{grid-template-columns:1fr 1fr}
  .plans{font-size:12.5px}
  .modal{padding:8px}
}

/* keep panels at their natural height inside the scrolling editor column */
#editorBody > *{flex-shrink:0}
.ed-preview img{max-height:440px;aspect-ratio:16/10}
.ed-preview::after{content:"⤢";position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:rgba(15,20,18,.6);color:#fff;font-size:18px;opacity:0;transition:.2s}
.ed-preview:hover::after{opacity:1}
.card .thumb{position:relative}
.modal-card.xl{width:min(1400px,100%)}
.modal-card.xl .lightbox{max-height:calc(100dvh - 150px)}

/* ---------- square example preview at the far left, variables take the rest ---------- */
.ed-top{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.ed-top.has-pv{grid-template-columns:minmax(0,1fr) clamp(260px,36%,420px)}
.ed-top > .panel{min-width:0}
.ed-top .ed-preview{margin:0;position:sticky;top:0;aspect-ratio:1/1;background:#0f1412}
.ed-top .ed-preview img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.ed-top .ed-preview figcaption{font-size:11.5px}
@media (max-width:1300px){.ed-top.has-pv{grid-template-columns:minmax(0,1fr) clamp(220px,40%,340px)}}
@media (max-width:760px){
  .ed-top.has-pv{grid-template-columns:1fr}
  .ed-top .ed-preview{order:-1;position:relative;width:min(100%,420px);justify-self:center}
}
@media (min-width:1151px){.layout{grid-template-columns:250px minmax(300px,380px) minmax(0,1fr)}}
@media (min-width:761px) and (max-width:1150px){.layout{grid-template-columns:230px minmax(0,1fr)}}
/* hint bubbles open towards the page (never past the left edge) */
.cb-link::after{left:0;transform:translateY(4px)}
.cb-link:hover::after,.cb-link:focus-visible::after{transform:translateY(0)}
body{overflow-x:clip}

/* ================= library tree (sidebar) ================= */
.lib-nav{display:flex;flex-direction:column;gap:2px}
.lib-nav .nav-btn{width:100%}
.lib{margin-top:6px;border-radius:14px}
.lib.open{background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid var(--line);padding:4px}
.lib-btn{font-weight:700;font-size:15px}
.lib-btn .en{font-family:Inter,sans-serif;font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:1px 7px;border-radius:99px;margin-inline-start:4px}
.lib-secs{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.sec-btn{font-size:14px}
.sec-btn.open:not(.active){background:var(--surface);border-color:var(--line)}
.grp-list{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px;padding-inline-start:18px;border-inline-start:2px solid var(--accent-soft);margin-inline-start:22px}
.grp-btn{padding:6px 10px;font-size:13px;color:var(--muted)}
.grp-btn .n{font-size:11px}
.grp-btn:hover{color:var(--ink)}
.grp-btn.active{color:var(--accent);font-weight:700;background:var(--accent-soft);border-color:transparent;box-shadow:none}
.crumb{margin:0 0 2px;font-size:12px;font-weight:600;color:var(--accent)}

/* ================= header contact button + dialog ================= */
.contact-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;font-weight:700;font-size:13px}
.contact-btn:hover{filter:brightness(1.06)}
.contact-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.contact-lead{margin:0 0 12px}
.contact-main{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#25a35a;color:#fff;text-decoration:none;margin-bottom:10px}
.contact-main:hover{filter:brightness(1.05)}
.contact-main .ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.contact-main .ic svg{width:22px;height:22px}
.contact-main b{display:block;font-size:15px} .contact-main small{font-family:Inter,sans-serif;opacity:.9}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.contact-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);text-decoration:none;min-width:0}
.contact-item:hover{border-color:var(--accent)}
.contact-item .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.contact-item .ic svg{width:16px;height:16px}
.contact-item.phone .ic{background:#3c5a4e} .contact-item.email .ic{background:var(--accent)} .contact-item.facebook .ic{background:#1877f2}
.contact-item span:last-child{display:flex;flex-direction:column;min-width:0}
.contact-item b{font-size:13px} .contact-item small{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}

/* ================= desktop: every panel scrolls on its own ================= */
@media (min-width:1151px){
  body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  .topbar{position:relative;flex:none}
  .layout{flex:1;min-height:0;width:100%;align-items:stretch;padding-bottom:14px}
  .sidebar,.editor-col{position:static;top:auto;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-inline-end:4px}
  .list-col{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .list-head{flex:none}
  .prompt-list{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
  #editorBody{max-height:none;overflow:visible}
}
.prompt-list{overscroll-behavior:contain}

/* ---------- library-first browsing: choose a shelf, then a section, then prompts ---------- */
.prompt-list.browse-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;padding:2px 2px 10px;overflow:auto}
.browse-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;width:100%;min-height:142px;padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--surface2);color:var(--ink);text-align:start;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
.browse-card:hover{border-color:var(--accent);background:var(--surface);box-shadow:var(--shadow);transform:translateY(-2px)}
.browse-index{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font:700 12px/1 Inter,"IBM Plex Sans Arabic",sans-serif}
.browse-main{display:flex;flex-direction:column;gap:5px;min-width:0}.browse-main strong{font-size:15px;line-height:1.35}.browse-main small{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:12.5px;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.browse-count{display:flex;flex-direction:column;align-items:end;color:var(--accent);font:700 22px/1 Inter,sans-serif}.browse-count small{margin-top:4px;color:var(--muted);font:500 10.5px/1 "IBM Plex Sans Arabic",sans-serif;white-space:nowrap}
.browse-sections{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}.browse-sections span,.browse-meta{color:var(--muted);font-size:11px;line-height:1.4}.browse-sections span{padding:3px 7px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.section-card,.group-card{min-height:120px}.section-card .browse-index{font-size:17px}.browse-arrow{color:var(--accent);font:700 22px/1 Inter,sans-serif;align-self:center}.browse-card.locked{opacity:.72}.browse-card.locked .browse-index{background:var(--surface);color:var(--muted)}
.group-hub{grid-template-columns:1fr!important}.group-card{min-height:82px;align-items:center}.group-card .browse-main small{-webkit-line-clamp:1}.group-card .browse-meta{margin-top:1px}
.prompt-list.flow-library{display:block;max-width:none;padding:0 2px 12px;overflow:auto}.flow-head{display:flex;flex-direction:column;gap:13px}.flow-brand{position:relative;overflow:hidden;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 84%,var(--surface)),var(--surface2))}.flow-brand::after{content:"";position:absolute;width:210px;height:210px;inset-inline-end:-75px;top:-125px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 67%);pointer-events:none}.flow-kicker{display:block;color:var(--accent);font:700 11px/1.2 Inter,"IBM Plex Sans Arabic",sans-serif;letter-spacing:.06em;text-transform:uppercase}.flow-brand h3{margin-top:6px;font-size:21px}.flow-brand p{max-width:640px;margin:4px 0 0;color:var(--muted);font-size:13px}.flow-total{display:flex;align-items:baseline;gap:7px;align-self:flex-start;padding:7px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--muted);font-size:12px}.flow-total b{color:var(--accent);font:700 20px/1 Inter,sans-serif}.flow-tabs{display:flex;gap:7px;overflow:auto;padding:2px 0 7px;scrollbar-width:thin}.flow-tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:12.5px}.flow-tab span{color:var(--accent)}.flow-tab b,.flow-group b{font:600 10.5px/1 Inter,sans-serif;color:var(--muted);padding:2px 5px;border-radius:99px;background:var(--surface2)}.flow-tab.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}.flow-tab.active b{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}.flow-groups{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface2)}.flow-groups>span{font-size:12px;color:var(--muted)}.flow-groups>div{display:flex;gap:6px;flex-wrap:wrap}.flow-group{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);padding:5px 9px;cursor:pointer;font:600 12px "IBM Plex Sans Arabic",sans-serif}.flow-group:hover{border-color:var(--accent);color:var(--accent)}.flow-group.locked{opacity:.58}.flow-feed-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:2px}.flow-feed-title strong{font-size:15px}.flow-feed-title small{color:var(--muted);font-size:12px}.flow-prompt-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.flow-prompt-feed .card{background:var(--surface2)}.flow-prompt-feed .card:hover,.flow-prompt-feed .card.active{background:var(--surface)}
@media (min-width:1151px){.prompt-list.library-hub{grid-template-columns:repeat(2,minmax(0,1fr))}.prompt-list.section-hub{grid-template-columns:1fr}.section-card{min-height:108px}.section-card .browse-main small{-webkit-line-clamp:1}}
@media (max-width:760px){.prompt-list.browse-hub,.flow-prompt-feed{grid-template-columns:1fr}.browse-card{min-height:118px;padding:14px}.browse-main strong{font-size:14.5px}.browse-sections span:nth-child(n+4){display:none}.flow-brand{padding:15px}.flow-brand h3{font-size:18px}}

@media (max-width:760px){
  .contact-btn span{display:none}
  .contact-btn{padding:0 10px}
  .grp-list{flex-direction:row;flex-wrap:wrap;gap:4px;padding-inline-start:10px;margin-inline-start:10px}
  .grp-btn{width:auto!important;border:1px solid var(--line);border-radius:99px;padding:4px 10px}
  .lib-nav .nav-btn .n{display:inline}
}

/* ================= collapsible tree ================= */
.lib-nav .nav-btn{gap:6px}
.chev,.chev-pad{width:18px;height:18px;flex:none;display:grid;place-items:center}
.chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;opacity:.55}
.nav-btn.open .chev svg{transform:rotate(-90deg);opacity:.9}
.tree-kids{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px;margin-inline-start:14px;padding-inline-start:8px;border-inline-start:2px solid var(--line)}
.tree-kids.grp-list{margin-inline-start:22px;padding-inline-start:6px;border-inline-start-color:var(--accent-soft)}
.lvl0{font-weight:700}
.lib-btn{font-size:14.5px}
.fav-filter{display:flex;align-items:center;gap:8px;border-style:solid;margin-top:4px;font-weight:600}
.fav-filter #favCount{margin-inline-start:auto;font-size:12px;font-weight:500}
@media (max-width:760px){
  .tree-kids.grp-list{flex-direction:row;flex-wrap:wrap}
  .tree-kids.grp-list .chev-pad{display:none}
}

/* ================= three plans ================= */
.tier-badge.follower{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.tier-badge.trial{background:var(--surface2);color:var(--muted)}
.plans3 th.follower{color:var(--accent)}
.plans3 th.cur:not(.pro){background:var(--surface2);border-radius:12px 12px 0 0}
.plans3 td:nth-child(3){background:color-mix(in srgb,var(--accent) 5%,transparent)}
#testOff .linkish{margin:0 6px}
select optgroup{font-weight:700;color:var(--muted)}
select option:disabled{color:var(--muted)}

/* ================= social proof + lead form ================= */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.proof span{padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--muted);text-align:center;line-height:1.35}
.proof b{display:block;font-family:Inter,sans-serif;font-size:17px;color:var(--ink)}
.pro-note{margin:0 0 4px;font-size:13.5px}
.lead-form{display:flex;flex-direction:column;gap:10px}
.lead-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.lead-form input,.lead-form select,.lead-form textarea{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);font-weight:400;resize:vertical}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.lead-form .btn{align-self:flex-start;padding:11px 22px}
.lead-done{text-align:center;padding:20px 10px}
.lead-done b{font-size:18px;color:var(--ok)}

/* ================= guest mode ================= */
.guest-card{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--brand);color:var(--brand-ink)}
.guest-card b{font-size:15px}
.guest-card span{font-size:12.5px;opacity:.85;line-height:1.6}
.guest-card .btn{margin-top:2px}
.guest-card .linkish{color:#f0c9ad;align-self:flex-start}
.guest-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px;border-radius:12px;background:var(--accent-soft);font-size:12.5px}
.guest-bar b{font-family:Inter,sans-serif}
.sec-btn.locked{opacity:.72}
.sec-btn.locked .ico{background:var(--surface2)}
.code-lead{margin:0 0 12px;font-size:13.5px}
.code-form{display:flex;gap:8px}
.code-form input{flex:1;min-width:0;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--surface2);font-size:16px;letter-spacing:1.5px;text-align:left}
.code-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.code-form .btn{padding:0 22px}
.google-in{display:flex;justify-content:center;margin-top:10px}
.code-get{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.code-links{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- language: E / ع switch, English (LTR) layout, Arabic prompt view ---------- */
.lang-btn{border-radius:50%;font:700 15px/1 Inter,"IBM Plex Sans Arabic",sans-serif;color:var(--ink)}
.lang-btn:lang(en){font-family:"IBM Plex Sans Arabic",sans-serif;font-size:17px;padding-bottom:3px}
html[lang=en] body{font-family:Inter,"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif}
html[dir=ltr] .nav-btn:not(.open) .chev svg{transform:scaleX(-1)}
.spinner i{font-style:normal}
.ar-btn{font-family:"IBM Plex Sans Arabic","Segoe UI",sans-serif}
.ar-btn.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.ar-btn:disabled{opacity:.45;cursor:not-allowed}
.prompt-out.ar{font-family:"IBM Plex Sans Arabic","Segoe UI",sans-serif;font-size:15px;line-height:1.95;text-align:right;
  border-inline-end:1px solid var(--line);border-inline-start:4px solid var(--accent)}
#arNote{margin:8px 0 0}
.user-chip .logout,.user-chip #userName{white-space:nowrap}
.contact-btn span,.gal-btn span,#userExp{white-space:nowrap}
/* header: when the actions don't fit beside the brand they move to their own row (longer English labels) */
@media (min-width:761px){
  .topbar{flex-wrap:wrap}
  .brand{flex:1 1 380px}
  .top-actions{flex-wrap:wrap;justify-content:flex-end;margin-inline-start:auto}
}
@media (max-width:760px){
  .top-actions{flex-wrap:wrap}
  .user-chip{flex:1 1 100%;order:-1}
}
/* ---------- tool formats, share, reels info ---------- */
.fmt-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.fmt-chips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:600 12.5px/1.3 Inter,"IBM Plex Sans Arabic",sans-serif;cursor:pointer;color:var(--ink)}
.fchip:hover{border-color:var(--accent)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fmt-hint{margin:8px 0 0}
.ed-tags{display:flex;align-items:center;gap:8px}
.reel-info{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.reel-info .ri{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.reel-info .ri b{font-size:12.5px;color:var(--accent)}
.reel-info .ri span{font-size:14px;font-weight:600}
.reel-info p{margin:0}
.kind.vid{background:color-mix(in srgb,#6b5bd6 14%,transparent);color:#6b5bd6}
/* ---------- reel video previews ---------- */
.ed-top.has-vid{grid-template-columns:minmax(0,1fr) clamp(200px,28%,300px)}
.ed-top .ed-preview.vid{aspect-ratio:9/16}
.ed-top .ed-preview video{display:block;width:100%;height:100%;object-fit:contain;background:#0f1412}
.ed-preview.vid::after{content:"▶"}
.lightbox.vid{width:auto;max-width:100%;margin:0 auto;aspect-ratio:9/16;max-height:calc(100dvh - 170px);background:#000}
.card .thumb.vid::after{content:"▶";position:absolute;inset-inline-end:6px;bottom:6px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:rgba(15,20,18,.7);color:#fff;font-size:10px;padding-inline-start:2px}
@media (max-width:1150px){.ed-top.has-vid{grid-template-columns:1fr}.ed-top .ed-preview.vid{width:min(100%,260px)}}
@media (max-width:760px){
  .ed-head{flex-wrap:wrap}
  .ed-head > div:first-child{flex:1 1 100%;order:2;min-width:0}
  .ed-tags{order:1;width:100%;justify-content:flex-start}
}
/* reel preview waiting for a tap (phones with REEL_MOBILE_AUTOPLAY = "off") */
.ed-top .ed-preview.vid.tap img{width:100%;height:100%;object-fit:cover}
.ed-preview.vid.tap::before{content:"▶";position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  background:rgba(15,20,18,.62);color:#fff;font-size:24px;padding-inline-start:4px;z-index:1}
.ed-preview.vid.tap::after{display:none}
/* ---------- logo: AF + small LAB ---------- */
.logo b{font:inherit;line-height:1}
.logo.has-tag{grid-template-rows:auto auto;align-content:center;justify-items:center;gap:2px}
.logo small{font-family:Inter,Arial,sans-serif;font-size:8.5px;font-weight:700;letter-spacing:2.4px;line-height:1;opacity:.78;padding-inline-start:2.4px}
.logo::after{top:5px;left:5px;width:5px;height:5px}
@media (min-width:761px){.logo::after{top:6px;left:6px;width:6px;height:6px}}
/* ---------- tree: sub-titles (groups) stand apart from sections ---------- */
.tree-kids.grp-list{margin-inline-start:14px;padding-inline-start:10px;border-inline-start:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.nav-btn.grp-btn{font-size:12.8px;font-weight:500;color:var(--muted);padding-block:6px;border-radius:8px;background:transparent}
.nav-btn.grp-btn .gdot{flex:none;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--accent) 55%,transparent);margin-inline-end:8px;font-size:9px;line-height:7px;text-align:center}
.nav-btn.grp-btn:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.nav-btn.grp-btn.active{color:var(--accent);font-weight:700;background:color-mix(in srgb,var(--accent) 13%,transparent)}
.nav-btn.grp-btn.active .gdot{background:var(--accent)}
.nav-btn.grp-btn .n{font-size:11px;opacity:.75}
/* trial: groups after the first one are part of the Followers plan */
.nav-btn.grp-btn.t-locked{opacity:.62}
.nav-btn.grp-btn.t-locked .gdot{background:none;width:auto;height:auto;font-size:10px}
.card.t-locked{opacity:.7}
.card.t-locked .thumb img{filter:grayscale(.6) blur(1.5px)}
.lock-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:99px;padding:1px 8px;margin-inline-end:6px;vertical-align:middle}
.nav-btn.grp-btn .chev-pad{order:0}.nav-btn.grp-btn .gdot{order:1}.nav-btn.grp-btn .lbl{order:2}.nav-btn.grp-btn .n{order:3}