.area-admin { --radius-xs: 2px; --radius-sm: 3px; --radius: 4px; --radius-lg: 4px; --radius-xl: 4px; --radius-pill: 2px; --shadow-xs: none; --shadow-sm: none; --shadow: 0 2px 8px rgba(17, 19, 24, .12); --shadow-lg: 0 8px 24px rgba(17, 19, 24, .18); }
.area-portal { --radius-xs: 3px; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 8px; --radius-pill: 4px; --shadow-xs: none; --shadow-sm: 0 1px 2px rgba(17, 19, 24, .05); }

html:not([data-theme="dark"]) .area-admin {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eef0f3; --surface-hover: #f5f7fa; --head-bg: #f7f8fa;
  --border: #dcdfe4; --border-soft: #eceef1; --border-strong: #b9bec7;
  --text: #16181d; --text-2: #4b5260; --text-3: #6b7280;
  --primary: #3730a3; --primary-hover: #2e2a87; --primary-soft: #eef0fb; --primary-ring: rgba(55, 48, 163, .22);
  --accent: #6b7280; --accent-soft: #f3f4f6;
  --male: #4b5260; --female: #4b5260; --male-soft: #eef0f3; --female-soft: #eef0f3;
  --sidebar-bg: #ffffff; --sidebar-border: #dcdfe4; --sidebar-active: #eef1f5; --sidebar-text: #4b5260; --sidebar-muted: #8a909b;
  --green: #1a7f37; --amber: #9a6700; --red: #c62828;
}
html:not([data-theme="dark"]) .area-portal {
  --bg: #f7f7fb; --surface: #ffffff; --surface-2: #fafaff; --surface-3: #f1f0f9; --head-bg: #fafaff;
  --border: #e5e4f0; --border-soft: #efeef6; --border-strong: #cdcbe0;
  --text: #17161f; --text-2: #434256; --text-3: #6c6b80;
  --primary: #5b45f0; --primary-hover: #4a34dc; --primary-soft: #f0edff; --primary-ring: rgba(91, 69, 240, .22);
  --sidebar-bg: #ffffff; --sidebar-border: #e5e4f0; --sidebar-active: #f0edff; --sidebar-text: #3f3e52; --sidebar-muted: #8a89a0;
  --pt-avatar: #efecff; --pt-avatar-ink: #4b3bcb; --pt-avatar-line: #e1dcfd;
}
html:not([data-theme="dark"]) body.area-admin, html:not([data-theme="dark"]) body.area-portal { background: var(--bg); }

.area-admin .topbar, .area-admin .sidebar { border-radius: 0; }
.area-admin .btn-primary, .area-portal .btn-primary { box-shadow: none; }
.area-admin .btn-primary:active { background: var(--primary-hover); }
.area-admin .card, .area-admin .rg-main, .area-admin .rl { box-shadow: none; }
.area-admin .modal { border-radius: 6px; }
.area-admin .menu { box-shadow: var(--shadow); }

.area-admin .nav-item { border-radius: var(--radius-sm); }
.area-admin .nav-item.active { background: var(--sidebar-active); color: var(--text); font-weight: 600; }
.area-admin .nav-item.active::before { content: ""; position: absolute; inset-inline-start: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--primary); }
.area-admin .nav-item.active:dir(rtl)::before { border-radius: 2px 0 0 2px; }
.area-admin .nav-item.active .i { color: var(--text); }
.area-admin .nav-item .badge-count { background: var(--surface-3); color: var(--text-2); }
.area-admin .nav-item.active .badge-count { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.area-admin .shell.collapsed .nav-item.active::before { inset-inline-start: -12px; }

.area-admin .page-head h1, .area-admin .rg-head h1 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.area-portal .page-head h1, .area-portal .rg-head h1 { font-size: 22px; line-height: 30px; font-weight: 600; }

.area-admin :is(.badge-green, .badge-blue, .badge-violet, .badge-rose, .badge-amber, .badge-red, .badge-teal, .badge-gray, .badge-brand) { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
.area-admin .badge-green { --tone: var(--green); }
.area-admin .badge-blue { --tone: var(--blue); }
.area-admin .badge-violet { --tone: var(--violet); }
.area-admin .badge-rose { --tone: var(--rose); }
.area-admin .badge-amber { --tone: var(--amber); }
.area-admin .badge-red { --tone: var(--red); color: var(--red); }
.area-admin .badge-teal { --tone: var(--teal); }
.area-admin .badge-gray { --tone: #9aa1ab; }
.area-admin .badge-brand { --tone: var(--primary); }
.area-admin :is(.badge-green, .badge-blue, .badge-violet, .badge-rose, .badge-amber, .badge-red, .badge-teal, .badge-gray, .badge-brand)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex: none; }
.area-admin :is(.badge-green, .badge-blue, .badge-violet, .badge-rose, .badge-amber, .badge-red, .badge-teal, .badge-gray, .badge-brand):has(> .dot)::before { content: none; }
.area-admin .badge .dot { background: var(--tone, currentColor); }

.area-admin .cd-hero .ds-mono { width: 64px; height: 64px; font-size: 24px; }
.area-admin .cd-hero .ds-name { font-family: var(--font-he); font-size: 28px; font-weight: 600; line-height: 1.2; }
.area-admin .cd-hero .ds-name .ln { font-weight: 700; }
.area-admin .cd-hero .ds-head { padding: 22px 24px 18px; gap: 22px; }
.area-admin .cd-hero .ds-id { gap: 18px; }
.area-admin .cd-hero .ds-lineage { font-size: 15px; }
.area-admin .ds-chip { border-radius: var(--radius-xs); }
.area-admin .cd-hero .ds-fact { padding: 12px 20px 13px; }
.area-admin .cd-hero .ds-fact-value { font-size: 15px; }

.area-portal .nav-item.active { color: var(--primary); }
.area-portal .nav-item.active::before { content: ""; position: absolute; inset-inline-start: -8px; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.area-portal .nav-item.active:dir(rtl)::before { border-radius: 3px 0 0 3px; }
.area-portal .shell.collapsed .nav-item.active::before { inset-inline-start: -12px; }
html:not([data-theme="dark"]) .area-portal :is(.rg-av, .pk-photo, .pk-sugg-av) { background: var(--pt-avatar); color: var(--pt-avatar-ink); box-shadow: inset 0 0 0 1px var(--pt-avatar-line); }
.area-portal .rg-mode { background: var(--surface); }
.area-portal .rg-mode a.on { background: var(--primary-soft); color: var(--primary); box-shadow: none; }
.area-portal .rg-mode a.on .i { color: var(--primary); }
.area-portal .rg-view.on { color: var(--primary); }
.area-portal .rg-view-n { background: var(--primary-soft); color: var(--primary); }
.area-portal .rg-view.on .rg-view-n { background: var(--primary); color: #fff; }
.area-portal .rl-gender input:checked + span { background: var(--primary); color: #fff; box-shadow: none; }
.area-portal .rl-gender input:checked + span em { color: rgba(255, 255, 255, .82); }
.area-portal .rl-preset.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.area-portal :is(.rl-badge, .rl-facet-n) { background: var(--primary); color: #fff; }
.area-portal .rg-layout:not(.rail-closed) .rg-rail-btn { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); color: var(--primary); }
.area-portal .rg-pages .cur { background: var(--primary); color: #fff; }
.area-portal .rg-pages a:hover { background: var(--primary-soft); color: var(--primary); }
.area-portal .rg-chips { background: var(--surface); }
.area-portal .rg-chip { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 18%, var(--border)); }
.area-portal .rg-chip strong { color: var(--text); }
.area-portal .rg tbody tr:hover td { background: #faf9ff; }
.area-portal .rg-person:hover { color: var(--primary); }
.area-portal .rg-tag { background: var(--surface); }
.area-portal .rg-head-sub b { color: var(--primary); }
.area-portal .pk-tab.active { color: var(--primary); }
.area-portal .pk-sugg-box { background: #f7f5ff; border-color: #ebe7fe; }
.area-portal .pk-sugg-box .pk-h { color: var(--primary); }
.area-portal .pk-count { background: var(--primary-soft); color: var(--primary); }