:root {
  --accent: #7c6cf2;
  --accent-rgb: 124, 108, 242;
  --accent-strong: #8f82ff;
  --accent-soft: rgba(124,108,242,.14);
  --brand-mark-core: #7c6cf2;
  --radius: 18px;
  --radius-sm: 12px;
  --danger: #f46f79;
  --danger-rgb: 244,111,121;
  --danger-soft: rgba(244,111,121,.11);
  --success: #43cf93;
  --success-rgb: 67,207,147;
  --warning: #f3c66b;
}

:root[data-accent="blue"] {
  --accent: #4f8df7;
  --accent-rgb: 79, 141, 247;
  --accent-strong: #6aa0ff;
  --accent-soft: rgba(79,141,247,.14);
  --brand-mark-core: #4f8df7;
}
:root[data-accent="emerald"] {
  --accent: #33b987;
  --accent-rgb: 51, 185, 135;
  --accent-strong: #4bc99a;
  --accent-soft: rgba(51,185,135,.14);
  --brand-mark-core: #33b987;
}
:root[data-accent="orange"] {
  --accent: #f28a49;
  --accent-rgb: 242, 138, 73;
  --accent-strong: #ff9b5c;
  --accent-soft: rgba(242,138,73,.14);
  --brand-mark-core: #f28a49;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0e;
  --sidebar: #0f1015;
  --surface: #13141a;
  --surface-2: #181920;
  --surface-3: #1f2028;
  --surface-hover: #20212a;
  --border: #2a2b34;
  --border-soft: #202129;
  --text: #f4f4f8;
  --muted: #9a98a6;
  --muted-2: #6e6c78;
  --topbar-bg: rgba(10,10,14,.84);
  --input-bg: #111218;
  --table-head: #15161d;
  --table-cell: #121318;
  --grid: #22232c;
  --chart-grid: #262730;
  --shadow: 0 18px 60px rgba(0,0,0,.30);
  --modal-overlay: rgba(0,0,0,.62);
  --brand-mark-core: var(--accent);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6fa;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f8fb;
  --surface-3: #f0f1f5;
  --surface-hover: #f1f2f7;
  --border: #dedfe7;
  --border-soft: #e9eaf0;
  --text: #17171d;
  --muted: #6c6d79;
  --muted-2: #999aa5;
  --topbar-bg: rgba(245,246,250,.84);
  --input-bg: #ffffff;
  --table-head: #f7f7fa;
  --table-cell: #ffffff;
  --grid: #e7e8ee;
  --chart-grid: #e6e7ed;
  --shadow: 0 18px 60px rgba(35,36,48,.10);
  --modal-overlay: rgba(25,25,35,.34);
  --brand-mark-core: var(--accent);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html { transition: background-color .18s ease; }
body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 246px; border-right: 1px solid var(--border-soft); background: var(--sidebar); padding: 26px 18px 18px; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 28px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: white; box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.08); }
.brand-mark svg { width: 23px; height: 23px; display:block; }
.brand-name { font-weight: 850; letter-spacing: .09em; font-size: 16px; }
.brand-subtitle { color: var(--muted-2); font-size: 10.5px; margin-top: 2px; }
.nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 11px; color: var(--muted); transition: .16s ease; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: var(--text); background: var(--surface-2); border-color: var(--border-soft); box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 17px; color: var(--muted); }
.nav-item.active .nav-icon { color: var(--accent); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 10px; }
.local-badge { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 13px; padding: 12px; font-size: 12px; }
.local-badge b { display: block; font-size: 12px; margin-bottom: 3px; }
.local-badge small { color: var(--muted-2); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(var(--success-rgb),.09); flex: none; margin-top: 4px; }
.button-like { border: 0; }

.logout-nav { color: var(--muted); }
.logout-nav:hover { color: var(--danger); background: var(--danger-soft); }
.logout-nav .nav-icon { color: inherit; }


.main { grid-column: 2; min-width: 0; }
.topbar { height: 102px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; position: sticky; top: 0; z-index: 10; background: var(--topbar-bg); backdrop-filter: blur(18px); }
.page-heading { min-width:0; }
.eyebrow { color: var(--muted-2); font-weight: 750; font-size: 10px; letter-spacing: .14em; margin-bottom: 7px; }
.topbar h1 { margin: 0; font-size: 24px; letter-spacing: -.035em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.db-pill { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 9px 13px; display: flex; gap: 8px; align-items: center; font-size: 12px; }
.db-pill .status-dot { margin: 0; width: 6px; height: 6px; }
.db-pill.offline .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(var(--danger-rgb),.08); }
.theme-toggle, .avatar { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); display:grid; place-items:center; cursor: pointer; transition:.16s ease; }
.theme-toggle:hover, .avatar:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--border) 70%, var(--text) 30%); transform: translateY(-1px); }
.theme-toggle { font-size:16px; }
.avatar { border-radius: 50%; font-weight: 800; color: var(--accent); }
.mobile-menu { display: none; }
.content { padding: 30px 34px 48px; max-width: 1500px; margin: 0 auto; }

.page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-head h2 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.04em; }
.page-head p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.55; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn { border: 1px solid var(--border); background: var(--surface-2); border-radius: 11px; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: .16s ease; font-weight: 650; font-size: 13px; }
.btn:hover { transform: translateY(-1px); background: var(--surface-hover); }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 8px 24px rgba(var(--accent-rgb),.15); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-danger { color: var(--danger); background: var(--danger-soft); border-color: rgba(var(--danger-rgb),.20); }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 34px; padding: 0 10px; font-size: 12px; }
.icon-btn { width: 32px; height: 32px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }

.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); padding: 19px; min-height: 132px; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.01); }
.metric:after { content: ''; position: absolute; width: 110px; height: 110px; right: -52px; top: -52px; background: radial-gradient(circle, rgba(var(--accent-rgb),.14), transparent 68%); pointer-events:none; }
.metric-top { display:flex; justify-content: space-between; align-items:center; color:var(--muted); font-size:12px; }
.metric-icon { width: 31px; height:31px; border:1px solid var(--border); border-radius:9px; display:grid; place-items:center; color:var(--accent); background:var(--surface-2); }
.metric-value { margin-top: 20px; font-size: 25px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-foot { color: var(--muted-2); font-size: 11px; margin-top: 5px; }
.metric-foot.good { color: var(--success); }
.metric-foot.bad { color: var(--danger); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.85fr); gap: 18px; }
.stack { display: grid; gap: 18px; }
.card { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.card-head { min-height: 62px; padding: 0 18px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--border-soft); }
.card-title { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.card-subtitle { font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.card-body { padding: 18px; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-action { border:1px solid var(--border-soft); background:var(--surface-2); border-radius:13px; padding:15px; cursor:pointer; transition:.15s ease; }
.quick-action:hover { border-color: color-mix(in srgb, var(--border) 60%, var(--accent) 40%); transform:translateY(-1px); background:var(--surface-hover); }
.quick-action b { display:block; font-size:13px; margin:8px 0 4px; }
.quick-action small { color:var(--muted-2); line-height:1.4; }
.quick-symbol { color:var(--accent); font-size:18px; }

.chart-wrap { height: 250px; padding: 12px 4px 0; }
canvas { width: 100%; height: 100%; display:block; }
.empty { padding: 35px 20px; text-align:center; color:var(--muted); }
.empty-mark { width:50px; height:50px; border:1px dashed var(--border); display:grid; place-items:center; margin:0 auto 12px; border-radius:14px; color:var(--accent); font-size:22px; }
.empty b { display:block; color:var(--text); margin-bottom:6px; }
.empty p { max-width:420px; margin:0 auto; font-size:12px; line-height:1.55; color:var(--muted-2); }

.table-wrap { overflow:auto; border-radius: 0 0 var(--radius) var(--radius); }
table { width:100%; border-collapse: collapse; font-size:13px; }
th { text-align:left; color:var(--muted-2); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:750; padding:12px 14px; background:var(--table-head); position:sticky; top:0; z-index:1; }
td { padding:13px 14px; border-top:1px solid var(--border-soft); color:var(--text); vertical-align:middle; }
tbody tr:hover td { background:var(--surface-2); }
.amount-income { color:var(--success); font-weight:700; }
.amount-expense { color:var(--danger); font-weight:700; }
.type-pill { display:inline-flex; border-radius:999px; padding:5px 8px; font-size:10px; font-weight:750; background:var(--surface-3); color:var(--muted); border:1px solid var(--border); }
.type-pill.income { background:rgba(var(--success-rgb),.11); color:var(--success); border-color:rgba(var(--success-rgb),.18); }
.type-pill.expense { background:var(--danger-soft); color:var(--danger); border-color:rgba(var(--danger-rgb),.18); }
.note-cell { color:var(--muted); max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-actions { display:flex; justify-content:flex-end; gap:4px; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-field { display:grid; gap:7px; }
.form-field.full { grid-column:1/-1; }
label { color:var(--muted); font-size:11px; font-weight:650; }
.input, select, textarea { width:100%; border:1px solid var(--border); background:var(--input-bg); color:var(--text); border-radius:10px; outline:none; padding:10px 11px; transition:.15s ease; }
.input, select { height:40px; }
textarea { min-height:88px; resize:vertical; }
.input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10); }
.input::placeholder, textarea::placeholder { color:var(--muted-2); }
.form-footer { margin-top:18px; display:flex; gap:10px; justify-content:flex-end; }

.sheets-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sheet-card { background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; padding:17px; cursor:pointer; min-height:165px; display:flex; flex-direction:column; transition:.16s ease; }
.sheet-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--border) 60%,var(--accent) 40%); box-shadow:var(--shadow); }
.sheet-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); border:1px solid rgba(var(--accent-rgb),.14); font-size:18px; }
.sheet-card h3 { margin:16px 0 5px; font-size:15px; }
.sheet-card p { margin:0; color:var(--muted-2); font-size:11px; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sheet-meta { margin-top:auto; padding-top:16px; color:var(--muted-2); font-size:10px; display:flex; justify-content:space-between; }
.new-sheet { border-style:dashed; place-items:center; justify-content:center; text-align:center; background:var(--surface-2); }
.new-sheet .sheet-icon { background:var(--surface-3); border-color:var(--border); color:var(--muted); margin:0 auto; }

.spreadsheet-shell { border:1px solid var(--border-soft); border-radius:16px; overflow:hidden; background:var(--surface); }
.sheet-toolbar { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border-soft); background:var(--surface-2); }
.sheet-toolbar-left,.sheet-toolbar-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sheet-title-input { background:transparent; border:1px solid transparent; color:var(--text); font-size:15px; font-weight:750; border-radius:8px; padding:7px 8px; width:250px; outline:none; }
.sheet-title-input:hover,.sheet-title-input:focus { background:var(--surface); border-color:var(--border); }
.spreadsheet-scroll { overflow:auto; max-height:calc(100vh - 260px); min-height:420px; }
.spreadsheet { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; table-layout:fixed; }
.spreadsheet th,.spreadsheet td { border-right:1px solid var(--grid); border-bottom:1px solid var(--grid); border-top:0; padding:0; height:38px; min-width:150px; background:var(--table-cell); }
.spreadsheet th { position:sticky; top:0; z-index:3; background:var(--table-head); text-transform:none; letter-spacing:0; font-size:11px; color:var(--muted); }
.spreadsheet .row-index { position:sticky; left:0; z-index:2; min-width:46px; width:46px; max-width:46px; text-align:center; color:var(--muted-2); background:var(--table-head); font-size:10px; }
.spreadsheet th.row-index { z-index:4; }
.col-head { height:38px; display:flex; align-items:center; justify-content:space-between; padding:0 7px 0 10px; gap:8px; }
.col-head small { color:var(--muted-2); font-weight:500; }
.cell { width:100%; height:37px; border:0; outline:0; background:transparent; color:var(--text); padding:0 10px; }
.cell:focus { box-shadow:inset 0 0 0 2px var(--accent); background:var(--surface-2); }
.cell.number,.cell.currency { text-align:right; font-variant-numeric:tabular-nums; }
.cell-checkbox { width:100%; height:37px; display:grid; place-items:center; cursor:pointer; }
.cell-checkbox input { accent-color:var(--accent); width:16px; height:16px; }
.sheet-total-row td { background:var(--table-head); color:var(--muted); font-size:11px; padding:0 10px; height:34px; }
.sheet-total-row .total-value { color:var(--accent); text-align:right; font-weight:750; }

.modal-backdrop { position:fixed; inset:0; background:var(--modal-overlay); backdrop-filter:blur(5px); z-index:100; display:grid; place-items:center; padding:20px; animation:fade .14s ease; }
.modal { width:min(580px,100%); background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 25px 100px rgba(0,0,0,.32); overflow:hidden; animation:pop .16s ease; }
.modal-head { padding:18px 20px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { margin:0; font-size:16px; }
.modal-body { padding:20px; }
.modal-close { border:0; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; }
.toast-stack { position:fixed; right:20px; bottom:20px; display:grid; gap:9px; z-index:200; }
.toast { min-width:260px; max-width:380px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); font-size:12px; color:var(--text); animation:slide .18s ease; }
.toast.error { border-color:rgba(var(--danger-rgb),.34); }
.toast b { display:block; margin-bottom:3px; }
.toast span { color:var(--muted); }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.info-box { background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px; padding:13px; }
.info-box b { font-size:12px; display:block; margin-bottom:5px; }
.info-box span { color:var(--muted-2); font-size:11px; line-height:1.5; }
.code-line { background:var(--input-bg); border:1px solid var(--border-soft); border-radius:9px; padding:10px 11px; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; margin-top:8px; overflow:auto; }

.settings-section { margin-top:18px; padding-top:18px; border-top:1px solid var(--border-soft); }
.settings-label { font-size:11px; color:var(--muted); font-weight:700; margin-bottom:9px; }
.choice-row { display:flex; gap:8px; flex-wrap:wrap; }
.choice-btn { min-height:36px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); cursor:pointer; font-size:12px; }
.choice-btn.active { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }
.accent-choice { width:34px; height:34px; border-radius:10px; border:2px solid transparent; cursor:pointer; position:relative; }
.accent-choice.active:after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:12px; font-weight:900; }
.accent-choice[data-accent-choice="violet"] { background:#7c6cf2; }
.accent-choice[data-accent-choice="blue"] { background:#4f8df7; }
.accent-choice[data-accent-choice="emerald"] { background:#33b987; }
.accent-choice[data-accent-choice="orange"] { background:#f28a49; }

@keyframes fade { from {opacity:0} to {opacity:1} }
@keyframes pop { from {transform:translateY(8px) scale(.98);opacity:.4} to {transform:none;opacity:1} }
@keyframes slide { from {transform:translateY(8px);opacity:0} to {transform:none;opacity:1} }

@media (max-width: 1120px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns:1fr; }
  .sheets-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app-shell { display:block; }
  .sidebar { transform:translateX(-100%); transition:.2s ease; box-shadow:20px 0 60px rgba(0,0,0,.18); }
  .sidebar.open { transform:translateX(0); }
  .main { width:100%; }
  .topbar { height:82px; padding:0 17px; }
  .mobile-menu { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--border); background:var(--surface); border-radius:10px; margin-right:12px; }
  .page-heading { margin-right:auto; }
  .topbar h1 { font-size:20px; }
  .db-pill { display:none; }
  .content { padding:20px 14px 35px; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .actions { justify-content:flex-start; }
  .metrics { grid-template-columns:1fr 1fr; gap:10px; }
  .metric { padding:15px; min-height:116px; }
  .metric-value { font-size:20px; }
  .sheets-grid { grid-template-columns:1fr; }
  .form-grid,.info-grid { grid-template-columns:1fr; }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .avatar { display:none; }
}
@media (max-width: 440px) {
  .metrics,.quick-grid { grid-template-columns:1fr; }
}

/* v3 — per-user diary, authentication and module picker */
[hidden] { display:none !important; }
body.booting .app-shell { visibility:hidden; }
body.auth-mode { overflow:auto; }
body.auth-mode .app-shell { display:none; }
body:not(.auth-mode) .auth-root { display:none; }

.customize-link { margin-top:8px; border-top:1px solid var(--border-soft); border-radius:0 0 11px 11px; padding-top:8px; }
.personalized-metrics { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.module-off-card .empty { padding:70px 24px; }
.module-off-card .btn { margin-top:18px; }

.welcome-diary { min-height:520px; display:grid; grid-template-columns:130px minmax(0,650px); align-items:center; justify-content:center; gap:36px; padding:60px; border:1px solid var(--border-soft); border-radius:22px; background:radial-gradient(circle at 25% 40%,rgba(var(--accent-rgb),.12),transparent 32%),var(--surface); }
.welcome-symbol { width:120px; height:120px; display:grid; place-items:center; border-radius:32px; background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.22); color:var(--accent); font-size:54px; }
.welcome-diary h2 { font-size:36px; letter-spacing:-.05em; margin:8px 0 14px; }
.welcome-diary p { color:var(--muted); line-height:1.7; margin:0 0 22px; }

.customize-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(290px,.7fr); gap:18px; align-items:start; }
.module-picker { display:grid; gap:12px; }
.module-card { position:relative; display:grid; grid-template-columns:52px 1fr 48px; align-items:center; gap:14px; min-height:94px; border:1px solid var(--border-soft); border-radius:16px; padding:16px; background:var(--surface); cursor:pointer; transition:.16s ease; }
.module-card:hover { border-color:color-mix(in srgb,var(--border) 55%,var(--accent) 45%); transform:translateY(-1px); }
.module-card.selected { border-color:rgba(var(--accent-rgb),.45); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.15); background:linear-gradient(90deg,rgba(var(--accent-rgb),.06),transparent 38%),var(--surface); }
.module-card > input { position:absolute; opacity:0; pointer-events:none; }
.module-card-icon { width:50px; height:50px; border:1px solid var(--border); background:var(--surface-2); color:var(--accent); border-radius:14px; display:grid; place-items:center; font-size:22px; }
.module-card-copy b { display:block; font-size:14px; margin-bottom:5px; }
.module-card-copy span { color:var(--muted); font-size:12px; line-height:1.5; }
.module-switch { width:43px; height:24px; border-radius:999px; background:var(--surface-3); border:1px solid var(--border); padding:2px; transition:.16s ease; }
.module-switch span { width:18px; height:18px; display:block; border-radius:50%; background:var(--muted-2); transition:.16s ease; }
.module-card.selected .module-switch { background:var(--accent); border-color:var(--accent); }
.module-card.selected .module-switch span { transform:translateX(19px); background:white; }
.customize-footer { padding-top:4px; }
.sticky-explainer { position:sticky; top:128px; }
.timeline-list { display:grid; gap:18px; }
.timeline-list > div { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; }
.timeline-list > div > span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:800; }
.timeline-list p { margin:0; }
.timeline-list b { display:block; font-size:12px; margin-bottom:4px; }
.timeline-list small { display:block; color:var(--muted-2); line-height:1.5; }

.profile-summary { display:flex; gap:12px; align-items:center; }
.profile-summary > div:last-child { min-width:0; }
.profile-summary b { display:block; font-size:14px; }
.profile-summary span { display:block; color:var(--muted); font-size:11px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; }
.avatar-large { width:46px; height:46px; flex:none; }
.form-footer.compact { margin-top:10px; }
.danger-zone { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.danger-zone b { display:block; font-size:12px; margin-bottom:4px; }
.danger-zone span { color:var(--muted-2); font-size:11px; }

.auth-root { min-height:100vh; }
.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.25fr) minmax(400px,.75fr); background:var(--bg); }
.auth-visual { padding:48px; display:flex; align-items:stretch; background:radial-gradient(circle at 25% 30%,rgba(var(--accent-rgb),.18),transparent 28%),radial-gradient(circle at 72% 70%,rgba(var(--accent-rgb),.08),transparent 32%),var(--sidebar); border-right:1px solid var(--border-soft); }
.auth-visual > div { width:min(780px,100%); margin:0 auto; display:flex; flex-direction:column; }
.auth-brand { display:flex; gap:12px; align-items:center; }
.auth-brand .brand-mark { width:42px; height:42px; }
.auth-brand .brand-mark svg { width:24px; }
.auth-brand b { display:block; font-size:15px; letter-spacing:.09em; }
.auth-brand span { display:block; color:var(--muted-2); font-size:10px; margin-top:3px; }
.auth-hero { margin:auto 0; padding:60px 0; }
.auth-hero h1 { margin:10px 0 20px; font-size:clamp(44px,5.8vw,82px); line-height:.98; letter-spacing:-.065em; max-width:800px; }
.auth-hero p { margin:0; max-width:610px; font-size:15px; color:var(--muted); line-height:1.75; }
.auth-feature-row { display:flex; flex-wrap:wrap; gap:8px; }
.auth-feature-row span { border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 11px; color:var(--muted); font-size:10px; }
.auth-panel { display:grid; place-items:center; padding:40px; background:var(--bg); }
.auth-card { width:min(420px,100%); }
.auth-card h2 { margin:28px 0 8px; font-size:27px; letter-spacing:-.04em; }
.auth-card > p { margin:0 0 22px; color:var(--muted); line-height:1.6; font-size:12px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px; padding:4px; }
.auth-tabs button { height:36px; border:0; background:transparent; color:var(--muted); border-radius:9px; cursor:pointer; font-size:12px; }
.auth-tabs button.active { background:var(--surface); color:var(--text); box-shadow:0 1px 6px rgba(0,0,0,.08); }
.auth-fields { display:grid; gap:13px; }
.auth-submit { width:100%; margin-top:18px; height:44px; }
.auth-submit:disabled { opacity:.65; cursor:wait; }
.auth-error { min-height:18px; margin-top:12px; color:var(--danger); font-size:11px; }
.legacy-note { margin-top:14px; border:1px solid rgba(var(--accent-rgb),.18); background:var(--accent-soft); border-radius:11px; padding:11px 12px; color:var(--muted); font-size:10.5px; line-height:1.5; }
.auth-error-page { grid-template-columns:1fr; place-items:center; padding:30px; }

@media (max-width: 900px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-visual { min-height:360px; padding:30px; border-right:0; border-bottom:1px solid var(--border-soft); }
  .auth-hero { padding:55px 0 35px; }
  .auth-hero h1 { font-size:48px; }
  .auth-panel { padding:40px 22px 60px; }
  .customize-layout { grid-template-columns:1fr; }
  .sticky-explainer { position:static; }
}
@media (max-width: 600px) {
  .welcome-diary { grid-template-columns:1fr; padding:34px 22px; text-align:left; }
  .welcome-symbol { width:74px; height:74px; border-radius:22px; font-size:34px; }
  .welcome-diary h2 { font-size:28px; }
  .module-card { grid-template-columns:44px 1fr 44px; padding:13px; }
  .module-card-icon { width:42px; height:42px; }
  .danger-zone { align-items:flex-start; flex-direction:column; }
  .auth-visual { min-height:300px; }
  .auth-hero h1 { font-size:39px; }
  .auth-feature-row { display:none; }
}

/* v4 — TRACKIARY BETA */
.sidebar { overflow:hidden; }
.nav { min-height:0; overflow-y:auto; scrollbar-width:thin; padding-right:2px; }
.brand-copy { min-width:0; }
.brand-title-row { display:flex; align-items:center; gap:7px; min-width:0; }
.stage-badge { display:inline-flex; align-items:center; min-height:18px; padding:0 6px; border-radius:6px; border:1px solid rgba(var(--accent-rgb),.34); background:var(--accent-soft); color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.09em; line-height:1; }
.stage-badge.inline-stage { min-height:20px; padding:0 7px; font-size:9px; }
.release-kicker { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--muted-2); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.admin-link { margin-top:5px; color:color-mix(in srgb,var(--muted) 78%,var(--accent) 22%); }
.privacy-box { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; }
.privacy-icon { width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:20px; }
.privacy-box b { display:block;font-size:12px;margin-bottom:5px; }
.privacy-box span { display:block;color:var(--muted);font-size:11px;line-height:1.55; }
.compact-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }

.notes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.note-card { min-height:220px; border:1px solid var(--border-soft); background:var(--surface); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; box-shadow:0 1px 0 rgba(255,255,255,.01); }
.note-card.pinned { border-color:rgba(var(--accent-rgb),.34); background:linear-gradient(145deg,rgba(var(--accent-rgb),.06),transparent 45%),var(--surface); }
.note-card-head,.goal-head,.habit-top { display:flex;justify-content:space-between;align-items:center;gap:10px; }
.note-pin { color:var(--accent);font-size:14px; }
.note-card h3,.goal-card h3,.habit-card h3 { margin:16px 0 8px;font-size:16px;letter-spacing:-.02em; }
.note-card p { margin:0;color:var(--muted);font-size:12px;line-height:1.65;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7; }
.note-card small { margin-top:auto;padding-top:16px;color:var(--muted-2);font-size:10px; }
.tag-row { display:flex;flex-wrap:wrap;gap:6px;margin-top:12px; }
.tag-row span { padding:4px 7px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--muted);font-size:9px; }
.check-field { min-height:40px;display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--border-soft);border-radius:11px;background:var(--surface-2);font-size:12px;color:var(--muted); }
.check-field.full { grid-column:1/-1; }
.check-field input { accent-color:var(--accent); }

.task-list { display:grid; }
.task-row { display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:15px 18px;border-bottom:1px solid var(--border-soft); }
.task-row:last-child { border-bottom:0; }
.task-row.completed { opacity:.58; }
.task-row.completed .task-main b { text-decoration:line-through; }
.task-check { width:28px;height:28px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;color:white;font-weight:900; }
.task-check.checked { background:var(--accent);border-color:var(--accent); }
.task-main { min-width:0; }
.task-title-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.task-main b { font-size:13px; }
.task-main p { margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.5; }
.task-meta { display:flex;gap:8px;margin-top:7px;color:var(--muted-2);font-size:10px; }
.task-meta .overdue { color:var(--danger); }
.priority-badge,.role-badge,.status-badge { display:inline-flex;align-items:center;min-height:22px;padding:0 7px;border-radius:7px;border:1px solid var(--border);font-size:9px;font-weight:750;color:var(--muted);background:var(--surface-2); }
.priority-badge.high { color:var(--danger);background:var(--danger-soft);border-color:rgba(var(--danger-rgb),.22); }
.priority-badge.low { color:var(--success);background:rgba(var(--success-rgb),.08); }

.habit-grid,.goal-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.habit-card,.goal-card { border:1px solid var(--border-soft);background:var(--surface);border-radius:var(--radius);padding:18px;min-height:230px; }
.habit-card.inactive { opacity:.58; }
.habit-icon { width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:19px; }
.habit-card p,.goal-card p { color:var(--muted);font-size:11px;line-height:1.55;min-height:34px;margin:0 0 18px; }
.progress-track { height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;border:1px solid var(--border-soft); }
.progress-track.large { height:9px; }
.progress-track span { display:block;height:100%;background:var(--accent);border-radius:inherit; }
.habit-stats,.goal-progress-label { display:flex;justify-content:space-between;gap:10px;color:var(--muted-2);font-size:10px;margin:8px 0 13px; }
.goal-progress-label { margin:10px 0 8px;align-items:end; }
.goal-progress-label b { color:var(--text);font-size:12px; }
.habit-toggle { width:100%;min-height:39px;margin-top:12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-size:11px;font-weight:750; }
.habit-toggle.done { color:white;background:var(--accent);border-color:var(--accent); }
.goal-card small { display:block;color:var(--muted-2);font-size:10px;margin-top:12px; }
.status-badge.active { color:var(--success);background:rgba(var(--success-rgb),.08);border-color:rgba(var(--success-rgb),.18); }
.status-badge.done { color:var(--accent);background:var(--accent-soft);border-color:rgba(var(--accent-rgb),.2); }
.status-badge.paused { color:var(--warning); }
.status-badge.blocked { color:var(--danger);background:var(--danger-soft);border-color:rgba(var(--danger-rgb),.2); }
.role-badge.admin { color:var(--accent);background:var(--accent-soft);border-color:rgba(var(--accent-rgb),.2); }

.admin-toolbar { min-height:76px; }
.search-form { display:flex;gap:8px;width:min(430px,52%); }
.search-form .input { min-width:0; }
.user-cell { display:flex;align-items:center;gap:10px; }
.user-cell b,.user-cell small { display:block; }
.user-cell small { color:var(--muted-2);font-size:9px;margin-top:3px; }
.mini-avatar { width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:850;flex:none; }
.actions-cell { text-align:right; }
.copy-line { display:flex;gap:8px; }
.copy-line .input { min-width:0;flex:1; }
.auth-form-link { display:flex;justify-content:flex-end;margin-top:-5px; }
.text-button { border:0;background:transparent;color:var(--accent);padding:5px 0;cursor:pointer;font-size:11px; }
.auth-back { margin-top:12px; }
.auth-success { margin-top:14px;border:1px solid rgba(var(--success-rgb),.22);background:rgba(var(--success-rgb),.08);border-radius:12px;padding:12px;color:var(--muted);font-size:11px;line-height:1.55;display:grid;gap:10px; }

@media (max-width:1120px){.notes-grid,.habit-grid,.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){.compact-metrics{grid-template-columns:1fr 1fr}.notes-grid,.habit-grid,.goal-grid{grid-template-columns:1fr}.admin-toolbar{align-items:flex-start;flex-direction:column;padding:14px 18px}.search-form{width:100%}.task-row{grid-template-columns:30px minmax(0,1fr)}.task-row>.row-actions{grid-column:2}.copy-line{flex-direction:column}}
@media (max-width:440px){.compact-metrics{grid-template-columns:1fr}}


/* v4.1 — journal and regional settings */
.journal-list{display:grid;gap:14px}.journal-card{display:grid;grid-template-columns:150px 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}.journal-date{padding:20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px}.journal-date span{font-size:13px;color:var(--muted);font-weight:700}.journal-date b{font-size:30px}.journal-content{padding:20px;min-width:0}.journal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.journal-head h3{margin:0 0 10px;font-size:18px}.journal-content p{margin:0 0 14px;color:var(--text);line-height:1.65;overflow-wrap:anywhere}.journal-content small{display:block;margin-top:14px;color:var(--muted)}.admin-actions{flex-wrap:wrap}.settings-section select:disabled,.settings-section input:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:700px){.journal-card{grid-template-columns:1fr}.journal-date{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between;padding:14px 16px}.journal-date b{font-size:24px}.journal-content{padding:16px}}

/* ===== TRACKIARY v5 ===== */
/* Windows/Chromium native select can clip glyphs when vertical padding is combined with a fixed height. */
select {
  min-height: 42px;
  height: 42px;
  padding: 0 38px 0 12px;
  line-height: normal;
  vertical-align: middle;
}
select option { line-height: normal; }

.topbar-tool { min-height:38px; height:38px; border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:11px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; transition:.16s ease; position:relative; font-weight:650; font-size:12px; }
.topbar-tool:hover { color:var(--text); background:var(--surface-hover); transform:translateY(-1px); }
.notification-button { width:38px; padding:0; font-size:18px; }
.notification-count { position:absolute; right:-5px; top:-6px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:var(--danger); color:white; border:2px solid var(--bg); font-size:9px; font-weight:800; }
.notification-count[hidden] { display:none; }

.search-box { display:flex; gap:9px; align-items:center; }
.search-box .input { min-width:0; flex:1; }
.search-results { display:grid; gap:8px; margin-top:14px; max-height:440px; overflow:auto; }
.search-result { border:1px solid var(--border-soft); background:var(--surface-2); border-radius:12px; padding:12px 13px; cursor:pointer; transition:.14s ease; }
.search-result:hover { background:var(--surface-hover); border-color:color-mix(in srgb,var(--border) 65%,var(--accent) 35%); }
.search-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.search-result b { font-size:13px; }
.search-result small { color:var(--muted-2); font-size:10px; }
.search-result p { color:var(--muted); margin:5px 0 0; font-size:11px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-empty { color:var(--muted); text-align:center; padding:28px 12px; font-size:12px; }

.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.calendar-toolbar h2 { margin:0; font-size:22px; letter-spacing:-.035em; text-transform:capitalize; }
.calendar-nav { display:flex; gap:8px; }
.calendar-shell { border:1px solid var(--border-soft); background:var(--surface); border-radius:18px; overflow:hidden; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-weekdays div { padding:10px 12px; color:var(--muted-2); background:var(--table-head); border-right:1px solid var(--border-soft); font-size:10px; text-transform:uppercase; letter-spacing:.07em; font-weight:750; }
.calendar-weekdays div:last-child { border-right:0; }
.calendar-day { min-height:132px; padding:9px; border-top:1px solid var(--border-soft); border-right:1px solid var(--border-soft); background:var(--surface); min-width:0; }
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day.outside { background:var(--surface-2); opacity:.52; }
.calendar-day.today { box-shadow:inset 0 0 0 1px var(--accent); }
.calendar-date-number { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; font-size:11px; font-weight:750; color:var(--muted); margin-bottom:6px; }
.calendar-day.today .calendar-date-number { background:var(--accent); color:white; }
.calendar-events { display:grid; gap:4px; }
.calendar-event { width:100%; border:0; text-align:left; border-radius:7px; padding:5px 6px; background:var(--surface-3); color:var(--text); cursor:pointer; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:2px solid var(--accent); }
.calendar-event.task { border-left-color:var(--warning); }
.calendar-event.goal { border-left-color:var(--accent); }
.calendar-event.money { border-left-color:var(--success); }
.calendar-event.health { border-left-color:#5f9df7; }
.calendar-event.journal { border-left-color:#c58cff; }
.calendar-event.habit { border-left-color:#57cbb3; }
.calendar-more { color:var(--muted-2); font-size:9px; padding:2px 5px; }

.notification-list { display:grid; gap:8px; max-height:470px; overflow:auto; }
.notification-item { display:grid; grid-template-columns:9px 1fr auto; gap:10px; align-items:start; border:1px solid var(--border-soft); background:var(--surface-2); border-radius:12px; padding:12px; }
.notification-item.unread { border-color:rgba(var(--accent-rgb),.25); background:linear-gradient(90deg,rgba(var(--accent-rgb),.06),var(--surface-2)); }
.notification-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:5px; }
.notification-item.danger .notification-dot { background:var(--danger); }
.notification-item.reminder .notification-dot { background:var(--warning); }
.notification-content b { display:block; font-size:12px; margin-bottom:3px; }
.notification-content span { display:block; color:var(--muted); font-size:11px; line-height:1.45; }
.notification-content small { color:var(--muted-2); font-size:9px; display:block; margin-top:5px; }
.notification-actions { display:flex; gap:3px; }

.dashboard-edit-list { display:grid; gap:8px; margin-top:10px; }
.dashboard-edit-item { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; border:1px solid var(--border-soft); background:var(--surface-2); border-radius:11px; padding:10px 11px; cursor:grab; }
.dashboard-edit-item.dragging { opacity:.45; }
.dashboard-drag-handle { color:var(--muted-2); font-size:16px; text-align:center; }
.dashboard-edit-item label { display:flex; align-items:center; gap:8px; color:var(--text); font-size:12px; }
.dashboard-edit-item input { accent-color:var(--accent); }
.dashboard-widget-hidden { display:none !important; }
.dashboard-widget[data-dashboard-widget] { position:relative; }
.dashboard-widget[data-dashboard-widget]::before { content:attr(data-widget-label); display:none; }

.profile-avatar-picker { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.avatar-pick { width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; font-size:19px; }
.avatar-pick.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.12); }
.email-status { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--border-soft); background:var(--surface-2); border-radius:11px; padding:11px 12px; margin-top:12px; }
.email-status span { color:var(--muted); font-size:11px; }
.email-status b { font-size:11px; }
.status-badge.verified { color:var(--success); background:rgba(var(--success-rgb),.10); border-color:rgba(var(--success-rgb),.18); }
.status-badge.unverified { color:var(--warning); background:rgba(243,198,107,.10); border-color:rgba(243,198,107,.20); }

@media (max-width: 900px) {
  .tool-label { display:none; }
  .topbar-tool { width:38px; padding:0; font-size:17px; }
  .calendar-day { min-height:96px; padding:6px; }
  .calendar-event { font-size:9px; padding:4px; }
}
@media (max-width: 620px) {
  .calendar-shell { overflow:auto; }
  .calendar-weekdays,.calendar-grid { min-width:720px; }
}
.modal { max-height:min(860px,calc(100vh - 32px)); }
.modal-body { overflow:auto; max-height:calc(100vh - 105px); }
.dashboard-widget-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.dashboard-widget-board > .metrics { grid-column:1/-1; margin-bottom:0; }
.dashboard-widget-board > .dashboard-widget-money { grid-column:1/-1; }
.dashboard-widget-board > .card { height:100%; }
@media (max-width: 1050px) { .dashboard-widget-board { grid-template-columns:1fr; } .dashboard-widget-board > .metrics,.dashboard-widget-board > .dashboard-widget-money { grid-column:auto; } }

/* ===== Diarity v5.1 ===== */
.money-original { display:block; margin-top:3px; color:var(--muted-2); font-size:9px; font-weight:550; white-space:nowrap; }
.money-input-row { display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:8px; }
.money-input-row select { min-width:0; }

.settings-modal { width:min(860px,100%); }
.settings-modal .modal-body { padding:0; overflow:hidden; }
.settings-layout { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:520px; max-height:calc(100vh - 106px); }
.settings-nav { padding:14px; border-right:1px solid var(--border-soft); background:var(--surface-2); display:flex; flex-direction:column; gap:5px; }
.settings-tab { width:100%; min-height:42px; border:1px solid transparent; background:transparent; color:var(--muted); border-radius:11px; padding:0 11px; display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left; transition:.15s ease; }
.settings-tab > span { width:20px; text-align:center; color:var(--muted-2); font-size:14px; }
.settings-tab b { font-size:11px; font-weight:700; }
.settings-tab:hover { color:var(--text); background:var(--surface-hover); }
.settings-tab.active { color:var(--text); background:var(--surface); border-color:var(--border); box-shadow:0 5px 18px rgba(0,0,0,.06); }
.settings-tab.active > span { color:var(--accent); }
.settings-content { min-width:0; overflow:auto; padding:22px; }
.settings-panel { display:none; animation:fade .12s ease; }
.settings-panel.active { display:block; }
.settings-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:20px; }
.settings-panel-head h4 { margin:0 0 5px; font-size:17px; letter-spacing:-.02em; }
.settings-panel-head p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.settings-profile-summary { margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border-soft); }
.settings-option-block { padding:16px 0; border-bottom:1px solid var(--border-soft); }
.settings-option-block > label { display:block; margin-bottom:10px; }
.settings-action-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0; border-bottom:1px solid var(--border-soft); }
.settings-action-row > div { display:grid; gap:4px; }
.settings-action-row b { font-size:12px; }
.settings-action-row span { color:var(--muted); font-size:10px; line-height:1.5; }
.settings-action-row.danger-zone { margin-top:10px; padding:16px; border:1px solid rgba(var(--danger-rgb),.18); background:var(--danger-soft); border-radius:13px; }
.settings-sticky-actions { padding-top:14px; border-top:1px solid var(--border-soft); }
.fx-card { margin-top:18px; border:1px solid var(--border-soft); border-radius:14px; background:linear-gradient(135deg,rgba(var(--accent-rgb),.06),transparent 52%),var(--surface-2); padding:15px; display:grid; grid-template-columns:1fr auto; gap:10px 14px; align-items:center; }
.fx-card-copy { display:grid; gap:4px; grid-column:1/-1; }
.fx-card-copy b { font-size:12px; }
.fx-card-copy span { color:var(--muted); font-size:10px; line-height:1.55; }
.fx-preview { font-size:17px; font-weight:800; letter-spacing:-.02em; }
.fx-meta { grid-column:1/-1; color:var(--muted-2); font-size:9px; }
.fx-meta a { color:var(--accent); text-decoration:none; }

/* Native selects on Windows need internal vertical room. Keep padding horizontal only. */
select { padding-top:0 !important; padding-bottom:0 !important; line-height:1.2; }

@media (max-width:720px) {
  .settings-modal { width:min(620px,100%); }
  .settings-layout { grid-template-columns:1fr; min-height:0; }
  .settings-nav { border-right:0; border-bottom:1px solid var(--border-soft); flex-direction:row; overflow-x:auto; padding:10px; }
  .settings-tab { width:auto; min-width:max-content; padding:0 12px; }
  .settings-content { padding:17px; }
  .settings-action-row { align-items:flex-start; flex-direction:column; }
  .settings-action-row .btn { width:100%; }
  .money-input-row { grid-template-columns:1fr; }
}

/* Diarity v5.1 auth language switch */
.auth-visual { position: relative; }
.auth-language-toggle {
  position: absolute; top: 22px; right: 22px; z-index: 3;
  min-width: 44px; height: 34px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: inherit; font: inherit; font-weight: 800; cursor: pointer;
  backdrop-filter: blur(10px);
}
.auth-language-toggle:hover { transform: translateY(-1px); }

.fx-attribution { margin:-6px 0 16px; display:flex; flex-wrap:wrap; gap:2px; align-items:center; color:var(--muted-2); font-size:9px; }
.fx-attribution a { color:var(--muted); text-decoration:none; font-weight:700; }
.fx-attribution a:hover { color:var(--accent); }


/* ===== Diarity v5.2 — product polish ===== */
.nav-icon-svg svg { width:18px; height:18px; display:block; }
.email-status { align-items:center; }
.email-status-copy { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
.email-status-copy b { display:block; color:var(--text); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.email-status-copy .email-address { display:block; min-width:0; color:var(--text); font-size:12px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-status-copy small { color:var(--muted); font-size:10px; line-height:1.45; }
.email-status > .status-badge { flex:0 0 auto; white-space:nowrap; }
@media (max-width:520px) {
  .email-status { align-items:flex-start; flex-direction:column; }
  .email-status > .status-badge { align-self:flex-start; }
}

/* v5.3 — account center, uploaded avatars and universal trackers */
.avatar.has-photo,
.avatar-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
.avatar-photo,
.avatar-fallback {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background-color: var(--surface-2);
  font-weight: 800;
  overflow: hidden;
}
.avatar-photo.avatar-large,
.avatar-fallback.avatar-large { width: 48px; height: 48px; min-width: 48px; }
.avatar-upload-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.avatar-upload-preview .avatar-photo,
.avatar-upload-preview .avatar-fallback { width:64px; height:64px; min-width:64px; font-size:20px; }
.avatar-upload-row > div:last-child { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.avatar-upload-row small { width:100%; color:var(--muted); }
.avatar-upload-button { cursor:pointer; }

.settings-device-block { border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-top:14px; }
.settings-device-block .settings-action-row { border:0; border-radius:0; border-bottom:1px solid var(--border); }
.device-list { display:flex; flex-direction:column; }
.device-item { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); }
.device-item:last-child { border-bottom:0; }
.device-icon { width:28px; height:28px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); }
.device-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.device-copy b { display:flex; align-items:center; gap:8px; min-width:0; }
.device-copy span { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.current-session-badge { display:inline-flex!important; width:auto!important; padding:2px 7px; border-radius:999px; background:rgba(var(--accent-rgb),.12); color:var(--accent)!important; font-size:10px!important; font-weight:700; white-space:nowrap; }
.device-loading { padding:16px; color:var(--muted); font-size:13px; }

.notification-pref-list { display:flex; flex-direction:column; gap:10px; }
.notification-pref { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 16px; border:1px solid var(--border); border-radius:15px; background:var(--surface-2); cursor:pointer; }
.notification-pref > div { display:flex; flex-direction:column; gap:4px; }
.notification-pref b { font-size:14px; }
.notification-pref span { color:var(--muted); font-size:12px; }
.notification-pref input { width:18px; height:18px; accent-color:var(--accent); }

.tracker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tracker-card { border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.tracker-card.muted { opacity:.62; }
.tracker-card-head { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:11px; align-items:center; padding:15px 15px 10px; }
.tracker-card-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.12); color:var(--accent); font-size:20px; }
.tracker-card-title { min-width:0; display:flex; flex-direction:column; gap:3px; }
.tracker-card-title b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracker-card-title span { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracker-current { padding:14px 15px 18px; display:flex; flex-direction:column; gap:5px; }
.tracker-current small { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.tracker-current strong { font-size:28px; line-height:1.1; letter-spacing:-.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracker-current > span { color:var(--muted); font-size:12px; }
.tracker-card-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 15px; border-top:1px solid var(--border); background:var(--surface-2); }
.tracker-card-foot > span { color:var(--muted); font-size:12px; }
.tracker-card-foot > div { display:flex; gap:6px; }
.tracker-chart { height:220px; margin-bottom:12px; border:1px solid var(--border); border-radius:14px; padding:10px; }
.tracker-chart canvas { width:100%; height:100%; }
.tracker-history-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.tracker-history-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); }
.tracker-history-row:last-child { border-bottom:0; }
.tracker-history-row > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.tracker-history-row b { font-size:14px; }
.tracker-history-row span { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkbox-line { display:flex!important; align-items:center; gap:8px; }
.checkbox-line input { width:17px; height:17px; accent-color:var(--accent); }

@media (max-width: 1080px) { .tracker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) {
  .tracker-grid { grid-template-columns:1fr; }
  .tracker-card-foot { align-items:flex-start; flex-direction:column; }
  .device-item { grid-template-columns:28px minmax(0,1fr); }
  .device-item > .btn { grid-column:2; justify-self:start; }
  .avatar-upload-row { align-items:flex-start; }
}

/* ===== Diarity v5.4 — adaptive home and account spacing ===== */
.settings-device-block .settings-action-row {
  padding: 17px 18px;
  gap: 22px;
}
.settings-device-block .device-item {
  padding: 14px 18px;
  gap: 12px;
}
.settings-device-block .device-list {
  background: var(--surface);
}
.device-copy b { line-height: 1.35; }
.device-copy span { line-height: 1.45; }

.dashboard-page-head { margin-bottom: 20px; }
.dashboard-source { display: contents; }
.dashboard-widget-board {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 18px;
  align-items: start;
}
.dashboard-widget-board > .metrics {
  grid-column: 1 / -1;
  margin: 0;
}
.dashboard-widget-board > .card {
  height: auto;
  min-height: 0;
}
.dashboard-span-full { grid-column: 1 / -1 !important; }
.dashboard-span-half { grid-column: span 6 !important; }
.dashboard-span-feature { grid-column: span 7 !important; }
.dashboard-span-side { grid-column: span 5 !important; }

.metric-link {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.metric-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb,var(--border) 62%,var(--accent) 38%);
  background: color-mix(in srgb,var(--surface) 96%,var(--accent) 4%);
}
.metric-link:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb),.35);
  outline-offset: 2px;
}

.dashboard-list {
  display: flex;
  flex-direction: column;
  padding: 8px 18px 12px;
}
.dashboard-list-row {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  text-align: left;
  cursor: pointer;
}
.dashboard-list-row:last-child { border-bottom: 0; }
.dashboard-list-row:hover .dashboard-list-copy b { color: var(--accent); }
.dashboard-list-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.dashboard-list-copy b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:.15s ease; }
.dashboard-list-copy small { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-list-mark { width:9px; height:9px; border-radius:50%; background:var(--muted-2); justify-self:center; }
.dashboard-list-mark.priority-high { background:var(--danger); }
.dashboard-list-mark.priority-normal { background:var(--accent); }
.dashboard-list-mark.priority-low { background:var(--success); }
.dashboard-habit-icon,.dashboard-journal-mood,.dashboard-note-icon,.dashboard-tracker-icon {
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--accent); font-size:13px;
}
.dashboard-habit-icon.done { background:rgba(var(--success-rgb),.11); color:var(--success); }
.dashboard-row-value { font-size:12px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dashboard-health-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.dashboard-health-summary > div {
  border:1px solid var(--border-soft);
  background:var(--surface-2);
  border-radius:12px;
  padding:13px;
  min-width:0;
}
.dashboard-health-summary small { display:block; color:var(--muted); font-size:10px; margin-bottom:6px; }
.dashboard-health-summary b { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dashboard-goals { display:flex; flex-direction:column; gap:10px; }
.dashboard-goal-row {
  border:1px solid var(--border-soft);
  background:var(--surface-2);
  color:var(--text);
  border-radius:12px;
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 12px;
  cursor:pointer;
  text-align:left;
}
.dashboard-goal-row > span:first-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.dashboard-goal-row b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-goal-row small { color:var(--muted); font-size:10px; }
.dashboard-goal-pct { color:var(--accent); font-weight:800; font-size:11px; }
.dashboard-goal-row .progress-track { grid-column:1/-1; margin:0; }

@media (max-width: 1050px) {
  .dashboard-widget-board { grid-template-columns: 1fr; }
  .dashboard-widget-board > .metrics,
  .dashboard-span-full,.dashboard-span-half,.dashboard-span-feature,.dashboard-span-side { grid-column:1 !important; }
}
@media (max-width: 720px) {
  .settings-device-block .settings-action-row,
  .settings-device-block .device-item { padding-left:14px; padding-right:14px; }
  .dashboard-health-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== Diarity v5.5 — dashboard canvas + tracker deletion ===== */
.tracker-card-actions { display:flex; align-items:center; gap:5px; }
.tracker-delete-btn:hover { color:var(--danger); border-color:rgba(var(--danger-rgb),.32); background:var(--danger-soft); }
.tracker-editor-footer .form-footer-spacer { flex:1 1 auto; }

.dashboard-widget-board { grid-auto-flow:dense; }
.dashboard-widget-board > .dashboard-size-small { grid-column:span 4 !important; }
.dashboard-widget-board > .dashboard-size-medium { grid-column:span 6 !important; }
.dashboard-widget-board > .dashboard-size-large { grid-column:1 / -1 !important; }
.dashboard-widget-board > .dashboard-widget { min-width:0; }
.dashboard-widget-board > .metrics.dashboard-size-small,
.dashboard-widget-board > .metrics.dashboard-size-medium,
.dashboard-widget-board > .metrics.dashboard-size-large { margin:0; }
.dashboard-widget-board > .dashboard-size-small.personalized-metrics { grid-template-columns:1fr; }
.dashboard-widget-board > .dashboard-size-medium.personalized-metrics { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

.dashboard-edit-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:-4px 0 18px;
  padding:14px 16px;
  border:1px solid rgba(var(--accent-rgb),.25);
  border-radius:15px;
  background:linear-gradient(110deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.03) 60%,transparent),var(--surface);
  box-shadow:var(--shadow);
}
.dashboard-edit-banner > div:first-child { min-width:0; display:grid; gap:4px; }
.dashboard-edit-banner b { font-size:12px; }
.dashboard-edit-banner span { color:var(--muted); font-size:10px; line-height:1.5; }
.dashboard-edit-banner-actions { display:flex; gap:8px; flex:0 0 auto; }

.dashboard-edit-mode > [data-dashboard-widget] {
  outline:1px dashed rgba(var(--accent-rgb),.42);
  outline-offset:3px;
  transition:opacity .15s ease, outline-color .15s ease, transform .15s ease;
}
.dashboard-edit-mode > [data-dashboard-widget]:hover { outline-color:var(--accent); }
.dashboard-edit-mode > .dashboard-pending-hidden { opacity:.42; filter:saturate(.55); }
.dashboard-edit-mode > .dashboard-dragging { opacity:.35; transform:scale(.985); }
.dashboard-edit-mode > .dashboard-widget-hidden { display:grid !important; }
.dashboard-edit-mode > .card.dashboard-widget-hidden { display:block !important; }
.dashboard-inline-controls {
  position:absolute;
  z-index:12;
  top:8px;
  right:8px;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:11px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 8px 26px rgba(0,0,0,.11);
  backdrop-filter:blur(12px);
}
.dashboard-inline-drag {
  width:27px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:var(--muted);
  cursor:grab;
  user-select:none;
  font-size:16px;
  line-height:1;
}
.dashboard-inline-drag:hover { color:var(--text); background:var(--surface-hover); }
.dashboard-inline-drag:active { cursor:grabbing; }
.dashboard-size-switch { display:flex; padding:2px; gap:2px; border-radius:8px; background:var(--surface-2); }
.dashboard-size-switch button,
.dashboard-visibility-btn {
  border:0;
  background:transparent;
  color:var(--muted);
  min-width:25px;
  height:24px;
  padding:0 7px;
  border-radius:6px;
  cursor:pointer;
  font:700 9px/1 inherit;
}
.dashboard-size-switch button:hover,
.dashboard-visibility-btn:hover { color:var(--text); background:var(--surface-hover); }
.dashboard-size-switch button.active { color:white; background:var(--accent); }
.dashboard-visibility-btn { min-width:auto; display:flex; align-items:center; gap:5px; }
.dashboard-visibility-btn span { font-size:9px; }
.dashboard-visibility-btn.active { color:var(--danger); background:var(--danger-soft); }
.dashboard-edit-mode .card-head { padding-top:50px; }
.dashboard-edit-mode > .personalized-metrics { padding-top:52px; }

@media (max-width:1050px) {
  .dashboard-widget-board > .dashboard-size-small,
  .dashboard-widget-board > .dashboard-size-medium,
  .dashboard-widget-board > .dashboard-size-large { grid-column:1 !important; }
  .dashboard-edit-banner { align-items:flex-start; flex-direction:column; }
  .dashboard-edit-banner-actions { width:100%; justify-content:flex-end; }
}
@media (max-width:620px) {
  .dashboard-inline-controls { position:relative; top:auto; right:auto; margin:8px 8px 0; width:calc(100% - 16px); justify-content:flex-end; }
  .dashboard-inline-drag { margin-right:auto; }
  .dashboard-edit-mode .card-head { padding-top:14px; }
  .dashboard-edit-mode > .personalized-metrics { padding-top:8px; }
  .dashboard-visibility-btn span { display:none; }
}

/* ===== Diarity v5.6 settings simplification & appearance studio ===== */
.simple-preferences-grid { display:grid; gap:12px; }
.preference-card { display:grid; grid-template-columns:38px minmax(0,1fr) 180px; gap:12px; align-items:center; padding:14px; border:1px solid var(--border-soft); border-radius:14px; background:var(--surface-2); }
.preference-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-size:15px; font-weight:900; }
.preference-copy { min-width:0; display:grid; gap:3px; }
.preference-copy b { font-size:12px; }
.preference-copy span { color:var(--muted); font-size:10px; line-height:1.45; }
.preference-card select { width:100%; min-width:0; }
.currency-how-it-works { margin-top:14px; display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border-soft); border-radius:14px; background:var(--surface); }
.currency-how-icon { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); font-weight:900; }
.currency-how-it-works b { display:block; font-size:12px; margin:1px 0 4px; }
.currency-how-it-works p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; }
.fx-card-simple { grid-template-columns:minmax(0,1fr) auto; }
.fx-card-simple .fx-preview { font-size:15px; }
.fx-card-simple .fx-meta { font-size:9.5px; line-height:1.45; }

.appearance-section { padding:2px 0 20px; margin-bottom:18px; border-bottom:1px solid var(--border-soft); }
.appearance-section:last-child { border-bottom:0; margin-bottom:0; }
.appearance-section-head { display:grid; gap:3px; margin-bottom:12px; }
.appearance-section-head b { font-size:12px; }
.appearance-section-head span { color:var(--muted); font-size:10px; }
.theme-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.theme-card { border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:10px; display:grid; gap:9px; text-align:left; cursor:pointer; transition:.16s ease; }
.theme-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); }
.theme-card.active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.theme-card strong { font-size:11px; }
.theme-preview { height:82px; border-radius:10px; padding:10px; display:grid; grid-template-columns:25% 1fr; grid-template-rows:16px 1fr; gap:7px; border:1px solid rgba(127,127,127,.16); overflow:hidden; }
.theme-preview:before { content:''; grid-row:1/-1; border-radius:5px; opacity:.9; }
.theme-preview:after { content:''; border-radius:4px; opacity:.9; }
.theme-preview i { display:block; border-radius:5px; grid-column:2; }
.theme-preview i:nth-of-type(1) { height:20px; }
.theme-preview i:nth-of-type(2) { height:10px; width:76%; }
.theme-preview i:nth-of-type(3) { height:10px; width:55%; }
.theme-preview-light { background:#f5f6fa; }
.theme-preview-light:before { background:#ffffff; }
.theme-preview-light:after,.theme-preview-light i { background:#dedfe7; }
.theme-preview-dark { background:#0a0a0e; }
.theme-preview-dark:before { background:#13141a; }
.theme-preview-dark:after,.theme-preview-dark i { background:#2a2b34; }

.accent-palette { display:grid; grid-template-columns:repeat(12,30px); gap:8px; margin-bottom:14px; }
.accent-swatch { width:30px; height:30px; padding:0; border:2px solid transparent; border-radius:50%; background:transparent; cursor:pointer; display:grid; place-items:center; transition:.14s ease; }
.accent-swatch span { width:22px; height:22px; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),0 2px 7px rgba(0,0,0,.10); }
.accent-swatch:hover { transform:scale(1.08); }
.accent-swatch.active { border-color:var(--text); }
.accent-swatch.active span { box-shadow:inset 0 0 0 3px rgba(255,255,255,.72),0 2px 7px rgba(0,0,0,.12); }
.custom-accent-card { display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:center; padding:16px; border-radius:15px; border:1px solid var(--border-soft); background:var(--surface-2); }
.accent-wheel-wrap { display:grid; place-items:center; }
.accent-wheel { --wheel-size:126px; position:relative; width:var(--wheel-size); height:var(--wheel-size); border:0; padding:0; border-radius:50%; cursor:crosshair; background:conic-gradient(from 0deg,#f33,#ff0,#2ecc71,#00c8ff,#4169e1,#a855f7,#f33); box-shadow:inset 0 0 0 1px rgba(127,127,127,.20),0 8px 24px rgba(0,0,0,.08); }
.accent-wheel:before { content:''; position:absolute; inset:18px; border-radius:50%; background:var(--surface-2); box-shadow:0 0 0 1px var(--border-soft); }
.accent-wheel-center { position:absolute; inset:36px; border-radius:50%; box-shadow:inset 0 0 0 3px rgba(255,255,255,.62),0 3px 12px rgba(0,0,0,.14); z-index:2; pointer-events:none; }
.accent-wheel-marker { --hue:260; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; border:3px solid white; background:transparent; box-shadow:0 0 0 1px rgba(0,0,0,.30),0 2px 5px rgba(0,0,0,.25); transform:translate(-50%,-50%) rotate(calc(var(--hue) * 1deg)) translateY(-55px); z-index:3; pointer-events:none; }
.custom-accent-copy { min-width:0; display:grid; gap:5px; }
.custom-accent-copy b { font-size:12px; }
.custom-accent-copy > span { color:var(--muted); font-size:10px; line-height:1.5; }
.custom-accent-controls { display:flex; align-items:center; gap:9px; margin-top:8px; flex-wrap:wrap; }
.custom-accent-controls input[type='color'] { width:38px; height:34px; padding:2px; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; }
.custom-accent-controls code { min-width:78px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; padding:8px 9px; border:1px solid var(--border-soft); border-radius:9px; background:var(--surface); color:var(--text); }

@media (max-width:720px) {
  .preference-card { grid-template-columns:38px minmax(0,1fr); }
  .preference-card select { grid-column:1/-1; }
  .theme-card-grid { grid-template-columns:1fr 1fr; }
  .accent-palette { grid-template-columns:repeat(6,30px); }
  .custom-accent-card { grid-template-columns:1fr; }
  .accent-wheel { --wheel-size:116px; }
  .accent-wheel-marker { transform:translate(-50%,-50%) rotate(calc(var(--hue) * 1deg)) translateY(-50px); }
}


/* ===== Diarity v5.7 — compact masonry dashboard ===== */
@media (min-width:1051px) {
  .dashboard-widget-board.dashboard-packed {
    display:block;
    position:relative;
    min-height:1px;
    width:100%;
  }
  .dashboard-widget-board.dashboard-packed > [data-dashboard-widget] {
    position:absolute;
    min-width:0;
    margin:0;
    align-self:start;
    transition:left .18s ease, top .18s ease, width .18s ease, opacity .15s ease, transform .15s ease;
  }
  .dashboard-widget-board.dashboard-packed > .dashboard-widget-hidden {
    display:none !important;
  }
  .dashboard-widget-board.dashboard-packed.dashboard-edit-mode > .dashboard-widget-hidden.personalized-metrics {
    display:grid !important;
  }
  .dashboard-widget-board.dashboard-packed.dashboard-edit-mode > .card.dashboard-widget-hidden {
    display:block !important;
  }
  .dashboard-widget-board.dashboard-packed > .dashboard-dragging {
    z-index:20;
  }
}
@media (max-width:1050px) {
  .dashboard-widget-board.dashboard-packed {
    display:grid;
    height:auto !important;
  }
  .dashboard-widget-board.dashboard-packed > [data-dashboard-widget] {
    position:relative !important;
    width:auto !important;
    left:auto !important;
    top:auto !important;
  }
}

/* ===== Diarity v5.8 — profile studio & avatar cropper ===== */
.profile-preview-card {
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px;
  margin-bottom:18px;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent-soft) 42%,var(--surface)));
}
.profile-preview-avatar { flex:none; }
.profile-preview-avatar .avatar-photo,
.profile-preview-avatar .avatar-fallback { width:58px; height:58px; min-width:58px; font-size:17px; }
.profile-preview-copy { min-width:0; display:grid; gap:3px; }
.profile-preview-copy b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-preview-copy > span { color:var(--muted); font-size:10px; }
.profile-preview-copy p { margin:4px 0 0; max-width:520px; color:var(--muted); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.profile-settings-block { padding:18px 0; border-top:1px solid var(--border-soft); }
.profile-settings-block:first-of-type { border-top:0; padding-top:0; }
.profile-block-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:11px; }
.profile-block-head > div { display:grid; gap:4px; }
.profile-block-head b { font-size:12px; }
.profile-block-head span { color:var(--muted); font-size:10px; line-height:1.5; }
.avatar-dropzone {
  min-height:94px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  padding:13px;
  border:1px dashed color-mix(in srgb,var(--border) 82%,var(--accent));
  border-radius:15px;
  background:var(--surface-2);
  cursor:pointer;
  outline:none;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.avatar-dropzone:hover,.avatar-dropzone:focus-visible,.avatar-dropzone.drag-over {
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface-2));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft) 68%,transparent);
}
.avatar-drop-preview .avatar-photo,.avatar-drop-preview .avatar-fallback { width:66px; height:66px; min-width:66px; font-size:19px; }
.avatar-drop-copy { min-width:0; display:grid; gap:4px; }
.avatar-drop-copy b { font-size:12px; }
.avatar-drop-copy span { color:var(--muted); font-size:10px; line-height:1.5; }
.avatar-photo-actions { display:flex; align-items:center; gap:10px; margin-top:9px; min-height:30px; }
.avatar-photo-actions small { color:var(--muted); font-size:9.5px; }
.readonly-profile-field { min-height:42px; display:flex; align-items:center; padding:0 12px; border:1px solid var(--border-soft); border-radius:11px; background:var(--surface-2); color:var(--muted); font-size:12px; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field-label-row > span { color:var(--muted); font-size:9px; }
.email-profile-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:center; }
.email-profile-row .status-badge { white-space:nowrap; }
.email-verify-inline { margin-top:9px; }

.avatar-crop-layer {
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:18px;
  background:color-mix(in srgb,var(--modal-overlay) 92%,transparent);
  backdrop-filter:blur(8px);
  border-radius:inherit;
  animation:fade .14s ease;
}
.avatar-crop-dialog {
  width:min(680px,100%);
  max-height:calc(100vh - 70px);
  overflow:auto;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 30px 110px rgba(0,0,0,.35);
}
.avatar-crop-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:17px 18px; border-bottom:1px solid var(--border-soft); }
.avatar-crop-head > div { display:grid; gap:4px; }
.avatar-crop-head b { font-size:14px; }
.avatar-crop-head span { color:var(--muted); font-size:10px; }
.avatar-crop-body { display:grid; grid-template-columns:minmax(260px,360px) minmax(150px,1fr); gap:22px; align-items:center; padding:20px; }
.avatar-crop-stage {
  position:relative;
  width:min(360px,100%);
  aspect-ratio:1;
  overflow:hidden;
  border-radius:14px;
  background:#09090c;
  cursor:grab;
  touch-action:none;
  user-select:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.avatar-crop-stage.dragging { cursor:grabbing; }
.avatar-crop-stage > img,.avatar-crop-preview > img { position:absolute; left:50%; top:50%; max-width:none; max-height:none; pointer-events:none; user-select:none; }
.avatar-crop-shade { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 999px rgba(0,0,0,.34); opacity:.25; }
.avatar-crop-guide { position:absolute; inset:7%; border:1.5px solid rgba(255,255,255,.82); border-radius:50%; pointer-events:none; box-shadow:0 0 0 999px rgba(0,0,0,.20); }
.avatar-crop-side { display:grid; justify-items:center; text-align:center; gap:7px; }
.avatar-crop-preview { position:relative; width:116px; height:116px; overflow:hidden; border-radius:50%; background:#09090c; border:4px solid var(--surface); box-shadow:0 0 0 1px var(--border),0 12px 30px rgba(0,0,0,.16); }
.avatar-crop-side b { font-size:11px; margin-top:4px; }
.avatar-crop-side span { color:var(--muted); font-size:9.5px; line-height:1.5; max-width:180px; }
.avatar-crop-zoom { display:grid; grid-template-columns:18px minmax(0,1fr) 18px; gap:10px; align-items:center; padding:0 20px 18px; color:var(--muted); }
.avatar-crop-zoom input { width:100%; accent-color:var(--accent); }
.avatar-crop-footer { display:flex; justify-content:flex-end; gap:9px; padding:15px 18px; border-top:1px solid var(--border-soft); }

@media (max-width:700px) {
  .avatar-dropzone { grid-template-columns:auto minmax(0,1fr); }
  .avatar-dropzone > .btn { grid-column:1/-1; width:100%; }
  .avatar-crop-layer { padding:8px; }
  .avatar-crop-body { grid-template-columns:1fr; gap:16px; padding:14px; }
  .avatar-crop-stage { width:min(330px,100%); margin:auto; }
  .avatar-crop-side { grid-template-columns:auto minmax(0,1fr); justify-items:start; text-align:left; align-items:center; }
  .avatar-crop-preview { width:72px; height:72px; grid-row:1/3; }
  .avatar-crop-side span { max-width:none; }
  .email-profile-row { grid-template-columns:1fr; }
  .email-profile-row .status-badge { justify-self:start; }
}

.settings-modal { position:relative; }

/* ===== Diarity v5.9 — account center & profile save UX ===== */
.settings-panel-head-action { align-items:center; }
.profile-save-button { flex:none; min-width:112px; }
.profile-save-button:disabled { opacity:.62; cursor:default; box-shadow:none; }
.user-badge-button { cursor:pointer; transition:.15s ease; }
.user-badge-button:hover { border-color:var(--accent); background:var(--surface-hover); }

.account-center { display:grid; gap:16px; }
.account-hero { padding:22px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; overflow:hidden; position:relative; }
.account-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); }
.account-hero-avatar .avatar-photo,.account-hero-avatar .avatar-fallback { width:72px; height:72px; min-width:72px; font-size:21px; box-shadow:0 8px 26px rgba(0,0,0,.12); }
.account-hero-copy { min-width:0; }
.account-kicker { display:block; color:var(--accent); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px; }
.account-hero-copy h2 { margin:0; font-size:24px; letter-spacing:-.035em; }
.account-hero-copy p { margin:9px 0 0; color:var(--muted); font-size:11px; line-height:1.55; max-width:700px; }
.account-identity-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:7px; color:var(--muted); font-size:10px; }
.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.account-card { padding:18px; display:flex; flex-direction:column; min-height:190px; }
.account-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.account-card-head span:first-child { display:block; color:var(--muted); font-size:10px; font-weight:700; margin-bottom:5px; }
.account-card-head h3 { margin:0; font-size:17px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.account-card-icon { width:34px; height:34px; border:1px solid var(--border); background:var(--surface-2); color:var(--accent); border-radius:10px; display:grid; place-items:center; font-size:15px; flex:none; }
.account-card > p { margin:13px 0 18px; color:var(--muted); font-size:10px; line-height:1.6; flex:1; }
.account-card > .btn { align-self:flex-start; }
.account-activity { padding:0; overflow:hidden; }
.account-activity .section-head { padding:17px 18px; border-bottom:1px solid var(--border-soft); }
.account-activity-list { display:grid; }
.account-activity-item { display:grid; grid-template-columns:10px minmax(0,1fr); gap:12px; padding:13px 18px; border-bottom:1px solid var(--border-soft); align-items:start; }
.account-activity-item:last-child { border-bottom:0; }
.account-activity-dot { width:8px; height:8px; border-radius:999px; background:var(--accent); margin-top:5px; box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent); }
.account-activity-item > div { min-width:0; display:grid; gap:3px; }
.account-activity-item b { font-size:11px; }
.account-activity-item span,.account-activity-item small { color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.account-activity-item small { opacity:.82; }
.account-empty-line { padding:24px 18px; color:var(--muted); font-size:11px; text-align:center; }
.account-danger { padding:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-color:rgba(var(--danger-rgb),.22); background:linear-gradient(135deg,var(--card),var(--danger-soft)); }
.account-danger > div { min-width:0; }
.account-danger > div > span { color:var(--danger); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.account-danger h3 { margin:4px 0 6px; font-size:16px; }
.account-danger p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; max-width:660px; }
.username-input-wrap { position:relative; }
.username-input-wrap > span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:700; z-index:1; }
.username-input-wrap .input { padding-left:28px; }
.delete-account-warning { padding:14px; border:1px solid rgba(var(--danger-rgb),.2); background:var(--danger-soft); border-radius:12px; margin-bottom:16px; }
.delete-account-warning b { display:block; color:var(--danger); font-size:12px; }
.delete-account-warning p { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }

@media (max-width:760px){
  .settings-panel-head-action { align-items:flex-start; }
  .profile-save-button { min-width:0; }
  .account-hero { grid-template-columns:auto minmax(0,1fr); }
  .account-hero > .btn { grid-column:1/-1; width:100%; }
  .account-grid { grid-template-columns:1fr; }
  .account-danger { align-items:flex-start; flex-direction:column; }
  .account-danger .btn { width:100%; }
}
.settings-panel[data-settings-panel="profile"] .settings-panel-head-action { position:sticky; top:-1px; z-index:6; background:var(--card); padding:2px 0 12px; }

/* ===== Diarity v6.0 — administration + support ===== */
.support-nav:hover { color:var(--accent); background:var(--accent-soft); }
.support-nav .nav-icon-svg { color:inherit; }

.support-modal { display:grid; gap:16px; }
.support-modal > p { margin:0; color:var(--muted); line-height:1.65; font-size:13px; }
.support-channels { display:grid; gap:10px; }
.support-channel { display:grid; grid-template-columns:40px minmax(0,1fr) 24px; align-items:center; gap:12px; border:1px solid var(--border-soft); background:var(--surface-2); border-radius:14px; padding:13px 14px; transition:.15s ease; }
.support-channel:hover { background:var(--surface-hover); border-color:color-mix(in srgb,var(--border) 60%,var(--accent) 40%); transform:translateY(-1px); }
.support-channel-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); font-weight:850; }
.support-channel b,.support-channel span { display:block; }
.support-channel div span { margin-top:3px; color:var(--muted-2); font-size:11px; }
.support-channel-arrow { color:var(--muted-2); font-size:18px; text-align:center; }
.support-empty { text-align:center; padding:16px 10px 6px; display:grid; justify-items:center; gap:8px; }
.support-empty > span { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:var(--accent); background:var(--accent-soft); font-size:22px; }
.support-empty b { font-size:14px; }
.support-empty p { margin:0 0 5px; color:var(--muted); font-size:12px; max-width:390px; line-height:1.55; }
.auth-support-float { position:absolute; right:24px; bottom:22px; border:1px solid rgba(255,255,255,.18); background:rgba(18,18,26,.18); color:rgba(255,255,255,.78); backdrop-filter:blur(12px); border-radius:999px; min-height:36px; padding:0 13px; cursor:pointer; font-weight:700; font-size:11px; }
.auth-support-float:hover { color:white; background:rgba(255,255,255,.12); }

.admin-page-head { align-items:center; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.admin-stat { min-width:0; min-height:124px; border:1px solid var(--border-soft); border-radius:16px; background:var(--surface); padding:16px; position:relative; overflow:hidden; }
.admin-stat::after { content:''; position:absolute; width:90px; height:90px; top:-48px; right:-40px; border-radius:50%; background:rgba(var(--accent-rgb),.08); }
.admin-stat-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:11px; }
.admin-stat-icon { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; color:var(--accent); background:var(--surface-2); }
.admin-stat strong { display:block; margin-top:17px; font-size:26px; line-height:1; letter-spacing:-.04em; }
.admin-stat small { display:block; margin-top:7px; color:var(--muted-2); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.admin-insight-grid,.admin-bottom-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:16px; margin-bottom:16px; }
.admin-activity-card,.admin-project-card,.admin-audit-card,.admin-support-card { overflow:hidden; }
.admin-chart-legend { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted-2); font-size:10px; }
.admin-chart-legend span { display:flex; gap:5px; align-items:center; }
.admin-chart-legend i { width:7px; height:7px; border-radius:2px; display:block; background:var(--accent); }
.admin-chart-legend i.login { background:var(--success); }
.admin-chart { height:220px; padding:20px 18px 14px; display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:7px; align-items:end; background:linear-gradient(to top,var(--border-soft) 1px,transparent 1px) 0 0/100% 25%; }
.admin-chart-day { min-width:0; height:100%; display:grid; grid-template-rows:1fr 14px; gap:6px; align-items:end; }
.admin-chart-bars { height:100%; min-height:0; display:flex; justify-content:center; align-items:flex-end; gap:3px; }
.admin-chart-bars span { width:min(9px,38%); border-radius:4px 4px 2px 2px; background:var(--accent); }
.admin-chart-bars span.login { background:var(--success); opacity:.9; }
.admin-chart-day small { text-align:center; color:var(--muted-2); font-size:8px; white-space:nowrap; }

.admin-project-list { display:grid; padding:8px 18px 4px; }
.admin-project-list > div { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border-soft); font-size:12px; }
.admin-project-list > div:last-child { border-bottom:0; }
.admin-project-card > .btn { margin:10px 18px 18px; width:calc(100% - 36px); }

.admin-users-card { margin-bottom:16px; overflow:hidden; }
.admin-filters { display:flex; gap:7px; padding:10px 14px; overflow:auto; border-bottom:1px solid var(--border-soft); }
.admin-filter { flex:none; min-height:32px; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); border-radius:999px; padding:0 11px; cursor:pointer; font-size:10px; font-weight:700; }
.admin-filter:hover { color:var(--text); background:var(--surface-hover); }
.admin-filter.active { color:var(--accent); background:var(--accent-soft); border-color:rgba(var(--accent-rgb),.22); }
.mini-avatar-photo { background-size:cover; background-position:center; color:transparent; }

.admin-audit-list { display:grid; padding:7px 18px 12px; max-height:400px; overflow:auto; }
.admin-audit-item { display:grid; grid-template-columns:9px minmax(0,1fr); gap:10px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.admin-audit-item:last-child { border-bottom:0; }
.admin-audit-dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08); }
.admin-audit-item b,.admin-audit-item span,.admin-audit-item small { display:block; }
.admin-audit-item b { font-size:11px; }
.admin-audit-item span { margin-top:3px; color:var(--muted); font-size:10px; }
.admin-audit-item small { margin-top:4px; color:var(--muted-2); font-size:9px; }
.admin-support-form { display:grid; gap:12px; padding:16px 18px 18px; }
.admin-support-form .form-field { margin:0; }
.admin-support-form .btn { justify-self:start; }

@media(max-width:1280px){
  .admin-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px){
  .admin-insight-grid,.admin-bottom-grid { grid-template-columns:1fr; }
  .admin-chart { height:190px; }
}
@media(max-width:700px){
  .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-chart { gap:4px; padding-left:10px; padding-right:10px; }
  .auth-support-float { right:14px; bottom:14px; }
}
@media(max-width:430px){
  .admin-stat-grid { grid-template-columns:1fr; }
}

/* ===== Diarity v6.1 — UX hardening ===== */
.customize-layout { display:block; }
.customize-layout .module-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
.customize-page-head { margin-bottom:14px; }
.workspace-note { display:flex; align-items:center; gap:10px; margin-top:12px; padding:11px 13px; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface-2); color:var(--muted); font-size:11px; }
.workspace-note > span { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:850; font-size:10px; }
.workspace-note p { margin:0; line-height:1.45; }
.customize-footer { justify-content:flex-end; margin-top:10px; }
.sticky-explainer { display:none !important; }

.field-hint { display:block; margin-top:6px; color:var(--muted-2); font-size:10px; line-height:1.45; }
.field-hint.invalid { color:var(--danger); }
.field-hint.valid { color:var(--success); }
.auth-username-field .username-input-wrap { width:100%; }
.auth-username-field .username-input-wrap .input { min-width:0; }

/* Keep the complete navigation visible on normal desktop heights without a permanent scrollbar. */
.nav { overflow:hidden; scrollbar-width:none; }
.nav::-webkit-scrollbar { display:none; }
.sidebar.sidebar-dense { padding:16px 14px 12px; }
.sidebar.sidebar-dense .brand { padding:0 7px 14px; gap:10px; }
.sidebar.sidebar-dense .brand-mark { width:34px; height:34px; border-radius:10px; }
.sidebar.sidebar-dense .brand-mark svg { width:20px; height:20px; }
.sidebar.sidebar-dense .brand-subtitle { font-size:9px; }
.sidebar.sidebar-dense .nav { gap:2px; }
.sidebar.sidebar-dense .nav-item { min-height:36px; padding:0 10px; gap:10px; font-size:12px; }
.sidebar.sidebar-dense .nav-icon { width:20px; height:20px; font-size:15px; }
.sidebar.sidebar-dense .customize-link { margin-top:4px; padding-top:4px; }
.sidebar.sidebar-dense .sidebar-bottom { gap:4px; }
.sidebar.sidebar-dense .local-badge { padding:9px 10px; border-radius:11px; }

.sidebar.sidebar-ultra-dense { padding-top:12px; padding-bottom:10px; }
.sidebar.sidebar-ultra-dense .brand { padding-bottom:10px; }
.sidebar.sidebar-ultra-dense .brand-subtitle { display:none; }
.sidebar.sidebar-ultra-dense .nav-item { min-height:32px; font-size:11px; }
.sidebar.sidebar-ultra-dense .nav { gap:1px; }
.sidebar.sidebar-ultra-dense .sidebar-bottom .nav-item { min-height:32px; }
.sidebar.sidebar-ultra-dense .local-badge { padding:7px 9px; }
.sidebar.sidebar-ultra-dense .local-badge small { font-size:9px; }

/* Extremely short windows still scroll as a last-resort accessibility fallback. */
.sidebar.sidebar-scroll-fallback .nav { overflow-y:auto; scrollbar-width:thin; }
.sidebar.sidebar-scroll-fallback .nav::-webkit-scrollbar { display:block; width:5px; }

@media (max-width:900px) {
  .customize-layout .module-picker { grid-template-columns:1fr; }
  .sidebar.sidebar-dense,.sidebar.sidebar-ultra-dense { padding:26px 18px 18px; }
  .sidebar.sidebar-dense .brand,.sidebar.sidebar-ultra-dense .brand { padding:0 8px 28px; }
  .sidebar.sidebar-dense .brand-mark,.sidebar.sidebar-ultra-dense .brand-mark { width:38px; height:38px; }
  .sidebar.sidebar-ultra-dense .brand-subtitle { display:block; }
  .sidebar.sidebar-dense .nav-item,.sidebar.sidebar-ultra-dense .nav-item { min-height:44px; padding:0 12px; font-size:inherit; }
  .sidebar.sidebar-dense .nav,.sidebar.sidebar-ultra-dense .nav { gap:5px; overflow-y:auto; }
  .sidebar.sidebar-dense .sidebar-bottom,.sidebar.sidebar-ultra-dense .sidebar-bottom { gap:10px; }
  .sidebar.sidebar-dense .local-badge,.sidebar.sidebar-ultra-dense .local-badge { padding:12px; }
}

/* ===== Diarity v6.2 — full-size navigation, Noirly branding, help & onboarding ===== */
.sidebar { overflow: visible; padding-top: 22px; padding-bottom: 14px; }
.brand { padding-bottom: 20px; }
.brand-owner-line { font-size: 10.5px; }
.brand-owner-line span { color: var(--text); font-weight: 750; }

/* Keep navigation touch targets comfortable. Overflow moves into “More” instead of shrinking them. */
.nav { overflow: visible !important; gap: 5px !important; min-height: 0; }
.nav-item { min-height: 42px; font-size: 13px; }
.nav-more-trigger { position: relative; }
.nav-more-trigger .nav-icon { font-size: 13px; letter-spacing: 1px; }
.nav-more-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(var(--accent-rgb),.10); color: var(--accent); font-size: 10px; font-weight: 850; }
.nav-overflow-menu { position: absolute; left: calc(100% - 8px); top: 86px; width: 236px; max-height: calc(100vh - 110px); overflow: auto; padding: 8px; border-radius: 15px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 55px rgba(0,0,0,.20); z-index: 80; }
.nav-overflow-menu[hidden] { display:none; }
.nav-overflow-menu .nav-item { color: var(--muted); min-height: 42px; }
.nav-overflow-menu .nav-item:hover { color: var(--text); }
.nav-overflow-menu .customize-link { margin-top:0; padding-top:0; border-top:0; }

.sidebar-bottom { position: relative; margin-top: auto; display:block; }
.sidebar-account { width:100%; border:1px solid var(--border-soft); background:var(--surface); min-height:54px; padding:7px 9px; border-radius:14px; display:grid; grid-template-columns:36px minmax(0,1fr) 24px; align-items:center; gap:9px; cursor:pointer; text-align:left; transition:.16s ease; }
.sidebar-account:hover, .sidebar-account[aria-expanded="true"] { background:var(--surface-hover); border-color:var(--border); }
.sidebar-mini-avatar { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.12); color:var(--accent); font-weight:850; font-size:12px; background-size:cover; background-position:center; }
.sidebar-mini-avatar.has-photo { color:transparent; }
.sidebar-account-copy { min-width:0; display:block; }
.sidebar-account-copy b { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-account-copy small { display:block; color:var(--muted-2); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sidebar-account-chevron { color:var(--muted-2); font-size:12px; text-align:center; letter-spacing:1px; }
.sidebar-account-menu { position:absolute; left:0; right:0; bottom:62px; padding:7px; border:1px solid var(--border); background:var(--surface); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.20); z-index:85; }
.sidebar-account-menu[hidden] { display:none; }
.sidebar-account-menu button { width:100%; min-height:39px; border:0; border-radius:9px; background:transparent; display:grid; grid-template-columns:24px 1fr; align-items:center; gap:8px; padding:0 9px; text-align:left; cursor:pointer; color:var(--muted); }
.sidebar-account-menu button:hover { background:var(--surface-2); color:var(--text); }
.sidebar-account-menu button span { display:grid; place-items:center; color:var(--muted-2); }
.sidebar-account-menu button b { font-size:12px; font-weight:680; }
.sidebar-account-menu button.danger:hover { color:var(--danger); background:var(--danger-soft); }
.sidebar-account-menu-separator { height:1px; background:var(--border-soft); margin:5px 4px; }

/* Old density classes are intentionally neutralized in v6.2. */
.sidebar.sidebar-dense, .sidebar.sidebar-ultra-dense { padding:22px 18px 14px; }
.sidebar.sidebar-dense .brand, .sidebar.sidebar-ultra-dense .brand { padding:0 8px 20px; gap:12px; }
.sidebar.sidebar-dense .brand-mark, .sidebar.sidebar-ultra-dense .brand-mark { width:38px; height:38px; border-radius:12px; }
.sidebar.sidebar-dense .brand-mark svg, .sidebar.sidebar-ultra-dense .brand-mark svg { width:23px; height:23px; }
.sidebar.sidebar-dense .brand-subtitle, .sidebar.sidebar-ultra-dense .brand-subtitle { display:block; font-size:10.5px; }
.sidebar.sidebar-dense .nav-item, .sidebar.sidebar-ultra-dense .nav-item, .sidebar.sidebar-ultra-dense .sidebar-bottom .nav-item { min-height:42px; padding:0 12px; gap:12px; font-size:13px; }
.sidebar.sidebar-dense .nav-icon, .sidebar.sidebar-ultra-dense .nav-icon { width:22px; height:22px; font-size:17px; }

/* Help center / FAQ */
.help-center { display:grid; gap:16px; }
.help-brand { display:flex; align-items:center; gap:12px; padding:13px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px; }
.help-brand-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--accent); color:white; font-size:20px; font-weight:900; box-shadow:0 0 0 5px rgba(var(--accent-rgb),.08); }
.help-brand > div:last-child { display:grid; gap:3px; }
.help-brand b { display:flex; align-items:center; gap:7px; font-size:15px; }
.help-brand span { color:var(--muted); font-size:11px; }
.help-brand a { color:var(--accent); font-weight:700; }
.help-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; background:var(--surface-2); border-radius:12px; }
.help-tabs button { min-height:36px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-weight:700; font-size:12px; }
.help-tabs button.active { background:var(--surface); color:var(--text); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.help-panel { display:none; }
.help-panel.active { display:block; }
.help-guide-card { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px; margin-bottom:12px; border:1px solid rgba(var(--accent-rgb),.18); background:rgba(var(--accent-rgb),.06); border-radius:13px; }
.help-guide-card > div { display:grid; gap:4px; }
.help-guide-card b { font-size:12px; }
.help-guide-card span, .help-section-copy { color:var(--muted); font-size:11px; line-height:1.55; }
.faq-list { display:grid; gap:7px; }
.faq-item { border:1px solid var(--border-soft); border-radius:12px; background:var(--surface); overflow:hidden; }
.faq-item summary { list-style:none; min-height:45px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 13px; cursor:pointer; font-size:12px; font-weight:700; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span { color:var(--muted-2); transition:.16s ease; }
.faq-item[open] summary span { transform:rotate(45deg); color:var(--accent); }
.faq-item p { margin:0; padding:0 13px 13px; color:var(--muted); font-size:11px; line-height:1.65; }
.help-footer { border-top:1px solid var(--border-soft); padding-top:12px; display:flex; justify-content:space-between; gap:12px; color:var(--muted-2); font-size:10px; }
.help-footer a:hover { color:var(--accent); }

/* Product ownership / copyright on auth screens */
.auth-page { position:relative; padding-bottom:46px; }
.auth-product-footer { position:absolute; left:26px; right:26px; bottom:14px; display:flex; align-items:center; gap:14px; color:var(--muted-2); font-size:10px; z-index:3; }
.auth-product-footer span:nth-child(2) { margin-left:auto; }
.auth-product-footer a { color:var(--text); font-weight:700; }
.auth-product-footer button { border:0; background:transparent; color:var(--muted); padding:0; cursor:pointer; font:inherit; }
.auth-product-footer button:hover, .auth-product-footer a:hover { color:var(--accent); }

/* Optional first-run guide */
.product-tour-root { position:fixed; inset:0; z-index:200; pointer-events:none; }
.product-tour-backdrop { position:absolute; inset:0; background:rgba(8,9,13,.58); backdrop-filter:blur(2px); pointer-events:auto; }
.product-tour-card { position:absolute; right:28px; bottom:28px; width:min(410px,calc(100vw - 32px)); padding:20px; border-radius:18px; border:1px solid var(--border); background:var(--surface); box-shadow:0 26px 80px rgba(0,0,0,.35); pointer-events:auto; }
.product-tour-card h3 { margin:15px 0 7px; font-size:20px; letter-spacing:-.03em; }
.product-tour-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.tour-progress { display:flex; justify-content:space-between; align-items:center; color:var(--muted-2); font-size:10px; font-weight:750; }
.tour-progress > div { display:flex; gap:4px; }
.tour-progress i { width:18px; height:3px; border-radius:9px; background:var(--border); }
.tour-progress i.active { background:var(--accent); }
.tour-actions { margin-top:18px; display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center; }
.tour-target { position:relative !important; z-index:202 !important; box-shadow:0 0 0 4px rgba(var(--accent-rgb),.28),0 0 0 9999px rgba(0,0,0,0) !important; border-radius:14px; }

@media (max-width:900px) {
  .nav-overflow-menu { display:none !important; }
  .sidebar { overflow:hidden; }
  .sidebar-account-menu { bottom:62px; }
  .auth-product-footer { position:static; padding:12px 18px 18px; flex-wrap:wrap; }
  .auth-product-footer span:nth-child(2) { margin-left:0; }
  .product-tour-card { left:16px; right:16px; bottom:16px; width:auto; }
}
@media (max-width:520px) {
  .help-footer { flex-direction:column; }
  .help-guide-card { align-items:flex-start; flex-direction:column; }
  .tour-actions { grid-template-columns:auto 1fr auto; }
  .tour-actions [data-tour-back] { grid-column:1; grid-row:2; }
  .tour-actions [data-tour-next] { grid-column:3; grid-row:2; }
}
@media (max-width:900px) {
  .sidebar { overflow-y:auto; overflow-x:hidden; }
}
.sidebar.sidebar-emergency-scroll { overflow-y:auto; overflow-x:visible; }

/* Diarity v6.3 — admin email delivery */
.admin-project-actions{display:flex;gap:10px;flex-wrap:wrap}
.admin-mail-card{min-width:0}
.admin-mail-summary{display:grid;gap:10px;margin:4px 0 16px}
.admin-mail-summary>div{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.admin-mail-summary span{color:var(--muted);font-size:13px}
.admin-mail-summary b{font-size:13px;text-align:right;overflow-wrap:anywhere}
.admin-mail-actions{display:grid;gap:10px}
.admin-mail-actions form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.admin-mail-result{min-height:20px;margin-top:10px;font-size:13px;color:var(--muted)}
.admin-mail-result.error{color:var(--danger)}
@media (max-width:720px){.admin-mail-actions form{grid-template-columns:1fr}.admin-mail-summary>div{display:block}.admin-mail-summary b{display:block;text-align:left;margin-top:4px}}

/* ===== Diarity v6.4 — readability, onboarding spotlight and admin polish ===== */
/* Navigation is intentionally comfortable. When height is limited, modules move to “More”. */
.app-shell { grid-template-columns: 264px 1fr; }
.sidebar { width:264px; padding:24px 18px 16px; }
.brand { padding:0 8px 22px; }
.brand-name { font-size:17px; letter-spacing:.045em; }
.brand-owner-line { font-size:11px; }
.nav { gap:6px !important; }
.nav-item,
.sidebar.sidebar-dense .nav-item,
.sidebar.sidebar-ultra-dense .nav-item,
.sidebar.sidebar-ultra-dense .sidebar-bottom .nav-item {
  min-height:47px;
  padding:0 13px;
  gap:12px;
  border-radius:12px;
  font-size:14px;
}
.nav-icon,
.sidebar.sidebar-dense .nav-icon,
.sidebar.sidebar-ultra-dense .nav-icon { width:24px; height:24px; font-size:18px; }
.nav-icon-svg svg { width:19px; height:19px; }
.nav-overflow-menu { width:250px; }
.nav-overflow-menu .nav-item { min-height:45px; font-size:13.5px; }
.sidebar-account { min-height:60px; padding:8px 10px; grid-template-columns:40px minmax(0,1fr) 24px; gap:10px; }
.sidebar-mini-avatar { width:40px; height:40px; border-radius:12px; font-size:13px; }
.sidebar-account-copy b { font-size:13px; }
.sidebar-account-copy small { font-size:11px; }
.sidebar-account-menu { bottom:68px; }
.sidebar-account-menu button { min-height:42px; }
.sidebar-account-menu button b { font-size:13px; }

/* Bring back a slightly more relaxed readable scale in the product UI. */
.page-head p { font-size:14px; }
.card-title { font-size:15px; }
.card-subtitle { font-size:12px; }
.metric-top { font-size:13px; }
.metric-foot { font-size:12px; }
.quick-action b { font-size:14px; }
.quick-action small { font-size:12px; }
.btn { font-size:13.5px; }

/* Tour spotlight: four independent shades create a true hole even for elements inside
   the fixed sidebar/topbar stacking contexts. */
.product-tour-root { z-index:200; }
.product-tour-backdrop,
.product-tour-shade { position:absolute; background:rgba(8,9,13,.58); backdrop-filter:blur(2px); pointer-events:auto; z-index:1; }
.product-tour-backdrop { inset:0; }
.product-tour-highlight { position:fixed; z-index:2; pointer-events:none; border-radius:15px; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.75),0 10px 42px rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.18); transition:left .12s ease,top .12s ease,width .12s ease,height .12s ease; }
.product-tour-card { z-index:3; }
.tour-target { position:relative; border-radius:14px; }

/* Security history stays compact; older events are expanded four at a time. */
.account-activity-item b { font-size:12px; }
.account-activity-item span,.account-activity-item small { font-size:11px; }
.account-activity-more { padding:12px 18px 16px; border-top:1px solid var(--border-soft); display:flex; justify-content:center; }
.account-activity-more .btn { min-width:150px; }

/* Admin cards: restore proper inner spacing and keep controls inside their cards. */
.admin-project-actions { padding:12px 18px 18px; margin-top:4px; border-top:1px solid var(--border-soft); display:flex; gap:10px; flex-wrap:wrap; }
.admin-project-actions .btn { flex:1 1 150px; min-width:0; }
.admin-mail-summary { display:grid; gap:0; margin:0; padding:8px 18px 2px; }
.admin-mail-summary>div { min-height:50px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.admin-mail-summary>div:last-child { border-bottom:0; }
.admin-mail-summary span { font-size:12px; }
.admin-mail-summary b { font-size:12px; max-width:62%; }
.admin-mail-actions { padding:10px 18px 18px; border-top:1px solid var(--border-soft); gap:10px; }
.admin-mail-actions>button { width:100%; }
.admin-mail-actions form { width:100%; }
.admin-mail-result { min-height:0; margin:0; padding:0 18px 14px; font-size:12px; }
.admin-project-list > div { font-size:13px; }

@media (max-width:900px) {
  .app-shell { grid-template-columns:264px 1fr; }
  .sidebar-account-menu { bottom:68px; }
}
@media (max-width:760px) {
  .app-shell { display:block; }
  .sidebar { width:min(290px,86vw); }
}
@media (max-width:720px) {
  .admin-project-actions { flex-direction:column; }
  .admin-project-actions .btn { flex:auto; width:100%; }
  .admin-mail-summary>div { display:grid; gap:4px; }
  .admin-mail-summary b { max-width:none; text-align:left; }
}
/* v6.4 spotlight owns the highlight; do not let old target z-index leak across stacking contexts. */
.tour-target { z-index:auto !important; box-shadow:none !important; }


/* ===== Diarity v6.4.1 — account email + settings scroll hotfix ===== */
.settings-modal .modal-body { min-height:0; }
.settings-modal .settings-layout {
  height:min(720px,calc(100vh - 106px));
  min-height:0;
  max-height:calc(100vh - 106px);
  overflow:hidden;
}
.settings-modal .settings-content {
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:36px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.settings-panel[data-settings-panel="profile"] { padding-bottom:12px; }
.settings-panel[data-settings-panel="profile"] .profile-settings-block:last-child { padding-bottom:18px; }
.email-verify-inline { margin-bottom:4px; }
@media (max-height:760px) and (min-width:721px) {
  .modal-backdrop { padding:12px; }
  .settings-modal .settings-layout { height:calc(100vh - 92px); max-height:calc(100vh - 92px); }
}
@media (max-width:720px) {
  .settings-modal .settings-layout { height:min(760px,calc(100vh - 92px)); max-height:calc(100vh - 92px); }
  .settings-modal .settings-content { padding-bottom:30px; }
}


/* ===== Diarity v6.5 — email verification polish ===== */
.email-verify-inline{display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin-top:12px;margin-bottom:8px;white-space:normal;max-width:100%}
.verify-email-notice{margin:14px 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--danger) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--danger) 25%,var(--line));}

/* v6.8 beta launch */
.sidebar-account-version{padding:7px 12px 3px;font-size:11px;color:var(--muted-2);letter-spacing:.02em}.sidebar-account-menu button{position:relative}.menu-new-dot{width:7px;height:7px;border-radius:999px;background:var(--accent);margin-left:auto;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}
.help-button.has-update{position:relative}.help-button.has-update:after{content:"";position:absolute;right:6px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--panel)}
.help-tabs-wrap{flex-wrap:wrap}.release-list{display:grid;gap:12px}.release-item{border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--panel-soft)}.release-item.current{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}.release-item-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.release-item-head div{display:grid;gap:3px}.release-item-head span,.release-item-head time{font-size:12px;color:var(--muted)}.release-item ul{margin:12px 0 0;padding-left:20px;color:var(--muted);display:grid;gap:7px}.whats-new-modal{display:grid;gap:16px}.release-toast button{align-self:flex-start;margin-top:2px;padding:0;color:var(--accent)}
.feedback-intro{margin-bottom:16px}.feedback-intro p{margin:5px 0 0;color:var(--muted)}.feedback-form{display:grid;gap:14px}.feedback-meta{font-size:12px;color:var(--muted)}.feedback-result:empty{display:none}.admin-feedback-card{margin-top:16px}.admin-feedback-list{display:grid}.admin-feedback-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:13px 16px;border-top:1px solid var(--border)}.admin-feedback-item:first-child{border-top:0}.admin-feedback-copy{display:grid;gap:3px;min-width:0}.admin-feedback-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-feedback-copy span{font-size:12px;color:var(--muted)}.feedback-type{font-size:11px;font-weight:700;padding:5px 8px;border-radius:999px;background:var(--panel-soft);border:1px solid var(--border)}.feedback-type.bug{color:#e85683}.feedback-type.idea{color:var(--accent)}.feedback-admin-detail{display:grid;gap:16px}.feedback-message{padding:14px;border-radius:14px;background:var(--panel-soft);border:1px solid var(--border);line-height:1.55}.feedback-page{font-size:12px;color:var(--muted)}.feedback-page code{color:var(--text)}
.system-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}.system-screen-card{width:min(520px,100%);border:1px solid var(--border);border-radius:24px;background:var(--panel);padding:30px;box-shadow:var(--shadow);text-align:center}.system-screen-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px;background:var(--accent);color:white;font-size:28px;font-weight:800}.system-screen-card h1{font-size:28px;margin:15px 0 8px}.system-screen-card p{color:var(--muted);line-height:1.55}.system-screen-actions,.empty-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.system-screen-card small,.error-request-id{display:block;margin-top:18px;color:var(--muted-2);font-size:11px}.error-state-card .empty{padding:54px 20px}
@media(max-width:760px){.admin-feedback-item{grid-template-columns:auto minmax(0,1fr)}.admin-feedback-item>.status-badge,.admin-feedback-item>.btn{grid-column:2}.system-screen-card{padding:24px}.system-screen-card h1{font-size:23px}}