main.hero{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px;
    align-items:center;
    max-width:1400px; margin:0 auto; padding:40px 48px 100px;
    min-height:600px;
  }
  main.hero .badge{margin-bottom:28px;}
  h1.big{
    font-family:'Fredoka', sans-serif;
    font-size:68px; line-height:1.02; letter-spacing:-0.01em; font-weight:700;
    margin-bottom:22px;
  }
  h1.big .g1{background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  h1.big .g2{background:linear-gradient(90deg,var(--grad-b),var(--grad-c)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .tagline{font-size:18px; color:var(--text-mid); margin-bottom:40px; max-width:440px; line-height:1.5;}

  /* Signature element: a small looping chat exchange in the brand's own voice — this is
     a chat product, so the hero's job is to SHOW that, not describe it with stock stats.
     Visible by default (not hidden pending animation) — the staggered reveal below is a
     progressive enhancement added by JS for browsers that handle it well, never a
     precondition for the content actually being visible. */
  .chat-proof{max-width:380px; display:flex; flex-direction:column; gap:10px;}
  .chat-proof .bubble{
    width:fit-content; max-width:80%; padding:11px 16px; border-radius:16px;
    font-size:14.5px; line-height:1.4;
  }
  .chat-proof .bubble .who{display:block; font-size:11px; font-weight:700; letter-spacing:0.02em; margin-bottom:3px; opacity:0.65;}
  .chat-proof .bubble.them, .chat-proof .bubble.them2{background:var(--field-bg); color:var(--text-hi); border-bottom-left-radius:4px;}
  .chat-proof .bubble.me{background:linear-gradient(100deg, var(--grad-a), var(--grad-c)); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
  .chat-proof .typing{
    display:flex; gap:4px; padding:12px 16px; width:fit-content; border-radius:16px;
    background:var(--field-bg); border-bottom-left-radius:4px;
  }
  .chat-proof .typing span{width:6px; height:6px; border-radius:50%; background:var(--text-low); opacity:0.5;}
  /* Progressive enhancement only — added by a tiny script after load, see body. Nothing
     above depends on this to be visible; this only adds a staggered fade+slide-in for
     browsers running it. */
  .chat-proof.js-stagger .bubble, .chat-proof.js-stagger .typing{opacity:0; transform:translateY(8px); animation:bubbleIn 0.5s ease forwards;}
  .chat-proof.js-stagger .bubble.them{animation-delay:0.2s;}
  .chat-proof.js-stagger .bubble.me{animation-delay:1.1s;}
  .chat-proof.js-stagger .bubble.them2{animation-delay:2.0s;}
  .chat-proof.js-stagger .typing{animation-delay:2.9s;}
  .chat-proof.js-stagger .typing span{animation:typingDot 1.2s ease infinite;}
  .chat-proof.js-stagger .typing span:nth-child(2){animation-delay:0.15s;}
  .chat-proof.js-stagger .typing span:nth-child(3){animation-delay:0.3s;}
  @keyframes bubbleIn{ to{ opacity:1; transform:translateY(0); } }
  @keyframes typingDot{ 0%,60%,100%{ opacity:0.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
  @media (prefers-reduced-motion: reduce){
    .chat-proof.js-stagger .bubble, .chat-proof.js-stagger .typing{ animation:none; opacity:1; transform:none; }
    .chat-proof.js-stagger .typing span{ animation:none; }
  }

  .card::before{
    content:''; position:absolute; top:-60%; right:-30%; width:300px; height:300px;
    background:radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%);
    pointer-events:none;
  }
  /* The card gets its own small "you're about to walk into a real room" title bar —
     rather than reading as a generic auth form, it previews the actual space, the same
     way the hero's chat bubbles preview the actual conversation. */
  .card-titlebar{
    display:flex; align-items:center; gap:8px; margin:-38px -40px 28px; padding:14px 20px;
    background:rgba(255,255,255,0.03); border-bottom:1px solid var(--panel-border);
    font-size:12.5px; font-weight:700; color:var(--text-mid); position:relative; z-index:1;
  }
  .card-titlebar .live-dot{width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,0.2);}
  .card-titlebar b{color:var(--text-hi); font-weight:800;}

  /* Underline tabs instead of the filled-pill switcher — a text choice with a sliding
     indicator, not another gradient capsule. */
  .tabs{
    display:flex; gap:24px; border-bottom:1px solid var(--panel-border);
    margin-bottom:28px; position:relative; z-index:1;
  }
  .tab{
    padding:4px 2px 14px; font-weight:700; font-size:15px; color:var(--text-low);
    cursor:pointer; user-select:none; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
  }
  .tab.active{ color:var(--text-hi); border-bottom-color:var(--grad-a); }

  .panel-title{font-family:'Fredoka',sans-serif; font-size:23px; font-weight:600; margin-bottom:22px; position:relative; z-index:1;}
  form{position:relative; z-index:1;}
  .field label .opt{text-transform:none; font-weight:500; letter-spacing:0; color:var(--text-low); opacity:0.7;}
  .footnote{text-align:center; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-low); margin-top:20px; position:relative; z-index:1;}

  /* Casual field labels instead of the tiny uppercase enterprise-dashboard style. */
  .field label{ text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:700; color:var(--text-mid); }

  /* The inner "Registered User / Guest" choice is a secondary, in-panel toggle, not a
     second row of page-level tabs — a compact pill switch reads as clearly different
     from the Login/Register tabs above it instead of just repeating the same pattern. */
  #panel-login .tabs{
    display:inline-flex; gap:2px; border-bottom:none; background:rgba(255,255,255,0.03);
    border-radius:9px; padding:3px; margin-bottom:22px;
  }
  #panel-login .tabs .tab{
    padding:7px 14px; font-size:12.5px; border-radius:7px; border-bottom:none;
  }
  #panel-login .tabs .tab.active{ background:var(--field-bg); color:var(--text-hi); }

  /* ---- Per-theme layout (desktop only) ---- Real structural differences, not just
     recolors. Properly scoped inside @media (min-width:981px) rather than fought with
     !important — that's what actually guarantees these can never leak into the mobile
     layout below, since a desktop-only and a mobile-only range can never both match at
     once. (An earlier version of this used !important against a non-scoped mobile reset,
     which technically doesn't work: !important always wins over a non-!important rule
     regardless of which media query either one lives in, so Ocean's desktop 2-column
     grid was actually STILL winning on real phones — this is the real fix for that.) */
  @media (min-width: 981px){
    /* Midnight (default): side-by-side, hero left / card right — the base layout
       defined above already is this; no override needed here. */

    /* Ocean — mirrored: card first (left), hero second (right). A real structural flip. */
    html[data-theme="ocean"] main.hero{ grid-template-columns:0.95fr 1.05fr; }
    html[data-theme="ocean"] .card{ order:-1; }
    html[data-theme="ocean"] #hero-marketing{ order:1; }

    /* Sunset — stacked and centered, like a warm invitation rather than a split-screen
       form: headline and chat preview centered above a narrower, centered card below. */
    html[data-theme="sunset"] main.hero{ grid-template-columns:1fr; justify-items:center; max-width:620px; padding-bottom:70px; }
    html[data-theme="sunset"] #hero-marketing{ text-align:center; display:block; }
    html[data-theme="sunset"] .badge{ margin-left:auto; margin-right:auto; }
    html[data-theme="sunset"] .tagline{ margin-left:auto; margin-right:auto; }
    html[data-theme="sunset"] .chat-proof{ margin:0 auto; text-align:left; }
    html[data-theme="sunset"] .card{ width:100%; max-width:440px; margin-top:8px; }

    /* Forest — asymmetric: the hero is given more visual weight and sits top-aligned
       rather than vertically centered, with the card offset smaller alongside it
       instead of matching it width-for-width. */
    html[data-theme="forest"] main.hero{ grid-template-columns:1.3fr 0.7fr; align-items:start; padding-top:70px; gap:56px; }
    html[data-theme="forest"] .card{ margin-top:36px; }
    html[data-theme="forest"] h1.big{ font-size:58px; }
  }

  @media (max-width: 980px){
    main.hero{grid-template-columns:1fr; padding-top:10px;}
    h1.big{font-size:48px;}
    main.hero{padding:20px 24px 70px;}
    /* Mobile: show the login form first, marketing content collapsed behind a toggle -
       so mobile visitors land straight on the form instead of scrolling past hero copy. */
    #hero-marketing{display:none; order:2; margin-top:20px;}
    #hero-marketing.expanded{display:block;}
    .card{order:1;}
    #hero-toggle-btn{display:block;}
    /* Every theme gets the exact same mobile treatment — centered, contained, full
       width up to a sensible cap — since the desktop layout differences above are now
       properly scoped to min-width:981px and can never apply here at all. One rule for
       all 4 themes instead of a separate reset per theme, and it's the actual fix for
       "login form isn't centered on mobile": previously nothing explicitly centered
       the card at this width for any theme, it just happened to fill the single grid
       column edge-to-edge, and for Ocean specifically the old desktop-only !important
       rule was leaking through and forcing a broken 2-column squeeze on real phones. */
    .card{ width:100%; max-width:420px; margin:0 auto; }
    #hero-marketing{ text-align:center; }
    .badge{ margin-left:auto; margin-right:auto; }
    .chat-proof{ margin:0 auto; text-align:left; }
    /* Truly full-screen on mobile, not just "shown first" — the header/logo/nav bar
       (which serves desktop visitors browsing the site, not someone opening the app to
       log in) is hidden entirely here, and the hero area fills the actual full device
       viewport with the login card centered in it, so opening the site on a phone
       lands on nothing but the login form. 100dvh rather than 100vh specifically
       because mobile browser chrome (address bar, etc.) resizes the viewport as it
       shows/hides, and 100vh doesn't account for that the way 100dvh does. */
    header.site{display:none;}
    main.hero{
      min-height:100vh; min-height:100dvh;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      padding-top:24px; padding-bottom:24px;
    }
  }
  #hero-toggle-btn{display:none;}
  @media (max-width:480px){
    h1.big{font-size:38px;}
    .card{padding:28px 22px;}
  }


html[data-theme="aurora"] h1.big{ letter-spacing:-.04em; }
html[data-theme="aurora"] .chat-proof .bubble.me{
  background:linear-gradient(100deg,#7c5cff,#22d3ee);
}
html[data-theme="aurora"] .card{
  background:linear-gradient(180deg, rgba(32,22,60,.9), rgba(16,10,30,.94));
}

/* ==========================================================================
   Mobile login fixes (2026-09-25)
   ========================================================================== */
/* Registered User / Guest toggle: make the selected option obvious (all widths) */
#panel-login .tabs .tab.active{
  background:linear-gradient(90deg,#7c5cff,#ff4d9d) !important;
  color:#fff !important;
  box-shadow:0 4px 14px -6px rgba(255,77,157,.6);
}
#panel-login .tabs .tab:not(.active):hover{ color:var(--text-hi); }

/* "About HiHelloBye" toggle: the base rule above hid it on every screen */
@media (max-width: 980px){
  #hero-toggle-btn{ display:block !important; padding:10px 0; }
}

@media (max-width: 480px){
  /* Side gutter: index.html sets padding-left/right:0 inline on <main>,
     which made the card touch the screen edges */
  main.hero{
    padding-left:16px !important; padding-right:16px !important;
    padding-top:max(20px, env(safe-area-inset-top)) !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }
  #hero-toggle-btn{ margin-bottom:4px !important; }
  .card{ padding:26px 20px 24px !important; }
  /* Title bar must match the card padding, otherwise it spills past the card */
  .card-titlebar{ margin:-26px -20px 22px !important; padding:12px 18px !important; }
  .tabs{ margin-bottom:22px; }
  .panel-title{ margin-bottom:18px; }

  /* Security check: question and answer stacked cleanly, no squeeze */
  #login-captcha-field > div,
  #panel-register .field > div[style*="display:flex"]{ flex-wrap:wrap; }
  #captcha-question-login, #captcha-question-register{ min-width:92px; }

  /* Readability of the small print */
  .footnote{ font-size:11.5px; letter-spacing:.01em; color:var(--text-mid); opacity:.85; }

  /* Footer: centred, and links big enough to tap (44px targets) */
  footer.site{ padding:20px 16px 28px; justify-content:center; text-align:center; }
  footer.site .fl{ width:100%; }
  footer.site .flinks{ gap:4px; justify-content:center; width:100%; }
  footer.site .flinks a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; font-size:13px; color:var(--text-mid); }
  footer.site .copy{ color:var(--text-mid); opacity:.8; }
}