/* ========================================================================== 
   欧游时光管理中心 · restrained Apple / iOS administration UI
   ========================================================================== */
:root {
  --blue: #007aff;
  --blue-hover: #006ee6;
  --blue-soft: rgba(0, 122, 255, .10);
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --purple: #af52de;
  --ink: #172033;
  --ink-2: #465166;
  --ink-3: #7b879b;
  --line: #dfe5ee;
  --line-soft: #e9edf3;
  --surface: rgba(255, 255, 255, .94);
  --surface-soft: rgba(255, 255, 255, .88);
  --field: #f4f6f9;
  --canvas: #eef2f7;
  --sidebar: rgba(22, 27, 38, .88);
  --sidebar-line: rgba(255, 255, 255, .09);
  --sidebar-text: rgba(255, 255, 255, .72);
  --sidebar-muted: rgba(255, 255, 255, .42);
  --shadow-xs: 0 1px 2px rgba(22, 32, 51, .04);
  --shadow-sm: 0 5px 18px rgba(30, 45, 70, .07);
  --shadow-md: 0 12px 34px rgba(25, 39, 63, .11);
  --shadow-lg: 0 24px 70px rgba(13, 24, 43, .22);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --pill: 999px;
  --sidebar-width: 248px;
  --topbar-height: 72px;
  --content-max: 1600px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Reset and base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--canvas); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 5%, rgba(0, 122, 255, .075), transparent 28rem),
    radial-gradient(circle at 35% 100%, rgba(70, 116, 170, .055), transparent 32rem),
    var(--canvas);
  font: 14px/1.5 var(--font);
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
img, video, svg { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, h4, h5, p { margin: 0; }
h1, h2, h3, h4, h5 { line-height: 1.25; letter-spacing: -.025em; }
p, small { color: var(--ink-3); }
ul { margin: 0; padding: 0; list-style: none; }
::selection { color: var(--ink); background: rgba(0, 122, 255, .18); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(70, 81, 102, .25); border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; }

/* Common controls -------------------------------------------------------- */
input, select, textarea {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  outline: 0;
  background: var(--field);
  box-shadow: inset 0 1px 1px rgba(28, 39, 57, .025);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
textarea { height: auto; min-height: 104px; padding-top: 10px; padding-bottom: 10px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa4b3; }
input:hover, select:hover, textarea:hover { border-color: #c5cedb; }
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .13);
}
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; accent-color: var(--blue); }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, #7b879b 50%), linear-gradient(135deg, #7b879b 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.field > span, .workbench-field > span, .dialog-field { color: var(--ink-2); font-weight: 600; }
.muted { color: var(--ink-3); font-size: 12px; }

.primary-button, .secondary-button, .danger-button, .action-button,
.login-button, .logout-button, .detail-upload-button, .gallery-upload-button,
.order-refresh, .text-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 10px;
  font-weight: 650;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.primary-button, .login-button {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(0, 122, 255, .22);
}
.primary-button:hover, .login-button:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(0, 122, 255, .25); }
.secondary-button, .action-button, .detail-upload-button, .gallery-upload-button, .order-refresh {
  color: var(--ink-2);
  border: 1px solid #d8dee7;
  background: #f5f7fa;
  box-shadow: var(--shadow-xs);
}
.secondary-button:hover, .action-button:hover, .detail-upload-button:hover, .gallery-upload-button:hover, .order-refresh:hover { background: #fff; border-color: #c8d0dc; transform: translateY(-1px); }
.danger-button, .action-button.danger { color: #fff; background: var(--red); box-shadow: 0 4px 12px rgba(255, 59, 48, .2); }
.danger-button:hover, .action-button.danger:hover { background: #e9342b; transform: translateY(-1px); }
.text-button { min-height: 32px; padding: 0 8px; color: var(--blue); background: transparent; }
.text-button:hover { background: var(--blue-soft); }
.icon-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dce2eb;
  border-radius: 10px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .74);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.icon-button:hover { background: #fff; transform: translateY(-1px); }
.icon-button svg { width: 19px; height: 19px; }

/* Login ------------------------------------------------------------------ */
.page-shell { width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.12fr) minmax(430px, .88fr); background: #eff5fb; }
.brand-panel { position: relative; min-height: 100vh; padding: 46px 54px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; color: #fff; background: #0575e6; }
.brand-image { position: absolute; inset: -5%; z-index: -3; background: radial-gradient(circle at 18% 18%, rgba(125,213,255,.5), transparent 25rem), radial-gradient(circle at 82% 80%, rgba(63,110,255,.48), transparent 26rem), linear-gradient(145deg,#0b8cff 0%,#086dd9 54%,#0756ba 100%); background-size: 115% 115%; animation: login-gradient-flow 14s ease-in-out infinite alternate; }
.brand-image::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%); animation: login-grid-drift 18s linear infinite; }
.brand-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg,rgba(3,54,124,.04),rgba(3,48,107,.28)); }
.brand-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: inset 0 0 80px rgba(255,255,255,.035); }
.brand-orbit::before { content: ""; position: absolute; width: 10px; height: 10px; left: 50%; top: -5px; border-radius: 50%; background: rgba(173,235,255,.9); box-shadow: 0 0 0 6px rgba(173,235,255,.08),0 0 22px rgba(173,235,255,.65); }
.orbit-one { width: 560px; height: 560px; right: -195px; top: 10%; animation: login-orbit-spin 28s linear infinite; }
.orbit-two { width: 260px; height: 260px; right: 42px; top: 25%; animation: login-orbit-spin-reverse 19s linear infinite; }
.brand-top, .brand-copy { position: relative; z-index: 2; }
.brand-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-mark, .mobile-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 700; }
.brand-mark { color: #fff; }
.brand-mark:hover { color: #fff; }
.brand-symbol, .admin-logo { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; }
.brand-symbol { color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.14); box-shadow: inset 0 1px rgba(255,255,255,.18),0 8px 24px rgba(0,59,143,.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brand-symbol svg, .admin-logo svg { width: 25px; height: 25px; }
.brand-note { padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.66); background: rgba(255,255,255,.08); font-size: 9px; letter-spacing: .15em; backdrop-filter: blur(12px); }
.brand-copy { max-width: 650px; margin: auto 0 9vh; }
.eyebrow { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.1); font-size: 9px; font-weight: 700; letter-spacing: .13em; backdrop-filter: blur(12px); }
.brand-copy h1 { margin: 20px 0 18px; color: #fff; font-size: clamp(42px,4.2vw,66px); font-weight: 730; line-height: 1.12; text-shadow: 0 4px 20px rgba(0,52,126,.13); }
.brand-copy p { max-width: 520px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.8; }
.login-feature-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 9px; }
.login-feature-row span { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.09); font-size: 11px; backdrop-filter: blur(14px); }
.login-feature-row i { width: 6px; height: 6px; border-radius: 50%; background: #8ce8ff; box-shadow: 0 0 0 4px rgba(140,232,255,.11); animation: login-dot-pulse 2.8s ease-in-out infinite; }
.login-feature-row span:nth-child(2) i { animation-delay: .7s; }
.login-feature-row span:nth-child(3) i { animation-delay: 1.4s; }
.brand-copy { animation: login-copy-float 7s ease-in-out infinite; }
@keyframes login-gradient-flow { 0% { transform: scale(1) translate3d(0,0,0); background-position: 0% 0%; } 100% { transform: scale(1.035) translate3d(-1.5%,1%,0); background-position: 100% 100%; } }
@keyframes login-grid-drift { to { background-position: 42px 42px,42px 42px; } }
@keyframes login-orbit-spin { to { transform: rotate(360deg); } }
@keyframes login-orbit-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes login-copy-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes login-dot-pulse { 0%,100% { opacity: .65; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 7px rgba(140,232,255,.08),0 0 16px rgba(140,232,255,.45); } }
@media (prefers-reduced-motion: reduce) {
  .brand-image, .brand-image::before, .brand-orbit, .brand-copy, .login-feature-row i { animation: none !important; }
}
.login-panel { position: relative; min-height: 100vh; padding: 54px 40px 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 100% 0,rgba(0,122,255,.11),transparent 26rem),radial-gradient(circle at 0 100%,rgba(52,143,255,.07),transparent 23rem),#eff5fb; }
.login-panel::before { content: ""; position: absolute; width: 210px; height: 210px; right: -70px; top: 12%; border: 1px solid rgba(0,122,255,.08); border-radius: 50%; }
.ambient { position: absolute; pointer-events: none; border-radius: 50%; }
.ambient-one { width: 380px; height: 380px; right: -210px; top: -190px; background: radial-gradient(circle,rgba(0,122,255,.14),transparent 68%); }
.ambient-two { width: 330px; height: 330px; left: -190px; bottom: -190px; background: radial-gradient(circle,rgba(58,134,222,.10),transparent 68%); }
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 430px; padding: 38px 36px 34px; border: 1px solid rgba(255,255,255,.82); border-radius: 26px; background: rgba(255,255,255,.72); box-shadow: 0 26px 70px rgba(24,63,105,.14),inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(30px) saturate(145%); -webkit-backdrop-filter: blur(30px) saturate(145%); }
.login-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(145deg,rgba(255,255,255,.34),transparent 45%); pointer-events: none; }
.mobile-brand { display: none; margin-bottom: 27px; color: var(--ink); }
.mobile-brand .brand-symbol { color: #fff; background: linear-gradient(145deg,#1594ff,#086bd6); border: 0; }
.mobile-brand strong, .mobile-brand small { display: block; }
.mobile-brand small { margin-top: 1px; color: #8a9bae; font-size: 9px; font-weight: 500; }
.welcome { margin-bottom: 27px; }
.welcome h2 { color: #172d44; font-size: 29px; font-weight: 740; }
.welcome p { margin-top: 7px; color: #8092a5; font-size: 12px; line-height: 1.65; }
.field-label { display: block; margin: 0 0 7px; color: #405a73; font-size: 11px; font-weight: 700; }
#loginForm .field { position: relative; margin-bottom: 17px; }
#loginForm .field input { height: 49px; padding-left: 43px; border: 0; border-radius: 14px; color: #20384f; background: rgba(238,244,249,.92); box-shadow: inset 0 0 0 1px rgba(74,119,163,.075); }
#loginForm .field input:hover { background: #f2f6fa; }
#loginForm .field input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(0,122,255,.12),inset 0 0 0 1px #087bff; }
.field-icon { position: absolute; z-index: 2; left: 14px; top: 50%; width: 18px; height: 18px; color: #8a9db0; transform: translateY(-50%); pointer-events: none; }
#loginForm .field:focus-within .field-icon { color: #087bff; }
.password-field input { padding-right: 48px; }
.password-toggle { position: absolute; z-index: 2; right: 7px; top: 50%; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 10px; color: #8497aa; background: transparent; transform: translateY(-50%); }
.password-toggle:hover { color: #087bff; background: #e8f3ff; }
.password-toggle svg { width: 18px; height: 18px; }
.form-message { min-height: 19px; margin: -5px 0 8px; color: var(--red); font-size: 11px; }
.login-button { width: 100%; min-height: 49px; border-radius: 14px; font-size: 14px; background: linear-gradient(135deg,#1190ff,#0874e6); box-shadow: 0 9px 22px rgba(0,122,255,.25),inset 0 1px rgba(255,255,255,.2); }
.login-button:hover { background: linear-gradient(135deg,#0787fb,#0569d5); }
.login-button:disabled { opacity: .7; cursor: wait; transform: none; }
.login-button svg { width: 18px; height: 18px; }
.trust-row { margin-top: 23px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #8193a6; font-size: 10px; }
.trust-row span { display: inline-flex; align-items: center; gap: 5px; }
.trust-row svg { width: 15px; height: 15px; color: #2eba5b; }
.trust-row i { width: 1px; height: 11px; background: #d9e2eb; }
.login-panel footer { position: absolute; bottom: 22px; left: 24px; right: 24px; text-align: center; font-size: 9px; }
.login-panel footer p { color: #96a6b6; }
.login-panel footer p + p { margin-top: 2px; }

/* Admin frame ------------------------------------------------------------ */
.admin-shell { min-height: 100vh; display: flex; }
.sidebar-mask { position: fixed; inset: 0; z-index: 89; visibility: hidden; opacity: 0; background: rgba(9, 14, 23, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity .22s var(--ease), visibility .22s; }
.sidebar-mask.show { visibility: visible; opacity: 1; }
.sidebar { position: sticky; top: 0; z-index: 90; flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); height: 100vh; padding: 18px 14px 14px; display: flex; flex-direction: column; color: #fff; border-right: 1px solid rgba(255, 255, 255, .07); background: var(--sidebar); box-shadow: 8px 0 30px rgba(15, 22, 34, .08); backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); }
.sidebar-brand { min-height: 60px; padding: 4px 8px 17px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--sidebar-line); }
.admin-logo { flex: 0 0 auto; color: #fff; background: var(--blue); box-shadow: 0 7px 18px rgba(0, 122, 255, .25); }
.sidebar-brand > div { min-width: 0; }
.sidebar-brand strong, .sidebar-foot strong { display: block; color: #fff; font-size: 14px; }
.sidebar-brand small, .sidebar-foot small { display: block; margin-top: 1px; color: var(--sidebar-muted); font-size: 11px; }
.close-sidebar { display: none; margin-left: auto; color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); }
#mainNav { min-height: 0; margin: 14px -2px 10px; padding: 0 2px; overflow-y: auto; }
.nav-item { position: relative; width: 100%; min-height: 42px; margin: 2px 0; padding: 0 11px; display: flex; align-items: center; gap: 11px; border-radius: 10px; color: var(--sidebar-text); background: transparent; text-align: left; transition: color .18s, background .18s, transform .18s var(--ease); }
.nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item b { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pill); color: #fff; background: var(--red); font-size: 10px; }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .075); transform: translateX(1px); }
.nav-item.active { color: #fff; background: rgba(0, 122, 255, .92); box-shadow: 0 7px 18px rgba(0, 80, 190, .23); }
.nav-item.active::before { content: ""; position: absolute; left: -10px; width: 3px; height: 20px; border-radius: 3px; background: #70b6ff; }
.sidebar-foot { margin-top: auto; padding: 14px 9px 3px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--sidebar-line); }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52, 199, 89, .12); }
.admin-main { min-width: 0; min-height: 100vh; flex: 1; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 70; min-height: var(--topbar-height); padding: 0 28px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid rgba(207, 216, 228, .85); background: rgba(247, 249, 252, .82); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); }
.topbar-left, .topbar-actions, .admin-profile { display: flex; align-items: center; }
.topbar-left { min-width: 0; gap: 12px; }
.topbar-left > div { min-width: 0; }
.breadcrumb { margin-bottom: 1px; color: var(--ink-3); font-size: 11px; }
#pageTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; font-weight: 720; }
.menu-button { display: none; }
.topbar-actions { min-width: 0; margin-left: auto; gap: 9px; }
.top-search { position: relative; width: clamp(180px, 20vw, 290px); }
.top-search svg, .product-search svg { position: absolute; z-index: 2; left: 12px; top: 50%; width: 17px; height: 17px; color: var(--ink-3); transform: translateY(-50%); pointer-events: none; }
.top-search input, .product-search input { padding-left: 37px; }
.top-search input { height: 38px; border-color: #dce2ea; border-radius: var(--pill); background: rgba(238, 242, 247, .9); }
.notice-button { position: relative; flex: 0 0 auto; }
.notice-button::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--red); }
.admin-profile { gap: 9px; padding: 3px 9px 3px 3px; border: 1px solid #dfe4ec; border-radius: var(--pill); background: rgba(255, 255, 255, .7); }
.avatar { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #1686ff, #0067dd); font-size: 12px; font-weight: 700; }
.admin-profile strong, .admin-profile small { display: block; line-height: 1.25; }
.admin-profile strong { font-size: 12px; }
.admin-profile small { margin-top: 2px; font-size: 10px; }
.logout-button { min-height: 36px; padding: 0 12px; color: var(--red); border: 1px solid rgba(255, 59, 48, .16); background: rgba(255, 59, 48, .075); }
.logout-button:hover { background: rgba(255, 59, 48, .12); }
.content-wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 28px 30px 36px; flex: 1; }
.admin-footer { padding: 15px 24px 20px; color: var(--ink-3); text-align: center; font-size: 11px; }
.page-section { display: none; }
.page-section.active { display: block; animation: section-in .22s var(--ease); }
.products-page.active, .orders-page.active, .categories-page.active { display: flex; flex-direction: column; gap: 18px; }
@keyframes section-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Card system and headings ---------------------------------------------- */
.panel, .settings-card, .product-list-panel, .order-list-panel, .category-workspace,
.settings-form, .share-setting-card, .banner-card, .editor-card, .side-card {
  border: 1px solid rgba(216, 224, 234, .95);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.panel, .settings-card, .settings-form, .share-setting-card { padding: 20px; border-radius: var(--radius-lg); }
.product-list-panel, .order-list-panel, .category-workspace, .banner-card { border-radius: var(--radius-lg); overflow: hidden; }
.section-toolbar { min-height: 62px; margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.products-page .section-toolbar, .orders-page .section-toolbar, .categories-page .section-toolbar { margin-bottom: 0; }
.section-toolbar > div:first-child { min-width: 0; }
.section-toolbar h2 { font-size: 24px; font-weight: 730; }
.section-toolbar p { margin-top: 5px; font-size: 13px; }
.section-kicker, .page-kicker { display: block; margin-bottom: 4px; color: var(--blue); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.panel-head { margin-bottom: 17px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { font-size: 16px; }
.panel-head p { margin-top: 3px; font-size: 12px; }

/* Dashboard -------------------------------------------------------------- */
.welcome-strip { margin-bottom: 18px; padding: 18px 21px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #d8e2ef; border-radius: var(--radius-lg); background: linear-gradient(100deg, rgba(255, 255, 255, .96), rgba(245, 249, 255, .93)); box-shadow: var(--shadow-xs); }
.welcome-strip > div > span { color: var(--blue); font-size: 11px; font-weight: 700; }
.welcome-strip h2 { margin-top: 2px; font-size: 19px; }
.welcome-strip p { margin-top: 4px; font-size: 12px; }
.date-chip { padding: 7px 12px; border-radius: var(--pill); color: var(--blue); background: var(--blue-soft); font-size: 12px; font-weight: 650; }
.metric-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { position: relative; min-height: 126px; padding: 17px; display: flex; align-items: flex-start; gap: 13px; overflow: hidden; border: 1px solid #dfe5ed; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.metric-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--blue); }
.metric-card:nth-child(2)::before { background: var(--green); }
.metric-card:nth-child(3)::before { background: #5e8ee6; }
.metric-card:nth-child(4)::before { background: var(--orange); }
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.metric-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; }
.metric-icon svg { width: 20px; height: 20px; }
.metric-icon.gold { color: #a86500; background: rgba(255, 149, 0, .13); }
.metric-icon.green { color: #168d37; background: rgba(52, 199, 89, .13); }
.metric-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.coral { color: var(--red); background: rgba(255, 59, 48, .11); }
.metric-card > div:last-child { min-width: 0; }
.metric-card span { display: block; color: var(--ink-3); font-size: 12px; }
.metric-card strong { display: block; margin: 4px 0 2px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: 24px; line-height: 1.25; white-space: nowrap; }
.metric-card small { font-size: 11px; }
.dashboard-grid { margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .8fr); gap: 16px; }
.bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trend-panel, .status-panel { min-height: 360px; }
.chart-wrap { position: relative; height: 235px; padding-left: 38px; }
.line-chart { width: 100%; height: 100%; overflow: visible; }
.grid-lines { stroke: #e5eaf1; stroke-width: 1; }
.area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: var(--blue); stroke-width: 3; }
.chart-dots circle { fill: #fff; stroke: var(--blue); stroke-width: 2.5; }
.y-axis { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0 5px; color: var(--ink-3); font-size: 10px; }
.x-axis { margin: 8px 0 0 38px; display: flex; justify-content: space-between; color: var(--ink-3); font-size: 10px; }
.legend { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 11px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--blue); }
.donut-wrap { display: grid; grid-template-columns: 150px minmax(120px, 1fr); align-items: center; gap: 18px; }
.donut { position: relative; width: 150px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--orange) 0 24%, var(--green) 24% 67%, var(--red) 67% 78%, #d9e0ea 78%); }
.donut::after { content: ""; position: absolute; width: 66%; height: 66%; border-radius: 50%; background: #fff; }
.donut > div { position: relative; z-index: 1; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 24px; }
.donut span { color: var(--ink-3); font-size: 10px; }
#orderStatusSummary { display: grid; gap: 10px; }
#orderStatusSummary li { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; }
#orderStatusSummary i { width: 9px; height: 9px; border-radius: 3px; }
#orderStatusSummary .shipping { background: var(--orange); }
#orderStatusSummary .paid { background: var(--green); }
#orderStatusSummary .cancelled { background: var(--red); }

/* Tables and reusable dynamic content ----------------------------------- */
.table-scroll, .product-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
th { color: var(--ink-3); background: #f7f9fb; font-size: 11px; font-weight: 700; white-space: nowrap; }
td { color: var(--ink-2); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #f8fbff; }
tbody tr:last-child td { border-bottom: 0; }
.product-info, .product-cell, .user-cell, .order-product, .review-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.product-thumb, .product-image, .user-avatar, .review-avatar { width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #edf1f5; object-fit: cover; }
.product-thumb img, .product-image img, .user-avatar img, .review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.product-info strong, .product-cell strong, .user-cell strong { display: block; color: var(--ink); }
.product-info small, .product-cell small, .user-cell small { display: block; max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-badge, .badge, .product-status, .order-status, .category-status, .activity-status {
  min-height: 24px; padding: 3px 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pill); color: var(--ink-2); background: #eef1f5; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.status-badge.active, .status-badge.success, .badge.green, .product-status.on, .product-status.active, .order-status.paid, .order-status.completed, .category-status.active { color: #18853a; background: rgba(52, 199, 89, .12); }
.status-badge.pending, .badge.orange, .order-status.pending, .order-status.unpaid { color: #a86200; background: rgba(255, 149, 0, .14); }
.status-badge.danger, .badge.red, .badge.coral, .order-status.cancelled, .product-status.off { color: #c82e27; background: rgba(255, 59, 48, .11); }
.badge.blue, .order-status.review { color: var(--blue); background: var(--blue-soft); }
.table-actions, .row-actions, .card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table-actions button, .row-actions button, .card-actions button { min-height: 31px; padding: 0 10px; border: 1px solid #dce2ea; border-radius: 8px; color: var(--ink-2); background: #f7f8fa; font-size: 12px; font-weight: 600; }
.table-actions button:hover, .row-actions button:hover, .card-actions button:hover { color: var(--blue); border-color: rgba(0, 122, 255, .25); background: var(--blue-soft); }
.table-actions .danger, .row-actions .danger, .card-actions .danger { color: var(--red); }
.empty-state, .banner-empty, .empty-row { min-height: 170px; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); text-align: center; }
.empty-state svg { width: 40px; height: 40px; color: #a9b3c1; }
.recent-list { display: grid; gap: 2px; }
.recent-list > *, .recent-order { padding: 10px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.recent-list > *:last-child { border-bottom: 0; }

/* Products --------------------------------------------------------------- */
.product-list-toolbar, .order-toolbar, .category-toolbar { min-height: 66px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); background: rgba(250, 251, 253, .8); }
.product-search, .order-search-box, .category-search { position: relative; flex: 1; max-width: 360px; min-width: 220px; }
.order-search-box > span, .category-search > span { position: absolute; z-index: 2; left: 13px; top: 50%; color: var(--ink-3); transform: translateY(-50%); }
.order-search-box input, .category-search input { padding-left: 36px; }
.product-status-filter { margin-left: auto; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.product-status-filter select { width: 140px; }
.product-table-scroll { padding: 0 4px 5px; }
.product-management-table { min-width: 900px; }
.product-management-table td:first-child { min-width: 260px; }

/* Home media, banners and splash ---------------------------------------- */
.home-media-tabs, .splash-tabs, .review-tabs { width: fit-content; max-width: 100%; margin-bottom: 18px; padding: 4px; display: flex; gap: 3px; overflow-x: auto; border: 1px solid #dde3eb; border-radius: 11px; background: #e9edf2; }
.home-media-tab, .splash-tab, .review-tabs button, .banner-type-tab { min-height: 34px; padding: 0 14px; flex: 0 0 auto; border-radius: 8px; color: var(--ink-2); background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }
.home-media-tab:hover, .splash-tab:hover, .review-tabs button:hover, .banner-type-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .58); }
.home-media-tab.active, .splash-tab.active, .review-tabs button.active, .banner-type-tab.active { color: var(--blue); background: #fff; box-shadow: 0 1px 5px rgba(28, 40, 60, .1); }
.home-media-panel, .splash-panel { display: none; }
.home-media-panel.active, .splash-panel.active { display: block; animation: section-in .2s var(--ease); }
.banner-settings { margin-bottom: 16px; display: grid; grid-template-columns: minmax(240px, 1fr) 150px auto; align-items: center; gap: 16px; }
.banner-settings label { display: flex; align-items: center; gap: 8px; }
.banner-settings input { width: 82px; }
.banner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.banner-card { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.banner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.banner-preview-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e9edf2; }
.banner-preview-wrap img, .banner-preview-wrap video { width: 100%; height: 100%; object-fit: cover; }
.banner-media-type { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: var(--pill); color: #fff; background: rgba(20, 26, 37, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10px; font-weight: 700; }
.banner-card-copy { padding: 14px 15px 10px; }
.banner-card-copy h4 { font-size: 14px; }
.banner-card-copy p { margin-top: 4px; font-size: 12px; }
.banner-card-actions { padding: 3px 15px 15px; display: flex; gap: 7px; }
.settings-card { margin-bottom: 16px; }
.settings-card .field {
  margin: 14px 0;
  display: grid;
  gap: 6px;
}
.setting-row {
  min-height: 60px;
  margin: -4px 0 16px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.setting-row strong { display: block; font-size: 14px; }
.setting-row p { margin-top: 3px; font-size: 12px; }
.switch, .toggle-switch {
  position: relative;
  width: 50px;
  height: 30px;
  flex: 0 0 auto;
  cursor: pointer;
}
.switch input, .toggle-switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span, .toggle-switch > span {
  position: absolute;
  inset: 0;
  border-radius: var(--pill);
  background: #c9ced6;
  transition: background .2s var(--ease);
}
.switch > span::after, .toggle-switch > span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(20, 30, 45, .25);
  transition: transform .2s var(--ease);
}
.switch input:checked + span, .toggle-switch input:checked + span { background: var(--green); }
.switch input:checked + span::after, .toggle-switch input:checked + span::after { transform: translateX(20px); }
.media-upload-card, .splash-popup-upload, .share-poster-upload { min-height: 112px; margin: 14px 0; display: flex; align-items: center; justify-content: center; border: 1.5px dashed #bfc9d7; border-radius: 13px; color: var(--blue); background: #f7f9fc; cursor: pointer; transition: border .18s, background .18s; }
.media-upload-card:hover, .splash-popup-upload:hover, .share-poster-upload:hover { border-color: var(--blue); background: var(--blue-soft); }
.home-media-preview, .splash-popup-preview, .share-preview { min-height: 170px; margin: 14px 0; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #f1f4f8; }
.home-media-preview img, .home-media-preview video, .splash-popup-preview img, .share-preview img { max-height: 360px; width: 100%; object-fit: contain; }
.home-media-preview.poster { min-height: 280px; }
.splash-upload-actions { margin: 15px 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.splash-upload-button { position: relative; overflow: hidden; }
.splash-media-grid { margin: 14px 0 18px; display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 12px; }
.splash-media-item, .upload-thumbnail, .media-thumbnail { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #edf1f5; }
.splash-media-item img, .splash-media-item video, .upload-thumbnail img, .upload-thumbnail video, .media-thumbnail img, .media-thumbnail video { width: 100%; height: 100%; object-fit: cover; }
.splash-media-item button, .upload-thumbnail button, .media-thumbnail button { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 0; border-radius: 50%; color: #fff; background: rgba(20, 25, 35, .72); }

/* Orders ----------------------------------------------------------------- */
.order-heading-note { padding: 8px 11px; border: 1px solid rgba(52, 199, 89, .2); border-radius: 10px; background: rgba(52, 199, 89, .08); }
.order-heading-note span { color: var(--ink-3); font-size: 10px; }
.order-heading-note strong { margin-left: 5px; color: #19843a; font-size: 12px; }
.order-overview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.order-overview-grid article { min-height: 88px; padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #dde4ed; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-xs); }
.order-overview-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font-weight: 800; }
.order-overview-icon.pending { color: #a96200; background: rgba(255, 149, 0, .14); }
.order-overview-icon.paid, .order-overview-icon.done { color: #178738; background: rgba(52, 199, 89, .13); }
.order-overview-icon.review { color: #8e3ab4; background: rgba(175, 82, 222, .12); }
.order-overview-grid small, .order-overview-grid strong { display: block; }
.order-overview-grid strong { margin-top: 2px; font-size: 21px; }
.order-toolbar-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; }
.order-refresh { min-height: 34px; }
.order-filter-tabs { padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); }
.order-filter-tabs button { min-height: 46px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; border-bottom: 2px solid transparent; color: var(--ink-3); background: transparent; font-size: 12px; font-weight: 650; }
.order-filter-tabs button b { min-width: 18px; padding: 1px 5px; border-radius: var(--pill); background: #eef1f5; font-size: 10px; }
.order-filter-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); }
.order-filter-tabs button.active b { color: var(--blue); background: var(--blue-soft); }
.order-card-list { padding: 14px; display: grid; gap: 10px; }
.order-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.order-card-head, .order-card-body, .order-card-foot { padding: 11px 13px; display: flex; align-items: center; gap: 12px; }
.order-card-head { justify-content: space-between; border-bottom: 1px solid var(--line-soft); background: #fafbfd; }
.order-card-body { align-items: flex-start; }
.order-card-foot { justify-content: flex-end; border-top: 1px solid var(--line-soft); }
.order-number, .order-meta { color: var(--ink-3); font-size: 11px; }
.order-customer { min-width: 160px; }
.order-amount { margin-left: auto; color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; }

/* Reviews and activities ------------------------------------------------- */
.review-filters, .filter-row { margin-bottom: 15px; padding-bottom: 15px; display: flex; align-items: flex-end; gap: 11px; border-bottom: 1px solid var(--line-soft); }
.review-filters input { flex: 1; }
.review-filters select { width: 210px; }
#reviewContent, .review-content { display: grid; gap: 10px; }
.review-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-card-body { margin: 11px 0; color: var(--ink-2); line-height: 1.65; }
.review-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 11px; }
.review-images { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.review-images img { width: 68px; height: 68px; border-radius: 9px; object-fit: cover; }
.stars, .rating { color: var(--orange); letter-spacing: .08em; }
.activity-toolbar { display: flex; gap: 8px; }
.activity-note { margin-bottom: 13px; padding: 9px 11px; border-radius: 9px; color: #8b5b00; background: rgba(255, 149, 0, .09); font-size: 12px; }
.activity-list { display: grid; gap: 9px; }
.activity-row { padding: 11px; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.3fr) 110px 60px auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }

/* Categories ------------------------------------------------------------- */
.category-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.category-overview article { padding: 14px 16px; border: 1px solid #dde4ed; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-xs); }
.category-overview span, .category-overview strong { display: block; }
.category-overview span { color: var(--ink-3); font-size: 11px; }
.category-overview strong { margin-top: 4px; font-size: 22px; }
.category-channel-filter { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: #e9edf2; }
.category-channel-filter button { min-height: 32px; padding: 0 12px; border-radius: 7px; color: var(--ink-2); background: transparent; font-size: 12px; }
.category-channel-filter button.active { color: var(--blue); background: #fff; box-shadow: var(--shadow-xs); }
.category-result-count { margin-left: auto; color: var(--ink-3); font-size: 11px; }
.category-list { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.category-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.category-card-head, .category-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.category-card h3 { font-size: 14px; }
.category-card p { margin: 8px 0 14px; font-size: 12px; }

/* Users, share and system settings -------------------------------------- */
.filter-row label { display: grid; gap: 6px; }
.filter-row .mini-search { flex: 1; max-width: 330px; }
.filter-row label:not(.mini-search) { width: 220px; }
.share-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.share-setting-card { display: grid; gap: 13px; }
.share-setting-card h3 { font-size: 16px; }
.share-title-field { display: grid; gap: 6px; }
.share-poster-upload { margin: 0; min-height: 100px; }
.share-preview { margin: 0; min-height: 240px; }
.share-preview img { max-height: 330px; }
.share-settings-tip { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 8px; background: var(--blue-soft); font-size: 12px; }
.settings-form { max-width: 780px; display: grid; gap: 16px; }
.settings-form > label { display: grid; gap: 6px; }
.settings-title { padding-bottom: 15px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line-soft); }
.setting-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-soft); }
.setting-icon svg { width: 20px; height: 20px; }
.settings-title p { margin-top: 2px; font-size: 12px; }
.settings-actions { padding-top: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line-soft); }
#settingsMessage { margin-right: auto; color: var(--green); font-size: 12px; }
#settingsMessage.error { color: var(--red); }

/* Dialog foundations ----------------------------------------------------- */
dialog { padding: 0; border: 0; color: var(--ink); background: transparent; }
dialog::backdrop { background: rgba(9, 15, 25, .48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
dialog[open] { display: block; animation: dialog-in .22s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
#bannerDialog, #formDialog, #confirmDialog { width: min(560px, calc(100vw - 28px)); max-height: min(88vh, 820px); overflow: auto; border: 1px solid rgba(255, 255, 255, .55); border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-lg); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
#bannerDialog form, #formDialog form { display: block; }
.dialog-head { min-height: 70px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-soft); }
.dialog-head h3 { font-size: 18px; }
.dialog-head p { margin-top: 3px; font-size: 12px; }
.dialog-head .icon-button { flex: 0 0 auto; }
.dialog-actions { padding: 14px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line-soft); background: rgba(249, 250, 252, .8); }
#dialogFields { padding: 17px 18px 3px; display: grid; gap: 13px; }
#dialogFields label, .dialog-field { display: grid; gap: 6px; }
.banner-upload { min-height: 190px; margin: 0 18px 15px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; overflow: hidden; border: 1.5px dashed #bec8d6; border-radius: 13px; color: var(--blue); background: #f7f9fc; text-align: center; cursor: pointer; }
.banner-upload:hover { border-color: var(--blue); background: var(--blue-soft); }
.banner-media-preview { width: 100%; max-height: 260px; overflow: hidden; border-radius: 10px; }
.banner-media-preview img, .banner-media-preview video { width: 100%; max-height: 260px; object-fit: contain; }
.banner-upload-status { font-size: 11px; }
.video-upload-progress { width: 100%; padding-top: 5px; color: #075fbd; text-align: left; }
.video-upload-progress[hidden] { display: none; }
.video-upload-progress-meta { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; }
.video-upload-progress-meta strong { font-variant-numeric: tabular-nums; }
.video-upload-progress-track { height: 7px; overflow: hidden; border-radius: var(--pill); background: #dceeff; }
.video-upload-progress-track i { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #087bff, #35bdff); box-shadow: 0 0 10px rgba(0, 122, 255, .28); transition: width .18s var(--ease); }
.video-upload-progress.is-processing { color: #075fbd; }
.video-upload-progress.is-processing .video-upload-progress-track i { animation: video-upload-processing 1.1s ease-in-out infinite alternate; }
.video-upload-progress.is-success { color: #087bff; }
.video-upload-progress.is-error { color: var(--red); }
.video-upload-progress.is-error .video-upload-progress-track { background: rgba(217, 72, 59, .12); }
.video-upload-progress.is-error .video-upload-progress-track i { background: #d9483b; box-shadow: none; }
.launch-media-row { width: min(560px, 100%); padding: 12px; border: 1px solid rgba(0, 122, 255, .14); border-radius: 12px; background: #f5faff; }
#middleVideoUploadProgress { width: min(560px, 100%); margin-top: 3px; }
.launch-video-upload-progress { margin-top: 3px; }
@keyframes video-upload-processing { from { opacity: .65; } to { opacity: 1; } }
#bannerImageFields { padding: 0 18px; display: grid; gap: 12px; }
.banner-show-text { margin: 12px 18px; display: flex; align-items: center; gap: 7px; }
.banner-options { padding: 0 18px 16px; display: flex; align-items: flex-end; gap: 15px; }
.banner-options label { display: flex; align-items: center; gap: 7px; }
.banner-options label:last-child { width: 130px; display: grid; }
.confirm-dialog-content { position: relative; padding: 30px 26px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.confirm-dialog-close { position: absolute; right: 13px; top: 13px; }
.confirm-dialog-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: rgba(255, 59, 48, .1); }
.confirm-dialog-icon svg { width: 28px; height: 28px; }
.confirm-dialog-copy { margin: 15px 0 20px; }
.confirm-dialog-copy h3 { font-size: 19px; }
.confirm-dialog-copy p { margin-top: 7px; }
.confirm-dialog-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* Full-screen product editor -------------------------------------------- */
#productDialog { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border: 0; background: #edf1f6; }
#productDialog[open] { display: block; }
#productDialog form { min-height: 100%; display: flex; flex-direction: column; }
.product-workbench-bar { position: sticky; top: 0; z-index: 8; min-height: 70px; padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(211, 219, 229, .9); background: rgba(250, 251, 253, .88); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.workbench-heading, .workbench-actions { display: flex; align-items: center; gap: 10px; }
.workbench-back { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); background: #fff; }
.workbench-back svg { width: 20px; height: 20px; }
.workbench-heading h3 { font-size: 18px; }
.workbench-heading p { margin-top: 2px; font-size: 11px; }
.product-upload-progress { position: sticky; top: 70px; z-index: 7; padding: 10px 24px 11px; color: #075fbd; border-bottom: 1px solid rgba(0, 122, 255, .16); background: rgba(234, 246, 255, .96); box-shadow: 0 7px 20px rgba(0, 86, 180, .08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.product-upload-progress-copy { margin-bottom: 7px; display: flex; align-items: center; gap: 9px; }
.product-upload-progress-copy strong { flex: 1; font-size: 12px; }
.product-upload-progress-copy b { font-size: 12px; font-variant-numeric: tabular-nums; }
.product-upload-spinner { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid rgba(0, 122, 255, .2); border-top-color: var(--blue); border-radius: 50%; animation: product-upload-spin .75s linear infinite; }
.product-upload-progress-track { height: 6px; overflow: hidden; border-radius: var(--pill); background: rgba(0, 122, 255, .13); }
.product-upload-progress-track i { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #0b8cff, #35bdff); box-shadow: 0 0 12px rgba(0, 122, 255, .32); transition: width .2s var(--ease); }
#productDialog.uploading .detail-upload-button, #productDialog.uploading .gallery-upload-button, #productDialog.uploading .main-image-dropzone { opacity: .6; pointer-events: none; }
@keyframes product-upload-spin { to { transform: rotate(360deg); } }
.product-workbench { width: 100%; max-width: 1460px; margin: 0 auto; padding: 20px 24px 32px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 18px; }
.product-editor-main { min-width: 0; }
.product-editor-side { min-width: 0; }
.product-side-sticky { position: sticky; top: 90px; }
.editor-card { margin-bottom: 15px; overflow: hidden; border-radius: var(--radius-lg); }
.editor-card-head { min-height: 69px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line-soft); background: #fafbfd; }
.editor-card-head > div { min-width: 0; }
.editor-card-head h4 { font-size: 15px; }
.editor-card-head p { margin-top: 3px; font-size: 11px; }
.editor-card-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--blue); background: var(--blue-soft); }
.editor-card-icon svg { width: 19px; height: 19px; }
.editor-card-head .detail-upload-button { margin-left: auto; }
.editor-card-body { padding: 16px; }
.workbench-field { display: grid; gap: 6px; }
.workbench-field > span b { color: var(--red); }
.workbench-field small { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.workbench-field small em, .workbench-field small i { color: var(--ink-3); font-style: normal; }
.workbench-four-col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.input-prefix { position: relative; }
.input-prefix i { position: absolute; z-index: 2; left: 12px; top: 50%; color: var(--ink-3); font-style: normal; transform: translateY(-50%); }
.input-prefix input { padding-left: 28px; }
.detail-images-tip { margin-bottom: 13px; padding: 10px 12px; display: grid; gap: 2px; border-radius: 9px; background: #f3f6fa; }
.detail-images-tip strong { font-size: 12px; }
.detail-images-tip span { color: var(--ink-3); font-size: 11px; }
.detail-images-list { min-height: 110px; display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 10px; }
.detail-image-item, .gallery-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #edf1f5; }
.detail-image-item { aspect-ratio: 3 / 4; }
.gallery-item { aspect-ratio: 1; }
.detail-image-item img, .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.detail-image-item button, .gallery-item button { position: absolute; right: 5px; top: 5px; width: 27px; height: 27px; padding: 0; border-radius: 50%; color: #fff; background: rgba(16, 22, 33, .73); }
.advanced-media { margin-top: 13px; border-top: 1px solid var(--line-soft); }
.advanced-media summary { padding: 12px 0; color: var(--ink-2); font-size: 12px; font-weight: 650; cursor: pointer; }
.advanced-media[open] { padding-bottom: 4px; }
.description-supplement { margin-top: 15px; }
.side-card { margin-bottom: 13px; padding: 15px; border-radius: 14px; }
.side-card-head { margin-bottom: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.side-card-head h4 { font-size: 14px; }
.side-card-head p { margin-top: 2px; font-size: 10px; }
.publish-badge { padding: 3px 8px; border-radius: var(--pill); color: #168338; background: rgba(52, 199, 89, .12); font-size: 10px; font-weight: 700; }
.publish-badge:not(.active), .publish-badge.draft { color: var(--ink-3); background: #edf0f4; }
.publish-card .workbench-field + .workbench-field { margin-top: 13px; }
.featured-toggle { margin: 13px 0; padding: 11px 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.featured-toggle strong, .featured-toggle small { display: block; }
.featured-toggle small { margin-top: 2px; font-size: 10px; }
.featured-toggle .toggle-switch { width: 50px; height: 30px; }
.main-image-dropzone {
  position: relative;
  height: 400px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px dashed #b9c4d2;
  border-radius: 12px;
  background: #f4f7fa;
  cursor: pointer;
}
.main-image-dropzone:hover { border-color: var(--blue); background: var(--blue-soft); }
.main-image-dropzone > img { width: 100%; height: 100%; object-fit: cover; }
.main-image-dropzone.image-error > img { display: none; }
.image-empty {
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
  text-align: center;
}
.image-empty i { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-soft); }
.image-empty svg { width: 21px; height: 21px; }
.image-empty strong { color: var(--ink-2); font-size: 12px; }
.image-empty small, .image-empty em { font-size: 10px; font-style: normal; }
.image-replace { position: absolute; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: var(--pill); color: #fff; background: rgba(18, 24, 34, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10px; }
.gallery-heading { margin: 15px 0 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gallery-heading strong, .gallery-heading small { display: block; }
.gallery-heading strong { font-size: 12px; }
.gallery-heading small { font-size: 10px; }
.gallery-upload-button { min-height: 31px; padding: 0 10px; font-size: 11px; }
.gallery-grid { min-height: 78px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.summary-preview { padding: 12px; border-radius: 10px; background: #f5f7fa; }
.summary-preview > span { color: var(--blue); font-size: 10px; font-weight: 700; }
.summary-preview h5 { margin: 6px 0 9px; font-size: 13px; }
.summary-preview strong { color: var(--red); font-size: 17px; }
.summary-preview del { margin-left: 7px; color: var(--ink-3); font-size: 11px; }
.summary-detail-count { margin-top: 9px; display: block; font-size: 10px; }
.mobile-product-actions { display: none; }

/* Toast and utilities ---------------------------------------------------- */
.toast { position: fixed; z-index: 1000; top: 20px; left: 50%; min-width: 230px; max-width: calc(100vw - 28px); min-height: 44px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .6); border-radius: 13px; color: #fff; background: rgba(23, 30, 43, .9); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translate(-50%, -12px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast.success { background: rgba(26, 125, 54, .92); }
.toast.error { background: rgba(196, 42, 35, .93); }
.toast.warning { background: rgba(174, 102, 0, .93); }
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--ink-3); }

/* Responsive: medium desktop -------------------------------------------- */
@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .banner-grid, .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .splash-media-grid { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
  .product-workbench { grid-template-columns: minmax(0, 1fr) 310px; }
  .workbench-four-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-search { width: 190px; }
}

@media (max-width: 980px) {
  :root { --sidebar-width: 228px; }
  .admin-profile > div, .logout-button { display: none; }
  .content-wrap { padding-left: 22px; padding-right: 22px; }
  .share-settings-grid { grid-template-columns: 1fr; }
  .activity-row { grid-template-columns: 1fr 1fr 100px; }
  .activity-row > :nth-last-child(-n+2) { grid-column: auto; }
  .product-workbench { grid-template-columns: 1fr; }
  .product-side-sticky { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .product-side-sticky .side-card { margin: 0; }
  .product-side-sticky .media-card { grid-row: span 2; }
}

/* Responsive: tablet/mobile drawer -------------------------------------- */
@media (max-width: 768px) {
  :root { --topbar-height: 62px; }
  body { font-size: 13px; }
  .page-shell { display: block; background: #f2f5f9; }
  .brand-panel { display: none; }
  .login-panel { min-height: 100vh; padding: 28px 18px 82px; align-items: center; background: radial-gradient(circle at 85% 8%,rgba(0,122,255,.15),transparent 20rem),radial-gradient(circle at 10% 90%,rgba(42,139,255,.1),transparent 18rem),#edf4fb; }
  .login-wrap { max-width: 430px; padding: 30px 24px; border-radius: 22px; }
  .mobile-brand { display: flex; }
  .welcome h2 { font-size: 25px; }
  .sidebar { position: fixed; left: 0; top: 0; width: min(84vw, 280px); height: 100dvh; transform: translateX(-102%); transition: transform .24s var(--ease); }
  .sidebar.open, body.sidebar-open .sidebar, .sidebar-mask.show + .sidebar { transform: translateX(0); }
  .close-sidebar, .menu-button { display: inline-flex; }
  .topbar { padding: 0 14px; gap: 9px; }
  .breadcrumb, .top-search, .notice-button, .admin-profile > div { display: none; }
  #pageTitle { font-size: 18px; }
  .topbar-actions { gap: 6px; }
  .admin-profile { padding: 2px; border: 0; background: transparent; }
  .avatar { width: 35px; height: 35px; }
  .logout-button { display: inline-flex; min-height: 35px; padding: 0 10px; }
  .content-wrap { padding: 18px 16px 28px; }
  .section-toolbar { min-height: 0; margin-bottom: 16px; align-items: flex-start; }
  .section-toolbar h2 { font-size: 21px; }
  .section-toolbar > button, .section-toolbar .activity-toolbar { margin-left: auto; }
  .welcome-strip { align-items: flex-start; padding: 15px 16px; }
  .date-chip { flex: 0 0 auto; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .metric-card { min-height: 116px; padding: 14px; }
  .metric-card strong { font-size: 20px; }
  .dashboard-grid, .bottom-grid { grid-template-columns: 1fr; gap: 12px; }
  .panel, .settings-card, .settings-form, .share-setting-card { padding: 16px; border-radius: 14px; }
  .trend-panel, .status-panel { min-height: 0; }
  .chart-wrap { height: 210px; }
  .donut-wrap { grid-template-columns: 140px 1fr; }
  .donut { width: 140px; }
  .table-scroll, .product-table-scroll { overflow-x: auto; }
  table { min-width: 720px; }
  .product-list-toolbar, .order-toolbar, .category-toolbar { align-items: stretch; flex-wrap: wrap; padding: 12px; }
  .product-search, .order-search-box, .category-search { width: 100%; max-width: none; min-width: 0; }
  .product-status-filter { width: 100%; margin-left: 0; justify-content: space-between; }
  .product-status-filter select { width: 160px; }
  .home-media-tabs, .splash-tabs, .review-tabs { width: 100%; }
  .home-media-tab, .splash-tab, .review-tabs button { min-height: 40px; }
  .banner-settings { grid-template-columns: 1fr; align-items: stretch; }
  .banner-settings label { width: fit-content; }
  .banner-grid { grid-template-columns: 1fr; }
  .splash-media-grid { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
  .order-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-toolbar-meta { width: 100%; margin-left: 0; justify-content: space-between; }
  .order-filter-tabs { padding: 0 10px; }
  .order-filter-tabs button { min-height: 44px; }
  .order-card-list { padding: 10px; }
  .order-card-body { flex-wrap: wrap; }
  .review-filters, .filter-row { align-items: stretch; flex-direction: column; }
  .review-filters select, .filter-row .mini-search, .filter-row label:not(.mini-search) { width: 100%; max-width: none; }
  .activity-row { grid-template-columns: 1fr; }
  .category-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-list { grid-template-columns: 1fr; padding: 11px; }
  .category-channel-filter { order: 3; width: 100%; }
  .category-channel-filter button { flex: 1; }
  .category-result-count { margin-left: auto; }
  .settings-actions { flex-wrap: wrap; }
  #bannerDialog, #formDialog, #confirmDialog { max-height: calc(100dvh - 24px); border-radius: 17px; }
  .dialog-actions { position: sticky; bottom: 0; }
  #productDialog { height: 100dvh; }
  .product-workbench-bar { min-height: 62px; padding: 9px 12px; }
  .workbench-actions { display: none; }
  .product-workbench { padding: 13px 13px 90px; display: block; }
  .editor-card { margin-bottom: 11px; }
  .editor-card-head { padding: 12px; }
  .editor-card-head .detail-upload-button { min-height: 34px; padding: 0 9px; font-size: 11px; }
  .editor-card-body { padding: 13px; }
  .workbench-four-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-side-sticky { display: block; }
  .product-side-sticky .side-card { margin-bottom: 11px; }
  .main-image-dropzone { max-height: 540px; }
  .mobile-product-actions { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: 10px 13px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.5fr; gap: 9px; border-top: 1px solid var(--line); background: rgba(250, 251, 253, .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .mobile-product-actions button { min-height: 44px; }
  .toast { top: 12px; }
}

/* Responsive: compact phones -------------------------------------------- */
@media (max-width: 480px) {
  .content-wrap { padding: 14px; }
  .topbar { padding: 0 10px; }
  .logout-button { display: none; }
  .login-panel { padding: 18px 14px 76px; }
  .login-wrap { padding: 24px 20px; border-radius: 20px; }
  .mobile-brand { margin-bottom: 22px; }
  .login-card-icon { display: none; }
  .welcome { margin-bottom: 23px; }
  .welcome h2 { font-size: 24px; }
  #loginForm .field input, .login-button { min-height: 48px; }
  .trust-row { margin-top: 20px; }
  .section-toolbar { gap: 11px; }
  .section-toolbar p { max-width: 290px; }
  .section-toolbar > .primary-button { width: 100%; min-height: 42px; }
  .welcome-strip { display: block; border-radius: 13px; }
  .date-chip { width: fit-content; margin-top: 11px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 100px; border-radius: 13px; }
  .panel, .settings-card, .settings-form, .share-setting-card, .product-list-panel, .order-list-panel, .category-workspace, .banner-card { border-radius: 13px; }
  .panel-head { align-items: flex-start; }
  .chart-wrap { height: 185px; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  #orderStatusSummary { width: 100%; }
  .home-media-tabs, .splash-tabs, .review-tabs { border-radius: 10px; }
  .splash-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-overview-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .order-overview-grid article { min-height: 80px; padding: 11px; }
  .order-overview-icon { width: 32px; height: 32px; }
  .order-overview-grid strong { font-size: 18px; }
  .order-heading-note { display: none; }
  .order-card-head, .order-card-body, .order-card-foot { padding: 10px; }
  .order-card-head { align-items: flex-start; }
  .order-amount { width: 100%; margin-left: 0; }
  .activity-toolbar { width: 100%; }
  .activity-toolbar button { flex: 1; }
  .category-overview { grid-template-columns: 1fr; gap: 8px; }
  .category-overview article { padding: 11px 13px; }
  .category-overview strong { font-size: 19px; }
  .share-preview { min-height: 190px; }
  .settings-actions { flex-direction: column; align-items: stretch; }
  #settingsMessage { margin: 0; }
  .settings-actions button { width: 100%; }
  .dialog-head { min-height: 62px; padding: 12px 14px; }
  .dialog-actions { padding: 11px 14px; }
  .dialog-actions button { flex: 1; }
  .banner-upload { margin-left: 14px; margin-right: 14px; min-height: 160px; }
  #bannerImageFields, .banner-options { padding-left: 14px; padding-right: 14px; }
  .confirm-dialog-content { padding: 27px 18px 20px; }
  .product-workbench { padding-left: 10px; padding-right: 10px; }
  .workbench-heading h3 { font-size: 16px; }
  .workbench-four-col { grid-template-columns: 1fr; }
  .editor-card-head { align-items: flex-start; flex-wrap: wrap; }
  .editor-card-head .detail-upload-button { width: 100%; margin-left: 0; }
  .detail-images-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* iOS 26 blue Liquid Glass navigation ---------------------------------- */
:root {
  --ios-blue: #087bff;
  --ios-blue-bright: #3ba2ff;
  --ios-blue-deep: #045dd8;
  --ios-glass-line: rgba(255, 255, 255, .28);
}
.admin-shell {
  background:
    radial-gradient(circle at 18% -10%, rgba(43, 148, 255, .18), transparent 28rem),
    radial-gradient(circle at 100% 10%, rgba(112, 191, 255, .14), transparent 32rem),
    #edf4fc;
}
.sidebar {
  position: sticky;
  top: 12px;
  isolation: isolate;
  flex-basis: 264px;
  width: 264px;
  height: calc(100vh - 24px);
  margin: 12px 0 12px 12px;
  padding: 14px 12px 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 4%, rgba(115, 203, 255, .56), transparent 21rem),
    radial-gradient(circle at 100% 50%, rgba(31, 117, 255, .56), transparent 26rem),
    linear-gradient(165deg, rgba(8, 111, 235, .94), rgba(2, 65, 176, .96));
  box-shadow: 0 18px 52px rgba(0, 67, 157, .22), inset 0 1px rgba(255, 255, 255, .2), inset 0 -1px rgba(0, 52, 142, .16);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}
.sidebar::before,
.sidebar::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
}
.sidebar::before { width: 220px; height: 220px; left: -92px; top: 28%; background: rgba(99, 204, 255, .22); }
.sidebar::after { width: 190px; height: 190px; right: -110px; bottom: 6%; background: rgba(84, 129, 255, .32); }
.sidebar-brand {
  min-height: 70px;
  margin-bottom: 8px;
  padding: 8px 10px 15px;
  gap: 12px;
  border-bottom-color: rgba(255, 255, 255, .18);
}
.admin-logo {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12));
  box-shadow: inset 0 1px rgba(255, 255, 255, .42), 0 10px 24px rgba(0, 42, 122, .2);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.admin-logo svg { width: 25px; height: 25px; }
.sidebar-brand strong { font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.sidebar-brand small { color: rgba(255, 255, 255, .64); font-size: 11px; }
#mainNav { margin: 4px 0 10px; padding: 0 1px 12px; }
.nav-section-label {
  margin: 15px 10px 6px;
  color: rgba(255, 255, 255, .5);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}
.nav-section-label:first-child { margin-top: 5px; }
.nav-item {
  min-height: 46px;
  margin: 3px 0;
  padding: 0 10px;
  gap: 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(255, 255, 255, .78);
  background: transparent;
  font-size: 13px;
  font-weight: 620;
  transform: none;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.nav-item svg {
  width: 20px;
  height: 20px;
  padding: 1px;
  overflow: visible;
  stroke-width: 1.9;
  transition: transform .2s var(--ease);
}
.nav-item:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  transform: translateX(2px);
}
.nav-item:hover svg { transform: scale(1.06); }
.nav-item.active {
  color: var(--ios-blue-deep);
  border-color: rgba(255, 255, 255, .72);
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(225, 244, 255, .88));
  box-shadow: 0 10px 26px rgba(0, 47, 135, .25), inset 0 1px rgba(255, 255, 255, .96), inset 0 -1px rgba(121, 187, 255, .24);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
}
.nav-item.active::before { display: none; }
.nav-item.active svg { color: var(--ios-blue); stroke-width: 2.15; }
.nav-item b {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid rgba(255, 255, 255, .72);
  background: #ff453a;
  box-shadow: 0 4px 10px rgba(111, 11, 5, .23);
  font-size: 10px;
}
.nav-item.active b { border-color: #fff; }
.sidebar-foot {
  margin: auto 1px 0;
  padding: 13px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 15px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.sidebar-foot small { color: rgba(255, 255, 255, .58); }
.status-dot { background: #66f08b; box-shadow: 0 0 0 4px rgba(102, 240, 139, .16), 0 0 12px rgba(102, 240, 139, .5); }
.topbar {
  top: 10px;
  min-height: 64px;
  margin: 10px 18px 0;
  padding: 0 16px 0 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(247, 252, 255, .86), rgba(218, 239, 255, .72));
  box-shadow: 0 12px 36px rgba(19, 91, 166, .12), inset 0 1px rgba(255, 255, 255, .9);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
}
.breadcrumb { color: #6283a9; font-weight: 600; }
#pageTitle { color: #103f74; }
.top-search input {
  border-color: rgba(72, 148, 225, .18);
  color: #163f6c;
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
}
.top-search input:focus { border-color: rgba(0, 122, 255, .5); background: rgba(255, 255, 255, .9); }
.top-search svg { color: #5f89b5; }
.topbar .icon-button {
  border-color: rgba(55, 137, 222, .16);
  color: var(--ios-blue);
  background: rgba(255, 255, 255, .58);
}
.admin-profile {
  border-color: rgba(71, 144, 218, .16);
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px rgba(255, 255, 255, .78);
}
.avatar { background: linear-gradient(145deg, #49adff, #0878f5); box-shadow: 0 5px 14px rgba(0, 105, 224, .26); }
.logout-button { color: #ec3f37; border-color: rgba(255, 69, 58, .13); background: rgba(255, 255, 255, .48); }
.content-wrap { padding-top: 26px; }
@media (max-width: 768px) {
  .sidebar {
    top: 8px;
    left: 8px;
    width: min(calc(86vw - 8px), 292px);
    height: calc(100dvh - 16px);
    margin: 0;
    padding-top: max(14px, env(safe-area-inset-top));
    border-radius: 24px;
    transform: translateX(calc(-100% - 18px));
  }
  .sidebar.open, body.sidebar-open .sidebar, .sidebar-mask.show + .sidebar { transform: translateX(0); }
  .nav-section-label { margin-top: 12px; }
  .topbar { top: 8px; min-height: 58px; margin: 8px 10px 0; padding: 0 10px; border-radius: 17px; }
  .menu-button { color: var(--ios-blue-deep) !important; }
  .content-wrap { padding-top: 20px; }
}
@media (max-width: 480px) {
  .topbar { margin-left: 7px; margin-right: 7px; }
  .sidebar-brand { padding-left: 7px; padding-right: 7px; }
  .nav-item { min-height: 45px; }
}

/* iOS 26 overview screen ------------------------------------------------ */
[data-section="overview"] {
  --overview-blue: #087bff;
  --overview-blue-soft: rgba(8, 123, 255, .1);
  --overview-surface: rgba(255, 255, 255, .94);
  --overview-radius: 24px;
  color: #12263f;
}
[data-section="overview"].active { display: flex; flex-direction: column; gap: 20px; }
[data-section="overview"] .welcome-strip {
  position: relative;
  min-height: 132px;
  margin: 0;
  padding: 26px 28px;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(142, 219, 255, .48), transparent 17rem),
    linear-gradient(135deg, #0b86ff 0%, #096fdc 55%, #075ac6 100%);
  box-shadow: 0 18px 42px rgba(7, 104, 211, .2), inset 0 1px rgba(255, 255, 255, .25);
}
[data-section="overview"] .welcome-strip::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -76px;
  bottom: -142px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(255, 255, 255, .055), 0 0 0 62px rgba(255, 255, 255, .035);
}
[data-section="overview"] .welcome-strip > div { position: relative; z-index: 1; }
[data-section="overview"] .welcome-strip > div > span {
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}
[data-section="overview"] .welcome-strip h2 { margin-top: 5px; color: #fff; font-size: clamp(24px, 2.2vw, 32px); font-weight: 720; letter-spacing: -.035em; }
[data-section="overview"] .welcome-strip p { margin-top: 8px; color: rgba(255, 255, 255, .78); font-size: 13px; }
[data-section="overview"] .welcome-strip p strong { color: #fff; }
[data-section="overview"] .date-chip {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
[data-section="overview"] .metric-grid { margin: 0; gap: 14px; }
[data-section="overview"] .metric-card {
  min-height: 142px;
  padding: 20px;
  align-items: flex-start;
  gap: 15px;
  border: 0;
  border-radius: var(--overview-radius);
  background: var(--overview-surface);
  box-shadow: 0 10px 30px rgba(37, 79, 125, .08), inset 0 0 0 1px rgba(64, 117, 174, .08);
}
[data-section="overview"] .metric-card::before { display: none; }
[data-section="overview"] .metric-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(37, 79, 125, .12), inset 0 0 0 1px rgba(64, 117, 174, .09); }
[data-section="overview"] .metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .75);
}
[data-section="overview"] .metric-icon svg { width: 22px; height: 22px; }
[data-section="overview"] .metric-card span { color: #71849a; font-size: 12px; font-weight: 600; }
[data-section="overview"] .metric-card strong { margin: 7px 0 3px; color: #102842; font-size: clamp(24px, 2vw, 30px); font-weight: 730; letter-spacing: -.035em; }
[data-section="overview"] .metric-card small { color: #8a9aac; font-size: 11px; }
[data-section="overview"] .dashboard-grid { margin: 0; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr); gap: 16px; }
[data-section="overview"] .bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-section="overview"] .panel {
  padding: 22px;
  border: 0;
  border-radius: var(--overview-radius);
  background: var(--overview-surface);
  box-shadow: 0 10px 30px rgba(37, 79, 125, .075), inset 0 0 0 1px rgba(64, 117, 174, .075);
}
[data-section="overview"] .trend-panel,
[data-section="overview"] .status-panel { min-height: 370px; }
[data-section="overview"] .panel-head { margin-bottom: 20px; padding: 0; border: 0; }
[data-section="overview"] .panel-head h3 { color: #102842; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
[data-section="overview"] .panel-head p { color: #8293a6; font-size: 12px; }
[data-section="overview"] .legend { color: #71859b; }
[data-section="overview"] .legend i { border-radius: 50%; background: var(--overview-blue); box-shadow: 0 0 0 4px var(--overview-blue-soft); }
[data-section="overview"] .chart-wrap { height: 250px; }
[data-section="overview"] .grid-lines { stroke: #e9f0f7; }
[data-section="overview"] .chart-line { stroke: var(--overview-blue); stroke-width: 3.5; }
[data-section="overview"] .chart-dots circle { stroke: var(--overview-blue); stroke-width: 3; }
[data-section="overview"] .y-axis,
[data-section="overview"] .x-axis { color: #91a0b0; }
[data-section="overview"] .donut-wrap { min-height: 270px; grid-template-columns: 156px minmax(130px, 1fr); justify-content: center; }
[data-section="overview"] .donut {
  width: 156px;
  background: conic-gradient(#ff9f0a 0 24%, #30d158 24% 67%, #ff453a 67% 78%, #e7eef6 78%);
  box-shadow: 0 14px 30px rgba(31, 88, 145, .1);
}
[data-section="overview"] .donut::after { width: 68%; height: 68%; background: #fff; box-shadow: inset 0 0 0 1px rgba(50, 102, 158, .05); }
[data-section="overview"] .donut strong { color: #102842; font-size: 28px; letter-spacing: -.04em; }
[data-section="overview"] #orderStatusSummary { gap: 7px; }
[data-section="overview"] #orderStatusSummary li {
  min-height: 42px;
  padding: 0 11px;
  border-radius: 12px;
  color: #5e7187;
  background: #f5f8fc;
}
[data-section="overview"] #orderStatusSummary i { border-radius: 50%; }
[data-section="overview"] #orderStatusSummary strong { color: #18334f; }
[data-section="overview"] .text-button { min-height: 36px; padding: 0 12px; border-radius: 18px; color: var(--overview-blue); background: var(--overview-blue-soft); }
[data-section="overview"] .table-scroll { border-radius: 15px; }
[data-section="overview"] table { font-size: 12px; }
[data-section="overview"] th { height: 42px; padding: 9px 12px; color: #75889d; background: #f5f8fc; }
[data-section="overview"] td { height: 56px; padding: 9px 12px; }
[data-section="overview"] .recent-list { gap: 0; }
[data-section="overview"] .recent-list > *,
[data-section="overview"] .recent-order { min-height: 57px; padding: 9px 3px; }
@media (max-width: 1180px) {
  [data-section="overview"] .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-section="overview"] .dashboard-grid { grid-template-columns: 1fr; }
  [data-section="overview"] .status-panel { min-height: auto; }
  [data-section="overview"] .donut-wrap { grid-template-columns: 170px minmax(180px, 320px); }
}
@media (max-width: 768px) {
  [data-section="overview"].active { gap: 14px; }
  [data-section="overview"] .welcome-strip { min-height: 154px; padding: 22px; align-items: flex-start; }
  [data-section="overview"] .date-chip { align-self: flex-start; }
  [data-section="overview"] .metric-grid { gap: 11px; }
  [data-section="overview"] .metric-card { min-height: 128px; padding: 16px; }
  [data-section="overview"] .panel { padding: 18px; }
  [data-section="overview"] .trend-panel { min-height: 350px; overflow: hidden; }
  [data-section="overview"] .chart-wrap { height: 225px; min-width: 570px; }
  [data-section="overview"] .trend-panel .panel-head,
  [data-section="overview"] .trend-panel .x-axis,
  [data-section="overview"] .trend-panel .chart-wrap { width: 570px; }
  [data-section="overview"] .trend-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [data-section="overview"] .donut-wrap { grid-template-columns: 150px minmax(130px, 1fr); }
}
@media (max-width: 480px) {
  [data-section="overview"] .welcome-strip { min-height: 178px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 24px; }
  [data-section="overview"] .welcome-strip h2 { font-size: 25px; }
  [data-section="overview"] .metric-grid { grid-template-columns: 1fr; }
  [data-section="overview"] .metric-card { min-height: 110px; flex-direction: row; align-items: center; border-radius: 20px; }
  [data-section="overview"] .metric-card strong { font-size: 25px; }
  [data-section="overview"] .panel { padding: 16px; border-radius: 20px; }
  [data-section="overview"] .donut-wrap { grid-template-columns: 1fr; gap: 20px; }
  [data-section="overview"] #orderStatusSummary { width: 100%; }
  [data-section="overview"] .bottom-grid { grid-template-columns: 1fr; }
}

/* Simplified shell and overview lists ----------------------------------- */
.mobile-topbar { display: none; }
.admin-main { min-width: 0; }
.content-wrap { padding-top: 20px; }
[data-section="overview"].active { gap: 16px; }
[data-section="overview"] .welcome-strip {
  min-height: 112px;
  padding: 22px 24px;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7, 104, 211, .16);
}
[data-section="overview"] .welcome-strip h2 { font-size: clamp(23px, 2vw, 29px); }
[data-section="overview"] .metric-grid { gap: 12px; }
[data-section="overview"] .metric-card {
  min-height: 116px;
  padding: 17px 18px;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0 5px 18px rgba(37, 79, 125, .055), inset 0 0 0 1px rgba(64, 117, 174, .06);
}
[data-section="overview"] .metric-card:hover { transform: none; box-shadow: 0 7px 22px rgba(37, 79, 125, .075), inset 0 0 0 1px rgba(64, 117, 174, .07); }
[data-section="overview"] .metric-icon { width: 42px; height: 42px; border-radius: 13px; }
[data-section="overview"] .metric-card strong { margin-top: 5px; font-size: clamp(23px, 1.8vw, 28px); }
[data-section="overview"] .panel {
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(37, 79, 125, .06), inset 0 0 0 1px rgba(64, 117, 174, .06);
}
[data-section="overview"] .overview-list-panel { min-height: 390px; padding: 20px; }
[data-section="overview"] .overview-list-panel .panel-head { min-height: 44px; margin-bottom: 8px; }
[data-section="overview"] .hot-product-list,
[data-section="overview"] .recent-list { display: grid; gap: 0; }
[data-section="overview"] .hot-product-item,
[data-section="overview"] .recent-item {
  min-width: 0;
  min-height: 69px;
  padding: 10px 4px;
  display: grid;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #edf2f7;
}
[data-section="overview"] .hot-product-item:last-child,
[data-section="overview"] .recent-item:last-child { border-bottom: 0; }
[data-section="overview"] .hot-product-item { grid-template-columns: 25px 48px minmax(0, 1fr) auto; }
[data-section="overview"] .hot-rank {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #6f8297;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 750;
}
[data-section="overview"] .hot-product-item:nth-child(1) .hot-rank { color: #9c6200; background: #fff2cd; }
[data-section="overview"] .hot-product-item:nth-child(2) .hot-rank { color: #53667a; background: #edf1f5; }
[data-section="overview"] .hot-product-item:nth-child(3) .hot-rank { color: #9a542f; background: #f9e5d9; }
[data-section="overview"] .hot-product-image {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: cover;
  border-radius: 13px;
  background: #edf2f7;
}
[data-section="overview"] .hot-product-copy,
[data-section="overview"] .recent-copy { min-width: 0; }
[data-section="overview"] .hot-product-copy strong,
[data-section="overview"] .recent-copy strong {
  display: block;
  overflow: hidden;
  color: #18334f;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-section="overview"] .hot-product-copy small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #8a9bad;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-section="overview"] .hot-product-meta { min-width: 76px; text-align: right; }
[data-section="overview"] .hot-product-meta strong { display: block; color: #087bff; font-size: 13px; }
[data-section="overview"] .hot-product-meta small { display: block; margin-top: 4px; color: #8a9bad; font-size: 11px; }
[data-section="overview"] .recent-item { grid-template-columns: 42px minmax(0, 1fr) auto; }
[data-section="overview"] .recent-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  color: #087bff;
  background: #eaf4ff;
  font-size: 14px;
  font-weight: 750;
}
[data-section="overview"] .recent-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
[data-section="overview"] .recent-avatar span { width: 100%; height: 100%; display: grid; place-items: center; }
[data-section="overview"] .recent-avatar span[hidden] { display: none; }
[data-section="overview"] .recent-copy small,
[data-section="overview"] .recent-copy em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-section="overview"] .recent-copy small { margin-top: 3px; color: #647a91; font-size: 11px; }
[data-section="overview"] .recent-copy em { margin-top: 3px; color: #9aa8b7; font-size: 10px; font-style: normal; }
[data-section="overview"] .recent-meta { min-width: 86px; display: grid; justify-items: end; gap: 6px; }
[data-section="overview"] .recent-meta > strong { color: #18334f; font-size: 13px; }
[data-section="overview"] .status-tag {
  min-height: 23px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  color: #61758a;
  background: #edf2f7;
  font-size: 10px;
  font-weight: 650;
}
[data-section="overview"] .status-tag.pending { color: #9b6100; background: #fff2d6; }
[data-section="overview"] .status-tag.paid,
[data-section="overview"] .status-tag.active,
[data-section="overview"] .status-tag.success,
[data-section="overview"] .status-tag.completed { color: #187b38; background: #e7f8ec; }
[data-section="overview"] .status-tag.cancelled { color: #c43630; background: #ffebe9; }
@media (max-width: 768px) {
  .mobile-topbar {
    position: sticky;
    z-index: 30;
    top: 8px;
    width: 54px;
    min-height: 54px;
    margin: 8px 0 -4px 10px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    background: rgba(232, 245, 255, .82);
    box-shadow: 0 9px 24px rgba(19, 91, 166, .12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .mobile-topbar .menu-button { display: grid; }
  .content-wrap { padding-top: 14px; }
  [data-section="overview"] .overview-list-panel { min-height: auto; }
}
@media (max-width: 480px) {
  [data-section="overview"] .welcome-strip { min-height: 160px; }
  [data-section="overview"] .hot-product-item { grid-template-columns: 22px 44px minmax(0, 1fr) auto; gap: 8px; }
  [data-section="overview"] .hot-product-image { width: 44px; height: 44px; }
  [data-section="overview"] .recent-item { grid-template-columns: 38px minmax(0, 1fr); }
  [data-section="overview"] .recent-avatar { width: 38px; height: 38px; border-radius: 12px; }
  [data-section="overview"] .recent-meta { grid-column: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; }
}

/* iOS 26 order management and sidebar account -------------------------- */
.sidebar-account {
  min-height: 66px;
  margin: auto 1px 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 17px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px rgba(255, 255, 255, .15);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.sidebar-account-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 13px;
  color: #087bff;
  background: rgba(255, 255, 255, .94);
  font-size: 13px;
  font-weight: 750;
}
.sidebar-account div { min-width: 0; }
.sidebar-account small,
.sidebar-account strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account small { color: rgba(255, 255, 255, .57); font-size: 10px; }
.sidebar-account strong { margin-top: 2px; font-size: 12px; font-weight: 680; }
.sidebar-account button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 12px;
  color: rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .09);
}
.sidebar-account button:hover { color: #fff; background: rgba(255, 69, 58, .38); }
.sidebar-account button svg { width: 18px; height: 18px; }
[data-section="orders"] {
  --order-blue: #087bff;
  --order-surface: rgba(255, 255, 255, .95);
  --order-text: #173450;
  --order-muted: #7d90a4;
}
[data-section="orders"].active { gap: 16px; }
[data-section="orders"] .order-page-heading {
  min-height: 68px;
  padding: 0 22px;
  align-items: center;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(139, 218, 255, .42), transparent 13rem),
    linear-gradient(135deg, #0b86ff, #0867d5 68%, #0759bf);
  box-shadow: 0 10px 25px rgba(7, 104, 211, .14);
}
[data-section="orders"] .order-page-heading h2 { color: #fff; font-size: 22px; letter-spacing: -.03em; }
[data-section="orders"] .order-heading-note {
  min-height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 20px;
  color: #187c39;
  background: rgba(52, 199, 89, .1);
}
[data-section="orders"] .order-heading-note i { width: 8px; height: 8px; border-radius: 50%; background: #63ee89; box-shadow: 0 0 0 4px rgba(99, 238, 137, .14); }
[data-section="orders"] .order-heading-note span { color: #187c39; font-size: 11px; font-weight: 650; }
[data-section="orders"] .order-overview-grid { gap: 11px; }
[data-section="orders"] .order-overview-grid article {
  min-height: 104px;
  padding: 16px;
  border: 0;
  border-radius: 20px;
  background: var(--order-surface);
  box-shadow: 0 6px 20px rgba(37, 79, 125, .06), inset 0 0 0 1px rgba(64, 117, 174, .06);
}
[data-section="orders"] .order-overview-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 15px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .7);
}
[data-section="orders"] .order-overview-grid small { color: var(--order-muted); font-size: 11px; font-weight: 600; }
[data-section="orders"] .order-overview-grid strong { margin-top: 5px; color: var(--order-text); font-size: 25px; letter-spacing: -.04em; }
[data-section="orders"] .order-list-panel {
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--order-surface);
  box-shadow: 0 7px 24px rgba(37, 79, 125, .065), inset 0 0 0 1px rgba(64, 117, 174, .06);
}
[data-section="orders"] .order-toolbar {
  min-height: 72px;
  padding: 14px 18px;
  border: 0;
  background: transparent;
}
[data-section="orders"] .order-search-box { max-width: 440px; }
[data-section="orders"] .order-search-box input {
  min-height: 44px;
  border: 0;
  border-radius: 15px;
  background: #f1f6fb;
  box-shadow: inset 0 0 0 1px rgba(63, 119, 178, .07);
}
[data-section="orders"] .order-search-box input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(8, 123, 255, .13), inset 0 0 0 1px rgba(8, 123, 255, .34); }
[data-section="orders"] .order-toolbar-meta { color: var(--order-muted); }
[data-section="orders"] .order-refresh {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 19px;
  color: var(--order-blue);
  background: rgba(8, 123, 255, .09);
  font-size: 11px;
  font-weight: 650;
}
[data-section="orders"] .order-filter-tabs {
  margin: 0 18px;
  padding: 4px;
  gap: 3px;
  border: 0;
  border-radius: 15px;
  background: #edf3f8;
}
[data-section="orders"] .order-filter-tabs button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  color: #70849a;
}
[data-section="orders"] .order-filter-tabs button.active {
  color: var(--order-blue);
  background: #fff;
  box-shadow: 0 3px 10px rgba(45, 88, 133, .09), inset 0 0 0 1px rgba(70, 125, 184, .06);
}
[data-section="orders"] .order-filter-tabs button b { background: rgba(115, 138, 163, .12); }
[data-section="orders"] .order-filter-tabs button.active b { color: #fff; background: var(--order-blue); }
[data-section="orders"] .order-card-list { padding: 16px 18px 18px; gap: 12px; }
[data-section="orders"] .order-card {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e8eef5, 0 4px 14px rgba(37, 79, 125, .045);
}
[data-section="orders"] .order-card-head {
  min-height: 58px;
  padding: 12px 16px;
  border: 0;
  background: #f7faff;
}
[data-section="orders"] .order-number small,
[data-section="orders"] .order-customer small,
[data-section="orders"] .order-product small,
[data-section="orders"] .order-payment small { display: block; margin-bottom: 4px; color: #91a0b1; font-size: 10px; font-weight: 600; }
[data-section="orders"] .order-number strong { color: #536b83; font-size: 12px; font-weight: 620; }
[data-section="orders"] .order-card-time { display: flex; align-items: center; gap: 9px; color: #8b9bad; font-size: 10px; }
[data-section="orders"] .order-card-body {
  padding: 17px 16px;
  display: grid;
  grid-template-columns: minmax(210px, .85fr) minmax(260px, 1.4fr) minmax(140px, .5fr);
  align-items: center;
  gap: 22px;
}
[data-section="orders"] .order-customer { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 11px; }
[data-section="orders"] .order-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  color: var(--order-blue);
  background: #eaf4ff;
  font-weight: 750;
}
[data-section="orders"] .order-avatar img,
[data-section="orders"] .order-avatar span { width: 100%; height: 100%; }
[data-section="orders"] .order-avatar img { display: block; object-fit: cover; }
[data-section="orders"] .order-avatar span { display: grid; place-items: center; }
[data-section="orders"] .order-avatar span[hidden] { display: none; }
[data-section="orders"] .order-customer > div:last-child,
[data-section="orders"] .order-product { min-width: 0; }
[data-section="orders"] .order-customer strong,
[data-section="orders"] .order-product strong { display: block; overflow: hidden; color: var(--order-text); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
[data-section="orders"] .order-customer span,
[data-section="orders"] .order-product span,
[data-section="orders"] .order-payment span { display: block; margin-top: 5px; overflow: hidden; color: var(--order-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
[data-section="orders"] .order-payment { min-width: 0; text-align: right; }
[data-section="orders"] .order-payment > strong { display: block; color: var(--order-blue); font-size: 19px; letter-spacing: -.025em; }
[data-section="orders"] .order-card-foot {
  min-height: 42px;
  padding: 9px 16px;
  justify-content: space-between;
  border: 0;
  background: #fbfcfe;
  color: #9aa8b7;
  font-size: 10px;
}
[data-section="orders"] .order-empty { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 7px; color: #8a9caf; text-align: center; }
[data-section="orders"] .order-empty > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--order-blue); background: #eaf4ff; font-size: 22px; }
[data-section="orders"] .order-empty strong { color: var(--order-text); }
[data-section="orders"] .order-empty p { font-size: 11px; }
@media (max-width: 1180px) {
  [data-section="orders"] .order-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-section="orders"] .order-card-body { grid-template-columns: minmax(190px, .9fr) minmax(220px, 1.2fr) 130px; gap: 14px; }
}
@media (max-width: 768px) {
  .sidebar-account { margin-bottom: max(0px, env(safe-area-inset-bottom)); }
  [data-section="orders"] .order-page-heading { min-height: 64px; padding: 0 18px; align-items: center; }
  [data-section="orders"] .order-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  [data-section="orders"] .order-overview-grid article { min-height: 92px; padding: 13px; }
  [data-section="orders"] .order-toolbar { align-items: stretch; flex-direction: column; }
  [data-section="orders"] .order-search-box { width: 100%; max-width: none; min-width: 0; }
  [data-section="orders"] .order-toolbar-meta { width: 100%; margin: 0; justify-content: space-between; }
  [data-section="orders"] .order-filter-tabs { margin: 0 12px; }
  [data-section="orders"] .order-card-list { padding: 13px 12px 14px; }
  [data-section="orders"] .order-card-body { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  [data-section="orders"] .order-product { padding: 13px 0; border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; }
  [data-section="orders"] .order-payment { text-align: left; }
}
@media (max-width: 480px) {
  [data-section="orders"] .order-page-heading { min-height: 60px; padding: 0 16px; align-items: center; border-radius: 18px; }
  [data-section="orders"] .order-page-heading h2 { font-size: 20px; }
  [data-section="orders"] .order-overview-grid strong { font-size: 22px; }
  [data-section="orders"] .order-list-panel { border-radius: 20px; }
  [data-section="orders"] .order-filter-tabs { overflow-x: auto; border-radius: 13px; }
  [data-section="orders"] .order-card-head { align-items: flex-start; }
  [data-section="orders"] .order-card-time { align-items: flex-end; flex-direction: column; }
  [data-section="orders"] .order-card-foot { align-items: flex-start; flex-direction: column; }
}

/* Compact order data list ----------------------------------------------- */
[data-section="orders"] .order-list-head,
[data-section="orders"] .order-card {
  display: grid;
  grid-template-columns: minmax(155px, 1.05fr) minmax(190px, 1.15fr) minmax(240px, 1.7fr) 105px 92px 128px;
  align-items: center;
  column-gap: 16px;
}
[data-section="orders"] .order-list-head {
  min-height: 42px;
  margin: 13px 18px 0;
  padding: 0 14px;
  border-bottom: 1px solid #e8eef5;
  color: #8798aa;
  font-size: 10px;
  font-weight: 650;
}
[data-section="orders"] .order-card-list { padding-top: 0; gap: 0; }
[data-section="orders"] .order-card {
  min-height: 76px;
  padding: 11px 14px;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #edf2f7;
}
[data-section="orders"] .order-card:last-child { border-bottom: 0; }
[data-section="orders"] .order-card:hover { background: #f8fbff; }
[data-section="orders"] .order-card > section { min-width: 0; }
[data-section="orders"] .order-number strong,
[data-section="orders"] .order-time strong {
  display: block;
  overflow: hidden;
  color: #38536d;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-section="orders"] .order-card small {
  display: block;
  margin: 4px 0 0;
  overflow: hidden;
  color: #94a3b3;
  font-size: 9px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-section="orders"] .order-customer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
[data-section="orders"] .order-avatar { width: 38px; height: 38px; border-radius: 12px; }
[data-section="orders"] .order-customer strong,
[data-section="orders"] .order-product strong {
  display: block;
  overflow: hidden;
  color: var(--order-text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-section="orders"] .order-payment { text-align: left; }
[data-section="orders"] .order-payment > strong { color: var(--order-blue); font-size: 15px; }
[data-section="orders"] .order-status { display: flex; align-items: center; }
[data-section="orders"] .order-time strong { color: #526a82; }
[data-section="orders"] .order-card [data-label]::before { display: none; }
@media (max-width: 1180px) {
  [data-section="orders"] .order-list-panel { overflow-x: auto; }
  [data-section="orders"] .order-toolbar,
  [data-section="orders"] .order-filter-tabs { min-width: 920px; }
  [data-section="orders"] .order-list-head,
  [data-section="orders"] .order-card { width: calc(100% - 36px); min-width: 920px; }
}
@media (max-width: 768px) {
  [data-section="orders"] .order-list-panel { overflow: hidden; }
  [data-section="orders"] .order-toolbar,
  [data-section="orders"] .order-filter-tabs { min-width: 0; }
  [data-section="orders"] .order-list-head { display: none; }
  [data-section="orders"] .order-card-list { padding-top: 13px; gap: 10px; }
  [data-section="orders"] .order-card {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 13px 12px;
    border: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e8eef5;
  }
  [data-section="orders"] .order-card > section::before {
    display: block;
    margin-bottom: 5px;
    color: #99a7b6;
    content: attr(data-label);
    font-size: 9px;
    font-weight: 600;
  }
  [data-section="orders"] .order-number { grid-column: 1; }
  [data-section="orders"] .order-status { grid-column: 2; grid-row: 1; align-self: start; justify-content: flex-end; }
  [data-section="orders"] .order-status::before { display: none !important; }
  [data-section="orders"] .order-customer,
  [data-section="orders"] .order-product { grid-column: 1 / -1; }
  [data-section="orders"] .order-product { padding: 11px 0; border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; }
  [data-section="orders"] .order-payment { grid-column: 1; }
  [data-section="orders"] .order-time { grid-column: 2; text-align: right; }
}
@media (max-width: 420px) {
  [data-section="orders"] .order-card { grid-template-columns: minmax(0, 1fr) 95px; }
  [data-section="orders"] .order-number strong { font-size: 10px; }
}

/* iOS 26 unified administration pages ---------------------------------- */
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) {
  --page-blue: #087bff;
  --page-text: #173450;
  --page-muted: #7d90a4;
  --page-surface: #fff;
}
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]).active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) .compact-blue-heading {
  min-height: 66px;
  margin: 0;
  padding: 0 22px;
  align-items: center;
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(circle at 88% 12%, rgba(139, 218, 255, .42), transparent 13rem), linear-gradient(135deg, #0b86ff, #0867d5 68%, #0759bf);
  box-shadow: 0 10px 25px rgba(7, 104, 211, .14);
}
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) .compact-blue-heading h2 {
  color: #fff;
  font-size: 22px;
  letter-spacing: -.03em;
}
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) .compact-blue-heading > .primary-button,
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) .compact-blue-heading .activity-toolbar button {
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 4px 12px rgba(4,70,145,.12);
}
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) .compact-blue-heading button:hover { background: rgba(255,255,255,.25); }
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) :is(.panel, .settings-card, .product-list-panel, .category-workspace, .share-setting-card, .settings-form) {
  border: 0;
  border-radius: 20px;
  background: var(--page-surface);
  box-shadow: 0 7px 24px rgba(37,79,125,.065), inset 0 0 0 1px rgba(64,117,174,.06);
}
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="categories"], [data-section="users"]) :is(input, select, textarea) {
  border: 0;
  border-radius: 13px;
  background: #f1f6fb;
  box-shadow: inset 0 0 0 1px rgba(63,119,178,.07);
}
:is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="categories"], [data-section="users"]) :is(input, select, textarea):focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(8,123,255,.13), inset 0 0 0 1px rgba(8,123,255,.34);
}
:is([data-section="banners"], [data-section="splash-settings"], [data-section="review-management"]) :is(.home-media-tabs, .splash-tabs, .review-tabs) {
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 15px;
  background: #edf3f8;
}
:is([data-section="banners"], [data-section="splash-settings"], [data-section="review-management"]) :is(.home-media-tab, .splash-tab, .review-tabs button) { min-height: 38px; border-radius: 12px; color: #70849a; }
:is([data-section="banners"], [data-section="splash-settings"], [data-section="review-management"]) :is(.home-media-tab.active, .splash-tab.active, .review-tabs button.active) { color: var(--page-blue); background: #fff; box-shadow: 0 3px 10px rgba(45,88,133,.09), inset 0 0 0 1px rgba(70,125,184,.06); }

[data-section="products"] .product-list-panel { overflow: hidden; }
[data-section="products"] .product-list-toolbar { min-height: 68px; padding: 12px 18px; border: 0; background: transparent; }
[data-section="products"] .product-search { max-width: 440px; }
[data-section="products"] .product-search input { min-height: 44px; }
[data-section="products"] .product-button-filter { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
[data-section="products"] .product-button-filter:first-of-type { margin-left: auto; }
[data-section="products"] .product-button-filter > span { color: #7b8da1; font-size: 10px; font-weight: 620; }
[data-section="products"] .product-filter-buttons {
  padding: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  border-radius: 13px;
  background: #edf3f8;
}
[data-section="products"] .product-filter-buttons button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  color: #70849a;
  background: transparent;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
[data-section="products"] .product-filter-buttons button.active {
  color: #087bff;
  background: #fff;
  box-shadow: 0 3px 9px rgba(45, 88, 133, .09), inset 0 0 0 1px rgba(70, 125, 184, .06);
}
[data-section="products"] .product-table-scroll { padding: 0 18px 14px; }
[data-section="products"] .product-management-table { min-width: 920px; color: var(--page-text); font-size: 12px; }
[data-section="products"] .product-management-table th { height: 40px; padding: 8px 11px; color: #8798aa; background: #f5f8fc; }
[data-section="products"] .product-management-table td { height: 66px; padding: 9px 11px; }
[data-section="products"] .table-product-image { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: #edf3f8; }
[data-section="products"] .product-cell strong { max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-section="products"] .cell-sub { display: block; margin-top: 3px; color: #96a4b3; font-size: 10px; }
[data-section="products"] .action-group { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
[data-section="products"] .action-group .action-button { min-height: 30px; padding: 0 9px; }
#productDialog { background: #edf3f8; }
#productDialog .editor-card, #productDialog .side-card { border-color: rgba(205,218,232,.8); border-radius: 18px; background: #fff; }
#productDialog .product-workbench-bar { color: #173450; background: rgba(248,251,255,.92); }

[data-section="banners"] .banner-settings { margin: 0; grid-template-columns: minmax(240px,1fr) 150px auto; }
[data-section="banners"] .banner-grid { display: flex; flex-direction: column; gap: 12px; }
[data-section="banners"] .banner-card { display: flex; align-items: stretch; gap: 16px; padding: 12px 14px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 7px 22px rgba(37,79,125,.065), inset 0 0 0 1px rgba(64,117,174,.06); }
[data-section="banners"] .banner-preview-wrap { flex: 0 0 92px; width: 92px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; background: #edf3f8; }
[data-section="banners"] .banner-card-copy { flex: 1; min-width: 0; padding: 4px 0; display: flex; flex-direction: column; justify-content: center; }
[data-section="banners"] .banner-card-copy > div { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; color: var(--page-muted); font-size: 11px; }
[data-section="banners"] .banner-card-actions { flex: 0 0 auto; padding: 0; align-self: center; }
[data-section="banners"] .settings-card { max-width: 920px; margin: 0; }
[data-section="banners"] .home-media-preview { min-height: 250px; border: 0; border-radius: 16px; background: #f1f6fb; box-shadow: inset 0 0 0 1px rgba(63,119,178,.07); }
[data-section="banners"] .home-media-preview img, [data-section="banners"] .home-media-preview video { width: 100%; max-height: 430px; object-fit: contain; }

[data-section="splash-settings"] .settings-card { max-width: 980px; margin: 0; }
[data-section="splash-settings"] .splash-media-grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; }
[data-section="splash-settings"] .splash-media-card { overflow: hidden; border-radius: 16px; background: #f1f6fb; box-shadow: inset 0 0 0 1px rgba(63,119,178,.09); }
[data-section="splash-settings"] .splash-media-card > img, [data-section="splash-settings"] .splash-media-card > video { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
[data-section="splash-settings"] .splash-media-card-footer { min-height: 42px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; color: var(--page-muted); font-size: 11px; }
[data-section="splash-settings"] .splash-media-card-footer button { min-height: 28px; padding: 0 9px; border-radius: 9px; color: #d6322b; background: #ffefed; font-size: 11px; }
[data-section="splash-settings"] .splash-popup-preview { min-height: 260px; border: 0; border-radius: 16px; background: #f1f6fb; box-shadow: inset 0 0 0 1px rgba(63,119,178,.07); }

[data-section="review-management"] > .panel { padding: 18px; }
[data-section="review-management"] .review-filters { margin-bottom: 10px; padding-bottom: 14px; }
[data-section="review-management"] .review-filters input { min-height: 44px; }
[data-section="review-management"] #reviewContent .table-scroll { border-radius: 14px; }
[data-section="review-management"] #reviewContent table { min-width: 980px; font-size: 12px; }
[data-section="review-management"] #reviewContent th { background: #f5f8fc; }
[data-section="review-management"] #reviewContent td { padding: 10px 11px; vertical-align: top; }
[data-section="review-management"] .review-stars { display: block; margin-bottom: 5px; color: #ff9500; letter-spacing: .06em; white-space: nowrap; }
[data-section="review-management"] .review-copy { min-width: 210px; max-width: 390px; color: #48627b; line-height: 1.55; }
[data-section="review-management"] .review-image-grid { display: grid; grid-template-columns: repeat(3,48px); gap: 6px; }
[data-section="review-management"] .review-image-grid img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; }
[data-section="review-management"] .review-no-images { color: #9aa8b7; font-size: 11px; }
[data-section="review-management"] .mock-review-table .review-user { gap: 8px; }
[data-section="review-management"] .mock-review-table .review-user > img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: block;
  border-radius: 9px;
  object-fit: cover;
  background: #edf3f8;
}
[data-section="review-management"] .mock-review-table .review-user strong { font-size: 11px; }
[data-section="review-management"] .mock-review-table td { vertical-align: middle; }
[data-section="review-management"] #reviewContent > .activity-list .activity-row { grid-template-columns: 42px minmax(130px,1fr) minmax(120px,.8fr) 78px 72px auto; }
[data-section="review-management"] #reviewContent > .activity-list .activity-row > img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; }
[data-section="review-management"] .review-actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }

[data-section="purchase-activities"] > .panel { padding: 18px; }
[data-section="purchase-activities"] .activity-note { margin-bottom: 12px; color: #6f8499; background: #f1f6fb; }
[data-section="purchase-activities"] .activity-row { grid-template-columns: 44px minmax(120px,.8fr) minmax(240px,1.5fr) minmax(120px,.75fr) 74px 68px auto; gap: 10px; padding: 10px; border: 0; border-radius: 14px; background: #f8fbfe; box-shadow: inset 0 0 0 1px #e8eef5; }
[data-section="purchase-activities"] .activity-row > img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
[data-section="purchase-activities"] .activity-row label { min-width: 0; display: grid; gap: 4px; color: #8798aa; font-size: 10px; }
[data-section="purchase-activities"] .activity-row label:nth-of-type(5) { display: flex; align-items: center; gap: 6px; color: #526a82; font-size: 12px; }
[data-section="purchase-activities"] .activity-row input { height: 36px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e1e9f2; }

[data-section="categories"] .compact-blue-heading > div { min-width: 0; }
[data-section="categories"] .compact-blue-heading p { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 11px; }
[data-section="categories"] .category-overview { gap: 12px; }
[data-section="categories"] .category-stat { min-height: 104px; padding: 17px 18px; display: flex; align-items: center; gap: 14px; border: 0; border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: 0 8px 25px rgba(36,79,126,.065), inset 0 0 0 1px rgba(70,126,185,.065); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-section="categories"] .category-stat-icon { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 15px; color: #087bff; background: #eaf4ff; }
[data-section="categories"] .category-stat.active .category-stat-icon { color: #21a34a; background: #e9f8ee; }
[data-section="categories"] .category-stat.products .category-stat-icon { color: #9353ce; background: #f4ecfc; }
[data-section="categories"] .category-stat-icon svg { width: 22px; height: 22px; }
[data-section="categories"] .category-stat > div { min-width: 0; }
[data-section="categories"] .category-stat > div > span { color: #75899e; font-size: 11px; font-weight: 600; }
[data-section="categories"] .category-stat strong { margin: 1px 0 0; color: #173450; font-size: 25px; line-height: 1.1; }
[data-section="categories"] .category-stat small { display: block; margin-top: 4px; color: #a0adba; font-size: 9px; }
[data-section="categories"] .category-workspace { padding: 0; overflow: hidden; }
[data-section="categories"] .category-toolbar { min-height: 74px; padding: 14px 16px; border: 0; background: rgba(248,251,254,.76); box-shadow: inset 0 -1px rgba(214,225,237,.7); }
[data-section="categories"] .category-toolbar-title { min-width: 115px; display: flex; align-items: center; gap: 8px; }
[data-section="categories"] .category-toolbar-title > strong { color: #213a53; font-size: 14px; }
[data-section="categories"] .category-result-count { padding: 3px 7px; border-radius: 999px; color: #74899e; background: #eaf0f6; font-size: 9px; }
[data-section="categories"] .category-search { position: relative; width: min(330px,100%); margin-left: auto; }
[data-section="categories"] .category-search svg { position: absolute; z-index: 1; left: 13px; top: 50%; width: 17px; height: 17px; color: #8ba0b4; transform: translateY(-50%); }
[data-section="categories"] .category-search input { min-height: 42px; padding-left: 39px; border: 0; border-radius: 13px; background: #edf3f8; box-shadow: inset 0 0 0 1px rgba(94,139,184,.06); }
[data-section="categories"] .category-channel-filter { padding: 4px; border-radius: 14px; background: #eaf0f6; }
[data-section="categories"] .category-channel-filter button { min-height: 34px; padding: 0 14px; border-radius: 11px; color: #6e8296; }
[data-section="categories"] .category-channel-filter button.active { color: #087bff; background: #fff; box-shadow: 0 3px 10px rgba(46,86,128,.09); }
[data-section="categories"] .category-list { padding: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; background: #f5f8fb; }
[data-section="categories"] .category-list-item { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 14px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 5px 18px rgba(35,73,111,.055), inset 0 0 0 1px rgba(74,124,173,.065); transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s; }
[data-section="categories"] .category-list-item:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(35,73,111,.09), inset 0 0 0 1px rgba(74,124,173,.075); }
[data-section="categories"] .category-list-item.is-disabled { opacity: .68; }
[data-section="categories"] .category-card-head { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: start; gap: 11px; }
[data-section="categories"] .category-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #087bff; background: linear-gradient(145deg,#e8f4ff,#f3f9ff); }
[data-section="categories"] .category-symbol.free { color: #9950c7; background: linear-gradient(145deg,#f3e9fb,#fbf7fe); }
[data-section="categories"] .category-symbol svg { width: 21px; height: 21px; }
[data-section="categories"] .category-main { min-width: 0; }
[data-section="categories"] .category-main > div { display: flex; align-items: center; gap: 6px; }
[data-section="categories"] .category-main h3 { margin: 6px 0 2px; overflow: hidden; color: #1c344c; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
[data-section="categories"] .category-main > small { color: #9aa9b8; font-size: 9px; }
[data-section="categories"] .channel-badge { padding: 3px 8px; border-radius: 999px; color: #087bff; background: #eaf4ff; font-size: 9px; font-weight: 700; }
[data-section="categories"] .channel-badge.free { color: #8e3ab4; background: #f5eafb; }
[data-section="categories"] .category-state { display: inline-flex; align-items: center; gap: 4px; color: #779068; font-size: 9px; }
[data-section="categories"] .category-state i { width: 5px; height: 5px; border-radius: 50%; background: #35bd61; }
[data-section="categories"] .category-state.inactive { color: #9aa7b4; }
[data-section="categories"] .category-state.inactive i { background: #a9b4bf; }
[data-section="categories"] .category-order { min-width: 37px; padding: 5px 7px; border-radius: 10px; text-align: center; background: #f3f7fa; }
[data-section="categories"] .category-order small, [data-section="categories"] .category-order strong { display: block; }
[data-section="categories"] .category-order small { color: #9cabb9; font-size: 8px; }
[data-section="categories"] .category-order strong { margin-top: 1px; color: #4b6580; font-size: 14px; }
[data-section="categories"] .category-card-meta { display: grid; grid-template-columns: 1fr 1fr; border-radius: 13px; background: #f7f9fc; }
[data-section="categories"] .category-card-meta > div { min-width: 0; padding: 10px 12px; }
[data-section="categories"] .category-card-meta > div + div { border-left: 1px solid #e8eef4; }
[data-section="categories"] .category-card-meta span, [data-section="categories"] .category-card-meta strong { display: block; }
[data-section="categories"] .category-card-meta span { color: #96a5b5; font-size: 9px; }
[data-section="categories"] .category-card-meta strong { margin-top: 2px; color: #38536d; font-size: 13px; }
[data-section="categories"] .category-card-meta strong small { color: #8496a8; font-size: 9px; font-weight: 500; }
[data-section="categories"] .category-actions { display: flex; align-items: center; gap: 6px; }
[data-section="categories"] .category-actions .action-button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 10px; background: #f0f5f9; box-shadow: none; font-size: 10px; }
[data-section="categories"] .category-actions .action-button:first-child { color: #087bff; background: #eaf4ff; }
[data-section="categories"] .category-delete { width: 32px; height: 32px; margin-left: auto; display: grid; place-items: center; border-radius: 10px; color: #e34b43; background: #fff0ef; }
[data-section="categories"] .category-delete svg { width: 15px; height: 15px; }
[data-section="categories"] .category-delete:disabled { color: #b1bdc8; background: #f1f4f7; cursor: not-allowed; }
[data-section="categories"] .category-empty { grid-column: 1/-1; min-height: 260px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
[data-section="categories"] .category-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #7e9ab6; background: #eaf1f7; }
[data-section="categories"] .category-empty svg { width: 22px; height: 22px; }
[data-section="categories"] .category-empty strong { margin-top: 12px; color: #46617b; }
[data-section="categories"] .category-empty p { margin-top: 3px; font-size: 11px; }

[data-section="users"] > .panel { padding: 18px; overflow: hidden; }
[data-section="users"] .filter-row { margin-bottom: 10px; padding-bottom: 14px; }
[data-section="users"] .filter-row input, [data-section="users"] .filter-row select { min-height: 42px; }
[data-section="users"] .table-scroll { border-radius: 14px; }
[data-section="users"] table { min-width: 940px; font-size: 12px; }
[data-section="users"] th { background: #f5f8fc; }
[data-section="users"] td { height: 58px; padding: 9px 11px; }
[data-section="users"] td:last-child { white-space: nowrap; }
[data-section="users"] .mini-admin-badge { min-height: 25px; padding: 3px 9px; display: inline-flex; align-items: center; border-radius: 999px; color: #71859b; background: #eef3f7; font-size: 10px; font-weight: 700; }
[data-section="users"] .mini-admin-badge.active { color: #187b38; background: #e7f8ec; }
[data-section="users"] .user-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-section="users"] .user-cell strong { overflow: hidden; color: #1c2740; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
[data-section="users"] .user-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: #087bff; background: #eaf4ff; font-size: 13px; font-weight: 750; }
[data-section="users"] .user-avatar img,
[data-section="users"] .user-avatar span { width: 100%; height: 100%; }
[data-section="users"] .user-avatar img { display: block; object-fit: cover; }
[data-section="users"] .user-avatar span { display: grid; place-items: center; }
[data-section="users"] .user-avatar span[hidden] { display: none; }

[data-section="share-settings"] .share-settings-grid { gap: 14px; }
[data-section="share-settings"] .share-setting-card { padding: 18px; gap: 12px; }
[data-section="share-settings"] .share-setting-card header { display: flex; align-items: center; justify-content: space-between; }
[data-section="share-settings"] .share-setting-card header label { display: flex; align-items: center; gap: 6px; }
[data-section="share-settings"] .share-setting-card input[type="text"] { border: 0; border-radius: 13px; background: #f1f6fb; box-shadow: inset 0 0 0 1px rgba(63,119,178,.07); }
[data-section="share-settings"] .share-poster-upload { min-height: 0; padding: 12px; display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 14px; justify-content: stretch; border: 0; border-radius: 16px; background: #f1f6fb; box-shadow: inset 0 0 0 1px rgba(63,119,178,.07); }
[data-section="share-settings"] [data-share-preview] { width: 120px; height: 160px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; color: #96a4b3; background: #e6edf5; font-size: 11px; text-align: center; }
[data-section="share-settings"] [data-share-preview] img { width: 100%; height: 100%; object-fit: cover; }
[data-section="share-settings"] .share-settings-tip { margin-top: 0; border: 0; border-radius: 12px; color: #6f8499; background: #eaf4ff; }

[data-section="settings"] .settings-form { width: min(100%,760px); max-width: none; padding: 20px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
[data-section="settings"] .settings-title, [data-section="settings"] .settings-actions { grid-column: 1/-1; }
[data-section="settings"] .settings-form > label { color: #526a82; }
[data-section="settings"] .settings-form input { min-height: 44px; border: 0; border-radius: 13px; background: #f1f6fb; box-shadow: inset 0 0 0 1px rgba(63,119,178,.07); }
[data-section="settings"] .settings-actions { padding-top: 14px; }

@media (max-width: 980px) {
  [data-section="purchase-activities"] .activity-row { grid-template-columns: 44px minmax(130px,1fr) minmax(220px,1.4fr) 120px; }
  [data-section="purchase-activities"] .activity-row > :nth-last-child(-n+3) { grid-column: auto; }
  [data-section="review-management"] #reviewContent > .activity-list .activity-row { grid-template-columns: 42px 1fr 1fr; }
}
@media (max-width: 768px) {
  :is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) .compact-blue-heading { min-height: 62px; padding: 0 17px; border-radius: 18px; }
  :is([data-section="products"], [data-section="banners"], [data-section="splash-settings"], [data-section="review-management"], [data-section="purchase-activities"], [data-section="categories"], [data-section="users"], [data-section="share-settings"], [data-section="settings"]) .compact-blue-heading h2 { font-size: 20px; }
  [data-section="products"] .product-list-toolbar { align-items: stretch; flex-direction: column; }
  [data-section="products"] .product-button-filter { width: 100%; margin: 0; align-items: flex-start; flex-direction: column; }
  [data-section="products"] .product-filter-buttons { width: 100%; }
  [data-section="products"] .product-table-scroll { padding: 0 12px 12px; }
  [data-section="products"] .product-management-table { min-width: 900px; }
  [data-section="banners"] .banner-settings { grid-template-columns: 1fr; }
  [data-section="banners"] .banner-grid { grid-template-columns: 1fr; }
  [data-section="banners"] .home-media-preview { min-height: 210px; }
  [data-section="splash-settings"] .splash-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-section="review-management"] > .panel, [data-section="users"] > .panel { padding: 14px; }
  [data-section="review-management"] #reviewContent .table-scroll, [data-section="users"] .table-scroll { overflow-x: auto; }
  [data-section="review-management"] #reviewContent > .activity-list .activity-row { grid-template-columns: 42px 1fr; }
  [data-section="review-management"] #reviewContent > .activity-list .activity-row > *:not(img) { grid-column: 2; }
  [data-section="purchase-activities"] .activity-row { grid-template-columns: 42px minmax(0,1fr); padding: 13px; }
  [data-section="purchase-activities"] .activity-row > img { grid-row: 1 / span 2; }
  [data-section="purchase-activities"] .activity-row > label, [data-section="purchase-activities"] .activity-row > button { grid-column: 2; }
  [data-section="categories"] .category-toolbar { align-items: stretch; flex-wrap: wrap; }
  [data-section="categories"] .category-toolbar-title { width: 100%; }
  [data-section="categories"] .category-search { width: calc(100% - 220px); margin-left: 0; }
  [data-section="categories"] .category-list { grid-template-columns: 1fr; }
  [data-section="categories"] .category-list-item { padding: 15px; }
  [data-section="share-settings"] .share-settings-grid { grid-template-columns: 1fr; }
  [data-section="settings"] .settings-form { grid-template-columns: 1fr; }
  [data-section="settings"] .settings-title, [data-section="settings"] .settings-actions { grid-column: auto; }
}
@media (max-width: 480px) {
  :is([data-section="products"], [data-section="banners"], [data-section="review-management"], [data-section="categories"], [data-section="share-settings"]) .compact-blue-heading { min-height: 64px; flex-wrap: nowrap; }
  :is([data-section="products"], [data-section="banners"], [data-section="review-management"], [data-section="categories"], [data-section="share-settings"]) .compact-blue-heading > .primary-button { width: auto; min-height: 36px; margin-left: auto; padding: 0 11px; }
  [data-section="purchase-activities"] .compact-blue-heading { min-height: 104px; padding-top: 12px; padding-bottom: 12px; align-items: flex-start; flex-direction: column; }
  [data-section="purchase-activities"] .activity-toolbar { width: 100%; }
  [data-section="purchase-activities"] .activity-toolbar button { flex: 1; }
  [data-section="splash-settings"] .splash-media-grid { grid-template-columns: 1fr 1fr; }
  [data-section="categories"] .category-overview { grid-template-columns: 1fr; }
  [data-section="categories"] .category-stat { min-height: 88px; padding: 14px; }
  [data-section="categories"] .category-toolbar { padding: 12px; }
  [data-section="categories"] .category-search { width: 100%; }
  [data-section="categories"] .category-channel-filter { width: 100%; }
  [data-section="categories"] .category-channel-filter button { flex: 1; }
  [data-section="categories"] .category-list { padding: 12px; }
  [data-section="categories"] .category-card-head { grid-template-columns: 40px minmax(0,1fr) auto; gap: 9px; }
  [data-section="categories"] .category-symbol { width: 40px; height: 40px; }
  [data-section="categories"] .category-actions { flex-wrap: wrap; }
  [data-section="categories"] .category-delete { margin-left: auto; }
  [data-section="share-settings"] .share-poster-upload { grid-template-columns: 92px minmax(0,1fr); }
  [data-section="share-settings"] [data-share-preview] { width: 92px; height: 124px; }
  [data-section="settings"] .settings-actions { align-items: stretch; flex-direction: column; }
  [data-section="settings"] .settings-actions .primary-button { width: 100%; }
}

/* Desktop fixed workspaces: scroll data lists only ---------------------- */
@media (min-width: 769px) {
  html:has(body[data-admin-page="products"]),
  html:has(body[data-admin-page="orders"]),
  body[data-admin-page="products"],
  body[data-admin-page="orders"] {
    height: 100%;
    overflow: hidden;
  }
  body[data-admin-page="products"] .admin-shell,
  body[data-admin-page="orders"] .admin-shell {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  body[data-admin-page="products"] .admin-main,
  body[data-admin-page="orders"] .admin-main {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  body[data-admin-page="products"] .content-wrap,
  body[data-admin-page="orders"] .content-wrap {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  [data-section="products"].active,
  [data-section="orders"].active {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  [data-section="products"] .product-list-panel,
  [data-section="orders"] .order-list-panel {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  [data-section="products"] .product-list-toolbar,
  [data-section="orders"] .order-toolbar,
  [data-section="orders"] .order-filter-tabs,
  [data-section="orders"] .order-list-head {
    flex: 0 0 auto;
  }
  [data-section="products"] .product-table-scroll {
    min-height: 0;
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  [data-section="products"] .product-management-table thead {
    position: sticky;
    z-index: 4;
    top: 0;
  }
  [data-section="products"] .product-management-table th {
    box-shadow: inset 0 -1px #e5ecf4;
  }
  [data-section="orders"] .order-list-panel { overflow: hidden; }
  [data-section="orders"] .order-card-list {
    min-height: 0;
    flex: 1;
    align-content: start;
    grid-auto-rows: minmax(76px, max-content);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

/* Product editor usability redesign ------------------------------------- */
#productDialog .product-workbench { max-width: 1500px; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
#productDialog .product-side-sticky { top: 92px; }
#productDialog #basicInfoCard .editor-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: end; gap: 14px; }
#productDialog #productSaveStatus { width: fit-content; min-height: 23px; margin-top: 4px; padding: 3px 9px; display: inline-flex; align-items: center; border-radius: var(--pill); color: #58718a; background: #eaf0f6; font-size: 10px; font-weight: 700; }
#productDialog .product-media-layout { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); align-items: start; gap: 18px; }
#productDialog .primary-media-panel, #productDialog .gallery-media-panel { min-width: 0; }
#productDialog .media-panel-title { min-height: 40px; margin-bottom: 9px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
#productDialog .media-panel-title strong { font-size: 12px; }
#productDialog .media-panel-title span, #productDialog .gallery-help { color: var(--ink-3); font-size: 10px; }
#productDialog .product-media-card .main-image-dropzone { width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 4; border-radius: 14px; }
#productDialog .product-media-card .gallery-heading { min-height: 40px; margin: 0 0 9px; }
#productDialog .gallery-help { margin: -4px 0 10px; line-height: 1.5; }
#productDialog .product-media-card .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); align-content: start; gap: 10px; }
#productDialog .detail-images-list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); counter-reset: detail-image; }
#productDialog .gallery-grid { counter-reset: gallery-image; }
#productDialog .detail-image-item { counter-increment: detail-image; cursor: grab; }
#productDialog .gallery-item { counter-increment: gallery-image; }
#productDialog .detail-image-item::before, #productDialog .gallery-item::before { position: absolute; z-index: 2; left: 7px; top: 7px; min-width: 25px; height: 25px; padding: 0 7px; display: grid; place-items: center; border-radius: var(--pill); color: #fff; background: rgba(16, 29, 45, .7); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); font-size: 10px; font-weight: 700; }
#productDialog .detail-image-item::before { content: counter(detail-image); }
#productDialog .gallery-item::before { content: counter(gallery-image); }
#productDialog .detail-image-item button, #productDialog .gallery-item button { z-index: 3; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
#productDialog .detail-image-item .detail-image-remove { top: 7px; right: 7px; }
#productDialog .detail-image-item .detail-image-move { top: auto; bottom: 7px; }
#productDialog .detail-image-item .detail-image-move[data-direction="up"] { left: 7px; right: auto; }
#productDialog .detail-image-item .detail-image-move[data-direction="down"] { right: 7px; }
#productDialog .detail-image-item.dragging { opacity: .45; outline: 2px solid var(--blue); transform: scale(.97); }
#productDialog .gallery-empty, #productDialog .detail-images-empty { grid-column: 1 / -1; min-height: 125px; padding: 20px; display: grid; place-items: center; border: 1px dashed #c6d1de; border-radius: 12px; color: var(--ink-3); background: #f7f9fc; text-align: center; }
#productDialog .gallery-item.image-error img, #productDialog .detail-image-item.image-error img { display: none; }
#productDialog .gallery-item.image-error, #productDialog .detail-image-item.image-error { background: #fff1f0; }
#productDialog .gallery-item.image-error::after, #productDialog .detail-image-item.image-error::after { content: "图片加载失败"; position: absolute; inset: 0; display: grid; place-items: center; padding: 15px; color: var(--red); font-size: 11px; text-align: center; }
#productDialog .unified-product-gallery { min-width: 0; }
#productDialog .unified-product-gallery .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#productDialog .unified-product-gallery .gallery-item { aspect-ratio: 3 / 4; border-radius: 14px; }
#productDialog .unified-product-gallery .gallery-item.is-cover { outline: 2px solid var(--blue); outline-offset: 2px; }
#productDialog .gallery-cover-badge { position: absolute; z-index: 4; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: var(--pill); color: #fff; background: var(--blue); box-shadow: 0 4px 12px rgba(0, 122, 255, .28); font-size: 10px; font-weight: 700; }
#productDialog .gallery-item-actions { position: absolute; z-index: 4; top: 7px; right: 7px; display: flex; gap: 4px; }
#productDialog .gallery-item-actions button { position: static; width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: rgba(19, 30, 44, .72); }
#productDialog .gallery-item-actions button:disabled { opacity: .32; cursor: default; }
#productDialog .gallery-item-actions .gallery-remove { background: rgba(255, 59, 48, .88); }
#productDialog .publish-card { border: 1px solid rgba(0, 122, 255, .12); background: linear-gradient(145deg, #fff, #f4f9ff); }
#productDialog .publish-card .workbench-field { margin-top: 14px; }
#productDialog .product-summary-card { border: 1px solid var(--line-soft); }
@media (max-width: 1099px) {
  #productDialog .product-workbench { grid-template-columns: 1fr; }
  #productDialog .product-side-sticky { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #productDialog .side-card { margin-bottom: 0; }
  #productDialog .product-media-layout { grid-template-columns: 250px minmax(0, 1fr); }
}
@media (max-width: 768px) {
  #productDialog #basicInfoCard .editor-card-body, #productDialog .product-media-layout, #productDialog .product-side-sticky { grid-template-columns: 1fr; }
  #productDialog .primary-media-panel { width: min(100%, 340px); margin-inline: auto; }
  #productDialog .product-media-card .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #productDialog .unified-product-gallery .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #productDialog .detail-images-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #productDialog .product-upload-progress { top: 62px; padding-inline: 14px; }
}
@media (max-width: 480px) {
  #productDialog .product-workbench { padding-inline: 10px; }
  #productDialog .editor-card-head { padding: 12px; }
  #productDialog .editor-card-body { padding: 12px; }
  #productDialog .product-media-card .gallery-grid, #productDialog .unified-product-gallery .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #productDialog .gallery-item-actions button { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}