/* Setup guide: device folder tabs + numbered steps with exact screenshots (markup: modules/setup_guide.py). */
.sg{
  --sg-accent:#00b8e6;--sg-accent2:#2f6bff;--sg-glow:rgba(0,184,230,.28);
  --sg-panel:#0c0f17;--sg-tab:#11151f;--sg-tab-hover:#161b28;--sg-line:rgba(255,255,255,.09);
  --sg-text:#f4f4f5;--sg-muted:#a1a1aa;--sg-mark:#ff7a1a;
  position:relative;margin:2.5rem 0 3rem;color:var(--sg-text);font-size:1rem;line-height:1.6;text-align:left;
}
.sg *,.sg *::before,.sg *::after{box-sizing:border-box;}
.sg-intro{max-width:760px;margin:0 0 1.6rem;}
.sg-intro h2{margin:0 0 .5rem;}
.sg-intro p{margin:0;color:var(--sg-muted);}

/* folder tabs: every device tab stays visible (one row on wide screens, a 4-column grid below 1100px).
   Theme button styles (gradients, 20px 40px padding, uppercase) are reset because the tabs are <button>s. */
.sg .sg-tabs{display:flex;gap:.3rem;align-items:flex-end;margin:0;padding:0 .6rem;overflow:visible;position:relative;z-index:2;}
.sg .sg-tab{appearance:none;flex:1 1 0;min-width:0;width:auto;height:auto;min-height:0;display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.32rem;margin:0;padding:.7rem 1.1rem .62rem!important;border:1px solid var(--sg-line)!important;
  border-bottom:0!important;border-radius:14px 14px 0 0!important;background:var(--sg-tab)!important;box-shadow:none!important;
  color:var(--sg-muted)!important;font-family:inherit;font-size:.8rem!important;font-weight:600;line-height:1.2!important;
  letter-spacing:.01em!important;text-transform:none!important;text-decoration:none!important;cursor:pointer;position:relative;
  transform:translateY(4px);transition:background .2s,color .2s,transform .2s;white-space:nowrap;}
.sg .sg-tab>span:not(.sg-tab-n){overflow:hidden;text-overflow:ellipsis;}
.sg .sg-tab::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:2px;border-radius:2px;background:transparent;transition:background .2s;}
.sg .sg-tab svg{width:20px;height:20px;flex:0 0 auto;opacity:.75;}
.sg .sg-tab:hover{background:var(--sg-tab-hover)!important;color:var(--sg-text)!important;transform:translateY(2px);}
.sg .sg-tab:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px;}
.sg .sg-tab[aria-selected="true"]{background:var(--sg-panel)!important;color:var(--sg-text)!important;transform:none;
  padding-bottom:.84rem!important;margin-bottom:-1px;z-index:3;}
.sg .sg-tab[aria-selected="true"]::before{background:linear-gradient(90deg,var(--sg-accent),var(--sg-accent2));}
.sg .sg-tab[aria-selected="true"] svg{opacity:1;color:var(--sg-accent);}
.sg .sg-tab-n{display:inline-grid;place-items:center;position:absolute;top:.4rem;right:.4rem;min-width:1.15rem;height:1.15rem;padding:0 .25rem;
  border-radius:999px;background:rgba(255,255,255,.06);font-size:.62rem;color:var(--sg-muted);}
.sg .sg-tab[aria-selected="true"] .sg-tab-n{background:var(--sg-glow);color:var(--sg-text);}
@media (max-width:1099px){
  .sg .sg-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;padding:0;margin-bottom:.85rem;}
  .sg .sg-tab{flex-direction:column;gap:.3rem;padding:.7rem .35rem .62rem!important;border:1px solid var(--sg-line)!important;
    border-radius:12px!important;transform:none;white-space:normal;text-align:center;}
  .sg .sg-tab:hover{transform:none;}
  .sg .sg-tab[aria-selected="true"]{padding-bottom:.62rem!important;margin-bottom:0;border-color:var(--sg-accent)!important;
    box-shadow:0 0 0 1px var(--sg-accent),0 8px 22px var(--sg-glow)!important;}
  .sg .sg-tab>span:not(.sg-tab-n){overflow:visible;}
  .sg .sg-tab-n{position:absolute;top:.35rem;right:.35rem;min-width:1.15rem;height:1.15rem;font-size:.62rem;}
  .sg .sg-tab svg{width:20px;height:20px;flex-basis:auto;}
}
@media (max-width:560px){
  .sg .sg-tabs{gap:.35rem;}
  .sg .sg-tab{padding:.6rem .2rem .5rem!important;font-size:.72rem!important;}
  .sg .sg-tab-n{display:none;}
}

/* folder body */
.sg-panels{position:relative;border:1px solid var(--sg-line);border-radius:18px;background:var(--sg-panel);
  box-shadow:0 30px 80px rgba(0,0,0,.45);}
.sg-panel{padding:clamp(1.25rem,3vw,2.5rem);}
.sg-panel + .sg-panel{border-top:1px solid var(--sg-line);}
.sg-js .sg-panel[hidden]{display:none;}
.sg-js .sg-panel + .sg-panel{border-top:0;}
.sg-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;
  padding-bottom:1.4rem;margin-bottom:1.6rem;border-bottom:1px dashed var(--sg-line);}
.sg-head-copy{max-width:640px;}
.sg-head h2,.sg-head h3{margin:0 0 .45rem;font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.15;color:var(--sg-text);}
.sg-head p{margin:0;color:var(--sg-muted);}
.sg-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;}
.sg-meta li{margin:0;padding:.42rem .8rem;border:1px solid var(--sg-line);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:.82rem;color:var(--sg-muted);white-space:nowrap;}
.sg-meta li::before{content:none;}
.sg-meta strong{color:var(--sg-text);font-weight:600;}

/* steps timeline */
.sg-steps{list-style:none;margin:0;padding:0;counter-reset:none;position:relative;}
.sg-steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;
  background:linear-gradient(var(--sg-accent),var(--sg-accent2) 60%,transparent);opacity:.35;}
.sg-step{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.4rem 2.4rem;align-items:center;
  margin:0 0 2.2rem;padding:0 0 0 64px;}
.sg-step:last-child{margin-bottom:0;}
.sg-step::before{content:none;}
.sg-num{position:absolute;left:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--sg-panel);border:2px solid var(--sg-accent);color:var(--sg-text);font-weight:700;font-size:1.05rem;
  box-shadow:0 0 0 6px var(--sg-panel),0 0 22px var(--sg-glow);}
.sg .sg-step-copy h3,.sg .sg-step-copy h4{margin:0 0 .45rem;font-family:inherit;font-size:1.14rem;font-weight:700;line-height:1.3;
  text-transform:none;letter-spacing:normal;color:var(--sg-text);}
.sg-step-copy p{margin:0 0 .55rem;color:#d4d4d8;}
.sg-step-copy p:last-child{margin-bottom:0;}
.sg-step-copy strong{color:#fff;}
.sg-step-copy code{padding:.08rem .4rem;border-radius:6px;background:rgba(255,255,255,.08);font-size:.92em;color:#fff;}
.sg-tip{display:flex;gap:.55rem;margin-top:.7rem!important;padding:.6rem .8rem;border-radius:10px;
  background:rgba(255,122,26,.08);border:1px solid rgba(255,122,26,.22);font-size:.88rem;color:#e7e5e4!important;}
.sg-tip::before{content:"";flex:0 0 8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--sg-mark);}

/* screenshot frames */
.sg-shot{margin:0;justify-self:center;width:100%;}
.sg-zoom{appearance:none;display:block;width:100%;margin:0;padding:0;border:0;background:none;cursor:zoom-in;position:relative;}
.sg-zoom img{display:block;width:100%;height:auto;margin:0;border-radius:6px;}
.sg-zoom:focus-visible{outline:2px solid var(--sg-accent);outline-offset:4px;border-radius:12px;}
.sg-zoom::after{content:"";position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;opacity:0;transition:opacity .2s;
  background:rgba(0,0,0,.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-5-5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;}
.sg-zoom:hover::after,.sg-zoom:focus-visible::after{opacity:1;}
.sg-shot--tv .sg-zoom,.sg-shot--desktop .sg-zoom{padding:8px;border-radius:14px;background:linear-gradient(160deg,#2a2d36,#0d0f14);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.55);}
.sg-shot--tv .sg-zoom img,.sg-shot--desktop .sg-zoom img{border-radius:6px;}
.sg-shot--tv::after{content:"";display:block;width:22%;height:6px;margin:6px auto 0;border-radius:0 0 8px 8px;background:#1b1e26;}
.sg-shot--phone{max-width:280px;}
.sg-shot--phone .sg-zoom{padding:10px;border-radius:40px;background:#0b0c10;box-shadow:0 0 0 2px #2b2e37,0 22px 46px rgba(0,0,0,.55);}
.sg-shot--phone .sg-zoom img{border-radius:30px;}
.sg-shot--phonel .sg-zoom{padding:9px;border-radius:34px;background:#0b0c10;box-shadow:0 0 0 2px #2b2e37,0 22px 46px rgba(0,0,0,.55);}
.sg-shot--phonel .sg-zoom img{border-radius:26px;}
.sg-shot figcaption{margin-top:.7rem;font-size:.82rem;color:var(--sg-muted);text-align:center;}

.sg-done{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;margin-top:2.4rem;padding:1.2rem 1.4rem;
  border-radius:14px;background:linear-gradient(120deg,rgba(0,184,230,.12),rgba(47,107,255,.10));border:1px solid var(--sg-line);}
.sg-done p{margin:0;max-width:620px;color:#e4e4e7;}
.sg-done-btns{display:flex;flex-wrap:wrap;gap:.6rem;}
.sg-btn{display:inline-flex;align-items:center;justify-content:center;padding:.72rem 1.2rem;border-radius:10px;font-weight:600;font-size:.9rem;
  text-decoration:none!important;color:#fff!important;background:linear-gradient(90deg,var(--sg-accent),var(--sg-accent2));border:0;}
.sg-btn--ghost{background:transparent;border:1px solid var(--sg-line);}
.sg-btn:hover{filter:brightness(1.08);}

/* lightbox */
.sg-lb{padding:0;border:0;background:transparent;max-width:min(1200px,94vw);max-height:94vh;color:#fff;overflow:visible;}
.sg-lb::backdrop{background:rgba(3,5,10,.86);backdrop-filter:blur(4px);}
.sg-lb img{display:block;max-width:100%;max-height:82vh;margin:0 auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.sg-lb-cap{margin:.8rem 0 0;text-align:center;font-size:.92rem;color:#d4d4d8;}
.sg-lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.55);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;}
.sg-lb-prev{left:-60px;}.sg-lb-next{right:-60px;}
.sg-lb-x{position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.55);color:#fff;font-size:1.3rem;cursor:pointer;}

/* prose columns are ~600px; the guide breaks out to a centred 1180px band so screenshots stay readable */
@media (min-width:901px){
  .sg{width:min(1180px,calc(100vw - 64px));margin-left:calc(50% - min(590px,calc(50vw - 32px)));}
  .sg-step{margin-bottom:3rem;}
}
@media (max-width:900px){
  .sg-panels{border-radius:14px;}
  .sg-step{grid-template-columns:1fr;gap:1rem;padding-left:54px;margin-bottom:2rem;}
  .sg-num{top:0;transform:none;width:38px;height:38px;font-size:.95rem;}
  .sg-steps::before{left:18px;}
  .sg-shot--phone{max-width:230px;justify-self:start;}
  .sg-lb-prev{left:6px;}.sg-lb-next{right:6px;}
  .sg-lb-x{top:-48px;right:6px;}
}
@media (max-width:480px){
  .sg-panel{padding:1.1rem .9rem;}
  .sg-step{padding-left:0;}
  .sg-steps::before{display:none;}
  .sg-num{position:static;margin-bottom:.6rem;box-shadow:0 0 18px var(--sg-glow);}
  .sg-shot--tv .sg-zoom,.sg-shot--desktop .sg-zoom{padding:5px;border-radius:10px;}
  .sg-shot--phone{max-width:220px;justify-self:center;}
}
@media (prefers-reduced-motion:reduce){.sg-tab,.sg-zoom::after{transition:none;}}