/* =====================================================
   AUDIO ACCESS - MOBILE FIRST USER INTERFACE
   ===================================================== */

   :root {
    --access-bg: #f3f5f7;
    --access-surface: #ffffff;
    --access-surface-soft: #f8f9fa;
  
    --access-text: #17191c;
    --access-text-soft: #747980;
    --access-text-muted: #a0a5ab;
  
    --access-border: rgba(24, 28, 33, 0.08);
  
    --access-primary: #181a1d;
    --access-primary-soft: #2b2e32;
  
    --access-green: #23855b;
    --access-green-soft: #e9f5ef;
  
    --access-red: #bd4b4b;
    --access-red-soft: #faeeee;
  
    --access-warning: #ae7a27;
  
    --access-shadow:
      0 20px 55px rgba(30, 36, 43, 0.07);
  
    --access-card-shadow:
      0 12px 35px rgba(27, 32, 38, 0.06);
  }
  
  html {
    background: var(--access-bg);
  }
  
  body.app-body {
    margin: 0;
    padding: 0;
  
    min-height: 100vh;
    min-height: 100dvh;
  
    background:
      var(--access-bg);
  
    color:
      var(--access-text);
  
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
  
    -webkit-font-smoothing:
      antialiased;
  
    text-rendering:
      optimizeLegibility;
  }
  
  body.sheet-open {
    overflow: hidden;
  }
  
  .app-background {
    position: fixed;
  
    inset: 0;
  
    z-index: 0;
  
    pointer-events: none;
  
    background:
      radial-gradient(
        circle at 15% 0%,
        rgba(255, 255, 255, 0.95),
        transparent 36%
      ),
      radial-gradient(
        circle at 100% 20%,
        rgba(222, 229, 235, 0.7),
        transparent 30%
      );
  }
  
  .access-app {
    position: relative;
  
    z-index: 1;
  
    width: 100%;
    max-width: 1180px;
  
    min-height: 100vh;
    min-height: 100dvh;
  
    margin: 0 auto;
  
    padding:
      max(20px, env(safe-area-inset-top))
      20px
      max(24px, env(safe-area-inset-bottom));
  }
  
  /* =====================================================
     HEADER
     ===================================================== */
  
  .access-header {
    display: flex;
  
    align-items: center;
    justify-content: space-between;
  
    padding-bottom: 34px;
  }
  
  .brand-area {
    display: flex;
  
    align-items: center;
  
    gap: 11px;
  }
  
  .brand-logo {
    display: flex;
  
    width: 43px;
    height: 43px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 14px;
  
    background:
      var(--access-primary);
  
    color:
      #ffffff;
  
    box-shadow:
      0 8px 20px rgba(24, 26, 29, 0.16);
  }
  
  .brand-logo svg {
    width: 22px;
    height: 22px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.8;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .brand-name {
    color:
      var(--access-text);
  
    font-size: 17px;
    font-weight: 720;
  
    letter-spacing: -0.4px;
  }
  
  .brand-subtitle {
    margin-top: 1px;
  
    color:
      var(--access-text-soft);
  
    font-size: 12px;
  
    letter-spacing: 0.3px;
  }
  
  .header-actions {
    display: flex;
  
    align-items: center;
  
    gap: 9px;
  }
  
  .icon-action,
  .avatar-button {
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    border: 1px solid
      var(--access-border);
  
    background:
      rgba(255, 255, 255, 0.74);
  
    backdrop-filter:
      blur(14px);
  
    -webkit-backdrop-filter:
      blur(14px);
  
    cursor: pointer;
  }
  
  .icon-action {
    width: 43px;
    height: 43px;
  
    border-radius: 14px;
  
    color:
      var(--access-text);
  }
  
  .icon-action svg {
    width: 20px;
    height: 20px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.7;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .avatar-button {
    width: 43px;
    height: 43px;
  
    border-radius: 50%;
  
    color:
      #ffffff;
  
    background:
      linear-gradient(
        145deg,
        #303338,
        #121315
      );
  
    font-size: 15px;
    font-weight: 700;
  
    box-shadow:
      0 8px 20px rgba(30, 32, 36, 0.15);
  }
  
  /* =====================================================
     WELCOME
     ===================================================== */
  
  .welcome-section {
    padding:
      2px 2px 28px;
  }
  
  .welcome-time {
    margin:
      0 0 6px;
  
    color:
      var(--access-text-soft);
  
    font-size: 14px;
    font-weight: 500;
  }
  
  .welcome-section h1 {
    margin: 0;
  
    color:
      var(--access-text);
  
    font-size:
      clamp(31px, 8vw, 48px);
  
    font-weight: 750;
  
    letter-spacing:
      -1.8px;
  
    line-height: 1.08;
  }
  
  .user-context {
    display: flex;
  
    margin-top: 16px;
  
    align-items: center;
  
    gap: 10px;
  }
  
  .block-badge {
    padding:
      7px 11px;
  
    border-radius:
      999px;
  
    background:
      var(--access-primary);
  
    color:
      #ffffff;
  
    font-size: 12px;
    font-weight: 650;
  }
  
  .context-separator {
    width: 4px;
    height: 4px;
  
    border-radius: 50%;
  
    background:
      var(--access-text-muted);
  }
  
  .context-text {
    color:
      var(--access-text-soft);
  
    font-size: 13px;
  }
  
  /* =====================================================
     SYSTEM STATUS
     ===================================================== */
  
  .system-status-card {
    display: grid;
  
    margin-bottom: 35px;
  
    padding:
      16px 17px;
  
    grid-template-columns:
      auto 1fr auto;
  
    align-items: center;
  
    gap: 13px;
  
    border:
      1px solid
      rgba(35, 133, 91, 0.12);
  
    border-radius: 18px;
  
    background:
      rgba(255, 255, 255, 0.78);
  
    backdrop-filter:
      blur(14px);
  
    -webkit-backdrop-filter:
      blur(14px);
  
    box-shadow:
      var(--access-card-shadow);
  }
  
  .status-indicator {
    display: flex;
  
    width: 37px;
    height: 37px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 12px;
  
    background:
      var(--access-green-soft);
  }
  
  .status-pulse {
    width: 10px;
    height: 10px;
  
    border-radius: 50%;
  
    background:
      var(--access-green);
  
    box-shadow:
      0 0 0 5px
      rgba(35, 133, 91, 0.1);
  
    animation:
      statusPulse 2.2s
      ease-out infinite;
  }
  
  @keyframes statusPulse {
    0% {
      box-shadow:
        0 0 0 0
        rgba(35, 133, 91, 0.22);
    }
  
    70% {
      box-shadow:
        0 0 0 9px
        rgba(35, 133, 91, 0);
    }
  
    100% {
      box-shadow:
        0 0 0 0
        rgba(35, 133, 91, 0);
    }
  }
  
  .system-status-copy {
    display: flex;
  
    min-width: 0;
  
    flex-direction: column;
  
    gap: 3px;
  }
  
  .system-status-copy strong {
    color:
      var(--access-text);
  
    font-size: 14px;
    font-weight: 650;
  }
  
  .system-status-copy span {
    overflow: hidden;
  
    color:
      var(--access-text-soft);
  
    font-size: 12px;
  
    text-overflow:
      ellipsis;
  
    white-space: nowrap;
  }
  
  .status-check {
    display: flex;
  
    width: 29px;
    height: 29px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 50%;
  
    background:
      var(--access-green-soft);
  
    color:
      var(--access-green);
  }
  
  .status-check svg {
    width: 15px;
    height: 15px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 2.2;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  /* =====================================================
     DOOR SECTION
     ===================================================== */
  
  .doors-section {
    padding-bottom: 35px;
  }
  
  .section-heading {
    display: flex;
  
    margin-bottom: 17px;
  
    padding:
      0 2px;
  
    align-items: flex-end;
    justify-content: space-between;
  }
  
  .section-eyebrow {
    display: block;
  
    margin-bottom: 4px;
  
    color:
      var(--access-text-muted);
  
    font-size: 10px;
    font-weight: 700;
  
    letter-spacing: 1.5px;
  }
  
  .section-heading h2 {
    margin: 0;
  
    color:
      var(--access-text);
  
    font-size: 24px;
    font-weight: 730;
  
    letter-spacing: -0.8px;
  }
  
  .door-count {
    color:
      var(--access-text-soft);
  
    font-size: 12px;
  }
  
  .door-grid {
    display: grid;
  
    grid-template-columns:
      1fr;
  
    gap: 14px;
  }
  
  /* =====================================================
     DOOR CARD
     ===================================================== */
  
  .access-door-card {
    position: relative;
  
    overflow: hidden;
  
    padding: 20px;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 24px;
  
    background:
      rgba(255, 255, 255, 0.9);
  
    box-shadow:
      var(--access-card-shadow);
  
    isolation: isolate;
  }
  
  .access-door-card::before {
    position: absolute;
  
    width: 175px;
    height: 175px;
  
    top: -95px;
    right: -80px;
  
    z-index: -1;
  
    border-radius: 50%;
  
    content: "";
  }
  
  .block-door-card::before {
    background:
      rgba(76, 91, 107, 0.075);
  }
  
  .garden-door-card::before {
    background:
      rgba(35, 133, 91, 0.075);
  }
  
  .door-card-top {
    display: flex;
  
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .door-icon-shell {
    display: flex;
  
    width: 50px;
    height: 50px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 17px;
  }
  
  .block-door-card
  .door-icon-shell {
    background:
      #edf0f3;
  
    color:
      #485665;
  }
  
  .garden-door-card
  .door-icon-shell {
    background:
      var(--access-green-soft);
  
    color:
      var(--access-green);
  }
  
  .door-icon-shell svg {
    width: 25px;
    height: 25px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.7;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .door-available {
    padding:
      6px 9px;
  
    border:
      1px solid
      rgba(35, 133, 91, 0.12);
  
    border-radius:
      999px;
  
    background:
      var(--access-green-soft);
  
    color:
      var(--access-green);
  
    font-size: 10px;
    font-weight: 700;
  }
  
  .door-card-content {
    padding:
      28px 0 24px;
  }
  
  .door-card-content h3 {
    margin:
      0 0 7px;
  
    color:
      var(--access-text);
  
    font-size: 22px;
    font-weight: 720;
  
    letter-spacing: -0.7px;
  }
  
  .door-card-content p {
    margin: 0;
  
    color:
      var(--access-text-soft);
  
    font-size: 13px;
  }
  
  .open-door-button {
    display: grid;
  
    width: 100%;
  
    min-height: 54px;
  
    padding:
      0 17px;
  
    grid-template-columns:
      1fr auto;
  
    align-items: center;
  
    border: 0;
  
    border-radius: 16px;
  
    background:
      var(--access-primary);
  
    color:
      #ffffff;
  
    cursor: pointer;
  
    transition:
      transform 0.16s ease,
      background 0.2s ease,
      opacity 0.2s ease;
  
    -webkit-tap-highlight-color:
      transparent;
  }
  
  .open-door-button:active {
    transform:
      scale(0.985);
  }
  
  .open-door-button:disabled {
    cursor: wait;
  }
  
  .door-button-text {
    justify-self: start;
  
    font-size: 14px;
    font-weight: 650;
  }
  
  .door-button-arrow {
    display: flex;
  
    width: 30px;
    height: 30px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 10px;
  
    background:
      rgba(255, 255, 255, 0.1);
  }
  
  .door-button-arrow svg {
    width: 16px;
    height: 16px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 2;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .door-button-loader {
    display: none;
  
    width: 20px;
    height: 20px;
  
    justify-self: end;
  
    border:
      2px solid
      rgba(255, 255, 255, 0.28);
  
    border-top-color:
      #ffffff;
  
    border-radius: 50%;
  
    animation:
      accessSpin 0.75s
      linear infinite;
  }
  
  @keyframes accessSpin {
    to {
      transform:
        rotate(360deg);
    }
  }
  
  .open-door-button.loading
  .door-button-text {
    opacity: 0.65;
  }
  
  .open-door-button.loading
  .door-button-arrow {
    display: none;
  }
  
  .open-door-button.loading
  .door-button-loader {
    display: block;
  }
  
  .open-door-button.success {
    background:
      var(--access-green);
  }
  
  .open-door-button.error {
    background:
      var(--access-red);
  }
  
  /* =====================================================
     EMPTY
     ===================================================== */
  
  .empty-access-card {
    display: flex;
  
    padding:
      42px 25px;
  
    align-items: center;
  
    flex-direction: column;
  
    border:
      1px dashed
      rgba(24, 28, 33, 0.13);
  
    border-radius: 24px;
  
    background:
      rgba(255, 255, 255, 0.6);
  
    text-align: center;
  }
  
  .empty-access-icon {
    display: flex;
  
    width: 52px;
    height: 52px;
  
    margin-bottom: 17px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 17px;
  
    background:
      var(--access-red-soft);
  
    color:
      var(--access-red);
  }
  
  .empty-access-icon svg {
    width: 25px;
    height: 25px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.8;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .empty-access-card strong {
    margin-bottom: 7px;
  
    font-size: 16px;
  }
  
  .empty-access-card span {
    max-width: 280px;
  
    color:
      var(--access-text-soft);
  
    font-size: 13px;
  
    line-height: 1.5;
  }
  
  /* =====================================================
     TOAST
     ===================================================== */
  
  .action-toast {
    position: fixed;
  
    left: 50%;
    bottom:
      max(
        22px,
        env(safe-area-inset-bottom)
      );
  
    z-index: 100;
  
    display: flex;
  
    width:
      calc(100% - 40px);
  
    max-width: 460px;
  
    min-height: 58px;
  
    padding:
      11px 15px;
  
    align-items: center;
  
    gap: 11px;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 17px;
  
    background:
      rgba(28, 30, 33, 0.95);
  
    color:
      #ffffff;
  
    box-shadow:
      0 20px 55px
      rgba(0, 0, 0, 0.22);
  
    opacity: 0;
  
    pointer-events: none;
  
    transform:
      translate(-50%, 24px);
  
    transition:
      opacity 0.22s ease,
      transform 0.22s ease;
  
    backdrop-filter:
      blur(18px);
  
    -webkit-backdrop-filter:
      blur(18px);
  }
  
  .action-toast.show {
    opacity: 1;
  
    transform:
      translate(-50%, 0);
  }
  
  .toast-icon {
    display: flex;
  
    width: 34px;
    height: 34px;
  
    flex-shrink: 0;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 11px;
  }
  
  .action-toast.success
  .toast-icon {
    background:
      rgba(74, 202, 142, 0.15);
  
    color:
      #6adea7;
  }
  
  .action-toast.error
  .toast-icon {
    background:
      rgba(236, 100, 100, 0.15);
  
    color:
      #ef8181;
  }
  
  .toast-icon svg {
    width: 18px;
    height: 18px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 2;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  #toastMessage {
    font-size: 13px;
  
    line-height: 1.4;
  }
  
  /* =====================================================
     FOOTER
     ===================================================== */
  
  .access-footer {
    display: flex;
  
    padding:
      12px 0 8px;
  
    align-items: center;
    justify-content: center;
  
    gap: 9px;
  
    color:
      var(--access-text-muted);
  
    font-size: 11px;
  }
  
  .footer-dot {
    width: 3px;
    height: 3px;
  
    border-radius: 50%;
  
    background:
      var(--access-text-muted);
  }
  
  /* =====================================================
     BOTTOM SHEET
     ===================================================== */
  
  .sheet-overlay {
    position: fixed;
  
    inset: 0;
  
    z-index: 200;
  
    background:
      rgba(12, 14, 17, 0.32);
  
    opacity: 0;
  
    transition:
      opacity 0.25s ease;
  
    backdrop-filter:
      blur(3px);
  
    -webkit-backdrop-filter:
      blur(3px);
  }
  
  .sheet-overlay.open {
    opacity: 1;
  }
  
  .bottom-sheet {
    position: absolute;
  
    left: 0;
    right: 0;
    bottom: 0;
  
    width: 100%;
    max-width: 520px;
  
    margin: 0 auto;
  
    padding:
      10px 22px
      max(
        24px,
        env(safe-area-inset-bottom)
      );
  
    border-radius:
      28px 28px 0 0;
  
    background:
      #ffffff;
  
    box-shadow:
      0 -20px 60px
      rgba(0, 0, 0, 0.12);
  
    text-align: center;
  
    transform:
      translateY(100%);
  
    transition:
      transform 0.28s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );
  }
  
  .sheet-overlay.open
  .bottom-sheet {
    transform:
      translateY(0);
  }
  
  .sheet-handle {
    width: 40px;
    height: 4px;
  
    margin:
      0 auto 23px;
  
    border-radius: 99px;
  
    background:
      #dedfe1;
  }
  
  .sheet-avatar {
    display: flex;
  
    width: 65px;
    height: 65px;
  
    margin:
      0 auto 14px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 50%;
  
    background:
      var(--access-primary);
  
    color:
      #ffffff;
  
    font-size: 22px;
    font-weight: 700;
  }
  
  .bottom-sheet h3 {
    margin:
      0 0 5px;
  
    color:
      var(--access-text);
  
    font-size: 21px;
  }
  
  .bottom-sheet p {
    margin:
      0 0 25px;
  
    color:
      var(--access-text-soft);
  
    font-size: 13px;
  }
  
  .sheet-danger-button,
  .sheet-cancel-button {
    width: 100%;
  
    min-height: 54px;
  
    border: 0;
  
    border-radius: 16px;
  
    font-size: 14px;
    font-weight: 650;
  
    cursor: pointer;
  }
  
  .sheet-danger-button {
    margin-bottom: 9px;
  
    background:
      var(--access-red-soft);
  
    color:
      var(--access-red);
  }
  
  .sheet-cancel-button {
    background:
      var(--access-surface-soft);
  
    color:
      var(--access-text);
  }
  
  /* =====================================================
     TABLET / DESKTOP
     ===================================================== */
  
  @media (min-width: 700px) {
    .access-app {
      padding:
        34px 42px 35px;
    }
  
    .access-header {
      padding-bottom: 50px;
    }
  
    .welcome-section {
      padding-bottom: 35px;
    }
  
    .system-status-card {
      max-width: 620px;
    }
  
    .door-grid {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
  
      gap: 18px;
    }
  
    .access-door-card {
      padding: 24px;
  
      border-radius: 27px;
    }
  
    .door-card-content {
      padding:
        42px 0 31px;
    }
  
    .open-door-button:hover {
      background:
        var(--access-primary-soft);
    }
  }
  
  @media (min-width: 1000px) {
    .access-app {
      padding-top: 44px;
    }
  
    .welcome-section {
      max-width: 740px;
    }
  
    .doors-section {
      margin-top: 5px;
    }
  
    .access-door-card {
      min-height: 340px;
    }
  
    .door-card-content {
      flex: 1;
    }
  }
  
  /* =====================================================
     REDUCED MOTION
     ===================================================== */
  
  @media (
    prefers-reduced-motion: reduce
  ) {
    *,
    *::before,
    *::after {
      animation-duration:
        0.01ms !important;
  
      animation-iteration-count:
        1 !important;
  
      scroll-behavior:
        auto !important;
  
      transition-duration:
        0.01ms !important;
    }
  }
  /* =====================================================
     AUDIO ACCESS - MODERN LOGIN
     ===================================================== */
  
  body.login-app-body {
    margin: 0;
    padding: 0;
  
    min-height: 100vh;
    min-height: 100dvh;
  
    overflow-x: hidden;
  
    background: #f3f5f7;
  
    color: #17191c;
  
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
  
    -webkit-font-smoothing:
      antialiased;
  
    text-rendering:
      optimizeLegibility;
  }
  
  .login-background {
    position: fixed;
  
    inset: 0;
  
    overflow: hidden;
  
    pointer-events: none;
  }
  
  .login-background::before {
    position: absolute;
  
    inset: 0;
  
    content: "";
  
    background:
      radial-gradient(
        circle at 5% 5%,
        rgba(255, 255, 255, 1),
        transparent 38%
      ),
      radial-gradient(
        circle at 95% 25%,
        rgba(216, 225, 232, 0.75),
        transparent 34%
      );
  }
  
  .login-glow {
    position: absolute;
  
    border-radius: 50%;
  
    filter: blur(1px);
  }
  
  .login-glow-one {
    width: 320px;
    height: 320px;
  
    top: -190px;
    right: -160px;
  
    background:
      rgba(67, 85, 104, 0.07);
  }
  
  .login-glow-two {
    width: 250px;
    height: 250px;
  
    left: -170px;
    bottom: -130px;
  
    background:
      rgba(35, 133, 91, 0.06);
  }
  
  .login-app {
    position: relative;
  
    z-index: 1;
  
    display: flex;
  
    width: 100%;
  
    min-height: 100vh;
    min-height: 100dvh;
  
    padding:
      max(24px, env(safe-area-inset-top))
      20px
      max(22px, env(safe-area-inset-bottom));
  
    align-items: center;
    justify-content: center;
  }
  
  .login-shell {
    width: 100%;
    max-width: 430px;
  }
  
  .login-brand {
    display: flex;
  
    margin-bottom: 32px;
  
    align-items: center;
  
    gap: 12px;
  }
  
  .login-brand-logo {
    display: flex;
  
    width: 48px;
    height: 48px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 16px;
  
    background:
      #181a1d;
  
    color:
      #ffffff;
  
    box-shadow:
      0 12px 30px
      rgba(24, 26, 29, 0.17);
  }
  
  .login-brand-logo svg {
    width: 24px;
    height: 24px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.8;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .login-brand-name {
    color: #17191c;
  
    font-size: 19px;
    font-weight: 750;
  
    letter-spacing: -0.5px;
  }
  
  .login-brand-subtitle {
    margin-top: 1px;
  
    color: #747980;
  
    font-size: 12px;
  
    letter-spacing: 0.5px;
  }
  
  .modern-login-card {
    padding: 27px 22px 24px;
  
    border:
      1px solid
      rgba(24, 28, 33, 0.08);
  
    border-radius: 28px;
  
    background:
      rgba(255, 255, 255, 0.88);
  
    box-shadow:
      0 25px 70px
      rgba(31, 37, 44, 0.09);
  
    backdrop-filter:
      blur(18px);
  
    -webkit-backdrop-filter:
      blur(18px);
  }
  
  .login-heading {
    margin-bottom: 29px;
  }
  
  .login-eyebrow {
    display: block;
  
    margin-bottom: 10px;
  
    color: #989da3;
  
    font-size: 10px;
    font-weight: 750;
  
    letter-spacing: 1.7px;
  }
  
  .login-heading h1 {
    margin:
      0 0 10px;
  
    color: #17191c;
  
    font-size:
      clamp(30px, 9vw, 40px);
  
    font-weight: 760;
  
    letter-spacing: -1.6px;
  
    line-height: 1.05;
  }
  
  .login-heading p {
    margin: 0;
  
    max-width: 330px;
  
    color: #747980;
  
    font-size: 13px;
  
    line-height: 1.6;
  }
  
  .modern-login-form {
    display: flex;
  
    flex-direction: column;
  
    gap: 19px;
  }
  
  .modern-field {
    display: flex;
  
    flex-direction: column;
  
    gap: 8px;
  }
  
  .modern-field label {
    margin: 0;
  
    color: #45494e;
  
    font-size: 12px;
    font-weight: 650;
  }
  
  .input-shell {
    position: relative;
  
    display: flex;
  
    min-height: 56px;
  
    align-items: center;
  
    border:
      1px solid
      rgba(24, 28, 33, 0.09);
  
    border-radius: 17px;
  
    background:
      #f8f9fa;
  
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      background 0.2s ease;
  }
  
  .input-shell:focus-within {
    border-color:
      rgba(24, 26, 29, 0.32);
  
    background:
      #ffffff;
  
    box-shadow:
      0 0 0 4px
      rgba(24, 26, 29, 0.05);
  }
  
  .input-icon {
    display: flex;
  
    width: 52px;
  
    flex-shrink: 0;
  
    align-items: center;
    justify-content: center;
  
    color: #858a90;
  }
  
  .input-icon svg {
    width: 20px;
    height: 20px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.7;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .input-shell input {
    width: 100%;
  
    min-width: 0;
  
    padding:
      0 14px 0 0;
  
    border: 0;
  
    border-radius: 0;
  
    background:
      transparent;
  
    color: #17191c;
  
    font-size: 16px;
  
    outline: none;
  
    box-shadow: none;
  }
  
  .input-shell input::placeholder {
    color: #abb0b5;
  }
  
  .password-toggle {
    display: flex;
  
    width: 52px;
    height: 54px;
  
    flex-shrink: 0;
  
    align-items: center;
    justify-content: center;
  
    border: 0;
  
    background:
      transparent;
  
    color: #858a90;
  
    cursor: pointer;
  
    -webkit-tap-highlight-color:
      transparent;
  }
  
  .password-toggle svg {
    width: 20px;
    height: 20px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.7;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .modern-login-button {
    display: grid;
  
    width: 100%;
  
    min-height: 58px;
  
    margin-top: 5px;
  
    padding:
      0 17px;
  
    grid-template-columns:
      1fr auto;
  
    align-items: center;
  
    border: 0;
  
    border-radius: 18px;
  
    background:
      #181a1d;
  
    color:
      #ffffff;
  
    cursor: pointer;
  
    box-shadow:
      0 14px 30px
      rgba(24, 26, 29, 0.17);
  
    transition:
      transform 0.16s ease,
      background 0.2s ease,
      opacity 0.2s ease;
  
    -webkit-tap-highlight-color:
      transparent;
  }
  
  .modern-login-button:active {
    transform:
      scale(0.985);
  }
  
  .modern-login-button:disabled {
    cursor: wait;
  }
  
  .login-button-text {
    justify-self: start;
  
    font-size: 14px;
    font-weight: 680;
  }
  
  .login-button-arrow {
    display: flex;
  
    width: 32px;
    height: 32px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 11px;
  
    background:
      rgba(255, 255, 255, 0.1);
  }
  
  .login-button-arrow svg {
    width: 17px;
    height: 17px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 2;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .login-button-loader {
    display: none;
  
    width: 20px;
    height: 20px;
  
    justify-self: end;
  
    border:
      2px solid
      rgba(255, 255, 255, 0.25);
  
    border-top-color:
      #ffffff;
  
    border-radius: 50%;
  
    animation:
      loginSpin 0.7s
      linear infinite;
  }
  
  @keyframes loginSpin {
    to {
      transform:
        rotate(360deg);
    }
  }
  
  .modern-login-button.loading
  .login-button-arrow {
    display: none;
  }
  
  .modern-login-button.loading
  .login-button-loader {
    display: block;
  }
  
  .modern-login-button.loading
  .login-button-text {
    opacity: 0.65;
  }
  
  .modern-login-button.success {
    background: #23855b;
  }
  
  .modern-login-button.error {
    background: #bd4b4b;
  }
  
  .login-message {
    display: none;
  
    min-height: 44px;
  
    margin: -3px 0 0;
  
    padding:
      12px 14px;
  
    align-items: center;
  
    border-radius: 14px;
  
    font-size: 12px;
  
    line-height: 1.45;
  
    text-align: left;
  }
  
  .login-message.show {
    display: flex;
  }
  
  .login-message.error {
    border:
      1px solid
      rgba(189, 75, 75, 0.12);
  
    background:
      #faeeee;
  
    color:
      #a84040;
  }
  
  .login-message.success {
    border:
      1px solid
      rgba(35, 133, 91, 0.12);
  
    background:
      #e9f5ef;
  
    color:
      #20734f;
  }
  
  .login-footer {
    padding:
      25px 5px 0;
  }
  
  .login-security {
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    gap: 8px;
  
    color: #747980;
  
    font-size: 11px;
  }
  
  .login-security-icon {
    display: flex;
  
    width: 25px;
    height: 25px;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 8px;
  
    background:
      rgba(255, 255, 255, 0.72);
  
    color: #687078;
  }
  
  .login-security-icon svg {
    width: 14px;
    height: 14px;
  
    fill: none;
  
    stroke: currentColor;
  
    stroke-width: 1.8;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .login-footer-brand {
    display: flex;
  
    margin-top: 18px;
  
    align-items: center;
    justify-content: center;
  
    gap: 9px;
  
    color: #a0a5ab;
  
    font-size: 10px;
  }
  
  @media (min-width: 700px) {
    .login-app {
      padding: 40px;
    }
  
    .login-shell {
      max-width: 460px;
    }
  
    .modern-login-card {
      padding:
        38px 36px 34px;
    }
  
    .login-brand {
      margin-bottom: 38px;
    }
  
    .modern-login-button:hover {
      background: #2b2e32;
    }
  }
  
  @media (
    max-height: 720px
  ) and (
    max-width: 699px
  ) {
    .login-app {
      align-items: flex-start;
    }
  
    .login-brand {
      margin-bottom: 22px;
    }
  
    .modern-login-card {
      padding-top: 23px;
    }
  
    .login-heading {
      margin-bottom: 23px;
    }
  
    .login-footer {
      padding-top: 18px;
    }
  }
  /* =====================================================
     AUDIO ACCESS - ADMIN PANEL
     Mobile-first, responsive, same visual language
     ===================================================== */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
  
    min-height: 100vh;
    min-height: 100dvh;
  
    background:
      #f3f5f7;
  
    color:
      #17191c;
  
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
  
    -webkit-font-smoothing:
      antialiased;
  
    text-rendering:
      optimizeLegibility;
  }
  
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  
  button {
    -webkit-tap-highlight-color:
      transparent;
  }
  
  [hidden] {
    display: none !important;
  }
  
  /* =====================================================
     ADMIN LAYOUT
     ===================================================== */
  
  .admin-container {
    position: relative;
  
    width: 100%;
    max-width: 1180px;
  
    min-height: 100vh;
    min-height: 100dvh;
  
    margin: 0 auto;
  
    padding:
      max(20px, env(safe-area-inset-top))
      16px
      max(28px, env(safe-area-inset-bottom));
  
    color:
      var(--access-text);
  
    isolation: isolate;
  }
  
  .admin-container::before {
    position: fixed;
  
    inset: 0;
  
    z-index: -2;
  
    content: "";
  
    pointer-events: none;
  
    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(255, 255, 255, 0.98),
        transparent 35%
      ),
      radial-gradient(
        circle at 100% 20%,
        rgba(219, 228, 235, 0.78),
        transparent 32%
      ),
      var(--access-bg);
  }
  
  .admin-container::after {
    position: fixed;
  
    width: 300px;
    height: 300px;
  
    top: -190px;
    right: -150px;
  
    z-index: -1;
  
    border-radius: 50%;
  
    content: "";
  
    pointer-events: none;
  
    background:
      rgba(52, 70, 88, 0.06);
  }
  
  /* =====================================================
     ADMIN HEADER
     ===================================================== */
  
  .admin-container .topbar {
    display: flex;
  
    margin-bottom: 24px;
  
    padding:
      4px 2px 0;
  
    align-items: center;
    justify-content: space-between;
  
    gap: 18px;
  }
  
  .admin-container .topbar > div {
    min-width: 0;
  }
  
  .admin-container .topbar h1 {
    margin:
      0 0 5px;
  
    color:
      var(--access-text);
  
    font-size:
      clamp(28px, 8vw, 42px);
  
    font-weight: 760;
  
    letter-spacing:
      -1.5px;
  
    line-height: 1.05;
  }
  
  .admin-container .topbar .subtitle {
    margin: 0;
  
    color:
      var(--access-text-soft);
  
    font-size: 13px;
  }
  
  .logout-button {
    display: inline-flex;
  
    min-height: 44px;
  
    padding:
      0 15px;
  
    flex-shrink: 0;
  
    align-items: center;
    justify-content: center;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 14px;
  
    background:
      rgba(255, 255, 255, 0.76);
  
    color:
      var(--access-text);
  
    box-shadow:
      0 8px 22px
      rgba(28, 34, 40, 0.05);
  
    cursor: pointer;
  
    backdrop-filter:
      blur(14px);
  
    -webkit-backdrop-filter:
      blur(14px);
  
    transition:
      transform 0.16s ease,
      background 0.2s ease,
      border-color 0.2s ease;
  }
  
  .logout-button:active {
    transform:
      scale(0.97);
  }
  
  /* =====================================================
     ADMIN TABS
     ===================================================== */
  
  .admin-tabs {
    display: grid;
  
    margin-bottom: 20px;
  
    padding: 5px;
  
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  
    gap: 5px;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 17px;
  
    background:
      rgba(255, 255, 255, 0.72);
  
    box-shadow:
      var(--access-card-shadow);
  
    backdrop-filter:
      blur(14px);
  
    -webkit-backdrop-filter:
      blur(14px);
  }
  
  .admin-tab {
    min-height: 45px;
  
    padding:
      0 14px;
  
    border: 0;
  
    border-radius: 12px;
  
    background:
      transparent;
  
    color:
      var(--access-text-soft);
  
    font-size: 13px;
    font-weight: 650;
  
    cursor: pointer;
  
    transition:
      color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.16s ease;
  }
  
  .admin-tab:active {
    transform:
      scale(0.98);
  }
  
  .admin-tab.active {
    background:
      var(--access-primary);
  
    color:
      #ffffff;
  
    box-shadow:
      0 8px 20px
      rgba(24, 26, 29, 0.15);
  }
  
  .admin-tab-content {
    min-width: 0;
  }
  
  /* =====================================================
     ADMIN STATS
     ===================================================== */
  
  .stats-grid {
    display: grid;
  
    margin-bottom: 16px;
  
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  
    gap: 10px;
  }
  
  .stat-card {
    display: flex;
  
    min-width: 0;
    min-height: 118px;
  
    padding: 17px;
  
    flex-direction: column;
    justify-content: space-between;
  
    overflow: hidden;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 20px;
  
    background:
      rgba(255, 255, 255, 0.88);
  
    box-shadow:
      var(--access-card-shadow);
  
    backdrop-filter:
      blur(12px);
  
    -webkit-backdrop-filter:
      blur(12px);
  }
  
  .stat-label {
    color:
      var(--access-text-soft);
  
    font-size: 12px;
    font-weight: 600;
  
    line-height: 1.35;
  }
  
  .stat-value {
    color:
      var(--access-text);
  
    font-size:
      clamp(30px, 10vw, 42px);
  
    font-weight: 760;
  
    letter-spacing:
      -1.4px;
  
    line-height: 1;
  }
  
  /* =====================================================
     ADMIN PANELS
     ===================================================== */
  
  .admin-container .panel {
    width: 100%;
  
    margin-bottom: 14px;
  
    padding: 19px;
  
    overflow: hidden;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 22px;
  
    background:
      rgba(255, 255, 255, 0.88);
  
    box-shadow:
      var(--access-card-shadow);
  
    backdrop-filter:
      blur(14px);
  
    -webkit-backdrop-filter:
      blur(14px);
  }
  
  .admin-container .panel h2 {
    margin:
      0 0 17px;
  
    color:
      var(--access-text);
  
    font-size: 19px;
    font-weight: 720;
  
    letter-spacing:
      -0.5px;
  }
  
  .section-title-row {
    display: flex;
  
    margin-bottom: 16px;
  
    align-items: center;
    justify-content: space-between;
  
    gap: 14px;
  }
  
  .section-title-row h2 {
    margin: 0 !important;
  }
  
  /* =====================================================
     ADMIN FORM
     ===================================================== */
  
  .admin-container label {
    display: block;
  
    margin:
      15px 0 7px;
  
    color:
      #4f545a;
  
    font-size: 12px;
    font-weight: 650;
  }
  
  .admin-container input,
  .admin-container select {
    width: 100%;
  
    min-height: 52px;
  
    padding:
      0 14px;
  
    border:
      1px solid
      rgba(24, 28, 33, 0.09);
  
    border-radius: 15px;
  
    background:
      #f8f9fa;
  
    color:
      var(--access-text);
  
    font-size: 16px;
  
    outline: none;
  
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      background 0.2s ease;
  }
  
  .admin-container input::placeholder {
    color:
      #abb0b5;
  }
  
  .admin-container input:focus,
  .admin-container select:focus {
    border-color:
      rgba(24, 26, 29, 0.3);
  
    background:
      #ffffff;
  
    box-shadow:
      0 0 0 4px
      rgba(24, 26, 29, 0.05);
  }
  
  .admin-container select {
    appearance: none;
  
    background-image:
      linear-gradient(
        45deg,
        transparent 50%,
        #777d84 50%
      ),
      linear-gradient(
        135deg,
        #777d84 50%,
        transparent 50%
      );
  
    background-position:
      calc(100% - 18px)
      calc(50% - 2px),
      calc(100% - 13px)
      calc(50% - 2px);
  
    background-size:
      5px 5px,
      5px 5px;
  
    background-repeat:
      no-repeat;
  
    padding-right:
      42px;
  }
  
  .primary-button {
    display: flex;
  
    width: 100%;
  
    min-height: 55px;
  
    margin-top: 21px;
  
    padding:
      0 17px;
  
    align-items: center;
    justify-content: center;
  
    border: 0;
  
    border-radius: 16px;
  
    background:
      var(--access-primary);
  
    color:
      #ffffff;
  
    font-size: 14px;
    font-weight: 680;
  
    box-shadow:
      0 13px 28px
      rgba(24, 26, 29, 0.15);
  
    cursor: pointer;
  
    transition:
      transform 0.16s ease,
      background 0.2s ease,
      opacity 0.2s ease;
  }
  
  .primary-button:active {
    transform:
      scale(0.985);
  }
  
  .primary-button:disabled {
    opacity: 0.55;
  
    cursor: wait;
  }
  
  .admin-container .message {
    min-height: 20px;
  
    margin-top: 13px;
  
    color:
      var(--access-text-soft);
  
    font-size: 12px;
  
    line-height: 1.45;
  
    text-align: center;
  }
  
  /* =====================================================
     DEVICE CARDS
     ===================================================== */
  
  .device-card {
    display: grid;
  
    padding:
      15px 0;
  
    grid-template-columns:
      minmax(0, 1fr) auto;
  
    align-items: center;
  
    gap: 16px;
  
    border-bottom:
      1px solid
      var(--access-border);
  }
  
  .device-card:first-child {
    padding-top: 2px;
  }
  
  .device-card:last-child {
    padding-bottom: 2px;
  
    border-bottom: 0;
  }
  
  .device-card strong {
    display: block;
  
    overflow: hidden;
  
    color:
      var(--access-text);
  
    font-size: 14px;
    font-weight: 680;
  
    text-overflow: ellipsis;
  
    white-space: nowrap;
  }
  
  .device-status {
    display: flex;
  
    min-width: 0;
  
    gap: 4px;
  
    flex-direction: column;
  
    align-items: flex-end;
  
    text-align: right;
  }
  
  .device-last-seen {
    max-width: 150px;
  
    overflow: hidden;
  
    color:
      var(--access-text-muted);
  
    font-size: 10px;
  
    text-overflow:
      ellipsis;
  
    white-space: nowrap;
  }
  
  /* =====================================================
     ACTIVITY / COMMAND LIST
     ===================================================== */
  
  .activity-row {
    display: grid;
  
    padding:
      14px 0;
  
    grid-template-columns:
      minmax(0, 1fr) auto;
  
    align-items: center;
  
    gap: 16px;
  
    border-bottom:
      1px solid
      var(--access-border);
  }
  
  .activity-row:first-child {
    padding-top: 2px;
  }
  
  .activity-row:last-child {
    padding-bottom: 2px;
  
    border-bottom: 0;
  }
  
  .activity-row strong {
    display: block;
  
    overflow: hidden;
  
    color:
      var(--access-text);
  
    font-size: 13px;
    font-weight: 670;
  
    text-overflow: ellipsis;
  
    white-space: nowrap;
  }
  
  .activity-right {
    display: flex;
  
    gap: 4px;
  
    flex-direction: column;
  
    align-items: flex-end;
  
    text-align: right;
  }
  
  .activity-time {
    color:
      var(--access-text-muted);
  
    font-size: 10px;
  
    white-space: nowrap;
  }
  
  .status-online,
  .status-offline,
  .status-warning {
    display: inline-flex;
  
    min-height: 25px;
  
    padding:
      0 9px;
  
    align-items: center;
    justify-content: center;
  
    border-radius:
      999px;
  
    font-size: 10px;
    font-weight: 720;
  
    line-height: 1;
  }
  
  .status-online {
    border:
      1px solid
      rgba(35, 133, 91, 0.12);
  
    background:
      var(--access-green-soft);
  
    color:
      var(--access-green);
  }
  
  .status-offline {
    border:
      1px solid
      rgba(189, 75, 75, 0.12);
  
    background:
      var(--access-red-soft);
  
    color:
      var(--access-red);
  }
  
  .status-warning {
    border:
      1px solid
      rgba(174, 122, 39, 0.14);
  
    background:
      #fbf4e8;
  
    color:
      var(--access-warning);
  }
  
  /* =====================================================
     USER CARDS
     ===================================================== */
  
  .user-card {
    padding:
      18px 0;
  
    border-bottom:
      1px solid
      var(--access-border);
  }
  
  .user-card:first-child {
    padding-top: 2px;
  }
  
  .user-card:last-child {
    padding-bottom: 2px;
  
    border-bottom: 0;
  }
  
  .user-card-header {
    display: flex;
  
    margin-bottom: 15px;
  
    align-items: flex-start;
    justify-content: space-between;
  
    gap: 14px;
  }
  
  .user-card-header > div {
    min-width: 0;
  }
  
  .user-card-header strong {
    display: block;
  
    overflow: hidden;
  
    color:
      var(--access-text);
  
    font-size: 15px;
    font-weight: 700;
  
    text-overflow: ellipsis;
  
    white-space: nowrap;
  }
  
  .user-meta {
    margin-top: 5px;
  
    color:
      var(--access-text-soft);
  
    font-size: 11px;
  
    line-height: 1.4;
  }
  
  .user-permission-summary {
    display: flex;
  
    margin-top: 13px;
  
    gap: 7px;
  
    flex-wrap: wrap;
  }
  
  .permission-badge {
    display: inline-flex;
  
    min-height: 29px;
  
    padding:
      0 10px;
  
    align-items: center;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius:
      999px;
  
    background:
      var(--access-surface-soft);
  
    color:
      #5b6168;
  
    font-size: 11px;
    font-weight: 600;
  }
  
  .permission-list {
    display: flex;
  
    margin-top: 12px;
  
    gap: 8px;
  
    flex-direction: column;
  }
  
  .permission-item {
    display: flex !important;
  
    min-height: 48px;
  
    margin: 0 !important;
  
    padding:
      10px 12px;
  
    gap: 10px;
  
    align-items: center;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 13px;
  
    background:
      var(--access-surface-soft);
  
    color:
      var(--access-text) !important;
  }
  
  .permission-item input {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
  
    margin: 0;
  
    padding: 0;
  
    accent-color:
      var(--access-primary);
  }
  
  .admin-action-row {
    display: grid;
  
    margin-top: 15px;
  
    grid-template-columns:
      1fr;
  
    gap: 8px;
  }
  
  .small-button {
    display: inline-flex;
  
    min-height: 43px;
  
    padding:
      0 13px;
  
    align-items: center;
    justify-content: center;
  
    border:
      1px solid
      var(--access-border);
  
    border-radius: 12px;
  
    background:
      var(--access-surface-soft);
  
    color:
      var(--access-text);
  
    font-size: 12px;
    font-weight: 650;
  
    cursor: pointer;
  
    transition:
      transform 0.16s ease,
      background 0.2s ease,
      border-color 0.2s ease;
  }
  
  .small-button:active {
    transform:
      scale(0.98);
  }
  
  .small-button:disabled {
    opacity: 0.55;
  
    cursor: wait;
  }
  
  /* =====================================================
     EMPTY / LOADING TEXT IN ADMIN
     ===================================================== */
  
  #devices,
  #recentLogs,
  #recentCommands,
  #users {
    color:
      var(--access-text-soft);
  
    font-size: 13px;
  
    line-height: 1.5;
  }
  
  /* =====================================================
     ADMIN TABLET
     ===================================================== */
  
  @media (min-width: 620px) {
    .admin-container {
      padding:
        30px 28px 38px;
    }
  
    .stats-grid {
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
  
      gap: 12px;
    }
  
    .admin-action-row {
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
    }
  }
  
  /* =====================================================
     ADMIN DESKTOP
     ===================================================== */
  
  @media (min-width: 900px) {
    .admin-container {
      padding:
        42px 42px 48px;
    }
  
    .admin-container .topbar {
      margin-bottom: 30px;
    }
  
    .admin-tabs {
      width: 360px;
  
      margin-bottom: 24px;
    }
  
    .stats-grid {
      grid-template-columns:
        repeat(5, minmax(0, 1fr));
  
      gap: 14px;
    }
  
    .stat-card {
      min-height: 132px;
  
      padding: 19px;
    }
  
    .admin-container .panel {
      padding: 24px;
  
      border-radius: 24px;
    }
  
    .logout-button:hover,
    .small-button:hover {
      background:
        #ffffff;
  
      border-color:
        rgba(24, 28, 33, 0.15);
    }
  
    .primary-button:hover {
      background:
        var(--access-primary-soft);
    }
  
    .admin-tab:not(.active):hover {
      color:
        var(--access-text);
  
      background:
        rgba(24, 28, 33, 0.04);
    }
  }
  
  /* =====================================================
     ADMIN SMALL PHONES
     ===================================================== */
  
  @media (max-width: 380px) {
    .admin-container {
      padding-left: 12px;
      padding-right: 12px;
    }
  
    .admin-container .topbar h1 {
      font-size: 27px;
    }
  
    .logout-button {
      min-height: 41px;
  
      padding:
        0 12px;
    }
  
    .stats-grid {
      gap: 8px;
    }
  
    .stat-card {
      min-height: 108px;
  
      padding: 14px;
    }
  
    .stat-value {
      font-size: 29px;
    }
  
    .admin-container .panel {
      padding: 16px;
  
      border-radius: 19px;
    }
  }