*,*::before,*::after{box-sizing:border-box}
    :root{
      --radius:14px; --radius-pill:9999px;
      --brand-a:#a78bfa; --brand-b:#8b5cf6;
      --panel-bg:rgba(255,255,255,.78); --panel-brd:rgba(255,255,255,.28);
      --panel-blur:16px; --panel-shadow:0 10px 28px rgba(25,35,60,.14);
      --weak-bg:rgba(0,0,0,.03);
      --ring:0 0 0 3px rgba(167,139,250,.28);
      --card-max:560px;
      --view-padding:18px;
    }
    html[data-bs-theme="dark"]{
      --panel-bg:rgba(32,32,36,.86); --panel-brd:rgba(255,255,255,.10);
      --panel-blur:18px; --panel-shadow:0 18px 42px rgba(0,0,0,.5);
      --weak-bg:rgba(255,255,255,.06);
      --ring:0 0 0 3px rgba(167,139,250,.38);
    }
    html,body{height:100%}
    body{
      background-color:var(--tblr-bg-surface);
      background-image:
        radial-gradient(60% 50% at 12% 8%, rgba(167,139,250,.18), transparent 60%),
        radial-gradient(55% 45% at 88% 12%, rgba(139,92,246,.18), transparent 65%),
        radial-gradient(70% 55% at 80% 105%, rgba(167,139,250,.12), transparent 65%),
        linear-gradient(180deg, rgba(167,139,250,.06), rgba(139,92,246,.06));
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
    }
    html[data-bs-theme="dark"] body{
      background-image:
        radial-gradient(60% 50% at 12% 8%, rgba(167,139,250,.28), transparent 60%),
        radial-gradient(55% 45% at 88% 12%, rgba(139,92,246,.28), transparent 65%),
        radial-gradient(70% 55% at 80% 105%, rgba(167,139,250,.22), transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
    }
    .auth-wrap{
      min-height:100vh; padding:1.25rem; display:grid; place-items:center;
    }
    @supports(min-height:100svh){ .auth-wrap{min-height:100svh} }
    @supports(min-height:100dvh){ .auth-wrap{min-height:100dvh} }
    .auth-card{
      width:min(var(--card-max), calc(100% - 2rem));
      border-radius:var(--radius);
      border:1px solid var(--panel-brd);
      background:rgba(255,255,255,0.7);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      box-shadow:var(--panel-shadow);
      overflow:hidden;
    }
    html[data-bs-theme="dark"] .auth-card {
      background:rgba(32,32,36,0.65);
    }
    .auth-top{
      display:flex;
      align-items:center;
      gap:.5rem;
      padding:.6rem .75rem;
      border-bottom:1px solid var(--tblr-border-color);
      flex-wrap:nowrap;
    }
    .brand-chip{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-weight:800;
      color:#fff;
      background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
      padding:.35rem .65rem;
      border-radius:10px;
      box-shadow:0 6px 18px rgba(167,139,250,.4);
      white-space:nowrap;
      font-size:.9rem;
    }
    .tabs{
      margin-left:auto;
      display:flex;
      gap:.3rem;
    }
    .tabs .nav-link{
      border:none;
      border-radius:10px;
      font-weight:700;
      color:var(--tblr-secondary);
      padding:.35rem .5rem;
      font-size:.85rem;
      white-space:nowrap;
      transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }
    .tabs .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
      box-shadow:0 4px 12px rgba(167,139,250,.35);
    }
    @media (max-width: 480px) {
      .auth-top{ gap:.4rem; padding:.5rem .6rem; }
      .brand-chip{ font-size:.8rem; padding:.3rem .5rem; }
      .tabs{ gap:.25rem; }
      .tabs .nav-link{ padding:.3rem .45rem; font-size:.8rem; }
    }
    @media (max-width: 360px) {
      .auth-top{ gap:.3rem; padding:.4rem .5rem; }
      .brand-chip{ font-size:.72rem; padding:.25rem .4rem; gap:.35rem; }
      .tabs{ gap:.2rem; }
      .tabs .nav-link{ padding:.25rem .35rem; font-size:.72rem; }
    }
    .view{
      padding:var(--view-padding);
      background:var(--weak-bg);
      border:1px solid var(--tblr-border-color);
      border-radius:calc(var(--radius) - 6px);
      margin: .9rem;
    }
    .view h3{font-weight:800; margin:0 0 .35rem; text-align:center}
    .view .sub{color:var(--tblr-secondary); text-align:center; margin-bottom:.6rem}
    @keyframes viewHighlight{
      0%   { box-shadow: 0 0 0 0 rgba(167,139,250,0.45), inset 0 0 0 1px rgba(167,139,250,0.45); }
      60%  { box-shadow: 0 0 0 4px rgba(167,139,250,0), inset 0 0 0 1px rgba(167,139,250,0); }
      100% { box-shadow: 0 0 0 0 rgba(167,139,250,0), inset 0 0 0 1px rgba(167,139,250,0); }
    }
    .view.is-entering{
      animation: viewHighlight 0.5s ease-out;
    }
    @media (prefers-reduced-motion: reduce){
      .view.is-entering{ animation: none; }
    }
    .btn, .form-control{border-radius:12px}
    .btn-primary{background:linear-gradient(135deg,var(--brand-a),var(--brand-b)); border:none; font-weight:700; box-shadow:0 3px 10px rgba(167,139,250,.35)}
    .btn-primary:hover{transform:translateY(-1px); box-shadow:0 5px 16px rgba(167,139,250,.45)}
    .btn-outline{border:1px solid #c4b5fd !important; color:#a78bfa; background:transparent}
    .btn-outline:hover{background:rgba(167,139,250,.12)}
    .form-control{ height:44px; }
    .form-control:focus{ box-shadow:var(--ring); border-color:transparent }
    .field + .field{ margin-top:.75rem }
    .strength-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px }
    .strength-bar i{ height:6px; border-radius:6px; background:rgba(0,0,0,.12) }
    html[data-bs-theme="dark"] .strength-bar i{ background:rgba(255,255,255,.16) }
    .strength-1 i:nth-child(1),
    .strength-2 i:nth-child(-n+2),
    .strength-3 i:nth-child(-n+3),
    .strength-4 i:nth-child(-n+4){ background:linear-gradient(135deg,var(--brand-a),var(--brand-b)) }
    .fab-theme{ position:fixed; right:16px; bottom:16px; z-index:1100; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--panel-brd); background:var(--panel-bg); box-shadow:var(--panel-shadow); cursor:pointer }
    .fab-theme svg{width:24px; height:24px}
    .icon-sun{display:block}
    .icon-moon{display:none}
    html[data-bs-theme="dark"] .icon-sun{display:none}
    html[data-bs-theme="dark"] .icon-moon{display:block}
    @media (prefers-reduced-motion: reduce){
      *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    }
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.15;
        z-index: -1;
        transition: opacity 0.6s ease-in-out;
      }
      html[data-bs-theme="dark"] body::before {
        opacity: 0.08;
      }