/* Minimal login/public CSS (lo_css.css)
   Only essentials for layout + typography + form controls
*/
:root {
  --bg: #000;
  --text: #e6cba6;
  --text-dim: rgba(230,203,166,0.55);
  --focus: #c7b090;
  --input-bg: #181d23;
  --input-bg-focus: #1c2329;
  --border: rgba(230,203,166,0.4);
  --radius: 4px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}
html,body { margin:0; padding:0; background:#000; color:var(--text); min-height:100%; }
body { display:flex; flex-direction:column; }
main.login-shell { flex:1; display:flex; flex-direction:column; align-items:center; }
.logo-block { margin-top:56px; margin-bottom:60px; text-align:center; }
.logo-block img { height:120px; width:auto; display:block; margin:0 auto 6px; }
.rolling-wrap { height:18px; width:210px; margin:0 auto; font-size:12px; letter-spacing:.5px; font-weight:500; }

form { margin:0; }
.login-stack { width:100%; max-width:430px; padding:0 0 140px; display:flex; flex-direction:column; gap:38px; }
.section { display:flex; flex-direction:column; gap:14px; }
.field { display:flex; flex-direction:column; gap:4px; }
.label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); font-weight:500; }
.input { background:var(--input-bg); border:1px solid var(--border); color:var(--text); padding:8px 10px; font-size:13px; border-radius:var(--radius); outline:none; transition:background .15s,border-color .15s; }
.input:focus { background:var(--input-bg-focus); border-color:var(--focus); }
.placeholder-dim::placeholder { color:rgba(230,203,166,0.38); }
.buttons { display:flex; flex-direction:column; gap:14px; }
.btn-grad { position:relative; border:0; cursor:pointer; font-size:13px; letter-spacing:.4px; font-weight:500; padding:11px 15px; border-radius:var(--radius); color:#000; background:linear-gradient(90deg,#edded4,#c7b090 55%,#b49364); }
.btn-outline { background:transparent; color:#fff; border:1px solid #fff; padding:10px 14px; font-size:12px; letter-spacing:.4px; border-radius:var(--radius); cursor:pointer; }
.btn-outline:hover { background:#111; }
.links-row { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.4px; }
.links-row a { color:var(--text-dim); text-decoration:none; }
.links-row a:hover { text-decoration:underline; }
.divider { display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.5px; color:var(--text-dim); }
.divider:before,.divider:after { content:""; flex:1; height:1px; background:#1b1f23; }
.alert-error { background:#3a1414; color:#f9d4d4; border:1px solid #6d2929; padding:6px 10px; font-size:12px; border-radius:var(--radius); }

/* Rolling text animation (typewriter) uses JS to mutate text */
#rolling-text { white-space:nowrap; overflow:hidden; display:inline-block; }

@media (max-width:560px){
  .login-stack { max-width:360px; }
  .logo-block img { height:100px; }
}

  /* === Enhanced Stylish Login Design Additions === */
  /* Hero radial glow background */
  /* Beige theme adaptation (replaces cyan) and switch to block layout to control horizontal center via auto margins */
  body.login-page { --login-accent:#d9c3a0; --login-accent-soft:#6d5c45; --login-accent-strong:#f1e0c7; --login-bg:#000; --panel-bg:rgba(30,24,20,0.82); --panel-border:rgba(255,255,255,0.06); --panel-border-strong:rgba(255,255,255,0.12); --input-bg:rgba(255,255,255,0.045); --input-border:rgba(255,255,255,0.16); --input-border-focus:#d9c3a0; --danger:#ff4d4d; background:#000; background-image:radial-gradient(circle at 62% 24%, rgba(145,115,75,0.26), rgba(0,0,0,0) 55%), radial-gradient(circle at 18% 82%, rgba(115,90,60,0.18), rgba(0,0,0,0) 60%), radial-gradient(circle at 110% 50%, rgba(80,60,40,0.20), rgba(0,0,0,0) 70%); background-repeat:no-repeat; background-attachment:fixed; min-height:100vh; display:block; }
  body.login-page { --field-width:300px; }
  body.login-page::before { content:''; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 40%, rgba(18,181,255,0.10), transparent 65%); mix-blend-mode:plus-lighter; animation:pulseGlow 8s ease-in-out infinite; }
  @keyframes pulseGlow { 0%,100%{opacity:.6;} 50%{opacity:.2;} }

  /* Center wrapper refined */
  /* Horizontal centering of panel */
  #login-root { padding-top:0; padding-bottom:0; width:100%; display:flex; justify-content:center; margin:40px 0 100px; }
  #login-root > .login-panel { margin:0 auto; }
  /* Center text inside panel as requested */
  .login-panel, .login-panel .login-logo-block { text-align:center; }
  .login-panel form { text-align:left; }
  .login-panel .divider, .login-panel .login-links { text-align:center; }
  .login-panel .form-control { text-align:left; width:var(--field-width); margin-left:auto; margin-right:auto; }
  .login-panel .form-control > label { display:block; padding-left:2px; }
  .login-panel .form-control input { width:100%; }
  /* Uniform edge alignment (inputs & buttons share identical outer width + border-box) */
  .login-panel .form-control input,
  .login-panel .btn-origami,
  .login-panel .btn-google,
  .login-panel .btn-secondary-alt { box-sizing:border-box; }
  .login-panel .btn-origami,
  .login-panel .btn-google,
  .login-panel .btn-secondary-alt { width:var(--field-width) !important; }
  /* Keep inputs left-aligned but stretch full width */
  .login-panel input[type="email"],
  .login-panel input[type="password"],
  .login-panel input[type="text"] { text-align:left; }

  /* Glass panel container */
  .login-panel { position:relative; width:430px; border:1px solid var(--panel-border); background:linear-gradient(170deg, rgba(42,36,30,0.94), rgba(26,21,16,0.90) 58%, rgba(20,16,13,0.95)); backdrop-filter:blur(28px) saturate(185%); -webkit-backdrop-filter:blur(28px) saturate(185%); border-radius:34px; padding:56px 52px 60px; box-shadow:0 25px 60px -26px rgba(0,0,0,0.9), 0 10px 30px -14px rgba(150,120,80,0.28), 0 0 0 1px rgba(255,255,255,0.05); overflow:hidden; }
  .login-panel::selection { background:rgba(217,195,160,0.35); color:#000; }
  .login-panel::before { content:''; position:absolute; inset:0; background:
      linear-gradient(130deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.015) 32%, rgba(255,255,255,0.02) 72%, rgba(255,255,255,0.10) 100%),
      radial-gradient(circle at 85% 14%, rgba(255,220,170,0.14), transparent 60%),
      radial-gradient(circle at 0% 100%, rgba(200,160,110,0.10), transparent 65%);
      pointer-events:none; mix-blend-mode:overlay; }
  .login-panel::after { content:''; position:absolute; top:-30%; left:-25%; width:80%; aspect-ratio:1/1; background:radial-gradient(circle at 35% 40%, rgba(240,215,175,0.55), rgba(200,155,100,0.10) 58%, transparent 72%); filter:blur(85px) saturate(200%); opacity:.30; transform:rotate(22deg); pointer-events:none; }
  /* Inner luminous border */
  .login-panel::before, .login-panel::after { transition:opacity .6s ease; }
  .login-panel:hover::after { opacity:.38; }
  .login-panel:hover { box-shadow:0 28px 65px -26px rgba(0,0,0,0.9), 0 12px 34px -14px rgba(170,135,90,0.30), 0 0 0 1px rgba(255,255,255,0.06); }

  /* Logo block alignment improvements */
  .login-logo-block { display:flex; flex-direction:column; align-items:center; gap:1.1rem; margin-bottom:1.5rem; width:var(--field-width); margin-left:auto; margin-right:auto; }
  .login-logo-block .rolling-holder { height:22px; width:250px; overflow:hidden; position:relative; }
  .login-logo-block #rolling-text { font-size:0.7rem; letter-spacing:2.2px; font-weight:600; text-transform:uppercase; background:linear-gradient(100deg,#f6e8d2,#e3cda8 55%,#f6e8d2); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.92; filter:drop-shadow(0 0 4px rgba(210,185,140,0.38)); }
  .login-panel h1, .login-panel h2, .login-panel h3 { font-family:"Inter", system-ui, sans-serif; font-weight:600; letter-spacing:.4px; margin:0; }

  /* Enlarged logo (no extra frame) */
  .login-logo-block img { width:100px; height:100px; }

  /* Divider refined */
  .divider { display:flex; align-items:center; justify-content:center; gap:.75rem; font-size:.62rem; letter-spacing:1.6px; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.42); position:relative; }
  .divider::before, .divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25)); }
  .divider::after { background:linear-gradient(90deg, rgba(255,255,255,0.25), transparent); }

  /* Inputs refined */
  .login-panel input[type="email"],
  .login-panel input[type="password"],
  .login-panel input[type="text"] { width:100%; background:linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border:1px solid var(--input-border); color:#f6f4f1; font-size:.82rem; padding:.68rem .9rem .7rem; border-radius:15px; font-weight:500; letter-spacing:.35px; outline:none; transition:border-color .25s, box-shadow .25s, background .25s; box-shadow:0 0 0 1px rgba(255,255,255,0.02), 0 3px 10px -6px rgba(0,0,0,0.65); }
  /* Darker variant (no white) */
  .login-panel input[type="email"],
  .login-panel input[type="password"],
  .login-panel input[type="text"] { background:linear-gradient(160deg, rgba(20,18,16,0.85), rgba(26,22,19,0.82)); }
  .narrow-form .form-control { align-items:center; }
  .narrow-form .form-control > label { width:100%; max-width:300px; text-align:left; }
  .narrow-field { width:var(--field-width); max-width:var(--field-width); }
  .btn-origami.w-full, .btn-secondary-alt.w-full { width:var(--field-width); margin-left:auto; margin-right:auto; display:block; }
  .btn-origami.cyan, .btn-secondary-alt { width:var(--field-width); margin-left:auto; margin-right:auto; display:block; }
  /* Ensure forms center internal buttons precisely */
  .narrow-form { display:flex; flex-direction:column; align-items:center; }
  .narrow-form .btn-origami { align-self:center; }
  .btn-google { width:var(--field-width); max-width:var(--field-width); margin-left:auto; margin-right:auto; }
  .divider { width:var(--field-width); margin:1.05rem auto 1.05rem; }
  /* More breathing room below onboarding button equal to gap above Email */
  form[action="/login/onboarding"] .btn-origami { margin-top:.55rem; margin-bottom:.9rem; }
  .mini-link-row, .login-links.subdued { width:var(--field-width); margin-left:auto; margin-right:auto; }
  .oauth-stack { width:var(--field-width); margin-left:auto; margin-right:auto; }
  .mini-link-row { width:var(--field-width); max-width:var(--field-width); display:flex; justify-content:center; margin-top:.3rem; }
  .mini-link { font-size:.55rem; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.55); text-decoration:none; position:relative; }
  .mini-link:hover { color:#fff; }
  .login-panel input:focus { border-color:var(--input-border-focus); box-shadow:0 0 0 3px rgba(217,195,160,0.3),0 0 0 1px var(--input-border-focus),0 6px 16px -8px rgba(210,180,130,0.35); background:linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)); }
  .login-panel label .label-text { font-size:.63rem; letter-spacing:1.1px; font-weight:600; opacity:.55; text-transform:uppercase; }
  .login-panel .form-control { margin-bottom:.85rem; }
  .login-panel .form-control:last-child { margin-bottom:0; }

  /* Fancy button redesign while keeping class name */
  .btn-origami.cyan { position:relative; isolation:isolate; border:1px solid rgba(255,255,255,0.10); border-radius:18px; font-size:.74rem; padding:.78rem 1rem .8rem; letter-spacing:.55px; font-weight:600; background:linear-gradient(115deg,#d8ba8b 0%,#e2c8a2 32%,#f3e3cc 55%,#d7b786 78%,#cfa66b 100%); background-size:220% 100%; box-shadow:0 8px 24px -10px rgba(210,180,130,0.48), 0 2px 5px -2px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05); text-shadow:0 1px 2px rgba(0,0,0,0.35); color:#241a0f; overflow:hidden; }
  .btn-origami.cyan::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform:translateX(-120%); animation:btnSheen 4.5s ease-in-out infinite; }
  @keyframes btnSheen { 0%,72% { transform:translateX(-120%);} 80% { transform:translateX(120%);} 100% { transform:translateX(120%);} }
  .btn-origami.cyan:hover { background-position:100% 50%; box-shadow:0 12px 32px -14px rgba(215,185,140,0.65), 0 4px 10px -4px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); }
  .btn-origami.cyan:focus { outline:none; box-shadow:0 0 0 3px rgba(217,195,160,0.55), 0 0 0 1px #d9c3a0, 0 10px 26px -14px rgba(215,185,140,0.65); }
  .btn-origami.cyan:active { transform:translateY(1px); }
  .btn-secondary-alt { background:linear-gradient(145deg,#2a2d31,#202327 55%,#191c1f); border:1px solid rgba(255,255,255,0.08); color:#d9dde2; font-weight:600; padding:.78rem .95rem .8rem; border-radius:18px; font-size:.7rem; letter-spacing:.55px; transition:background .45s, color .3s, border-color .45s, box-shadow .45s; position:relative; overflow:hidden; }
  .btn-secondary-alt::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 70%); opacity:0; transition:opacity .5s; }
  .btn-secondary-alt:hover { background:linear-gradient(140deg,#34393f,#282c31 55%,#202428); border-color:rgba(255,255,255,0.16); color:#fff; box-shadow:0 10px 24px -16px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.07); }
  .btn-secondary-alt:hover::after { opacity:.65; }

  /* Subtle links */
  .login-links { display:flex; align-items:center; justify-content:space-between; font-size:.56rem; letter-spacing:1.05px; text-transform:uppercase; font-weight:600; margin-top:.7rem; gap:1.4rem; }
  /* OAuth block */
  .oauth-stack { margin-top:2.2rem; }
  .btn-google { margin:0 auto; display:flex; align-items:center; justify-content:center; gap:.55rem; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.16); border-radius:16px; padding:.64rem .85rem .68rem; font-size:.55rem; font-weight:600; font-family:Inter, system-ui, sans-serif; letter-spacing:1px; text-transform:uppercase; color:#d9d7d4; cursor:pointer; position:relative; box-shadow:0 2px 10px -6px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.03); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:box-shadow .35s, border-color .35s, transform .25s, background .5s, color .4s; }
  .btn-google:hover { background:rgba(255,255,255,0.06); box-shadow:0 6px 18px -10px rgba(0,0,0,0.65),0 0 0 1px rgba(255,255,255,0.05); }
  .btn-google:active { transform:translateY(1px); }
  .btn-google:focus { outline:none; box-shadow:0 0 0 3px rgba(217,195,160,0.35), 0 0 0 1px #d9c3a0; }
  .btn-google .g-icon { display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 2px rgba(0,0,0,0.4)); }
  .btn-google strong { font-weight:600; letter-spacing:.4px; background:linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .label-text-inline { font-size:.55rem; letter-spacing:1px; text-transform:uppercase; opacity:.55; }
  .login-links.subdued { justify-content:center; }
  .disabled-link { opacity:.35; cursor:not-allowed; font-size:.56rem; letter-spacing:1.05px; }
  /* Hide scrollbars (background radials might overflow) */
  html { scrollbar-width:none; }
  html::-webkit-scrollbar { width:0; height:0; }
  .login-links a { color:rgba(255,255,255,0.55); text-decoration:none; position:relative; padding:.18rem .1rem .2rem; }
  .login-links a::after { content:''; position:absolute; left:50%; bottom:2px; height:1px; width:0; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)); transform:translateX(-50%); transition:width .5s; }
  .login-links a:hover { color:#fff; }
  .login-links a:hover::after { width:100%; }

  /* Alert styling override */
  .alert.alert-error { background:linear-gradient(135deg,rgba(70,0,0,0.65),rgba(120,0,0,0.55)); border:1px solid rgba(255,0,0,0.28); color:#ffc9c9; font-size:.7rem; font-weight:600; letter-spacing:.4px; padding:.55rem .75rem .6rem; border-radius:12px; box-shadow:0 0 0 1px rgba(255,0,0,0.25), 0 6px 16px -10px rgba(255,0,0,0.55); }

  /* Animations */
  @keyframes upscaleIn { 0%{ transform:scale(.92) translateY(12px); opacity:0; filter:blur(4px);} 100%{ transform:scale(1) translateY(0); opacity:1; filter:blur(0);} }
  .login-panel { animation:upscaleIn .7s cubic-bezier(.16,.84,.36,1); }
  .login-panel:hover { transition:box-shadow .6s, transform .6s; }
  .login-panel:active { transform:translateY(1px); }

  /* Responsive */
  @media (max-width:600px){
    .login-panel { padding:42px 26px 44px; border-radius:24px; }
    .login-logo-block #rolling-text { font-size:.65rem; letter-spacing:1.7px; }
    .login-links { flex-direction:column; gap:.4rem; }
  }

  /* Reduce motion accessibility */
  @media (prefers-reduced-motion: reduce){
    .login-panel, .fade-in { animation:none !important; }
    .btn-origami.cyan { transition:none; }