
:root{color-scheme:light}
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(900px 520px at 6% -5%,#fdece7 0%,rgba(253,236,231,0) 62%),
      radial-gradient(820px 520px at 104% 105%,#f1e3d7 0%,rgba(241,227,215,0) 58%),
      #f6f1ec;
    color:#2b2320;font:14px/1.65 "Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased}
  body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
  body::before{width:360px;height:360px;background:rgba(229,72,60,.10);left:-90px;bottom:-120px}
  body::after{width:300px;height:300px;background:rgba(199,133,47,.10);right:-80px;top:-70px}
  .card{position:relative;z-index:1;width:min(430px,92vw);background:rgba(255,255,255,.94);
    border:1px solid #efe4da;border-radius:22px;padding:32px 30px 24px;
    box-shadow:0 30px 70px -34px rgba(74,48,33,.38),0 2px 8px rgba(74,48,33,.04);
    backdrop-filter:blur(10px)}
  .brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .dot{width:42px;height:42px;border-radius:13px;position:relative;flex-shrink:0;
    background:linear-gradient(135deg,#e5483c,#f08a5d);
    box-shadow:0 12px 26px -12px rgba(229,72,60,.7)}
  .dot::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;
    border-radius:50%;border:1.6px solid rgba(255,255,255,.9);
    box-shadow:0 0 0 5px rgba(255,255,255,.16)}
  h1{font-size:18px;margin:0;letter-spacing:.2px;font-weight:650}
  p.sub{color:#a3958b;font-size:12px;margin:3px 0 22px;letter-spacing:.2px}
  .tabs{display:flex;gap:4px;background:#f4ece6;padding:4px;border-radius:11px;margin-bottom:18px}
  .tabs button{flex:1;border:0;background:transparent;color:#8d7f76;padding:8px;border-radius:8px;
    cursor:pointer;font-size:12.5px;font-weight:500;transition:.15s}
  .tabs button.on{background:#fff;color:#e5483c;box-shadow:0 2px 6px -2px rgba(74,48,33,.18)}
  label{display:block;font-size:12px;color:#8d7f76;margin:13px 0 6px;font-weight:500}
  input{width:100%;padding:11px 13px;border-radius:11px;border:1px solid #e6d8cc;
    background:#fff;color:#2b2320;font-size:14px;outline:none;transition:.15s}
  input::placeholder{color:#bdb0a6}
  input:focus{border-color:#e5483c;box-shadow:0 0 0 3px rgba(229,72,60,.10)}
  .btn{width:100%;margin-top:20px;padding:12px;border:0;border-radius:11px;cursor:pointer;
    background:linear-gradient(135deg,#e5483c,#ef6a4e);color:#fff;font-size:14px;font-weight:600;
    letter-spacing:.3px;box-shadow:0 12px 26px -14px rgba(229,72,60,.8);transition:.16s}
  .btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(229,72,60,.9)}
  .btn:disabled{opacity:.6;cursor:default;transform:none}
  .err{margin-top:12px;color:#c0392b;font-size:12.5px;min-height:18px}
  .hint{margin-top:16px;color:#b3a59b;font-size:11.5px;line-height:1.75;
    border-top:1px solid #f3eae2;padding-top:14px}
  .hide{display:none}

html[data-theme="red"] body::before,html[data-theme="red"] body::after{display:none!important}

h1{color:#2b2320!important}
.brand .dot{background:linear-gradient(135deg,#e5483c,#f08a5d)!important}
