/* Mobile signed-in visual system v10. */
@media (max-width: 720px) {
  body:not(.is-logged-out) {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 94% 2%, rgba(67, 177, 163, 0.13), transparent 230px),
      radial-gradient(circle at 3% 66%, rgba(153, 187, 143, 0.09), transparent 260px),
      linear-gradient(180deg, #eef7f4 0%, #f8faf9 43%, #eff5f3 100%);
    color: #183638;
    -webkit-font-smoothing: antialiased;
  }

  body:not(.is-logged-out) .sidebar {
    min-height: 64px;
    border-bottom-color: rgba(211, 228, 224, 0.9);
    background:
      radial-gradient(circle at 94% 0, rgba(61, 174, 160, 0.1), transparent 110px),
      rgba(251, 253, 252, 0.98);
    padding: 10px 14px;
    box-shadow: 0 9px 28px rgba(27, 72, 67, 0.075);
  }

  body:not(.is-logged-out) .sidebar .brand {
    min-height: 43px;
  }

  body:not(.is-logged-out) .sidebar .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(145deg, #0a6e66, #2ba79a);
    box-shadow: 0 9px 20px rgba(10, 110, 102, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  body:not(.is-logged-out) .sidebar .brand-copy h1 {
    color: #173a38;
    font-size: 16px;
    letter-spacing: 0;
  }

  body:not(.is-logged-out) .sidebar .brand-copy p {
    color: #81938f;
  }

  body:not(.is-logged-out) .main-panel {
    padding: 12px 11px calc(22px + env(safe-area-inset-bottom));
  }

  body:not(.is-logged-out) .topbar {
    gap: 0;
    margin-bottom: 17px;
  }

  body:not(.is-logged-out) .title-block {
    min-height: 94px;
    align-content: start;
    overflow: hidden;
    border: 1px solid rgba(202, 229, 223, 0.96);
    border-radius: 27px;
    background:
      radial-gradient(circle at 94% 4%, rgba(82, 182, 169, 0.18), transparent 36%),
      radial-gradient(circle at 8% 112%, rgba(172, 199, 158, 0.1), transparent 42%),
      linear-gradient(138deg, #ddf1ed 0%, #edf7f4 58%, #fbfdfc 100%);
    padding: 19px 19px 33px;
    box-shadow: 0 15px 34px rgba(28, 75, 70, 0.105), inset 0 1px 0 #ffffff;
  }

  body:not(.is-logged-out) .title-block::before,
  body:not(.is-logged-out) .title-block::after {
    border-color: rgba(31, 135, 124, 0.08);
    box-shadow: 0 0 0 27px rgba(41, 151, 139, 0.025);
  }

  body:not(.is-logged-out) .title-block .eyebrow {
    color: #5d837e;
    font-size: 8px;
    letter-spacing: 0.16em;
  }

  body:not(.is-logged-out) .title-block h2 {
    margin-top: 7px;
    color: #153d39;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-shadow: none;
  }

  body:not(.is-logged-out) .topbar-controls {
    width: calc(100% - 14px);
    margin: -18px auto 0;
    gap: 8px;
    border-color: rgba(215, 231, 227, 0.96);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.97);
    padding: 9px;
    box-shadow: 0 13px 30px rgba(28, 68, 64, 0.09), inset 0 1px 0 #ffffff;
  }

  body:not(.is-logged-out) .topbar-controls .topbar-employee-picker {
    min-height: 46px;
    border: 1px solid #e1ece9;
    border-radius: 15px;
    background: #f3f8f6;
    padding: 4px 5px 4px 11px;
  }

  body:not(.is-logged-out) .topbar-controls .topbar-employee-picker select {
    min-height: 38px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(30, 75, 71, 0.045);
  }

  body:not(.is-logged-out) .current-user {
    min-height: 45px;
    border: 1px solid #dcece8;
    border-radius: 14px;
    background: linear-gradient(135deg, #ebf7f4, #fbfdfc);
  }

  body:not(.is-logged-out) .logout-button {
    min-height: 45px;
    border: 1px solid #f2e4e2;
    border-radius: 14px;
    background: #fff9f8;
    color: #a64a49;
  }

  body:not(.is-logged-out) .nav-tabs {
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    min-height: 78px;
    gap: 3px;
    border-color: rgba(255, 255, 255, 0.96);
    border-radius: 27px;
    background: rgba(252, 254, 253, 0.96);
    padding: 7px;
    box-shadow: 0 20px 52px rgba(18, 55, 52, 0.19), 0 4px 13px rgba(25, 75, 70, 0.07), inset 0 1px 0 #ffffff;
    backdrop-filter: blur(24px) saturate(1.18);
  }

  body:not(.is-logged-out) .nav-tab {
    min-height: 62px;
    flex: 1 1 0;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 19px;
    color: #71837f;
    padding: 4px 1px 3px;
    font-size: 8px;
    box-shadow: none;
  }

  body:not(.is-logged-out) .nav-tab::before,
  body:not(.is-logged-out) .nav-tab:nth-child(n)::before {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 11px;
    background: #edf7f4;
    color: #297d74;
    box-shadow: inset 0 0 0 1px rgba(20, 121, 111, 0.045);
  }

  body:not(.is-logged-out) .nav-tab:hover {
    border-color: #d8ebe7;
    background: #f3f9f7;
    color: #126f67;
  }

  body:not(.is-logged-out) .nav-tab.active {
    flex: 1 1 0;
    border-color: #c9e5df;
    background:
      radial-gradient(circle at 86% 5%, rgba(98, 190, 178, 0.2), transparent 48%),
      linear-gradient(145deg, #e4f4f0, #f8fcfb);
    color: #0d7068;
    box-shadow: 0 9px 20px rgba(23, 105, 96, 0.12), inset 0 1px 0 #ffffff;
    transform: translateY(-5px);
  }

  body:not(.is-logged-out) .nav-tab.active::before {
    background: linear-gradient(145deg, #0c746b, #2aa79a);
    color: #ffffff;
    box-shadow: 0 7px 15px rgba(12, 116, 107, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  body:not(.is-logged-out) .panel {
    border-color: rgba(213, 229, 225, 0.96);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 13px 31px rgba(28, 69, 65, 0.072), inset 0 1px 0 #ffffff;
  }

  body:not(.is-logged-out) .section-heading h3 {
    color: #173b39;
    letter-spacing: -0.02em;
  }

  body:not(.is-logged-out) .main-panel select,
  body:not(.is-logged-out) .main-panel input,
  body:not(.is-logged-out) .main-panel textarea {
    border-color: #dfeae7;
    border-radius: 14px;
    background-color: #f7faf9;
  }

  body:not(.is-logged-out) #queryView .employee-list {
    gap: 10px;
  }

  body:not(.is-logged-out) #queryView .employee-card {
    min-height: 80px;
    border-color: #e0ebe8;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #fbfdfc);
    padding: 11px;
    box-shadow: 0 7px 18px rgba(27, 70, 66, 0.045);
  }

  body:not(.is-logged-out) #queryView .employee-card.active {
    border-color: #73beb5;
    background: linear-gradient(145deg, #e6f6f2, #fbfdfc);
    box-shadow: inset 4px 0 0 #138077, 0 10px 23px rgba(20, 122, 113, 0.1);
  }

  body:not(.is-logged-out) #grantView .grant-workbench {
    gap: 12px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body:not(.is-logged-out) #grantView .grant-panel,
  body:not(.is-logged-out) #grantView .grant-preview-panel {
    overflow: hidden;
    border: 1px solid #dbe9e6;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(27, 70, 66, 0.07);
  }

  body:not(.is-logged-out) #grantView .grant-heading,
  body:not(.is-logged-out) #grantView .grant-preview-heading {
    min-height: 78px;
    background: linear-gradient(145deg, #e1f2ee, #f8fbfa);
    color: #173b39;
    padding: 16px;
  }

  body:not(.is-logged-out) #grantView .grant-heading p,
  body:not(.is-logged-out) #grantView .grant-preview-heading span {
    color: #66827e;
  }

  body:not(.is-logged-out) #grantView .grant-preview-heading em {
    border-color: #c5e2dc;
    background: rgba(255, 255, 255, 0.82);
    color: #16756d;
  }

  body:not(.is-logged-out) #grantView .grant-form {
    gap: 12px;
    padding: 14px;
  }

  body:not(.is-logged-out) #grantView .grant-form-section {
    border-color: #e1ebe8;
    border-radius: 18px;
    background: #f8fbfa;
    padding: 14px;
  }

  body:not(.is-logged-out) .rule-card,
  body:not(.is-logged-out) .reward-card.mall-card,
  body:not(.is-logged-out) .ranking-item,
  body:not(.is-logged-out) .department-ranking-item,
  body:not(.is-logged-out) #recordsTable tr,
  body:not(.is-logged-out) #accountsTable tr {
    border-color: #dfeae7;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #fbfdfc);
    box-shadow: 0 8px 20px rgba(27, 70, 66, 0.05);
  }

  body:not(.is-logged-out) .rule-card {
    gap: 12px;
    padding: 16px;
  }

  body:not(.is-logged-out) .reward-card.mall-card {
    gap: 9px 13px;
    padding: 14px;
  }

  body:not(.is-logged-out) .rankings-workbench {
    overflow: hidden;
    border-radius: 25px;
  }

  body:not(.is-logged-out) .ranking-list {
    gap: 10px;
  }

  body:not(.is-logged-out) .department-ranking-list {
    gap: 10px;
  }

  body:not(.is-logged-out) .pagination-panel,
  body:not(.is-logged-out) .ranking-list-column .ranking-pagination,
  body:not(.is-logged-out) #queryView .employee-pagination {
    border-radius: 17px;
    background: #f7faf9;
  }

  body:not(.is-logged-out) .toast {
    bottom: calc(105px + env(safe-area-inset-bottom));
    border-radius: 15px;
    box-shadow: 0 13px 28px rgba(20, 54, 52, 0.18);
  }
}

@media (max-width: 380px) {
  body:not(.is-logged-out) .nav-tabs {
    right: 6px;
    left: 6px;
    gap: 1px;
    padding: 5px;
  }

  body:not(.is-logged-out) .nav-tab {
    font-size: 7px;
  }

  body:not(.is-logged-out) .nav-tab::before,
  body:not(.is-logged-out) .nav-tab:nth-child(n)::before {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.is-logged-out) .nav-tab {
    transition: none;
  }
}