:root {
      --bg: #171a1e;
      --surface: #20242a;
      --surface-soft: #272c33;
      --surface-elevated: #2d333b;
      --text: #f1f3f5;
      --text-soft: #b7bdc5;
      --text-light: #858c95;
      --border: #383f48;
      --border-strong: #515a66;
      --dark: #f1f3f5;
      --dark-hover: #dce0e4;
      --accent: #285f9e;
      --accent-soft: #1d2d42;
      --accent-contrast: #ffffff;
      --success: #52a77a;
      --success-bg: #183126;
      --danger: #d26868;
      --danger-bg: #321d1f;
      --warning: #d4a65a;
      --warning-bg: #342b1b;
      --info-bg: #252a31;
      --radius-sm: 10px;
      --radius: 14px;
      --radius-lg: 22px;
      --shadow: 0 1px 2px rgba(0,0,0,.18), 0 18px 50px rgba(0,0,0,.20);
    }

    html[data-theme="dark"] {
      --bg: #0f1012;
      --surface: #17191c;
      --surface-soft: #1e2024;
      --surface-elevated: #23262b;
      --text: #f3f4f5;
      --text-soft: #b5b8bd;
      --text-light: #7d8289;
      --border: #2c3035;
      --border-strong: #41464d;
      --dark: #f2f3f4;
      --dark-hover: #d9dcdf;
      --success-bg: #152a20;
      --danger-bg: #2c191b;
      --warning-bg: #2d2618;
      --info-bg: #1e2228;
      --shadow: 0 1px 2px rgba(0,0,0,.22), 0 18px 54px rgba(0,0,0,.28);
    }

    html[data-theme="metal"] {
      --bg: #171a1e;
      --surface: #20242a;
      --surface-soft: #272c33;
      --surface-elevated: #2d333b;
      --text: #f1f3f5;
      --text-soft: #b7bdc5;
      --text-light: #858c95;
      --border: #3a414a;
      --border-strong: #58626e;
      --dark: #f1f3f5;
      --dark-hover: #dce0e4;
      --success-bg: #183126;
      --danger-bg: #321d1f;
      --warning-bg: #342b1b;
      --info-bg: #252a31;
      --shadow: 0 1px 2px rgba(0,0,0,.18), 0 18px 50px rgba(0,0,0,.20);
    }

    html[data-theme="blue"] {
      --bg: #0e1621;
      --surface: #152131;
      --surface-soft: #1b2a3d;
      --surface-elevated: #21344c;
      --text: #eef5fc;
      --text-soft: #b6c7d9;
      --text-light: #7f96ad;
      --border: #2d435d;
      --border-strong: #45627f;
      --dark: #eef5fc;
      --dark-hover: #d4e2ee;
      --success-bg: #153226;
      --danger-bg: #321c22;
      --warning-bg: #342a1b;
      --info-bg: #1a2a3d;
      --shadow: 0 1px 2px rgba(0,0,0,.20), 0 18px 56px rgba(0,0,0,.24);
    }

    html[data-accent="burgundy"] {
      --accent: #8f2037;
      --accent-soft: #f3e8eb;
      --accent-contrast: #ffffff;
    }

    html[data-accent="blue"] {
      --accent: #285f9e;
      --accent-soft: #eaf1f8;
      --accent-contrast: #ffffff;
    }

    html[data-accent="green"] {
      --accent: #246d4d;
      --accent-soft: #eaf3ee;
      --accent-contrast: #ffffff;
    }

    html[data-accent="black"] {
      --accent: #292925;
      --accent-soft: #ecebe7;
      --accent-contrast: #ffffff;
    }

    html[data-theme="dark"][data-accent="burgundy"] { --accent-soft: #2b181d; }
    html[data-theme="dark"][data-accent="blue"] { --accent-soft: #152235; }
    html[data-theme="dark"][data-accent="green"] { --accent-soft: #14261d; }
    html[data-theme="dark"][data-accent="black"] { --accent: #3b3d40; --accent-soft: #232529; --accent-contrast: #f4f5f6; }

    html[data-theme="metal"][data-accent="burgundy"] { --accent-soft: #37232a; }
    html[data-theme="metal"][data-accent="blue"] { --accent-soft: #203149; }
    html[data-theme="metal"][data-accent="green"] { --accent-soft: #1d3529; }
    html[data-theme="metal"][data-accent="black"] { --accent: #4c5259; --accent-soft: #2d3238; --accent-contrast: #f4f5f6; }

    html[data-theme="blue"][data-accent="burgundy"] { --accent-soft: #34212b; }
    html[data-theme="blue"][data-accent="blue"] { --accent: #3277c8; --accent-soft: #1d3857; }
    html[data-theme="blue"][data-accent="green"] { --accent-soft: #17362c; }
    html[data-theme="blue"][data-accent="black"] { --accent: #49617a; --accent-soft: #26394d; --accent-contrast: #f4f7fa; }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
    }

    /* =====================================================
       SCROLLBARS — integrated with the current theme
       ===================================================== */

    html,
    body,
    * {
      scrollbar-width: thin;
      scrollbar-color:
        color-mix(in srgb, var(--accent) 52%, var(--border-strong))
        color-mix(in srgb, var(--surface-soft) 88%, transparent);
    }

    *::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    *::-webkit-scrollbar-track {
      background: color-mix(
        in srgb,
        var(--surface-soft) 88%,
        var(--bg)
      );
      border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb {
      min-height: 44px;
      border: 2px solid color-mix(
        in srgb,
        var(--surface-soft) 88%,
        var(--bg)
      );
      border-radius: 999px;
      background: color-mix(
        in srgb,
        var(--accent) 52%,
        var(--border-strong)
      );
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035);
    }

    *::-webkit-scrollbar-thumb:hover {
      background: color-mix(
        in srgb,
        var(--accent) 72%,
        var(--border-strong)
      );
    }

    *::-webkit-scrollbar-thumb:active {
      background: var(--accent);
    }

    *::-webkit-scrollbar-button {
      width: 0;
      height: 0;
      display: none;
    }

    *::-webkit-scrollbar-corner {
      background: color-mix(
        in srgb,
        var(--surface-soft) 88%,
        var(--bg)
      );
    }

    /* Password row keeps its intentionally hidden horizontal scrollbar. */
    .password {
      scrollbar-width: none;
    }

    .password::-webkit-scrollbar {
      display: none;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      transition: background .2s ease, color .2s ease;
    }

    html[data-theme="metal"] body {
      background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,.035), transparent 28%),
        linear-gradient(135deg, #181b20 0%, #14171b 100%);
    }

    html[data-theme="blue"] body {
      background:
        radial-gradient(circle at 16% 0%, rgba(65,133,205,.10), transparent 30%),
        linear-gradient(135deg, #0f1926 0%, #0b121c 100%);
    }

    button, input, select { font: inherit; }
    button { border: 0; cursor: pointer; }
    input[type="range"], input[type="checkbox"], input[type="radio"] { cursor: pointer; }

    .hidden { display: none !important; }

    .container {
      width: min(980px, calc(100% - 40px));
      margin: 0 auto;
    }

    .narrow {
      width: min(520px, calc(100% - 40px));
      margin: 0 auto;
    }

    .topbar {
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .topbar-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0;
      min-height: 46px;
    }

    .brand-home-btn {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      border-radius: 14px;
      outline: none;
    }

    .brand-home-btn .brand-mark,
    .brand-home-btn .brand-name {
      transition:
        transform .15s ease,
        filter .15s ease,
        color .15s ease;
    }

    .brand-home-btn:hover .brand-mark {
      transform: translateY(-1px);
      filter: brightness(1.08);
    }

    .brand-home-btn:hover .brand-name {
      color: var(--accent);
    }

    .brand-home-btn:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
    }

    .brand-home-btn:active .brand-mark {
      transform: scale(.97);
    }

    .brand-copy {
      display: flex;
      align-items: center;
      min-height: 46px;
    }

    .brand-mark {
      position: relative;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 13px;
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--accent) 92%, #171717) 0%,
        color-mix(in srgb, var(--accent) 58%, #171717) 100%
      );
      border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.08));
      color: #fff;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 10px 22px rgba(0,0,0,.16);
      overflow: hidden;
    }

    .brand-mark::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      pointer-events: none;
    }

    .brand-mark-main {
      position: relative;
      z-index: 1;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .05em;
      line-height: 1;
    }

    .brand-mark-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .brand-lock-icon {
      width: 20px;
      height: 20px;
      display: block;
    }

    .brand-lock-icon .lock-body {
      fill: rgba(255,255,255,.96);
    }

    .brand-lock-icon .lock-shackle {
      fill: none;
      stroke: rgba(255,255,255,.96);
      stroke-width: 2.1;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .brand-lock-icon .lock-detail {
      fill: color-mix(in srgb, var(--accent) 42%, #0f1724);
    }

    .brand-name {
      margin: 0;
      font-size: 12px;
      font-weight: 760;
      letter-spacing: -.02em;
      line-height: 1.2;
      white-space: nowrap;
    }

    .brand-description {
      display: none;
    }

    .app-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .nav-btn {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 11px;
      border-radius: 9px;
      background: transparent;
      color: var(--text-soft);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }

    .nav-btn:hover {
      color: var(--text);
      background: var(--surface-soft);
    }

    .nav-btn.active {
      color: var(--text);
      background: var(--surface);
      box-shadow: inset 0 0 0 1px var(--border);
    }

    .user-zone {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 40px;
      padding-left: 12px;
      border-left: 1px solid var(--border);
    }

    .user-meta {
      min-height: 34px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: right;
      line-height: 1.2;
    }

    .user-name {
      margin: 0;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
    }

    .user-role {
      margin-top: 4px;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .logout-btn {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text-soft);
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
    }

    .logout-btn:hover { color: var(--text); }

    .page {
      padding: 54px 0 72px;
    }

    .hero {
      margin-bottom: 28px;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--accent);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .hero h1,
    .page-title {
      margin: 0;
      color: var(--text);
      font-size: clamp(30px, 5vw, 44px);
      line-height: 1.05;
      letter-spacing: -.04em;
    }

    .hero p,
    .page-subtitle {
      max-width: 610px;
      margin: 14px 0 0;
      color: var(--text-soft);
      font-size: 11px;
      line-height: 1.65;
    }

    .card {
      padding: 30px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .section + .section {
      margin-top: 30px;
      padding-top: 30px;
      border-top: 1px solid var(--border);
    }

    .section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 11px;
    }

    .section-heading label,
    .section-heading span:first-child {
      font-size: 12px;
      font-weight: 760;
    }

    .step {
      color: var(--text-light);
      font-size: 10px;
      font-weight: 700;
    }

    .helper {
      margin: 8px 0 0;
      color: var(--text-light);
      font-size: 10px;
      line-height: 1.5;
    }

    .input,
    .select {
      width: 100%;
      min-height: 45px;
      padding: 0 14px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      outline: none;
      background: var(--surface);
      color: var(--text);
      font-size: 12px;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .input::placeholder { color: var(--text-light); }

    .input:focus,
    .select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
      -webkit-text-fill-color: var(--text) !important;
      color: var(--text) !important;
      caret-color: var(--text) !important;
      border: 1px solid var(--border-strong) !important;
      -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
      box-shadow: 0 0 0 1000px var(--surface) inset !important;
      background-clip: content-box !important;
      transition: background-color 5000s ease-in-out 0s;
    }

    input:-webkit-autofill::first-line {
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      font-family: inherit !important;
      font-size: 12px !important;
      font-weight: 400 !important;
    }

    html[data-theme="dark"] input:-webkit-autofill,
    html[data-theme="dark"] input:-webkit-autofill:hover,
    html[data-theme="dark"] input:-webkit-autofill:focus,
    html[data-theme="dark"] input:-webkit-autofill:active,
    html[data-theme="metal"] input:-webkit-autofill,
    html[data-theme="metal"] input:-webkit-autofill:hover,
    html[data-theme="metal"] input:-webkit-autofill:focus,
    html[data-theme="metal"] input:-webkit-autofill:active,
    html[data-theme="blue"] input:-webkit-autofill,
    html[data-theme="blue"] input:-webkit-autofill:hover,
    html[data-theme="blue"] input:-webkit-autofill:focus,
    html[data-theme="blue"] input:-webkit-autofill:active {
      -webkit-text-fill-color: var(--text) !important;
      color: var(--text) !important;
      caret-color: var(--text) !important;
      -webkit-box-shadow: 0 0 0 1000px var(--surface-soft) inset !important;
      box-shadow: 0 0 0 1000px var(--surface-soft) inset !important;
    }

    html[data-theme="dark"] input:-webkit-autofill::first-line,
    html[data-theme="metal"] input:-webkit-autofill::first-line,
    html[data-theme="blue"] input:-webkit-autofill::first-line {
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .field label {
      display: block;
      margin-bottom: 7px;
      color: var(--text-soft);
      font-size: 10px;
      font-weight: 700;
    }

    .password-panel {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 17px;
      border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
      border-radius: 14px;
      background:
        radial-gradient(
          circle at 78% 20%,
          color-mix(in srgb, var(--accent) 10%, transparent) 0%,
          transparent 28%
        ),
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--accent) 7%, #191c21) 0%,
          #171a1f 56%,
          #20242a 100%
        );
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 24px rgba(0,0,0,.10);
      color: #f6f7f9;
    }

    html[data-theme="dark"] .password-panel {
      border-color: color-mix(in srgb, var(--accent) 14%, #2b3037);
      background:
        radial-gradient(
          circle at 80% 20%,
          color-mix(in srgb, var(--accent) 7%, transparent) 0%,
          transparent 26%
        ),
        linear-gradient(
          135deg,
          #141619 0%,
          #111316 54%,
          #1a1d21 100%
        );
    }

    html[data-theme="metal"] .password-panel {
      border-color: color-mix(in srgb, var(--accent) 18%, #46515d);
      background:
        radial-gradient(
          circle at 78% 22%,
          color-mix(in srgb, var(--accent) 9%, transparent) 0%,
          transparent 28%
        ),
        linear-gradient(
          135deg,
          #2b3139 0%,
          #232931 48%,
          #2f3640 100%
        );
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 28px rgba(0,0,0,.12);
    }

    html[data-theme="blue"] .password-panel {
      border-color: color-mix(in srgb, var(--accent) 30%, #38597e);
      background:
        radial-gradient(
          circle at 80% 20%,
          rgba(60,126,203,.14) 0%,
          transparent 30%
        ),
        linear-gradient(
          135deg,
          #142133 0%,
          #16263b 50%,
          #223753 100%
        );
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 12px 30px rgba(0,0,0,.14);
    }

    .password {
      min-width: 0;
      overflow-x: auto;
      color: #f8fafc;
      text-shadow: 0 1px 0 rgba(0,0,0,.18);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: clamp(19px, 3vw, 24px);
      font-weight: 750;
      letter-spacing: .04em;
      white-space: nowrap;
      scrollbar-width: none;
    }


    .password-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .password-action-btn {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid transparent;
      font-size: 10px;
      font-weight: 750;
      line-height: 1;
      transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .1s ease,
        box-shadow .15s ease;
    }

    .password-action-btn:active {
      transform: scale(.98);
    }

    .password-action-icon {
      width: 15px;
      height: 15px;
      display: block;
      flex: 0 0 auto;
    }

    .password-regenerate-btn {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.90);
      backdrop-filter: blur(2px);
    }

    .password-regenerate-btn:hover {
      background: rgba(255,255,255,.13);
      border-color: rgba(255,255,255,.18);
      color: #fff;
    }

    .password-copy-btn {
      background: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 72%, #ffffff 10%);
      color: var(--accent-contrast);
      box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .password-copy-btn:hover {
      filter: brightness(1.08);
    }

    .password-copy-btn.is-copied {
      background: var(--success);
      border-color: var(--success);
      color: #fff;
      box-shadow: 0 7px 18px color-mix(in srgb, var(--success) 18%, transparent);
    }

    html[data-theme="dark"][data-accent="black"] .password-copy-btn {
      background: #343430;
      border-color: #4a4a45;
      color: #f4f3ef;
      box-shadow: none;
    }

    html[data-theme="dark"][data-accent="black"] .password-copy-btn:hover {
      background: #40403b;
    }

    .btn {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      border-radius: 9px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      transition: background .15s ease, opacity .15s ease, transform .1s ease;
    }

    .btn:active { transform: scale(.98); }

    .btn-white { background: white; color: #181818; }
    .btn-white:hover { background: #efefed; }

    .btn-ghost {
      background: rgba(255,255,255,.1);
      color: white;
    }

    .btn-ghost:hover { background: rgba(255,255,255,.16); }

    .btn-dark {
      background: var(--text);
      color: var(--bg);
    }

    .btn-dark:hover { opacity: .88; }

    .btn-accent {
      background: var(--accent);
      color: var(--accent-contrast);
    }

    .btn-accent:hover { opacity: .9; }

    .btn-soft {
      background: var(--surface-soft);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-danger {
      background: var(--danger-bg);
      color: var(--danger);
      border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--border));
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: .35;
    }

    .btn.is-copied,
    .password-action-btn.is-copied {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px;
      text-align: center;
    }

    .btn.is-copied::before,
    .password-action-btn.is-copied::before {
      content: "✓";
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 18px;
      border-radius: 50%;
      background: var(--success);
      color: #ffffff;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 42%, transparent);
    }

    .password-copy-btn.is-copied::before {
      background: #ffffff;
      color: var(--success);
      box-shadow: none;
    }

    .password-copy-btn.is-copied .password-action-icon {
      display: none;
    }

    .settings {
      margin-top: 24px;
    }

    .length-control {
      padding: 17px 18px 16px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface-soft);
    }

    .length-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 14px;
      font-size: 11px;
    }

    .length-row strong {
      font-weight: 750;
    }

    .length-value {
      min-width: 92px;
      padding: 6px 9px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 9px;
      text-align: center;
    }

    .range-wrap {
      display: grid;
      gap: 8px;
    }

    input[type="range"].password-range {
      --range-progress: 20%;
      width: 100%;
      height: 5px;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      border-radius: 999px;
      outline: none;
      background:
        linear-gradient(
          to right,
          var(--accent) 0%,
          var(--accent) var(--range-progress),
          var(--border-strong) var(--range-progress),
          var(--border-strong) 100%
        );
    }

    input[type="range"].password-range::-webkit-slider-thumb {
      width: 18px;
      height: 18px;
      appearance: none;
      -webkit-appearance: none;
      border: 3px solid var(--surface);
      border-radius: 50%;
      background: var(--accent);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--border)),
        0 4px 10px rgba(0,0,0,.18);
      cursor: pointer;
    }

    input[type="range"].password-range::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border: 3px solid var(--surface);
      border-radius: 50%;
      background: var(--accent);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--border)),
        0 4px 10px rgba(0,0,0,.18);
      cursor: pointer;
    }

    .range-scale {
      display: flex;
      justify-content: space-between;
      color: var(--text-light);
      font-size: 8px;
    }

    .options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    .option {
      position: relative;
      min-height: 68px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 58px 13px 13px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: var(--surface-soft);
      cursor: pointer;
      transition:
        border-color .15s ease,
        background .15s ease,
        transform .1s ease;
    }

    .option:hover {
      border-color: var(--border-strong);
      background: var(--surface);
    }

    .option:active {
      transform: scale(.995);
    }

    .option:has(input:checked) {
      border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
    }

    .option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .option-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--surface);
      color: var(--text-soft);
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 9px;
      font-weight: 800;
    }

    .option:has(input:checked) .option-icon {
      border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
      color: var(--accent);
    }

    .option-copy {
      min-width: 0;
    }

    .option-title {
      display: block;
      margin-bottom: 4px;
      font-size: 10px;
      font-weight: 750;
    }

    .option-description {
      display: block;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.45;
    }

    .option::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 14px;
      width: 30px;
      height: 17px;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      background: var(--surface);
      transform: translateY(-50%);
      transition:
        border-color .15s ease,
        background .15s ease;
    }

    .option::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 50%;
      right: 28px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--text-light);
      transform: translateY(-50%);
      transition:
        right .15s ease,
        background .15s ease;
    }

    .option:has(input:checked)::after {
      border-color: var(--accent);
      background: var(--accent);
    }

    .option:has(input:checked)::before {
      right: 17px;
      background: var(--accent-contrast);
    }

    .options {
      overflow: visible;
    }

    .symbol-option {
      overflow: visible;
      cursor: default;
      z-index: 20;
    }

    .symbol-option:hover {
      border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
    }

    .symbol-option-trigger {
      min-width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 4px 0 0;
      border: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }

    .symbol-option-trigger:disabled {
      cursor: not-allowed;
      opacity: .6;
    }

    .symbol-option-trigger .option-copy {
      min-width: 0;
    }

    .symbol-option-chevron {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      margin-right: 6px;
      border-right: 1.5px solid var(--text-light);
      border-bottom: 1.5px solid var(--text-light);
      transform: rotate(45deg) translateY(-2px);
      transition:
        transform .15s ease,
        border-color .15s ease;
    }

    .symbol-option.open .symbol-option-chevron {
      transform: rotate(225deg) translate(-2px, -2px);
      border-color: var(--accent);
    }

    .symbol-toggle-hit {
      position: absolute;
      z-index: 4;
      top: 0;
      right: 0;
      width: 55px;
      height: 100%;
      cursor: pointer;
      border-radius: 0 13px 13px 0;
    }

    .symbol-dropdown-menu {
      position: absolute;
      z-index: 50;
      top: calc(100% + 8px);
      right: 0;
      width: min(330px, calc(100vw - 40px));
      padding: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
      border-radius: 12px;
      background: var(--surface-elevated);
      box-shadow:
        0 18px 40px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035);
    }

    .symbol-dropdown-menu.hidden {
      display: none;
    }

    .symbol-menu-head {
      margin-bottom: 10px;
    }

    .symbol-menu-head strong {
      display: block;
      color: var(--text);
      font-size: 9px;
      font-weight: 780;
    }

    .symbol-menu-head span {
      display: block;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.45;
    }

    .symbol-menu-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
    }

    .symbol-choice {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid var(--border-strong);
      border-radius: 9px;
      background: var(--surface);
      color: var(--text-soft);
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .1s ease;
    }

    .symbol-choice:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
      color: var(--text);
    }

    .symbol-choice.active {
      border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
      color: var(--accent);
    }

    .symbol-choice-check {
      width: 16px;
      height: 16px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--accent);
      color: var(--accent-contrast);
      font-family: Arial, sans-serif;
      font-size: 9px;
      line-height: 1;
      opacity: 0;
      transform: scale(.8);
      transition:
        opacity .15s ease,
        transform .15s ease;
    }

    .symbol-choice.active .symbol-choice-check {
      opacity: 1;
      transform: scale(1);
    }

    .symbol-choice:active:not(:disabled) {
      transform: scale(.98);
    }

    .symbol-choice:disabled {
      cursor: not-allowed;
    }

    @media (max-width: 620px) {
      .symbol-dropdown-menu {
        left: 0;
        right: auto;
        width: min(100%, 330px);
      }

      .symbol-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .link-row {
      display: flex;
      gap: 9px;
    }

    .link-input {
      min-width: 0;
      background: var(--surface-soft);
      color: var(--text-soft);
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
    }

    .link-row .btn { min-width: 120px; }

    .notice {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-top: 13px;
      padding: 12px 13px;
      border-radius: 10px;
      font-size: 10px;
      line-height: 1.55;
    }

    .notice.success {
      background: var(--success-bg);
      color: var(--success);
    }

    .notice.generator-notice {
      border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
      color: var(--accent);
    }

    html[data-theme="dark"] .notice.generator-notice,
    html[data-theme="metal"] .notice.generator-notice,
    html[data-theme="blue"] .notice.generator-notice {
      background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
    }

    html[data-theme="dark"][data-accent="black"] .notice.generator-notice {
      border-color: #353532;
      background: #1d1d1a;
      color: #bdbdb6;
    }

    .notice.warning {
      background: var(--warning-bg);
      color: var(--warning);
    }

    .notice.danger {
      background: var(--danger-bg);
      color: var(--danger);
    }

    .notice-icon {
      flex-shrink: 0;
      font-weight: 800;
    }


    /* PASSWORD VISIBILITY */
    .password-input-wrap {
      position: relative;
      width: 100%;
    }

    .password-input-wrap .input {
      padding-right: 46px;
    }

    .password-visibility-btn {
      position: absolute;
      top: 50%;
      right: 8px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--text-light);
      transform: translateY(-50%);
      transition:
        background .15s ease,
        color .15s ease;
    }

    .password-visibility-btn:hover {
      background: var(--surface-soft);
      color: var(--text);
    }

    .password-visibility-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    .password-visibility-btn svg {
      width: 17px;
      height: 17px;
      display: block;
      pointer-events: none;
    }

    /* AUTH */
    #auth-view {
      min-height: 100vh;
      display: grid;
      align-items: center;
      padding: 34px 22px 22px;
      background:
        radial-gradient(circle at 18% 18%, rgba(35,95,166,.10), transparent 34%),
        radial-gradient(circle at 82% 72%, rgba(35,95,166,.06), transparent 30%),
        var(--bg);
    }

    #auth-view .narrow {
      width: min(1180px, calc(100% - 48px));
      max-width: none;
      margin: 0 auto;
    }

    .auth-shell {
      min-height: 440px;
      display: grid;
      grid-template-columns: minmax(390px, .98fr) minmax(500px, 1.02fr);
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
      border-radius: 28px;
      background: var(--surface);
      box-shadow:
        0 28px 80px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.015);
    }

    .auth-side {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      padding: 44px 50px;
      border-right: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
      background:
        radial-gradient(circle at 12% 90%, rgba(44,126,240,.28), transparent 34%),
        radial-gradient(circle at 4% 97%, rgba(35,95,166,.34), transparent 28%),
        linear-gradient(
          145deg,
          color-mix(in srgb, var(--accent) 26%, #0f1722),
          #0f1722 56%,
          #101820
        );
    }

    .auth-side::after {
      content: "";
      position: absolute;
      left: -75px;
      bottom: -135px;
      width: 440px;
      height: 440px;
      border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
      border-radius: 50%;
      box-shadow:
        0 0 0 84px color-mix(in srgb, var(--accent) 8%, transparent),
        0 0 0 168px color-mix(in srgb, var(--accent) 4%, transparent);
      pointer-events: none;
      opacity: .9;
    }

    .auth-brand,
    .auth-side-copy {
      position: relative;
      z-index: 1;
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .auth-brand .brand-mark {
      width: 60px;
      height: 60px;
      flex: 0 0 60px;
      border-radius: 16px;
      box-shadow: 0 14px 34px rgba(35,95,166,.26);
    }

    .auth-brand .brand-name {
      margin: 0;
      color: #f4f7fb;
      font-size: 17px;
      font-weight: 850;
      letter-spacing: .02em;
    }

    .auth-side-copy {
      max-width: 470px;
      margin: auto 0;
    }

    .auth-side-title {
      margin: 0;
      color: #f4f7fb;
      font-size: clamp(34px, 3vw, 46px);
      font-weight: 860;
      line-height: 1.04;
      letter-spacing: -.035em;
    }

    .auth-side-text {
      max-width: 430px;
      margin: 18px 0 0;
      color: rgba(224,233,245,.72);
      font-size: 12px;
      line-height: 1.55;
    }

    .auth-panel {
      display: grid;
      place-items: center;
      padding: 52px 64px;
      background:
        linear-gradient(
          145deg,
          color-mix(in srgb, var(--surface) 96%, #0b1119),
          color-mix(in srgb, var(--surface-soft) 72%, #0b1119)
        );
    }

    #login-panel {
      width: min(100%, 520px);
    }

    .auth-title {
      margin-bottom: 30px;
    }

    .auth-title h1 {
      margin: 0;
      color: var(--text);
      font-size: clamp(34px, 3vw, 44px);
      font-weight: 850;
      line-height: 1.05;
      letter-spacing: -.035em;
    }

    .auth-title h1::after {
      content: "";
      display: block;
      width: 58px;
      height: 4px;
      margin-top: 16px;
      border-radius: 999px;
      background: var(--accent);
    }

    .auth-title p {
      max-width: 500px;
      margin: 18px 0 0;
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.55;
    }

    .auth-card {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #login-form .field + .field {
      margin-top: 24px !important;
    }

    #login-form label {
      display: block;
      margin-bottom: 9px;
      color: var(--text);
      font-size: 12px;
      font-weight: 760;
    }

    #login-form .input {
      min-height: 56px;
      padding: 0 18px;
      border-radius: 14px;
      border-color: color-mix(in srgb, var(--border-strong) 88%, var(--accent));
      background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
      font-size: 12px;
    }

    #login-form .input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    #login-password {
      padding-right: 54px !important;
    }

    #login-form .password-input-wrap {
      position: relative;
    }

    #login-form .password-toggle {
      right: 12px;
      width: 40px;
      height: 40px;
    }

    #login-error {
      min-height: 0;
      margin-top: 14px;
    }

    #login-error:empty {
      display: none;
    }

    #login-form button[type="submit"] {
      width: 100%;
      min-height: 54px;
      margin-top: 18px;
      border-radius: 14px;
      font-size: 11px;
      font-weight: 820;
      box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    #auth-view footer {
      width: min(1180px, calc(100% - 48px));
      margin: 22px auto 0;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      color: var(--text-light);
      font-size: 8px;
    }

    #auth-view .footer-content {
      padding: 0;
    }

    @media (max-width: 980px) {
      #auth-view {
        padding: 24px 16px;
      }

      #auth-view .narrow {
        width: min(760px, 100%);
      }

      .auth-shell {
        grid-template-columns: 1fr;
      }

      .auth-side {
        min-height: 260px;
        padding: 34px 36px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }

      .auth-brand .brand-mark {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
      }

      .auth-brand .brand-name {
        font-size: 17px;
      }

      .auth-side-copy {
        margin: 48px 0 0;
      }

      .auth-side-title {
        font-size: 34px;
      }

      .auth-side-text {
        margin-top: 14px;
        font-size: 11px;
      }

      .auth-panel {
        padding: 42px 36px 46px;
      }

      #auth-view footer {
        width: min(760px, 100%);
      }
    }

    @media (max-width: 560px) {
      .auth-shell {
        border-radius: 16px;
      }

      .auth-side {
        min-height: 220px;
        padding: 26px;
      }

      .auth-side-copy {
        margin-top: 34px;
      }

      .auth-side-title {
        font-size: 31px;
      }

      .auth-panel {
        padding: 34px 24px 38px;
      }

      .auth-title {
        margin-bottom: 26px;
      }

      .auth-title h1 {
        font-size: 34px;
      }

      .auth-title p {
        margin-top: 16px;
        font-size: 11px;
      }

      #login-form .input {
        min-height: 54px;
      }
    }

    /* GENERATOR MODES / BATCH */
    .generator-mode-switch {
      width: fit-content;
      min-width: 330px;
      display: grid;
      grid-template-columns: repeat(2, minmax(155px, 1fr));
      gap: 4px;
      margin: 0 0 18px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-soft);
      justify-content: start;
    }

    .generator-mode-btn {
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: var(--text-soft);
      font-size: 10px;
      font-weight: 750;
      text-align: center;
      cursor: pointer;
      transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    }

    .generator-mode-btn:hover {
      color: var(--text);
    }

    .generator-mode-btn.active {
      border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface));
      color: var(--accent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    }

    .batch-section-head,
    .batch-generate-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 34px 170px;
      gap: 12px;
      align-items: center;
    }

    .batch-section-head > div,
    .batch-generate-row > div {
      min-width: 0;
    }

    .batch-side-step {
      width: 34px;
      align-self: center;
      justify-self: center;
      text-align: center;
      line-height: 1;
    }

    .batch-section-head .btn,
    .batch-generate-row .btn {
      width: 170px;
      min-width: 170px;
      min-height: 42px;
      margin: 0;
      align-self: center;
      justify-self: end;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .batch-title-row {
      margin-bottom: 0;
      align-items: center;
    }

    .batch-account-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .batch-account-row {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 46px;
      gap: 10px;
      align-items: center;
    }

    .batch-row-number {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--text-light);
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 9px;
      font-weight: 800;
    }

    .batch-account-row .input {
      min-width: 0;
      min-height: 46px;
    }

    .batch-remove-btn {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--text-light);
      font-size: 11px;
      cursor: pointer;
    }

    .batch-remove-btn:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
      background: color-mix(in srgb, var(--danger-bg) 72%, var(--surface));
      color: var(--danger);
    }

    .batch-remove-btn:disabled {
      cursor: not-allowed;
      opacity: .35;
    }

    .batch-counter {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-top: 12px;
      color: var(--text-light);
      font-size: 8px;
      text-align: center;
    }

    .batch-settings-helper {
      margin-bottom: 16px;
    }

    .batch-generate-row .btn {
      min-width: 150px;
    }

    .batch-results {
      margin-top: 16px;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      background: var(--surface-soft);
    }

    .batch-results-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--accent) 3%, var(--surface));
    }

    .batch-results-head > div {
      min-width: 0;
      text-align: left;
    }

    .batch-results-head > .btn {
      flex: 0 0 auto;
      justify-self: auto;
    }

    .batch-results-head strong {
      display: block;
      font-size: 11px;
      text-align: left;
    }

    .batch-results-head span {
      display: block;
      margin-top: 3px;
      color: var(--text-light);
      font-size: 8px;
      text-align: left;
    }

    .batch-table-wrap {
      overflow-x: auto;
    }

    .batch-table {
      min-width: 720px;
      table-layout: fixed;
      background: transparent;
    }

    .batch-table th,
    .batch-table td {
      text-align: center;
      vertical-align: middle;
    }

    .batch-table th:nth-child(1),
    .batch-table td:nth-child(1) {
      width: 28%;
    }

    .batch-table th:nth-child(2),
    .batch-table td:nth-child(2) {
      width: 34%;
    }

    .batch-table th:nth-child(3),
    .batch-table td:nth-child(3) {
      width: 38%;
    }

    .batch-table th {
      background: color-mix(in srgb, var(--accent) 3%, var(--surface-soft));
    }

    .batch-table td {
      background: transparent;
    }

    .batch-result-account {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      font-weight: 750;
      overflow-wrap: anywhere;
      text-align: center;
    }

    .batch-result-password {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 11px;
      border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
      border-radius: 9px;
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--accent) 6%, #191c21),
          #171a1f
        );
      color: #f7f9fb;
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .025em;
      white-space: nowrap;
    }

    html[data-theme="metal"] .batch-result-password {
      background: linear-gradient(135deg, #2a3038, #222831);
    }

    html[data-theme="blue"] .batch-result-password {
      background: linear-gradient(135deg, #142237, #1b304a);
    }

    .batch-result-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .batch-result-actions .btn {
      min-height: 32px;
      padding: 0 10px;
      font-size: 8px;
    }

    .batch-result-actions .btn.is-copied {
      min-width: 112px;
      padding-inline: 12px;
      justify-content: center;
    }

    .batch-notice {
      margin-top: 18px;
    }

    @media (max-width: 700px) {
      .generator-mode-switch {
        width: 100%;
        grid-template-columns: 1fr 1fr;
      }

      .batch-section-head,
      .batch-generate-row {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .batch-side-step {
        display: none;
      }

      .batch-section-head .btn,
      .batch-generate-row .btn,
      .batch-results-head .btn {
        width: 100%;
        min-width: 0;
      }

      .batch-results-head > div,
      .batch-results-head strong,
      .batch-results-head span {
        text-align: center;
      }
    }


    /* PARTNER LINKS */
    .link-validity-row {
      display: flex;
      justify-content: flex-end;
      margin: 0 0 10px;
    }

    .compact-field {
      width: min(260px, 100%);
    }

    .compact-field label {
      margin-bottom: 6px;
    }

    .link-row-compact {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto 126px 124px;
      gap: 10px;
      align-items: center;
    }

    .link-row-compact .link-input {
      min-width: 0;
      font-size: 8px;
      padding-left: 12px;
      padding-right: 12px;
    }

    .link-validity-inline {
      width: 126px;
    }

    .link-validity-inline .select,
    .link-validity-inline .custom-select {
      width: 100%;
    }

    .link-once-control {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 11px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--text-soft);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }

    .link-once-control input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .link-once-switch {
      position: relative;
      width: 30px;
      height: 18px;
      flex: 0 0 30px;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface) 78%, #000);
      transition:
        background .15s ease,
        border-color .15s ease;
    }

    .link-once-switch::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 3px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--text-light);
      transform: translateY(-50%);
      transition:
        left .15s ease,
        background .15s ease;
    }

    .link-once-control input:checked + .link-once-switch,
    .batch-single-use-option input:checked + .link-once-switch {
      border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
      background: var(--accent);
    }

    .link-once-control input:checked + .link-once-switch::after,
    .batch-single-use-option input:checked + .link-once-switch::after {
      left: 14px;
      background: var(--accent-contrast);
    }

    .link-once-label {
      font-size: 8px;
      font-weight: 700;
      color: var(--text);
    }

    .batch-link-panel {
      margin-top: 16px;
      padding: 15px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
    }

    .batch-link-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .batch-link-panel-head strong {
      display: block;
      color: var(--text);
      font-size: 10px;
      font-weight: 760;
    }

    .batch-link-panel-head span {
      display: block;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.45;
    }

    .batch-link-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      margin: 0;
    }

    .batch-link-option {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--surface);
    }

    .batch-link-option-copy {
      min-width: 0;
    }

    .batch-link-option-copy strong {
      display: block;
      color: var(--text);
      font-size: 9px;
      font-weight: 750;
    }

    .batch-link-option-copy span {
      display: block;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.45;
    }

    .batch-single-use-option {
      position: relative;
      cursor: pointer;
      user-select: none;
    }

    .batch-single-use-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .batch-single-use-option {
      transition: border-color .15s ease;
    }

    .batch-single-use-option:hover {
      border-color: var(--border);
    }

    .batch-single-use-option:has(input:checked) {
      border-color: var(--border);
      background: var(--surface);
      box-shadow: none;
    }

    .batch-validity-field {
      width: auto;
    }

    .batch-validity-field .select,
    .batch-validity-field .custom-select {
      width: 150px;
      flex: 0 0 150px;
    }

    .partner-links-dashboard {
      display: grid;
      gap: 16px;
    }

    .links-toolbar {
      margin-top: 0;
    }

    .links-card {
      margin-top: 0;
    }

    .links-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .links-bulk-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 50px;
      padding: 10px 14px;
      border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
      border-radius: 14px;
      background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
      box-shadow: var(--shadow);
    }

    .links-bulk-summary {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .links-bulk-summary strong {
      color: var(--text);
      font-size: 9px;
      white-space: nowrap;
    }

    .links-bulk-icon {
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      flex: 0 0 25px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--accent-contrast);
      font-size: 9px;
      font-weight: 900;
    }

    .links-bulk-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      flex-wrap: wrap;
    }

    .links-bulk-actions .btn {
      min-height: 34px;
      padding-inline: 11px;
      font-size: 8px;
    }

    .links-select-col {
      width: 48px;
      min-width: 48px;
      padding-left: 14px !important;
      padding-right: 8px !important;
      text-align: center !important;
    }

    .table-checkbox {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
    }

    .table-checkbox input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .table-checkbox span {
      width: 16px;
      height: 16px;
      display: grid;
      place-items: center;
      border: 1px solid var(--border-strong);
      border-radius: 5px;
      background: var(--surface-soft);
      transition:
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease;
    }

    .table-checkbox:hover span {
      border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong));
    }

    .table-checkbox input:checked + span,
    .table-checkbox input:indeterminate + span {
      border-color: var(--accent);
      background: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .table-checkbox input:checked + span::after {
      content: "✓";
      color: var(--accent-contrast);
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
    }

    .table-checkbox input:indeterminate + span::after {
      content: "−";
      color: var(--accent-contrast);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .links-table tr.is-selected {
      background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
    }

    .link-type-cell {
      display: grid;
      justify-items: center;
      gap: 4px;
    }

    .link-type-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 60px;
      min-height: 25px;
      padding: 0 9px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--text-soft);
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: .035em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .link-type-pill.single-use {
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-soft));
      color: var(--accent);
    }

    .link-type-pill.batch {
      border-color: color-mix(in srgb, #7c5ac7 28%, var(--border));
      background: color-mix(in srgb, #7c5ac7 10%, var(--surface-soft));
      color: #b39aee;
    }

    .link-type-note {
      color: var(--text-light);
      font-size: 7px;
    }

    @media (max-width: 980px) {
      .links-toolbar-actions {
        width: 100%;
      }

      .links-toolbar-actions .btn {
        flex: 1;
      }

      .links-bulk-bar {
        align-items: stretch;
        flex-direction: column;
      }

      .links-bulk-actions {
        justify-content: stretch;
      }

      .links-bulk-actions .btn {
        flex: 1;
      }
    }

    @media (max-width: 620px) {
      .links-toolbar-actions,
      .links-bulk-actions {
        flex-direction: column;
      }

      .links-toolbar-actions .btn,
      .links-bulk-actions .btn {
        width: 100%;
      }
    }

    .links-table th,
    .links-table td {
      text-align: center;
      vertical-align: middle;
    }

    .links-table th:first-child,
    .links-table td:first-child {
      text-align: left;
    }

    .partner-link-cell {
      display: grid;
      gap: 4px;
    }

    .partner-link-primary {
      color: var(--text);
      font-size: 10px;
      font-weight: 760;
    }

    .partner-link-secondary {
      color: var(--text-light);
      font-size: 8px;
    }

    .status-pill.expiring {
      background: var(--warning-bg);
      color: var(--warning);
      border: 1px solid color-mix(in srgb, var(--warning) 22%, var(--border));
    }

    .status-pill.expired {
      background: color-mix(in srgb, var(--surface-soft) 74%, #000);
      color: var(--text-light);
      border: 1px solid var(--border);
    }

    .status-pill.revoked {
      background: var(--danger-bg);
      color: var(--danger);
      border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border));
    }

    .link-date-cell {
      display: grid;
      gap: 2px;
      justify-items: center;
    }

    .link-date-main {
      color: var(--text);
      font-size: 9px;
      font-weight: 700;
    }

    .link-date-sub {
      color: var(--text-light);
      font-size: 8px;
    }

    .links-action-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .links-table th:last-child,
    .links-table td:last-child {
      min-width: 255px;
    }

    .links-action-menu .btn {
      min-height: 32px;
      padding: 0 10px;
      font-size: 8px;
    }

    .links-action-menu .log-delete-btn {
      border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
      color: var(--danger);
    }

    .links-action-menu .log-delete-btn:hover {
      border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
      background: color-mix(in srgb, var(--danger-bg) 72%, var(--surface));
      color: var(--danger);
    }

    .public-access-unavailable {
      display: grid;
      justify-items: center;
      gap: 12px;
      padding: 42px 28px;
      text-align: center;
    }

    .public-access-unavailable-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
      border-radius: 50%;
      background: color-mix(in srgb, var(--danger-bg) 76%, var(--surface));
      color: var(--danger);
      font-size: 21px;
      font-weight: 900;
    }

    .public-access-unavailable h2 {
      margin: 4px 0 0;
      font-size: 17px;
    }

    .public-access-unavailable p {
      max-width: 460px;
      margin: 0;
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.65;
    }

    @media (max-width: 980px) {
      .link-row-compact {
        grid-template-columns: minmax(220px, 1fr) auto 118px;
      }

      .link-row-compact #copy-url-btn {
        grid-column: 2 / 4;
      }
    }

    @media (max-width: 760px) {
      .link-validity-row {
        justify-content: stretch;
      }

      .batch-link-controls {
        grid-template-columns: 1fr;
      }

      .compact-field,
      .batch-validity-field {
        width: 100%;
      }

      .batch-validity-field .select,
      .batch-validity-field .custom-select {
        width: 150px;
        flex-basis: 150px;
      }

      .link-row-compact {
        grid-template-columns: 1fr;
      }

      .link-once-control,
      .link-validity-inline,
      .link-row-compact #copy-url-btn {
        width: 100%;
        grid-column: auto;
      }
    }


    /* PARTNER LINKS — POLISHED TABLE */
    .links-card .users-table-wrap {
      overflow-x: auto;
      border-top: 1px solid var(--border);
    }

    .links-table {
      width: 100%;
      min-width: 1180px;
      table-layout: fixed;
      border-collapse: collapse;
    }

    .links-table thead {
      background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface));
    }

    .links-table th {
      height: 52px;
      padding: 0 12px;
      color: var(--text-light);
      font-size: 7.5px;
      font-weight: 820;
      letter-spacing: .075em;
      line-height: 1.25;
      text-align: center !important;
      text-transform: uppercase;
      vertical-align: middle;
      white-space: nowrap;
    }

    .links-table td {
      height: 70px;
      padding: 10px 12px;
      text-align: center !important;
      vertical-align: middle;
    }

    .links-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .links-table tbody tr:hover {
      background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    }

    .links-table th:nth-child(1),
    .links-table td:nth-child(1) {
      width: 54px;
    }

    .links-table th:nth-child(2),
    .links-table td:nth-child(2) {
      width: 125px;
    }

    .links-table th:nth-child(3),
    .links-table td:nth-child(3) {
      width: 105px;
    }

    .links-table th:nth-child(4),
    .links-table td:nth-child(4) {
      width: 118px;
    }

    .links-table th:nth-child(5),
    .links-table td:nth-child(5) {
      width: 130px;
    }

    .links-table th:nth-child(6),
    .links-table td:nth-child(6) {
      width: 122px;
    }

    .links-table th:nth-child(7),
    .links-table td:nth-child(7) {
      width: 132px;
    }

    .links-table th:nth-child(8),
    .links-table td:nth-child(8) {
      width: 130px;
    }

    .links-table th:nth-child(9),
    .links-table td:nth-child(9) {
      width: 286px;
    }

    .links-select-col {
      min-width: 54px;
      padding-left: 12px !important;
      padding-right: 12px !important;
      text-align: center !important;
    }

    .links-table .table-checkbox {
      margin: 0 auto;
    }

    .partner-link-cell,
    .link-type-cell,
    .link-date-cell {
      width: 100%;
      min-height: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-align: center;
    }

    .partner-link-primary {
      max-width: 100%;
      color: var(--text);
      font-size: 9.5px;
      font-weight: 780;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .created-cell {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      color: var(--text-soft);
      font-size: 8.5px;
      font-weight: 620;
      line-height: 1.35;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .link-type-pill,
    .status-pill {
      margin: 0 auto;
    }

    .link-type-pill {
      min-width: 80px;
      min-height: 28px;
      padding-inline: 10px;
    }

    .status-pill {
      min-width: 88px;
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 7.5px;
      font-weight: 850;
      line-height: 1.15;
      letter-spacing: .035em;
      text-align: center;
      text-transform: uppercase;
      white-space: normal;
    }

    .link-date-main {
      color: var(--text);
      font-size: 8.7px;
      font-weight: 740;
      line-height: 1.3;
      white-space: nowrap;
    }

    .link-date-sub {
      max-width: 110px;
      color: var(--text-light);
      font-size: 7.6px;
      line-height: 1.35;
      text-align: center;
      white-space: normal;
    }

    .links-action-menu {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: normal;
    }

    .links-action-menu .btn {
      width: 100%;
      min-width: 0;
      min-height: 36px;
      padding: 0 8px;
      justify-content: center;
      font-size: 7.3px;
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
    }

    .links-table td:last-child,
    .links-table th:last-child {
      min-width: 0;
    }

    @media (max-width: 1200px) {
      .links-table {
        min-width: 1120px;
      }

      .links-table th:nth-child(9),
      .links-table td:nth-child(9) {
        width: 260px;
      }
    }



    /* PARTNER LINKS — COMPACT / NO HORIZONTAL SCROLL */
    .links-card .users-table-wrap {
      width: 100%;
      overflow-x: hidden;
      overflow-y: visible;
    }

    .links-table {
      width: 100%;
      min-width: 0 !important;
      table-layout: fixed;
    }

    .links-table th,
    .links-table td {
      padding: 12px 8px;
      text-align: center !important;
      vertical-align: middle;
      overflow: hidden;
    }

    .links-table th {
      font-size: 7px;
      letter-spacing: .055em;
      white-space: normal;
      line-height: 1.25;
    }

    .links-table th:nth-child(1),
    .links-table td:nth-child(1) {
      width: 4%;
    }

    .links-table th:nth-child(2),
    .links-table td:nth-child(2) {
      width: 12%;
    }

    .links-table th:nth-child(3),
    .links-table td:nth-child(3) {
      width: 10%;
    }

    .links-table th:nth-child(4),
    .links-table td:nth-child(4) {
      width: 12%;
    }

    .links-table th:nth-child(5),
    .links-table td:nth-child(5) {
      width: 12%;
    }

    .links-table th:nth-child(6),
    .links-table td:nth-child(6) {
      width: 11%;
    }

    .links-table th:nth-child(7),
    .links-table td:nth-child(7) {
      width: 12%;
    }

    .links-table th:nth-child(8),
    .links-table td:nth-child(8) {
      width: 12%;
    }

    .links-table th:nth-child(9),
    .links-table td:nth-child(9) {
      width: 15%;
      min-width: 0 !important;
    }

    .partner-link-cell,
    .link-type-cell,
    .link-date-cell {
      width: 100%;
      min-width: 0;
      justify-items: center;
      align-items: center;
      text-align: center;
    }

    .partner-link-primary,
    .created-cell,
    .link-date-main,
    .link-date-sub,
    .link-type-note {
      max-width: 100%;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .partner-link-primary {
      font-size: 8.8px;
    }

    .created-cell {
      font-size: 7.7px;
    }

    .link-type-pill,
    .status-pill {
      min-width: 0;
      max-width: 100%;
      padding-inline: 7px;
      font-size: 6.8px;
      white-space: normal;
      line-height: 1.15;
    }

    .link-date-main {
      font-size: 7.8px;
    }

    .link-date-sub {
      font-size: 6.8px;
      line-height: 1.3;
    }

    .links-action-menu {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
      white-space: normal;
    }

    .links-action-menu .btn {
      width: 100%;
      min-width: 0;
      min-height: 30px;
      padding: 5px 6px;
      font-size: 6.7px;
      line-height: 1.15;
      white-space: normal;
    }

    @media (max-width: 1180px) {
      .links-table th,
      .links-table td {
        padding: 10px 6px;
      }

      .partner-link-primary {
        font-size: 8.2px;
      }

      .created-cell,
      .link-date-main {
        font-size: 7.2px;
      }

      .link-date-sub,
      .link-type-note {
        font-size: 6.4px;
      }

      .links-action-menu .btn {
        font-size: 6.2px;
      }
    }



    /* PARTNER LINK ACTIONS DROPDOWN */
    .links-action-menu {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      overflow: visible;
    }

    .link-actions-trigger {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      font-size: 7px;
      white-space: nowrap;
    }

    .link-actions-chevron {
      display: inline-block;
      color: var(--text-light);
      font-size: 10px;
      line-height: 1;
      transform: translateY(-1px);
    }

    .link-actions-dropdown {
      position: fixed !important;
      z-index: 2147483000;
      width: 138px;
      padding: 5px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: color-mix(in srgb, var(--surface) 96%, black);
      box-shadow: 0 14px 34px rgba(0,0,0,.42);
    }

    .link-actions-dropdown.hidden {
      display: none;
    }

    .link-actions-item {
      width: 100%;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--text);
      font-size: 7.5px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      transition:
        background .14s ease,
        color .14s ease;
    }

    .link-actions-item:hover:not(:disabled) {
      background: var(--surface-soft);
    }

    .link-actions-item.danger {
      color: var(--danger);
    }

    .link-actions-item.danger:hover:not(:disabled) {
      background: var(--danger-bg);
    }

    .link-actions-item.danger-subtle {
      color: var(--danger);
      opacity: .88;
    }

    .link-actions-item:disabled {
      opacity: .38;
      cursor: not-allowed;
    }

    .links-table td:last-child {
      overflow: visible;
    }



    /* ACTIVITY */
    .activity-dashboard {
      display: grid;
      gap: 16px;
    }

    .activity-toolbar {
      position: relative;
      z-index: 35;
      margin-top: 0;
    }

    .activity-toolbar-left {
      flex: 1;
      display: grid;
      grid-template-columns:
        minmax(230px, 1.5fr)
        minmax(150px, .82fr)
        minmax(165px, .92fr)
        minmax(145px, .78fr);
      align-items: center;
      gap: 8px;
    }

    .activity-toolbar-left .admin-search,
    .activity-toolbar-left .admin-filter,
    .activity-toolbar-left .custom-select {
      width: 100%;
      min-width: 0;
    }


    #route-activity .custom-select[data-select-id="activity-user-filter"] .custom-select-menu,
    #route-activity .custom-select[data-select-id="activity-period-filter"] .custom-select-menu {
      width: min(220px, calc(100vw - 36px));
    }

    #route-activity .custom-select[data-select-id="activity-action-filter"] .custom-select-menu {
      width: min(280px, calc(100vw - 36px));
      max-height: min(250px, 42vh);
    }

    .activity-card {
      margin-top: 0;
    }

    .activity-table {
      min-width: 900px;
      table-layout: auto;
    }

    .activity-table th:first-child,
    .activity-table td:first-child {
      width: 135px;
    }

    .activity-table th:nth-child(3),
    .activity-table td:nth-child(3) {
      width: 120px;
    }

    .activity-table th:last-child,
    .activity-table td:last-child {
      width: 150px;
    }

    .activity-table th,
    .activity-table td {
      text-align: center;
      vertical-align: middle;
    }

    .activity-table th:first-child,
    .activity-table td:first-child,
    .activity-table th:nth-child(2),
    .activity-table td:nth-child(2) {
      text-align: left;
    }

    .activity-date-cell {
      display: grid;
      gap: 2px;
    }

    .activity-date-main {
      color: var(--text);
      font-size: 9px;
      font-weight: 720;
    }

    .activity-date-time {
      color: var(--text-light);
      font-size: 8px;
    }

    .activity-actor {
      display: grid;
      gap: 3px;
    }

    .activity-actor strong {
      color: var(--text);
      font-size: 9px;
    }

    .activity-actor span {
      color: var(--text-light);
      font-size: 8px;
    }

    .activity-category-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 78px;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--text-soft);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .activity-category-pill.security {
      border-color: color-mix(in srgb, var(--warning) 26%, var(--border));
      background: color-mix(in srgb, var(--warning-bg) 72%, var(--surface-soft));
      color: var(--warning);
    }

    .activity-category-pill.links {
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface-soft));
      color: var(--accent);
    }

    .activity-category-pill.users {
      border-color: color-mix(in srgb, #7c5ac7 28%, var(--border));
      background: color-mix(in srgb, #7c5ac7 10%, var(--surface-soft));
      color: #b39aee;
    }

    .activity-category-pill.companies {
      border-color: color-mix(in srgb, #2a9d8f 30%, var(--border));
      background: color-mix(in srgb, #2a9d8f 10%, var(--surface-soft));
      color: #6fd2c4;
    }

    .activity-action-cell {
      display: grid;
      gap: 3px;
    }

    .activity-action-cell strong {
      color: var(--text);
      font-size: 9px;
    }

    .activity-action-cell span {
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.45;
    }

    .activity-target {
      color: var(--text-soft);
      font-size: 9px;
      font-weight: 650;
    }

    #clear-activity-modal .modal-confirm {
      max-width: 440px;
    }

    #clear-activity-modal .modal-head,
    #clear-activity-modal .confirm-card,
    #clear-activity-modal .confirm-copy {
      text-align: center;
    }

    #clear-activity-modal .confirm-card {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    #clear-activity-modal .modal-actions {
      justify-content: center;
      gap: 10px;
      margin-top: 0;
      padding: 0 22px 20px;
    }

    #clear-activity-modal .modal-actions .btn {
      min-width: 130px;
    }

    @media (max-width: 900px) {
      .activity-toolbar-left {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 620px) {
      .activity-toolbar-left {
        grid-template-columns: 1fr;
      }

      #clear-activity-btn {
        width: 100%;
      }
    }



    .activity-pagination {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      min-height: 54px;
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-soft) 28%, var(--surface));
    }

    .activity-page-size {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text-light);
      font-size: 7.5px;
      white-space: nowrap;
    }

    .activity-page-size .select {
      width: 66px;
      min-height: 32px;
      padding: 0 24px 0 9px;
      border-radius: 9px;
      font-size: 7.7px;
    }

    .activity-page-summary {
      min-width: 0;
      color: var(--text-soft);
      font-size: 8px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .activity-page-controls {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }

    .activity-page-controls .btn {
      min-width: 76px;
      min-height: 32px;
      padding: 0 9px;
      border-radius: 9px;
      font-size: 7.4px;
    }

    .activity-page-indicator {
      min-width: 72px;
      color: var(--text);
      font-size: 8px;
      font-weight: 760;
      text-align: center;
      white-space: nowrap;
    }

    @media (max-width: 820px) {
      .activity-pagination {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .activity-page-size,
      .activity-page-controls {
        justify-content: center;
      }
    }



    /* ACTIVITY PAGINATION — FIX OVERFLOW */
    .activity-card {
      overflow: visible;
    }

    .activity-pagination {
      position: relative;
      z-index: 20;
      overflow: visible;
    }

    .activity-page-size {
      min-width: 0;
    }

    /* Keep the page-size control native and compact.
       It does not need the application's custom dropdown wrapper. */
    #activity-page-size {
      width: 64px;
      min-width: 64px;
      height: 32px;
      min-height: 32px;
      padding: 0 8px;
      border: 1px solid var(--border-strong);
      border-radius: 9px;
      background: var(--surface-soft);
      color: var(--text);
      font-size: 8px;
      font-weight: 700;
      line-height: 32px;
      appearance: auto;
    }

    .activity-pagination .custom-select {
      width: 64px !important;
      min-width: 64px !important;
    }

    .activity-pagination .custom-select-trigger {
      min-height: 32px !important;
      padding: 0 8px !important;
      border-radius: 9px !important;
      font-size: 8px !important;
    }

    .activity-pagination .custom-select-menu {
      top: auto !important;
      bottom: calc(100% + 6px) !important;
      left: 0 !important;
      right: auto !important;
      width: 72px !important;
      min-width: 72px !important;
      max-height: 140px !important;
      z-index: 1000 !important;
    }

    #route-activity .notice,
    #route-activity .admin-local-note {
      position: relative;
      z-index: 1;
      margin-top: 14px;
    }


    /* LOGS PAGE SIZE — NATIVE SELECT, NO OVERLAP */
    #activity-page-size {
      display: inline-block !important;
      position: static !important;
      width: 66px !important;
      min-width: 66px !important;
      height: 32px !important;
      min-height: 32px !important;
      margin: 0 !important;
      padding: 0 8px !important;
      overflow: visible !important;
      border: 1px solid var(--border-strong) !important;
      border-radius: 9px !important;
      background: var(--surface-soft) !important;
      color: var(--text) !important;
      font-size: 8px !important;
      font-weight: 700 !important;
      line-height: normal !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      appearance: auto !important;
      -webkit-appearance: menulist !important;
    }

    .activity-page-size > .custom-select[data-select-id="activity-page-size"],
    .activity-pagination .custom-select[data-select-id="activity-page-size"] {
      display: none !important;
    }


    /* LOGS PAGE SIZE — SEGMENTED CONTROL */
    .activity-page-size {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--text-light);
      font-size: 7.5px;
      white-space: nowrap;
    }

    .activity-page-size-options {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
    }

    .activity-page-size-btn {
      min-width: 38px;
      height: 28px;
      padding: 0 8px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--text-light);
      font: inherit;
      font-size: 7.5px;
      font-weight: 760;
      cursor: pointer;
      transition: background .14s ease, color .14s ease, box-shadow .14s ease;
    }

    .activity-page-size-btn:hover {
      color: var(--text);
      background: color-mix(in srgb, var(--surface) 72%, var(--surface-soft));
    }

    .activity-page-size-btn.active {
      background: color-mix(in srgb, var(--accent) 82%, var(--surface));
      color: var(--accent-contrast);
      box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .activity-page-size-btn:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 68%, white);
      outline-offset: 2px;
    }

    /* COMPANY MANAGEMENT */
    .company-management-card { margin-top: 0; padding: 0; overflow: hidden; }
    .company-management-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 22px; border-bottom:1px solid var(--border); }
    .company-management-eyebrow { margin-bottom:5px; font-size:8px; }
    .company-management-head h2 { margin:0; color:var(--text); font-size:14px; }
    .company-management-head p:not(.eyebrow) { margin:6px 0 0; color:var(--text-light); font-size:8px; line-height:1.55; }
    .company-table-wrap { overflow-x:auto; }
    .company-table { width:100%; min-width:680px; border-collapse:collapse; }
    .company-table th, .company-table td { padding:14px 18px; border-bottom:1px solid var(--border); text-align:center; vertical-align:middle; }
    .company-table th { color:var(--text-light); font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .company-table th:first-child, .company-table td:first-child { text-align:left; }
    .company-name-cell { display:flex; align-items:center; gap:10px; }
    .company-avatar { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); color:var(--accent); font-size:9px; font-weight:850; text-transform:uppercase; }
    .company-name-copy { display:grid; gap:3px; }
    .company-name-copy strong { color:var(--text); font-size:9px; }
    .company-user-count { display:inline-flex; min-width:32px; justify-content:center; padding:6px 8px; border:1px solid var(--border); border-radius:999px; background:var(--surface-soft); color:var(--text-soft); font-size:8px; font-weight:800; }
    .company-actions { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
    .company-actions .btn { min-height:32px; padding:0 10px; font-size:8px; }
    .company-management-foot { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 18px; color:var(--text-light); font-size:8px; line-height:1.45; }
    .company-management-foot .table-count { flex:0 0 auto; }
    .company-modal { max-width:520px; }
    #delete-company-modal .modal-confirm { max-width:520px; }
    #delete-company-modal .modal-head, #delete-company-modal .confirm-copy { text-align:center; }
    #delete-company-modal .confirm-card { grid-template-columns:1fr; justify-items:center; text-align:center; }
    #delete-company-modal .modal-actions { justify-content:center; gap:10px; }
    @media (max-width:700px) { .company-management-head, .company-management-foot { align-items:stretch; flex-direction:column; } #open-company-modal-btn { width:100%; } }

    /* SECURITY POLICY */
    .security-policy-card {
      margin-top: 0;
      padding: 0;
      overflow: visible;
    }

    #route-settings .security-policy-card {
      width: 100%;
    }

    .security-policy-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 22px;
      padding: 20px 22px;
      border-bottom: 1px solid var(--border);
    }

    .security-policy-eyebrow {
      margin-bottom: 5px;
      font-size: 8px;
    }

    .security-policy-head h2 {
      margin: 0;
      color: var(--text);
      font-size: 12px;
    }

    .security-policy-head p:not(.eyebrow) {
      margin: 6px 0 0;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.55;
    }

    .security-policy-badge {
      flex: 0 0 auto;
      padding: 7px 9px;
      border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
      color: var(--accent);
      font-size: 8px;
      font-weight: 800;
    }

    .security-policy-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 18px 22px;
    }

    .security-setting {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 13px 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-soft);
    }

    .security-setting-copy {
      min-width: 0;
    }

    .security-setting-copy strong {
      display: block;
      color: var(--text);
      font-size: 9px;
      font-weight: 760;
    }

    .security-setting-copy span {
      display: block;
      max-width: 310px;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.45;
    }

    .security-setting .select,
    .security-setting .custom-select {
      width: 150px;
      flex: 0 0 150px;
    }

    .password-policy-section {
      margin: 0 22px 18px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
    }

    .password-policy-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .password-policy-head strong {
      display: block;
      color: var(--text);
      font-size: 10px;
    }

    .password-policy-head span {
      display: block;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.5;
    }

    .password-policy-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .password-policy-toggle {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--surface);
      cursor: pointer;
    }

    .password-policy-toggle > span {
      min-width: 0;
    }

    .password-policy-toggle strong {
      display: block;
      color: var(--text);
      font-size: 8.5px;
      font-weight: 780;
    }

    .password-policy-toggle small {
      display: block;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 7.5px;
      line-height: 1.4;
    }

    .password-policy-toggle input {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .password-symbol-policy {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 180px;
      align-items: center;
      gap: 16px;
      margin-top: 9px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--surface);
    }

    .password-symbol-policy-copy strong {
      display: block;
      color: var(--text);
      font-size: 8.5px;
    }

    .password-symbol-policy-copy span {
      display: block;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 7.5px;
      line-height: 1.4;
    }

    .password-symbol-input {
      width: 180px;
      min-width: 0;
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .12em;
      text-align: center;
    }

    .password-policy-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 10px;
      padding: 11px 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
      border-radius: 11px;
      background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
    }

    .password-policy-summary-label {
      flex: 0 1 220px;
    }

    .password-policy-summary-label strong {
      display: block;
      color: var(--text);
      font-size: 8.5px;
    }

    .password-policy-summary-label span {
      display: block;
      margin-top: 3px;
      color: var(--text-light);
      font-size: 7.5px;
      line-height: 1.4;
    }

    .password-policy-summary-chips {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    .password-policy-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 25px;
      padding: 0 9px;
      border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
      border-radius: 999px;
      background: var(--surface);
      color: var(--text-soft);
      font-size: 7.5px;
      font-weight: 780;
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      .password-policy-section {
        margin-left: 14px;
        margin-right: 14px;
      }

      .password-policy-grid {
        grid-template-columns: 1fr;
      }

      .password-symbol-policy,
      .password-policy-summary {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
      }

      .password-symbol-policy {
        display: grid;
      }

      .password-symbol-input {
        width: 100%;
      }

      .password-policy-summary-label {
        flex-basis: auto;
      }

      .password-policy-summary-chips {
        justify-content: flex-start;
      }
    }


    .security-policy-footer {
      min-height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 22px 18px;
      border-top: 1px solid var(--border);
    }

    .security-policy-footer .security-feedback {
      flex: 1;
      margin: 0;
    }

    .unlock-user-btn {
      border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
      color: var(--warning);
    }

    @media (max-width: 760px) {
      .security-policy-grid {
        grid-template-columns: 1fr;
      }

      .security-policy-head,
      .security-policy-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .security-policy-badge {
        align-self: flex-start;
      }

      .security-setting {
        align-items: stretch;
        flex-direction: column;
      }

      .security-setting .select,
      .security-setting .custom-select {
        width: 100%;
        flex-basis: auto;
      }

      #save-security-settings-btn {
        width: 100%;
      }
    }


    /* FORCED PASSWORD CHANGE */
    .forced-password-backdrop {
      z-index: 420;
      background: rgba(7, 10, 14, .78);
      backdrop-filter: blur(10px);
    }

    .forced-password-modal {
      width: min(560px, 100%);
      border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    }

    .forced-password-head {
      display: block;
    }

    .forced-password-eyebrow {
      margin: 0 0 7px;
      color: var(--accent);
      font-size: 8px;
    }

    .forced-password-head h2 {
      margin: 0;
      font-size: 17px;
    }

    .forced-password-head p:not(.eyebrow) {
      max-width: 460px;
      margin: 7px 0 0;
      color: var(--text-light);
      font-size: 9px;
      line-height: 1.55;
    }

    .forced-password-account {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 16px;
      padding: 12px 13px;
      border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--border));
      border-radius: 11px;
      background: color-mix(in srgb, var(--warning-bg) 55%, var(--surface-soft));
    }

    .forced-password-account-icon {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      flex: 0 0 30px;
      border-radius: 50%;
      background: var(--warning);
      color: #111;
      font-size: 12px;
      font-weight: 900;
    }

    .forced-password-account > div {
      display: grid;
      gap: 3px;
    }

    .forced-password-account span {
      color: var(--text-light);
      font-size: 8px;
    }

    .forced-password-account strong {
      color: var(--text);
      font-size: 10px;
    }

    .forced-password-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 4px;
      padding: 10px 11px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-soft);
    }

    .forced-password-note > span {
      color: var(--accent);
      font-weight: 900;
    }

    .forced-password-note p {
      margin: 0;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.5;
    }

    .forced-password-actions {
      display: flex;
      justify-content: flex-end;
      gap: 9px;
      margin-top: 16px;
    }

    .forced-password-actions .btn {
      min-width: 150px;
      min-height: 42px;
    }

    .force-password-switch {
      margin-top: 4px;
    }

    .reset-force-password-switch {
      margin-top: 2px;
      background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
    }

    @media (max-width: 620px) {
      .forced-password-actions {
        flex-direction: column-reverse;
      }

      .forced-password-actions .btn {
        width: 100%;
      }
    }


    /* USER DETAILS */
    .user-details-modal {
      max-width: 720px;
      overflow: hidden;
    }

    .user-details-body {
      max-height: min(72vh, 650px);
      overflow-y: auto;
      padding: 18px 20px;
    }

    .user-details-identity {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 14px 15px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--accent-soft) 22%, transparent),
          transparent 55%
        ),
        var(--surface-soft);
    }

    .user-details-avatar {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      flex: 0 0 44px;
      border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
      color: var(--accent);
      font-size: 11px;
      font-weight: 850;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    }

    .user-details-identity-copy {
      min-width: 0;
      flex: 1;
      display: grid;
      gap: 3px;
    }

    .user-details-identity-copy strong {
      color: var(--text);
      font-size: 11px;
      line-height: 1.2;
    }

    .user-details-identity-copy span {
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.4;
    }

    .user-details-badges {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .user-details-sections {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .user-details-section {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
    }

    .user-details-section-head {
      padding: 11px 13px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
    }

    .user-details-section-head strong {
      color: var(--text);
      font-size: 9px;
      font-weight: 800;
    }

    .user-detail-list {
      display: grid;
    }

    .user-detail-row {
      min-height: 44px;
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: 12px;
      padding: 9px 13px;
      border-bottom: 1px solid var(--border);
    }

    .user-detail-row:last-child {
      border-bottom: 0;
    }

    .user-detail-row > span {
      color: var(--text-light);
      font-size: 7.5px;
      font-weight: 720;
      line-height: 1.35;
      text-transform: uppercase;
      letter-spacing: .035em;
    }

    .user-detail-row > strong {
      min-width: 0;
      color: var(--text);
      font-size: 8.5px;
      font-weight: 720;
      line-height: 1.4;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .user-security-summary {
      margin-top: 10px;
      padding: 13px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-soft);
    }

    .user-security-summary-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .user-security-summary-head strong {
      display: block;
      color: var(--text);
      font-size: 9px;
    }

    .user-security-summary-head span {
      display: block;
      margin-top: 3px;
      color: var(--text-light);
      font-size: 7.5px;
      line-height: 1.4;
    }

    .user-security-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .security-summary-item {
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 11px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--surface);
    }

    .security-summary-item span {
      color: var(--text-light);
      font-size: 7.5px;
    }

    .security-summary-item strong {
      color: var(--text);
      font-size: 8.5px;
      text-align: right;
    }

    .user-details-actions {
      justify-content: flex-end;
      gap: 9px;
      margin-top: 0;
      padding: 14px 20px 18px;
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-soft) 48%, var(--surface));
    }

    .user-details-actions .btn {
      min-width: 100px;
    }

    @media (max-width: 680px) {
      .user-details-body {
        max-height: 70vh;
        padding: 14px;
      }

      .user-details-identity {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .user-details-badges {
        width: 100%;
        justify-content: flex-start;
        padding-left: 57px;
        margin-top: -8px;
      }

      .user-details-sections,
      .user-security-summary-grid {
        grid-template-columns: 1fr;
      }

      .user-detail-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }

      .user-details-actions {
        flex-direction: column-reverse;
        padding: 14px 14px 16px;
      }

      .user-details-actions .btn {
        width: 100%;
      }
    }

    /* ADMIN */
    .admin-layout {
      display: grid;
      grid-template-columns: 320px minmax(0,1fr);
      gap: 18px;
      align-items: start;
    }

    .panel-title {
      margin: 0 0 6px;
      font-size: 12px;
      letter-spacing: -.02em;
    }

    .panel-subtitle {
      margin: 0 0 20px;
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.55;
    }

    .create-form {
      display: grid;
      gap: 12px;
    }

    .create-form .btn { width: 100%; margin-top: 4px; }

    .users-card { overflow: hidden; padding: 0; }

    .users-head {
      padding: 22px 24px 18px;
      border-bottom: 1px solid var(--border);
    }

    .users-table-wrap {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scrollbar-gutter: stable;
    }

    .users-table-wrap::-webkit-scrollbar {
      height: 10px;
    }

    .users-table-wrap::-webkit-scrollbar-track {
      background: transparent;
    }

    .users-table-wrap::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: color-mix(in srgb, var(--text-light) 34%, transparent);
      background-clip: padding-box;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 680px;
    }

    th, td {
      padding: 13px 16px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      font-size: 9px;
      vertical-align: middle;
    }

    tbody tr {
      transition: background .14s ease;
    }

    tbody tr:hover {
      background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
    }

    .users-card-v2 th:not(:first-child),
    .users-card-v2 td:not(:first-child) {
      text-align: center;
    }

    .users-card-v2 .action-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .users-card-v2 th:last-child,
    .users-card-v2 td:last-child {
      min-width: 190px;
    }

    .users-card-v2 td:last-child .action-menu {
      flex-wrap: nowrap;
    }

    .action-menu-protected {
      align-items: center;
      justify-content: center;
      min-width: 128px;
      margin: 0 auto;
    }

    .primary-account {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--text-soft);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .03em;
      text-transform: none;
      white-space: nowrap;
      opacity: .95;
    }

    .primary-account::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 74%, var(--success));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
      flex: 0 0 auto;
    }

    th {
      color: var(--text-light);
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: .08em;
      background: var(--surface-soft);
    }

    tbody tr:last-child td { border-bottom: 0; }

    .identity strong {
      display: block;
      font-size: 10px;
    }

    .identity span {
      display: block;
      margin-top: 3px;
      color: var(--text-light);
      font-size: 9px;
    }

    .role-pill,
    .status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 999px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .role-pill {
      min-width: 82px;
      text-align: center;
    }

    .role-pill.super {
      background: color-mix(in srgb, #2f74c0 18%, var(--surface-soft));
      color: #4d95e6;
      border: 1px solid color-mix(in srgb, #2f74c0 32%, var(--border));
    }

    .role-pill.admin {
      background: color-mix(in srgb, #7c5ac7 18%, var(--surface-soft));
      color: #b39aee;
      border: 1px solid color-mix(in srgb, #7c5ac7 32%, var(--border));
    }

    .role-pill.user {
      background: color-mix(in srgb, #278a82 16%, var(--surface-soft));
      color: #6fc9c0;
      border: 1px solid color-mix(in srgb, #278a82 30%, var(--border));
    }

    .status-pill.active {
      background: var(--success-bg);
      color: var(--success);
    }

    .status-pill.disabled {
      background: var(--danger-bg);
      color: var(--danger);
    }

    .row-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .row-actions .btn {
      min-height: 30px;
      padding: 0 9px;
      font-size: 8px;
    }

    .empty-state {
      padding: 28px;
      text-align: center;
      color: var(--text-light);
      font-size: 10px;
    }



    /* CUSTOM DROPDOWNS */
    .select {
      display: none;
    }

    .custom-select {
      position: relative;
      width: 100%;
      min-width: 0;
      z-index: 20;
    }

    .custom-select.open {
      z-index: 220;
    }

    .custom-select-trigger {
      width: 100%;
      min-height: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 14px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text);
      font-size: 11px;
      font-weight: 650;
      text-align: left;
      transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
    }

    .custom-select-value {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .custom-select-trigger:hover {
      border-color: color-mix(in srgb, var(--accent) 38%, var(--border-strong));
    }

    .custom-select.open .custom-select-trigger {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .custom-select.disabled {
      opacity: .42;
      pointer-events: none;
      filter: saturate(.55);
    }

    .custom-select.disabled .custom-select-trigger {
      cursor: not-allowed;
      background: color-mix(in srgb, var(--surface-soft) 82%, #000);
      color: var(--text-light);
      border-color: var(--border);
      box-shadow: none;
    }

    .custom-select-chevron {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-right: 1.5px solid var(--text-soft);
      border-bottom: 1.5px solid var(--text-soft);
      transform: rotate(45deg) translateY(-2px);
      transition: transform .15s ease;
    }

    .custom-select.open .custom-select-chevron {
      transform: rotate(225deg) translate(-1px, -1px);
    }

    .custom-select-menu {
      position: absolute;
      top: calc(100% + 7px);
      left: 0;
      right: auto;
      z-index: 140;
      display: none;
      min-width: 100%;
      width: max-content;
      max-width: min(320px, calc(100vw - 32px));
      max-height: min(270px, 46vh);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior-y: contain;
      overscroll-behavior-x: none;
      touch-action: pan-y;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface-elevated) 96%, #000);
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
    }

    .custom-select.open .custom-select-menu {
      display: grid;
      gap: 4px;
      align-content: start;
    }

    .custom-select.open-up .custom-select-menu {
      top: auto;
      bottom: calc(100% + 7px);
    }

    .custom-select.align-right .custom-select-menu {
      left: auto;
      right: 0;
    }

    .custom-select-menu::-webkit-scrollbar {
      width: 10px;
    }

    .custom-select-menu::-webkit-scrollbar-track {
      background: transparent;
    }

    .custom-select-menu::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: color-mix(in srgb, var(--text-light) 38%, transparent);
      background-clip: padding-box;
    }

    .custom-select-option {
      width: 100%;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      border-radius: 8px;
      background: transparent;
      color: var(--text-soft);
      font-size: 9px;
      font-weight: 650;
      line-height: 1.35;
      text-align: left;
    }

    .custom-select-option:hover {
      background: var(--surface-soft);
      color: var(--text);
    }

    .custom-select-option.selected {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .custom-select-option:disabled {
      opacity: .42;
      cursor: not-allowed;
      pointer-events: none;
    }

    .custom-select-option.selected::after {
      content: "✓";
      font-size: 10px;
      font-weight: 900;
    }

    .admin-toolbar .custom-select {
      width: 145px;
      min-width: 135px;
    }

    .modal .custom-select,
    .setting-card .custom-select {
      width: 100%;
    }

    .modal .custom-select-menu {
      max-width: min(100%, calc(100vw - 56px));
    }

    @media (max-width: 860px) {
      .admin-toolbar .custom-select {
        width: 100%;
      }
    }

    /* ADMIN V2 */
    .admin-dashboard {
      display: grid;
      gap: 18px;
    }

    .admin-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .stat-card {
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .stat-label {
      display: block;
      color: var(--text-light);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .stat-value {
      display: block;
      margin-top: 9px;
      font-size: 28px;
      line-height: 1;
      font-weight: 780;
      letter-spacing: -.04em;
    }

    .stat-meta {
      margin-top: 7px;
      color: var(--text-soft);
      font-size: 9px;
    }

    .admin-toolbar {
      position: relative;
      z-index: 32;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .admin-toolbar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1;
      flex-wrap: wrap;
    }

    .admin-search {
      width: min(330px, 100%);
      min-width: 220px;
      min-height: 45px;
    }

    .admin-filter {
      width: 155px;
      min-width: 145px;
    }

    .admin-toolbar .btn {
      min-width: 150px;
      min-height: 45px;
      white-space: nowrap;
    }

    .users-card-v2 {
      padding: 0;
      overflow: hidden;
    }

    .users-card-v2,
    .activity-card,
    .links-card {
      box-shadow:
        0 12px 34px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.012);
    }

    .users-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      border-bottom: 1px solid var(--border);
    }

    .users-card-top h2 {
      margin: 0;
      font-size: 12px;
      letter-spacing: -.02em;
    }

    .users-card-top p {
      margin: 5px 0 0;
      color: var(--text-soft);
      font-size: 9px;
    }

    .table-count {
      color: var(--text-light);
      font-size: 9px;
      font-weight: 700;
    }

    .user-cell {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .avatar {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 9px;
      background: var(--surface-soft);
      color: var(--text);
      border: 1px solid var(--border);
      font-size: 9px;
      font-weight: 800;
    }

    .user-primary {
      display: block;
      font-size: 10px;
      font-weight: 750;
    }

    .user-secondary {
      display: block;
      margin-top: 3px;
      color: var(--text-soft);
      font-size: 8px;
      font-weight: 650;
    }

    .user-tertiary {
      display: block;
      margin-top: 2px;
      color: var(--text-light);
      font-size: 8px;
    }

    .created-cell {
      color: var(--text-soft);
      font-size: 9px;
      white-space: nowrap;
    }

    .last-login-cell {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 92px;
      line-height: 1.25;
      white-space: nowrap;
    }

    .last-login-date {
      color: var(--text);
      font-size: 9px;
      font-weight: 700;
    }

    .last-login-time {
      margin-top: 3px;
      color: var(--text-light);
      font-size: 8px;
    }

    .last-login-never {
      color: var(--text-light);
      font-size: 9px;
    }

    .action-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .action-menu .btn {
      min-height: 30px;
      padding: 0 10px;
      font-size: 8px;
    }

    .action-menu-protected {
      flex-direction: column;
      gap: 7px;
    }

    .action-menu-protected .btn {
      min-width: 84px;
    }

    .primary-account {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 24px;
      padding: 0 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface-soft));
      color: var(--text-soft);
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .primary-account::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }


    .admin-local-note {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 2px 2px 0;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.5;
    }

    .admin-local-note .notice-icon {
      color: var(--accent);
    }

    .edit-modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 8px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
    }

    .edit-modal-footer > .btn-danger {
      min-width: 138px;
    }

    @media (max-width: 620px) {
      .edit-modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .edit-modal-footer > .btn-danger {
        width: 100%;
      }
    }

    /* MODALS */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(0, 0, 0, .42);
      backdrop-filter: blur(6px);
    }

    .modal {
      width: min(520px, 100%);
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-gutter: stable;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--surface);
      box-shadow:
        0 26px 90px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.015);
    }

    .modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 22px 17px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft));
    }

    .modal-head h2 {
      margin: 0;
      font-size: 17px;
      letter-spacing: -.025em;
    }

    .modal-head p {
      margin: 6px 0 0;
      color: var(--text-soft);
      font-size: 9px;
      line-height: 1.5;
    }

    .modal-close {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--text);
      font-size: 0;
      line-height: 0;
      cursor: pointer;
      transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .1s ease;
    }

    .modal-close::before,
    .modal-close::after {
      content: "";
      position: absolute;
      width: 13px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
    }

    .modal-close::before {
      transform: rotate(45deg);
    }

    .modal-close::after {
      transform: rotate(-45deg);
    }

    .modal-close {
      position: relative;
    }

    .modal-close:hover {
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-soft));
      color: var(--accent);
    }

    .modal-close:active {
      transform: scale(.96);
    }

    .modal-body {
      padding: 20px 22px 22px;
    }

    .modal-form {
      display: grid;
      gap: 13px;
    }


    .modal-confirm {
      max-width: 440px;
    }

    .confirm-card {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 6px 0 2px;
    }

    .confirm-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
      border-radius: 999px;
      background: color-mix(in srgb, var(--danger-bg) 72%, var(--surface));
      color: var(--danger);
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
      flex: 0 0 auto;
    }

    .confirm-copy {
      min-width: 0;
    }

    .confirm-copy strong {
      display: block;
      font-size: 12px;
      line-height: 1.35;
    }

    .confirm-copy p {
      margin: 8px 0 0;
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.6;
    }

    .confirm-warning {
      color: var(--danger);
    }

    .modal-actions-spread {
      justify-content: space-between;
    }

    .modal-actions-spread .btn-danger {
      min-width: 158px;
    }

    /* REVOKE LINK MODAL — centered layout */
    #revoke-link-modal .modal-confirm {
      max-width: 440px;
    }

    #revoke-link-modal .modal-head {
      position: relative;
      display: flex;
      justify-content: center;
      text-align: center;
      padding-left: 64px;
      padding-right: 64px;
    }

    #revoke-link-modal .modal-head > div {
      width: 100%;
    }

    #revoke-link-modal .modal-head .modal-close {
      position: absolute;
      top: 50%;
      right: 24px;
      transform: translateY(-50%);
    }

    #revoke-link-modal .modal-head .modal-close:active {
      transform: translateY(-50%) scale(.96);
    }

    #revoke-link-modal .modal-body {
      display: flex;
      justify-content: center;
      padding-top: 24px;
      padding-bottom: 20px;
    }

    #revoke-link-modal .confirm-card {
      width: min(100%, 390px);
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 12px;
      padding: 4px 0;
      text-align: center;
    }

    #revoke-link-modal .confirm-icon {
      margin: 0 auto;
    }

    #revoke-link-modal .confirm-copy {
      width: 100%;
      text-align: center;
    }

    #revoke-link-modal .confirm-copy strong,
    #revoke-link-modal .confirm-copy p {
      text-align: center;
    }

    #revoke-link-modal .confirm-copy p {
      margin-left: auto;
      margin-right: auto;
    }

    #revoke-link-modal .modal-actions {
      justify-content: center;
      gap: 10px;
      margin-top: 4px;
      padding: 0 24px 24px;
    }

    #revoke-link-modal .modal-actions .btn {
      min-width: 145px;
    }

    #revoke-link-modal .modal-actions .btn-danger {
      min-width: 145px;
    }

    #delete-link-log-modal .modal-confirm {
      max-width: 440px;
    }

    #delete-link-log-modal .modal-head {
      position: relative;
      display: flex;
      justify-content: center;
      text-align: center;
      padding-left: 64px;
      padding-right: 64px;
    }

    #delete-link-log-modal .modal-head > div {
      width: 100%;
    }

    #delete-link-log-modal .modal-head .modal-close {
      position: absolute;
      top: 50%;
      right: 24px;
      transform: translateY(-50%);
    }

    #delete-link-log-modal .modal-head .modal-close:active {
      transform: translateY(-50%) scale(.96);
    }

    #delete-link-log-modal .modal-body {
      display: flex;
      justify-content: center;
      padding-top: 24px;
      padding-bottom: 20px;
    }

    #delete-link-log-modal .confirm-card {
      width: min(100%, 390px);
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 12px;
      padding: 4px 0;
      text-align: center;
    }

    #delete-link-log-modal .confirm-icon {
      margin: 0 auto;
    }

    #delete-link-log-modal .confirm-copy,
    #delete-link-log-modal .confirm-copy strong,
    #delete-link-log-modal .confirm-copy p {
      width: 100%;
      text-align: center;
    }

    #delete-link-log-modal .modal-actions {
      justify-content: center;
      gap: 10px;
      margin-top: 4px;
      padding: 0 24px 24px;
    }

    #delete-link-log-modal .modal-actions .btn {
      min-width: 145px;
    }

    @media (max-width: 620px) {
      .confirm-card {
        flex-direction: column;
      }

      .modal-actions-spread {
        flex-direction: column-reverse;
        align-items: stretch;
      }

      .modal-actions-spread .btn-danger {
        width: 100%;
      }

      #revoke-link-modal .modal-head {
        padding-left: 54px;
        padding-right: 54px;
      }

      #revoke-link-modal .modal-head .modal-close {
        right: 14px;
      }

      #revoke-link-modal .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
      }

      #revoke-link-modal .modal-actions .btn {
        width: 100%;
      }

      #delete-link-log-modal .modal-head {
        padding-left: 54px;
        padding-right: 54px;
      }

      #delete-link-log-modal .modal-head .modal-close {
        right: 14px;
      }

      #delete-link-log-modal .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
      }

      #delete-link-log-modal .modal-actions .btn {
        width: 100%;
      }
    }

    .modal-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
      margin-top: 10px;
    }

    .modal-actions .btn {
      min-width: 112px;
      min-height: 40px;
    }

    .form-note {
      padding: 11px 12px;
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--text-soft);
      font-size: 9px;
      line-height: 1.55;
    }

    .password-reset-card {
      display: grid;
      gap: 14px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-soft);
    }

    .password-reset-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .password-reset-head > div {
      min-width: 0;
    }

    .password-reset-head strong {
      display: block;
      font-size: 10px;
    }

    .password-reset-head span {
      display: block;
      margin-top: 4px;
      color: var(--text-light);
      font-size: 8px;
      line-height: 1.5;
    }

    .password-reset-head .btn {
      flex: 0 0 auto;
      min-width: 112px;
    }

    .password-reset-fields {
      display: grid;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .password-reset-card.is-active {
      border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-soft));
    }

    .password-reset-card.is-active .password-reset-head .btn {
      border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
      color: var(--accent);
    }

    @media (max-width: 620px) {
      .password-reset-head {
        align-items: stretch;
        flex-direction: column;
      }

      .password-reset-head .btn {
        width: 100%;
      }
    }

    .switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 14px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--surface-soft);
    }

    .switch-copy strong {
      display: block;
      font-size: 10px;
    }

    .switch-copy span {
      display: block;
      margin-top: 3px;
      color: var(--text-light);
      font-size: 8px;
    }

    .switch-row input {
      width: 18px;
      height: 18px;
      accent-color: var(--accent);
    }

    @media (max-width: 980px) {
      .admin-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .admin-toolbar-left {
        width: 100%;
      }

      .admin-search {
        width: 100%;
        flex: 1 1 100%;
      }

      .admin-toolbar .btn {
        width: 100%;
      }

      .activity-toolbar-left {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

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

    @media (max-width: 620px) {
      .admin-stats {
        grid-template-columns: 1fr 1fr;
      }

      .admin-toolbar {
        padding: 12px;
      }

      .admin-toolbar-left {
        align-items: stretch;
        flex-direction: column;
      }

      .admin-search,
      .admin-filter,
      .admin-toolbar .custom-select {
        width: 100%;
        min-width: 0;
      }

      .activity-toolbar-left {
        grid-template-columns: 1fr;
      }

      .users-card-top {
        align-items: flex-start;
        flex-direction: column;
      }

      .modal-backdrop {
        align-items: end;
        padding: 10px;
      }

      .modal {
        width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 16px;
      }

      .modal-head {
        padding: 17px 16px 14px;
      }

      .modal-body {
        padding: 16px;
      }

      .modal-actions {
        flex-direction: column-reverse;
      }

      .modal-actions .btn {
        width: 100%;
      }

      .users-card-v2 td:last-child .action-menu,
      .links-action-menu {
        flex-wrap: wrap;
      }
    }

    /* SETTINGS */
    .settings-shell {
      width: min(860px, 100%);
    }

    .settings-stack {
      display: grid;
      gap: 18px;
    }

    .setting-card h2 {
      margin: 0 0 9px;
      font-size: 12px;
      letter-spacing: -.02em;
    }

    .setting-card > p {
      margin: 0 0 4px;
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.7;
    }

    .preferences-card {
      padding: 0;
      overflow: hidden;
    }

    .preferences-head {
      padding: 24px 24px 21px;
      border-bottom: 1px solid var(--border);
    }

    .preferences-head h2 {
      margin: 0;
      font-size: 12px;
      letter-spacing: -.02em;
    }

    .preferences-head p {
      margin: 9px 0 0;
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.7;
    }

    .preference-row {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 28px;
      align-items: center;
      padding: 23px 24px;
      border-bottom: 1px solid var(--border);
    }

    .preference-row:last-of-type {
      border-bottom: 0;
    }

    .preference-copy strong {
      display: block;
      margin-bottom: 7px;
      font-size: 11px;
      font-weight: 760;
    }

    .preference-copy span {
      display: block;
      margin-top: 0;
      color: var(--text-light);
      font-size: 9px;
      line-height: 1.65;
    }

    .segmented {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-soft);
    }

    .segment-option {
      position: relative;
      min-width: 0;
    }

    .segment-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .segment-option span {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: var(--text-soft);
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
      transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    }

    .segment-option span:hover {
      color: var(--text);
      background: var(--surface);
    }

    .segment-option input:checked + span {
      border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 4px 16px rgba(0,0,0,.07);
    }

    .segment-option input:checked + span::after {
      display: none;
    }

    .segment-option input:focus-visible + span {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .accent-options {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .accent-option {
      position: relative;
    }

    .accent-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .accent-option span {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--text-soft);
      font-size: 9px;
      font-weight: 700;
      cursor: pointer;
      transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .1s ease;
    }

    .accent-option span:hover {
      color: var(--text);
      border-color: var(--border-strong);
    }

    .accent-option input:checked + span {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--text);
    }

    .accent-option input:checked + span::after {
      display: none;
    }

    .color-dot {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,.14);
    }

    .dot-burgundy { background: #9b1c31; }
    .dot-blue { background: #235fa6; }
    .dot-green { background: #176d47; }
    .dot-black { background: #181818; }

    .preferences-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      background: var(--success-bg);
      color: var(--success);
      font-size: 9px;
      line-height: 1.5;
    }

    .preferences-footer::before {
      content: "✓";
      font-weight: 900;
    }

    @media (max-width: 700px) {
      .preference-row {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .segmented {
        grid-auto-flow: row;
        grid-auto-columns: auto;
      }

      .accent-options {
        grid-template-columns: 1fr 1fr;
      }
    }


    .security-card .field label {
      margin-bottom: 9px;
      line-height: 1.45;
    }

    .field-help {
      display: block;
      margin-top: 9px;
      color: var(--text-soft);
      font-size: 9px;
      font-weight: 600;
      line-height: 1.55;
    }

    .account-identity-card {
      grid-column: 1 / -1;
    }

    .account-identity-card .identity-form {
      width: min(100%, 820px);
      margin: 22px auto 0;
    }

    .account-identity-card .field-help {
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .005em;
    }

    .identity-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: start;
    }

    .identity-actions {
      display: flex;
      align-items: center;
      padding-top: 23px;
    }

    .identity-actions .btn {
      min-width: 210px;
      min-height: 45px;
    }

    .login-name-cooldown {
      display: none;
      width: min(100%, 820px);
      margin: 12px auto 0;
      padding: 10px 12px;
      border: 1px solid color-mix(in srgb, var(--warning) 22%, var(--border));
      border-radius: 10px;
      background: color-mix(in srgb, var(--warning-bg) 78%, var(--surface));
      color: var(--warning);
      font-size: 9px;
      font-weight: 650;
      line-height: 1.5;
    }

    .login-name-cooldown.visible {
      display: block;
    }

    #own-login-name:disabled {
      cursor: not-allowed;
      opacity: .72;
    }

    @media (max-width: 760px) {
      .identity-form {
        grid-template-columns: 1fr;
      }

      .identity-actions .btn {
        width: 100%;
      }
    }

    .preferences-card {
      margin-top: 2px;
    }

    /* ACTIVE SESSIONS */
    .sessions-card {
      grid-column: 1 / -1;
      padding: 0;
      overflow: hidden;
    }

    .sessions-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 7px;
      align-items: start;
      padding: 18px 20px 15px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-soft) 35%, var(--surface));
    }

    .sessions-head h2 {
      margin: 0;
      font-size: 13px;
      letter-spacing: -.02em;
    }

    .sessions-head p {
      max-width: 560px;
      margin: 5px 0 0;
      color: var(--text-soft);
      font-size: 8.5px;
      line-height: 1.6;
    }

    .sessions-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      flex-wrap: wrap;
    }

    .sessions-actions .btn {
      min-height: 32px;
      padding-inline: 10px;
      font-size: 7.2px;
      white-space: nowrap;
    }

    #sessions-feedback {
      margin: 12px 20px 0;
    }

    .sessions-list {
      display: grid;
      gap: 7px;
      padding: 12px 20px 18px;
    }

    .session-item {
      display: grid;
      gap: 7px;
      padding: 13px;
      border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
      border-radius: 13px;
      background:
        linear-gradient(
          145deg,
          color-mix(in srgb, var(--surface-soft) 92%, transparent),
          color-mix(in srgb, var(--surface) 98%, transparent)
        );
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    }

    .session-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .session-header-copy {
      min-width: 0;
    }

    .session-title-row {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }

    .session-title {
      color: var(--text);
      font-size: 9.5px;
      font-weight: 820;
      line-height: 1.35;
    }

    .session-current-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 20px;
      padding: 0 7px;
      border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
      color: var(--accent);
      font-size: 6.4px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .055em;
      white-space: nowrap;
    }

    .session-agent {
      color: var(--text-soft);
      font-size: 7.2px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .session-action-btn {
      min-width: 104px;
      min-height: 34px;
      padding-inline: 10px;
      font-size: 7.2px;
      justify-self: end;
      white-space: nowrap;
    }

    .session-info-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .session-info {
      min-width: 0;
      padding: 8px 9px;
      border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
      border-radius: 9px;
      background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
    }

    .session-info-label {
      display: block;
      margin-bottom: 3px;
      color: var(--text-light);
      font-size: 6.4px;
      font-weight: 820;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .session-info-value {
      display: block;
      color: var(--text);
      font-size: 8px;
      font-weight: 720;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .session-info-value.is-mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 7.2px;
    }

    .sessions-empty {
      padding: 22px;
      border: 1px dashed var(--border);
      border-radius: 14px;
      color: var(--text-soft);
      font-size: 9.5px;
      text-align: center;
      background: color-mix(in srgb, var(--surface-soft) 48%, transparent);
    }

    @media (max-width: 1080px) {
      .session-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 980px) {
      .sessions-head {
        grid-template-columns: 1fr;
      }

      .sessions-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 760px) {
      .sessions-head {
        padding: 20px;
      }

      #sessions-feedback {
        margin: 16px 20px 0;
      }

      .sessions-list {
        padding: 16px 20px 20px;
      }

      .session-header {
        grid-template-columns: 1fr;
      }

      .session-action-btn {
        width: 100%;
        justify-self: stretch;
      }
    }

    @media (max-width: 680px) {
      .sessions-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .session-item {
        padding: 16px;
      }

      .session-info-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ACCOUNT SECURITY */
    .security-card {
      grid-column: 1 / -1;
    }

    .security-form {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      align-items: end;
      margin-top: 18px;
    }

    .security-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .security-actions .btn {
      min-width: 180px;
    }

    .security-feedback {
      display: none;
      margin-top: 14px;
      padding: 11px 12px;
      border-radius: 10px;
      font-size: 9px;
      line-height: 1.55;
    }

    .security-feedback.error {
      display: block;
      background: var(--danger-bg);
      color: var(--danger);
    }

    .security-feedback.success {
      display: block;
      background: var(--success-bg);
      color: var(--success);
    }

    @media (max-width: 760px) {
      .security-form {
        grid-template-columns: 1fr;
      }

      .security-actions .btn {
        width: 100%;
      }
    }

    /* PARTNER PUBLIC */
    #partner-view {
      display: none;
      min-height: 100vh;
      padding: 48px 0 68px;
    }

    .partner-shell {
      max-width: 620px;
      margin: 0 auto;
    }

    .partner-intro {
      margin-bottom: 22px;
      text-align: center;
    }

    .partner-intro h1 {
      margin: 0;
      font-size: clamp(28px, 5vw, 38px);
      letter-spacing: -.04em;
    }

    .partner-intro p {
      max-width: 470px;
      margin: 12px auto 0;
      color: var(--text-soft);
      font-size: 11px;
      line-height: 1.6;
    }

    .access-card { overflow: hidden; padding: 0; }

    .access-card-header {
      padding: 28px 30px;
      background: #181818;
      color: white;
    }

    .access-brand {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .access-logo {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 11px;
      background: rgba(255,255,255,.08);
      font-size: 12px;
      font-weight: 800;
    }

    .access-card-header h2 {
      margin: 0;
      font-size: 17px;
      font-weight: 750;
      letter-spacing: -.02em;
    }

    .access-card-header p {
      margin: 4px 0 0;
      color: #b8b8b8;
      font-size: 10px;
    }

    .access-body { padding: 30px; }

    .access-block + .access-block { margin-top: 24px; }

    .access-label {
      display: block;
      margin-bottom: 8px;
      color: var(--text-light);
      font-size: 9px;
      font-weight: 750;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .access-id-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 16px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--surface-soft);
    }

    .access-id {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 15px;
      font-weight: 750;
    }

    .access-password-box {
      padding: 18px;
      border-radius: 13px;
      background: #181818;
      color: white;
    }

    .access-password-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .access-password {
      min-width: 0;
      overflow-x: auto;
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: clamp(18px, 4vw, 23px);
      font-weight: 750;
      letter-spacing: .04em;
      white-space: nowrap;
      scrollbar-width: none;
    }

    .partner-notice {
      margin-top: 24px;
      padding: 16px;
      border-radius: 11px;
      background: var(--info-bg);
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.65;
    }

    .partner-notice strong {
      display: block;
      margin-bottom: 7px;
      color: var(--text);
      font-size: 10px;
    }

    footer {
      padding: 25px 0 32px;
      border-top: 1px solid var(--border);
      color: var(--text-light);
      font-size: 9px;
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }

    @media (max-width: 860px) {
      .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 14px 0;
      }

      .app-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
      }

      .user-zone { margin-left: auto; }

      .admin-layout,
      .settings-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .container,
      .narrow {
        width: min(100% - 24px, 980px);
      }

      .brand-description,
      .user-meta { display: none; }

      .page { padding: 38px 0 54px; }

      .card { padding: 20px; }

      .section + .section {
        margin-top: 24px;
        padding-top: 24px;
      }

      .password-panel {
        align-items: stretch;
        flex-direction: column;
      }

      .password-actions { width: 100%; }
      .password-actions .btn { flex: 1; }

      .options,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .link-row { flex-direction: column; }
      .link-row .btn { width: 100%; }

      .access-card { padding: 0; }
      .access-card-header { padding: 23px 20px; }
      .access-body { padding: 22px 20px; }

      .access-password-top {
        align-items: stretch;
        flex-direction: column;
      }

      .access-password-top .btn { width: 100%; }

      .footer-content {
        flex-direction: column;
        gap: 5px;
      }
    }
    /* =====================================================
       PUBLIC PARTNER VIEW — THEME ADAPTATION
       ===================================================== */

    #partner-view {
      background:
        radial-gradient(
          circle at 14% 0%,
          color-mix(in srgb, var(--accent) 12%, transparent) 0%,
          transparent 28%
        ),
        linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, #000) 100%);
    }

    .partner-intro {
      margin-bottom: 24px;
      text-align: center;
    }

    .partner-intro .eyebrow {
      color: color-mix(in srgb, var(--accent) 62%, var(--text));
    }

    .partner-intro p:last-child {
      color: var(--text-soft);
    }

    .access-card {
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
      border-radius: 22px;
      background:
        linear-gradient(
          180deg,
          color-mix(in srgb, var(--surface) 82%, var(--surface-soft)) 0%,
          var(--surface) 100%
        );
      box-shadow:
        0 1px 2px rgba(0,0,0,.12),
        0 18px 50px rgba(0,0,0,.12);
    }

    .access-card-header {
      padding: 28px 30px;
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--accent) 7%, var(--surface-soft)) 0%,
          var(--surface) 100%
        );
    }

    .access-brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .access-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-strong));
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--accent) 72%, #ffffff) 0%,
          var(--accent) 100%
        );
      color: var(--accent-contrast);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 10px 20px color-mix(in srgb, var(--accent) 18%, transparent);
      font-weight: 800;
      letter-spacing: .03em;
    }

    .access-brand h2 {
      margin: 0;
      font-size: 17px;
    }

    .access-brand p {
      margin: 4px 0 0;
      color: var(--text-soft);
      font-size: 10px;
    }

    .access-body {
      padding: 30px;
      background:
        linear-gradient(
          180deg,
          color-mix(in srgb, var(--surface) 74%, var(--surface-soft)) 0%,
          var(--surface) 100%
        );
    }

    .access-id-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 16px;
      border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
      border-radius: 13px;
      background: color-mix(in srgb, var(--accent) 4%, var(--surface-soft));
    }

    .access-id {
      font-weight: 750;
      letter-spacing: .01em;
    }

    .access-password-box {
      padding: 18px;
      border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
      border-radius: 14px;
      background:
        radial-gradient(
          circle at 78% 22%,
          color-mix(in srgb, var(--accent) 10%, transparent) 0%,
          transparent 28%
        ),
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--accent) 7%, #191c21) 0%,
          #171a1f 56%,
          #20242a 100%
        );
      color: #f6f7f9;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 24px rgba(0,0,0,.10);
    }

    .access-password-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .access-password {
      color: #f8fafc;
      text-shadow: 0 1px 0 rgba(0,0,0,.18);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: clamp(18px, 3vw, 22px);
      font-weight: 760;
      letter-spacing: .035em;
    }

    .partner-notice {
      margin-top: 26px;
      padding: 16px 16px 15px;
      border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border));
      border-radius: 13px;
      background: color-mix(in srgb, var(--accent) 4%, var(--surface-soft));
    }

    .partner-notice strong {
      display: block;
      margin-bottom: 8px;
      color: var(--text);
      font-size: 10px;
    }

    .partner-notice span {
      display: block;
      color: var(--text-soft);
      font-size: 9px;
      line-height: 1.6;
    }

    #partner-view .footer-content {
      color: var(--text-light);
    }

    html[data-theme="dark"] .access-card {
      background:
        linear-gradient(180deg, #17191d 0%, #14161a 100%);
      border-color: color-mix(in srgb, var(--accent) 12%, #2e333a);
    }

    html[data-theme="dark"] .access-card-header {
      background:
        linear-gradient(135deg, #171a1f 0%, #131519 100%);
      border-bottom-color: color-mix(in srgb, var(--accent) 12%, #2b3037);
    }

    html[data-theme="dark"] .access-body {
      background:
        linear-gradient(180deg, #1a1d22 0%, #17191d 100%);
    }

    html[data-theme="dark"] .access-id-row,
    html[data-theme="dark"] .partner-notice {
      background: #20252d;
      border-color: color-mix(in srgb, var(--accent) 12%, #34404e);
    }

    html[data-theme="dark"] .access-password-box {
      border-color: color-mix(in srgb, var(--accent) 14%, #2b3037);
      background:
        radial-gradient(
          circle at 80% 20%,
          color-mix(in srgb, var(--accent) 7%, transparent) 0%,
          transparent 26%
        ),
        linear-gradient(135deg, #141619 0%, #111316 54%, #1a1d21 100%);
    }

    html[data-theme="metal"] .access-card {
      background:
        linear-gradient(180deg, #232831 0%, #1d2127 100%);
      border-color: color-mix(in srgb, var(--accent) 14%, #45515e);
    }

    html[data-theme="metal"] .access-card-header {
      background:
        linear-gradient(135deg, #2a3038 0%, #22282f 100%);
      border-bottom-color: color-mix(in srgb, var(--accent) 12%, #4e5a67);
    }

    html[data-theme="metal"] .access-body {
      background:
        linear-gradient(180deg, #28303a 0%, #202730 100%);
    }

    html[data-theme="metal"] .access-id-row,
    html[data-theme="metal"] .partner-notice {
      background: #2a3440;
      border-color: color-mix(in srgb, var(--accent) 16%, #506071);
    }

    html[data-theme="metal"] .access-password-box {
      border-color: color-mix(in srgb, var(--accent) 18%, #46515d);
      background:
        radial-gradient(
          circle at 78% 22%,
          color-mix(in srgb, var(--accent) 9%, transparent) 0%,
          transparent 28%
        ),
        linear-gradient(135deg, #2b3139 0%, #232931 48%, #2f3640 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 28px rgba(0,0,0,.12);
    }

    html[data-theme="blue"] .access-card {
      background:
        linear-gradient(180deg, #152234 0%, #121c2a 100%);
      border-color: color-mix(in srgb, var(--accent) 18%, #355274);
    }

    html[data-theme="blue"] .access-card-header {
      background:
        linear-gradient(135deg, #1b2b41 0%, #172638 100%);
      border-bottom-color: color-mix(in srgb, var(--accent) 18%, #355274);
    }

    html[data-theme="blue"] .access-body {
      background:
        linear-gradient(180deg, #1a2b40 0%, #142335 100%);
    }

    html[data-theme="blue"] .access-id-row,
    html[data-theme="blue"] .partner-notice {
      background: #1d3048;
      border-color: color-mix(in srgb, var(--accent) 20%, #3a5e86);
    }

    html[data-theme="blue"] .access-password-box {
      border-color: color-mix(in srgb, var(--accent) 30%, #38597e);
      background:
        radial-gradient(
          circle at 80% 20%,
          rgba(60,126,203,.14) 0%,
          transparent 30%
        ),
        linear-gradient(135deg, #142133 0%, #16263b 50%, #223753 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 12px 30px rgba(0,0,0,.14);
    }


  
    /* =====================================================
       ACTIVITY TOOLBAR — final alignment pass
       ===================================================== */

    #route-activity .activity-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px;
    }

    #route-activity .activity-toolbar-left {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns:
        minmax(240px, 1.55fr)
        minmax(145px, .78fr)
        minmax(155px, .86fr)
        minmax(145px, .78fr);
      align-items: center;
      gap: 8px;
    }

    #route-activity .activity-toolbar-left .admin-search,
    #route-activity .activity-toolbar-left .admin-filter,
    #route-activity .activity-toolbar-left .custom-select {
      width: 100%;
      min-width: 0;
      margin: 0;
    }

    #route-activity .activity-toolbar-left .admin-search,
    #route-activity .activity-toolbar-left .custom-select-trigger,
    #route-activity #clear-activity-btn {
      min-height: 45px;
      height: 45px;
    }

    #route-activity #clear-activity-btn {
      width: auto;
      min-width: 150px;
      margin: 0;
      align-self: center;
    }

    #route-activity .custom-select-value {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (max-width: 980px) {
      #route-activity .activity-toolbar {
        grid-template-columns: 1fr;
      }

      #route-activity .activity-toolbar-left {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #route-activity .activity-toolbar-left .admin-search {
        grid-column: 1 / -1;
      }

      #route-activity #clear-activity-btn {
        width: 100%;
      }
    }

    @media (max-width: 620px) {
      #route-activity .activity-toolbar-left {
        grid-template-columns: 1fr;
      }

      #route-activity .activity-toolbar-left .admin-search {
        grid-column: auto;
      }
    }


    /* =====================================================
       SUIVI DES LIENS — toolbar alignment
       ===================================================== */

    #route-links .links-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px;
    }

    #route-links .links-toolbar .admin-toolbar-left {
      display: grid;
      grid-template-columns:
        minmax(280px, 1.65fr)
        minmax(155px, .78fr)
        minmax(155px, .78fr);
      align-items: center;
      gap: 8px;
      min-width: 0;
      width: 100%;
    }

    #route-links .links-toolbar .admin-search,
    #route-links .links-toolbar .admin-filter,
    #route-links .links-toolbar .custom-select {
      width: 100%;
      min-width: 0;
      margin: 0;
    }

    #route-links .links-toolbar .admin-search,
    #route-links .links-toolbar .custom-select-trigger,
    #route-links .links-toolbar-actions .btn {
      min-height: 45px;
      height: 45px;
    }

    #route-links .links-toolbar-actions {
      display: grid;
      grid-template-columns: repeat(2, max-content);
      align-items: center;
      gap: 8px;
      width: auto;
    }

    #route-links .links-toolbar-actions .btn {
      min-width: 150px;
      margin: 0;
    }

    @media (max-width: 1100px) {
      #route-links .links-toolbar {
        grid-template-columns: 1fr;
      }

      #route-links .links-toolbar .admin-toolbar-left {
        grid-template-columns:
          minmax(240px, 1.4fr)
          minmax(150px, .8fr)
          minmax(150px, .8fr);
      }

      #route-links .links-toolbar-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #route-links .links-toolbar-actions .btn {
        width: 100%;
      }
    }

    @media (max-width: 760px) {
      #route-links .links-toolbar .admin-toolbar-left {
        grid-template-columns: 1fr 1fr;
      }

      #route-links .links-toolbar .admin-search {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 620px) {
      #route-links .links-toolbar .admin-toolbar-left,
      #route-links .links-toolbar-actions {
        grid-template-columns: 1fr;
      }

      #route-links .links-toolbar .admin-search {
        grid-column: auto;
      }
    }


    /* =====================================================
       CONFIRMATION MODALS — centered and consistent
       ===================================================== */

    #bulk-link-action-modal .modal-confirm,
    #clear-activity-modal .modal-confirm {
      width: min(520px, 100%);
      max-width: 440px;
      overflow: hidden;
    }

    #bulk-link-action-modal .modal-head,
    #clear-activity-modal .modal-head {
      position: relative;
      display: flex;
      justify-content: center;
      min-height: 82px;
      padding: 20px 64px 18px;
      text-align: center;
    }

    #bulk-link-action-modal .modal-head > div,
    #clear-activity-modal .modal-head > div {
      width: 100%;
      max-width: 390px;
      margin: 0 auto;
    }

    #bulk-link-action-modal .modal-head h2,
    #clear-activity-modal .modal-head h2 {
      margin: 0;
      text-align: center;
    }

    #bulk-link-action-modal .modal-head p,
    #clear-activity-modal .modal-head p {
      margin: 6px auto 0;
      text-align: center;
    }

    #bulk-link-action-modal .modal-head .modal-close,
    #clear-activity-modal .modal-head .modal-close {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
    }

    #bulk-link-action-modal .modal-head .modal-close:active,
    #clear-activity-modal .modal-head .modal-close:active {
      transform: translateY(-50%) scale(.96);
    }

    #bulk-link-action-modal .modal-body,
    #clear-activity-modal .modal-body {
      display: flex;
      justify-content: center;
      padding: 24px 24px 20px;
    }

    #bulk-link-action-modal .confirm-card,
    #clear-activity-modal .confirm-card {
      width: min(100%, 400px);
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 12px;
      padding: 0;
      text-align: center;
    }

    #bulk-link-action-modal .confirm-icon,
    #clear-activity-modal .confirm-icon {
      width: 44px;
      height: 44px;
      margin: 0 auto;
    }

    #bulk-link-action-modal .confirm-copy,
    #clear-activity-modal .confirm-copy {
      width: 100%;
      min-width: 0;
      text-align: center;
    }

    #bulk-link-action-modal .confirm-copy strong,
    #clear-activity-modal .confirm-copy strong {
      display: block;
      margin: 0 auto;
      color: var(--text);
      font-size: 12px;
      line-height: 1.4;
      text-align: center;
    }

    #bulk-link-action-modal .confirm-copy p,
    #clear-activity-modal .confirm-copy p {
      max-width: 380px;
      margin: 7px auto 0;
      text-align: center;
      line-height: 1.55;
    }

    #bulk-link-action-modal .confirm-warning,
    #clear-activity-modal .confirm-warning {
      color: color-mix(in srgb, var(--danger) 82%, var(--text-soft));
    }

    #bulk-link-action-modal .modal-actions,
    #clear-activity-modal .modal-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 0;
      padding: 0 24px 22px;
    }

    #bulk-link-action-modal .modal-actions .btn,
    #clear-activity-modal .modal-actions .btn {
      width: 145px;
      min-width: 145px;
      min-height: 40px;
    }

    @media (max-width: 620px) {
      #bulk-link-action-modal .modal-head,
      #clear-activity-modal .modal-head {
        padding-left: 54px;
        padding-right: 54px;
      }

      #bulk-link-action-modal .modal-head .modal-close,
      #clear-activity-modal .modal-head .modal-close {
        right: 14px;
      }

      #bulk-link-action-modal .modal-actions,
      #clear-activity-modal .modal-actions {
        flex-direction: column-reverse;
        padding-left: 16px;
        padding-right: 16px;
      }

      #bulk-link-action-modal .modal-actions .btn,
      #clear-activity-modal .modal-actions .btn {
        width: 100%;
      }
    }


    /* DELETE COMPANY MODAL — same centered presentation */
    #delete-company-modal .modal-confirm {
      width: min(520px, 100%);
      max-width: 440px;
      overflow: hidden;
    }

    #delete-company-modal .modal-head {
      position: relative;
      display: flex;
      justify-content: center;
      min-height: 82px;
      padding: 20px 64px 18px;
      text-align: center;
    }

    #delete-company-modal .modal-head > div {
      width: 100%;
      max-width: 390px;
      margin: 0 auto;
    }

    #delete-company-modal .modal-head h2 {
      margin: 0;
      text-align: center;
    }

    #delete-company-modal .modal-head p {
      margin: 6px auto 0;
      text-align: center;
    }

    #delete-company-modal .modal-head .modal-close {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
    }

    #delete-company-modal .modal-head .modal-close:active {
      transform: translateY(-50%) scale(.96);
    }

    #delete-company-modal .modal-body {
      display: flex;
      justify-content: center;
      padding: 24px 24px 20px;
    }

    #delete-company-modal .confirm-card {
      width: min(100%, 400px);
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 12px;
      padding: 0;
      text-align: center;
    }

    #delete-company-modal .confirm-icon {
      width: 44px;
      height: 44px;
      margin: 0 auto;
    }

    #delete-company-modal .confirm-copy {
      width: 100%;
      min-width: 0;
      text-align: center;
    }

    #delete-company-modal .confirm-copy strong {
      display: block;
      margin: 0 auto;
      color: var(--text);
      font-size: 12px;
      line-height: 1.4;
      text-align: center;
    }

    #delete-company-modal .confirm-copy p {
      max-width: 380px;
      margin: 7px auto 0;
      text-align: center;
      line-height: 1.55;
    }

    #delete-company-modal .modal-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 0;
      padding: 0 24px 22px;
    }

    #delete-company-modal .modal-actions .btn {
      width: 145px;
      min-width: 145px;
      min-height: 40px;
    }

    @media (max-width: 620px) {
      #delete-company-modal .modal-head {
        padding-left: 54px;
        padding-right: 54px;
      }

      #delete-company-modal .modal-head .modal-close {
        right: 14px;
      }

      #delete-company-modal .modal-actions {
        flex-direction: column-reverse;
        padding-left: 16px;
        padding-right: 16px;
      }

      #delete-company-modal .modal-actions .btn {
        width: 100%;
      }
    }


    /* =====================================================
       ADMINISTRATION — recherche étendue
       ===================================================== */

    #route-admin .admin-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    #route-admin .admin-toolbar-left {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns:
        minmax(320px, 1fr)
        145px
        145px;
      align-items: center;
      gap: 8px;
    }

    #route-admin .admin-search {
      width: 100%;
      min-width: 0;
    }

    #route-admin .admin-filter,
    #route-admin .custom-select {
      width: 145px;
      min-width: 145px;
    }

    #route-admin #open-create-user-modal {
      width: 150px;
      min-width: 150px;
      margin: 0;
    }

    @media (max-width: 980px) {
      #route-admin .admin-toolbar {
        grid-template-columns: 1fr;
      }

      #route-admin .admin-toolbar-left {
        grid-template-columns:
          minmax(240px, 1fr)
          145px
          145px;
      }

      #route-admin #open-create-user-modal {
        width: 100%;
      }
    }

    @media (max-width: 700px) {
      #route-admin .admin-toolbar-left {
        grid-template-columns: 1fr 1fr;
      }

      #route-admin .admin-search {
        grid-column: 1 / -1;
      }

      #route-admin .admin-filter,
      #route-admin .custom-select {
        width: 100%;
        min-width: 0;
      }
    }

    @media (max-width: 520px) {
      #route-admin .admin-toolbar-left {
        grid-template-columns: 1fr;
      }

      #route-admin .admin-search {
        grid-column: auto;
      }
    }


    /* SECURITY POLICY — save button aligned right */
    #security-policy-card .security-policy-footer {
      justify-content: flex-end;
    }

    #security-policy-card .security-policy-footer .security-feedback {
      margin-right: auto;
    }

    #security-policy-card #save-security-settings-btn {
      margin-left: auto;
      flex: 0 0 auto;
    }

    @media (max-width: 760px) {
      #security-policy-card #save-security-settings-btn {
        width: 100%;
        margin-left: 0;
      }
    }


/* =====================================================
   DASHBOARD
   ===================================================== */
.dashboard-hero {
  padding-bottom: 22px;
}

.dashboard-subtitle {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-stat-card {
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

.dashboard-stat-label {
  color: var(--text-light);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.dashboard-stat-value {
  margin-top: 9px;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.035em;
}

.dashboard-stat-note {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 8px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 18px;
}

.dashboard-panel {
  padding: 22px;
}

.dashboard-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-panel-heading h2 {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.dashboard-panel-heading p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 8px;
  line-height: 1.5;
}

.dashboard-panel-link {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-shortcuts {
  display: grid;
  gap: 10px;
}

.dashboard-shortcut {
  min-height: 44px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 9px;
  font-weight: 780;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.dashboard-shortcut:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  transform: translateY(-1px);
}

.dashboard-shortcut.primary {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-soft));
}

.dashboard-recent-links {
  display: grid;
  gap: 8px;
}

.dashboard-recent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.dashboard-recent-main {
  min-width: 0;
}

.dashboard-recent-name {
  overflow: hidden;
  color: var(--text);
  font-size: 9px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-recent-meta {
  margin-top: 4px;
  color: var(--text-light);
  font-size: 7px;
}

.dashboard-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 6.5px;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface);
  color: var(--text-soft);
}

.dashboard-status.active {
  background: rgba(31, 132, 91, .16);
  color: #4bd39a;
}

.dashboard-status.expiring {
  background: rgba(179, 122, 20, .16);
  color: #f3bb4c;
}

.dashboard-status.inactive {
  background: rgba(150, 60, 60, .14);
  color: #ec7979;
}

.dashboard-recent-openings {
  color: var(--text-soft);
  font-size: 7px;
  white-space: nowrap;
}

.dashboard-empty {
  padding: 24px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-light);
  font-size: 8px;
  text-align: center;
}

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

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .dashboard-recent-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-recent-openings {
    grid-column: 1 / -1;
  }
}


/* =====================================================
   ROLE-BASED DASHBOARDS — V14.2
   ===================================================== */
.dashboard-hero-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.dashboard-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
}

.dashboard-role-view {
  display: grid;
  gap: 18px;
}

.dashboard-shared-panel,
.dashboard-wide-panel {
  margin-top: 0;
}

.dashboard-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-mini-stat,
.dashboard-health-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 78px;
  justify-content: center;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.dashboard-mini-stat span,
.dashboard-health-item span {
  color: var(--text-soft);
  font-size: 8px;
}

.dashboard-mini-stat strong,
.dashboard-health-item strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.dashboard-alert-list {
  display: grid;
  gap: 9px;
}

.dashboard-alert-row {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
}

.dashboard-alert-row span {
  color: var(--text-soft);
  font-size: 8px;
}

.dashboard-alert-row strong {
  color: var(--text);
  font-size: 14px;
}

.dashboard-alert-row.warning {
  border-color: color-mix(in srgb, #d59b35 44%, var(--border));
  background: color-mix(in srgb, #d59b35 8%, var(--surface-soft));
}

.dashboard-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-super-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.dashboard-role-view.hidden {
  display: none !important;
}

@media (max-width: 780px) {
  .dashboard-hero-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-mini-stats,
  .dashboard-health-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-super-grid {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   DASHBOARD POLISH — V14.2.1
   ===================================================== */

#route-dashboard {
  padding-top: 34px;
  padding-bottom: 52px;
}

#route-dashboard .container {
  max-width: 1240px;
}

.dashboard-hero {
  position: relative;
  margin-bottom: 20px;
  padding: 22px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #0b1119), var(--surface));
  overflow: hidden;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 280px;
  height: 280px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px color-mix(in srgb, var(--accent) 4%, transparent),
    0 0 0 96px color-mix(in srgb, var(--accent) 2%, transparent);
  pointer-events: none;
}

.dashboard-hero-top {
  position: relative;
  z-index: 1;
  align-items: center;
}

#dashboard-eyebrow {
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--accent) 70%, var(--text-light));
  font-size: 8px;
  letter-spacing: .14em;
}

#dashboard-title {
  margin: 0;
  max-width: 760px;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.dashboard-subtitle {
  max-width: 720px;
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.55;
}

.dashboard-role-badge {
  min-height: 34px;
  padding: 0 13px;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  font-size: 7px;
}

.dashboard-role-view {
  gap: 16px;
}

.dashboard-stats {
  gap: 12px;
  margin-bottom: 0;
}

.dashboard-stat-card {
  position: relative;
  min-height: 112px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.dashboard-stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 64%, transparent);
}

.dashboard-stat-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
}

.dashboard-stat-label {
  padding-left: 2px;
  font-size: 7.5px;
  letter-spacing: .09em;
}

.dashboard-stat-value {
  margin-top: 10px;
  font-size: 28px;
}

.dashboard-stat-note {
  margin-top: 6px;
  font-size: 7px;
}

.dashboard-grid {
  gap: 14px;
}

.dashboard-panel {
  padding: 20px;
  border-radius: 18px;
}

.dashboard-panel-heading {
  margin-bottom: 15px;
}

.dashboard-panel-heading h2 {
  font-size: 13px;
  letter-spacing: -.012em;
}

.dashboard-panel-heading p {
  margin-top: 5px;
  font-size: 7.5px;
}

.dashboard-shortcuts {
  gap: 8px;
}

.dashboard-shortcut {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 8px;
}

.dashboard-shortcut.primary {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 24%, var(--surface-soft)),
      color-mix(in srgb, var(--accent) 13%, var(--surface-soft))
    );
}

.dashboard-panel-link {
  padding: 6px 8px;
  border-radius: 8px;
}

.dashboard-panel-link:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.dashboard-recent-links {
  gap: 7px;
}

.dashboard-recent-item {
  min-height: 50px;
  padding: 10px 12px;
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-soft) 96%, var(--accent)),
      var(--surface-soft)
    );
}

.dashboard-recent-name {
  font-size: 8.5px;
}

.dashboard-recent-meta {
  font-size: 6.5px;
}

.dashboard-status {
  padding: 5px 8px;
  font-size: 6px;
}

.dashboard-recent-openings {
  font-size: 6.5px;
}

.dashboard-shared-panel,
.dashboard-wide-panel {
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}

.dashboard-mini-stats {
  gap: 8px;
}

.dashboard-mini-stat,
.dashboard-health-item {
  min-height: 70px;
  padding: 11px 12px;
  border-radius: 10px;
}

.dashboard-mini-stat span,
.dashboard-health-item span {
  font-size: 7px;
}

.dashboard-mini-stat strong,
.dashboard-health-item strong {
  font-size: 19px;
}

.dashboard-health-grid {
  gap: 8px;
}

.dashboard-alert-list {
  gap: 7px;
}

.dashboard-alert-row {
  min-height: 42px;
  border-radius: 10px;
}

.dashboard-alert-row span {
  font-size: 7.5px;
}

.dashboard-alert-row strong {
  font-size: 13px;
}

/* USER — plus personnel, sans lui montrer des infos d’administration */
#dashboard-user-view .dashboard-stat-card::before {
  background: color-mix(in srgb, var(--accent) 66%, transparent);
}

#dashboard-user-view .dashboard-shared-panel {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface) 97%, var(--accent)),
      var(--surface)
    );
}

/* ADMIN — supervision opérationnelle */
#dashboard-admin-view .dashboard-stat-card:nth-child(3)::before,
#dashboard-admin-view .dashboard-stat-card:nth-child(4)::before {
  background: color-mix(in srgb, #6aa6ff 58%, transparent);
}

/* SUPER ADMIN — supervision globale plus premium */
#dashboard-super-view .dashboard-stat-card:first-child::before,
#dashboard-super-view .dashboard-stat-card:nth-child(2)::before {
  background: color-mix(in srgb, #7fafff 70%, transparent);
}

#dashboard-super-view .dashboard-stat-card:nth-child(4)::before {
  background: color-mix(in srgb, #d66f78 70%, transparent);
}

#dashboard-super-view .dashboard-super-grid {
  align-items: stretch;
}

#dashboard-super-view .dashboard-panel {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface) 97%, var(--accent)),
      var(--surface)
    );
}

@media (max-width: 900px) {
  #route-dashboard {
    padding-top: 22px;
  }

  .dashboard-hero {
    padding: 20px;
  }

  .dashboard-hero-top {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  #route-dashboard .container {
    padding-inline: 14px;
  }

  .dashboard-hero {
    border-radius: 16px;
  }

  .dashboard-role-badge {
    min-height: 30px;
  }

  .dashboard-panel {
    padding: 16px;
  }
}


/* =====================================================
   LOGS READABILITY — V14.10
   ===================================================== */

.activity-toolbar {
  align-items: flex-start;
  gap: 12px;
}

.activity-toolbar-left {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.6fr)
    minmax(155px, .9fr)
    minmax(155px, .9fr)
    minmax(175px, 1fr)
    minmax(150px, .8fr);
  gap: 8px;
  flex: 1 1 auto;
}

.activity-toolbar-left .admin-search,
.activity-toolbar-left .admin-filter {
  width: 100%;
  min-width: 0;
}

.activity-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.activity-card .users-table-wrap {
  overflow-x: auto;
}

.activity-table {
  table-layout: fixed;
  min-width: 820px;
}

.activity-table th {
  padding-top: 11px;
  padding-bottom: 11px;
  color: var(--text-soft);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.activity-table th.activity-col-time { width: 128px; }
.activity-table th.activity-col-event { width: 260px; }
.activity-table th.activity-col-user { width: 180px; }
.activity-table th.activity-col-context { width: auto; }

.activity-row td {
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: middle;
  border-bottom-color: color-mix(in srgb, var(--border) 86%, transparent);
}

.activity-row {
  transition: background .14s ease;
}

.activity-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.activity-row td:first-child {
  position: relative;
  padding-left: 18px;
}

.activity-row td:first-child::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  opacity: .85;
}

.activity-row-success td:first-child::before { background: #50b98a; }
.activity-row-warning td:first-child::before { background: #d6a547; }
.activity-row-danger td:first-child::before { background: #d86a73; }
.activity-row-neutral td:first-child::before {
  background: color-mix(in srgb, var(--accent) 48%, var(--border));
}

.activity-time-relative {
  display: block;
  color: var(--text);
  font-size: 8px;
  font-weight: 750;
}

.activity-time-exact {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 6.5px;
}

.activity-event-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.activity-event-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.activity-event-title {
  color: var(--text);
  font-size: 8px;
  line-height: 1.35;
}

.activity-category-pill {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 5.8px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.activity-severity-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-soft);
}

.activity-severity-dot.success { background: #50b98a; }
.activity-severity-dot.warning { background: #d6a547; }
.activity-severity-dot.danger { background: #d86a73; }

.activity-actor-v2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.activity-actor-v2 > strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 5.8px;
  font-weight: 800;
}

.activity-role-pill.admin {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
}

.activity-role-pill.super {
  border-color: color-mix(in srgb, #7fafff 45%, var(--border));
  color: #9fc3ff;
}

.activity-context-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.activity-context-cell strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-context-cell span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 6.5px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-context-cell .activity-no-detail {
  opacity: .58;
  font-style: italic;
}

@media (max-width: 1180px) {
  .activity-toolbar {
    flex-direction: column;
  }

  .activity-toolbar-left {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .activity-toolbar-left {
    grid-template-columns: 1fr;
  }

  .activity-toolbar-actions {
    justify-content: stretch;
  }

  .activity-toolbar-actions .btn {
    flex: 1 1 0;
  }
}


/* =====================================================
   LOGS POLISH — V14.10.2
   ===================================================== */

#route-activity .container {
  max-width: 1240px;
}

#route-activity .hero {
  padding-bottom: 10px;
}

.activity-dashboard {
  display: grid;
  gap: 14px;
}

.activity-stats {
  gap: 10px;
}

.activity-stats .stat-card {
  min-height: 96px;
  padding: 15px 16px;
  border-radius: 14px;
}

.activity-stats .stat-label {
  font-size: 7px;
  letter-spacing: .08em;
}

.activity-stats .stat-value {
  margin-top: 7px;
  font-size: 25px;
}

.activity-stats .stat-meta {
  margin-top: 5px;
  font-size: 6.5px;
}

/* Filters: two clean rows instead of a stretched toolbar */
.activity-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px 12px;
  padding: 14px;
  border-radius: 15px;
}

.activity-toolbar-left {
  display: grid;
  grid-template-columns:
    minmax(250px, 1.6fr)
    minmax(165px, .8fr)
    minmax(165px, .8fr)
    minmax(190px, 1fr);
  gap: 8px;
  width: 100%;
}

.activity-toolbar-left #activity-period-filter {
  grid-column: 1 / 2;
}

.activity-toolbar-left .admin-search,
.activity-toolbar-left .admin-filter {
  min-height: 42px;
  border-radius: 10px;
}

.activity-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  align-self: end;
  padding-bottom: 1px;
}

.activity-toolbar-actions .btn {
  min-height: 42px;
  padding-inline: 16px;
  white-space: nowrap;
}

/* Main table */
.activity-card {
  overflow: hidden;
  border-radius: 17px;
}

.activity-card .users-card-top {
  padding: 17px 20px;
}

.activity-card .users-card-top h2 {
  font-size: 13px;
}

.activity-card .users-card-top p {
  margin-top: 4px;
  font-size: 7px;
}

.activity-table {
  min-width: 880px;
}

.activity-table thead th {
  height: 34px;
  padding: 0 14px;
  font-size: 6px;
  letter-spacing: .09em;
}

.activity-row td {
  padding: 10px 14px;
}

.activity-row td:first-child {
  padding-left: 19px;
}

.activity-row td:first-child::before {
  left: 7px;
  top: 10px;
  bottom: 10px;
}

.activity-time-relative {
  font-size: 7.5px;
}

.activity-time-exact {
  margin-top: 3px;
  font-size: 6px;
}

.activity-event-cell {
  gap: 5px;
}

.activity-category-pill {
  padding: 3px 7px;
  font-size: 5.2px;
}

.activity-event-title {
  font-size: 7.5px;
}

.activity-actor-v2 {
  gap: 5px;
}

.activity-actor-v2 > strong {
  font-size: 7.5px;
}

.activity-role-pill {
  min-height: 17px;
  padding-inline: 6px;
  font-size: 5.2px;
}

.activity-context-cell {
  gap: 3px;
}

.activity-context-cell strong {
  font-size: 7px;
}

.activity-context-cell span {
  font-size: 6px;
}

/* Give IP/details a bit more room */
.activity-table th.activity-col-time {
  width: 126px;
}

.activity-table th.activity-col-event {
  width: 255px;
}

.activity-table th.activity-col-user {
  width: 185px;
}

.activity-table th.activity-col-context {
  width: auto;
}

.activity-pagination {
  min-height: 54px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.activity-page-size,
.activity-page-controls {
  gap: 7px;
}

.activity-page-size-btn {
  min-width: 38px;
  min-height: 30px;
}

.activity-page-summary,
.activity-page-indicator {
  font-size: 6.5px;
}

@media (max-width: 1100px) {
  .activity-toolbar {
    grid-template-columns: 1fr;
  }

  .activity-toolbar-left {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-toolbar-left #activity-period-filter {
    grid-column: auto;
  }

  .activity-toolbar-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .activity-toolbar-left {
    grid-template-columns: 1fr;
  }

  .activity-toolbar-actions {
    width: 100%;
  }

  .activity-toolbar-actions .btn {
    flex: 1 1 0;
  }
}


/* =====================================================
   LOGS ALIGNMENT + READABILITY — V14.10.3
   ===================================================== */

#route-activity .container {
  max-width: 1280px;
}

/* Hero */
#route-activity .hero {
  padding-top: 10px;
  padding-bottom: 14px;
}

#route-activity .hero h1 {
  margin-bottom: 8px;
}

#route-activity .page-subtitle {
  font-size: 10px;
  line-height: 1.55;
}

/* Stats */
.activity-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.activity-stats .stat-card {
  min-height: 104px;
  padding: 17px 18px;
}

.activity-stats .stat-label {
  font-size: 8px;
}

.activity-stats .stat-value {
  font-size: 28px;
  line-height: 1;
}

.activity-stats .stat-meta {
  font-size: 7.5px;
  line-height: 1.4;
}

/* Toolbar = clean 2-row layout */
.activity-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
}

.activity-toolbar-left {
  display: grid;
  grid-template-columns:
    minmax(240px, 1.45fr)
    minmax(155px, .9fr)
    minmax(155px, .9fr)
    minmax(165px, 1fr)
    minmax(155px, .9fr);
  gap: 9px;
  width: 100%;
}

.activity-toolbar-left #activity-period-filter {
  grid-column: auto;
}

.activity-toolbar-left .admin-search,
.activity-toolbar-left .admin-filter {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 14px;
  border-radius: 10px;
  font-size: 9px;
}

.activity-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  width: 100%;
  padding: 0;
}

.activity-toolbar-actions .btn {
  min-width: 150px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 8.5px;
}

/* Main card */
.activity-card .users-card-top {
  padding: 18px 20px;
}

.activity-card .users-card-top h2 {
  font-size: 14px;
}

.activity-card .users-card-top p {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.45;
}

#activity-visible-count {
  font-size: 8px;
}

/* Table alignment */
.activity-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}

.activity-table th,
.activity-table td {
  text-align: left !important;
}

.activity-table thead th {
  height: 38px;
  padding: 0 16px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .09em;
  vertical-align: middle;
}

.activity-table th.activity-col-time {
  width: 150px;
}

.activity-table th.activity-col-event {
  width: 290px;
}

.activity-table th.activity-col-user {
  width: 210px;
}

.activity-table th.activity-col-context {
  width: auto;
}

.activity-row td {
  padding: 12px 16px;
  vertical-align: middle;
}

.activity-row td:first-child {
  padding-left: 22px;
}

.activity-row td:first-child::before {
  left: 8px;
  top: 12px;
  bottom: 12px;
}

/* Time */
.activity-time-relative {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}

.activity-time-exact {
  margin-top: 4px;
  font-size: 7px;
  line-height: 1.2;
}

/* Event */
.activity-event-cell {
  align-items: flex-start;
  gap: 7px;
}

.activity-event-top {
  justify-content: flex-start;
}

.activity-category-pill {
  padding: 4px 8px;
  font-size: 6px;
}

.activity-event-title {
  font-size: 9px;
  line-height: 1.35;
}

/* User */
.activity-actor-v2 {
  align-items: flex-start;
  gap: 6px;
}

.activity-actor-v2 > strong {
  font-size: 9px;
  line-height: 1.25;
}

.activity-role-pill {
  min-height: 19px;
  padding-inline: 7px;
  font-size: 6px;
}

/* Context */
.activity-context-cell {
  align-items: flex-start;
  gap: 5px;
}

.activity-context-cell strong {
  font-size: 8.5px;
  line-height: 1.25;
}

.activity-context-cell span {
  font-size: 7.2px;
  line-height: 1.4;
}

.activity-context-cell strong,
.activity-context-cell span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pagination */
.activity-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 58px;
  padding: 11px 16px;
  gap: 16px;
}

.activity-page-size {
  justify-self: start;
}

.activity-page-summary {
  justify-self: center;
  font-size: 7.5px;
}

.activity-page-controls {
  justify-self: end;
}

.activity-page-indicator {
  font-size: 7.5px;
}

.activity-page-size-btn,
.activity-page-controls .btn {
  min-height: 32px;
  font-size: 7.5px;
}

/* Responsive */
@media (max-width: 1120px) {
  .activity-toolbar-left {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-toolbar-left #activity-search {
    grid-column: 1 / -1;
  }

  .activity-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .activity-toolbar-left,
  .activity-stats {
    grid-template-columns: 1fr;
  }

  .activity-toolbar-left #activity-search {
    grid-column: auto;
  }

  .activity-toolbar-actions {
    flex-direction: column;
  }

  .activity-toolbar-actions .btn {
    width: 100%;
  }

  .activity-pagination {
    grid-template-columns: 1fr;
  }

  .activity-page-size,
  .activity-page-summary,
  .activity-page-controls {
    justify-self: stretch;
  }

  .activity-page-controls {
    justify-content: space-between;
  }
}


/* =====================================================
   LOG FILTER GRID — V14.10.4
   ===================================================== */

/*
  Desktop layout:
  Row 1: [ Search -------- ] [ User ] [ Category ] [ Action ]
  Row 2: [ Period -------- ] [       ] [ Reset    ] [ Delete ]
*/
#route-activity .activity-toolbar {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(0, 1.35fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1fr);
  grid-template-rows: 44px 44px;
  gap: 10px;
  align-items: stretch;
  padding: 14px;
}

#route-activity .activity-toolbar-left,
#route-activity .activity-toolbar-actions {
  display: contents;
}

/* Native selects stay hidden once custom selects are initialized. */
#route-activity #activity-search {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 44px;
}

#route-activity .custom-select[data-select-id="activity-user-filter"] {
  grid-column: 3;
  grid-row: 1;
}

#route-activity .custom-select[data-select-id="activity-category-filter"] {
  grid-column: 4;
  grid-row: 1;
}

#route-activity .custom-select[data-select-id="activity-action-filter"] {
  grid-column: 5;
  grid-row: 1;
}

#route-activity .custom-select[data-select-id="activity-period-filter"] {
  grid-column: 1 / 3;
  grid-row: 2;
}

/* Ensure every custom select really fills its grid cell. */
#route-activity .activity-toolbar .custom-select {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px;
  margin: 0 !important;
}

#route-activity .activity-toolbar .custom-select-trigger {
  width: 100%;
  min-width: 0;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  font-size: 9px !important;
}

#route-activity #reset-activity-filters {
  grid-column: 4;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
}

#route-activity #clear-activity-btn {
  grid-column: 5;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
}

/* When hidden, the delete button must not reserve space. */
#route-activity #clear-activity-btn.hidden {
  display: none !important;
}

/* ADMIN only: keep Reset aligned at the far right. */
#route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
#reset-activity-filters {
  grid-column: 5;
}

/* Search visually matches the custom selects. */
#route-activity #activity-search {
  padding: 0 14px;
  border-radius: 10px;
  font-size: 9px;
}

/* Tablet */
@media (max-width: 1050px) {
  #route-activity .activity-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  #route-activity #activity-search {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn {
    grid-column: auto;
    grid-row: auto;
  }

  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: 2;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #route-activity .activity-toolbar {
    grid-template-columns: 1fr;
  }

  #route-activity #activity-search,
  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn,
  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: 1;
  }
}


/* =====================================================
   LOG TABLE CENTERING — V14.10.5
   ===================================================== */

/* Headers */
#route-activity .activity-table thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Cells */
#route-activity .activity-table tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* First column: keep the status line while centering content */
#route-activity .activity-row td:first-child {
  padding-left: 22px;
  padding-right: 16px;
}

#route-activity .activity-time-cell {
  text-align: center !important;
}

#route-activity .activity-time-relative,
#route-activity .activity-time-exact {
  text-align: center;
}

/* Event column */
#route-activity .activity-event-cell {
  align-items: center;
  justify-content: center;
  text-align: center;
}

#route-activity .activity-event-top {
  justify-content: center;
}

#route-activity .activity-event-title {
  text-align: center;
}

/* User column */
#route-activity .activity-actor-v2 {
  align-items: center;
  justify-content: center;
  text-align: center;
}

#route-activity .activity-actor-v2 > strong {
  text-align: center;
}

/* Target / detail column */
#route-activity .activity-context-cell {
  align-items: center;
  justify-content: center;
  text-align: center;
}

#route-activity .activity-context-cell strong,
#route-activity .activity-context-cell span {
  text-align: center;
}

/* Keep all columns visually balanced */
#route-activity .activity-table th.activity-col-time {
  width: 150px;
}

#route-activity .activity-table th.activity-col-event {
  width: 300px;
}

#route-activity .activity-table th.activity-col-user {
  width: 210px;
}

#route-activity .activity-table th.activity-col-context {
  width: auto;
}

/* Footer pagination alignment */
#route-activity .activity-pagination {
  grid-template-columns: 1fr 1fr 1fr;
}

#route-activity .activity-page-size {
  justify-self: start;
}

#route-activity .activity-page-summary {
  justify-self: center;
  text-align: center;
}

#route-activity .activity-page-controls {
  justify-self: end;
}


/* =====================================================
   SUPER ADMIN LOG FILTER ALIGNMENT — V14.10.6
   ===================================================== */

/*
  Desktop:
  Row 1 = Recherche (x2) | Utilisateur | Catégorie | Action | Période
  Row 2 = ........................................ | Reset | Delete

  This keeps every filter on one visual line and the destructive actions
  grouped together on the lower-right.
*/
#route-activity .activity-toolbar {
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  grid-template-rows: 44px 44px;
  gap: 10px;
}

/* Search */
#route-activity #activity-search {
  grid-column: 1 / 3;
  grid-row: 1;
}

/* Filters */
#route-activity .custom-select[data-select-id="activity-user-filter"] {
  grid-column: 3;
  grid-row: 1;
}

#route-activity .custom-select[data-select-id="activity-category-filter"] {
  grid-column: 4;
  grid-row: 1;
}

#route-activity .custom-select[data-select-id="activity-action-filter"] {
  grid-column: 5;
  grid-row: 1;
}

#route-activity .custom-select[data-select-id="activity-period-filter"] {
  grid-column: 6;
  grid-row: 1;
}

/* Actions grouped cleanly at the right */
#route-activity #reset-activity-filters {
  grid-column: 5;
  grid-row: 2;
}

#route-activity #clear-activity-btn {
  grid-column: 6;
  grid-row: 2;
}

/* ADMIN: only reset, aligned far-right */
#route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
#reset-activity-filters {
  grid-column: 6;
  grid-row: 2;
}

/* Equal heights / widths */
#route-activity #activity-search,
#route-activity .activity-toolbar .custom-select,
#route-activity .activity-toolbar .custom-select-trigger,
#route-activity #reset-activity-filters,
#route-activity #clear-activity-btn {
  height: 44px !important;
  min-height: 44px !important;
}

#route-activity #reset-activity-filters,
#route-activity #clear-activity-btn {
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
}

/* Tablet */
@media (max-width: 1180px) {
  #route-activity .activity-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  #route-activity #activity-search {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn,
  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #route-activity .activity-toolbar {
    grid-template-columns: 1fr;
  }

  #route-activity #activity-search,
  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn,
  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: 1;
  }
}


/* =====================================================
   LOG REASON COLUMN — V14.10.7
   ===================================================== */

#route-activity .activity-table {
  min-width: 980px;
}

#route-activity .activity-table th.activity-col-time {
  width: 135px;
}

#route-activity .activity-table th.activity-col-category {
  width: 155px;
}

#route-activity .activity-table th.activity-col-reason {
  width: 220px;
}

#route-activity .activity-table th.activity-col-user {
  width: 190px;
}

#route-activity .activity-table th.activity-col-context {
  width: auto;
}

#route-activity .activity-category-cell,
#route-activity .activity-reason-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  text-align: center;
}

#route-activity .activity-reason-cell strong {
  color: var(--text);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

#route-activity .activity-category-cell .activity-category-pill {
  margin: 0;
}

#route-activity .activity-category-cell .activity-severity-dot {
  flex: 0 0 auto;
}

/* Old combined event layout no longer used */
#route-activity .activity-event-cell,
#route-activity .activity-event-top,
#route-activity .activity-event-title {
  display: none;
}


/* =====================================================
   LOG FILTER LAYOUT — V14.10.8
   Search on top, all menus aligned below
   ===================================================== */

#route-activity .activity-toolbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 44px 44px 44px;
  gap: 10px;
  padding: 14px;
}

/* Search = full width first row */
#route-activity #activity-search {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 44px;
}

/* Second row = all filters aligned */
#route-activity .custom-select[data-select-id="activity-user-filter"] {
  grid-column: 1 / 3;
  grid-row: 2;
}

#route-activity .custom-select[data-select-id="activity-category-filter"] {
  grid-column: 3 / 4;
  grid-row: 2;
}

#route-activity .custom-select[data-select-id="activity-action-filter"] {
  grid-column: 4 / 5;
  grid-row: 2;
}

#route-activity .custom-select[data-select-id="activity-period-filter"] {
  grid-column: 5 / 7;
  grid-row: 2;
}

/* Third row = actions on the right */
#route-activity #reset-activity-filters {
  grid-column: 5;
  grid-row: 3;
}

#route-activity #clear-activity-btn {
  grid-column: 6;
  grid-row: 3;
}

/* ADMIN: only reset, still right aligned */
#route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
#reset-activity-filters {
  grid-column: 6;
  grid-row: 3;
}

/* Consistent sizing */
#route-activity .activity-toolbar .custom-select,
#route-activity .activity-toolbar .custom-select-trigger,
#route-activity #activity-search,
#route-activity #reset-activity-filters,
#route-activity #clear-activity-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
}

/* Tablet */
@media (max-width: 1050px) {
  #route-activity .activity-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  #route-activity #activity-search {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn,
  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #route-activity .activity-toolbar {
    grid-template-columns: 1fr;
  }

  #route-activity #activity-search,
  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn,
  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: 1;
  }
}


/* =====================================================
   LOG USER / ROLE SPLIT — V14.10.9
   ===================================================== */

#route-activity .activity-table {
  min-width: 1080px;
}

#route-activity .activity-table th.activity-col-time {
  width: 130px;
}

#route-activity .activity-table th.activity-col-category {
  width: 145px;
}

#route-activity .activity-table th.activity-col-reason {
  width: 205px;
}

#route-activity .activity-table th.activity-col-user {
  width: 180px;
}

#route-activity .activity-table th.activity-col-role {
  width: 145px;
}

#route-activity .activity-table th.activity-col-context {
  width: auto;
}

#route-activity .activity-actor-name-only {
  align-items: center;
  justify-content: center;
}

#route-activity .activity-role-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  text-align: center;
}

#route-activity .activity-role-empty {
  color: var(--text-soft);
  font-size: 8px;
}

#route-activity .activity-role-cell .activity-role-pill {
  margin: 0;
}


/* =====================================================
   LOG FILTER ACTIONS TOP ROW — V14.10.10
   ===================================================== */

/*
  Desktop:
  Row 1: [ Search --------------------------- ] [ Reset ] [ Delete ]
  Row 2: [ User ] [ Category ] [ Action ] [ Period ]
*/
#route-activity .activity-toolbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 44px 44px;
  gap: 10px;
}

/* Search takes most of the first row */
#route-activity #activity-search {
  grid-column: 1 / 5;
  grid-row: 1;
}

/* Actions are now on the same top row */
#route-activity #reset-activity-filters {
  grid-column: 5;
  grid-row: 1;
}

#route-activity #clear-activity-btn {
  grid-column: 6;
  grid-row: 1;
}

/* ADMIN: only Reset, aligned at far right on the top row */
#route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
#reset-activity-filters {
  grid-column: 6;
  grid-row: 1;
}

/* Second row = filters */
#route-activity .custom-select[data-select-id="activity-user-filter"] {
  grid-column: 1 / 3;
  grid-row: 2;
}

#route-activity .custom-select[data-select-id="activity-category-filter"] {
  grid-column: 3;
  grid-row: 2;
}

#route-activity .custom-select[data-select-id="activity-action-filter"] {
  grid-column: 4;
  grid-row: 2;
}

#route-activity .custom-select[data-select-id="activity-period-filter"] {
  grid-column: 5 / 7;
  grid-row: 2;
}

/* Keep all controls perfectly aligned */
#route-activity #activity-search,
#route-activity #reset-activity-filters,
#route-activity #clear-activity-btn,
#route-activity .activity-toolbar .custom-select,
#route-activity .activity-toolbar .custom-select-trigger {
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
}

/* Tablet */
@media (max-width: 1050px) {
  #route-activity .activity-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  #route-activity #activity-search {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn,
  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #route-activity .activity-toolbar {
    grid-template-columns: 1fr;
  }

  #route-activity #activity-search,
  #route-activity #reset-activity-filters,
  #route-activity #clear-activity-btn,
  #route-activity .custom-select[data-select-id="activity-user-filter"],
  #route-activity .custom-select[data-select-id="activity-category-filter"],
  #route-activity .custom-select[data-select-id="activity-action-filter"],
  #route-activity .custom-select[data-select-id="activity-period-filter"],
  #route-activity .activity-toolbar:has(#clear-activity-btn.hidden)
  #reset-activity-filters {
    grid-column: 1;
  }
}


/* =====================================================
   ROUTE ACCESS NOTICE — V15.0
   ===================================================== */
.route-access-notice {
  position: fixed;
  top: 72px;
  left: 50%;
  z-index: 9999;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 28px));
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, #d69b46 40%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, #d69b46);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  font-size: 8px;
  font-weight: 700;
}


/* =====================================================
   GLOBAL UX POLISH — V15.1
   ===================================================== */

:root {
  --control-height: 42px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
}

/* Global API activity indicator */
.global-api-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  width: 100%;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity .12s ease;
}

.global-api-loader.visible {
  opacity: 1;
}

.global-api-loader span {
  display: block;
  width: 34%;
  height: 100%;
  background: var(--accent);
  transform: translateX(-110%);
  animation: prt-global-load 1s ease-in-out infinite;
}

@keyframes prt-global-load {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(175%); }
  100% { transform: translateX(310%); }
}

/* Keyboard accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
.custom-select-trigger:focus-visible,
.nav-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 2px;
}

/* Buttons */
.btn {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  font-weight: 760;
  letter-spacing: .01em;
  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease,
    opacity .12s ease;
}

.btn:not(:disabled):active {
  transform: translateY(1px);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* Inputs */
.input,
.select,
.custom-select-trigger {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
}

.input,
.select {
  font-size: 9px;
}

.field > label,
.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 7.5px;
  font-weight: 760;
  letter-spacing: .025em;
}

/* Cards */
.card {
  border-radius: var(--radius-lg);
}

.section-heading,
.preferences-head,
.users-card-top,
.company-management-head {
  gap: 18px;
}

.section-heading h2,
.preferences-head h2,
.users-card-top h2,
.company-management-head h2 {
  letter-spacing: -.015em;
}

/* Tables */
.users-table-wrap,
.company-table-wrap {
  border-radius: 12px;
}

table thead th {
  white-space: nowrap;
}

table tbody tr {
  transition: background .12s ease;
}

table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 3.5%, transparent);
}

/* Empty states */
.empty-state,
.sessions-empty,
.dashboard-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 20px;
  text-align: center;
  color: var(--text-soft);
  font-size: 8px;
  line-height: 1.5;
}

/* Unified feedback */
.security-feedback,
.auth-error {
  border-radius: 10px;
  line-height: 1.45;
}

.security-feedback:not(:empty),
.auth-error:not(:empty) {
  padding: 10px 12px;
}

/* Modals */
.modal-backdrop {
  padding: 22px;
  backdrop-filter: blur(7px);
}

.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 44px));
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

.modal-head {
  min-height: 64px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.modal-head h2 {
  font-size: 14px;
  letter-spacing: -.015em;
}

.modal-body {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: 18px;
}

.modal-actions {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  gap: 9px;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* Administration tables */
#route-admin .users-card-v2,
#route-admin .company-management-card {
  overflow: hidden;
}

#route-admin .users-table-wrap table,
#route-admin .company-table-wrap table {
  width: 100%;
}

#route-admin tbody td {
  vertical-align: middle;
}

/* Links */
#route-links .card {
  overflow: visible;
}

/* Sessions */
.sessions-list {
  display: grid;
  gap: 10px;
}

.session-item {
  border-radius: 13px;
}

.session-info-grid {
  gap: 8px;
}

.session-info {
  border-radius: 9px;
}

/* Dashboard cohesion */
.dashboard-stat-card,
.dashboard-panel,
.stat-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.dashboard-shortcut,
.dashboard-panel-link {
  min-height: 40px;
}

/* Footer */
footer {
  margin-top: 28px;
}

/* Responsive */
@media (max-width: 760px) {
  .modal-backdrop {
    padding: 12px;
  }

  .modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .modal-head,
  .modal-body,
  .modal-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .modal-actions {
    flex-wrap: wrap;
  }

  .modal-actions .btn {
    flex: 1 1 150px;
  }
}


/* =====================================================
   PUBLIC PARTNER LINK META — V15.1.4
   ===================================================== */
.partner-link-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.partner-meta-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
}

.partner-meta-label {
  color: var(--text-soft);
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.partner-meta-value {
  color: var(--text);
  font-size: 10px;
  line-height: 1.35;
}

.partner-meta-note {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 10px;
  color: var(--text-soft);
  font-size: 8px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .partner-link-meta {
    grid-template-columns: 1fr;
  }

  .partner-meta-note {
    grid-column: 1;
  }
}


/* =====================================================
   PARTNER PUBLIC PAGE — SAFE REDESIGN V15.1.6
   HTML structure is untouched.
   ===================================================== */

#partner-view {
  min-height: 100vh;
  padding: 42px 0 28px;
  background:
    radial-gradient(circle at 50% -18%, rgba(43, 91, 151, .10), transparent 34%),
    #0d0f12;
}

#partner-view > .container {
  width: min(100% - 32px, 900px);
  max-width: 900px;
}

#partner-view .partner-shell {
  max-width: 820px;
  margin: 0 auto;
}

#partner-view .partner-intro {
  margin-bottom: 24px;
  text-align: center;
}

#partner-view .partner-intro .eyebrow {
  margin-bottom: 10px;
  color: #7f9fc1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .20em;
}

#partner-view .partner-intro h1 {
  margin: 0;
  color: #f4f6f9;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

#partner-view .partner-intro > p:last-child {
  max-width: 520px;
  margin: 12px auto 0;
  color: #9da8b5;
  font-size: 10px;
  line-height: 1.6;
}

#partner-view .access-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid #303843;
  border-radius: 18px;
  background: #15191e;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}

#partner-view .access-card-header {
  padding: 22px 26px;
  border-bottom: 1px solid #2b333c;
  background: #14181d;
}

#partner-view .access-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

#partner-view .access-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border: 1px solid rgba(91,157,228,.42);
  border-radius: 12px;
  background: linear-gradient(180deg, #28598f, #1d4168);
  color: transparent;
  font-size: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

#partner-view .access-logo::before {
  content: "";
  width: 20px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

#partner-view .access-logo::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 12px;
  height: 10px;
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  transform: translateX(-50%);
  box-sizing: border-box;
}

#partner-view .access-brand h2 {
  margin: 0;
  color: #f5f6f8;
  font-size: 17px;
  font-weight: 760;
}

#partner-view .access-brand p {
  margin: 4px 0 0;
  color: #8f9aa7;
  font-size: 9px;
}

#partner-view .access-body {
  padding: 26px;
}

#partner-view .access-block + .access-block {
  margin-top: 20px;
}

#partner-view .access-label {
  display: block;
  margin-bottom: 7px;
  color: #7f8d9e;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#partner-view .access-id-row,
#partner-view .access-password-box {
  border: 1px solid #34404d;
  border-radius: 13px;
  background: #1a2027;
}

#partner-view .access-id-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px 12px 10px 16px;
}

#partner-view .access-id,
#partner-view .access-password {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f4f6f8;
  font-size: 15px;
  font-weight: 760;
}

#partner-view .access-password {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#partner-view .access-password-box {
  padding: 10px 12px 10px 16px;
}

#partner-view .access-password-top {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#partner-view #copy-id-btn,
#partner-view #partner-copy-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #3b6f9f;
  border-radius: 10px;
  background: #182b3f;
  color: #f2f5f8;
  box-shadow: none;
}

#partner-view #copy-id-btn {
  min-width: 98px;
}

#partner-view #partner-copy-btn {
  min-width: 165px;
}

#partner-view .partner-link-meta {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  margin-top: 20px;
}

#partner-view .partner-meta-card {
  min-height: 112px;
  padding: 16px;
  border: 1px solid #303a46;
  border-radius: 13px;
  background: #171c22;
}

#partner-view .partner-meta-label {
  display: block;
  margin-bottom: 14px;
  color: #8492a2;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#partner-view .partner-meta-value {
  display: block;
  color: #f4f6f8;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

#partner-view .partner-meta-card:first-child .partner-meta-value {
  color: #dbe6f2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: .01em;
}

#partner-view .partner-meta-card:nth-child(2) .partner-meta-value {
  font-size: 19px;
  font-weight: 780;
}

#partner-view .partner-meta-note {
  grid-column: 1 / -1;
  padding: 11px 13px;
  border: 1px solid #303943;
  border-radius: 10px;
  background: #151a20;
  color: #8f9aa7;
  font-size: 8px;
  line-height: 1.5;
}

#partner-view .partner-notice {
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px solid #31455c;
  border-radius: 12px;
  background: #19232d;
}

#partner-view .partner-notice strong {
  display: block;
  margin-bottom: 4px;
  color: #f0f3f6;
  font-size: 10px;
}

#partner-view .partner-notice span {
  color: #96a2b0;
  font-size: 8px;
}

#partner-view footer {
  margin-top: 26px !important;
}

#partner-view .footer-content {
  padding-top: 18px;
  border-top: 1px solid #293039;
  color: #6f7b89;
  font-size: 7px;
}

@media (max-width: 700px) {
  #partner-view {
    padding-top: 28px;
  }

  #partner-view > .container {
    width: min(100% - 22px, 900px);
  }

  #partner-view .access-card-header,
  #partner-view .access-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  #partner-view .partner-link-meta {
    grid-template-columns: 1fr;
  }

  #partner-view .partner-meta-note {
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  #partner-view .partner-intro h1 {
    font-size: 30px;
  }

  #partner-view .access-id-row {
    grid-template-columns: 1fr;
  }

  #partner-view .access-password-top {
    align-items: stretch;
    flex-direction: column;
  }

  #partner-view #copy-id-btn,
  #partner-view #partner-copy-btn {
    width: 100%;
  }
}