:root{
  --bg:#061522;
  --bg-2:#02080F;
  --fg:#e8eef4;
  --muted:#8aa0b3;
  --teal:#1897C8;
  --teal-bright:#1FB4F0;
  --line:#0D2038;
  --max:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-bright);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-weight:700;letter-spacing:-0.01em;line-height:1.15}

.hero{
  position:relative;
  padding:4rem 1.5rem 3rem;
  background:linear-gradient(135deg,#061522 0%,#02080F 100%);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='520'%3E%3Cg fill='none' stroke='%230A1F38' stroke-width='1.5'%3E%3Cellipse cx='540' cy='260' rx='70' ry='50'/%3E%3Cellipse cx='540' cy='260' rx='120' ry='88'/%3E%3Cellipse cx='540' cy='260' rx='172' ry='128'/%3E%3Cellipse cx='540' cy='260' rx='224' ry='168'/%3E%3Cellipse cx='540' cy='260' rx='278' ry='210'/%3E%3Cellipse cx='540' cy='260' rx='334' ry='254'/%3E%3Cellipse cx='130' cy='110' rx='50' ry='35'/%3E%3Cellipse cx='130' cy='110' rx='95' ry='68'/%3E%3Cellipse cx='130' cy='110' rx='140' ry='104'/%3E%3Cellipse cx='130' cy='110' rx='188' ry='142'/%3E%3C/g%3E%3C/svg%3E");
  background-position:right center;
  background-repeat:no-repeat;
  opacity:0.9;
  pointer-events:none;
  z-index:1;
}
.hero-inner{
  max-width:var(--max);
  margin:0 auto;
  position:relative;
  z-index:2;
}
.hero-split{
  display:flex;
  align-items:center;
  gap:3rem;
}
.hero-text{flex:1;min-width:0}
.hero-visual{
  flex:0 0 38%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.p2-hero{
  width:100%;
  max-width:420px;
  height:auto;
  filter:drop-shadow(0 0 48px rgba(31,180,240,0.28)) drop-shadow(0 0 12px rgba(31,180,240,0.15));
  /* Frameless edge — User-Direktive 2026-05-16. The source PNG is solid
     RGBA (alpha=255) with dark-navy corners that read as a frame against
     the page background. A radial alpha-mask fades the edges into the bg
     while keeping the wireframe subject fully visible. */
  -webkit-mask-image:radial-gradient(ellipse at center, #000 50%, rgba(0,0,0,0.85) 65%, transparent 88%);
          mask-image:radial-gradient(ellipse at center, #000 50%, rgba(0,0,0,0.85) 65%, transparent 88%);
}
.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.brand-icon{
  width:40px;height:40px;
  border-radius:8px;
}
.brand-name{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:0.01em;
}
.brand-pump{color:var(--fg)}
.brand-ytics{color:#1FB4F0}
.tagline{
  font-size:clamp(2rem,5.5vw,3.75rem);
  margin:0 0 0.75rem;
}
.subtitle{
  font-size:clamp(1rem,2.2vw,1.25rem);
  color:var(--muted);
  margin:0 0 2rem;
  max-width:36rem;
}
.cta{
  display:inline-block;
  padding:0.85rem 1.6rem;
  background:var(--teal);
  color:#04181a;
  border-radius:8px;
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.01em;
  transition:background .15s;
}
.cta:hover{
  background:var(--teal-bright);
  text-decoration:none;
}

.prose{
  max-width:var(--max);
  margin:5rem auto;
  padding:0 1.5rem;
}
.prose h2{
  font-size:clamp(1.5rem,3.5vw,2.25rem);
  margin:0 0 1.5rem;
  color:var(--teal-bright);
}
.prose p{
  font-size:1.05rem;
  margin:0 0 1.25rem;
  color:#d4dde6;
}

.screens{
  max-width:var(--max);
  margin:5rem auto;
  padding:0 1.5rem;
}
.screens h2{
  font-size:clamp(1.5rem,3.5vw,2.25rem);
  margin:0 0 2rem;
  color:var(--teal-bright);
}
.screen-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.25rem;
}
.screen-grid figure{
  margin:0;
  background:var(--bg-2);
  padding:1.25rem;
  border-radius:12px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.screen-grid img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:50%;
}

.cta-block{
  text-align:center;
  padding:5rem 1.5rem;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta-block h2{
  font-size:clamp(1.5rem,3.5vw,2.25rem);
  margin:0 0 1.75rem;
}

footer{
  text-align:center;
  padding:2rem 1.5rem;
  color:var(--muted);
  font-size:0.9rem;
}
footer p{margin:0 0 0.5rem}
footer p:last-child{margin:0}
/* lang-switcher — overridden below in the lang-picker section */

/* =========================================================
   TOP NAV
   ========================================================= */
.topnav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(6,21,34,0.97);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topnav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  height:56px;
  gap:0.25rem;
}
.topnav-brand{
  display:flex;
  align-items:center;
  gap:0.65rem;
  flex-shrink:0;
  margin-right:auto;
  text-decoration:none;
}
.topnav-brand .brand-icon{width:32px;height:32px;border-radius:6px}
.topnav-items{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  gap:0.15rem;
}
.topnav-link{
  display:block;
  padding:0.4rem 0.7rem;
  border-radius:6px;
  color:var(--muted);
  font-size:0.875rem;
  font-weight:500;
  white-space:nowrap;
  transition:color .15s,background .15s;
}
.topnav-link:hover,.topnav-link:focus{
  color:var(--fg);
  background:rgba(255,255,255,0.05);
  text-decoration:none;
}
.topnav-link--active{color:var(--fg);font-weight:600}
.ext-icon{font-size:0.72em;opacity:0.65;margin-left:0.1em}
.topnav-settings{position:relative}
.topnav-settings-btn{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.4rem 0.8rem;
  background:#0E9EDD;
  border:1px solid #0E9EDD;
  border-radius:999px;
  color:#ffffff;
  font-size:0.875rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;
  font-family:inherit;
  white-space:nowrap;
  margin-left:0.5rem;
  box-shadow:0 2px 6px rgba(14,158,221,0.35);
}
.topnav-settings-btn:hover,
.topnav-settings-btn:focus-visible{
  background:#1FB4F0;
  border-color:#1FB4F0;
  color:#ffffff;
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(14,158,221,0.5);
  outline:none;
}
.topnav-settings-btn[aria-expanded="true"]{
  background:#1FB4F0;
  border-color:#1FB4F0;
}
.topnav-lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 0.4rem);
  background:#091829;
  border:1px solid var(--line);
  border-radius:10px;
  list-style:none;
  padding:0.4rem;
  margin:0;
  min-width:170px;
  z-index:500;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  max-height:60vh;
  overflow-y:auto;
}
.topnav-lang-menu[hidden]{display:none}
.topnav-lang-menu li a{
  display:block;
  padding:0.4rem 0.7rem;
  border-radius:6px;
  color:var(--muted);
  font-size:0.875rem;
  text-decoration:none;
  white-space:nowrap;
}
.topnav-lang-menu li a:hover,
.topnav-lang-menu li[aria-selected=true] a{
  background:#0d2538;
  color:var(--fg);
  text-decoration:none;
}
.topnav-lang-menu li[aria-selected=true] a{font-weight:700}
.topnav-hamburger{
  display:none;
  background:none;
  border:none;
  color:var(--fg);
  cursor:pointer;
  padding:0.4rem 0.5rem;
  font-size:1.35rem;
  line-height:1;
  margin-left:0.5rem;
}

/* locale mismatch smart banner (Phase 3) */
@keyframes locale-banner-slide-in{
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.locale-banner{
  background:#0E9EDD;
  border-bottom:1px solid #0E9EDD;
  padding:0.65rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
  font-size:0.9rem;
  color:#ffffff;
  position:relative;
  animation:locale-banner-slide-in 300ms ease-out;
  box-shadow:0 2px 8px rgba(14,158,221,0.3);
}
.locale-banner-switch{color:#ffffff;font-weight:700;white-space:nowrap;text-decoration:underline}
.locale-banner-switch:hover{text-decoration:underline;opacity:0.9}
.locale-banner-dismiss{
  position:absolute;
  right:1rem;
  background:none;
  border:none;
  color:#ffffff;
  cursor:pointer;
  font-size:1.25rem;
  line-height:1;
  padding:0.25rem;
  opacity:0.85;
}
.locale-banner-dismiss:hover{opacity:1}
@media (prefers-reduced-motion: reduce){
  .locale-banner{animation:none}
}

/* Engaged-state suppression: once the user has interacted with the
   language picker (button click / lang pick / banner dismiss), the
   eye-catch (drop-shadow + hover-scale + banner slide-in) is dialled
   down. Pill stays Pacific-Blue + 44 px tap-target — only the störer
   prominence is removed. JS sets body.lang-switcher-engaged with a 90 d
   TTL; see backend/landing/js/lang-picker.js. */
body.lang-switcher-engaged .topnav-settings-btn{
  box-shadow:none;
}
body.lang-switcher-engaged .topnav-settings-btn:hover,
body.lang-switcher-engaged .topnav-settings-btn:focus-visible{
  transform:none;
  box-shadow:none;
}
body.lang-switcher-engaged .locale-banner{
  animation:none;
}

/* footer lang list — compact horizontal, native names */
.lang-switcher{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.25rem 0.5rem;
  font-size:0.78rem;
}
.lang-switcher a{
  color:var(--muted);
  text-decoration:none;
  padding:0.1rem 0.2rem;
}
.lang-switcher a:hover{color:var(--teal-bright)}
.lang-switcher a.lang-active{
  color:var(--teal-bright);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* CTA-card row on landing — two 50/50 cards (Watch-user + Companion).
   Mobile: stacks with Watch-user first (primary recruit-target per
   Task #69 Master-decision #3). */
.cta-card-row{
  max-width:var(--max);
  margin:0 auto 4rem;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.cta-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:2.5rem 2rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.cta-card h2{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  margin:0 0 0.5rem;
  color:var(--teal-bright);
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.cta-card-icon{font-size:1.2em;line-height:1}
.cta-card p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
  flex:1;
}
.cta-card .cta{align-self:flex-start}
.cta-card-text{display:flex;flex-direction:column;gap:0.5rem;flex:1}

/* companion page */
.companion-how,.companion-token{
  max-width:var(--max);
  margin:5rem auto;
  padding:0 1.5rem;
}
.companion-how h2,.companion-token h2{
  font-size:clamp(1.5rem,3.5vw,2.25rem);
  margin:0 0 2rem;
  color:var(--teal-bright);
}
.companion-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.companion-step{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:2rem 1.75rem;
  position:relative;
}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;height:2rem;
  background:var(--teal);
  color:#04181a;
  border-radius:50%;
  font-weight:700;
  font-size:0.95rem;
  margin-bottom:1rem;
}
.companion-step h3{
  font-size:1.1rem;
  margin:0 0 0.5rem;
  color:var(--fg);
}
.companion-step p{
  font-size:0.95rem;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}
.token-intro{
  font-size:1.05rem;
  color:#d4dde6;
  margin:0 0 1.5rem;
}
.setup-steps{
  list-style:none;
  padding:0;
  margin:0 0 1.5rem;
  counter-reset:step;
}
.setup-steps li{
  counter-increment:step;
  display:flex;
  gap:1.25rem;
  padding:1.25rem 1.5rem;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:0.75rem;
  align-items:flex-start;
}
.setup-steps li::before{
  content:counter(step,upper-alpha);
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:1.75rem;height:1.75rem;
  background:var(--teal);
  color:#04181a;
  border-radius:50%;
  font-weight:700;
  font-size:0.85rem;
}
.setup-steps strong{
  display:block;
  margin-bottom:0.25rem;
  color:var(--fg);
}
.setup-steps span{
  font-size:0.95rem;
  color:var(--muted);
  line-height:1.5;
}
.token-done{
  font-size:1rem;
  color:var(--teal-bright);
  font-weight:600;
  margin:0;
}
.companion-download{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  align-items:center;
}
.cta--ghost{
  display:inline-block;
  padding:0.85rem 1.6rem;
  background:transparent;
  color:var(--muted);
  border-radius:8px;
  font-weight:600;
  font-size:1rem;
  border:1px solid var(--line);
  cursor:default;
}

/* companion app screenshot placeholders */
.companion-screenshots{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;
  margin-top:2rem;
}
.companion-screenshot-placeholder{
  aspect-ratio:9/16;
  background:var(--bg-2);
  border:1px dashed var(--line);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.companion-screenshot-placeholder::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    45deg,
    transparent,
    transparent 12px,
    rgba(31,180,240,0.04) 12px,
    rgba(31,180,240,0.04) 24px
  );
}
.screenshot-label{
  font-size:0.75rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  z-index:1;
  text-align:center;
  padding:0.5rem;
}

/* delete-account self-service */
.delete-status{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.5rem;
  margin:1.5rem 0;
}
.delete-status--pending{border-color:#7f1d1d}
.delete-form{margin:2rem 0}
.delete-confirm{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.delete-confirm summary{
  padding:0.85rem 1.25rem;
  cursor:pointer;
  font-weight:600;
  color:#f87171;
  background:var(--bg-2);
  list-style:none;
}
.delete-confirm summary::-webkit-details-marker{display:none}
.delete-confirm summary::before{content:'▶ '}
.delete-confirm[open] summary::before{content:'▼ '}
.delete-confirm-inner{
  padding:1.25rem;
  border-top:1px solid var(--line);
}
.delete-warn{
  color:#f87171;
  font-size:0.9rem;
  margin:0 0 1rem;
}
.cta--danger{
  background:#991b1b;
  color:#fee2e2;
}
.cta--danger:hover{background:#7f1d1d}

/* companion waitlist form */
.waitlist-body{
  font-size:1.05rem;
  color:#d4dde6;
  margin:0 0 1.5rem;
  max-width:32rem;
  margin-left:auto;
  margin-right:auto;
}
.waitlist-form{max-width:480px;margin:0 auto}
.waitlist-row{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}
.waitlist-row input[type=email]{
  flex:1;
  min-width:180px;
  padding:0.85rem 1rem;
  background:#060F1C;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--fg);
  font-size:1rem;
  font-family:inherit;
  outline:none;
  transition:border-color .15s;
}
.waitlist-row input[type=email]::placeholder{color:var(--muted)}
.waitlist-row input[type=email]:focus{border-color:var(--teal)}
/* multi-field waitlist form */
.waitlist-field{
  margin-bottom:0.9rem;
  text-align:left;
}
.waitlist-field label{
  display:block;
  font-size:0.82rem;
  color:var(--muted);
  margin-bottom:0.3rem;
  letter-spacing:0.01em;
}
.waitlist-field label.required::after{
  content:' *';
  color:var(--teal-bright);
}
.waitlist-form input[type=text],
.waitlist-form input[type=email],
.waitlist-form select{
  width:100%;
  padding:0.85rem 1rem;
  background:#060F1C;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--fg);
  font-size:1rem;
  font-family:inherit;
  outline:none;
  transition:border-color .15s;
  box-sizing:border-box;
}
.waitlist-form input::placeholder{color:var(--muted)}
.waitlist-form input:focus,
.waitlist-form select:focus{border-color:var(--teal)}
.waitlist-form select{
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667789' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.9rem center;
  padding-right:2.2rem;
}
.waitlist-form select option{background:#060F1C;color:var(--fg)}
.waitlist-opt-in{
  display:flex;
  align-items:flex-start;
  gap:0.65rem;
  margin:0.2rem 0 1rem;
  padding:0.85rem 1rem;
  background:#081625;
  border:1px solid var(--line);
  border-radius:8px;
  text-align:left;
}
.waitlist-opt-in input{
  width:1.05rem;
  height:1.05rem;
  margin:0.15rem 0 0;
  accent-color:var(--teal-bright);
  flex:0 0 auto;
}
.waitlist-opt-in label{
  color:#d4dde6;
  font-size:0.92rem;
  line-height:1.4;
  cursor:pointer;
}
.waitlist-submit{
  width:100%;
  margin-top:0.5rem;
  margin-bottom:0;
}
.waitlist-msg{
  font-size:0.9rem;
  margin:0.75rem 0 0;
  padding:0.6rem 0.9rem;
  border-radius:6px;
}
.waitlist-msg--ok{background:#0d2e1a;color:#4ade80;border:1px solid #14532d}
.waitlist-msg--err{background:#2e1010;color:#f87171;border:1px solid #7f1d1d}
.waitlist-legal{
  font-size:0.8rem;
  color:var(--muted);
  margin:0.75rem 0 0;
}
.waitlist-legal a{color:var(--muted);text-decoration:underline}
.companion-ios-note{
  margin-top:2rem;
  color:var(--muted);
  font-size:0.9rem;
}
@media (max-width:768px){
  .hero-split{flex-direction:column;gap:2rem}
  .hero-visual{order:-1;flex:0 0 auto}
  .p2-hero{max-width:200px}
  /* Single-column stack; Watch-user card first (template order ✓), Companion below. */
  .cta-card-row{grid-template-columns:1fr;gap:1rem}
  .cta-card{padding:1.75rem 1.5rem}
  .topnav-hamburger{display:flex}
  .topnav-items{
    display:none;
    position:absolute;
    top:56px;left:0;right:0;
    background:rgba(6,21,34,0.99);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    padding:0.75rem;
    gap:0.2rem;
    z-index:99;
  }
  .topnav-items.open{display:flex}
  .topnav-link{padding:0.6rem 0.75rem}
  .topnav-settings{position:static}
  .topnav-settings-btn{width:100%;justify-content:flex-start;margin-left:0;padding:0.75rem 1rem;font-size:0.95rem;min-height:44px;border-radius:8px}
  .topnav-lang-menu{
    position:static;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:0.15rem 0.5rem;
    max-height:none;
  }
}
@media (max-width:640px){
  .hero{padding:3rem 1rem 2rem}
  .prose,.screens,.companion-how,.companion-token{margin:3rem auto}
  .screen-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}
  .screen-grid figure{padding:0.75rem}
  .companion-steps{grid-template-columns:1fr}
}

/* ============================================================
   /me/signup* — Token-page styling (Task #73 design-consistency)
   ============================================================
   Brand-matched dark theme with Inter font and brand CSS variables
   inherited from the page-level :root (when me/base.html links to
   this stylesheet). Card pattern mirrors landing .cta-card. */

.me-page-body{
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  margin:0;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.me-page-shell{
  max-width:640px;
  margin:0 auto;
  padding:3rem 1.5rem 4rem;
}
.me-page-shell h1{
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
  font-size:clamp(1.5rem,3vw,2rem);
  margin:0 0 0.75rem;
  color:var(--fg);
}
.me-page-shell h2{
  font-weight:700;
  letter-spacing:-0.01em;
  font-size:clamp(1.05rem,2vw,1.25rem);
  margin:0 0 0.5rem;
  color:var(--fg);
}
.me-page-shell p{margin:0 0 0.9rem;color:var(--fg)}
.me-page-shell p.muted{color:var(--muted);font-size:0.92rem}
.me-page-shell code{
  font-family:"SF Mono",Consolas,"Liberation Mono",monospace;
  background:var(--line);
  color:var(--fg);
  padding:0.15rem 0.4rem;
  border-radius:4px;
  font-size:0.95em;
}
.me-page-shell label{display:block;margin:1rem 0 0.35rem;font-weight:600;color:var(--fg);font-size:0.95rem}
.me-page-shell input[type=email],
.me-page-shell input[type=text]{
  width:100%;
  padding:0.7rem 0.85rem;
  font-size:1rem;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--fg);
  font-family:inherit;
}
.me-page-shell input:focus{outline:2px solid var(--teal-bright);outline-offset:2px;border-color:var(--teal-bright)}
.me-page-shell button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.75rem 1.25rem;
  font-size:1rem;
  font-weight:600;
  background:var(--teal-bright);
  color:#02080F;
  border:0;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
}
.me-page-shell button:hover{background:var(--teal);color:#fff}
.me-page-shell button:focus{outline:2px solid var(--fg);outline-offset:2px}
.me-page-shell a{color:var(--teal-bright)}
.me-page-shell a:hover{text-decoration:underline}
.me-page-shell .error{color:#ff8080;font-size:0.95rem;margin:0.75rem 0}
.me-page-shell .success{color:#80e0a0;font-weight:600}

.me-page-shell footer{
  margin-top:3rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:0.85rem;
  color:var(--muted);
}
.me-page-shell footer a{color:var(--muted)}

/* Token-display card — TOKEN_DISPLAY state on /me/signup */
.token-display-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:3px solid var(--teal-bright);
  border-radius:12px;
  padding:1.5rem 1.5rem;
  margin:1.5rem 0;
}
.token-display-code{
  display:block;
  font-family:"SF Mono",Consolas,monospace;
  font-size:1.05rem;
  background:#0A1A2C;
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.85rem 1rem;
  margin:0.5rem 0 1rem;
  word-break:break-all;
  user-select:all;
  color:var(--fg);
}
.token-copy-btn{min-width:9rem}
.token-copy-btn.copied{background:#2cb872;color:#02080F}

/* Rotated-token warning banner */
.token-warn-rotated{
  background:rgba(200,136,0,0.12);
  border:1px solid #6b4f0c;
  border-left:3px solid #c80;
  padding:0.85rem 1rem;
  border-radius:8px;
  margin:1rem 0;
  font-size:0.95rem;
  color:var(--fg);
}

/* signup_existing.html — single Rotate action card */
.token-action-card{
  background:rgba(200,136,0,0.08);
  border:1px solid var(--line);
  border-left:3px solid #c80;
  border-radius:12px;
  padding:1.5rem 1.5rem;
  margin:1.5rem 0;
}
.token-action-card h2 .warn-icon{color:#e6a72b;margin-right:0.4rem}
.token-action-card p{font-size:0.95rem;color:var(--fg);margin:0 0 1rem}
.token-action-card button{width:100%}
.other-email-link{display:inline-block;margin-top:1rem;color:var(--muted);font-size:0.92rem}