:root{
      --accent: var(--dz-accent);
      --bg: var(--dz-bg);
      --text: var(--dz-text);
      --muted: #a6a7b3;
      --card: #0b1220;
      --stroke: #253042;
      --cta: var(--dz-gold);
      --orange: var(--dz-gold-deep);
      --ctaText: var(--dz-on-gold);
      --danger: #ff4455;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{background:var(--bg)}
    body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif; color:var(--text); overflow-x:hidden}

    /* Fundo brilhos */
    #stars{position:fixed; inset:0; z-index:-1; pointer-events:none; filter:drop-shadow(0 0 2px var(--accent));}

    .container{width:min(1200px, 92%); margin-inline:auto}
    .section{padding:72px 0}
    @media (max-width: 768px){ .section{padding:56px 0} }

    /* ===== HEADER inteligente ===== */
    .main-header{
      position:fixed; inset-inline:0; top:0; transform:translateY(-120%);
      transition:transform .28s ease, background .2s ease, box-shadow .2s ease;
      background: rgba(12,18,32,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      border-bottom:1px solid rgba(37,48,66,.5); z-index:1500;
    }
    .main-header.show{ transform:translateY(0) }
    .main-header.atTop{ background: rgba(12,18,32,.35); border-bottom-color:transparent; }
    .header-content{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
    .header-left{display:flex; align-items:center; gap:14px}
    .header-logo{height:50px; width:auto; object-fit:contain; filter:none}
    .nav{display:flex; align-items:center; gap:16px}
    .nav a{color:var(--dz-text-2); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px}
    .nav a:hover{background:rgba(47,166,184,.12); color:#fff}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 18px; border-radius:12px; border:0; font-weight:600; cursor:pointer; text-decoration:none; position:relative}
    .btn-outline{background:transparent; color:var(--accent); border:2px solid var(--accent); padding:8px 16px; border-radius:12px; font-weight:700; transition:background .25s, color .25s, transform .06s}
    .btn-outline:hover{background:var(--accent); color:var(--dz-on-accent)}
    .btn-outline:active{transform:translateY(1px)}
    .btn-cta{color:var(--ctaText); background:linear-gradient(180deg, var(--cta) 0%, color-mix(in oklab, var(--cta) 55%, var(--orange) 45%) 52%, var(--orange) 100%); box-shadow: 0 5px 10px rgba(197,84,0,.22)}
    .btn-cta:active{transform:translateY(2px); box-shadow: 0 4px 8px rgba(154,71,0,.22)}

    /* Hamburguer (mobile) */
    .hamb{display:none; width:42px; height:42px; border-radius:12px; border:1px solid #264056; background:#0f1a2a; color:#bfe9ee; place-items:center}
    .hamb svg{width:22px; height:22px}
    @media (max-width:900px){
      .nav{display:none}
      .hamb{display:grid}
      .header-right .btn{padding:7px 12px; border-radius:10px; font-size:.9rem}
      .header-right .btn-cta{padding:8px 14px}
      .header-logo{height:46px}
    }

    /* ===== POPUP MENU ===== */
    .menu-backdrop{position:fixed; inset:0; display:none; z-index:1800; background:transparent}
    .menu-backdrop.show{display:block}
    .menu-card{
      position:fixed; top:60px; right:10px; width:min(240px, 82vw);
      background:var(--card); border:1px solid var(--dz-border); border-radius:14px; padding:10px;
      box-shadow:0 12px 36px rgba(0,0,0,.45);
    }
    .menu-list{display:grid; gap:6px; margin:4px 0 6px}
    .menu-link{display:block; padding:9px 10px; border-radius:10px; background:var(--dz-surface-2); border:1px solid var(--dz-border); color:#d7e8ea; text-decoration:none; font-weight:700; font-size:.95rem}
    .menu-link:hover{background:#13223a}
    .menu-actions{display:flex; flex-direction:column; gap:6px; margin-top:6px}
    .menu-actions .btn,
    .menu-actions .btn-cta,
    .menu-actions .btn-outline{width:100%; justify-content:center; padding:9px 12px; border-radius:12px; font-size:.96rem}

    /* ===== HERO ===== */
    .hero{min-height:72vh; display:grid; place-items:center; text-align:center; padding:96px 0 36px; position:relative; overflow:hidden}
    .logo-main{width:min(260px, 42vw); height:min(260px, 42vw); object-fit:contain; margin:0 auto 22px; filter:none}
    .headline{font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1.04; font-weight:600; letter-spacing:-.02em; margin:0}
    .headline .accent{color:var(--accent)}
    .sub{color:#fff; font-size:clamp(1.08rem, 2vw, 1.35rem); margin:16px auto 0; max-width:860px}
    .sub .dz{background:linear-gradient(180deg, var(--cta) 0%, var(--orange) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
    .cta-row{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:22px}
    .cta-row .btn-cta{font-size:1.35rem; padding:16px 34px; border-radius:12px; letter-spacing:.02em}

    /* Ajustes MOBILE hero */
    @media (max-width:900px){
      .logo-main{width:min(320px, 58vw); height:auto; margin-top:10px; margin-bottom:14px}
      .hero{padding-top:98px}
      .cta-row{margin-top:22px}
    }

    /* ===== REVEAL ===== */
    .reveal{opacity:0; transform:translateY(18px); filter:blur(8px); transition:opacity .7s ease, transform .7s ease, filter .6s ease; will-change: opacity, transform, filter;}
    .reveal.show{opacity:1; transform:none; filter:blur(0)}

    /* ===== COMO JOGAR ===== */
    .how{position:relative}
    .how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    @media (max-width:900px){ .how-grid{grid-template-columns:1fr} }
    .how-card{background:var(--card); border:1px solid var(--dz-border); border-radius:12px; padding:18px; text-align:center; display:flex; flex-direction:column; align-items:center}
    .step{width:54px; height:54px; border-radius:999px; background:var(--accent); color:var(--dz-bg); display:grid; place-items:center; font-weight:700; font-size:1.15rem; box-shadow:0 6px 14px rgba(0,0,0,.30); animation:float 3.2s ease-in-out infinite; margin-bottom:10px}
    .how-card:nth-child(2) .step{animation-delay:.4s}
    .how-card:nth-child(3) .step{animation-delay:.8s}
    .how-card h3{margin:0 0 6px}
    .how-card p{margin:0; color:var(--muted)}
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

    /* ===== JOGOS ===== */
    .games{position:relative}
    .game-slider{position:relative; background:var(--card); border:1px solid color-mix(in oklab, var(--accent) 18%, transparent); border-radius:12px; overflow:hidden}
    .g-item{display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:stretch}
    .g-img{width:100%; height:100%; object-fit:cover; min-height:300px; background:#0a1220; border-right:1px solid color-mix(in oklab, var(--accent) 12%, transparent)}
    .g-info{display:flex; flex-direction:column; justify-content:center; padding:18px 18px 18px 0}
    .g-info h3{margin:0 0 8px; font-size:clamp(1.4rem, 2.4vw, 2rem); text-align:left}
    .g-desc{color:var(--muted); margin:0 0 16px; text-align:left}
    .g-foot{display:flex; align-items:center; gap:12px}
    .g-foot .btn-cta{padding:10px 18px}
    .g-nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
    .g-btn{pointer-events:auto; margin:0 8px; width:48px; height:48px; border-radius:14px; border:0; color:var(--dz-on-accent); font-weight:700; display:grid; place-items:center; cursor:pointer; background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white 8%) 0%, color-mix(in oklab, var(--accent) 65%, var(--dz-accent-deep) 35%) 52%, #0b7c86 100%); box-shadow: 0 8px 16px rgba(0,0,0,.22); transition:transform .08s ease}
    .g-btn:active{transform:translateY(2px)}
    .g-dots{display:flex; justify-content:center; gap:8px; padding:12px}
    .g-dot{width:8px; height:8px; border-radius:999px; background:#1e2a3a; border:1px solid #264056; opacity:.6; cursor:pointer; transition:opacity .2s,width .2s}
    .g-dot.active{opacity:1; width:18px; background:var(--accent); border-color:transparent}
    .g-click{position:absolute; inset:0; z-index:1; cursor:pointer; background:transparent}
    @media (max-width: 900px){
      .g-item{grid-template-columns:1fr; gap:0}
      .g-img{min-height:46vw; border-right:0; border-bottom:1px solid color-mix(in oklab, var(--accent) 12%, transparent)}
      .g-info{padding:16px}
      .g-nav{display:none}
    }

    /* ===== CONVITE ===== */
    .invite{position:relative; background:var(--card); border:1px solid color-mix(in oklab, var(--accent) 18%, transparent); border-radius:12px; padding:0; overflow:hidden}
    .invite-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; align-items:center}
    @media (max-width:900px){.invite-grid{grid-template-columns:1fr}}
    .invite .img-wrap{padding:14px}
    .invite .img-wrap img{width:100%; height:100%; object-fit:cover; border-radius:12px}
    .invite-copy{padding:24px}
    .invite-copy h2{margin:4px 0 8px}
    .invite-copy .btn-cta{margin-top:10px; align-self:flex-start}

    /* ===== TIERS ===== */
    .tiers{padding:60px 0}
    .tier-wrap{position:relative}
    .tier-viewport{overflow:hidden; padding:12px 24px; mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);}
    .tier-track{display:flex; gap:28px; align-items:stretch; will-change:transform; transition:transform .45s ease}
    .tier{width:300px; border-radius:12px; background:var(--card); border:1px solid color-mix(in oklab, var(--accent) 20%, transparent); display:grid; grid-template-rows:auto auto 1fr; padding:16px; text-align:center; transition:transform .45s ease, opacity .45s ease, filter .45s ease; z-index:1}
    .tier img{width:100%; border-radius:12px; aspect-ratio:4/3; object-fit:cover; margin:8px 0 12px}
    .tier h3{margin:0 0 8px}
    .tier p{margin:0; color:var(--muted)}
    .tier{opacity:.38; transform:scale(.82); filter:blur(3px)}
    .tier.side{opacity:.72; transform:scale(.92); filter:blur(1.2px)}
    .tier.active{opacity:1; transform:scale(1); filter:blur(0); z-index:2}
    .tier-arrows{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
    .tier-btn{pointer-events:auto; width:56px; height:56px; border-radius:12px; border:0; background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white 8%) 0%, color-mix(in oklab, var(--accent) 65%, var(--dz-accent-deep) 35%) 52%, #0b7c86 100%); box-shadow: 0 8px 16px rgba(0,0,0,.22); color:var(--dz-on-accent); font-weight:700; display:grid; place-items:center; cursor:pointer; transition:transform .08s ease}
    .tier-btn:active{transform:translateY(2px)}
    @media (max-width: 900px){
      .tier-viewport{padding:12px 16px; width:100%; margin:0 auto; mask-image:none;}
      .tier-track{gap:12px; justify-content:center}
      .tier{width:88vw}
      .tier.side{display:none}
    }

    /* ===== SOBRE ===== */
    .about{position:relative}
    .about-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:22px; align-items:center}
    .about-logo{width:100%; max-width:520px; height:auto; object-fit:contain; filter:none}
    .about-right{display:grid; grid-template-columns:1fr; gap:14px}
    .about-card{background:var(--card); border:1px solid color-mix(in oklab, var(--accent) 18%, transparent); border-radius:12px; padding:18px}
    .about-icon{width:40px; height:40px; color:var(--accent)}
    .about-card h3{margin:0 0 6px; display:flex; align-items:center; gap:8px}
    @media (max-width: 900px){
      .about-grid{grid-template-columns:1fr}
      .about-logo{max-width:68vw; margin-inline:auto; display:block}
    }

    /* ===== Vantagens / Números — ícones via Feather ===== */
    .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
    .col-4{grid-column:span 4}
    .col-6{grid-column:span 6}
    .col-12{grid-column:span 12}
    @media (max-width: 900px){.col-4,.col-6{grid-column:span 12}}

    .benefit{background:var(--card); border:1px solid color-mix(in oklab, var(--accent) 18%, transparent); border-radius:12px; padding:22px; text-align:left}
    .benefit .icon, .stat .icon{width:40px; height:40px; color:var(--accent)}
    .benefit h3{margin:8px 0 6px; font-size:1.1rem}
    .benefit p{margin:0; color:var(--muted)}

    .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
    @media (max-width: 900px){.stats{grid-template-columns:1fr}}
    .stat{background:var(--card); border:1px solid color-mix(in oklab, var(--accent) 18%, transparent); border-radius:12px; padding:22px; text-align:center}
    .stat b{font-size:1.6rem}

    /* Notificação de login autorizado */
    .login-success{
      position:fixed;
      z-index:6000;
      inset-inline:0;
      top:18px;
      display:flex;
      justify-content:center;
      pointer-events:none;
    }
    .login-success-inner{
      background:#0e2c14;
      color:#d7ffe0;
      border-radius:999px;
      padding:10px 22px;
      font-weight:700;
      font-size:.9rem;
      box-shadow:0 8px 18px rgba(0,0,0,.45);
      border:1px solid #1bd676;
      transform:translateY(-24px);
      opacity:0;
      transition:transform .28s ease-out, opacity .28s ease-out;
    }
    .login-success.show .login-success-inner{
      transform:translateY(0);
      opacity:1;
    }

    /* ===== FAQ ===== */
    .faq h2{font-size:clamp(1.6rem,3.2vw,2.2rem); margin:0 0 10px}
    .faq-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
    .faq-col{grid-column:span 6}
    @media (max-width: 900px){.faq-col{grid-column:span 12}}
    .faq-card{background:linear-gradient(180deg, var(--dz-surface), #0a1220); border:1px solid var(--dz-border); border-radius:14px; padding:14px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.18); margin-bottom:12px}
    .faq-q{font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px}
    .faq-q:hover{color:#fff}
    .faq-q:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:10px}
    .faq-a{color:var(--muted); max-height:0; overflow:hidden; transition:max-height .32s ease, padding-top .32s ease, filter .32s ease; filter:blur(6px)}
    .faq-card.open .faq-a{max-height:320px; padding-top:10px; filter:blur(0)}
    .faq-card .chev{width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:#122035; color:#9bdbe1; transition:transform .3s ease, background .2s}
    .faq-card.open .chev{transform:rotate(180deg); background:#1a3450}

    /* ===== FOOTER ===== */
    .subfooter{background:#07101b; border-top:1px solid #0f1d2c; padding:20px 0; color:#8e96a6; font-size:.65rem; text-align:center}
    a{color:inherit}

    /* Scrollbar */
    *{scrollbar-width:thin; scrollbar-color: var(--accent) #0f1a28}
    ::-webkit-scrollbar{width:4px}
    ::-webkit-scrollbar-track{background:#0f1a28; border-radius:100px}
    ::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--accent) 85%, #ffffff 0%); border-radius:100px}

    /* Moeda girando */
    .coin{display:inline-block; width:22px; height:22px; margin-left:6px; vertical-align:middle; perspective:500px}
    .coin svg{width:100%; height:100%; transform-origin:center; animation:spinCoin 1.2s linear infinite; will-change:transform}
    @keyframes spinCoin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

    /* ===== MODAL 18+ ===== */
    .modal-backdrop{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); backdrop-filter: blur(3px); z-index:5000}
    .modal-backdrop.show{display:grid}
    .modal{
      width:min(420px, 92vw);
      background:var(--card);
      border:1px solid var(--dz-border);
      border-radius:12px;
      padding:14px;
      box-shadow:0 20px 60px rgba(0,0,0,.45)
    }
    .modal h3{margin:0 0 6px; font-size:1.14rem; text-align:left}
    .modal p{margin:0; color:var(--muted); text-align:left; line-height:1.35}
    .modal .age{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:var(--dz-surface-2); border:1px solid var(--dz-border); font-weight:700; margin:0 0 8px; color:var(--dz-text-2)}
    .modal .btns{display:flex; gap:8px; margin-top:10px; flex-wrap:nowrap; justify-content:flex-start}
    .btn-danger{background:linear-gradient(180deg, #ff7a86, #ff4455); color:#2b0b12; font-weight:700; border:0; border-radius:12px; padding:10px 12px; cursor:pointer; box-shadow:var(--dz-shadow-xs); white-space:nowrap}
    .btn-accept{background:linear-gradient(180deg, var(--cta) 0%, var(--orange) 100%); color:var(--ctaText); border:0; border-radius:12px; padding:10px 12px; font-weight:700; cursor:pointer; box-shadow:var(--dz-shadow-xs); white-space:nowrap}
    .only-m{display:none}
    @media (max-width:480px){
      .modal{width:min(360px, 92vw); padding:12px}
      .modal h3{font-size:1.04rem}
      .btn-danger,.btn-accept{padding:9px 10px; font-size:.95rem}
      .only-m{display:inline}
    }

    /* ===== ÁUDIO TOAST ===== */
    .sound-toast{
      position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
      background:var(--dz-surface-2); color:var(--dz-text-2); border:1px solid var(--dz-border);
      padding:8px 12px; border-radius:10px; font:600 13px/1.2 Inter,system-ui;
      opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:7000;
    }
    .sound-toast.show{ opacity:1 }

    /* ===== AUTH MODALS (Login / Cadastro) ===== */
    .auth-backdrop{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); z-index:5200}
    .auth-backdrop.show{display:grid}
    .auth-modal{
      width:min(460px, 92vw);
      background:linear-gradient(180deg, var(--dz-surface), #0a1220);
      border:1px solid var(--dz-border);
      border-radius:12px;
      box-shadow:0 24px 70px rgba(0,0,0,.55);
      overflow:hidden;
    }
    .auth-head{
      position:relative;
      padding:14px 18px;
      border-bottom:1px solid var(--dz-border);
      display:flex; align-items:center; justify-content:center;
    }
    .auth-title{margin:0; font-size:1.2rem}
    .auth-close{
      position:absolute; right:10px; top:10px;
      width:34px; height:34px; border-radius:10px;
      background:var(--dz-surface-2); border:1px solid var(--dz-border);
      display:grid; place-items:center; color:var(--dz-text-2); cursor:pointer;
      box-shadow:0 4px 12px rgba(0,0,0,.25);
    }
    .auth-body{padding:16px 18px}
    .field{display:grid; gap:6px; margin-bottom:12px}
    .label{font-weight:700; font-size:.95rem}
    .input-wrap{position:relative}
    .input{
      width:100%; padding:12px 14px;
      background:var(--dz-surface-2); border:1px solid var(--dz-border); color:#e8eef1;
      border-radius:12px; outline:none; font-weight:600;
    }
    .input:focus{border-color:color-mix(in oklab, var(--accent) 65%, var(--dz-surface-2) 35%); box-shadow:0 0 0 3px rgba(47,166,184,.15)}
    .input-wrap.with-toggle .input{padding-right:44px}
    .field-inline{display:grid; gap:6px}
    .cpf-wrap{display:flex; gap:8px; align-items:center}
    .cpf-wrap .input{flex:1; min-width:0}
    .cpf-btn{
      border:1px solid var(--dz-border); background:var(--dz-surface-3); color:#bfe9ee;
      font-weight:600; border-radius:12px; padding:12px 14px;
      cursor:pointer; transition:filter .15s ease, transform .06s ease;
    }
    .cpf-btn:active{transform:translateY(1px)}
    .cpf-btn.valid{background:var(--dz-primary); color:var(--dz-on-primary); box-shadow:var(--dz-shadow-xs)}
    .phone-wrap{display:flex; gap:8px; align-items:center}
    .phone-wrap .dial{
      display:inline-flex; align-items:center; gap:6px;
      padding:12px 14px; border-radius:12px;
      background:var(--dz-surface-2); border:1px solid var(--dz-border); font-weight:600;
    }
    .phone-wrap .dial .flag{font-size:1.2rem}
    .phone-wrap .dial .code{color:var(--dz-text-2)}
    .phone-wrap .input{flex:1; min-width:0}
    .phone-wrap .input-wrap{flex:1}
    .input-wrap.with-addon{position:relative}
    .input-wrap.with-addon .addon{
      position:absolute; right:12px; top:50%; transform:translateY(-50%);
      width:20px; height:20px; color:var(--dz-accent-soft); pointer-events:none;
    }
    .register-note{
      margin:8px 0 0; font-size:.85rem; color:var(--dz-text-2); font-weight:600;
    }
    .register-ref{
      margin-top:12px; padding:10px 12px;
      border-radius:12px; border:1px dashed var(--dz-border);
      background:var(--dz-surface-2); color:var(--dz-text-2); font-weight:700;
      text-align:center;
    }
    .register-ref code{color:var(--dz-gold); font-weight:700}
    .hidden{display:none!important}
    .forgot-step{display:grid; gap:12px}
    .forgot-info{font-size:.9rem; color:var(--dz-text-2); text-align:left}
    .forgot-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
    .auth-ghost{
      display:inline-flex; align-items:center; justify-content:center;
      padding:12px 16px; border-radius:14px; border:1px solid var(--dz-border);
      background:var(--dz-surface-2); color:var(--dz-text-2); font-weight:600; cursor:pointer;
    }
    .pw-toggle{
      position:absolute; right:8px; top:50%; transform:translateY(-50%);
      width:36px; height:36px; border-radius:10px;
      border:1px solid var(--dz-border); background:#0f1a2a; color:#bfe9ee;
      display:grid; place-items:center; cursor:pointer;
    }
    .auth-actions{display:grid; gap:8px; margin-top:6px}
    .auth-primary{
      display:inline-flex; align-items:center; justify-content:center;
      width:100%; padding:12px 16px; border-radius:14px; border:0; cursor:pointer;
      font-weight:700; letter-spacing:.01em;
      background:linear-gradient(180deg, var(--cta) 0%, var(--orange) 100%);
      color:var(--ctaText); box-shadow:var(--dz-shadow-xs);
    }
    .auth-secondary{display:block; text-align:center; color:var(--dz-text-2); font-weight:700; text-decoration:none; margin-top:2px}
    .login-inline-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:nowrap;
      gap:12px;
      margin-top:8px;
    }
    .auth-forgot-link{
      display:inline-block;
      text-align:right;
      font-weight:400;
      font-size:.82rem;
      margin-top:0;
      flex-shrink:0;
      white-space:nowrap;
    }
    .terms{display:flex; align-items:flex-start; gap:8px; font-size:.9rem; color:var(--dz-text-2)}
    .terms input{margin-top:2px}
    .error{color:#ff9aa6; font-weight:700; display:none}
    #loginError{font-weight:400; margin:0; flex:1; min-width:0}
    @media (max-width:480px){
      .login-inline-meta{align-items:flex-start}
      .auth-head{padding:12px}
      .auth-title{font-size:1.08rem}
      .auth-close{width:32px; height:32px}
      .input{padding:11px 12px}
      .input-wrap.with-toggle .input{padding-right:42px}
      .pw-toggle{width:34px; height:34px}
    }