.account-main, .plans-main { padding: 66px 0 84px; }
.account-intro { max-width: 650px; margin: 0 auto 22px; }
.account-intro .eyebrow { margin-bottom: 8px; }
.account-intro p:last-child { margin-bottom: 0; color: var(--muted); font-size: 15px; }
.account-tabs { display: flex; gap: 22px; max-width: 650px; margin: 0 auto 22px; border-bottom: 1px solid var(--line); }
.account-tabs a { padding: 10px 0 13px; color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.account-tabs a:hover, .account-tabs a[aria-current="page"] { color: var(--ink); }
.account-tabs a[aria-current="page"] { box-shadow: inset 0 -2px var(--accent); }
.account-main > .notice, .account-main > .actions { max-width: 650px; margin-inline: auto; }

.panel { margin-top: 20px; padding: clamp(23px, 4vw, 38px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.panel h1 { margin-bottom: 12px; font-size: clamp(32px, 4vw, 43px); }
.panel h2 { margin-bottom: 12px; font-size: clamp(23px, 3vw, 29px); }
.panel h3 { margin-bottom: 13px; font-size: 19px; }
.panel p { color: var(--muted); }
.auth-panel { max-width: 650px; margin-inline: auto; }
.auth-panel > p { margin-bottom: 26px; }
.auth-panel > p:last-child { margin-bottom: 0; }
form { display: grid; align-items: start; gap: 12px; }
form label { color: var(--ink); font-size: 14px; font-weight: 700; }
form input, form select, form textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #b8c7bd; border-radius: 8px; outline-offset: 2px; background: #fff; color: var(--ink); }
form textarea { min-height: 170px; resize: vertical; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--accent); }
form input:disabled { background: #f0f3ef; color: var(--muted); }
form button { justify-self: start; }
.account-main button, .plans-main button, .admin-main button, .button { min-height: 44px; }
.account-main button, .plans-main button, .admin-main button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; font-weight: 700; }
.account-main button:hover:enabled, .plans-main button:hover:enabled, .admin-main button:hover:enabled { background: var(--accent-hover); }
.account-main button:disabled, .plans-main button:disabled, .admin-main button:disabled { border-color: var(--line); background: #edf1ec; color: #69756d; cursor: not-allowed; }
button.secondary, .button.secondary { border: 1px solid #b8c7bd; background: #fff; color: var(--ink); }
button.secondary:hover:enabled, .button.secondary:hover { background: var(--soft); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.hint { margin: -5px 0 7px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.notice { padding: 14px 17px; border: 1px solid #b9d9c3; border-radius: 9px; background: var(--soft); color: #28543d; font-size: 14px; line-height: 1.55; }
.feedback { min-height: 1.5em; margin: 16px 0; font-size: 14px; }
.feedback:empty { min-height: 0; margin: 0; }
.feedback[data-state="error"], #feedback[data-state="error"] { color: #a53d41; }
.feedback[data-state="success"], #feedback[data-state="success"] { color: var(--accent); }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 23px 0; }
.profile-grid > div { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #f9faf8; }
.profile-grid dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.profile-grid dd { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 17px; font-weight: 700; }
.session-list, .audit-list { margin: 10px 0 0; padding: 0; list-style: none; }
.session { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line); }
.session p { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 13px; }
.session strong { overflow-wrap: anywhere; }
.badge { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 5px; background: var(--soft); color: var(--accent); font-size: 11px; font-weight: 800; }
.audit-list li { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: 14px; }

.plans-main .page-heading { margin-bottom: 34px; }
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 20px 0; }
.tier-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; min-height: 252px; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.tier-card h2, .tier-card p { margin: 0; }
.tier-card h2 { font-size: 24px; }
.tier-card p { color: var(--muted); font-size: 14px; }
.tier-card--highest { border-color: var(--accent); background: #f0f7f1; }
.tier-quota { margin-top: auto !important; color: var(--ink) !important; font-weight: 750; }
.tier-card button, .tier-card .button { width: 100%; margin-top: 7px; }
.plans-note { max-width: 750px; margin-top: 35px; color: var(--muted); font-size: 14px; }
.plans-note p { margin-bottom: 8px; }

@media (max-width: 900px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .account-main, .plans-main { padding: 44px 0 64px; }
  .panel { padding: 22px; }
  .profile-grid, .tiers { grid-template-columns: 1fr; }
  .session { align-items: flex-start; flex-direction: column; }
  .tier-card { min-height: 0; }
}