.adminRoot { height: 100vh; overflow: hidden; background: var(--page-background-color); }
.sidebarOpen {}
.sidebarCollapsed {}
.adminShell { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100vh; }
.sidebarCollapsed .adminShell { grid-template-columns: 84px minmax(0, 1fr); }
.adminSidebar { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100vh; padding: 14px 8px 10px; border-right: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.adminSidebarNav,.adminNavSection,.adminNavLinks,.adminPageHeaderCopy,.adminActivityList,.adminSectionList,.adminListGrid,.adminUserMeta,.adminTopbarCopy,.adminLoginHeader,.adminLoginActions,.adminLoginForm,.adminFormSection,.adminFormSectionHeader,.adminFieldGroup { display: grid; }
.adminSidebarTools { display: flex; align-items: center; justify-content: flex-end; padding: 4px 4px 0; }
.adminNavSectionTitle,.adminBreadcrumb,.adminStatLabel { color: var(--text-muted); font-size: .69rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.adminSidebarNav { gap: 14px; align-content: start; overflow-y: auto; min-height: 0; padding-right: 4px; }
.adminNavSection { gap: 8px; }
.adminNavSectionHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adminNavSectionTitle { margin: 0; padding: 0 8px; }
.adminNavSectionToggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.adminNavSectionToggle:hover { background: var(--surface-soft); color: var(--text); }
.adminNavSectionToggleCollapsed { transform: rotate(-90deg); }
.adminNavLinks { gap: 4px; }
.adminNavLinksCollapsed { display: none; }
.adminNavLink { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border-radius: 10px; color: var(--text-secondary); font-size: .82rem; font-weight: 500; line-height: 1.35; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.adminNavLink:hover { background: var(--surface-soft); color: var(--text); }
.adminNavLinkActive { background: var(--surface-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.adminNavIcon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-muted); }
.adminNavLink:hover .adminNavIcon,.adminNavLinkActive .adminNavIcon { color: var(--accent); }
.adminNavLabel { min-width: 0; }
.sidebarCollapsed .adminNavSectionTitle,.sidebarCollapsed .adminNavSectionToggle,.sidebarCollapsed .adminNavLabel,.sidebarCollapsed .adminSidebarFooterCopy { display: none; }
.sidebarCollapsed .adminSidebar { padding-left: 10px; padding-right: 10px; }
.sidebarCollapsed .adminNavLink { justify-content: center; padding: 0; }
.sidebarCollapsed .adminSidebarTools { justify-content: center; }
.sidebarCollapsed .adminSidebarFooter :global(.button) { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; font-size: 0; }
.sidebarCollapsed .adminSidebarFooter :global(.button)::before { content: "Out"; font-size: .74rem; }
.adminSidebarToggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-secondary); }
.adminSidebarToggle:hover { background: var(--surface-soft); color: var(--text); }
.adminNavIcon svg,.adminSearchShell svg,.adminMobileToggle svg { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.adminNavIcon svg { width: 100%; height: 100%; }
.adminSearchShell svg,.adminMobileToggle svg { width: 16px; height: 16px; }
.adminSidebarFooter { display: grid; gap: 10px; padding: 10px 4px 0; border-top: 1px solid var(--border); }
.adminSidebarFooterCopy,.adminPageHeaderText,.adminCardHeaderText,.adminActivityText,.adminActivityTime,.adminSectionCopy,.adminMetaText,.adminStatMeta,.adminLoginHeader p,.adminLoginDemo,.adminLoginStatus,.adminFormSectionHeader p,.adminSettingsGroupText,.adminMediaCardText,.adminPaginationMeta,.adminPaginationCurrent { margin: 0; color: var(--text-secondary); }
.adminSidebarFooterCopy,.adminStatMeta { font-size: .75rem; line-height: 1.45; }
.adminSidebarFooter :global(.button) { min-height: 34px; padding: 0 12px; font-size: .78rem; border-radius: 999px; }
.adminMain { min-width: 0; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.adminTopbar,.adminTopbarLead,.adminTopbarActions,.adminActions,.adminToolbar,.adminToolbarGroup,.adminActionsInline,.adminSectionRowHead,.adminSettingsGroupHead,.adminMediaCardHead,.adminCardHeader,.adminPageHeader,.adminUserTrigger,.adminPagination,.adminPaginationActions { display: flex; align-items: center; }
.adminTopbar { justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--page-background-color); }
.adminTopbarLead { gap: 12px; min-width: 0; }
.adminTopbarBrand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding-right: 14px; border-right: 1px solid var(--border); }
.adminTopbarBrandLogo { width: 92px; height: auto; object-fit: contain; }
.adminTopbarCopy { gap: 4px; }
.adminTopbarTitle { margin: 0; font-family: var(--font-heading); font-size: 1.02rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.adminTopbarActions,.adminActions,.adminToolbarGroup,.adminActionsInline,.adminPaginationActions { gap: 8px; }
.adminPageHeader,.adminToolbar,.adminCardHeader,.adminSectionRowHead,.adminSettingsGroupHead,.adminMediaCardHead,.adminPagination { justify-content: space-between; }
.adminSearchShell { display: flex; align-items: center; gap: 8px; min-width: 220px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); color: var(--text-secondary); }
.adminSearchShell input { width: 100%; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font-size: .8125rem; }
.adminSearchShell input:focus { outline: none; }
.adminUserMenu { position: relative; }
.adminUserTrigger { gap: 8px; min-height: 36px; padding: 3px 7px 3px 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.adminUserAvatar { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-soft); color: var(--text); font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.adminUserAvatarShell { width: 100%; height: 100%; border-radius: inherit; }
.adminUserAvatarImage { border-radius: inherit; }
.adminUserMeta { gap: 2px; text-align: left; }
.adminUserMeta strong { font-size: .8rem; line-height: 1.2; font-weight: 600; }
.adminUserMeta span { color: var(--text-muted); font-size: .69rem; line-height: 1.3; }
.adminUserDropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 220px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); display: grid; gap: 4px; }
.adminUserDropdownLink { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); font-size: .8rem; font-weight: 500; text-align: left; }
.adminUserDropdownLink:hover { background: var(--surface-soft); color: var(--text); }
.adminContent { display: grid; gap: 16px; padding: 16px; overflow-y: auto; min-height: 0; }
.adminPageHeader { align-items: flex-start; gap: 16px; }
.adminPageHeaderCopy { gap: 6px; }
.adminPageHeaderTitle,.adminCardHeaderTitle { margin: 0; font-family: var(--font-heading); font-size: 1rem; line-height: 1.18; font-weight: 600; }
.adminCardHeaderTitle { font-size: .9rem; line-height: 1.3; }
.adminPageHeaderText,.adminMetaText { font-size: .82rem; line-height: 1.5; }
.adminToolbar { gap: 12px; flex-wrap: wrap; }
.adminFilterRowCompact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adminOrdersCardAction { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.adminChip,.adminFilter { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: .76rem; font-weight: 500; }
.adminFilterSelect { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); }
.adminFilterSelectLabel { color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.adminFilterSelect select { border: 0; background: transparent; color: var(--text); font-size: .8rem; font-weight: 500; color-scheme: dark; }
.adminFilterSelect select:focus { outline: none; }
.adminFilterSelect select option { background: var(--surface); color: var(--text); }
.adminTableCard,.adminFormCard,.adminSectionCard,.adminListCard,.adminSettingsGroup,.adminMediaCard,.adminStatCard {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-soft) 62%, transparent),
      color-mix(in srgb, var(--surface) 94%, transparent)
    );
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .12),
    0 6px 16px rgba(0, 0, 0, .08),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.adminTableCard:hover,.adminFormCard:hover,.adminSectionCard:hover,.adminListCard:hover,.adminSettingsGroup:hover,.adminMediaCard:hover,.adminStatCard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
  box-shadow:
    0 24px 54px rgba(0, 0, 0, .16),
    0 8px 20px rgba(0, 0, 0, .1),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
.adminStatGrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.adminStatCard { display: grid; gap: 6px; padding: 13px; }
.adminStatValue { font-size: 1.2rem; line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.adminGridTwo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 16px; }
.adminCardHeader { gap: 10px; padding: 13px 13px 0; }
.adminCardHeaderText,.adminSectionCopy,.adminSettingsGroupText,.adminMediaCardText { margin-top: 4px; font-size: .78rem; line-height: 1.5; }
.adminTableWrap { display: grid; gap: 12px; overflow-x: auto; overflow-y: visible; padding: 0 13px 13px; }
.adminTableWrap > .adminPagination { position: sticky; left: 0; }
.adminTable { width: 100%; min-width: 760px; border-collapse: collapse; }
.adminTable th,.adminTable td { padding: 10px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.adminTable th { color: var(--text-muted); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.adminTable td { color: var(--text-secondary); font-size: .8rem; line-height: 1.45; }
.adminTable tr:last-child td { border-bottom: 0; }
.adminTableTitle { color: var(--text); font-weight: 600; }
.adminThumbnail { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--product-media-bg); object-fit: contain; padding: 5px; }
.adminInlineStack { display: grid; gap: 2px; }
.adminInlineStack small { color: var(--text-muted); font-size: .69rem; }
.adminStatus { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
.adminStatusPositive { background: var(--success-soft); color: var(--success); }
.adminStatusWarning { background: var(--warning-soft); color: var(--warning); }
.adminStatusDanger { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.adminTextLink { border: 0; background: transparent; color: var(--text); font-size: .78rem; font-weight: 500; }
.adminTextLink:hover { color: var(--accent); }
.adminInlineSelect { width: 100%; min-width: 148px; min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--field-bg) 92%, transparent); color: var(--text); font-size: .8rem; color-scheme: dark; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.adminInlineSelect:focus { outline: none; border-color: var(--field-focus-border); box-shadow: var(--field-focus-ring); }
.adminInlineSelect option { background: var(--surface); color: var(--text); }
.adminTable td .adminInlineSelect { max-width: 100%; }
.adminTable td .adminStatus { box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.adminUsersBoard { display: grid; gap: 14px; overflow: visible; }
.adminUsersBoardHeader { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(180px, .75fr) minmax(180px, .75fr) minmax(150px, .72fr) minmax(240px, .95fr); gap: 18px; padding: 0 4px; color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.adminUsersCardList { display: grid; gap: 14px; overflow: visible; }
.adminUserCard { position: relative; overflow: visible; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(circle at top left, rgba(255,255,255,.04), transparent 45%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.adminUserCardMain { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(180px, .75fr) minmax(180px, .75fr) minmax(150px, .72fr) minmax(240px, .95fr); gap: 18px; align-items: center; padding: 14px 16px; }
.adminUserIdentity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.adminUserAvatarWrap { position: relative; flex: 0 0 auto; }
.adminUserAvatarLarge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, #425885, #31456c); color: #f4f7ff; font-size: 1.5rem; line-height: 1; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.adminUserPresence { position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: #3ac977; }
.adminUserIdentityCopy { display: grid; gap: 2px; min-width: 0; }
.adminUserIdentityName { color: var(--text); font-size: 1.1rem; line-height: 1.15; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adminUserIdentityEmail { color: var(--text-secondary); font-size: .96rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adminUserRolePills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adminUserRolePill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid rgba(121, 139, 180, .28); border-radius: 10px; background: linear-gradient(180deg, rgba(76, 96, 142, .28), rgba(44, 55, 83, .34)); color: #e7eeff; font-size: .84rem; font-weight: 500; }
.adminNoticeCard { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid rgba(121, 139, 180, .26); border-radius: 14px; background: rgba(16, 26, 43, .56); margin-bottom: 16px; }
.adminUserStatusWrap { display: flex; align-items: center; }
.adminUserStatusWrap .adminStatus { min-height: 36px; padding: 0 18px; border-radius: 999px; font-size: .9rem; letter-spacing: 0; }
.adminUserCardActions { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.adminUserCardActions :global(.button) { min-height: 38px; padding: 0 18px; border-radius: 12px; }
.adminUserEditField { display: grid; gap: 6px; }
.adminUserEditField span { color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.adminUserMoreButton { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-muted); }
.adminUserMoreButton:hover { color: var(--text); border-color: var(--field-focus-border); background: var(--surface-soft); }
.adminActivityList { gap: 0; padding: 0 14px 14px; }
.adminActivityItem { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.adminActivityItem:last-child { border-bottom: 0; }
.adminActivityTitle { font-size: .82rem; font-weight: 600; }
.adminFormGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.adminFormCard { padding: 14px; }
.adminFormSection { gap: 12px; }
.adminFormSection + .adminFormSection { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.adminFormSectionHeader { gap: 6px; }
.adminFormSectionHeader h3,.adminSettingsGroupTitle,.adminMediaCardTitle { margin: 0; font-family: var(--font-heading); font-size: .9rem; font-weight: 600; }
.adminDetails { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.adminDetailsSummary { display: grid; gap: 4px; cursor: pointer; list-style: none; }
.adminDetailsSummary::-webkit-details-marker { display: none; }
.adminDetailsSummary::after { content: "▾"; justify-self: end; margin-top: -26px; color: var(--text-muted); font-size: .9rem; transition: transform .18s ease, color .18s ease; }
.adminDetails[open] .adminDetailsSummary::after { transform: rotate(180deg); color: var(--text); }
.adminDetailsSummary span { color: var(--text); font-size: .86rem; font-weight: 600; }
.adminDetailsSummary small { color: var(--text-secondary); font-size: .76rem; line-height: 1.5; }
.adminDetailsBody { margin-top: 12px; }
.adminFieldGroup { gap: 6px; }
.adminFieldGroup label { color: var(--text); font-size: .78rem; font-weight: 500; }
.adminField,.adminFieldGroup textarea,.adminFieldGroup select { width: 100%; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); color: var(--text); font-size: .82rem; color-scheme: dark; }
.adminFieldGroup textarea { min-height: 104px; padding: 10px 12px; resize: vertical; }
.adminFieldGroup select option { background: var(--surface); color: var(--text); }
.adminField:focus,.adminFieldGroup textarea:focus,.adminFieldGroup select:focus { outline: none; border-color: var(--field-focus-border); box-shadow: var(--field-focus-ring); }
.adminFieldRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adminFieldTriple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.adminFieldQuad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.adminUploadBox,.adminEmptyState { display: grid; place-items: center; gap: 8px; min-height: 116px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-soft); text-align: center; }
.adminEmptyState { min-height: 170px; }
.adminProductMediaStack { display: grid; gap: 12px; }
.adminProductUploadActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adminProductMediaMeta { display: grid; gap: 4px; color: var(--text-secondary); font-size: .76rem; line-height: 1.5; }
.adminProductMediaPreview { overflow: hidden; display: grid; place-items: center; min-height: 240px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--product-media-bg); }
.adminProductMediaPreview img { width: 100%; max-width: 280px; height: auto; object-fit: contain; }
.adminProductUploadError { margin: 0; color: var(--accent); font-size: .78rem; line-height: 1.45; }
.adminModalBackdrop { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 24px; background: rgba(6, 11, 22, .62); backdrop-filter: blur(8px); }
.adminModalCard { width: min(100%, 960px); max-height: calc(100vh - 48px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 28px 70px rgba(0, 0, 0, .35); }
.adminModalHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.adminModalClose { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.adminModalClose:hover { background: var(--surface); }
.adminModalScroll { overflow-y: auto; padding: 18px 20px; display: grid; gap: 14px; }
.adminModalActions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--border); }
.adminSectionList,.adminListGrid { gap: 14px; }
.adminSectionCard,.adminSettingsGroup,.adminMediaCard { display: grid; gap: 11px; padding: 12px 13px; }
.adminSectionGridCompact { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.adminSectionCardCompact { min-height: 188px; align-content: space-between; }
.adminSectionCardCompact .adminSectionRowHead { align-items: flex-start; gap: 10px; }
.adminSectionCardCompact .adminToolbar { margin-top: auto; align-items: flex-end; }
.adminSectionCardCompact .adminToolbarGroup:last-child { margin-left: auto; }
.adminToggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .75rem; font-weight: 500; }
.adminToggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.adminMediaGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.adminMediaThumb { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--border); border-radius: 12px; background: var(--product-media-bg); object-fit: contain; padding: 8px; }
.adminPagination { gap: 12px; flex-wrap: wrap; padding: 0 2px; }
.adminPaginationMeta,.adminPaginationCurrent { font-size: .75rem; line-height: 1.4; }
.adminPaginationLink,.adminPaginationLinkDisabled { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; font-weight: 500; }
.adminPaginationLink { background: var(--surface); color: var(--text); }
.adminPaginationLink:hover { border-color: var(--field-focus-border); color: var(--accent); }
.adminPaginationLinkDisabled { background: var(--surface-soft); color: var(--text-muted); }
.adminLoginShell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.adminLoginCard {
  width: min(100%, 440px);
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)),
    color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .18),
    0 8px 22px rgba(0, 0, 0, .1),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.adminLoginHeader { gap: 10px; margin-bottom: 24px; }
.adminLoginHeader h1 { margin: 0; font-family: var(--font-heading); font-size: 2rem; line-height: 1.08; letter-spacing: -.03em; }
.adminLoginHeader p,.adminLoginDemo,.adminLoginStatus { font-size: .9rem; line-height: 1.6; }
.adminLoginActions { gap: 12px; margin-top: 4px; }
.adminLoginStatus { min-height: 18px; font-size: .8125rem; line-height: 1.45; }
.adminLoginStatusError { color: var(--accent); }
.adminLoginBack { margin-top: 18px; text-align: center; }
.adminMobileToggle,.adminBackdrop { display: none; }

@media (max-width: 1180px) {
  .adminStatGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adminGridTwo { grid-template-columns: 1fr; }
  .adminMediaGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adminSectionGridCompact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .adminShell { grid-template-columns: 1fr; }
  .sidebarCollapsed .adminShell { grid-template-columns: 1fr; }
  .adminSidebar { position: fixed; inset: 0 auto 0 0; z-index: 120; width: 272px; transform: translateX(-100%); transition: transform .22s ease; }
  .sidebarOpen .adminSidebar { transform: translateX(0); }
  .adminBackdrop { position: fixed; inset: 0; z-index: 100; display: block; border: 0; background: rgba(7,13,24,.3); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .sidebarOpen .adminBackdrop { opacity: 1; pointer-events: auto; }
  .adminMobileToggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-soft) 92%, transparent); color: var(--text); }
  .adminSidebarToggle { display: none; }
  .adminTopbarBrand { border-right: 0; padding-right: 0; }
  .adminTopbar { padding: 14px 16px; }
  .adminContent { padding: 16px; }
}

@media (max-width: 760px) {
  .adminTopbar { flex-wrap: wrap; align-items: stretch; }
  .adminTopbarLead { width: 100%; justify-content: space-between; }
  .adminTopbarActions { width: 100%; justify-content: space-between; }
  .adminSearchShell { flex: 1 1 auto; min-width: 0; }
  .adminUserMeta { display: none; }
  .adminStatGrid,.adminMediaGrid,.adminFormGrid,.adminFieldRow,.adminFieldTriple,.adminFieldQuad,.adminSectionGridCompact { grid-template-columns: 1fr; }
  .adminPageHeader,.adminToolbar,.adminPagination { flex-direction: column; align-items: stretch; }
  .adminFilterRowCompact { align-items: stretch; }
  .adminOrdersCardAction { align-items: stretch; }
  .adminActions,.adminToolbarGroup,.adminPaginationActions { width: 100%; flex-wrap: wrap; }
  .adminActions :global(.button),.adminToolbarGroup :global(.button),.adminOrdersCardAction :global(.button),.adminPaginationLink,.adminPaginationLinkDisabled,.adminModalActions :global(.button) { width: 100%; justify-content: center; }
  .adminSectionCardCompact { min-height: auto; }
  .adminSectionCardCompact .adminToolbarGroup:last-child { margin-left: 0; }
  .adminTable { min-width: 640px; }
  .adminUsersBoardHeader { display: none; }
  .adminUserCardMain { grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
  .adminUserCardActions { justify-content: stretch; }
  .adminUserCardActions :global(.button),.adminUserMoreButton { flex: 1 1 0; justify-content: center; }
  .adminLoginCard { padding: 24px 20px; }
  .adminModalBackdrop { padding: 12px; }
  .adminModalCard { width: 100%; max-height: calc(100vh - 24px); }
  .adminModalHeader,.adminModalScroll,.adminModalActions { padding-left: 16px; padding-right: 16px; }
  .adminModalActions { flex-direction: column-reverse; align-items: stretch; }
}