:root { color-scheme: dark; --bg:#0f0f0f; --surface:rgba(98,98,98,.18); --line:rgba(255,255,255,.13); --muted:#858585; --text:#f7f7f5; --ease:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; background:linear-gradient(135deg,#1f1f1f 0%,#0f0f0f 58%); color:var(--text); font-family:"Geometria","Avenir Next","Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; }
.ambient { position:fixed; z-index:-1; top:90px; left:50%; width:560px; height:330px; border-radius:50%; background:rgba(255,255,255,.18); filter:blur(125px); opacity:.24; transform:translateX(-50%); }
.glass { background:linear-gradient(145deg,rgba(255,255,255,.08),var(--surface)); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.24); backdrop-filter:blur(24px); }
.account-header { position:sticky; top:18px; z-index:20; width:min(1160px,calc(100% - 40px)); height:64px; margin:18px auto 0; display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 22px; background:rgba(22,22,22,.76); border:1px solid var(--line); border-radius:22px; backdrop-filter:blur(20px); }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:700; }
.brand img { width:30px; height:30px; display:block; object-fit:contain; border-radius:7px; }
.header-actions { display:flex; align-items:center; gap:12px; }
.back-link { padding:10px 14px; border:1px solid var(--line); border-radius:12px; color:#c6c6c6; font-size:13px; transition:.2s ease; }
.back-link:hover { border-color:rgba(255,255,255,.28); color:#fff; }
.language-switch { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.035); cursor:pointer; }
.language-switch span { min-width:31px; padding:6px 5px; border-radius:5px; color:#777; font-size:10px; text-align:center; }
.language-switch span.active { background:#fff; color:#111; }
.account-shell { width:min(1160px,calc(100% - 40px)); min-height:calc(100vh - 190px); margin:0 auto; padding:96px 0 110px; }
.kicker { color:#aaa; font-size:11px; font-weight:700; letter-spacing:.17em; }
.account-title { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.account-title h1,.account-empty h1 { margin:16px 0 0; font-size:clamp(46px,6vw,78px); line-height:.96; letter-spacing:-.04em; font-weight:500; }
.profile-summary { min-width:350px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:12px 14px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); }
.profile-summary .avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#fff; color:#111; font-weight:800; }
.profile-summary div { display:flex; min-width:0; flex-direction:column; gap:4px; }
.profile-summary b { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.profile-summary div span { overflow:hidden; color:#787878; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.plan-badge { padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:#aaa; font-size:9px; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
.account-layout { display:grid; grid-template-columns:245px 1fr; min-height:620px; overflow:hidden; border-radius:30px; }
.account-tabs { display:flex; flex-direction:column; padding:20px; border-right:1px solid var(--line); background:rgba(0,0,0,.13); }
.account-tab { min-height:60px; display:grid; grid-template-columns:28px 1fr; align-items:center; gap:10px; padding:0 13px; border:0; border-radius:13px; background:transparent; color:#777; cursor:pointer; text-align:left; transition:.2s ease; }
.account-tab:hover { color:#c7c7c7; background:rgba(255,255,255,.035); }
.account-tab.active { color:#111; background:#f3f2ef; }
.account-tab span { font-size:9px; opacity:.7; }
.account-tab b { font-size:12px; font-weight:600; }
.account-panels { padding:clamp(28px,5vw,62px); }
.account-panel[hidden] { display:none; }
.panel-heading { display:grid; grid-template-columns:42px 1fr; gap:14px; margin-bottom:40px; }
.panel-number { padding-top:8px; color:#666; font-size:11px; }
.panel-heading h2 { margin:0 0 8px; font-size:34px; font-weight:500; letter-spacing:-.03em; }
.panel-heading p { margin:0; color:#858585; font-size:14px; line-height:1.6; }
.settings-form { max-width:660px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.settings-form label,.delete-dialog label { display:flex; flex-direction:column; gap:9px; color:#858585; font-size:11px; letter-spacing:.06em; }
.settings-form input,.delete-dialog input { width:100%; height:52px; padding:0 15px; border:1px solid var(--line); border-radius:12px; outline:none; background:rgba(0,0,0,.19); color:#fff; font-size:14px; transition:border-color .2s ease,background .2s ease; }
.settings-form input:focus,.delete-dialog input:focus { border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.045); }
.settings-form .button { justify-self:start; }
.form-note { display:flex; flex-direction:column; justify-content:center; gap:7px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; }
.form-note span { color:#727272; font-size:10px; }.form-note b { font-size:13px; font-weight:500; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border:1px solid transparent; border-radius:15px; cursor:pointer; font-size:12px; font-weight:700; transition:transform .2s var(--ease),background .2s ease,border-color .2s ease; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:#f4f3ef; color:#111; box-shadow:0 0 36px rgba(255,255,255,.12); }
.button-ghost { border-color:var(--line); background:rgba(255,255,255,.04); color:#ddd; }
.button-danger { border-color:rgba(255,255,255,.16); background:#eee; color:#171717; }
.button:disabled { cursor:not-allowed; opacity:.4; transform:none; }
.subscription-status { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:28px; }
.subscription-status div { min-height:96px; display:flex; flex-direction:column; justify-content:space-between; padding:16px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.13); }
.subscription-status span { color:#737373; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.subscription-status b { font-size:16px; font-weight:500; }
.plan-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.plan-options button { min-height:155px; display:flex; flex-direction:column; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.035); cursor:pointer; text-align:left; transition:.2s ease; }
.plan-options button:hover,.plan-options button.active { border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.08); }
.plan-options span { color:#a8a8a8; font-size:11px; }.plan-options b { margin:auto 0 5px; font-size:27px; font-weight:500; }.plan-options small { color:#707070; font-size:10px; }
.text-button { margin-top:22px; padding:0; border:0; background:none; color:#777; font-size:11px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }.text-button:hover { color:#fff; }
.session-card,.data-card,.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:32px; padding:20px; border:1px solid var(--line); border-radius:17px; background:rgba(0,0,0,.12); }
.session-card > div { display:flex; align-items:center; gap:12px; }.session-card > div > div { display:flex; flex-direction:column; gap:5px; }
.session-card b,.data-card b,.danger-zone b { font-size:14px; font-weight:600; }.session-card small { color:#777; font-size:10px; }
.session-dot { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.5); }
.data-card { margin-top:0; }.data-card > div,.danger-zone > div { max-width:560px; }.data-card p,.danger-zone p { margin:7px 0 0; color:#7d7d7d; font-size:12px; line-height:1.6; }
.legal-consent { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.legal-consent > div:not(.legal-links) { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--line); border-radius:14px; }
.legal-consent span { color:#737373; font-size:10px; }.legal-consent b { font-size:14px; font-weight:500; }
.legal-links { grid-column:1/-1; display:flex; gap:20px; padding:5px 2px; }.legal-links a { color:#9f9f9f; font-size:11px; text-decoration:underline; text-underline-offset:4px; }.legal-links a:hover { color:#fff; }
.danger-zone { margin-top:28px; border-color:rgba(255,255,255,.18); }
.account-empty { max-width:760px; margin:30px auto 0; padding:clamp(34px,7vw,78px); border-radius:30px; text-align:center; }
.account-empty p { max-width:520px; margin:22px auto 30px; color:#888; font-size:16px; line-height:1.7; }
.account-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
#account-content .account-actions { justify-content:flex-start; }
#session-list .session-card { margin-top:12px; }
.account-empty[hidden],#account-content[hidden] { display:none !important; }
.delete-dialog { width:min(480px,calc(100% - 28px)); padding:0; border:1px solid rgba(255,255,255,.15); border-radius:26px; background:#171717; color:#fff; box-shadow:0 40px 120px rgba(0,0,0,.7); }
.delete-dialog::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(8px); }
.delete-dialog form { position:relative; display:flex; flex-direction:column; gap:18px; padding:42px; }
.delete-dialog h2 { margin:0; font-size:34px; font-weight:500; letter-spacing:-.03em; }.delete-dialog p { margin:0; color:#858585; font-size:13px; line-height:1.65; }
.delete-dialog .delete-confirm { flex-direction:row; align-items:flex-start; letter-spacing:normal; line-height:1.5; }
.delete-dialog .delete-confirm input { width:auto; height:auto; margin:2px 0 0; }
.delete-dialog [role="alert"] { color:#f0b1b1; }
.dialog-close { position:absolute; top:17px; right:17px; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:transparent; color:#aaa; font-size:20px; cursor:pointer; }
.toast { position:fixed; left:50%; bottom:25px; z-index:50; transform:translate(-50%,20px); padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:#efede8; color:#111; font-size:11px; font-weight:600; opacity:0; pointer-events:none; transition:.25s var(--ease); }.toast.visible { opacity:1; transform:translate(-50%,0); }
footer { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:30px 0 42px; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:#666; font-size:10px; }
footer a:hover { color:#fff; }
@media (max-width:860px) {
  .account-title { align-items:flex-start; flex-direction:column; }.profile-summary { width:100%; min-width:0; }
  .account-layout { grid-template-columns:1fr; }.account-tabs { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }.account-tab { min-width:150px; }
  .account-panels { min-height:620px; }
}
@media (max-width:600px) {
  .account-header,.account-shell,footer { width:calc(100% - 24px); }.account-header { top:8px; margin-top:8px; padding-left:14px; }.brand span { display:none; }.back-link { padding:9px 10px; font-size:10px; }
  .account-shell { padding:70px 0 80px; }.account-title h1,.account-empty h1 { font-size:47px; }.profile-summary { grid-template-columns:auto 1fr; }.plan-badge { grid-column:2; justify-self:start; }
  .account-layout { border-radius:22px; }.account-tabs { padding:10px; }.account-tab { min-width:128px; grid-template-columns:1fr; gap:3px; min-height:55px; }.account-tab span { display:none; }
  .account-panels { min-height:700px; padding:24px 18px; }.settings-form,.subscription-status,.plan-options,.legal-consent { grid-template-columns:1fr; }.panel-heading { grid-template-columns:28px 1fr; }.panel-heading h2 { font-size:29px; }
  .session-card,.data-card,.danger-zone { align-items:stretch; flex-direction:column; }.session-card .button,.data-card .button,.danger-zone .button { width:100%; }
  .legal-links { grid-column:auto; flex-direction:column; }.delete-dialog form { padding:36px 22px; }footer { flex-direction:column; gap:14px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }