:root{
  --bg:#edf4f1;
  --panel:rgba(255,255,255,.78);
  --border:rgba(42,73,67,.16);
  --text:#203c37;
  --text-dim:#6d8780;
  --accent:#ef765e;
  --accent-2:#4d9e91;
  --grad:linear-gradient(135deg,#ffb27d 0%,#ed7663 100%);
  --font-ui:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(760px 500px at 90% -12%,rgba(255,190,145,.48),transparent 65%),
    radial-gradient(650px 460px at -10% 36%,rgba(148,218,203,.42),transparent 67%),
    linear-gradient(135deg,#eef7f3 0%,#eaf1f5 52%,#f8eee9 100%);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;}
.account-topbar{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px clamp(16px,4vw,40px);
  border-bottom:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(16px);
}
.account-brand{width:136px;height:38px;display:block;background:url('/beatipy-orange.png') center / contain no-repeat;}
.top-link{color:var(--text-dim);font-size:13px;font-weight:600;}
.account-shell{width:min(100% - 32px,900px);margin:54px auto 80px;}
.account-kicker{margin:0 0 8px;color:var(--accent-2);font:600 11px ui-monospace,monospace;text-transform:uppercase;}
.account-shell h1{margin:0 0 26px;font-size:32px;}
.account-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;align-items:start;}
.account-nav{display:grid;gap:6px;}
.account-nav a{padding:11px 12px;border-radius:9px;color:var(--text-dim);font-size:13px;font-weight:600;}
.account-nav a[aria-current="page"],.account-nav a:hover{background:rgba(255,255,255,.68);color:var(--text);}
.account-content{display:grid;gap:14px;}
.account-section{padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 16px 40px -32px rgba(42,73,67,.42);}
.account-section h2{margin:0 0 5px;font-size:18px;}
.account-section > p{margin:0 0 18px;color:var(--text-dim);font-size:13px;line-height:1.55;}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:grid;gap:6px;}
.field label{color:var(--text-dim);font-size:12px;font-weight:600;}
.field input{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.84);color:var(--text);}
.field input:focus{outline:2px solid rgba(77,158,145,.32);border-color:var(--accent-2);}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
.button{min-height:40px;padding:9px 14px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.74);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;}
.button.primary{border-color:transparent;background:var(--grad);color:white;}
.button:disabled{opacity:.55;cursor:wait;}
.plan-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(77,158,145,.12);color:#367b70;font-size:11px;font-weight:700;}
.status-line,.form-message{min-height:20px;margin-top:12px;color:var(--text-dim);font-size:13px;line-height:1.5;}
.form-message.error{color:#ad4842;}
.form-message.success{color:#367b70;}
.payment-note{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.54);color:var(--text-dim);font-size:12px;line-height:1.5;}
.login-shell{width:min(100% - 32px,460px);margin:72px auto;}
.login-card{padding:28px;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:0 24px 70px -42px rgba(42,73,67,.5);}
.login-card h1{margin:0 0 7px;font-size:27px;}
.login-card > p{margin:0 0 22px;color:var(--text-dim);font-size:13px;line-height:1.5;}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:18px;border-radius:9px;background:rgba(42,73,67,.06);}
.auth-tabs button{min-height:36px;border:0;border-radius:7px;background:transparent;color:var(--text-dim);font-size:13px;font-weight:700;cursor:pointer;}
.auth-tabs button[aria-selected="true"]{background:white;color:var(--text);box-shadow:0 2px 8px -6px rgba(32,60,55,.55);}
.login-form{display:grid;gap:14px;}
.login-form .actions{margin-top:0;}
.login-form .button{width:100%;}
.login-foot{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:12px;color:var(--text-dim);}
.login-foot a{text-decoration:underline;text-underline-offset:3px;}
.otp-foot{display:flex;justify-content:space-between;gap:12px;margin-top:4px;font-size:12px;color:var(--text-dim);}
.otp-foot a{text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.otp-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.field .otp-digit{min-height:0;aspect-ratio:.85;padding:0;font-family:ui-monospace,monospace;font-size:22px;font-weight:700;text-align:center;caret-color:var(--accent);border-radius:10px;}
@media(max-width:640px){
  .account-shell{margin:34px auto 60px;}
  .account-layout{grid-template-columns:1fr;gap:12px;}
  .account-nav{grid-template-columns:1fr 1fr;}
  .account-nav a{padding:9px;}
  .account-section{padding:17px;}
  .field-grid{grid-template-columns:1fr;}
  .login-shell{margin:34px auto;}
  .login-card{padding:22px;}
}
.avatar-row{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.avatar-preview{width:72px; height:72px; border-radius:50%; overflow:hidden; background:#ef765e; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; flex:0 0 72px;}
.avatar-preview img{width:100%; height:100%; object-fit:cover;}

.pw-wrap{position:relative;}
.pw-wrap input{padding-right:44px;}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;cursor:pointer;color:var(--text-dim);display:grid;place-items:center;border-radius:8px;}
.pw-eye:hover{color:var(--text);}
.pw-eye svg{width:20px;height:20px;}

.history-list{display:grid;gap:10px;max-height:420px;overflow:auto;}
.history-item{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.5);}
.history-item p{margin:0;font-size:13px;line-height:1.5;word-break:break-word;}
.history-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-dim);font-size:12px;}

.version-tag{position:fixed;left:12px;bottom:10px;z-index:5;padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--text-dim);font-size:11px;font-weight:600;letter-spacing:.02em;pointer-events:none;}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1a1d;
  --panel:rgba(34,46,50,.82);
  --border:rgba(190,230,222,.16);
  --text:#e3f1ed;
  --text-dim:#92aca6;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(800px 560px at 92% -18%,rgba(239,118,94,.18),transparent 64%),
    radial-gradient(700px 540px at -12% 30%,rgba(77,158,145,.2),transparent 66%),
    linear-gradient(135deg,#0c1518 0%,#101c20 52%,#171520 100%);
}
html[data-theme="dark"] .account-topbar{
  border-bottom-color:rgba(190,230,222,.14);
  background:rgba(15,26,29,.55);
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .button,
html[data-theme="dark"] .payment-note,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .account-nav a[aria-current="page"],
html[data-theme="dark"] .account-nav a:hover{background:rgba(255,255,255,.07);color:var(--text);}
html[data-theme="dark"] .auth-tabs button[aria-selected="true"]{background:rgba(255,255,255,.14);color:var(--text);}
html[data-theme="dark"] .button.primary{background:var(--grad);color:#fff;}
html[data-theme="dark"] .account-brand img,html[data-theme="dark"] .brand-logo{filter:brightness(1.15);}

.coupon-form{margin-top:18px}
.coupon-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.coupon-row{display:flex;gap:8px;flex-wrap:wrap}
.coupon-row input{flex:1;min-width:200px;padding:10px 12px;border:1px solid var(--border,#ccc);border-radius:10px;font:inherit;letter-spacing:.04em;text-transform:uppercase;background:var(--field,#fff);color:inherit}