:root { --ink:#0a1020; --muted:#657084; --line:#e2e7ef; --paper:#f7f9fc; --green:#102a56; --green-dark:#06152d; --mint:#e8eef8; --yellow:#687890; --red:#2c3e5c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; text-decoration:none; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px, .9fr) minmax(400px, 1.1fr); }
.login-panel { width:min(100%, 460px); margin:auto; padding:48px 32px; }
.brand-mark { width:125px; margin-bottom:40px; }.brand-mark img { display:block; width:100%; height:auto; }
.eyebrow { margin:0 0 9px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.12em; }
h1,h2,p { margin-top:0; }
.login-form { display:grid; gap:10px; margin-top:30px; }
label { font-size:13px; font-weight:700; margin-top:9px; }
input { width:100%; padding:13px 14px; border:1px solid #cfd8d1; border-radius:9px; font:inherit; color:var(--ink); outline:none; }
input:focus { border-color:var(--green); box-shadow:0 0 0 3px #d9f2e5; }
button { border:0; cursor:pointer; font:inherit; }
.login-form button { display:flex; justify-content:center; align-items:center; margin-top:12px; padding:14px 16px; border-radius:9px; color:#fff; background:var(--green); font-weight:800; }
.login-form button:hover { background:var(--green-dark); }
.form-error { margin:8px 0 3px; padding:10px 12px; border-radius:7px; color:#8c3525; background:#fde9e5; font-size:13px; }
.login-aside { position:relative; overflow:hidden; color:#effaf3; background:linear-gradient(145deg, #0c5a3b, #043a28 70%); }
.grid-overlay { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(#8cd7a9 1px,transparent 1px),linear-gradient(90deg,#8cd7a9 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent); }
.login-aside:after { position:absolute; content:""; width:520px; height:520px; bottom:-250px; right:-110px; border:60px solid #b7f2ca; border-radius:50%; opacity:.13; }
.aside-copy { position:absolute; left:clamp(44px,8vw,120px); right:30px; bottom:12vh; max-width:480px; }
.aside-copy > p { color:#a6d8b7; font-size:11px; font-weight:800; letter-spacing:.14em; }.aside-copy h2 { font-size:clamp(36px,4.1vw,68px); line-height:.98; letter-spacing:-.06em; }
.status-chip,.live-status { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #ffffff2d; border-radius:99px; font-size:12px; font-weight:700; }.status-chip span,.live-status span { width:7px; height:7px; border-radius:50%; background:#6ceb9c; box-shadow:0 0 0 3px #6ceb9c33; }
.app-shell { min-height:100vh; display:flex; background:#f7f9f7; }.sidebar { width:244px; flex:none; display:flex; flex-direction:column; padding:25px 14px; color:#d6e4dc; background:#102920; }.sidebar-brand { display:flex; align-items:center; gap:9px; padding:0 11px 36px; color:#fff; font-size:19px; font-weight:900; letter-spacing:-.04em; }.sidebar-brand span { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#4bc579; font-size:17px; }.sidebar-brand small { color:#77a28b; font-size:10px; letter-spacing:.13em; }.sidebar nav { display:grid; gap:5px; }.nav-item { display:flex; align-items:center; gap:12px; padding:11px; border-radius:8px; font-size:14px; font-weight:600; }.nav-item b { width:16px; text-align:center; color:#90b6a2; }.nav-item.active { color:#fff; background:#1e513c; }.nav-item.active b { color:#73dd9b; }.nav-item.muted { color:#9bb3a6; cursor:not-allowed; }.sidebar-foot { margin-top:auto; padding:11px; color:#a0b9ab; font-size:11px; line-height:1.7; }.sidebar-foot span { color:#628171; }
.dashboard-main { flex:1; min-width:0; padding:32px clamp(24px,4vw,60px) 48px; }.topbar,.dashboard-heading,.panel-heading,.user-menu,.progress-row { display:flex; align-items:center; }.topbar { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:23px; }.topbar h1 { margin:0; font-size:25px; letter-spacing:-.045em; }.user-menu { gap:10px; }.user-menu strong,.user-menu small { display:block; }.user-menu strong { font-size:13px; }.user-menu small { margin-top:2px; color:var(--muted); font-size:11px; }.avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--green); background:var(--mint); font-size:14px; font-weight:900; }.logout { margin-left:8px; padding:8px 10px; border:1px solid #d7ded9; border-radius:7px; color:#46574e; background:transparent; font-size:12px; font-weight:700; }.dashboard-heading { justify-content:space-between; margin:38px 0 21px; }.dashboard-heading h2,.panel h2 { margin:0; letter-spacing:-.04em; }.dashboard-heading h2 { font-size:21px; }.dashboard-heading p { margin:5px 0 0; color:var(--muted); font-size:13px; }.live-status { color:var(--green); border-color:#cbe5d5; background:#f0faf4; }.live-status span { background:#26aa61; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.metric-card,.panel { border:1px solid var(--line); border-radius:12px; background:#fff; }.metric-card { padding:19px; }.metric-card p { margin-bottom:16px; color:var(--muted); font-size:12px; font-weight:700; }.metric-card strong { display:block; margin-bottom:7px; font-size:27px; letter-spacing:-.055em; }.metric-card small { color:var(--green); font-size:11px; font-weight:700; }.content-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(270px,.8fr); gap:15px; margin-top:17px; }.panel { padding:21px; }.panel-heading { justify-content:space-between; margin-bottom:20px; }.panel-heading h2 { font-size:17px; }.panel-heading a,.panel-action { color:var(--green); font-size:12px; font-weight:800; }.table-wrap { overflow-x:auto; }table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }th { padding:0 9px 11px; color:#7b8982; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }td { padding:14px 9px; border-bottom:1px solid #edf1ee; color:#526159; font-size:12px; }tbody tr:last-child td { border-bottom:0; }td strong { color:#26372d; font-size:12px; }.progress-row { gap:8px; }.progress { width:75px; height:5px; overflow:hidden; border-radius:99px; background:#e6ece8; }.progress span { display:block; height:100%; border-radius:inherit; background:#22a463; }.progress-row small { color:#526159; font-size:11px; }.status { padding:4px 7px; border-radius:99px; font-size:10px; font-weight:800; }.status-berjalan { color:#087144; background:#e2f6ea; }.status-selesai { color:#3264a3; background:#eaf1fc; }.status-menunggu { color:#926300; background:#fff4d6; }.machine-list { display:grid; gap:0; }.machine-list > div { display:grid; grid-template-columns:12px 1fr; column-gap:8px; padding:14px 0; border-top:1px solid #edf1ee; }.machine-list strong { font-size:12px; }.machine-list small { grid-column:2; margin-top:4px; color:var(--muted); font-size:11px; }.machine-dot { width:7px; height:7px; margin-top:4px; border-radius:50%; }.healthy { background:#29aa62; }.warning { background:var(--yellow); }.panel-action { display:block; margin-top:19px; }
@media (max-width:1000px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.content-grid { grid-template-columns:1fr; }.machine-panel { display:none; } }.sidebar { }
@media (max-width:720px) { .login-shell { grid-template-columns:1fr; }.login-aside { display:none; }.app-shell { display:block; }.sidebar { width:auto; padding:14px; }.sidebar-brand { padding-bottom:12px; }.sidebar nav { display:flex; overflow:auto; }.nav-item { white-space:nowrap; }.sidebar-foot { display:none; }.dashboard-main { padding:23px 18px; }.topbar { align-items:flex-start; gap:18px; }.user-menu > div:not(.avatar),.logout { display:none; }.dashboard-heading { align-items:flex-start; gap:12px; }.live-status { white-space:nowrap; }.metric-grid { grid-template-columns:1fr 1fr; gap:10px; }.metric-card { padding:14px; }.metric-card strong { font-size:22px; } }

/* Theme: black, white, and navy */
input { border-color:#cbd4e2; }
input:focus { box-shadow:0 0 0 3px #dce5f2; }
.form-error { color:#152d54; background:#edf1f7; }
.login-aside { color:#f8fafc; background:linear-gradient(145deg,#173d79,#040914 72%); }
.grid-overlay { background-image:linear-gradient(#c8d5e8 1px,transparent 1px),linear-gradient(90deg,#c8d5e8 1px,transparent 1px); }
.login-aside:after { border-color:#fff; opacity:.1; }
.aside-copy > p { color:#bdcde5; }
.status-chip span { background:#dbe7f7; box-shadow:0 0 0 3px #dbe7f733; }
.app-shell { background:#f7f9fc; }
.sidebar { color:#c8d2e1; background:#070d18; }
.sidebar-brand span { color:#102a56; background:#fff; }
.sidebar-brand small { color:#91a2bc; }
.nav-item b { color:#8d9db3; }
.nav-item.active { background:#172f5b; }
.nav-item.active b { color:#fff; }
.nav-item.muted { color:#9ba9bc; }
.sidebar-foot { color:#a8b5c8; }
.sidebar-foot span { color:#6b7b92; }
.logout { border-color:#d5ddea; color:#33445e; }
.live-status { color:#102a56; border-color:#cbd7e7; background:#eef3f9; }
.live-status span { background:#173d79; box-shadow:0 0 0 3px #dce7f4; }
th { color:#697589; }
td { border-color:#edf0f5; color:#536173; }
td strong { color:#162942; }
.progress { background:#e4e9f1; }
.progress span { background:#173d79; }
.progress-row small { color:#536173; }
.status-berjalan { color:#173d79; background:#e8eef8; }
.status-selesai { color:#334560; background:#edf1f5; }
.status-menunggu { color:#42536d; background:#f1f3f6; }
.machine-list > div { border-color:#edf0f5; }
.healthy { background:#173d79; }
.warning { background:#687890; }

/* Layout controls and collapsed navigation */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sidebar { position:relative; overflow:visible; transition:width .22s ease, padding .22s ease; }
.sidebar-header { position:relative; }
.sidebar-brand { padding-bottom:36px; }
.sidebar-brand .brand-symbol { flex:none; }
.sidebar-brand-text { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.sidebar-logo { display:block; width:104px; height:34px; object-fit:contain; object-position:left center; flex:none; }.sidebar-brand .sidebar-brand-text { display:flex; align-items:baseline; width:auto; height:auto; border-radius:0; color:inherit; background:transparent; font-size:inherit; }
.sidebar-toggle { position:absolute; z-index:2; top:1px; right:-29px; display:grid; place-items:center; width:29px; height:29px; border:1px solid #cbd5e3; border-radius:8px; color:#102a56; background:#fff; box-shadow:0 5px 14px #0a10201a; font-size:22px; line-height:1; transition:background .18s ease, color .18s ease, transform .22s ease; }
.sidebar-toggle:hover { color:#fff; background:#102a56; }
.nav-label,.sidebar-brand-text,.sidebar-foot { transition:opacity .12s ease; }
.nav-section-title { margin:21px 11px 5px; color:#7f91ab; font-size:9px; font-weight:850; letter-spacing:.12em; line-height:1.2; }
.sidebar nav .nav-section-title:first-child { margin-top:0; }
.sidebar nav { padding-bottom:24px; }
body.sidebar-collapsed .sidebar { width:76px; padding-inline:14px; }
body.sidebar-collapsed .sidebar-brand { justify-content:center; padding-inline:0; }
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .sidebar-lower { display:none; }
body.sidebar-collapsed .nav-item { justify-content:center; padding-inline:8px; }
body.sidebar-collapsed .nav-item b { width:auto; }
body.sidebar-collapsed .sidebar-toggle { transform:rotate(180deg); }
body.sidebar-collapsed .sidebar-logo { width:38px; }

.sidebar-lower { display:grid; gap:14px; margin-top:auto; }
.sidebar-lower .sidebar-foot { margin-top:0; }
.sidebar-preferences { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; max-width:100%; gap:5px; padding:10px 5px; border:1px solid #24334d; border-radius:10px; background:#0d1524; }
.sidebar-preference-separator { color:#52647f; font-size:17px; font-weight:300; line-height:1; }
.sidebar-preferences .toggle-switch { flex:0 1 auto; gap:3px; min-width:0; }.sidebar-preferences .toggle-icon,.sidebar-preferences .language-code { min-width:15px; color:#8091ab; font-size:10px; }.sidebar-preferences .toggle-track { width:36px; height:22px; padding:2px; }.sidebar-preferences .language-switch .toggle-track { width:40px; }.sidebar-preferences .toggle-thumb { top:2px; left:2px; width:16px; height:16px; }.sidebar-preferences .theme-switch[data-theme="dark"] .toggle-thumb { transform:translateX(16px); }.sidebar-preferences .language-switch[data-language="en"] .toggle-thumb { transform:translateX(18px); }
.sidebar-preferences .theme-switch[data-theme="light"] .toggle-icon:first-child,
.sidebar-preferences .theme-switch[data-theme="dark"] .toggle-icon:nth-child(3),
.sidebar-preferences .language-switch[data-language="id"] .language-code-id,
.sidebar-preferences .language-switch[data-language="en"] .language-code-en { color:#eef4ff; }
.sidebar nav .nav-item.muted { cursor:pointer; }

.topbar-actions { display:flex; align-items:center; gap:9px; }
.preference-button { height:34px; border:1px solid #d5ddea; border-radius:8px; color:#33445e; background:#fff; font-size:12px; font-weight:750; }
.preference-button { display:inline-flex; align-items:center; gap:6px; padding:0 10px; }
.preference-button:hover { color:#fff; border-color:#102a56; background:#102a56; }
.preference-icon { font-size:15px; line-height:1; }
.toggle-switch { display:inline-flex; align-items:center; gap:6px; padding:0; color:#8794a8; background:transparent; }
.toggle-switch:focus-visible { outline:3px solid #b8c9e1; outline-offset:3px; border-radius:999px; }
.toggle-icon,.language-code { min-width:18px; color:#8290a4; font-size:12px; font-weight:850; text-align:center; transition:color .2s ease; }
.toggle-track { position:relative; display:block; width:46px; height:26px; padding:3px; border:1px solid #102a56; border-radius:999px; background:#102a56; box-shadow:inset 0 1px 2px #06152d66; }
.toggle-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 5px #07172f66; transition:transform .22s ease, background .22s ease; }
.theme-switch[data-theme="dark"] .toggle-thumb { transform:translateX(18px); background:#102a56; }
.theme-switch[data-theme="light"] .toggle-icon:first-child,
.theme-switch[data-theme="dark"] .toggle-icon:nth-child(3) { color:#102a56; }
.theme-switch[data-theme="dark"] .toggle-track { border-color:#c9d8ee; background:#c9d8ee; }
.language-switch .toggle-track { width:52px; }
.language-switch[data-language="en"] .toggle-thumb { transform:translateX(24px); }
.language-switch[data-language="id"] .language-code-id,
.language-switch[data-language="en"] .language-code-en { color:#102a56; }
.module-metric-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }.module-metric-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.module-table-panel { margin-top:17px; }
.counter-lines { margin-bottom:17px; padding:30px; }.counter-lines-heading h2 { margin:0; font-size:20px; letter-spacing:-.04em; }.counter-lines-heading p { margin:6px 0 0; color:var(--muted); font-size:13px; }.counter-line-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }.counter-line-card { padding:20px; border:1px solid var(--line); border-radius:11px; background:var(--paper); }.counter-line-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.counter-line-head h3 { margin:0; font-size:17px; letter-spacing:-.035em; }.counter-line-head p { margin:5px 0 0; color:var(--muted); font-size:12px; }.counter-line-status { padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:11px; font-weight:800; }.counter-line-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:23px; }.counter-line-metrics span { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.counter-line-metrics strong { display:block; margin-top:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:-.05em; }
html[data-theme="dark"] .counter-line-card { border-color:#26364e; background:#0d1521; } html[data-theme="dark"] .counter-line-status { border-color:#32425c; color:#dce6f6; }
@media (max-width:1000px) { .module-metric-grid-3,.module-metric-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Dark theme */
html[data-theme="dark"] { --ink:#edf3ff; --muted:#a7b4c9; --line:#2a3951; --paper:#0b111c; --green:#b9ccef; --green-dark:#d7e5ff; --mint:#1b2b45; color-scheme:dark; }
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell { background:#0b111c; }
html[data-theme="dark"] .login-panel { color:#edf3ff; }
html[data-theme="dark"] input { color:#edf3ff; border-color:#34455f; background:#111b2a; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] .language-select:focus { box-shadow:0 0 0 3px #38527b99; }
html[data-theme="dark"] .brand-mark { background:transparent; }
html[data-theme="dark"] .login-form button { color:#09111f; background:#c9d8ef; }
html[data-theme="dark"] .login-form button:hover { background:#fff; }
html[data-theme="dark"] .form-error { color:#e1ebff; background:#1d2c45; }
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .panel { border-color:#26364e; background:#101927; }
html[data-theme="dark"] .live-status { color:#d7e5ff; border-color:#334967; background:#142237; }
html[data-theme="dark"] .live-status span { background:#b9ccef; box-shadow:0 0 0 3px #b9ccef26; }
html[data-theme="dark"] th { color:#aab7ca; }
html[data-theme="dark"] td { color:#c4cedd; border-color:#213149; }
html[data-theme="dark"] td strong { color:#f2f6ff; }
html[data-theme="dark"] .progress { background:#26364e; }
html[data-theme="dark"] .progress span { background:#b9ccef; }
html[data-theme="dark"] .status-berjalan { color:#d4e2fb; background:#1c3152; }
html[data-theme="dark"] .status-selesai { color:#cad4e4; background:#253348; }
html[data-theme="dark"] .status-menunggu { color:#c1cbd9; background:#2b3545; }
html[data-theme="dark"] .machine-list > div { border-color:#213149; }
html[data-theme="dark"] .healthy { background:#b9ccef; }
html[data-theme="dark"] .warning { background:#8c9ab0; }
html[data-theme="dark"] .logout,
html[data-theme="dark"] .preference-button,
html[data-theme="dark"] .sidebar-toggle { color:#dbe7f9; border-color:#33455f; background:#111c2c; }
html[data-theme="dark"] .preference-button:hover,
html[data-theme="dark"] .sidebar-toggle:hover { color:#0a1020; background:#dbe7f9; }
html[data-theme="dark"] .toggle-switch { color:#8392a8; }
html[data-theme="dark"] .theme-switch[data-theme="dark"] .toggle-track { border-color:#dbe7f9; background:#dbe7f9; }
html[data-theme="dark"] .theme-switch[data-theme="dark"] .toggle-thumb { background:#101a2a; }
html[data-theme="dark"] .language-switch .toggle-track { border-color:#4f6689; background:#233956; }
html[data-theme="dark"] .language-switch[data-language="id"] .language-code-id,
html[data-theme="dark"] .language-switch[data-language="en"] .language-code-en,
html[data-theme="dark"] .theme-switch[data-theme="dark"] .toggle-icon:nth-child(3) { color:#dbe7f9; }
html[data-theme="dark"] .sidebar-preferences { border-color:#2a3c58; background:#101a2a; }

@media (max-width:720px) {
  .topbar-actions { gap:6px; }
  .sidebar-toggle { display:none; }
  body.sidebar-collapsed .sidebar { width:auto; padding-inline:14px; }
  body.sidebar-collapsed .sidebar-brand { justify-content:flex-start; padding-inline:11px; }
  body.sidebar-collapsed .sidebar-brand-text,
  body.sidebar-collapsed .nav-label { display:flex; }
  body.sidebar-collapsed .nav-section-title { display:block; }
  body.sidebar-collapsed .nav-item { justify-content:flex-start; padding-inline:11px; }
  body.sidebar-collapsed .nav-item b { width:16px; }
  body.sidebar-collapsed .sidebar-lower { display:grid; }
  .sidebar-lower { margin-top:14px; }
  .sidebar-preferences { gap:5px; }
  .module-metric-grid-3,.module-metric-grid-4 { grid-template-columns:1fr 1fr; }
  .counter-lines { padding:21px; }.counter-line-grid { grid-template-columns:1fr; gap:12px; margin-top:20px; }
  .sidebar nav { padding-bottom:0; }
}

@media (max-width:720px) { body.sidebar-collapsed .sidebar-logo { width:104px; } }

@media (max-width:460px) { .module-metric-grid-3,.module-metric-grid-4 { grid-template-columns:1fr; }.counter-line-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px; } }

/* Account menu and account page */
.user-menu { position:relative; }
.user-trigger { display:flex; align-items:center; gap:10px; padding:4px; border-radius:10px; color:inherit; background:transparent; text-align:left; }
.user-trigger:hover { background:#edf2f8; }
.user-trigger:focus-visible { outline:3px solid #b8c9e1; outline-offset:2px; }
.user-menu-chevron { color:#71809a; font-size:16px; line-height:1; transition:transform .18s ease; }
.account-menu-open .user-menu-chevron { transform:rotate(180deg); }
.account-menu { position:absolute; z-index:10; top:calc(100% + 8px); right:0; width:205px; overflow:hidden; padding:6px; border:1px solid #dce3ed; border-radius:11px; background:#fff; box-shadow:0 14px 34px #0a102024; }
.account-menu[hidden] { display:none; }
.account-menu a,.account-menu button { display:flex; align-items:center; width:100%; padding:10px 11px; border-radius:7px; color:#253650; background:transparent; font-size:12px; font-weight:750; text-align:left; }
.account-menu a:hover,.account-menu button:hover { color:#fff; background:#102a56; }
.account-menu form { margin:0; border-top:1px solid #e8edf4; }
.account-menu form button { margin-top:5px; }

.account-page { min-height:100vh; background:var(--paper); }
.account-topbar { display:flex; align-items:center; justify-content:space-between; max-width:1060px; margin:auto; padding:26px clamp(22px,4vw,52px); border-bottom:1px solid var(--line); }
.account-back { color:#102a56; font-size:13px; font-weight:800; }
.account-content { width:min(100% - 40px, 700px); margin:0 auto; padding:64px 0; }
.account-content h1 { margin:0 0 8px; font-size:30px; letter-spacing:-.05em; }
.account-intro { max-width:520px; margin-bottom:30px; color:var(--muted); line-height:1.6; }
.account-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }
.account-identity { display:flex; align-items:center; gap:14px; padding:24px; border-bottom:1px solid var(--line); }
.account-avatar { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#102a56; background:#e4ebf8; font-size:20px; font-weight:900; }
.account-identity strong,.account-identity span { display:block; }.account-identity strong { font-size:16px; }.account-identity div > span { margin-top:3px; color:var(--muted); font-size:12px; text-transform:capitalize; }
.account-details { margin:0; padding:8px 24px; }.account-details div { display:flex; justify-content:space-between; gap:24px; padding:16px 0; border-bottom:1px solid #edf1f5; }.account-details div:last-child { border-bottom:0; }.account-details dt { color:var(--muted); font-size:12px; font-weight:700; }.account-details dd { margin:0; color:var(--ink); font-size:13px; font-weight:800; text-align:right; }
.account-form { display:grid; gap:9px; padding:24px; border-bottom:1px solid var(--line); }.account-form label { margin-top:0; }.account-form button { justify-self:start; margin-top:5px; padding:10px 14px; border-radius:8px; color:#fff; background:#102a56; font-size:12px; font-weight:800; }.account-form button:hover { background:#071b3c; }.form-success { margin:0 0 3px; padding:10px 12px; border-radius:7px; color:#102a56; background:#e8eef8; font-size:13px; font-weight:700; }

html[data-theme="dark"] .user-trigger:hover { background:#17243a; }
html[data-theme="dark"] .user-menu-chevron { color:#aab7ca; }
html[data-theme="dark"] .account-menu { border-color:#30415c; background:#101a2a; box-shadow:0 16px 36px #0000005c; }
html[data-theme="dark"] .account-menu a,html[data-theme="dark"] .account-menu button { color:#dce6f6; }
html[data-theme="dark"] .account-menu a:hover,html[data-theme="dark"] .account-menu button:hover { color:#0a1020; background:#dbe7f9; }
html[data-theme="dark"] .account-menu form { border-color:#26364e; }
html[data-theme="dark"] .account-page { background:#0b111c; }
html[data-theme="dark"] .account-back { color:#d7e5ff; }
html[data-theme="dark"] .account-card { border-color:#26364e; background:#101927; }
html[data-theme="dark"] .account-identity { border-color:#26364e; }
html[data-theme="dark"] .account-avatar { color:#dbe7f9; background:#1e3457; }
html[data-theme="dark"] .account-details div { border-color:#213149; }
html[data-theme="dark"] .account-form { border-color:#26364e; } html[data-theme="dark"] .account-form button { color:#09111f; background:#c9d8ef; } html[data-theme="dark"] .account-form button:hover { background:#fff; } html[data-theme="dark"] .form-success { color:#dbe7f9; background:#1d3150; }

@media (max-width:720px) {
  .user-menu > div.account-menu { display:block; }
  .user-menu > .account-menu[hidden] { display:none; }
  .user-identity,.user-menu-chevron { display:none; }
  .account-topbar { padding:20px; }
  .account-content { width:min(100% - 32px, 700px); padding:42px 0; }
  .account-details div { display:block; }.account-details dd { margin-top:6px; text-align:left; }
}