:root {
  --smart-navy-950: #071a3d;
  --smart-navy-900: #0a2254;
  --smart-navy-800: #0d3277;
  --smart-primary: #1557c0;
  --smart-primary-hover: #10489f;
  --smart-primary-active: #0d3d8f;
  --smart-sidebar-bg: #0a2254;
  --smart-sidebar-bg-deep: #071a3d;
  --smart-sidebar-active: #294779;
  --smart-blue: var(--smart-primary);
  --smart-data-blue: var(--smart-primary);
  --smart-blue-soft: color-mix(in srgb, var(--smart-primary) 9%, var(--smart-surface));
  --smart-primary-soft: color-mix(in srgb, var(--smart-primary) 9%, var(--smart-surface));
  --smart-primary-soft-strong: color-mix(in srgb, var(--smart-primary) 15%, var(--smart-surface));
  --smart-primary-strong: #0b55c7;
  --smart-gold: #f5ba21;
  --smart-gold-deep: #d89b00;
  --brand-mark-gold: #ebd181;
  --smart-teal: #08644f;
  --smart-purple: #8854e6;
  --smart-purple-deep: #5b2bad;
  --smart-purple-soft: #f1e9ff;
  --smart-purple-soft-dark: #342450;
  --smart-purple-text-dark: #d8c3ff;
  --smart-cyan: #08a7c6;
  --smart-red: #de4d5d;
  --smart-app-bg: #f4f7fb;
  --smart-surface: #ffffff;
  --smart-surface-elevated: #ffffff;
  --smart-border: #dce4ef;
  --smart-control-border: #7689a2;
  --smart-control-border-hover: #52637a;
  --smart-text: #10233f;
  --smart-text-secondary: #52637a;
  --smart-text-muted: #5f6f86;
  --smart-input-bg: #ffffff;
  --smart-focus-ring-surface: #1557c0;
  --smart-focus-ring-inverse: #f5ba21;
  --smart-focus-ring: var(--smart-focus-ring-surface);
  --smart-on-brand: #ffffff;
  --smart-on-primary: #ffffff;
  --smart-on-gold: #10233f;
  --smart-success: #08644f;
  --smart-success-soft: #e6f8f2;
  --smart-success-ring: #ccefe5;
  --smart-warning: #7a5200;
  --smart-warning-soft: #fff3cd;
  --smart-warning-ring: #f7e3a0;
  --smart-danger: #a62f41;
  --smart-danger-action: #a62f41;
  --smart-danger-action-hover: #8f2637;
  --smart-danger-action-active: #761d2c;
  --smart-on-danger: #ffffff;
  --smart-danger-soft: #fef1f3;
  --smart-info: #1557c0;
  --smart-info-soft: color-mix(in srgb, var(--smart-primary) 9%, var(--smart-surface));
  --smart-link: var(--smart-primary);
  --smart-link-hover: var(--smart-primary-hover);
  --smart-editor-link: var(--smart-primary);
  --smart-wordmark-accent: var(--smart-primary);
  --smart-divider: #edf1f6;
  --smart-row-hover: #fbfdff;
  /* Tonal surfaces follow the selected accent; table headers remain distinct from cells. */
  --smart-table-header: color-mix(in srgb, var(--smart-primary) 7%, var(--smart-surface));
  --smart-primary-tonal: color-mix(in srgb, var(--smart-primary) 9%, var(--smart-surface));
  --smart-primary-tonal-hover: color-mix(in srgb, var(--smart-primary) 14%, var(--smart-surface));
  --smart-ring-track: #e9eef6;
  --smart-skeleton-base: #edf1f6;
  --smart-skeleton-shine: #f8fafc;
  --smart-login-panel: rgba(247, 249, 252, .96);
  --smart-sidebar-text: #e4eaf4;
  --smart-sidebar-muted: #aebbd0;
  --smart-bg: var(--smart-app-bg);
  --smart-line: var(--smart-border);
  --smart-muted: var(--smart-text-muted);
  --smart-card-shadow: 0 6px 18px rgba(16, 42, 85, .055);
  --smart-shadow-button-rest: 0 2px 6px rgba(16, 42, 85, .1);
  --smart-shadow-button-hover: 0 5px 12px rgba(16, 42, 85, .15);
  --smart-shadow-button-active: 0 1px 4px rgba(16, 42, 85, .1);
  --smart-shadow-panel: 0 20px 45px rgba(15, 23, 42, .12);
  --smart-shadow-task-rest: 0 3px 10px rgba(16, 42, 85, .04);
  --smart-shadow-task-card: 0 2px 8px rgba(16, 42, 85, .04);
  --smart-shadow-task-focus: 0 5px 12px rgba(16, 42, 85, .08);
  --smart-shadow-task-hover: 0 7px 16px rgba(16, 42, 85, .1);
  --smart-shadow-task-chosen: 0 10px 22px rgba(16, 42, 85, .15);
  --smart-shadow-task-dragging: 0 14px 30px rgba(16, 42, 85, .18);
  --smart-shadow-customizer: -18px 0 48px rgba(7, 26, 61, .16);
  --smart-shadow-notification: 0 18px 44px rgba(7, 26, 61, .18);
  --smart-shadow-language: 0 14px 34px rgba(7, 26, 61, .16);
  --smart-gold-hover: #dfa810;
  --smart-gold-active: #c9940b;
  --smart-interactive-shadow-hover: 0 10px 20px rgba(16, 42, 85, .11);
  --smart-interactive-shadow-active: 0 4px 10px rgba(16, 42, 85, .08);
  --smart-control-shadow-hover: 0 4px 10px rgba(16, 42, 85, .14);
  --smart-control-shadow-active: 0 1px 4px rgba(16, 42, 85, .09);
  --smart-motion-fast: .16s;
  --smart-motion-standard: .18s;
  --smart-ease-standard: ease;
  --smart-control-height-sm: 36px;
  --smart-control-height: 44px;
  --smart-control-height-lg: 52px;
  /* Experimental type B: semantic roles with readable functional floors. */
  --smart-font-micro: .6875rem;
  --smart-font-caption: .6875rem;
  --smart-font-small: .75rem;
  --smart-font-label: .75rem;
  --smart-font-meta: .75rem;
  --smart-font-body-compact: .78125rem;
  --smart-font-body-sm: .78125rem;
  --smart-font-body-md: .78125rem;
  --smart-font-body: .78rem;
  --smart-font-control: .8rem;
  --smart-font-compact-title: .82rem;
  --smart-font-label-lg: .84rem;
  --smart-font-title-sm: .9rem;
  --smart-font-title: 1rem;
  --smart-font-wordmark: 1.05rem;
  --smart-font-kpi: 1.12rem;
  --smart-font-subheading: 1.15rem;
  --smart-font-brand: 1.22rem;
  --smart-font-section: 1.25rem;
  --smart-font-section-lg: 1.35rem;
  --smart-font-section-xl: 1.4rem;
  --smart-font-display-sm: 1.5rem;
  --smart-font-display-md: 1.55rem;
  --smart-font-display-lg: 1.65rem;
  --smart-font-display-xl: 1.8rem;
  --smart-font-display-2xl: 2.15rem;
  --smart-font-display-3xl: 2.2rem;
  --smart-font-display-4xl: 2.25rem;
  --smart-font-display-hero: clamp(3.7rem, 10vw, 5.75rem);
  --smart-font-heading-responsive: clamp(1.25rem, 4vw, 1.8rem);
  --smart-font-heading-page: clamp(1.35rem, 2.5vw, 1.62rem);
  --smart-font-heading-card: clamp(1.45rem, 2.6vw, 1.8rem);
  --smart-font-heading-main: clamp(1.5rem, 2.2vw, 2rem);
  --smart-font-heading-wide: clamp(1.5rem, 2.3vw, 2.2rem);
  --smart-font-heading-wide-lg: clamp(1.5rem, 2.3vw, 2.25rem);
  --smart-font-heading-hero: clamp(1.5rem, 3vw, 2.15rem);
  --smart-font-heading-compact: clamp(1.55rem, 2.3vw, 2.2rem);
  --smart-font-heading-responsive-lg: clamp(1.55rem, 2.7vw, 2.1rem);
  --smart-font-heading-mobile: clamp(1.55rem, 4vw, 2rem);
  --smart-font-heading-emphasis: clamp(1.65rem, 2.6vw, 2rem);
  --smart-radius-compact: 6px;
  --smart-radius-micro: 3px;
  --smart-radius-tight: 4px;
  --smart-radius-control: 9px;
  --smart-radius-subtle: 7px;
  --smart-radius-xs: 5px;
  --smart-radius-md: 8px;
  --smart-radius-lg: 10px;
  --smart-radius-panel: 11px;
  --smart-radius-xl: 12px;
  --smart-radius-card: 14px;
  --smart-radius-dialog: 16px;
  --smart-radius-feature: 17px;
  --smart-radius-hero: 18px;
  --smart-radius-callout: 22px;
  --smart-radius-pill: 999px;
  --smart-table-inset: 1rem;
  --smart-table-cell-block: .7rem;
  --smart-table-cell-inline: .8rem;
  --smart-table-radius: var(--smart-radius-lg);
  --smart-sidebar-width: 268px;
  --smart-sidebar-folded-width: 80px;
  --smart-topbar-height: 72px;
  --tblr-primary: var(--smart-primary);
  --tblr-primary-rgb: 21, 87, 192;
  --tblr-body-bg: var(--smart-bg);
  --tblr-body-color: var(--smart-text);
  --tblr-bg-surface: var(--smart-surface);
  --tblr-border-color: var(--smart-border);
  --tblr-font-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --smart-app-bg: #0f172a;
  --smart-surface: #172033;
  --smart-surface-elevated: #1e293b;
  --smart-border: #334155;
  --smart-control-border: #71829a;
  --smart-control-border-hover: #aebbd0;
  --smart-text: #f1f5f9;
  --smart-text-secondary: #cbd5e1;
  --smart-text-muted: #aebbd0;
  --smart-input-bg: #111b2d;
  --smart-focus-ring-surface: #8bb8ff;
  --smart-focus-ring-inverse: #f5ba21;
  --smart-focus-ring: var(--smart-focus-ring-surface);
  --smart-blue-soft: color-mix(in srgb, var(--smart-primary) 24%, var(--smart-surface));
  --smart-data-blue: #78aaf2;
  --smart-teal: #5dd6b4;
  --smart-success: #5dd6b4;
  --smart-success-soft: #123c37;
  --smart-success-ring: #2b6f62;
  --smart-warning: #f5cf67;
  --smart-warning-soft: #493815;
  --smart-warning-ring: #806622;
  --smart-danger: #ff9caa;
  --smart-danger-action: #b63b50;
  --smart-danger-action-hover: #c94b60;
  --smart-danger-action-active: #973044;
  --smart-on-danger: #ffffff;
  --smart-danger-soft: #4b2430;
  --smart-info: #8bb8ff;
  --smart-info-soft: color-mix(in srgb, var(--smart-primary) 24%, var(--smart-surface));
  --smart-link: #9fc3ff;
  --smart-link-hover: #c1d7ff;
  --smart-editor-link: #9fc3ff;
  --smart-shadow-customizer: -18px 0 48px rgba(0, 0, 0, .42);
  --smart-shadow-notification: 0 18px 44px rgba(0, 0, 0, .42);
  --smart-shadow-language: 0 14px 34px rgba(0, 0, 0, .36);
  --smart-wordmark-accent: var(--smart-link);
  --smart-divider: #334155;
  --smart-row-hover: #1c2940;
  --smart-table-header: color-mix(in srgb, var(--smart-primary) 20%, var(--smart-surface));
  --smart-ring-track: #334155;
  --smart-skeleton-base: #26344b;
  --smart-skeleton-shine: #33445e;
  --smart-login-panel: #0f172a;
  --smart-card-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  --smart-interactive-shadow-hover: 0 10px 22px rgba(0, 0, 0, .3);
  --smart-interactive-shadow-active: 0 4px 10px rgba(0, 0, 0, .22);
  --smart-control-shadow-hover: 0 4px 10px rgba(0, 0, 0, .28);
  --smart-control-shadow-active: 0 1px 4px rgba(0, 0, 0, .2);
  --tblr-primary: var(--smart-primary);
  --tblr-body-bg: var(--smart-app-bg);
  --tblr-body-color: var(--smart-text);
  --tblr-bg-surface: var(--smart-surface);
  --tblr-border-color: var(--smart-border);
}

html[data-smart-accent="teal"] {
  --smart-primary: #087f6b;
  --smart-primary-hover: #066958;
  --smart-primary-active: #055848;
  --smart-blue-soft: #e6f5f2;
  --smart-focus-ring-surface: #087f6b;
  --smart-info: #087f6b;
  --smart-info-soft: #e6f5f2;
  --tblr-primary-rgb: 8, 127, 107;
  --smart-sidebar-bg: #064e46;
  --smart-sidebar-bg-deep: #043a35;
  --smart-sidebar-active: #1f6a60;
}

html[data-smart-accent="royal"] {
  --smart-primary: #003399;
  --smart-primary-hover: #002e8a;
  --smart-primary-active: #002a80;
  --smart-blue-soft: #eaf0fb;
  --smart-focus-ring-surface: #003399;
  --smart-info: #003399;
  --smart-info-soft: #eaf0fb;
  --smart-sidebar-bg: #0a2e6e;
  --smart-sidebar-bg-deep: #072452;
  --smart-sidebar-active: #294b83;
  --tblr-primary-rgb: 0, 51, 153;
}

html[data-smart-accent="indigo"] {
  --smart-primary: #4c51bf;
  --smart-primary-hover: #3f43a3;
  --smart-primary-active: #363b91;
  --smart-blue-soft: #eef0ff;
  --smart-focus-ring-surface: #4c51bf;
  --smart-info: #4c51bf;
  --smart-info-soft: #eef0ff;
  --tblr-primary-rgb: 76, 81, 191;
  --smart-sidebar-bg: #30347f;
  --smart-sidebar-bg-deep: #24275f;
  --smart-sidebar-active: #4d5091;
}

html[data-smart-accent="plum"] {
  --smart-primary: #7a3e9d;
  --smart-primary-hover: #683389;
  --smart-primary-active: #5c287c;
  --smart-blue-soft: #f5ecfa;
  --smart-focus-ring-surface: #7a3e9d;
  --smart-info: #7a3e9d;
  --smart-info-soft: #f5ecfa;
  --tblr-primary-rgb: 122, 62, 157;
  --smart-sidebar-bg: #4a235f;
  --smart-sidebar-bg-deep: #351947;
  --smart-sidebar-active: #674277;
}

html[data-smart-accent="crimson"] {
  --smart-primary: #b12f4d;
  --smart-primary-hover: #97273f;
  --smart-primary-active: #84223a;
  --smart-blue-soft: #fbecef;
  --smart-focus-ring-surface: #b12f4d;
  --smart-info: #b12f4d;
  --smart-info-soft: #fbecef;
  --tblr-primary-rgb: 177, 47, 77;
  --smart-sidebar-bg: #70243a;
  --smart-sidebar-bg-deep: #541a2b;
  --smart-sidebar-active: #884258;
}

html[data-bs-theme="dark"][data-smart-accent="royal"] {
  --smart-blue-soft: #172f5c;
  --smart-data-blue: #9ab9ff;
  --smart-focus-ring-surface: #9ab9ff;
  --smart-info: #9ab9ff;
  --smart-info-soft: #172f5c;
  --smart-link: #adc6ff;
  --smart-link-hover: #d0ddff;
}

html[data-bs-theme="dark"][data-smart-accent="teal"] {
  --smart-blue-soft: #123c37;
  --smart-data-blue: #76d7c5;
  --smart-focus-ring-surface: #76d7c5;
  --smart-info: #76d7c5;
  --smart-info-soft: #123c37;
  --smart-link: #8ce5d4;
  --smart-link-hover: #b4f1e6;
}

html[data-bs-theme="dark"][data-smart-accent="indigo"] {
  --smart-blue-soft: #272b58;
  --smart-data-blue: #b5baff;
  --smart-focus-ring-surface: #b5baff;
  --smart-info: #b5baff;
  --smart-info-soft: #272b58;
  --smart-link: #c4c8ff;
  --smart-link-hover: #dfe1ff;
}

html[data-bs-theme="dark"][data-smart-accent="plum"] {
  --smart-blue-soft: #3a2448;
  --smart-data-blue: #ddb8ef;
  --smart-focus-ring-surface: #ddb8ef;
  --smart-info: #ddb8ef;
  --smart-info-soft: #3a2448;
  --smart-link: #e5c5f5;
  --smart-link-hover: #f0dcf9;
}

html[data-bs-theme="dark"][data-smart-accent="crimson"] {
  --smart-blue-soft: #4b2430;
  --smart-data-blue: #ffacbd;
  --smart-focus-ring-surface: #ffacbd;
  --smart-info: #ffacbd;
  --smart-info-soft: #4b2430;
  --smart-link: #ffb9c7;
  --smart-link-hover: #ffd6de;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--smart-bg);
  color: var(--smart-text);
  font-family: var(--tblr-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}

.smart-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .75rem;
  color: var(--smart-wordmark-accent);
  background: var(--smart-app-bg);
  font-size: var(--smart-font-body-sm);
  font-weight: 750;
  letter-spacing: .035em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease-out, visibility 180ms ease-out;
}

body > :not([data-smart-preloader]):not(script) { transition: opacity 180ms ease-out; }
html[data-smart-loading="true"] .smart-preloader { opacity: 1; visibility: visible; }
/* Keep the application rendered underneath the opaque preloader. This lets the
   browser discover and paint the real LCP while the transition still shields
   the user from an incomplete frame. */
html[data-smart-loading="true"] body > :not([data-smart-preloader]):not(script),
html[data-smart-loading="false"] body > :not([data-smart-preloader]):not(script) { opacity: 1; }
.smart-preloader-mark { position: relative; display: grid; width: 48px; height: 48px; place-items: center; }
.smart-preloader-mark::before { position: absolute; inset: 0; border: 3px solid var(--smart-info-soft); border-top-color: var(--smart-primary); border-radius: 50%; content: ""; animation: smart-preloader-spin .72s linear infinite; }
.smart-preloader-mark i:first-child { width: 14px; height: 14px; border-radius: 50%; background: var(--smart-primary); }
.smart-preloader-mark i:last-child { position: absolute; right: 2px; bottom: 4px; width: 11px; height: 11px; border: 2px solid var(--smart-app-bg); border-radius: 50%; background: var(--smart-gold); }
.smart-preloader-wordmark { display: grid; justify-items: center; gap: .18rem; color: var(--smart-wordmark-accent); line-height: 1; }
.smart-preloader-wordmark strong { color: inherit; font-size: var(--smart-font-compact-title); font-weight: 850; letter-spacing: .055em; }
.smart-preloader-wordmark span { color: inherit; font-size: var(--smart-font-micro); font-weight: 800; letter-spacing: .14em; }
.smart-preloader-wordmark b { color: var(--smart-gold-deep); font-weight: inherit; }
[data-bs-theme="dark"] .smart-preloader-wordmark b { color: var(--brand-mark-gold); }
@keyframes smart-preloader-spin { to { transform: rotate(360deg); } }

h1, h2, h3, h4, h5, h6 { color: var(--smart-text); }

a { color: inherit; text-underline-offset: .18em; }

::placeholder {
  color: var(--smart-text-muted);
  opacity: 1;
}

html {
  scrollbar-color: #9aabc1 var(--smart-bg);
  scrollbar-width: thin;
}

::selection { color: #fff; background: var(--smart-navy-800); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--smart-focus-ring);
  outline-offset: 2px;
}

:is(
  .global-search input,
  .launcher-search input,
  .module-search input,
  .module-category-select,
  .auth-flow-form .form-field input,
  .native-search input,
  .native-period select,
  .native-select select,
  .smart-select select,
  .form-field input,
  .form-field select,
  .form-field textarea
) {
  transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard);
}

:is(
  .global-search input,
  .launcher-search input,
  .module-search input,
  .module-category-select,
  .auth-flow-form .form-field input,
  .native-search input,
  .native-period select,
  .native-select select,
  .smart-select select,
  .form-field input,
  .form-field select,
  .form-field textarea
):where(:hover:not(:disabled):not([readonly])) {
  border-color: var(--smart-control-border-hover);
}

:is(
  .global-search input,
  .launcher-search input,
  .module-search input,
  .module-category-select,
  .auth-flow-form .form-field input,
  .native-search input,
  .native-period select,
  .native-select select,
  .smart-select select,
  .form-field input,
  .form-field select,
  .form-field textarea
):focus {
  border-color: var(--smart-focus-ring-surface);
  box-shadow: none;
}

:is(
  .global-search input,
  .launcher-search input,
  .module-search input,
  .module-category-select,
  .auth-flow-form .form-field input,
  .native-search input,
  .native-period select,
  .native-select select,
  .smart-select select,
  .form-field input,
  .form-field select,
  .form-field textarea
):is(:user-invalid, [aria-invalid="true"], .is-invalid) {
  border-color: var(--smart-danger);
}

:is(
  .global-search input,
  .launcher-search input,
  .module-search input,
  .module-category-select,
  .auth-flow-form .form-field input,
  .native-search input,
  .native-period select,
  .native-select select,
  .smart-select select,
  .form-field input,
  .form-field select,
  .form-field textarea
):is(:user-invalid, [aria-invalid="true"], .is-invalid):focus-visible {
  outline-color: var(--smart-danger);
}

/* Reference form controls use the same SMART interaction primitive as production inputs. */
:is(.form-control, .form-select) {
  width: 100%;
  min-height: var(--smart-control-height);
  padding: 0 .75rem;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-control);
  color: var(--smart-text);
  background: var(--smart-input-bg);
  box-shadow: none;
  font-size: var(--smart-font-body-sm);
  transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard);
}

:is(.form-control, .form-select).smart-control-sm,
.smart-tom-select.smart-control-sm .ts-control { min-height: var(--smart-control-height-sm); padding-block: .35rem; font-size: var(--smart-font-body-compact); }
.smart-tom-select.smart-control-sm.ts-wrapper { min-height: var(--smart-control-height-sm); }
:is(.form-control, .form-select).smart-control-md,
.smart-tom-select.smart-control-md .ts-control { min-height: var(--smart-control-height); font-size: var(--smart-font-body-sm); }
.smart-tom-select.smart-control-md.ts-wrapper { min-height: var(--smart-control-height); }
:is(.form-control, .form-select).smart-control-lg,
.smart-tom-select.smart-control-lg .ts-control { min-height: var(--smart-control-height-lg); padding-inline: 1rem; font-size: var(--smart-font-compact-title); }
.smart-tom-select.smart-control-lg.ts-wrapper { min-height: var(--smart-control-height-lg); }
:is(.form-control, .form-select).smart-shape-compact,
.smart-tom-select.smart-shape-compact .ts-control { border-radius: var(--smart-radius-compact); }
:is(.form-control, .form-select).smart-shape-pill,
.smart-tom-select.smart-shape-pill .ts-control { border-radius: var(--smart-radius-pill); }

:is(textarea.form-control) { min-height: 104px; padding-block: .7rem; resize: vertical; }

:is(.form-control, .form-select):where(:hover:not(:disabled):not([readonly])) {
  border-color: var(--smart-control-border-hover);
}

:is(.form-control, .form-select):focus {
  border-color: var(--smart-focus-ring-surface);
  box-shadow: none;
}

:is(.form-control, .form-select):focus-visible {
  outline: 3px solid var(--smart-focus-ring);
  outline-offset: 2px;
}

/* Selects can receive pointer focus without matching :focus-visible in Chromium. */
.form-select:focus {
  outline: 3px solid var(--smart-focus-ring);
  outline-offset: 2px;
}

:is(.form-control, .form-select):is(:user-invalid, [aria-invalid="true"], .is-invalid) {
  border-color: var(--smart-danger);
}

:is(.form-control, .form-select):is(:user-invalid, [aria-invalid="true"], .is-invalid):focus-visible {
  outline-color: var(--smart-danger);
}

:where(a, button, input, select, textarea, [tabindex]) { scroll-margin-block: calc(var(--smart-topbar-height) + 1rem) 1rem; }

@media (max-width: 768px) {
  :is(
    .global-search input,
    .launcher-search input,
    .module-search input,
    .module-category-select,
    .auth-flow-form .form-field input,
    .native-search input,
    .native-period select,
    .native-select select,
    .smart-select select,
    .form-field input,
    .form-field select,
    .form-field textarea
  ) { min-height: var(--smart-control-height); font-size: var(--smart-font-title); }

  :is(.form-control, .form-select).smart-control-sm,
  .smart-tom-select.smart-control-sm .ts-control { min-height: var(--smart-control-height); font-size: var(--smart-font-title); }
  .smart-tom-select.smart-control-sm.ts-wrapper { min-height: var(--smart-control-height); }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: Highlight; }
  :is(.feedback-box, .panel-card, .smart-v2-panel, .smart-confirm-dialog) { border-color: CanvasText; }
  :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger) { border: 1px solid ButtonText; }
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1200;
  padding: .55rem .75rem;
  border-radius: var(--smart-radius-md);
  color: var(--smart-on-brand);
  background: var(--smart-sidebar-bg-deep);
  font-size: var(--smart-font-body);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  width: var(--smart-sidebar-width);
  flex-direction: column;
  color: var(--smart-sidebar-text);
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: var(--smart-sidebar-bg);
  transition: transform .24s ease;
}

.sidebar-brand {
  display: flex;
  min-height: var(--smart-topbar-height);
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: var(--smart-on-brand);
  text-decoration: none;
}

.sidebar-brand:link,
.sidebar-brand:visited,
.sidebar-brand:hover,
.sidebar-brand:focus-visible,
.sidebar-brand:active { color: var(--smart-on-brand); text-decoration: none; }

.sidebar-brand img {
  width: 42px;
  height: 50px;
  flex: 0 0 auto;
  object-fit: contain;
}

.smart-wordmark {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  color: var(--smart-on-brand);
  line-height: 1;
}

.smart-wordmark > strong {
  display: block;
  color: var(--smart-on-brand);
  font-size: var(--smart-font-brand);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}

.smart-wordmark-subline {
  display: block;
  margin-top: .25rem;
  color: var(--smart-on-brand);
  font-size: var(--smart-font-body-sm);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.15;
}

.smart-wordmark-location { color: var(--brand-mark-gold); }

.sidebar-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 1rem .8rem;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
  scrollbar-width: thin;
}

.sidebar-label {
  padding: .4rem .75rem .45rem;
  color: var(--smart-sidebar-muted);
  font-size: var(--smart-font-label);
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.sidebar-nav-section + .sidebar-nav-section { margin-top: .85rem; }
.sidebar-nav { display: grid; gap: .22rem; }

.sidebar-group { display: grid; gap: .18rem; }

.sidebar-link {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: .78rem;
  padding: .62rem .76rem;
  border-radius: var(--smart-radius-xs);
  color: var(--smart-sidebar-text);
  font-size: var(--smart-font-label-lg);
  font-weight: 550;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.sidebar-group-toggle {
  width: 100%;
  border: 0;
  text-align: left;
  background: transparent;
}

.sidebar-link .icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 1.2rem;
  color: var(--smart-sidebar-muted);
  opacity: 1;
  stroke-width: 2;
}

.sidebar-link:hover {
  color: var(--smart-on-brand);
  background-color: rgba(255, 255, 255, .055);
}

.sidebar-link.active {
  color: var(--smart-on-brand);
  background-color: var(--smart-sidebar-active);
}

.sidebar-link.active::before {
  position: absolute;
  inset: .58rem auto .58rem 0;
  width: 2px;
  border-radius: 0 var(--smart-radius-pill) var(--smart-radius-pill) 0;
  background: var(--smart-gold);
  content: "";
}

.sidebar-link:hover .icon,
.sidebar-link.active .icon { color: var(--smart-on-brand); }

.sidebar-group-chevron,
.sidebar-launcher-chevron {
  margin-left: auto;
  transition: transform .15s ease;
}
.sidebar-launcher-toggle {
  width: 100%;
  border: 0;
  color: var(--smart-sidebar-text);
  background: transparent;
  font: inherit;
  text-align: left;
}
.sidebar-launcher-toggle .sidebar-link-label { white-space: nowrap; }
.sidebar-launcher-group { display: grid; gap: .14rem; }
.sidebar-launcher-group[hidden] { display: none; }
.sidebar-launcher-group.is-open .sidebar-launcher-toggle,
.sidebar-launcher-toggle.is-panel-open { color: var(--smart-on-brand); background: rgba(255, 255, 255, .075); }
.sidebar-group.is-open .sidebar-group-chevron,
.sidebar-launcher-group.is-open .sidebar-launcher-chevron { transform: rotate(90deg); }
.sidebar-launcher-toggle.is-panel-open { box-shadow: inset -2px 0 0 var(--smart-gold); }

.sidebar-launcher-section { margin-top: .85rem; }

.sidebar-launcher-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem;
  margin: 0 .18rem .52rem;
}

.sidebar-launcher-search label {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--smart-radius-compact);
  background: rgba(255, 255, 255, .055);
}

.sidebar-launcher-search label:hover { border-color: rgba(255, 255, 255, .32); }

.sidebar-launcher-search label:focus-within {
  border-color: rgba(255, 255, 255, .38);
  outline: 3px solid var(--smart-focus-ring-inverse);
  outline-offset: 2px;
  background: rgba(255, 255, 255, .08);
}

.sidebar-launcher-search label > .icon {
  position: absolute;
  left: .68rem;
  width: .95rem;
  height: .95rem;
  color: var(--smart-sidebar-muted);
  pointer-events: none;
}

.sidebar-launcher-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 .55rem 0 2.05rem;
  border: 0;
  outline: 0;
  color: var(--smart-on-brand);
  background: transparent;
  font: inherit;
  font-size: var(--smart-font-body-sm);
}

.sidebar-launcher-search input::placeholder { color: var(--smart-sidebar-muted); opacity: 1; }
.sidebar-launcher-search button {
  display: grid;
  width: 36px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--smart-radius-subtle);
  color: var(--smart-sidebar-text);
  background: rgba(255, 255, 255, .055);
}
.sidebar-launcher-search button[hidden] { display: none; }
.sidebar-launcher-search button:hover { color: var(--smart-on-brand); background: rgba(255, 255, 255, .09); }
.sidebar-launcher-search button .icon { width: .95rem; height: .95rem; }

.sidebar-launcher-submenu { margin-left: 2.1rem; padding-left: .55rem; }
.sidebar-submenu .sidebar-launcher-app,
.sidebar-submenu .sidebar-launcher-app:link,
.sidebar-submenu .sidebar-launcher-app:visited {
  min-height: 40px;
  padding: .42rem .55rem;
}
.sidebar-launcher-app[hidden] { display: none; }
.sidebar-launcher-app > span:not(.sidebar-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-launcher-app .sidebar-badge { font-size: var(--smart-font-caption); }
.sidebar-launcher-empty { margin: .25rem .25rem .55rem; padding: .65rem; color: var(--smart-sidebar-muted); font-size: var(--smart-font-meta); text-align: center; }

.sidebar-submenu {
  display: grid;
  gap: .12rem;
  margin: 0 0 .2rem 2.72rem;
  padding-left: .7rem;
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.sidebar-submenu[hidden] { display: none; }

.sidebar-sublink,
.sidebar-sublink:link,
.sidebar-sublink:visited {
  display: flex;
  min-height: 40px;
  align-items: center;
  padding: .42rem .55rem;
  border-radius: var(--smart-radius-xs);
  color: var(--smart-sidebar-muted);
  font-size: var(--smart-font-control);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.sidebar-sublink:hover {
  color: var(--smart-on-brand);
  background: rgba(255, 255, 255, .05);
  text-decoration: none;
}

.sidebar-sublink.active,
.sidebar-sublink.active:link,
.sidebar-sublink.active:visited {
  color: var(--smart-on-brand);
  background: rgba(255, 255, 255, .085);
  font-weight: 750;
  text-decoration: none;
}

.sidebar-sublink:active {
  color: var(--smart-on-brand);
  background: rgba(255, 255, 255, .1);
  text-decoration: none;
}

.sidebar-sublink:focus-visible { color: var(--smart-on-brand); text-decoration: none; }

.app-sidebar :where(a, button):focus-visible {
  outline: 3px solid var(--smart-focus-ring-inverse);
  outline-offset: 2px;
}

.sidebar-badge {
  margin-left: auto;
  min-width: 1.45rem;
  padding: .1rem .32rem;
  border-radius: var(--smart-radius-tight);
  color: var(--smart-navy-950);
  background: var(--smart-gold);
  font-size: var(--smart-font-label);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.sidebar-support {
  flex: 0 0 auto;
  margin: 0 .8rem .8rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: var(--smart-font-body-md);
}

.sidebar-support-trigger {
  display: flex;
  min-height: 44px;
  width: 100%;
  align-items: center;
  gap: .65rem;
  padding: .55rem .68rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--smart-radius-subtle);
  color: var(--smart-sidebar-text);
  background: rgba(255, 255, 255, .055);
  font: inherit;
  font-weight: 700;
  text-align: left;
  transition: background-color var(--smart-motion-fast) var(--smart-ease-standard), border-color var(--smart-motion-fast) var(--smart-ease-standard), color var(--smart-motion-fast) var(--smart-ease-standard);
}
.sidebar-support-trigger:hover,
.sidebar-support-trigger[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .25);
  color: var(--smart-on-brand);
  background: rgba(255, 255, 255, .095);
}
.sidebar-support-trigger .icon { width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; }

.sidebar-help-popover {
  display: grid;
  gap: .45rem;
  margin-bottom: .55rem;
  padding: .65rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--smart-radius-lg);
  color: var(--smart-sidebar-text);
  background: rgba(255, 255, 255, .07);
}
.sidebar-help-popover[hidden] { display: none; }
.sidebar-help-popover header { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: .5rem; }
.sidebar-help-popover strong { color: var(--smart-on-brand); font-size: var(--smart-font-body-compact); }
.sidebar-help-popover p { margin: 0; color: var(--smart-sidebar-text); font-size: var(--smart-font-meta); line-height: 1.45; }
.sidebar-help-popover header button { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 0; border-radius: var(--smart-radius-xs); color: var(--smart-sidebar-muted); background: transparent; }
.sidebar-help-popover header button:hover { color: var(--smart-on-brand); background: rgba(255, 255, 255, .08); }
.sidebar-help-popover header button .icon { width: .95rem; height: .95rem; }

.sidebar-flyout {
  position: fixed;
  left: calc(var(--smart-sidebar-folded-width) + 10px);
  z-index: 1050;
  width: 246px;
  padding: .65rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--smart-radius-lg);
  color: var(--smart-sidebar-text);
  background: var(--smart-sidebar-bg);
  box-shadow: 0 14px 32px rgba(7, 26, 61, .24);
}

.sidebar-flyout[hidden] { display: none; }
.sidebar-flyout-title { padding: .3rem .55rem .55rem; color: var(--smart-on-brand); font-size: var(--smart-font-body-compact); font-weight: 750; }
.sidebar-flyout nav { display: grid; gap: .12rem; }
.sidebar-flyout .sidebar-sublink { min-height: 40px; }

.app-launcher-panel {
  position: fixed;
  left: calc(var(--smart-sidebar-width) + 10px);
  z-index: 1055;
  display: flex;
  width: min(390px, calc(100vw - var(--smart-sidebar-width) - 24px));
  max-height: min(540px, calc(100vh - 24px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-xl);
  color: var(--smart-text);
  background: var(--smart-surface-elevated);
  box-shadow: 0 14px 32px rgba(7, 26, 61, .16);
}

.app-launcher-panel[hidden] { display: none; }
.launcher-panel-header { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--smart-border); }
.launcher-panel-header > div > span { color: var(--smart-primary); font-size: var(--smart-font-caption); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.launcher-panel-header h2 { margin: .2rem 0 .22rem; font-size: var(--smart-font-title); }
.launcher-panel-header p { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.45; }
.launcher-panel-header button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid transparent; border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); background: transparent; }
.launcher-panel-header button:hover { border-color: var(--smart-border); color: var(--smart-text); background: var(--smart-row-hover); }
.launcher-search { position: relative; display: block; margin: .8rem .8rem .45rem; }
.launcher-search .icon { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; color: var(--smart-text-muted); transform: translateY(-50%); }
.launcher-search input { width: 100%; min-height: 44px; padding: 0 .75rem 0 2.3rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-md); color: var(--smart-text); background: var(--smart-input-bg); font-size: var(--smart-font-body-sm); }
.launcher-app-list { display: grid; overflow-y: auto; padding: .25rem .55rem .7rem; }

.launcher-app-link,
.launcher-app-link:link,
.launcher-app-link:visited {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  min-height: 62px;
  align-items: center;
  gap: .7rem;
  padding: .58rem .6rem;
  border-radius: var(--smart-radius-subtle);
  color: var(--smart-text);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.launcher-app-link:hover { color: var(--smart-text); background: var(--smart-row-hover); text-decoration: none; }
.launcher-app-link:active { color: var(--smart-text); background: var(--smart-blue-soft); text-decoration: none; }
.launcher-app-link:focus-visible { color: var(--smart-text); text-decoration: none; }
.launcher-app-link.active { background: var(--smart-blue-soft); font-weight: 700; }
.launcher-app-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); color: var(--smart-primary); background: var(--smart-surface); }
.launcher-app-icon .icon { width: 1.05rem; height: 1.05rem; }
.launcher-app-copy { display: grid; min-width: 0; gap: .14rem; }
.launcher-app-copy strong { font-size: var(--smart-font-body-sm); }
.launcher-app-copy small { color: var(--smart-text-secondary); font-size: var(--smart-font-caption); font-weight: 400; line-height: 1.35; }
.launcher-app-badge { display: grid; min-width: 1.5rem; height: 1.35rem; place-items: center; padding: 0 .3rem; border-radius: var(--smart-radius-xs); color: var(--smart-on-gold); background: var(--smart-gold); font-size: var(--smart-font-caption); font-weight: 800; }
.launcher-app-external { width: 1rem; height: 1rem; color: var(--smart-text-muted); }
.launcher-empty { margin: 0; padding: 1rem; color: var(--smart-text-muted); font-size: var(--smart-font-meta); text-align: center; }
.app-main {
  min-height: 100vh;
  margin-left: var(--smart-sidebar-width);
}

@media (min-width: 1025px) {
  body.sidebar-folded .app-sidebar { width: var(--smart-sidebar-folded-width); }
  body.sidebar-folded .app-main { margin-left: var(--smart-sidebar-folded-width); }
  body.sidebar-folded .sidebar-brand { justify-content: center; padding-inline: .5rem; }
  body.sidebar-folded .sidebar-brand img { width: 38px; }
  body.sidebar-folded .smart-wordmark,
  body.sidebar-folded .sidebar-label,
  body.sidebar-folded .sidebar-link-label,
  body.sidebar-folded .sidebar-badge,
  body.sidebar-folded .sidebar-launcher-search,
  body.sidebar-folded .sidebar-launcher-empty,
  body.sidebar-folded .sidebar-submenu { display: none; }
  body.sidebar-folded .sidebar-scroll { padding-inline: .55rem; }
  body.sidebar-folded .sidebar-nav { gap: .32rem; }
  body.sidebar-folded .sidebar-link { justify-content: center; min-height: 46px; padding-inline: .55rem; }
  body.sidebar-folded .sidebar-link .icon { width: 1.3rem; height: 1.3rem; flex-basis: 1.3rem; }
  body.sidebar-folded :is(.sidebar-group-chevron, .sidebar-launcher-chevron) { display: none; }
  body.sidebar-folded .app-launcher-panel { left: calc(var(--smart-sidebar-folded-width) + 10px); }
  body.sidebar-folded .sidebar-support { margin-inline: .55rem; }
  body.sidebar-folded .sidebar-support-trigger { justify-content: center; padding-inline: .55rem; }
  body.sidebar-folded .sidebar-support-label { display: none; }
  body.sidebar-folded .sidebar-help-popover { position: fixed; bottom: .8rem; left: calc(var(--smart-sidebar-folded-width) + 10px); z-index: 1060; width: 246px; margin: 0; background: var(--smart-sidebar-bg); box-shadow: 0 14px 32px rgba(7, 26, 61, .24); }
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  min-height: var(--smart-topbar-height);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.5rem;
  border-bottom: 1px solid var(--smart-border);
  background: var(--smart-surface-elevated);
  backdrop-filter: blur(14px);
}

.topbar-left, .topbar-actions { display: flex; align-items: center; gap: .65rem; }

.sidebar-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-lg);
  background: var(--smart-surface);
  color: var(--smart-text);
}

.global-search {
  position: relative;
  width: min(34vw, 410px);
}

.global-search .icon {
  position: absolute;
  top: 50%;
  left: .85rem;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--smart-text-secondary);
  transform: translateY(-50%);
}

.global-search input {
  width: 100%;
  height: 42px;
  padding: 0 1rem 0 2.55rem;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-panel);
  background: var(--smart-input-bg);
  color: var(--smart-text);
  font-size: var(--smart-font-compact-title);
}

.global-search input:focus {
  border-color: var(--smart-focus-ring-surface);
  box-shadow: none;
}

.topbar-icon {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-lg);
  background: var(--smart-surface-elevated);
  color: var(--smart-text-secondary);
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 3px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--smart-surface-elevated);
  border-radius: 999px;
  color: var(--smart-on-primary);
  background: var(--smart-red);
  font-size: var(--smart-font-caption);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.notification-badge[hidden] { display: none; }

.theme-customizer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1085;
  width: min(430px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-dialog) 0 0 var(--smart-radius-dialog);
  overflow: hidden;
  color: var(--smart-text);
  background: var(--smart-surface-elevated);
  box-shadow: -18px 0 48px rgba(7, 26, 61, .16);
}

.theme-customizer:not([hidden]) { display: block; }
.theme-customizer[hidden] { display: none; }
.theme-customizer-backdrop { position: fixed; inset: 0; z-index: 1080; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(7, 26, 61, .42); cursor: default; }
.theme-customizer-backdrop[hidden] { display: none; }
body.theme-customizer-open { overflow: hidden; }

.theme-customizer-form { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.theme-customizer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .95rem; border-bottom: 1px solid var(--smart-divider); }
.theme-customizer-header h2 { margin: 0 0 .25rem; font-size: var(--smart-font-title); letter-spacing: -.02em; }
.theme-customizer-header p { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-sm); line-height: 1.45; }
.theme-customizer-header .topbar-icon { flex: 0 0 auto; }
.theme-customizer-body { overflow-y: auto; padding: 1rem 1.1rem 1.25rem; }
.theme-customizer-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-customizer-section + .theme-customizer-section { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--smart-divider); }
.theme-customizer-section legend { margin: 0; color: var(--smart-text); font-size: var(--smart-font-compact-title); font-weight: 800; }
.theme-customizer-section > p { margin: .2rem 0 .7rem; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.45; }

.theme-scheme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.theme-scheme-option { min-width: 0; cursor: pointer; }
.theme-scheme-option > span { display: grid; min-height: 92px; align-content: center; justify-items: start; gap: .2rem; padding: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard); }
.theme-scheme-option .icon { width: 1.05rem; height: 1.05rem; margin-bottom: .2rem; color: var(--smart-text-secondary); }
.theme-scheme-option strong { font-size: var(--smart-font-body-compact); }
.theme-scheme-option small { color: var(--smart-text-muted); font-size: var(--smart-font-micro); line-height: 1.3; }
.theme-scheme-option:hover > span { border-color: var(--smart-control-border-hover); background: var(--smart-row-hover); }
.theme-scheme-option input:checked + span { border-color: var(--smart-primary); background: var(--smart-info-soft); box-shadow: inset 0 0 0 1px var(--smart-primary); }
.theme-scheme-option input:checked + span .icon { color: var(--smart-primary); }
.theme-scheme-option input:focus-visible + span { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }

.theme-accent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.theme-accent-option { min-width: 0; cursor: pointer; }
.theme-accent-card { display: grid; gap: .55rem; padding: .65rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard); }
.theme-accent-name { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--smart-text); font-size: var(--smart-font-body-compact); font-weight: 750; }
.theme-accent-name .icon { width: .95rem; height: .95rem; color: var(--smart-primary); opacity: 0; }
.theme-palette-strip { display: grid; height: 22px; overflow: hidden; grid-template-columns: repeat(4, 1fr); border: 1px solid color-mix(in srgb, var(--smart-control-border) 45%, transparent); border-radius: var(--smart-radius-compact); }
.theme-palette-strip i, .theme-palette-detail i { display: block; background: var(--theme-swatch); }
.theme-accent-option:hover .theme-accent-card { border-color: var(--smart-control-border-hover); background: var(--smart-row-hover); }
.theme-accent-option input:checked + .theme-accent-card { border-color: var(--smart-primary); background: var(--smart-info-soft); box-shadow: inset 0 0 0 1px var(--smart-primary); }
.theme-accent-option input:checked + .theme-accent-card .theme-accent-name .icon { opacity: 1; }
.theme-accent-option input:focus-visible + .theme-accent-card { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }

.theme-palette-detail { margin-top: .7rem; padding: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-table-header); }
.theme-palette-detail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.theme-palette-detail > div span { color: var(--smart-text-secondary); font-size: var(--smart-font-caption); }
.theme-palette-detail > div strong { font-size: var(--smart-font-body-compact); }
.theme-palette-detail ul { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; list-style: none; }
.theme-palette-detail li { display: grid; min-width: 0; gap: .2rem; }
.theme-palette-detail li i { width: 100%; height: 20px; border: 1px solid color-mix(in srgb, var(--smart-control-border) 40%, transparent); border-radius: var(--smart-radius-xs); }
.theme-palette-detail li span { color: var(--smart-text-secondary); font-size: var(--smart-font-caption); }
.theme-palette-detail code { overflow: hidden; color: var(--smart-text); font-size: var(--smart-font-caption); text-overflow: ellipsis; }
.theme-customizer-footer { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .85rem 1.1rem; border-top: 1px solid var(--smart-divider); background: var(--smart-surface-elevated); }
.theme-customizer-footer .icon { width: 1rem; height: 1rem; }

.theme-standalone-tools { position: fixed; top: max(.75rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); z-index: 1030; }
.theme-standalone-tools .topbar-icon { box-shadow: var(--smart-control-shadow-hover); }
.login-page .theme-standalone-tools .topbar-icon { background: var(--smart-surface-elevated); }

[data-bs-theme="dark"] .theme-customizer { box-shadow: var(--smart-shadow-customizer); }

.notification-dropdown { position: relative; }

.language-dropdown { position: relative; }
.language-toggle { font-size: var(--smart-font-body-sm); font-weight: 800; letter-spacing: .04em; }
.language-panel {
  width: 218px;
  margin-top: .55rem !important;
  padding: .4rem;
  overflow: hidden;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-xl);
  color: var(--smart-text);
  background: var(--smart-surface-elevated);
  box-shadow: 0 14px 34px rgba(7, 26, 61, .16);
}
.language-option {
  display: grid;
  width: 100%;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem;
  border: 0;
  border-radius: var(--smart-radius-md);
  color: var(--smart-text-secondary);
  background: transparent;
  font-size: var(--smart-font-body-compact);
  font-weight: 650;
  text-align: left;
  transition: background-color .16s ease, color .16s ease;
}
.language-option small { color: var(--smart-text-muted); font-size: var(--smart-font-small); font-weight: 800; letter-spacing: .04em; }
.language-option:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.language-option[aria-checked="true"] { color: var(--smart-text); background: var(--smart-info-soft); font-weight: 800; }
.language-option[aria-checked="true"] small { color: var(--smart-info); }

.notification-panel {
  width: min(390px, calc(100vw - 24px));
  max-height: 480px;
  margin-top: .55rem !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-card);
  color: var(--smart-text);
  background: var(--smart-surface-elevated);
  box-shadow: 0 18px 44px rgba(7, 26, 61, .18);
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--smart-border);
}

.notification-header h2 { margin: 0; color: var(--smart-text); font-size: var(--smart-font-title-sm); }
.notification-header p { margin: .18rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-meta); }
.notification-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--smart-radius-control);
  color: var(--smart-text-secondary);
  background: transparent;
}
.notification-close:hover { border-color: var(--smart-border); color: var(--smart-text); background: var(--smart-row-hover); }
.notification-close:active { color: var(--smart-primary-active); background: var(--smart-blue-soft); }
.notification-close .icon { width: 1.1rem; height: 1.1rem; }

.notification-list {
  max-height: 352px;
  overflow-y: auto;
  scrollbar-color: var(--smart-control-border) transparent;
  scrollbar-width: thin;
}

.notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .7rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--smart-divider);
  background: var(--smart-surface-elevated);
  transition: background-color .16s ease;
}
.notification-item:hover { background: var(--smart-row-hover); }
.notification-item-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--smart-radius-lg);
  color: var(--smart-info);
  background: var(--smart-info-soft);
}
.notification-item.is-unread .notification-item-icon { color: var(--smart-danger); background: var(--smart-danger-soft); }
.notification-item-icon .icon { width: 1.1rem; height: 1.1rem; }
.notification-item h3 { margin: 0; color: var(--smart-text); font-size: var(--smart-font-body-sm); line-height: 1.25; }
.notification-item.is-unread h3 { font-weight: 800; }
.notification-item p { margin: .15rem 0 .25rem; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.3; }
.notification-item time { color: var(--smart-text-muted); font-size: var(--smart-font-caption); line-height: 1.2; }
.notification-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
  padding: .55rem 1rem;
  border-top: 1px solid var(--smart-border);
  background: var(--smart-surface-elevated);
}
.notification-footer :is(.btn-smart-primary, .btn-smart-light) { width: auto; min-height: 44px; padding-inline: .75rem; font-size: var(--smart-font-body-sm); white-space: nowrap; }
.notification-mark-all:disabled { border-color: var(--smart-border); color: var(--smart-text-muted); background: var(--smart-surface); cursor: not-allowed; transform: none; box-shadow: none; }

.all-notifications-list { display: grid; }
.all-notification-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--smart-divider);
  background: var(--smart-surface);
  transition: background-color .16s ease;
}
.all-notification-item:hover { background: var(--smart-row-hover); }
.all-notification-item:last-child { border-bottom: 0; }
.all-notification-item.is-unread .notification-item-icon { color: var(--smart-danger); background: var(--smart-danger-soft); }
.all-notification-copy h2 { margin: 0; color: var(--smart-text); font-size: var(--smart-font-label-lg); }
.all-notification-item.is-unread h2 { font-weight: 800; }
.all-notification-copy p { margin: .22rem 0 .4rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.5; }
.all-notification-copy time { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.notification-page-heading { align-items: flex-end; }
.notification-center { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1rem; }
.notification-filters { align-self: start; overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.notification-filters > div { display: grid; gap: .15rem; padding: .9rem; border-bottom: 1px solid var(--smart-divider); }
.notification-filters > div strong { font-size: var(--smart-font-body); }
.notification-filters > div span { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.notification-filters nav { display: grid; padding: .45rem; }
.notification-filters nav button { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .65rem; border: 0; border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); background: transparent; font: inherit; font-size: var(--smart-font-body-sm); font-weight: 700; text-align: left; }
.notification-filters nav button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.notification-filters nav button.active { color: var(--smart-primary); background: var(--smart-info-soft); }
.notification-filters nav button span { min-width: 1.4rem; padding: .1rem .35rem; border-radius: 999px; color: var(--smart-text-muted); background: var(--smart-surface); font-size: var(--smart-font-meta); text-align: center; }
.notification-filters > :is(a, .notification-preferences-trigger) { display: flex; width: 100%; min-height: var(--smart-control-height-sm); align-items: center; gap: .4rem; padding: .6rem .9rem; border: 0; border-top: 1px solid var(--smart-divider); color: var(--smart-primary); background: transparent; font-size: var(--smart-font-body-compact); font-weight: 750; text-align: start; text-decoration: none; }
.notification-filters > :is(a, .notification-preferences-trigger):hover { color: var(--smart-primary-hover); background: var(--smart-row-hover); }
.notification-filters > :is(a, .notification-preferences-trigger):focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: -3px; }
.notification-preferences-trigger .icon { width: .9rem; height: .9rem; flex: 0 0 auto; }
.notification-feed { overflow: hidden; }
.notification-feed > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--smart-divider); }
.notification-feed > header h2 { margin: 0; font-size: var(--smart-font-label-lg); }
.notification-feed > header p { margin: .18rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.notification-search { display: flex; width: min(280px, 42%); min-height: 40px; align-items: center; gap: .5rem; padding: 0 .65rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-md); background: var(--smart-input-bg); }
.notification-search .icon { width: .95rem; height: .95rem; flex: 0 0 auto; color: var(--smart-text-muted); }
.notification-search input { width: 100%; border: 0; outline: 0; color: var(--smart-text); background: transparent; font: inherit; font-size: var(--smart-font-body-compact); }
.notification-search:has(input:focus-visible) { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.notification-feed .all-notification-item { position: relative; grid-template-columns: 42px minmax(0, 1fr) 44px; align-items: start; gap: .75rem; min-height: 112px; padding: .9rem 1rem; }
.notification-feed .all-notification-item.is-unread { background: color-mix(in srgb, var(--smart-info-soft) 56%, var(--smart-surface)); }
.notification-feed .all-notification-item:focus-visible { z-index: 1; outline: 3px solid var(--smart-focus-ring); outline-offset: -3px; }
.notification-item-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.notification-item-heading time { white-space: nowrap; }
.notification-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notification-read-toggle { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: var(--smart-radius-md); color: var(--smart-primary); background: transparent; }
.notification-read-toggle span { width: 10px; height: 10px; border: 2px solid var(--smart-control-border); border-radius: 50%; background: var(--smart-surface); }
.all-notification-item.is-unread .notification-read-toggle span { border-color: var(--smart-primary); background: var(--smart-primary); box-shadow: 0 0 0 4px var(--smart-info-soft); }
.notification-read-toggle:hover { background: var(--smart-row-hover); }
.notification-read-toggle:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 1px; }
.notification-empty { min-height: 180px; }

.semester-picker {
  display: flex;
  height: 42px;
  align-items: center;
  gap: .5rem;
  padding: 0 .85rem;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-lg);
  background: var(--smart-surface-elevated);
  color: var(--smart-text);
  font-size: var(--smart-font-body-compact);
  font-weight: 650;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-left: .25rem;
}

.user-avatar {
  display: grid;
  width: 39px;
  height: 39px;
  min-width: 39px;
  flex: 0 0 39px;
  aspect-ratio: 1;
  box-sizing: border-box;
  place-items: center;
  border: 3px solid color-mix(in srgb, var(--smart-primary) 18%, var(--smart-surface));
  border-radius: 50%;
  color: var(--smart-on-primary);
  background: var(--smart-primary);
  font-size: var(--smart-font-body-compact);
  font-weight: 800;
}

.user-meta strong, .user-meta span { display: block; }
.user-meta strong { color: var(--smart-text); font-size: var(--smart-font-body); }
.user-meta span { color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }

.app-content { padding: 1.35rem 1.5rem 2.5rem; }
.content-container { width: 100%; max-width: 1620px; margin: 0 auto; }

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.eyebrow {
  margin-bottom: .25rem;
  color: var(--smart-link);
  font-size: var(--smart-font-body-compact);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-heading h1 { margin: 0; font-size: var(--smart-font-heading-main); letter-spacing: -.035em; }
.page-heading p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-label-lg); }

.btn-smart-primary,
.btn-smart-light,
.btn-smart-gold,
.btn-smart-danger {
  display: inline-flex;
  min-height: var(--smart-control-height);
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .9rem;
  border: 0;
  border-radius: var(--smart-radius-control);
  font-size: var(--smart-font-body);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--smart-motion-fast) var(--smart-ease-standard), border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard), color var(--smart-motion-fast) var(--smart-ease-standard), box-shadow var(--smart-motion-fast) var(--smart-ease-standard);
}

:is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger).btn-smart-sm {
  min-height: var(--smart-control-height-sm);
  padding: .4rem .7rem;
  font-size: var(--smart-font-body-compact);
}
:is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger).btn-smart-md {
  min-height: var(--smart-control-height);
  padding: .55rem .9rem;
  font-size: var(--smart-font-body-sm);
}
:is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger).btn-smart-lg {
  min-height: var(--smart-control-height-lg);
  padding-inline: 1.15rem;
  font-size: var(--smart-font-label-lg);
}
:is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger).smart-shape-compact { border-radius: var(--smart-radius-compact); }
:is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger).smart-shape-pill { border-radius: var(--smart-radius-pill); }
.btn-smart-square { width: var(--smart-control-height); min-width: var(--smart-control-height); padding-inline: 0; }
.btn-smart-square.btn-smart-sm { width: var(--smart-control-height-sm); min-width: var(--smart-control-height-sm); }
.btn-smart-square.btn-smart-md { width: var(--smart-control-height); min-width: var(--smart-control-height); }
.btn-smart-square.btn-smart-lg { width: var(--smart-control-height-lg); min-width: var(--smart-control-height-lg); }

.btn-smart-primary,
.btn-smart-primary:link,
.btn-smart-primary:visited,
.btn-smart-gold,
.btn-smart-gold:link,
.btn-smart-gold:visited { color: var(--smart-on-primary); background: var(--smart-primary); box-shadow: none; text-decoration: none; }
.btn-smart-light,
.btn-smart-light:link,
.btn-smart-light:visited { border: 1px solid var(--smart-control-border); color: var(--smart-text); background: var(--smart-surface-elevated); text-decoration: none; }
.btn-smart-primary:hover,
.btn-smart-gold:hover { color: var(--smart-on-primary); background: var(--smart-primary-hover); box-shadow: var(--smart-control-shadow-hover); text-decoration: none; transform: translateY(-1px); }
.btn-smart-primary:active,
.btn-smart-gold:active { color: var(--smart-on-primary); background: var(--smart-primary-active); box-shadow: var(--smart-control-shadow-active); text-decoration: none; transform: translateY(0); }
.btn-smart-light:hover { border-color: var(--smart-primary); color: var(--smart-primary-hover); background: var(--smart-app-bg); box-shadow: var(--smart-control-shadow-hover); text-decoration: none; transform: translateY(-1px); }
.btn-smart-light:active { border-color: var(--smart-primary-active); color: var(--smart-primary-active); background: var(--smart-blue-soft); box-shadow: var(--smart-control-shadow-active); text-decoration: none; transform: translateY(0); }
.btn-smart-primary:focus-visible,
.btn-smart-light:focus-visible,
.btn-smart-gold:focus-visible,
.btn-smart-danger:focus-visible { text-decoration: none; }
.btn-smart-danger,
.btn-smart-danger:link,
.btn-smart-danger:visited { border-color: var(--smart-danger-action); color: var(--smart-on-danger); background: var(--smart-danger-action); text-decoration: none; }
.btn-smart-danger:hover { border-color: var(--smart-danger-action-hover); color: var(--smart-on-danger); background: var(--smart-danger-action-hover); box-shadow: var(--smart-control-shadow-hover); text-decoration: none; transform: translateY(-1px); }
.btn-smart-danger:active { border-color: var(--smart-danger-action-active); color: var(--smart-on-danger); background: var(--smart-danger-action-active); box-shadow: var(--smart-control-shadow-active); text-decoration: none; transform: translateY(0); }
.btn-smart-primary:disabled,
.btn-smart-light:disabled,
.btn-smart-gold:disabled,
.btn-smart-danger:disabled,
:is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger)[aria-disabled="true"] { cursor: not-allowed; opacity: .64; transform: none; box-shadow: none; }

body[data-page="dashboard"] :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold) {
  box-shadow: var(--smart-shadow-button-rest);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body[data-page="dashboard"] :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):hover {
  transform: translateY(-1px);
  box-shadow: var(--smart-shadow-button-hover);
}
body[data-page="dashboard"] :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):active {
  transform: translateY(0);
  box-shadow: var(--smart-shadow-button-active);
}

.campus-banner .btn-smart-gold { color: var(--smart-on-gold); background: var(--smart-gold); }
.campus-banner .btn-smart-gold:hover { color: var(--smart-on-gold); background: var(--smart-gold-hover); }
.campus-banner .btn-smart-gold:active { color: var(--smart-on-gold); background: var(--smart-gold-active); }
.campus-banner .btn-smart-gold:focus-visible { outline-color: var(--smart-on-brand); }

.campus-banner .btn-smart-light,
.campus-banner .btn-smart-light:link,
.campus-banner .btn-smart-light:visited {
  border-color: var(--smart-control-border);
  color: var(--smart-text);
  background: var(--smart-surface-elevated);
  box-shadow: var(--smart-shadow-button-rest);
  text-decoration: none;
}

.campus-banner .btn-smart-light:hover {
  border-color: var(--smart-primary);
  color: var(--smart-text);
  background: var(--smart-app-bg);
  box-shadow: var(--smart-shadow-button-hover);
  text-decoration: none;
  transform: translateY(-1px);
}

.campus-banner .btn-smart-light:active {
  border-color: var(--smart-primary-active);
  color: var(--smart-text);
  background: var(--smart-blue-soft);
  box-shadow: var(--smart-shadow-button-active);
  text-decoration: none;
  transform: translateY(0);
}

.campus-banner .btn-smart-light:focus-visible {
  color: var(--smart-text);
  text-decoration: none;
  outline: 3px solid var(--smart-on-brand);
  outline-offset: 2px;
}

.topbar-icon:hover,
.sidebar-toggle:hover,
.semester-picker:hover { border-color: var(--smart-primary); color: var(--smart-primary-hover); background: var(--smart-blue-soft); }
.topbar-icon:active,
.sidebar-toggle:active,
.semester-picker:active { border-color: var(--smart-primary-active); color: var(--smart-primary-active); background: var(--smart-blue-soft); }

.campus-banner {
  --campus-banner-min-height: clamp(286px, 22vw, 300px);
  position: relative;
  min-height: var(--campus-banner-min-height);
  margin-bottom: 1.15rem;
  overflow: hidden;
  border-radius: var(--smart-radius-hero);
  background: var(--smart-sidebar-bg-deep);
  box-shadow: var(--smart-card-shadow);
}

.campus-banner::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--smart-sidebar-bg-deep) 94%, transparent) 0%,
      color-mix(in srgb, var(--smart-sidebar-bg-deep) 84%, transparent) 42%,
      color-mix(in srgb, var(--smart-sidebar-bg) 68%, transparent) 58%,
      color-mix(in srgb, var(--smart-primary) 14%, transparent) 82%,
      color-mix(in srgb, var(--smart-primary) 7%, transparent) 100%),
    linear-gradient(color-mix(in srgb, var(--smart-sidebar-bg) 16%, transparent), color-mix(in srgb, var(--smart-sidebar-bg) 16%, transparent)),
    url("../images/heroes/campus-hero.webp") center 55% / cover no-repeat;
}

.campus-banner::after {
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 280px;
  height: 280px;
  border: 34px solid rgba(245, 186, 33, .08);
  border-radius: 50%;
  content: "";
}

.campus-banner-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
  display: flex;
  min-height: var(--campus-banner-min-height);
  flex-direction: column;
  padding: 1.55rem 1.7rem 1.875rem;
  color: var(--smart-on-brand);
}

.campus-chip {
  display: inline-flex;
  align-items: center;
  margin-bottom: .75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--smart-sidebar-text);
  font-size: var(--smart-font-body-compact);
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: none;
}

.campus-chip i { display: none; }
.campus-banner h2 { max-width: 540px; margin: 0 0 .45rem; color: var(--smart-on-brand); font-size: var(--smart-font-heading-wide-lg); letter-spacing: -.04em; line-height: 1.08; }
.campus-banner p { max-width: 560px; margin: 0 0 1rem; color: var(--smart-sidebar-text); font-size: var(--smart-font-compact-title); line-height: 1.55; }
.banner-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; }

.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }

.metric-card,
.panel-card,
.module-card,
.schedule-card {
  border: 1px solid var(--smart-line);
  border-radius: var(--smart-radius-card);
  background: var(--smart-surface);
  box-shadow: var(--smart-card-shadow);
}

.metric-card { position: relative; min-height: 116px; overflow: hidden; padding: 1rem; }
.tone-blue { --metric-color: var(--smart-primary); --metric-soft: var(--smart-blue-soft); --module-color: var(--smart-primary); --module-soft: var(--smart-blue-soft); }
.tone-teal { --metric-color: var(--smart-teal); --metric-soft: var(--smart-success-soft); --module-color: var(--smart-teal); --module-soft: var(--smart-success-soft); }
.tone-purple { --metric-color: var(--smart-purple); --metric-soft: var(--smart-purple-soft); --module-color: var(--smart-purple); --module-soft: var(--smart-purple-soft); }
.tone-gold { --metric-color: var(--smart-gold-deep); --metric-soft: var(--smart-warning-soft); --module-color: var(--smart-gold-deep); --module-soft: var(--smart-warning-soft); }
.tone-cyan { --metric-color: var(--smart-cyan); --metric-soft: #e2f8fb; --module-color: var(--smart-cyan); --module-soft: #e2f8fb; }
.tone-red { --metric-color: var(--smart-red); --metric-soft: var(--smart-danger-soft); --module-color: var(--smart-red); --module-soft: var(--smart-danger-soft); }
.tone-orange { --metric-color: #f08c00; --metric-soft: #fff1d6; --module-color: #f08c00; --module-soft: #fff1d6; }
.tone-navy { --metric-color: var(--smart-navy-900); --metric-soft: #e7ecf4; --module-color: var(--smart-navy-900); --module-soft: #e7ecf4; }
.tone-neutral { --metric-color: #9cadc4; --metric-soft: var(--smart-ring-track); --module-color: #9cadc4; --module-soft: var(--smart-ring-track); }
.course-time.tone-blue, .timeline-date.tone-blue { color: var(--smart-primary); background: var(--smart-blue-soft); }
.course-time.tone-teal, .timeline-date.tone-teal { color: var(--smart-teal); background: var(--smart-success-soft); }
.course-time.tone-purple, .timeline-date.tone-purple { color: var(--smart-purple-deep); background: var(--smart-purple-soft); }
.timeline-date.tone-purple { color: var(--smart-text); }
.course-time.tone-gold, .timeline-date.tone-gold { color: var(--smart-warning); background: var(--smart-warning-soft); }
.legend-label i.tone-blue { --legend: var(--smart-primary); }
.legend-label i.tone-teal { --legend: var(--smart-teal); }
.legend-label i.tone-purple { --legend: var(--smart-purple); }
.legend-label i.tone-gold { --legend: var(--smart-gold); }
.legend-label i.tone-cyan { --legend: var(--smart-cyan); }
.legend-label i.tone-neutral { --legend: #9cadc4; }
.table-avatar.tone-teal { background: var(--smart-teal); }
.table-avatar.tone-purple { background: var(--smart-purple); }
.progress-bar.tone-blue { background: var(--smart-primary); }
.metric-card::after { position: absolute; right: -26px; bottom: -34px; width: 76px; height: 76px; border: 10px solid var(--metric-soft, var(--smart-primary-soft)); border-radius: 50%; opacity: .55; content: ""; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.metric-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; overflow: hidden; border-radius: var(--smart-radius-lg); color: var(--metric-color, var(--smart-blue)); background: var(--metric-soft, var(--smart-blue-soft)); }
.metric-icon .icon { display: block; width: 1.15rem; height: 1.15rem; margin: auto; }
.metric-trend { color: var(--smart-teal); font-size: var(--smart-font-meta); font-weight: 750; }
.metric-label { margin-top: .75rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-sm); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.metric-value { margin-top: .05rem; font-size: var(--smart-font-display-sm); font-weight: 800; letter-spacing: -.035em; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr); gap: 1rem; }
.dashboard-main { display: grid; gap: 1rem; min-width: 0; }
.dashboard-side { display: grid; align-content: start; gap: 1rem; min-width: 0; }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 1rem; }

.panel-card { overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.05rem .7rem; }
.panel-header :is(h2, h3) { margin: 0; font-size: var(--smart-font-title-sm); }
.panel-header p { margin: .15rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.panel-body { padding: .4rem 1.05rem 1rem; }
.panel-action { color: var(--smart-link); font-size: var(--smart-font-body-sm); font-weight: 700; text-decoration: none; }
.panel-action:hover { color: var(--smart-link-hover); }

.quick-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.quick-module { position: relative; display: block; width: 100%; min-height: 114px; padding: .85rem; overflow: hidden; border: 1px solid var(--smart-line); border-radius: var(--smart-radius-xl); background: var(--smart-surface); color: inherit; cursor: default; font: inherit; text-align: left; text-decoration: none; transition: transform var(--smart-motion-standard) var(--smart-ease-standard), border-color var(--smart-motion-standard) var(--smart-ease-standard), background-color var(--smart-motion-standard) var(--smart-ease-standard), box-shadow var(--smart-motion-standard) var(--smart-ease-standard); }
.quick-module:is(a, button) { cursor: pointer; }
.quick-module:is(a, button):hover { border-color: var(--smart-primary); background: var(--smart-row-hover); box-shadow: var(--smart-interactive-shadow-hover); transform: translateY(-3px); }
.quick-module:is(a, button):active { box-shadow: var(--smart-interactive-shadow-active); transform: translateY(-1px); }
.quick-module:is(a, button):focus-visible { color: inherit; text-decoration: none; }
.quick-module .metric-icon { display: grid; place-items: center; margin-top: 0; margin-bottom: .65rem; color: var(--metric-color, var(--smart-blue)); line-height: normal; }
.quick-module strong { display: block; font-size: var(--smart-font-body); }
.quick-module span { display: block; margin-top: .18rem; color: var(--smart-muted); font-size: var(--smart-font-body-compact); line-height: 1.4; }
.quick-module .module-arrow { position: absolute; right: .72rem; top: .72rem; width: 1rem; height: 1rem; color: var(--smart-text-secondary); transition: transform .18s ease; }
.quick-module:is(a, button):hover .module-arrow { transform: translateX(3px); }
.quick-module:is(a, button):active .module-arrow { transform: translateX(1px); }

.timeline { display: grid; gap: .7rem; }
.timeline-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: .75rem; padding: .68rem 0; border-bottom: 1px solid var(--smart-divider); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-date { display: grid; width: 42px; height: 46px; place-items: center; border-radius: var(--smart-radius-lg); color: var(--smart-blue); background: var(--smart-blue-soft); font-size: var(--smart-font-body-compact); font-weight: 750; line-height: 1.05; text-align: center; }
.timeline-date strong { display: block; font-size: var(--smart-font-title); }
.timeline-copy strong { display: block; font-size: var(--smart-font-body-compact); }
.timeline-copy span { color: var(--smart-muted); font-size: var(--smart-font-body-compact); }

.status-list { display: grid; gap: .65rem; }
.status-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; }
.status-copy { display: flex; align-items: center; gap: .6rem; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-inline: .18rem; border: 0; border-radius: 50%; outline: 2px solid var(--smart-success-ring); outline-offset: 1px; background: var(--smart-success); box-shadow: none; }
.status-dot-attention { outline-color: var(--smart-warning-ring); background: var(--smart-warning); }
.status-copy strong { display: block; font-size: var(--smart-font-body-compact); }
.status-copy span { display: block; color: var(--smart-muted); font-size: var(--smart-font-body-compact); }
.status-pill { padding: .22rem .48rem; border-radius: 999px; color: var(--smart-success); background: var(--smart-success-soft); font-size: var(--smart-font-body-compact); font-weight: 750; }

.activity-table { width: 100%; border-collapse: collapse; }
.activity-table th { padding: var(--smart-table-cell-block) var(--smart-table-cell-inline); border-bottom: 1px solid var(--smart-line); color: var(--smart-text-secondary); background: var(--smart-table-header); font-size: var(--smart-font-body-compact); font-weight: 750; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.activity-table .small { font-size: var(--smart-font-caption) !important; }
.activity-table td { padding: var(--smart-table-cell-block) var(--smart-table-cell-inline); border-bottom: 1px solid var(--smart-divider); font-size: var(--smart-font-body-compact); vertical-align: middle; }
.activity-table tr:last-child td { border-bottom: 0; }
.table-user { display: flex; align-items: center; gap: .55rem; }
.table-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: var(--smart-on-brand); background: var(--smart-primary); font-size: var(--smart-font-body-compact); font-weight: 800; }
.table-user strong { display: block; font-size: var(--smart-font-body-sm); }
.table-user span { color: var(--smart-muted); font-size: var(--smart-font-body-compact); }
.table-user .table-avatar { color: var(--smart-on-brand); }
.badge-soft { display: inline-flex; align-items: center; padding: .23rem .46rem; border-radius: var(--smart-radius-compact); font-size: var(--smart-font-body-compact); font-weight: 750; }
.badge-blue { color: var(--smart-info); background: var(--smart-info-soft); }
.badge-red { color: var(--smart-danger); background: var(--smart-danger-soft); }
.badge-green { color: var(--smart-success); background: var(--smart-success-soft); }
.badge-gold { color: var(--smart-warning); background: var(--smart-warning-soft); }
.badge-purple { color: var(--smart-purple-deep); background: var(--smart-purple-soft); }

.pulse-score { display: grid; grid-template-columns: 114px 1fr; align-items: center; gap: .85rem; }
.score-ring { display: grid; width: 110px; height: 110px; place-items: center; border-radius: 50%; background: conic-gradient(var(--score-color, var(--smart-blue)) 0 var(--score-value, 86%), var(--smart-ring-track) var(--score-value, 86%)); }
.score-ring.score-tone-success { --score-color: var(--smart-teal); }
.score-ring::before { position: absolute; width: 78px; height: 78px; border-radius: 50%; background: var(--smart-surface); content: ""; }
.score-value { position: relative; z-index: 1; text-align: center; }
.score-value strong { display: block; font-size: var(--smart-font-section-lg); }
.score-value span { color: var(--smart-muted); font-size: var(--smart-font-body-compact); }
.pulse-copy h3,
.pulse-copy h4 { margin: 0 0 .3rem; font-size: var(--smart-font-compact-title); }
.pulse-copy p { margin: 0; color: var(--smart-muted); font-size: var(--smart-font-body-compact); line-height: 1.5; }

.legend-list { display: grid; gap: .55rem; margin-top: .8rem; }
.legend-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; font-size: var(--smart-font-body-compact); }
.legend-label { display: flex; align-items: center; gap: .45rem; color: var(--smart-muted); }
.legend-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--legend); }

.module-toolbar { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.module-search { position: relative; flex: 1; max-width: 520px; }
.module-search .icon { position: absolute; top: 50%; left: .8rem; width: 1rem; height: 1rem; color: var(--smart-text-secondary); transform: translateY(-50%); }
.module-search input { width: 100%; height: 44px; padding: 0 1rem 0 2.4rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); color: var(--smart-text); font-size: var(--smart-font-control); }
.module-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-chip { min-height: 34px; padding: .5rem .75rem; border: 1px solid var(--smart-control-border); border-radius: 999px; background: var(--smart-surface); color: var(--smart-text-secondary); font-size: var(--smart-font-meta); font-weight: 700; }
.filter-chip.active { border-color: var(--smart-blue); color: #fff; background: var(--smart-blue); }
.module-category-filter { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.module-category-select { min-width: 126px; padding-right: 1.9rem; appearance: none; cursor: pointer; }
.module-category-select:hover { border-color: var(--smart-control-border-hover); color: var(--smart-text); }
.module-category-select.has-selection { border-color: var(--smart-primary); color: var(--smart-primary); background: var(--smart-info-soft); }
.module-category-filter .smart-tom-select { width: 164px; min-width: 164px; }
.module-category-filter .smart-tom-select.has-selection .ts-control { border-color: var(--smart-primary); color: var(--smart-primary); background: var(--smart-info-soft); }

.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.module-card,
.module-card:link,
.module-card:visited { position: relative; display: flex; min-height: 176px; flex-direction: column; padding: 1rem; overflow: hidden; color: var(--smart-text); text-decoration: none; transition: transform var(--smart-motion-standard) var(--smart-ease-standard), border-color var(--smart-motion-standard) var(--smart-ease-standard), box-shadow var(--smart-motion-standard) var(--smart-ease-standard); }
.module-card::after { position: absolute; right: -25px; bottom: -38px; width: 105px; height: 105px; border: 20px solid var(--module-soft, var(--smart-blue-soft)); border-radius: 50%; content: ""; }
.module-card:hover { border-color: var(--module-color, var(--smart-blue)); color: var(--smart-text); text-decoration: none; transform: translateY(-3px); box-shadow: var(--smart-interactive-shadow-hover); }
.module-card:active { color: var(--smart-text); text-decoration: none; transform: translateY(-1px); box-shadow: var(--smart-interactive-shadow-active); }
.module-card:focus-visible { color: var(--smart-text); text-decoration: none; }
.module-card-top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.module-card .metric-icon { color: var(--module-color, var(--smart-blue)); background: var(--module-soft, var(--smart-blue-soft)); }
.module-tag { padding: .2rem .42rem; border-radius: 999px; color: var(--module-color, var(--smart-blue)); background: var(--module-soft, var(--smart-blue-soft)); font-size: var(--smart-font-caption); font-weight: 800; text-transform: uppercase; }
.module-card :is(h2, h3) { margin: .85rem 0 .3rem; font-size: var(--smart-font-label-lg); }
.empty-results :is(h2, h3) { font-size: var(--smart-font-title-sm); }
.module-card p { margin: 0; color: var(--smart-muted); font-size: var(--smart-font-meta); line-height: 1.5; }
.module-card-footer { display: flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .8rem; color: var(--module-color, var(--smart-blue)); font-size: var(--smart-font-label); font-weight: 750; }

.student-shell { min-height: 100vh; background: var(--smart-app-bg); }
.student-header { position: relative; z-index: 20; background: var(--smart-sidebar-bg); color: #fff; }
.student-nav { position: relative; display: flex; max-width: 1500px; min-height: 70px; align-items: center; margin: 0 auto; padding: .65rem 1.5rem; }
.student-brand { display: flex; width: 250px; align-items: center; gap: .65rem; color: var(--smart-on-brand); text-decoration: none; }
.student-brand img { width: 35px; height: 43px; object-fit: contain; }
.student-brand:hover,
.student-brand:active,
.student-brand:visited { color: var(--smart-on-brand); text-decoration: none; }
.student-brand .smart-wordmark > strong { font-size: var(--smart-font-wordmark); }
.student-brand .smart-wordmark-subline { font-size: var(--smart-font-meta); }
.student-nav-links { display: flex; flex: 1; justify-content: center; gap: .3rem; }
.student-nav-links a { position: relative; display: inline-flex; align-items: center; gap: .42rem; padding: .8rem .9rem; border-radius: var(--smart-radius-compact); color: var(--smart-sidebar-text); font-size: var(--smart-font-body-sm); font-weight: 650; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.student-nav-links a .icon { width: 1rem; height: 1rem; opacity: .88; }
.student-nav-links a:hover { color: var(--smart-on-brand); background: rgba(255, 255, 255, .06); }
.student-nav-links a.active { color: var(--smart-on-brand); }
.student-nav-links a.active::after { position: absolute; right: .9rem; bottom: 0; left: .9rem; height: 3px; border-radius: var(--smart-radius-micro); background: var(--smart-gold); content: ""; }
.student-nav-links a:focus-visible,
.student-nav-toggle:focus-visible { outline-color: var(--smart-gold); }
.student-nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: .4rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--smart-radius-md); color: var(--smart-on-brand); background: transparent; }
.student-nav-toggle:hover { color: var(--smart-on-brand); background: rgba(255, 255, 255, .07); }
.student-theme-controls { display: flex; align-items: center; margin-inline: .35rem .5rem; }
.student-theme-controls .topbar-icon { border-color: rgba(255, 255, 255, .28); color: var(--smart-on-brand); background: rgba(255, 255, 255, .04); }
.student-theme-controls .topbar-icon:hover { color: var(--smart-on-brand); background: rgba(255, 255, 255, .1); }
.student-profile { display: flex; align-items: center; gap: .55rem; }
.student-profile .user-avatar { border-color: color-mix(in srgb, var(--smart-primary) 22%, var(--smart-on-brand)); background: var(--smart-primary); color: var(--smart-on-primary); }
.student-profile .user-meta strong { color: var(--smart-on-brand); }
.student-profile .user-meta span { color: var(--smart-sidebar-muted); }
.student-main { max-width: 1500px; margin: 0 auto; padding: 1.5rem; }

.student-hero { position: relative; min-height: 280px; margin-bottom: 1rem; overflow: hidden; border-radius: var(--smart-radius-hero); color: #fff; background: var(--smart-sidebar-bg); box-shadow: var(--smart-card-shadow); }
.student-hero::before { position: absolute; inset: 0; background: url("../images/decorative/wave-lines-light.svg") right center / auto 135% no-repeat; opacity: .18; content: ""; pointer-events: none; }
.student-hero-copy { position: relative; z-index: 3; max-width: 58%; padding: 1.7rem 1.8rem; }
.student-hero h1 { margin: .25rem 0 .45rem; color: #fff; font-size: var(--smart-font-heading-wide); letter-spacing: -.04em; }
.student-hero p { max-width: 530px; margin: 0 0 1rem; color: var(--smart-sidebar-text); font-size: var(--smart-font-control); line-height: 1.55; }
.student-hero-art { position: absolute; z-index: 2; right: -1%; bottom: -36%; width: min(44%, 500px); max-height: 126%; object-fit: contain; object-position: bottom right; pointer-events: none; }

.student-hero .btn-smart-gold,
.student-hero .btn-smart-gold:link,
.student-hero .btn-smart-gold:visited {
  color: var(--smart-on-gold);
  background: var(--smart-gold);
  text-decoration: none;
}

.student-hero .btn-smart-gold:hover {
  color: var(--smart-on-gold);
  background: var(--smart-gold-hover);
  box-shadow: 0 5px 12px rgba(7, 26, 61, .18);
  text-decoration: none;
  transform: translateY(-1px);
}

.student-hero .btn-smart-gold:active {
  color: var(--smart-on-gold);
  background: var(--smart-gold-active);
  box-shadow: 0 1px 4px rgba(7, 26, 61, .14);
  text-decoration: none;
  transform: translateY(0);
}

.student-hero .btn-smart-gold:focus-visible {
  color: var(--smart-on-gold);
  text-decoration: none;
  outline-color: var(--smart-on-brand);
}

.student-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 1rem; }
.course-list { display: grid; gap: .7rem; }
.course-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .75rem; padding: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-panel); }
.course-time { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--smart-radius-lg); color: var(--smart-primary); background: var(--smart-blue-soft); font-size: var(--smart-font-caption); font-weight: 800; text-align: center; }
.course-copy strong { display: block; font-size: var(--smart-font-body-md); }
.course-copy span { color: var(--smart-muted); font-size: var(--smart-font-small); }
.course-room { color: var(--smart-muted); font-size: var(--smart-font-meta); font-weight: 650; }

.login-page { min-height: 100vh; overflow-x: hidden; background: var(--smart-app-bg); }
.login-layout {
  position: relative;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.login-layout::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--smart-app-bg);
  content: "";
}
.login-layout::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(21, 87, 192, .045), transparent 42%);
  content: "";
}
.login-panel {
  display: grid;
  min-height: 100vh;
  align-items: center;
  justify-items: center;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vh, 2.75rem) 1rem;
}
.login-panel-inner { width: min(100%, 1180px); margin-block: auto; }
.login-brand {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .72rem;
  margin: 0 0 2rem;
  color: var(--smart-wordmark-accent);
  text-decoration: none;
}
.login-brand:link,
.login-brand:visited,
.login-brand:hover,
.login-brand:active { color: var(--smart-wordmark-accent); text-decoration: none; }
.login-brand img { width: 56px; height: 66px; object-fit: contain; }
.login-wordmark { display: grid; gap: .12rem; line-height: 1; }
.login-wordmark > strong { color: inherit; font-size: var(--smart-font-section-xl); font-weight: 800; letter-spacing: .01em; }
.login-wordmark > span { display: flex; gap: .38rem; color: inherit; font-size: var(--smart-font-body-compact); font-weight: 800; letter-spacing: .12em; }
.login-wordmark b { color: inherit; font-weight: inherit; }
.login-wordmark .brand-salatiga { color: var(--smart-warning); }
.login-access-surface {
  display: grid;
  overflow: hidden;
  border-radius: var(--smart-radius-hero);
  background: var(--smart-surface);
  box-shadow: var(--smart-shadow-panel);
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
}
.login-card { width: 100%; padding: clamp(2.2rem, 4vw, 3.2rem); }
.login-card-header { margin-bottom: 1.4rem; text-align: left; }
.login-card-header h1 { margin: 0; font-size: var(--smart-font-heading-emphasis); letter-spacing: -.035em; }
.login-card-header p { margin: .42rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-control); }
.login-status { margin-bottom: 1rem; }
.login-status[hidden] { display: none; }
.login-status-symbol { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; }
.login-status.is-loading { border-color: var(--smart-info); color: var(--smart-info); background: var(--smart-info-soft); }
.login-status.is-error { border-color: var(--smart-danger); color: var(--smart-danger); background: var(--smart-danger-soft); }
.login-status.is-warning { border-color: var(--smart-warning); color: var(--smart-warning); background: var(--smart-warning-soft); }
.login-status.feedback-box small { font-size: var(--smart-font-body-compact); }
.login-status-links { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .4rem; }
.login-status-links[hidden] { display: none; }
.login-status-links a,
.login-status-links a:link,
.login-status-links a:visited { color: inherit; font-size: var(--smart-font-meta); font-weight: 750; text-decoration: underline; text-underline-offset: .18em; }
.login-status-links a:hover { text-decoration-thickness: 2px; }
.login-status-retry { min-height: 32px; padding: .3rem .55rem; border: 1px solid currentColor; border-radius: var(--smart-radius-xs); color: inherit; background: transparent; font-size: var(--smart-font-meta); font-weight: 750; }
.login-status-retry:hover { background: rgba(255, 255, 255, .12); }
.login-status-retry:focus-visible { outline: 3px solid var(--smart-info); outline-offset: 2px; }
.login-google-button,
.login-nim-button { width: 100%; min-height: 50px; }
.login-google-button { position: relative; }
.google-mark { width: 21px; height: 21px; padding: 3px; border-radius: var(--smart-radius-xs); background: #fff; }
.login-method-note { max-width: 52ch; margin: .6rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); line-height: 1.5; text-align: left; }
.login-separator { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--smart-text-muted); font-size: var(--smart-font-meta); }
.login-separator::before,
.login-separator::after { height: 1px; flex: 1; background: var(--smart-divider); content: ""; }
.login-nim-toggle { width: 100%; justify-content: space-between; }
.login-nim-toggle .login-nim-chevron { width: 1rem; height: 1rem; transition: transform var(--smart-motion-fast) var(--smart-ease-standard); }
.login-nim-toggle[aria-expanded="true"] .login-nim-chevron { transform: rotate(180deg); }
.login-fallback-note { margin: .55rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); line-height: 1.5; text-align: left; }
.login-nim-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--smart-divider); }
.login-nim-section[hidden] { display: none; }
.login-method-heading { margin-bottom: .8rem; }
.login-method-heading h2 { margin: 0; font-size: var(--smart-font-title-sm); letter-spacing: -.01em; }
.login-method-heading p { margin: .25rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.45; }
.login-nim-section .form-field { margin-bottom: .8rem; }
.login-nim-section .form-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; color: var(--smart-text); font-size: var(--smart-font-body-sm); font-weight: 700; }
.login-nim-section .form-field input { height: 46px; font-size: var(--smart-font-body); }
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 5.8rem; }
.login-password-toggle { position: absolute; top: 50%; right: .55rem; min-height: 36px; padding: .35rem .55rem; transform: translateY(-50%); border: 0; border-radius: var(--smart-radius-xs); color: var(--smart-primary); background: transparent; font-size: var(--smart-font-meta); font-weight: 750; }
.login-password-toggle:hover { color: var(--smart-primary-hover); background: var(--smart-info-soft); }
.login-password-toggle:focus-visible { outline: 3px solid var(--smart-info); outline-offset: 2px; }
.field-requirement { color: var(--smart-text-muted); font-size: var(--smart-font-meta); font-weight: 650; }
.login-nim-section .field-hint,
.login-nim-section .field-error { margin-top: .35rem; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .1rem 0 .85rem; font-size: var(--smart-font-body-compact); }
.login-options label { display: flex; align-items: center; gap: .45rem; color: var(--smart-text-secondary); font-weight: 600; }
.login-options input { width: 16px; height: 16px; accent-color: var(--smart-primary); }
.login-remember-note { display: block; margin: .22rem 0 0 1.45rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); line-height: 1.35; }
.login-options a,
.login-options a:link,
.login-options a:visited { color: var(--smart-link); font-weight: 700; text-decoration: none; }
.login-options a:hover { color: var(--smart-link-hover); text-decoration: underline; text-underline-offset: .2em; }
.login-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: login-spin .75s linear infinite;
}
.is-loading .login-spinner { display: inline-block; }
.is-loading .google-mark { display: none; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-secondary-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 1rem; margin-top: 1.35rem; padding-top: .7rem; border-top: 1px solid var(--smart-divider); }
.login-secondary-links a,
.login-secondary-links a:link,
.login-secondary-links a:visited {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: .45rem .1rem;
  color: var(--smart-text-secondary);
  font-size: var(--smart-font-body-sm);
  font-weight: 650;
  text-decoration: none;
  transition: color var(--smart-motion-fast) var(--smart-ease-standard);
}
.login-secondary-links a:hover { color: var(--smart-link-hover); text-decoration: underline; text-underline-offset: .2em; }
.login-secondary-links a:active { color: var(--smart-primary-active); text-decoration: underline; text-underline-offset: .2em; }
.login-legal-links { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .65rem; color: var(--smart-text-muted); font-size: var(--smart-font-small); }
.login-legal-unavailable { cursor: not-allowed; }
.login-legal-unavailable::after { content: " · segera tersedia"; font-size: var(--smart-font-caption); }
.login-campus-summary {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--smart-sidebar-bg-deep) 96%, transparent) 12%,
      color-mix(in srgb, var(--smart-sidebar-bg) 88%, transparent) 68%,
      color-mix(in srgb, var(--smart-primary) 76%, transparent) 100%),
    url("../images/heroes/campus-hero.webp") center 58% / cover no-repeat;
}
.login-campus-copy { position: relative; z-index: 1; max-width: 34ch; }
.login-campus-summary h2 { margin: 0; color: #fff; font-size: var(--smart-font-heading-responsive-lg); letter-spacing: -.035em; }
.login-campus-summary header p { margin: .55rem 0 0; color: var(--smart-sidebar-text); font-size: var(--smart-font-body); line-height: 1.6; }
.login-campus-metrics { position: relative; z-index: 1; display: grid; margin: auto 0 0; border-block: 1px solid rgba(255, 255, 255, .18); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.login-campus-metrics > div { min-width: 0; padding: 1.1rem 1rem 1.1rem 0; }
.login-campus-metrics > div:nth-child(odd) { padding-inline-start: .5rem; }
.login-campus-metrics > div:nth-child(even) { padding-inline: 1rem 0; border-left: 1px solid rgba(255, 255, 255, .18); }
.login-campus-metrics > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .18); }
.login-campus-metrics dt { color: var(--brand-mark-gold); font-size: var(--smart-font-heading-card); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.login-campus-metrics dd { display: grid; gap: .15rem; margin: .42rem 0 0; color: #fff; font-size: var(--smart-font-body-md); font-weight: 750; line-height: 1.35; }
.login-campus-metrics dd small { color: var(--smart-sidebar-muted); font-size: var(--smart-font-body-compact); font-weight: 600; }
.login-campus-source { position: relative; z-index: 1; margin-top: 1.1rem; }
.login-campus-source p { margin: 0 0 .4rem; color: var(--smart-sidebar-muted); font-size: var(--smart-font-meta); }
.login-campus-source div { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.login-campus-source a,
.login-campus-source a:link,
.login-campus-source a:visited { color: #fff; font-size: var(--smart-font-body-compact); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.login-campus-source a:hover { color: var(--brand-mark-gold); text-decoration-thickness: 2px; }
.login-campus-source a:focus-visible { outline-color: var(--brand-mark-gold); }
.login-help,
.login-footnote { margin: .65rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-small); line-height: 1.45; text-align: center; }
.login-footnote { margin-top: .3rem; }
[data-bs-theme="dark"] .login-wordmark .brand-salatiga { color: var(--brand-mark-gold); }
[data-bs-theme="dark"] .login-password-toggle:hover { color: var(--smart-info); background: var(--smart-info-soft); }

[data-bs-theme="dark"] .btn-smart-light:hover,
[data-bs-theme="dark"] .btn-smart-light:active { color: var(--smart-text); }
[data-bs-theme="dark"] .topbar-icon:hover,
[data-bs-theme="dark"] .semester-picker:hover { border-color: var(--smart-info); color: var(--smart-info); }
[data-bs-theme="dark"] .notification-panel { box-shadow: var(--smart-shadow-notification); }
[data-bs-theme="dark"] .language-panel { box-shadow: var(--smart-shadow-language); }
[data-bs-theme="dark"] .metric-card::after,
[data-bs-theme="dark"] .module-card::after { opacity: .2; }
[data-bs-theme="dark"] .metric-icon {
  color: var(--smart-info) !important;
  background: var(--smart-info-soft) !important;
}
[data-bs-theme="dark"] .badge-purple { color: var(--smart-purple-text-dark); background: var(--smart-purple-soft-dark); }
[data-bs-theme="dark"] .score-ring::before { background: var(--smart-surface); }
[data-bs-theme="dark"] .student-shell { background: var(--smart-app-bg); }
[data-bs-theme="dark"] .timeline-date[style] { color: var(--smart-info) !important; background: var(--smart-info-soft) !important; }
[data-bs-theme="dark"] .course-time { color: var(--smart-info); }
[data-bs-theme="dark"] .module-tag { color: var(--smart-info); background: var(--smart-info-soft); }
[data-bs-theme="dark"] .module-card-footer { color: var(--smart-info); }

.sidebar-backdrop { display: none; }
.empty-results { display: none; padding: 3rem 1rem; color: var(--smart-muted); text-align: center; }
.empty-results.visible { display: block; }
.module-card.hidden { display: none; }

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  :root { --smart-sidebar-width: 260px; }
  .app-sidebar { transform: translateX(-100%); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(7,26,61,.48); backdrop-filter: blur(2px); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-fold-toggle { display: none; }
  .student-nav-toggle { display: inline-flex; }
  .student-nav-links {
    position: absolute;
    top: calc(100% - .2rem);
    right: 1rem;
    left: 1rem;
    z-index: 21;
    display: none;
    padding: .5rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--smart-radius-lg);
    background: var(--smart-sidebar-bg);
    box-shadow: 0 14px 30px rgba(7, 26, 61, .22);
  }
  .student-nav-links.is-open { display: grid; }
  .student-nav-links a { min-height: 44px; }
  .student-nav-links a.active::after { top: .55rem; right: auto; bottom: .55rem; left: 0; width: 3px; height: auto; }
  .student-brand { flex: 1; }
  .app-launcher-panel { display: none !important; }
  .login-panel { min-height: 100vh; }
  .login-panel-inner { width: min(100%, 900px); }
  .login-access-surface { grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); }
}

@media (max-height: 720px) {
  .sidebar-support { margin-bottom: .45rem; padding-top: .4rem; }
}

@media (max-width: 1100px) {
  .user-meta { display: none; }
}

@media (max-width: 768px) {
  .notification-page-heading { align-items: stretch; }
  .notification-page-heading .btn-smart-light { width: 100%; }
  .notification-center { grid-template-columns: 1fr; }
  .notification-filters nav { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .notification-filters nav button { flex: 0 0 auto; }
  .notification-filters > a { display: none; }
  .notification-feed > header { align-items: stretch; flex-direction: column; }
  .notification-search { width: 100%; }
  .notification-feed .all-notification-item { grid-template-columns: 38px minmax(0, 1fr) 44px; padding: .8rem .75rem; }
  .notification-item-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .app-topbar { padding: .65rem 1rem; }
  .app-content { padding: 1rem; }
  .global-search { display: none; }
  .semester-picker span, .user-meta { display: none; }
  .page-heading { align-items: start; flex-direction: column; }
  .campus-banner {
    --campus-banner-min-height: clamp(260px, 35vw, 270px);
    min-height: var(--campus-banner-min-height);
  }
  .campus-banner-content { min-height: 0; }
  .campus-banner p { margin-bottom: 0; }
  .banner-actions { margin-top: 1rem; }
  .campus-banner::before {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--smart-sidebar-bg-deep) 94%, transparent) 0%,
        color-mix(in srgb, var(--smart-sidebar-bg-deep) 82%, transparent) 68%,
        color-mix(in srgb, var(--smart-sidebar-bg) 64%, transparent) 100%),
      linear-gradient(color-mix(in srgb, var(--smart-primary) 14%, transparent), color-mix(in srgb, var(--smart-primary) 14%, transparent)),
      url("../images/heroes/campus-hero.webp") center 50% / cover no-repeat;
  }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-side { grid-template-columns: 1fr; }
  .student-main { padding: 1rem; }
  .student-grid { grid-template-columns: 1fr; }
  .student-hero-art { right: -4%; width: 48%; }
  .student-hero-copy { max-width: 72%; }
  .activity-table th:nth-child(3), .activity-table td:nth-child(3), .activity-table th:nth-child(4), .activity-table td:nth-child(4) { display: none; }
  body[data-page="dashboard"] .activity-table { min-width: 0; table-layout: fixed; }
  body[data-page="dashboard"] .activity-table th,
  body[data-page="dashboard"] .activity-table td { padding-inline: .5rem; overflow-wrap: anywhere; }
  body[data-page="dashboard"] .activity-table th:first-child,
  body[data-page="dashboard"] .activity-table td:first-child { width: 40%; }
  body[data-page="dashboard"] .activity-table th:nth-child(2),
  body[data-page="dashboard"] .activity-table td:nth-child(2) { width: 37%; }
  body[data-page="dashboard"] .activity-table .badge-soft { white-space: normal; }
  .login-panel-inner { width: min(100%, 560px); }
  .login-access-surface { grid-template-columns: 1fr; }
  .login-campus-summary { min-height: 430px; }
}

@media (max-width: 540px) {
  .semester-picker { display: none; }
  .theme-customizer { width: 100vw; border-inline-start: 0; border-radius: 0; }
  .theme-customizer-header { padding-inline: .85rem; }
  .theme-customizer-body { padding-inline: .85rem; }
  .theme-customizer-footer { padding: .75rem .85rem; }
  .theme-customizer-footer :is(.btn-smart-light, .btn-smart-primary) { min-height: 44px; }
  .theme-scheme-option > span { min-height: 98px; padding-inline: .55rem; }
  .theme-palette-detail ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-panel { width: auto; max-width: none; max-height: calc(100vh - 88px); }
  .notification-panel.show { position: fixed !important; top: 64px !important; right: 12px !important; left: 12px !important; transform: none !important; }
  .notification-list { max-height: calc(100vh - 244px); }
  .all-notification-item { grid-template-columns: 42px minmax(0, 1fr); }
  .all-notification-item > .badge-soft { grid-column: 2; justify-self: start; }
  .stats-grid, .module-grid, .quick-modules { grid-template-columns: 1fr; }
  .campus-banner-content { padding: 1rem 1.15rem 1.1rem; }
  .campus-chip { margin-bottom: .55rem; }
  .campus-banner h2 { margin-bottom: .35rem; }
  .banner-actions { align-items: stretch; flex-direction: column; gap: .45rem; margin-top: .75rem; }
  .module-toolbar { align-items: stretch; flex-direction: column; }
  .module-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  .filter-chip { flex: 0 0 auto; }
  .timeline-item { grid-template-columns: 42px 1fr; }
  .timeline-item .badge-soft { display: none; }
  .pulse-score { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .student-brand { width: auto; }
  .student-brand .smart-wordmark > strong { font-size: var(--smart-font-title-sm); }
  .student-brand .smart-wordmark-subline { font-size: var(--smart-font-caption); }
  .student-profile .user-avatar { width: 34px; height: 34px; min-width: 34px; flex-basis: 34px; }
  .student-hero { min-height: 360px; }
  .student-hero::before { inset: 28% 0 0; background-size: auto 120%; opacity: .14; }
  .student-hero-art { right: -20%; bottom: -18%; width: 76%; max-height: none; opacity: .36; }
  .student-hero-copy { max-width: 100%; }
  .login-panel { align-items: start; padding: 1.1rem .85rem 1.5rem; }
  .login-panel-inner { max-width: 560px; margin-block: 0; }
  .login-brand { margin-bottom: 1.5rem; }
  .login-access-surface { border-radius: var(--smart-radius-card); }
  .login-card,
  .login-campus-summary { padding: 1.5rem 1.2rem; }
  .login-card-header { margin-bottom: 1.1rem; }
  .login-secondary-links { gap: 0 .65rem; }
}

@media (max-width: 420px) {
  .login-campus-summary { min-height: 410px; }
  .login-campus-metrics > div { padding-block: .9rem; }
}

@media (max-width: 360px) {
  .app-topbar { padding-inline: .75rem; }
  .topbar-left, .topbar-actions { gap: .4rem; }
  .user-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-main,
  .sidebar-group-chevron,
  .sidebar-launcher-chevron,
  .sidebar-link,
  .sidebar-sublink,
  .student-nav-links a,
  .sidebar-support-trigger,
  .btn-smart-primary,
  .btn-smart-light,
  .btn-smart-gold,
  .btn-smart-danger,
  .btn-smart-primary:link,
  .btn-smart-primary:visited,
  .btn-smart-light:link,
  .btn-smart-light:visited,
  .btn-smart-gold:link,
  .btn-smart-gold:visited,
  .btn-smart-danger:link,
  .btn-smart-danger:visited,
  .login-nim-toggle .login-nim-chevron,
  .login-secondary-links a,
  .language-option,
  .notification-item,
  .all-notification-item,
  body[data-page="dashboard"] :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold),
  .quick-module,
  .quick-module .module-arrow,
  .module-card,
  .module-card:link,
  .module-card:visited { transition: none; }

  .login-spinner,
  .smart-preloader-mark::before { animation: none; }
  html[data-smart-loading="false"] body > :not([data-smart-preloader]):not(script) { transition: none; }

  .btn-smart-primary:hover,
  .btn-smart-primary:active,
  .btn-smart-light:hover,
  .btn-smart-light:active,
  .btn-smart-gold:hover,
  .btn-smart-gold:active,
  .btn-smart-danger:hover,
  .btn-smart-danger:active,
  body[data-page="dashboard"] :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):hover,
  body[data-page="dashboard"] :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):active,
  .quick-module:is(a, button):hover,
  .quick-module:is(a, button):active,
  .quick-module:is(a, button):hover .module-arrow,
  .quick-module:is(a, button):active .module-arrow,
  .module-card:hover,
  .module-card:active { transform: none; }
}

/* SMART complete pattern references */
.smart-reference-brand:link,
.smart-reference-brand:visited,
.smart-reference-brand:hover,
.smart-reference-brand:focus-visible,
.smart-reference-brand:active {
  color: var(--smart-wordmark-accent);
  text-decoration: none;
}

.smart-reference-brand:hover strong,
.smart-reference-brand:hover small { text-decoration: none; }

.smart-avatar {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--smart-on-brand);
  background: var(--smart-navy-800);
  font-size: var(--smart-font-body-md);
  font-weight: 800;
}

.smart-avatar-lg { width: 48px; height: 48px; flex-basis: 48px; }
.smart-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }

.smart-search-field { position: relative; display: block; min-width: 0; }
.smart-search-field > .icon { position: absolute; top: 50%; left: .78rem; z-index: 2; width: 1rem; height: 1rem; color: var(--smart-text-muted); transform: translateY(-50%); pointer-events: none; }
.smart-search-field > .form-control { padding-left: 2.35rem; }

.smart-chat {
  display: grid;
  min-height: 500px;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-xl);
  background: var(--smart-surface);
}

.smart-chat-sidebar { border-right: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.smart-chat-search { margin: .8rem; }
.smart-conversation-list { display: grid; }
.smart-conversation {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .75rem .8rem;
  border: 0;
  border-top: 1px solid var(--smart-divider);
  color: var(--smart-text);
  background: transparent;
  text-align: left;
}
.smart-conversation:hover { background: var(--smart-row-hover); }
.smart-conversation.active { background: var(--smart-info-soft); }
.smart-conversation strong,
.smart-conversation small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-conversation strong { font-size: var(--smart-font-body-sm); }
.smart-conversation small { margin-top: .15rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-conversation time { align-self: start; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }

.smart-chat-main { display: flex; min-width: 0; flex-direction: column; }
.smart-chat-header { display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; border-bottom: 1px solid var(--smart-divider); }
.smart-chat-header strong,
.smart-chat-header small { display: block; }
.smart-chat-header strong { font-size: var(--smart-font-body-compact); }
.smart-chat-header small { margin-top: .12rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-chat-log { display: flex; min-height: 310px; max-height: 420px; flex: 1; flex-direction: column; gap: .65rem; overflow-y: auto; padding: 1rem; background: var(--smart-app-bg); }
.chat-day { align-self: center; padding: .28rem .55rem; border-radius: 999px; color: var(--smart-text-muted); background: var(--smart-surface); font-size: var(--smart-font-body-compact); font-weight: 700; }
.chat-bubble { max-width: min(78%, 520px); padding: .65rem .75rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); }
.chat-bubble.is-outgoing { align-self: flex-end; border-color: var(--smart-primary); color: var(--smart-on-brand); background: var(--smart-primary); }
.chat-bubble p { margin: 0; font-size: var(--smart-font-body-md); line-height: 1.55; }
.chat-bubble time { display: block; margin-top: .3rem; color: inherit; font-size: var(--smart-font-body-compact); opacity: .72; text-align: right; }
.smart-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) 40px auto; align-items: center; gap: .5rem; padding: .75rem; border-top: 1px solid var(--smart-divider); }
.smart-chat-main > .demo-action-feedback { margin: 0; padding: 0 .8rem .7rem; }

.smart-inbox { display: grid; grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); }
.smart-inbox-folders { display: grid; align-content: start; gap: .2rem; padding: .65rem; border-right: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.smart-inbox-folders button { display: grid; min-height: 42px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .55rem .65rem; border: 0; border-radius: var(--smart-radius-control); color: var(--smart-text-secondary); background: transparent; font-size: var(--smart-font-body-md); text-align: left; }
.smart-inbox-folders button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.smart-inbox-folders button.active { color: var(--smart-primary); background: var(--smart-info-soft); font-weight: 750; }
.smart-inbox-main { min-width: 0; }
.smart-inbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem; border-bottom: 1px solid var(--smart-divider); }
.smart-inbox-toolbar .smart-search-field { width: min(100%, 440px); }
.smart-inbox-toolbar > span { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); white-space: nowrap; }
.smart-mail-row { display: grid; grid-template-columns: 24px 36px minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: .62rem .75rem; border-bottom: 1px solid var(--smart-divider); }
.smart-mail-row:hover { background: var(--smart-row-hover); }
.smart-mail-row.is-unread { background: var(--smart-info-soft); }
.mail-star { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: var(--smart-radius-control); color: var(--smart-text-muted); background: transparent; }
.mail-star:hover { color: var(--smart-primary); background: var(--smart-row-hover); }
.mail-star.active { color: var(--smart-gold-deep); }
.mail-open { display: grid; min-width: 0; grid-template-columns: minmax(105px, .35fr) minmax(0, 1fr); gap: .5rem; border: 0; color: var(--smart-text); background: transparent; font-size: var(--smart-font-body-md); text-align: left; }
.mail-open strong,
.mail-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-open span { color: var(--smart-text-secondary); }
.smart-mail-row time { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); white-space: nowrap; }
.smart-mail-preview { margin: .8rem; padding: 1rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); }
.smart-mail-preview header { display: flex; align-items: center; gap: .65rem; }
.smart-mail-preview strong,
.smart-mail-preview small { display: block; }
.smart-mail-preview strong { font-size: var(--smart-font-body-compact); }
.smart-mail-preview small { margin-top: .1rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-mail-preview p { margin: .75rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); line-height: 1.65; }
.smart-inbox-main > .demo-action-feedback { margin: 0 .8rem .8rem; }

.smart-faq { display: grid; }
.smart-faq details { border-bottom: 1px solid var(--smart-divider); background: transparent; }
.smart-faq details:last-child { border-bottom: 0; }
.smart-faq summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 1rem; padding: .82rem 1rem; cursor: pointer; list-style: none; color: var(--smart-text); font-size: var(--smart-font-body-md); font-weight: 750; }
.smart-faq summary::-webkit-details-marker { display: none; }
.smart-faq summary:hover { color: var(--smart-primary); background: var(--smart-row-hover); }
.smart-faq summary:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--smart-focus-ring); outline-offset: -3px; }
.smart-faq summary .icon { width: 1rem; height: 1rem; flex: 0 0 1rem; color: var(--smart-text-muted); transition: transform .18s ease; }
.smart-faq details[open] summary .icon { transform: rotate(180deg); }
.smart-faq details[open] summary { color: var(--smart-primary); background: var(--smart-info-soft); }
[data-bs-theme="dark"] .smart-faq summary:hover,
[data-bs-theme="dark"] .smart-faq details[open] summary { color: var(--smart-link); }
.smart-faq details > div { max-width: 78ch; padding: .15rem 1rem 1rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); line-height: 1.65; }
.smart-log-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px); gap: .65rem; }
.extension-panel > .smart-log-toolbar { padding: 1rem 1rem .8rem; border-bottom: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.smart-log-table td > strong,
.smart-log-table td > small { display: block; }
.smart-log-table td > small { margin-top: .14rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); line-height: 1.45; }
.smart-table-empty { margin: 0; padding: 1rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); text-align: center; }
.operations-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.smart-task-progress { display: grid; gap: .4rem; margin: 0; padding: .9rem 1rem .7rem; }
.smart-task-progress > div:first-child { display: flex; justify-content: space-between; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); }
.smart-task-list { display: grid; }
.smart-task-list label { display: grid; min-height: 58px; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .72rem 1rem; border-top: 1px solid var(--smart-divider); }
.smart-task-list label strong,
.smart-task-list label small { display: block; }
.smart-task-list label strong { font-size: var(--smart-font-body-md); }
.smart-task-list label small { margin-top: .15rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-task-list label.is-complete strong { color: var(--smart-text-muted); text-decoration: line-through; }
.smart-settings-form { display: grid; gap: .75rem; padding: 1rem; }
.smart-settings-form .form-check { padding: .7rem 0 .7rem 2.6rem; border-bottom: 1px solid var(--smart-divider); }
.extension-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 0; padding: .9rem 1rem 1rem; }
.extension-panel-footer p { margin: 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-uptime-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: 1rem 1rem 0; }
.smart-uptime-summary > div { padding: .75rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-table-header); }
.smart-uptime-summary span,
.smart-uptime-summary strong { display: block; }
.smart-uptime-summary span { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-uptime-summary strong { margin-top: .3rem; font-size: var(--smart-font-title-sm); }
.smart-uptime-strip { display: grid; grid-template-columns: repeat(12, minmax(12px, 1fr)); gap: 4px; margin: .9rem 1rem; }
.smart-uptime-strip span { height: 18px; border-radius: var(--smart-radius-micro); background: var(--smart-success); }
.smart-uptime-strip span.is-warn { background: var(--smart-gold); }
.smart-service-rows { display: grid; margin-inline: 1rem; border-top: 1px solid var(--smart-divider); }
.smart-service-rows article { display: grid; min-height: 48px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--smart-divider); }
.smart-service-rows article:last-child { border-bottom: 0; }
.smart-service-rows article > span { display: flex; align-items: center; gap: .55rem; }
.smart-service-rows strong { font-size: var(--smart-font-body-compact); }
.smart-service-rows span:not(.badge-soft) { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }

.smart-user-directory { display: grid; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); overflow: hidden; }
.smart-user-directory article { display: grid; grid-template-columns: 48px minmax(170px, .8fr) minmax(280px, 1fr) auto; align-items: center; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid var(--smart-divider); background: var(--smart-surface); }
.smart-user-directory article:last-child { border-bottom: 0; }
.smart-user-directory h3 { margin: 0; font-size: var(--smart-font-body-compact); }
.smart-user-directory p { margin: .15rem 0 .35rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); }
.smart-user-directory dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.smart-user-directory dt { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 700; text-transform: uppercase; }
.smart-user-directory dd { margin: .12rem 0 0; font-size: var(--smart-font-body-md); }
.smart-widget-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: 1rem; }
.smart-widget-layout > article { padding: 1rem; }
.smart-widget-layout .widget-card { position: relative; isolation: isolate; overflow: hidden; }
.smart-widget-layout .widget-card::after { position: absolute; z-index: 0; right: -31px; bottom: -42px; width: 102px; height: 102px; border: 15px solid var(--metric-soft, var(--smart-primary-soft)); border-radius: 50%; opacity: .64; content: ''; pointer-events: none; }
.smart-widget-layout .widget-card > * { position: relative; z-index: 1; }
.smart-widget-layout article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.smart-widget-layout h3 { margin: 0; font-size: var(--smart-font-control); }
.smart-widget-layout header p { margin: .2rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-widget-layout header a { color: var(--smart-primary); font-size: var(--smart-font-body-compact); font-weight: 750; }
.widget-heading { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.widget-heading .metric-icon { width: 40px; height: 40px; flex-basis: 40px; }
.widget-heading .metric-icon .icon { width: 1.2rem; height: 1.2rem; }
.widget-overview-primary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(170px, .8fr); gap: 1rem; align-items: end; padding: .85rem 0; border-block: 1px solid var(--smart-divider); }
.widget-primary-metric { display: grid; align-content: end; }
.widget-primary-metric strong { color: var(--smart-primary); font-size: var(--smart-font-display-xl); line-height: .95; letter-spacing: -.04em; }
.widget-primary-metric span { margin-top: .35rem; color: var(--smart-text); font-size: var(--smart-font-body-sm); font-weight: 750; }
.widget-primary-metric small { margin-top: .15rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.widget-overview-primary dl { display: grid; gap: .55rem; margin: 0; }
.widget-overview-primary dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--smart-divider); }
.widget-overview-primary dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.widget-overview-primary dt { color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); font-weight: 650; }
.widget-overview-primary dd { margin: 0; color: var(--smart-text); font-size: var(--smart-font-title-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.widget-overview-progress { display: grid; gap: .45rem; margin-top: .8rem; }
.widget-overview-progress > span { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.widget-overview-progress strong { font-size: var(--smart-font-body-compact); }
.widget-overview-progress small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.widget-list { grid-row: span 2; }
.widget-list ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.widget-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .65rem 0; border-top: 1px solid var(--smart-divider); }
.widget-list .smart-status-index { color: var(--metric-color); background: var(--metric-soft); }
.smart-status-index { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--smart-primary); background: var(--smart-info-soft); font-size: var(--smart-font-body-compact); font-weight: 800; }
.widget-list strong,
.widget-list small { display: block; }
.widget-list strong { font-size: var(--smart-font-body-md); }
.widget-list small { margin-top: .12rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.widget-status > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .56rem 0; border-top: 1px solid var(--smart-divider); }
.widget-status > div > span { display: flex; align-items: center; gap: .5rem; }
.widget-status strong { font-size: var(--smart-font-body-md); }
.widget-status small { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.modal-status-icon { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto .8rem; border-radius: 50%; }
.modal-status-icon .icon { width: 1.6rem; height: 1.6rem; }
.modal-status-icon.is-success { color: var(--smart-success); background: var(--smart-success-soft); }
.modal-status-icon.is-danger { color: var(--smart-danger); background: var(--smart-danger-soft); }
.modal-review-grid { display: grid; grid-template-columns: 1fr minmax(220px, .75fr); gap: 1rem; }
.modal-review-grid dl { display: grid; gap: .65rem; margin: 0; }
.modal-review-grid dl div { padding-bottom: .55rem; border-bottom: 1px solid var(--smart-divider); }
.modal-review-grid dt { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.modal-review-grid dd { margin: .16rem 0 0; font-size: var(--smart-font-body-sm); font-weight: 750; }
.modal-review-grid aside { padding: .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-table-header); }
.modal-review-grid aside p { margin: .35rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); line-height: 1.55; }
.modal-history-list { display: grid; }
.modal-history-list p { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .7rem; margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--smart-divider); font-size: var(--smart-font-body-md); }
.modal-history-list span { color: var(--smart-text-secondary); }
.reference-showcase-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.reference-table-wrap { overflow-x: auto; }
.smart-table-compact { min-width: 460px; }
.smart-table-compact > :not(caption) > * > *,
.smart-table-selectable > :not(caption) > * > * { padding: var(--smart-table-cell-block) var(--smart-table-cell-inline); }
.smart-pagination-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.smart-pagination-examples > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); }
.smart-pagination-examples > div > strong { font-size: var(--smart-font-body-md); }
.smart-pager { display: flex; align-items: center; gap: .5rem; }
.smart-pager span { color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); white-space: nowrap; }
.smart-badge-stack { display: flex; flex-wrap: wrap; gap: .45rem; }
.smart-progress-list { display: grid; gap: .8rem; }
.smart-progress-list > div > span { display: flex; justify-content: space-between; margin-bottom: .35rem; font-size: var(--smart-font-body-compact); }
.progress-bar.is-gold { background: var(--smart-gold-deep); }
.smart-progress-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.smart-progress-steps li { display: grid; justify-items: center; gap: .35rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); text-align: center; }
.smart-progress-steps li span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--smart-border); border-radius: 50%; background: var(--smart-surface); }
.smart-progress-steps li.is-complete,
.smart-progress-steps li.is-active { color: var(--smart-primary); }
.smart-progress-steps li.is-complete span { color: var(--smart-on-brand); background: var(--smart-primary); }
.smart-progress-steps li.is-active span { border-color: var(--smart-primary); background: var(--smart-info-soft); }
.reference-section-subheading { margin: 1.1rem 0 .65rem; }
.reference-section-subheading h3 { margin: 0; font-size: var(--smart-font-body-compact); }
.reference-section-subheading p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); }
.smart-placeholder-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: .75rem; }
.smart-placeholder-grid > div { min-height: 110px; padding: .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-surface); }
.smart-placeholder-user { display: flex; align-items: center; gap: .7rem; }
.smart-placeholder-user > div,
.smart-placeholder-list,
.smart-placeholder-table { display: grid; align-content: center; flex: 1; gap: .55rem; }
.skeleton-circle { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }
.skeleton-line { display: block; width: 100%; height: 11px; border-radius: var(--smart-radius-xs); }
.skeleton-line.is-medium { width: 72%; }
.skeleton-line.is-short { width: 46%; }

.smart-inline-player { display: grid; grid-template-columns: 48px minmax(150px, .7fr) 44px minmax(220px, 1.3fr) 40px; align-items: center; gap: .75rem; padding: .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-panel); background: var(--smart-table-header); }
.smart-player-art { display: grid; width: 48px; height: 48px; place-items: center; border-radius: var(--smart-radius-control); color: var(--smart-primary); background: var(--smart-info-soft); }
.smart-player-copy strong,
.smart-player-copy span { display: block; }
.smart-player-copy strong { font-size: var(--smart-font-body-sm); }
.smart-player-copy span { margin-top: .15rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-player-toggle { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; color: var(--smart-on-brand); background: var(--smart-primary); }
.smart-player-toggle:hover { background: var(--smart-primary-hover); }
.smart-player-timeline { min-width: 0; }
.smart-player-timeline input { width: 100%; accent-color: var(--smart-primary); }
.smart-player-timeline > div { display: flex; justify-content: space-between; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-track-list { display: grid; margin-top: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); overflow: hidden; }
.smart-track-list button { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .65rem .75rem; border: 0; border-bottom: 1px solid var(--smart-divider); color: var(--smart-text); background: var(--smart-surface); text-align: left; }
.smart-track-list button:last-child { border-bottom: 0; }
.smart-track-list button:hover { background: var(--smart-row-hover); }
.smart-track-list button.active { background: var(--smart-info-soft); }
.smart-track-list button > span,
.smart-track-list button > small { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-track-list button > strong { font-size: var(--smart-font-body-md); }

.smart-task-progress .progress-bar,
.smart-progress-list .progress-bar,
.widget-overview .progress-bar { transition: none; }

@media (max-width: 900px) {
  .smart-chat,
  .smart-inbox,
  .operations-split,
  .smart-widget-layout { grid-template-columns: 1fr; }
  .smart-chat-sidebar,
  .smart-inbox-folders { border-right: 0; border-bottom: 1px solid var(--smart-divider); }
  .smart-conversation-list { grid-template-columns: repeat(3, minmax(210px, 1fr)); overflow-x: auto; }
  .smart-inbox-folders { grid-template-columns: repeat(4, minmax(130px, 1fr)); overflow-x: auto; }
  .widget-list { grid-row: auto; }
  .smart-user-directory article { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .smart-user-directory dl { grid-column: 2 / -1; }
  .smart-user-directory article > button { grid-column: 3; grid-row: 1; }
  .smart-uptime-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-inline-player { grid-template-columns: 48px minmax(0, 1fr) 44px; }
  .smart-player-timeline { grid-column: 1 / -1; }
  .smart-inline-player > .topbar-icon { position: absolute; visibility: hidden; }
}

@media (max-width: 768px) {
  .smart-log-toolbar,
  .smart-pagination-examples,
  .smart-placeholder-grid { grid-template-columns: 1fr; }
  .smart-pagination-examples > div { align-items: flex-start; flex-direction: column; }
  .mail-open { grid-template-columns: 1fr; gap: .15rem; }
  .smart-mail-row { grid-template-columns: 22px 36px minmax(0, 1fr); }
  .smart-mail-row time { grid-column: 3; }
  .smart-service-rows article { grid-template-columns: minmax(0, 1fr) auto; }
  .smart-service-rows article > span:not(.badge-soft) { display: none; }
}

@media (max-width: 540px) {
  .smart-chat-composer { grid-template-columns: minmax(0, 1fr) auto; }
  .smart-chat-composer > .topbar-icon { display: none; }
  .smart-chat-composer .btn-smart-primary { padding-inline: .7rem; }
  .smart-conversation-list { grid-template-columns: 1fr; }
  .smart-chat-log { min-height: 280px; }
  .chat-bubble { max-width: 90%; }
  .smart-inbox-folders { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .smart-inbox-toolbar { align-items: stretch; flex-direction: column; }
  .smart-inbox-toolbar .smart-search-field { width: 100%; }
  .smart-mail-row { padding-inline: .55rem; }
  .smart-mail-row > label { display: none; }
  .smart-mail-row { grid-template-columns: 36px minmax(0, 1fr); }
  .smart-mail-row time { grid-column: 2; }
  .smart-uptime-summary,
  .widget-overview-primary,
  .modal-review-grid { grid-template-columns: 1fr; }
  .extension-panel-footer { align-items: stretch; flex-direction: column; }
  .smart-task-list label { grid-template-columns: 22px minmax(0, 1fr); }
  .smart-task-list label > .badge-soft { grid-column: 2; justify-self: start; }
  .smart-user-directory article { grid-template-columns: 48px minmax(0, 1fr); }
  .smart-user-directory dl,
  .smart-user-directory article > button { grid-column: 1 / -1; }
  .smart-user-directory article > button { grid-row: auto; width: 100%; }
  .smart-user-directory dl { grid-template-columns: 1fr; }
  .widget-list li { grid-template-columns: 28px minmax(0, 1fr); }
  .widget-list li > .badge-soft { grid-column: 2; justify-self: start; }
  .smart-pager { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .smart-faq summary .icon { transition: none; }
}

/* Extension pages: vendor behavior, SMART visual contract. */
.extension-page { display: grid; max-width: 1240px; gap: 1.1rem; }
.extension-page > .page-heading { margin-bottom: .15rem; padding-bottom: .15rem; }
.page-heading-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.extension-panel { padding: 0; }
.extension-panel > .panel-header { margin: 0; padding: 1rem 1.1rem; border-bottom: 1px solid var(--smart-divider); }
.extension-panel > .panel-header h2 { font-size: var(--smart-font-title); }
.extension-panel > .panel-header p { max-width: 72ch; }
.extension-note { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); color: var(--smart-text-secondary); background: var(--smart-info-soft); }
.extension-note > .icon { width: 1.1rem; height: 1.1rem; margin-top: .05rem; flex: 0 0 auto; color: var(--smart-info); }
.extension-note strong,
.extension-note span { display: block; }
.extension-note strong { color: var(--smart-text); font-size: var(--smart-font-body-sm); }
.extension-note span { margin-top: .1rem; font-size: var(--smart-font-body-compact); line-height: 1.55; }

.smart-calendar { padding: 1rem; color: var(--smart-text); }
.smart-calendar .fc { --fc-border-color: var(--smart-border); --fc-page-bg-color: var(--smart-surface); --fc-neutral-bg-color: var(--smart-table-header); --fc-list-event-hover-bg-color: var(--smart-row-hover); }
.smart-calendar .fc .fc-toolbar { gap: .7rem; }
.smart-calendar .fc .fc-toolbar-title { color: var(--smart-text); font-size: var(--smart-font-title); font-weight: 800; }
.smart-calendar .fc .fc-button { min-height: 38px; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-md); color: var(--smart-text); background: var(--smart-surface-elevated); box-shadow: none; font-size: var(--smart-font-label); font-weight: 750; }
.smart-calendar .fc .fc-button:hover { border-color: var(--smart-primary); color: var(--smart-primary); background: var(--smart-info-soft); }
.smart-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
.smart-calendar .fc .fc-button-primary:not(:disabled):active { border-color: var(--smart-primary); color: var(--smart-on-primary); background: var(--smart-primary); }
.smart-calendar .fc .fc-button:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; box-shadow: none; }
.smart-calendar .fc .fc-col-header-cell-cushion,
.smart-calendar .fc .fc-daygrid-day-number { color: var(--smart-text); text-decoration: none; }
.smart-calendar .fc .fc-col-header-cell-cushion { padding: .55rem .25rem; font-size: var(--smart-font-meta); font-weight: 750; }
.smart-calendar .fc .fc-daygrid-day-number { font-size: var(--smart-font-label); }
.smart-calendar .fc .fc-event { border-radius: var(--smart-radius-xs); padding: .08rem .18rem; font-size: var(--smart-font-caption); }
.smart-calendar .fc .fc-event.is-warning { border-color: var(--smart-gold-deep); color: var(--smart-on-gold); background: var(--smart-gold); }
.smart-calendar .fc .fc-event.is-success { border-color: var(--smart-success); color: var(--smart-success); background: var(--smart-success-soft); }
.smart-calendar .fc .fc-event.is-purple { border-color: var(--smart-purple); color: var(--smart-on-primary); background: var(--smart-purple); }
.smart-calendar .fc .fc-event.is-cyan { border-color: var(--smart-info); color: var(--smart-info); background: var(--smart-info-soft); }
.smart-calendar .fc .fc-day-today { background: var(--smart-info-soft); }

.smart-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.smart-media-card { overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); color: var(--smart-text); background: var(--smart-surface); text-decoration: none; transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), box-shadow var(--smart-motion-fast) var(--smart-ease-standard), transform var(--smart-motion-fast) var(--smart-ease-standard); }
.smart-media-card:hover { border-color: var(--smart-primary); color: var(--smart-text); box-shadow: var(--smart-interactive-shadow-hover); transform: translateY(-2px); text-decoration: none; }
.smart-media-card:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 3px; }
.smart-media-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--smart-table-header); }
.smart-media-card.smart-media-logo img { padding: 2rem; object-fit: contain; }
.smart-media-card > span { display: block; padding: .75rem; }
.smart-media-card strong,
.smart-media-card small { display: block; }
.smart-media-card strong { font-size: var(--smart-font-body-sm); }
.smart-media-card small { margin-top: .16rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); line-height: 1.4; }

.extension-tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.extension-feature { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: .7rem; padding: 1rem; }
.extension-feature .metric-icon { grid-row: 1 / 3; }
.extension-feature h2 { margin: 0; font-size: var(--smart-font-compact-title); }
.extension-feature p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.extension-feature > strong { align-self: end; font-size: var(--smart-font-title); }
.extension-feature > small { grid-column: 3; color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.extension-action-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.extension-action-row strong,
.extension-action-row span { display: block; }
.extension-action-row strong { font-size: var(--smart-font-body-compact); }
.extension-action-row span { margin-top: .18rem; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }

.driver-popover.driverjs-theme { color: var(--smart-text); background: var(--smart-surface-elevated); }
.driver-popover { max-width: min(340px, calc(100vw - 32px)); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); box-shadow: var(--smart-interactive-shadow-hover); }
.driver-popover .driver-popover-title { font: 800 .85rem/1.35 Inter, system-ui, sans-serif; }
.driver-popover .driver-popover-description { color: var(--smart-text-secondary); font: 400 .68rem/1.55 Inter, system-ui, sans-serif; }
.driver-popover .driver-popover-progress-text { color: var(--smart-text-muted); font-size: var(--smart-font-micro); }
.driver-popover button { min-height: 36px; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-subtle); color: var(--smart-text); background: var(--smart-surface-elevated); text-shadow: none; font: 750 .62rem/1 Inter, system-ui, sans-serif; }
.driver-popover button:hover { color: var(--smart-primary); background: var(--smart-info-soft); }
.driver-popover button:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.driver-popover .driver-popover-next-btn { border-color: var(--smart-primary); color: var(--smart-on-primary); background: var(--smart-primary); }
.driver-popover .driver-popover-next-btn:hover { color: var(--smart-on-primary); background: var(--smart-primary-hover); }
.driver-popover .driver-popover-close-btn { color: var(--smart-text-secondary); }

.smart-editor-form { padding: 0; }
.smart-editor-form .form-grid { padding: 1rem; }
.smart-editor-form .form-actions { padding: 0 1rem 1rem; }
.smart-editor-form .form-field > span { display: block; margin-bottom: .35rem; color: var(--smart-text); font-size: var(--smart-font-meta); font-weight: 750; }
.smart-editor-form .form-field > small { display: block; margin-top: .45rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.smart-editor-form .tox-hugerte { border-color: var(--smart-control-border); border-radius: var(--smart-radius-control); }
.smart-editor-form .tox-hugerte:focus-within { border-color: var(--smart-primary); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }

/* Select2 is a legacy-only adapter. It lives on a separate jQuery page and
   intentionally mirrors the native/Tom Select SMART focus contract. */
.extension-form-example { width: min(100%, 720px); padding: 1rem 1.1rem 1.1rem; }
.extension-form-example .form-field { display: block; }
.extension-form-example .form-field > span { display: block; margin-bottom: .35rem; color: var(--smart-text); font-size: var(--smart-font-meta); font-weight: 750; }
.extension-form-example .form-field > small { display: block; margin-top: .45rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.smart-select2-legacy .select2-container { font-size: var(--smart-font-body-sm); }
.smart-select2-legacy .extension-form-example .select2-container { width: 100% !important; }
.smart-select2-legacy .select2-container .select2-selection--single,
.smart-select2-legacy .select2-container .select2-selection--multiple { min-height: 44px; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); box-shadow: none; }
.smart-select2-legacy .select2-container .select2-selection--single { display: flex; align-items: center; }
.smart-select2-legacy .select2-container .select2-selection--single .select2-selection__rendered { padding-inline: .75rem 2.25rem; color: var(--smart-text); line-height: 1.4; }
.smart-select2-legacy .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--smart-text-muted); }
.smart-select2-legacy .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; inset-inline-end: .55rem; transform: translateY(-50%); }
.smart-select2-legacy .select2-container:not(.select2-container--disabled) .select2-selection:hover { border-color: var(--smart-control-border-hover); }
.smart-select2-legacy .select2-container--focus .select2-selection,
.smart-select2-legacy .select2-container--open .select2-selection { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-select2-legacy .select2-dropdown { overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-surface-elevated); box-shadow: var(--smart-card-shadow); }
.smart-select2-legacy .select2-dropdown--below { margin-top: .4rem; }
.smart-select2-legacy .select2-search--dropdown { padding: .55rem; }
.smart-select2-legacy .select2-search--dropdown .select2-search__field { min-height: 40px; padding: .45rem .65rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-md); color: var(--smart-text); background: var(--smart-input-bg); }
.smart-select2-legacy .select2-search--dropdown .select2-search__field:focus-visible { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-select2-legacy .select2-results__options { max-height: 180px; padding: .3rem; }
.smart-select2-legacy .select2-results__option { margin: .1rem 0; padding: .55rem .65rem; border-radius: var(--smart-radius-subtle); }
.smart-select2-legacy .select2-results__option--highlighted.select2-results__option--selectable { color: var(--smart-text); background: var(--smart-info-soft); }
.smart-select2-legacy .select2-results__option--selected { color: var(--smart-primary); background: var(--smart-table-header); font-weight: 750; }

.smart-datatable-panel { margin: var(--smart-table-inset); overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-table-radius); background: var(--smart-surface); }
.smart-datatable-panel .dt-container { --dt-paging-button_color-current: var(--smart-on-primary); --dt-paging-button_color-current-hover: var(--smart-on-primary); color: var(--smart-text); font-size: var(--smart-font-body-md); }
.smart-datatable-panel .dt-layout-row { gap: .75rem; margin: 0; padding: .8rem 1rem; }
.smart-datatable-panel .dt-layout-row:first-child { border-bottom: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.smart-datatable-panel .dt-layout-row:last-child { border-top: 1px solid var(--smart-divider); }
.smart-datatable-panel .dt-length,
.smart-datatable-panel .dt-search { display: flex; align-items: center; gap: .5rem; color: var(--smart-text-secondary); }
.smart-datatable-panel .smart-datatable-search-label { display: grid; gap: .35rem; }
.smart-datatable-panel .dt-search .smart-search-field { width: 220px; max-width: 100%; }
.smart-datatable-panel .smart-search-field > .dt-input { width: 100%; }
.smart-datatable-panel div.dt-container .dt-input { min-height: 38px; padding: .4rem .65rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); box-shadow: none; font-size: var(--smart-font-body); }
.smart-datatable-panel div.dt-container .smart-search-field > .dt-input { padding-inline-start: 2.15rem; }
.smart-datatable-panel .dt-length select.dt-input { width: 72px; padding-inline: .65rem 1.65rem; }
.smart-datatable-panel div.dt-container .dt-input:hover { border-color: var(--smart-control-border-hover); }
.smart-datatable-panel div.dt-container .dt-input:focus { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; box-shadow: none; }
.smart-datatable-panel table.dataTable { width: 100% !important; margin: 0 !important; border: 0; color: var(--smart-text); background: var(--smart-surface); }
.smart-datatable-panel table.dataTable thead th { padding: var(--smart-table-cell-block) var(--smart-table-cell-inline); border-bottom: 1px solid var(--smart-border); color: var(--smart-text-muted); background: var(--smart-table-header); font-size: var(--smart-font-body-md); font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.smart-datatable-panel table.dataTable tbody td { padding: var(--smart-table-cell-block) var(--smart-table-cell-inline); border-bottom: 1px solid var(--smart-divider); color: var(--smart-text-secondary); background: var(--smart-surface); vertical-align: middle; }
.smart-datatable-panel table.dataTable tbody tr:last-child td { border-bottom: 0; }
.smart-datatable-panel table.dataTable tbody tr:hover td { background: var(--smart-row-hover); }
.smart-datatable-panel table.dataTable th:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--smart-focus-ring); outline-offset: -3px; }
.smart-datatable-panel .dt-info { color: var(--smart-text-muted); }
.smart-datatable-panel .dt-paging { display: flex; flex-wrap: wrap; gap: .35rem; }
.smart-datatable-panel .dt-paging nav { display: flex; align-items: center; gap: .35rem; }
.smart-datatable-panel .dt-paging .dt-paging-button.disabled { opacity: .38; cursor: not-allowed; }
.smart-datatable-panel table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { color: var(--smart-primary); }
.smart-datatable-panel table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
.smart-datatable-panel table.dataTable > tbody > tr.child span.dtr-title { color: var(--smart-text); }
.smart-datatable-person { display: flex; min-width: 190px; align-items: center; gap: .65rem; }
.smart-datatable-person > span:last-child { min-width: 0; }
.smart-datatable-person strong,
.smart-datatable-person small { display: block; }
.smart-datatable-person strong { color: var(--smart-text); font-size: var(--smart-font-body-compact); }
.smart-datatable-person small { margin-top: .12rem; overflow: hidden; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); text-overflow: ellipsis; white-space: nowrap; }
.smart-datatable-unit { color: var(--smart-text); font-weight: 650; }
.smart-datatable-date { color: var(--smart-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 768px) {
  .reference-variant-row { align-items: stretch; flex-direction: column; }
  .reference-variant-row > strong { width: auto; }
  .reference-variant-field { width: 100%; }
  .smart-media-grid,
  .extension-tour-grid { grid-template-columns: 1fr; }
  .smart-calendar { padding: .75rem; }
  .smart-calendar .fc .fc-toolbar { align-items: stretch; flex-direction: column; }
  .smart-calendar .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
  .smart-datatable-panel .dt-layout-row { align-items: stretch; flex-direction: column; }
  .smart-datatable-panel { margin: .75rem; }
  .smart-datatable-panel .dt-length,
  .smart-datatable-panel .dt-search { justify-content: space-between; }
  .smart-datatable-panel .dt-search { width: 100%; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; }
  .smart-datatable-panel .dt-search .smart-search-field { width: 100%; }
  .smart-datatable-panel .dt-search input { width: 100%; min-width: 0; }
  .smart-datatable-panel div.dt-container .dt-input { min-height: 44px; font-size: var(--smart-font-title); }
  .smart-datatable-panel .dt-layout-row:last-child .dt-layout-cell { width: 100%; }
  .smart-datatable-panel .dt-layout-row:last-child .dt-paging,
  .smart-datatable-panel .dt-layout-row:last-child .dt-paging nav { justify-content: center; }
}

@media (max-width: 540px) {
  .page-heading-actions { width: 100%; }
  .page-heading-actions > * { flex: 1 1 auto; }
  .extension-action-row { align-items: stretch; flex-direction: column; }
  .extension-action-row .btn-smart-light { width: 100%; }
  .extension-feature { grid-template-columns: 40px minmax(0, 1fr); }
  .extension-feature > strong,
  .extension-feature > small { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .smart-media-card { transition: none; }
  .smart-media-card:hover { transform: none; }
}

/* Internal SMART UI Library / Assets Reference surfaces. These styles are scoped
   to prevent reference documentation from changing production pages. */
.smart-reference-document { overflow-x: hidden; }
.smart-reference-page { --smart-reference-max-width: 1180px; min-height: 100vh; overflow-x: clip; color: var(--smart-text); background: var(--smart-app-bg); }
.smart-reference-header { display: flex; min-height: 72px; align-items: center; gap: 1rem; padding-block: .85rem; padding-inline: max(1rem, calc((100% - var(--smart-reference-max-width)) / 2)); border-bottom: 1px solid var(--smart-border); background: var(--smart-surface); }
.smart-reference-header > p { margin: 0 auto 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); }
.smart-reference-brand { display: inline-flex; min-height: 44px; align-items: center; gap: .65rem; color: var(--smart-wordmark-accent); text-decoration: none; }
.smart-reference-brand img { width: 30px; height: 38px; object-fit: contain; }
.smart-reference-brand span { display: grid; gap: .1rem; line-height: 1; }
.smart-reference-brand strong { color: var(--smart-wordmark-accent); font-size: var(--smart-font-title); letter-spacing: .02em; }
.smart-reference-brand small { color: var(--smart-text-muted); font-size: var(--smart-font-body-md); font-weight: 750; letter-spacing: .1em; }
.reference-container,
.smart-reference-main { width: min(100% - 2rem, var(--smart-reference-max-width, 1180px)); min-width: 0; margin-inline: auto; padding: 2rem 0 3rem; }
.reference-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.reference-intro h1 { margin: .25rem 0 .45rem; font-size: var(--smart-font-heading-hero); letter-spacing: -.035em; }
.reference-intro p { max-width: 65ch; margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-label-lg); line-height: 1.55; }
.reference-nav { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.75rem; padding: .6rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: color-mix(in srgb, var(--smart-surface) 94%, transparent); }
.reference-nav a { min-height: 36px; display: inline-flex; align-items: center; padding: .35rem .65rem; border-radius: var(--smart-radius-control); color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); font-weight: 700; text-decoration: none; }
.reference-nav a:hover { color: var(--smart-primary); background: var(--smart-info-soft); }
.reference-nav a:focus-visible { outline: 3px solid var(--smart-info); outline-offset: 2px; }
.reference-section { scroll-margin-top: 5rem; margin-top: 2.5rem; }
.reference-section-heading { margin-bottom: 1rem; }
.reference-section-heading h2 { margin: .2rem 0 .35rem; font-size: var(--smart-font-subheading); letter-spacing: -.02em; }
.reference-section-heading p { max-width: 70ch; margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-control); }
.reference-grid { display: grid; gap: .9rem; }
.reference-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reference-card, .reference-contract, .reference-note, .reference-pattern, .asset-card, .asset-list > div { border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); }
.reference-card, .asset-card, .asset-list > div { padding: 1rem; }
.reference-card h3, .asset-card strong, .reference-pattern strong { margin: 0 0 .45rem; font-size: var(--smart-font-compact-title); }
.reference-card p, .asset-card p, .asset-list p { margin: .35rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body); line-height: 1.5; }
.reference-card code, .asset-card code, .reference-contract code { display: inline-block; margin-top: .55rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); }
.smart-assets .reference-card > *, .smart-assets .asset-card > * { min-width: 0; }
.smart-assets .reference-card code, .smart-assets .asset-card code { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.reference-display { color: var(--smart-primary) !important; font-size: var(--smart-font-display-xl) !important; font-weight: 800; letter-spacing: -.05em; }
.swatch-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.swatch-row i { display: inline-flex; width: 58px; height: 46px; align-items: flex-end; padding: .35rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--swatch); font-size: var(--smart-font-body-compact); font-style: normal; font-weight: 700; }
.swatch-navy { --swatch: var(--smart-navy-900); color: #fff !important; }
.swatch-action { --swatch: var(--smart-primary); color: #fff !important; }
.swatch-gold { --swatch: var(--smart-gold); }
.swatch-canvas { --swatch: var(--smart-app-bg); }
.swatch-surface { --swatch: var(--smart-surface); }
.reference-note, .reference-contract { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .9rem; padding: .8rem 1rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); }
.reference-note strong, .reference-contract strong { color: var(--smart-text); }
.smart-chart-reference { --smart-reference-max-width: 1240px; }
.chart-decision-table { overflow-x: auto; }
.chart-decision-table .table { min-width: 660px; margin: 0; }
.chart-decision-table :is(th, td) { font-size: var(--smart-font-body-compact); vertical-align: top; }
.chart-decision-table thead th { color: var(--smart-text-secondary); background: var(--smart-table-header); }
.chart-specimen { min-width: 0; overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-card); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.chart-specimen-featured { padding-bottom: .2rem; }
.chart-specimen-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .25rem; }
.chart-specimen-header h3 { margin: 0; font-size: var(--smart-font-title-sm); letter-spacing: -.015em; }
.chart-specimen-header p { margin: .2rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-meta); line-height: 1.45; }
.chart-period-control { display: grid; min-width: 145px; gap: .25rem; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); font-weight: 700; }
.chart-period-control .form-select { min-height: var(--smart-control-height-sm); padding-block: .35rem; font-size: var(--smart-font-body-compact); }
.chart-insight { margin: .45rem 1rem 0; padding: .55rem .65rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-compact); color: var(--smart-text-secondary); background: var(--smart-info-soft); font-size: var(--smart-font-body-sm); line-height: 1.5; }
.chart-canvas { min-width: 0; min-height: 280px; padding: .25rem .4rem .4rem; }
.chart-canvas-lg { min-height: 310px; }
.chart-canvas-sm { min-height: 225px; }
.chart-canvas-failed { display: grid; place-items: center; margin: 1rem; padding: 1rem; border: 1px dashed var(--smart-danger); border-radius: var(--smart-radius-lg); color: var(--smart-danger); background: var(--smart-danger-soft); font-size: var(--smart-font-body-compact); text-align: center; }
.chart-data-fallback { margin: 0 1rem 1rem; border-top: 1px solid var(--smart-divider); }
.chart-data-fallback summary { min-height: 36px; padding: .65rem .15rem .25rem; color: var(--smart-link); font-size: var(--smart-font-body-compact); font-weight: 750; cursor: pointer; }
.chart-data-fallback .table-responsive { max-height: 270px; margin-top: .65rem; }
.chart-data-fallback .table { margin: 0; font-size: var(--smart-font-body-compact); }
.chart-data-fallback caption { caption-side: top; padding: .7rem .8rem; border-bottom: 1px solid var(--smart-divider); color: var(--smart-text-secondary); font-size: var(--smart-font-meta); text-align: start; }
.chart-data-fallback .table > :not(caption) > * > * { padding: var(--smart-table-cell-block) var(--smart-table-cell-inline); }
.chart-reference-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1rem; }
.chart-reference-composition { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: 1rem; align-items: stretch; }
.chart-reference-stack { display: grid; gap: 1rem; }
.chart-specimen-compact { display: flex; flex-direction: column; }
.chart-legend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .8rem; margin: auto 1rem 1rem; padding: .85rem 0 0; border-top: 1px solid var(--smart-divider); list-style: none; }
.chart-legend-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: .45rem; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.chart-legend-list i { width: 8px; height: 8px; border-radius: 50%; background: var(--smart-text-muted); }
.chart-legend-list i.is-blue { background: var(--smart-data-blue); }
.chart-legend-list i.is-gold { background: var(--smart-gold); }
.chart-legend-list i.is-cyan { background: var(--smart-cyan); }
.chart-legend-list i.is-purple { background: var(--smart-purple); }
.chart-legend-list i.is-teal { background: var(--smart-teal); }
.chart-legend-list strong { color: var(--smart-text); font-size: var(--smart-font-meta); }
.chart-state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.chart-state-card { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: .7rem; padding: .9rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); }
.chart-state-card h3 { margin: 0; font-size: var(--smart-font-body); }
.chart-state-card p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.5; }
.chart-state-card button { margin-top: .55rem; }
.chart-state-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--smart-radius-control); color: var(--smart-primary); background: var(--smart-info-soft); font-size: var(--smart-font-body-sm); font-weight: 850; }
.chart-state-icon.is-loading { border: 3px solid var(--smart-ring-track); border-top-color: var(--smart-primary); border-radius: 50%; background: transparent; animation: smart-spin .75s linear infinite; }
@keyframes smart-spin { to { transform: rotate(360deg); } }
.chart-state-icon.is-empty::before { content: '0'; }
.chart-state-card.is-warning { border-color: var(--smart-warning-ring); }
.chart-state-card.is-warning .chart-state-icon { color: var(--smart-warning); background: var(--smart-warning-soft); }
.chart-state-card.is-error { border-color: var(--smart-danger); }
.chart-state-card.is-error .chart-state-icon { color: var(--smart-danger); background: var(--smart-danger-soft); }
.chart-state-card.is-success { border-color: var(--smart-success); }
.chart-state-card.is-success .chart-state-icon { color: var(--smart-success); background: var(--smart-success-soft); }
.chart-contract-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.chart-contract-list p { display: grid; gap: .25rem; margin: 0; padding: .85rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-compact); background: var(--smart-surface); }
.chart-contract-list strong { font-size: var(--smart-font-body-compact); }
.chart-contract-list span { color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.5; }
.chart-contract-list code { color: var(--smart-primary); }
.reference-showcase { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.reference-showcase-actions { padding: 1rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); }
.reference-variant-stack { display: grid; gap: .8rem; margin-top: .8rem; }
.reference-variant-row { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding: .9rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); }
.reference-variant-row > strong { width: 8.5rem; align-self: center; font-size: var(--smart-font-body-sm); }
.reference-variant-field { display: grid; width: min(100%, 220px); gap: .35rem; margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); font-weight: 700; }
.reference-avatar-size { display: grid; place-items: center; border-radius: 50%; color: var(--smart-on-brand); background: var(--smart-navy-800); font-weight: 800; }
.reference-avatar-size.is-sm { width: 32px; height: 32px; font-size: var(--smart-font-label); }
.reference-avatar-size.is-md { width: 40px; height: 40px; font-size: var(--smart-font-body-sm); }
.reference-avatar-size.is-lg { width: 52px; height: 52px; font-size: var(--smart-font-compact-title); }
.badge-soft.badge-sm { min-height: 22px; padding: .2rem .42rem; font-size: var(--smart-font-caption); }
.badge-soft.badge-lg { min-height: 32px; padding: .42rem .65rem; font-size: var(--smart-font-body-compact); }
.reference-progress { width: min(100%, 180px); overflow: hidden; border-radius: var(--smart-radius-pill); background: var(--smart-ring-track); }
.reference-progress > span { display: block; width: 64%; border-radius: inherit; background: var(--smart-primary); }
.reference-progress.is-sm > span { height: 4px; }
.reference-progress.is-md > span { height: 8px; }
.reference-progress.is-lg > span { height: 12px; }
.reference-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: .9rem; padding: 1rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); }
.reference-field { display: grid; align-content: start; gap: .35rem; color: var(--smart-text); font-size: var(--smart-font-body-md); font-weight: 700; }
.reference-field-hint { color: var(--smart-text-muted); font-size: var(--smart-font-small); font-weight: 500; line-height: 1.45; }
.reference-select { position: relative; display: block; }
.reference-select .form-select { min-height: 48px; appearance: none; padding: .65rem 2.4rem .65rem .8rem; font-size: var(--smart-font-control); line-height: 1.35; }
.reference-select > .icon { position: absolute; inset-inline-end: .75rem; top: 50%; width: 1rem; height: 1rem; color: var(--smart-text-muted); pointer-events: none; transform: translateY(-50%); }
.reference-field input[type="date"] { min-width: 0; height: 44px; align-self: start; appearance: auto; }
.reference-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .72; cursor: pointer; }
.smart-search-field { position: relative; display: block; min-width: 0; }
.smart-search-field > .icon { position: absolute; z-index: 1; inset-inline-start: .75rem; top: 50%; width: 1rem; height: 1rem; color: var(--smart-text-muted); pointer-events: none; transform: translateY(-50%); }
.smart-search-field > .form-control { padding-inline-start: 2.25rem; }
.smart-file-picker { display: flex; min-width: 0; min-height: 44px; align-items: center; gap: .65rem; padding: .25rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); background: var(--smart-input-bg); }
.smart-file-picker:hover { border-color: var(--smart-control-border-hover); }
.smart-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.smart-file-browse { min-height: 36px; gap: .4rem; margin: 0; cursor: pointer; white-space: nowrap; }
.smart-file-browse .icon { width: 1rem; height: 1rem; }
.smart-upload-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; border: 1px solid color-mix(in srgb, var(--smart-primary) 35%, var(--smart-border)); border-radius: var(--smart-radius-md); color: var(--smart-primary); background: var(--smart-info-soft); font: inherit; font-size: var(--smart-font-body-compact); font-weight: 750; text-decoration: none; transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard); }
.smart-upload-button:hover { border-color: var(--smart-primary); color: var(--smart-on-primary); background: var(--smart-primary); }
.smart-upload-button:active { border-color: var(--smart-primary-active); background: var(--smart-primary-active); }
.smart-upload-button:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-file-clear { display: inline-grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; margin-inline-start: auto; padding: 0; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); background: var(--smart-surface); }
.smart-file-clear[hidden] { display: none; }
.smart-file-clear:hover { border-color: var(--smart-danger); color: var(--smart-danger); background: var(--smart-danger-soft); }
.smart-file-clear:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-file-clear .icon { width: 1rem; height: 1rem; }
.smart-file-picker:has(.smart-file-input:focus-visible) { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-file-icon { display: inline-flex; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; align-items: center; justify-content: center; border-radius: var(--smart-radius-control); color: var(--smart-primary); background: var(--smart-info-soft); }
.smart-file-icon .icon { width: 1.2rem; height: 1.2rem; }
.smart-file-name { min-width: 0; overflow: hidden; color: var(--smart-text-muted); font-size: var(--smart-font-meta); font-style: normal; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.smart-file-picker.has-file .smart-file-name { color: var(--smart-primary); font-weight: 700; }
.reference-enhanced-forms { margin-top: .9rem; }
.reference-enhanced-forms .reference-card { display: grid; align-content: start; gap: .55rem; }
.reference-enhanced-forms .reference-card > p { min-height: 2.4em; margin: 0; }
.reference-date-range-card { grid-column: 1 / -1; }
.smart-date-range-control { display: grid; width: min(100%, 620px); grid-template-columns: minmax(0, 280px) auto minmax(0, 280px); align-items: end; gap: .65rem; }
.smart-date-range-part { min-width: 0; }
.smart-date-range-separator { display: grid; min-height: 44px; place-items: center; padding-inline: .15rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 700; }

/* Canonical enhanced form controls. Vendor behavior stays local; SMART owns the visual contract. */
.smart-tom-select.ts-wrapper { min-height: 44px; font-size: var(--smart-font-body-sm); }
.smart-tom-select .ts-control { min-height: 44px; align-items: center; padding: .55rem .75rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); box-shadow: none; }
.smart-tom-select:not(.disabled) .ts-control:hover { border-color: var(--smart-control-border-hover); }
.smart-tom-select.focus .ts-control { border-color: var(--smart-focus-ring-surface); box-shadow: none; outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-tom-select .ts-control input, .smart-tom-select .ts-control input::placeholder { color: var(--smart-text-muted); }
.smart-tom-select.multi .ts-control > div { display: inline-flex; align-items: center; gap: .2rem; margin: .1rem .25rem .1rem 0; padding: .18rem .35rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-compact); color: var(--smart-text); background: var(--smart-surface-elevated); }
.smart-tom-select.plugin-remove_button .item .remove { border-inline-start: 1px solid var(--smart-border); color: var(--smart-text-secondary); }
.smart-tom-select .ts-dropdown { z-index: 20; margin-top: .3rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.smart-tom-select .ts-dropdown-content { max-height: 220px; padding: .3rem; }
.smart-tom-select .ts-dropdown .option, .smart-tom-select .ts-dropdown .no-results { padding: .55rem .65rem; border-radius: var(--smart-radius-subtle); }
.smart-tom-select .ts-dropdown .active { color: var(--smart-text); background: var(--smart-info-soft); }
.smart-tom-select .clear-button { color: var(--smart-text-muted); }
.smart-tom-select.smart-filter-select.ts-wrapper { min-height: var(--smart-control-height-sm); }
.smart-tom-select.smart-filter-select .ts-control { min-height: var(--smart-control-height-sm); flex-wrap: nowrap; overflow: hidden; border-radius: var(--smart-radius-pill); white-space: nowrap; }
.smart-tom-select.smart-filter-select .ts-control > .item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-tom-select.smart-hide-selected-on-open:not(.is-dropdown-open) .ts-control > input {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.smart-tom-select.smart-hide-selected-on-open.is-dropdown-open .ts-control > .item { display: none; }
.smart-tom-select.smart-hide-selected-on-open.is-dropdown-open .ts-control > input { position: static !important; width: auto !important; min-width: 0; height: auto; flex: 1 1 auto; opacity: 1; pointer-events: auto; }
.reference-select .smart-tom-select.ts-wrapper { min-height: 48px; }
.reference-select .smart-tom-select .ts-control { min-height: 48px; padding: .65rem .8rem; font-size: var(--smart-font-control); line-height: 1.35; }

.smart-date-field { position: relative; display: block; }
.smart-date-field > .icon { position: absolute; z-index: 1; top: 50%; right: .75rem; width: 1rem; height: 1rem; color: var(--smart-text-muted); pointer-events: none; transform: translateY(-50%); }
.smart-date-field > input { padding-right: 2.4rem; }
.litepicker { --litepicker-day-width: 36px; z-index: 1300; color: var(--smart-text); font-family: inherit; font-size: var(--smart-font-body-md); }
.litepicker .container__main { overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); box-shadow: 0 16px 38px rgba(7, 26, 61, .18); }
.litepicker .container__months { padding: .75rem; background: var(--smart-surface); }
.litepicker .container__months .month-item { padding: 0; }
.litepicker .container__months .month-item-header { min-height: 42px; padding: 0 .1rem .55rem; color: var(--smart-text); }
.litepicker .container__months .month-item-header div { color: var(--smart-text); font-weight: 800; }
.litepicker .container__months .month-item-header .button-previous-month,
.litepicker .container__months .month-item-header .button-next-month { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); background: transparent; }
.litepicker .container__months .month-item-header button:hover { color: var(--smart-primary); background: var(--smart-row-hover); }
.litepicker .container__months .month-item-header button:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 1px; }
.litepicker .container__months .month-item-weekdays-row { padding-block: .25rem; color: var(--smart-text-muted); font-size: var(--smart-font-meta); font-weight: 750; }
.litepicker .container__days > div,
.litepicker .container__days > a { width: 36px; height: 36px; padding: 0; }
.litepicker .container__days .day-item { display: grid; place-items: center; border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); }
.litepicker .container__days .day-item:hover, .litepicker .container__days .day-item:focus { color: var(--smart-primary); box-shadow: inset 0 0 0 1px var(--smart-primary); }
.litepicker .container__days .day-item.is-today { color: var(--smart-primary); font-weight: 800; box-shadow: inset 0 0 0 1px var(--smart-primary); }
.litepicker .container__days .day-item.is-start-date, .litepicker .container__days .day-item.is-end-date { color: var(--smart-on-primary); background: var(--smart-primary); box-shadow: none; }
.litepicker .container__days .day-item.is-in-range { border-radius: 0; background: var(--smart-info-soft); }
.litepicker .container__months.columns-2 { gap: .5rem; }
.litepicker .container__months.columns-2 .month-item + .month-item { border-inline-start: 1px solid var(--smart-divider); }
.litepicker .container__footer { padding: .65rem .75rem; border-top: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.litepicker .container__footer .button-reset { min-height: 36px; padding: 0 .7rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-subtle); color: var(--smart-text); background: var(--smart-surface); font-size: var(--smart-font-body-compact); font-weight: 750; }

.reference-section-subheading { margin-top: 1.25rem; }
.reference-section-subheading h3 { margin: 0; color: var(--smart-text); font-size: var(--smart-font-label-lg); }
.reference-section-subheading p { margin: .25rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-sm); }
.smart-dropzone-variants, .reference-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: .75rem; }
.smart-dropzone-card { display: grid; align-content: start; gap: .8rem; }
.smart-dropzone-card > div:first-child > p { min-height: 3em; }
.smart-dropzone { min-height: 164px; padding: .85rem; border: 1px dashed var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); }
.smart-dropzone.dz-drag-hover { border-color: var(--smart-primary); background: var(--smart-info-soft); }
.smart-dropzone-prompt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; }
.smart-dropzone-prompt > div { display: grid; min-width: 0; flex: 1; gap: .15rem; }
.smart-dropzone-prompt > .smart-upload-button { grid-column: 1 / -1; width: 100%; }
.smart-dropzone-prompt strong { font-size: var(--smart-font-body-md); }
.smart-dropzone-prompt small, .smart-dropzone-status { color: var(--smart-text-muted); font-size: var(--smart-font-meta); }
.smart-dropzone-status { margin: .65rem 0 0; }
.smart-upload-list { display: grid; gap: .45rem; margin-top: .65rem; }
.smart-upload-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem; border-top: 1px solid var(--smart-border); }
.smart-upload-file { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.smart-upload-file > .icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: var(--smart-primary); }
.smart-upload-file > div { display: grid; min-width: 0; gap: .1rem; }
.smart-upload-file strong { overflow: hidden; font-size: var(--smart-font-body-sm); text-overflow: ellipsis; white-space: nowrap; }
.smart-upload-file small { color: var(--smart-text-muted); font-size: var(--smart-font-label); }

.reference-alert-actions { margin-top: .9rem; padding: .8rem 0 0; }
.swal2-container { font-family: inherit; }
.swal2-popup.smart-alert { width: min(92vw, 420px); padding: 1.25rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-card); color: var(--smart-text); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.smart-alert .swal2-title { max-width: 32ch; margin-inline: auto; padding: 0; color: var(--smart-text); font-size: var(--smart-font-title); font-weight: 800; line-height: 1.3; }
.smart-alert .swal2-html-container { max-width: 40ch; margin: .5rem auto 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body); line-height: 1.55; }
.smart-alert .swal2-actions { gap: .55rem; margin: 1rem 0 0; }
.smart-alert .smart-alert-icon { width: 3rem; height: 3rem; margin: 0 auto .8rem; border: 0; border-radius: var(--smart-radius-lg); color: var(--smart-primary); background: var(--smart-info-soft); }
.smart-alert .smart-alert-icon .swal2-icon-content { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; line-height: 1; }
.smart-alert .smart-alert-icon .icon { width: 1.45rem; height: 1.45rem; }
.smart-alert.is-success .smart-alert-icon { color: var(--smart-success); background: var(--smart-success-soft); }
.smart-alert.is-error .smart-alert-icon, .smart-alert.is-danger .smart-alert-icon { color: var(--smart-danger); background: var(--smart-danger-soft); }
.smart-alert .smart-alert-close { top: .45rem; right: .45rem; width: 44px; height: 44px; color: var(--smart-text-muted); font-size: var(--smart-font-section-lg); line-height: 1; }
.smart-alert .smart-alert-close:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.smart-alert .smart-alert-close:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-alert-show { animation: smart-alert-in 160ms ease-out both; }
.smart-alert-hide { animation: smart-alert-out 120ms ease-in both; }
@keyframes smart-alert-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes smart-alert-out { from { opacity: 1; } to { opacity: 0; } }

.reference-native-table { padding: 0; overflow: hidden; }
.reference-native-table .panel-header > .badge-soft { flex: 0 0 auto; white-space: nowrap; }
.reference-native-table .reference-table-wrap table { width: 100%; min-width: 0; }
.smart-table-surface,
.reference-table-wrap,
.smart-native-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  contain: paint;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-table-radius);
  background: var(--smart-surface);
}
.smart-table-surface > table,
.reference-table-wrap > table,
.smart-native-table-wrap > table { margin: 0; }
:is(.smart-table-surface, .reference-table-wrap) .table > :not(caption) > * > * {
  padding: var(--smart-table-cell-block) var(--smart-table-cell-inline);
}
:is(.smart-table-surface, .reference-table-wrap) .table thead th {
  border-bottom: 1px solid var(--smart-border);
  color: var(--smart-text-secondary);
  background: var(--smart-table-header);
  font-size: var(--smart-font-body-compact);
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
:is(.smart-table-surface, .reference-table-wrap) .table tbody :is(td, th) {
  border-bottom: 1px solid var(--smart-divider);
  color: var(--smart-text);
  background: var(--smart-surface);
}
:is(.smart-table-surface, .reference-table-wrap) .table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.reference-card > .reference-table-wrap { margin-top: .8rem; }
.reference-native-table > .reference-table-wrap { margin: 0 var(--smart-table-inset) var(--smart-table-inset); }
.reference-native-table > .reference-table-wrap .table thead th,
.smart-table-panel-body .table thead th,
.table-surface-full .table thead th { color: var(--smart-text-secondary); background: var(--smart-table-header); }
.reference-native-table > .reference-table-wrap .table tbody td,
.smart-table-panel-body .table tbody td,
.table-surface-full .table tbody td { background: var(--smart-surface); }

/* Native table contract: one inset, four-sided border, tonal header, and shared cell rhythm. */
.smart-table-panel-body { padding: 1rem; }
.smart-table-panel-body > .table-responsive {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  contain: paint;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-table-radius);
}
.panel-card > .table-scroll,
.smart-v2-panel > .table-scroll,
.document-list > .table-scroll {
  margin: var(--smart-table-inset);
  overflow-x: auto;
  overflow-y: hidden;
  contain: paint;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-table-radius);
}
.panel-card > .panel-body.table-scroll { padding: 0; }
.table-surface-full > .table-scroll { margin: var(--smart-table-inset); border: 1px solid var(--smart-border); border-radius: var(--smart-table-radius); }
.smart-pagination-examples .pagination { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }
:is(
  .smart-pagination-examples .pagination .page-link,
  .smart-datatable-panel .dt-paging .dt-paging-button
) { display: inline-grid !important; width: 36px; min-width: 36px; height: 36px; min-height: 36px; place-items: center; margin: 0; padding: 0 !important; border: 1px solid var(--smart-control-border) !important; border-radius: var(--smart-radius-md) !important; color: var(--smart-text) !important; background: var(--smart-surface) !important; box-shadow: none !important; font-size: var(--smart-font-body); font-weight: 700; line-height: 1; text-decoration: none; -webkit-text-fill-color: currentColor; }
:is(
  .smart-pagination-examples .pagination .page-link,
  .smart-datatable-panel .dt-paging .dt-paging-button
):hover { border-color: var(--smart-primary) !important; color: var(--smart-primary) !important; background: var(--smart-info-soft) !important; }
:is(
  .smart-pagination-examples .pagination .page-item.active .page-link,
  .smart-datatable-panel .dt-paging .dt-paging-button.current
),
:is(
  .smart-pagination-examples .pagination .page-item.active .page-link,
  .smart-datatable-panel .dt-paging .dt-paging-button.current
):hover { border-color: var(--smart-primary) !important; color: var(--smart-on-primary) !important; background: var(--smart-primary) !important; -webkit-text-fill-color: var(--smart-on-primary); }
:is(
  .smart-pagination-examples .pagination .page-link,
  .smart-datatable-panel .dt-paging .dt-paging-button
):focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-datatable-panel .dt-paging .dt-paging-button .icon { width: .95rem; height: .95rem; pointer-events: none; }
.smart-datatable-panel .dt-paging .dt-paging-button .icon.is-previous { transform: rotate(180deg); }
.reference-choice-group { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); }
.reference-choice-group legend { float: none; width: auto; margin: 0 0 .55rem; color: var(--smart-text); font-size: var(--smart-font-body); font-weight: 750; }
.reference-choice-group .form-check { min-height: 40px; margin: 0; padding-block: .42rem; }
.reference-choice-group .form-check-label { color: var(--smart-text-secondary); font-size: var(--smart-font-body-sm); }
.form-check-input { border-color: var(--smart-control-border); background-color: var(--smart-input-bg); box-shadow: none; }
.form-check-input:hover:not(:disabled) { border-color: var(--smart-control-border-hover); }
.form-check-input:checked { border-color: var(--smart-primary); background-color: var(--smart-primary); }
.form-check-input:focus { border-color: var(--smart-focus-ring-surface); box-shadow: none; }
.form-check-input:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.reference-dl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .35rem .8rem; margin: .8rem 0 0; font-size: var(--smart-font-body-md); }
.reference-dl dt { color: var(--smart-text-muted); }
.reference-dl dd { margin: 0; font-weight: 700; }
.reference-sample-card { display: grid; gap: .6rem; min-height: 150px; padding: 1rem; }
.reference-sample-card small { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.reference-sample-card strong { font-size: var(--smart-font-display-sm); }
.reference-table-wrap { overflow-x: auto; }
.reference-table-wrap table { min-width: 560px; margin: 0; font-size: var(--smart-font-body); }
.reference-table-wrap small { font-size: var(--smart-font-body-md); }
.reference-state-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.reference-state-list span { padding: .65rem .75rem; border: 1px dashed var(--smart-border); border-radius: var(--smart-radius-control); color: var(--smart-text-secondary); font-size: var(--smart-font-body); }
.reference-pattern { display: grid; gap: .25rem; padding: .8rem; }
.reference-pattern span, .asset-status { color: var(--smart-text-muted); font-size: var(--smart-font-body-md); }
.reference-footnote { margin-top: 1rem; color: var(--smart-text-muted); font-size: var(--smart-font-body); }
.reference-canonical { padding: 1rem 1.15rem; border-top: 1px solid var(--smart-gold); background: var(--smart-surface); }
.reference-canonical ul { margin: 0; padding-left: 1.1rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body); line-height: 1.7; }
.smart-reference-footer { padding: 1rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); text-align: center; }
.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.asset-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 1rem; }
.asset-card.asset-wide { grid-template-columns: 220px minmax(0, 1fr); grid-column: 1 / -1; }
.asset-card img { width: 92px; height: 110px; object-fit: contain; }
.asset-card.asset-wide img { width: 220px; height: 130px; border-radius: var(--smart-radius-md); object-fit: cover; }
.asset-card.asset-dark { color: var(--smart-sidebar-text); background: var(--smart-navy-900); }
.asset-card.asset-dark p, .asset-card.asset-dark code { color: var(--smart-sidebar-muted); }
.asset-card .asset-google { width: 64px; height: 64px; padding: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); }
.asset-icon-reference { display: flex; align-items: center; gap: 1rem; }
.asset-icon-reference > .icon { width: 2rem; height: 2rem; color: var(--smart-primary); }
.smart-assets .asset-icon-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.smart-assets .asset-icon-grid li { display: grid; min-height: 74px; align-content: center; justify-items: center; gap: .35rem; padding: .6rem .45rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); color: var(--smart-text-secondary); background: var(--smart-surface); text-align: center; }
.smart-assets .asset-icon-grid li .icon { width: 1.35rem; height: 1.35rem; color: var(--smart-primary); }
.smart-assets .asset-icon-grid li code { font-size: var(--smart-font-meta); overflow-wrap: anywhere; }
.reference-tabs { display: inline-flex; flex-wrap: wrap; gap: .45rem; }
.smart-library .filter-chip { font-size: var(--smart-font-body-md); }
.smart-library .breadcrumb { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-md); }
.reference-tab-panel, .reference-accordion-panel { flex: 1 0 100%; padding: .65rem .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); color: var(--smart-text-secondary); font-size: var(--smart-font-body); }
.reference-accordion-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.reference-accordion-trigger .icon { transition: transform 150ms ease; }
.asset-list { display: grid; gap: .7rem; }
.asset-list > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: .2rem 1rem; }
.asset-list p { grid-column: 2; }
@media (max-width: 768px) {
  .smart-reference-header { flex-wrap: wrap; }
  .smart-reference-header > p { order: 3; flex: 1 0 100%; }
  .reference-intro { display: block; }
  .reference-intro > .badge-soft { display: inline-flex; margin-top: .8rem; }
  .reference-grid-3, .reference-form-grid, .reference-state-list, .asset-grid, .smart-dropzone-variants, .reference-choice-grid { grid-template-columns: 1fr; }
  .smart-date-range-control { grid-template-columns: 1fr; gap: .55rem; }
  .smart-date-range-separator { min-height: auto; justify-content: start; padding: 0; }
  .smart-assets .asset-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asset-card.asset-wide { grid-column: auto; }
  .asset-card.asset-wide img { width: 100%; height: 160px; }
  .asset-list > div { display: block; }
  .asset-list p { margin-top: .35rem; }
  .reference-native-table > .reference-table-wrap { margin-inline: .75rem; }
  .chart-reference-split, .chart-reference-composition, .chart-state-grid, .chart-contract-list { grid-template-columns: 1fr; }
  .chart-specimen-header { flex-direction: column; }
  .chart-period-control { width: 100%; }
  .chart-period-control .form-select { min-height: 44px; }
  .chart-canvas, .chart-canvas-lg { min-height: 255px; }
  .chart-canvas-sm { min-height: 235px; }
  .chart-data-fallback summary, .chart-state-card button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .smart-reference-page * { scroll-behavior: auto !important; transition: none !important; }
  .smart-alert-show, .smart-alert-hide { animation: none !important; }
  .chart-state-icon.is-loading { animation: none !important; }
}

/* Extended production templates */
.stats-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-modules-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.table-scroll { overflow-x: auto; }
.activity-table { min-width: 640px; }

/* Courses pilot: targeted polish without changing the shared dashboard baseline. */
body[data-template-key="courses"] .page-heading { margin-bottom: 1rem; }
body[data-template-key="courses"] .page-heading .btn-smart-primary,
body[data-template-key="courses"] .page-heading .btn-smart-light,
body[data-template-key="courses"] .panel-header .btn-smart-light { min-height: 44px; white-space: nowrap; }
body[data-template-key="courses"] .stats-grid-four .metric-card:nth-child(1),
body[data-template-key="courses"] .stats-grid-four .metric-card:nth-child(2) { --metric-color: var(--smart-primary) !important; --metric-soft: var(--smart-primary-soft) !important; }
body[data-template-key="courses"] .stats-grid-four .metric-card:nth-child(3),
body[data-template-key="courses"] .stats-grid-four .metric-card:nth-child(4) { --metric-color: var(--smart-gold-deep) !important; --metric-soft: var(--smart-warning-soft) !important; }
body[data-template-key="courses"] .dashboard-grid { align-items: start; }
body[data-template-key="courses"] .dashboard-main,
body[data-template-key="courses"] .dashboard-side { align-content: start; }
body[data-template-key="courses"] .dashboard-main .panel-header { padding-bottom: 1rem; border-bottom: 1px solid var(--smart-line); }
body[data-template-key="courses"] .dashboard-main .panel-body { padding-top: .6rem; }
body[data-template-key="courses"] .activity-table th { background: var(--smart-table-header); }
body[data-template-key="courses"] .activity-table tbody tr { transition: background-color .18s ease; }
body[data-template-key="courses"] .activity-table tbody tr:hover { background: var(--smart-row-hover); }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-modules-two { grid-template-columns: 1fr; gap: 0; }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module {
  display: grid;
  min-height: 0;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: .75rem;
  padding: .7rem .55rem;
  border: 0;
  border-bottom: 1px solid var(--smart-line);
  border-radius: var(--smart-radius-control);
  background: transparent;
  box-shadow: none;
}
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module:last-child { border-bottom-color: transparent; }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module:hover,
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module:active { border-color: var(--smart-line); background: var(--smart-table-header); box-shadow: none; transform: none; }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module .metric-icon { grid-row: 1 / 3; margin: 0; }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module strong { grid-column: 2; align-self: end; }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module > span:last-child { grid-column: 2; align-self: start; margin-top: .12rem; }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module:nth-child(1) .metric-icon,
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module:nth-child(2) .metric-icon { color: var(--smart-primary); background: var(--smart-primary-soft); }
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module:nth-child(3) .metric-icon,
body[data-template-key="courses"] .dashboard-side .panel-card:first-child .quick-module:nth-child(4) .metric-icon { color: var(--smart-warning); background: var(--smart-warning-soft); }

@media (max-width: 768px) {
  body[data-template-key="courses"] .activity-table { min-width: 0; table-layout: fixed; }
  body[data-template-key="courses"] .table-scroll { overflow-x: visible; }
  body[data-template-key="courses"] .activity-table th,
  body[data-template-key="courses"] .activity-table td { padding-inline: .5rem; overflow-wrap: anywhere; }
  body[data-template-key="courses"] .activity-table th:first-child,
  body[data-template-key="courses"] .activity-table td:first-child { width: 51%; }
  body[data-template-key="courses"] .activity-table th:nth-child(2),
  body[data-template-key="courses"] .activity-table td:nth-child(2) { width: 19%; }
  body[data-template-key="courses"] .activity-table th:nth-child(4),
  body[data-template-key="courses"] .activity-table td:nth-child(4) { display: table-cell; width: 30%; }
  body[data-template-key="courses"] .activity-table .badge-soft { white-space: normal; }
}

.standalone-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--smart-primary) 14%, transparent), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(245, 186, 33, .13), transparent 25%),
    var(--smart-bg);
}

.standalone-card {
  width: min(100%, 520px);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid var(--smart-line);
  border-radius: var(--smart-radius-callout);
  background: var(--smart-surface);
  box-shadow: 0 24px 70px rgba(7, 26, 61, .12);
  text-align: center;
}

.standalone-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.7rem;
  color: var(--smart-wordmark-accent);
  text-decoration: none;
  text-align: left;
}

.standalone-brand:link,
.standalone-brand:visited,
.standalone-brand:hover,
.standalone-brand:focus-visible,
.standalone-brand:active { color: var(--smart-wordmark-accent); text-decoration: none; }

.standalone-brand img { width: 43px; height: 52px; object-fit: contain; }
.standalone-brand strong, .standalone-brand small { display: block; }
.standalone-brand strong { color: var(--smart-wordmark-accent); font-size: var(--smart-font-label-lg); letter-spacing: .02em; }
.standalone-brand small { display: block; margin-top: .15rem; color: var(--smart-wordmark-accent); font-size: var(--smart-font-meta); font-weight: 800; letter-spacing: .12em; line-height: 1; }
.standalone-brand-uin { color: var(--smart-wordmark-accent); }
.standalone-brand-salatiga { color: var(--smart-warning); }
.standalone-card h1 { margin: .35rem 0 .55rem; font-size: var(--smart-font-heading-mobile); letter-spacing: -.04em; }
.standalone-card > p { margin: 0 auto 1.35rem; color: var(--smart-muted); font-size: var(--smart-font-compact-title); line-height: 1.6; }
.standalone-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 1rem; place-items: center; border-radius: var(--smart-radius-feature); color: var(--smart-blue); background: var(--smart-blue-soft); }
.standalone-icon .icon { width: 1.7rem; height: 1.7rem; }

.auth-flow-form { display: grid; gap: .85rem; margin-top: 1.1rem; text-align: left; }
.auth-flow-card-compact h1 { margin-inline: auto; max-width: none; font-size: var(--smart-font-heading-responsive); letter-spacing: -.035em; white-space: nowrap; }
@media (max-width: 360px) {
  .auth-flow-card-compact h1 { max-width: 100%; white-space: normal; }
}
.form-field { display: grid; gap: .38rem; color: var(--smart-text); font-size: var(--smart-font-body-sm); font-weight: 700; }
.form-field input { width: 100%; height: 46px; padding: 0 .9rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-lg); background: var(--smart-input-bg); color: var(--smart-text); font-size: var(--smart-font-body); }
.form-field input:focus { border-color: var(--smart-focus-ring-surface); box-shadow: none; }
.form-field .otp-input { font-size: var(--smart-font-section); font-weight: 800; letter-spacing: .55em; text-align: center; }
.flow-note, .incident-note { margin-top: 1rem; color: var(--smart-muted); font-size: var(--smart-font-meta); line-height: 1.5; }
.back-link { display: inline-block; margin-top: 1.15rem; color: var(--smart-link); font-size: var(--smart-font-body-sm); font-weight: 700; text-decoration: none; }
.back-link:hover { color: var(--smart-link-hover); }
.btn-smart-primary.is-success { background: var(--smart-teal); }

.system-status-card { width: min(100%, 620px); }
.system-status-card h1 {
  max-width: 36rem;
  margin: .18rem auto .42rem;
  font-size: var(--smart-font-heading-page);
  line-height: 1.14;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.system-status-card > p { margin-bottom: .95rem; }
.system-status-eyebrow { margin-top: .1rem; margin-bottom: .3rem; }
.system-status-supporting { margin: -.25rem auto .1rem; color: var(--smart-muted); font-size: var(--smart-font-body-sm); line-height: 1.5; }
.status-code { display: grid; min-height: 72px; place-items: center; color: var(--smart-primary); font-size: var(--smart-font-display-hero); font-weight: 900; letter-spacing: -.08em; line-height: 1; }
.system-status-illustration { display: block; width: min(300px, 72%); height: 180px; margin: -.05rem auto .35rem; object-fit: contain; }
.system-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.35rem; }

@media (min-width: 769px) {
  .system-status-card h1 { white-space: nowrap; }
}

.state-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.state-gallery .panel-card { min-height: 245px; }
.state-center { display: grid; justify-items: center; gap: .4rem; color: var(--smart-muted); text-align: center; }
.state-center img { width: min(220px, 70%); height: 132px; object-fit: contain; }
.state-center strong { color: var(--smart-text); font-size: var(--smart-font-control); }
.state-center span { font-size: var(--smart-font-meta); }
.skeleton-demo { display: grid; gap: .75rem; }
.skeleton-demo i { display: block; height: 15px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, var(--smart-skeleton-base) 25%, var(--smart-skeleton-shine) 50%, var(--smart-skeleton-base) 75%); background-size: 200% 100%; animation: skeleton-wave 1.4s linear infinite; }
.skeleton-demo i:first-child { width: 42%; height: 42px; border-radius: var(--smart-radius-panel); }
.skeleton-demo i:nth-child(3) { width: 78%; }
.skeleton-demo i:nth-child(4) { width: 55%; }
@keyframes skeleton-wave { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-demo i { animation: none; } }
.feedback-box { display: flex; min-height: var(--smart-control-height-sm); align-items: center; gap: .55rem; padding: .42rem .65rem; border: 1px solid; border-radius: var(--smart-radius-control); text-align: left; }
.feedback-box .icon { width: 1rem; height: 1rem; flex: 0 0 auto; margin: 0; }
.feedback-box strong, .feedback-box small { display: block; }
.feedback-box strong { flex: 0 0 auto; font-size: var(--smart-font-body-compact); }
.feedback-box small { margin: 0; font-size: var(--smart-font-label); line-height: 1.35; }
.feedback-box.is-loading { border-color: var(--smart-info); color: var(--smart-info); background: var(--smart-info-soft); }
.feedback-box.is-error { border-color: var(--smart-danger); color: var(--smart-danger); background: var(--smart-danger-soft); }
.feedback-box.is-success { border-color: var(--smart-success); color: var(--smart-success); background: var(--smart-success-soft); }
.feedback-success { border-color: var(--smart-success); color: var(--smart-success); background: var(--smart-success-soft); }
.feedback-error { border-color: var(--smart-danger); color: var(--smart-danger); background: var(--smart-danger-soft); }
.feedback-warning { border-color: var(--smart-warning); color: var(--smart-warning); background: var(--smart-warning-soft); }
.feedback-neutral { border-color: var(--smart-border); color: var(--smart-text-secondary); background: var(--smart-table-header); }
.feedback-action {
  min-height: 36px;
  margin-top: .65rem;
  padding: .38rem .65rem;
  border: 1px solid currentColor;
  border-radius: var(--smart-radius-subtle);
  color: inherit;
  background: transparent;
  font-size: var(--smart-font-body-compact);
  font-weight: 750;
}
.feedback-action:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.state-center-compact { min-height: 150px; align-content: center; }
.state-center-compact > .icon { width: 1.4rem; height: 1.4rem; color: var(--smart-primary); }
.state-center-compact .btn-smart-light { min-height: 40px; margin-top: .45rem; }
.state-reference-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 1rem; margin-top: 1rem; }
.state-reference-panel { min-width: 0; }
.state-form { display: grid; gap: .9rem; }
.state-form .form-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.state-form .form-field > span small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); font-weight: 650; }
.field-hint,
.field-error { display: block; color: var(--smart-text-muted); font-size: var(--smart-font-small); font-weight: 500; line-height: 1.45; }
.field-error { color: var(--smart-danger); font-weight: 700; }
.login-nim-section :is(.field-hint, .field-error) { font-size: var(--smart-font-body-compact); }
.form-error-summary { padding: .8rem .9rem; border: 1px solid var(--smart-danger); border-radius: var(--smart-radius-lg); color: var(--smart-text); background: var(--smart-danger-soft); }
.form-error-summary[hidden] { display: none; }
.form-error-summary strong { font-size: var(--smart-font-body-compact); }
.form-error-summary ul { display: grid; gap: .25rem; margin: .45rem 0 0; padding-inline-start: 1.1rem; }
.form-error-summary li,
.form-error-summary a { color: var(--smart-danger); font-size: var(--smart-font-meta); }
.form-error-summary a:hover { text-decoration-thickness: 2px; }
.risk-demo { display: grid; align-content: start; gap: .8rem; }
.risk-demo strong { font-size: var(--smart-font-body-compact); }
.risk-demo p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.5; }
.risk-demo .btn-smart-danger { justify-self: start; }
.risk-guidance { padding-top: .8rem; border-top: 1px solid var(--smart-divider); }
.state-table-reference { margin-top: 1rem; overflow: hidden; }
.state-table-reference .panel-header { align-items: center; }
.data-freshness { color: var(--smart-text-muted); font-size: var(--smart-font-label); font-weight: 650; white-space: nowrap; }
.data-provenance { display: flex; flex-wrap: wrap; gap: .45rem 1rem; padding: .62rem 1rem; border-block: 1px solid var(--smart-divider); color: var(--smart-text-secondary); background: var(--smart-table-header); font-size: var(--smart-font-small); }
.data-provenance strong { color: var(--smart-text); }
.state-data-table { min-width: 680px; }
.state-data-table td:nth-child(n+2):nth-child(-n+4) { font-variant-numeric: tabular-nums; }
.table-sort { display: inline-flex; min-height: 36px; align-items: center; gap: .35rem; margin: -.3rem; padding: .3rem; border: 0; border-radius: var(--smart-radius-compact); color: inherit; background: transparent; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; }
.table-sort:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.table-sort span { color: var(--smart-primary); font-size: var(--smart-font-compact-title); }
.table-reference-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; border-top: 1px solid var(--smart-divider); color: var(--smart-text-muted); font-size: var(--smart-font-label); }
.table-reference-footer nav { display: flex; gap: .3rem; }
.table-reference-footer button { min-width: 36px; min-height: 36px; padding: .35rem .55rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-subtle); color: var(--smart-text-secondary); background: var(--smart-surface); font-size: var(--smart-font-small); }
.table-reference-footer button[aria-current="page"] { border-color: var(--smart-primary); color: var(--smart-primary); font-weight: 800; }
.table-reference-footer button:disabled { cursor: not-allowed; opacity: .62; }
.smart-confirm-dialog { width: min(460px, calc(100vw - 2rem)); max-height: min(92dvh, 760px); padding: 0; overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-card); color: var(--smart-text); background: var(--smart-surface-elevated); box-shadow: 0 24px 64px rgba(7, 26, 61, .24); }
.smart-confirm-dialog::backdrop { background: rgba(7, 26, 61, .56); }
.smart-dialog-scrim { position: fixed; inset: 0; z-index: 1190; background: rgba(7, 26, 61, .56); }
.smart-dialog-scrim[hidden] { display: none; }
.smart-confirm-dialog.is-fallback-open { position: fixed; inset: 50% auto auto 50%; z-index: 1200; max-height: calc(100vh - 2rem); margin: 0; overflow-y: auto; transform: translate(-50%, -50%); }
.smart-confirm-dialog form { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; }
.smart-confirm-dialog .smart-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.smart-confirm-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--smart-divider); }
.smart-confirm-dialog header span { color: var(--smart-danger); font-size: var(--smart-font-caption); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.smart-confirm-dialog header span { display: inline-flex; align-items: center; gap: .35rem; }
.smart-confirm-dialog header span .icon { width: 1rem; height: 1rem; }
.smart-confirm-dialog h2 { margin: .2rem 0 0; font-size: var(--smart-font-title); }
.smart-confirm-dialog > form > p { margin: 0; padding: 1rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.6; }
.smart-confirm-dialog .form-field :is(input, select, textarea) { width: 100%; min-height: 44px; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); font: inherit; font-size: var(--smart-font-body-sm); }
.smart-confirm-dialog .form-field :is(input, select) { padding-inline: .75rem; }
.smart-confirm-dialog .form-field textarea { padding: .7rem .75rem; }
.smart-confirm-dialog .form-field :is(input, select, textarea):hover { border-color: var(--smart-control-border-hover); }
.smart-confirm-dialog .form-field :is(input, select, textarea):focus-visible { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-identity-dialog .smart-dialog-body { padding: .9rem 1rem 0; }
.smart-identity-dialog .detail-list { margin: 0; }
.smart-identity-dialog .detail-list > div { grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); padding: .55rem 0; }
.smart-identity-dialog .flow-note { margin: .85rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.5; }
.smart-identity-dialog .smart-confirm-actions { padding-top: .9rem; }
.impersonation-banner { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .75rem .85rem; border: 1px solid color-mix(in srgb, var(--smart-gold) 55%, var(--smart-border)); border-radius: var(--smart-radius-panel); color: var(--smart-text); background: var(--smart-warning-soft); }
.impersonation-banner[hidden] { display: none; }
.impersonation-banner-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--smart-radius-control); color: var(--smart-gold-deep); background: var(--smart-surface); }
.impersonation-banner-icon .icon { width: 1.1rem; height: 1.1rem; }
.impersonation-banner > div { display: grid; min-width: 0; gap: .12rem; }
.impersonation-banner strong { font-size: var(--smart-font-body-md); }
.impersonation-banner > div > span { overflow: hidden; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); text-overflow: ellipsis; white-space: nowrap; }
.impersonation-dialog { width: min(540px, calc(100vw - 2rem)); }
.impersonation-dialog .smart-dialog-body { display: grid; gap: .8rem; padding: 1rem; }
.impersonation-target { display: flex; align-items: center; gap: .65rem; }
.impersonation-target > span:nth-child(2) { display: grid; min-width: 0; gap: .1rem; }
.impersonation-target strong { font-size: var(--smart-font-body-md); }
.impersonation-target small { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.impersonation-warning { margin: 0; padding: .7rem .75rem; border: 1px solid color-mix(in srgb, var(--smart-gold) 55%, var(--smart-border)); border-radius: var(--smart-radius-control); color: var(--smart-text-secondary); background: var(--smart-warning-soft); font-size: var(--smart-font-body-compact); line-height: 1.55; }
.impersonation-dialog .form-field { display: grid; gap: .32rem; color: var(--smart-text); font-size: var(--smart-font-body-compact); font-weight: 700; }
.impersonation-dialog .form-field textarea { min-height: 92px; }
.impersonation-dialog .form-field small { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 500; line-height: 1.45; }
.impersonation-ack { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: .5rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.5; }
.impersonation-ack input { width: 18px; height: 18px; margin: .05rem 0 0; accent-color: var(--smart-primary); }
.impersonation-feedback { margin: 0; padding: .55rem .65rem; border-radius: var(--smart-radius-subtle); color: var(--smart-danger); background: var(--smart-danger-soft); font-size: var(--smart-font-body-compact); font-weight: 700; }
.impersonation-dialog .flow-note { margin: 0; }
.impersonation-search-guidance { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-panel); background: var(--smart-info-soft); }
.impersonation-search-guidance > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--smart-radius-control); color: var(--smart-primary); background: var(--smart-surface); }
.impersonation-search-guidance > span .icon { width: 1.1rem; height: 1.1rem; }
.impersonation-search-guidance strong { font-size: var(--smart-font-body-compact); }
.impersonation-search-guidance p { margin: .16rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.45; }
.directory-impersonation-dialog { width: min(640px, calc(100vw - 2rem)); }
.directory-impersonation-dialog .smart-dialog-body { display: grid; gap: .75rem; padding: .9rem 1rem; }
.directory-impersonation-dialog .impersonation-warning { padding: .6rem .7rem; }
.impersonation-lookup-controls { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: start; gap: .7rem; }
.impersonation-lookup-controls .form-field,
.directory-impersonation-auth .form-field { display: grid; gap: .35rem; color: var(--smart-text); font-size: var(--smart-font-body-sm); font-weight: 750; }
.impersonation-lookup-controls .form-field > select,
.directory-impersonation-auth .form-field > :is(select, textarea) { width: 100%; min-height: 48px; padding: 0 .8rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); font: inherit; font-size: var(--smart-font-control); }
.directory-impersonation-auth .form-field > textarea { min-height: 92px; padding-block: .7rem; resize: vertical; }
.impersonation-lookup-controls small,
.directory-impersonation-auth small { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 500; line-height: 1.45; }
.impersonation-lookup-controls .native-search input { padding-left: 2.35rem; }
.impersonation-lookup-state { display: flex; min-height: 86px; align-items: center; justify-content: center; padding: 1rem; border: 1px dashed var(--smart-border); border-radius: var(--smart-radius-lg); color: var(--smart-text-muted); background: var(--smart-table-header); font-size: var(--smart-font-body-sm); text-align: center; }
.impersonation-lookup-state[hidden] { display: none; }
.impersonation-search-results { display: grid; overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); }
.impersonation-search-results[hidden] { display: none; }
.impersonation-search-results button { display: grid; min-height: 58px; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .55rem .7rem; border: 0; border-bottom: 1px solid var(--smart-divider); color: var(--smart-text); background: var(--smart-surface); font: inherit; text-align: left; }
.impersonation-search-results .table-avatar { width: 36px; height: 36px; }
.impersonation-search-results button:last-child { border-bottom: 0; }
.impersonation-search-results button:hover { background: var(--smart-row-hover); }
.impersonation-search-results button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--smart-focus-ring); outline-offset: -3px; }
.impersonation-search-results button > span:nth-child(2) { display: grid; gap: .14rem; }
.impersonation-search-results button strong { font-size: var(--smart-font-body-compact); }
.impersonation-search-results button small,
.impersonation-search-results button > span:last-child { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.directory-impersonation-auth { display: grid; gap: .8rem; }
.directory-impersonation-auth[hidden] { display: none; }
.directory-impersonation-auth .impersonation-target { padding: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-table-header); }
.directory-impersonation-auth .impersonation-target .btn-smart-light { margin-left: auto; }
.demo-action-feedback[data-tone="neutral"] { color: var(--smart-text-secondary); }
.smart-confirm-actions { display: flex; justify-content: flex-end; gap: .55rem; padding: .9rem 1rem 1rem; border-top: 1px solid var(--smart-divider); background: var(--smart-surface-elevated); }
.smart-dialog-reference { margin-top: 1rem; }
.smart-dialog-reference-list { display: grid; gap: .65rem; }
.dialog-reference-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); }
.dialog-reference-item > .icon { width: 1.2rem; height: 1.2rem; color: var(--smart-primary); }
.dialog-reference-item:nth-child(2) > .icon { color: var(--smart-success); }
.dialog-reference-item:nth-child(3) > .icon { color: var(--smart-danger); }
.dialog-reference-item:nth-child(4) > .icon { color: var(--smart-danger); }
.dialog-reference-item strong, .dialog-reference-item span { display: block; }
.dialog-reference-item strong { color: var(--smart-text); font-size: var(--smart-font-body-sm); }
.dialog-reference-item span { margin-top: .16rem; color: var(--smart-text-secondary); font-size: var(--smart-font-label); line-height: 1.4; }
.dialog-reference-item > :is(.btn-smart-light, .btn-smart-danger) { min-height: 36px; white-space: nowrap; }

@media (max-width: 768px) {
  .state-reference-grid { grid-template-columns: 1fr; }
  .state-table-reference .panel-header { align-items: flex-start; }
  .data-freshness { white-space: normal; }
}

@media (max-width: 540px) {
  .table-reference-footer { align-items: flex-start; flex-direction: column; }
  .smart-confirm-actions { align-items: stretch; flex-direction: column-reverse; }
  .smart-confirm-actions > * { width: 100%; }
  .dialog-reference-item { grid-template-columns: auto minmax(0, 1fr); }
  .dialog-reference-item > :is(.btn-smart-light, .btn-smart-danger) { grid-column: 2; justify-self: start; }
}

@media (max-width: 1024px) {
  .stats-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .stats-grid-four, .state-gallery, .quick-modules-two { grid-template-columns: 1fr; }
  .system-status-card h1 { margin-top: .1rem; }
  .system-status-illustration { width: min(72vw, 260px); height: 145px; margin-bottom: .25rem; }
  .state-center img, .module-empty-state img { width: min(180px, 74%); height: 108px; }
  .system-actions { align-items: stretch; flex-direction: column; }
  .system-actions > * { width: 100%; }
  .standalone-page { padding: 1rem; }
  .standalone-card { padding: 1.35rem; border-radius: var(--smart-radius-dialog); }
}

.page-directory-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.directory-section {
  overflow: hidden;
}

.directory-section .panel-header h2 {
  margin: 0;
  font-size: var(--smart-font-title-sm);
}

.directory-list {
  display: grid;
  grid-template-columns: 1fr;
}

.directory-list-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.directory-list a,
.directory-list > div {
  align-items: center;
  border-top: 1px solid var(--smart-divider);
  color: inherit;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 11px 20px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.directory-list > div {
  cursor: default;
}

.directory-list-two a:nth-child(2) {
  border-top: 1px solid var(--smart-divider);
}

.directory-list a:hover {
  background: var(--smart-row-hover);
  color: var(--smart-primary);
}

.directory-list a span,
.directory-list > div span {
  color: var(--smart-text-muted);
  font-size: var(--smart-font-meta);
  text-align: right;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  border-color: var(--smart-control-border);
  background: var(--smart-app-bg);
  color: var(--smart-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

@media (max-width: 1024px) {
  .page-directory-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .directory-list-two { grid-template-columns: 1fr; }
  .directory-list a, .directory-list > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .directory-list a span, .directory-list > div span { text-align: left; }
}

/* Native SMART module pilot */
.native-module-content { min-width: 0; }

.module-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  color: var(--smart-text-muted);
  font-size: var(--smart-font-body-sm);
}

.module-breadcrumb a,
.module-breadcrumb a:link,
.module-breadcrumb a:visited { color: var(--smart-link); font-weight: 700; text-decoration: none; }
.module-breadcrumb a:hover { color: var(--smart-link-hover); text-decoration: underline; }

.native-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.15rem;
}

.native-page-header h1 { margin: .2rem 0 .32rem; font-size: var(--smart-font-heading-compact); letter-spacing: -.035em; }
.native-page-header p { max-width: 680px; margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-control); line-height: 1.55; }
.native-header-actions { display: flex; align-items: end; gap: .65rem; }
.native-period { display: grid; gap: .3rem; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); font-weight: 700; }

.native-period select,
.native-select select {
  min-height: 48px;
  padding: 0 2.25rem 0 .8rem;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-control);
  color: var(--smart-text);
  background: var(--smart-input-bg);
  font-size: var(--smart-font-control);
}

.template-disclosure,
.integration-note {
  color: var(--smart-text-secondary);
  border: 1px solid var(--smart-border);
  background: var(--smart-table-header);
}

.template-disclosure { margin: 0 0 1rem; padding: .65rem .8rem; border-radius: var(--smart-radius-md); font-size: var(--smart-font-meta); line-height: 1.5; }
.data-credibility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .55rem 1rem;
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-md);
  color: var(--smart-text-secondary);
  background: var(--smart-table-header);
  font-size: var(--smart-font-meta);
  line-height: 1.45;
}
.data-credibility-items { display: flex; flex: 1 1 680px; flex-wrap: wrap; gap: .35rem 1rem; }
.data-credibility strong { color: var(--smart-text); }
.data-credibility details { flex: 0 1 auto; }
.data-credibility summary { color: var(--smart-link); font-weight: 700; cursor: pointer; }
.data-credibility details p { max-width: 52rem; margin: .45rem 0 0; }
.demo-data-status {
  width: fit-content;
  margin: -.25rem 0 1rem;
  padding: .35rem .6rem;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-pill);
  color: var(--smart-text-secondary);
  background: var(--smart-table-header);
  font-size: var(--smart-font-caption);
  font-weight: 700;
}
.demo-action-feedback { min-height: 1.3rem; margin-top: .8rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); }

.executive-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.executive-context { min-width: 0; padding: .85rem .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-card); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.executive-context-heading { display: grid; gap: .2rem; padding: .2rem .65rem 1rem; border-bottom: 1px solid var(--smart-border); }
.executive-context-heading strong { font-size: var(--smart-font-label-lg); }
.executive-context-heading span { color: var(--smart-text-muted); font-size: var(--smart-font-label); }
.executive-category-nav { display: grid; gap: .15rem; padding-top: .75rem; }

.executive-category-nav button {
  position: relative;
  min-height: 42px;
  padding: .58rem .7rem;
  border: 0;
  border-radius: var(--smart-radius-compact);
  color: var(--smart-text-secondary);
  background: transparent;
  font-size: var(--smart-font-body-sm);
  font-weight: 650;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

.executive-category-nav button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.executive-category-nav button.active { color: var(--smart-primary); background: var(--smart-primary-tonal); font-weight: 750; }
.executive-category-nav button.active::before { position: absolute; inset: .55rem auto .55rem 0; width: 3px; background: var(--smart-primary); content: ""; }
.executive-main { min-width: 0; }
.executive-mobile-tools { display: none; }

.executive-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-panel);
}

.executive-kpi-strip article { display: grid; gap: .28rem; min-width: 0; padding: 1rem; background: var(--smart-surface); }
.executive-kpi-strip article + article { border-left: 1px solid var(--smart-border); }
.executive-kpi-strip span { color: var(--smart-text-secondary); font-size: var(--smart-font-meta); font-weight: 700; }
.executive-kpi-strip strong { font-size: var(--smart-font-section-lg); letter-spacing: -.035em; }
.executive-kpi-strip small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.executive-report-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 1rem; }
.executive-report-grid .panel-header h2 { margin: 0; font-size: var(--smart-font-compact-title); }
.executive-trend-panel { min-height: 300px; }
.executive-summary-panel { grid-column: 1 / -1; }

.trend-bars { display: flex; height: 205px; align-items: end; justify-content: space-around; gap: .65rem; padding: 1rem .5rem 0; border-bottom: 1px solid var(--smart-border); }
.trend-bar { display: grid; width: min(54px, 12%); height: 100%; grid-template-rows: 1fr auto auto; justify-items: center; gap: .25rem; }
.trend-bar > span { width: 100%; height: var(--bar-value); align-self: end; border-radius: var(--smart-radius-xs) var(--smart-radius-xs) 0 0; background: var(--smart-primary); }
.trend-bar strong { color: var(--smart-text); font-size: var(--smart-font-meta); }
.trend-bar small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.executive-findings ol { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.executive-findings li { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; }
.executive-findings li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--smart-radius-md); color: var(--smart-success); background: var(--smart-success-soft); }
.executive-findings li > span .icon { width: 1rem; height: 1rem; }
.executive-findings strong { display: block; font-size: var(--smart-font-body-compact); }
.executive-findings p { margin: .18rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.45; }
.executive-summary-panel .panel-body > p { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-sm); line-height: 1.6; }
.executive-summary-panel dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0 0; border-top: 1px solid var(--smart-border); }
.executive-summary-panel dl div { padding-top: .8rem; }
.executive-summary-panel dt { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.executive-summary-panel dd { margin: .18rem 0 0; font-size: var(--smart-font-body-compact); font-weight: 700; }

.executive-context-drawer,
.executive-context-backdrop { display: none; }

.task-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}
.task-summary-card { position: relative; display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: .7rem; padding: .8rem; overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-panel); background: var(--smart-surface); box-shadow: var(--smart-shadow-task-rest); }
.task-summary-card > div { display: grid; min-width: 0; gap: .08rem; }
.task-summary-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--smart-radius-control); color: var(--task-summary-color, var(--smart-primary)); background: var(--task-summary-soft, var(--smart-info-soft)); }
.task-summary-icon .icon { width: 1rem; height: 1rem; }
.task-summary-card span:not(.task-summary-icon, .task-summary-progress) { color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); font-weight: 700; }
.task-summary-card strong { font-size: var(--smart-font-kpi); line-height: 1.15; }
.task-summary-card small { overflow: hidden; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); text-overflow: ellipsis; white-space: nowrap; }
.task-summary-backlog { --task-summary-color: var(--smart-gold-deep); --task-summary-soft: var(--smart-warning-soft); }
.task-summary-todo { --task-summary-color: var(--smart-primary); --task-summary-soft: var(--smart-info-soft); }
.task-summary-doing { --task-summary-color: var(--smart-purple); --task-summary-soft: var(--smart-purple-soft); }
.task-summary-done { --task-summary-color: var(--smart-success); --task-summary-soft: var(--smart-success-soft); }
.task-summary-progress { position: absolute; right: .8rem; bottom: .45rem; left: .8rem; height: 3px; overflow: hidden; border-radius: 999px; background: var(--smart-ring-track); }
.task-summary-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--smart-success); }
.task-form-dialog { width: min(680px, calc(100vw - 2rem)); }
.task-form-dialog .smart-dialog-body { padding: 1rem; }
.task-dialog-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.task-dialog-fields .form-field { display: grid; align-content: start; gap: .35rem; color: var(--smart-text); font-size: var(--smart-font-body-sm); font-weight: 750; }
.task-dialog-fields .form-field input,
.task-dialog-fields .form-field select { width: 100%; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); font: inherit; font-size: var(--smart-font-body-sm); }
.task-dialog-fields .form-field :is(input, select):hover { border-color: var(--smart-control-border-hover); }
.task-dialog-fields .form-field :is(input, select):focus-visible { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.task-dialog-fields .form-field small { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 500; line-height: 1.45; }
.task-dialog-fields .form-field-wide { grid-column: 1 / -1; }
.task-dialog-intro { grid-column: 1 / -1; margin: 0; padding: .7rem .75rem; border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); background: var(--smart-info-soft); font-size: var(--smart-font-body-sm); line-height: 1.55; }
.workspace-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.native-search { position: relative; flex: 1 1 260px; }
.native-search .icon { position: absolute; top: 50%; left: .8rem; width: 1rem; height: 1rem; color: var(--smart-text-muted); transform: translateY(-50%); }
.native-search input { width: 100%; min-height: 44px; padding: 0 .8rem 0 2.35rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); color: var(--smart-text); background: var(--smart-input-bg); font-size: var(--smart-font-body-sm); }
.segmented-control { display: flex; padding: 3px; border: 1px solid color-mix(in srgb, var(--smart-primary) 20%, var(--smart-border)); border-radius: var(--smart-radius-control); background: var(--smart-primary-tonal); }
.segmented-control button { display: inline-flex; min-height: 38px; align-items: center; gap: .35rem; padding: .45rem .7rem; border: 0; border-radius: var(--smart-radius-compact); color: var(--smart-text-secondary); background: transparent; font-size: var(--smart-font-meta); font-weight: 700; }
.segmented-control button .icon { width: .95rem; height: .95rem; }
.segmented-control button:hover { color: var(--smart-text); background: var(--smart-primary-tonal-hover); }
.segmented-control button.active { color: var(--smart-primary); background: var(--smart-surface); box-shadow: 0 1px 3px color-mix(in srgb, var(--smart-text) 12%, transparent); }
.kanban-scroll { display: grid; grid-template-columns: repeat(var(--task-column-count, 4), minmax(280px, 1fr)); gap: .8rem; overflow-x: auto; padding: 0 0 .8rem; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.kanban-column { min-width: 0; padding: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-table-header); }
.kanban-column.is-drop-target { border-color: var(--smart-primary); background: var(--smart-blue-soft); }
.kanban-column > header { display: flex; align-items: center; justify-content: space-between; padding: .15rem .15rem .65rem; }
.kanban-column > header h2 { margin: 0; font-size: var(--smart-font-body-compact); }
.kanban-column > header span { display: grid; min-width: 1.35rem; height: 1.35rem; place-items: center; border-radius: var(--smart-radius-xs); color: var(--smart-text-secondary); background: var(--smart-surface); font-size: var(--smart-font-caption); font-weight: 750; }
.kanban-stack { display: grid; min-height: 64px; align-content: start; gap: .6rem; }
.task-card { position: relative; padding: .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-surface); box-shadow: var(--smart-shadow-task-card); cursor: default; transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard), box-shadow var(--smart-motion-fast) var(--smart-ease-standard), opacity var(--smart-motion-fast) var(--smart-ease-standard); }
.task-card:focus-within { border-color: var(--smart-control-border); box-shadow: var(--smart-shadow-task-focus); }
@media (hover: hover) and (pointer: fine) {
  [data-task-drag-mode="card"] .task-card { cursor: grab; }
  [data-task-drag-mode="card"] .task-card:hover { border-color: var(--smart-control-border); box-shadow: var(--smart-shadow-task-hover); }
  [data-task-drag-mode="card"] .task-card:active { box-shadow: var(--smart-interactive-shadow-active); }
}
.task-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.task-card-controls { display: flex; align-items: center; gap: .3rem; }
.task-drag-handle,
.task-action-trigger { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: var(--smart-radius-subtle); color: var(--smart-text-muted); background: transparent; }
.task-drag-handle { cursor: grab; touch-action: none; }
.task-drag-handle:active { cursor: grabbing; }
.task-drag-handle:hover,
.task-action-trigger:hover,
.task-action-trigger[aria-expanded="true"] { border-color: var(--smart-border); color: var(--smart-text); background: var(--smart-row-hover); }
.task-drag-handle .icon,
.task-action-trigger .icon { width: 1rem; height: 1rem; }
.task-card h3 { margin: .7rem 0 .2rem; font-size: var(--smart-font-body-compact); line-height: 1.4; }
.task-card p { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-small); }
.task-owner { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--smart-on-brand); background: var(--smart-primary); font-size: var(--smart-font-caption); font-weight: 800; }
.task-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--smart-divider); color: var(--smart-text-muted); font-size: var(--smart-font-micro); }
.task-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.task-meta .icon { width: .85rem; height: .85rem; }
.task-action-menu { position: absolute; top: 2.9rem; right: .65rem; z-index: 18; display: grid; width: 226px; padding: .38rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-surface-elevated); box-shadow: 0 12px 26px rgba(7, 26, 61, .16); }
.task-action-menu[hidden] { display: none; }
.task-action-menu button { min-height: 38px; padding: .45rem .55rem; border: 0; border-radius: var(--smart-radius-xs); color: var(--smart-text); background: transparent; font-size: var(--smart-font-label); text-align: left; }
.task-action-menu button:hover:not(:disabled) { background: var(--smart-row-hover); }
.task-action-menu button:disabled { border: 0; background: transparent; }
.task-menu-separator { height: 1px; margin: .3rem .2rem; background: var(--smart-border); }
.task-card-ghost { border-style: dashed; border-color: var(--smart-primary); background: var(--smart-blue-soft); opacity: .36; }
.task-card-chosen { border-color: var(--smart-control-border); box-shadow: var(--smart-shadow-task-chosen); }
.task-card-dragging { cursor: grabbing; opacity: .92; box-shadow: var(--smart-shadow-task-dragging); }
.task-board-dragging,
.task-board-dragging .task-card { cursor: grabbing; }
.task-board-dragging .kanban-scroll { user-select: none; }
.priority { display: inline-flex; min-height: 24px; align-items: center; padding: .18rem .42rem; border-radius: var(--smart-radius-xs); color: var(--smart-text-secondary); background: var(--smart-blue-soft); font-size: var(--smart-font-caption); font-weight: 750; }
.priority-tinggi { color: var(--smart-danger); background: var(--smart-danger-soft); }
.priority-sedang { color: var(--smart-warning); background: var(--smart-warning-soft); }
.column-empty { margin: .5rem 0; color: var(--smart-text-muted); font-size: var(--smart-font-small); text-align: center; pointer-events: none; }
.task-list .activity-table { min-width: 780px; }
.task-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1100; display: flex; max-width: min(420px, calc(100vw - 2rem)); min-height: 52px; align-items: center; gap: 1rem; padding: .65rem .75rem .65rem 1rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); color: var(--smart-text); background: var(--smart-surface-elevated); box-shadow: 0 12px 28px rgba(7, 26, 61, .18); font-size: var(--smart-font-body-compact); }
.task-toast[hidden] { display: none; }
.task-toast button { min-height: 38px; padding: .45rem .65rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-subtle); color: var(--smart-primary); background: var(--smart-surface); font-size: var(--smart-font-meta); font-weight: 750; }
.task-toast button:hover { color: var(--smart-primary-hover); background: var(--smart-row-hover); }

.integration-note { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; padding: .8rem; border-radius: var(--smart-radius-control); }
.integration-note > .icon { flex: 0 0 auto; color: var(--smart-info); }
.integration-note strong { display: block; font-size: var(--smart-font-body-sm); }
.integration-note p { margin: .18rem 0 0; font-size: var(--smart-font-label); line-height: 1.5; }
.document-workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1rem; }
.document-categories { display: grid; align-content: start; gap: .12rem; padding: .55rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); }
.document-categories button { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .6rem; border: 0; border-radius: var(--smart-radius-compact); color: var(--smart-text-secondary); background: transparent; font-size: var(--smart-font-meta); font-weight: 650; text-align: left; }
.document-categories button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.document-categories button.active { color: var(--smart-text); background: var(--smart-blue-soft); font-weight: 750; }
.document-categories button span { color: var(--smart-text-muted); font-size: var(--smart-font-micro); }
.document-main { min-width: 0; }
.document-list { width: 100%; min-width: 0; max-width: 100%; padding: var(--smart-table-inset); }
.document-list .table-scroll { width: auto; max-width: 100%; margin: 0; overflow-x: auto; border: 1px solid var(--smart-border); border-radius: var(--smart-table-radius); }
.document-toolbar { flex-wrap: nowrap; }
.document-toolbar .native-search { min-width: 210px; }
.document-table { min-width: 0; table-layout: fixed; }
.document-table th:nth-child(1) { width: 27%; }
.document-table th:nth-child(2) { width: 14%; }
.document-table th:nth-child(3) { width: 11%; }
.document-table th:nth-child(4) { width: 18%; }
.document-table th:nth-child(5) { width: 13%; }
.document-table th:nth-child(6) { width: 11%; }
.document-table th:nth-child(7) { width: 6%; }
.document-table td { overflow-wrap: anywhere; }
.document-name { display: flex; min-width: 230px; align-items: center; gap: .65rem; }
.document-name span { display: grid; gap: .12rem; }
.document-name small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.document-file-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: var(--smart-radius-md); color: var(--smart-primary); background: var(--smart-blue-soft); }
.document-file-icon .icon { width: 1rem; height: 1rem; }
.document-file-icon small { color: currentColor; font-size: var(--smart-font-caption); font-weight: 800; }
.file-pdf { color: var(--smart-danger); background: var(--smart-danger-soft); }
.file-xlsx { color: var(--smart-success); background: var(--smart-success-soft); }
.document-actions { position: relative; width: 38px; max-width: 38px; }
.document-actions summary { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid transparent; border-radius: var(--smart-radius-subtle); color: var(--smart-text-secondary); cursor: pointer; list-style: none; }
.document-actions summary::-webkit-details-marker { display: none; }
.document-actions summary:hover { border-color: var(--smart-border); background: var(--smart-row-hover); }
.document-actions[open] summary { border-color: var(--smart-control-border); background: var(--smart-table-header); }
.document-actions > div { position: absolute; right: 0; z-index: 10; display: grid; width: 150px; padding: .35rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface-elevated); box-shadow: var(--smart-card-shadow); }
.document-actions:not([open]) > div { display: none; }
.document-actions button { min-height: 38px; padding: .45rem .55rem; border: 0; border-radius: var(--smart-radius-xs); color: var(--smart-text); background: transparent; font-size: var(--smart-font-label); text-align: left; }
.document-actions button:hover { background: var(--smart-row-hover); }
.document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.document-card { display: grid; grid-template-columns: 42px 1fr; gap: .75rem; padding: .9rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); }
.document-card h2 { margin: .05rem 0 .2rem; font-size: var(--smart-font-body-compact); line-height: 1.35; }
.document-card p { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-caption); }
.document-card dl { grid-column: 1 / -1; display: grid; gap: .4rem; margin: .2rem 0 0; }
.document-card dl div { display: flex; justify-content: space-between; gap: .8rem; font-size: var(--smart-font-caption); }
.document-card dt { color: var(--smart-text-muted); }
.document-card dd { margin: 0; color: var(--smart-text); text-align: right; }
.document-card-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: .55rem; border-top: 1px solid var(--smart-border); }
.module-empty-state { display: grid; justify-items: center; gap: .25rem; padding: 2rem; color: var(--smart-text-secondary); text-align: center; }
.module-empty-state img { width: min(220px, 70%); height: 132px; object-fit: contain; }
.module-empty-state strong { color: var(--smart-text); font-size: var(--smart-font-control); }
.module-empty-state span { font-size: var(--smart-font-meta); }

@media (max-width: 1200px) {
  .executive-workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .executive-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .executive-kpi-strip article:nth-child(3) { border-left: 0; border-top: 1px solid var(--smart-border); }
  .executive-kpi-strip article:nth-child(4) { border-top: 1px solid var(--smart-border); }
  .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .executive-workspace { display: block; min-height: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .executive-context { display: none; }
  .executive-main { padding: 0; }
  .executive-mobile-tools { display: block; margin-bottom: .85rem; }
  .executive-context-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(7, 26, 61, .5); }
  .executive-context-backdrop:not([hidden]) { display: block; }
  .executive-context-drawer { position: fixed; inset: 0 0 0 auto; z-index: 1065; display: flex; width: min(88vw, 320px); flex-direction: column; padding: 1rem; border-left: 1px solid var(--smart-border); background: var(--smart-surface-elevated); transform: translateX(105%); transition: transform .18s ease; }
  .executive-workspace.context-open .executive-context-drawer { transform: translateX(0); }
  .executive-context-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-bottom: .75rem; border-bottom: 1px solid var(--smart-border); }
  .executive-context-drawer-head > div { display: grid; gap: .15rem; }
  .executive-context-drawer-head strong { font-size: var(--smart-font-label-lg); }
  .executive-context-drawer-head span { color: var(--smart-text-muted); font-size: var(--smart-font-meta); }
  .executive-context-drawer-head button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); color: var(--smart-text); background: var(--smart-surface); }
  .executive-category-nav-mobile { flex: 1; align-content: start; overflow-y: auto; }
  .document-workspace { grid-template-columns: 1fr; }
  .document-categories { display: flex; overflow-x: auto; padding: .4rem; white-space: nowrap; }
  .document-categories button { flex: 0 0 auto; }
  .document-toolbar { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .native-page-header { align-items: stretch; flex-direction: column; gap: .9rem; }
  .native-page-header > .btn-smart-primary { align-self: flex-start; }
  .native-header-actions { align-items: stretch; flex-direction: column; }
  .native-period select { width: 100%; }
  .executive-report-grid { grid-template-columns: 1fr; }
  .executive-summary-panel { grid-column: auto; }
  .task-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-summary-card:last-child { grid-column: 1 / -1; }
  .task-form-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .task-dialog-fields { grid-template-columns: 1fr; }
  .task-dialog-fields .form-field-wide,
  .task-dialog-intro { grid-column: auto; }
  .kanban-scroll { grid-template-columns: repeat(var(--task-column-count, 4), minmax(280px, 82vw)); }
  .task-list .table-scroll { overflow: visible; }
  .task-list .activity-table,
  .task-list .activity-table tbody { display: block; width: 100%; min-width: 0; }
  .task-list .activity-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .task-list .activity-table tbody { display: grid; }
  .task-list .activity-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .9rem; padding: .8rem; border-bottom: 1px solid var(--smart-divider); }
  .task-list .activity-table tr:last-child { border-bottom: 0; }
  .task-list .activity-table td,
  .task-list .activity-table td:nth-child(3),
  .task-list .activity-table td:nth-child(4) { display: grid; gap: .18rem; padding: 0; border: 0; overflow-wrap: anywhere; }
  .task-list .activity-table td:first-child { grid-column: 1 / -1; padding-bottom: .45rem; border-bottom: 1px solid var(--smart-divider); }
  .task-list .activity-table td::before { color: var(--smart-text-muted); content: attr(data-label); font-size: var(--smart-font-caption); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
  .task-list .activity-table td:first-child::before { display: none; }
  .document-grid { grid-template-columns: 1fr; }
  .document-toolbar .native-search { flex-basis: 100%; }
  .document-list { padding: .5rem; }
  .document-list .table-scroll { overflow: visible; border: 0; }
  .document-table,
  .document-table tbody { display: block; width: 100%; }
  .document-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .document-table tbody { display: grid; gap: .7rem; padding: .7rem; }
  .document-table tbody tr { display: grid; grid-template-columns: 1fr; gap: .65rem; padding: .8rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-surface); }
  .document-table tbody td,
  .document-table tbody td:nth-child(3),
  .document-table tbody td:nth-child(4) { display: grid; gap: .18rem; padding: 0; border: 0; font-size: var(--smart-font-meta); }
  .document-table tbody td::before { color: var(--smart-text-muted); font-size: var(--smart-font-caption); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; content: attr(data-label); }
  .document-table tbody td:first-child { grid-column: 1 / -1; padding-bottom: .6rem; border-bottom: 1px solid var(--smart-divider); }
  .document-table tbody td:first-child::before { display: none; }
  .document-table tbody td:last-child { align-content: end; justify-items: start; }
  .document-table .document-name { min-width: 0; }
  .document-table .document-file-icon { width: 36px; height: 36px; flex-basis: 36px; }
}

@media (max-width: 540px) {
  .executive-kpi-strip { grid-template-columns: 1fr 1fr; }
  .executive-kpi-strip article { padding: .8rem; }
  .executive-kpi-strip strong { font-size: var(--smart-font-subheading); }
  .executive-summary-panel dl { grid-template-columns: 1fr; gap: .7rem; }
  .executive-summary-panel dl div { padding-top: .65rem; border-top: 1px solid var(--smart-divider); }
  .workspace-toolbar { align-items: stretch; }
  .workspace-toolbar .segmented-control { flex: 1 1 100%; }
  .workspace-toolbar .segmented-control button { flex: 1; justify-content: center; }
  .document-toolbar .native-select { flex: 1 1 calc(50% - .4rem); }
  .document-toolbar .native-select select { width: 100%; }
  .task-header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .task-header-actions > * { width: 100%; }
  .task-toast { right: 1rem; bottom: 1rem; left: 1rem; max-width: none; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .executive-context-drawer,
  .executive-category-nav button,
  .segmented-control button,
  .document-categories button,
  .task-card { transition: none; }
}

/* SMART v2 workplace and administration templates */
.sidebar-sublink-empty { cursor: default; color: var(--smart-sidebar-muted); font-style: italic; }
.sidebar-sublink-empty:hover { color: var(--smart-sidebar-muted); background: transparent; }

.user-dropdown { position: relative; }
.user-menu {
  min-height: 44px;
  padding: .2rem .35rem;
  border: 1px solid transparent;
  border-radius: var(--smart-radius-control);
  color: var(--smart-text);
  background: transparent;
  text-align: left;
}
.user-menu:hover,
.user-menu[aria-expanded="true"] { border-color: var(--smart-border); background: var(--smart-row-hover); }
.user-menu-chevron { width: .85rem; height: .85rem; color: var(--smart-text-muted); }
.user-menu[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }
.profile-menu {
  width: min(280px, calc(100vw - 24px));
  margin-top: .55rem !important;
  padding: .42rem;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-xl);
  color: var(--smart-text);
  background: var(--smart-surface-elevated);
  box-shadow: 0 14px 34px rgba(7, 26, 61, .16);
}
.profile-menu-header { display: grid; gap: .14rem; padding: .65rem .7rem .72rem; border-bottom: 1px solid var(--smart-divider); }
.profile-menu-header strong { font-size: var(--smart-font-body-compact); }
.profile-menu-header span { color: var(--smart-text-muted); font-size: var(--smart-font-label); overflow-wrap: anywhere; }
.notification-inline-action,
.notification-inline-action:link,
.notification-inline-action:visited {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-top: 0;
  padding: .22rem .55rem;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-md);
  color: var(--smart-text);
  background: var(--smart-surface-elevated);
  font-size: var(--smart-font-small);
  font-weight: 750;
  text-decoration: none;
  transition: transform var(--smart-motion-fast) var(--smart-ease-standard), border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard), box-shadow var(--smart-motion-fast) var(--smart-ease-standard);
}
.notification-inline-action:hover {
  border-color: var(--smart-primary);
  color: var(--smart-text);
  background: var(--smart-blue-soft);
  box-shadow: var(--smart-control-shadow-hover);
  text-decoration: none;
  transform: translateY(-1px);
}
.notification-inline-action:active { box-shadow: var(--smart-control-shadow-active); transform: translateY(0); }
.notification-inline-action:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; text-decoration: none; }
.profile-menu > a,
.profile-menu > a:link,
.profile-menu > a:visited {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: var(--smart-radius-subtle);
  color: var(--smart-text-secondary);
  font-size: var(--smart-font-body-sm);
  font-weight: 650;
  text-decoration: none;
}
.profile-menu > a:hover { color: var(--smart-text); background: var(--smart-row-hover); text-decoration: none; }
.profile-menu > a:active { background: var(--smart-blue-soft); text-decoration: none; }
.profile-menu > a .icon { width: 1rem; height: 1rem; }
.profile-menu .dropdown-divider { border-color: var(--smart-divider); }
.profile-menu > .profile-menu-logout { color: var(--smart-danger); }

.smart-v2-page-header { margin-bottom: 1rem; }
.smart-v2-page-header h1 { font-size: var(--smart-font-heading-main); }
.smart-v2-page-header p { font-size: var(--smart-font-label-lg); }
.smart-v2-page-header :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold),
body[data-workplace-page] .smart-v2-panel :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold),
body[data-workplace-page] .form-actions :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold) {
  box-shadow: var(--smart-shadow-button-rest);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.smart-v2-page-header :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):hover,
body[data-workplace-page] .smart-v2-panel :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):hover,
body[data-workplace-page] .form-actions :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):hover {
  box-shadow: var(--smart-shadow-button-hover);
}
.smart-v2-page-header :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):active,
body[data-workplace-page] .smart-v2-panel :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):active,
body[data-workplace-page] .form-actions :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold):active {
  box-shadow: var(--smart-shadow-button-active);
}
.smart-breadcrumb { display: flex; align-items: center; gap: .38rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 700; }
.smart-breadcrumb a { color: var(--smart-primary); text-decoration: none; }
.smart-breadcrumb a:hover { text-decoration: underline; }
.smart-v2-panel {
  min-width: 0;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-card);
  background: var(--smart-surface);
  box-shadow: var(--smart-card-shadow);
}
.smart-v2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: .8rem; border-bottom: 1px solid var(--smart-divider); }
.smart-v2-toolbar .smart-tabs { flex: 1 1 auto; }
.smart-v2-search { min-width: 230px; max-width: 420px; }
.smart-tabs { display: flex; gap: .25rem; overflow-x: auto; padding: 3px; border: 1px solid color-mix(in srgb, var(--smart-primary) 20%, var(--smart-border)); border-radius: var(--smart-radius-control); background: var(--smart-primary-tonal); scrollbar-width: none; }
.smart-tabs::-webkit-scrollbar { display: none; }
.smart-tabs button { min-height: 38px; flex: 0 0 auto; padding: .45rem .72rem; border: 0; border-radius: var(--smart-radius-compact); color: var(--smart-text-secondary); background: transparent; font-size: var(--smart-font-meta); font-weight: 700; white-space: nowrap; }
.smart-tabs button:hover { color: var(--smart-text); background: var(--smart-primary-tonal-hover); }
.smart-tabs button.active { color: var(--smart-primary); background: var(--smart-surface); box-shadow: 0 1px 3px color-mix(in srgb, var(--smart-text) 12%, transparent); }
.smart-select select,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--smart-control-border);
  border-radius: var(--smart-radius-control);
  color: var(--smart-text);
  background: var(--smart-input-bg);
  font-size: var(--smart-font-body-sm);
}
.smart-select select,
.form-field select {
  min-height: 48px;
  padding-inline: .8rem 2.25rem;
  font-size: var(--smart-font-control);
  line-height: 1.35;
}
.form-field textarea { min-height: 104px; padding-block: .7rem; resize: vertical; }
.smart-select select:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--smart-focus-ring-surface); }
.smart-empty-inline { display: flex; min-height: 110px; align-items: center; justify-content: center; gap: .55rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-sm); }
.smart-empty-inline[hidden] { display: none; }
.smart-empty-inline .icon { width: 1rem; height: 1rem; }

.action-inbox { overflow: hidden; }
.action-inbox-toolbar { justify-content: space-between; }
.action-inbox-toolbar .smart-v2-search { max-width: 520px; }
.action-result-count { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 700; }
.action-inbox-layout { display: grid; min-height: 520px; grid-template-columns: 190px minmax(330px, .95fr) minmax(340px, 1.05fr); }
.action-mailboxes { padding: .85rem; border-inline-end: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.action-labels-back,
.action-labels-open { display: none; }
.action-mailboxes h2 { margin: .1rem .5rem .55rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.action-mailbox-list { display: grid; gap: .2rem; }
.action-mailbox-list button { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: .65rem; padding: .5rem .6rem; border: 0; border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); background: transparent; font: inherit; font-size: var(--smart-font-body-compact); font-weight: 700; text-align: left; }
.action-mailbox-list button > span { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.action-mailbox-list button .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.action-mailbox-list button strong { min-width: 1.35rem; padding: .15rem .35rem; border-radius: 999px; color: var(--smart-text-muted); background: var(--smart-surface); font-size: var(--smart-font-body-compact); text-align: center; }
.action-mailbox-list button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.action-mailbox-list button.active { color: var(--smart-primary); background: var(--smart-info-soft); }
.action-mailbox-list button.active strong { color: var(--smart-primary); }
.action-mailboxes > p { margin: 1rem .5rem 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); line-height: 1.55; }
.action-message-column { min-width: 0; border-inline-end: 1px solid var(--smart-divider); }
.action-message-column > header { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .85rem; border-bottom: 1px solid var(--smart-divider); }
.action-message-column > header > div { display: grid; gap: .12rem; }
.action-message-column > header strong { font-size: var(--smart-font-body-md); }
.action-message-column > header span { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.action-labels-open,
.action-labels-back { min-height: 44px; align-items: center; gap: .4rem; padding: 0 .55rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-md); color: var(--smart-primary); background: var(--smart-surface); font: inherit; font-size: var(--smart-font-body-compact); font-weight: 800; }
.action-labels-open .icon,
.action-labels-back .icon { width: .95rem; height: .95rem; }
.action-message-list { display: grid; }
.action-message { position: relative; display: grid; min-width: 0; grid-template-columns: 6px minmax(0, 1fr) auto; gap: .28rem .65rem; padding: .78rem .85rem; border: 0; border-bottom: 1px solid var(--smart-divider); color: var(--smart-text); background: var(--smart-surface); font: inherit; text-align: left; }
.action-message[hidden] { display: none; }
.action-message:hover { background: var(--smart-row-hover); }
.action-message.active { background: var(--smart-info-soft); box-shadow: inset 3px 0 0 var(--smart-primary); }
.action-message-mark { width: 6px; height: 6px; align-self: center; grid-row: 1; border-radius: 50%; background: transparent; }
.action-message.is-unread .action-message-mark { background: var(--smart-primary); }
.action-message-source { align-self: center; color: var(--smart-primary); font-size: var(--smart-font-body-compact); font-weight: 800; }
.action-message > time { align-self: center; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); white-space: nowrap; }
.action-message-subject { display: grid; min-width: 0; grid-column: 2 / -1; gap: .18rem; }
.action-message-subject strong { overflow: hidden; font-size: var(--smart-font-body-md); text-overflow: ellipsis; white-space: nowrap; }
.action-message-subject small { display: -webkit-box; overflow: hidden; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.action-message-label { grid-column: 2 / -1; justify-self: start; margin-top: .15rem; }
.action-preview { min-width: 0; padding: 1rem; background: var(--smart-surface); }
.action-mobile-back { display: none; min-height: 44px; align-items: center; gap: .45rem; margin: -.25rem 0 .75rem; padding: 0; border: 0; color: var(--smart-primary); background: transparent; font: inherit; font-size: var(--smart-font-body-sm); font-weight: 800; }
.action-mobile-back .icon { width: 1rem; height: 1rem; }
.action-preview > header { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.action-preview-heading { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: .7rem; }
.action-preview-heading p { margin: 0 0 .18rem; color: var(--smart-primary); font-size: var(--smart-font-body-compact); font-weight: 800; }
.action-preview-heading h2 { margin: 0; font-size: var(--smart-font-title-sm); line-height: 1.35; }
.action-preview-heading > div > span { display: block; margin-top: .28rem; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); font-variant-numeric: tabular-nums; }
.action-preview > p:not(.action-preview-note) { margin: 1rem 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-md); line-height: 1.6; }
.action-preview dl { display: grid; margin: 0; border-block: 1px solid var(--smart-divider); }
.action-preview dl > div { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: .65rem; padding: .58rem 0; border-bottom: 1px solid var(--smart-divider); }
.action-preview dl > div:last-child { border-bottom: 0; }
.action-preview dt { color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); }
.action-preview dd { margin: 0; font-size: var(--smart-font-body-compact); font-weight: 700; }
.action-preview-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.action-preview-note { margin: .85rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-body-compact); line-height: 1.5; }
.action-source-icon,
.identity-provider-icon,
.activity-icon,
.registry-app-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: var(--smart-radius-control); color: var(--smart-primary); background: var(--smart-info-soft); }
.action-source-icon .icon,
.identity-provider-icon .icon,
.activity-icon .icon,
.registry-app-icon .icon { width: 1.05rem; height: 1.05rem; }
.action-source { margin-bottom: .15rem; color: var(--smart-primary); font-size: var(--smart-font-caption); font-weight: 800; }
.action-copy h2 { margin: 0; font-size: var(--smart-font-compact-title); }
.action-copy p { max-width: 720px; margin: .24rem 0 .45rem; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.5; }
.action-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--smart-text-muted); font-size: var(--smart-font-label); }
.action-button { min-width: 76px; }
.is-confirmed { color: var(--smart-success) !important; border-color: var(--smart-success) !important; }

.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; }
.agenda-main { overflow: hidden; }
.agenda-toolbar { display: grid; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--smart-divider); }
.agenda-period { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.agenda-period > .icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--smart-primary); }
.agenda-period > span { display: grid; min-width: 0; gap: .12rem; }
.agenda-period strong { color: var(--smart-text); font-size: var(--smart-font-body-compact); }
.agenda-period small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.agenda-toolbar-controls { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .65rem; }
.agenda-toolbar-controls .smart-tabs { min-width: 0; }
.agenda-source-filter { width: 138px; flex: 0 0 138px; }
.agenda-quick-add { display: grid; gap: .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.agenda-quick-add[hidden] { display: none; }
.agenda-quick-add > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.agenda-quick-add h2 { margin: 0; font-size: var(--smart-font-label-lg); }
.agenda-quick-add p { margin: .18rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.agenda-quick-add > div { display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px; gap: .7rem; }
.agenda-quick-add > footer { display: flex; justify-content: flex-end; gap: .55rem; }
.agenda-feedback { margin: 0; padding: .65rem 1rem; border-bottom: 1px solid var(--smart-divider); color: var(--smart-success); background: var(--smart-success-soft); font-size: var(--smart-font-meta); font-weight: 700; }
.agenda-feedback[hidden] { display: none; }
.agenda-group { padding: .9rem 1rem; border-bottom: 1px solid var(--smart-divider); }
.agenda-group:last-child { border-bottom: 0; }
.agenda-group > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.agenda-group > header h2 { margin: 0; font-size: var(--smart-font-label-lg); }
.agenda-group > header span { color: var(--smart-text-muted); font-size: var(--smart-font-small); }
.agenda-row { display: grid; grid-template-columns: 58px 12px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .72rem 0; }
.agenda-row + .agenda-row { border-top: 1px solid var(--smart-divider); }
.agenda-row time { color: var(--smart-text); font-size: var(--smart-font-body-sm); font-weight: 800; }
.agenda-marker { width: 8px; height: 8px; border: 2px solid var(--smart-primary); border-radius: 50%; background: var(--smart-surface); }
.agenda-marker-gold { border-color: var(--smart-gold-deep); }
.agenda-marker-red { border-color: var(--smart-danger); }
.agenda-row h3 { margin: 0; font-size: var(--smart-font-body-compact); }
.agenda-row p { margin: .18rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.agenda-empty { margin: .75rem 1rem; }
.agenda-summary { position: sticky; top: 88px; align-self: start; padding: 1rem; }
.agenda-summary h2 { margin: 0 0 .8rem; font-size: var(--smart-font-label-lg); }
.agenda-summary dl { display: grid; gap: .65rem; margin: 0; }
.agenda-summary dl div { display: flex; align-items: center; justify-content: space-between; padding-bottom: .62rem; border-bottom: 1px solid var(--smart-divider); }
.agenda-summary dt { color: var(--smart-text-secondary); font-size: var(--smart-font-meta); font-weight: 600; }
.agenda-summary dd { margin: 0; font-size: var(--smart-font-compact-title); font-weight: 800; }
.agenda-priority { display: grid; gap: .15rem; margin-top: .85rem; padding: .72rem 0; border-bottom: 1px solid var(--smart-divider); }
.agenda-priority span { color: var(--smart-danger); font-size: var(--smart-font-micro); font-weight: 800; text-transform: uppercase; }
.agenda-priority strong { font-size: var(--smart-font-body-sm); }
.agenda-priority small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.agenda-summary p { margin: .85rem 0 0; color: var(--smart-text-muted); font-size: var(--smart-font-label); line-height: 1.5; }

.notes-workspace { display: grid; min-height: 650px; grid-template-columns: 190px 290px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-card); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.notes-mobile-tabs { display: none; }
.notes-navigation { display: grid; align-content: start; gap: .2rem; padding: .75rem; border-right: 1px solid var(--smart-divider); background: var(--smart-table-header); }
.notes-nav-primary { display: grid; gap: .2rem; }
.notes-navigation h2 { margin: 1rem .55rem .35rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); letter-spacing: .06em; text-transform: uppercase; }
.notes-navigation button { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: .48rem .58rem; border: 0; border-radius: var(--smart-radius-subtle); color: var(--smart-text-secondary); background: transparent; font-size: var(--smart-font-meta); text-align: left; }
.notes-navigation button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.notes-navigation button.active { color: var(--smart-primary); background: var(--smart-info-soft); font-weight: 800; }
.notes-navigation button span { margin-left: .45rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.notes-navigation .notes-add-book { justify-content: flex-start; color: var(--smart-primary); }
.notes-list { overflow-y: auto; border-right: 1px solid var(--smart-divider); }
.notes-list-header { position: sticky; top: 0; z-index: 2; display: grid; gap: .45rem; padding: .7rem .75rem; border-bottom: 1px solid var(--smart-divider); background: var(--smart-surface); }
.notes-list-header > span { color: var(--smart-text-muted); font-size: var(--smart-font-caption); font-weight: 700; }
.notes-search { display: flex; min-height: 40px; align-items: center; gap: .5rem; margin: 0; padding: 0 .55rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-md); background: var(--smart-input-bg); transition: border-color var(--smart-motion-fast) var(--smart-ease-standard), background-color var(--smart-motion-fast) var(--smart-ease-standard); }
.notes-search .icon { width: 1rem; height: 1rem; color: var(--smart-text-muted); }
.notes-search input { width: 100%; border: 0; outline: 0; color: var(--smart-text); background: transparent; font-size: var(--smart-font-body-sm); }
.notes-search button { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 0; border-radius: var(--smart-radius-compact); color: var(--smart-text-muted); background: transparent; }
.notes-search button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.notes-search button .icon { width: .9rem; height: .9rem; }
.notes-search:hover { border-color: var(--smart-control-border-hover); }
.notes-search:has(input:focus) { border-color: var(--smart-focus-ring-surface); }
.notes-search:has(input:focus-visible) { outline: 3px solid var(--smart-focus-ring-surface); outline-offset: 2px; }
.note-list-item { display: block; width: 100%; padding: .8rem; border: 0; border-bottom: 1px solid var(--smart-divider); color: var(--smart-text); background: transparent; text-align: left; }
.note-list-item:hover { background: var(--smart-row-hover); }
.note-list-item.active { color: var(--smart-text); background: var(--smart-info-soft); }
.note-list-item:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }
.note-list-item > span { display: flex; align-items: center; gap: .4rem; }
.note-list-item strong { font-size: var(--smart-font-body-compact); }
.note-list-item small { display: block; margin-top: .2rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.note-list-item p { margin: .35rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); line-height: 1.45; }
.notes-empty { margin: 0; padding: 1.2rem .8rem; color: var(--smart-text-muted); font-size: var(--smart-font-meta); line-height: 1.5; text-align: center; }
.note-editor { display: flex; min-width: 0; flex-direction: column; }
.note-editor > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--smart-divider); }
.note-editor > header > div { display: grid; min-width: 0; flex: 1; gap: .2rem; }
.note-editor > header span { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.note-editor > header input { width: 100%; border: 0; outline: 0; color: var(--smart-text); background: transparent; font-size: var(--smart-font-title); font-weight: 800; }
.note-editor > header input:focus-visible { outline: 3px solid var(--smart-focus-ring-surface); outline-offset: 2px; }
.icon-control { display: grid; width: var(--smart-control-height-sm); height: var(--smart-control-height-sm); place-items: center; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); color: var(--smart-text-secondary); background: var(--smart-surface); }
.icon-control:hover { border-color: var(--smart-primary); color: var(--smart-primary); background: var(--smart-row-hover); }
.icon-control.is-active { color: var(--smart-gold-deep); background: var(--smart-warning-soft); }
.note-pin-control { display: inline-flex; min-height: var(--smart-control-height-sm); align-items: center; gap: .35rem; padding: .4rem .6rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-subtle); color: var(--smart-text-secondary); background: var(--smart-surface); font-size: var(--smart-font-body-compact); font-weight: 750; white-space: nowrap; }
.note-pin-control .icon { width: .9rem; height: .9rem; }
.note-pin-control:hover { border-color: var(--smart-primary); color: var(--smart-primary); background: var(--smart-row-hover); }
.note-pin-control.is-active { border-color: var(--smart-gold-deep); color: var(--smart-text); background: var(--smart-warning-soft); }
.note-editor textarea { flex: 1; min-height: 420px; margin: .25rem; padding: .75rem; border: 0; outline: 0; color: var(--smart-text); background: var(--smart-surface); font: inherit; font-size: var(--smart-font-body-compact); line-height: 1.75; resize: none; }
.note-editor textarea:focus-visible { outline: 3px solid var(--smart-focus-ring-surface); outline-offset: 2px; box-shadow: none; }
.note-editor > .tox-hugerte { min-height: 420px; flex: 1; border: 0; border-radius: 0; }
.note-editor > .tox-hugerte:focus-within { position: relative; z-index: 1; outline: 3px solid var(--smart-focus-ring); outline-offset: -3px; }
.note-editor > footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; border-top: 1px solid var(--smart-divider); }
.note-editor > footer span { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }

.smart-data-table { min-width: 880px; }
.smart-data-table td > small,
.smart-data-table td > strong { display: block; }
.smart-data-table code,
.definition-list code { color: var(--smart-primary); background: var(--smart-info-soft); font-size: var(--smart-font-small); }
.table-action,
.table-action:link,
.table-action:visited { min-height: 36px; padding: .42rem .55rem; border: 1px solid transparent; border-radius: var(--smart-radius-subtle); color: var(--smart-primary); background: transparent; font-size: var(--smart-font-meta); font-weight: 750; text-decoration: none; white-space: nowrap; }
.table-action:hover { border-color: var(--smart-border); color: var(--smart-primary-hover); background: var(--smart-row-hover); text-decoration: none; }
.table-action:active { background: var(--smart-blue-soft); }
.table-user > span:last-child { min-width: 0; }
.identity-list { display: grid; }
.identity-list article { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid var(--smart-divider); }
.identity-list article:last-child { border-bottom: 0; }
.identity-list h2 { margin: 0; font-size: var(--smart-font-body-compact); }
.identity-list p { margin: .18rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }

.smart-detail-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1rem; }
.user-summary { align-self: start; padding: 1.1rem; text-align: center; }
.profile-avatar-large { display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto .75rem; border: 4px solid var(--smart-blue-soft); border-radius: 50%; color: var(--smart-on-brand); background: var(--smart-navy-800); font-size: var(--smart-font-subheading); font-weight: 850; }
.user-summary h2 { margin: 0; font-size: var(--smart-font-title-sm); }
.user-summary > p { margin: .22rem 0 .65rem; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); overflow-wrap: anywhere; }
.user-summary dl { display: grid; gap: .6rem; margin: 1rem 0 0; text-align: left; }
.user-summary dl div { padding-top: .58rem; border-top: 1px solid var(--smart-divider); }
.user-summary dt { color: var(--smart-text-muted); font-size: var(--smart-font-micro); font-weight: 700; text-transform: uppercase; }
.user-summary dd { margin: .16rem 0 0; color: var(--smart-text); font-size: var(--smart-font-body-compact); font-weight: 700; overflow-wrap: anywhere; }
.smart-detail-stack { display: grid; gap: 1rem; }
.detail-section { padding: 1rem; }
.detail-section > header,
.panel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.detail-section > header h2,
.panel-heading-row h2 { margin: 0; font-size: var(--smart-font-label-lg); }
.detail-section > header a { color: var(--smart-primary); font-size: var(--smart-font-meta); font-weight: 700; }
.panel-heading-row p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.detail-list { display: grid; }
.detail-list > div { display: grid; grid-template-columns: minmax(130px, 32%) minmax(0, 1fr); gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--smart-divider); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list span { color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.detail-list strong { font-size: var(--smart-font-body-compact); overflow-wrap: anywhere; }
.identity-compact,
.session-list,
.access-app-list { display: grid; gap: .6rem; }
.identity-compact > div,
.session-list > div,
.access-app-list > div { display: flex; align-items: center; gap: .7rem; padding: .65rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); }
.identity-compact > div > .icon { width: 1rem; height: 1rem; color: var(--smart-primary); }
.identity-compact span:nth-child(2),
.session-list span:nth-child(2),
.access-app-list span:nth-child(2) { min-width: 0; flex: 1; }
.identity-compact strong,
.identity-compact small,
.session-list strong,
.session-list small,
.access-app-list strong,
.access-app-list small { display: block; }
.identity-compact strong,
.session-list strong,
.access-app-list strong { font-size: var(--smart-font-body-compact); }
.identity-compact small,
.session-list small,
.access-app-list small { margin-top: .15rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.tag-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag-list span { padding: .38rem .55rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-subtle); color: var(--smart-text-secondary); background: var(--smart-table-header); font-size: var(--smart-font-label); font-weight: 700; }

.tabbed-data { margin-top: .8rem; padding: 1rem; }
.tabbed-data[hidden] { display: none; }
.definition-list { display: grid; }
.definition-list > div { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr) auto; align-items: center; gap: .8rem; padding: .72rem 0; border-bottom: 1px solid var(--smart-divider); }
.definition-list > div:last-child { border-bottom: 0; }
.definition-list strong { font-size: var(--smart-font-body-sm); }
.definition-list > div > span:nth-child(2) { color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }

.app-registry-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 1rem; }
.app-registry-list { align-self: start; overflow: hidden; }
.app-registry-list > .native-search { margin: .75rem; }
.registry-app { display: grid; width: 100%; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .72rem .8rem; border: 0; border-top: 1px solid var(--smart-divider); color: var(--smart-text); background: transparent; text-align: left; }
.registry-app:hover { background: var(--smart-row-hover); }
.registry-app.active { background: var(--smart-info-soft); }
.registry-app strong,
.registry-app small { display: block; }
.registry-app strong { font-size: var(--smart-font-body-sm); }
.registry-app small { margin-top: .16rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.app-registry-detail { align-self: start; padding: 1rem; }
.app-registry-detail .panel-heading-row > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .15rem .7rem; }
.app-registry-detail .panel-heading-row .registry-app-icon { grid-row: 1 / 3; }
.app-registry-detail .panel-heading-row h2 { align-self: end; }
.app-registry-detail .panel-heading-row p { margin: 0; }
.app-registry-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0; }
.app-registry-detail dl div { min-width: 0; padding: .7rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); }
.app-registry-detail dt { color: var(--smart-text-muted); font-size: var(--smart-font-caption); font-weight: 750; text-transform: uppercase; }
.app-registry-detail dd { margin: .24rem 0 0; font-size: var(--smart-font-body-compact); overflow-wrap: anywhere; }
.app-registry-detail code { color: var(--smart-text); font-size: var(--smart-font-small); }

.external-access-table { min-width: 1120px; }
.row-actions { position: relative; }
.row-actions summary { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-subtle); cursor: pointer; list-style: none; }
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions > div { position: absolute; right: 0; z-index: 12; display: grid; width: 150px; padding: .35rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-surface-elevated); box-shadow: 0 10px 24px rgba(7, 26, 61, .15); }
.row-actions button { min-height: 36px; padding: .4rem .5rem; border: 0; border-radius: var(--smart-radius-compact); color: var(--smart-text-secondary); background: transparent; font-size: var(--smart-font-meta); text-align: left; }
.row-actions button:hover { color: var(--smart-text); background: var(--smart-row-hover); }
.row-actions button.danger { color: var(--smart-danger); }

.smart-form-layout { display: grid; gap: 1rem; }
.form-section { padding: 1rem; }
.form-section > header { margin-bottom: .9rem; }
.form-section h2 { margin: 0; font-size: var(--smart-font-label-lg); }
.form-section p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-field { margin: 0; }
.form-field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: .65rem; }
.form-feedback { margin: 0; padding: .7rem .8rem; border: 1px solid var(--smart-success); border-radius: var(--smart-radius-control); color: var(--smart-success); background: var(--smart-success-soft); font-size: var(--smart-font-body-compact); }

.audit-table { min-width: 960px; }
.service-health-list { overflow: hidden; }
.service-health-list > header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--smart-divider); }
.service-health-list > header h2 { margin: 0; font-size: var(--smart-font-label-lg); }
.service-health-list > header p { margin: .2rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }
.service-health-list > article { display: grid; grid-template-columns: minmax(240px, 1fr) 150px 100px auto; align-items: center; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--smart-divider); }
.service-health-list > article:last-child { border-bottom: 0; }
.service-health-list article > div:not(.service-name) { display: grid; gap: .16rem; }
.service-health-list article > div > span { color: var(--smart-text-muted); font-size: var(--smart-font-caption); text-transform: uppercase; }
.service-health-list article > div > strong { font-size: var(--smart-font-meta); }
.service-name { display: flex; align-items: center; gap: .65rem; }
.service-name > span { display: grid; gap: .15rem; }
.service-name strong { font-size: var(--smart-font-body-compact); }
.service-name small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }

.self-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.identity-self-list { display: grid; }
.identity-self-list article { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--smart-divider); }
.identity-self-list article:last-of-type { border-bottom: 0; }
.identity-self-list h2 { margin: 0; font-size: var(--smart-font-body); }
.identity-self-list p { margin: .18rem 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); }
.identity-self-list small { color: var(--smart-text-muted); font-size: var(--smart-font-caption); }
.identity-self-list > .flow-note { margin: .8rem; }
.account-activity-list { padding: .25rem 1rem; }
.account-activity-list article { display: grid; grid-template-columns: 130px 40px minmax(0, 1fr); align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--smart-divider); }
.account-activity-list article:last-child { border-bottom: 0; }
.account-activity-list time { color: var(--smart-text-muted); font-size: var(--smart-font-small); }
.account-activity-list h2 { margin: 0; font-size: var(--smart-font-body-md); }
.account-activity-list p { margin: .16rem 0 0; color: var(--smart-text-secondary); font-size: var(--smart-font-meta); }

/* Functional labels never drop below the 11px reference floor. */
:is(
  .filter-chip,
  .course-time,
  .table-reference-footer button,
  .segmented-control button,
  .document-categories button,
  .document-categories button span,
  .smart-tabs button,
  .table-action,
  .row-actions button,
  .note-pin-control,
  .account-activity-list time
) { font-size: var(--smart-font-body-compact); }
.table-action,
.table-action:link,
.table-action:visited { font-size: var(--smart-font-body-compact); }

@media (max-width: 1100px) {
  .notes-workspace { grid-template-columns: 170px 250px minmax(0, 1fr); }
  .app-registry-layout { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
  .action-inbox-layout { grid-template-columns: 170px minmax(300px, 1fr); }
  .action-preview { grid-column: 1 / -1; border-top: 1px solid var(--smart-divider); }
}

@media (max-width: 900px) {
  .agenda-layout,
  .smart-detail-layout,
  .app-registry-layout,
  .self-service-grid { grid-template-columns: 1fr; }
  .agenda-summary { position: static; }
  .agenda-summary dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-summary dl div { display: grid; gap: .18rem; }
  .notes-workspace { min-height: 0; grid-template-columns: 160px minmax(220px, .7fr) minmax(320px, 1.3fr); overflow-x: auto; }
  .service-health-list > article { grid-template-columns: minmax(220px, 1fr) 125px auto; }
  .service-health-list > article > div:nth-child(3) { display: none; }
  .action-inbox-layout { min-height: 0; grid-template-columns: 1fr; }
  .action-mailboxes,
  .action-preview { display: none; }
  .action-message-column { display: block; border-inline-end: 0; }
  .action-labels-open { display: inline-flex; }
  .action-latest-label { display: none; }
  .action-inbox-layout.is-label-view .action-mailboxes { display: block; min-height: 440px; border-inline-end: 0; }
  .action-inbox-layout.is-label-view .action-message-column,
  .action-inbox-layout.is-label-view .action-preview { display: none; }
  .action-inbox-layout.is-detail-view .action-mailboxes,
  .action-inbox-layout.is-detail-view .action-message-column { display: none; }
  .action-inbox-layout.is-detail-view .action-preview { display: block; min-height: 440px; grid-column: auto; border-top: 0; }
  .action-labels-back,
  .action-mobile-back { display: inline-flex; }
  .action-mailboxes h2 { margin-top: .65rem; }
}

@media (max-width: 768px) {
  :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger).btn-smart-sm { min-height: var(--smart-control-height); font-size: var(--smart-font-body); }
  .smart-v2-toolbar { align-items: stretch; flex-direction: column; }
  .smart-v2-toolbar .smart-v2-search { width: 100%; max-width: none; flex: 0 0 auto; }
  .smart-tabs { width: 100%; }
  .action-mailboxes { overflow: visible; padding: .65rem; border-bottom: 1px solid var(--smart-divider); }
  .action-mailboxes > p { display: none; }
  .action-mailbox-list { display: grid; width: 100%; }
  .action-mailbox-list button { min-height: 44px; }
  .action-message { min-height: 92px; padding: .85rem .75rem; }
  .agenda-toolbar-controls { align-items: stretch; flex-direction: column; }
  .agenda-toolbar-controls .smart-tabs,
  .agenda-source-filter { width: 100%; flex-basis: auto; }
  .agenda-quick-add > div { grid-template-columns: 1fr 1fr; }
  .agenda-quick-add .form-field-wide { grid-column: 1 / -1; }
  .agenda-row { grid-template-columns: 52px 10px minmax(0, 1fr); }
  .agenda-row > .badge-soft { grid-column: 3; justify-self: start; }
  .notes-workspace { display: block; overflow: visible; }
  .notes-mobile-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--smart-primary) 20%, var(--smart-border)); background: var(--smart-primary-tonal); }
  .notes-mobile-tabs button { min-height: 44px; border: 0; border-radius: var(--smart-radius-subtle); color: var(--smart-text-secondary); background: transparent; font-size: var(--smart-font-body-compact); font-weight: 750; }
  .notes-mobile-tabs button:hover { color: var(--smart-text); background: var(--smart-primary-tonal-hover); }
  .notes-mobile-tabs button.active { color: var(--smart-primary); background: var(--smart-surface); box-shadow: 0 1px 4px rgba(7, 26, 61, .08); }
  .notes-navigation,
  .notes-list,
  .note-editor { display: none; }
  .notes-navigation.is-mobile-active { display: grid; overflow: visible; border-right: 0; border-bottom: 1px solid var(--smart-divider); white-space: normal; }
  .notes-list.is-mobile-active { display: block; }
  .note-editor.is-mobile-active { display: flex; }
  .notes-navigation h2 { display: block; }
  .notes-navigation button { width: 100%; }
  .notes-list { max-height: 520px; border-right: 0; border-bottom: 1px solid var(--smart-divider); }
  .note-editor textarea,
  .note-editor > .tox-hugerte { min-height: 300px; }
  .identity-list article,
  .identity-self-list article { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .identity-list article > button,
  .identity-self-list article > button { grid-column: 2 / -1; justify-self: start; }
  .definition-list > div { grid-template-columns: 1fr auto; }
  .definition-list > div > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .app-registry-detail dl,
  .form-grid { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: auto; }
  .service-health-list > article { grid-template-columns: minmax(0, 1fr) auto; }
  .service-health-list > article > div:not(.service-name) { display: none; }
  .account-activity-list article { grid-template-columns: 40px minmax(0, 1fr); }
  .account-activity-list time { grid-column: 2; grid-row: 2; }
  .account-activity-list .activity-icon { grid-row: 1 / 3; }
  .notification-inline-action { min-height: var(--smart-control-height); padding-inline: .7rem; font-size: var(--smart-font-body-compact); }
}

@media (max-width: 540px) {
  .profile-menu { position: fixed !important; top: 64px !important; right: auto !important; left: 12px !important; width: min(280px, calc(100vw - 24px)); transform: none !important; }
  .impersonation-banner { grid-template-columns: 40px minmax(0, 1fr); }
  .impersonation-banner > .btn-smart-light { grid-column: 1 / -1; width: 100%; }
  .impersonation-search-guidance { grid-template-columns: 42px minmax(0, 1fr); }
  .impersonation-search-guidance > .btn-smart-light { grid-column: 1 / -1; width: 100%; }
  .directory-impersonation-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .impersonation-lookup-controls { grid-template-columns: 1fr; }
  .impersonation-search-results button { grid-template-columns: 40px minmax(0, 1fr); }
  .impersonation-search-results button > span:last-child { grid-column: 2; }
  .user-menu-chevron { display: none; }
  .action-preview-actions { align-items: stretch; flex-direction: column; }
  .action-preview-actions > * { width: 100%; }
  .smart-tabs button { padding-inline: .58rem; }
  .agenda-quick-add > div { grid-template-columns: 1fr; }
  .agenda-quick-add .form-field-wide { grid-column: auto; }
  .agenda-quick-add > footer { align-items: stretch; flex-direction: column-reverse; }
  .agenda-quick-add > footer > * { width: 100%; }
  .agenda-summary dl { grid-template-columns: 1fr; }
  .note-editor > footer { align-items: stretch; flex-direction: column; }
  .note-editor > footer .btn-smart-light { width: 100%; }
  .detail-list > div { grid-template-columns: 1fr; gap: .2rem; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions > * { width: 100%; }
  .note-editor > footer { align-items: stretch; flex-direction: column; }
  .identity-list article,
  .identity-self-list article { grid-template-columns: 40px minmax(0, 1fr); }
  .identity-list article > .badge-soft,
  .identity-self-list article > .badge-soft { grid-column: 2; justify-self: start; }
}

@media (max-width: 360px) {
  .semester-picker { display: none; }
  .user-dropdown .user-menu { display: flex; }
  .user-dropdown .user-meta,
  .user-dropdown .user-menu-chevron { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .user-menu-chevron,
  .smart-tabs button,
  .action-message,
  .registry-app,
  .notification-inline-action,
  .note-list-item { transition: none; }
}

/* Compact content density — navigation and shell controls intentionally remain 44px. */
:is(.app-content, .reference-container, .smart-reference-main)
  :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger):not(.btn-smart-md):not(.btn-smart-lg) {
  min-height: var(--smart-control-height-sm);
  padding: .4rem .7rem;
  font-size: var(--smart-font-body-compact);
}
:is(.login-card, .standalone-card)
  :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger):not(.btn-smart-md):not(.btn-smart-lg) {
  min-height: var(--smart-control-height-sm);
  padding: .4rem .7rem;
  font-size: var(--smart-font-body-compact);
}
:is(.login-card, .standalone-card) .form-field
  > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
:is(.login-card, .standalone-card) .login-password-wrap > input {
  height: var(--smart-control-height-sm);
  min-height: var(--smart-control-height-sm);
  padding-block: .35rem;
  font-size: var(--smart-font-body-compact);
}
.login-secondary-links a { min-height: var(--smart-control-height-sm); }
:is(.app-content, .reference-container, .smart-reference-main)
  :is(.btn-smart-square, .topbar-icon):not(.btn-smart-md):not(.btn-smart-lg) {
  width: var(--smart-control-height-sm);
  min-width: var(--smart-control-height-sm);
  height: var(--smart-control-height-sm);
  min-height: var(--smart-control-height-sm);
}
:is(.app-content, .reference-container, .smart-reference-main)
  :is(input.form-control, select.form-select):not(.smart-control-md):not(.smart-control-lg),
:is(.app-content, .reference-container, .smart-reference-main)
  :is(.native-search input, .native-select select, .smart-select select, .module-search input),
.modal :is(input.form-control, select.form-select),
.modal :is(.native-search input, .native-select select, .smart-select select) {
  height: var(--smart-control-height-sm);
  min-height: var(--smart-control-height-sm);
  padding-block: .35rem;
  font-size: var(--smart-font-body-compact);
}
:is(.app-content, .reference-container, .smart-reference-main) .form-field
  > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select):not(.smart-control-md):not(.smart-control-lg),
.modal .form-field
  > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select) {
  height: var(--smart-control-height-sm);
  min-height: var(--smart-control-height-sm);
  padding-block: .35rem;
  font-size: var(--smart-font-body-compact);
}
:is(.app-content, .reference-container, .smart-reference-main, .modal) textarea.form-control,
:is(.app-content, .reference-container, .smart-reference-main, .modal) .form-field textarea {
  min-height: 84px;
  padding: .55rem .65rem;
  font-size: var(--smart-font-body-compact);
}
:is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select.ts-wrapper,
:is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select .ts-control {
  min-height: var(--smart-control-height-sm);
}
:is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select .ts-control {
  padding: .38rem .65rem;
  font-size: var(--smart-font-body-compact);
}
:is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select.smart-control-md.ts-wrapper,
:is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select.smart-control-md .ts-control {
  min-height: var(--smart-control-height);
}
:is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select.smart-control-lg.ts-wrapper,
:is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select.smart-control-lg .ts-control {
  min-height: var(--smart-control-height-lg);
}

/* Custom content controls follow the same compact density as shared primitives. */
:is(.app-content, .reference-container, .smart-reference-main)
  :is(
    .notification-filters nav button,
    .notification-search,
    .notification-read-toggle,
    .smart-inbox-folders button,
    .smart-player-toggle,
    .segmented-control button,
    .document-categories button,
    .executive-category-nav button,
    .smart-tabs button,
    .action-mailbox-list button,
    .action-labels-open,
    .action-labels-back,
    .notes-navigation button,
    .notes-search,
    .icon-control,
    .note-pin-control
  ) {
  min-height: var(--smart-control-height-sm);
}
:is(.app-content, .reference-container, .smart-reference-main)
  :is(.notification-read-toggle, .smart-player-toggle, .icon-control) {
  width: var(--smart-control-height-sm);
  height: var(--smart-control-height-sm);
}
:is(.app-content, .reference-container, .smart-reference-main) .filter-chip {
  min-height: var(--smart-control-height-sm);
}

/* Form element catalogue: one SMART decision for each reusable Tabler family. */
.smart-form-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: .8rem; }
.smart-form-catalog-card { display: grid; min-width: 0; align-content: start; gap: .8rem; }
.smart-form-catalog-card > header h3 { margin: 0; }
.smart-form-catalog-card > header p { margin-top: .25rem; }
.smart-form-specimens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.smart-form-specimens > :only-child,
.smart-form-error-summary { grid-column: 1 / -1; }
.field-requirement { margin-inline-start: .25rem; color: var(--smart-text-muted); font-size: var(--smart-font-caption); font-weight: 650; }
.smart-static-control { display: flex; min-height: var(--smart-control-height-sm); align-items: center; padding: .35rem .65rem; border-bottom: 1px solid var(--smart-border); color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); font-weight: 600; }
.smart-input-group { display: flex; min-width: 0; min-height: var(--smart-control-height-sm); overflow: hidden; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); background: var(--smart-input-bg); }
.smart-input-group:hover { border-color: var(--smart-control-border-hover); }
.smart-input-group:focus-within { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.smart-input-group > .form-control { min-width: 0; border: 0; border-radius: 0; outline: 0; }
.smart-input-group > .form-control:focus-visible { outline: 0; }
.smart-input-addon { display: inline-flex; align-items: center; padding-inline: .65rem; border-inline-end: 1px solid var(--smart-border); color: var(--smart-text-secondary); background: var(--smart-table-header); font-size: var(--smart-font-meta); white-space: nowrap; }
.smart-input-group > .smart-input-addon:last-child { border-inline: 1px 0; }
.smart-input-action { position: relative; display: block; min-width: 0; }
.smart-input-action > .form-control { padding-inline-end: 7.2rem; }
.smart-input-action > button { position: absolute; top: 2px; right: 2px; display: inline-flex; height: 32px; align-items: center; gap: .3rem; padding: 0 .55rem; border: 0; border-radius: var(--smart-radius-subtle); color: var(--smart-primary); background: var(--smart-info-soft); font-size: var(--smart-font-label); font-weight: 750; }
.smart-input-action > button:hover { color: var(--smart-on-primary); background: var(--smart-primary); }
.smart-input-action > button .icon { width: .9rem; height: .9rem; }
.smart-input-action.is-loading > .form-control { padding-inline-end: 2.4rem; }
.smart-input-action.is-loading > .login-spinner { position: absolute; inset-block: 0; right: .75rem; margin-block: auto; }
.smart-input-action.is-loading > .login-spinner {
  color: var(--smart-info);
  border-color: color-mix(in srgb, var(--smart-info) 22%, var(--smart-surface));
  border-top-color: var(--smart-info);
}
.smart-field-message { color: var(--smart-success); font-size: var(--smart-font-small); font-weight: 600; line-height: 1.45; }
.reference-field.is-valid .form-control { border-color: var(--smart-success); }
.reference-field.is-valid .form-control:focus { border-color: var(--smart-success); outline: 3px solid var(--smart-success); outline-offset: 2px; }
.reference-field.is-valid .form-control:focus-visible { outline-color: var(--smart-success); }
.reference-field.is-invalid .smart-field-message { color: var(--smart-danger); }
.smart-form-error-summary { display: grid; gap: .12rem; padding: .65rem .75rem; border: 1px solid var(--smart-danger); border-radius: var(--smart-radius-control); color: var(--smart-danger); background: var(--smart-danger-soft); font-size: var(--smart-font-meta); }
.smart-form-error-summary strong { color: inherit; font-size: var(--smart-font-body-compact); }
.smart-special-control-grid .form-range { min-height: var(--smart-control-height-sm); accent-color: var(--smart-primary); }
.smart-color-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.smart-color-choice legend { margin-bottom: .35rem; font-size: var(--smart-font-body-md); font-weight: 700; }
.smart-color-choice label { display: inline-flex; min-height: var(--smart-control-height-sm); align-items: center; gap: .35rem; margin-inline-end: .5rem; font-size: var(--smart-font-meta); font-weight: 600; cursor: pointer; }
.smart-color-choice input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.smart-color-choice label > span { width: 1.1rem; height: 1.1rem; border: 2px solid var(--smart-surface); border-radius: 50%; background: var(--smart-choice-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--smart-choice-color) 58%, var(--smart-control-border)); }
.smart-color-choice input:checked + span { box-shadow: 0 0 0 2px var(--smart-surface), 0 0 0 4px var(--smart-choice-color); }
.smart-color-choice input:focus-visible + span { outline: 3px solid var(--smart-choice-color); outline-offset: 3px; }
.smart-color-choice .is-blue { --smart-choice-color: var(--smart-primary); }
.smart-color-choice .is-gold { --smart-choice-color: var(--smart-gold); }
.smart-color-choice .is-green { --smart-choice-color: var(--smart-success); }

.smart-button-group { display: inline-flex; }
.smart-button-group > :is(.btn-smart-primary, .btn-smart-light) { border-radius: 0; }
.smart-button-group > :first-child { border-start-start-radius: var(--smart-radius-control); border-end-start-radius: var(--smart-radius-control); }
.smart-button-group > :last-child { border-start-end-radius: var(--smart-radius-control); border-end-end-radius: var(--smart-radius-control); }
.smart-button-group > * + * { margin-inline-start: -1px; }
.smart-button-dropdown { position: relative; }
.smart-button-dropdown > summary { list-style: none; cursor: pointer; }
.smart-button-dropdown > summary::-webkit-details-marker { display: none; }
.smart-button-dropdown > summary .icon { width: .85rem; height: .85rem; transition: transform var(--smart-motion-fast) var(--smart-ease-standard); }
.smart-button-dropdown[open] > summary .icon { transform: rotate(180deg); }
.smart-button-dropdown > div { position: absolute; z-index: 30; top: calc(100% + .35rem); right: 0; display: grid; min-width: 180px; padding: .3rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.smart-button-dropdown > div button { min-height: var(--smart-control-height-sm); padding: .4rem .55rem; border: 0; border-radius: var(--smart-radius-subtle); color: var(--smart-text); background: transparent; font-size: var(--smart-font-meta); font-weight: 650; text-align: start; }
.smart-button-dropdown > div button:hover { color: var(--smart-primary); background: var(--smart-info-soft); }
.smart-button-dropdown > div button:focus-visible { outline: 3px solid var(--smart-focus-ring); outline-offset: -1px; }

.smart-mobile-phone { grid-column: 1 / -1; }
.smart-phone-control { display: grid; width: min(100%, 560px); grid-template-columns: minmax(180px, 200px) minmax(220px, 1fr); gap: .45rem; }
.smart-phone-control .smart-tom-select { width: 100%; min-width: 0; }
.smart-phone-control .smart-country-select .ts-control { flex-wrap: nowrap; overflow: hidden; }
.smart-phone-control .smart-country-select .ts-control > .item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-phone-control .smart-country-select.is-searching .ts-control > .item { display: none; }
.smart-phone-control .smart-country-select .ts-control > input { min-width: 0; flex: 1 1 auto; }
.smart-phone-control .smart-country-select .ts-dropdown { width: 100% !important; min-width: 100%; max-width: 100%; }
.smart-phone-output { display: block; min-height: 1rem; color: var(--smart-success); font-size: var(--smart-font-small); font-weight: 650; }

/* Notification preferences stay in context and directly control the feed. */
.notification-preferences-dialog { width: min(520px, calc(100vw - 2rem)); }
.notification-preferences-dialog header > div > span { color: var(--smart-primary); }
.notification-preferences-dialog .smart-dialog-body { display: grid; gap: .75rem; padding: .85rem 1rem; }
.notification-preferences-dialog .smart-dialog-body > p { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-body-compact); line-height: 1.55; }
.notification-preferences-list { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; }
.notification-preferences-list legend { margin-bottom: .25rem; color: var(--smart-text); font-size: var(--smart-font-body-sm); font-weight: 750; }
.notification-preferences-list > label { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .65rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-control); background: var(--smart-surface); cursor: pointer; }
.notification-preferences-list > label:hover { border-color: var(--smart-control-border-hover); background: var(--smart-row-hover); }
.notification-preferences-list > label:has(input:focus-visible) { border-color: var(--smart-focus-ring-surface); outline: 3px solid var(--smart-focus-ring); outline-offset: 2px; }
.notification-preferences-list > label > span { display: flex; min-width: 0; align-items: center; gap: .6rem; }
.notification-preferences-list > label > span > .icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--smart-primary); }
.notification-preferences-list > label > span > span { display: grid; min-width: 0; gap: .1rem; }
.notification-preferences-list strong { font-size: var(--smart-font-body-compact); }
.notification-preferences-list small { color: var(--smart-text-secondary); font-size: var(--smart-font-small); line-height: 1.4; }
.notification-preferences-list input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--smart-primary); }
.notification-preferences-error { color: var(--smart-danger) !important; font-weight: 700; }

/* Popups and modals use the same compact content rhythm on desktop. */
.modal-content { border-color: var(--smart-border); border-radius: var(--smart-radius-card); color: var(--smart-text); background: var(--smart-surface); box-shadow: var(--smart-card-shadow); }
.modal-header { min-height: 52px; padding: .75rem 1rem; border-bottom-color: var(--smart-divider); }
.modal-title { font-size: var(--smart-font-title-sm); line-height: 1.35; }
.modal-body { padding: .9rem 1rem; }
.modal-footer { gap: .5rem; padding: .75rem 1rem; border-top-color: var(--smart-divider); }
.modal :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger) { min-height: var(--smart-control-height-sm); padding: .4rem .7rem; font-size: var(--smart-font-body-compact); }
.swal2-popup.smart-alert { width: min(92vw, 380px); padding: 1rem; }
.smart-alert .smart-alert-icon { width: 2.5rem; height: 2.5rem; margin-bottom: .65rem; }
.smart-alert .smart-alert-icon .icon { width: 1.2rem; height: 1.2rem; }
.smart-alert .swal2-title { font-size: var(--smart-font-title-sm); }
.smart-alert .swal2-html-container { margin-top: .4rem; font-size: var(--smart-font-body-sm); }
.smart-alert .swal2-actions { margin-top: .8rem; }
.smart-alert .swal2-actions :is(.btn-smart-primary, .btn-smart-light, .btn-smart-danger) { min-height: var(--smart-control-height-sm); padding: .4rem .7rem; font-size: var(--smart-font-body-compact); }
.smart-alert .smart-alert-close { width: var(--smart-control-height-sm); height: var(--smart-control-height-sm); }

@media (max-width: 768px) {
  :is(.app-content, .reference-container, .smart-reference-main, .modal)
    :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger):not(.btn-smart-lg),
  :is(.login-card, .standalone-card)
    :is(.btn-smart-primary, .btn-smart-light, .btn-smart-gold, .btn-smart-danger):not(.btn-smart-lg),
  .smart-alert .swal2-actions :is(.btn-smart-primary, .btn-smart-light, .btn-smart-danger):not(.btn-smart-lg) {
    min-height: var(--smart-control-height) !important;
    font-size: var(--smart-font-body);
  }
  :is(.app-content, .reference-container, .smart-reference-main)
    :is(.btn-smart-square, .topbar-icon):not(.btn-smart-lg) {
    width: var(--smart-control-height) !important;
    min-width: var(--smart-control-height) !important;
    height: var(--smart-control-height) !important;
    min-height: var(--smart-control-height) !important;
  }
  :is(.app-content, .reference-container, .smart-reference-main, .modal)
    :is(input.form-control, select.form-select, .native-search input, .native-select select, .smart-select select, .module-search input):not(.smart-control-lg),
  :is(.app-content, .reference-container, .smart-reference-main, .modal) .form-field
    > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select):not(.smart-control-lg),
  :is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select:not(.smart-control-lg).ts-wrapper,
  :is(.app-content, .reference-container, .smart-reference-main, .modal) .smart-tom-select:not(.smart-control-lg) .ts-control {
    height: auto !important;
    min-height: var(--smart-control-height) !important;
    font-size: var(--smart-font-title);
  }
  :is(.login-card, .standalone-card) .form-field
    > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  :is(.login-card, .standalone-card) .login-password-wrap > input {
    height: var(--smart-control-height);
    min-height: var(--smart-control-height);
    font-size: var(--smart-font-title);
  }
  .smart-confirm-dialog .form-field :is(input, select, textarea),
  .modal .form-field :is(input, select, textarea),
  .smart-confirm-dialog .smart-tom-select .ts-control,
  .modal .smart-tom-select .ts-control {
    font-size: var(--smart-font-control) !important;
  }
  .login-secondary-links a { min-height: var(--smart-control-height); }
  .smart-form-catalog,
  .smart-form-specimens { grid-template-columns: 1fr; }
  .smart-input-action > button { top: 0; right: 0; height: var(--smart-control-height); }
  .smart-input-group,
  .smart-static-control,
  .smart-color-choice label { min-height: var(--smart-control-height); }
  .smart-phone-control > .form-control,
  .smart-phone-control .smart-tom-select.ts-wrapper,
  .smart-phone-control .smart-tom-select .ts-control {
    height: var(--smart-control-height) !important;
    min-height: var(--smart-control-height) !important;
  }
  .smart-phone-control .ts-control { flex-wrap: nowrap; overflow: hidden; }
  .smart-phone-control .ts-control .item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(.app-content, .reference-container, .smart-reference-main)
    :is(
      .notification-filters nav button,
      .notification-search,
      .notification-read-toggle,
      .smart-inbox-folders button,
      .smart-player-toggle,
      .filter-chip,
      .segmented-control button,
      .document-categories button,
      .executive-category-nav button,
      .smart-tabs button,
      .action-mailbox-list button,
      .action-labels-open,
      .action-labels-back,
      .notes-navigation button,
      .notes-search,
      .icon-control,
      .note-pin-control
    ) {
    min-height: var(--smart-control-height);
  }
  :is(.app-content, .reference-container, .smart-reference-main)
    :is(.notification-read-toggle, .smart-player-toggle, .icon-control) {
    width: var(--smart-control-height);
    height: var(--smart-control-height);
  }
  .note-pin-control { font-size: var(--smart-font-body); }
  .smart-button-dropdown > div button { min-height: var(--smart-control-height); }
  .modal-header { min-height: 60px; }
  .smart-alert .smart-alert-close { width: var(--smart-control-height); height: var(--smart-control-height); }
}

@media (max-width: 540px) {
  .smart-phone-control { grid-template-columns: minmax(145px, .85fr) minmax(150px, 1.15fr); }
}

@media (max-width: 380px) {
  .smart-phone-control { grid-template-columns: 1fr; }
}

/* Preserve mobile touch targets after the compact desktop-density cascade. */
@media (max-width: 768px) {
  .notification-inline-action,
  .notification-inline-action:link,
  .notification-inline-action:visited {
    min-height: var(--smart-control-height) !important;
    padding-inline: .7rem;
    font-size: var(--smart-font-body-compact);
  }
  .module-category-filter .smart-tom-select,
  .module-category-filter .smart-tom-select .ts-control {
    height: var(--smart-control-height) !important;
    min-height: var(--smart-control-height) !important;
  }
  .module-category-filter .smart-tom-select .ts-control {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .module-category-filter .smart-tom-select .ts-control > .item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Shared mobile contract: keep every page on the same reference primitives. */
.student-user-dropdown { position: relative; }
.student-profile.user-menu {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--smart-on-brand);
}
.student-profile.user-menu:hover,
.student-profile.user-menu[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--smart-on-brand) 28%, transparent);
  color: var(--smart-on-brand);
  background: color-mix(in srgb, var(--smart-on-brand) 8%, transparent);
}
.student-profile .user-menu-chevron { color: var(--smart-sidebar-text); }

@media (max-width: 768px) {
  .module-filter {
    gap: .5rem;
    margin-bottom: .55rem;
    padding-bottom: .6rem;
    scrollbar-gutter: stable;
  }

  .smart-phone-control .smart-country-select .ts-control,
  .smart-phone-control .smart-country-select .ts-control > .item,
  .smart-phone-control .smart-country-select .ts-control > input {
    font-size: var(--smart-font-control) !important;
  }
  .smart-country-selected { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .smart-country-option { font-size: var(--smart-font-body-sm); }

  .smart-native-table-wrap { overflow: visible; }
  .smart-native-table,
  .smart-native-table tbody { display: block; width: 100%; min-width: 0; }
  .smart-native-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .smart-native-table tbody { display: grid; gap: .65rem; padding: .65rem; }
  .smart-native-table tbody tr {
    display: grid;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-lg);
    background: var(--smart-surface);
  }
  .smart-native-table td,
  .smart-native-table td:nth-child(n) {
    display: grid !important;
    grid-template-columns: minmax(6.5rem, .65fr) minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
    padding: 0;
    border: 0;
    font-size: var(--smart-font-body-compact);
    overflow-wrap: anywhere;
  }
  .smart-native-table td:empty { display: none !important; }
  .smart-native-table td::before {
    color: var(--smart-text-muted);
    content: attr(data-label);
    font-size: var(--smart-font-caption);
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  body[data-template-key] .smart-native-table { table-layout: auto; }
  body[data-template-key] .smart-native-table td,
  body[data-template-key] .smart-native-table td:nth-child(n) { width: auto !important; }
  .smart-native-table .table-user { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: .5rem; }
  .smart-native-table .badge-soft { width: max-content; max-width: 100%; white-space: normal; }

  .page-heading > .d-flex,
  .smart-v2-page-header > .d-flex,
  .native-page-header > .d-flex,
  .panel-header > .panel-action {
    align-self: flex-start;
    justify-content: flex-start;
    margin-inline-end: auto;
  }
}

@media (max-width: 540px) {
  .smart-tom-select .ts-dropdown,
  .smart-button-dropdown > div {
    right: auto;
    left: 0;
    text-align: left;
  }
  .student-profile-menu { top: 72px !important; }

  .login-layout {
    position: relative;
    min-height: 100dvh;
    isolation: isolate;
    background:
      linear-gradient(155deg, color-mix(in srgb, var(--smart-sidebar-bg-deep) 92%, transparent), color-mix(in srgb, var(--smart-primary) 62%, transparent)),
      url("../images/heroes/campus-hero.webp") 62% center / cover no-repeat;
  }
  .login-layout::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: color-mix(in srgb, var(--smart-sidebar-bg-deep) 12%, transparent);
    content: "";
  }
  .login-panel {
    min-height: 100dvh;
    align-items: center;
    padding: max(1rem, env(safe-area-inset-top)) .85rem max(1.25rem, env(safe-area-inset-bottom));
  }
  .login-panel-inner { width: min(100%, 26rem); }
  .login-access-surface { display: block; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .login-campus-summary { display: none; }
  .login-card {
    padding: 1.35rem 1.2rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--smart-surface) 86%, transparent);
    border-radius: var(--smart-radius-dialog);
    background: var(--smart-surface);
    box-shadow: var(--smart-shadow-panel);
  }
  .login-brand { gap: .6rem; margin-bottom: 1.25rem; }
  .login-brand img { width: 44px; height: 52px; }
  .login-wordmark > strong { font-size: var(--smart-font-section); }
  .login-wordmark > span { font-size: var(--smart-font-compact-title); letter-spacing: .1em; }
  .login-card-header { margin-bottom: 1rem; }
  .login-card-header h1 { font-size: var(--smart-font-heading-page); }
  .login-card-header p { margin-top: .35rem; font-size: var(--smart-font-body-md); line-height: 1.5; }
  .login-google-button,
  .login-nim-button { min-height: 48px; }
  .login-method-note,
  .login-fallback-note { font-size: var(--smart-font-body-compact); }
  .login-separator { margin: .85rem 0; }
  .login-secondary-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .5rem;
    row-gap: 0;
    margin-top: 1.1rem;
    padding-top: .55rem;
  }
  .login-secondary-links a { min-height: 40px; padding-block: .35rem; font-size: var(--smart-font-body-compact); }
  .login-secondary-links a:last-child { grid-column: 1 / -1; }
  .login-legal-links { gap: .25rem .75rem; margin-top: .45rem; font-size: var(--smart-font-caption); }
  .login-legal-unavailable::after { display: none; }
  .login-help { display: none; }
  .login-footnote {
    margin: .8rem .2rem 0;
    color: color-mix(in srgb, var(--smart-on-brand) 84%, transparent);
    font-size: var(--smart-font-caption);
    text-align: left;
  }
}