/* =====================================================================
   Product / service scenes — themed colours + interactive animations
   --ac / --ac2 are set on .dh-visual only, so just the software screen gets its own colour
   ===================================================================== */
.dh-visual{--accent:var(--ac);--grad:linear-gradient(135deg,var(--ac),var(--ac2));--soft:color-mix(in srgb,var(--ac) 16%,transparent);--line-ac:color-mix(in srgb,var(--ac) 35%,transparent)}

/* glass frame shared by every scene */
.scene{position:relative;border-radius:18px;font-size:12px;line-height:1.4;text-align:left;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 22%,rgba(20,30,60,.5)),rgba(8,12,30,.82));
  border:1px solid color-mix(in srgb,var(--ac) 30%,rgba(255,255,255,.1));backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 110px rgba(0,0,0,.55),0 0 80px color-mix(in srgb,var(--ac) 22%,transparent);transition:transform .6s var(--ease)}
.scene .am-bar{background:rgba(8,12,30,.55);border-color:rgba(255,255,255,.07);border-radius:18px 18px 0 0}
.sc-body{padding:14px;min-height:340px;border-radius:0 0 18px 18px;overflow:hidden;position:relative}
.scene small{color:#93a0b8;font-size:10.5px;display:block}
.scene b{color:#fff}
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px 12px;border-radius:10px;border:0;cursor:pointer;font:600 12px var(--body);color:#fff;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 8px 22px color-mix(in srgb,var(--ac) 35%,transparent);transition:transform .2s,filter .2s}
.sc-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sc-btn:active{transform:scale(.97)}
.sc-btn.sm{width:auto;padding:6px 12px;font-size:11px}
.sc-btn.busy{pointer-events:none;opacity:.75}
.sc-progress{height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px;opacity:0;transition:opacity .3s}
.sc-progress.on{opacity:1}
.sc-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width 1.6s var(--ease)}
.sc-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;cursor:pointer;color:#c9d2e3;font-size:11.5px}
.sc-switch span i{color:var(--ac);width:14px;margin-right:4px}
.sc-switch input{display:none}
.sc-switch em{width:30px;height:17px;border-radius:20px;background:#2a3142;position:relative;flex-shrink:0;transition:.25s}
.sc-switch em::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.25s}
.sc-switch input:checked+em{background:var(--ac)}
.sc-switch input:checked+em::after{left:15px}
.scene .am-toast i,.app-mock .am-toast i{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}
.scene .am-toast{border-color:color-mix(in srgb,var(--ac) 40%,transparent)}
.scene .am-toast.flash,.app-mock .am-toast.flash{animation:toastFlash .5s var(--ease)}
@keyframes toastFlash{0%{transform:scale(.9);opacity:.3}100%{transform:none;opacity:1}}
.scene button{font-family:var(--body)}

/* ---------- interactive app (products / ERP services) ---------- */
.dh-visual .app-mock{--accent:var(--ac);border-color:color-mix(in srgb,var(--ac) 30%,rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 110px rgba(0,0,0,.55),0 0 80px color-mix(in srgb,var(--ac) 22%,transparent)}
.dh-visual .am-bars span{background:linear-gradient(180deg,var(--ac),color-mix(in srgb,var(--ac2) 20%,transparent))}
.dh-visual .am-line path{stroke:color-mix(in srgb,var(--ac) 50%,#fff);filter:drop-shadow(0 0 4px var(--ac))}
.dh-visual .am-side a.on{background:var(--soft)}
.dh-visual .am-dot{background:var(--soft);color:var(--ac)}
.dh-visual .am-av{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}
.am-side a,.am-ch small[data-mod]{cursor:pointer}
.am-side a:hover{color:#fff;background:rgba(255,255,255,.04)}
.am-search{display:flex;align-items:center;gap:6px}
.am-search input{background:none;border:0;outline:0;color:#fff;font:inherit;font-size:10.5px;width:70px}
.am-bell{border:0;cursor:pointer}
.am-top{position:relative}
.am-drop{position:absolute;right:0;top:34px;z-index:5;width:220px;padding:6px;border-radius:12px;background:#121829;border:1px solid var(--line-ac,rgba(255,255,255,.12));box-shadow:0 20px 40px rgba(0,0,0,.5)}
.am-drop div{display:flex;gap:8px;padding:8px;border-radius:8px;font-size:10.5px;color:#c9d2e3}
.am-drop div:hover{background:rgba(255,255,255,.05)}
.am-drop i{color:var(--ac);margin-top:2px}
.am-bars span{cursor:pointer;position:relative}
.am-bars span:hover{filter:brightness(1.3)}
.am-bars span::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#fff;color:#000;font-size:9px;padding:2px 5px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s}
.am-bars span:hover::after{opacity:1}
.am-kpi{cursor:pointer}
.am-kpi:hover{border-color:var(--line-ac)}
.am-kpi.pulse{animation:kpiPulse .5s}
@keyframes kpiPulse{50%{transform:scale(1.04);border-color:var(--ac)}}
.am-module{display:flex;flex-direction:column;gap:10px;min-height:290px;animation:modIn .35s var(--ease)}
@keyframes modIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.am-mh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.am-mh b{display:flex;align-items:center;gap:8px;font-size:13px}
.am-mh b i,.am-mh b .emo{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--soft);color:var(--ac);font-size:11px}
.am-tabs{display:flex;gap:6px}
.am-tabs button{border:1px solid rgba(255,255,255,.1);background:none;color:#9aa6bd;font:500 10.5px var(--body);padding:4px 10px;border-radius:20px;cursor:pointer}
.am-tabs button.on{background:var(--soft);color:#fff;border-color:var(--line-ac)}
.am-table{border:1px solid rgba(255,255,255,.07);border-radius:11px;overflow:hidden;flex:1}
.am-tr{display:grid;grid-template-columns:1.4fr 1.2fr .8fr .8fr;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:10.5px;color:#c9d2e3}
.am-tr:last-child{border-bottom:0}
.am-tr.th{background:rgba(255,255,255,.04);color:#7f8ba3;font-size:9.5px;text-transform:uppercase;letter-spacing:.8px}
.am-tr b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-tr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-tr.new{animation:rowNew 1.2s}
@keyframes rowNew{from{background:var(--soft)}}
.am-st{border:0;font:600 9px var(--body);padding:2px 8px;border-radius:20px;cursor:pointer;justify-self:start}
.am-st.ok{color:var(--ok);background:rgba(61,220,151,.12)}.am-st.wait{color:var(--warn);background:rgba(255,181,71,.12)}.am-st.info{color:var(--ac);background:var(--soft)}.am-st.bad{color:var(--danger);background:rgba(255,107,107,.12)}
.am-form{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(5,8,18,.6);backdrop-filter:blur(3px);border-radius:0 0 18px 18px;animation:modIn .25s}
.am-form form{width:min(260px,88%);background:#131a2c;border:1px solid var(--line-ac);border-radius:14px;padding:14px;display:grid;gap:8px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.am-form h5{color:#fff;font-size:12.5px;display:flex;justify-content:space-between}
.am-form h5 button{background:none;border:0;color:#9aa6bd;cursor:pointer}
.am-form input,.am-form select{width:100%;padding:7px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#0c1120;color:#fff;font:inherit;font-size:11px}
.am-form input:focus{outline:none;border-color:var(--ac)}
.am-report{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.am-report div{padding:12px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.am-report b{font-size:16px;display:block;margin-top:4px}
.am-pie{display:flex;align-items:center;gap:14px;padding:12px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.am-pie i{width:80px;height:80px;border-radius:50%;background:conic-gradient(var(--ac) 0 46%,var(--ac2) 0 74%,#334155 0);flex-shrink:0;mask:radial-gradient(circle,transparent 52%,#000 53%);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%)}
.am-pie ul{list-style:none;display:grid;gap:5px;font-size:10.5px;color:#c9d2e3}
.am-pie li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--c)}

/* ---------- code editor ---------- */
.dh-visual .code-mock{border-color:color-mix(in srgb,var(--ac) 30%,rgba(255,255,255,.1))}
.cm-code{position:relative}
.cm-run{position:absolute;right:12px;bottom:12px}
.cm-preview.refresh{animation:kpiPulse .6s}

/* ---------- video editor ---------- */
.sv-top{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
.sv-screen{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#05060c;border:1px solid rgba(255,255,255,.08)}
.sv-scene{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--ac) 70%,#000),#0b0420 70%)}
.sv-scene i{position:absolute;border-radius:50%;filter:blur(2px);animation:svFloat 6s ease-in-out infinite}
.sv-scene .s1{width:46%;aspect-ratio:1;left:-10%;top:-20%;background:radial-gradient(circle,color-mix(in srgb,var(--ac2) 80%,#fff),transparent 70%);opacity:.7}
.sv-scene .s2{width:30%;aspect-ratio:1;right:6%;bottom:-12%;background:radial-gradient(circle,var(--ac),transparent 70%);animation-delay:-2s}
.sv-scene .s3{width:10%;aspect-ratio:1;right:30%;top:20%;background:#fff;opacity:.5;animation-delay:-4s}
@keyframes svFloat{50%{transform:translate(14px,-10px) scale(1.12)}}
.sv-title{position:absolute;left:8%;top:30%;animation:svTitle 6s ease-in-out infinite}
.sv-title small{letter-spacing:3px;color:#fff;opacity:.75;font-size:8.5px}
.sv-title b{font-size:clamp(15px,2vw,22px);display:block}
@keyframes svTitle{0%,10%{opacity:0;transform:translateX(-14px)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
.sv-sub{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:10px;color:#fff;text-shadow:0 1px 3px #000}
.sv-play{position:absolute;left:10px;bottom:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.sv-time{position:absolute;right:10px;top:8px;font:600 10px ui-monospace,monospace;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:6px}
.sv-screen.paused .sv-scene i,.sv-screen.paused .sv-title{animation-play-state:paused}
.sv-screen[data-fx-color="0"] .sv-scene{filter:grayscale(.85)}
.sv-screen[data-fx-subtitles="0"] .sv-sub{display:none}
.sv-fx{padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column}
.sv-fx .sc-btn{margin-top:auto}
.sv-timeline{position:relative;margin-top:10px;padding:8px 8px 8px 0;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06)}
.sv-ruler{display:flex;justify-content:space-between;margin:0 0 6px 30px;height:6px}
.sv-ruler i{width:1px;background:rgba(255,255,255,.18)}
.sv-ruler i:nth-child(5n+1){height:6px;background:rgba(255,255,255,.4)}
.sv-track{display:flex;align-items:center;gap:6px;height:22px;margin-bottom:5px}
.sv-track>b{width:24px;text-align:center;color:#7f8ba3;font-size:10px}
.sv-track>div{position:relative;flex:1;height:100%}
.clip{position:absolute;top:0;bottom:0;border-radius:5px;font-size:9px;font-weight:600;color:#fff;padding:4px 6px;overflow:hidden;white-space:nowrap;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 60%,#000));border:1px solid rgba(255,255,255,.15)}
.clip.c1{background:linear-gradient(135deg,var(--ac2),color-mix(in srgb,var(--ac2) 60%,#000))}
.clip.c3{background:linear-gradient(135deg,#6366f1,#312e81)}
.clip.ct{background:linear-gradient(135deg,#f59e0b,#b45309)}
.sv-wave{display:flex;align-items:center;gap:2px;padding:0 2px}
.sv-wave i{flex:1;height:var(--h);border-radius:2px;background:color-mix(in srgb,var(--ac2) 70%,#fff);opacity:.6}
.sv-head{position:absolute;top:4px;bottom:4px;left:30px;width:2px;background:#fff;box-shadow:0 0 8px #fff;animation:svHead 10s linear infinite}
.sv-head::before{content:"";position:absolute;top:-4px;left:-4px;border:5px solid transparent;border-top-color:#fff}
.sv-timeline.paused .sv-head{animation-play-state:paused}
@keyframes svHead{from{left:30px}to{left:calc(100% - 4px)}}

/* ---------- design canvas ---------- */
.sd-wrap{display:grid;grid-template-columns:34px 1fr 150px;gap:10px;height:100%}
.sd-tools{display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:10px;background:rgba(255,255,255,.04);height:max-content}
.sd-tools button{width:24px;height:24px;border-radius:7px;border:0;background:none;color:#9aa6bd;cursor:pointer;font-size:11px}
.sd-tools button.on{background:var(--ac);color:#fff}
.sd-canvas{position:relative;border-radius:12px;display:grid;place-items:center;min-height:300px;background:#0b0f1c radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/14px 14px}
.sd-board{--sw:#ec4899;position:relative;width:min(220px,90%);aspect-ratio:1;border-radius:6px;overflow:hidden;background:linear-gradient(150deg,#1a1033,#0d0a1f);box-shadow:0 18px 40px rgba(0,0,0,.5);transition:aspect-ratio .4s,width .4s}
.sd-board[data-size="1"]{aspect-ratio:9/16;width:min(140px,60%)}
.sd-board[data-size="2"]{aspect-ratio:2/1;width:min(260px,95%)}
.sd-blob{position:absolute;width:70%;aspect-ratio:1;right:-18%;top:-14%;border-radius:50%;background:radial-gradient(circle,var(--sw),transparent 68%);opacity:.8;transition:background .4s}
.sd-ring{position:absolute;width:34%;aspect-ratio:1;left:10%;bottom:12%;border-radius:50%;border:3px solid var(--sw);transition:border-color .4s;animation:svFloat 5s ease-in-out infinite}
.sd-copy{position:absolute;left:10%;top:18%}
.sd-copy small{letter-spacing:2px;font-size:7.5px;color:#fff;opacity:.7}
.sd-copy b{display:block;font-size:20px;line-height:1.05;margin:3px 0}
.sd-copy em{font-style:normal;font-size:9px;font-weight:700;color:var(--sw);transition:color .4s}
.sd-cta{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:20px;background:var(--sw);color:#fff;font-size:8.5px;font-weight:700;transition:background .4s}
.sd-sel{position:absolute;border:1.5px solid #38bdf8;pointer-events:none;animation:sdSel 8s ease-in-out infinite}
.sd-sel i{position:absolute;width:6px;height:6px;background:#fff;border:1px solid #38bdf8}
.sd-sel i:nth-child(1){left:-4px;top:-4px}.sd-sel i:nth-child(2){right:-4px;top:-4px}.sd-sel i:nth-child(3){left:-4px;bottom:-4px}.sd-sel i:nth-child(4){right:-4px;bottom:-4px}
@keyframes sdSel{0%,30%{left:8%;top:16%;width:62%;height:34%}35%,65%{left:8%;top:60%;width:36%;height:30%}70%,100%{left:50%;top:-5%;width:62%;height:62%}}
.sd-cursor{position:absolute;display:flex;align-items:flex-start;gap:2px;color:#38bdf8;font-size:13px;animation:sdCur 8s ease-in-out infinite;pointer-events:none}
.sd-cursor em{font-style:normal;font-size:9px;background:#38bdf8;color:#04121f;padding:1px 6px;border-radius:6px;margin-top:10px}
@keyframes sdCur{0%,30%{left:55%;top:40%}35%,65%{left:38%;top:72%}70%,100%{left:70%;top:20%}}
.sd-panel{display:flex;flex-direction:column;gap:6px}
.sd-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sd-sw button{aspect-ratio:1;border-radius:8px;border:2px solid transparent;background:var(--c);cursor:pointer}
.sd-sw button.on{border-color:#fff}
.sd-sizes{display:flex;flex-wrap:wrap;gap:4px}
.sd-sizes button{border:1px solid rgba(255,255,255,.12);background:none;color:#c9d2e3;font-size:9.5px;padding:3px 7px;border-radius:6px;cursor:pointer}
.sd-sizes button.on{background:var(--soft);border-color:var(--ac);color:#fff}
.sd-layers{list-style:none;display:grid;gap:3px;font-size:10.5px;color:#c9d2e3}
.sd-layers li{padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.03)}
.sd-layers i{color:var(--ac);width:14px}

/* ---------- logo / brand kit ---------- */
.sl-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.sl-stage{position:relative;border-radius:12px;padding:20px;text-align:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--ac) 25%,#0b0f1c),#0b0f1c 70%);border:1px solid rgba(255,255,255,.07)}
.sl-mark{width:90px;height:90px;display:block;margin:0 auto 6px}
.sl-mark *{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;animation:slDraw 2.4s var(--ease) forwards}
.sl-mark .d1{stroke:var(--ac)}.sl-mark .d2{stroke:var(--ac2);animation-delay:.5s}.sl-mark .d3{stroke:#fff;animation-delay:1s}
@keyframes slDraw{to{stroke-dashoffset:0}}
.sl-stage.redraw .sl-mark *{animation:none}
.sl-word{font-size:22px;letter-spacing:3px;display:block}
.sl-word span{color:var(--ac);font-weight:400;margin-left:4px}
.sl-concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.sl-concepts small{grid-column:1/-1}
.sl-concepts button{padding:10px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#c9d2e3;cursor:pointer;display:grid;gap:4px;justify-items:center;font-size:10px}
.sl-concepts button i{font-size:16px;color:var(--ac)}
.sl-concepts button.on{border-color:var(--ac);background:var(--soft)}
.sl-side{display:flex;flex-direction:column;gap:7px}
.sl-pal{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.sl-pal button{height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:var(--c);cursor:pointer;position:relative}
.sl-pal span{position:absolute;left:4px;bottom:2px;font-size:8px;font-weight:600;color:#fff;mix-blend-mode:difference}
.sl-type{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}
.sl-type b{font-size:26px}
.sl-type span{font-size:10.5px;color:#c9d2e3}.sl-type em{color:#7f8ba3;font-style:normal}
.sl-card{padding:12px;border-radius:10px;background:linear-gradient(135deg,var(--ac),var(--ac2));transform:rotate(-3deg)}
.sl-card small{color:rgba(255,255,255,.85)}

/* ---------- UI/UX ---------- */
.su-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.su-tabs{display:flex;padding:3px;border-radius:9px;background:rgba(255,255,255,.05)}
.su-tabs button{border:0;background:none;color:#9aa6bd;font:500 11px var(--body);padding:5px 12px;border-radius:7px;cursor:pointer}
.su-tabs button.on{background:var(--ac);color:#fff}
.su-canvas{position:relative;display:flex;justify-content:space-around;align-items:center;padding:14px 4px;min-height:270px;border-radius:12px;background:#0b0f1c radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/14px 14px}
.su-frame{text-align:center;z-index:1;transition:transform .4s,filter .4s}
.su-frame small{margin-bottom:4px}
.su-phone{width:clamp(64px,8vw,92px);aspect-ratio:9/18;border-radius:12px;background:#f1f5f9;padding:8px 6px;display:flex;flex-direction:column;gap:5px;border:2px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.su-phone i{display:block;border-radius:4px;background:#cbd5e1}
.w-in{height:10px}.w-btn{height:12px;background:var(--ac)!important;margin-top:auto}.w-hero{height:34px;background:linear-gradient(135deg,var(--ac),var(--ac2))!important}.w-row{height:14px}.w-card{height:26px;background:#1e293b!important}
.su-frame.active{transform:scale(1.08);filter:drop-shadow(0 0 14px var(--ac))}
.su-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s}
.su-links path{fill:none;stroke:var(--ac);stroke-width:1.5;stroke-dasharray:4 3;animation:dashMove 1s linear infinite;vector-effect:non-scaling-stroke}
.su-canvas[data-mode="proto"] .su-links{opacity:1}
@keyframes dashMove{to{stroke-dashoffset:-14}}
.su-cursor{position:absolute;display:flex;gap:2px;font-size:12px;pointer-events:none;z-index:2}
.su-cursor em{font-style:normal;font-size:9px;color:#fff;padding:1px 6px;border-radius:6px;margin-top:10px}
.su-cursor.c1{color:#f472b6;animation:suC1 7s ease-in-out infinite}.su-cursor.c1 em{background:#f472b6}
.su-cursor.c2{color:var(--ac);animation:suC2 9s ease-in-out infinite}.su-cursor.c2 em{background:var(--ac)}
@keyframes suC1{0%,100%{left:20%;top:30%}50%{left:48%;top:62%}}
@keyframes suC2{0%,100%{left:70%;top:70%}50%{left:80%;top:25%}}

/* ---------- SEO ---------- */
.sc-seo .sc-body{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
.se-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:20px;background:#fff;color:#202124;font-size:11.5px;margin-bottom:10px}
.se-search .fa-google{color:#4285f4}
.se-search span{flex:1;min-height:14px}
.se-search span::after{content:"|";animation:blink 1s steps(1) infinite;color:#4285f4}
.se-results{list-style:none;position:relative;height:250px}
.se-results li{position:absolute;left:0;right:0;top:calc(var(--o)*42px);padding:6px 9px;border-radius:8px;transition:top .9s var(--ease),background .4s}
.se-results li small{color:#86efac;font-size:9.5px}
.se-results li b{font-size:11.5px;color:#93c5fd;font-weight:500}
.se-results li span{float:right;font-size:9.5px;color:var(--ac);margin-top:-14px}
.se-results li.you{background:var(--soft);border:1px solid var(--line-ac)}
.se-results li.you b{color:#fff;font-weight:600}
.se-side{display:flex;flex-direction:column;gap:8px}
.se-score{position:relative;width:96px;margin:0 auto;text-align:center}
.se-score svg{width:96px;height:96px;transform:rotate(-90deg)}
.se-score circle{fill:none;stroke-width:4;stroke-linecap:round}
.se-score .r-bg{stroke:rgba(255,255,255,.08)}.se-score .r-fg{stroke:var(--ac);stroke-dasharray:62 101;transition:stroke-dasharray 1.6s var(--ease)}
.se-score b{position:absolute;left:0;right:0;top:30px;font-size:22px}
.se-score small{margin-top:-4px}
.se-checks{list-style:none;display:grid;gap:5px;font-size:11px;color:#c9d2e3}
.se-checks i{color:#f87171;width:16px}
.se-checks li.ok i{color:var(--ok)}
.se-checks li.ok i::before{content:"\f058"}

/* ---------- Social ---------- */
.ss-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.ss-phone{position:relative;border-radius:16px;background:#000;border:2px solid #222;padding:8px;font-size:10.5px;color:#fff}
.ss-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.ss-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);padding:2px}
.ss-head i{margin-left:auto;color:#999}
.ss-post{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.ss-orb{position:absolute;width:60%;aspect-ratio:1;right:-10%;top:-10%;border-radius:50%;background:rgba(255,255,255,.25);animation:svFloat 5s ease-in-out infinite}
.ss-post b{font-size:20px;position:relative}.ss-post small{color:#fff;position:relative}
.ss-actions{display:flex;gap:12px;padding:8px 2px 4px;font-size:15px}
.ss-actions button{background:none;border:0;color:#fff;font-size:15px;cursor:pointer;padding:0}
.ss-actions button.liked i{color:#ef4444;animation:kpiPulse .4s}
.ss-actions i:last-child{margin-left:auto}
.ss-likes{font-size:10.5px}
.ss-cap{color:#ddd;font-size:10px;margin-top:2px}
.ss-hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:14px}
.ss-hearts i{position:absolute;bottom:30%;color:#ef4444;animation:heartUp 1.4s ease-out forwards}
@keyframes heartUp{to{transform:translateY(-140px) scale(1.6);opacity:0}}
.ss-side{display:flex;flex-direction:column;gap:8px}
.ss-stat{padding:10px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.ss-stat b{font-size:18px;display:block}.ss-stat em{font-style:normal;font-size:10px;color:var(--ok)}
.ss-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ss-cal button{aspect-ratio:1;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:none;color:#c9d2e3;font-size:10px;cursor:pointer}
.ss-cal button.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-color:transparent}

/* ---------- Ads ---------- */
.sa-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.sa-tabs{display:flex;gap:6px}
.sa-tabs button{border:1px solid rgba(255,255,255,.12);background:none;color:#c9d2e3;font:500 11px var(--body);padding:5px 10px;border-radius:8px;cursor:pointer}
.sa-tabs button.on{background:var(--soft);border-color:var(--ac);color:#fff}
.sa-roas{font-size:11px;color:#9aa6bd}.sa-roas b{color:var(--ok);font-size:14px}
.sa-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.sa-list{display:grid;gap:7px;align-content:start}
.sa-camp{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.sa-camp .sc-switch{padding:0}
.sa-camp div{flex:1;min-width:0}.sa-camp div b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-camp>span{font-size:10px;font-weight:600;white-space:nowrap}
.sa-camp>span.ok{color:var(--ok)}.sa-camp>span.off{color:#7f8ba3}
.sa-panel{padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:6px}
.sa-budget{font-size:20px}
.sa-panel input[type=range]{width:100%;accent-color:var(--ac)}
.sa-est{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sa-est b{font-size:14px}
.sa-chart{display:flex;align-items:flex-end;gap:4px;height:60px;margin-top:auto}
.sa-chart i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--ac),transparent);height:var(--h,40%);transition:height .5s var(--ease)}

/* ---------- WhatsApp ---------- */
.sw-wrap{display:grid;grid-template-columns:150px 1fr;gap:0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.07);min-height:330px}
.sw-list{background:#111b21;padding:8px;display:flex;flex-direction:column;gap:3px}
.sw-lh{display:flex;justify-content:space-between;color:#aebac1;padding:4px 4px 8px}
.sw-item{display:flex;gap:7px;align-items:center;padding:7px;border-radius:8px;border:0;background:none;color:#e9edef;text-align:left;cursor:pointer}
.sw-item.on,.sw-item:hover{background:#2a3942}
.sw-item b{font-size:10.5px;display:block}
.sw-av{width:26px;height:26px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:10px;flex-shrink:0}
.sw-chat{background:#0b141a radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/12px 12px;display:flex;flex-direction:column;padding:8px;gap:8px}
.sw-ch{display:flex;gap:8px;align-items:center;padding:4px 4px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.sw-msgs{flex:1;display:flex;flex-direction:column;gap:6px}
.sw-msg{max-width:78%;padding:7px 9px;border-radius:9px;font-size:10.5px;color:#e9edef;position:relative}
.sw-msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.sw-msg.in{align-self:flex-start;background:#202c33;border-top-left-radius:2px;animation:modIn .4s}
.sw-msg p{color:#d1d7db;margin:2px 0 6px}
.sw-img{display:block;height:48px;border-radius:6px;margin-bottom:6px;background:linear-gradient(135deg,#25d366,#0ea5e9)}
.sw-btns{display:grid;gap:3px}
.sw-btns span{text-align:center;padding:4px;border-top:1px solid rgba(255,255,255,.1);color:#53bdeb;font-size:10px}
.sw-tick{position:absolute;right:6px;bottom:4px;font-size:8px;color:#8696a0}
.sw-tick i+i{margin-left:-4px}
.sw-tick.read{color:#53bdeb}
.sw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.sw-stats div{padding:6px;border-radius:8px;background:rgba(255,255,255,.04)}
.sw-stats b{font-size:13px}

/* ---------- Funnel ---------- */
.sf-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.sf-funnel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0}
.sf-stage{width:var(--w);min-width:42%;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) calc(70% - var(--i)*12%),#1e293b),color-mix(in srgb,var(--ac2) calc(70% - var(--i)*12%),#1e293b));color:#fff;font-size:10.5px;transform:scaleX(0);transition:transform .9s var(--ease),width .6s var(--ease);transition-delay:calc(var(--i)*.15s)}
.in .sf-stage{transform:none}
.sf-stage b{font-size:14px}
.sf-side{display:flex;flex-direction:column;gap:4px}
.sf-roi{padding:10px;border-radius:11px;background:rgba(255,255,255,.04);margin:6px 0}
.sf-roi b{font-size:22px;color:var(--ac)}

/* ---------- Mobile app ---------- */
.sm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.sm-phone{position:relative;width:min(170px,100%);aspect-ratio:9/18.5;margin:0 auto;border-radius:26px;border:3px solid #2b3245;background:#0b0f1c;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--ac) 30%,transparent);transition:border-radius .4s}
.sm-phone[data-os="ios"]{border-radius:32px;border-color:#d1d5db}
.sm-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:44%;height:14px;border-radius:10px;background:#000;z-index:2}
.sm-screens{display:flex;height:100%;transition:transform .6s var(--ease)}
.sm-scr{flex:0 0 100%;padding:30px 10px 40px;display:flex;flex-direction:column;gap:8px}
.sm-hello b{font-size:14px}
.sm-card{padding:10px;border-radius:12px;background:linear-gradient(135deg,var(--ac),var(--ac2))}
.sm-card small{color:rgba(255,255,255,.8)}.sm-card b{font-size:16px}
.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sm-grid i{aspect-ratio:1.2;border-radius:10px;background:rgba(255,255,255,.07)}
.sm-h{font-size:13px}
.sm-row{display:flex;gap:6px;align-items:center;padding:6px;border-radius:9px;background:rgba(255,255,255,.05)}
.sm-row i{width:20px;height:20px;border-radius:6px;background:var(--soft)}
.sm-row span{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.15)}
.sm-av{width:46px;height:46px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,var(--ac),var(--ac2))}
.sm-dots{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:center;gap:4px}
.sm-dots i{width:5px;height:5px;border-radius:5px;background:rgba(255,255,255,.3);transition:.3s}
.sm-dots i.on{width:14px;background:var(--ac)}
.sm-tab{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:8px;background:rgba(255,255,255,.05);color:#9aa6bd;font-size:11px}
.sm-side{display:flex;flex-direction:column;gap:6px}
.sm-os{display:flex;gap:5px}
.sm-os button{flex:1;border:1px solid rgba(255,255,255,.12);background:none;color:#c9d2e3;font:500 10.5px var(--body);padding:6px;border-radius:8px;cursor:pointer}
.sm-os button.on{background:var(--soft);border-color:var(--ac);color:#fff}
.sm-steps{list-style:none;display:grid;gap:5px;font-size:11px;color:#c9d2e3;margin-bottom:6px}
.sm-steps i{color:var(--ok);width:16px}
.sm-steps li[data-step] i{color:#7f8ba3}
.sm-steps li.done i{color:var(--ok)}

/* ---------- Store ---------- */
.st-head{display:flex;align-items:center;gap:12px;padding:4px 2px 10px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:10px}
.st-head>b{font-size:14px}.st-head>b span{color:var(--ac)}
.st-nav{display:flex;gap:10px;font-size:10.5px;color:#9aa6bd;flex:1}
.st-cart{position:relative;width:32px;height:32px;border-radius:9px;border:0;background:var(--soft);color:#fff;cursor:pointer}
.st-cart em{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:10px;background:var(--ac);color:#fff;font:700 9px/16px var(--body);font-style:normal;padding:0 4px}
.st-cart.bump{animation:kpiPulse .4s}
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.st-prod{padding:7px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:3px;opacity:0;transform:translateY(10px);transition:.5s var(--ease);transition-delay:calc(var(--i)*.1s)}
.in .st-prod{opacity:1;transform:none}
.st-img{position:relative;aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:24px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 70%,#111),color-mix(in srgb,var(--ac2) 50%,#111))}
.st-prod:nth-child(2n) .st-img{background:linear-gradient(135deg,#334155,#0f172a)}
.st-img em{position:absolute;top:4px;left:4px;font-style:normal;font-size:8.5px;font-weight:700;background:#ef4444;color:#fff;padding:1px 5px;border-radius:5px}
.st-prod b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-prod span{font-size:10px;color:var(--ac);font-weight:600}
.st-prod button{border:0;border-radius:7px;background:var(--soft);color:#fff;font:600 9.5px var(--body);padding:5px;cursor:pointer;transition:.2s}
.st-prod button:hover{background:var(--ac)}
.st-prod button.added{background:var(--ok)}
.st-checkout{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,8,18,.75);backdrop-filter:blur(4px);animation:modIn .3s}
.st-checkout div{text-align:center;display:grid;gap:6px;justify-items:center}
.st-checkout i{font-size:40px;color:var(--ok)}
.st-checkout b{font-size:16px}

/* ---------- Payment ---------- */
.sp-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;min-height:300px}
.sp-card{position:relative;aspect-ratio:1.6;border-radius:14px;padding:14px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 20px 40px color-mix(in srgb,var(--ac) 35%,transparent);transform:perspective(600px) rotateY(-12deg) rotateX(6deg);transition:transform .6s var(--ease)}
.sp-card:hover{transform:none}
.sp-card>i{position:absolute;right:14px;top:12px;font-size:24px}
.sp-chip{width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,#fde68a,#d97706)}
.sp-card>b{font:600 13px ui-monospace,monospace;letter-spacing:2px}
.sp-card small{color:rgba(255,255,255,.75);font-size:8px}
.sp-card span{font-size:10.5px;font-weight:600}
.sp-card.jazz{background:linear-gradient(135deg,#ef4444,#f59e0b)}
.sp-card.easy{background:linear-gradient(135deg,#22c55e,#10b981)}
.sp-form{display:flex;flex-direction:column;gap:9px}
.sp-tabs{display:flex;gap:4px}
.sp-tabs button{flex:1;border:1px solid rgba(255,255,255,.12);background:none;color:#c9d2e3;font:500 10px var(--body);padding:6px 4px;border-radius:8px;cursor:pointer}
.sp-tabs button.on{background:var(--soft);border-color:var(--ac);color:#fff}
.sp-sum{display:flex;justify-content:space-between;padding:10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:11px;color:#c9d2e3}
.sp-sum b{font-size:15px}
.sp-done{text-align:center;color:var(--ok);font-weight:700;font-size:13px;animation:modIn .4s}
.sp-done i{font-size:18px}
.sp-secure{text-align:center}

/* ---------- API hub ---------- */
.sx-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.sx-map{position:relative;aspect-ratio:1.15;border-radius:12px;background:#0b0f1c radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/14px 14px}
.sx-map svg{position:absolute;inset:0;width:100%;height:100%}
.sx-map line{stroke:color-mix(in srgb,var(--ac) 45%,transparent);stroke-width:.6;stroke-dasharray:2 2;vector-effect:non-scaling-stroke;animation:dashMove 1.2s linear infinite}
.sx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:18px;display:grid;place-items:center;align-content:center;gap:2px;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 0 40px color-mix(in srgb,var(--ac) 60%,transparent);font-size:9.5px}
.sx-core i{font-size:20px;color:#fff}
.sx-node{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;border:0;background:none;color:#c9d2e3;font:500 9px var(--body);cursor:pointer}
.sx-node i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#141b2d;border:1px solid var(--line-ac);color:var(--ac);font-size:14px;transition:.3s}
.sx-node:hover i,.sx-node.on i{background:var(--ac);color:#fff}
.sx-node.ok i{border-color:var(--ok);color:var(--ok);background:rgba(61,220,151,.12)}
.sx-pkt{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 8px var(--ac);animation:pkt 2.4s linear infinite;animation-delay:calc(var(--i)*-.4s)}
@keyframes pkt{0%{transform:translate(0,0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(calc(var(--x)*1%*4.6),calc(var(--y)*1%*4));opacity:0}}
.sx-side{display:flex;flex-direction:column;gap:8px}
.sx-side pre{flex:1;margin:0;padding:10px;border-radius:10px;background:#0b0f1c;border:1px solid rgba(255,255,255,.07);font:11px/1.6 ui-monospace,monospace;color:#86efac;white-space:pre-wrap;min-height:150px}

/* ---------- Automation ---------- */
.sz-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.sz-flow{display:flex;flex-direction:column;gap:14px;position:relative;padding-left:4px}
.sz-node{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:.35s}
.sz-node:not(:last-child)::after{content:"";position:absolute;left:24px;top:100%;height:14px;border-left:2px dashed color-mix(in srgb,var(--ac) 50%,transparent)}
.sz-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--ac);flex-shrink:0}
.sz-node b{font-size:11px;display:block}
.sz-ok{margin-left:auto;color:var(--ok);opacity:0;transform:scale(.4);transition:.3s}
.sz-node.run{border-color:var(--ac);box-shadow:0 0 18px color-mix(in srgb,var(--ac) 35%,transparent)}
.sz-node.done .sz-ok{opacity:1;transform:none}
.sz-side{display:flex;flex-direction:column;gap:8px}
.sz-stat{padding:12px;border-radius:11px;background:rgba(255,255,255,.04)}
.sz-stat b{font-size:22px}

/* ---------- AI chat ---------- */
.sk-wrap{display:flex;flex-direction:column;gap:8px;min-height:320px}
.sk-head{display:flex;gap:10px;align-items:center;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.sk-av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}
.sk-head small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:3px}
.sk-msgs{flex:1;display:flex;flex-direction:column;gap:7px;max-height:190px;overflow-y:auto;padding-right:4px}
.sk-msg{max-width:82%;padding:8px 11px;border-radius:12px;font-size:11px;color:#e5e7eb;animation:modIn .3s}
.sk-msg.b{align-self:flex-start;background:var(--soft);border-bottom-left-radius:3px}
.sk-msg.u{align-self:flex-end;background:#2a3142;border-bottom-right-radius:3px}
.sk-typing{display:flex;gap:3px;padding:10px 12px!important}
.sk-typing i{width:5px;height:5px;border-radius:50%;background:#c9d2e3;animation:typing 1s infinite}
.sk-typing i:nth-child(2){animation-delay:.15s}.sk-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{50%{transform:translateY(-4px);opacity:.4}}
.sk-chips{display:flex;flex-wrap:wrap;gap:5px}
.sk-chips button{border:1px solid var(--line-ac);background:none;color:#e5e7eb;font:500 10.5px var(--body);padding:5px 10px;border-radius:20px;cursor:pointer}
.sk-chips button:hover{background:var(--soft)}
.sk-input{display:flex;gap:6px}
.sk-input input{flex:1;padding:8px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:#0b0f1c;color:#fff;font:inherit;font-size:11px}
.sk-input input:focus{outline:none;border-color:var(--ac)}
.sk-input button{width:34px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;cursor:pointer}

/* ---------- Domain & hosting ---------- */
.sh-search{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:12px;background:#0b0f1c;border:1px solid var(--line-ac);margin-bottom:10px}
.sh-search>i{color:var(--ac)}
.sh-search input{flex:1;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:12px}
.sh-results{list-style:none;display:grid;gap:6px;margin-bottom:10px;min-height:150px}
.sh-results li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:11px;animation:modIn .3s both}
.sh-results li b{flex:1}
.sh-results li em{font-style:normal;font-size:9.5px;font-weight:600}
.sh-results li em.av{color:var(--ok)}.sh-results li em.tk{color:#f87171}
.sh-results li span{color:#c9d2e3;font-weight:600}
.sh-results li button{border:0;border-radius:7px;background:var(--ac);color:#fff;font:600 9.5px var(--body);padding:4px 10px;cursor:pointer}
.sh-results li button[disabled]{background:#334155;cursor:default}
.sh-results li button.added{background:var(--ok)}
.sh-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sh-card{display:flex;gap:7px;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}
.sh-card>i{color:var(--ac)}
.sh-card b{font-size:10.5px}

/* ---------- Deploy ---------- */
.sy-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.sy-term{border-radius:12px;background:#05070d;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.sy-th{display:flex;justify-content:space-between;padding:6px 10px;background:#0f1422;font-size:10px;color:#7f8ba3}
.sy-term pre{margin:0;padding:10px;font:10.5px/1.7 ui-monospace,monospace;color:#c9d2e3;height:260px;overflow:hidden;white-space:pre-wrap}
.sy-term pre .g{color:#86efac}.sy-term pre .c{color:var(--ac)}.sy-term pre .y{color:#fde68a}
.sy-side{display:flex;flex-direction:column;gap:9px}
.sy-meter span{display:flex;justify-content:space-between;font-size:10.5px;color:#c9d2e3;margin-bottom:4px}
.sy-meter i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.sy-meter i::after{content:"";position:absolute;inset:0;width:var(--v);border-radius:6px;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .6s}
.sy-status{font-size:11px;color:var(--ok);display:flex;align-items:center;gap:6px;margin-top:auto}
.sy-status i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:ping 1.6s infinite}

/* ---------- Monitor ---------- */
.sn-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sn-ok{display:flex;align-items:center;gap:6px;color:var(--ok);font-size:11.5px;font-weight:600}
.sn-ok i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:ping 1.6s infinite}
.sn-bars{display:flex;gap:2px;height:34px;margin-bottom:12px}
.sn-bars i{flex:1;border-radius:2px;background:var(--ok);opacity:.85;transform:scaleY(0);transform-origin:bottom;transition:transform .4s;transition-delay:calc(var(--n,0)*15ms)}
.in .sn-bars i{transform:none}
.sn-bars i.warn{background:var(--warn)}
.sn-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.sn-tickets{display:grid;gap:6px;align-content:start}
.sn-t{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:10.5px;transition:.4s}
.sn-t b{flex:1;font-size:10.5px}
.sn-t span{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px}
.p-low{background:rgba(61,220,151,.12);color:var(--ok)}.p-medium{background:rgba(255,181,71,.12);color:var(--warn)}.p-high{background:rgba(255,107,107,.12);color:var(--danger)}
.sn-t button{border:0;border-radius:7px;background:var(--soft);color:#fff;font:600 9.5px var(--body);padding:4px 9px;cursor:pointer}
.sn-t.solved{opacity:.5}.sn-t.solved b{text-decoration:line-through}
.sn-t.solved button{background:var(--ok)}
.sn-side{display:flex;flex-direction:column;gap:8px}
.sn-stat{padding:10px;border-radius:10px;background:rgba(255,255,255,.04)}
.sn-stat b{font-size:13px}

/* ---------- WordPress ---------- */
.sq-wrap{display:grid;grid-template-columns:120px 1fr;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.07);min-height:320px}
.sq-side{background:#1d2327;display:flex;flex-direction:column;padding:6px 0}
.sq-side>b{padding:6px 12px 10px;font-size:18px;color:#fff}
.sq-side button{display:flex;gap:7px;align-items:center;border:0;background:none;color:#c3c4c7;font:500 10.5px var(--body);padding:7px 12px;text-align:left;cursor:pointer}
.sq-side button i{width:14px;color:#8c8f94}
.sq-side button.on,.sq-side button:hover{background:var(--ac);color:#fff}
.sq-side button.on i{color:#fff}
.sq-main{background:#f0f0f1;display:flex;flex-direction:column}
.sq-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#fff;border-bottom:1px solid #dcdcde}
.sq-bar b{color:#1d2327;font-size:11.5px}
.sq-editor{padding:10px;display:flex;flex-direction:column;gap:8px}
.sq-block{padding:10px;border-radius:6px;background:#fff;border:1px solid #dcdcde;color:#1d2327;text-align:center;animation:modIn .4s}
.sq-block b{color:#1d2327;font-size:11px;display:block}
.sq-block small{color:#646970}
.sq-block i{color:var(--ac);font-size:16px;margin-bottom:4px}
.sq-block.hero{background:linear-gradient(135deg,var(--ac),var(--ac2));border:0}
.sq-block.hero b,.sq-block.hero small{color:#fff}
.sq-block.hero span{display:inline-block;width:60px;height:12px;border-radius:6px;background:#fff;margin-top:6px}
.sq-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sq-add{border:1px dashed #8c8f94;background:none;border-radius:6px;padding:7px;color:#50575e;font:500 10.5px var(--body);cursor:pointer}
.sq-add:hover{border-color:var(--ac);color:var(--ac)}

@media (max-width:760px){
  .sv-top,.sd-wrap,.sl-wrap,.ss-wrap,.sa-grid,.sf-wrap,.sm-wrap,.sp-wrap,.sx-wrap,.sz-wrap,.sy-wrap,.sn-grid,.sc-seo .sc-body{grid-template-columns:1fr}
  .sd-tools{flex-direction:row;width:max-content}
  .sw-wrap,.sq-wrap{grid-template-columns:1fr}
  .sw-list,.sq-side{display:none}
  .st-grid{grid-template-columns:repeat(2,1fr)}
  .st-nav{display:none}
  .sh-row{grid-template-columns:1fr}
  .am-tr{grid-template-columns:1.4fr 1fr .8fr}
  .am-tr>:nth-child(2){display:none}
  .am-report{grid-template-columns:1fr}
  .sc-body{min-height:0}
}

/* toast floats above the window so it never covers buttons */
.scene .am-toast,.dh-visual .app-mock .am-toast,.dh-visual .code-mock .am-toast{top:-24px;bottom:auto;right:-14px;left:auto}
.cm-run{top:12px;bottom:auto}
.se-results li{transition:top .6s var(--ease),background .4s}
@media (max-width:760px){.scene .am-toast,.dh-visual .app-mock .am-toast,.dh-visual .code-mock .am-toast{right:8px;top:-20px}}