@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --account-bg: #101214;
  --account-panel: #17191c;
  --account-panel-soft: #141619;
  --account-line: rgba(255,255,255,.1);
  --account-line-strong: rgba(255,255,255,.17);
  --account-text: #f3f4f4;
  --account-muted: #969ba1;
  --account-dim: #666d74;
  --account-red: #e53935;
  --account-red-bright: #ff5a61;
  --account-green: #59cf82;
  --account-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--account-text); background: var(--account-bg); font-family: var(--account-font); font-size: 14px; line-height: 1.55; }
body::before { position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 70% 0%, rgba(229,57,53,.08), transparent 30%), linear-gradient(180deg, #111315, #0f1114 70%, #151113); content: ""; }
body.sidebar-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--account-red-bright); outline-offset: 4px; }

.account-app { min-height: 100vh; }
.account-sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; display: flex; width: 266px; flex-direction: column; padding: 25px 18px 18px; border-right: 1px solid var(--account-line); background: rgba(17,19,21,.94); backdrop-filter: blur(18px); }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.account-brand { display: inline-flex; align-items: center; gap: 11px; min-height: 35px; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.account-brand img { display: block; width: 28px; height: 28px; object-fit: contain; }
.sidebar-close, .menu-button { display: none; border: 0; background: transparent; cursor: pointer; }
.sidebar-label { margin: 44px 12px 10px; color: #646a70; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-label-spaced { margin-top: 32px; }
.dashboard-nav { display: grid; gap: 4px; }
.dashboard-nav a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; color: #a7adb2; font-size: 13px; font-weight: 600; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.dashboard-nav a:hover, .dashboard-nav a.active { border-color: rgba(229,57,53,.28); background: rgba(229,57,53,.1); color: #fff; }
.dashboard-nav a.active { box-shadow: inset 3px 0 0 var(--account-red); }
.dashboard-nav svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.dashboard-nav a:first-child svg rect { fill: currentColor; stroke: none; }
.sidebar-bottom { margin-top: auto; }
.storefront-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 12px; border: 1px solid var(--account-line); border-radius: 10px; color: #b4b9bd; font-size: 12px; font-weight: 600; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.storefront-link:hover { border-color: rgba(229,57,53,.5); background: rgba(229,57,53,.08); color: #fff; }
.storefront-link > span:last-child { color: var(--account-red-bright); font-size: 18px; }
.sidebar-status { display: flex; align-items: center; gap: 10px; margin: 17px 12px 0; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--account-green); box-shadow: 0 0 0 5px rgba(89,207,130,.1); }
.sidebar-status strong, .sidebar-status small { display: block; }
.sidebar-status strong { color: #d8dadd; font-size: 11px; font-weight: 700; }
.sidebar-status small { margin-top: 2px; color: #666d74; font-size: 10px; }
.logout-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 16px; padding: 11px 12px; border: 1px solid var(--account-line); border-radius: 9px; background: transparent; color: #8c9398; cursor: pointer; font-size: 11px; text-align: left; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.logout-link:hover { border-color: rgba(229,57,53,.4); background: rgba(229,57,53,.08); color: #f2b0ad; }

.account-main { min-height: 100vh; margin-left: 266px; }
.account-topbar { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 75px; padding: 0 43px; border-bottom: 1px solid var(--account-line); background: rgba(16,18,20,.78); backdrop-filter: blur(18px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--account-dim); font-size: 12px; }
.breadcrumb b { color: #444a4f; font-weight: 500; }
.breadcrumb strong { color: #d9dcde; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.theme-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--account-line-strong); border-radius: 50%; background: transparent; cursor: pointer; color: #9fa5aa; transition: color .2s ease, border-color .2s ease; }
.theme-button:hover { border-color: var(--account-red); color: #fff; }
.theme-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
.discord-link { color: #a7adb2; font-size: 12px; font-weight: 600; }
.discord-link:hover { color: #fff; }
.discord-link span { margin-left: 5px; color: var(--account-red-bright); font-size: 16px; }
.profile-chip { display: inline-flex; align-items: center; gap: 9px; padding: 4px 6px 4px 4px; border: 1px solid transparent; border-radius: 10px; transition: border-color .2s ease, background .2s ease; }
.profile-chip:hover { border-color: var(--account-line); background: rgba(255,255,255,.04); }
.profile-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #e53935, #7c1d2a); color: #fff; font-size: 10px; font-weight: 800; }
.profile-chip strong, .profile-chip small { display: block; }
.profile-chip strong { color: #e4e6e7; font-size: 11px; font-weight: 700; }
.profile-chip small { margin-top: 1px; color: #72787e; font-size: 10px; }
.profile-chevron { margin-left: 4px; color: #6b7176; font-size: 16px; }

.account-content { width: min(1160px, calc(100% - 86px)); margin: 0 auto; padding: 60px 0 70px; }
.welcome-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 42px; }
.account-kicker, .panel-kicker { margin: 0 0 10px; color: var(--account-red-bright); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.welcome-row h1 { margin: 0; color: #f4f5f5; font-size: clamp(34px, 4vw, 50px); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.welcome-row h1 span { color: var(--account-red-bright); }
.welcome-row h1 .welcome-dot { color: var(--account-red-bright); }
.welcome-copy { max-width: 520px; margin: 15px 0 0; color: var(--account-muted); font-size: 14px; }
.demo-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid rgba(229,57,53,.3); border-radius: 999px; background: rgba(229,57,53,.08); color: #eea3a1; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.demo-badge > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--account-red); box-shadow: 0 0 0 4px rgba(229,57,53,.13); }
.auth-badge-text { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; }

.subscription-panel { overflow: hidden; border: 1px solid var(--account-line-strong); border-radius: 17px; background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: 0 18px 60px rgba(0,0,0,.16); }
.panel-heading, .section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.panel-heading { padding: 25px 28px 22px; border-bottom: 1px solid var(--account-line); }
.panel-heading h2, .section-heading-row h2 { margin: 0; color: #f1f2f2; font-size: 24px; letter-spacing: -.045em; }
.outline-button { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 13px; border: 1px solid rgba(229,57,53,.45); border-radius: 8px; background: rgba(229,57,53,.08); cursor: pointer; color: #f19a98; font-size: 11px; font-weight: 700; transition: background .2s ease, border-color .2s ease; }
.outline-button:hover { border-color: var(--account-red); background: rgba(229,57,53,.18); color: #fff; }
.outline-button span { font-size: 16px; }
.subscription-table-wrap { overflow-x: auto; }
.subscription-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.subscription-table th { padding: 13px 28px; border-bottom: 1px solid var(--account-line); color: #676e75; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.subscription-table td { padding: 20px 28px; border-bottom: 1px solid var(--account-line); color: #dfe1e2; vertical-align: middle; }
.subscription-table td > strong, .subscription-table td > small { display: block; }
.subscription-table td > strong { font-size: 12px; font-weight: 700; }
.subscription-table td > small { margin-top: 4px; color: #6e757b; font-size: 10px; }
.product-cell { display: flex; align-items: center; gap: 11px; }
.product-cell-mark { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(229,57,53,.38); border-radius: 10px; background: rgba(229,57,53,.1); color: #f15b59; font-size: 17px; font-weight: 800; }
.product-cell strong, .product-cell small { display: block; }
.product-cell strong { font-size: 12px; font-weight: 700; }
.product-cell small { margin-top: 3px; color: #6e757b; font-size: 10px; }
.risk-badge, .active-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.risk-badge { color: var(--account-green); }
.risk-badge i, .update-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--account-green); box-shadow: 0 0 0 4px rgba(89,207,130,.1); }
.active-badge { padding: 6px 9px; background: rgba(89,207,130,.12); color: #79e39c; }
.active-badge.status-muted { background: rgba(255,255,255,.08); color: #a4abb0; }
.subscription-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 28px; color: #70777d; font-size: 11px; }
.subscription-foot-actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.text-action { padding: 0; border: 0; background: transparent; color: #a8aeb2; cursor: pointer; font-size: 11px; font-weight: 600; }
.text-action:hover { color: var(--account-red-bright); }
.text-action span { margin-left: 5px; color: var(--account-red-bright); font-size: 16px; }
.subscription-foot a { color: #d3d5d6; font-weight: 600; }
.subscription-foot a:hover { color: var(--account-red-bright); }
.subscription-foot a span { margin-left: 5px; color: var(--account-red-bright); font-size: 16px; }

.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.action-card { min-height: 206px; padding: 22px; border: 1px solid var(--account-line); border-radius: 15px; background: rgba(255,255,255,.022); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.action-card:hover { border-color: rgba(229,57,53,.42); background: rgba(229,57,53,.045); transform: translateY(-3px); }
.action-card-primary { border-color: rgba(229,57,53,.38); background: linear-gradient(135deg, rgba(229,57,53,.14), rgba(255,255,255,.025)); }
.action-card-top { display: flex; align-items: center; justify-content: space-between; }
.action-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(229,57,53,.35); border-radius: 10px; background: rgba(229,57,53,.1); color: var(--account-red-bright); }
.action-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.action-arrow { color: #686e73; font-size: 19px; }
.action-card h3 { margin: 24px 0 7px; color: #eceeef; font-size: 16px; font-weight: 700; }
.action-card p { min-height: 43px; margin: 0; color: #8b9298; font-size: 12px; line-height: 1.55; }
.action-card button { margin-top: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; color: #e7e8e9; font-size: 11px; font-weight: 700; }
.action-card button::after { margin-left: 7px; color: var(--account-red-bright); content: "→"; font-size: 16px; vertical-align: -1px; }
.action-card button:hover { color: var(--account-red-bright); }

.updates-section { margin-top: 61px; }
.section-heading-row { align-items: center; margin-bottom: 18px; }
.section-heading-row a { color: #9da3a8; font-size: 11px; font-weight: 700; }
.section-heading-row a:hover { color: #fff; }
.section-heading-row a span { margin-left: 6px; color: var(--account-red-bright); font-size: 16px; }
.updates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.update-panel { min-height: 188px; padding: 21px 23px; border: 1px solid var(--account-line); border-radius: 15px; background: rgba(255,255,255,.022); }
.update-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #777e84; font-size: 10px; }
.update-mark { color: var(--account-red-bright); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.update-panel time { display: block; margin-top: 24px; color: #70777d; font-size: 10px; }
.update-panel h3 { margin: 9px 0 5px; color: #e9ebec; font-size: 16px; }
.update-panel p { margin: 0; color: #8b9298; font-size: 12px; }
.update-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 19px; color: #70d993; font-size: 10px; font-weight: 700; }
.history-section { margin-top: 61px; }
.history-source { color: #666d73; font-size: 10px; }
.order-history-list { overflow: hidden; border: 1px solid var(--account-line); border-radius: 15px; background: rgba(255,255,255,.022); }
.order-history-empty { padding: 25px; color: #858c92; font-size: 12px; }
.order-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 1fr auto auto; align-items: center; gap: 18px; padding: 17px 22px; border-bottom: 1px solid var(--account-line); }
.order-row:last-child { border-bottom: 0; }
.order-row strong, .order-row small { display: block; }
.order-row strong { color: #e3e5e6; font-size: 12px; }
.order-row small { margin-top: 4px; color: #737a80; font-size: 10px; }
.order-id { color: #949ba0; font: 10px "DM Mono", monospace; }
.order-total { color: #d9dcdd; font-size: 12px; font-weight: 700; }
.order-status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(89,207,130,.12); color: #79e39c; font-size: 10px; font-weight: 800; text-transform: capitalize; }
.order-status.manual_review, .order-status.fulfillment_pending { background: rgba(229,173,73,.13); color: #efc36f; }
.order-status.refunded, .order-status.cancelled { background: rgba(229,57,53,.12); color: #f08a86; }
.account-disclaimer { margin-top: 46px; padding: 15px 18px; border-top: 1px solid var(--account-line); color: #666d73; font-size: 10px; line-height: 1.6; text-align: center; }
.account-toast { position: fixed; z-index: 50; right: 25px; bottom: 24px; max-width: 340px; padding: 13px 16px; border: 1px solid rgba(229,57,53,.5); border-radius: 10px; background: #28191a; box-shadow: 0 14px 40px rgba(0,0,0,.35); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.account-toast.show { opacity: 1; transform: translateY(0); }
.account-modal { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.account-modal.is-open { opacity: 1; pointer-events: auto; }
.account-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(7px); }
.account-modal-panel { position: relative; width: min(560px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow-y: auto; border: 1px solid var(--account-line-strong); border-radius: 17px; background: #17191c; box-shadow: 0 30px 100px rgba(0,0,0,.5); transform: translateY(12px); transition: transform .2s ease; }
.account-modal.is-open .account-modal-panel { transform: translateY(0); }
.account-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 25px 20px; border-bottom: 1px solid var(--account-line); }
.account-modal-header h2 { margin: 0; color: #f1f2f2; font-size: 24px; letter-spacing: -.045em; }
.modal-close { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--account-line-strong); border-radius: 8px; background: transparent; color: #a5abb0; cursor: pointer; font-size: 21px; line-height: 1; }
.modal-close:hover { border-color: var(--account-red); color: #fff; }
.modal-view { padding: 24px 25px 26px; }
.modal-copy { margin: 0 0 18px; color: #858c92; font-size: 12px; line-height: 1.6; }
.download-list { display: grid; gap: 10px; }
.download-empty { padding: 18px; border: 1px dashed var(--account-line-strong); border-radius: 11px; color: #858c92; font-size: 12px; line-height: 1.6; }
.download-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--account-line); border-radius: 11px; background: rgba(255,255,255,.025); }
.download-item strong, .download-item small { display: block; }
.download-item strong { color: #e8eaeb; font-size: 12px; }
.download-item small { margin-top: 4px; color: #737a80; font-size: 10px; }
.download-button, .modal-submit { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(229,57,53,.45); border-radius: 8px; background: rgba(229,57,53,.1); color: #f19a98; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.download-button:hover, .modal-submit:hover { border-color: var(--account-red); background: rgba(229,57,53,.2); color: #fff; }
.download-button:disabled { cursor: wait; opacity: .5; }
.settings-form { display: grid; gap: 9px; }
.settings-form label:not(.checkbox-row) { margin-top: 9px; color: #a8aeb2; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.settings-form input[type="text"], .settings-form select { width: 100%; padding: 12px 13px; border: 1px solid var(--account-line-strong); border-radius: 8px; outline: none; background: rgba(255,255,255,.04); color: #eef0f0; font-size: 12px; }
.settings-form input[type="text"]:focus, .settings-form select:focus { border-color: rgba(229,57,53,.7); box-shadow: 0 0 0 3px rgba(229,57,53,.1); }
.settings-form option { background: #17191c; }
.checkbox-row { display: flex; align-items: center; gap: 9px; margin: 15px 0 7px; color: #9da4a9; cursor: pointer; font-size: 11px; }
.checkbox-row input { accent-color: var(--account-red); }
.modal-submit { width: 100%; margin-top: 8px; background: var(--account-red); color: #fff; }
.modal-message { min-height: 18px; margin: 3px 0 0; color: #79e39c; font-size: 11px; }
.hwid-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--account-line); }
.hwid-panel h3 { margin: 0; color: #e9ebec; font-size: 15px; }
.hwid-panel p { max-width: 300px; margin: 5px 0 0; color: #7e858b; font-size: 11px; line-height: 1.5; }
body.modal-open { overflow: hidden; }
body[data-theme="light"] { --account-bg: #eef0f2; --account-panel: #ffffff; --account-panel-soft: #f7f8f8; --account-line: rgba(15,20,24,.1); --account-line-strong: rgba(15,20,24,.17); --account-text: #1b1f22; --account-muted: #657078; --account-dim: #7b858c; background: var(--account-bg); }
body[data-theme="light"]::before { background: radial-gradient(circle at 70% 0%, rgba(229,57,53,.08), transparent 30%), linear-gradient(180deg, #f7f8f8, #eef0f2 70%, #f4eded); }
body[data-theme="light"] .account-sidebar, body[data-theme="light"] .account-topbar { background: rgba(255,255,255,.88); }
body[data-theme="light"] .account-brand, body[data-theme="light"] .welcome-row h1, body[data-theme="light"] .panel-heading h2, body[data-theme="light"] .section-heading-row h2, body[data-theme="light"] .account-modal-header h2 { color: #1b1f22; }
body[data-theme="light"] .dashboard-nav a, body[data-theme="light"] .breadcrumb, body[data-theme="light"] .profile-chip strong, body[data-theme="light"] .storefront-link, body[data-theme="light"] .subscription-foot a, body[data-theme="light"] .action-card h3, body[data-theme="light"] .update-panel h3, body[data-theme="light"] .order-row strong { color: #3f484e; }
body[data-theme="light"] .subscription-panel, body[data-theme="light"] .action-card, body[data-theme="light"] .update-panel, body[data-theme="light"] .order-history-list, body[data-theme="light"] .account-modal-panel { background: rgba(255,255,255,.82); }
body[data-theme="light"] .account-modal-backdrop { background: rgba(20,24,27,.38); }
body[data-theme="light"] .settings-form input[type="text"], body[data-theme="light"] .settings-form select { background: #fff; color: #1b1f22; }
body[data-theme="light"] .settings-form option { background: #fff; color: #1b1f22; }
body[data-theme="light"] .settings-form label:not(.checkbox-row), body[data-theme="light"] .checkbox-row, body[data-theme="light"] .modal-copy, body[data-theme="light"] .hwid-panel p { color: #657078; }

@media (max-width: 1050px) {
  .account-topbar { padding: 0 28px; }
  .account-content { width: min(100% - 56px, 900px); }
  .account-sidebar { width: 238px; }
  .account-main { margin-left: 238px; }
  .action-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .account-sidebar { width: 266px; transform: translateX(-102%); transition: transform .25s ease; }
  .account-sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 70px rgba(0,0,0,.4); }
  .account-main { margin-left: 0; }
  .account-topbar { padding: 0 22px; }
  .menu-button { display: grid; width: 34px; height: 34px; align-content: center; gap: 4px; padding: 7px; border: 1px solid var(--account-line-strong); border-radius: 8px; }
  .menu-button span { display: block; width: 100%; height: 1px; background: #c0c4c7; }
  .breadcrumb { margin-right: auto; margin-left: 14px; }
  .topbar-actions { gap: 10px; }
  .discord-link { display: none; }
  .account-content { width: min(100% - 44px, 700px); padding-top: 45px; }
  .action-grid { grid-template-columns: 1fr; }
  .action-card { min-height: auto; }
  .action-card p { min-height: auto; }
  .order-row { grid-template-columns: 1fr auto; }
  .order-row .order-id { grid-column: 1; }
  .order-row .order-total { grid-column: 2; grid-row: 1; }
  .order-row .order-status { grid-column: 2; grid-row: 2; }
}

@media (max-width: 560px) {
  .account-topbar { min-height: 65px; padding: 0 14px; }
  .account-content { width: min(100% - 28px, 430px); padding: 35px 0 45px; }
  .profile-chip > span:nth-child(2), .profile-chevron { display: none; }
  .welcome-row { display: block; margin-bottom: 28px; }
  .demo-badge { margin-top: 22px; }
  .welcome-row h1 { font-size: 38px; }
  .panel-heading { align-items: flex-start; flex-direction: column; padding: 21px 20px; }
  .subscription-table th, .subscription-table td { padding-right: 20px; padding-left: 20px; }
  .subscription-foot { align-items: flex-start; flex-direction: column; gap: 7px; padding: 15px 20px; }
  .subscription-foot-actions { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 7px; }
  .updates-grid { grid-template-columns: 1fr; }
  .section-heading-row h2 { font-size: 21px; }
  .section-heading-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .history-source { margin-bottom: 5px; }
  .account-modal { padding: 12px; }
  .account-modal-panel { max-height: calc(100vh - 24px); }
  .account-modal-header, .modal-view { padding-right: 19px; padding-left: 19px; }
  .download-item, .hwid-panel { align-items: flex-start; flex-direction: column; }
  .download-button, .hwid-panel .outline-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

.preview-badge { border-color: rgba(229,173,73,.35); background: rgba(229,173,73,.08); color: #efc36f; }
.preview-badge > span:first-child { background: #e5ad49; box-shadow: 0 0 0 4px rgba(229,173,73,.13); }
.account-preview-banner { display: flex; align-items: center; gap: 14px; margin: -16px 0 24px; padding: 14px 17px; border: 1px solid rgba(229,173,73,.28); border-radius: 12px; background: linear-gradient(100deg, rgba(229,173,73,.1), rgba(255,255,255,.025)); }
.preview-banner-status { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #e5ad49; box-shadow: 0 0 0 5px rgba(229,173,73,.12); }
.account-preview-banner div { min-width: 0; }
.account-preview-banner strong { display: block; color: #f0c878; font-size: 12px; }
.account-preview-banner p { margin: 4px 0 0; color: #a29a8a; font-size: 11px; line-height: 1.5; }
.account-preview-tag { margin-left: auto; color: #d8ad58; font-size: 9px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }
.preview-mode [disabled] { cursor: not-allowed; opacity: .48; }
.preview-mode [disabled]:hover { border-color: var(--account-line-strong); background: transparent; color: inherit; }