:root{
    --green:#34C759; --green-d:#28a046; --blue:#007AFF;
    --bg:#070b14; --bg2:#0b1120; --card:rgba(255,255,255,.045);
    --card-strong:rgba(255,255,255,.07);
    --text:#eef2f7; --muted:#9aa7b8; --line:rgba(255,255,255,.10);
    --display:"Fraunces", Georgia, serif;
    --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --maxw:1140px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--ui); color:var(--text); background:var(--bg);
    line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  /* ---- Décor de fond : halos verts/bleus + grain + grille ---- */
  .fond{position:fixed; inset:0; z-index:-2; overflow:hidden; background:
      radial-gradient(900px 600px at 12% -5%, rgba(52,199,89,.16), transparent 60%),
      radial-gradient(900px 700px at 100% 0%, rgba(0,122,255,.16), transparent 55%),
      radial-gradient(800px 800px at 50% 120%, rgba(0,122,255,.10), transparent 60%),
      linear-gradient(180deg,#070b14,#0a0f1c 60%,#070b14);}
  .fond::before{content:""; position:absolute; inset:0; opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:54px 54px; -webkit-mask-image:radial-gradient(circle at 50% 30%, #000, transparent 75%); mask-image:radial-gradient(circle at 50% 30%, #000, transparent 75%);}
  .grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
    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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
  a{color:inherit; text-decoration:none;}

  /* ---- Boutons ---- */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--ui); font-size:16px; font-weight:600; border-radius:14px;
    padding:13px 22px; cursor:pointer; border:none; transition:transform .18s, box-shadow .25s, background .25s; white-space:nowrap;}
  .btn:active{transform:scale(.96);}
  .btn-primary{color:#04130a; background:linear-gradient(180deg,#46d76a,var(--green));
    box-shadow:0 8px 24px rgba(52,199,89,.38), inset 0 1px 0 rgba(255,255,255,.45);}
  .btn-primary:hover{box-shadow:0 12px 34px rgba(52,199,89,.5), inset 0 1px 0 rgba(255,255,255,.5);}
  .btn-ghost{color:var(--text); background:var(--card);
    border:1px solid var(--line); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
  .btn-ghost:hover{background:var(--card-strong);}

  /* ---- En-tête « verre » ---- */
  header.nav{position:sticky; top:0; z-index:100;
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    background:rgba(8,12,22,.62); border-bottom:1px solid var(--line);}
  .nav-in{display:flex; align-items:center; gap:18px; height:66px;}
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.02em;}
  .brand img{height:30px; width:30px; border-radius:8px;}
  .nav-links{display:flex; gap:6px; margin-left:14px;}
  .nav-links a{color:var(--muted); font-size:15px; font-weight:500; padding:8px 12px; border-radius:10px; transition:color .2s, background .2s;}
  .nav-links a:hover{color:var(--text); background:var(--card);}
  .nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px;}
  .nav-cta .btn{padding:10px 16px; font-size:15px;}
  .burger{display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
    background:var(--card); align-items:center; justify-content:center; cursor:pointer;}
  .burger span{display:block; width:20px; height:2px; background:var(--text); position:relative;}
  .burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text);}
  .burger span::before{top:-6px;} .burger span::after{top:6px;}
  .menu-mob{display:none; flex-direction:column; gap:4px; padding:10px 22px 18px;}
  .menu-mob a{padding:12px 10px; border-radius:12px; color:var(--text); font-size:17px; border-bottom:1px solid var(--line);}
  .menu-mob a:last-child{border-bottom:none;}
  .menu-mob.open{display:flex;}

  /* ---- Hero ---- */
  .hero{padding:64px 0 40px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
  .badge{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--green);
    background:rgba(52,199,89,.12); border:1px solid rgba(52,199,89,.3); padding:7px 14px; border-radius:99px; margin-bottom:22px;}
  .badge .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green);}
  h1.title{font-family:var(--display); font-weight:600; font-size:clamp(40px,7vw,68px); line-height:1.02; letter-spacing:-.02em;}
  h1.title .accent{font-style:italic; background:linear-gradient(120deg,var(--green),#7fe39a); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .lead{color:var(--muted); font-size:clamp(17px,2.2vw,20px); margin:22px 0 30px; max-width:540px;}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
  .reassure{display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; color:var(--muted); font-size:14px;}
  .reassure span{display:inline-flex; align-items:center; gap:7px;}
  .reassure svg{width:17px; height:17px; color:var(--green);}

  /* ---- Aperçu téléphone (CSS pur) ---- */
  .phone-wrap{display:flex; justify-content:center; position:relative;}
  .phone-glow{position:absolute; inset:-10%; background:radial-gradient(circle at 50% 40%, rgba(52,199,89,.28), transparent 60%); filter:blur(20px); z-index:0;}
  .phone{position:relative; z-index:1; width:280px; border-radius:42px; padding:12px;
    background:linear-gradient(160deg,#1c2333,#0d1320); border:1px solid rgba(255,255,255,.12);
    box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);}
  .screen{background:#0c0c0e; border-radius:32px; padding:18px 15px 16px; overflow:hidden;}
  .scr-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .scr-top .mois{font-weight:700; font-size:17px;}
  .scr-top .chev{color:var(--green); font-size:18px; display:flex; gap:14px;}
  .scr-card{background:#161618; border-radius:14px; padding:13px; margin-bottom:11px;}
  .scr-card .lbl{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8b8b90;}
  .scr-tot{display:flex; align-items:baseline; justify-content:space-between; margin:6px 0 9px;}
  .scr-tot b{font-size:19px;} .scr-tot span{color:#8b8b90; font-size:12px;}
  .track{height:8px; background:#2a2a2e; border-radius:99px; overflow:hidden;}
  .track > i{display:block; height:100%; border-radius:99px; width:0; transition:width 1.2s cubic-bezier(.22,1,.36,1);}
  .cat-row{display:flex; align-items:center; gap:9px; margin:11px 2px;}
  .cat-row .pin{width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
  .cat-row .nm{font-size:13.5px; flex:1;}
  .cat-row .am{font-size:12px; color:#8b8b90;}
  .donut{width:74px; height:74px; border-radius:50%; flex:0 0 auto;
    background:conic-gradient(var(--blue) 0 42%, #FF9500 42% 68%, var(--green) 68% 100%);
    -webkit-mask:radial-gradient(circle 22px at center, transparent 98%, #000 100%);
            mask:radial-gradient(circle 22px at center, transparent 98%, #000 100%);}
  .donut-wrap{display:flex; align-items:center; gap:14px;}
  .donut-leg{font-size:12px; color:#b9b9bf; display:flex; flex-direction:column; gap:5px;}
  .donut-leg i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px;}

  /* ---- Sections génériques ---- */
  section{scroll-margin-top:84px;}
  .sec{padding:64px 0;}
  .sec-head{text-align:center; max-width:660px; margin:0 auto 44px;}
  .kicker{color:var(--green); font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase;}
  h2.sec-title{font-family:var(--display); font-weight:600; font-size:clamp(30px,4.5vw,44px); line-height:1.08; letter-spacing:-.02em; margin:10px 0 12px;}
  .sec-head p{color:var(--muted); font-size:17px;}

  /* ---- Cartes fonctionnalités ---- */
  .grid{display:grid; gap:18px;}
  .feat-grid{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));}
  .card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .25s, border-color .25s, background .25s;}
  .card:hover{transform:translateY(-4px); border-color:rgba(52,199,89,.35); background:var(--card-strong);}
  .ic{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:15px;
    background:linear-gradient(160deg,rgba(52,199,89,.22),rgba(0,122,255,.18)); border:1px solid var(--line);}
  .ic svg{width:24px; height:24px; color:var(--green);}
  .card h3{font-size:18px; font-weight:650; margin-bottom:7px; letter-spacing:-.01em;}
  .card p{color:var(--muted); font-size:14.5px;}

  /* ---- Étapes ---- */
  .steps{grid-template-columns:repeat(3,1fr);}
  .step{position:relative; padding-left:6px;}
  .step .no{font-family:var(--display); font-size:54px; font-weight:600; line-height:1;
    background:linear-gradient(120deg,var(--green),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .step h3{font-size:19px; margin:10px 0 6px;}
  .step p{color:var(--muted); font-size:15px;}

  /* ---- Astuces ---- */
  .tip-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
  .tip{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; position:relative; overflow:hidden;}
  .tip::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--green),var(--blue));}
  .tip .tnum{font-family:var(--display); font-weight:600; color:var(--green); font-size:14px;}
  .tip h3{font-size:17.5px; margin:6px 0 8px; letter-spacing:-.01em;}
  .tip p{color:var(--muted); font-size:14.5px;}
  .disclaimer{text-align:center; color:var(--muted); font-size:13px; margin-top:28px; opacity:.8;}

  /* ---- FAQ ---- */
  .faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  details.q{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:4px 20px; transition:background .2s;}
  details.q[open]{background:var(--card-strong);}
  details.q summary{list-style:none; cursor:pointer; padding:16px 0; font-weight:600; font-size:16.5px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
  details.q summary::-webkit-details-marker{display:none;}
  details.q summary .plus{flex:0 0 auto; width:24px; height:24px; position:relative;}
  details.q summary .plus::before,details.q summary .plus::after{content:""; position:absolute; background:var(--green); border-radius:2px;}
  details.q summary .plus::before{top:11px; left:4px; width:16px; height:2px;}
  details.q summary .plus::after{top:4px; left:11px; width:2px; height:16px; transition:opacity .25s;}
  details.q[open] summary .plus::after{opacity:0;}
  details.q p{color:var(--muted); font-size:15px; padding:0 0 18px;}

  /* ---- Bande CTA finale ---- */
  .cta-band{position:relative; border:1px solid var(--line); border-radius:28px; padding:54px 30px; text-align:center; overflow:hidden;
    background:linear-gradient(160deg,rgba(52,199,89,.14),rgba(0,122,255,.12));}
  .cta-band h2{font-family:var(--display); font-weight:600; font-size:clamp(28px,4.5vw,42px); letter-spacing:-.02em;}
  .cta-band p{color:var(--muted); font-size:17px; margin:12px auto 26px; max-width:520px;}

  /* ---- Pied de page ---- */
  footer{border-top:1px solid var(--line); margin-top:40px; padding:40px 0 30px;}
  .foot-grid{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start;}
  .foot-links{display:flex; gap:26px; flex-wrap:wrap;}
  .foot-links a{color:var(--muted); font-size:15px;}
  .foot-links a:hover{color:var(--text);}
  .foot-bottom{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* ---- Apparition au défilement ---- */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);}
  .reveal.in{opacity:1; transform:none;}

  /* ---- Responsive ---- */
  @media (max-width:860px){
    .nav-links{display:none;} .nav-cta .se-co{display:none;}
    .burger{display:flex;}
    .hero-grid{grid-template-columns:1fr; gap:40px;}
    .hero{padding:40px 0 20px;}
    .phone{width:248px;}
    .steps{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;} .reveal{opacity:1; transform:none; transition:none;}
    .track > i{transition:none;}
  }

  /* ===== Ajouts multi-pages ===== */
  /* Lien actif dans la barre */
  .nav-links a.actif{color:var(--text); background:var(--card);}
  .menu-mob a.actif{color:var(--green); font-weight:600;}

  /* En-tête de sous-page (Fonctionnalités, Conseils, FAQ) */
  .page-hero{padding:66px 0 8px; text-align:center;}
  .page-hero .wrap{max-width:760px;}
  .page-hero .kicker{display:block;}
  .page-hero h1{font-family:var(--display); font-weight:600; font-size:clamp(34px,5.2vw,52px); line-height:1.05; letter-spacing:-.02em; margin:10px 0 14px;}
  .page-hero p{color:var(--muted); font-size:clamp(16px,2vw,18.5px); max-width:600px; margin:0 auto;}

  /* Bande de réassurance (accueil) */
  .trust{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px;}
  .trust .t-item{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 16px; text-align:center; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
  .trust .t-big{font-family:var(--display); font-weight:600; font-size:23px; background:linear-gradient(120deg,var(--green),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .trust .t-lbl{color:var(--muted); font-size:13.5px; margin-top:4px;}

  /* Encadré « à retenir » (conseils) */
  .callout{background:linear-gradient(160deg,rgba(52,199,89,.12),rgba(0,122,255,.10)); border:1px solid var(--line); border-radius:20px; padding:26px; margin-top:8px;}
  .callout h3{font-size:18px; margin-bottom:8px;}
  .callout p{color:var(--muted); font-size:15px;}

  /* Carte « encore une question » (faq) */
  .ask{text-align:center; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px; margin-top:8px;}
  .ask h3{font-size:20px; margin-bottom:8px;}
  .ask p{color:var(--muted); font-size:15px; margin-bottom:16px;}

  @media (max-width:680px){
    .trust{grid-template-columns:repeat(2,1fr);}
  }

  /* ===== Formulaire de contact ===== */
  .form-card{max-width:620px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--text);}
  .field input, .field textarea{width:100%; font-family:var(--ui); font-size:15.5px; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none; transition:border-color .2s, background .2s;}
  .field input:focus, .field textarea:focus{border-color:rgba(52,199,89,.55); background:rgba(255,255,255,.06);}
  .field textarea{min-height:130px; resize:vertical;}
  .form-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px;}
  .form-msg{font-size:14px; min-height:20px;}
  .form-msg.ok{color:var(--green);} .form-msg.err{color:#ff6b6b;}
  .contact-alt{text-align:center; color:var(--muted); font-size:14.5px; margin-top:22px;}
  .contact-alt a{color:var(--green); font-weight:600;}

  /* ===== Pages légales (texte long) ===== */
  .legal{max-width:760px; margin:0 auto;}
  .legal h2{font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.01em; margin:30px 0 10px;}
  .legal h2:first-child{margin-top:0;}
  .legal p{color:var(--muted); font-size:15.5px; margin-bottom:12px;}
  .legal ul{color:var(--muted); font-size:15.5px; margin:0 0 12px; padding-left:22px;}
  .legal li{margin-bottom:7px;}
  .legal a{color:var(--green);}
  .legal .maj{color:var(--muted); font-size:13px; opacity:.8; margin-bottom:24px;}
  .legal .note{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:14px; color:var(--muted); margin-top:8px;}

  /* ===== Pages connexion / inscription (thème accueil) ===== */
  .auth-wrap{ min-height:calc(100vh - 66px); display:flex; align-items:center; justify-content:center; padding:40px 20px 64px; }
  .auth-card{ width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:38px 32px; -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); box-shadow:0 30px 80px rgba(0,0,0,.45); }
  .auth-logo{ display:block; height:38px; width:auto; margin:0 auto 16px; }
  .auth-title{ text-align:center; font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:-.01em; margin:0 0 6px; }
  .auth-sub{ text-align:center; color:var(--muted); font-size:15px; margin:0 0 26px; }
  .auth-card .field{ margin-bottom:18px; }
  .auth-card label{ display:block; font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:8px; }
  .auth-card input{ width:100%; font-family:var(--ui); font-size:16.5px; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:14px; padding:0 16px; height:54px; outline:none; transition:border-color .2s, background .2s; }
  .auth-card input::placeholder{ color:rgba(154,167,184,.55); }
  .auth-card input:focus{ border-color:rgba(52,199,89,.6); background:rgba(255,255,255,.07); }
  .auth-submit{ width:100%; height:54px; font-size:17px; margin-top:6px; }
  .auth-links{ display:flex; flex-direction:column; align-items:center; gap:11px; margin-top:22px; }
  .auth-links a{ color:var(--muted); font-size:14.5px; text-decoration:none; }
  .auth-links a:hover{ color:var(--text); }
  .auth-msg{ font-size:14px; border-radius:12px; padding:11px 14px; margin-bottom:18px; }
  .auth-msg.err{ color:#ffb4b4; background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.28); }
  .auth-msg.msg-ok{ color:#9be7b4; background:rgba(52,199,89,.12); border:1px solid rgba(52,199,89,.30); }

  /* ===== Bandeau cookies ===== */
  .cookie-bar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:780px; margin:0 auto; background:rgba(11,17,32,.94); border:1px solid var(--line); border-radius:18px; padding:18px 20px; -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); box-shadow:0 20px 60px rgba(0,0,0,.5); display:flex; flex-wrap:wrap; align-items:center; gap:14px; animation:ckUp .35s ease; }
  @keyframes ckUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
  .cookie-bar p{ flex:1 1 300px; margin:0; color:var(--muted); font-size:13.8px; line-height:1.55; }
  .cookie-bar p a{ color:var(--green); }
  .cookie-bar .cookie-actions{ display:flex; gap:10px; flex:0 0 auto; }
  .cookie-bar .btn{ padding:10px 16px; font-size:14.5px; }
  @media (max-width:560px){ .cookie-bar{ left:10px; right:10px; bottom:10px; padding:16px; } .cookie-bar .cookie-actions{ width:100%; } .cookie-bar .cookie-actions .btn{ flex:1; } }

  /* ===== Page Premium (offres) ===== */
  .pricing{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:820px; margin:0 auto; align-items:start; }
  .plan{ background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px 28px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .plan.featured{ border-color:rgba(52,199,89,.5); box-shadow:0 24px 70px rgba(52,199,89,.12); position:relative; }
  .plan .plan-tag{ position:absolute; top:-12px; left:28px; background:linear-gradient(180deg,#46d76a,#34C759); color:#04130a; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; }
  .plan h3{ font-size:19px; margin-bottom:6px; }
  .plan .price{ font-family:var(--display); font-weight:600; font-size:40px; letter-spacing:-.02em; line-height:1; margin:10px 0 2px; }
  .plan .price small{ font-family:var(--ui); font-size:15px; font-weight:500; color:var(--muted); }
  .plan .price-note{ color:var(--muted); font-size:13.5px; margin-bottom:18px; }
  .plan ul{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:11px; }
  .plan li{ display:flex; align-items:flex-start; gap:10px; font-size:14.8px; color:var(--text); }
  .plan li svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; color:var(--green); }
  .plan li.soon{ color:var(--muted); }
  .plan li .soon-tag{ font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 7px; margin-left:2px; }
  .plan .btn{ width:100%; }
  .pricing-note{ text-align:center; color:var(--muted); font-size:13.5px; margin-top:22px; }
  @media (max-width:680px){ .pricing{ grid-template-columns:1fr; } }

  /* ===== Connexion Google / Apple ===== */
  .oauth-sep{ display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--muted); font-size:13px; }
  .oauth-sep::before, .oauth-sep::after{ content:""; flex:1; height:1px; background:var(--line); }
  .btn-oauth{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:50px; border-radius:14px; font-size:15.5px; font-weight:600; cursor:pointer; border:1px solid var(--line); font-family:var(--ui); margin-bottom:10px; transition:filter .2s; }
  .btn-oauth:hover{ filter:brightness(1.06); }
  .btn-google{ background:#ffffff; color:#1f2937; }
  .btn-apple{ background:#000000; color:#ffffff; border-color:rgba(255,255,255,.18); }
  .btn-oauth svg{ width:19px; height:19px; flex:0 0 auto; }