:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: #12192c;
  --panel-2: #182238;
  --line: rgba(255, 255, 255, 0.09);
  --muted: #8fa0bd;
  --text: #edf3ff;
  --primary: #625ed1;
  --primary-2: #8a84ff;
  --danger: #ff6577;
  --success: #46d4a0;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #1a2750, var(--bg) 35%); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: rgba(18, 25, 44, .92); box-shadow: 0 24px 80px rgba(0,0,0,.35); backdrop-filter: blur(14px); }
.login-card h1 { margin: 14px 0 8px; font-size: 26px; }
.login-card p { margin: 0 0 28px; color: var(--muted); }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-weight: 800; background: linear-gradient(135deg, var(--primary), #37a4ff); }
label { display: grid; gap: 8px; margin: 14px 0; color: #c9d3e8; font-size: 14px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: #0c1324; color: var(--text); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(98, 94, 209, .18); }
textarea { min-height: 96px; resize: vertical; }

.primary, .ghost, .danger, .small { border: 0; border-radius: 9px; padding: 10px 15px; color: white; }
.primary { background: linear-gradient(135deg, var(--primary), #716cff); }
.ghost { background: var(--panel-2); border: 1px solid var(--line); }
.danger { background: rgba(255, 101, 119, .14); color: #ff9aa6; border: 1px solid rgba(255,101,119,.25); }
.small { padding: 6px 9px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.login-card .primary { width: 100%; margin-top: 10px; }
.form-error { color: #ff9aa6; min-height: 18px; font-size: 13px; margin-top: 10px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 242px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: rgba(11,16,32,.92); border-right: 1px solid var(--line); }
.sidebar-brand { height: 68px; display: flex; gap: 12px; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); }
.sidebar-brand span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--primary); font-weight: 800; }
.module-group { border-bottom: 1px solid rgba(255,255,255,.045); }
.module-button, .page-button { width: 100%; border: 0; color: inherit; text-align: left; background: transparent; }
.module-button { padding: 14px 18px; display: flex; justify-content: space-between; font-weight: 700; }
.module-button:hover, .module-button.active { background: rgba(98,94,209,.12); color: #c7c4ff; }
.page-list { padding: 0 10px 10px; display: grid; gap: 4px; }
.page-list.collapsed { display: none; }
.page-button { padding: 9px 12px 9px 24px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.page-button:hover, .page-button.active { color: white; background: var(--panel-2); }

.main-shell { min-width: 0; }
.topbar { position: sticky; z-index: 2; top: 0; min-height: 68px; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; background: rgba(11,16,32,.84); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar h2 { margin: 0 0 3px; font-size: 19px; }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.content { padding: 24px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 16px; }
.card, .panel { background: linear-gradient(180deg, rgba(24,34,56,.94), rgba(18,25,44,.94)); border: 1px solid var(--line); border-radius: 14px; }
.card { padding: 18px; }
.card .label { color: var(--muted); font-size: 13px; }
.card .value { margin-top: 10px; font-size: 26px; font-weight: 800; }
.card .accent { color: var(--success); }
.panel { margin-top: 18px; padding: 18px; }
.panel-head, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel h3 { margin: 0; font-size: 16px; }
.toolbar { margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .search { width: min(320px, 100%); }
.badge-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 0; }
.badge { border: 1px solid var(--line); background: rgba(98,94,209,.1); color: #c7c4ff; padding: 5px 8px; border-radius: 999px; font-size: 11px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
th { color: var(--muted); font-weight: 600; background: rgba(255,255,255,.025); }
tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; gap: 6px; }
.empty { padding: 50px 20px; text-align: center; color: var(--muted); }
.pagination { margin-top: 14px; display: flex; gap: 8px; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 13px; }

dialog { width: min(720px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 16px; padding: 0; color: var(--text); background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
#editor-form { padding: 20px; }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; }
.dialog-head h3 { margin: 0; }
.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 26px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-top: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.dialog-actions { justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 1050px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
  .sidebar-brand strong, .module-button span, .page-list { display: none; }
  .sidebar-brand { padding: 0 16px; }
  .module-button { justify-content: center; padding: 14px 4px; }
  .content { padding: 16px; }
  .cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* TBS-style application shell */
.app-shell { grid-template-columns: 88px minmax(0, 1fr); background: #101522; }
.sidebar { position: sticky; width: 88px; overflow: visible; z-index: 22; background: #0b0f19; box-shadow: 8px 0 30px rgba(0,0,0,.18); }
.sidebar-brand { height: 66px; justify-content: center; padding: 0; }
.sidebar-brand span { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(145deg, #7772ea, #4f4bc2); box-shadow: 0 9px 24px rgba(98,94,209,.35); }
.sidebar-brand strong { display: none; }
#module-nav { width: 88px; }
.module-group { position: static; width: 88px; border: 0; }
.module-button { width: 88px; min-height: 59px; padding: 8px 4px; gap: 3px; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #8d97aa; }
.module-button b { display: none; }
.module-button .module-icon { display: grid; place-items: center; width: 25px; height: 25px; font-size: 17px; color: #aab3c5; }
.module-button:hover, .module-button.active, .module-button.hover-open { color: white; background: linear-gradient(90deg, rgba(98,94,209,.24), rgba(98,94,209,.1)); }
.module-button.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 30px; border-radius: 0 4px 4px 0; background: #7a74ee; box-shadow: 0 0 14px rgba(122,116,238,.6); }
.module-button.active .module-icon, .module-button.hover-open .module-icon { color: #9c97ff; }
.nav-hover-open .module-button.active:not(.hover-open) { color: #8d97aa; background: transparent; }
.nav-hover-open .module-button.active:not(.hover-open)::before { display: none; }
.page-list { position: fixed; z-index: 23; left: 88px; top: 0; bottom: 0; width: 226px; display: block; overflow-y: auto; padding: 36px 12px 18px; background: #111724; border-right: 1px solid var(--line); box-shadow: 18px 0 40px rgba(0,0,0,.24); }
.page-list-head { min-height: 38px; padding: 3px 5px 12px 12px; display: flex; align-items: center; justify-content: space-between; color: white; font-size: 15px; }
.page-list-head button { width: 30px; height: 30px; border: 0; border-radius: 7px; color: #8f9aad; background: transparent; font-size: 22px; line-height: 1; }
.page-list-head button:hover { color: white; background: rgba(255,255,255,.07); }
.page-list.collapsed { display: none; }
.page-button { margin-bottom: 4px; padding: 10px 12px; border-radius: 7px; color: #909bb0; }
.page-button:hover, .page-button.active, .page-button.hover-open { color: #fff; background: #242c3d; }
.page-button.active::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; vertical-align: 2px; border-radius: 50%; background: #847eff; }
.nav-hover-open .page-button.active:not(.hover-open) { color: #909bb0; background: transparent; }
.nav-hover-open .page-button.active:not(.hover-open)::before { display: none; }
.nav-backdrop { position: fixed; z-index: 19; inset: 0 0 0 314px; visibility: hidden; opacity: 0; pointer-events: none; background: rgba(3, 6, 12, .68); transition: opacity .16s ease, visibility .16s ease; }
.nav-hover-open .nav-backdrop { visibility: visible; opacity: 1; pointer-events: auto; }

.topbar { min-height: 66px; padding: 0 18px; background: #141a27; }
.workspace-title { display: flex; gap: 16px; align-items: center; min-width: 0; }
.top-tab { height: 44px; padding: 0 16px; display: flex; gap: 9px; align-items: center; border-radius: 7px 7px 0 0; background: #1e2636; border: 1px solid var(--line); border-bottom-color: #1e2636; align-self: flex-end; }
.top-tab span { color: #766ff0; font-size: 9px; }
.topbar h2 { font-size: 15px; white-space: nowrap; }
.topbar-actions { gap: 4px; }
.top-tool { min-width: 49px; height: 48px; display: grid; place-items: center; gap: 0; border: 0; border-radius: 6px; color: #8f9aad; background: transparent; font-size: 11px; }
.top-tool span { color: #c4ccda; font-size: 17px; line-height: 17px; }
.top-tool:hover { color: white; background: rgba(255,255,255,.05); }
.user-pill { margin-left: 6px; padding: 8px 11px; display: flex; gap: 8px; align-items: center; border-radius: 7px; border: 1px solid var(--line); color: white; background: #202839; }
.user-pill b { color: #8995a9; }
.compact { padding: 8px 10px; }
.content { min-height: calc(100vh - 66px); background: #101522; }
.card, .panel { background: #171d2a; border-color: rgba(255,255,255,.075); border-radius: 8px; }
.card { position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 4px 4px 0; background: #625ed1; }
.card .value { font-family: "Nunito Sans", Inter, sans-serif; font-size: 24px; }
.panel-head { min-height: 34px; }
.toolbar { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.table-wrap { border-radius: 6px; }
th { background: #1c2332; color: #9ba6b8; }
td { background: #171d2a; }
tr:hover td { background: #1b2231; }

.detail-dialog { width: min(880px, calc(100% - 32px)); }
.detail-shell { padding: 22px; }
.dialog-kicker { display: block; margin-bottom: 6px; color: #7771e6; font-size: 10px; letter-spacing: .14em; }
.product-detail-card { display: grid; grid-template-columns: 240px 1fr; gap: 25px; padding: 20px 0; }
.product-detail-visual { min-height: 250px; display: grid; place-items: center; padding: 22px; border-radius: 10px; background: linear-gradient(145deg, #252e42, #111620); }
.product-detail-box { width: 150px; aspect-ratio: .8; display: grid; place-items: center; padding: 18px; text-align: center; border-radius: 16px; color: white; font-weight: 900; background: linear-gradient(150deg, #6d67e6, #393581); transform: rotate(-3deg); box-shadow: 0 24px 45px rgba(0,0,0,.32); }
.product-detail-info h4 { margin: 0 0 10px; font-size: 25px; }
.product-detail-price { margin: 16px 0; color: #8f89ff; font-size: 25px; font-weight: 900; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-item { padding: 11px 13px; border-radius: 7px; background: #111723; }
.detail-item span { display: block; color: #7f8ba0; font-size: 11px; }
.detail-item strong { display: block; margin-top: 5px; font-size: 13px; }

.template-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 16px; }
.template-card { overflow: hidden; border-radius: 10px; background: #171d2a; border: 1px solid var(--line); }
.template-preview { position: relative; height: 220px; padding: 18px; background: var(--template-bg, #fffaf4); color: #181818; }
.template-preview::after { content: "COD"; position: absolute; right: 14px; top: 12px; padding: 5px 8px; border-radius: 999px; color: white; background: var(--template-primary, #ff5b35); font-size: 10px; font-weight: 900; }
.template-mini-nav { width: 40%; height: 9px; margin-bottom: 30px; border-radius: 999px; background: #1a1a1a; opacity: .86; }
.template-mini-title { width: 74%; height: 16px; margin-bottom: 9px; border-radius: 4px; background: #1a1a1a; }
.template-mini-copy { width: 58%; height: 7px; margin-bottom: 5px; border-radius: 4px; background: #999; }
.template-mini-product { position: absolute; right: 24px; bottom: 22px; width: 74px; height: 110px; border-radius: 10px; background: linear-gradient(150deg, #282828, #666); transform: rotate(-3deg); }
.template-mini-button { width: 82px; height: 25px; margin-top: 23px; border-radius: 6px; background: var(--template-primary, #ff5b35); }
.template-card-body { padding: 16px; }
.template-card-body h3 { margin: 0 0 7px; font-size: 16px; }
.template-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.template-title-row h3 { min-width: 0; }
.badge.success { color: #71d7ac; background: rgba(31, 155, 105, .15); }
.template-card-body p { min-height: 40px; margin: 0; color: #8793a7; font-size: 12px; line-height: 1.6; }
.template-structure { margin-top: 10px; padding: 8px 9px; overflow: hidden; border-radius: 6px; color: #a9b4c8; background: #111722; font-family: Consolas, monospace; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.template-card-actions { display: flex; gap: 7px; margin-top: 14px; }
.template-card-actions { flex-wrap: wrap; }
.template-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.link-button { display: inline-flex; align-items: center; text-decoration: none; }

body.light-admin { --bg: #edf1f7; --panel: #fff; --panel-2: #f5f7fb; --line: rgba(15,25,45,.1); --muted: #718096; --text: #1b2435; background: #edf1f7; color: var(--text); }
body.light-admin .app-shell, body.light-admin .content { background: #edf1f7; }
body.light-admin .topbar { background: #fff; }
body.light-admin .top-tab, body.light-admin .card, body.light-admin .panel, body.light-admin td { background: #fff; }
body.light-admin th { background: #f5f7fb; }

@media (max-width: 1050px) {
  .template-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
  .top-tool { display: none; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 70px minmax(0, 1fr); }
  .sidebar { width: 70px; }
  #module-nav, .module-group, .module-button { width: 70px; }
  .page-list { left: 70px; width: 210px; }
  .nav-backdrop { left: 280px; }
  .module-button span:not(.module-icon) { display: block; }
  .product-detail-card { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr; }
  .workspace-title .muted { display: none; }
  .user-pill { display: none; }
}

/* Captured tbs321 desktop shell: 1440 x 900 reference viewport. */
:root {
  color-scheme: light;
  --target-primary: #625ed1;
  --target-page: #f6f7f9;
  --target-line: #ebeef5;
  --target-text: #333;
  --target-muted: #909399;
}

body { background: var(--target-page); color: var(--target-text); font-family: Arial, "Microsoft YaHei", sans-serif; }
.app-shell { grid-template-columns: 136px minmax(0, 1fr); background: var(--target-page); color: var(--target-text); }
.sidebar { width: 136px; overflow: visible; z-index: 22; background: #f7f5ff; border: 0; box-shadow: none; }
.sidebar-brand { height: 64px; box-sizing: border-box; padding: 0 10px; justify-content: center; gap: 7px; border: 0; color: #5e5ad0; }
.sidebar-brand span.target-logo-mark { flex: 0 0 29px; width: 29px; height: 29px; border-radius: 8px; background: transparent; box-shadow: none; font-size: 25px; font-weight: 400; line-height: 1; }
.sidebar-brand strong { display: block; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
#module-nav, .module-group { width: 136px; }
.module-group { border: 0; }
.module-button {
  width: 120px;
  min-height: 47px;
  margin-left: 16px;
  padding: 0 10px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 14px 0 0 14px;
  color: #555b66;
  font-size: 14px;
  font-weight: 400;
}
.module-button .module-icon { width: 20px; height: 20px; color: #60656f; font-size: 17px; }
.module-button:hover, .module-button.active, .module-button.hover-open { color: var(--target-primary); background: #eeebff; }
.module-button.active::before { display: none; }
.module-button.active .module-icon, .module-button.hover-open .module-icon { color: #6b66df; }
.nav-hover-open .module-button.active:not(.hover-open) { color: #555b66; background: transparent; }

.page-list {
  left: 136px;
  width: 144px;
  padding: 20px 16px 24px;
  color: var(--target-text);
  background: #fff;
  border: 0;
  box-shadow: 5px 0 15px rgba(34, 34, 44, .14);
}
.page-list-head { min-height: 39px; padding: 0 10px 12px; color: #262626; font-size: 20px; }
.page-section-title { padding: 15px 10px 9px; color: #333; font-size: 14px; }
.page-button { margin: 0 0 4px; padding: 11px 10px; border-radius: 6px; color: #555; font-size: 13px; }
.page-button:hover, .page-button.active, .page-button.hover-open { color: var(--target-primary); background: #f1efff; }
.page-button.active::before { display: none; }
.nav-hover-open .page-button.active:not(.hover-open) { color: #555; background: transparent; }
.nav-backdrop { inset: 0 0 0 280px; background: rgba(0, 0, 0, .46); }

.main-shell { background: var(--target-page); }
.topbar { min-height: 44px; height: 44px; padding: 0 28px; color: #333; background: #fff; border-bottom: 1px solid #e5e7eb; backdrop-filter: none; }
.workspace-title { height: 44px; gap: 0; }
.home-tab-button { height: 37px; padding: 0 8px; align-self: flex-end; border: 0; color: #222; background: transparent; font-size: 13px; }
.home-tab-button:hover { color: var(--target-primary); }
.top-tab-divider { width: 1px; height: 23px; margin: 0 15px; background: #cfd2d8; }
.top-tab { height: 37px; min-width: 109px; padding: 0 15px; align-self: flex-end; justify-content: space-between; gap: 12px; border: 1px solid #d9d6ff; border-bottom-color: #f3f1ff; border-radius: 7px 7px 0 0; color: var(--target-primary); background: #f3f1ff; }
.top-tab h2, .topbar h2 { margin: 0; color: inherit; font-size: 13px; font-weight: 400; }
.top-tab-close { color: #7770e2; font-size: 15px; }
.workspace-title > .muted { display: none; }
.dashboard-page .home-tab-button { min-width: 65px; padding: 0 17px; border: 1px solid #e0e2e8; border-bottom-color: #fff; border-radius: 7px 7px 0 0; }
.dashboard-page .top-tab-divider, .dashboard-page .top-tab { display: none; }
.topbar-actions { height: 44px; gap: 2px; }
.top-tool { min-width: 46px; height: 43px; padding: 2px 4px 0; color: #333; font-size: 12px; }
.top-tool span { color: #474c54; font-size: 16px; }
.top-tool:hover { color: var(--target-primary); background: #f7f7fb; }
.user-pill { height: 43px; margin-left: 4px; padding: 0 0 0 41px; border: 0; color: #333; background: transparent; position: relative; }
.user-pill::before { content: ""; position: absolute; left: 3px; top: 6px; width: 31px; height: 31px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 0 15%, #b6b3ff 16% 35%, #e2e0ff 36% 100%); }
.user-pill b { margin: 0 5px 0 10px; color: #53606c; }
#logout-button { display: none; }

.content { min-height: calc(100vh - 44px); padding: 20px; color: var(--target-text); background: var(--target-page); }
.card, .panel { color: var(--target-text); background: #fff; border-color: var(--target-line); box-shadow: none; }
.card::before { background: var(--target-primary); }
.card .label, .muted { color: var(--target-muted); }
.panel { border-radius: 12px; }
.badge { border-color: #dedcf8; color: var(--target-primary); background: #f5f3ff; }
.toolbar .search, .panel input, .panel select, .panel textarea { color: #606266; background: #fff; border-color: #dcdfe6; }
.table-wrap { border-color: var(--target-line); }
.panel th { color: #333; background: #f8f9fa; }
.panel td { color: #606266; background: #fff; }
.panel tr:hover td { background: #f5f7fa; }

.target-product-page { height: calc(100vh - 44px); overflow: hidden; }
.target-workspace-card { position: relative; min-width: 0; height: 100%; overflow: hidden; border-radius: 12px; background: #fff; }
.target-product-tabs { height: 60px; margin: 0 20px; display: flex; align-items: flex-end; gap: 42px; border-bottom: 1px solid #f0f1f4; }
.target-product-tabs button { height: 41px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: #111; background: transparent; font-size: 14px; }
.target-product-tabs button.active { color: var(--target-primary); border-bottom-color: var(--target-primary); }
.target-filter-row { height: 70px; padding: 14px 24px 20px; display: flex; align-items: flex-start; gap: 16px; background: #fff; }
.target-product-page .target-filter-row { height: auto; min-height: 70px; display: grid; gap: 16px; }
.target-filter-line { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 16px; }
.target-filter-line .target-filter-field { width: auto; }
.target-filter-actions { display: flex; align-items: center; gap: 8px; }
.target-product-page .target-filter-row:not(.expanded) { grid-template-columns: minmax(0, calc(100% - 210px)) 210px; }
.target-product-page .target-filter-row:not(.expanded) .target-filter-line { grid-template-columns: repeat(5, minmax(145px, 1fr)); }
.target-product-page .target-filter-row.expanded { min-height: 172px; }
.target-filter-field { width: 192px; height: 37px; margin: 0; padding: 0 11px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 7px; color: #606266; background: #f7f7f8; font-size: 12px; }
.target-filter-field.search-field { width: 192px; }
.target-filter-field > span { flex: 0 0 auto; }
.target-filter-field input, .target-filter-field select { min-width: 0; height: 30px; padding: 0; border: 0; border-radius: 0; color: #909399; background: transparent; box-shadow: none; font-size: 12px; }
.target-filter-field select { appearance: auto; }
.tbs-button { min-height: 32px; padding: 7px 15px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dcdfe6; border-radius: 4px; color: #606266; background: #fff; text-decoration: none; font-size: 12px; line-height: 1; }
.tbs-button.primary { color: #fff; border-color: var(--target-primary); background: var(--target-primary); }
.tbs-button:hover { color: var(--target-primary); border-color: #c8c5f5; }
.tbs-button.primary:hover { color: #fff; background: #736ee0; }
.tbs-button.disabled { opacity: .5; pointer-events: none; }
.target-filter-row > .tbs-button { height: 34px; min-height: 34px; }
.target-link-button { height: 34px; padding: 0; border: 0; color: var(--target-primary); background: transparent; white-space: nowrap; font-size: 12px; }
.target-list-toolbar { height: 52px; padding: 0 34px 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; }
.target-list-toolbar > div { display: flex; gap: 12px; }
.edit-header-button { min-width: 94px; }

.target-product-table-wrap { position: absolute; left: 20px; right: 20px; top: 182px; bottom: 56px; overflow: auto; border-top: 0; }
.target-product-table { width: 1711px; min-width: 1711px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.target-product-table [data-column-key="title"] { width: 195px; }
.target-product-table [data-column-key="number"] { width: 140px; }
.target-product-table [data-column-key="cover"] { width: 80px; }
.target-product-table [data-column-key="locale"], .target-product-table [data-column-key="category"], .target-product-table [data-column-key="relation"] { width: 120px; }
.target-product-table [data-column-key="price"], .target-product-table [data-column-key="website"], .target-product-table [data-column-key="template"] { width: 150px; }
.target-product-table [data-column-key="saleType"] { width: 80px; }
.target-product-table [data-column-key="owner"] { width: 120px; }
.target-product-table [data-column-key="time"] { width: 186px; }
.target-product-table .sticky-actions { width: 300px; }
.product-list-workspace:has(.target-filter-row.expanded) .target-product-table-wrap { top: 284px; }
.column-hidden { display: none !important; }
.target-product-table th, .target-product-table td { height: 82px; max-width: none; padding: 12px; border-bottom: 1px solid #ebeef5; color: #606266; background: #fff; font-size: 12px; line-height: 20px; white-space: normal; vertical-align: middle; }
.target-product-table th { height: 48px; color: #333; background: #f8f9fa; font-weight: 400; white-space: nowrap; }
.target-product-table tr:hover td { background: #f5f7fa; }
.target-product-table .sticky-actions { position: sticky; right: 0; z-index: 2; box-shadow: -4px 0 7px rgba(33, 37, 44, .07); }
.product-title-cell, .stacked-cell { display: table-cell; }
.product-title-cell > button, .stacked-cell > span { display: block; }
.product-title-cell > button { padding: 0; border: 0; color: #334fd7; background: transparent; text-align: left; font-size: 12px; }
.product-cover { width: 50px; height: 50px; overflow: hidden; border-radius: 8px; background: #f4f6f8; }
.product-cover img { width: 100%; height: 100%; object-fit: contain; }
.copy-code, .template-pencil { padding: 0; border: 0; color: #4944ec; background: transparent; }
.row-operation { white-space: nowrap !important; }
.row-operation button { margin-right: 15px; padding: 0; border: 0; color: #334fd7; background: transparent; font-size: 12px; }
.row-operation .more-action { margin: 0; color: #111; font-size: 20px; }
.target-more-menu { position: fixed; z-index: 90; width: 142px; padding: 6px; border: 1px solid #ebeef5; border-radius: 5px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.15); }
.target-more-menu button { width: 100%; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 3px; color: #606266; background: transparent; text-align: left; font-size: 12px; }
.target-more-menu button:hover { color: var(--target-primary); background: #f4f2ff; }
.target-more-menu .danger-link { color: #e53e3e; }
.target-empty { min-height: 360px; display: grid; place-items: center; align-content: center; color: #909399; }
.target-empty .empty-box { color: #d8dadd; font-size: 70px; }
.target-empty p { margin: 4px 0; font-size: 13px; }
.target-pagination { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid #ebeef5; color: #909399; background: #fff; font-size: 13px; }
.target-pagination select { width: 128px; height: 32px; padding: 0 14px; border: 0; border-radius: 3px; color: #606266; background: #f7f7f8; }
.target-pagination button, .target-pagination b { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 2px; color: #303133; background: #f1f2f4; font-weight: 400; }
.target-pagination b { color: #fff; background: var(--target-primary); }
.target-pagination button:disabled { color: #a8abb2; background: #eee; }
.target-pagination input { width: 48px; height: 32px; padding: 0 8px; text-align: center; color: #606266; background: #fff; border: 1px solid #ebeef5; border-radius: 3px; box-shadow: none; }

.target-simple-workspace { height: calc(100vh - 84px); }
.target-simple-filter { height: 76px; padding: 20px 20px 20px; display: flex; align-items: flex-start; gap: 16px; }
.target-simple-filter .target-filter-field { width: 193px; }
.target-simple-filter > .tbs-button { height: 34px; }
.target-simple-toolbar { height: 52px; padding: 0 20px 20px; display: flex; align-items: flex-start; justify-content: space-between; }
.target-simple-toolbar > div { display: flex; gap: 16px; }
.target-simple-table-wrap { position: absolute; left: 20px; right: 20px; top: 128px; bottom: 56px; overflow: auto; }
.target-simple-table { width: 100%; min-width: 780px; table-layout: fixed; border-collapse: collapse; }
.target-simple-table th, .target-simple-table td { height: 48px; padding: 12px; border-bottom: 1px solid #ebeef5; color: #606266; background: #fff; font-size: 12px; font-weight: 400; white-space: normal; }
.target-simple-table th { color: #333; background: #f8f9fa; }
.target-simple-table tr:hover td { background: #f7f8fa; }
.target-simple-table th:last-child, .target-simple-table td:last-child { width: 140px; }
.simple-actions { white-space: nowrap !important; }
.simple-actions button { margin-right: 15px; padding: 0; border: 0; color: #334fd7; background: transparent; font-size: 12px; }
.simple-actions .danger-link { color: #f04444; }
.simple-actions .more-action { margin: 0; color: #111; font-size: 18px; }
.category-table th:last-child, .category-table td:last-child { width: 230px; }
.tree-indent { display: inline-block; }
.tree-indent.child { padding-left: 35px; }
.count-link { padding: 0; border: 0; color: #334fd7; background: transparent; }
.target-review-toolbar { height: 72px; padding: 20px; display: flex; align-items: flex-start; justify-content: space-between; }
.target-review-toolbar > div { display: flex; gap: 16px; }
.review-table-wrap { top: 72px; }
.review-table-wrap .checkbox-col { width: 60px; }
.review-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #9a96f0; background: #e4e2ff; }
.review-empty { min-height: 560px; }
.review-empty .empty-box { font-size: 95px; }

.target-product-editor-page { height: calc(100vh - 44px); overflow-y: auto; padding-bottom: 90px; scroll-behavior: smooth; }
.target-product-editor { position: relative; min-height: 100%; color: #333; }
.target-editor-tabs { height: 44px; margin-bottom: 0; padding: 0 24px; display: flex; gap: 49px; align-items: flex-end; border-radius: 12px 12px 0 0; border-bottom: 1px solid #eee; background: #fff; }
.target-editor-tabs button { height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: #111; background: transparent; font-size: 14px; }
.target-editor-tabs button.active { color: var(--target-primary); border-bottom-color: var(--target-primary); }
.target-editor-section { margin-top: 16px; padding: 22px 24px 32px; scroll-margin-top: 56px; border-radius: 12px; background: #fff; }
.target-editor-section:first-child { margin-top: 0; border-radius: 0 0 12px 12px; }
#business { padding-bottom: 22px; }
#basic { padding-bottom: 42px; }
.target-editor-section h3, .target-variants-pane h3 { margin: 0 0 24px; font-size: 16px; font-weight: 400; }
.target-editor-section h3 small { margin-left: 18px; font-size: 12px; font-weight: 400; }
.target-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); column-gap: 100px; row-gap: 18px; padding-right: 180px; }
.target-editor-field { position: relative; margin: 0; display: grid; gap: 10px; color: #222; font-size: 14px; }
.target-editor-field > i { position: absolute; left: -10px; top: 2px; color: #f04444; font-style: normal; }
.target-editor-field input, .target-editor-field select { height: 32px; padding: 0 10px; border: 1px solid #d7dce5; border-radius: 4px; color: #606266; background: #fff; font-size: 13px; box-shadow: none; }
.target-select-trigger { height: 34px; padding: 0 12px; overflow: hidden; border: 1px solid #d7dce5; border-radius: 4px; color: #606266; background: #fff; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.target-editor-field small { min-height: 14px; color: #a0a7b3; font-size: 12px; line-height: 1.4; }
.target-switch { width: 39px; height: 20px; padding: 2px 3px; display: flex; align-items: center; justify-content: space-between; gap: 2px; border: 0; border-radius: 10px; color: #fff; background: #dcdfe6; font-size: 12px; line-height: 1; transition: background .18s ease; }
.target-switch b { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.target-switch[aria-pressed="true"] { flex-direction: row-reverse; background: var(--target-primary); }
.target-add-link { align-self: end; justify-self: start; margin-bottom: 23px; padding: 0; border: 0; color: #514ce0; background: transparent; }
.target-editor-anchor { position: fixed; z-index: 8; right: 40px; top: 107px; width: 140px; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
.target-editor-anchor a { height: 44px; display: flex; align-items: center; padding-left: 39px; color: #555; text-decoration: none; font-size: 16px; }
.target-editor-anchor a.active, .target-editor-anchor a:hover { color: var(--target-primary); background: #f1efff; text-decoration: underline; text-underline-offset: 3px; }
.target-media-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-right: 180px; }
.target-media-settings > div { min-height: 110px; padding: 18px; border: 1px dashed #d9dde7; border-radius: 6px; }
.target-media-settings b { font-size: 14px; font-weight: 400; }
.target-media-settings p { color: #969daa; font-size: 12px; line-height: 1.6; }
.target-media-settings > a { align-self: center; justify-self: start; }
.target-template-selects { margin-bottom: 26px; }
.target-contact-settings { padding-right: 180px; }
.target-contact-settings > b, .target-form-setting > b { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 400; }
.target-contact-settings label { display: inline-flex; align-items: center; gap: 5px; margin: 0 24px 10px 0; color: #555; font-size: 12px; }
.target-contact-settings input, .target-form-setting input, .target-shipping-check input { width: 14px; height: 14px; accent-color: var(--target-primary); }
.contact-list { max-width: 520px; }
.contact-item { border: 1px solid #e4e7ed; border-radius: 6px; margin-bottom: 8px; background: #fff; overflow: hidden; }
.contact-item.configured { border-color: var(--target-primary); }
.contact-item-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 13px; color: #303133; }
.contact-item-toggle:hover { background: #fafafa; }
.contact-name { font-weight: 500; text-transform: capitalize; }
.contact-state { font-size: 12px; color: #909399; margin-left: 6px; }
.contact-item.configured .contact-state { color: var(--target-primary); }
.contact-arrow { margin-left: auto; color: #909399; transition: transform .15s; }
.contact-item.open .contact-arrow { transform: rotate(180deg); }
.contact-item-panel { padding: 0 14px 12px; display: flex; gap: 8px; align-items: center; }
.contact-item-panel input[type="text"] { flex: 1; width: auto; height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 13px; color: #303133; background: #fff; }
.contact-item-panel input[type="text"]:focus { border-color: var(--target-primary); outline: none; }
.contact-item-panel .contact-clear { padding: 0 12px; height: 34px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; color: #f56c6c; font-size: 12px; cursor: pointer; }
.contact-item-panel .contact-clear:hover { border-color: #f56c6c; }
.target-form-setting { margin-top: 16px; padding-right: 180px; }
.target-form-setting table { width: 520px; min-width: 0; border: 1px solid #ebeef5; }
.target-form-setting th, .target-form-setting td { height: 36px; padding: 7px 12px; border: 0; border-bottom: 1px solid #ebeef5; color: #606266; background: #fff; text-align: center; font-size: 12px; }
.target-form-setting th { color: #333; background: #f8f9fa; }
.target-form-setting th:first-child, .target-form-setting td:first-child { width: 260px; text-align: left; }
.target-inline-switches { margin-top: 22px; padding-right: 180px; display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 24px; }
.target-inline-switches > label { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: #333; font-size: 13px; }
.target-inline-switches span { display: grid; gap: 6px; }
.target-inline-switches small { color: #9ba2ae; font-size: 11px; font-weight: 400; }
.target-shipping-check { margin: 0 0 27px; display: inline-flex; grid-auto-flow: column; align-items: center; gap: 8px; color: var(--target-primary); font-size: 13px; }
.target-shipping-options { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.target-shipping-options .target-shipping-check { margin: 0; }
.target-section-hint { margin: -10px 0 0; color: #a0a7b3; font-size: 12px; line-height: 1.7; }
.target-upload-settings { padding-right: 180px; display: grid; gap: 28px; }
.target-media-control { min-height: 150px; }
.target-media-control > b { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 400; }
.target-media-picture-list { display: flex; flex-wrap: wrap; gap: 12px; }
.target-media-upload-tile, .target-media-picture-card { position: relative; width: 104px; height: 104px; overflow: hidden; border-radius: 6px; background: #fafafa; }
.target-media-upload-tile { display: grid; place-items: center; align-content: center; gap: 4px; border: 1px dashed rgba(0, 0, 0, .15); color: #8b93a1; font-size: 12px; cursor: pointer; }
.target-media-upload-tile > b { margin: 0; color: #8b93a1; font-size: 28px; font-weight: 300; line-height: 1; }
.target-media-upload-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.target-media-picture-card { margin: 0; border: 1px solid #ebeef5; }
.target-media-picture-card img { width: 100%; height: 100%; object-fit: cover; }
.target-media-picture-card > span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: rgba(0, 0, 0, .5); transition: opacity .15s ease; }
.target-media-picture-card:hover > span { opacity: 1; }
.target-media-picture-card button { padding: 5px 9px; border: 1px solid rgba(255,255,255,.8); border-radius: 4px; color: white; background: transparent; cursor: pointer; }
.target-upload-settings p { color: #9aa1ad; font-size: 11px; line-height: 1.7; }
.target-rich-label { position: relative; margin: 20px 0 12px; display: block; color: #222; font-size: 14px; }
.target-rich-label i { position: absolute; left: -10px; color: #ef4444; font-style: normal; }
.target-rich-editor { width: calc(100% - 180px); overflow: hidden; border: 1px solid #d2d7df; border-radius: 4px; background: #fff; }
.target-rich-toolbar { min-height: 115px; padding: 8px 10px; display: flex; align-content: flex-start; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid #d2d7df; color: #111; font-size: 16px; }
.target-rich-toolbar > span, .target-rich-toolbar > b, .target-rich-toolbar > i, .target-rich-toolbar > u { min-width: 18px; text-align: center; font-style: normal; font-weight: 400; }
.target-rich-toolbar > button { min-width: 24px; height: 26px; padding: 0 4px; border: 0; color: #111; background: transparent; font-size: 15px; }
.target-rich-toolbar > button:hover { color: var(--target-primary); background: #f2f0ff; }
.target-rich-toolbar > button[data-rich-image] { min-width: 66px; padding: 0 9px; border: 1px solid #cfd5df; border-radius: 3px; }
.target-rich-toolbar select { width: auto; min-width: 76px; height: 33px; padding: 0 8px; border: 1px solid #cfd5df; border-radius: 2px; color: #333; background: #fff; font-size: 12px; }
.target-rich-content { min-height: 500px; padding: 14px; outline: none; color: #333; font-size: 14px; }
.target-rich-content img { display: block; width: auto; max-width: 100%; height: auto; margin: 12px auto; border-radius: 4px; }
.target-rich-editor footer { height: 24px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d2d7df; color: #909399; font-size: 11px; }
.target-variants-pane { min-height: 380px; padding: 30px; border-radius: 0 0 12px 12px; background: #fff; }
.target-variants-pane .target-editor-grid { padding-right: 0; }
.commerce-price-grid { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); column-gap: 100px; row-gap: 24px; }
.commerce-price-grid .target-editor-field { max-width: 338px; }
.commerce-switch-field { position: relative; margin: 0; display: grid; justify-items: start; gap: 10px; color: #222; font-size: 14px; }
.commerce-switch-field > i, .commerce-detail-title i, .commerce-spec-grid i, .commerce-value-row i, .commerce-package-row i { color: #f04444; font-style: normal; }
.commerce-switch-field small { color: #a0a7b3; font-size: 12px; }
.commerce-toggle { min-width: 40px; height: 22px; padding: 0 3px; display: inline-flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 2px; border: 0; border-radius: 12px; color: #fff; background: #dcdfe6; font-size: 12px; }
.commerce-toggle b { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; background: #fff; }
.commerce-toggle.enabled { flex-direction: row; background: var(--target-primary); }
.commerce-switch-field .commerce-toggle { width: 44px; min-width: 44px; justify-self: start; }
.commerce-specifications { max-width: 1280px; margin-top: 20px; display: grid; gap: 18px; }
.commerce-spec-card { position: relative; overflow: hidden; border: 1px solid #e5e8ef; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(36, 43, 64, .035); }
.commerce-spec-head { min-height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #eceef3; background: #f8f9fb; }
.commerce-spec-head > div { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.commerce-spec-head strong { color: #303133; font-size: 14px; }
.commerce-spec-head small { color: #969dab; font-size: 12px; }
.commerce-spec-grid { padding: 20px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, .72fr); align-items: start; gap: 20px 24px; }
.commerce-spec-grid label, .commerce-value-row label, .commerce-package-row label { margin: 0; display: grid; gap: 9px; color: #303133; font-size: 13px; }
.commerce-spec-grid label > span, .commerce-value-row label > span, .commerce-package-row label > span { display: inline-flex; gap: 3px; }
.commerce-spec-grid input, .commerce-value-row input, .commerce-package-row input { width: 100%; min-width: 0; height: 36px; box-sizing: border-box; color: #606266; background: #fff; border: 1px solid #d7dce5; box-shadow: none; }
.commerce-image-toggle-field { align-content: start; justify-items: start; }
.commerce-image-toggle-field .commerce-toggle { width: 44px; min-width: 44px; justify-self: start; }
.commerce-image-toggle-field small { color: #969dab; font-size: 11px; line-height: 1.5; }
.commerce-values { padding: 18px 20px 4px; display: grid; gap: 12px; border-top: 1px dashed #e2e5ec; background: #fcfcfd; }
.commerce-value-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 58px; align-items: end; gap: 18px; }
.commerce-value-row > button { width: 58px; height: 36px; align-self: end; padding: 0; border: 0; border-radius: 4px; color: #e24b4b; background: transparent; font-size: 12px; }
.commerce-value-row > button:hover { background: #fff0f0; }
.commerce-spec-actions { min-height: 52px; padding: 8px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #969dab; background: #fcfcfd; font-size: 11px; }
.commerce-link { margin: 0; padding: 0; border: 0; color: #334fd7; background: transparent; font-size: 12px; }
.commerce-remove-spec { flex: 0 0 auto; padding: 6px 10px; border: 0; border-radius: 4px; color: #e24b4b; background: transparent; font-size: 12px; }
.commerce-remove-spec:hover { background: #fff0f0; }
.commerce-add-spec { margin-top: 18px; color: #334fd7; border-color: var(--target-primary); }
.commerce-detail-title { margin: 24px 0 16px !important; font-size: 14px !important; }
.commerce-variant-table-wrap { overflow-x: auto; }
.commerce-variant-table { min-width: 1050px; }
.commerce-variant-table th, .commerce-variant-table td { text-align: center; }
.commerce-variant-table th button { padding: 0; border: 0; color: #334fd7; background: #eeedff; font-size: 12px; }
.commerce-variant-table input { width: 100%; min-width: 120px; height: 34px; color: #606266; background: #fff; border: 1px solid #d7dce5; box-shadow: none; }
.commerce-variant-table .commerce-toggle { margin: auto; }
.variant-image-button, .package-image-button { width: 60px; height: 60px; border: 1px dashed #cfd5df; border-radius: 5px; color: #909399; background: #fff; padding:0; overflow:hidden; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .variant-image-button:hover, .package-image-button:hover { border-color:var(--red); }
  .variant-image-button .variant-image-add, .package-image-button .variant-image-add { font-size:20px; font-weight:600; line-height:1; }
.commerce-package-list { max-width: 1560px; display: grid; gap: 16px; }
.commerce-package-row { overflow: hidden; border: 1px solid #e2e6ee; border-radius: 9px; background: #fff; box-shadow: 0 3px 12px rgba(36,43,64,.045); }
.commerce-package-head { min-height: 54px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #eceef3; background: #f8f9fb; }
.commerce-package-head > div { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.commerce-package-head strong { color: #303133; font-size: 14px; }
.commerce-package-head span { overflow: hidden; color: #9299a8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.commerce-package-fields { padding: 18px 16px 20px; display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(190px, 1.25fr) minmax(100px, .55fr) repeat(3, minmax(125px, .72fr)) 84px 96px; align-items: end; gap: 14px; }
.commerce-package-fields label { min-width: 0; }
.commerce-package-fields .package-image-field, .commerce-package-fields .package-sale-field { justify-items: start; }
.commerce-package-fields .commerce-toggle { width: 44px; min-width: 44px; margin: 7px 0; }
.commerce-package-fields .package-image-button { width: 54px; height: 38px; }
.package-remove { flex: 0 0 auto; padding: 7px 10px; border: 0; border-radius: 4px; color: #e24b4b; background: transparent; }
.package-remove:hover { background: #fff0f0; }
.commerce-add-package { margin-top: 16px; color: #4f49c8; border-color: #b9b5f2; background: #f7f6ff; }
@media (max-width: 1500px) {
  .commerce-package-fields { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .commerce-package-fields .package-image-field, .commerce-package-fields .package-sale-field { align-self: start; }
}
.commerce-asset-dialog { width: min(560px, calc(100% - 32px)); }
.media-drop-zone { min-height: 120px; margin-top: 18px !important; display: grid !important; place-items: center; border: 1px dashed #cfd5df; color: #334fd7 !important; background: #fafbfc; cursor: pointer; }
.media-drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.product-media-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.product-media-list { min-height: 180px; margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); align-content: start; gap: 12px; }
.product-media-list article { overflow: hidden; padding: 8px; border: 1px solid #ebeef5; border-radius: 5px; }
.product-media-list article > div { height: 120px; display: grid; place-items: center; overflow: hidden; background: #f7f8fa; }
.product-media-list img { width: 100%; height: 100%; object-fit: contain; }
.product-media-list input { height: 32px; margin-top: 8px; font-size: 12px; }
.product-media-list button { margin-top: 7px; padding: 0; border: 0; background: transparent; font-size: 12px; }
.favicon-preview { font-size: 22px; color: #909399; }
.target-editor-actions { position: fixed; z-index: 10; left: 128px; right: 20px; bottom: 20px; height: 63px; padding: 0 24px; display: flex; align-items: center; justify-content: flex-end; gap: 13px; border-top: 1px solid #f0f1f4; background: #fff; }
.target-editor-actions .tbs-button { min-width: 55px; }
.target-product-editor > .form-error { position: fixed; z-index: 11; right: 360px; bottom: 41px; margin: 0; }
.target-toast { position: fixed; z-index: 100; left: 50%; top: 64px; padding: 10px 18px; border: 1px solid #d7eee4; border-radius: 4px; color: #2f855a; background: #f0fff7; box-shadow: 0 4px 16px rgba(0,0,0,.12); opacity: 0; transform: translate(-50%, -8px); transition: opacity .18s ease, transform .18s ease; font-size: 13px; }
.target-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.target-toast.error { color: #c53030; border-color: #fed7d7; background: #fff5f5; }
.target-action-dialog { width: min(560px, calc(100% - 32px)); padding: 22px; }
.target-action-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.target-action-dialog-head h3 { margin: 0; font-size: 17px; font-weight: 400; }
.target-action-dialog-head button { border: 0; color: #909399; background: transparent; font-size: 24px; }
.target-action-dialog label { margin-top: 20px; color: #333; }
.target-action-dialog input { color: #606266; background: #f7f8fa; border-color: #dcdfe6; }
.target-action-dialog textarea, .target-action-dialog select { width: 100%; min-height: 38px; margin-top: 7px; }
.target-action-dialog textarea { min-height: 100px; resize: vertical; }
.product-list-settings-dialog { width: min(600px, calc(100% - 32px)); min-height: 640px; padding: 18px 24px; }
.product-settings-section { padding: 18px 10px 20px; border-bottom: 1px solid #dcdfe6; }
.product-settings-section:last-of-type { border-bottom: 0; }
.product-settings-section h4 { margin: 0 0 18px; font-size: 14px; font-weight: 400; }
.product-settings-section p { margin: 18px 0; color: #a8abb2; font-size: 12px; }
.target-radio-row { display: flex; gap: 34px; }
.target-radio-row label, .settings-radio-stack label { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.target-radio-row input, .settings-radio-stack input { width: 14px; height: 14px; accent-color: var(--target-primary); }
.settings-select-label { display: grid !important; gap: 10px; }
.settings-select-label select { width: 268px; }
.settings-radio-stack { display: grid; gap: 20px; }
.settings-radio-stack span { display: grid; gap: 8px; }
.settings-radio-stack b { color: #6262dc; font-size: 13px; font-weight: 400; }
.settings-radio-stack small { color: #a8abb2; font-size: 12px; }
.target-side-drawer { position: fixed; inset: 0 0 0 auto; width: min(432px, 100vw); max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; }
.target-side-drawer::backdrop { background: rgba(0,0,0,.48); }
.target-side-drawer > form { height: 100%; display: flex; flex-direction: column; }
.drawer-head { height: 52px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebeef5; }
.drawer-head h3 { margin: 0; font-size: 16px; font-weight: 400; }
.drawer-head button { padding: 0; border: 0; color: #909399; background: transparent; font-size: 23px; }
.drawer-tip { margin: 18px 20px; padding: 10px 12px; color: #5668e8; background: #eef0ff; font-size: 12px; }
.column-drawer-head, .column-drawer-row { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; }
.column-drawer-head { min-height: 50px; margin: 0 20px; padding: 0 12px; background: #f7f8fa; font-size: 12px; }
.column-drawer-list { flex: 1; margin: 0 20px; overflow-y: auto; }
.column-drawer-row { min-height: 53px; margin: 0; padding: 0 12px; border-bottom: 1px solid #ebeef5; color: #333; font-size: 12px; cursor: grab; }
.column-drawer-row input { width: 14px; height: 14px; accent-color: var(--target-primary); }
.column-drawer-row b { color: #606266; text-align: center; font-size: 17px; font-weight: 400; }
.column-drawer-row.locked { color: #909399; cursor: default; }
.column-drawer-row.dragging { opacity: .45; }
.drawer-actions { min-height: 64px; padding: 14px 32px; display: flex; justify-content: flex-end; gap: 14px; border-top: 1px solid #ebeef5; }
.scroll-purchase-drawer { width: min(864px, 100vw); }
.review-time-drawer { width: min(480px, 100vw); }
.review-time-fields { flex: 1; padding: 28px 20px; }
.review-time-fields > label { margin: 0; display: grid; gap: 12px; color: #333; font-size: 13px; }
.review-time-fields i { color: #f04444; font-style: normal; }
.review-time-fields select { min-height: 38px; }
.review-time-fields fieldset { margin: 28px 0 0; padding: 0; display: grid; gap: 22px; border: 0; }
.review-time-fields legend { margin-bottom: 22px; font-size: 13px; }
.review-time-fields fieldset label { margin: 0; display: flex; align-items: flex-start; gap: 9px; }
.review-time-fields fieldset input { width: 14px; height: 14px; accent-color: var(--target-primary); }
.review-time-fields fieldset span { display: grid; gap: 8px; }
.review-time-fields fieldset b { color: #6262dc; font-size: 13px; font-weight: 400; }
.review-time-fields fieldset small { color: #a8abb2; font-size: 12px; }
.scroll-drawer-fields { padding: 18px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scroll-drawer-fields > label { margin: 0; display: grid; gap: 8px; color: #333; font-size: 12px; }
.scroll-drawer-fields input { min-height: 34px; }
.scroll-drawer-fields fieldset { margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 20px; }
.scroll-drawer-fields fieldset label { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.scroll-drawer-fields fieldset input { width: 14px; min-height: 14px; accent-color: var(--target-primary); }
.scroll-entry-table-wrap { flex: 1; margin: 0 24px; overflow: auto; }
.scroll-entry-table-wrap .target-simple-table { min-width: 0; }
.scroll-entry-table-wrap .target-empty.compact { min-height: 220px; }
.scroll-entry-table-wrap button { margin-right: 14px; padding: 0; border: 0; color: #334fd7; background: transparent; }
.scroll-entry-table-wrap .danger-link { color: #f04444; }
.scroll-entry-add { align-self: flex-start; margin: 16px 24px; }
.scroll-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #f2f3f5; }
.scroll-avatar img { width: 100%; height: 100%; object-fit: cover; }
.product-stats-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.product-stats-grid div { min-height: 82px; padding: 14px; display: grid; gap: 8px; border: 1px solid #ebeef5; border-radius: 6px; }
.product-stats-grid span { color: #909399; font-size: 12px; }
.product-stats-grid b { color: #303133; font-size: 18px; }
.simulated-product-preview { width: min(510px, calc(100% - 24px)); height: calc(100vh - 28px); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: #eef0f5; }
.simulated-product-preview::backdrop { background: rgba(0,0,0,.56); }
.simulated-preview-head { height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.simulated-preview-head > div { display: flex; align-items: center; gap: 12px; }
.simulated-preview-head span { color: #909399; font-size: 12px; }
.simulated-preview-head a { color: var(--target-primary); text-decoration: none; font-size: 12px; }
.simulated-preview-head button { border: 0; color: #909399; background: transparent; font-size: 24px; }
.simulated-phone { width: 390px; height: calc(100% - 84px); margin: 13px auto; overflow: hidden; border: 8px solid #20242d; border-radius: 27px; background: #fff; }
.simulated-phone iframe { width: 100%; height: 100%; border: 0; }
.target-wide-dialog { padding: 0; overflow: hidden; border: 0; border-radius: 7px; }
.target-wide-dialog::backdrop { background: rgba(0,0,0,.5); }
.target-wide-dialog > form { height: 100%; display: flex; flex-direction: column; }
.template-selector-dialog { position: fixed; inset: 0 0 0 180px; width: calc(100vw - 180px); max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; }
.template-selector-body { flex: 1; min-height: 0; padding: 20px; display: grid; grid-template-columns: 265px 1fr; gap: 24px; }
.template-selector-body > aside { padding: 16px 10px; overflow-y: auto; border: 1px solid #d7dce5; border-radius: 5px; }
.template-selector-body aside h4 { margin: 0 0 20px; font-size: 16px; font-weight: 400; }
.template-selector-body aside b { display: block; margin: 18px 0 12px; font-size: 13px; font-weight: 400; }
.template-selector-body aside > div { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.template-selector-body aside label { margin: 0; display: flex; align-items: center; gap: 6px; color: #606266; font-size: 12px; }
.template-selector-body aside input { width: 14px; height: 14px; accent-color: var(--target-primary); }
.template-selector-body aside p { color: #303133; font-size: 12px; }
.template-selector-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); align-content: start; gap: 20px 32px; }
.template-selector-card { min-height: 410px; padding: 0; overflow: hidden; display: grid; grid-template-rows: 1fr 30px; border: 1px solid #d7dce5; border-radius: 5px; color: #303133; background: #fff; }
.template-selector-card.selected { border: 2px solid var(--target-primary); box-shadow: 0 0 0 2px #e8e6ff; }
.template-selector-card img { width: 100%; height: 380px; object-fit: cover; object-position: top; }
.template-selector-card b { align-self: center; font-size: 13px; font-weight: 400; }
.template-cover-placeholder { display: grid; place-items: center; color: #909399; background: linear-gradient(145deg,#f5f6fa,#e8eaf2); }
.google-conversion-dialog { width: min(800px, calc(100% - 32px)); padding: 18px 24px; }
.google-mode { margin: 24px 0; display: flex; align-items: center; gap: 30px; }
.google-mode label { margin: 0; display: flex; align-items: center; gap: 7px; color: #606266; }
.google-mode input { width: 14px; height: 14px; accent-color: var(--target-primary); }
.google-id-row { margin: 16px 0 !important; display: grid !important; grid-template-columns: 145px 68px minmax(160px, 1fr) 18px minmax(160px, 1fr); align-items: center; }
.google-id-row > span { text-align: right; padding-right: 20px; }
.google-id-row b { height: 38px; display: grid; place-items: center; border: 1px solid #dcdfe6; background: #f7f8fa; font-weight: 400; }
.google-id-row input { margin: 0; min-width: 0; height: 38px; }
.google-id-row em { text-align: center; font-style: normal; }
.b-product-selector-dialog { width: min(1228px, calc(100% - 32px)); height: min(690px, calc(100vh - 32px)); max-width: none; max-height: none; }
.b-product-selector-body { flex: 1; min-height: 0; padding: 20px; display: grid; grid-template-columns: 160px 1fr; gap: 20px; }
.b-product-selector-body aside { padding: 15px 0; display: flex; flex-direction: column; border: 1px solid #d7dce5; border-radius: 5px; }
.b-product-selector-body aside b { padding: 0 16px 12px; font-size: 13px; }
.b-product-selector-body aside button { min-height: 34px; padding: 0 14px; border: 0; color: #606266; background: #fff; text-align: left; }
.b-product-selector-body aside button.active { color: #303133; background: #eeedff; }
.b-product-selector-body main { min-width: 0; overflow-y: auto; }
.b-product-filter { margin-bottom: 20px; display: flex; gap: 20px; }
.b-product-filter input { width: 260px; height: 34px; }
.b-product-selector-body .target-simple-table th:first-child { width: 46px; }
.b-product-selector-body .target-simple-table input { width: 14px; height: 14px; accent-color: var(--target-primary); }
.category-products-dialog { width: min(680px, calc(100% - 32px)); }
.category-editor-dialog { width: min(560px, calc(100% - 32px)); padding: 16px 24px; }
.category-editor-dialog .category-editor-field { margin-top: 16px; display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 0; font-size: 13px; }
.category-editor-field i { color: #f04444; font-style: normal; }
.category-editor-field input, .category-editor-field select { margin: 0; min-height: 34px; }
.attribute-editor-dialog { width: min(800px, calc(100% - 32px)); min-height: 560px; padding: 18px 24px; }
.attribute-main-fields { margin: 24px 58px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.attribute-main-fields label, .attribute-value-row label { margin: 0; display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 4px; color: #333; font-size: 13px; }
.attribute-main-fields label:first-child { grid-column: 1 / -1; width: calc(50% - 10px); }
.attribute-main-fields i, .attribute-value-row i { color: #f04444; font-style: normal; }
.attribute-main-fields input, .attribute-main-fields select, .attribute-value-row input { margin: 0; min-height: 34px; }
.attribute-value-list { margin: 0 58px; display: grid; gap: 16px; }
.attribute-value-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: center; gap: 20px; }
.attribute-value-row > button { border: 0; color: #f04444; background: transparent; }
.attribute-add-value { height: 42px; margin: 16px 30px; border: 1px dashed #d7dce5; color: #111; background: #fff; }
.attribute-editor-dialog .dialog-actions { position: absolute; left: 24px; right: 24px; bottom: 14px; }
.category-product-options { max-height: 430px; margin-top: 18px; overflow-y: auto; border: 1px solid #ebeef5; border-radius: 5px; }
.category-product-options label { min-height: 52px; margin: 0; padding: 9px 13px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #ebeef5; color: #333; }
.category-product-options label:last-child { border-bottom: 0; }
.category-product-options input { width: 14px; height: 14px; }
.category-product-options small { color: #909399; }

dialog { color: #333; background: #fff; border-color: #e5e7eb; }
dialog input, dialog select, dialog textarea { color: #606266; background: #fff; border-color: #dcdfe6; }

@media (max-width: 1180px) {
  .target-filter-field { width: 160px; }
  .target-filter-row { gap: 9px; }
  .target-editor-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); padding-right: 160px; column-gap: 48px; }
  .commerce-spec-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .commerce-image-toggle-field { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 70px minmax(0, 1fr); }
  .sidebar, #module-nav, .module-group { width: 70px; }
  .sidebar-brand strong, .module-button span:not(.module-icon) { display: none; }
  .module-button { width: 55px; margin-left: 15px; padding: 0; }
  .page-list { left: 70px; }
  .nav-backdrop { left: 214px; }
  .content { padding: 12px; }
  .target-filter-row { overflow-x: auto; }
  .target-editor-grid { grid-template-columns: 1fr; padding-right: 0; }
  .commerce-price-grid, .commerce-spec-grid { grid-template-columns: 1fr; }
  .commerce-package-fields { grid-template-columns: 1fr; }
  .commerce-package-head > div { display: grid; gap: 3px; }
  .commerce-image-toggle-field { grid-column: auto; }
  .commerce-value-row { grid-template-columns: 1fr 1fr; }
  .commerce-value-row > button { grid-column: 2; justify-self: end; }
  .commerce-spec-head > div { display: grid; gap: 4px; }
  .target-editor-anchor { display: none; }
  .target-editor-actions { left: 82px; right: 12px; bottom: 12px; }
}