:root {
      --brand-accent: #71469B;
      --brand-accent-rgb: 113,70,155;
      --brand-accent-soft: #C77DFF;
      --brand-accent-soft-rgb: 199,125,255;
      --brand-accent-dark: #462B60;
      --brand-accent-dark-rgb: 70,43,96;
      --brand-neutral: #777380;
      --brand-neutral-rgb: 119,115,128;
      --brand-panel: #F6F4F9;
      --brand-panel-alt: #FAF9FC;
      --brand-header-fill: #EBE5F1;
      --brand-grid-major: #EFEBF4;
      --brand-grid-minor: #F8F6FA;
      --app-left-list-width: minmax(360px, 34%);
      --app-top-nav-offset: 86px;
      --app-top-nav-height: 76px;
      --app-list-hover-bg: rgba(var(--brand-accent-soft-rgb),0.08);
      --app-list-active-bg: rgba(var(--brand-accent-rgb),0.24);
      --app-list-active-left: var(--brand-accent-soft);
      --app-list-active-border: rgba(var(--brand-accent-soft-rgb),0.35);
      --app-scrollbar-size: 11px;
      --app-scrollbar-track: rgba(8,8,12,0.92);
      --app-scrollbar-thumb-start: rgba(var(--brand-accent-soft-rgb),0.92);
      --app-scrollbar-thumb-end: rgba(var(--brand-accent-rgb),0.95);
      --app-scrollbar-thumb-border: rgba(8,8,12,0.95);
      --app-scrollbar-thumb-hover-start: rgba(var(--brand-accent-soft-rgb),0.98);
      --app-scrollbar-thumb-hover-end: rgba(var(--brand-accent-rgb),0.98);
      --app-item-load-bg-top: rgba(var(--brand-accent-dark-rgb),0.42);
      --app-item-load-bg-bottom: rgba(8,10,16,0.94);
      --app-item-load-track-top: rgba(var(--brand-accent-soft-rgb),0.18);
      --app-item-load-track-bottom: rgba(255,255,255,0.05);
      --app-item-load-fill-start: rgba(var(--brand-accent-dark-rgb),0.96);
      --app-item-load-fill-mid: rgba(var(--brand-accent-rgb),0.98);
      --app-item-load-fill-end: rgba(var(--brand-accent-soft-rgb),0.96);
      --app-item-load-text: #f5f8ff;
      --app-item-load-pct: rgba(var(--brand-accent-soft-rgb),0.88);
    }
    * { scrollbar-width: thin; scrollbar-color: var(--app-scrollbar-thumb-start) var(--app-scrollbar-track); }
    *::-webkit-scrollbar { width: var(--app-scrollbar-size); height: var(--app-scrollbar-size); }
    *::-webkit-scrollbar-track { background: var(--app-scrollbar-track); border-radius: 999px; }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--app-scrollbar-thumb-start) 0%, var(--app-scrollbar-thumb-end) 100%);
      border-radius: 999px;
      border: 2px solid var(--app-scrollbar-thumb-border);
    }
    *::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--app-scrollbar-thumb-hover-start) 0%, var(--app-scrollbar-thumb-hover-end) 100%);
    }
    *::-webkit-scrollbar-corner { background: var(--app-scrollbar-track); }
    body { font-family: 'Segoe UI', sans-serif; background-color: #050505; color: #e0e0e0; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
    body.topnav-enabled { padding-top: var(--app-top-nav-offset, 86px); }
    .neural-bg { background-image: linear-gradient(rgba(var(--brand-accent-rgb), 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--brand-accent-rgb), 0.15) 1px, transparent 1px), radial-gradient(circle at 10% 20%, rgba(var(--brand-accent-rgb), 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(var(--brand-accent-rgb), 0.15) 0%, transparent 40%); background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%; background-attachment: fixed; }
    .neuron { position: fixed; z-index: 0; pointer-events: none; border-radius: 2px; box-shadow: 0 0 8px 2px rgba(var(--brand-accent-soft-rgb), 0.3); will-change: transform, opacity; }
    .app-top-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 12000; border-bottom: 1px solid rgba(var(--brand-accent-rgb),0.42); background: linear-gradient(180deg, rgba(11,11,18,0.96), rgba(8,8,12,0.93)); backdrop-filter: blur(10px); overflow: visible; }
    .app-top-nav-inner { max-width: none; margin: 0; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 18px; box-sizing: border-box; overflow: visible; }
    .app-top-nav-groups { display: flex; align-items: center; justify-content: flex-start; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; min-width: 0; overflow: visible; }
    .app-top-nav-group { position: relative; flex: 0 0 auto; padding-bottom: 8px; margin-bottom: -8px; }
    .app-top-nav-btn, .app-top-nav-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #e8eefc; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
    .app-top-nav-toggle { font-family: inherit; }
    .app-top-nav-btn:hover, .app-top-nav-toggle:hover, .app-top-nav-group.active > .app-top-nav-btn, .app-top-nav-group.active > .app-top-nav-toggle { border-color: rgba(var(--brand-accent-soft-rgb),0.65); box-shadow: 0 0 16px rgba(var(--brand-accent-rgb),0.25); background: rgba(var(--brand-accent-rgb),0.22); }
    .app-top-nav-caret { font-size: 10px; opacity: 0.9; }
    .app-top-nav-drop { position: absolute; left: 0; top: 100%; min-width: 220px; border: 1px solid rgba(var(--brand-accent-soft-rgb),0.42); border-radius: 11px; background: rgba(10,10,15,0.98); box-shadow: 0 14px 34px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--brand-accent-rgb),0.12); padding: 8px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; }
    .app-top-nav-group:hover .app-top-nav-drop, .app-top-nav-group:focus-within .app-top-nav-drop, .app-top-nav-group.open .app-top-nav-drop { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .app-top-nav-sublink { display: block; padding: 9px 10px; border-radius: 8px; color: #dbeafe; font-size: 12px; font-weight: 700; text-decoration: none; line-height: 1.25; border: 1px solid transparent; }
    .app-top-nav-sublink:hover, .app-top-nav-sublink.active { border-color: rgba(var(--brand-accent-soft-rgb),0.45); background: rgba(var(--brand-accent-rgb),0.18); box-shadow: 0 0 18px rgba(var(--brand-accent-rgb),0.14); color: #f4f7ff; }
    .app-top-nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
    .app-company-switch { display: inline-flex; align-items: center; gap: 8px; width: clamp(220px, 20vw, 320px); min-width: 220px; padding: 6px 8px 6px 10px; border-radius: 12px; border: 1px solid rgba(var(--brand-accent-soft-rgb),0.32); background: linear-gradient(180deg, rgba(var(--brand-accent-rgb),0.16), rgba(9,12,18,0.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
    .app-company-switch.loading { opacity: 0.72; }
    .app-company-switch-label { flex: 0 0 auto; font-size: 10px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(var(--brand-accent-soft-rgb),0.84); }
    .app-company-switch-select { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(var(--brand-accent-soft-rgb),0.26); border-radius: 9px; background: rgba(6,10,16,0.92); color: #eef5ff; font-size: 11px; font-weight: 800; padding: 8px 10px; outline: none; box-shadow: none; }
    .app-company-switch-select:hover { border-color: rgba(var(--brand-accent-soft-rgb),0.56); }
    .app-company-switch-select:focus { border-color: rgba(var(--brand-accent-soft-rgb),0.78); box-shadow: 0 0 0 2px rgba(var(--brand-accent-rgb),0.16); }
    .app-company-switch-select:disabled { opacity: 0.62; cursor: default; }
    .app-top-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 10px; font-size: 11px; font-weight: 800; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.35); color: #bbb; text-decoration: none; white-space: nowrap; }
    .app-top-link { color: #e8eefc; background: rgba(255,255,255,0.08); }
    .app-top-link:hover { border-color: rgba(var(--brand-accent-soft-rgb),0.65); box-shadow: 0 0 16px rgba(var(--brand-accent-rgb),0.25); }
    .app-top-nav-placeholder {
      position: relative;
      min-width: 88px;
      overflow: hidden;
      color: transparent;
      cursor: default;
      border-color: rgba(var(--brand-accent-soft-rgb),0.18);
      background: rgba(var(--brand-accent-rgb),0.08);
    }
    .app-top-nav-placeholder::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -70%;
      width: 54%;
      background: linear-gradient(90deg, transparent, rgba(var(--brand-accent-soft-rgb),0.24), transparent);
      transform: translate3d(0,0,0);
      animation: appTopNavPlaceholderSweep 1.25s ease-in-out infinite;
      will-change: transform;
    }
    html.app-section-loading body { cursor: progress; }
    html.app-section-loading body::before,
    html.app-section-loading body::after {
      content: '';
      position: fixed;
      top: 0;
      bottom: 0;
      pointer-events: none;
    }
    html.app-section-loading body.topnav-enabled::before,
    html.app-section-loading body.topnav-enabled::after {
      top: var(--app-top-nav-height, 76px);
    }
    html.app-section-loading body::before {
      left: 0;
      right: 0;
      z-index: 11880;
      pointer-events: auto;
      opacity: 1;
      background:
        radial-gradient(circle at 16% 18%, rgba(var(--brand-accent-rgb),0.14), transparent 36%),
        radial-gradient(circle at 86% 82%, rgba(var(--brand-accent-soft-rgb),0.09), transparent 34%),
        linear-gradient(145deg, rgba(4,6,12,0.48), rgba(7,8,15,0.34));
      -webkit-backdrop-filter: blur(11px) saturate(0.8) brightness(0.78);
      backdrop-filter: blur(11px) saturate(0.8) brightness(0.78);
      transition: opacity 0.1s ease;
    }
    html.app-section-loading body::after {
      left: 0;
      width: clamp(250px, 34vw, 560px);
      z-index: 11890;
      opacity: 0;
      border-left: 1px solid rgba(255,255,255,0.10);
      border-right: 1px solid rgba(var(--brand-accent-soft-rgb),0.18);
      background:
        radial-gradient(ellipse at center, rgba(255,255,255,0.18) 0%, rgba(var(--brand-accent-soft-rgb),0.17) 24%, rgba(var(--brand-accent-rgb),0.08) 46%, transparent 72%),
        linear-gradient(90deg, transparent 4%, rgba(255,255,255,0.055) 46%, rgba(var(--brand-accent-soft-rgb),0.08) 52%, transparent 96%);
      clip-path: ellipse(49% 82% at 50% 50%);
      box-shadow: inset 0 0 60px rgba(255,255,255,0.045), 0 0 70px rgba(var(--brand-accent-rgb),0.13);
      transform: translate3d(-120%,0,0);
      animation: appSectionLensSweep 1.65s cubic-bezier(0.42,0,0.58,1) infinite;
      will-change: transform, opacity;
      contain: strict;
    }
    html.app-section-loading.app-section-loading-leaving body::before { opacity: 0; }
    html.app-section-loading.app-section-loading-leaving body::after { display: none; }
    .app-section-loader-status {
      position: fixed;
      top: 18px;
      left: 50%;
      z-index: 11910;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      max-width: min(420px, calc(100vw - 28px));
      box-sizing: border-box;
      padding: 7px 13px;
      border: 1px solid rgba(var(--brand-accent-soft-rgb),0.38);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(15,18,28,0.94), rgba(7,9,16,0.88));
      color: #eff5ff;
      box-shadow: 0 14px 34px rgba(0,0,0,0.38), 0 0 24px rgba(var(--brand-accent-rgb),0.16), inset 0 1px 0 rgba(255,255,255,0.07);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.42px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      transform: translate3d(-50%,-8px,0);
      transition: opacity 0.1s ease, transform 0.1s ease, visibility 0s linear 0.1s;
    }
    body.topnav-enabled .app-section-loader-status { top: calc(var(--app-top-nav-height, 76px) + 18px); }
    html.app-section-loading .app-section-loader-status {
      visibility: visible;
      opacity: 1;
      transform: translate3d(-50%,0,0);
      transition-delay: 0s;
    }
    html.app-section-loading.app-section-loading-leaving .app-section-loader-status {
      visibility: hidden;
      opacity: 0;
      transform: translate3d(-50%,-5px,0);
    }
    .app-section-loader-mark {
      position: relative;
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--brand-accent-soft);
      box-shadow: 0 0 14px rgba(var(--brand-accent-soft-rgb),0.78);
    }
    .app-section-loader-mark::after {
      content: '';
      position: absolute;
      inset: -5px;
      border: 1px solid rgba(var(--brand-accent-soft-rgb),0.48);
      border-radius: 50%;
      animation: appSectionLoaderPulse 1.2s ease-out infinite;
      will-change: transform, opacity;
    }
    .app-section-loader-status.is-slow {
      border-color: rgba(251,191,36,0.42);
      color: #fff4cf;
      box-shadow: 0 14px 34px rgba(0,0,0,0.38), 0 0 24px rgba(245,158,11,0.14), inset 0 1px 0 rgba(255,255,255,0.07);
    }
    .app-section-loader-status.is-slow .app-section-loader-mark {
      background: #fbbf24;
      box-shadow: 0 0 14px rgba(251,191,36,0.72);
    }
    .app-content-reveal {
      animation: appContentReveal 0.32s cubic-bezier(0.22,1,0.36,1) both;
      will-change: opacity;
    }
    .app-auto-skeleton {
      position: relative !important;
      isolation: isolate;
      min-height: 66px;
      box-sizing: border-box;
      overflow: hidden !important;
      border-radius: 10px;
      border-color: rgba(var(--brand-accent-soft-rgb),0.18) !important;
      background: linear-gradient(145deg, rgba(var(--brand-accent-rgb),0.12), rgba(12,14,23,0.82)) !important;
      color: transparent !important;
      text-shadow: none !important;
      caret-color: transparent !important;
      user-select: none;
      pointer-events: none;
    }
    .app-auto-skeleton::before {
      content: '';
      position: absolute;
      z-index: 1;
      left: 14px;
      right: 14px;
      top: 12px;
      height: 44px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(var(--brand-accent-soft-rgb),0.23), rgba(255,255,255,0.10)) 0 0 / 38% 8px no-repeat,
        linear-gradient(90deg, rgba(255,255,255,0.11), rgba(var(--brand-accent-rgb),0.18)) 0 18px / 72% 8px no-repeat,
        linear-gradient(90deg, rgba(255,255,255,0.08), rgba(var(--brand-accent-soft-rgb),0.16)) 0 36px / 54% 8px no-repeat;
    }
    .app-auto-skeleton::after {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      bottom: 0;
      left: -58%;
      width: 46%;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), rgba(var(--brand-accent-soft-rgb),0.14), transparent);
      transform: translate3d(0,0,0) skewX(-12deg);
      animation: appSkeletonSweep 1.35s ease-in-out infinite;
      will-change: transform;
    }
    .app-auto-skeleton-table {
      height: 68px !important;
      padding: 12px 14px !important;
    }
    .app-auto-skeleton-inline {
      display: inline-block !important;
      width: min(240px, 72%) !important;
      min-width: 140px;
      min-height: 32px;
      vertical-align: middle;
    }
    .app-auto-skeleton-inline::before {
      top: 50%;
      height: 8px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(var(--brand-accent-soft-rgb),0.23), rgba(255,255,255,0.10)) 0 0 / 72% 8px no-repeat;
    }
    .app-skeleton-resolved {
      animation: appSkeletonResolved 0.3s ease-out both;
      will-change: opacity;
    }
    @keyframes appTopNavPlaceholderSweep {
      from { transform: translate3d(0,0,0); }
      to { transform: translate3d(300%,0,0); }
    }
    @keyframes appSectionLensSweep {
      0% { transform: translate3d(-120%,0,0); opacity: 0; }
      12% { opacity: 0.78; }
      82% { opacity: 0.72; }
      100% { transform: translate3d(calc(100vw + 120%),0,0); opacity: 0; }
    }
    @keyframes appSectionLoaderPulse {
      0% { transform: scale(0.72); opacity: 0.76; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    @keyframes appContentReveal {
      from { opacity: 0.72; }
      to { opacity: 1; }
    }
    @keyframes appSkeletonSweep {
      from { transform: translate3d(0,0,0) skewX(-12deg); }
      to { transform: translate3d(350%,0,0) skewX(-12deg); }
    }
    @keyframes appSkeletonResolved {
      from { opacity: 0.38; }
      to { opacity: 1; }
    }
    @media (max-width: 760px) {
      html.app-section-loading body::after { width: clamp(220px, 62vw, 420px); }
      .app-section-loader-status { max-width: calc(100vw - 20px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .app-top-nav-placeholder::after,
      .app-section-loader-mark::after,
      .app-auto-skeleton::after,
      .app-content-reveal,
      .app-skeleton-resolved { animation: none !important; }
      html.app-section-loading body::after {
        animation: none;
        opacity: 0.26;
        transform: translate3d(calc(50vw - 50%),0,0);
      }
      html.app-section-loading body::before,
      .app-section-loader-status { transition-duration: 0.01ms; }
    }
    .app-active-users-wrap { position: relative; display: inline-flex; align-items: center; }
    .app-active-users-btn { font-family: inherit; cursor: pointer; gap: 6px; }
    .app-active-users-btn .count { color: #bbf7d0; font-weight: 900; }
    .app-active-users-drop {
      position: absolute;
      right: 0;
      top: calc(100% + 4px);
      min-width: 220px;
      max-width: 340px;
      max-height: 300px;
      overflow: auto;
      padding: 8px;
      border-radius: 11px;
      border: 1px solid rgba(74,222,128,0.45);
      background: rgba(8,16,12,0.97);
      box-shadow: 0 14px 32px rgba(0,0,0,0.42);
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.16s ease, transform 0.16s ease;
    }
    .app-active-users-drop::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -12px;
      height: 12px;
    }
    .app-active-users-wrap:hover .app-active-users-drop,
    .app-active-users-wrap:focus-within .app-active-users-drop,
    .app-active-users-wrap.open .app-active-users-drop {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .app-active-users-empty { padding: 8px 10px; font-size: 12px; color: #9db0c8; }
    .app-active-users-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; color: #e8eefc; font-size: 12px; font-weight: 700; }
    .app-active-users-item.selectable { cursor: pointer; }
    .app-active-users-item + .app-active-users-item { margin-top: 4px; }
    .app-active-users-item:hover { border-color: rgba(var(--brand-accent-soft-rgb),0.45); background: rgba(var(--brand-accent-rgb),0.16); }
    .app-active-users-item.me { border-color: rgba(74,222,128,0.45); background: rgba(22,101,52,0.26); }
    .app-active-users-item .you { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: #bbf7d0; border: 1px solid rgba(74,222,128,0.55); border-radius: 999px; padding: 1px 7px; }
    .app-active-users-toggle {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px dashed rgba(var(--brand-accent-soft-rgb),0.42);
      color: var(--brand-accent-soft);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      cursor: pointer;
      background: rgba(var(--brand-accent-rgb),0.12);
      text-align: center;
    }
    .app-active-users-toggle:hover {
      border-color: rgba(var(--brand-accent-soft-rgb),0.72);
      background: rgba(var(--brand-accent-rgb),0.22);
      color: #f4f7ff;
    }
    .app-active-users-group-create {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(74,222,128,0.58);
      color: #bbf7d0;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.45px;
      text-transform: uppercase;
      text-align: center;
      cursor: pointer;
      background: rgba(22,101,52,0.32);
    }
    .app-active-users-group-create:hover {
      border-color: rgba(134,239,172,0.82);
      background: rgba(22,163,74,0.35);
      color: #dcfce7;
    }
    .app-active-users-group-hdr {
      margin-top: 9px;
      padding: 3px 2px 5px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: rgba(var(--brand-accent-soft-rgb),0.92);
      border-top: 1px solid rgba(var(--brand-accent-soft-rgb),0.25);
    }
    .app-active-users-group-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid transparent;
      color: #e0f2fe;
      font-size: 12px;
      font-weight: 700;
      background: rgba(14,24,40,0.52);
    }
    .app-active-users-group-item.selectable { cursor: pointer; }
    .app-active-users-group-item + .app-active-users-group-item { margin-top: 4px; }
    .app-active-users-group-item:hover {
      border-color: rgba(var(--brand-accent-soft-rgb),0.48);
      background: rgba(var(--brand-accent-rgb),0.18);
    }
    .app-active-users-group-item .name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .app-active-users-group-item .meta {
      flex: 0 0 auto;
      font-size: 10px;
      color: #9bd0ff;
      letter-spacing: 0.35px;
      text-transform: uppercase;
    }
    .app-notify-host {
      position: fixed;
      left: 14px;
      top: 64px;
      z-index: 12550;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: min(380px, calc(100vw - 24px));
      pointer-events: none;
    }
    .app-notify-item {
      display: grid;
      grid-template-columns: 34px minmax(0,1fr);
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 11px;
      border: 1px solid rgba(125,211,252,0.45);
      background: rgba(8,23,38,0.94);
      box-shadow: 0 10px 24px rgba(0,0,0,0.42);
      opacity: 0;
      transform: translateX(-18px) scale(0.96);
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: auto;
    }
    .app-notify-item.show { opacity: 1; transform: translateX(0) scale(1); }
    .app-notify-item.hide { opacity: 0; transform: translateX(-14px) scale(0.98); }
    .app-notify-icon {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.07);
      color: #dbeafe;
    }
    .app-notify-body { min-width: 0; }
    .app-notify-title { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.55px; color: #dbeafe; }
    .app-notify-message { margin-top: 2px; font-size: 12px; font-weight: 700; color: #edf7ff; line-height: 1.3; word-break: break-word; }
    .app-notify-item.app-notify-success { border-color: rgba(74,222,128,0.6); background: rgba(22,101,52,0.9); }
    .app-notify-item.app-notify-success .app-notify-icon { border-color: rgba(134,239,172,0.7); color: #86efac; background: rgba(22,163,74,0.28); }
    .app-notify-item.app-notify-warning { border-color: rgba(251,191,36,0.65); background: rgba(120,53,15,0.9); }
    .app-notify-item.app-notify-warning .app-notify-icon { border-color: rgba(252,211,77,0.7); color: #fcd34d; background: rgba(180,83,9,0.32); }
    .app-notify-item.app-notify-error { border-color: rgba(248,113,113,0.7); background: rgba(127,29,29,0.92); }
    .app-notify-item.app-notify-error .app-notify-icon { border-color: rgba(252,165,165,0.75); color: #fca5a5; background: rgba(185,28,28,0.34); }
    .app-notify-item.app-notify-info { border-color: rgba(125,211,252,0.62); background: rgba(8,23,38,0.94); }
    .app-notify-item.app-notify-info .app-notify-icon { border-color: rgba(125,211,252,0.7); color: #7dd3fc; background: rgba(14,116,144,0.28); }
    .app-item-load-progress {
      position: fixed;
      top: 72px;
      left: 50%;
      transform: translateX(-50%) translateY(-12px) scale(0.98);
      width: min(560px, calc(100vw - 28px));
      padding: 12px 14px 13px;
      border-radius: 16px;
      z-index: 12600;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(180deg, var(--app-item-load-bg-top), var(--app-item-load-bg-bottom));
      border: 1px solid rgba(var(--brand-accent-soft-rgb),0.38);
      box-shadow: 0 18px 42px rgba(0,0,0,0.42), 0 0 0 1px rgba(var(--brand-accent-rgb),0.12) inset, 0 0 28px rgba(var(--brand-accent-soft-rgb),0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .app-item-load-progress.active {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
    .app-item-load-progress::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(var(--brand-accent-soft-rgb),0.12), transparent 45%, rgba(var(--brand-accent-rgb),0.16));
      pointer-events: none;
    }
    .app-item-load-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 9px;
    }
    .app-item-load-track {
      position: relative;
      z-index: 1;
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--app-item-load-track-top), var(--app-item-load-track-bottom));
      border: 1px solid rgba(var(--brand-accent-soft-rgb),0.20);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.22);
    }
    .app-item-load-bar {
      position: relative;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      transition: width 0.22s ease;
      background: linear-gradient(90deg, var(--app-item-load-fill-start), var(--app-item-load-fill-mid) 55%, var(--app-item-load-fill-end));
      box-shadow: 0 0 18px rgba(var(--brand-accent-soft-rgb),0.24), 0 0 28px rgba(var(--brand-accent-rgb),0.20);
    }
    .app-item-load-bar::before {
      content: '';
      position: absolute;
      top: 1px;
      bottom: 1px;
      left: 1px;
      width: 38%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.05));
      opacity: 0.55;
    }
    .app-item-load-bar::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 28%;
      right: -34%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.44), transparent);
      animation: appItemLoadShimmer 1.05s linear infinite;
    }
    .app-item-load-text {
      color: var(--app-item-load-text);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.48px;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(0,0,0,0.35);
    }
    .app-item-load-pct {
      min-width: 48px;
      text-align: right;
      color: var(--app-item-load-pct);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.35px;
    }
    @keyframes appItemLoadShimmer {
      from { transform: translateX(-220%); }
      to { transform: translateX(220%); }
    }
    .app-chat-host {
      position: fixed;
      left: 8px;
      right: 8px;
      bottom: 8px;
      z-index: 12950;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 10px;
      pointer-events: auto;
      overflow-x: auto;
      overflow-y: visible;
      padding: 0 2px 2px;
      box-sizing: border-box;
    }
    .app-chat-window {
      position: relative;
      width: 390px;
      height: 360px;
      min-width: 300px;
      min-height: 200px;
      max-width: min(92vw, 520px);
      display: flex;
      flex: 0 0 auto;
      flex-direction: column;
      border-radius: 12px;
      border: 1px solid rgba(125,211,252,0.55);
      background: rgba(6,12,20,0.96);
      box-shadow: 0 14px 36px rgba(0,0,0,0.5);
      resize: both;
      overflow: hidden;
      backdrop-filter: blur(7px);
      pointer-events: auto;
    }
    .app-chat-window.minimized {
      height: auto !important;
      min-height: 0;
      resize: none;
      width: 290px;
      max-width: min(78vw, 330px);
    }
    .app-chat-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(125,211,252,0.34);
      background: linear-gradient(180deg, rgba(14,23,36,0.96), rgba(9,16,26,0.95));
      cursor: default;
    }
    .app-chat-head-main {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .app-chat-title {
      min-width: 0;
      color: #e8f4ff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.45px;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .app-chat-presence {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(125,211,252,0.58);
      background: rgba(2,132,199,0.22);
      color: #bae6fd;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.45px;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .app-chat-presence.online {
      border-color: rgba(74,222,128,0.7);
      background: rgba(22,163,74,0.25);
      color: #bbf7d0;
    }
    .app-chat-presence.offline {
      border-color: rgba(248,113,113,0.75);
      background: rgba(185,28,28,0.22);
      color: #fecaca;
    }
    .app-chat-presence.group {
      border-color: rgba(125,211,252,0.66);
      background: rgba(14,116,144,0.26);
      color: #dbeafe;
    }
    .app-chat-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }
    .app-chat-act-btn {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.07);
      color: #dbeafe;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .app-chat-act-btn:hover {
      border-color: rgba(125,211,252,0.7);
      background: rgba(56,189,248,0.18);
    }
    .app-chat-window.minimized .app-chat-body,
    .app-chat-window.minimized .app-chat-typing,
    .app-chat-window.minimized .app-chat-compose {
      display: none;
    }
    .app-chat-body {
      flex: 1 1 auto;
      overflow: auto;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      background: rgba(5,9,15,0.82);
    }
    .app-chat-typing {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 5px 10px 7px;
      border-top: 1px solid rgba(125,211,252,0.22);
      background: rgba(8,14,22,0.9);
      color: #9fd4ff;
      font-size: 11px;
      font-weight: 700;
    }
    .app-chat-typing.show { display: inline-flex; }
    .app-chat-typing-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
    .app-chat-typing-dots {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transform: translateY(1px);
    }
    .app-chat-typing-dots span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #7dd3fc;
      opacity: 0.25;
      animation: app-chat-typing-dot 1.15s infinite ease-in-out;
    }
    .app-chat-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
    .app-chat-typing-dots span:nth-child(3) { animation-delay: 0.32s; }
    @keyframes app-chat-typing-dot {
      0%, 70%, 100% { transform: translateY(0); opacity: 0.28; }
      35% { transform: translateY(-2px); opacity: 1; }
    }
    .app-chat-empty {
      margin: auto;
      text-align: center;
      font-size: 12px;
      color: #94a3b8;
      border: 1px dashed rgba(148,163,184,0.35);
      border-radius: 10px;
      padding: 12px;
      background: rgba(15,23,42,0.24);
      max-width: 90%;
    }
    .app-chat-row {
      max-width: 84%;
      border-radius: 10px;
      padding: 7px 9px;
      font-size: 12px;
      line-height: 1.35;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(30,41,59,0.6);
      color: #e2e8f0;
      align-self: flex-start;
      word-break: break-word;
      white-space: pre-wrap;
    }
    .app-chat-row.mine {
      align-self: flex-end;
      background: rgba(22,101,52,0.55);
      border-color: rgba(74,222,128,0.52);
      color: #d1fae5;
    }
    .app-chat-text {
      white-space: pre-wrap;
      word-break: break-word;
      unicode-bidi: plaintext;
    }
    .app-chat-meta {
      margin-top: 4px;
      font-size: 10px;
      color: #93a5be;
      opacity: 0.95;
    }
    .app-chat-row.mine .app-chat-meta { color: #bbf7d0; }
    .app-chat-images {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .app-chat-image-link {
      display: block;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(125,211,252,0.35);
      background: rgba(2,6,14,0.5);
      box-shadow: 0 8px 18px rgba(2,6,23,0.22);
      max-width: 220px;
    }
    .app-chat-image-link img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 220px;
      max-height: 220px;
      object-fit: cover;
      background: rgba(15,23,42,0.88);
    }
    .app-chat-image-link:hover {
      border-color: rgba(125,211,252,0.7);
      box-shadow: 0 10px 24px rgba(14,165,233,0.22);
    }
    .app-chat-compose {
      border-top: 1px solid rgba(125,211,252,0.3);
      padding: 8px;
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 8px;
      align-items: end;
      background: rgba(7,14,23,0.95);
    }
    .app-chat-attachments {
      grid-column: 1 / -1;
      display: none;
      flex-wrap: wrap;
      gap: 8px;
      padding-bottom: 2px;
    }
    .app-chat-attachments.show { display: flex; }
    .app-chat-attachment-chip {
      position: relative;
      width: 56px;
      height: 56px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(148,163,184,0.35);
      background: rgba(15,23,42,0.7);
      box-shadow: 0 8px 20px rgba(2,6,23,0.24);
    }
    .app-chat-attachment-chip img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .app-chat-attachment-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(15,23,42,0.88);
      color: #f8fafc;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      padding: 0;
      cursor: pointer;
    }
    .app-chat-file {
      display: none;
    }
    .app-chat-input {
      margin: 0;
      min-height: 40px;
      max-height: 120px;
      resize: vertical;
      padding: 8px 10px;
      border-radius: 9px;
      border: 1px solid rgba(148,163,184,0.45);
      background: rgba(2,6,14,0.86);
      color: #e5eef9;
      font-size: 12px;
      line-height: 1.35;
      font-family: inherit;
      box-sizing: border-box;
    }
    .app-chat-smile-wrap {
      position: relative;
      align-self: end;
    }
    .app-chat-attach-btn,
    .app-chat-smile-btn {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      border: 1px solid rgba(125,211,252,0.55);
      background: rgba(3,105,161,0.24);
      color: #dbeafe;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }
    .app-chat-attach-btn {
      border-color: rgba(244,114,182,0.46);
      background: rgba(190,24,93,0.22);
      color: #fbcfe8;
    }
    .app-chat-attach-btn:hover {
      border-color: rgba(244,114,182,0.82);
      box-shadow: 0 0 14px rgba(244,114,182,0.22);
    }
    .app-chat-smile-btn:hover {
      border-color: rgba(125,211,252,0.82);
      box-shadow: 0 0 14px rgba(56,189,248,0.26);
    }
    .app-chat-smile-panel {
      position: absolute;
      right: 0;
      bottom: calc(100% + 8px);
      width: 232px;
      display: none;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 6px;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid rgba(148,163,184,0.38);
      background: rgba(2,6,14,0.97);
      box-shadow: 0 16px 30px rgba(2,6,23,0.56);
      z-index: 6;
    }
    .app-chat-smile-wrap.open .app-chat-smile-panel { display: grid; }
    .app-chat-smile-item {
      height: 30px;
      border-radius: 8px;
      border: 1px solid rgba(148,163,184,0.26);
      background: rgba(30,41,59,0.55);
      color: #e2e8f0;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      padding: 0;
    }
    .app-chat-smile-item:hover {
      border-color: rgba(125,211,252,0.65);
      background: rgba(14,116,144,0.36);
    }
    .app-chat-input:focus {
      outline: none;
      border-color: rgba(125,211,252,0.72);
      box-shadow: 0 0 0 1px rgba(56,189,248,0.35);
    }
    .app-chat-send {
      min-width: 72px;
      height: 38px;
      border-radius: 9px;
      border: 1px solid rgba(74,222,128,0.55);
      background: rgba(22,163,74,0.28);
      color: #bbf7d0;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.45px;
      text-transform: uppercase;
      cursor: pointer;
    }
    .app-chat-send:hover {
      border-color: rgba(74,222,128,0.78);
      box-shadow: 0 0 14px rgba(34,197,94,0.28);
    }
    .app-chat-send:disabled {
      opacity: 0.6;
      cursor: default;
      box-shadow: none;
    }
    .app-chat-window.peer-offline {
      border-color: rgba(248,113,113,0.78);
      box-shadow: 0 16px 36px rgba(127,29,29,0.52);
    }
    .app-chat-window.peer-offline .app-chat-head {
      border-bottom-color: rgba(248,113,113,0.46);
      background: linear-gradient(180deg, rgba(83,23,23,0.96), rgba(59,18,18,0.95));
    }
    .app-chat-window.peer-offline .app-chat-compose {
      border-top-color: rgba(248,113,113,0.35);
      background: rgba(40,13,13,0.92);
    }
    .app-chat-window.peer-offline .app-chat-send {
      border-color: rgba(248,113,113,0.62);
      background: rgba(185,28,28,0.34);
      color: #fecaca;
    }
    .app-chat-window.peer-offline .app-chat-send:hover {
      border-color: rgba(252,165,165,0.78);
      box-shadow: 0 0 14px rgba(248,113,113,0.35);
    }
    .app-group-modal {
      position: fixed;
      inset: 0;
      z-index: 13200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 14px;
      background: rgba(3,7,18,0.68);
      backdrop-filter: blur(4px);
    }
    .app-group-modal.show { display: flex; }
    .app-group-modal-card {
      width: min(520px, calc(100vw - 22px));
      max-height: min(78vh, 760px);
      display: flex;
      flex-direction: column;
      border-radius: 13px;
      border: 1px solid rgba(125,211,252,0.55);
      background: rgba(7,16,26,0.96);
      box-shadow: 0 20px 46px rgba(0,0,0,0.48);
      overflow: hidden;
    }
    .app-group-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(125,211,252,0.32);
      background: linear-gradient(180deg, rgba(18,32,48,0.96), rgba(10,20,30,0.95));
    }
    .app-group-modal-head .ttl {
      color: #e0f2fe;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }
    .app-group-modal-close {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.07);
      color: #dbeafe;
      font-weight: 900;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }
    .app-group-modal-close:hover {
      border-color: rgba(125,211,252,0.7);
      background: rgba(56,189,248,0.18);
    }
    .app-group-modal-body {
      padding: 10px 12px;
      overflow: auto;
      display: grid;
      gap: 10px;
    }
    .app-group-modal-row { display: grid; gap: 6px; }
    .app-group-modal-row label {
      font-size: 11px;
      color: #93c5fd;
      text-transform: uppercase;
      letter-spacing: 0.55px;
      font-weight: 900;
    }
    #app_group_chat_name {
      width: 100%;
      box-sizing: border-box;
      border-radius: 9px;
      border: 1px solid rgba(125,211,252,0.45);
      background: rgba(2,6,14,0.72);
      color: #e2e8f0;
      font-size: 12px;
      padding: 8px 10px;
      font-family: inherit;
    }
    #app_group_chat_name:focus {
      outline: none;
      border-color: rgba(125,211,252,0.76);
      box-shadow: 0 0 0 1px rgba(56,189,248,0.35);
    }
    .app-group-users {
      border: 1px solid rgba(148,163,184,0.33);
      border-radius: 10px;
      background: rgba(3,9,17,0.78);
      min-height: 90px;
      max-height: min(45vh, 330px);
      overflow: auto;
      padding: 6px;
      display: grid;
      gap: 5px;
    }
    .app-group-user-row {
      display: grid;
      grid-template-columns: auto minmax(0,1fr) auto;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      border: 1px solid transparent;
      padding: 6px 8px;
      cursor: pointer;
      user-select: none;
    }
    .app-group-user-row:hover {
      border-color: rgba(125,211,252,0.44);
      background: rgba(56,189,248,0.12);
    }
    .app-group-user-check { width: 15px; height: 15px; margin: 0; }
    .app-group-user-name {
      color: #e2e8f0;
      font-size: 12px;
      font-weight: 700;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .app-group-user-state {
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.45);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 1px 7px;
    }
    .app-group-user-state.online {
      border-color: rgba(74,222,128,0.65);
      color: #bbf7d0;
      background: rgba(22,163,74,0.2);
    }
    .app-group-user-state.offline {
      border-color: rgba(248,113,113,0.58);
      color: #fecaca;
      background: rgba(185,28,28,0.2);
    }
    .app-group-users-empty {
      color: #9fb6d3;
      font-size: 12px;
      padding: 10px;
      text-align: center;
    }
    .app-group-modal-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 12px;
      border-top: 1px solid rgba(125,211,252,0.26);
      background: rgba(9,16,26,0.92);
    }
    .app-group-btn {
      min-width: 88px;
      height: 34px;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.45px;
      cursor: pointer;
    }
    .app-group-btn:disabled { opacity: 0.65; cursor: default; }
    .app-group-btn-cancel {
      border: 1px solid rgba(148,163,184,0.5);
      background: rgba(30,41,59,0.42);
      color: #cbd5e1;
    }
    .app-group-btn-cancel:hover:not(:disabled) {
      border-color: rgba(125,211,252,0.65);
      background: rgba(56,189,248,0.16);
      color: #e2e8f0;
    }
    .app-group-btn-create {
      border: 1px solid rgba(74,222,128,0.62);
      background: rgba(22,163,74,0.3);
      color: #bbf7d0;
    }
    .app-group-btn-create:hover:not(:disabled) {
      border-color: rgba(134,239,172,0.8);
      background: rgba(22,163,74,0.4);
      color: #dcfce7;
    }
    @media (max-width: 980px) {
      body.topnav-enabled { padding-top: calc(var(--app-top-nav-offset, 120px) + env(safe-area-inset-top, 0px)); }
      .app-top-nav { padding-top: env(safe-area-inset-top, 0px); }
      .app-top-nav-inner { flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 8px 10px 10px; }
      .app-top-nav-groups {
        width: 100%;
        order: 1;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
      }
      .app-top-nav-group {
        padding-bottom: 0;
        margin-bottom: 0;
      }
      .app-top-nav-btn,
      .app-top-nav-toggle {
        min-height: 40px;
        font-size: 11px;
        padding: 8px 10px;
        touch-action: manipulation;
        white-space: nowrap;
      }
      .app-top-nav-sublink {
        padding: 11px 10px;
        font-size: 13px;
      }
      .app-top-nav-drop {
        position: fixed;
        left: 8px;
        right: 8px;
        top: calc(var(--app-top-nav-height, 120px) + env(safe-area-inset-top, 0px) + 6px);
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(68vh, 480px);
        z-index: 12150;
      }
      .app-top-nav-group:hover .app-top-nav-drop,
      .app-top-nav-group:focus-within .app-top-nav-drop {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
      }
      .app-top-nav-group.open .app-top-nav-drop {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .app-top-nav-right {
        justify-content: space-between;
        margin-left: 0;
        order: 2;
        width: 100%;
        gap: 6px;
        flex-wrap: wrap;
      }
      .app-company-switch {
        width: 100%;
        min-width: 0;
      }
      .app-company-switch-select {
        min-height: 40px;
      }
      .app-active-users-wrap { position: static; }
      .app-active-users-drop {
        position: fixed;
        left: 8px;
        right: 8px;
        top: calc(var(--app-top-nav-height, 120px) + env(safe-area-inset-top, 0px) + 6px);
        min-width: 0;
        max-width: none;
        max-height: min(70vh, 520px);
        z-index: 12200;
      }
      .app-active-users-wrap:hover .app-active-users-drop,
      .app-active-users-wrap:focus-within .app-active-users-drop {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
      }
      .app-active-users-wrap.open .app-active-users-drop {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .app-active-users-item,
      .app-active-users-group-item {
        min-height: 40px;
        font-size: 13px;
      }
      .app-notify-host { top: calc(var(--app-top-nav-height, 120px) + env(safe-area-inset-top, 0px) + 8px); left: 10px; width: calc(100vw - 20px); }
      .app-chat-host {
        left: 8px;
        right: 8px;
        bottom: 8px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        gap: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100vh - var(--app-top-nav-offset, 120px) - 10px);
        padding: 0;
      }
      .app-chat-window {
        width: 100%;
        min-width: 0;
        height: min(56vh, 520px);
        max-height: calc(100vh - var(--app-top-nav-offset, 120px) - 14px);
      }
      .app-chat-window.minimized {
        width: 100%;
        max-width: 100%;
      }
      .app-chat-smile-panel {
        width: min(232px, calc(100vw - 56px));
      }
      .app-group-modal-card { width: min(560px, calc(100vw - 18px)); max-height: 84vh; }
    }
    .app-saved-toast {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 74px;
      padding: 7px 10px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.5px;
      color: #bbf7d0;
      border: 1px solid rgba(74,222,128,0.55);
      background: rgba(22,101,52,0.34);
      box-shadow: 0 0 18px rgba(34,197,94,0.2);
      opacity: 0;
      transform: translateY(-6px) scale(0.97);
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: none;
    }
    .app-saved-toast.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .unified-list-shell { border:1px solid rgba(255,255,255,0.10); border-radius:12px; overflow:hidden; background:#090909; }
    .unified-list { max-height:72vh; overflow-y:auto; }
    .unified-list-toolbar {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      margin-bottom:8px;
    }
    .unified-list-toolbar > * { margin:0 !important; }
    .unified-list-row {
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,0.08);
      border-left:3px solid transparent;
      cursor:pointer;
      transition:background .15s ease, border-color .15s ease;
    }
    .unified-list-row:hover { background:var(--app-list-hover-bg); }
    .unified-list-row.active {
      background:var(--app-list-active-bg);
      border-left-style:solid;
      border-left-width:3px;
      border-left-color:var(--app-list-active-left);
    }
    .unified-list-table tbody tr { cursor:pointer; }
    .unified-list-table tbody tr:hover td { background:var(--app-list-hover-bg); }
    .unified-list-table tbody tr.active td {
      background:var(--app-list-active-bg);
      border-bottom-color:var(--app-list-active-border);
      color:#eee;
    }
    .unified-list-table tbody tr.active td:first-child {
      box-shadow: inset 3px 0 0 var(--app-list-active-left);
    }
    .ticket-list { margin-top:10px; }
    .ticket-row {
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,0.08);
      cursor:pointer;
      transition:background .15s ease, border-color .15s ease;
    }
    .ticket-row.child {
      margin-left:18px;
      padding-left:12px;
      border-left:2px solid rgba(255,255,255,0.12);
      opacity:0.92;
    }
    .ticket-head { display:flex; gap:8px; align-items:center; justify-content:space-between; }
    .ticket-code { color:#e8eefc; font-weight:900; font-size:12px; letter-spacing:.3px; }
    .ticket-subj { color:#cbd5e1; font-size:12px; margin-top:4px; line-height:1.3; }
    .ticket-meta { color:#93a2b7; font-size:11px; margin-top:6px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .ticket-status, .ticket-priority, .ticket-kind {
      display:inline-flex;
      border-radius:999px;
      padding:1px 7px;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.5px;
      border:1px solid rgba(255,255,255,0.25);
      color:#cbd5e1;
      font-weight:800;
      white-space:nowrap;
    }
    .ticket-priority { font-weight:900; }
    .ticket-kind { border-color:rgba(125,211,252,0.45); color:#bae6fd; background:rgba(56,189,248,0.14); }
    .ticket-status.open { border-color:rgba(34,197,94,0.55); color:#86efac; background:rgba(34,197,94,0.12); }
    .ticket-status.new { border-color:rgba(148,163,184,0.60); color:#d5deea; background:rgba(148,163,184,0.14); }
    .ticket-status.in_progress, .ticket-status.in-progress { border-color:rgba(56,189,248,0.55); color:#bae6fd; background:rgba(56,189,248,0.16); }
    .ticket-status.under_review, .ticket-status.under-review, .ticket-status.triage { border-color:rgba(56,189,248,0.60); color:#bae6fd; background:rgba(56,189,248,0.16); }
    .ticket-status.waiting_customer, .ticket-status.waiting-customer, .ticket-status.ready_for_release, .ticket-status.ready-for-release { border-color:rgba(20,184,166,0.60); color:#99f6e4; background:rgba(20,184,166,0.16); }
    .ticket-status.on_hold, .ticket-status.on-hold { border-color:rgba(148,163,184,0.55); color:#cbd5e1; background:rgba(148,163,184,0.14); }
    .ticket-status.r_and_d, .ticket-status.r-and-d, .ticket-status.sent, .ticket-status.reopened { border-color:rgba(167,139,250,0.65); color:#ddd6fe; background:rgba(167,139,250,0.18); }
    .ticket-status.planned, .ticket-status.dev_testing, .ticket-status.dev-testing { border-color:rgba(129,140,248,0.62); color:#c7d2fe; background:rgba(129,140,248,0.14); }
    .ticket-status.issued, .ticket-status.invoice, .ticket-status.proforma { border-color:rgba(56,189,248,0.55); color:#bae6fd; background:rgba(56,189,248,0.16); }
    .ticket-status.overdue, .ticket-status.high, .ticket-status.fixed_waiting_release, .ticket-status.fixed-waiting-release { border-color:rgba(245,158,11,0.55); color:#fde68a; background:rgba(245,158,11,0.16); }
    .ticket-status.accepted, .ticket-status.paid, .ticket-status.resolved, .ticket-status.released, .ticket-status.fixed, .ticket-status.verified { border-color:rgba(74,222,128,0.60); color:#bbf7d0; background:rgba(74,222,128,0.15); }
    .ticket-status.rejected, .ticket-status.blocked, .ticket-status.cancelled, .ticket-status.credit_note, .ticket-status.credit-note { border-color:rgba(248,113,113,0.65); color:#fecaca; background:rgba(248,113,113,0.18); }
    .ticket-status.superseded { border-color:rgba(251,191,36,0.58); color:#fde68a; background:rgba(251,191,36,0.16); }
    .ticket-status.closed, .ticket-status.storno { border-color:rgba(100,116,139,0.55); color:#94a3b8; background:rgba(100,116,139,0.12); }
    .ticket-priority.low { border-color:rgba(74,222,128,0.55); color:#bbf7d0; background:rgba(74,222,128,0.14); }
    .ticket-priority.medium { border-color:rgba(148,163,184,0.55); color:#d5deea; background:rgba(148,163,184,0.14); }
    .ticket-priority.high { border-color:rgba(251,191,36,0.55); color:#fde68a; background:rgba(251,191,36,0.16); }
    .ticket-priority.urgent { border-color:rgba(248,113,113,0.60); color:#fecaca; background:rgba(248,113,113,0.18); }
    .badge-new {
      display:inline-block;
      min-width:18px;
      text-align:center;
      border-radius:999px;
      padding:2px 6px;
      background:rgba(255,80,80,0.16);
      border:1px solid rgba(255,80,80,0.55);
      color:#ffb3b3;
      font-weight:900;
      font-size:11px;
    }
    .unified-list-check {
      width:16px;
      height:16px;
      accent-color:var(--brand-accent-soft);
      cursor:pointer;
      vertical-align:middle;
    }
    .unified-bulk-bar {
      display:none;
      margin-top:8px;
      padding:8px;
      border:1px solid rgba(125,211,252,0.34);
      border-radius:10px;
      background:rgba(8,23,38,0.58);
      align-items:center;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
    }
    .unified-bulk-bar .mini { color:#9fb1c8; }
    .unified-bulk-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    body.topnav-enabled .topbar { display:none; }
    @media (max-width: 980px) {
      body { padding: 10px; }
      .wrap {
        max-width: none !important;
        width: 100% !important;
        padding: 0 2px !important;
        margin-top: 8px !important;
      }
      .head {
        grid-template-columns: 1fr !important;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 12px;
      }
      .head > :first-child {
        grid-column: 1;
        justify-self: start;
      }
      .head > :last-child {
        grid-column: 1;
        justify-self: start;
        text-align: left !important;
      }
      .info {
        text-align: left !important;
        font-size: 12px;
        line-height: 1.35;
      }
      .card {
        padding: 12px;
        margin-bottom: 12px;
      }
      .secTitle {
        flex-wrap: wrap;
        align-items: flex-start;
      }
      .grid,
      .row2,
      .row3,
      .grid2,
      .searchGrid,
      .map-tools,
      .supplier-row,
      .stock-tools,
      .sales-filter-grid,
      .period-range,
      .device-assign-top,
      .status-grid,
      .filters-grid,
      .filters-period,
      .cl-form-grid {
        grid-template-columns: 1fr !important;
      }
      .topbar {
        flex-wrap: wrap;
        align-items: flex-start;
      }
      .topbar .right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .ticket-head {
        flex-wrap: wrap;
        align-items: flex-start;
      }
      .tbl th,
      .tbl td {
        font-size: 11px;
        padding: 6px;
      }
    }
    @media (max-width: 560px) {
      .rowBtns {
        width: 100%;
        justify-content: stretch;
      }
      .rowBtns > * {
        flex: 1 1 auto;
      }
      .card .mini-btn,
      .card .btn-inline {
        width: 100%;
        text-align: center;
      }
    }
    .wrap { width: 100%; max-width: 680px; position: relative; z-index: 1; }
    .app-logo { display:block; height:48px; width:auto; max-width:min(260px, 48vw); object-fit:contain; }
    .head {
      display:grid;
      grid-template-columns:minmax(180px, 1fr) minmax(260px, auto) minmax(180px, 1fr);
      align-items:center;
      gap:12px;
      margin-bottom:30px;
      border-bottom:2px solid var(--brand-accent);
      padding-bottom:20px;
    }
    .head > :first-child { grid-column:1; justify-self:start; min-width:0; }
    .head > :last-child { grid-column:2; justify-self:center; text-align:center !important; min-width:0; }
    .info { text-align: right; font-size: 13px; color: #9aa8bf; line-height: 1.45; font-weight: 700; }
    .card { background: #141414; border: 1px solid #333; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; animation: card-breath 4s ease-in-out infinite; }
    .card:hover { transform: translateY(-4px); border-color: var(--brand-accent-soft); box-shadow: 0 0 35px rgba(var(--brand-accent-soft-rgb), 0.55), inset 0 0 20px rgba(var(--brand-accent-rgb), 0.3); animation: none; }
    @keyframes card-breath { 0%, 100% { border-color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.5); } 50% { border-color: rgba(var(--brand-accent-rgb),0.65); box-shadow: 0 4px 15px rgba(var(--brand-accent-rgb), 0.15); } }
    h2 { margin: 0 0 15px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #333; padding-bottom: 8px; }
    .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #222; align-items: center; }
    input { width: 100%; padding: 10px; margin-top: 5px; background: #000; border: 1px solid #444; color: #fff; border-radius: 4px; box-sizing: border-box; font-family: inherit; }
    input:focus { outline: none; border-color: var(--brand-accent); }
    select { width: 100%; padding: 10px; margin-top: 5px; background: #000; border: 1px solid #444; color: #fff; border-radius: 4px; box-sizing: border-box; font-family: inherit; }
    select:focus { outline: none; border-color: var(--brand-accent); }
    textarea { width: 100%; padding: 10px; margin-top: 5px; background: #000; border: 1px solid #444; color: #fff; border-radius: 4px; box-sizing: border-box; font-family: inherit; resize: vertical; }
    textarea:focus { outline: none; border-color: var(--brand-accent); }
    /* Dropdown list styling (Chromium/desktop): black options, selected option purple */
    select option { background: #000; color: #fff; }
    select option:checked, select option[selected] { background: var(--brand-accent); color: #fff; }
    select optgroup { background: #000; color: #aaa; }
    .btn { display: block; width: 100%; padding: 12px; margin-top: 20px; border: 1px solid var(--brand-accent); border-radius: 4px; font-weight: 700; cursor: pointer; color: var(--brand-accent); background: transparent; transition: all 0.2s ease; }
    .btn:hover { background: var(--brand-accent); color: #fff; box-shadow: 0 0 15px rgba(var(--brand-accent-rgb), 0.5); }
    .op-inp { font-size: 24px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; background: #000; border: 1px solid #22c55e; color: #22c55e; padding: 15px; border-radius: 4px; text-align: center; font-family: monospace; box-shadow: 0 0 15px rgba(34, 197, 94, 0.2); }
    .foot { text-align: center; font-size: 11px; color: #444; margin-top: 30px; }
    .mini-btn:hover,
    .tiny-btn:hover,
    .quick-link-btn:hover,
    .btn-inline:hover,
    .dp-btn:hover,
    .dp-nav:hover,
    .dp-ico:hover,
    .licexp-close:hover,
    .licexp-dp-btn:hover,
    .file-inp:hover::file-selector-button,
    .file-inp:hover::-webkit-file-upload-button {
      border-color: var(--brand-accent-soft) !important;
      box-shadow: 0 0 18px rgba(var(--brand-accent-soft-rgb), 0.25) !important;
    }
    .mini-btn.primary,
    .home-layout-btn.primary,
    .home-layout-btn:not(.success):not(.ghost):not(.warn),
    .home-widget-library-drag,
    .home-widget-handle {
      background: linear-gradient(180deg, rgba(var(--brand-accent-rgb),0.95), rgba(var(--brand-accent-dark-rgb),0.95)) !important;
      border-color: rgba(var(--brand-accent-soft-rgb),0.38) !important;
      color: #f5ecff !important;
    }
    .inp:focus,
    .txt:focus,
    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(var(--brand-accent-soft-rgb),0.60) !important;
      box-shadow: 0 0 18px rgba(var(--brand-accent-soft-rgb),0.18) !important;
    }
    .tbl .sel td,
    .cust-mobile-card.sel,
    .device-mobile-card.sel,
    .lic-mobile-card.sel,
    .dp-day.sel,
    .dp-day.dp-sel,
    .licexp-dp-day.sel {
      background: rgba(var(--brand-accent-rgb),0.24) !important;
      border-color: rgba(var(--brand-accent-soft-rgb),0.55) !important;
      color: #fff !important;
    }
    .tbl .sel td:first-child {
      box-shadow: inset 4px 0 0 rgba(var(--brand-accent-soft-rgb),0.85) !important;
    }
    .tbl .sel td {
      box-shadow: inset 0 0 0 1px rgba(var(--brand-accent-soft-rgb),0.22) !important;
    }
    #custListBody tr:hover td,
    #deviceListBody tr:hover td,
    #typeListBody tr:hover td,
    #licResultsBody tr:hover td,
    .licexp-list tbody tr:hover td,
    .device-mobile-card:hover,
    .cust-mobile-card:hover,
    .lic-mobile-card:hover,
    .doc-card:hover {
      background: rgba(var(--brand-accent-soft-rgb),0.10) !important;
      border-color: rgba(var(--brand-accent-soft-rgb),0.54) !important;
    }
    details.collapsible[open],
    .perm-card,
    .licexp-dialog,
    .ivd-sheet {
      border-color: rgba(var(--brand-accent-soft-rgb),0.24) !important;
      box-shadow: 0 24px 48px rgba(0,0,0,0.42), 0 0 0 1px rgba(var(--brand-accent-soft-rgb),0.16) inset !important;
    }
    details.collapsible[open] summary::after,
    .dp-ico,
    [data-company-display] {
      color: var(--brand-accent-soft) !important;
    }

    html.app-dialog-open { overflow: hidden; }
    .app-dialog {
      width: min(600px, calc(100vw - 24px));
      max-width: none;
      max-height: calc(100vh - 28px);
      max-height: calc(100dvh - 28px);
      margin: auto;
      padding: 0;
      border: 0;
      border-radius: 19px;
      overflow: visible;
      color: #edf3fc;
      background: transparent;
    }
    .app-dialog:not([open]) { display: none; }
    .app-dialog::backdrop {
      background: rgba(2,5,11,0.78);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }
    .app-dialog.app-dialog-fallback {
      position: fixed;
      inset: 0;
      z-index: 30000;
      width: 100%;
      height: 100%;
      max-height: none;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      background: rgba(2,5,11,0.78);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }
    .app-dialog-card {
      position: relative;
      width: 100%;
      max-height: calc(100vh - 28px);
      max-height: calc(100dvh - 28px);
      overflow: hidden;
      border: 1px solid rgba(var(--brand-accent-soft-rgb),0.32);
      border-radius: 19px;
      background:
        radial-gradient(circle at 12% 0%, rgba(var(--brand-accent-soft-rgb),0.17), transparent 34%),
        linear-gradient(165deg, rgba(var(--brand-accent-dark-rgb),0.98), rgba(7,10,18,0.995) 68%);
      box-shadow: 0 34px 92px rgba(0,0,0,0.62), 0 0 0 1px rgba(var(--brand-accent-soft-rgb),0.08) inset;
      animation: app-dialog-enter 0.2s cubic-bezier(.2,.78,.22,1) both;
    }
    .app-dialog-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 18px;
      border-bottom: 1px solid rgba(255,255,255,0.09);
    }
    .app-dialog-heading { min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
    .app-dialog-heading-copy { min-width: 0; }
    .app-dialog-symbol {
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(var(--brand-accent-soft-rgb),0.34);
      border-radius: 13px;
      color: var(--brand-accent-soft);
      background: rgba(var(--brand-accent-rgb),0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      font-size: 18px;
      font-weight: 950;
    }
    .app-dialog-title { color: #f3f7ff; font-size: 17px; line-height: 1.28; font-weight: 950; }
    .app-dialog-message {
      margin-top: 6px;
      color: rgba(var(--brand-accent-soft-rgb),0.88);
      font-size: 12px;
      line-height: 1.55;
      white-space: pre-line;
    }
    .app-dialog-close {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 10px;
      color: #e8eefc;
      background: rgba(255,255,255,0.06);
      font-size: 19px;
      line-height: 1;
      cursor: pointer;
    }
    .app-dialog-close:hover,
    .app-dialog-close:focus-visible {
      outline: none;
      border-color: rgba(var(--brand-accent-soft-rgb),0.65);
      box-shadow: 0 0 16px rgba(var(--brand-accent-soft-rgb),0.20);
    }
    .app-dialog-body {
      position: relative;
      z-index: 1;
      max-height: min(55vh, 540px);
      max-height: min(55dvh, 540px);
      overflow: auto;
      padding: 16px 18px 4px;
    }
    .app-dialog-details { display: grid; gap: 8px; }
    .app-dialog-detail-row {
      display: grid;
      grid-template-columns: minmax(110px, 0.38fr) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 10px 11px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
      background: rgba(255,255,255,0.035);
    }
    .app-dialog-detail-row.without-label { grid-template-columns: 1fr; }
    .app-dialog-detail-label {
      color: rgba(var(--brand-accent-soft-rgb),0.74);
      font-size: 10px;
      line-height: 1.4;
      font-weight: 900;
      letter-spacing: 0.55px;
      text-transform: uppercase;
    }
    .app-dialog-detail-value {
      min-width: 0;
      color: #e5edf8;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 750;
      white-space: pre-line;
      overflow-wrap: anywhere;
    }
    .app-dialog-note {
      margin-top: 10px;
      padding: 11px 12px;
      border: 1px solid rgba(var(--brand-accent-soft-rgb),0.23);
      border-radius: 12px;
      color: #c9d6e7;
      background: rgba(var(--brand-accent-rgb),0.10);
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-line;
    }
    .app-dialog-note[data-tone='warning'] {
      border-color: rgba(255,204,0,0.32);
      color: #ffe89a;
      background: rgba(255,204,0,0.08);
    }
    .app-dialog-note[data-tone='danger'] {
      border-color: rgba(255,97,126,0.34);
      color: #ffd5dd;
      background: rgba(91,20,38,0.28);
    }
    .app-dialog-actions {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: flex-end;
      gap: 9px;
      flex-wrap: wrap;
      padding: 16px 18px 18px;
    }
    .app-dialog-button {
      width: auto;
      min-width: 104px;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 9px 14px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 10px;
      color: #e8eefc;
      background: rgba(255,255,255,0.07);
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }
    .app-dialog-button:hover,
    .app-dialog-button:focus-visible {
      outline: none;
      transform: translateY(-1px);
      border-color: rgba(var(--brand-accent-soft-rgb),0.65);
      box-shadow: 0 0 17px rgba(var(--brand-accent-soft-rgb),0.18);
    }
    .app-dialog-button.primary {
      border-color: rgba(var(--brand-accent-soft-rgb),0.46);
      color: #f8f4ff;
      background: linear-gradient(180deg, rgba(var(--brand-accent-rgb),0.96), rgba(var(--brand-accent-dark-rgb),0.98));
    }
    .app-dialog-button.danger {
      border-color: rgba(255,97,126,0.48);
      color: #fff1f4;
      background: linear-gradient(180deg, rgba(144,31,57,0.94), rgba(78,16,34,0.98));
    }
    .app-dialog[data-tone='warning'] .app-dialog-symbol {
      border-color: rgba(255,204,0,0.38);
      color: #ffe167;
      background: rgba(255,204,0,0.10);
    }
    .app-dialog[data-tone='danger'] .app-dialog-symbol {
      border-color: rgba(255,97,126,0.40);
      color: #ffafbe;
      background: rgba(255,79,112,0.11);
    }
    .app-dialog[data-tone='success'] .app-dialog-symbol {
      border-color: rgba(83,221,145,0.38);
      color: #91f0bb;
      background: rgba(62,194,122,0.10);
    }
    @keyframes app-dialog-enter {
      from { opacity: 0; transform: translateY(9px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (max-width: 560px) {
      .app-dialog-head { padding: 15px; }
      .app-dialog-body { padding: 14px 15px 3px; }
      .app-dialog-actions { padding: 14px 15px 15px; }
      .app-dialog-detail-row { grid-template-columns: 1fr; gap: 4px; }
      .app-dialog-actions .app-dialog-button { flex: 1 1 130px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .app-dialog-card { animation: none; }
      .app-dialog-button { transition: none; }
    }