:root{
    --bg1:#071a3a; --bg2:#0b2350; --bg3:#0a1c44;
    --accent:#16c7e6; --accent-2:#3ad0c9; --accent-deep:#0fa6c2; --accent-rgb:22,199,230; --halo-rgb:96,132,255;
    --bg-top:#103066;
    --text:#eaf1ff; --muted:rgba(234,241,255,.60); --faint:rgba(234,241,255,.40);
    --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.07);
    --danger:#ff7a8a; --danger-bg:rgba(255,122,138,.10);
    --ok:#3ee08f; --wa:#25d366;
    --radius:26px;
    --shadow:0 40px 90px -28px rgba(0,0,0,.72), 0 14px 36px -16px rgba(0,0,0,.55);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  }

  /* ===== Tweak · Clima (color world) ===== */
  html[data-clima="mare"]{
    --accent:#2fd6b0; --accent-2:#5fe6c4; --accent-deep:#1ba585; --accent-rgb:47,214,176; --halo-rgb:46,230,205;
    --bg1:#04211d; --bg2:#073a33; --bg-top:#0a4a3f;
  }
  html[data-clima="sunset"]{
    --accent:#ffb454; --accent-2:#ff9e6a; --accent-deep:#e8893a; --accent-rgb:255,180,84; --halo-rgb:255,120,150;
    --bg1:#160c2c; --bg2:#2a1542; --bg-top:#3c1d54;
  }
  /* ===== Tweak · Atmosfera (ambient density) ===== */
  html[data-atmos="suave"] .glow{opacity:.5}
  html[data-atmos="suave"] .stars-bg{display:none}
  html[data-atmos="suave"] .skyline{opacity:.3}
  html[data-atmos="limpa"] .glow{opacity:.16}
  html[data-atmos="limpa"] .stars-bg{display:none}
  html[data-atmos="limpa"] .skyline{display:none}
  /* ===== Tweak · Cartão (surface style) ===== */
  html[data-card="solido"] .card{
    background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.035)), var(--bg2);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  html[data-card="contorno"] .card{
    background:rgba(255,255,255,.022);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 22px 50px -30px rgba(0,0,0,.6);
    border-color:rgba(255,255,255,.18);
  }
  html[data-card="contorno"] .card::before{opacity:.22}
  /* ===== accent-follow for inline SVGs / gradients ===== */
  .brand .mark svg{stroke:var(--accent)}
  .brand .mark svg circle{fill:var(--accent)}
  .ring svg circle:nth-child(2){stroke:var(--accent)}
  .ring .pulse svg{stroke:var(--accent)}
  .ring .pulse svg circle{fill:var(--accent)}
  #starG stop:nth-child(1){stop-color:var(--accent)}
  #starG stop:nth-child(2){stop-color:var(--accent-2)}
  .skyline g:last-of-type rect{fill:var(--accent)}

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0; font-family:var(--font); color:var(--text);
    background:
      radial-gradient(120% 80% at 50% -10%, var(--bg-top) 0%, var(--bg2) 38%, var(--bg1) 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:22px 16px calc(22px + env(safe-area-inset-bottom));
    overflow-x:hidden;
  }

  /* ---- ambient background: glow + discreet skyline ---- */
  .bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
  .glow{
    position:absolute; left:50%; top:18%; width:560px; height:560px; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(var(--accent-rgb),.24), rgba(var(--accent-rgb),0) 65%);
    filter:blur(8px); opacity:.9; animation:breathe 9s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
  .skyline{position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; opacity:.5}
  .stars-bg span{position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.5); animation:tw 4s ease-in-out infinite}
  .stars-bg span:nth-child(1){left:12%;top:14%;animation-delay:.2s}
  .stars-bg span:nth-child(2){left:82%;top:10%;animation-delay:1.1s}
  .stars-bg span:nth-child(3){left:67%;top:20%;width:1.5px;height:1.5px;animation-delay:2s}
  .stars-bg span:nth-child(4){left:24%;top:8%;width:1.5px;height:1.5px;animation-delay:.7s}
  .stars-bg span:nth-child(5){left:91%;top:26%;animation-delay:1.6s}
  @keyframes tw{0%,100%{opacity:.25}50%{opacity:.9}}

  /* ---- aurora mesh + grain + vignette (premium depth) ---- */
  .aurora{position:absolute;inset:-12% -12% 0;overflow:hidden;filter:blur(64px);opacity:.95}
  .aurora b{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;will-change:transform}
  .aurora .a1{width:54vw;height:54vw;max-width:640px;max-height:640px;left:-10vw;top:-12vw;
    background:radial-gradient(circle,rgba(var(--accent-rgb),.5),transparent 68%);animation:drift1 19s ease-in-out infinite}
  .aurora .a2{width:48vw;height:48vw;max-width:560px;max-height:560px;right:-12vw;top:5vh;
    background:radial-gradient(circle,rgba(var(--halo-rgb),.42),transparent 68%);animation:drift2 23s ease-in-out infinite}
  .aurora .a3{width:42vw;height:42vw;max-width:500px;max-height:500px;left:16vw;bottom:-18vh;
    background:radial-gradient(circle,rgba(var(--accent-rgb),.30),transparent 70%);animation:drift3 27s ease-in-out infinite}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,7%) scale(1.12)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,5%) scale(1.1)}}
  @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-7%) scale(1.12)}}
  .grain{position:absolute;inset:0;opacity:.045;mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px}
  .vignette{position:absolute;inset:0;background:radial-gradient(125% 95% at 50% 32%,transparent 52%,rgba(2,7,20,.6) 100%)}
  html[data-atmos="suave"] .aurora{opacity:.55}
  html[data-atmos="limpa"] .aurora{opacity:.22}

  /* ---- social buttons ---- */
  .social-block{margin-top:20px;text-align:center}
  .social-label{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
  .social{display:flex;gap:12px;justify-content:center}
  .social a{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
    border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);
    transition:transform .16s ease, background .25s, border-color .25s, box-shadow .25s, color .25s}
  .social a svg{width:22px;height:22px}
  .social a:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
  .social a:active{transform:translateY(-1px) scale(.96)}
  .social a.ig:hover{background:linear-gradient(135deg,#feda75,#fa7e1e 28%,#d62976 58%,#962fbf 80%,#4f5bd5);border-color:transparent;color:#fff;box-shadow:0 12px 26px -8px rgba(214,41,118,.6)}
  .social a.wa:hover{background:linear-gradient(135deg,#2fe675,#25d366);border-color:transparent;color:#04240f;box-shadow:0 12px 26px -8px rgba(37,211,102,.55)}

  /* ---- card ---- */
  .shell{position:relative; z-index:1; width:100%; max-width:404px; margin:auto 0}
  .shell::before{content:"";position:absolute;left:50%;top:-6%;width:118%;height:60%;transform:translateX(-50%);
    background:radial-gradient(60% 60% at 50% 0%,rgba(var(--accent-rgb),.22),transparent 72%);
    filter:blur(26px);z-index:-1;pointer-events:none}
  .card{
    position:relative; width:100%;
    background:linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
    border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
    padding:26px 24px 22px;
    overflow:hidden;
  }
  .card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}

  /* ---- brand header ---- */
  .brand{display:flex; flex-direction:column; align-items:center; gap:0; justify-content:center; margin-bottom:4px}
  .brand .logo{height:56px; width:auto; display:block;
    filter:drop-shadow(0 6px 18px rgba(var(--accent-rgb),.45)) drop-shadow(0 2px 4px rgba(0,0,0,.3))}
  .brand-tag{font-size:10.5px;font-weight:700;letter-spacing:2.2px;color:var(--muted);text-transform:uppercase;margin-top:11px;text-align:center}
  .brand .mark{width:40px;height:40px;flex:none;display:grid;place-items:center;
    background:linear-gradient(150deg,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.05));
    border:1px solid rgba(var(--accent-rgb),.4);border-radius:12px;
    box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06), 0 10px 24px -8px rgba(var(--accent-rgb),.55)}
  .brand .wm{display:flex;flex-direction:column;line-height:1}
  .brand .wm b{font-size:21px;font-weight:800;letter-spacing:1.5px}
  .brand .wm b i{font-style:normal;color:var(--accent)}
  .brand .wm small{font-size:10px;font-weight:600;letter-spacing:.6px;color:var(--muted);margin-top:4px;text-transform:uppercase}
  .brand-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.4),transparent);margin:18px 0 4px}

  /* ---- screens ---- */
  .stage{position:relative}
  .screen{display:none}
  .screen.active{display:block}
  .screen.active.in{animation:enter .42s cubic-bezier(.2,.7,.2,1)}
  @keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  h1{font-size:23px;line-height:1.2;font-weight:750;margin:18px 0 8px;letter-spacing:-.2px;text-wrap:balance}
  .sub{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0 0 22px;text-wrap:pretty}
  .center{text-align:center}

  /* ---- buttons ---- */
  .btn{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;min-height:54px;padding:0 18px;border:0;border-radius:15px;
    font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.1px;cursor:pointer;
    transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
    -webkit-user-select:none;user-select:none;
  }
  .btn:active{transform:scale(.978)}
  .btn-primary:hover,.btn-ghost:hover,.btn-wa:hover{transform:translateY(-1px)}
  .btn-primary{color:#04222b;
    background:linear-gradient(135deg,var(--accent),var(--accent-deep));
    box-shadow:0 10px 26px -8px rgba(var(--accent-rgb),.6), inset 0 1px 0 rgba(255,255,255,.3)}
  .btn-primary:hover{box-shadow:0 14px 32px -8px rgba(var(--accent-rgb),.78), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn-ghost{color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line)}
  .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
  .btn-wa{color:#04240f;background:linear-gradient(135deg,#2fe675,var(--wa));box-shadow:0 10px 26px -8px rgba(37,211,102,.55)}
  .btn-link{background:none;border:0;color:var(--muted);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:12px;width:100%;text-align:center}
  .btn-link:hover{color:var(--text)}
  .btn-row{display:flex;flex-direction:column;gap:11px;margin-top:6px}

  /* ---- forms ---- */
  .field{margin-bottom:13px}
  .field label{display:block;font-size:12.5px;font-weight:650;color:var(--muted);margin:0 0 7px;letter-spacing:.2px}
  .field label .opt{color:var(--faint);font-weight:500}
  .input{
    width:100%;min-height:54px;padding:14px 16px;border-radius:14px;
    background:rgba(255,255,255,.045);border:1px solid var(--line);
    color:var(--text);font-family:inherit;font-size:16px;font-weight:500;
    transition:border-color .18s, box-shadow .18s, background .18s;
  }
  .input::placeholder{color:var(--faint)}
  .input:focus{outline:none;border-color:var(--accent);background:rgba(var(--accent-rgb),.06);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
  .field.err .input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,122,138,.18)}
  .field .msg{display:none;font-size:12.5px;color:var(--danger);margin-top:7px;font-weight:600}
  .field.err .msg{display:block;animation:enter .25s}
  .input-cpf{letter-spacing:1px;font-variant-numeric:tabular-nums}

  /* ---- checkbox ---- */
  .check{display:flex;gap:12px;align-items:flex-start;margin:4px 0 20px;cursor:pointer}
  .check input{position:absolute;opacity:0;width:0;height:0}
  .check .box{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);
    background:rgba(255,255,255,.04);display:grid;place-items:center;transition:.18s;margin-top:1px}
  .check .box svg{width:14px;height:14px;opacity:0;transform:scale(.6);transition:.18s}
  .check input:checked + .box{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-color:transparent}
  .check input:checked + .box svg{opacity:1;transform:scale(1)}
  .check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(22,199,230,.3)}
  .check .ctxt{font-size:13px;line-height:1.45;color:var(--muted)}
  .check .ctxt a{color:var(--accent);text-decoration:none;font-weight:600}
  .check.err .box{border-color:var(--danger)}

  /* ---- progress ---- */
  .progress{margin-bottom:6px}
  .steps{display:flex;gap:6px}
  .steps i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
  .steps i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s ease}
  .steps i.done::after{width:100%}
  .steps i.active::after{width:100%;animation:none}
  .step-label{font-size:11.5px;font-weight:700;letter-spacing:.6px;color:var(--accent);text-transform:uppercase;margin-top:11px}

  /* ---- spinner ---- */
  .loader{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 0 8px}
  .ring{width:74px;height:74px;position:relative;margin:8px 0 26px}
  .ring svg{width:100%;height:100%;animation:spin 1.1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ring .pulse{position:absolute;inset:0;display:grid;place-items:center}
  .ring .pulse svg{width:30px;height:30px;animation:none}

  /* ---- success ---- */
  .result{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 0 6px}
  .badge{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:6px 0 22px;position:relative}
  .badge.ok{background:radial-gradient(circle,rgba(62,224,143,.18),rgba(62,224,143,.03))}
  .badge.bad{background:radial-gradient(circle,rgba(255,122,138,.16),rgba(255,122,138,.02))}
  .badge.warn{background:radial-gradient(circle,rgba(255,196,84,.16),rgba(255,196,84,.02))}
  .badge svg{width:46px;height:46px}
  .screen.active.in .badge .draw{stroke-dasharray:80;stroke-dashoffset:80;animation:draw .6s .15s ease forwards}
  .screen.active.in .badge .ring2{stroke-dasharray:170;stroke-dashoffset:170;animation:draw .7s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}

  .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
    background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);
    font-weight:750;font-size:15px;color:var(--text);margin:2px 0 22px;font-variant-numeric:tabular-nums}
  .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(62,224,143,.18);animation:blink 1.6s infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

  /* reason box (blocked) */
  .note{width:100%;text-align:left;border-radius:14px;padding:14px 16px;margin:0 0 20px;display:flex;gap:12px;align-items:flex-start}
  .note.bad{background:var(--danger-bg);border:1px solid rgba(255,122,138,.28)}
  .note .ico{flex:none;margin-top:1px}
  .note b{display:block;font-size:14px;margin-bottom:3px}
  .note span{font-size:13px;color:var(--muted);line-height:1.45}

  /* ---- stars / nps ---- */
  .stars{display:flex;gap:8px;justify-content:center;margin:6px 0 14px;direction:rtl}
  .stars button{background:none;border:0;cursor:pointer;padding:5px;line-height:0;border-radius:10px;transition:transform .12s}
  .stars button:active{transform:scale(.9)}
  .stars svg{width:38px;height:38px}
  .stars path{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.22);stroke-width:1.5;transition:.15s}
  .stars button:hover svg path,.stars button:hover ~ button svg path,
  .stars button.on svg path,.stars button.on ~ button svg path{fill:url(#starG);stroke:var(--accent-deep)}
  .nps-label{text-align:center;font-size:14px;font-weight:700;color:var(--accent);min-height:20px;margin-bottom:22px;transition:.2s}

  /* ---- offer ---- */
  .offer{position:relative;border-radius:18px;overflow:hidden;margin:0 0 20px;border:1px solid var(--line)}
  .offer .art{position:relative;padding:26px 20px;background:
    linear-gradient(135deg,var(--accent),var(--accent-2)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 12px,transparent 12px 24px)}
  .offer .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
    color:#04323d;background:rgba(255,255,255,.65);padding:5px 10px;border-radius:999px;margin-bottom:12px}
  .offer .art h3{margin:0 0 6px;font-size:22px;font-weight:800;color:#042b35;letter-spacing:-.3px;line-height:1.15}
  .offer .art p{margin:0;font-size:13.5px;color:#06363f;font-weight:600;opacity:.85}
  .offer .price{position:absolute;right:18px;bottom:16px;text-align:right;color:#042b35}
  .offer .price em{display:block;font-style:normal;font-size:11px;font-weight:700;opacity:.7}
  .offer .price b{font-size:26px;font-weight:850;letter-spacing:-.5px}
  .offer .price b small{font-size:13px;font-weight:700}

  /* footer trust */
  .trust{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;color:var(--faint);font-size:11.5px;font-weight:600}
  .trust svg{width:13px;height:13px;opacity:.7}

  /* ---- demo panel ---- */
  .demo-fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;
    width:46px;height:46px;border-radius:14px;border:1px solid var(--line);
    background:rgba(11,35,80,.85);backdrop-filter:blur(10px);color:var(--muted);cursor:pointer;display:grid;place-items:center}
  .demo-fab:hover{color:var(--text)}
  .demo-fab svg{width:20px;height:20px}
  .demo-panel{position:fixed;right:14px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:50;
    width:230px;max-height:70vh;overflow:auto;border-radius:16px;border:1px solid var(--line);
    background:rgba(8,24,56,.96);backdrop-filter:blur(14px);box-shadow:var(--shadow);padding:12px;
    display:none}
  .demo-panel.open{display:block;animation:enter .25s}
  .demo-panel h4{margin:2px 0 10px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
  .demo-panel button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--muted);
    font-family:inherit;font-size:13px;font-weight:600;padding:9px 10px;border-radius:9px;cursor:pointer}
  .demo-panel button:hover{background:rgba(255,255,255,.07);color:var(--text)}
  .demo-panel .grp{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);padding:10px 10px 4px;font-weight:800}

  /* ---- tweaks panel (aparência) ---- */
  .tw-fab{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;
    width:46px;height:46px;border-radius:14px;border:1px solid var(--line);
    background:rgba(11,35,80,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:color .2s}
  .tw-fab:hover{color:var(--accent)}
  .tw-fab svg{width:20px;height:20px}
  .tw-panel{position:fixed;left:14px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:50;
    width:250px;max-height:78vh;overflow:auto;border-radius:18px;border:1px solid var(--line);
    background:rgba(8,24,56,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:var(--shadow);padding:16px;display:none}
  .tw-panel.open{display:block;animation:enter .25s}
  .tw-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
  .tw-head b{font-size:14.5px;font-weight:750;display:block}
  .tw-head .tw-sub{display:block;font-size:11px;color:var(--faint);font-weight:600;margin-top:3px}
  .tw-x{background:none;border:0;color:var(--faint);font-size:15px;cursor:pointer;line-height:1;padding:4px;margin:-4px -4px 0 0}
  .tw-x:hover{color:var(--text)}
  .tw-group{margin-bottom:14px}
  .tw-group:last-child{margin-bottom:2px}
  .tw-group > label{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
  .seg{display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;padding:5px}
  .seg button{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--muted);
    font-family:inherit;font-size:13px;font-weight:600;padding:10px 10px;border-radius:9px;cursor:pointer;
    transition:.15s;text-align:left;width:100%}
  .seg button:hover{color:var(--text);background:rgba(255,255,255,.05)}
  .seg button.on{background:rgba(var(--accent-rgb),.15);color:var(--text)}
  .seg .rd{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);flex:none;transition:.15s;box-sizing:border-box}
  .seg button.on .rd{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 38%,transparent 44%)}
  .seg .sw{width:18px;height:18px;border-radius:6px;flex:none;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

  @media (max-width:360px){
    h1{font-size:21px}
    .card{padding:22px 18px 18px}
  }