.account-page { min-height: 100svh; padding: 40px 20px 70px; background: radial-gradient(circle at 25% 0, #fff9ec, #eee4d2 64%); color: var(--ink); }
.account-sheet { max-width: 870px; margin: auto; padding: 24px clamp(24px, 5vw, 60px) 30px; background: #fffaf0; border: 1px solid #e1cfac; border-radius: 16px; box-shadow: 0 26px 80px -50px #402b1a, inset 0 0 0 6px #fffaf0, inset 0 0 0 7px #eadabe; }
.account-sheet nav, .account-sheet footer { display: flex; justify-content: space-between; align-items: center; }
.account-sheet a { text-decoration: none; }
.account-brand { display: inline-flex; align-items: center; gap: 7px; font: 700 20px var(--serif); }
.account-brand img { width: 31px; }
.account-brand span { color: var(--accent); font: 400 11px var(--mono); }
.account-back, .account-action { color: var(--accent); font: 500 13px var(--sans); }
.account-hero { display: flex; align-items: center; gap: 26px; margin: 48px 0 38px; }
.account-hero .mono { color: var(--accent); letter-spacing: .16em; }
.account-seal { flex: none; width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; border: 3px double #b89d6a; background: #f4e8d8; color: var(--accent); font: 700 45px var(--serif); box-shadow: 0 8px 18px #5135182b; }
.account-hero h1 { margin: 8px 0; font: 500 clamp(34px, 5vw, 52px)/1.2 var(--serif); }
.account-hero p:last-child { color: var(--muted); }
.account-rule { border-top: 1px solid #decdaa; text-align: center; line-height: 0; margin-bottom: 30px; }
.account-rule span { background: #fffaf0; padding: 0 18px; color: #c39346; }
.account-section { margin: 28px 0 36px; }
.account-section h2 { margin-bottom: 13px; color: var(--ink-2); font: 500 23px var(--serif); }
.account-section h2 span { color: var(--accent); margin-right: 7px; }
.account-row { min-height: 78px; display: flex; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px dashed #dfceb4; }
.account-row > span:first-child { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.account-row strong { font: 500 15px var(--sans); }
.account-row small, .account-plan small { color: var(--muted); font: 400 12px/1.5 var(--sans); }
.account-row input[type=range] { width: min(200px, 32vw); accent-color: var(--accent); }
.account-row output { width: 3em; text-align: right; font: 400 12px var(--mono); color: var(--muted); }
.account-segment { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--paper-2); }
.account-segment button { border: 0; border-radius: 8px; padding: 8px 11px; color: var(--muted); background: none; font: 500 13px var(--sans); cursor: pointer; }
.account-segment button[aria-pressed=true] { background: white; color: var(--accent); box-shadow: 0 2px 8px #3a28131a; }
.account-plan-head { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.account-usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.account-usage > div { display: flex; flex-direction: column; gap: 7px; padding: 17px; border-radius: 12px; background: #f4ead9; }
.account-usage strong { font: 500 20px var(--serif); }
.account-plan { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px dashed #dfceb4; }
.account-plan > div:first-child { display: flex; flex-direction: column; }
.account-plan strong { font: 500 20px var(--serif); }
.account-plan b { font: 500 22px var(--serif); }
.account-plan button, .account-primary { border: 0; border-radius: 999px; padding: 10px 17px; background: var(--ink); color: var(--paper); font: 500 13px var(--sans); cursor: pointer; }
.account-plan button:disabled { opacity: .45; cursor: default; }
.account-primary { margin-top: 18px; }
.account-caption { margin-top: 11px; color: var(--muted); font: 400 12px/1.6 var(--sans); }
.account-notice { padding: 19px; background: #f4ead9; border-radius: 10px; }
.account-notice a { margin-left: 8px; color: var(--accent); }
.account-error { color: var(--accent); margin-top: 10px; }
.account-sheet footer { justify-content: center; gap: 12px; border-top: 1px solid #decdaa; padding-top: 25px; color: var(--muted); font: 400 12px var(--sans); }
@media (max-width: 600px) { .account-page { padding: 0; } .account-sheet { border-radius: 0; min-height: 100svh; } .account-hero { gap: 16px; margin: 40px 0; } .account-seal { width: 70px; height: 70px; font-size: 30px; } .account-row { flex-wrap: wrap; } .account-usage { grid-template-columns: 1fr; } .account-plan { grid-template-columns: 1fr auto; gap: 8px; } .account-plan button { grid-column: 1 / -1; } }