:root {
    color-scheme: dark;
  }

  body {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    background-color: transparent;
    color: #fff;
    margin: 0;
    overflow: auto;
    scrollbar-width: thin;
  }

  [hidden] {
    display: none !important;
  }

  body.login-body {
    background: radial-gradient(circle at 20% 20%, rgba(93, 134, 255, 0.18), transparent 35%),
      radial-gradient(circle at 80% 0%, rgba(90, 140, 255, 0.12), transparent 32%), #05060a;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
  }

  .login-wrapper {
    width: min(420px, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-card {
    width: 100%;
    background: rgba(14, 18, 27, 0.9);
    border: 1px solid rgba(96, 121, 187, 0.4);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .login-logo {
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 4px;
    user-select: none;
  }

  .login-card h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: 0.4px;
  }

  .login-card p {
    margin: 0;
  }

  .login-card form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
  }

  .login-card label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
  }

  .login-card input {
    background: rgba(5, 6, 11, 0.9);
    border: 1px solid rgba(96, 121, 187, 0.35);
    border-radius: 10px;
    padding: 12px;
    color: #f5f7ff;
    font-size: 14px;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
  }

  .login-card input:focus {
    border-color: rgba(125, 155, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(125, 155, 255, 0.22);
  }

  .login-card .btn {
    margin-top: 8px;
  }

  .login-footer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  .alert {
    background: rgba(255, 121, 121, 0.12);
    border: 1px solid rgba(255, 121, 121, 0.35);
    color: #ffb3b3;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
  }

  .alert.success {
    background: rgba(86, 220, 160, 0.12);
    border-color: rgba(86, 220, 160, 0.35);
    color: #c1f3dc;
  }

  .alert.warning {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.35);
    color: #ffe082;
  }

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

  *::-webkit-scrollbar-track {
    background: rgba(10, 13, 22, 0.8);
    border-radius: 8px;
  }

  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(86, 116, 191, 0.9), rgba(64, 90, 155, 0.85));
    border-radius: 8px;
    border: 2px solid rgba(10, 13, 22, 0.8);
  }

  .drag-region {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    height: 30px;
    -webkit-app-region: drag;
    z-index: 1001;
    background: #0e121b;
  }
  
  #header-stop-container {
    position: fixed;
    top: 0;
    left: 240px;
    padding: 5px 10px;
    background-color: rgba(14, 18, 27, 0.9);
    z-index: 1005;
    -webkit-app-region: no-drag;
    display: flex;
    align-items: center;
  }

  #window-controls {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    gap: 5px;
    padding: 5px 10px;
    background-color: rgba(14, 18, 27, 0.9);
    z-index: 1005;
    -webkit-app-region: no-drag;
    align-items: center;
  }
  
  .control-btn {
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
  }
  
  .control-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .control-btn:hover {
    background-color: #2a2f3b;
  }
  
  .close-btn:hover {
    background-color: #e81123;
  }
  
  #sidebar {
    width: 240px;
    overflow: visible;
    background: linear-gradient(to bottom, rgba(17, 21, 32, 0.9), rgba(32, 43, 63, 0.9));
    backdrop-filter: blur(10px);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 1300;
  }

  .sidebar-logo-collapsed {
    display: none;
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  }

  .sidebar-collapse-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(125, 155, 255, 0.35);
    background: rgba(8, 11, 18, 0.82);
    color: #eef3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  .sidebar-collapse-btn:hover {
    border-color: rgba(125, 155, 255, 0.62);
    background: rgba(25, 35, 56, 0.95);
  }

  .sidebar-collapse-btn > span {
    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
    font-size: 13px;
    line-height: 1;
  }

  .sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .sidebar-header {
    padding: 15px 15px 10px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    overflow: visible;
  }

  .brand-logo {
    width: 150px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  }

  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .brand-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.6px;
  }

  .brand-subtitle {
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: none;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
  }

  .no-select {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }

  .sidebar-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }

  .sidebar-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
  }
  
  .sidebar-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .sidebar-btn,
  .sidebar-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    border: none;
    padding: 10px 14px;
    background-color: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, margin 0.3s;
    margin: 0;
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
  }
  
  .sidebar-btn:hover,
  .sidebar-link:hover {
    background-color: rgba(42, 47, 59, 0.6);
  }
  
  .sidebar-btn.active,
  .sidebar-link.active {
    background-color: rgba(42, 47, 59, 0.7);
    margin: 0;
    width: 100%;
  }
  
  .sidebar-btn svg,
  .sidebar-link svg {
    margin-right: 12px;
    width: 18px;
    height: 18px;
  }

  .sidebar-link-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-notify {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 121, 121, 0.55);
    background: rgba(255, 121, 121, 0.18);
    color: #ffd9d9;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
    box-sizing: border-box;
  }

  .sidebar-link-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex: 0 0 18px;
    margin-right: 12px;
  }

  .sidebar-link-icon svg {
    width: 18px;
    height: 18px;
    margin-right: 0 !important;
  }

  .sidebar-link:hover .sidebar-link-icon,
  .sidebar-link.active .sidebar-link-icon {
    color: inherit;
  }

  /* (reserved for future sidebar nesting) */

  .sidebar-footer {
    margin-top: auto;
    padding: 18px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    min-height: 188px;
  }

  .sidebar-footer > * {
    width: 100%;
    max-width: 196px;
    box-sizing: border-box;
  }

  .sidebar-user {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(125, 155, 255, 0.35);
    background: rgba(125, 155, 255, 0.12);
    color: #e5edff;
    text-align: center;
    font-size: 13px;
  }

  .sidebar-footer select {
    width: 100%;
    max-width: 180px;
    background: rgba(5, 6, 11, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.35);
    border-radius: 10px;
    color: #f5f7ff;
    padding: 8px 10px;
  }

  .sidebar-footer .btn {
    width: 100%;
    max-width: 180px;
    justify-content: center;
  }

  .app-version {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }

  .sidebar-footer .banner {
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    text-align: left;
  }

  .sidebar-header-actions {
    width: auto;
    display: flex;
    justify-content: flex-end;
    position: relative;
    align-self: flex-start;
    flex-shrink: 0;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(96, 121, 187, 0.35);
    border-radius: 10px;
    background: rgba(8, 11, 18, 0.9);
    color: #e8eeff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
  }

  .icon-btn:hover {
    background: rgba(32, 43, 63, 0.9);
  }

  .sidebar-header .icon-btn,
  .sidebar-tools .icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
  }

  .sidebar-header .icon-btn:hover,
  .sidebar-tools .icon-btn:hover {
    background: rgba(32, 43, 63, 0.5);
  }

  .sidebar-notify-inline {
    position: absolute;
    top: 2px;
    right: 2px;
    margin-left: 0;
    min-width: 15px;
    height: 15px;
    line-height: 13px;
    padding: 0 4px;
    font-size: 10px;
    border-width: 1px;
  }

  .sidebar-tools {
    width: 100%;
    max-width: 196px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: auto;
  }

  .sidebar-footer .sidebar-lang-select {
    width: 56px;
    height: 36px;
    max-width: 56px;
    min-width: 56px;
    padding: 6px 20px 6px 8px;
    font-size: 12px;
    border-radius: 10px;
  }

  .sidebar-footer .app-version {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
  }

  body.sidebar-collapsed #sidebar {
    width: 74px;
    align-items: center;
  }

  body.sidebar-collapsed #content {
    margin-left: 74px;
  }

  body.sidebar-collapsed .drag-region,
  body.sidebar-collapsed #header-stop-container {
    left: 74px;
  }

  body.sidebar-collapsed .sidebar-header {
    width: 100%;
    padding: 12px 8px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  body.sidebar-collapsed .sidebar-logo-collapsed {
    display: block;
    filter: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body.sidebar-collapsed .brand-text,
  body.sidebar-collapsed .sidebar-link-label,
  body.sidebar-collapsed #app-update-badge {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-header-actions {
    display: flex !important;
    order: 2;
    align-self: center;
  }

  body.sidebar-collapsed .sidebar-collapse-btn {
    order: 3;
  }

  body.sidebar-collapsed #notifications-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(125, 155, 255, 0.35);
    background: rgba(8, 11, 18, 0.82);
  }

  body.sidebar-collapsed #notifications-btn:hover {
    border-color: rgba(125, 155, 255, 0.62);
    background: rgba(25, 35, 56, 0.95);
  }

  body.sidebar-collapsed .sidebar-collapse-btn > span {
    transform: rotate(0deg);
  }

  body.sidebar-collapsed .sidebar-content {
    width: 100%;
  }

  body.sidebar-collapsed .sidebar-nav {
    padding: 8px 6px 12px;
    align-items: center;
  }

  body.sidebar-collapsed .sidebar-link {
    width: 52px;
    min-height: 44px;
    padding: 10px;
    justify-content: center;
    border-radius: 12px;
  }

  body.sidebar-collapsed .sidebar-link-icon {
    margin-right: 0;
  }

  body.sidebar-collapsed .sidebar-footer {
    width: 100%;
    padding: 10px 6px 12px;
    gap: 8px;
    min-height: 140px;
  }

  body.sidebar-collapsed .sidebar-tools {
    flex-direction: column;
    gap: 8px;
    max-width: none;
    width: 100%;
  }

  body.sidebar-collapsed .sidebar-footer .app-version {
    margin-top: 2px;
    font-size: 11px;
    white-space: nowrap;
    width: 100%;
  }

  .profile-hover-card {
    position: fixed;
    z-index: 2100;
    min-width: 220px;
    max-width: 300px;
    border: 1px solid rgba(96, 121, 187, 0.35);
    border-radius: 10px;
    background: rgba(11, 16, 27, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
    color: #eef3ff;
    pointer-events: none;
  }

  .profile-hover-card > div + div {
    margin-top: 3px;
  }

  .notifications-dropdown {
    position: absolute;
    left: calc(100% + 8px);
    right: auto;
    top: -2px;
    width: 320px;
    max-height: 360px;
    overflow: auto;
    border: 1px solid rgba(96, 121, 187, 0.35);
    border-radius: 12px;
    background: rgba(6, 9, 17, 0.98);
    z-index: 2600;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    padding: 8px;
  }

  .notifications-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid rgba(96, 121, 187, 0.25);
    margin-bottom: 8px;
  }

  .notifications-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .notifications-empty {
    padding: 8px 6px;
  }

  .notification-row {
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    background: rgba(15, 20, 32, 0.7);
  }

  .notification-row .btn.btn-sm {
    min-height: 28px;
    padding: 5px 10px;
  }

  .notification-row:hover {
    background: rgba(25, 33, 50, 0.9);
  }

  .notification-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }

  .notification-message {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
  }

  #app-toast-container {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2200;
    pointer-events: none;
  }

  .app-toast {
    min-width: 260px;
    max-width: 380px;
    border-radius: 10px;
    border: 1px solid rgba(96, 121, 187, 0.35);
    background: rgba(13, 18, 30, 0.96);
    color: #e7eeff;
    padding: 10px 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .app-toast-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .app-toast-close {
    border: none;
    background: transparent;
    color: rgba(231, 238, 255, 0.75);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px;
  }

  .app-toast-close:hover {
    color: #ffffff;
  }

  .app-toast.show {
    opacity: 1;
    transform: translateY(0);
  }

  .app-toast.success {
    border-color: rgba(86, 220, 160, 0.45);
  }

  .app-toast.error {
    border-color: rgba(255, 121, 121, 0.45);
  }
  
  #tab-header {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    height: 30px;
    padding: 5px 15px;
    background-color: #0e121b;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    display: flex;
    align-items: center;
  }
  
  #content {
    margin-left: 240px;
    padding: 40px 20px 24px;
    background:
      radial-gradient(circle at top right, rgba(78, 120, 214, 0.16), transparent 28%),
      radial-gradient(circle at left center, rgba(34, 87, 174, 0.12), transparent 24%),
      linear-gradient(180deg, #060911 0%, #09101a 46%, #07111b 100%);
    min-height: 100vh;
    overflow-y: auto;
  }

  #content.no-page-scroll {
    overflow: hidden !important;
    min-height: 0 !important;
    height: calc(100vh - 40px) !important;
  }

  #content.no-page-scroll #content-area {
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  body.no-page-scroll {
    overflow: hidden !important;
  }

  #content.no-page-scroll #docs-page,
  #content.no-page-scroll #reports-page {
    height: 100%;
    min-height: 0;
  }

  .page-header {
    margin-bottom: 20px;
  }
  
  #content-area {
    padding: 15px;
    position: relative;
    min-height: calc(100vh - 40px);
  }

  .section-wrapper.hidden {
    display: none;
  }

  .section-wrapper {
    height: 100%;
  }
  .window {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .minimize-animation {
    transform: translateY(100vh);
  }
  
  .maximize-animation {
    transform: scale(1.01);
  }
  
  .unmaximize-animation {
    transform: scale(0.98);
  }
  
  .close-animation {
    opacity: 0;
  }
  
  .restore-animation {
    animation: restoreSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  @keyframes restoreSlideUp {
    from {
      transform: translateY(100vh);
    }
    to {
      transform: translateY(0);
    }
  }
  .page {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  #accounts-page .tabs.browser-tabs {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    padding: 4px 4px 0;
    border-bottom: 1px solid rgba(125, 155, 255, 0.25);
  }

  #accounts-page .tabs.browser-tabs .tab-btn {
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 8px 14px;
    background: rgba(10, 14, 24, 0.6);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    position: relative;
    text-decoration: none;
  }

  #accounts-page .tabs.browser-tabs .tab-btn:hover {
    color: #fff;
    background: rgba(24, 32, 50, 0.8);
    transform: translateY(-2px);
  }

  #accounts-page .tabs.browser-tabs .tab-btn.active {
    background: rgba(20, 26, 38, 0.95);
    color: #fff;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
    z-index: 2;
  }

  #accounts-page .tabs.browser-tabs .tab-btn.active::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -2px;
    height: 4px;
    background: rgba(20, 26, 38, 0.95);
  }

  .page-header h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
  }

  .page-subtitle {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
  }

  .card {
    background: rgba(20, 26, 38, 0.95);
    border: 1px solid rgba(80, 110, 180, 0.15);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .card-header > div:first-child {
    flex: 1 1 240px;
    min-width: 220px;
  }

  .card-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }

  .card-header p {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
  }

  .btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #btn-templates {
    margin-top: 6px;
  }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-header + .card-body {
  padding-top: 28px;
}

.card-header + .card-body > :first-child {
  margin-top: 2px;
}

  .card-footer {
    display: flex;
    gap: 12px;
    margin-top: 12px;
  }

  .btn {
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    color: #f5f7ff;
    background: rgba(93, 134, 255, 0.18);
    text-decoration: none;
  }

  .btn.primary {
    background: linear-gradient(135deg, #5d86ff, #7d9bff);
    color: #05060a;
  }

  .btn.secondary {
    background: rgba(125, 155, 255, 0.18);
  }

  .btn.danger {
    background: rgba(255, 87, 87, 0.25);
    color: #ffb1b1;
  }

  .btn.ghost {
    background: transparent;
    border: 1px solid rgba(125, 155, 255, 0.25);
    color: rgba(255, 255, 255, 0.8);
  }

  .btn.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
  }

  .waf-ban-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .waf-ban-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .waf-ban-btn-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .waf-ban-btn-icon svg {
    width: 14px;
    height: 14px;
    display: block;
  }

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

  .banner {
    background: rgba(255, 202, 99, 0.12);
    border: 1px solid rgba(255, 202, 99, 0.35);
    color: #ffe7ac;
    padding: 12px 14px;
    border-radius: 12px;
    margin: 12px 16px 0 16px;
    text-align: center;
    font-size: 14px;
  }

  .app-update-link {
    display: block;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    padding: 4px 10px;
  }

  .settings-updates-banner {
    margin: 12px 0 0 0;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .btn:not(:disabled):active {
    transform: translateY(1px);
  }

  .form-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }

  .form-grid.two-column {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .form-grid.three-column {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .form-grid.single-column {
    grid-template-columns: 1fr;
  }

  .form-grid .form-field.wide {
    grid-column: span 2;
  }

  .form-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .form-field label,
  .form-field > span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.68);
  }

  .form-field.required label::after {
    content: ' *';
    color: #ff7575;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    background: rgba(5, 6, 11, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    color: #f5f7ff;
    font-size: 14px;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
  }

  .form-field input[type="date"],
  .form-field input[type="datetime-local"] {
    height: 40px;
    box-sizing: border-box;
  }

  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    border-color: rgba(125, 155, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(125, 155, 255, 0.2);
  }

  .form-field textarea {
    resize: none;
    min-height: 120px;
  }

  .form-field input:-webkit-autofill,
  .form-field input:-webkit-autofill:focus,
  .form-field input:-webkit-autofill:hover {
    -webkit-text-fill-color: #f5f7ff;
    box-shadow: 0 0 0 1000px rgba(5, 6, 11, 0.9) inset;
  }

  .input,
  .select,
  .textarea {
    background: rgba(5, 6, 11, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    color: #f5f7ff;
    font-size: 14px;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
  }

  .form-field select:not([multiple]):not([size]),
  .select:not([multiple]):not([size]),
  select.select-compact:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(186, 203, 255, 0.85) 50%),
      linear-gradient(135deg, rgba(186, 203, 255, 0.85) 50%, transparent 50%);
    background-position:
      calc(100% - 16px) calc(50% - 2px),
      calc(100% - 11px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
  }

  select option,
  select optgroup {
    background: #0f1524;
    color: #f5f7ff;
  }

  .input:focus,
  .select:focus,
  .textarea:focus {
    border-color: rgba(125, 155, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(125, 155, 255, 0.2);
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    color-scheme: dark;
    background: rgba(5, 6, 11, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.3);
    border-radius: 8px;
    padding: 9px 12px;
    color: #f5f7ff;
    min-height: 38px;
  }

  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="datetime-local"]:focus {
    border-color: rgba(125, 155, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(125, 155, 255, 0.2);
    outline: none;
  }

  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.9) brightness(1.15);
  }

  .textarea {
    resize: vertical;
    min-height: 120px;
  }

  .form-actions-inline {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
  }

  .form-actions-inline.align-start {
    justify-content: flex-start;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
  }

  .form-actions.centered {
    justify-content: center;
  }

  fieldset.scope-fieldset {
    border: 1px solid rgba(96, 121, 187, 0.3);
    border-radius: 10px;
    padding: 12px 16px 16px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  fieldset.scope-fieldset legend {
    padding: 0 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
  }

  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(125, 155, 255, 0.45);
    background: rgba(7, 11, 18, 0.95);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    margin: 0;
  }

  input[type="checkbox"]::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #04101f;
    clip-path: polygon(14% 54%, 0 68%, 42% 100%, 100% 21%, 85% 7%, 40% 70%);
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.16s ease;
  }

  input[type="checkbox"]:checked {
    border-color: rgba(125, 155, 255, 0.95);
    background: rgba(125, 155, 255, 0.95);
  }

  input[type="checkbox"]:checked::after {
    transform: scale(1);
  }

  input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(125, 155, 255, 0.22);
  }

  input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
  }

  .checkbox input[type="checkbox"] {
    flex: 0 0 16px;
  }

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#reports-page .tag-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(96, 121, 187, 0.2);
  border-radius: 8px;
  background: rgba(7, 10, 16, 0.55);
}

#reports-page .tag-checkboxes .checkbox {
  background: rgba(125, 155, 255, 0.08);
  border: 1px solid rgba(125, 155, 255, 0.2);
  border-radius: 999px;
  padding: 4px 8px;
}

#reports-tab-settings .form-field.checkbox-field {
  padding-top: 22px;
}

#reports-tab-settings .form-grid {
  gap: 14px;
}

#reports-tab-settings .form-actions {
  justify-content: flex-end;
}

#reports-tab-home .reports-list-card {
  margin-top: 0;
}

#reports-page .reports-tabs {
  position: relative;
  z-index: 1210;
}

.filters-inline {
  margin-top: 8px;
}

  .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
  }

  .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
  }

  .checkbox-inline input[type="checkbox"] {
    flex: 0 0 16px;
  }

  .selected-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    min-height: 22px;
  }

  .selected-hint .tag {
    background: rgba(125, 155, 255, 0.16);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 6px;
    padding: 2px 6px;
    color: #e5e7eb;
  }

  .checkbox.compact {
    font-size: 12px;
  }

  .status-card .status-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  .status-pill[data-status='running'],
  .status-pill[data-status='planning'] {
    background: rgba(93, 134, 255, 0.18);
    color: #7d9bff;
  }

  .status-pill[data-status='done'] {
    background: rgba(86, 220, 160, 0.18);
    color: #56dca0;
  }

  .status-pill[data-status='failed'] {
    background: rgba(255, 107, 107, 0.2);
    color: #ff9c9c;
  }

  .status-pill[data-status='stopped'],
  .status-pill[data-status='scheduled'] {
    background: rgba(255, 202, 99, 0.2);
    color: #ffdd99;
  }

  .status-pill[data-status='paused'] {
    background: rgba(255, 140, 87, 0.2);
    color: #ffb366;
  }

  .status-pill[data-status='skipped'] {
    background: rgba(180, 190, 210, 0.18);
    color: rgba(220, 230, 245, 0.9);
  }

  .progress-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(34, 44, 66, 0.75);
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #5d86ff, #98b2ff);
    border-radius: 999px;
    transition: width 0.4s ease;
  }

  .progress-native {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(34, 44, 66, 0.75);
    appearance: none;
  }
  .progress-native::-webkit-progress-bar {
    background: rgba(34, 44, 66, 0.75);
    border-radius: 999px;
  }
  .progress-native::-webkit-progress-value {
    background: linear-gradient(90deg, #5d86ff, #98b2ff);
    border-radius: 999px;
  }
  .progress-native::-moz-progress-bar {
    background: linear-gradient(90deg, #5d86ff, #98b2ff);
    border-radius: 999px;
  }

  .progress-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .progress-bar.tool-progress {
    height: 6px;
    background: rgba(34, 44, 66, 0.55);
  }

  .progress-bar.tool-progress .progress-fill {
    background: linear-gradient(90deg, #ff8a65, #ffd54f);
  }

  .tool-progress-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
  }

  .progress-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
  }

  .progress-meta .label {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
  }

  .log-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .compat-log-card {
    margin-top: 14px;
  }

  .compat-table-wrapper {
    margin-top: 12px;
  }

  .compat-modal-title,
  .compat-confirm-title {
    margin: 0;
  }

  .compat-modal-subtitle {
    margin-top: 6px;
  }

  .compat-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .compat-version-row {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.9;
  }

  .compat-confirm-fields {
    margin-top: 12px;
  }

  .compat-confirm-hint {
    margin-top: 8px;
  }

  body.healthcheck-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 14px;
    background:
      radial-gradient(900px 520px at 18% 12%, rgba(125, 155, 255, 0.22), rgba(0, 0, 0, 0) 60%),
      radial-gradient(820px 520px at 82% 18%, rgba(86, 220, 160, 0.12), rgba(0, 0, 0, 0) 62%),
      linear-gradient(180deg, rgba(6, 10, 18, 1), rgba(10, 14, 24, 1));
  }

  .healthcheck-container {
    width: 100%;
    max-width: 640px;
    margin: 0;
  }

  .hc-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
  }

  .hc-title {
    margin: 0;
  }

  .hc-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(20, 26, 38, 0.8);
    border: 1px solid rgba(96, 121, 187, 0.25);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
  }

  .hc-toggle:hover {
    border-color: rgba(125, 155, 255, 0.38);
  }

  .hc-toggle-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
  }

  .hc-toggle-count {
    font-size: 12px;
    white-space: nowrap;
    opacity: 0.9;
  }

  .hc-chevron {
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(180, 190, 210, 0.8);
    border-bottom: 2px solid rgba(180, 190, 210, 0.8);
    transform: rotate(45deg);
    transition: transform 0.12s ease-in-out;
    flex: 0 0 auto;
  }

  .hc-toggle[data-open='1'] .hc-chevron {
    transform: rotate(-135deg);
  }

  .hc-panel {
    background: rgba(20, 26, 38, 0.55);
    border: 1px solid rgba(96, 121, 187, 0.18);
    border-radius: 10px;
    padding: 10px;
    max-height: 360px;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
  }

  .hc-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .hc-summary {
    margin-bottom: 8px;
  }

  .hc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(20, 26, 38, 0.8);
    border: 1px solid rgba(96, 121, 187, 0.25);
    min-width: 0;
  }

  .hc-item-body {
    min-width: 0;
    flex: 1 1 auto;
  }

  .hc-item-title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hc-item-sub {
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hc-item.log-issue-item {
    align-items: flex-start;
  }

  .hc-item.log-issue-item .hc-item-title,
  .hc-item.log-issue-item .hc-item-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }

  .hc-item.log-issue-item .hc-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }

  .healthcheck-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }

  .healthcheck-title {
    margin: 0 0 6px 0;
  }

  .healthcheck-section-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }

  .healthcheck-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    align-content: start;
  }

  @media (max-width: 1100px) {
    .healthcheck-steps { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  }

  @media (max-width: 820px) {
    .healthcheck-steps { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  }

  @media (max-width: 520px) {
    .healthcheck-steps { grid-template-columns: 1fr; }
  }

  .healthcheck-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(20, 26, 38, 0.8);
    border: 1px solid rgba(96, 121, 187, 0.25);
    min-width: 0;
    overflow: hidden;
    height: 64px;
    cursor: default;
  }

  .healthcheck-step-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .healthcheck-step-title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .healthcheck-step-desc {
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .healthcheck-step[data-status='failed'] {
    border-color: rgba(255, 107, 107, 0.35);
  }

  .healthcheck-step[data-status='skipped'] {
    opacity: 0.85;
  }

  .healthcheck-step-icon {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(125, 155, 255, 0.45);
    position: relative;
    flex: 0 0 auto;
  }

  .healthcheck-step-icon[data-status='running']::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 999px;
    border: 2px solid rgba(125, 155, 255, 0.25);
    border-top-color: rgba(125, 155, 255, 0.95);
    animation: healthcheck-spin 0.9s linear infinite;
  }

  .healthcheck-step-icon[data-status='done'] {
    border-color: rgba(86, 220, 160, 0.9);
    background: rgba(86, 220, 160, 0.15);
  }

  .healthcheck-step-icon[data-status='done']::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid rgba(86, 220, 160, 0.95);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: none;
    border-radius: 1px;
  }

  .healthcheck-step-icon[data-status='failed'] {
    border-color: rgba(255, 107, 107, 0.95);
    background: rgba(255, 107, 107, 0.12);
  }

  .healthcheck-step-icon[data-status='warning'] {
    border-color: rgba(255, 196, 92, 0.95);
    background: rgba(255, 196, 92, 0.16);
  }

  .healthcheck-step-icon[data-status='warning']::after {
    content: '!';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 216, 140, 0.98);
    font-weight: 800;
    font-size: 12px;
    animation: none;
  }

  .healthcheck-step-icon[data-status='failed']::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 156, 156, 0.95);
    font-weight: 800;
    font-size: 14px;
    animation: none;
  }

  /* Healthcheck: "skipped/no access" state + safe cross glyph override. */
  .healthcheck-step-icon[data-status='failed']::after { content: ''; }

  .healthcheck-step-icon[data-status='skipped'] {
    border-color: rgba(180, 190, 210, 0.9);
    background: rgba(180, 190, 210, 0.12);
  }

  .healthcheck-step-icon[data-status='skipped']::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(220, 230, 245, 0.9);
    font-weight: 800;
    font-size: 14px;
    animation: none;
  }

  /* Healthcheck: normalize glyphs even if file encoding changes. */
  /* Healthcheck: force stable glyphs and tweak vertical alignment. */
  .healthcheck-step-icon[data-status='failed']::after { content: '\00D7' !important; line-height: 1; transform: translateY(-1px) !important; }
  .healthcheck-step-icon[data-status='skipped']::after { content: '\2013' !important; line-height: 1; transform: translateY(-1px) !important; }
  .healthcheck-step-icon[data-status='failed']::after { content: '' !important; }
  .healthcheck-step-icon[data-status='skipped']::after { content: '' !important; }

  @keyframes healthcheck-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .healthcheck-table-wrapper {
    margin-top: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .log-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .log-actions .level-filters { display: flex; gap: 8px; margin-right: auto; flex-wrap: wrap; }
  .log-actions button,
  .log-actions label {
    flex: 0 1 auto;
  }
  .log-actions .autoscroll-toggle {
    margin-left: auto;
  }

  .log-stream {
    background: rgba(5, 6, 11, 0.95);
    border: 1px solid rgba(76, 90, 140, 0.35);
    border-radius: 10px;
    padding: 16px;
    max-height: 260px;
    overflow-y: auto;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    color: #c2c6ff;
  }
  .log-line { white-space: pre-wrap; display: block; }
  .log-line .ts { color: #8aa0d6; }
  .log-line .lvl { font-weight: 700; margin: 0 4px; }
  .log-line .tool { color: #a9b6d6; margin-right: 4px; }
  .log-line.level-info .lvl { color: #8bd1ff; }
  .log-line.level-warn .lvl { color: #ffd37a; }
  .log-line.level-error .lvl { color: #ff8b8b; }
  .log-line.level-debug .lvl { color: #b9b9b9; }
  .log-line.level-tool .lvl { color: #b0c4ff; font-weight: 500; }
  .log-hint { color: #ffd37a; margin-left: 6px; cursor: help; }

  .filter-card .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }

  .filter-card {
    border: 1px solid rgba(125, 155, 255, 0.18);
    border-radius: 12px;
    background: rgba(12, 16, 26, 0.7);
    padding: 12px;
  }

  .log-filter-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

.log-filter-range .range-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.log-filter-range .range-field .input {
  min-width: 0;
  width: 100%;
}

  .log-filter-range .range-field span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  .log-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .align-end {
    display: flex;
    align-items: flex-end;
  }

  .action-group {
    gap: 10px;
  }

  .settings-form section {
    padding: 16px 0;
  }

  .settings-form section:not(:first-of-type) {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 12px;
  }

  .settings-form section > h2 {
    margin-top: 0;
  }

  #scheduler-form {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    align-items: flex-end;
  }

  .page-scheduler #scheduler-form .form-field {
    margin-bottom: 0;
  }

  #scheduler-form .form-field.checkbox {
    display: flex;
    align-items: center;
  }

  #scheduler-form .form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 4px;
  }

  .page-scheduler .card:first-of-type {
    margin-bottom: 18px;
  }

  .page-scheduler .card {
    padding: 18px;
  }

  .page-scheduler .card .card-header {
    margin-bottom: 12px;
  }

  .table-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .table-actions {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .export-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .export-control label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.65);
  }

  .export-control select {
    background: rgba(12, 16, 26, 0.9);
    border: 1px solid rgba(96, 121, 187, 0.4);
    border-radius: 6px;
    color: #fff;
    padding: 4px 10px;
  }

  .table-responsive {
    overflow-x: auto;
  }

  table.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 13px;
    table-layout: fixed;
  }

  table.data-table thead {
    background: transparent;
  }

  table.data-table th,
  table.data-table td {
    padding: 12px 14px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  table.data-table th {
    background: rgba(40, 52, 82, 0.85);
    border-top: 1px solid rgba(96, 121, 187, 0.24);
    border-bottom: 1px solid rgba(96, 121, 187, 0.24);
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.9);
  }

  table.data-table th.is-sortable {
    cursor: pointer;
    user-select: none;
  }
  table.table th.is-sortable {
    cursor: pointer;
    user-select: none;
  }

  table.data-table th.is-sortable::after {
    content: " \21C5";
    opacity: 0.45;
    font-size: 12px;
  }
  table.table th.is-sortable::after {
    content: " \21C5";
    opacity: 0.45;
    font-size: 12px;
  }

  table.data-table th.is-sortable[aria-sort="ascending"]::after {
    content: " \2191";
    opacity: 0.95;
  }
  table.table th.is-sortable[aria-sort="ascending"]::after {
    content: " \2191";
    opacity: 0.95;
  }

  table.data-table th.is-sortable[aria-sort="descending"]::after {
    content: " \2193";
    opacity: 0.95;
  }
  table.table th.is-sortable[aria-sort="descending"]::after {
    content: " \2193";
    opacity: 0.95;
  }

  table.data-table th:first-child {
    border-left: 1px solid rgba(96, 121, 187, 0.24);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  table.data-table th:last-child {
    border-right: 1px solid rgba(96, 121, 187, 0.24);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  table.data-table tbody td {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(96, 121, 187, 0.16);
    border-bottom: 1px solid rgba(96, 121, 187, 0.16);
    color: rgba(255, 255, 255, 0.92);
  }

  table.data-table tbody td:first-child {
    border-left: 1px solid rgba(96, 121, 187, 0.16);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  table.data-table tbody td:last-child {
    border-right: 1px solid rgba(96, 121, 187, 0.16);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  table.data-table td .badge,
  table.data-table td .status-badge,
  table.data-table td .pill-badge {
    white-space: nowrap;
  }

  table.data-table tbody tr:hover {
    filter: brightness(1.08);
  }

  table.data-table td.actions {
    display: flex;
    gap: 8px;
  }

  table.data-table tr.placeholder td {
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
  }

  .pagination {
    display: flex;
    gap: 8px;
  }

  .pager {
    border: 1px solid rgba(96, 121, 187, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .pager.active,
  .pager:hover {
    background: rgba(93, 134, 255, 0.35);
  }

  .table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
  }

  .queue-controls-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .queue-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .reports-split {
    display: grid;
    grid-template-columns: minmax(360px, 380px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .reports-list {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
  }

  .report-item {
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(96, 121, 187, 0.2);
    background: rgba(18, 24, 36, 0.8);
    cursor: pointer;
    transition: border 0.2s, transform 0.1s;
  }

  .report-item.active,
  .report-item:hover {
    border-color: rgba(125, 155, 255, 0.6);
    transform: translateX(2px);
  }

  .report-item-title {
    font-weight: 600;
    margin-bottom: 4px;
  }

  .report-item-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
  }

  .detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }

  .detail-list dt {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
  }

  .detail-list dd {
    margin: 0;
    font-size: 13px;
  }

  .summary-metrics {
    display: flex;
    gap: 18px;
    font-size: 13px;
  }

  .summary-metrics .label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
  }

  .findings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .findings-list .finding {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(96, 121, 187, 0.25);
    background: rgba(12, 16, 25, 0.9);
  }

  .finding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .finding-header .severity {
    font-weight: 600;
    font-size: 12px;
  }

  .finding-header .type {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  .finding.severity-critical {
    border-color: rgba(255, 87, 87, 0.6);
  }

  .finding.severity-high {
    border-color: rgba(255, 140, 87, 0.6);
  }

  .finding.severity-medium {
    border-color: rgba(255, 202, 99, 0.6);
  }

  .finding.severity-low {
    border-color: rgba(125, 214, 161, 0.6);
  }

  .timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .timeline-item {
    position: relative;
    padding-left: 16px;
  }

  .timeline-item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: -16px;
    width: 2px;
    background: rgba(96, 121, 187, 0.35);
  }

  .timeline-item:last-child::before {
    bottom: 12px;
  }

  .timeline-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
  }

  .timeline-content {
    background: rgba(18, 24, 36, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.3);
    border-radius: 10px;
    padding: 12px;
  }

  .timeline-title {
    font-weight: 600;
    margin-bottom: 6px;
  }

  .timeline-details {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .tool-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  .tool-list li {
    background: rgba(12, 16, 26, 0.9);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tool-status.ok {
    color: #56dca0;
  }

  .tool-status.missing {
    color: #ff9c9c;
  }

  .split-layout {
    display: flex;
    gap: 20px;
  }

  .placeholder,
  .timeline-placeholder,
  .timeline-error {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
  }

  .loading-placeholder,
  .error-placeholder {
    padding: 60px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 1200px) {
    .reports-split {
      grid-template-columns: 1fr;
    }
  }
  .report-export {
    display: flex;
    gap: 10px;
  }

  .report-diff pre,
  .timeline-content pre,
  .env-check-output pre {
    background: rgba(5, 6, 11, 0.85);
    border: 1px solid rgba(76, 90, 140, 0.35);
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    overflow-x: auto;
  }

  body,
  #content,
  #content-area {
    scrollbar-color: rgba(125, 155, 255, 0.35) transparent;
  }

  .log-stream,
  .reports-list {
    scrollbar-color: rgba(125, 155, 255, 0.5) transparent;
  }

  body::-webkit-scrollbar,
  #content::-webkit-scrollbar,
  #content-area::-webkit-scrollbar,
  .log-stream::-webkit-scrollbar,
  .reports-list::-webkit-scrollbar {
    width: 8px;
  }

  body::-webkit-scrollbar-thumb,
  #content::-webkit-scrollbar-thumb,
  #content-area::-webkit-scrollbar-thumb,
  .log-stream::-webkit-scrollbar-thumb,
  .reports-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(125, 155, 255, 0.55), rgba(70, 91, 150, 0.8));
    border-radius: 999px;
  }

  body::-webkit-scrollbar-track,
  #content::-webkit-scrollbar-track,
  #content-area::-webkit-scrollbar-track,
  .log-stream::-webkit-scrollbar-track,
  .reports-list::-webkit-scrollbar-track {
    background: rgba(8, 10, 18, 0.6);
    border-radius: 999px;
  }
  .form-actions.sticky {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(20, 26, 38, 0.95) 0%, rgba(20, 26, 38, 0.8) 100%);
    padding: 12px 0 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  .card-grid {
    display: grid;
    gap: 20px;
  }

  .card-grid.metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .card-grid.two-column {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .card-grid.three-column {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .card-grid.compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  #accounts-dashboard .metrics-grid + .dashboard-section {
    margin-top: 18px;
  }

  #accounts-dashboard .dashboard-section + .dashboard-section {
    margin-top: 16px;
  }

  #accounts-groups .card + .card {
    margin-top: 16px;
  }

  #accounts-groups .split-frame {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr);
    gap: 16px;
    align-items: start;
  }

  #accounts-groups .frame-left,
  #accounts-groups .frame-right {
    background: rgba(12, 16, 26, 0.65);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 12px;
    padding: 12px;
    min-height: 260px;
  }

  #accounts-groups .frame-left-header {
    margin-bottom: 10px;
  }

  #accounts-groups .frame-left-header input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #accounts-groups .tile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
  }

  #accounts-groups .tile-card {
    border: 1px solid rgba(125, 155, 255, 0.2);
    background: rgba(30, 38, 58, 0.45);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
  }

  #accounts-groups .tile-card:hover {
    border-color: rgba(125, 155, 255, 0.5);
    background: rgba(52, 70, 120, 0.45);
    transform: translateY(-1px);
  }

  #accounts-groups .tile-card.active {
    border-color: rgba(125, 155, 255, 0.85);
    background: rgba(70, 94, 160, 0.5);
  }

  #accounts-groups .tile-title {
    font-weight: 600;
    margin-bottom: 4px;
  }

  #accounts-groups .tile-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    min-height: 18px;
  }

  #accounts-groups .tile-meta {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
  }

  #accounts-groups .frame-right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  #accounts-groups .icon-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  #accounts-groups .frame-right .card-body {
    padding: 0;
  }

  #accounts-groups .detail-view {
    padding: 8px 0;
  }

  #accounts-groups .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #accounts-groups .detail-item.wide {
    grid-column: span 2;
  }

  #accounts-groups .detail-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
  }

  #accounts-groups .detail-value {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(30, 38, 58, 0.45);
    border: 1px solid rgba(125, 155, 255, 0.2);
  }

  #accounts-groups .detail-tags,
  #roles-frame .detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(30, 38, 58, 0.45);
    border: 1px solid rgba(125, 155, 255, 0.2);
    min-height: 32px;
  }

  #accounts-groups .detail-tags .tag,
  #roles-frame .detail-tags .tag {
    background: rgba(125, 167, 255, 0.16);
    border: 1px solid rgba(125, 167, 255, 0.3);
    border-radius: 999px;
  }

  #accounts-groups .empty-state {
    padding: 18px;
    border: 1px dashed rgba(125, 155, 255, 0.3);
    border-radius: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
  }

  @media (max-width: 980px) {
    #accounts-groups .split-frame {
      grid-template-columns: 1fr;
    }

    #accounts-groups .tile-list {
      max-height: 260px;
    }
  }

  .profile-card {
    display: flex;
    flex-direction: column;
    min-height: 110px;
    padding: 12px;
  }

  .profile-card h3 {
    font-size: 15px;
    margin: 0 0 6px 0;
    line-height: 1.2;
  }

  .profile-card .card-body {
    flex: 1;
    margin-bottom: 6px;
  }

  .profile-card .card-footer {
    margin-top: 0;
    display: flex;
    justify-content: stretch;
  }

  .profile-card .card-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .profile-steps-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
  }

  .profile-steps-list li {
    padding: 10px 12px;
    border: 1px solid rgba(124, 144, 202, 0.25);
    border-radius: 10px;
    background: rgba(30, 38, 58, 0.4);
    font-size: 14px;
    line-height: 1.4;
  }

  .profile-steps-list .step-flow {
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  .profile-card .hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 12px;
  }


  #content-area {
    min-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  #content-area::-webkit-scrollbar {
    width: 8px;
  }

  .nested-card {
    margin-top: 16px;
    padding: 16px;
    background: rgba(12, 16, 26, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 12px;
  }

  .muted {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
  }

  .tool-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .tool-checkboxes .checkbox {
    background: rgba(18, 24, 36, 0.8);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
  }

  .custom-profiles-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
  }

  .custom-profiles-list {
    background: rgba(12, 16, 26, 0.8);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 10px;
    padding: 12px;
  }

  .custom-profiles-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
  }

  .custom-profiles-list li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(45, 60, 104, 0.25);
    transition: background 0.2s;
  }

  .custom-profiles-list li.active,
  .custom-profiles-list li:hover {
    background: rgba(125, 155, 255, 0.25);
  }

  .custom-profile-editor {
    background: rgba(12, 16, 26, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 10px;
    padding: 16px;
  }

  .steps-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
  }

  .steps-table th,
  .steps-table td {
    border: 1px solid rgba(55, 72, 112, 0.5);
    padding: 8px;
    font-size: 12px;
  }

  .steps-table tbody tr:nth-child(odd) {
    background: rgba(22, 28, 42, 0.6);
  }

  .steps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .step-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1250;
  }

  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 10, 0.85);
    backdrop-filter: blur(4px);
  }

  .modal-body {
    position: relative;
    width: min(760px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(10, 14, 24, 0.95);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 14px;
    padding: 20px;
    z-index: 2;
  }

  .modal:not([hidden]) .modal-backdrop {
    animation: modalBackdropIn 0.2s ease-out;
  }

  .modal:not([hidden]) .modal-body {
    animation: modalBodyIn 0.2s ease-out;
  }

  .modal.is-closing .modal-backdrop {
    animation: modalBackdropOut 0.18s ease-in forwards;
  }

  .modal.is-closing .modal-body {
    animation: modalBodyOut 0.18s ease-in forwards;
  }

  @keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes modalBodyIn {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes modalBackdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes modalBodyOut {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(10px) scale(0.988);
    }
  }

  .modal[hidden] {
    display: none !important;
  }

  .modal:focus {
    outline: none;
  }

  .modal-body.custom-profile-editor {
    width: min(900px, 95vw);
  }

  .modal-body.wide {
    width: min(980px, 96vw);
  }

#maintenance-modal .modal-body.wide {
  width: min(620px, 94vw);
}

  #user-modal .modal-body {
    width: min(1100px, 96vw);
  }

  #approval-detail-modal .modal-body.wide {
    width: min(1280px, 98vw);
  }

  #export-decision-modal .modal-body.wide {
    width: min(920px, 94vw);
  }

  .custom-profile-editor .form-actions {
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Modal buttons centered */
  .modal .form-actions {
    justify-content: center;
  }

  .input-with-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .input-with-actions input {
    flex: 1;
  }

  .btn.icon-btn {
    padding: 8px 10px;
    min-width: 42px;
  }

  #custom-profile-editor .table-responsive {
    margin-top: 12px;
  }

  #custom-profile-editor #profile-steps-table {
    margin-top: 8px;
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .modal-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .modal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .modal-section-header h4 {
    margin: 0;
  }

  .modal-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(20, 26, 38, 0.8);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
  }

  .qr-image {
    display: block;
    width: 100%;
    max-width: 256px;
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 10px;
  }

  .modal-content li {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(96, 121, 187, 0.15);
  }

  .modal-content li:last-child {
    border-bottom: none;
  }

  .custom-profile-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
  }

  .custom-profile-info strong {
    display: block;
    font-size: 15px;
  }

  .custom-profile-info p {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
  }

  .custom-profile-item-actions {
    display: flex;
    gap: 8px;
  }

  .custom-profile-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
  }

  .instruction-card pre {
    background: rgba(7, 9, 16, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    overflow-x: auto;
  }

  .instruction-card code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 4px;
    border-radius: 4px;
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  #stepup-modal .modal-actions {
    margin-top: 14px;
    flex-wrap: wrap;
  }

  .asset-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1200;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .asset-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .asset-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 10, 0.85);
    backdrop-filter: blur(4px);
  }

  .asset-modal__dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(10, 14, 24, 0.95);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
  }

  .asset-modal__dialog header h3 {
    margin: 0 0 4px;
  }

  .asset-modal__dialog header p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.65);
  }

  .environment-table-wrapper {
    overflow-x: auto;
  }

  .environment-table-wrapper table td:last-child {
    font-size: 12px;
  }

  .container-card {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .container-meta {
    text-align: right;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  .container-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 4px 0;
  }

  .container-status-grid .label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .container-status-grid p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #f6f7ff;
  }

  .container-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .container-hint {
    margin: 0;
    font-size: 13px;
    color: #ffb874;
  }

  .log-card.compact .log-stream {
    max-height: 200px;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1010;
    position: relative;
  }

  .header-action-btn {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(125, 155, 255, 0.4);
    background: rgba(18, 24, 36, 0.9);
    color: #cfd8ff;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
  }

  .header-action-btn:hover {
    background: rgba(125, 155, 255, 0.25);
  }

.app-build-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.monitoring-layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 18px;
}

.monitoring-sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(96, 121, 187, 0.28);
  border-radius: 14px;
  background: rgba(12, 16, 24, 0.82);
  overflow: hidden;
}

.monitoring-toolbar {
  margin-bottom: 10px;
}

.monitoring-sidebar .monitoring-toolbar {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(96, 121, 187, 0.24);
}

.monitoring-toolbar .card-body {
  padding-top: 12px;
  padding-bottom: 10px;
}

.monitoring-toolbar-title h3 {
  margin: 0;
}

.monitoring-toolbar-row {
  display: block;
}

.monitoring-toolbar-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitoring-toolbar-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.monitoring-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.monitoring-search {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.monitoring-search .input {
  flex: 1;
  min-width: 0;
}

.monitoring-bulk-icon-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  padding: 0;
  font-weight: 700;
  line-height: 1;
}

.monitoring-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(96, 121, 187, 0.2);
}

.monitoring-toolbar-actions[hidden] {
  display: none !important;
}

.monitoring-bulk-meta {
  margin-left: auto;
  white-space: nowrap;
}

.monitoring-toolbar-tags-hint {
  margin-top: 8px;
}

.monitoring-toolbar-tags-hint:empty {
  display: none;
  margin-top: 0;
}

.monitoring-bulk-all-wrap {
  margin-right: 2px;
}

.monitoring-filter-menu {
  position: relative;
}

.monitoring-filter-btn {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(12, 18, 30, 0.82);
  border-color: rgba(98, 128, 194, 0.34);
  color: rgba(236, 245, 255, 0.92);
}

.monitoring-filter-btn.active {
  border-color: rgba(130, 160, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(130, 160, 255, 0.22) inset;
}

.monitoring-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: 340px;
  max-height: 280px;
  overflow: auto;
  z-index: 45;
  border: 1px solid rgba(90, 118, 180, 0.42);
  border-radius: 12px;
  background: rgba(9, 14, 24, 0.97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  padding: 6px;
}

.monitoring-filter-dropdown button {
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(225, 236, 255, 0.92);
  border-radius: 8px;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}

.monitoring-filter-dropdown button:hover,
.monitoring-filter-dropdown button.active {
  background: rgba(122, 154, 224, 0.22);
}

.monitoring-filter-dropdown label {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 7px 8px;
  cursor: pointer;
}

.monitoring-filter-dropdown label:hover {
  background: rgba(122, 154, 224, 0.16);
}

#approvals-page .inline-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

#approvals-page .inline-actions label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

#approvals-page #approvals-refresh {
  margin-left: 6px;
}

#docs-page .docs-sidebar .card-header .btn-group {
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
}

#docs-page .docs-sidebar .card-header .btn-group .btn {
  white-space: nowrap;
}

#docs-page #btn-templates {
  margin-top: 0;
}

#settings-page #settings-advanced .settings-runtime-updates {
  padding-top: 28px;
}

@media (max-width: 900px) {
  .log-filter-range {
    grid-template-columns: 1fr;
  }

  #docs-page .docs-sidebar .card-header .btn-group {
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px) {
  .monitoring-toolbar-main {
    width: 100%;
  }

  .monitoring-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .monitoring-bulk-meta {
    margin-left: 0;
  }
}

.monitoring-events-row {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

@media (max-width: 1100px) {
  .monitoring-events-row {
    grid-template-columns: 1fr;
  }
}

.monitoring-list {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.monitor-item {
  border: 1px solid rgba(96, 121, 187, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(12, 16, 24, 0.8);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.monitor-item:hover {
  border-color: rgba(96, 121, 187, 0.6);
  transform: translateY(-1px);
}

.monitor-item.active {
  border-color: rgba(130, 160, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(130, 160, 255, 0.35) inset;
}

.monitor-item.selected {
  border-color: rgba(80, 214, 137, 0.72);
  box-shadow: 0 0 0 1px rgba(80, 214, 137, 0.25) inset;
}

.monitor-item-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
}

.monitor-item-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-item-bulk-check {
  margin-right: 2px;
}

.monitor-item-meta {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  overflow-wrap: anywhere;
}

.monitor-item-tags,
.monitor-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.monitor-item-tags {
  margin-left: 18px;
}

.monitor-detail-tags {
  margin-top: 8px;
}

.monitor-item-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(96, 121, 187, 0.35);
  background: rgba(18, 30, 54, 0.65);
  color: rgba(225, 236, 255, 0.9);
  font-size: 11px;
  line-height: 1.3;
}

.monitor-item-tag-more {
  color: rgba(193, 205, 230, 0.85);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.3);
}

.status-dot.up {
  background: #2dd27b;
}

.status-dot.down {
  background: #ff6b6b;
}

.status-dot.dns {
  background: #f2994a;
}

.status-dot.issue {
  background: #f2994a;
}

/* Accesses v3: single frame + table */
#accesses-page .card {
  max-width: none;
  width: 100%;
}

#accesses-page .accesses-table-frame {
  border: 1px solid rgba(110, 144, 224, 0.28);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(19, 30, 52, 0.62), rgba(13, 23, 41, 0.55));
  padding: 14px;
}

#accesses-page .accesses-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

#accesses-page .accesses-supplement-actions {
  justify-content: flex-start;
  margin-top: 2px;
}

#accesses-page .accesses-table {
  table-layout: auto;
  border-spacing: 0 6px;
}

#accesses-page .accesses-table tbody tr {
  cursor: pointer;
}

#accesses-page .accesses-table td.actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#accesses-page .accesses-service-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(160, 190, 255, 0.3);
}

#accesses-page .accesses-service-pill.tone-0 { background: rgba(55, 111, 255, 0.18); border-color: rgba(92, 140, 255, 0.42); }
#accesses-page .accesses-service-pill.tone-1 { background: rgba(0, 176, 138, 0.18); border-color: rgba(46, 196, 164, 0.42); }
#accesses-page .accesses-service-pill.tone-2 { background: rgba(215, 150, 0, 0.2); border-color: rgba(236, 182, 56, 0.44); }
#accesses-page .accesses-service-pill.tone-3 { background: rgba(186, 91, 255, 0.2); border-color: rgba(205, 132, 255, 0.44); }
#accesses-page .accesses-service-pill.tone-4 { background: rgba(255, 96, 139, 0.2); border-color: rgba(255, 136, 168, 0.45); }
#accesses-page .accesses-service-pill.tone-5 { background: rgba(96, 203, 255, 0.2); border-color: rgba(136, 219, 255, 0.45); }
#accesses-page .accesses-service-pill.tone-6 { background: rgba(117, 206, 84, 0.2); border-color: rgba(151, 226, 124, 0.45); }
#accesses-page .accesses-service-pill.tone-7 { background: rgba(255, 133, 76, 0.22); border-color: rgba(255, 165, 118, 0.45); }

@media (max-width: 1100px) {
  #accesses-page .accesses-table th,
  #accesses-page .accesses-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
}

.status-dot.pending {
  background: rgba(193, 205, 230, 0.9);
}

.status-dot.paused {
  background: #f2c94c;
}

.status-dot.maintenance {
  background: #ffb454;
}

.monitoring-maintenance {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

#monitor-detail-alert {
  margin-top: 10px;
}

.monitoring-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.monitor-detail-link {
  color: inherit;
  text-decoration: underline;
}

.monitor-detail-link:hover {
  color: rgba(125, 155, 255, 0.95);
}

.monitoring-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.monitoring-detail-body {
  display: grid;
  gap: 16px;
}

.monitoring-status-strip {
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  gap: 2px;
  min-height: 10px;
}

.monitoring-status-strip span {
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.monitoring-status-strip span.up {
  background: rgba(45, 210, 123, 0.8);
}

.monitoring-status-strip span.down {
  background: rgba(255, 107, 107, 0.8);
}

.monitoring-status-strip span.dns {
  background: rgba(242, 153, 74, 0.82);
}

.monitoring-status-strip span.issue {
  background: rgba(242, 153, 74, 0.82);
}

.monitoring-status-strip span.paused {
  background: rgba(242, 201, 76, 0.8);
}

.monitoring-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.monitoring-stat {
  border: 1px solid rgba(96, 121, 187, 0.2);
  border-radius: 12px;
  padding: 12px;
  background: rgba(10, 14, 20, 0.8);
}

.monitoring-stat .label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.monitoring-stat .value {
  font-size: 18px;
  font-weight: 600;
  margin-top: 6px;
}

.monitoring-chart-card {
  border: 1px solid rgba(96, 121, 187, 0.2);
  border-radius: 14px;
  padding: 12px;
  background: rgba(10, 14, 20, 0.75);
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 8px;
}

.monitoring-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}

.monitoring-chart-header h4 {
  margin: 0;
  flex: 1 1 auto;
}

.monitoring-chart {
  min-height: 220px;
  width: 100%;
  overflow: visible;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.monitoring-chart svg {
  width: 100%;
  height: 220px;
  display: block;
}

.monitoring-chart-tooltip {
  position: absolute;
  z-index: 40;
  max-width: min(420px, 90%);
  pointer-events: none;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(6, 10, 18, 0.96);
  border: 1px solid rgba(96, 121, 187, 0.4);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.monitoring-events {
  border: 1px solid rgba(96, 121, 187, 0.2);
  border-radius: 14px;
  padding: 12px;
  background: rgba(10, 14, 20, 0.7);
}

.monitoring-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.monitoring-events-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#monitor-events-range,
#monitor-events-clear {
  min-width: 170px;
  font-size: 13px;
}

#monitor-events-clear {
  min-width: 220px;
}

.monitoring-events-actions .select-compact,
#monitor-latency-range.select-compact {
  border-radius: 10px;
}

.monitoring-events-list {
  display: grid;
  gap: 8px;
}

.monitoring-event {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.monitoring-event .event-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.monitoring-event.up {
  border: 1px solid rgba(45, 210, 123, 0.3);
}

.monitoring-event.down {
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.monitoring-event.dns {
  border: 1px solid rgba(242, 153, 74, 0.35);
}

.monitoring-event.issue {
  border: 1px solid rgba(242, 153, 74, 0.35);
}

.monitoring-event.pending {
  border: 1px solid rgba(193, 205, 230, 0.35);
}

.monitoring-event.maintenance {
  border: 1px solid rgba(255, 180, 84, 0.35);
}

#monitor-events-center {
  margin-top: 16px;
}

.monitoring-table {
  display: grid;
  gap: 8px;
}

.monitoring-table-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.monitoring-table-row > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.monitoring-table-row.certs {
  grid-template-columns: minmax(120px, 1.2fr) minmax(140px, 1.4fr) minmax(120px, 0.9fr) minmax(80px, 0.6fr) minmax(120px, 1.1fr) minmax(120px, 1.1fr) minmax(120px, 0.9fr) minmax(90px, 0.7fr);
}

.monitoring-table-row.header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.55);
}

.monitoring-table-row.header.maintenance-header {
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
}

.monitoring-table-row .warning {
  color: #ffb454;
  font-weight: 600;
}

#monitoring-tab-settings .card + .card {
  margin-top: 16px;
}

#monitoring-tab-cert .card + .card {
  margin-top: 16px;
}

#monitoring-tab-sla .card + .card {
  margin-top: 16px;
}

#monitoring-tab-sla .monitoring-table table {
  width: 100%;
}

#monitoring-tab-sla .monitoring-sla-grid {
  display: grid;
  gap: 12px;
}

#monitoring-tab-sla .monitoring-sla-card {
  border: 1px solid rgba(96, 121, 187, 0.26);
  border-radius: 12px;
  padding: 12px;
  background: rgba(10, 14, 20, 0.72);
  display: grid;
  gap: 12px;
}

#monitoring-tab-sla .monitoring-sla-title {
  font-size: 16px;
  font-weight: 600;
}

#monitoring-tab-sla .monitoring-sla-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) auto auto auto auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
}

#monitoring-tab-sla .monitoring-sla-row .checkbox {
  margin-right: 4px;
  white-space: nowrap;
}

#monitoring-tab-sla .monitoring-sla-row > .btn {
  justify-self: end;
}

#monitoring-tab-sla .monitoring-sla-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}

#monitoring-tab-sla .monitoring-sla-target-field .input {
  width: 108px;
  padding: 6px 10px;
}

#monitoring-tab-sla .monitoring-sla-period-field {
  min-width: 230px;
}

#monitoring-tab-sla .monitoring-sla-period-field .select {
  min-width: 150px;
}

#monitoring-tab-sla .monitoring-sla-cloud .value.sla-ok {
  color: #2dd27b;
}

#monitoring-tab-sla .monitoring-sla-cloud .value.sla-bad {
  color: #ff8e8e;
}

#monitoring-tab-sla .monitoring-sla-cloud .value.sla-unknown {
  color: #ffc98c;
}

#monitoring-tab-sla .monitoring-sla-row .status-badge {
  justify-self: start;
  margin-left: 0;
}

#monitoring-tab-sla .status-badge.ok {
  background: rgba(45, 210, 123, 0.2);
  color: #2dd27b;
}

#monitoring-tab-sla .status-badge.violated {
  background: rgba(255, 107, 107, 0.2);
  color: #ff9a9a;
}

#monitoring-tab-sla .status-badge.unknown {
  background: rgba(255, 180, 84, 0.2);
  color: #ffc98c;
}

#monitoring-tab-sla .monitoring-sla-history-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(96, 121, 187, 0.18);
  border-radius: 12px;
}

#monitoring-tab-sla .monitoring-sla-history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

#monitoring-tab-sla .monitoring-sla-history-table th,
#monitoring-tab-sla .monitoring-sla-history-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(96, 121, 187, 0.16);
  white-space: nowrap;
}

#monitoring-tab-sla .monitoring-sla-history-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.02);
}

#monitoring-tab-sla .monitoring-sla-history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

#monitoring-tab-sla .monitoring-sla-history-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 1400px) {
  #monitoring-tab-sla .monitoring-sla-row {
    grid-template-columns: minmax(180px, 1fr) auto auto auto;
  }
  #monitoring-tab-sla .monitoring-sla-row > .btn {
    justify-self: start;
  }
}

#monitoring-tab-maintenance .monitoring-table-row {
  grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.2fr) minmax(140px, 0.9fr) minmax(200px, 1.2fr) minmax(110px, 0.7fr) minmax(180px, 1fr);
  align-items: center;
}

#monitoring-tab-maintenance .row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#maintenance-modal #maintenance-monitors {
  min-height: 180px;
}

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

#maintenance-modal .maintenance-modal-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

#maintenance-modal .maintenance-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#maintenance-modal .maintenance-checkbox-grid .maintenance-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  text-align: center;
}

#maintenance-modal .maintenance-checkbox-grid .maintenance-day span {
  order: 1;
  font-size: 12px;
}

#maintenance-modal .maintenance-checkbox-grid .maintenance-day input[type="checkbox"] {
  order: 2;
}

#maintenance-modal .maintenance-checkbox-grid.compact {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

#maintenance-modal .time-range-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#maintenance-modal .time-range-row input {
  min-width: 132px;
}

#maintenance-modal input[type="time"],
#maintenance-modal input[type="datetime-local"] {
  color-scheme: dark;
  background: rgba(6, 12, 22, 0.9);
  border: 1px solid rgba(108, 143, 238, 0.35);
  border-radius: 10px;
  min-height: 38px;
  padding: 8px 10px;
}

#maintenance-modal .maintenance-state {
  align-items: flex-start;
}

#maintenance-modal .maintenance-state-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1400px) {
  #monitoring-tab-maintenance .monitoring-table-row {
    grid-template-columns: minmax(160px, 1fr) minmax(200px, 1.1fr) minmax(120px, 0.8fr) minmax(180px, 1fr) minmax(100px, 0.7fr) minmax(160px, 0.9fr);
  }

  #maintenance-modal .maintenance-checkbox-grid.compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #maintenance-modal .maintenance-modal-grid {
    grid-template-columns: 1fr;
  }

  #maintenance-modal .maintenance-checkbox-grid,
  #maintenance-modal .maintenance-checkbox-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #monitoring-tab-maintenance .monitoring-table-row {
    grid-template-columns: 1fr;
  }

  #monitoring-tab-maintenance .row-actions {
    justify-content: flex-start;
  }
}

.monitoring-certs-notify-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(220px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.monitoring-certs-notify-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(125, 155, 255, 0.35);
  border-radius: 12px;
  background: rgba(12, 16, 26, 0.35);
}

.monitoring-certs-notify-preview {
  border: 1px solid rgba(96, 121, 187, 0.2);
  border-radius: 12px;
  padding: 12px;
  background: rgba(10, 14, 20, 0.65);
}

.monitoring-certs-thresholds {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.monitoring-certs-threshold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 121, 187, 0.32);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
}

.monitor-notifications-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

#monitor-form.monitor-form-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

#monitor-form .monitor-form-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

#monitor-form #monitor-headers-field textarea,
#monitor-form #monitor-body-field textarea {
  min-height: 140px;
}

#monitor-form .monitor-notifications-field {
  margin-top: 0;
}

#monitor-form .checkbox-list {
  gap: 10px;
}

.monitor-notifications-list .tag-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.status-badge.maintenance {
  background: rgba(255, 180, 84, 0.18);
  color: #ffb454;
}

.status-badge.ok {
  background: rgba(45, 210, 123, 0.2);
  color: #2dd27b;
}

.status-badge.violated {
  background: rgba(255, 107, 107, 0.2);
  color: #ff9a9a;
}

.status-badge.unknown {
  background: rgba(255, 180, 84, 0.2);
  color: #ffc98c;
}

.status-badge.score-low {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.status-badge.score-medium {
  background: rgba(120, 200, 255, 0.16);
  color: rgba(170, 220, 255, 0.92);
}

.status-badge.score-high {
  background: rgba(140, 255, 170, 0.16);
  color: rgba(190, 255, 210, 0.92);
}

.tag-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tag-hint {
  margin-top: 6px;
}

.selected-hint .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.selected-hint .tag .tag-remove {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.input-icon-field {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-field input {
  width: 100%;
  padding-right: 40px;
}

.input-icon-field.two-icons input {
  padding-right: 72px;
}

.input-icon-btn {
  position: absolute;
  right: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
}

.input-icon-btn.alt {
  right: 36px;
}

.input-icon-btn.active {
  color: rgba(255, 255, 255, 0.95);
}

#notification-form .input-compact {
  min-height: 32px;
  padding: 5px 10px;
}

#notification-form.notification-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#notification-form .notification-form-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

@media (max-width: 1100px) {
  #monitor-form.monitor-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #monitor-form.monitor-form-grid {
    grid-template-columns: 1fr;
  }

  #notification-form.notification-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .monitoring-layout {
    grid-template-columns: 1fr;
  }
  .monitoring-sidebar {
    position: static;
    max-height: none;
  }
  .monitoring-list {
    overflow-y: visible;
  }
  .monitoring-sidebar .card {
    position: static;
  }
  .monitoring-certs-notify-grid {
    grid-template-columns: 1fr;
  }
}

#dashboard-page .dashboard-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#dashboard-page .dashboard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#dashboard-page .dashboard-widget-picker {
  position: relative;
}

#dashboard-page .dashboard-widget-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-height: 340px;
  overflow: auto;
  z-index: 30;
  border-radius: 12px;
  border: 1px solid rgba(125, 155, 255, 0.35);
  background: rgba(8, 11, 18, 0.96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  padding: 10px;
}

#dashboard-page .dashboard-widget-picker-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.64);
  margin-bottom: 8px;
}

#dashboard-page .dashboard-widget-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 8px;
}

#dashboard-page .dashboard-widget-picker-row:hover {
  background: rgba(125, 155, 255, 0.12);
}

#dashboard-page .dashboard-widget-picker-row input {
  width: 14px;
  height: 14px;
}

#dashboard-page .dashboard-widget-picker-actions {
  position: sticky;
  bottom: 0;
  margin: 10px -10px -10px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.2), rgba(8, 11, 18, 0.98));
  border-top: 1px solid rgba(125, 155, 255, 0.2);
  display: flex;
  justify-content: flex-end;
}

.requests-filter-panel {
  border: 1px solid rgba(125, 155, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 24, 42, 0.7), rgba(10, 17, 32, 0.65));
  padding: 14px;
  display: grid;
  gap: 12px;
}

.requests-filter-row {
  display: grid;
  gap: 12px;
  justify-content: stretch;
}

.requests-filter-row-main {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.requests-filter-row-secondary {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.requests-filter-row .waf-field {
  min-width: 180px;
}

.requests-search-field {
  width: 100%;
}

@media (max-width: 1280px) {
  .requests-filter-row-main {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 720px) {
  .requests-filter-row-main,
  .requests-filter-row-secondary {
    grid-template-columns: minmax(180px, 1fr);
  }

  .requests-filter-row .waf-field {
    max-width: none;
  }
}

.waf-services-tls-cell {
  display: flex;
}

.waf-services-tls-badge {
  display: grid;
  gap: 4px;
  align-items: start;
  justify-items: start;
  line-height: 1.2;
  min-width: 180px;
}

.waf-services-tls-badge-title {
  font-weight: 600;
}

.waf-services-tls-badge-expire {
  font-size: 12px;
  opacity: 0.92;
}

.waf-auth-editor-frame .waf-card-head {
  padding: 14px 16px 12px;
}

.waf-antibot-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.waf-antibot-editor-frame .waf-card-head {
  padding: 14px 16px 12px;
}

.waf-antibot-editor-frame,
.waf-auth-editor-frame {
  border: 1px solid rgba(109, 153, 245, 0.22);
  background:
    radial-gradient(circle at 85% 10%, rgba(121, 171, 255, 0.1), transparent 34%),
    radial-gradient(circle at left bottom, rgba(58, 103, 194, 0.07), transparent 26%),
    linear-gradient(145deg, rgba(16, 24, 39, 0.95), rgba(10, 16, 28, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 14px 28px rgba(0, 0, 0, 0.22);
}

.waf-antibot-editor-frame .waf-card-head h3 {
  font-size: 16px;
}

.waf-antibot-editor-frame .waf-card-body {
  padding: 16px;
}

.waf-auth-editor-frame .waf-card-head h3 {
  font-size: 16px;
}

.waf-auth-editor-frame .waf-card-body {
  padding: 16px;
}

.waf-auth-users-table input {
  width: 100%;
  box-sizing: border-box;
}

.waf-auth-password-cell {
  position: relative;
  display: block;
}

.waf-auth-password-cell input {
  width: 100%;
  padding-right: 42px;
}

.waf-auth-users-enabled-cell {
  min-width: 90px;
}

.waf-auth-users-enabled-cell .waf-checkbox {
  justify-content: center;
}

.waf-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid rgba(96, 121, 187, 0.35);
  border-radius: 10px;
  background: rgba(8, 11, 18, 0.88);
  color: #eef3ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.waf-password-toggle:hover {
  background: rgba(25, 35, 56, 0.95);
  border-color: rgba(125, 155, 255, 0.62);
}

.waf-password-toggle svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1200px) {
  .waf-antibot-auth-grid {
    grid-template-columns: 1fr;
  }
}

#dashboard-page .dashboard-board {
  position: relative;
  width: 100%;
  min-height: 460px;
}

#dashboard-page .dashboard-frame {
  position: absolute;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

#dashboard-page .dashboard-frame .waf-card-body {
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

#dashboard-page.dashboard-edit-mode .dashboard-frame {
  outline: 1px dashed rgba(120, 140, 180, 0.45);
  outline-offset: 2px;
  cursor: grab;
}

#dashboard-page .dashboard-frame.dragging {
  opacity: 0.7;
  cursor: grabbing;
}

#dashboard-page .dashboard-frame-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#dashboard-page .frame-resize-handle {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#dashboard-page .frame-resize-handle.resize-se {
  width: 14px;
  height: 14px;
  right: 8px;
  bottom: 8px;
  border-right: 2px solid rgba(125, 155, 255, 0.5);
  border-bottom: 2px solid rgba(125, 155, 255, 0.5);
  cursor: nwse-resize;
}

#dashboard-page .frame-resize-handle.resize-e {
  top: 35%;
  right: 0;
  width: 8px;
  height: 30%;
  cursor: ew-resize;
}

#dashboard-page .frame-resize-handle.resize-s {
  left: 35%;
  bottom: 0;
  width: 30%;
  height: 8px;
  cursor: ns-resize;
}

#dashboard-page .frame-resize-handle.resize-w {
  top: 35%;
  left: 0;
  width: 8px;
  height: 30%;
  cursor: ew-resize;
}

#dashboard-page .frame-resize-handle.resize-n {
  left: 35%;
  top: 0;
  width: 30%;
  height: 8px;
  cursor: ns-resize;
}

#dashboard-page .frame-resize-handle.resize-e::after,
#dashboard-page .frame-resize-handle.resize-w::after,
#dashboard-page .frame-resize-handle.resize-s::after,
#dashboard-page .frame-resize-handle.resize-n::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(125, 155, 255, 0.35);
  border-radius: 999px;
}

#dashboard-page.dashboard-edit-mode .frame-resize-handle.resize-se {
  opacity: 0;
  opacity: 1;
}

#dashboard-page.dashboard-edit-mode .frame-resize-handle {
  opacity: 1;
}

#dashboard-page .frame-actions {
  display: flex;
  gap: 6px;
}

#dashboard-page .dashboard-metric.metric-disabled,
#dashboard-page .dashboard-list-row.row-disabled,
#dashboard-page .mini-metric.metric-disabled {
  opacity: 0.55;
  pointer-events: none;
}

#dashboard-page .dashboard-metric.clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#dashboard-page .dashboard-metric.clickable:hover {
  box-shadow: 0 6px 14px rgba(18, 25, 40, 0.12);
}

#dashboard-page .dashboard-metric {
  border: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

#dashboard-page .dashboard-metric .metric-hint {
  font-size: 12px;
  margin-top: 4px;
}

#dashboard-page .dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dashboard-page .dashboard-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(120, 140, 180, 0.08);
  min-width: 0;
  max-width: 100%;
}

#dashboard-page button.dashboard-list-row {
  border: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

#dashboard-page .dashboard-list-row.clickable {
  cursor: pointer;
  transition: background 0.2s ease;
}

#dashboard-page .dashboard-list-row.clickable:hover {
  background: rgba(120, 140, 180, 0.16);
}

#dashboard-page .dashboard-list-label {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#dashboard-page .dashboard-list-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

#dashboard-page .dashboard-mini-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

#dashboard-page .dashboard-mini-metrics.column {
  grid-template-columns: 1fr;
}

#dashboard-page .mini-metric {
  padding: 12px;
  border-radius: 12px;
  background: rgba(120, 140, 180, 0.1);
  min-width: 0;
  max-width: 100%;
}

#dashboard-page .mini-metric.clickable {
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#dashboard-page .mini-metric.clickable:hover {
  background: rgba(120, 140, 180, 0.18);
  transform: translateY(-1px);
}

#dashboard-page .mini-metric-value {
  font-size: clamp(16px, 2.1vw, 18px);
  font-weight: 700;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#dashboard-page .mini-metric-label {
  font-size: 12px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#dashboard-page .dashboard-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dashboard-page .dashboard-detail-row {
  border: 1px solid rgba(125, 155, 255, 0.2);
  background: rgba(12, 16, 26, 0.7);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

#dashboard-page .dashboard-detail-row:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#dashboard-page .dashboard-detail-row:hover:not(:disabled) {
  border-color: rgba(125, 155, 255, 0.45);
  background: rgba(52, 70, 120, 0.4);
}

#dashboard-page .dashboard-detail-row .detail-title {
  font-weight: 600;
}

#dashboard-page .dashboard-detail-row .detail-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

#dashboard-page .dashboard-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#dashboard-page .dashboard-chart .chart-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr) minmax(40px, 60px);
  gap: 10px;
  align-items: center;
}

#dashboard-page .dashboard-chart .chart-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(36, 46, 70, 0.6);
  overflow: hidden;
}

#dashboard-page .dashboard-chart .chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}

#dashboard-page .dashboard-chart .chart-bar svg .chart-fill {
  fill: #7d9bff;
}

#dashboard-page .dashboard-chart .chart-bar.muted svg .chart-fill {
  fill: #ffb366;
}

#dashboard-page .dashboard-chart .chart-value {
  font-weight: 600;
  text-align: right;
}

#dashboard-page .dashboard-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dashboard-page .dashboard-activity-row {
  border: 1px solid rgba(125, 155, 255, 0.2);
  background: rgba(12, 16, 26, 0.7);
  border-radius: 10px;
  padding: 8px 10px;
}

#dashboard-page .dashboard-activity-title {
  font-weight: 600;
}

#dashboard-page .dashboard-activity-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

#dashboard-page .dashboard-events {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#dashboard-page .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}

#dashboard-page .checkbox-row input {
  width: 16px;
  height: 16px;
}

#dashboard-page .dashboard-frame-settings-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

#dashboard-page .dashboard-frame-settings-items input[type="number"] {
  width: 90px;
  margin-left: auto;
}

#dashboard-page .dashboard-event-row {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 140, 180, 0.15);
  background: rgba(255, 255, 255, 0.6);
}

#dashboard-page .dashboard-event-title {
  font-weight: 600;
}

#dashboard-page .dashboard-event-details {
  margin-top: 4px;
  font-size: 12px;
}

#dashboard-page .dashboard-event-time {
  margin-top: 6px;
  font-size: 11px;
}

#dashboard-page .frame-meta {
  font-size: 12px;
  margin-bottom: 10px;
}

#dashboard-page .dashboard-stat {
  height: 100%;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(160deg, rgba(27, 38, 63, 0.8), rgba(16, 23, 39, 0.82));
}

#dashboard-page .dashboard-stat.tone-success {
  border: 1px solid rgba(62, 214, 137, 0.24);
}

#dashboard-page .dashboard-stat.tone-danger {
  border: 1px solid rgba(246, 91, 121, 0.24);
}

#dashboard-page .dashboard-stat.tone-warning {
  border: 1px solid rgba(255, 192, 92, 0.3);
}

#dashboard-page .dashboard-stat.tone-accent {
  border: 1px solid rgba(96, 168, 255, 0.28);
}

#dashboard-page .dashboard-stat-value {
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.05;
  font-weight: 700;
}

#dashboard-page .dashboard-stat-label {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

#dashboard-page .dashboard-series {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

#dashboard-page .dashboard-series-canvas {
  flex: 1;
  min-height: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  position: relative;
}

#dashboard-page .dashboard-widget-content {
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

#dashboard-page .dashboard-scroll-area {
  overflow: auto;
  padding-right: 4px;
}

#dashboard-page .dashboard-series-axis {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: nowrap;
  overflow: hidden;
}

#dashboard-page .dashboard-series-axis span {
  white-space: nowrap;
  min-width: 0;
}

#dashboard-page .dashboard-series-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 2px 2px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

#dashboard-page .dashboard-series-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

#dashboard-page .dashboard-series-legend .dot-attacks {
  background: #f17322;
}

#dashboard-page .dashboard-series-legend .dot-requests {
  background: #2895ff;
}

#dashboard-page .dashboard-chart-tooltip {
  position: absolute;
  z-index: 30;
  max-width: min(360px, 90%);
  pointer-events: none;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(6, 10, 18, 0.96);
  border: 1px solid rgba(96, 121, 187, 0.4);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#dashboard-page .dashboard-gauge {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  max-height: 210px;
  max-width: 210px;
  background:
    radial-gradient(circle at center, rgba(12, 16, 26, 0.95) 57%, transparent 58%),
    conic-gradient(from 0deg, rgba(76, 204, 142, 0.9) 0 25%, rgba(255, 198, 82, 0.88) 25% 50%, rgba(255, 92, 120, 0.92) 50% 100%);
  position: relative;
}

#dashboard-page .dashboard-gauge-value {
  padding-top: clamp(36px, 5vw, 58px);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
}

#dashboard-page .dashboard-system-main {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  min-width: 0;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#dashboard-page .dashboard-system {
  overflow: hidden;
}

#dashboard-page .dashboard-system-clickable {
  border: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

#dashboard-page .dashboard-system-row {
  font-size: clamp(12px, 2vw, 13px);
}

#dashboard-page .dashboard-series-svg {
  width: 100%;
  height: 100%;
  display: block;
}

#dashboard-page .dashboard-gauge::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.9);
  border: 1px solid rgba(120, 140, 180, 0.25);
}

#dashboard-page .dashboard-gauge-value,
#dashboard-page .dashboard-gauge-label {
  position: relative;
  z-index: 1;
  text-align: center;
}

#dashboard-page .dashboard-gauge-label {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}

#dashboard-page .dashboard-system {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dashboard-page .dashboard-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(55, 70, 110, 0.45);
  overflow: hidden;
}

#dashboard-page .dashboard-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4cc68b, #84a8ff);
}

#dashboard-page .dashboard-system-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  min-width: 0;
}

#dashboard-page .dashboard-system-row > span,
#dashboard-page .dashboard-system-row > strong,
#dashboard-page .dashboard-list-label > strong,
#dashboard-page .dashboard-list-label .muted,
#dashboard-page .dashboard-list-meta .badge,
.container-status-grid > *,
.container-status-grid p {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#dashboard-page .dashboard-ip-main {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

#dashboard-page .dashboard-ip-country {
  white-space: nowrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.74);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI", Tahoma, Arial, sans-serif;
}

#dashboard-page .emoji-flag {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", "Android Emoji", sans-serif;
  font-style: normal;
  font-size: 1.1em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.country-flag-img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.country-flag-fallback {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 0 3px;
  letter-spacing: 0.03em;
}

.dashboard-detail-total {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

.dashboard-detail-total strong {
  color: #e8eefc;
  font-weight: 600;
}

.dashboard-detail-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  display: block;
  margin-top: 2px;
}

#dashboard-page .dashboard-ip-country-block {
  margin: 4px 0 10px;
}

#dashboard-page .dashboard-detail-section + .dashboard-detail-section {
  margin-top: 14px;
}

#dashboard-page .dashboard-detail-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
}

#dashboard-page .dashboard-containers-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

#dashboard-page .dashboard-containers-uptime-inline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.74);
  padding: 2px 2px 0;
}

#dashboard-page .dashboard-containers-system-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 8px;
}

#dashboard-page .dashboard-containers-system-row .mini-metric {
  min-height: 64px;
}

#dashboard-page .dashboard-containers-system-row .mini-metric .mini-metric-value {
  font-size: clamp(20px, 2.4vw, 30px);
}

#dashboard-page .dashboard-containers-list-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

#dashboard-page .dashboard-containers-list-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 6px;
}

#dashboard-page .dashboard-containers-list {
  overflow: auto;
  padding-right: 4px;
  min-height: 0;
}

#dashboard-page .dashboard-containers-list .dashboard-list-row {
  align-items: flex-start;
  border: 1px solid rgba(120, 140, 180, 0.2);
}

#dashboard-page .dashboard-containers-list .dashboard-list-meta {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#dashboard-page .dashboard-containers-list .dashboard-list-row.container-status-success {
  border-color: rgba(76, 198, 139, 0.45);
}

#dashboard-page .dashboard-containers-list .dashboard-list-row.container-status-warning {
  border-color: rgba(255, 196, 92, 0.48);
}

#dashboard-page .dashboard-containers-list .dashboard-list-row.container-status-danger {
  border-color: rgba(246, 91, 121, 0.5);
}

#dashboard-page .dashboard-services-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

#dashboard-page .dashboard-traffic-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

#dashboard-page .dashboard-traffic-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(160deg, rgba(27, 38, 63, 0.8), rgba(16, 23, 39, 0.82));
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

#dashboard-page .dashboard-traffic-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#dashboard-page .dashboard-traffic-row.tone-success {
  border-color: rgba(62, 214, 137, 0.28);
}

#dashboard-page .dashboard-traffic-row.tone-warning {
  border-color: rgba(255, 192, 92, 0.32);
}

#dashboard-page .dashboard-traffic-row.tone-danger {
  border-color: rgba(246, 91, 121, 0.28);
}

#dashboard-page .dashboard-traffic-value {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.1;
}

#dashboard-page .dashboard-traffic-label {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 4px;
}

#dashboard-page .dashboard-service-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#dashboard-page .dashboard-service-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.badge-success {
  background: rgba(62, 214, 137, 0.15);
  border-color: rgba(62, 214, 137, 0.45);
  color: rgba(62, 214, 137, 0.95);
}

.badge-danger {
  background: rgba(246, 91, 121, 0.15);
  border-color: rgba(246, 91, 121, 0.45);
  color: rgba(246, 91, 121, 0.95);
}

#dashboard-page .waf-table-row-clickable[data-status-tone="success"] {
  box-shadow: inset 3px 0 0 rgba(76, 198, 139, 0.8);
}

#dashboard-page .waf-table-row-clickable[data-status-tone="warning"] {
  box-shadow: inset 3px 0 0 rgba(255, 196, 92, 0.85);
}

#dashboard-page .waf-table-row-clickable[data-status-tone="danger"] {
  box-shadow: inset 3px 0 0 rgba(246, 91, 121, 0.9);
}

#dashboard-page .dashboard-container-logs-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#dashboard-page .dashboard-container-logs-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#dashboard-page .dashboard-container-logs-pre {
  max-height: 56vh;
  overflow: auto;
  min-height: 220px;
}

@media (max-width: 1200px) {
  #dashboard-page .dashboard-containers-system-row {
    grid-template-columns: 1fr;
  }
}

#dashboard-page .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  #dashboard-page .dashboard-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  #dashboard-page .dashboard-frame {
    position: relative;
    width: 100%;
    height: auto;
  }
  #dashboard-page .dashboard-frame .card-body {
    overflow: visible;
  }
  #dashboard-page .dashboard-board {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.dashboard-mode .app-header {
  display: none;
}

.app-build-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.app-build-run-command {
  margin: 12px 0 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-build-run-command .label {
  display: inline-block;
  margin-right: 6px;
  opacity: 0.8;
}

.app-build-run-command code {
  word-break: break-all;
}

.container-control-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 200px;
  gap: 12px;
  align-items: start;
}

.container-control-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.container-control-actions .btn {
  width: 100%;
}

body.auth-locked #main-screen {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

#auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#auth-overlay[hidden] {
  display: none;
}

#auth-overlay .auth-card {
  background: #121727;
  color: #f4f6ff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  min-width: 340px;
}

#auth-overlay .auth-card h2 {
  margin: 0 0 6px 0;
}

#auth-overlay .auth-card form {
  margin-top: 12px;
}

.input-with-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.input-with-actions input {
  flex: 1;
}

.input-with-actions .icon-btn {
  padding: 8px 10px;
  min-width: 44px;
}

.multiselect {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.multiselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.multiselect-tags .tag {
  background: rgba(125, 167, 255, 0.16);
  color: #dce6ff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.multiselect-menu {
  position: absolute;
  top: 42px;
  left: 0;
  width: 260px;
  background: #0f1524;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 10px 12px;
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 112px;
  overflow-y: auto;
  z-index: 50;
}

.multiselect-menu.active {
  display: grid;
}

  .multiselect-menu label {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .docs-layout {
    display: grid;
    grid-template-columns: 372px 1fr;
    gap: 16px;
    align-items: start;
  }

  @media (max-width: 1100px) {
    .docs-layout {
      grid-template-columns: 1fr;
    }
  }

  .docs-search {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .docs-search input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 14, 24, 0.8);
    color: #fff;
  }

  .filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
  }

  .filter-chips .chip {
    border: 1px solid rgba(125, 155, 255, 0.35);
    background: rgba(125, 155, 255, 0.12);
    color: #fff;
    padding: 6px 10px;
    border-radius: 12px;
    cursor: pointer;
  }

  .filter-chips .chip.active {
    background: rgba(125, 155, 255, 0.3);
    box-shadow: 0 0 0 2px rgba(125, 155, 255, 0.15);
  }

  .data-table .folder-row {
    background: rgba(125, 155, 255, 0.06);
    cursor: pointer;
  }

  #docs-page #docs-table {
    table-layout: fixed;
    width: 100%;
  }

  #docs-page #docs-table th,
  #docs-page #docs-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    vertical-align: top;
  }

  #docs-page #docs-table th:nth-child(2),
  #docs-page #docs-table td:nth-child(2) {
    width: 28%;
  }

  .data-table .folder-row:hover {
    background: rgba(125, 155, 255, 0.12);
  }

  .folder-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }

  .folder-up .folder-name-cell {
    color: rgba(255, 255, 255, 0.8);
  }

  .folder-tree {
    max-height: 420px;
    overflow-y: auto;
  }

  .folder-tree ul {
    list-style: none;
    padding-left: 14px;
    margin: 4px 0;
  }

  .folder-tree li,
  .folder-tree .folder-root {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    margin: 2px 0;
    border: 1px solid transparent;
  }

  .folder-tree li:hover,
  .folder-tree .folder-root:hover {
    border-color: rgba(125, 155, 255, 0.25);
  }

  .folder-tree .active {
    background: rgba(125, 155, 255, 0.15);
    border-color: rgba(125, 155, 255, 0.5);
  }

  .context-menu {
    position: fixed;
    background: rgba(10, 14, 24, 0.95);
    border: 1px solid rgba(125, 155, 255, 0.4);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    z-index: 1500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  }

  .context-menu[hidden] {
    display: none !important;
  }

  .context-menu button {
    background: transparent;
    color: #fff;
    border: none;
    padding: 8px 10px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
  }

  .context-menu button:hover {
    background: rgba(125, 155, 255, 0.15);
  }

  .context-menu .context-menu-row {
    display: flex;
    gap: 6px;
  }

  .context-menu .context-menu-row button {
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 0;
  }

  .context-menu .context-submenu {
    margin-left: 10px;
    padding-left: 6px;
    border-left: 1px dashed rgba(125, 155, 255, 0.35);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .context-menu .context-submenu button {
    font-size: 12px;
    padding: 6px 8px;
  }

  .doc-viewer-pane {
    background: rgba(12, 16, 26, 0.85);
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 12px;
    padding: 14px;
    min-height: 320px;
    max-height: 70vh;
    overflow: auto;
    font-size: 100%;
    line-height: 1.55;
  }

  .doc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }

  .doc-info-grid .meta-value {
    font-weight: 600;
    color: #e5edff;
    word-break: break-word;
  }

  .md-view h1,
  .md-view h2,
  .md-view h3,
  .md-view h4,
  .md-view h5,
  .md-view h6 {
    margin: 12px 0 8px;
  }

  .md-view p {
    margin: 6px 0;
  }

  .md-view code {
    background: rgba(125, 155, 255, 0.12);
    padding: 2px 4px;
    border-radius: 4px;
  }

  .md-view pre {
    background: rgba(5, 6, 11, 0.9);
    border: 1px solid rgba(125, 155, 255, 0.2);
    border-radius: 10px;
    padding: 10px;
    overflow-x: auto;
  }

  .md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
  }

  .md-table th,
  .md-table td {
    border: 1px solid rgba(125, 155, 255, 0.25);
    padding: 6px 8px;
    text-align: left;
  }

  .md-table th {
    background: rgba(125, 155, 255, 0.08);
  }

  .md-view blockquote {
    border-left: 3px solid rgba(125, 155, 255, 0.45);
    margin: 8px 0;
    padding: 6px 10px;
    background: rgba(125, 155, 255, 0.08);
    border-radius: 8px;
  }

  .docx-view img {
    max-width: 100%;
    height: auto;
  }

  .docx-view table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
  }

  .docx-view td,
  .docx-view th {
    border: 1px solid rgba(125, 155, 255, 0.2);
    padding: 6px 8px;
    text-align: left;
  }

  .code-block {
    background: rgba(5, 6, 11, 0.9);
    border: 1px solid rgba(125, 155, 255, 0.2);
    border-radius: 10px;
    margin: 10px 0;
  }

  .code-block-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(125, 155, 255, 0.12);
  }

  .code-lang {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }

  .doc-viewer-frame {
    background: rgba(12, 16, 26, 0.85);
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 12px;
    padding: 10px;
    max-height: 75vh;
    overflow: auto;
  }

  .doc-viewer-frame iframe {
    width: 100%;
    min-height: 600px;
    border: none;
  }

  #doc-view-modal {
    align-items: stretch;
    padding: 12px 20px;
  }

  #doc-view-modal .modal-body.wide {
    width: min(1280px, 98vw);
    max-height: none;
    height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #doc-view-modal .modal-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  #doc-view-modal .doc-viewer-pane,
  #doc-view-modal .doc-viewer-frame {
    flex: 1;
    min-height: 0;
    max-height: none;
  }

  #doc-view-modal .doc-viewer-frame iframe {
    min-height: 0;
    height: 100%;
  }

  .viewer-header {
    gap: 12px;
    align-items: center;
  }

  .viewer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .viewer-zoom {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .viewer-search {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .viewer-search .input {
    width: 220px;
  }

  #view-search::-webkit-search-decoration,
  #view-search::-webkit-search-cancel-button,
  #view-search::-webkit-search-results-button,
  #view-search::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  #view-zoom {
    -webkit-appearance: none;
    appearance: none;
    width: 140px;
    height: 4px;
    border-radius: 999px;
    background: rgba(120, 140, 180, 0.35);
    outline: none;
  }

  #view-zoom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d86ff, #7d9bff);
    border: 1px solid rgba(10, 16, 30, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  #view-zoom::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d86ff, #7d9bff);
    border: 1px solid rgba(10, 16, 30, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  #view-zoom::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(120, 140, 180, 0.35);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid transparent;
  }

  .badge.status-draft {
    background: rgba(255, 204, 102, 0.15);
    border-color: rgba(255, 204, 102, 0.4);
  }

  .badge.status-review {
    background: rgba(125, 155, 255, 0.18);
    border-color: rgba(125, 155, 255, 0.5);
  }

  .badge.status-approved {
    background: rgba(86, 220, 160, 0.18);
    border-color: rgba(86, 220, 160, 0.5);
  }

  .badge.status-returned {
    background: rgba(255, 121, 121, 0.15);
    border-color: rgba(255, 121, 121, 0.45);
  }

  .editor-panel {
    position: fixed;
    top: 60px;
    left: 260px;
    right: 20px;
    bottom: 20px;
    background: rgba(8, 11, 19, 0.96);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 14px;
    padding: 14px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .editor-panel[hidden] {
    display: none !important;
  }

  @media (max-width: 900px) {
    .editor-panel {
      left: 10px;
    }
  }

  .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .editor-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .editor-panel.view-only #editor-save,
  .editor-panel.view-only .editor-toolbar,
  .editor-panel.view-only .links-form,
  .editor-panel.view-only .acl-field,
  .editor-panel.view-only .acl-actions,
  .editor-panel.view-only #editor-convert {
    display: none;
  }

  .editor-panel.view-only #report-editor-reason,
  .editor-panel.view-only #report-editor-save,
  .editor-panel.view-only #report-editor-toolbar,
  .editor-panel.view-only #report-editor-meta-save,
  .editor-panel.view-only #report-editor-preview-btn {
    display: none;
  }

  .editor-panel.view-only .editor-meta .editor-meta-section {
    display: none;
  }

  #docs-page #doc-editor.editor-panel {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    margin: 0;
    min-height: 0;
    height: 100%;
  }

  #reports-page #report-editor.editor-panel {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    margin: 0;
    min-height: 0;
    height: 100%;
  }

  #docs-page .docs-doc-panel,
  #reports-page .reports-doc-panel {
    height: calc(100vh - 130px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #reports-page #report-editor.no-copy,
  #reports-page #report-editor.no-copy *,
  #docs-page #doc-editor.no-copy,
  #docs-page #doc-editor.no-copy * {
    user-select: none;
  }

  #reports-page .tab-close {
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 999px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    transition: 0.2s ease;
  }

  #reports-page .tab-close:hover {
    color: #fff;
    border-color: rgba(125, 155, 255, 0.55);
  }

  .privacy-capture-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #02040a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }

  body.privacy-mask-active .privacy-capture-mask {
    opacity: 0.98;
  }

  #docs-page #doc-editor .editor-meta .meta-text {
    background: rgba(5, 6, 11, 0.72);
    border: 1px solid rgba(96, 121, 187, 0.28);
    border-radius: 8px;
    min-height: 18px;
    padding: 10px 12px;
    color: rgba(242, 246, 255, 0.96);
    line-height: 1.35;
    word-break: break-word;
  }

  #docs-page #doc-editor.docs-privacy-shield {
    filter: blur(2px);
    transition: filter 0.2s ease;
  }

  .editor-actions input {
    background: rgba(10, 14, 24, 0.8);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 10px;
    padding: 8px 10px;
    color: #fff;
    min-width: 220px;
  }

  .editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
  }

  .editor-toolbar {
    display: flex;
    gap: 6px;
    background: rgba(14, 18, 27, 0.9);
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 10px;
    padding: 6px;
  }

  .editor-toolbar button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
  }

  .editor-toolbar button:hover {
    border-color: rgba(125, 155, 255, 0.55);
  }

  .editor-columns {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 14px;
    flex: 1;
    min-height: 0;
  }

  @media (max-width: 1100px) {
    .editor-columns {
      grid-template-columns: 1fr;
    }
  }

  .editor-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .editor-main textarea {
    flex: 1;
    min-height: 320px;
    border-radius: 12px;
    border: 1px solid rgba(125, 155, 255, 0.35);
    background: rgba(14, 18, 27, 0.92);
    color: #fff;
    padding: 12px;
    font-family: 'Consolas', 'Courier New', monospace;
  }

  .editor-meta {
    background: rgba(10, 14, 24, 0.9);
    border: 1px solid rgba(125, 155, 255, 0.3);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .doc-viewer iframe {
    width: 100%;
    min-height: 320px;
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 10px;
  }

  .editor-main .doc-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  #reports-page #report-editor #report-editor-preview {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid rgba(125, 155, 255, 0.28);
    border-radius: 12px;
    padding: 12px;
    background: rgba(7, 10, 16, 0.52);
  }

  .editor-main .doc-viewer iframe {
    flex: 1;
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 10px;
  }

  .onlyoffice-host {
    flex: 1;
    min-height: 0;
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(13, 17, 28, 0.55);
  }

  .onlyoffice-host > iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  .onlyoffice-loading {
    margin: 0 0 8px 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(125, 155, 255, 0.3);
    background: rgba(19, 26, 42, 0.65);
    color: rgba(226, 236, 255, 0.95);
    font-size: 13px;
  }

  .editor-main .doc-viewer-pane {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }

  .doc-alt-viewer {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(125, 155, 255, 0.35);
    border-radius: 12px;
    padding: 12px;
  }

  .links-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
  }

  .links-list .link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 8px;
  }

  .links-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }

  .links-form input[type="text"] {
    flex: 1;
    min-width: 120px;
  }

  .links-form select {
    min-width: 140px;
  }

  .links-form button {
    white-space: nowrap;
  }

  .stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .approval-stage {
    border: 1px solid rgba(125, 155, 255, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    min-width: 0;
  }

  .approval-stage .stage-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }

  .approval-stage .stage-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .approval-stage .stage-pill {
    background: rgba(125, 155, 255, 0.15);
    border: 1px solid rgba(125, 155, 255, 0.45);
    color: #e5e7eb;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
  }

  .approval-stage .stage-title input.stage-name {
    min-width: 160px;
  }

  .approval-stage .stage-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  .approval-stage .stage-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .approval-stage input,
  .approval-stage textarea,
  .approval-stage select {
    width: 100%;
    box-sizing: border-box;
  }

  .approval-stage textarea {
    min-height: 120px;
    resize: none;
  }

  .approval-stage .stage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .approval-stage .stage-message {
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
  }

  .approval-stage select {
    min-height: 120px;
  }

  .approval-stage .selected-hint {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #9ca3af;
    min-height: 22px;
  }

  .approval-stage .selected-hint .tag {
    background: rgba(125, 155, 255, 0.16);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 6px;
    padding: 2px 6px;
    color: #e5e7eb;
  }

  #start-approval-modal .modal-body {
    max-width: 1180px;
  }

  .approval-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.9fr;
    gap: 16px;
  }

  #export-decision-modal .approval-detail-grid {
    grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1fr);
  }

  #export-decision-modal #export-decision-form .form-actions {
    margin-top: 10px;
    justify-content: flex-start;
    gap: 10px;
  }

  .approval-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .selected-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .selected-preview .tag {
    background: rgba(125, 155, 255, 0.16);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 6px;
    padding: 2px 6px;
    color: #e5e7eb;
    font-size: 12px;
  }

  .info-card {
    background: rgba(12, 16, 26, 0.85);
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    padding: 4px 0;
  }

  .info-row span:first-child {
    color: #9ca3af;
  }

  .info-row span:last-child {
    text-align: right;
  }

  .approval-stages {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .stage-card {
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }

  .stage-card.status-locked {
    opacity: 0.7;
  }

  .stage-card.status-rejected {
    border-color: rgba(255, 121, 121, 0.45);
  }

  .stage-card.status-approved {
    border-color: rgba(86, 220, 160, 0.5);
  }

  .stage-card.current-stage {
    box-shadow: 0 0 0 1px rgba(125, 155, 255, 0.45), 0 8px 20px rgba(0, 0, 0, 0.18);
  }

  .stage-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
  }

  .stage-label {
    font-size: 12px;
    color: #9ca3af;
  }

  .stage-name {
    font-weight: 600;
    margin-top: 2px;
  }

  .stage-status {
    font-size: 13px;
    color: #d1d5db;
    text-align: right;
  }

  .stage-message {
    background: rgba(125, 155, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    min-height: 44px;
  }

  .stage-people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .people-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .person-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
  }

  .stage-decision {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .stage-decision textarea {
    width: 100%;
  }

  @media (max-width: 980px) {
    #export-decision-modal .approval-detail-grid {
      grid-template-columns: 1fr;
    }
  }

  .templates-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .template-card {
    background: rgba(12, 16, 26, 0.85);
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 12px;
    padding: 12px;
  }

  .template-preview {
    margin-top: 10px;
    white-space: pre-wrap;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(5, 6, 11, 0.6);
    border: 1px solid rgba(96, 121, 187, 0.2);
    border-radius: 8px;
    padding: 10px;
  }

  .report-section-card {
    border: 1px solid rgba(96, 121, 187, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    background: rgba(5, 6, 11, 0.6);
  }

  .report-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

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

  .report-section-body .form-field {
    margin-bottom: 8px;
  }

  .report-snapshots {
    margin-top: 10px;
  }

  .snapshot-json,
  .snapshot-items {
    padding: 8px;
    background: rgba(5, 6, 11, 0.6);
    border-radius: 8px;
    overflow: auto;
    max-height: 220px;
    white-space: pre;
    margin-top: 6px;
  }

  .report-chart-card {
    border: 1px solid rgba(96, 121, 187, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(5, 6, 11, 0.6);
  }

  .report-chart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .report-chart-actions {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .reports-export-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(96, 121, 187, 0.2);
    border-radius: 10px;
    background: rgba(5, 6, 11, 0.6);
  }

  .report-charts-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
  }

  .report-chart-preview-card {
    border: 1px solid rgba(96, 121, 187, 0.2);
    border-radius: 10px;
    padding: 10px;
    background: rgba(12, 16, 26, 0.85);
  }

  .report-chart-preview-card img {
    width: 100%;
    height: auto;
    display: block;
  }

  .template-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
  }

  .template-name {
    font-weight: 600;
  }

  .template-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .template-manage-actions {
    margin: 12px 0 8px;
  }

  .template-var-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 90px;
    gap: 6px;
    margin-bottom: 6px;
  }

  .template-var-row input {
    width: 100%;
  }

  .version-viewer {
    margin-top: 12px;
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 10px;
    padding: 10px;
    background: rgba(12, 16, 26, 0.85);
  }

  .version-viewer pre {
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
  }

  .approval-content .approval-columns {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 14px;
  }

  @media (max-width: 900px) {
    .approval-content .approval-columns {
      grid-template-columns: 1fr;
    }
  }

  .approval-doc-view {
    background: rgba(12, 16, 26, 0.9);
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 12px;
    padding: 10px;
    min-height: 280px;
  }

  .approval-text {
    white-space: pre-wrap;
    max-height: 460px;
    overflow: auto;
  }

  .approval-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .participants ul {
    list-style: none;
    padding-left: 0;
  }

  .participants li {
    padding: 6px 8px;
    border: 1px solid rgba(125, 155, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 6px;
  }

  .comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow: auto;
  }

  .comment-item {
    border: 1px solid rgba(125, 155, 255, 0.25);
    border-radius: 10px;
    padding: 8px;
  }

  .comment-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
  }

  .comment-form textarea,
  #decision-comment {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    resize: none;
    border-radius: 10px;
    border: 1px solid rgba(125, 155, 255, 0.25);
    background: rgba(12, 16, 26, 0.85);
    color: #fff;
    padding: 8px;
  }

  .comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    max-width: 100%;
  }

  .decision-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .comment-form button {
    align-self: flex-start;
    margin-top: 4px;
  }

  .btn.success {
    background: rgba(86, 220, 160, 0.15);
    border-color: rgba(86, 220, 160, 0.4);
    color: #c1f3dc;
  }

  .btn.danger {
    background: rgba(255, 121, 121, 0.15);
    border-color: rgba(255, 121, 121, 0.35);
    color: #ffb3b3;
  }

.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  margin: 12px 0;
  flex-wrap: wrap;
}

#users-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  align-items: center;
}

#users-filters select,
#users-filters input {
  background: rgba(5, 6, 11, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  color: #f5f7ff;
  font-size: 13px;
  min-height: 36px;
}

#users-filters input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

#roles-search {
  background: rgba(5, 6, 11, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  color: #f5f7ff;
  font-size: 13px;
  min-height: 36px;
}

#groups-search {
  background: rgba(5, 6, 11, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  color: #f5f7ff;
  font-size: 13px;
  min-height: 36px;
}

#roles-search::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

#groups-search::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

#role-create-description {
  min-height: 72px;
}

#role-create-modal .form-actions {
  justify-content: center;
}

#role-create-modal .form-actions .btn {
  min-width: 140px;
  width: auto;
}

#role-create-modal .role-permissions-actions {
  justify-content: flex-start;
  margin-top: 6px;
}

.security-card {
  background: linear-gradient(145deg, rgba(20, 26, 38, 0.95), rgba(24, 32, 52, 0.95));
  border-color: rgba(125, 155, 255, 0.25);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.metric-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.metric-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(12, 16, 26, 0.75);
  border: 1px solid rgba(125, 155, 255, 0.18);
}

.metric-list strong {
  color: #e7efff;
}

.permissions-card {
  background: rgba(10, 14, 24, 0.92);
  border-color: rgba(125, 155, 255, 0.25);
}

.permissions-card h4 {
  margin: 0 0 10px 0;
}

.permissions-card details {
  border: 1px solid rgba(125, 155, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(12, 16, 26, 0.7);
  margin-top: 10px;
}

.permissions-card summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 8px;
}

.permissions-card ul {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 6px;
}

.permissions-card li {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(5, 6, 11, 0.7);
  border: 1px solid rgba(125, 155, 255, 0.15);
}

.bulk-bar .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-line {
  line-height: 1.3;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-block;
}

#docs-page .tabs.browser-tabs,
#incidents-page .tabs.browser-tabs,
#reports-page .tabs.browser-tabs,
#backups-page .tabs.browser-tabs,
#settings-page .tabs.browser-tabs,
#tasks-page .tabs.browser-tabs,
#controls-page .tabs.browser-tabs,
#monitoring-page .tabs.browser-tabs {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 4px 4px 0;
  border-bottom: 1px solid rgba(125, 155, 255, 0.25);
}

#docs-page .tabs.browser-tabs .tab-btn,
#incidents-page .tabs.browser-tabs .tab-btn,
#reports-page .tabs.browser-tabs .tab-btn,
#backups-page .tabs.browser-tabs .tab-btn,
#settings-page .tabs.browser-tabs .tab-btn,
#tasks-page .tabs.browser-tabs .tab-btn,
#controls-page .tabs.browser-tabs .tab-btn,
#monitoring-page .tabs.browser-tabs .tab-btn {
  border: 1px solid rgba(125, 155, 255, 0.25);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 8px 14px;
  background: rgba(10, 14, 24, 0.6);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#docs-page .tabs.browser-tabs .tab-btn:hover,
#incidents-page .tabs.browser-tabs .tab-btn:hover,
#reports-page .tabs.browser-tabs .tab-btn:hover,
#backups-page .tabs.browser-tabs .tab-btn:hover,
#settings-page .tabs.browser-tabs .tab-btn:hover,
#tasks-page .tabs.browser-tabs .tab-btn:hover,
#controls-page .tabs.browser-tabs .tab-btn:hover,
#monitoring-page .tabs.browser-tabs .tab-btn:hover {
  color: #fff;
  background: rgba(24, 32, 50, 0.8);
  transform: translateY(-2px);
}

#docs-page .tabs.browser-tabs .tab-btn.active,
#incidents-page .tabs.browser-tabs .tab-btn.active,
#reports-page .tabs.browser-tabs .tab-btn.active,
#backups-page .tabs.browser-tabs .tab-btn.active,
#settings-page .tabs.browser-tabs .tab-btn.active,
#tasks-page .tabs.browser-tabs .tab-btn.active,
#controls-page .tabs.browser-tabs .tab-btn.active,
#monitoring-page .tabs.browser-tabs .tab-btn.active {
  background: rgba(20, 26, 38, 0.95);
  color: #fff;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
  z-index: 2;
}

#docs-page .tabs.browser-tabs .tab-btn.active::after,
#incidents-page .tabs.browser-tabs .tab-btn.active::after,
#reports-page .tabs.browser-tabs .tab-btn.active::after,
#backups-page .tabs.browser-tabs .tab-btn.active::after,
#settings-page .tabs.browser-tabs .tab-btn.active::after,
#tasks-page .tabs.browser-tabs .tab-btn.active::after,
#controls-page .tabs.browser-tabs .tab-btn.active::after,
#monitoring-page .tabs.browser-tabs .tab-btn.active::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -2px;
  height: 4px;
  background: rgba(20, 26, 38, 0.95);
}

#docs-page .tabs.browser-tabs .tab-btn.disabled,
#docs-page .tabs.browser-tabs .tab-btn:disabled,
#reports-page .tabs.browser-tabs .tab-btn.disabled,
#reports-page .tabs.browser-tabs .tab-btn:disabled,
#backups-page .tabs.browser-tabs .tab-btn.disabled,
#backups-page .tabs.browser-tabs .tab-btn:disabled,
#settings-page .tabs.browser-tabs .tab-btn.disabled,
#settings-page .tabs.browser-tabs .tab-btn:disabled,
#tasks-page .tabs.browser-tabs .tab-btn.disabled,
#tasks-page .tabs.browser-tabs .tab-btn:disabled,
#controls-page .tabs.browser-tabs .tab-btn.disabled,
#controls-page .tabs.browser-tabs .tab-btn:disabled,
#monitoring-page .tabs.browser-tabs .tab-btn.disabled,
#monitoring-page .tabs.browser-tabs .tab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

#tasks-page .tabs.browser-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#tasks-page .tab-close {
  border-radius: 999px;
  border: 1px solid rgba(125, 155, 255, 0.25);
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
}

#backups-page .backups-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#backups-page .backups-metric .metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  margin-top: 14px;
}

#backups-page .backups-metric .card-body > .metric-label:first-child {
  margin-top: 0;
}

#backups-page .backups-metric .metric-value {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-top: 4px;
}

#backups-page .backups-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#backups-page .backups-actions-spaced {
  margin-top: 10px;
}

#backups-page .backups-action-spaced {
  margin-left: 8px;
}

#reports-page .reports-audit-actions {
  margin-top: 10px;
}

#reports-page .reports-export-grid-top {
  margin-top: 10px;
}

#backups-page .steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

#backups-page .steps-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  border: 1px solid rgba(125, 155, 255, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(10, 14, 24, 0.5);
}

#backups-page .restore-step-name {
  font-weight: 500;
}

#backups-page .restore-step-status {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

#backups-page .restore-step-detail {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 12px;
  word-break: break-word;
}

#backups-page .backups-empty {
  padding: 16px;
  border: 1px dashed rgba(125, 155, 255, 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
}

#backups-page .backups-overview-actions {
  margin-top: 12px;
}

#backups-page .backups-overview-actions-inside {
  margin-top: 14px;
}

#backups-page .backups-overview-loading {
  margin-top: 10px;
}

#backups-page .backups-overview-empty {
  margin-top: 10px;
}

#backups-page .backups-create-card {
  margin-top: 12px;
}

#backups-page .backups-plan-grid {
  align-items: start;
}

#backups-page .backups-plan-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#backups-page .backups-scope-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: flex-start !important;
  align-items: flex-start;
}

#backups-page .backups-scope-grid .checkbox {
  justify-content: flex-start;
  width: auto !important;
  flex: 0 0 auto !important;
}

#backups-page .backups-create-checkbox {
  display: flex;
  align-items: flex-end;
}

#backups-page .backups-create-name-field .checkbox {
  margin-top: 10px;
}

#backups-page #backups-create-scope-preview {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
}

#backups-page .backups-overview-empty-create,
#backups-page .backups-history-empty-create {
  margin-left: 8px;
}

#backups-page .backups-restore-current {
  margin-top: 10px;
}

#backups-page .backups-contents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 12px;
  margin-bottom: 12px;
}

#backups-page #backups-contents-body h4 {
  margin: 10px 0 8px;
  font-size: 14px;
}

#tasks-page .tab-close:hover {
  color: #fff;
  border-color: rgba(125, 155, 255, 0.55);
}

#settings-page > .card > .card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#settings-page .settings-panel {
  margin-top: 4px;
}

#settings-page .nested-card {
  background: rgba(10, 14, 24, 0.7);
  border: 1px solid rgba(125, 155, 255, 0.15);
  border-radius: 12px;
}

#settings-page .settings-card .card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#settings-page .settings-card .add-row input {
  min-width: 200px;
  background: rgba(5, 6, 11, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f5f7ff;
  font-size: 14px;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s, background-color 0.2s;
}

#settings-page .settings-card .add-row input:hover,
#settings-page .settings-card .add-row input:focus {
  border-color: rgba(125, 155, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(125, 155, 255, 0.2);
  background: rgba(5, 6, 11, 0.95);
}

#settings-page .settings-card .add-row input::placeholder {
  color: rgba(245, 247, 255, 0.6);
}

#settings-page .autosave-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

#settings-page .autosave-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.select-compact {
  min-width: 90px;
  max-width: 120px;
  padding: 8px 10px;
}

#settings-page #settings-advanced .settings-compact-action {
  width: fit-content;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12px;
}

#settings-page #settings-advanced .settings-inline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#settings-page #settings-advanced .settings-inline-row .select,
#settings-page #settings-advanced .settings-inline-row select,
#settings-page #settings-advanced .settings-inline-row .input,
#settings-page #settings-advanced .settings-inline-row input {
  flex: 0 0 60%;
  max-width: 60%;
  min-height: 32px;
  padding: 8px 12px;
  font-size: 13px;
}

#settings-page #settings-advanced .settings-inline-row .settings-compact-action {
  align-self: center;
  padding: 12px 18px;
  font-size: 14px;
  white-space: nowrap;
}

#settings-page .settings-card .add-row {
  flex-wrap: wrap;
}

#settings-page .settings-dlp-frame {
  border: 1px solid rgba(125, 155, 255, 0.24);
  border-radius: 12px;
  padding: 14px 14px 10px;
  background: rgba(7, 11, 20, 0.62);
}

#settings-page .settings-dlp-frame h4 {
  margin: 0 0 6px;
}

#settings-page .settings-dlp-frame .checkbox {
  margin-top: 8px;
}

#settings-page #settings-hardening-scope {
  min-height: 88px;
}

#settings-page .classification-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#settings-page .classification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(125, 155, 255, 0.2);
  background: rgba(12, 16, 26, 0.58);
}

#settings-page .classification-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#settings-page .classification-rank {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid rgba(125, 155, 255, 0.35);
  background: rgba(125, 155, 255, 0.14);
  color: #e5ecff;
}

#settings-page .classification-label {
  font-size: 13px;
  color: rgba(245, 247, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#settings-page .classification-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#incidents-page .tab-close {
  border-radius: 999px;
  border: 1px solid rgba(125, 155, 255, 0.25);
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
}

#incidents-page .tab-close:hover {
  color: #fff;
  border-color: rgba(125, 155, 255, 0.55);
}

#incidents-page .incident-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: center;
}

#incidents-page .incident-filters select {
  background: rgba(5, 6, 11, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  color: #f5f7ff;
  font-size: 13px;
  min-height: 36px;
}

#incidents-page .incident-row {
  cursor: pointer;
}

#incidents-page .incident-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#incidents-page .incident-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125, 155, 255, 0.15);
  background: rgba(12, 16, 26, 0.85);
  color: #fff;
  text-align: left;
}

#incidents-page .incident-item:hover {
  border-color: rgba(125, 155, 255, 0.4);
}

#incidents-page .incident-item-title {
  font-weight: 600;
}

#incidents-page .incident-item-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.severity-badge {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.severity-critical {
  background: rgba(255, 121, 121, 0.2);
  border-color: rgba(255, 121, 121, 0.45);
  color: #ffb3b3;
}

.severity-high {
  background: rgba(255, 140, 87, 0.2);
  border-color: rgba(255, 140, 87, 0.5);
  color: #ffb366;
}

.severity-medium {
  background: rgba(255, 202, 99, 0.2);
  border-color: rgba(255, 202, 99, 0.45);
  color: #ffe3a3;
}

.severity-low {
  background: rgba(125, 155, 255, 0.18);
  border-color: rgba(125, 155, 255, 0.45);
  color: #c7d6ff;
}

.status-badge {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.status-open {
  background: rgba(125, 155, 255, 0.18);
  border-color: rgba(125, 155, 255, 0.45);
  color: #b9caff;
}

.status-in_progress {
  background: rgba(255, 202, 99, 0.18);
  border-color: rgba(255, 202, 99, 0.45);
  color: #ffe3a3;
}

.status-contained {
  background: rgba(95, 210, 240, 0.18);
  border-color: rgba(95, 210, 240, 0.45);
  color: #c4f0fb;
}

.status-resolved {
  background: rgba(180, 152, 255, 0.18);
  border-color: rgba(180, 152, 255, 0.45);
  color: #e5dbff;
}

.status-waiting {
  background: rgba(180, 190, 210, 0.18);
  border-color: rgba(180, 190, 210, 0.42);
  color: #dde8ff;
}

.status-waiting_info {
  background: rgba(96, 170, 255, 0.18);
  border-color: rgba(96, 170, 255, 0.42);
  color: #cfe6ff;
}

.status-approval {
  background: rgba(255, 158, 214, 0.18);
  border-color: rgba(255, 158, 214, 0.45);
  color: #ffdced;
}

.status-closed {
  background: rgba(86, 220, 160, 0.18);
  border-color: rgba(86, 220, 160, 0.45);
  color: #c1f3dc;
}

.status-closed_deferred {
  background: rgba(216, 166, 70, 0.18);
  border-color: rgba(216, 166, 70, 0.45);
  color: #ffe2a6;
}

.status-closed_monitor {
  background: rgba(64, 199, 215, 0.18);
  border-color: rgba(64, 199, 215, 0.45);
  color: #bdeff6;
}

.status-closed_rejected {
  background: rgba(210, 107, 83, 0.18);
  border-color: rgba(210, 107, 83, 0.45);
  color: #ffd4cb;
}

.status-closed_blocked {
  background: rgba(198, 79, 143, 0.18);
  border-color: rgba(198, 79, 143, 0.45);
  color: #ffd4ea;
}

#incidents-page .incident-card {
  padding: 16px;
}

#incidents-page .incident-card .card-body {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 8px;
}

#incidents-page .incident-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(125, 155, 255, 0.18);
  margin-bottom: 12px;
}

#incidents-page .incident-stage-bar .stage-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#incidents-page .incident-header {
  margin-bottom: 12px;
}

#incidents-page .incident-header .actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#incidents-page .incident-status-row {
  gap: 8px;
  margin-top: 6px;
}

#incidents-page .incident-status-row .pill {
  padding: 4px 10px;
  font-size: 12px;
}

#incidents-page .stage-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

#incidents-page .stage-tabs .tab-btn {
  border-radius: 10px;
  border: 1px solid rgba(125, 155, 255, 0.25);
  padding: 6px 10px;
  background: rgba(10, 14, 24, 0.6);
  color: rgba(255, 255, 255, 0.75);
}

#incidents-page .stage-tabs .tab-btn.active {
  background: rgba(20, 26, 38, 0.95);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(125, 155, 255, 0.45);
}

#incidents-page .stage-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#incidents-page .stage-overview-panel {
  gap: 0;
}

#incidents-page .stage-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

#incidents-page .stage-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#incidents-page .stage-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#incidents-page .stage-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#incidents-page .stage-type-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 155, 255, 0.3);
  background: rgba(15, 20, 34, 0.8);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

#incidents-page .stage-status-pill.status-done,
.status-done {
  background: rgba(86, 220, 160, 0.18);
  border-color: rgba(86, 220, 160, 0.45);
  color: #c1f3dc;
}

#incidents-page .stage-status-pill.status-open {
  background: rgba(125, 155, 255, 0.12);
  border-color: rgba(125, 155, 255, 0.35);
  color: #c8d4ff;
}

#incidents-page .stage-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#incidents-page .stage-readonly .stage-blocks {
  opacity: 0.85;
}

#incidents-page .stage-readonly .stage-blocks button {
  pointer-events: none;
  opacity: 0.7;
}

#incidents-page .stage-block {
  border: 1px solid rgba(125, 155, 255, 0.25);
  background: rgba(12, 16, 26, 0.85);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

#incidents-page .stage-hint {
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed rgba(125, 155, 255, 0.4);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#incidents-page .stage-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#incidents-page .stage-block-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#incidents-page .stage-block-title {
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2px;
}

#incidents-page .stage-block-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}

#incidents-page .stage-block-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#incidents-page .stage-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#incidents-page .stage-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(18, 23, 36, 0.8);
  border: 1px solid rgba(125, 155, 255, 0.12);
  border-radius: 10px;
  padding: 10px;
}

#incidents-page .stage-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#incidents-page .stage-field-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

#incidents-page .stage-row .input,
#incidents-page .stage-row .select,
#incidents-page .stage-row .textarea {
  width: 100%;
}

#incidents-page .stage-row .textarea {
  min-height: 70px;
}

#incidents-page .datetime-field {
  display: flex;
  gap: 8px;
  align-items: center;
}

#incidents-page .datetime-field.inline input {
  width: auto;
  min-width: 130px;
}

#incidents-page .stage-row-remove {
  margin-left: auto;
  align-self: center;
  padding: 6px 10px;
}

#incidents-page .stage-row-add {
  align-self: flex-start;
}

#incidents-page .stage-helper {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

#incidents-page .stage-overview-hint {
  padding: 12px;
  border: 1px dashed rgba(125, 155, 255, 0.3);
  border-radius: 10px;
  background: rgba(10, 14, 24, 0.7);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

#incidents-page .pill-btn {
  border-radius: 12px;
  border: 1px solid rgba(125, 155, 255, 0.35);
  background: rgba(14, 18, 30, 0.85);
  color: #fff;
  padding: 6px 12px;
  transition: all 0.2s ease;
}

#incidents-page .pill-btn.danger {
  border-color: rgba(255, 120, 120, 0.5);
  color: #ffc0c0;
}

#incidents-page .pill-btn.pill-active {
  background: rgba(125, 155, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(125, 155, 255, 0.3);
}

#incidents-page .pill-btn.danger.pill-active {
  background: rgba(255, 120, 120, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 120, 120, 0.35);
}

#incidents-page .checklist-row {
  align-items: stretch;
  gap: 12px;
}

#incidents-page .checklist-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#incidents-page .checklist-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#incidents-page .checklist-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

#incidents-page .due-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}

#incidents-page .checklist-stamp {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

#incidents-page .artifact-row {
  flex-direction: column;
  gap: 12px;
}

#incidents-page .artifact-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  width: 100%;
}

#incidents-page .artifact-files {
  border: 1px dashed rgba(125, 155, 255, 0.35);
  background: rgba(15, 20, 34, 0.85);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#incidents-page .artifact-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.78);
}

#incidents-page .artifact-files-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#incidents-page .artifact-file-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(125, 155, 255, 0.18);
  background: rgba(9, 12, 20, 0.8);
}

#incidents-page .artifact-file-name {
  font-weight: 600;
  color: #fff;
}

#incidents-page .artifact-file-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

#incidents-page .artifact-file-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

#incidents-page .stage-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

#incidents-page .overview-col {
  border: 1px solid rgba(125, 155, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  background: rgba(10, 14, 24, 0.8);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#incidents-page .overview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#incidents-page .overview-title {
  font-weight: 600;
  color: #fff;
}

#incidents-page .overview-stage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#incidents-page .overview-stage-card {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(125, 155, 255, 0.2);
  background: rgba(15, 19, 30, 0.7);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#incidents-page .overview-stage-card.active {
  border-color: rgba(125, 155, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(125, 155, 255, 0.2);
}

#incidents-page .overview-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#incidents-page .overview-stage-name {
  font-weight: 600;
  color: #fff;
}

#incidents-page .overview-stage-actions {
  display: inline-flex;
  gap: 8px;
}

#incidents-page .status-select {
  min-width: 220px;
}

.stage-block-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stage-block-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(125, 155, 255, 0.25);
  border-radius: 10px;
  background: rgba(12, 16, 26, 0.7);
}

.stage-block-option-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage-block-option-title {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.stage-block-option-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.stage-block-option-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.reorder-btn {
  padding: 6px 8px;
}

.stage-block-available {
  margin-top: 6px;
}

.stage-block-available-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-field-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.decision-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.decision-card {
  border: 1px solid rgba(125, 155, 255, 0.25);
  background: rgba(15, 20, 34, 0.8);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.decision-card[data-outcome="approved"] {
  border-left: 3px solid #5f86ff;
}

.decision-card[data-outcome="closed"] {
  border-left: 3px solid #56dca0;
}

.decision-card[data-outcome="deferred"] {
  border-left: 3px solid #d8a646;
}

.decision-card[data-outcome="monitor"] {
  border-left: 3px solid #40c7d7;
}

.decision-card[data-outcome="rejected"] {
  border-left: 3px solid #d26b53;
}

.decision-card[data-outcome="blocked"] {
  border-left: 3px solid #c64f8f;
}

.decision-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.decision-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.decision-field.wide {
  width: 100%;
}

.decision-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.decision-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.decision-options-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.decision-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.decision-option-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.decision-option-remove,
.decision-remove {
  padding: 6px 10px;
}

#incidents-page .link-doc-ref {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(125, 155, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  margin-right: 6px;
  font-size: 12px;
}

#incidents-page .export-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#incidents-page .export-actions-row .btn-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#incidents-page .stage-textarea {
  width: 100%;
  min-height: 180px;
  border-radius: 12px;
  border: 1px solid rgba(125, 155, 255, 0.25);
  background: rgba(12, 16, 26, 0.85);
  color: #fff;
  padding: 12px;
  resize: vertical;
  box-sizing: border-box;
  max-width: 100%;
  display: block;
}

  #incidents-page .incident-form-card textarea {
    min-height: 160px;
    box-sizing: border-box;
    max-width: 100%;
  }

  #incidents-page .incident-form-card .form-field.wide {
    grid-column: span 2;
  }

  #incidents-page .incident-form-grid {
    align-items: start;
  }

  #incidents-page .incident-user-select {
    min-height: 140px;
  }

  @media (max-width: 900px) {
    #incidents-page .incident-item {
      grid-template-columns: 1fr;
    }
  }

  #incidents-page .dashboard-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr);
    gap: 16px;
    align-items: stretch;
  }

  #incidents-page .dashboard-quick {
    align-self: start;
    padding: 14px 16px;
  }

  #incidents-page .dashboard-quick .card-header {
    margin-bottom: 8px;
  }

  #incidents-page .dashboard-metrics {
    display: flex;
    align-items: stretch;
  }

  #incidents-page .metric-tile-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 12px;
  }

  #incidents-page .metric-tile {
    border: 1px solid rgba(125, 155, 255, 0.25);
    background: rgba(12, 16, 26, 0.65);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
  }

  #incidents-page .metric-value {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  #incidents-page .metric-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
  }

  #incidents-page .metric-tile:hover {
    border-color: rgba(125, 155, 255, 0.5);
    background: rgba(52, 70, 120, 0.4);
    transform: translateY(-1px);
  }

  #controls-page .controls-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }

  #controls-page .metric-tile {
    border: 1px solid rgba(125, 155, 255, 0.25);
    background: rgba(12, 16, 26, 0.65);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
  }

  #controls-page .metric-value {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  #controls-page .metric-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
  }

  #controls-page .metric-tile:hover {
    border-color: rgba(125, 155, 255, 0.5);
    background: rgba(52, 70, 120, 0.4);
    transform: translateY(-1px);
  }

  #controls-page .controls-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    align-items: end;
  }

  #controls-page .controls-filters .btn {
    align-self: end;
    min-height: 36px;
  }

  #controls-page .clickable-row {
    cursor: pointer;
  }

  #controls-page .framework-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #controls-page .framework-card {
    border: 1px solid rgba(96, 121, 187, 0.35);
    background: rgba(8, 12, 20, 0.7);
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
  }

  #controls-page .framework-card:hover {
    border-color: rgba(125, 155, 255, 0.5);
    background: rgba(52, 70, 120, 0.35);
    transform: translateY(-1px);
  }

  #controls-page .framework-card.active {
    border-color: rgba(125, 155, 255, 0.8);
    background: rgba(52, 70, 120, 0.55);
  }

  #controls-page .framework-title {
    font-weight: 600;
  }

  #controls-page .framework-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
  }

  #controls-page .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #controls-page .detail-item.wide {
    grid-column: span 2;
  }

  #controls-page .detail-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
  }

  #controls-page .detail-value {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(30, 38, 58, 0.45);
    border: 1px solid rgba(125, 155, 255, 0.2);
    color: #f5f7ff;
    font-size: 13px;
  }

  #controls-page .detail-section {
    margin-top: 16px;
  }

  #controls-page .controls-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #controls-page .control-comment {
    border: 1px solid rgba(125, 155, 255, 0.2);
    border-radius: 10px;
    padding: 10px;
    background: rgba(12, 16, 26, 0.7);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  }

  #controls-page .control-comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
  }

  #controls-page .control-comment-body {
    margin-top: 6px;
    white-space: pre-wrap;
    font-size: 13px;
  }

  #controls-page .control-comment-files {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #controls-page .control-comment-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(8, 12, 20, 0.85);
    border: 1px solid rgba(125, 155, 255, 0.2);
  }

  #controls-page .control-comment-file a {
    color: #c7d6ff;
    text-decoration: none;
    font-size: 13px;
  }

  #controls-page .control-comment-file a:hover {
    color: #fff;
  }

  #controls-page .control-comment-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  #controls-page .control-comment-editor {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #controls-page .control-comment-editor textarea {
    min-height: 80px;
    resize: vertical;
  }

  #controls-page .control-comment-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  #controls-page .control-comment-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #settings-page .settings-kv-list {
    display: grid;
    gap: 12px;
  }

  #settings-page .settings-kv {
    padding: 10px 0;
    border-bottom: 1px solid rgba(96, 121, 187, 0.2);
  }

  #settings-page .settings-kv:last-child {
    border-bottom: none;
  }

  #settings-page .settings-kv-title {
    font-weight: 600;
    margin-bottom: 4px;
  }

  #incidents-page .dashboard-row + .dashboard-section {
    margin-top: 18px;
  }

  #incidents-page .dashboard-tiles + .dashboard-section {
    margin-top: 18px;
  }

  #incidents-page .dashboard-section + .dashboard-section {
    margin-top: 16px;
  }

  #incidents-page .dashboard-quick .quick-actions {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }

  #incidents-page .dashboard-quick .quick-actions .btn {
    width: 160px;
    max-width: 100%;
    justify-content: center;
  }
  #incidents-page .dashboard-quick.tile-square .quick-actions .btn {
    width: 100%;
  }
  #incidents-page .dashboard-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
  }
  #incidents-page .tile-quick {
    width: 400px;
    height: 400px;
    flex: 0 0 400px;
  }
  #incidents-page .tile-square {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
  }
  #incidents-page .tile-quick.tile-square {
    width: 180px;
    height: 180px;
    flex: 0 0 180px;
  }
  #incidents-page .dashboard-quick.tile-square {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #incidents-page .dashboard-quick.tile-square .card-header {
    text-align: center;
  }
  #incidents-page .dashboard-quick.tile-square .card-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #incidents-page .dashboard-quick .quick-actions {
    width: 100%;
    gap: 6px;
  }
  #incidents-page .dashboard-quick .quick-actions .btn {
    width: 100%;
  }
  #incidents-page .metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-auto-rows: 100px;
    gap: 8px;
    align-content: start;
  }
  #incidents-page .metric-tile {
    display: grid;
    place-items: center;
    text-align: center;
  }

  #incidents-page .incident-create-details {
    margin: 14px 0;
    border: 1px solid rgba(125, 155, 255, 0.22);
    border-radius: 12px;
    background: rgba(12, 16, 26, 0.6);
    overflow: hidden;
  }

  #incidents-page .incident-create-details summary {
    cursor: pointer;
    font-weight: 600;
    padding: 12px 14px;
    list-style: none;
  }

  #incidents-page .incident-create-details summary::-webkit-details-marker {
    display: none;
  }

  #incidents-page .incident-create-details[open] summary {
    border-bottom: 1px solid rgba(125, 155, 255, 0.18);
  }

  #incidents-page .incident-create-details .details-body {
    padding: 12px 14px 8px;
  }

  #incidents-page .incident-create-details .form-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
  }

  #incidents-page .incident-attachments-card {
    margin-top: 14px;
  }

  #incidents-page .dropzone {
    border: 1px dashed rgba(125, 155, 255, 0.35);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: rgba(12, 16, 26, 0.6);
  }

  #incidents-page .dropzone.dragover {
    border-color: rgba(125, 155, 255, 0.7);
    background: rgba(52, 70, 120, 0.4);
  }

  #incidents-page .dropzone-title {
    font-weight: 600;
  }

  #incidents-page .dropzone-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
  }

  #incidents-page .attachments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }

  #incidents-page .attachments-empty {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 4px;
  }

  #incidents-page .attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(125, 155, 255, 0.2);
    background: rgba(12, 16, 26, 0.75);
  }

  #incidents-page .attachment-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #incidents-page .attachment-name {
    font-weight: 600;
  }

  #incidents-page .attachment-size {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  #incidents-page .incident-create-info {
    margin-top: 14px;
  }

  #incidents-page .incident-create-info h4 {
    margin: 0 0 6px;
  }

  #incidents-page .incident-create-info ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: rgba(255, 255, 255, 0.78);
  }

  #incidents-page .incident-create-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  #incidents-page .incident-create-header .create-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  #incidents-page .incident-create-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  #incidents-page .incident-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }

  #incidents-page .create-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #incidents-page .create-column-notes textarea {
    min-height: 80px;
  }

  #incidents-page .form-row.two-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }

  #incidents-page .people-row {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  #incidents-page .narrative-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }

  #incidents-page .tag-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px dashed rgba(125, 155, 255, 0.35);
    border-radius: 12px;
    background: rgba(12, 16, 26, 0.35);
  }

  #incidents-page .tag-checkboxes .tag-option {
    margin: 0;
  }

  #incidents-page .settings-grid,
  #settings-page .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
  }

  #incidents-page .settings-column,
  #settings-page .settings-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #incidents-page .settings-column-header h4,
  #settings-page .settings-column-header h4 {
    margin: 0 0 4px;
  }

  #incidents-page .settings-column .add-row,
  #settings-page .settings-column .add-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  #incidents-page .settings-column .add-row input,
  #settings-page .settings-column .add-row input {
    flex: 1;
  }

  #incidents-page .pill-list,
  #settings-page .pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
  }

  #incidents-page .pill,
  #settings-page .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 155, 255, 0.35);
    background: rgba(12, 16, 26, 0.7);
    font-size: 12px;
    color: #dfe7ff;
  }

  #incidents-page .pill-removable .pill-remove,
  #settings-page .pill-removable .pill-remove {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }

  #incidents-page .pill-badge,
  #settings-page .pill-badge {
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(125, 155, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
  }

  #incidents-page .data-table.compact th,
  #incidents-page .data-table.compact td {
    padding: 8px 10px;
    font-size: 12px;
  }

  #incidents-page .incident-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
    padding: 12px;
    border: 1px solid rgba(125, 155, 255, 0.18);
    border-radius: 12px;
    background: rgba(10, 14, 24, 0.6);
    margin-bottom: 12px;
  }

  #incidents-page .incident-people {
    margin-bottom: 12px;
  }

  #incidents-page .incident-meta .meta-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #incidents-page .incident-meta .meta-field.wide {
    grid-column: span 2;
  }

  #incidents-page .incident-meta label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }

  #incidents-page .meta-value {
    color: #f3f6ff;
    min-height: 18px;
  }

  #incidents-page .meta-empty {
    color: rgba(255, 255, 255, 0.6);
  }

  #incidents-page .meta-value .tag {
    background: rgba(125, 155, 255, 0.18);
    border: 1px solid rgba(125, 155, 255, 0.35);
    color: #f3f6ff;
    margin-right: 6px;
    margin-top: 4px;
  }

  #incidents-page .incident-classification-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #incidents-page .tag-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }

  #incidents-page .incident-meta .meta-actions {
    display: flex;
    align-items: flex-end;
  }

  #incidents-page .inner-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  #incidents-page .inner-tabs .tab-btn {
    border-radius: 10px;
    border: 1px solid rgba(125, 155, 255, 0.25);
    padding: 6px 10px;
    background: rgba(10, 14, 24, 0.6);
    color: rgba(255, 255, 255, 0.75);
  }

  #incidents-page .inner-tabs .tab-btn.active {
    background: rgba(20, 26, 38, 0.95);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(125, 155, 255, 0.45);
  }

#incidents-page .incident-inner-content .form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

#incidents-page .incident-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
}

#incidents-page .incident-timeline .timeline-pane {
  border: 1px solid rgba(125, 155, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  background: rgba(12, 16, 26, 0.75);
  min-width: 0;
}

#incidents-page .incident-timeline .form-actions-inline {
  justify-content: flex-start;
  gap: 8px;
}

#incidents-page .incident-timeline .timeline-list-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

#incidents-page .overview-timeline-wrap .incident-timeline .timeline-pane {
  padding: 10px;
}

#incidents-page .timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  max-height: 360px;
  overflow-y: auto;
  }

#incidents-page .stage-block-available-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

@media (max-width: 900px) {
  #incidents-page .incident-timeline {
    grid-template-columns: 1fr;
  }
}

  #incidents-page .timeline-item {
    display: grid;
    grid-template-columns: minmax(120px, 140px) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(125, 155, 255, 0.18);
    background: rgba(12, 16, 26, 0.85);
  }

  #incidents-page .timeline-body,
  #incidents-page .timeline-msg,
  #incidents-page .timeline-type {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #incidents-page .timeline-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  #incidents-page .timeline-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.6);
  }

  #incidents-page .timeline-add textarea {
    min-height: 100px;
  }

  #incidents-page .confirm-modal .modal-body {
    max-width: 420px;
  }

#incidents-page .confirm-modal .confirm-message {
  margin: 12px 0;
  line-height: 1.4;
}

#docs-page .confirm-modal .modal-body {
  max-width: 400px;
  border: 1px solid rgba(125, 155, 255, 0.22);
}

#docs-page .confirm-modal .confirm-message {
  margin: 8px 0 12px;
  line-height: 1.45;
}

#docs-page .confirm-modal .btn.primary {
  background: linear-gradient(180deg, #d44343 0%, #b73232 100%);
  border-color: #a92b2b;
}

.confirm-modal .modal-body {
  max-width: 420px;
}

.confirm-modal .confirm-message {
  margin: 10px 0 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.backups-restore-log-console {
  margin-top: 8px;
  min-height: 160px;
  max-height: 320px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(125, 155, 255, 0.24);
  border-radius: 10px;
  background: rgba(6, 10, 18, 0.9);
  color: rgba(226, 236, 255, 0.9);
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

  @media (max-width: 900px) {
    #incidents-page .incident-meta .meta-field.wide {
      grid-column: span 1;
    }
    #incidents-page .incident-form-card .form-field.wide {
      grid-column: span 1;
    }
    #incidents-page .timeline-item {
      grid-template-columns: 1fr;
    }
    #incidents-page .dashboard-row {
      grid-template-columns: 1fr;
    }
    #incidents-page .dashboard-quick .quick-actions {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  @media (max-width: 640px) {
  #incidents-page .metric-tile-grid {
    grid-template-columns: 1fr;
  }
}

#settings-page .about-grid,
#about-page .about-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(240px, 1fr);
  gap: 18px;
  align-items: center;
}

#settings-page .settings-cleanup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 12px;
  margin-top: 4px;
}

#settings-page .settings-cleanup-actions {
  margin-top: 12px;
  flex-wrap: wrap;
}

#monitoring-page #monitoring-tab-notify .card + .card {
  margin-top: 12px;
}


#settings-page .about-logo-wrap,
#about-page .about-logo-wrap {
  display: flex;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(125, 155, 255, 0.2);
  border-radius: 12px;
  background: rgba(10, 14, 24, 0.65);
}

#settings-page .about-logo,
#about-page .about-logo {
  width: 200px;
  max-width: 100%;
  height: auto;
}

#settings-page .about-content,
#about-page .about-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#settings-page .about-name,
#about-page .about-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

#settings-page .about-description,
#about-page .about-description {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

#settings-page .about-links,
#about-page .about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

@media (max-width: 720px) {
  #tasks-page .tasks-boards {
    grid-template-columns: 1fr;
  }
  #settings-page .about-grid,
  #about-page .about-grid {
    grid-template-columns: 1fr;
  }
  #settings-page .about-logo-wrap,
  #about-page .about-logo-wrap {
    justify-content: flex-start;
  }
}

#tasks-page .tasks-toolbar {
  padding: 16px;
}

#tasks-page {
  --tasks-col-width: 240px;
  --tasks-subcolumn-gap: 10px;
  --tasks-column-body-padding: 12px;
}

#tasks-space-modal .modal-body {
  max-width: 360px;
}

#tasks-page .tasks-toolbar-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

#tasks-page .tasks-toolbar-left,
#tasks-page .tasks-toolbar-right {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

#tasks-page .tasks-search {
  min-width: 220px;
}

#tasks-page .tasks-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#tasks-page .tasks-filters .btn.active {
  background: rgba(125, 155, 255, 0.35);
  border-color: rgba(125, 155, 255, 0.6);
}

#tasks-page .tasks-board-shell {
  position: relative;
}

#tasks-page .tasks-board {
  display: flex;
  gap: 16px;
  align-items: stretch;
  overflow-x: auto;
  padding: 6px 4px 12px;
}

#tasks-page .tasks-tabs {
  gap: 8px;
  margin-bottom: 12px;
}

#tasks-page .tasks-panels {
  display: block;
}

#tasks-page #tasks-space-panels {
  min-height: clamp(360px, 56vh, 720px);
}

#tasks-page .tasks-space-view {
  min-height: inherit;
}

#tasks-page #tasks-tab-home .tasks-home-card + .tasks-home-card {
  margin-top: 16px;
  border-top: 1px solid rgba(96, 121, 187, 0.22);
}

  #tasks-page .tasks-space-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

#tasks-page .tasks-space-card {
  border: 1px solid rgba(96, 121, 187, 0.3);
  border-radius: 14px;
  padding: 14px;
  background: rgba(18, 24, 36, 0.9);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  max-width: 520px;
  width: auto;
  align-self: flex-start;
}

#tasks-page .tasks-space-card.dragging {
  opacity: 0.6;
}

#tasks-page .tasks-space-placeholder {
  border: 2px dashed rgba(125, 155, 255, 0.6);
  border-radius: 12px;
  height: 64px;
}

#tasks-page .tasks-space-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#tasks-page .tasks-space-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

#tasks-page .tasks-space-card-actions .btn {
  padding: 4px 8px;
  font-size: 12px;
}

#tasks-page .tasks-space-card-actions .btn.danger {
  margin-left: 4px;
}

#tasks-page .tasks-space-card-title {
  font-size: 16px;
  font-weight: 600;
}

#tasks-page .tasks-space-card-meta {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tasks-page .tasks-space-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

#tasks-page .tasks-space-board-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

#tasks-page .tasks-space-board-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#tasks-page .tasks-space-board-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tasks-page .tasks-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#tasks-page .tasks-space-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(96, 121, 187, 0.2);
  border-radius: 14px;
  margin-bottom: 12px;
}

  #tasks-page .tasks-space-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  #tasks-page .tasks-space-layout .btn.active {
    background: rgba(125, 155, 255, 0.35);
    border-color: rgba(125, 155, 255, 0.6);
  }

#tasks-page .tasks-space-search {
  min-width: 220px;
}

  #tasks-page .tasks-boards {
    position: relative;
    display: block;
    overflow: scroll;
    scrollbar-gutter: stable both-edges;
    padding: 4px 4px 8px;
    --tasks-board-gap: 4px;
    min-height: clamp(280px, 46vh, 620px);
    min-width: 100%;
  }

  #tasks-page .tasks-boards.vertical {
    flex-direction: column;
    overflow-x: hidden;
    flex-wrap: nowrap;
  }

  #tasks-page .tasks-boards-shell {
    border: none;
    border-radius: 16px;
    padding: 0;
    background: transparent;
    min-height: clamp(320px, 52vh, 680px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #tasks-page .tasks-boards-shell .tasks-boards {
    order: 1;
  }

  #tasks-page .tasks-boards-shell .tasks-empty {
    order: 0;
  }

  #tasks-page .tasks-board-frame {
    background: rgba(14, 20, 32, 0.92);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 16px;
    padding: 12px;
    position: absolute;
    width: max-content;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

#tasks-page .tasks-board-spacer {
  display: none;
}

  #tasks-page .tasks-board-frame.dragging {
    opacity: 0.85;
  }


  #tasks-page .tasks-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #tasks-page .tasks-board-drag {
    min-width: 28px;
    letter-spacing: 2px;
    font-size: 15px;
    cursor: grab;
    pointer-events: auto;
    position: relative;
    z-index: 3;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 4px 6px;
  }

  #tasks-page .tasks-board-header .tasks-menu-btn {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 4px 6px;
  }

  #tasks-page .tasks-board-toggle {
    border: none;
    background: transparent;
    box-shadow: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  #tasks-page .tasks-board-toggle::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid rgba(255, 255, 255, 0.75);
    transition: transform 0.18s ease;
    transform: rotate(0deg);
  }

  #tasks-page .tasks-board-frame.collapsed .tasks-board-toggle::before {
    transform: rotate(180deg);
  }

  #tasks-page .tasks-board-frame.collapsed .tasks-board-columns {
    display: none;
  }

  #tasks-page .tasks-board-drag:active {
    cursor: grabbing;
  }

  #tasks-page .tasks-board-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

#tasks-page .tasks-board-title {
  font-size: 15px;
  font-weight: 600;
}

  #tasks-page .tasks-board-columns {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow: visible;
    padding-bottom: 4px;
  }

  #tasks-page .tasks-board-frame.board-columns-vertical .tasks-board-columns {
    flex-direction: row;
    align-items: flex-start;
  }

  #tasks-page .tasks-board-frame.board-columns-vertical .tasks-column {
    max-width: none;
    width: 100%;
  }
  #tasks-page .tasks-board-move {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px dashed rgba(96, 121, 187, 0.3);
  }

#tasks-page .tasks-column-move {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px dashed rgba(96, 121, 187, 0.3);
}

#tasks-page .tasks-drop-placeholder,
#tasks-page .tasks-board-placeholder {
    border: 2px dashed rgba(125, 155, 255, 0.6);
    border-radius: 12px;
    min-height: 60px;
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
  }

#tasks-page .task-modal {
    max-width: 1400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 12px;
}

#tasks-page .task-modal-frame {
  background: rgba(10, 14, 24, 0.92);
  border: 1px solid rgba(96, 121, 187, 0.25);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

#tasks-page .task-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

#tasks-page .task-modal-top .task-title-input {
  flex: 1 1 auto;
}

#tasks-page .task-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

#tasks-page .task-title-display {
  font-size: 20px;
  font-weight: 600;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tasks-page .task-title-edit {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tasks-page .task-title-edit .task-title-input {
  flex: 1 1 auto;
}

#tasks-page .task-title-edit .icon {
  font-size: 14px;
  line-height: 1;
}

#tasks-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#tasks-page .task-modal .modal-content {
  gap: 16px;
}

  #tasks-page .task-modal-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) 340px;
      gap: 16px;
    }

  #tasks-page .task-modal-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
  }

  #tasks-page .task-modal-add-btn {
    min-width: 32px;
  }

#tasks-page .task-modal-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

  #tasks-page .task-field {
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
  }

  #tasks-page .task-field.text-field {
    align-items: start;
  }

  #tasks-page .task-field > label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
  }

  #tasks-page .task-field > :not(label) {
    grid-column: 2;
  }

  #tasks-page .task-field.assignees-field {
    margin-bottom: 12px;
    align-items: start;
  }

#tasks-page .task-field.text-field {
  margin-bottom: 14px;
}

  #tasks-page .task-assignees-search {
    margin-bottom: 8px;
  }

  #tasks-page .task-assignees-select {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  #tasks-page .task-assignees-list {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(96, 121, 187, 0.25);
    background: rgba(10, 14, 24, 0.95);
    z-index: 20;
  }

  #tasks-page .task-assignees-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  #tasks-page .task-assignees-list input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

#tasks-page .task-modal-left,
#tasks-page .task-modal-center,
#tasks-page .task-modal-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#tasks-page .modal-header-actions {
  display: flex;
  gap: 8px;
}

#tasks-page .task-functional-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

#tasks-page .task-functional-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tasks-page .task-functional-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(96, 121, 187, 0.18);
  background: rgba(12, 16, 28, 0.7);
}

#tasks-page .task-functional-item span {
  font-size: 13px;
}

  #tasks-page .task-functional-blocks {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

    #tasks-page .task-block {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 0;
      border-radius: 0;
      background: transparent;
      border: none;
      flex-wrap: nowrap;
    }

  #tasks-page .task-block.dragging {
    opacity: 0.45;
  }

  #tasks-page .task-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 160px;
  }

  #tasks-page .task-block-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }

  #tasks-page .task-checklist-field .task-block-body {
    flex-direction: column;
    align-items: stretch;
  }

  #tasks-page .task-block-body .input {
    max-width: 240px;
  }

  #tasks-page .task-block-body .select {
    max-width: 200px;
  }

  #tasks-page .task-block-menu {
    opacity: 0;
    pointer-events: none;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    min-width: auto;
    align-self: center;
    transition: opacity 0.15s ease;
  }

  #tasks-page .task-block:hover .task-block-menu {
    opacity: 1;
    pointer-events: auto;
  }

  #tasks-page .task-inline-view {
    cursor: pointer;
    color: rgba(190, 210, 255, 0.9);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  #tasks-page .task-inline-link {
    color: rgba(190, 210, 255, 0.9);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  #tasks-page .task-inline-view.muted {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
  }

  #tasks-page .task-inline-editor {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #tasks-page .task-inline-editor .input {
    flex: 1 1 auto;
  }

  #tasks-page .task-inline-actions {
    display: inline-flex;
    gap: 6px;
  }

  #tasks-page .task-location-link {
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(190, 210, 255, 0.9);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

#tasks-page .task-blocker-frame {
  padding: 12px;
  border-radius: 12px;
  background: rgba(16, 22, 34, 0.9);
  border: 1px solid rgba(96, 121, 187, 0.25);
}

#tasks-page .task-blocker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#tasks-page .task-blocker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#tasks-page .task-blocker-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

#tasks-page .task-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#tasks-page #task-modal-block-btn {
  margin-top: 8px;
}

#tasks-page .task-text-view {
  padding: 10px;
  border: 1px dashed rgba(96, 121, 187, 0.35);
  border-radius: 12px;
  cursor: pointer;
  min-height: 48px;
}

#tasks-page .task-text-editor .textarea {
  min-height: 90px;
}

#tasks-page .task-tags-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  max-width: 100%;
}

#tasks-page .task-relation-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
}

#tasks-page .task-relation-picker {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 100%;
  width: 100%;
  overflow: visible;
}

#tasks-page .task-relation-picker .input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#tasks-page .task-relations-parent-field .task-block-body,
#tasks-page .task-relations-child-field .task-block-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: visible;
  max-width: 620px;
  width: 100%;
}

#tasks-page .task-relations-parent-field .tasks-links-list,
#tasks-page .task-relations-child-field .tasks-links-list {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  max-height: 124px;
  overflow: auto;
}

#tasks-page .task-relations-parent-field .task-link,
#tasks-page .task-relations-child-field .task-link {
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
}

#tasks-page .task-link-picker {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
}

#tasks-page .task-link-picker .input {
  max-width: none;
}

#tasks-page .task-relation-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  background: rgba(12, 18, 28, 0.98);
  border: 1px solid rgba(96, 121, 187, 0.35);
  border-radius: 12px;
  padding: 8px;
  z-index: 20;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

#tasks-page .task-link-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  background: rgba(12, 18, 28, 0.98);
  border: 1px solid rgba(96, 121, 187, 0.35);
  border-radius: 12px;
  padding: 8px;
  z-index: 20;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

#tasks-page .task-link-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tasks-page .task-link-option {
  text-align: left;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(96, 121, 187, 0.2);
  background: rgba(20, 26, 38, 0.9);
  color: #f5f7ff;
  cursor: pointer;
}

#tasks-page .task-link-option:hover {
  border-color: rgba(125, 155, 255, 0.5);
}

#tasks-page .task-relation-dropdown details {
  margin-bottom: 6px;
}

#tasks-page .relation-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 4px 12px;
}

#tasks-page .task-relation-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tasks-page .task-relation-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(96, 121, 187, 0.22);
  background: rgba(20, 26, 38, 0.9);
  color: #f5f7ff;
  cursor: pointer;
}

#tasks-page .task-relation-option:hover {
  border-color: rgba(125, 155, 255, 0.5);
}

#tasks-page .task-relation-option-title {
  font-weight: 600;
  line-height: 1.2;
}

#tasks-page .task-relation-option-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

#tasks-page .task-relations-parent-field,
#tasks-page .task-relations-child-field {
  align-items: flex-start;
}

#tasks-page .task-relations-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}

#tasks-page .task-relations-group label {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

#tasks-page .tasks-links-list,
#tasks-page .task-files-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  max-width: 100%;
}

#tasks-page .tasks-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  overflow-x: hidden;
  max-width: 100%;
}

#tasks-page .task-link,
#tasks-page .task-file-row,
#tasks-page .task-checklist-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

#tasks-page .tasks-blocker-tree details {
  margin-bottom: 10px;
}

#tasks-page .blocker-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 4px 12px;
}

  #tasks-page .tasks-empty {
    padding: 20px;
    pointer-events: none;
  }

  #tasks-page .tasks-column {
    flex: 0 0 auto;
    width: var(--tasks-col-width);
    min-width: var(--tasks-col-width);
    max-width: var(--tasks-col-width);
    display: flex;
    flex-direction: column;
    background: rgba(18, 24, 36, 0.9);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 14px;
    min-height: 240px;
  }


#tasks-page .tasks-column.wip-exceeded {
  border-color: rgba(255, 122, 122, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 122, 122, 0.25);
}

  #tasks-page .tasks-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(96, 121, 187, 0.2);
  }

  #tasks-page .tasks-column-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
  }

#tasks-page .tasks-column-title {
  font-size: 15px;
  font-weight: 600;
  word-break: break-word;
}

#tasks-page .tasks-column-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

  #tasks-page .tasks-column-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
  }

  #tasks-page .tasks-column-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: var(--tasks-column-body-padding);
      overflow: visible;
      min-height: 80px;
      align-items: flex-start;
      box-sizing: border-box;
      flex: 1 1 auto;
      width: 100%;
    }

  #tasks-page .tasks-subcolumns-row {
      display: flex;
      gap: var(--tasks-subcolumn-gap);
      align-items: stretch;
      flex-wrap: nowrap;
      width: 100%;
      overflow: visible;
    }

  #tasks-page .tasks-subcolumn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
    background: transparent;
    border: none;
    flex: 0 0 var(--tasks-col-width);
    width: var(--tasks-col-width);
    min-width: var(--tasks-col-width);
    max-width: var(--tasks-col-width);
    box-sizing: border-box;
    position: relative;
  }

  #tasks-page .tasks-subcolumn + .tasks-subcolumn::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--tasks-subcolumn-gap) / 2);
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(96, 121, 187, 0.22);
  }

  #tasks-page .tasks-subcolumn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 2px;
    width: 100%;
    box-sizing: border-box;
  }

  #tasks-page .tasks-subcolumn-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
  }

  #tasks-page .tasks-subcolumn-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
  }

  #tasks-page .tasks-subcolumn-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 2px 6px;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
      min-height: 80px;
      flex: 1 1 auto;
    }

  #tasks-page .tasks-subcolumn-add {
    border: 1px dashed rgba(96, 121, 187, 0.25);
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  #tasks-page .tasks-subcolumn-add.is-hidden {
    visibility: hidden;
    pointer-events: none;
  }

  #tasks-page .tasks-subcolumn-add:hover {
    border-color: rgba(125, 155, 255, 0.45);
  }

  #tasks-page .tasks-subcolumn-add-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 12px;
  }

  #tasks-page .tasks-subcolumn-add-placeholder {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    width: 100%;
    text-align: center;
  }

  #tasks-page .tasks-column-add {
    border: 1px dashed rgba(96, 121, 187, 0.35);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  #tasks-page .tasks-column-add.is-hidden {
    visibility: hidden;
    pointer-events: none;
  }

  #tasks-page .tasks-column-add:hover {
    border-color: rgba(125, 155, 255, 0.55);
  }

  #tasks-page .tasks-column-add-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 13px;
  }

  #tasks-page .tasks-column-add-placeholder {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    width: 100%;
    text-align: center;
  }

#tasks-page .tasks-column-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 12px 6px;
}

#tasks-page .tasks-column-add {
  background: transparent;
  border-style: dashed;
  align-items: center;
  justify-content: center;
}

  #tasks-page .task-card {
    background: rgba(15, 20, 30, 0.95);
    border: 1px solid rgba(96, 121, 187, 0.25);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border 0.2s, transform 0.1s;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 86px;
  }

#tasks-page .task-card:hover {
  border-color: rgba(125, 155, 255, 0.55);
  transform: translateY(-1px);
}

#tasks-page .task-card.task-card-focus {
  border-color: rgba(160, 200, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(120, 165, 255, 0.35);
}

#tasks-page .task-card.dragging {
  opacity: 0.6;
}

#tasks-page .task-card-blocker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(160, 195, 255, 0.9);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}

#tasks-page .task-card-blocker:hover {
  color: rgba(190, 215, 255, 1);
}

#tasks-page .task-drag-ghost {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  display: block;
  visibility: visible;
  background: rgba(15, 20, 30, 0.95);
  border: 1px solid rgba(96, 121, 187, 0.45);
  border-radius: 12px;
}

#tasks-page .tasks-board-ghost {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  display: block;
  visibility: visible;
  background: rgba(14, 20, 32, 0.92);
  border: 1px solid rgba(96, 121, 187, 0.35);
  border-radius: 16px;
}

#tasks-page .task-card.task-closed {
  opacity: 0.6;
}

#tasks-page .task-card.task-archived {
  opacity: 0.5;
}

#tasks-page .task-card-title {
  font-size: 15px;
  font-weight: 600;
  padding-right: 24px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

#tasks-page .task-card-meta,
#tasks-page .task-card-tags {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

#tasks-page .task-card-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tasks-page .task-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid transparent;
  white-space: nowrap;
}

#tasks-page .task-tag .tag-remove,
#tasks-page .task-tag .task-tag-remove {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

#tasks-page .task-card-size {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

#tasks-page .task-card-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  line-height: 1;
}

  #tasks-page .task-card-meta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
  }

  #tasks-page .task-blocked-badge {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: rgba(255, 112, 112, 0.22);
    border: 1px solid rgba(255, 112, 112, 0.45);
    color: #ffd6d6;
  }

  #tasks-page .task-recurring-badge {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: rgba(93, 134, 255, 0.22);
    border: 1px solid rgba(93, 134, 255, 0.45);
    color: #d6e2ff;
  }

#tasks-page .task-priority {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  text-transform: capitalize;
  background: rgba(125, 155, 255, 0.18);
}

#tasks-page .task-priority.priority-low {
  background: rgba(120, 180, 255, 0.2);
  color: #cfe3ff;
}

#tasks-page .task-priority.priority-medium {
  background: rgba(125, 155, 255, 0.2);
  color: #dbe3ff;
}

#tasks-page .task-priority.priority-high {
  background: rgba(255, 171, 64, 0.2);
  color: #ffd3a6;
}

#tasks-page .task-priority.priority-critical {
  background: rgba(255, 106, 106, 0.2);
  color: #ffbcbc;
}

#tasks-page .task-card-assignees {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#tasks-page .task-assignee {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(125, 155, 255, 0.2);
  border: 1px solid rgba(125, 155, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

#tasks-page .task-assignee-more {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

#tasks-page .tasks-drop-placeholder {
  height: 48px;
  border-radius: 10px;
  border: 2px dashed rgba(125, 155, 255, 0.5);
  background: rgba(125, 155, 255, 0.08);
}

#tasks-page.tasks-sidebar-open .tasks-board {
  margin-right: 400px;
}

#tasks-page .tasks-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  background: rgba(12, 16, 26, 0.98);
  border-left: 1px solid rgba(96, 121, 187, 0.3);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  z-index: 1200;
}

#tasks-page .tasks-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid rgba(96, 121, 187, 0.2);
}

#tasks-page .tasks-sidebar-title {
  flex: 1;
}

#tasks-page .tasks-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#tasks-page .tasks-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(96, 121, 187, 0.2);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#tasks-page .tasks-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#tasks-page .tasks-section-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

#tasks-page .tasks-origin-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tasks-page .task-origin-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 26, 38, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.2);
  font-size: 12px;
}

#tasks-page .task-origin-label {
  color: rgba(255, 255, 255, 0.6);
}

#tasks-page .task-origin-value {
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  #tasks-page .tasks-blocks-list,
  #tasks-page .tasks-blocking-list,
  #tasks-page .tasks-comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #tasks-page .tasks-links-list {
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
  }

  #tasks-page .tasks-blocks-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }

  #tasks-page .task-comments-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #tasks-page .task-comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #tasks-page .task-comment {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(20, 26, 38, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.2);
    font-size: 12px;
  }

  #tasks-page .task-comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
  }

  #tasks-page .task-comment-body {
    white-space: pre-wrap;
    color: rgba(255, 255, 255, 0.9);
  }

  #tasks-page .task-comment-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
  }

  #tasks-page .task-comment-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #tasks-page .task-comment-actions-inline {
    display: flex;
    gap: 6px;
  }

  #tasks-page .task-comment-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #tasks-page .task-comment-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
  }

  #tasks-page .task-comment-files a {
    color: rgba(160, 195, 255, 0.9);
    text-decoration: none;
  }

  #tasks-page .task-comment-files a:hover {
    text-decoration: underline;
  }

  #tasks-page .task-comment-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }

  #tasks-page .task-comment-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(12, 18, 28, 0.8);
    border: 1px solid rgba(96, 121, 187, 0.2);
  }

    #tasks-page .task-comment-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    #tasks-page #task-comment-input {
      resize: none;
    }

  #tasks-page .task-block-row,
  #tasks-page .task-blocking-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(20, 26, 38, 0.85);
    border: 1px solid rgba(96, 121, 187, 0.2);
  }

  #tasks-page .task-block-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
  }

  #tasks-page .task-block-type {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.6);
  }

  #tasks-page .task-block-link {
    color: rgba(160, 195, 255, 0.9);
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

#tasks-page .tasks-checklist-add {
  display: flex;
  gap: 8px;
}

#tasks-page .task-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  width: 100%;
  white-space: normal;
}

#tasks-page .task-checklist-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

#tasks-page .task-checklist-item span.done {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.5);
}

#tasks-page .task-comment {
  padding: 10px;
  border-radius: 10px;
  background: rgba(20, 26, 38, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.2);
}

#tasks-page .task-comment-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

#tasks-page .task-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 26, 38, 0.85);
  border: 1px solid rgba(96, 121, 187, 0.2);
}

#tasks-page .links-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

#tasks-page .links-form.compact {
  gap: 6px;
}

#tasks-page .task-files-list {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

#tasks-page .task-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(12, 18, 28, 0.8);
  border: 1px solid rgba(96, 121, 187, 0.2);
  font-size: 12px;
  white-space: nowrap;
}

#tasks-page .task-files-actions {
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 900px) {
  #tasks-page .tasks-sidebar {
    width: 100%;
  }

  #tasks-page.tasks-sidebar-open .tasks-board {
    margin-right: 0;
  }

  #tasks-page .task-modal-grid {
    grid-template-columns: 1fr;
  }

  #tasks-page .task-blocker-grid {
    grid-template-columns: 1fr;
  }
}
#accesses-page .card {
  max-width: 1280px;
}

#accesses-page .card-body {
  display: grid;
  gap: 16px;
}

#accesses-page .accesses-form-grid {
  grid-template-columns: minmax(240px, 380px) minmax(280px, 460px) auto;
  align-items: end;
  gap: 12px;
}

#accesses-page .accesses-form-actions {
  justify-content: flex-start;
  margin: 0;
}

#accesses-page .accesses-form-actions .btn {
  min-width: 130px;
}

#accesses-page .accesses-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

#accesses-page .accesses-card {
  border: 1px solid rgba(103, 136, 220, 0.26);
  border-radius: 12px;
  padding: 12px;
  background: rgba(21, 30, 49, 0.56);
  display: grid;
  gap: 10px;
  cursor: pointer;
}

#accesses-page .accesses-card:hover {
  border-color: rgba(128, 160, 238, 0.52);
}

#accesses-page .accesses-card.is-blocked {
  opacity: 0.84;
  border-color: rgba(219, 95, 95, 0.44);
}

#accesses-page .accesses-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#accesses-page .accesses-card-user {
  font-size: 16px;
  font-weight: 600;
  word-break: break-word;
}

#accesses-page .accesses-card-services {
  font-size: 13px;
  color: rgba(231, 236, 255, 0.94);
  min-height: 18px;
}

#accesses-page .accesses-card-meta {
  font-size: 12px;
  color: rgba(179, 190, 228, 0.86);
  display: grid;
  gap: 4px;
}

#accesses-page .accesses-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#accesses-page .accesses-card-actions .btn {
  min-width: 112px;
}

#accesses-page .accesses-empty {
  padding: 14px;
}

#accesses-page .accesses-view-meta {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

#accesses-page .accesses-view-actions {
  margin: 0 0 12px;
}

#accesses-page .accesses-activity-list {
  display: grid;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}

#accesses-page .accesses-activity-item {
  border: 1px solid rgba(104, 130, 202, 0.3);
  border-radius: 10px;
  background: rgba(18, 26, 43, 0.64);
  padding: 10px;
  display: grid;
  gap: 6px;
}

#accesses-page .accesses-activity-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

#accesses-page .accesses-activity-body {
  font-size: 13px;
}

@media (max-width: 1200px) {
  #accesses-page .accesses-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  #accesses-page .accesses-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Accesses layout override: full-width + monitoring-like split */
#accesses-page .card {
  max-width: none;
  width: 100%;
}

#accesses-page .card-body {
  display: grid;
  gap: 14px;
}

#accesses-page .accesses-layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

#accesses-page .accesses-left,
#accesses-page .accesses-right {
  border: 1px solid rgba(98, 126, 196, 0.26);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.52);
  padding: 12px;
}

#accesses-page .accesses-right {
  min-height: 340px;
}

#accesses-page .accesses-form-actions {
  margin: 0;
  justify-content: flex-start;
}

#accesses-page .accesses-form-actions .btn {
  min-width: 130px;
}

#accesses-page .accesses-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#accesses-page .accesses-card {
  border: 1px solid rgba(103, 136, 220, 0.26);
  border-radius: 12px;
  padding: 12px;
  background: rgba(21, 30, 49, 0.56);
  display: grid;
  gap: 10px;
  cursor: pointer;
}

#accesses-page .accesses-card.is-blocked {
  border-color: rgba(219, 95, 95, 0.44);
  opacity: 0.84;
}

#accesses-page .accesses-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#accesses-page .accesses-card-user {
  font-size: 16px;
  font-weight: 600;
}

#accesses-page .accesses-card-services,
#accesses-page .accesses-card-roles {
  font-size: 13px;
}

#accesses-page .accesses-card-meta {
  font-size: 12px;
  color: rgba(179, 190, 228, 0.86);
  display: grid;
  gap: 4px;
}

#accesses-page .accesses-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#accesses-page .accesses-card-actions .btn {
  min-width: 112px;
}

@media (max-width: 1100px) {
  #accesses-page .accesses-layout {
    grid-template-columns: 1fr;
  }
}

/* Accesses v2 visuals */
#accesses-page .card {
  max-width: none;
  width: 100%;
}

#accesses-page .accesses-layout {
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 16px;
}

#accesses-page .accesses-left,
#accesses-page .accesses-right {
  background: linear-gradient(165deg, rgba(21, 33, 58, 0.58), rgba(13, 22, 41, 0.5));
  border: 1px solid rgba(112, 146, 228, 0.26);
  border-radius: 14px;
  padding: 14px;
}

#accesses-page .accesses-panel-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

#accesses-page .accesses-panel-subtitle {
  margin: 0 0 14px;
}

#accesses-page .accesses-form-actions {
  margin: 0;
  justify-content: flex-start;
}

#accesses-page .accesses-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#accesses-page .accesses-card {
  border: 1px solid rgba(118, 153, 236, 0.33);
  border-radius: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at 80% -20%, rgba(117, 162, 255, 0.15), transparent 45%),
    linear-gradient(165deg, rgba(23, 38, 66, 0.76), rgba(15, 26, 45, 0.82));
  box-shadow: 0 8px 26px rgba(5, 10, 24, 0.35);
  display: grid;
  gap: 10px;
  cursor: pointer;
}

#accesses-page .accesses-card:hover {
  border-color: rgba(140, 176, 255, 0.55);
  transform: translateY(-1px);
}

#accesses-page .accesses-card.is-blocked {
  border-color: rgba(223, 109, 109, 0.52);
  background: linear-gradient(165deg, rgba(52, 28, 40, 0.6), rgba(32, 20, 31, 0.75));
}

#accesses-page .accesses-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#accesses-page .accesses-card-user {
  font-size: 18px;
  font-weight: 700;
}

#accesses-page .accesses-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  font-size: 13px;
}

#accesses-page .accesses-card-services {
  grid-column: 1 / -1;
}

#accesses-page .accesses-card-key {
  color: rgba(186, 199, 238, 0.85);
}

#accesses-page .accesses-card-meta {
  font-size: 12px;
  color: rgba(181, 196, 239, 0.88);
}

#accesses-page .accesses-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#accesses-page .accesses-view-modal-body {
  width: min(1080px, 96vw);
}

#accesses-page .accesses-view-header {
  align-items: center;
}

#accesses-page .accesses-view-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#accesses-page .accesses-view-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

#accesses-page .accesses-meta-item {
  border: 1px solid rgba(104, 136, 212, 0.26);
  border-radius: 12px;
  background: rgba(18, 29, 52, 0.45);
  padding: 10px;
  display: grid;
  gap: 4px;
}

#accesses-page .accesses-meta-wide {
  grid-column: 1 / -1;
}

#accesses-page .accesses-meta-label {
  color: rgba(182, 197, 236, 0.8);
  font-size: 12px;
}

#accesses-page .accesses-activity-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#accesses-page .accesses-activity-item {
  border: 1px solid rgba(112, 146, 224, 0.32);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(22, 35, 63, 0.62), rgba(14, 24, 42, 0.72));
  padding: 10px;
  display: grid;
  gap: 6px;
}

#accesses-page .accesses-activity-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

#accesses-page .accesses-activity-body {
  font-size: 13px;
}

@media (max-width: 1100px) {
  #accesses-page .accesses-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  #accesses-page .accesses-view-meta-grid,
  #accesses-page .accesses-activity-list,
  #accesses-page .accesses-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Accesses: prevent right frame overflow and keep symmetric inner gutters */
#accesses-page .card,
#accesses-page .card-body,
#accesses-page .accesses-layout,
#accesses-page .accesses-left,
#accesses-page .accesses-right,
#accesses-page .accesses-cards,
#accesses-page .accesses-card {
  box-sizing: border-box;
}

#accesses-page .card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#accesses-page .accesses-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#accesses-page .accesses-right {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-right: 14px;
}

#accesses-page .accesses-cards,
#accesses-page .accesses-card {
  min-width: 0;
  max-width: 100%;
}

/* Accesses: cohesive cards + split modal (left info / right event feed) */
#accesses-page .accesses-card {
  background: linear-gradient(140deg, rgba(22, 35, 62, 0.78), rgba(16, 27, 46, 0.82));
  border: 1px solid rgba(112, 145, 221, 0.34);
  border-radius: 14px;
  padding: 14px 16px;
  gap: 12px;
}

#accesses-page .accesses-card-grid {
  display: none;
}

#accesses-page .accesses-card-list {
  display: grid;
  gap: 6px;
}

#accesses-page .accesses-card-line {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
}

#accesses-page .accesses-card-line > span:last-child,
#accesses-page .accesses-card-meta,
#accesses-page .accesses-line > strong,
#accesses-page .accesses-activity-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#accesses-page .accesses-card-key {
  color: rgba(180, 196, 236, 0.88);
  font-weight: 500;
}

#accesses-page .accesses-card-meta {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(198, 211, 244, 0.9);
}

#accesses-page .accesses-view-modal-body {
  width: min(1040px, 94vw);
}

#accesses-page .accesses-view-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

#accesses-page .accesses-view-main-frame,
#accesses-page .accesses-view-feed-frame {
  border: 1px solid rgba(104, 136, 212, 0.3);
  border-radius: 14px;
  background: rgba(14, 24, 42, 0.56);
  padding: 14px;
}

#accesses-page .accesses-view-lines {
  display: grid;
  gap: 10px;
}

#accesses-page .accesses-line {
  display: grid;
  gap: 4px;
}

#accesses-page .accesses-line-label {
  font-size: 12px;
  color: rgba(176, 192, 232, 0.8);
}

#accesses-page .accesses-line strong {
  font-size: 16px;
  line-height: 1.35;
}

#accesses-page .accesses-feed-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

#accesses-page .accesses-view-feed-frame .accesses-activity-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: 432px;
  overflow-y: auto;
  padding-right: 6px;
}

#accesses-page .accesses-view-feed-frame .accesses-activity-item {
  background: linear-gradient(150deg, rgba(20, 33, 60, 0.72), rgba(15, 26, 44, 0.78));
  border: 1px solid rgba(113, 146, 224, 0.34);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

#accesses-page .accesses-view-feed-frame .accesses-activity-list::-webkit-scrollbar {
  width: 8px;
}

#accesses-page .accesses-view-feed-frame .accesses-activity-list::-webkit-scrollbar-track {
  background: rgba(10, 16, 29, 0.8);
  border-radius: 8px;
}

#accesses-page .accesses-view-feed-frame .accesses-activity-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(96, 132, 218, 0.9), rgba(70, 98, 170, 0.9));
  border-radius: 8px;
  border: 1px solid rgba(10, 16, 29, 0.85);
}

@media (max-width: 980px) {
  #accesses-page .accesses-view-layout {
    grid-template-columns: 1fr;
  }
}

/* Accesses overrides: compact services column + service filter + improved modal pills */
#accesses-page .accesses-toolbar {
  align-items: flex-end;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

#accesses-page .accesses-service-search-field {
  min-width: 260px;
  max-width: 360px;
  margin: 0;
  position: relative;
}

#accesses-page .accesses-service-search-field label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 6px;
}

#accesses-page .accesses-service-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid rgba(106, 137, 214, 0.42);
  background: linear-gradient(165deg, rgba(15, 25, 44, 0.98), rgba(11, 18, 33, 0.98));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  padding: 4px;
}

#accesses-page .accesses-service-search-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(232, 239, 255, 0.95);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
}

#accesses-page .accesses-service-search-item:hover,
#accesses-page .accesses-service-search-item:focus {
  background: rgba(116, 151, 236, 0.22);
  outline: none;
}

#accesses-page .accesses-service-search-empty {
  color: rgba(173, 190, 235, 0.86);
  font-size: 12px;
  padding: 8px 10px;
}

#accesses-page .accesses-service-search-dropdown::-webkit-scrollbar {
  width: 8px;
}

#accesses-page .accesses-service-search-dropdown::-webkit-scrollbar-track {
  background: rgba(9, 15, 27, 0.85);
  border-radius: 8px;
}

#accesses-page .accesses-service-search-dropdown::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(101, 137, 222, 0.92), rgba(71, 101, 177, 0.92));
  border-radius: 8px;
}

#accesses-page .accesses-col-services,
#accesses-page .accesses-services-count-cell {
  width: 90px;
  max-width: 90px;
  text-align: center;
  white-space: nowrap;
}

#accesses-page .accesses-services-count-cell {
  font-weight: 700;
  color: rgba(214, 224, 255, 0.96);
}

#accesses-page .accesses-view-services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#accesses-page .accesses-view-services-list .accesses-service-pill {
  margin: 0;
}

#accesses-page .accesses-select-search {
  margin-bottom: 8px;
}

#accesses-page select.select[multiple] {
  max-height: 260px;
  overflow-y: auto;
}

#accesses-page .accesses-view-feed-frame .accesses-activity-list {
  grid-template-columns: 1fr;
  max-height: 396px;
  overflow-y: auto;
}

@media (max-width: 900px) {
  #accesses-page .accesses-service-search-field {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}
/* Accesses / Notifications: align with Settings visual language */
#accesses-page .card {
  max-width: none;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#accesses-page .card .card-body {
  padding: 0;
}

#accesses-page .accesses-table-frame {
  overflow: hidden;
  background: rgba(20, 26, 38, 0.86);
  border: 1px solid rgba(125, 155, 255, 0.22);
  border-radius: 14px;
}

#accesses-page .accesses-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

#accesses-page .accesses-toolbar-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

#accesses-page .accesses-toolbar-main .checkbox {
  margin: 0;
}

#accesses-page .accesses-toolbar-main .checkbox span {
  color: rgba(255, 255, 255, 0.8);
}

#accesses-page .accesses-service-search-field {
  max-width: 320px;
}

#notifications-page .tabs.browser-tabs {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 4px 4px 0;
  border-bottom: 1px solid rgba(125, 155, 255, 0.25);
  background: transparent;
  border-radius: 0;
  margin-bottom: 12px;
}

#notifications-page .tabs.browser-tabs .tab-btn {
  border: 1px solid rgba(125, 155, 255, 0.25);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 8px 14px;
  background: rgba(10, 14, 24, 0.6);
  color: rgba(255, 255, 255, 0.75);
  position: relative;
}

#notifications-page .tabs.browser-tabs .tab-btn:hover {
  color: #fff;
  background: rgba(24, 32, 50, 0.8);
  transform: translateY(-2px);
}

#notifications-page .tabs.browser-tabs .tab-btn.active {
  background: rgba(20, 26, 38, 0.95);
  color: #fff;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
  z-index: 2;
}

#notifications-page .tabs.browser-tabs .tab-btn.active::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -2px;
  height: 4px;
  background: rgba(20, 26, 38, 0.95);
}

#notifications-page .tab-panel > .card + .card {
  margin-top: 16px;
}

#notifications-page .card {
  background: rgba(20, 26, 38, 0.92);
  border: 1px solid rgba(125, 155, 255, 0.2);
  border-radius: 12px;
}

#notifications-page .card .card-body {
  padding: 16px;
}

#notifications-page .notifications-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

#notifications-page .notifications-channel-card {
  border: 1px solid rgba(125, 155, 255, 0.24);
  border-radius: 12px;
  background: rgba(30, 39, 58, 0.72);
  padding: 14px;
  display: grid;
  gap: 12px;
  cursor: pointer;
}

#notifications-page .notifications-channel-card:hover {
  border-color: rgba(125, 155, 255, 0.45);
}

#notifications-page .notifications-channel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

#notifications-page .notifications-channel-meta {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

#notifications-page .notifications-channel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#notifications-page .monitoring-table {
  margin-top: 8px;
}

#notifications-page #notifications-settings-accesses-types {
  min-height: 120px;
  max-height: 200px;
}

#notifications-page #notifications-settings-accesses-types-hint {
  margin-top: 8px;
}

#notifications-page .two-column-span {
  grid-column: 1 / -1;
}

/* Settings: remove outer wrapper frame, keep only inner frames */
#settings-page > .card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#settings-page > .card > .card-body {
  padding: 0;
}

/* Hide top page title/subtitle in all tabs */
.app-header {
  display: none;
}

#rbac-badge {
  display: none !important;
}

#content {
  padding-top: 20px;
}
.settings-tabs-card .waf-card-body {
  padding-top: 10px;
  padding-bottom: 10px;
}

#settings-page .tabs.browser-tabs {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 4px 4px 0;
  border-bottom: 1px solid rgba(125, 155, 255, 0.25);
  margin-bottom: 10px;
}

#settings-page .tabs.browser-tabs .tab-btn {
  border: 1px solid rgba(125, 155, 255, 0.25);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 8px 14px;
  background: rgba(10, 14, 24, 0.6);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#settings-page .tabs.browser-tabs .tab-btn:hover {
  color: #fff;
  background: rgba(24, 32, 50, 0.8);
  transform: translateY(-2px);
}

#settings-page .tabs.browser-tabs .tab-btn.active {
  background: rgba(20, 26, 38, 0.95);
  color: #fff;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
  z-index: 2;
}

#settings-page .tabs.browser-tabs .tab-btn.active::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -2px;
  height: 4px;
  background: rgba(20, 26, 38, 0.95);
}

/* Global overflow safety on narrow viewports */
:where(.page-card, .card, .table-card, .panel, .section, .modal, .modal-content, .widget, .form-card, .table-responsive, .data-table, .grid, .row, .col, .tabs, .tab-content) {
  min-width: 0;
}

:where(.page-card, .card, .table-card, .panel, .section, .modal-content, .widget, .form-card) > * {
  min-width: 0;
}

:where(input, select, textarea, button) {
  max-width: 100%;
}

:where(th, td, .muted, .label, .badge, .note) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

:where(.card, .page-card, .panel, .widget, .waf-card-body, .dashboard-widget-content, .dashboard-list-row, .dashboard-system-row, .mini-metric, .container-status-grid > *, .waf-modal-card) > :where(h1, h2, h3, h4, p, span, strong, small, div) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.no-page-card-head > .waf-card-head {
  display: flex;
}

.waf-pager .select,
.waf-pager select {
  min-width: 86px;
  background: rgba(8, 12, 20, 0.92);
  border: 1px solid rgba(96, 121, 187, 0.45);
  border-radius: 10px;
  color: #f5f7ff;
  padding: 7px 28px 7px 10px;
}

.waf-pager .select:focus,
.waf-pager select:focus {
  border-color: rgba(125, 155, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(125, 155, 255, 0.2);
  outline: none;
}

/* Global cards / frames */
:where(.waf-card, .waf-subcard, .waf-modal-card) {
  border: 1px solid rgba(109, 153, 245, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(118, 170, 255, 0.22), transparent 30%),
    radial-gradient(circle at left bottom, rgba(61, 105, 194, 0.12), transparent 26%),
    linear-gradient(160deg, rgba(20, 31, 54, 0.94), rgba(12, 18, 31, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 18px 38px rgba(0, 0, 0, 0.24);
}

:where(.waf-card-head) {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(109, 153, 245, 0.2);
  background: linear-gradient(180deg, rgba(117, 168, 255, 0.06), rgba(117, 168, 255, 0));
}

:where(.waf-card-head h3) {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: #f1f5ff;
}

:where(.waf-card-head .muted) {
  margin-top: 4px;
  color: rgba(198, 209, 237, 0.78);
}

:where(.waf-card-body) {
  padding: 20px 20px 20px;
}

:where(.waf-card-head) + :where(.waf-card-body) {
  padding-top: 36px;
}

:where(.waf-card-head) + :where(.revisions-modal-body, .revisions-status-detail) {
  padding-top: 36px;
}

:where(.waf-card-head) + :where(.waf-card-body, .revisions-modal-body, .revisions-status-detail) > :first-child {
  margin-top: 2px;
}

:where(.waf-note) {
  border: 1px solid rgba(109, 153, 245, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(15, 24, 40, 0.78), rgba(12, 18, 31, 0.58));
  color: rgba(209, 220, 247, 0.9);
}

:where(.waf-empty) {
  border: 1px dashed rgba(112, 145, 221, 0.24);
  border-radius: 14px;
  padding: 18px;
  background: rgba(11, 18, 30, 0.22);
}

#revisions-page.revisions-page {
  overflow: hidden;
}

#revisions-page .revisions-shell {
  padding: 18px 20px 20px;
  display: grid;
  gap: 14px;
}

#revisions-page .revisions-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
  gap: 16px;
  min-height: calc(100vh - 180px);
}

#revisions-page .revisions-frame {
  border: 1px solid rgba(109, 153, 245, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(118, 170, 255, 0.08), transparent 28%),
    radial-gradient(circle at left bottom, rgba(61, 105, 194, 0.05), transparent 22%),
    linear-gradient(160deg, rgba(18, 29, 48, 0.94), rgba(12, 19, 32, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 28px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  min-width: 0;
}

#revisions-page .revisions-frame-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(109, 153, 245, 0.12);
  background: linear-gradient(180deg, rgba(117, 168, 255, 0.025), rgba(117, 168, 255, 0));
}

#revisions-page .revisions-frame-title {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5ff;
}

#revisions-page .revisions-services {
  padding: 18px;
}

#revisions-page .revisions-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

#revisions-page .revisions-service-tile {
  border: 1px solid rgba(123, 160, 244, 0.22);
  border-radius: 16px;
  padding: 16px;
  background:
    radial-gradient(circle at 85% 10%, rgba(121, 171, 255, 0.12), transparent 34%),
    radial-gradient(circle at left bottom, rgba(58, 103, 194, 0.08), transparent 26%),
    linear-gradient(145deg, rgba(20, 33, 56, 0.92), rgba(14, 24, 41, 0.95));
  color: #eef4ff;
  display: grid;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#revisions-page .revisions-service-tile:hover,
#revisions-page .revisions-service-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(144, 182, 255, 0.34);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
  outline: none;
}

#revisions-page .revisions-service-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

#revisions-page .revisions-service-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

#revisions-page .revisions-service-host {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(205, 217, 246, 0.82);
}

#revisions-page .revisions-service-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#revisions-page .revisions-service-stat {
  border: 1px solid rgba(112, 145, 221, 0.18);
  border-radius: 12px;
  padding: 10px;
  background: rgba(10, 17, 29, 0.4);
  display: grid;
  gap: 6px;
}

#revisions-page .revisions-service-stat span {
  font-size: 12px;
  color: rgba(194, 206, 236, 0.82);
}

#revisions-page .revisions-service-stat strong {
  font-size: 18px;
}

#revisions-page .revisions-service-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

#revisions-page .revisions-service-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#revisions-page .revisions-service-meta span {
  font-size: 12px;
  color: rgba(194, 206, 236, 0.82);
}

#revisions-page .revisions-service-meta strong {
  overflow-wrap: anywhere;
}

#revisions-page .revisions-side-frame {
  display: grid;
  grid-template-rows: auto 1fr;
}

#revisions-page .revisions-sidebar {
  padding: 18px;
  display: grid;
  gap: 16px;
}

#revisions-page .revisions-status-stack {
  display: grid;
  gap: 10px;
}

#revisions-page .revisions-status-card {
  border: 1px solid rgba(112, 145, 221, 0.18);
  border-radius: 14px;
  padding: 12px;
  background: rgba(10, 17, 29, 0.5);
  display: grid;
  gap: 5px;
}

#revisions-page .revisions-status-label {
  font-size: 12px;
  color: rgba(197, 209, 239, 0.82);
}

#revisions-page .revisions-status-value {
  font-size: 18px;
  line-height: 1.25;
}

#revisions-page .revisions-timeline-frame {
  border: 1px solid rgba(112, 145, 221, 0.18);
  border-radius: 14px;
  padding: 12px;
  background: rgba(10, 17, 29, 0.42);
  display: grid;
  gap: 10px;
  min-height: 0;
}

#revisions-page .revisions-timeline-list {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}

#revisions-page .revisions-timeline-item {
  width: 100%;
  border: 1px solid rgba(112, 145, 221, 0.18);
  border-radius: 12px;
  padding: 10px;
  background: rgba(19, 30, 50, 0.6);
  display: grid;
  gap: 6px;
  color: #eef4ff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

#revisions-page .revisions-timeline-item:hover,
#revisions-page .revisions-timeline-item:focus-visible {
  border-color: rgba(144, 182, 255, 0.54);
  background: rgba(25, 38, 63, 0.78);
  transform: translateY(-1px);
  outline: none;
}

.revisions-modal-item {
  border: 1px solid rgba(109, 153, 245, 0.18);
  border-radius: 18px;
  padding: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(121, 171, 255, 0.1), transparent 28%),
    radial-gradient(circle at left center, rgba(58, 103, 194, 0.07), transparent 22%),
    linear-gradient(150deg, rgba(18, 30, 50, 0.92), rgba(13, 22, 37, 0.95));
}

.revisions-modal-item.is-expanded {
  border-color: rgba(146, 188, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 20px rgba(0, 0, 0, 0.14);
}

#revisions-page .revisions-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#revisions-page .revisions-timeline-meta {
  font-size: 12px;
  color: rgba(191, 203, 235, 0.78);
}

#revisions-page .revisions-timeline-text {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.revisions-modal-card {
  width: min(1080px, 94vw);
}

.revisions-modal-body {
  display: grid;
  gap: 16px;
}

.revisions-modal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.revisions-modal-chip {
  border: 1px solid rgba(112, 145, 221, 0.24);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(17, 28, 48, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.revisions-modal-chip span {
  color: rgba(197, 209, 239, 0.82);
}

.revisions-modal-list {
  display: grid;
  gap: 12px;
}

.revisions-modal-item-head {
  border-bottom: 1px solid rgba(109, 153, 245, 0.14);
  background: linear-gradient(180deg, rgba(117, 168, 255, 0.04), rgba(117, 168, 255, 0.01));
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #eef4ff;
  text-align: left;
}

.revisions-modal-item-title {
  font-size: 18px;
  font-weight: 700;
}

.revisions-modal-item-meta {
  margin-top: 5px;
  font-size: 13px;
  color: rgba(197, 209, 239, 0.82);
}

.revisions-modal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.revisions-accordion-indicator {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(142, 180, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #eaf1ff;
  background: rgba(8, 14, 24, 0.46);
  cursor: pointer;
}

.revisions-modal-item-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px 14px;
  align-items: stretch;
}

.revisions-modal-preview-tile {
  border: 1px solid rgba(109, 153, 245, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(11, 19, 32, 0.54), rgba(9, 15, 25, 0.28));
  display: grid;
  gap: 5px;
}

.revisions-modal-preview-tile span {
  font-size: 12px;
  color: rgba(197, 209, 239, 0.82);
}

.revisions-modal-preview-tile strong {
  overflow-wrap: anywhere;
}

.revisions-modal-accordion {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
  border-top: 1px solid rgba(109, 153, 245, 0.12);
  background: linear-gradient(180deg, rgba(10, 17, 29, 0.12), rgba(10, 17, 29, 0));
}

.revisions-modal-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.revisions-modal-line {
  border: 1px solid rgba(109, 153, 245, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(11, 19, 32, 0.58), rgba(9, 15, 25, 0.32));
  display: grid;
  gap: 5px;
}

.revisions-modal-line-wide {
  grid-column: 1 / -1;
}

.revisions-modal-line span {
  font-size: 12px;
  color: rgba(197, 209, 239, 0.82);
}

.revisions-modal-line strong {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.revisions-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.revisions-status-modal-card {
  width: min(920px, 92vw);
}

.revisions-status-detail {
  display: grid;
  gap: 16px;
}

.revisions-status-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.revisions-status-line {
  border: 1px solid rgba(112, 145, 221, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 14, 24, 0.32);
  display: grid;
  gap: 5px;
}

.revisions-status-line span {
  font-size: 12px;
  color: rgba(197, 209, 239, 0.82);
}

.revisions-status-line strong {
  overflow-wrap: anywhere;
}

.revisions-status-details-frame {
  border: 1px solid rgba(109, 153, 245, 0.2);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(13, 21, 35, 0.62), rgba(9, 15, 25, 0.38));
  display: grid;
  gap: 12px;
}

.revisions-status-details-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.revisions-status-detail-tile {
  border: 1px solid rgba(112, 145, 221, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 14, 24, 0.32);
  display: grid;
  gap: 8px;
}

.revisions-status-detail-tile span {
  font-size: 12px;
  color: rgba(197, 209, 239, 0.82);
}

.revisions-status-detail-tile pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #eef4ff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.revisions-status-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.waf-antiddos-frame:first-child {
  margin-top: 6px;
}

.waf-crs-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.waf-crs-status-tile {
  border: 1px solid rgba(109, 153, 245, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(12, 19, 32, 0.42), rgba(9, 15, 25, 0.18));
  display: grid;
  gap: 6px;
}

.waf-crs-status-tile span {
  font-size: 12px;
  color: rgba(197, 209, 239, 0.82);
}

.waf-crs-status-tile strong,
.waf-crs-status-tile code {
  overflow-wrap: anywhere;
}

.waf-crs-status-path {
  grid-column: 1 / -1;
}

#profile-page {
  display: grid;
  gap: 16px;
}

#profile-page .profile-security-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#profile-page .profile-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#profile-page .profile-overview-item {
  min-width: 0;
}

#profile-page .profile-overview-label {
  color: rgba(209, 220, 247, 0.74);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#profile-page .profile-overview-item strong {
  display: block;
  margin-top: 8px;
  font-size: 15px;
}

#profile-page .profile-overview-item-inline strong {
  display: inline;
  margin-top: 0;
  font-size: 16px;
}

#profile-page .profile-overview-inline-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

#profile-page .profile-password-grid {
  align-items: end;
}

#profile-page .profile-actions-row {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  #revisions-page .revisions-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #revisions-page .revisions-service-grid,
  .revisions-modal-item-grid,
  .revisions-modal-item-preview,
  .revisions-status-summary,
  .revisions-status-details-list,
  .waf-crs-status-grid {
    grid-template-columns: 1fr;
  }

  #revisions-page .revisions-frame-head,
  #revisions-page .revisions-service-head,
  #revisions-page .revisions-service-footer,
  .revisions-modal-item-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .revisions-modal-item-preview {
    grid-template-columns: 1fr;
  }
}