@media screen {
  .local-badge {
    gap: 7px;
  }

  .local-badge[data-status="online"] .status-dot {
    background: #23b26d;
    box-shadow: 0 0 0 4px rgba(35, 178, 109, 0.12);
  }

  .local-badge[data-status="syncing"] .status-dot {
    background: #f2a51a;
    box-shadow: 0 0 0 4px rgba(242, 165, 26, 0.13);
  }

  .local-badge[data-status="error"] .status-dot {
    background: #d94a5d;
    box-shadow: 0 0 0 4px rgba(217, 74, 93, 0.12);
  }

  .lan-migration-note {
    padding: 10px 12px;
    border-left: 3px solid var(--blue, #5a2cf5);
    background: rgba(90, 44, 245, 0.06);
    color: var(--ink-muted, #676782);
    line-height: 1.65;
  }

  @media (pointer: coarse) {
    button,
    input,
    select,
    .button,
    .nav-item,
    .photo-upload-button {
      min-height: 44px;
    }
  }

  @media (max-width: 820px) {
    html {
      scroll-padding-top: 118px;
    }

    body {
      overflow-x: hidden;
    }

    .app-shell {
      display: block;
      padding: 0;
    }

    .sidebar {
      position: sticky;
      top: 0;
      z-index: 60;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 12px;
      width: auto;
      min-height: 0;
      padding: 10px 12px 8px;
      border: 0;
      border-bottom: 1px solid rgba(90, 44, 245, 0.13);
      border-radius: 0 0 9px 9px;
      box-shadow: 0 8px 26px rgba(29, 22, 79, 0.1);
    }

    .brand-lockup {
      min-width: 0;
      padding: 0;
      border: 0;
    }

    .brand-mark,
    .brand-lockup small,
    .document-code,
    .policy-note {
      display: none;
    }

    .brand-lockup strong {
      font-size: 18px;
      line-height: 36px;
    }

    .local-badge {
      display: flex;
      align-self: center;
      max-width: 178px;
      margin: 0;
      padding: 7px 9px;
      font-size: 10px;
      line-height: 1.25;
    }

    .side-nav {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      margin: 0;
      padding: 0 0 2px;
      overflow: visible;
    }

    .side-nav::-webkit-scrollbar {
      display: none;
    }

    .nav-item {
      width: 100%;
      display: flex;
      grid-template-columns: none;
      justify-content: center;
      align-items: center;
      gap: 6px;
      min-width: 0;
      min-height: 40px;
      padding: 7px 5px;
      border-radius: 7px;
      white-space: nowrap;
    }

    .nav-index {
      font-size: 9px;
    }

    .nav-access-tag {
      display: none;
    }

    .main-stage {
      margin-left: 0;
      padding: 10px 10px calc(34px + env(safe-area-inset-bottom));
    }

    .topbar {
      position: static;
      margin-bottom: 10px;
      padding: 14px;
      border-radius: 9px;
    }

    .view-identity {
      min-width: 0;
    }

    .top-actions {
      min-width: 0;
    }

    .result-card-grid,
    .employee-grid,
    .settings-grid {
      gap: 10px;
    }
  }

  @media (max-width: 620px) {
    .main-stage {
      padding-inline: 8px;
    }

    .topbar {
      gap: 12px;
      padding: 13px 12px;
    }

    .topbar h1 {
      font-size: clamp(23px, 7vw, 30px);
      line-height: 1.15;
    }

    .top-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }

    .auth-session,
    .month-control {
      grid-column: 1 / -1;
      width: 100%;
    }

    .top-actions > .button {
      width: 100%;
      min-width: 0;
    }

    .result-gallery-heading,
    .role-intro,
    .panel,
    .performance-id-card,
    .employee-card,
    .management-card,
    .work-kpi-heading,
    .work-quick-entry {
      border-radius: 8px;
    }

    .result-gallery-heading {
      gap: 12px;
      padding: 16px 14px;
    }

    .result-gallery-meta {
      width: 100%;
      box-sizing: border-box;
    }

    .performance-id-card {
      grid-template-columns: 82px minmax(0, 1fr);
      grid-template-rows: auto 124px auto auto auto;
      gap: 0 10px;
    }

    .id-card-topline {
      border-radius: 8px 8px 3px 3px;
    }

    .id-photo-area {
      width: 82px;
      height: 112px;
      align-self: center;
      border-radius: 50%;
    }

    .id-person-copy {
      min-width: 0;
    }

    .id-person-copy h3,
    .id-person-copy p {
      overflow-wrap: anywhere;
    }

    .id-result-stack {
      overflow: hidden;
      border-radius: 7px;
    }

    .id-result-stack > div {
      min-width: 0;
      padding-inline: 7px;
    }

    .id-result-stack > div > span:first-child {
      white-space: normal;
    }

    .final-grade-badge,
    .level-badge {
      max-width: 100%;
    }

    .id-kpi-summary {
      padding: 11px;
      border-radius: 7px;
    }

    .id-kpi-breakdown {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .id-kpi-business-item {
      min-height: 32px;
      padding-inline: 7px;
    }

    .nav-item {
      font-size: 11px;
    }

    .modal {
      width: 100%;
      max-width: none;
      margin: auto 0 0;
      padding: 0;
    }

    .modal::backdrop {
      backdrop-filter: blur(4px);
    }

    .modal-card,
    .compact-modal,
    .work-detail-modal-card {
      width: 100%;
      max-width: none;
      max-height: 100dvh;
      margin: 0;
      border-radius: 9px 9px 0 0;
      overflow-x: hidden;
    }

    .modal-heading,
    .sticky-heading {
      position: sticky;
      top: 0;
      z-index: 4;
      border-radius: 9px 9px 0 0;
    }

    .modal-actions,
    .sticky-actions {
      position: sticky;
      bottom: 0;
      z-index: 5;
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .modal-actions .button {
      min-height: 44px;
    }

    .work-detail-table-wrap {
      overflow: visible;
    }

    .toast {
      right: 10px;
      bottom: calc(10px + env(safe-area-inset-bottom));
      left: 10px;
      width: auto;
      text-align: center;
    }
  }
}