/* =====================================================================
   MIUDOL / KONTUR — COMPLETE UI STYLE SYSTEM
   Solar Essential Broken compatible visual layer
   Accent colors: #9e93d8 + #5ebced
   Connect AFTER the legacy contour.css.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
  :root {
    color-scheme: light;

    /* Brand accents */
    --miu-accent-1: #9e93d8;
    --miu-accent-2: #5ebced;
    --miu-accent-1-rgb: 158, 147, 216;
    --miu-accent-2-rgb: 94, 188, 237;

    /* Primary scale: soft lavender */
    --miu-primary-25: #fcfbff;
    --miu-primary-50: #f7f5ff;
    --miu-primary-75: #f2efff;
    --miu-primary-100: #ece8ff;
    --miu-primary-200: #ddd7fb;
    --miu-primary-300: #c9c0f0;
    --miu-primary-400: #b5aae6;
    --miu-primary-500: #9e93d8;
    --miu-primary-600: #877cc8;
    --miu-primary-700: #6f65ad;
    --miu-primary-800: #514989;
    --miu-primary-900: #302a55;

    /* Secondary scale: clear cyan */
    --miu-secondary-25: #f8fdff;
    --miu-secondary-50: #effaff;
    --miu-secondary-75: #e9f8ff;
    --miu-secondary-100: #dff5ff;
    --miu-secondary-200: #c9efff;
    --miu-secondary-300: #aee5fb;
    --miu-secondary-400: #82d3f4;
    --miu-secondary-500: #5ebced;
    --miu-secondary-600: #43a4d8;
    --miu-secondary-700: #2f84b5;
    --miu-secondary-800: #226487;
    --miu-secondary-900: #17445c;

    /* Neutrals */
    --miu-bg: #f7f8fc;
    --miu-bg-soft: #fbfcff;
    --miu-surface: #ffffff;
    --miu-surface-soft: #fbfcff;
    --miu-surface-tint: #f8f7ff;
    --miu-surface-cyan: #f2fbff;
    --miu-line: #e7ecf6;
    --miu-border: #dce3f2;
    --miu-border-strong: #ccd5e7;

    --miu-text: #10182b;
    --miu-text-2: #293248;
    --miu-muted: #687287;
    --miu-soft: #98a0b4;
    --miu-inverse: #ffffff;

    /* Semantic */
    --miu-success: #2c9b65;
    --miu-success-bg: #edf9f2;
    --miu-success-line: #bfe8cf;
    --miu-warning: #a56c16;
    --miu-warning-bg: #fff7e6;
    --miu-warning-line: #f2d7a5;
    --miu-danger: #b94141;
    --miu-danger-bg: #fff1f1;
    --miu-danger-line: #f1bfc0;
    --miu-info: #326fb7;
    --miu-info-bg: #eef6ff;
    --miu-info-line: #c8def7;

    /* Typography */
    --miu-font: "Segoe UI Variable Text", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --miu-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --miu-weight-thin: 350;
    --miu-weight-normal: 420;
    --miu-weight-medium: 520;
    --miu-weight-semibold: 600;
    --miu-weight-bold: 660;

    --miu-fs-10: 10px;
    --miu-fs-11: 11px;
    --miu-fs-12: 12px;
    --miu-fs-13: 13px;
    --miu-fs-14: 14px;
    --miu-fs-15: 15px;
    --miu-fs-16: 16px;
    --miu-fs-18: 18px;
    --miu-fs-20: 20px;
    --miu-fs-24: 24px;
    --miu-fs-28: 28px;
    --miu-fs-32: 32px;
    --miu-fs-36: 36px;

    /* Radius */
    --miu-radius-8: 8px;
    --miu-radius-10: 10px;
    --miu-radius-12: 12px;
    --miu-radius-14: 14px;
    --miu-radius-16: 16px;
    --miu-radius-18: 18px;
    --miu-radius-20: 20px;
    --miu-radius-24: 24px;
    --miu-radius-28: 28px;
    --miu-radius-pill: 999px;

    /* Spacing */
    --miu-space-2: 2px;
    --miu-space-4: 4px;
    --miu-space-6: 6px;
    --miu-space-8: 8px;
    --miu-space-10: 10px;
    --miu-space-12: 12px;
    --miu-space-14: 14px;
    --miu-space-16: 16px;
    --miu-space-18: 18px;
    --miu-space-20: 20px;
    --miu-space-24: 24px;
    --miu-space-28: 28px;
    --miu-space-32: 32px;
    --miu-space-40: 40px;

    /* Shadows */
    --miu-shadow-xs: 0 4px 12px rgba(44, 52, 96, 0.035);
    --miu-shadow-sm: 0 10px 24px rgba(44, 52, 96, 0.055);
    --miu-shadow-md: 0 18px 44px rgba(44, 52, 96, 0.075);
    --miu-shadow-lg: 0 28px 80px rgba(27, 34, 62, 0.16);
    --miu-shadow-accent: 0 16px 36px rgba(var(--miu-accent-1-rgb), 0.22);
    --miu-shadow-cyan: 0 16px 36px rgba(var(--miu-accent-2-rgb), 0.18);

    /* Motion */
    --miu-ease-out: cubic-bezier(.16, 1, .3, 1);
    --miu-ease-soft: cubic-bezier(.22, .61, .36, 1);
    --miu-ease-spring: cubic-bezier(.2, .9, .25, 1.12);
    --miu-dur-fast: 120ms;
    --miu-dur: 180ms;
    --miu-dur-slow: 320ms;
    --miu-dur-page: 520ms;

    /* Component sizing */
    --miu-control-h-sm: 34px;
    --miu-control-h: 42px;
    --miu-control-h-lg: 50px;
    --miu-icon-sm: 18px;
    --miu-icon: 22px;
    --miu-icon-lg: 28px;
    --miu-card-pad: 20px;
    --miu-page-max: 1760px;

    /* Legacy aliases from contour.css */
    --color-bg: var(--miu-bg);
    --color-surface: var(--miu-surface);
    --color-surface-2: var(--miu-surface-soft);
    --color-border: var(--miu-border);
    --color-line: var(--miu-line);
    --color-primary-50: var(--miu-primary-50);
    --color-primary-100: var(--miu-primary-100);
    --color-primary-200: var(--miu-primary-200);
    --color-primary-300: var(--miu-primary-300);
    --color-primary-400: var(--miu-primary-400);
    --color-primary-500: var(--miu-primary-500);
    --color-primary-600: var(--miu-primary-600);
    --color-primary-700: var(--miu-primary-700);
    --text-main: var(--miu-text);
    --text-muted: var(--miu-muted);
    --text-soft: var(--miu-soft);
    --text-inverse: var(--miu-inverse);
    --success-bg: var(--miu-success-bg);
    --success-text: var(--miu-success);
    --warning-bg: var(--miu-warning-bg);
    --warning-text: var(--miu-warning);
    --danger-bg: var(--miu-danger-bg);
    --danger-text: var(--miu-danger);
    --info-bg: var(--miu-info-bg);
    --info-text: var(--miu-info);
    --neutral-bg: #f1f3f8;
    --neutral-text: var(--miu-muted);
    --radius-sm: var(--miu-radius-8);
    --radius-md: var(--miu-radius-12);
    --radius-lg: var(--miu-radius-18);
    --radius-xl: var(--miu-radius-24);
    --shadow-card: var(--miu-shadow-md);
    --shadow-soft: var(--miu-shadow-sm);
  }

  html[data-kontur-theme="dark"] {
    color-scheme: dark;
    --miu-bg: #0f1426;
    --miu-bg-soft: #12182c;
    --miu-surface: #171d33;
    --miu-surface-soft: #1b223b;
    --miu-surface-tint: #1e2341;
    --miu-surface-cyan: #14283a;
    --miu-line: #293252;
    --miu-border: #323b5d;
    --miu-border-strong: #465172;
    --miu-text: #eef2ff;
    --miu-text-2: #dbe4ff;
    --miu-muted: #a9b2ca;
    --miu-soft: #7f8aa6;
    --miu-shadow-xs: 0 4px 14px rgba(0,0,0,.18);
    --miu-shadow-sm: 0 10px 24px rgba(0,0,0,.22);
    --miu-shadow-md: 0 18px 44px rgba(0,0,0,.26);
    --miu-shadow-lg: 0 28px 80px rgba(0,0,0,.36);
  }

  body[data-kontur-density="compact"] {
    --miu-card-pad: 16px;
    --miu-control-h: 38px;
    --miu-control-h-lg: 46px;
  }

  body[data-kontur-density="spacious"] {
    --miu-card-pad: 26px;
    --miu-control-h: 46px;
    --miu-control-h-lg: 56px;
  }

/* ---------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 0 !important; scroll-behavior: smooth; }
  body { min-width: 0 !important; }
  img, svg, video { max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button { border: 0; }
  [hidden] { display: none !important; }

  body {
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(circle at 12% 0%, rgba(var(--miu-accent-1-rgb), 0.10), transparent 30%),
      radial-gradient(circle at 92% 8%, rgba(var(--miu-accent-2-rgb), 0.12), transparent 26%),
      linear-gradient(180deg, var(--miu-bg-soft) 0%, var(--miu-bg) 310px);
    color: var(--miu-text);
    font-family: var(--miu-font);
    font-size: var(--miu-fs-14);
    font-weight: var(--miu-weight-normal);
    line-height: 1.5;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: rgba(var(--miu-accent-1-rgb), .25);
    color: var(--miu-text);
  }

  a {
    color: var(--miu-primary-700);
    text-decoration: none;
    transition: color var(--miu-dur-fast) var(--miu-ease-soft), opacity var(--miu-dur-fast) var(--miu-ease-soft);
  }

  a:hover { color: var(--miu-secondary-700); text-decoration: none; }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--miu-text);
    letter-spacing: -0.015em;
    line-height: 1.14;
  }

  h1 { font-size: clamp(28px, 3vw, 42px); font-weight: var(--miu-weight-semibold); }
  h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: var(--miu-weight-semibold); }
  h3 { font-size: 20px; font-weight: var(--miu-weight-semibold); }
  h4 { font-size: 17px; font-weight: var(--miu-weight-medium); }
  h5, h6 { font-size: 15px; font-weight: var(--miu-weight-medium); }

  p { margin: 0; color: var(--miu-muted); }
  small, .muted { color: var(--miu-muted); }
  code, kbd { font-family: var(--miu-font-mono); }

  :focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(var(--miu-accent-1-rgb), .18) !important;
  }

/* ---------------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------------- */
  .app-main,
  body:has(.employee-sidebar) .app-main > :not(.employee-sidebar):not(.employee-workbar),
  .employee-content,
  .service-page,
  .education-page,
  .competency-page,
  .period-page,
  .passport-page,
  .department-page,
  .manager-department-page,
  .manager-reserve-page,
  .manager-settings-page {
    max-width: var(--miu-page-max);
    margin-inline: auto;
  }

  .app-main {
    width: min(var(--miu-page-max), calc(100% - 48px));
    padding: 28px 0 44px;
  }

  body:has(.employee-sidebar) .app-main {
    width: 100%;
    max-width: none;
    padding: 18px 28px 36px 284px;
  }

  .page-heading,
  .service-heading,
  .education-page-head,
  .competency-page-head,
  .period-page-head,
  .profile-page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--miu-space-20);
    margin-bottom: var(--miu-space-18);
  }

  .ui-stack, .stack { display: grid; gap: var(--miu-space-16); }
  .ui-stack-sm, .stack-sm { display: grid; gap: var(--miu-space-10); }
  .ui-stack-lg, .stack-lg { display: grid; gap: var(--miu-space-24); }

  .ui-row, .row {
    display: flex;
    align-items: center;
    gap: var(--miu-space-12);
    flex-wrap: wrap;
  }

  .ui-row-between, .row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--miu-space-16);
  }

  .ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--miu-space-18); }
  .ui-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--miu-space-18); }
  .ui-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--miu-space-18); }
  .ui-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--miu-space-18); }

/* ---------------------------------------------------------------------
   4. CORE COMPONENTS
   --------------------------------------------------------------------- */
  /* Cards / panels */
  .card, .box, .panel, form:not(td form),
  .service-card, .education-card, .competency-board, .competency-side-card,
  .period-card, .period-cycle-card, .passport-card, .personal-section-card,
  .notification-card, .settings-panel, .manager-section-card,
  .ui-card {
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-24);
    background: linear-gradient(180deg, var(--miu-surface) 0%, var(--miu-surface-soft) 100%);
    box-shadow: var(--miu-shadow-md);
  }

  .card, .box, .panel, form:not(td form), .ui-card { padding: var(--miu-card-pad); }
  td form { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }

  .ui-glass, .app-topbar, .employee-workbar {
    border: 1px solid rgba(220, 227, 242, .82);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px);
    box-shadow: var(--miu-shadow-sm);
  }

  html[data-kontur-theme="dark"] .ui-glass,
  html[data-kontur-theme="dark"] .app-topbar,
  html[data-kontur-theme="dark"] .employee-workbar {
    background: rgba(23, 29, 51, .78);
  }

  /* Buttons */
  button, .button, .ui-button, .auth-primary, .course-button, .passport-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--miu-control-h);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--miu-radius-14);
    background: linear-gradient(135deg, var(--miu-primary-500), var(--miu-primary-600));
    color: var(--miu-inverse);
    font-family: var(--miu-font);
    font-size: var(--miu-fs-14);
    font-weight: var(--miu-weight-medium);
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(var(--miu-accent-1-rgb), .18);
    transition:
      transform var(--miu-dur-fast) var(--miu-ease-soft),
      box-shadow var(--miu-dur) var(--miu-ease-soft),
      background var(--miu-dur) var(--miu-ease-soft),
      border-color var(--miu-dur-fast) var(--miu-ease-soft),
      color var(--miu-dur-fast) var(--miu-ease-soft);
  }

  button:hover, .button:hover, .ui-button:hover, .auth-primary:hover, .course-button:hover, .passport-link-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--miu-primary-600), var(--miu-secondary-500));
    box-shadow: 0 18px 34px rgba(var(--miu-accent-1-rgb), .22);
    text-decoration: none;
  }

  button:active, .button:active, .ui-button:active { transform: translateY(0) scale(.99); }
  button:disabled, .button.is-disabled, .ui-button.is-disabled {
    opacity: .52;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
  }

  .button.secondary, .ui-button--secondary, .auth-secondary,
  .service-pill, .course-row button, .notification-actions button,
  .manager-directory-links a, .file-action {
    border-color: var(--miu-border);
    background: var(--miu-surface);
    color: var(--miu-primary-700);
    box-shadow: none;
  }

  .button.secondary:hover, .ui-button--secondary:hover, .auth-secondary:hover,
  .service-pill:hover, .course-row button:hover, .notification-actions button:hover,
  .manager-directory-links a:hover, .file-action:hover {
    background: linear-gradient(135deg, var(--miu-primary-50), var(--miu-secondary-50));
    color: var(--miu-primary-800);
    box-shadow: 0 12px 28px rgba(var(--miu-accent-1-rgb), .10);
  }

  .button.ghost, .ui-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--miu-muted);
    box-shadow: none;
  }

  .button.small, .ui-button--sm { min-height: var(--miu-control-h-sm); padding-inline: 12px; border-radius: var(--miu-radius-12); font-size: var(--miu-fs-13); }
  .button.large, .ui-button--lg { min-height: var(--miu-control-h-lg); padding-inline: 22px; border-radius: var(--miu-radius-16); font-size: var(--miu-fs-15); }

  button[value*="reject"], button[value*="delete"], button[value*="archive"], .ui-button--danger {
    border-color: rgba(185, 65, 65, .18);
    background: var(--miu-danger-bg);
    color: var(--miu-danger);
    box-shadow: none;
  }

  button[value*="reject"]:hover, button[value*="delete"]:hover, button[value*="archive"]:hover, .ui-button--danger:hover {
    background: #ffe5e5;
    color: var(--miu-danger);
  }

  /* Inputs */
  label {
    display: grid;
    gap: 7px;
    margin: 0;
    color: var(--miu-muted);
    font-size: var(--miu-fs-13);
    font-weight: var(--miu-weight-medium);
  }

  input, select, textarea, .ui-input {
    width: min(100%, 620px);
    min-height: var(--miu-control-h);
    padding: 10px 13px;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-14);
    background: var(--miu-surface);
    color: var(--miu-text);
    font-family: var(--miu-font);
    font-size: var(--miu-fs-14);
    font-weight: var(--miu-weight-normal);
    outline: none;
    box-shadow: none;
    transition:
      border-color var(--miu-dur-fast) var(--miu-ease-soft),
      box-shadow var(--miu-dur-fast) var(--miu-ease-soft),
      background-color var(--miu-dur-fast) var(--miu-ease-soft);
  }

  textarea { min-height: 96px; resize: vertical; }
  input::placeholder, textarea::placeholder { color: var(--miu-soft); opacity: 1; }

  input:hover, select:hover, textarea:hover { border-color: var(--miu-border-strong); }
  input:focus, select:focus, textarea:focus, .ui-input:focus {
    border-color: var(--miu-primary-400);
    box-shadow: 0 0 0 4px rgba(var(--miu-accent-1-rgb), .14);
    background: var(--miu-surface);
  }

  input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--miu-danger-line);
    background: var(--miu-danger-bg);
  }

  input[type="checkbox"], input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    margin: 0;
    accent-color: var(--miu-primary-500);
    cursor: pointer;
  }

  .ui-check, .ui-radio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    min-height: 32px;
    color: var(--miu-text-2);
    cursor: pointer;
  }

  .ui-switch {
    --switch-w: 46px;
    --switch-h: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .ui-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .ui-switch span {
    position: relative;
    width: var(--switch-w);
    height: var(--switch-h);
    border-radius: var(--miu-radius-pill);
    background: #dfe5f2;
    transition: background var(--miu-dur) var(--miu-ease-soft);
  }
  .ui-switch span::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--miu-shadow-xs);
    transition: transform var(--miu-dur) var(--miu-ease-spring);
  }
  .ui-switch input:checked + span { background: linear-gradient(90deg, var(--miu-primary-500), var(--miu-secondary-500)); }
  .ui-switch input:checked + span::before { transform: translateX(20px); }

  /* Field with icon */
  .ui-field, .auth-field, .help-search {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    padding: 0 12px;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-18);
    background: rgba(255,255,255,.88);
    transition: border-color var(--miu-dur-fast) var(--miu-ease-soft), box-shadow var(--miu-dur-fast) var(--miu-ease-soft);
  }

  .ui-field:focus-within, .auth-field:focus-within, .help-search:focus-within {
    border-color: var(--miu-primary-400);
    box-shadow: 0 0 0 4px rgba(var(--miu-accent-1-rgb), .14);
  }

  .ui-field input, .auth-field input, .auth-field select, .help-search input {
    width: 100%;
    min-height: 42px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Solar broken icon system */
  .ui-icon, .profile-icon-tile, .kpi-icon, .field-icon, .period-icon, .passport-icon, .action-icon {
    --icon: url('/assets/icons/solar-broken/settings.svg');
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--miu-radius-14);
    background: linear-gradient(135deg, rgba(var(--miu-accent-1-rgb), .12), rgba(var(--miu-accent-2-rgb), .10));
    color: var(--miu-primary-600);
  }

  .ui-icon::before, .profile-icon-tile::before, .kpi-icon::before, .field-icon::before, .period-icon::after, .passport-icon::after, .action-icon::before {
    content: "";
    width: var(--miu-icon);
    height: var(--miu-icon);
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }

  .icon-home, .profile-icon-home, .employee-tab-home { --icon: url('/assets/icons/solar-broken/home.svg'); --tab-icon: url('/assets/icons/solar-broken/home.svg'); }
  .icon-profile, .profile-icon-profile, .profile-icon-shield-user, .employee-tab-profile { --icon: url('/assets/icons/solar-broken/shield-user.svg'); --tab-icon: url('/assets/icons/solar-broken/shield-user.svg'); }
  .icon-case, .profile-icon-case, .profile-icon-briefcase { --icon: url('/assets/icons/solar-broken/case.svg'); }
  .icon-chart, .profile-icon-chart, .profile-icon-competencies { --icon: url('/assets/icons/solar-broken/chart.svg'); }
  .icon-calendar, .profile-icon-calendar, .profile-icon-education { --icon: url('/assets/icons/solar-broken/calendar.svg'); }
  .icon-letter, .profile-icon-letter { --icon: url('/assets/icons/solar-broken/letter.svg'); }
  .icon-bell, .profile-icon-notifications { --icon: url('/assets/icons/solar-broken/bell.svg'); }
  .icon-help, .profile-icon-help { --icon: url('/assets/icons/solar-broken/question.svg'); }
  .icon-search, .profile-icon-search { --icon: url('/assets/icons/solar-broken/search.svg'); }
  .icon-lock { --icon: url('/assets/icons/solar-broken/lock.svg'); }
  .icon-settings, .profile-icon-settings { --icon: url('/assets/icons/solar-broken/settings.svg'); }

  /* Badges / pills */
  .badge, .ui-badge, .status-pill, .request-status, .course-chip, .settings-pill,
  .competency-state-pill, .period-status, .support-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: var(--miu-radius-pill);
    background: var(--miu-primary-50);
    color: var(--miu-primary-700);
    font-size: var(--miu-fs-12);
    font-weight: var(--miu-weight-medium);
    line-height: 1.2;
  }

  .ui-badge--cyan { background: var(--miu-secondary-50); color: var(--miu-secondary-800); }
  .ui-badge--success, .status-pill.is-approved, .request-status-approved, .request-status-applied { background: var(--miu-success-bg); color: var(--miu-success); }
  .ui-badge--warning, .request-status-needs_clarification { background: var(--miu-warning-bg); color: var(--miu-warning); }
  .ui-badge--danger, .request-status-rejected { background: var(--miu-danger-bg); color: var(--miu-danger); }
  .ui-badge--info { background: var(--miu-info-bg); color: var(--miu-info); }

  /* Tabs / segmented */
  .employee-tabs, .workspace-tabs, .settings-tabs, .service-filter-tabs, .competency-filter-tabs, .education-tabs, .segmented, .ui-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ui-tabs, .settings-tabs, .service-filter-tabs, .segmented {
    padding: 6px;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-20);
    background: var(--miu-surface);
    box-shadow: var(--miu-shadow-xs);
  }

  .employee-tab, .workspace-tab, .ui-tab, .settings-tabs button, .service-filter-tabs button, .competency-filter-tabs button, .education-tabs button, .segmented button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--miu-radius-14);
    background: transparent;
    color: var(--miu-muted);
    font-size: var(--miu-fs-14);
    font-weight: var(--miu-weight-medium);
    box-shadow: none;
    cursor: pointer;
  }

  .employee-tab:hover, .workspace-tab:hover, .ui-tab:hover, .settings-tabs button:hover, .service-filter-tabs button:hover, .competency-filter-tabs button:hover, .education-tabs button:hover, .segmented button:hover {
    background: linear-gradient(135deg, var(--miu-primary-50), var(--miu-secondary-50));
    color: var(--miu-primary-700);
    transform: none;
    box-shadow: none;
  }

  .employee-tab.is-active, .workspace-tab.is-active, .ui-tab.is-active, .settings-tabs button.is-active, .service-filter-tabs button.is-active, .competency-filter-tabs button.is-active, .education-tabs button.is-active, .segmented button.is-active {
    border-color: rgba(var(--miu-accent-1-rgb), .22);
    background: var(--miu-primary-50);
    color: var(--miu-primary-700);
    box-shadow: inset 0 -2px 0 rgba(var(--miu-accent-1-rgb), .32);
  }

  /* Progress */
  .ui-progress, .kpi-card i, .readiness-row i, .ole-components i, .competency-mini i, .course-progress, .competency-progress, .department-level-bar {
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: var(--miu-radius-pill);
    background: #e9edf6;
  }

  .ui-progress > span, .ui-progress > i, .kpi-card i::before, .readiness-row i::before, .ole-components i::before, .competency-mini i::before, .course-progress i, .competency-progress i, .department-level-bar span {
    content: "";
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--miu-primary-500), var(--miu-secondary-500));
    animation: miu-progress-in 760ms var(--miu-ease-out) both;
  }

  .ui-progress--success > span, .ui-progress--success > i, .is-ready .competency-progress i, .is-confirmed .competency-progress i {
    background: linear-gradient(90deg, var(--miu-success), #67c993);
  }

  .ui-progress--warning > span, .ui-progress--warning > i, .is-attention .competency-progress i {
    background: linear-gradient(90deg, #eba235, #f5ca69);
  }

  /* Rings */
  .ui-ring, .ole-ring, .summary-ring, .passport-ring {
    --value: 70%;
    display: grid;
    place-items: center;
    width: 132px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--miu-primary-500) var(--value), #edf0fa 0);
    position: relative;
  }

  .ui-ring::after, .passport-ring::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    background: var(--miu-surface);
  }

  .ui-ring > *, .passport-ring > * { position: relative; z-index: 1; }

  /* Tables */
  table, .ui-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-20);
    background: var(--miu-surface);
    box-shadow: var(--miu-shadow-sm);
  }

  th, td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--miu-line);
    text-align: left;
    vertical-align: top;
  }

  th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--miu-surface-soft);
    color: var(--miu-muted);
    font-size: var(--miu-fs-12);
    font-weight: var(--miu-weight-medium);
  }

  tr:last-child td { border-bottom: 0; }
  tbody tr { transition: background-color var(--miu-dur-fast) var(--miu-ease-soft); }
  tbody tr:hover { background: var(--miu-primary-25); }

  .ui-table-scroll {
    max-height: 520px;
    overflow: auto;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-20);
  }

  /* Toolbar / topbar */
  .app-topbar, .employee-workbar, .ui-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--miu-space-16);
    min-height: 64px;
    padding: 10px 16px;
    border-radius: var(--miu-radius-18);
  }

  .app-topbar { border-radius: 0; }

  .brand, .auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .brand-mark, .brand-logo, .employee-sidebar-logo, .auth-brand img {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--miu-radius-16);
    object-fit: contain;
  }

  .brand-title, .employee-sidebar-wordmark { color: var(--miu-text); font-weight: var(--miu-weight-semibold); }
  .brand-subtitle { color: var(--miu-muted); font-size: var(--miu-fs-12); }

  /* Sidebar / menu */
  .employee-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: 252px;
    padding: 22px 16px;
    border-right: 1px solid var(--miu-border);
    background: rgba(255,255,255,.94);
    box-shadow: 10px 0 34px rgba(38,42,92,.05);
    backdrop-filter: blur(18px);
  }

  html[data-kontur-theme="dark"] .employee-sidebar { background: rgba(23,29,51,.94); }

  .employee-tabs {
    display: grid;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .employee-tab {
    justify-content: start;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--miu-radius-14);
  }

  .employee-tab span {
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--tab-icon, var(--icon)) center / contain no-repeat;
    mask: var(--tab-icon, var(--icon)) center / contain no-repeat;
  }

  .employee-menu-label {
    padding: 14px 12px 6px;
    color: var(--miu-soft);
    font-size: var(--miu-fs-11);
    font-weight: var(--miu-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body.employee-sidebar-collapsed .employee-sidebar { width: 88px; }
  body.employee-sidebar-collapsed .employee-sidebar-wordmark,
  body.employee-sidebar-collapsed .employee-menu-label,
  body.employee-sidebar-collapsed .employee-tab b,
  body.employee-sidebar-collapsed .employee-tab strong,
  body.employee-sidebar-collapsed .employee-tab em,
  body.employee-sidebar-collapsed .employee-tab:not(:has(span)) { display: none; }
  body.employee-sidebar-collapsed .employee-tab { justify-content: center; }
  body.employee-sidebar-collapsed .app-main { padding-left: 120px; }

  /* KPI cards */
  .kpi-grid, .period-kpi-grid, .education-kpi-grid, .competency-overview, .service-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--miu-space-16);
  }

  .kpi-card, .education-kpi, .competency-metric, .period-kpi-grid article, .service-summary-grid article, .ui-metric {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 116px;
    padding: 18px;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-22, 22px);
    background: var(--miu-surface);
    box-shadow: var(--miu-shadow-sm);
    transition: transform var(--miu-dur) var(--miu-ease-soft), box-shadow var(--miu-dur) var(--miu-ease-soft);
  }

  .kpi-card:hover, .education-kpi:hover, .competency-metric:hover, .ui-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--miu-shadow-md);
  }

  .kpi-card strong, .education-kpi strong, .competency-metric strong, .service-summary-grid strong, .ui-metric strong {
    display: block;
    color: var(--miu-text);
    font-size: var(--miu-fs-30, 30px);
    font-weight: var(--miu-weight-semibold);
    line-height: 1;
  }

  .kpi-card span, .kpi-card em, .education-kpi small, .education-kpi em, .competency-metric small, .competency-metric em, .ui-metric span {
    color: var(--miu-muted);
    font-size: var(--miu-fs-12);
    font-style: normal;
    font-weight: var(--miu-weight-medium);
  }

  /* Lists / rows */
  .ui-list, .action-panel, .course-list, .support-request-list, .notification-groups, .guide-list {
    display: grid;
    gap: var(--miu-space-10);
  }

  .ui-row-card, .action-card, .course-row, .notification-card, .support-request-list article, .guide-list article, .competency-map-card, .period-role-item {
    border: 1px solid var(--miu-line);
    border-radius: var(--miu-radius-18);
    background: var(--miu-surface);
    transition: transform var(--miu-dur) var(--miu-ease-soft), box-shadow var(--miu-dur) var(--miu-ease-soft), border-color var(--miu-dur-fast) var(--miu-ease-soft);
  }

  .ui-row-card:hover, .action-card:hover, .course-row:hover, .notification-card:hover, .competency-map-card:hover, .period-role-item:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--miu-accent-1-rgb), .30);
    box-shadow: var(--miu-shadow-sm);
  }

  /* Empty states */
  .empty-state, .service-empty, .education-empty, .period-empty, .department-empty, .manager-empty-state, .personal-empty-state, .ui-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    padding: 22px;
    border: 1px dashed var(--miu-border);
    border-radius: var(--miu-radius-18);
    background: var(--miu-surface-soft);
    color: var(--miu-muted);
    text-align: center;
  }

  /* Alerts */
  .ok, .success, .error, .danger, .warning, .info, .ui-alert {
    display: block;
    padding: 12px 14px;
    border-radius: var(--miu-radius-14);
    font-size: var(--miu-fs-14);
  }
  .ok, .success, .ui-alert--success { border: 1px solid var(--miu-success-line); background: var(--miu-success-bg); color: var(--miu-success); }
  .error, .danger, .ui-alert--danger { border: 1px solid var(--miu-danger-line); background: var(--miu-danger-bg); color: var(--miu-danger); }
  .warning, .ui-alert--warning { border: 1px solid var(--miu-warning-line); background: var(--miu-warning-bg); color: var(--miu-warning); }
  .info, .ui-alert--info { border: 1px solid var(--miu-info-line); background: var(--miu-info-bg); color: var(--miu-info); }

  /* Dialogs / modals */
  dialog, .personal-change-modal, .competency-request-modal, .evidence-modal, .ui-modal {
    width: min(920px, calc(100vw - 48px));
    max-height: min(820px, calc(100vh - 48px));
    padding: 0;
    border: 0;
    border-radius: var(--miu-radius-28);
    background: var(--miu-surface);
    color: var(--miu-text);
    box-shadow: var(--miu-shadow-lg);
    overflow: hidden;
    animation: miu-modal-in var(--miu-dur-slow) var(--miu-ease-out) both;
  }

  dialog::backdrop, .personal-change-modal::backdrop, .competency-request-modal::backdrop, .evidence-modal::backdrop {
    background: rgba(16, 24, 43, .36);
    backdrop-filter: blur(8px);
    animation: miu-fade-in var(--miu-dur-slow) var(--miu-ease-out) both;
  }

  .competency-modal-layout, .ui-modal__body, .personal-change-modal .personal-request-layout {
    max-height: inherit;
    overflow: auto;
    padding: 30px 32px 32px;
  }

  .modal-close-form, .competency-modal-close, .ui-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    margin: 0;
  }

  .modal-close-form button, .competency-modal-close button, .ui-modal__close {
    display: grid;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-14);
    background: var(--miu-surface);
    color: var(--miu-primary-600);
    place-items: center;
    box-shadow: var(--miu-shadow-sm);
    font-size: 0;
  }

  .modal-close-form button::before, .modal-close-form button::after,
  .competency-modal-close button::before, .competency-modal-close button::after,
  .ui-modal__close::before, .ui-modal__close::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    border-radius: var(--miu-radius-pill);
    background: currentColor;
  }
  .modal-close-form button::before, .competency-modal-close button::before, .ui-modal__close::before { transform: rotate(45deg); }
  .modal-close-form button::after, .competency-modal-close button::after, .ui-modal__close::after { transform: rotate(-45deg); }

  /* Tooltips */
  [data-tooltip], .ui-tooltip {
    position: relative;
  }

  [data-tooltip]::after, [data-tooltip]::before {
    position: absolute;
    z-index: 100;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--miu-dur-fast) var(--miu-ease-soft), transform var(--miu-dur-fast) var(--miu-ease-soft);
  }

  [data-tooltip]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    max-width: 260px;
    width: max-content;
    padding: 8px 10px;
    border-radius: var(--miu-radius-12);
    background: #172036;
    color: #fff;
    font-size: var(--miu-fs-12);
    line-height: 1.35;
    box-shadow: var(--miu-shadow-md);
  }

  [data-tooltip]::before {
    content: "";
    bottom: calc(100% + 4px);
    border: 6px solid transparent;
    border-top-color: #172036;
  }

  [data-tooltip]:hover::after, [data-tooltip]:hover::before,
  [data-tooltip]:focus-visible::after, [data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* Dropdown / popover */
  details.ui-dropdown, .employee-notifications-popover { position: relative; }
  details.ui-dropdown summary, .employee-notifications-popover summary { list-style: none; cursor: pointer; }
  details.ui-dropdown summary::-webkit-details-marker, .employee-notifications-popover summary::-webkit-details-marker { display: none; }
  .ui-dropdown__panel, .employee-notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    min-width: 280px;
    padding: 10px;
    border: 1px solid var(--miu-border);
    border-radius: var(--miu-radius-18);
    background: rgba(255,255,255,.96);
    box-shadow: var(--miu-shadow-lg);
    backdrop-filter: blur(16px);
    animation: miu-pop-in var(--miu-dur) var(--miu-ease-out) both;
  }

  /* Skeleton / loading */
  .ui-skeleton {
    display: block;
    min-height: 1em;
    border-radius: var(--miu-radius-10);
    background: linear-gradient(90deg, #eef2fb, #f7f8ff, #eef2fb);
    background-size: 220% 100%;
    animation: miu-shimmer 1.35s linear infinite;
  }

  .ui-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(var(--miu-accent-1-rgb), .22);
    border-top-color: var(--miu-primary-500);
    animation: miu-spin .8s linear infinite;
  }

  /* Scrollbars */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--miu-accent-1-rgb), .32) transparent;
  }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(var(--miu-accent-1-rgb), .32);
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   5. PAGE-SPECIFIC UNIFICATION LAYER
   --------------------------------------------------------------------- */
  .employee-hero, .personal-card-hero, .passport-hero, .department-hero-card, .manager-department-hero, .manager-tool-hero {
    border: 1px solid rgba(var(--miu-accent-1-rgb), .18);
    border-radius: var(--miu-radius-28);
    background:
      radial-gradient(circle at 84% 10%, rgba(var(--miu-accent-2-rgb), .16), transparent 30%),
      radial-gradient(circle at 10% 0%, rgba(var(--miu-accent-1-rgb), .16), transparent 28%),
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,249,255,.88));
    box-shadow: var(--miu-shadow-md);
  }

  .hero-photo, .personal-photo, .settings-avatar, .department-person-photo, .manager-employee-photo {
    overflow: hidden;
    border: 1px solid var(--miu-border);
    background: linear-gradient(135deg, var(--miu-primary-50), var(--miu-secondary-50));
    box-shadow: var(--miu-shadow-sm);
  }

  .hero-photo img, .personal-photo img, .settings-avatar img, .department-person-photo img, .manager-employee-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-orbit::before, .hero-orbit::after, .orbit {
    border-color: rgba(var(--miu-accent-1-rgb), .20) !important;
  }

  .hero-orbit-icon {
    border-color: var(--miu-border);
    background: rgba(255,255,255,.72);
    box-shadow: var(--miu-shadow-sm);
  }

  .hero-orbit-icon::before { background: var(--miu-primary-500); }

  .hero-radar-ring, .hero-radar-axis, .matrix-radar-ring, .matrix-radar-axis { stroke: rgba(var(--miu-accent-1-rgb), .16); }
  .hero-radar-area, .matrix-radar-area { fill: rgba(var(--miu-accent-1-rgb), .14); }
  .hero-radar-line, .matrix-radar-line { stroke: var(--miu-primary-500); }
  .hero-radar-dot, .matrix-radar-dot { fill: var(--miu-secondary-500); stroke: #fff; }

  .personal-data-grid div,
  .personal-service-grid div,
  .settings-info-grid article,
  .passport-meta-grid div,
  .department-top-list div,
  .manager-settings-list div {
    border-color: var(--miu-line);
    background: var(--miu-surface-soft);
  }

  .department-level-bar span,
  .matrix-bars i::before,
  .profile-competency-row i::before,
  .passport-progress-row i em,
  .passport-timeline-row i em {
    background: linear-gradient(90deg, var(--miu-primary-500), var(--miu-secondary-500));
  }

  .auth-page { background: linear-gradient(135deg, var(--miu-primary-50), var(--miu-secondary-50)); }
  .auth-card {
    border-color: rgba(var(--miu-accent-1-rgb), .20);
    background: rgba(255,255,255,.88);
    box-shadow: var(--miu-shadow-lg);
    backdrop-filter: blur(18px);
  }

/* ---------------------------------------------------------------------
   6. ANIMATIONS
   --------------------------------------------------------------------- */
  @keyframes miu-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes miu-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes miu-pop-in {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes miu-modal-in {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes miu-progress-in {
    from { width: 0; }
    to { width: var(--progress, 100%); }
  }

  @keyframes miu-shimmer {
    from { background-position: 220% 0; }
    to { background-position: -220% 0; }
  }

  @keyframes miu-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes miu-float-soft {
    from { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-6px,0); }
    to { transform: translate3d(0,0,0); }
  }

  @keyframes miu-pulse-soft {
    from { box-shadow: 0 0 0 0 rgba(var(--miu-accent-1-rgb), .28); }
    to { box-shadow: 0 0 0 12px rgba(var(--miu-accent-1-rgb), 0); }
  }

  .ui-animate-in { animation: miu-fade-up var(--miu-dur-page) var(--miu-ease-out) both; }
  .ui-float { animation: miu-float-soft 4.8s ease-in-out infinite; }
  .ui-pulse { animation: miu-pulse-soft 1.5s var(--miu-ease-out) infinite; }

  .kpi-card, .panel, .card, .service-card, .education-card, .competency-board, .period-card, .passport-card {
    animation: miu-fade-up var(--miu-dur-page) var(--miu-ease-out) both;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 1ms !important;
    }
  }

/* ---------------------------------------------------------------------
   7. UTILITIES
   --------------------------------------------------------------------- */
  .ui-text-muted { color: var(--miu-muted) !important; }
  .ui-text-soft { color: var(--miu-soft) !important; }
  .ui-text-primary { color: var(--miu-primary-700) !important; }
  .ui-text-cyan { color: var(--miu-secondary-700) !important; }
  .ui-bg-primary { background: var(--miu-primary-50) !important; }
  .ui-bg-cyan { background: var(--miu-secondary-50) !important; }
  .ui-shadow-none { box-shadow: none !important; }
  .ui-border-none { border: 0 !important; }
  .ui-radius-sm { border-radius: var(--miu-radius-12) !important; }
  .ui-radius-md { border-radius: var(--miu-radius-18) !important; }
  .ui-radius-lg { border-radius: var(--miu-radius-24) !important; }
  .ui-radius-pill { border-radius: var(--miu-radius-pill) !important; }
  .ui-full { width: 100% !important; }
  .ui-nowrap { white-space: nowrap !important; }
  .ui-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .ui-hidden { display: none !important; }

/* ---------------------------------------------------------------------
   8. RESPONSIVE
   --------------------------------------------------------------------- */
  @media (max-width: 1280px) {
    body:has(.employee-sidebar) .app-main { padding-left: 112px; }
    .employee-sidebar { width: 88px; }
    .employee-sidebar-wordmark, .employee-menu-label, .employee-tab b, .employee-tab strong, .employee-tab em { display: none; }
    .employee-tab { justify-content: center; }
    .ui-grid-4, .ui-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 900px) {
    .app-main { width: min(100% - 28px, var(--miu-page-max)); }
    body:has(.employee-sidebar) .app-main { padding: 14px; }
    .employee-sidebar { position: static; width: 100%; border-right: 0; border-bottom: 1px solid var(--miu-border); }
    .employee-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; }
    .page-heading, .service-heading, .education-page-head, .competency-page-head, .period-page-head, .profile-page-head,
    .ui-row-between, .app-topbar, .employee-workbar { align-items: stretch; flex-direction: column; }
    .ui-grid-2, .ui-grid-3, .ui-grid-4, .ui-grid-auto,
    .kpi-grid, .period-kpi-grid, .education-kpi-grid, .competency-overview, .service-summary-grid { grid-template-columns: 1fr; }
    table { display: block; overflow-x: auto; }
  }

  @media (max-width: 640px) {
    :root { --miu-card-pad: 16px; }
    dialog, .personal-change-modal, .competency-request-modal, .evidence-modal, .ui-modal {
      width: calc(100vw - 24px);
      max-height: calc(100vh - 24px);
      border-radius: var(--miu-radius-24);
    }
    .competency-modal-layout, .ui-modal__body, .personal-change-modal .personal-request-layout { padding: 24px 18px; }
    button, .button, .ui-button { width: 100%; }
    .ui-tabs, .settings-tabs, .service-filter-tabs, .segmented { overflow-x: auto; flex-wrap: nowrap; }
  }