/* Shared controls and content surfaces */
.tab-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.tab-layout>*{min-width:0}
.tab-rail{display:flex;flex-direction:column;gap:14px}
[role="tab"]{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 22px;border:1px solid var(--hair-strong);border-radius:var(--r-pill);background:var(--bg-panel-2);color:var(--text);font-weight:800;text-align:center}
[role="tab"][aria-selected="true"]{background:var(--accent);color:var(--ink);box-shadow:0 12px 30px var(--glow-accent-soft)}
.tab-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
[role="tabpanel"]{min-width:0;scroll-margin-top:24px}
.feature-tray{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:390px;overflow-x:clip}
.feature-visual{padding:40px}
.feature-copy{padding:40px}
.feature-copy h3{margin-top:0}
.feature-copy p{margin-bottom:0}
.settings-sheet{padding:24px;border-radius:var(--r-window);background:var(--text);color:var(--ink);box-shadow:var(--thick-8),0 28px 50px var(--shadow-deep)}
.settings-sheet h4{margin:0 0 18px;font-size:18px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line-light);font-size:13px}
.setting-row span:first-child{min-width:0}
.switch{position:relative;display:inline-block;flex-shrink:0;width:30px;height:17px;border-radius:var(--r-pill);background:var(--hair-strong);box-shadow:inset 0 1px 2px var(--shadow-deep)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:var(--r-round);background:var(--text);box-shadow:0 1px 2px var(--shadow-deep)}
.switch.is-on{background:var(--accent);box-shadow:0 0 10px var(--glow-accent-soft)}
.switch.is-on::after{transform:translateX(13px)}
.toc{position:sticky;top:16px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;padding:16px;margin-bottom:32px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-panel-2);color:var(--text)}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-pill);text-decoration:none}
.toc a:hover,.toc a[aria-current]{background:var(--bg-panel);color:var(--text)}
.faq-item{border-bottom:1px solid var(--hair-strong);padding-top:6px;padding-bottom:6px}
.faq-item summary{position:relative;min-height:60px;padding:16px 40px 16px 0;font-weight:800;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;top:14px;color:var(--text-muted);font:500 26px/1.3 var(--font-mono)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding-bottom:16px;color:var(--text-muted)}
.faq-answer p:last-child{margin-bottom:0}
.term-card{border-left:4px solid var(--border)}
.term-card h3{margin:12px 0}
.term-card p{margin-bottom:0;color:var(--text-muted)}
.tag,.badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 11px;border:1px solid var(--hair-strong);border-radius:var(--r-pill);background:var(--bg-panel-2);color:var(--text);font-size:12px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.tag[data-dynamic],.badge[data-dynamic]{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.badge-first{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.badge-recommended{background:var(--bg-panel-2);color:var(--success);border-color:var(--success)}
.badge-retired{background:var(--bg-panel-2);color:var(--warn);border-color:var(--warn)}
.badge-error{background:var(--bg-panel-2);color:var(--error);border-color:var(--error)}
.client-card{padding:40px}
.client-card-head{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.client-card-head img{width:56px;height:56px;flex-shrink:0}
.client-card-head h3{margin:0}
.client-card-head .badge{margin-left:auto}
.client-card p{color:var(--text-muted)}
.client-downloads{display:flex;flex-wrap:wrap;gap:12px}
.client-notes{margin-top:24px;font-size:14px}
.article-card{display:flex;flex-direction:column;align-items:flex-start}
.article-card h3{margin:20px 0 16px}
.article-card h3 a{text-decoration:none}
.article-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.article-card p{color:var(--text-muted)}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font:12px/1.5 var(--font-mono);color:var(--text-muted)}
.article-card .text-link{margin-top:auto}
.text-link{font-weight:800;text-decoration:none}
.text-link:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.callout{margin:28px 0;padding:24px 28px;border-left:4px solid var(--accent);border-radius:var(--r-md);background:var(--bg-panel-2);color:var(--text)}
.callout p:last-child{margin-bottom:0}
.callout-warning{border-left-color:var(--warn)}
.callout-success{border-left-color:var(--success)}
.table-scroll{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;border:1px solid var(--hair-strong);border-radius:var(--r-md)}
.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.data-table th,.data-table td,.prose table th,.prose table td{min-width:7em;padding:16px 20px;border-bottom:1px solid var(--hair-strong);overflow-wrap:normal;word-break:normal}
.data-table th,.prose table th{background:var(--bg-panel-2);color:var(--text);font-weight:800}
.data-table td,.prose table td{background:var(--bg-panel);color:var(--text)}
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse;text-align:left}
.prose table code,.data-table code{overflow-wrap:anywhere}
.download-endcap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:56px;padding:32px;border-radius:var(--r-lg);background:var(--bg-panel);color:var(--text);box-shadow:inset 0 1px 0 var(--hi-line)}
.download-endcap h2{margin:0 0 8px;font-size:24px}
.download-endcap p{margin:0;color:var(--text-muted)}
.dl-fab{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);min-height:56px;padding:14px 22px;border-radius:var(--r-pill);background:var(--accent);color:var(--ink);box-shadow:0 12px 40px var(--shadow-deep);font-weight:800;text-decoration:none}
.dl-fab svg{width:22px;height:22px;flex-shrink:0}

/* Static, layered desktop and mobile client installation */
.stage{position:relative;height:640px;width:100%;min-width:0}
.stage>*{position:absolute}
.glow-back{left:40px;top:-30px;width:680px;height:480px;z-index:0;background:radial-gradient(closest-side,var(--glow-violet),transparent)}
.pool{left:300px;top:390px;width:600px;height:320px;z-index:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 62%,transparent),transparent);filter:blur(18px);opacity:.85}
.ground{left:60px;top:572px;width:740px;height:84px;z-index:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--bg-panel-2) 88%,transparent),transparent)}
.desk{left:60px;top:70px;width:600px;height:362px;z-index:2;border-radius:var(--r-window);overflow:hidden;background:var(--bg-panel-2);color:var(--text);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);transform:perspective(1800px) rotateY(-14deg) rotateX(5deg) rotateZ(-1deg);transform-origin:60% 50%;box-shadow:inset 0 1px 0 var(--hi-line),var(--thick-10),30px 44px 70px var(--shadow-deep)}
.desk-bar{height:34px;display:flex;align-items:center;gap:8px;padding-left:14px;background:linear-gradient(180deg,var(--bg-panel),color-mix(in srgb,var(--bg-panel) 70%,var(--bg-panel-2)));color:var(--text)}
.desk-app{width:14px;height:14px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent),var(--border))}
.desk-title{font:700 12.5px/1 var(--font-body)}
.desk-ctrl{margin-left:auto;display:flex}
.desk-ctrl span{width:40px;height:34px;display:grid;place-items:center;color:var(--text-muted);font-size:13px}
.desk-menu{display:flex;gap:20px;align-items:center;height:30px;margin:0;padding:0 16px;list-style:none;font-size:12px;background:color-mix(in srgb,var(--bg-panel) 45%,var(--bg-panel-2));color:var(--text);border-bottom:1px solid var(--hair)}
.desk-tools{height:36px;display:flex;align-items:flex-end;padding:0 14px;border-bottom:1px solid var(--hair)}
.desk-tab{position:relative;padding:0 12px 10px;font-size:12px;font-weight:700}
.desk-tab::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:var(--r-sm);background:var(--text)}
.desk-thead{display:grid;grid-template-columns:52px 1.25fr 1.25fr 46px 64px 38px 54px;align-items:center;height:30px;padding:0 14px;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--bg-panel) 30%,var(--bg-panel-2));color:var(--text-muted);border-bottom:1px solid var(--hair)}
.desk-thead span{padding-left:8px;border-left:1px solid var(--hair);white-space:nowrap}
.desk-thead span:first-child{padding-left:0;border-left:0}
.desk-empty{height:192px;display:grid;place-items:center;padding:16px;background-image:linear-gradient(var(--hair-faint) 1px,transparent 1px);background-size:100% 30px}
.empty-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 34px;border:1.5px dashed var(--hair-strong);border-radius:var(--r-window);background:color-mix(in srgb,var(--bg-panel-2) 85%,transparent);color:var(--text)}
.empty-ico{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--bg-panel);color:var(--text);box-shadow:inset 0 1px 0 var(--hi-line)}
.empty-ico svg{width:20px;height:20px}
.empty-title{margin:2px 0 0;font-size:14px;font-weight:800}
.empty-sub{margin:0;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}
.desk-status{height:40px;display:flex;align-items:center;gap:16px;padding:0 14px;font-size:11.5px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-panel) 55%,var(--bg-panel-2)),color-mix(in srgb,var(--bg-panel) 35%,var(--bg-panel-2)));color:var(--text);border-top:1px solid var(--hair)}
.st-item{display:flex;align-items:center;gap:8px;white-space:nowrap}
.st-label{color:var(--text-muted)}
.st-select{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 10px;border-radius:var(--r-sm);border:1px solid var(--hair-strong);background:var(--bg-panel-2);color:var(--text);font-weight:600}
.st-select i{font-style:normal;font-size:9px;color:var(--text-muted)}
.st-tun{margin-left:auto}
.phone{left:545px;top:150px;width:240px;height:490px;z-index:5;padding:7px;border-radius:var(--r-phone);background:linear-gradient(160deg,var(--border),var(--bg-panel) 40%,var(--bg-panel-2));color:var(--text);transform:perspective(1400px) rotateY(-9deg) rotateX(3deg) rotateZ(2deg);box-shadow:inset 0 1px 0 var(--hi-line),var(--thick-8),40px 60px 90px var(--shadow-deeper),0 0 70px var(--glow-accent-soft)}
.phone-screen{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-screen);background:var(--text);color:var(--ink)}
.ph-top{padding:10px 14px 13px;background:var(--bg-panel);color:var(--text)}
.ph-cam{display:block;width:56px;height:16px;margin:0 auto 10px;border-radius:var(--r-pill);background:var(--bg-panel-2)}
.ph-appbar{display:flex;align-items:center;gap:12px}
.ph-appbar svg{width:18px;height:18px}
.ph-title{font:800 16px/1 var(--font-display);letter-spacing:-.01em}
.ph-actions{margin-left:auto;display:flex;gap:12px;color:var(--text-muted)}
.ph-section{margin:0;padding:14px 16px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-muted)}
.ph-list{margin:0;padding:0;list-style:none}
.ph-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-light)}
.ph-list b{display:block;font-size:13px;font-weight:800}
.ph-list small{display:block;margin-top:4px;font-size:10.5px;color:var(--ink-muted)}
.chev{font-style:normal;font-size:16px;color:var(--ink-muted)}
.ph-bottom{margin-top:auto;height:62px;display:flex;align-items:center;padding:0 16px;background:var(--surface-soft);color:var(--ink);border-top:1px solid var(--line-light)}
.ph-state{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-muted)}
.ph-state .dot{width:8px;height:8px;flex-shrink:0;border-radius:var(--r-round);background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 25%,transparent)}
.ph-fab{position:absolute;right:16px;bottom:34px;width:56px;height:56px;border-radius:var(--r-round);display:grid;place-items:center;color:var(--ink);font:900 22px/1 var(--font-display);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 68%,var(--text)),var(--accent) 46%,var(--accent-dark));box-shadow:inset 0 1px 0 var(--hi-line-strong),0 3px 0 var(--accent-dark),0 12px 24px var(--glow-accent)}
.tile{left:6px;top:24px;z-index:4;width:92px;height:92px;border-radius:var(--r-lg);display:grid;place-items:center;transform:rotate(-12deg);background:linear-gradient(150deg,color-mix(in srgb,var(--border) 62%,var(--text)),var(--border) 36%,var(--bg-panel));color:var(--text);box-shadow:inset 0 2px 0 var(--hi-line-strong),inset 0 -10px 20px color-mix(in srgb,var(--bg-panel-2) 35%,transparent),var(--thick-tile),0 24px 40px var(--shadow-deep)}
.tile-switch{position:relative;width:50px;height:28px;border-radius:var(--r-pill);background:var(--accent);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--accent-dark) 85%,transparent),0 0 18px var(--glow-accent)}
.tile-switch::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:var(--r-round);background:linear-gradient(180deg,var(--text),var(--text-muted));box-shadow:0 2px 3px var(--shadow-deep)}
.cap{z-index:4;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px 0 14px;border-radius:var(--r-pill);font:800 14px/1 var(--font-mono);letter-spacing:.02em;white-space:nowrap;box-shadow:inset 0 1.5px 0 var(--hi-line-strong),var(--thick-cap)}
.cap::before{content:"";width:8px;height:8px;flex-shrink:0;border-radius:var(--r-round);background:currentColor;opacity:.4}
.cap--light{color:var(--ink);background:linear-gradient(180deg,var(--text),var(--text-muted))}
.cap--deep{color:var(--text);background:linear-gradient(180deg,color-mix(in srgb,var(--border) 80%,var(--text)),var(--bg-panel))}
.cap-vless{left:360px;top:24px;transform:rotate(6deg)}
.cap-trojan{left:676px;top:92px;transform:rotate(-12deg)}
.cap-vmess{left:-10px;top:372px;transform:rotate(-8deg)}
.cap-reality{left:398px;top:600px;transform:rotate(-4deg)}
.sign{left:150px;top:440px;width:250px;height:176px;z-index:4;filter:drop-shadow(0 18px 22px var(--shadow-deep))}
.sign .st-hi{stop-color:var(--text)}
.sign .st-lo{stop-color:var(--text-muted)}
.sign .st-ea{stop-color:var(--accent-dark)}
.sign .st-eb{stop-color:var(--bg-panel-2)}
.sign .st-pa{stop-color:var(--border)}
.sign .st-pb{stop-color:var(--bg-panel)}
.sign .sg-shadow{fill:var(--bg-panel-2);opacity:.6}
.sign .sg-hi{fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;opacity:.85}
.sign .sg-txt{font:800 15px var(--font-mono);fill:var(--ink);text-anchor:middle}
.peek{padding-top:28px;padding-bottom:96px}
.preview-heading{margin-top:0}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:16px}
.swatch{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--bg-panel-2);color:var(--text)}
.swatch-sample{display:block;height:84px}
.swatch code{display:block;padding:12px}
.sw-bg{background:var(--bg)}
.sw-panel{background:var(--bg-panel)}
.sw-panel2{background:var(--bg-panel-2)}
.sw-border{background:var(--border)}
.sw-accent{background:var(--accent)}
.sw-accent-dark{background:var(--accent-dark)}
.sw-text{background:var(--text)}
.sw-muted{background:var(--text-muted)}
.sw-success{background:var(--success)}
.sw-warn{background:var(--warn)}
.sw-error{background:var(--error)}
.preview-flow{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.preview-type{margin-top:24px}
.preview-focus{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:1000px){
  .tab-layout{grid-template-columns:190px minmax(0,1fr);gap:24px}
  .feature-tray{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:768px){
  .tab-layout{grid-template-columns:minmax(0,1fr)}
  .tab-rail{flex-direction:row;flex-wrap:wrap;gap:8px}
  .tab-rail [role="tab"]{flex:1 1 180px}
  .stage .desk{left:2%;top:50px;transform:scale(.7);transform-origin:top left}
  .stage .phone{left:auto;right:2%;top:100px;transform:scale(.65);transform-origin:top right}
  .stage .tile{left:0;top:0;transform:scale(.7) rotate(-12deg)}
  .stage .cap{font-size:12px;height:30px;padding-inline:10px}
  .stage .cap-vless{left:42%;top:10px}
  .stage .cap-trojan{left:auto;right:1%;top:55px}
  .stage .cap-vmess{display:none}
  .stage .cap-reality{left:44%;top:380px}
  .stage .sign{left:20%;top:300px;width:180px;height:127px}
  .stage .pool{left:30%;top:220px;width:70%;height:220px}
  .stage .ground{left:0;top:390px;width:100%}
  .stage .glow-back{left:0;width:100%;height:360px}
  .client-card{padding:28px}
}
@media(max-width:640px){
  .feature-visual,.feature-copy{padding:24px}
  .feature-copy h3{margin-top:0}
  .settings-sheet{padding:18px}
  .tab-rail [role="tab"]{flex-basis:125px;font-size:13px;padding-inline:12px}
  .client-card-head .badge{margin-left:0}
  .client-downloads{flex-direction:column;align-items:stretch}
  .callout{padding:20px}
  .dl-fab{right:16px;bottom:16px;font-size:14px;padding:12px 18px}
  .stage .desk{transform:scale(.43);top:38px;left:0}
  .stage .phone{transform:scale(.43);top:65px;right:0}
  .stage .tile{transform:scale(.45) rotate(-12deg);transform-origin:top left}
  .stage .cap{font-size:9px;height:24px;gap:5px;padding-inline:8px}
  .stage .cap-vless{top:3px;left:37%}
  .stage .cap-trojan{top:28px}
  .stage .cap-vmess{top:190px}
  .stage .cap-reality{top:270px;left:40%}
  .stage .sign{top:205px;left:13%;width:125px;height:88px}
  .stage .pool{top:160px;height:150px}
  .stage .ground{top:260px}
  .download-endcap{padding:24px}
}