/*!
 * HjemArkiv Design System 1.0
 * Visual layer only. Keep behavior, data attributes and interaction hooks intact.
 */

:root {
  --hj-navy-950: #041a35;
  --hj-navy-900: #06244a;
  --hj-navy-800: #0a3567;
  --hj-blue-700: #1268bd;
  --hj-blue-600: #1d7fe0;
  --hj-blue-500: #3d9bf0;
  --hj-blue-100: #e8f3fd;
  --hj-blue-050: #f4f9fe;
  --hj-green-500: #86c82f;
  --hj-green-700: #39731a;
  --hj-ink: #102b4b;
  --hj-muted: #607893;
  --hj-border: #d5e2ef;
  --hj-surface: #ffffff;
  --hj-surface-soft: #f4f8fc;
  --hj-danger: #b4232d;
  --hj-danger-soft: #fff0f1;
  --hj-warning: #996000;
  --hj-warning-soft: #fff6df;
  --hj-success: #287342;
  --hj-success-soft: #edf8ef;
  --hj-radius-sm: 10px;
  --hj-radius-md: 16px;
  --hj-radius-lg: 22px;
  --hj-radius-xl: 28px;
  --hj-shadow-sm: 0 2px 8px rgba(9, 48, 86, .06);
  --hj-shadow-md: 0 12px 30px rgba(9, 48, 86, .10);
  --hj-shadow-lg: 0 22px 54px rgba(9, 48, 86, .14);
  --hj-focus: 0 0 0 3px rgba(29, 127, 224, .23);
  --hj-content-width: 1120px;
}

/* ── HjemArkiv Icon System 1.0 ───────────────────────────────────────────── */
.hj-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.18em;
  color: currentColor;
  stroke: currentColor;
  pointer-events: none;
}

button .hj-icon,
[data-i18n] > .hj-icon {
  margin-inline-end: .38em;
}

button.icon .hj-icon,
button.icon-btn .hj-icon,
.heading-icon .hj-icon,
.theme-choice-check .hj-icon,
.hlang-check .hj-icon {
  margin-inline-end: 0;
}

.heading-icon,
.method-icon,
.eso-icon,
.policy-icon,
.item-doc-icon,
.document-icon,
.search-result-icon,
.dash-alert-icon,
.privacy-security-mark,
.inv-field-icon,
.policy-type-icon,
.policy-doc-icon,
.settings-list > div > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.heading-icon .hj-icon,
.method-icon .hj-icon,
.eso-icon .hj-icon,
.policy-icon .hj-icon,
.item-doc-icon .hj-icon,
.document-icon .hj-icon,
.search-result-icon .hj-icon,
.dash-alert-icon .hj-icon,
.privacy-security-mark .hj-icon,
.inv-field-icon .hj-icon,
.policy-type-icon .hj-icon,
.policy-doc-icon .hj-icon {
  width: 1em;
  height: 1em;
}

.app-nav .nav-tab > span:first-child .hj-icon {
  width: 1.3em;
  height: 1.3em;
  margin: 0;
}

.upload-box > span .hj-icon,
.empty-state .hj-icon {
  width: 1.5em;
  height: 1.5em;
}

.warranty-status .hj-icon,
.ai-status-active .hj-icon,
.theme-choice-check .hj-icon,
.hlang-check .hj-icon {
  width: 1em;
  height: 1em;
}

html[data-hj-theme="dark"] #appView .hj-icon {
  color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .smart-orb .hj-icon,
  .ai-avatar .hj-icon {
    transition: transform .2s ease;
  }
}

/* Signed-in theme tokens. The existing theme preference remains authoritative. */
html[data-hj-theme="light"] body:has(#appView:not(.hidden)),
html[data-hj-theme="light"] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) {
  --hj-page: #edf4fa;
  --hj-page-glow: #e0effc;
  --hj-ink-active: var(--hj-ink);
  --hj-muted-active: var(--hj-muted);
  --hj-border-active: var(--hj-border);
  --hj-surface-active: var(--hj-surface);
  --hj-surface-soft-active: var(--hj-surface-soft);
  --hj-header: var(--hj-navy-900);
  --hj-header-copy: #f6fbff;
  --hj-nav: #ffffff;
}

html[data-hj-theme="dark"] body:has(#appView:not(.hidden)),
html[data-hj-theme="dark"] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) {
  --hj-page: #061a33;
  --hj-page-glow: #0c3157;
  --hj-ink-active: #f3f8ff;
  --hj-muted-active: #adc1d8;
  --hj-border-active: rgba(165, 201, 235, .22);
  --hj-surface-active: #0c2a4c;
  --hj-surface-soft-active: #10365f;
  --hj-header: #041a35;
  --hj-header-copy: #f6fbff;
  --hj-nav: #092444;
}

/* App canvas and type */
html[data-hj-theme] body:has(#appView:not(.hidden)),
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--hj-page-glow) 86%, transparent), transparent 34rem),
    linear-gradient(180deg, var(--hj-page) 0%, var(--hj-page) 100%);
  color: var(--hj-ink-active);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) main,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) main {
  padding-top: 28px;
  padding-bottom: 88px;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .shell,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .shell {
  width: min(100% - 32px, var(--hj-content-width));
  max-width: var(--hj-content-width);
}

html[data-hj-theme] #appView h1,
html[data-hj-theme] #appView h2,
html[data-hj-theme] #appView h3,
html[data-hj-theme] #appView h4 {
  color: var(--hj-ink-active);
  letter-spacing: -.025em;
}

html[data-hj-theme] #appView p,
html[data-hj-theme] #appView .muted,
html[data-hj-theme] #appView .field-help,
html[data-hj-theme] #appView small {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #appView .eyebrow {
  color: var(--hj-blue-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

html[data-hj-theme="dark"] #appView .eyebrow {
  color: #80bdf2;
}

/* Header */
html[data-hj-theme] body:has(#appView:not(.hidden)) header,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) header {
  position: sticky;
  top: 0;
  background: var(--hj-header) !important;
  border-bottom: 1px solid rgba(156, 202, 244, .20) !important;
  box-shadow: 0 8px 24px rgba(2, 22, 47, .18);
  color: var(--hj-header-copy);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) header .header-inner,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) header .header-inner {
  min-height: 76px;
  padding-top: 0;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-lockup,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-lockup {
  gap: 12px;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-symbol,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-symbol {
  color: #fff;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .24));
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-eyebrow,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-eyebrow {
  color: #9fc9eb;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-name,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-name {
  color: #fff;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-name span:last-child,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-name span:last-child {
  color: #63b1f7;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-tagline,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-tagline {
  color: var(--hj-green-500);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) header #homeLogoBtn,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) header #homeLogoBtn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) header #homeLogoBtn:hover,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) header #homeLogoBtn:hover {
  transform: none;
  filter: none;
  box-shadow: none;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) header #homeLogoBtn:focus-visible,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) header #homeLogoBtn:focus-visible {
  outline: 3px solid rgba(155, 230, 63, .72);
  outline-offset: 5px;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .header-actions,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .header-actions {
  gap: 8px;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .hlang-globe,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .hlang-globe {
  color: #e6f4ff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(157, 208, 247, .35);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) #logoutBtn,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) #logoutBtn {
  background: transparent;
  border-color: rgba(157, 208, 247, .40);
  color: #e6f4ff;
}

/* Desktop navigation */
html[data-hj-theme] body:has(#appView:not(.hidden)) .app-nav,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-nav {
  position: sticky;
  top: 76px;
  z-index: 29;
  background: var(--hj-nav) !important;
  border-bottom: 1px solid var(--hj-border-active) !important;
  box-shadow: var(--hj-shadow-sm);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .app-nav-inner,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-nav-inner {
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 0;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .nav-tab,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .nav-tab {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--hj-radius-sm);
  color: var(--hj-muted-active);
  background: transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .nav-tab:hover,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .nav-tab:hover {
  color: var(--hj-blue-700);
  background: var(--hj-blue-050);
  border-color: var(--hj-border-active);
  transform: translateY(-1px);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .nav-tab.active,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .nav-tab.active {
  color: var(--hj-blue-700) !important;
  background: var(--hj-blue-100) !important;
  border-color: #c0ddf5;
  box-shadow: none !important;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .nav-tab.smart-tab,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .nav-tab.smart-tab {
  color: #fff;
  background: var(--hj-blue-600);
  border-color: var(--hj-blue-600);
  box-shadow: 0 8px 18px rgba(29, 127, 224, .24);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) .nav-tab.smart-tab:hover,
html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .nav-tab.smart-tab:hover {
  color: #fff;
  background: var(--hj-blue-700);
}

html[data-hj-theme] #appView .rooms-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

html[data-hj-theme] #appView .rooms-toggle-icon {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 6px;
  background: var(--hj-navy-900);
  object-fit: contain;
  flex: 0 0 22px;
}

/* Shared surfaces */
html[data-hj-theme] #appView .card,
html[data-hj-theme] #appView .panel,
html[data-hj-theme] #appView .metric,
html[data-hj-theme] #appView .active-room-bar,
html[data-hj-theme] #appView .room-card,
html[data-hj-theme] #appView .item,
html[data-hj-theme] #appView .item-grid .item,
html[data-hj-theme] #appView .document-row,
html[data-hj-theme] #appView .policy-card,
html[data-hj-theme] #appView .warranty-standalone {
  background: var(--hj-surface-active);
  border: 1px solid var(--hj-border-active);
  border-radius: var(--hj-radius-lg);
  box-shadow: var(--hj-shadow-sm);
  color: var(--hj-ink-active);
}

html[data-hj-theme] #appView .card {
  padding: 24px;
  margin-bottom: 18px;
}

html[data-hj-theme] #appView .panel {
  padding: 18px;
}

html[data-hj-theme] #appView .card:hover,
html[data-hj-theme] #appView .panel:hover,
html[data-hj-theme] #appView .room-card:hover,
html[data-hj-theme] #appView .policy-card:hover {
  border-color: color-mix(in srgb, var(--hj-blue-600) 42%, var(--hj-border-active));
  box-shadow: var(--hj-shadow-md);
}

/* Inputs and form controls */
html[data-hj-theme] #appView input,
html[data-hj-theme] #appView select,
html[data-hj-theme] #appView textarea,
html[data-hj-theme] #homeSetup input,
html[data-hj-theme] #homeSetup select,
html[data-hj-theme] #homeSetup textarea {
  min-height: 44px;
  border: 1px solid var(--hj-border-active);
  border-radius: var(--hj-radius-sm);
  background: var(--hj-surface-soft-active);
  color: var(--hj-ink-active);
  box-shadow: inset 0 1px 2px rgba(9, 48, 86, .03);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

html[data-hj-theme] #appView input:focus,
html[data-hj-theme] #appView select:focus,
html[data-hj-theme] #appView textarea:focus,
html[data-hj-theme] #homeSetup input:focus,
html[data-hj-theme] #homeSetup select:focus,
html[data-hj-theme] #homeSetup textarea:focus {
  outline: none;
  border-color: var(--hj-blue-600);
  box-shadow: var(--hj-focus);
  background: var(--hj-surface-active);
}

html[data-hj-theme] #appView input::placeholder,
html[data-hj-theme] #appView textarea::placeholder,
html[data-hj-theme] #homeSetup input::placeholder,
html[data-hj-theme] #homeSetup textarea::placeholder {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #appView label,
html[data-hj-theme] #homeSetup label {
  color: var(--hj-ink-active);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
}

/* Buttons */
html[data-hj-theme] #appView button,
html[data-hj-theme] #homeSetup button {
  min-height: 42px;
  border-radius: var(--hj-radius-sm);
  font-weight: 750;
  letter-spacing: .005em;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html[data-hj-theme] #appView .doc-search-row button {
  min-height: 46px;
}

html[data-hj-theme] #appView .doc-reset-btn {
  min-height: 44px;
}

html[data-hj-theme] #appView button:where(:not(.secondary, .link, .nav-tab, .icon, .icon-btn, .room-edit, .policy-doc-del, .danger, .quick-action, .smart-primary, .smart-cap-btn, .method-card, .policy-type-btn, .export-scope-btn, .export-fmt-btn, .ai-suggestion-chip, .room-icon-choice, .theme-choice, .auth-password-toggle)),
html[data-hj-theme] #homeSetup button:not(.secondary):not(.link) {
  background: var(--hj-blue-600);
  color: #fff;
  box-shadow: 0 6px 14px rgba(29, 127, 224, .18);
}

html[data-hj-theme] #appView button:where(:not(.nav-tab, .link, .policy-doc-del, .danger, .quick-action, .smart-primary, .smart-cap-btn, .method-card, .policy-type-btn, .export-scope-btn, .export-fmt-btn, .ai-suggestion-chip, .room-icon-choice, .theme-choice, .auth-password-toggle)):hover,
html[data-hj-theme] #homeSetup button:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(29, 127, 224, .24);
}

html[data-hj-theme] #appView button.secondary,
html[data-hj-theme] #homeSetup button.secondary {
  background: var(--hj-surface-soft-active);
  color: var(--hj-ink-active);
  border: 1px solid var(--hj-border-active);
  box-shadow: none;
}

html[data-hj-theme] #appView button.secondary:hover,
html[data-hj-theme] #homeSetup button.secondary:hover {
  color: var(--hj-blue-700);
  border-color: var(--hj-blue-500);
  background: var(--hj-blue-050);
}

html[data-hj-theme] #appView button.link {
  color: var(--hj-blue-600);
  background: transparent;
  box-shadow: none;
}

html[data-hj-theme] #appView button.danger {
  color: var(--hj-danger);
  background: var(--hj-danger-soft);
  border: 1px solid color-mix(in srgb, var(--hj-danger) 24%, var(--hj-border-active));
  box-shadow: none;
}

html[data-hj-theme] #appView button:focus-visible,
html[data-hj-theme] #homeSetup button:focus-visible,
html[data-hj-theme] #appView input:focus-visible,
html[data-hj-theme] #appView select:focus-visible,
html[data-hj-theme] #appView textarea:focus-visible {
  outline: 3px solid rgba(29, 127, 224, .34);
  outline-offset: 2px;
}

/* Dashboard */
html[data-hj-theme] #appView .welcome-card {
  min-height: 164px;
  margin: 0 0 20px;
  padding: 30px 32px;
  border: 0;
  border-radius: var(--hj-radius-xl);
  background:
    radial-gradient(circle at 92% 10%, rgba(107, 187, 249, .26), transparent 16rem),
    linear-gradient(120deg, var(--hj-navy-900), var(--hj-blue-700));
  box-shadow: var(--hj-shadow-lg);
}

html[data-hj-theme] #appView .welcome-card h2,
html[data-hj-theme] #appView .welcome-card p,
html[data-hj-theme] #appView .welcome-card .eyebrow {
  color: #fff;
}

html[data-hj-theme] #appView .welcome-card p {
  color: #c4dcf1;
}

html[data-hj-theme] #appView .welcome-card .eyebrow {
  color: #9ed1f7;
}

html[data-hj-theme] #appView .welcome-card .smart-primary {
  min-width: 128px;
  background: var(--hj-green-500);
  color: var(--hj-navy-950);
  box-shadow: 0 10px 24px rgba(134, 200, 47, .24);
}

html[data-hj-theme] #appView .welcome-card .smart-primary.has-suggestions {
  background: var(--hj-warning-soft);
  color: var(--hj-warning);
}

html[data-hj-theme] #appView .welcome-card .smart-primary.all-ok {
  background: var(--hj-success-soft);
  color: var(--hj-success);
}

html[data-hj-theme] #appView .quick-actions {
  gap: 14px;
  margin-bottom: 22px;
}

html[data-hj-theme] #appView .quick-action {
  min-height: 136px;
  padding: 20px 16px 16px;
  border: 1px solid transparent;
  border-radius: var(--hj-radius-lg);
  box-shadow: var(--hj-shadow-md);
}

html[data-hj-theme] #appView .quick-action:nth-child(1) {
  background: var(--hj-navy-900);
  border-color: var(--hj-navy-800);
}

html[data-hj-theme] #appView .quick-action:nth-child(2) {
  background: var(--hj-blue-600);
  border-color: var(--hj-blue-600);
}

html[data-hj-theme] #appView .quick-action:nth-child(3) {
  background: #61afe9;
  border-color: #61afe9;
}

html[data-hj-theme] #appView .quick-action:nth-child(4) {
  background: #6b9f55;
  border-color: #6b9f55;
}

html[data-hj-theme] #appView .quick-action strong {
  color: #fff;
  font-size: 14px;
}

html[data-hj-theme] #appView .quick-action:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .65);
  box-shadow: 0 18px 34px rgba(9, 48, 86, .20);
}

html[data-hj-theme] #appView .dashboard-room-entry-icon,
html[data-hj-theme] #appView .dashboard-quick-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

html[data-hj-theme] #appView .dashboard-metrics {
  gap: 14px;
  margin-bottom: 22px;
}

html[data-hj-theme] #appView .metric {
  min-height: 126px;
  padding: 20px;
}

html[data-hj-theme] #appView .metric > span,
html[data-hj-theme] #appView .metric small {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #appView .metric strong {
  color: var(--hj-ink-active);
}

html[data-hj-theme] #appView .metric-primary {
  background: linear-gradient(145deg, var(--hj-blue-100), var(--hj-surface-active));
  border-color: #bddcf5;
}

html[data-hj-theme="dark"] #appView .metric-primary {
  background: linear-gradient(145deg, #124876, var(--hj-surface-active));
  border-color: var(--hj-border-active);
}

html[data-hj-theme] #appView .dashboard-panel {
  margin-bottom: 0;
}

html[data-hj-theme] #appView .compact-head,
html[data-hj-theme] #appView .section-head,
html[data-hj-theme] #appView .dialog-head {
  margin-bottom: 14px;
}

html[data-hj-theme] #appView .mini-row,
html[data-hj-theme] #appView .compact-row {
  border-bottom-color: var(--hj-border-active);
}

html[data-hj-theme] #appView .mini-thumb,
html[data-hj-theme] #appView .ins-dash-cell {
  background: var(--hj-surface-soft-active);
  border: 1px solid var(--hj-border-active);
}

/* Section headers and collections */
html[data-hj-theme] #appView .section-intro {
  margin: 4px 0 20px;
  padding: 0 2px;
}

html[data-hj-theme] #appView .section-intro h2 {
  margin-bottom: 0;
  font-size: clamp(24px, 3vw, 32px);
}

html[data-hj-theme] #appView .section-intro p {
  max-width: 660px;
  line-height: 1.55;
}

html[data-hj-theme] #appView .heading-icon {
  color: var(--hj-blue-600);
}

html[data-hj-theme] #appView .active-room,
html[data-hj-theme] #appView .active-room-bar {
  margin-bottom: 18px;
  padding: 18px 20px;
  background: linear-gradient(110deg, var(--hj-blue-100), var(--hj-surface-active));
  border: 1px solid var(--hj-border-active);
  border-radius: var(--hj-radius-lg);
}

html[data-hj-theme] #appView .room-grid {
  gap: 14px;
}

html[data-hj-theme] #appView .room-card {
  min-height: 170px;
  padding: 18px;
  background: linear-gradient(155deg, var(--hj-surface-active), var(--hj-surface-soft-active));
}

html[data-hj-theme] #appView .room-card .room-icon,
html[data-hj-theme] #appView .room-card .room-icon-image {
  width: 48px;
  height: 48px;
}

html[data-hj-theme] #appView .room-card .room-icon {
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--hj-blue-100);
}

html[data-hj-theme="dark"] #appView .room-card .room-icon {
  background: var(--hj-surface-soft-active);
}

html[data-hj-theme] #appView .room-name {
  margin-top: 12px;
  color: var(--hj-ink-active);
  font-size: 18px;
}

html[data-hj-theme] #appView .room-stats {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #appView .room-edit {
  color: var(--hj-blue-700);
  background: var(--hj-surface-active);
  border-color: var(--hj-border-active);
}

html[data-hj-theme] #appView .room-icon-choice {
  min-height: 76px;
  padding: 9px 5px;
  border-color: var(--hj-border-active);
  background: var(--hj-surface-soft-active);
  color: var(--hj-ink-active);
  border-radius: var(--hj-radius-sm);
}

html[data-hj-theme] #appView .room-icon-choice.selected {
  background: var(--hj-blue-100);
  border-color: var(--hj-blue-600);
  box-shadow: var(--hj-focus);
}

/* Item and document lists */
html[data-hj-theme] #appView .items-card {
  scroll-margin-top: 120px;
}

html[data-hj-theme] #appView .item-grid {
  gap: 14px;
}

html[data-hj-theme] #appView .item,
html[data-hj-theme] #appView .item-grid .item {
  padding: 14px;
  border-radius: var(--hj-radius-md);
}

html[data-hj-theme] #appView .item:hover,
html[data-hj-theme] #appView .item-grid .item:hover,
html[data-hj-theme] #appView .document-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--hj-shadow-md);
}

html[data-hj-theme] #appView .thumb,
html[data-hj-theme] #appView .item-grid .thumb {
  border: 1px solid var(--hj-border-active);
  background: var(--hj-surface-soft-active);
  border-radius: var(--hj-radius-md);
}

html[data-hj-theme] #appView .item-title,
html[data-hj-theme] #appView .document-title,
html[data-hj-theme] #appView .document-row strong {
  color: var(--hj-ink-active);
}

html[data-hj-theme] #appView .item-meta,
html[data-hj-theme] #appView .item-doc-meta,
html[data-hj-theme] #appView .document-meta,
html[data-hj-theme] #appView .document-date {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #appView .document-row {
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: var(--hj-radius-md);
}

html[data-hj-theme] #appView .document-icon {
  background: var(--hj-blue-100);
  color: var(--hj-blue-700);
  border-radius: var(--hj-radius-sm);
}

html[data-hj-theme] #appView .doc-type-badge {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

html[data-hj-theme] #appView .doc-badge.doc-complete {
  color: var(--hj-success);
  background: var(--hj-success-soft);
}

html[data-hj-theme] #appView .doc-badge.doc-partial {
  color: var(--hj-warning);
  background: var(--hj-warning-soft);
}

html[data-hj-theme] #appView .doc-badge.doc-missing {
  color: var(--hj-danger);
  background: var(--hj-danger-soft);
}

html[data-hj-theme] #appView .file-card,
html[data-hj-theme] #appView .policy-doc-row,
html[data-hj-theme] #appView .export-step,
html[data-hj-theme] #appView .inv-share-link-box,
html[data-hj-theme] #appView .inv-share-code-box {
  background: var(--hj-surface-soft-active);
  border-color: var(--hj-border-active);
  color: var(--hj-ink-active);
}

/* Status, alerts and progress */
html[data-hj-theme] #appView .status-banner,
html[data-hj-theme] #appView .field-success,
html[data-hj-theme] #appView .success,
html[data-hj-theme] #appView .ok,
html[data-hj-theme] #appView .warranty-ok {
  color: var(--hj-success);
}

html[data-hj-theme] #appView .status-banner,
html[data-hj-theme] #appView .warranty-ok {
  background: var(--hj-success-soft);
  border-color: color-mix(in srgb, var(--hj-success) 24%, var(--hj-border-active));
}

html[data-hj-theme] #appView .field-error,
html[data-hj-theme] #appView .bad,
html[data-hj-theme] #appView .warranty-expired {
  color: var(--hj-danger);
}

html[data-hj-theme] #appView .warranty-expired {
  background: var(--hj-danger-soft);
  border-color: color-mix(in srgb, var(--hj-danger) 24%, var(--hj-border-active));
}

html[data-hj-theme] #appView .warranty-soon,
html[data-hj-theme] #appView .warn-caution,
html[data-hj-theme] #appView .dash-alert-caution,
html[data-hj-theme] #appView .dash-alert-urgent {
  color: var(--hj-warning);
  background: var(--hj-warning-soft);
  border-color: color-mix(in srgb, var(--hj-warning) 24%, var(--hj-border-active));
}

html[data-hj-theme] #appView .dash-alert-banner,
html[data-hj-theme] #appView .ins-dash-card,
html[data-hj-theme] #appView .warranty-standalone {
  border-radius: var(--hj-radius-lg);
}

html[data-hj-theme] #appView .progress-bar,
html[data-hj-theme] #appView .score-bar,
html[data-hj-theme] #appView .score-bar-track,
html[data-hj-theme] #appView .ins-cov-track,
html[data-hj-theme] #appView .smart-progress-track {
  background: var(--hj-surface-soft-active);
  border: 1px solid var(--hj-border-active);
}

html[data-hj-theme] #appView .progress-fill,
html[data-hj-theme] #appView .score-fill,
html[data-hj-theme] #appView .ins-cov-fill,
html[data-hj-theme] #appView .smart-progress-fill {
  background: var(--hj-blue-600);
}

/* Smart Score is rendered dynamically as .score-bar-*. Keep inline score
   colors authoritative so good, caution, and low scores remain meaningful. */
html[data-hj-theme] #appView .score-bar-label,
html[data-hj-theme] #appView .score-bar-pct {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #appView .score-bar-fill {
  background-color: var(--hj-blue-600);
}

/* Insurance and Smart */
html[data-hj-theme] #appView .policy-card {
  padding: 20px;
  border-radius: var(--hj-radius-md);
}

html[data-hj-theme] #appView .policy-card-hd {
  margin-bottom: 10px;
}

html[data-hj-theme] #appView .policy-meta-row,
html[data-hj-theme] #appView .policy-company {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #appView .policy-doc-badge {
  color: var(--hj-blue-700);
  background: var(--hj-blue-100);
}

html[data-hj-theme] #appView .smart-score-card,
html[data-hj-theme] #appView .ai-chat-card,
html[data-hj-theme] #appView .smart-register-cta {
  border-radius: var(--hj-radius-lg);
}

html[data-hj-theme] #appView .smart-score-circle {
  border-color: var(--hj-blue-500);
  color: var(--hj-blue-700);
  background: conic-gradient(
    var(--score-color, var(--hj-blue-600)) var(--pct, 0%),
    var(--hj-surface-soft-active) 0%
  );
}

html[data-hj-theme] #appView .smart-score-circle::after {
  background: var(--hj-surface-active);
}

html[data-hj-theme] #appView .insight-card {
  border-radius: var(--hj-radius-md);
}

html[data-hj-theme] #appView .insight-count {
  color: var(--hj-blue-700);
  background: var(--hj-blue-100);
}

html[data-hj-theme] #appView .ai-suggestion-chip {
  color: var(--hj-blue-700);
  background: var(--hj-blue-050);
  border-color: var(--hj-border-active);
}

html[data-hj-theme] #appView .ai-suggestion-chip:hover {
  background: var(--hj-blue-100);
  border-color: var(--hj-blue-500);
}

html[data-hj-theme] #appView .ai-messages,
html[data-hj-theme] #appView .ai-input-row,
html[data-hj-theme] #appView .ai-privacy {
  background: var(--hj-surface-soft-active);
  border-color: var(--hj-border-active);
  color: var(--hj-ink-active);
}

html[data-hj-theme] #appView .ai-bubble-user {
  background: var(--hj-blue-600);
  color: #fff;
}

html[data-hj-theme] #appView .ai-bubble-assistant {
  background: var(--hj-surface-active);
  color: var(--hj-ink-active);
}

html[data-hj-theme] #appView .smart-register-cta {
  background: linear-gradient(120deg, var(--hj-navy-900), var(--hj-blue-700));
  border: 0;
  color: #fff;
}

html[data-hj-theme] #appView .smart-register-cta h3,
html[data-hj-theme] #appView .smart-register-cta .eyebrow,
html[data-hj-theme] #appView .smart-register-cta p {
  color: #fff;
}

html[data-hj-theme] #appView .smart-register-cta .eyebrow {
  color: #9ed1f7;
}

html[data-hj-theme] body:has(#appView:not(.hidden)) #appView .smart-register-cta button {
  background: var(--hj-green-500);
  color: var(--hj-navy-950);
}

/* Wizard and dialogs */
html[data-hj-theme] body:has(#appView:not(.hidden)) dialog::backdrop {
  background: rgba(2, 15, 32, .70);
  backdrop-filter: blur(4px);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .dialog-card,
html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .ro-dialog,
html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .vo-dialog,
html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .ig-dialog,
html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .wo-dialog,
html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .inv-dialog-card {
  background: var(--hj-surface-active);
  border: 1px solid var(--hj-border-active);
  border-radius: var(--hj-radius-xl);
  color: var(--hj-ink-active);
  box-shadow: var(--hj-shadow-lg);
}

html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .icon,
html[data-hj-theme] body:has(#appView:not(.hidden)) dialog .icon-btn {
  color: var(--hj-ink-active);
  background: var(--hj-surface-soft-active);
  border-color: var(--hj-border-active);
}

html[data-hj-theme] #smartDialog .wiz-method-panel,
html[data-hj-theme] #smartDialog .method-card,
html[data-hj-theme] #smartDialog .review-card,
html[data-hj-theme] #smartDialog .smart-details,
html[data-hj-theme] #smartDialog .smart-save-card,
html[data-hj-theme] #smartDialog .s2-intel-ready-card,
html[data-hj-theme] #smartDialog .s2-progress-card {
  background: var(--hj-surface-soft-active);
  border-color: var(--hj-border-active);
  color: var(--hj-ink-active);
}

html[data-hj-theme] #smartDialog .method-card:hover,
html[data-hj-theme] #smartDialog .method-card.selected,
html[data-hj-theme] #smartDialog .method-card.active {
  background: var(--hj-blue-100);
  border-color: var(--hj-blue-600);
}

html[data-hj-theme] #smartDialog .wiz-dot {
  background: var(--hj-surface-soft-active);
  border-color: var(--hj-border-active);
  color: var(--hj-muted-active);
}

html[data-hj-theme] #smartDialog .wiz-item.wiz-active .wiz-dot,
html[data-hj-theme] #smartDialog .wiz-item.wiz-done .wiz-dot {
  background: var(--hj-blue-600);
  border-color: var(--hj-blue-600);
  color: #fff;
}

html[data-hj-theme] #smartDialog .wiz-label {
  color: var(--hj-muted-active);
}

html[data-hj-theme] #smartDialog .wiz-item.wiz-active .wiz-label {
  color: var(--hj-blue-700);
}

/* Settings and appearance */
html[data-hj-theme] #settingsView .appearance-card,
html[data-hj-theme] #settingsView .settings-card {
  border-radius: var(--hj-radius-lg);
}

html[data-hj-theme] #settingsView .theme-choice {
  background: var(--hj-surface-soft-active);
  border-color: var(--hj-border-active);
  color: var(--hj-ink-active);
}

html[data-hj-theme] #settingsView .theme-choice:hover,
html[data-hj-theme] #settingsView .theme-choice.is-selected {
  background: var(--hj-blue-100);
  border-color: var(--hj-blue-600);
}

html[data-hj-theme] #settingsView .theme-choice-copy small {
  color: var(--hj-muted-active);
}

/* Signed-out secondary flows keep the established navy brand treatment. */
body:has(#authView:not(.hidden)) header .app-brand-lockup,
body:has(#forgotView:not(.hidden)) header .app-brand-lockup,
body:has(#recoveryView:not(.hidden)) header .app-brand-lockup,
body:has(#inviteAcceptSection:not(.hidden)) header .app-brand-lockup,
body:has(#homeSetup:not(.hidden)):not(:has(#logoutBtn:not(.hidden))) header .app-brand-lockup {
  display: none;
}

body:has(#forgotView:not(.hidden)),
body:has(#recoveryView:not(.hidden)),
body:has(#inviteAcceptSection:not(.hidden)),
body:has(#homeSetup:not(.hidden)):not(:has(#logoutBtn:not(.hidden))) {
  background: #04162e;
}

body:has(#forgotView:not(.hidden)) #forgotView,
body:has(#recoveryView:not(.hidden)) #recoveryView,
body:has(#inviteAcceptSection:not(.hidden)) #inviteAcceptSection,
body:has(#homeSetup:not(.hidden)):not(:has(#logoutBtn:not(.hidden))) #homeSetup {
  background: linear-gradient(145deg, #123861, #061f3d);
  border: 1px solid rgba(130, 195, 248, .36);
  border-radius: var(--hj-radius-xl);
  color: #f3f8ff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

/* Responsive rules: preserve the compact signed-in header controls. */
@media (max-width: 760px) {
  html[data-hj-theme] body:has(#appView:not(.hidden)) main,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) main {
    padding-top: 16px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .shell,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .shell {
    width: min(100% - 20px, var(--hj-content-width));
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) header,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) header {
    position: sticky;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) header .header-inner,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) header .header-inner {
    min-height: 64px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-symbol,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-symbol {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-name,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-name {
    font-size: 1.35rem;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-eyebrow,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-eyebrow {
    font-size: .53rem;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-tagline,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-tagline {
    max-width: 190px;
    font-size: .58rem;
    line-height: 1.2;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .app-nav,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-nav {
    display: block !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    border: 1px solid var(--hj-border-active) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--hj-nav) 94%, transparent) !important;
    box-shadow: 0 12px 34px rgba(4, 26, 53, .24);
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .app-nav-inner,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-nav-inner {
    justify-content: space-around;
    padding: 7px 5px max(7px, env(safe-area-inset-bottom)) !important;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .nav-tab,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .nav-tab {
    min-width: 58px;
    min-height: 50px;
    padding: 6px 7px;
    border-radius: 14px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .nav-tab.smart-tab,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .nav-tab.smart-tab {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 50%;
    transform: translateY(-12px);
  }

  html[data-hj-theme] #appView .card {
    padding: 18px;
    margin-bottom: 14px;
    border-radius: var(--hj-radius-md);
  }

  html[data-hj-theme] #appView .welcome-card {
    min-height: 0;
    padding: 22px;
    border-radius: var(--hj-radius-lg);
  }

  html[data-hj-theme] #appView .welcome-card .smart-primary {
    width: 100%;
    margin-top: 8px;
  }

  html[data-hj-theme] #appView .quick-actions {
    gap: 9px;
  }

  html[data-hj-theme] #appView .quick-action {
    min-height: 104px;
    padding: 13px 8px 11px;
    border-radius: var(--hj-radius-md);
  }

  html[data-hj-theme] #appView .dashboard-room-entry-icon,
  html[data-hj-theme] #appView .dashboard-quick-icon {
    width: 45px;
    height: 45px;
  }

  html[data-hj-theme] #appView .quick-action strong {
    font-size: 11px;
    line-height: 1.1;
  }

  html[data-hj-theme] #appView .dashboard-metrics {
    gap: 9px;
  }

  html[data-hj-theme] #appView .metric {
    min-height: 100px;
    padding: 14px;
  }

  html[data-hj-theme] #appView .metric strong {
    font-size: 26px;
  }

  html[data-hj-theme] #appView .section-intro {
    align-items: stretch;
    gap: 14px;
    margin-top: 2px;
  }

  html[data-hj-theme] #appView .section-intro h2 {
    font-size: 25px;
  }

  html[data-hj-theme] #appView .room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-hj-theme] #appView .room-card {
    min-height: 145px;
    padding: 14px;
  }

  html[data-hj-theme] #appView .room-card .room-icon,
  html[data-hj-theme] #appView .room-card .room-icon-image {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 430px) {
  html[data-hj-theme] body:has(#appView:not(.hidden)) .app-brand-tagline,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .app-brand-tagline {
    display: none;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) .header-actions,
  html[data-hj-theme] body:has(#homeSetup:not(.hidden)):has(#logoutBtn:not(.hidden)) .header-actions {
    gap: 4px;
  }

  html[data-hj-theme] #appView .room-grid {
    grid-template-columns: 1fr;
  }

  html[data-hj-theme] #appView .item-grid .item {
    grid-template-columns: 82px 1fr;
  }

  html[data-hj-theme] #appView .item-grid .thumb {
    width: 82px;
    height: 82px;
  }
}

/* Dashboard polish: intentionally scoped to the signed-in overview only. */
html[data-hj-theme] #appView #dashboardView .welcome-card {
  min-height: 154px;
  margin-bottom: 18px;
  padding: 28px 30px;
  border: 1px solid rgba(151, 202, 244, .18) !important;
  border-radius: 20px;
  background:
    radial-gradient(circle at 91% 12%, rgba(91, 174, 239, .22), transparent 15rem),
    linear-gradient(118deg, #08284d 0%, #0b3f74 62%, #1264a5 100%) !important;
  box-shadow: 0 16px 38px rgba(4, 30, 60, .20);
}

html[data-hj-theme] #appView #dashboardView .welcome-card h2 {
  margin: 3px 0 8px;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -.035em;
}

html[data-hj-theme] #appView #dashboardView .welcome-card p {
  max-width: 580px;
  margin: 0;
  line-height: 1.5;
}

html[data-hj-theme] #appView #dashboardView .quick-actions {
  gap: 12px;
  margin-bottom: 18px;
}

html[data-hj-theme] #appView #dashboardView .quick-action {
  min-height: 126px;
  padding: 18px 14px 15px;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 17px;
  box-shadow: 0 9px 22px rgba(6, 44, 84, .14);
}

html[data-hj-theme] #appView #dashboardView .quick-action:nth-child(1) {
  background: #082c62;
  border-color: #123f75;
}

html[data-hj-theme] #appView #dashboardView .quick-action:nth-child(2) {
  background: #1268b8;
  border-color: #2b7cc4;
}

html[data-hj-theme] #appView #dashboardView .quick-action:nth-child(3) {
  background: #2e83c3;
  border-color: #4895cd;
}

html[data-hj-theme] #appView #dashboardView .quick-action:nth-child(4) {
  background: #397ead;
  border-color: #5291ba;
}

html[data-hj-theme] #appView #dashboardView .quick-action strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .005em;
}

html[data-hj-theme] #appView #dashboardView .dashboard-room-entry strong {
  color: #9be63f !important;
}

html[data-hj-theme] #appView #dashboardView .dashboard-room-entry-icon,
html[data-hj-theme] #appView #dashboardView .dashboard-quick-icon {
  width: 52px;
  height: 52px;
}

html[data-hj-theme] #appView #dashboardView .quick-action:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .48);
  box-shadow: 0 14px 30px rgba(6, 44, 84, .20);
}

html[data-hj-theme] #appView #dashboardView .ins-dash-card,
html[data-hj-theme] #appView #dashboardView .warranty-standalone,
html[data-hj-theme] #appView #dashboardView .card:has(#completenessBody) {
  margin-bottom: 14px;
  border-color: color-mix(in srgb, var(--hj-border-active) 88%, var(--hj-blue-500));
  border-radius: 18px;
  box-shadow: 0 7px 20px rgba(8, 44, 98, .07);
}

html[data-hj-theme] #appView #dashboardView .ins-dash-card {
  padding: 0;
  overflow: hidden;
}

html[data-hj-theme] #appView #dashboardView .ins-dash-summary {
  padding: 20px 22px;
}

html[data-hj-theme] #appView #dashboardView .ins-dash-card[open] > .ins-dash-summary {
  border-bottom: 1px solid var(--hj-border-active);
}

html[data-hj-theme] #appView #dashboardView .ins-dash-metrics {
  gap: 9px;
  padding: 18px 22px 10px;
}

html[data-hj-theme] #appView #dashboardView .ins-dash-cell {
  min-height: 76px;
  padding: 13px 14px;
  border-radius: 12px;
}

html[data-hj-theme] #appView #dashboardView .ins-dash-cell span {
  color: var(--hj-muted-active);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

html[data-hj-theme] #appView #dashboardView .ins-dash-cell strong {
  color: var(--hj-ink-active);
  font-size: 18px;
}

html[data-hj-theme] #appView #dashboardView .ins-cov-wrap,
html[data-hj-theme] #appView #dashboardView .ins-warnings {
  margin-inline: 22px;
  margin-bottom: 18px;
}

html[data-hj-theme] #appView #dashboardView .warranty-standalone,
html[data-hj-theme] #appView #dashboardView .card:has(#completenessBody) {
  padding: 20px 22px;
}

html[data-hj-theme] #appView #dashboardView .compact-head {
  margin-bottom: 12px;
}

html[data-hj-theme] #appView #dashboardView .compact-head h2,
html[data-hj-theme] #appView #dashboardView .ins-dash-summary h2 {
  margin: 3px 0 0;
  font-size: 19px;
  letter-spacing: -.02em;
}

html[data-hj-theme] #appView #dashboardView .compact-head .eyebrow,
html[data-hj-theme] #appView #dashboardView .ins-dash-summary .eyebrow {
  font-size: 9px;
  letter-spacing: .12em;
}

html[data-hj-theme] #appView #dashboardView .empty.compact {
  padding: 16px 10px;
  font-size: 13px;
  line-height: 1.45;
}

html[data-hj-theme] #appView #dashboardView .completeness-disclaimer {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hj-border-active);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .welcome-card {
    height: auto;
    min-height: 122px;
    margin-bottom: 10px;
    padding: 16px;
    gap: 8px;
    border-radius: 16px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .welcome-card h2 {
    margin: 2px 0 5px;
    font-size: 24px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .welcome-card p {
    font-size: 12px;
    line-height: 1.35;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .welcome-card .smart-primary {
    width: auto;
    min-height: 34px;
    margin-top: 2px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 11px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .quick-action {
    min-height: 102px;
    padding: 13px 9px 11px;
    gap: 7px;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(6, 44, 84, .14);
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .dashboard-room-entry-icon,
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .dashboard-quick-icon {
    width: 44px;
    height: 44px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .quick-action strong {
    font-size: 11px;
    line-height: 1.15;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-dash-card,
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .warranty-standalone,
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .card:has(#completenessBody) {
    margin-bottom: 8px;
    border-radius: 14px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-dash-summary,
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .warranty-standalone,
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .card:has(#completenessBody) {
    padding: 14px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 12px 14px 8px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-dash-cell {
    min-height: 66px;
    padding: 10px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-dash-cell strong {
    font-size: 16px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-cov-wrap,
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-warnings {
    margin-inline: 14px;
    margin-bottom: 12px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .compact-head h2,
  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .ins-dash-summary h2 {
    font-size: 16px;
  }

  html[data-hj-theme] body:has(#appView:not(.hidden)) #dashboardView .empty.compact {
    padding: 11px 6px;
    font-size: 12px;
  }
}