.app-shell.admin-target-mode {
  grid-template-columns: 136px minmax(0, 1fr);
  background: #f6f7fb;
  color: #30374a;
  --admin-primary: #625ed1;
  --admin-line: #e6e8ef;
  --admin-muted: #9299aa;
  --admin-soft: #f6f7f9;
}

.admin-target-mode .sidebar {
  width: 136px;
  background: #f3f1ff;
  border-right: 1px solid #ebe8fb;
  box-shadow: none;
}
.admin-target-mode .sidebar-brand { height: 64px; padding: 0 10px; justify-content: center; gap: 7px; background: #eeeaff; border-bottom: 0; }
.admin-target-mode .sidebar-brand span { flex: 0 0 29px; width: 29px; height: 29px; border-radius: 8px; color: #625ed1; background: transparent; box-shadow: none; font-size: 25px; line-height: 1; }
.admin-target-mode .sidebar-brand span::before { content: none; }
.admin-target-mode .sidebar-brand strong { display: block; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.admin-target-mode #module-nav,
.admin-target-mode .module-group { width: 136px; margin: 0; padding: 0; }
.admin-target-mode .module-button { width: 120px; min-height: 47px; box-sizing: border-box; margin: 0 8px; padding: 8px 10px; color: #535a6d; font-size: 13px; flex-direction: row; justify-content: flex-start; gap: 8px; border-radius: 12px; }
.admin-target-mode .module-button > span:not(.module-icon) { white-space: nowrap; }
.admin-target-mode .module-button .module-icon { width: 20px; height: 20px; color: #596175; }
.admin-target-mode .module-button:hover,
.admin-target-mode .module-button.active,
.admin-target-mode .module-button.hover-open { color: #625ed1; background: #eae7ff; }
.admin-target-mode .module-button.active::before { display: none; }
.admin-target-mode .module-button.active .module-icon,
.admin-target-mode .module-button.hover-open .module-icon { color: #625ed1; }
.admin-target-mode .page-list { left: 136px; top: 0; width: 232px; background: white; color: #353b4c; border-right: 1px solid #e8eaf0; box-shadow: 14px 0 35px rgba(58, 63, 85, .12); }
.admin-target-mode .page-button { color: #616879; }
.admin-target-mode .page-button:hover,
.admin-target-mode .page-button.active,
.admin-target-mode .page-button.hover-open { color: #625ed1; background: #f0eeff; }
.admin-target-mode .nav-backdrop { inset: 0 0 0 368px; }
.admin-target-mode .topbar { min-height: 44px; height: 44px; padding: 0 12px; color: #30374a; background: white; border-bottom: 1px solid #e7e9ef; backdrop-filter: none; }
.admin-target-mode .home-tab-button,
.admin-target-mode .top-tab { height: 44px; color: #4f5668; background: white; border-color: #e4e6ed; border-radius: 0; }
.admin-target-mode .top-tab { background: #f1efff; color: #625ed1; }
.admin-target-mode #page-subtitle,
.admin-target-mode .top-tab-divider { display: none; }
.admin-target-mode .top-tool { height: 42px; color: #596175; }
.admin-target-mode .top-tool span { color: #596175; }
.admin-target-mode .top-tool:hover { color: #625ed1; background: #f5f3ff; }
.admin-target-mode .user-pill { color: #30374a; background: white; border: 0; }
.admin-target-mode #logout-button { color: #596175; background: white; border-color: #e4e6ed; }
.admin-target-mode .content { min-height: calc(100vh - 44px); padding: 20px; color: #30374a; background: #f6f7fb; }

.admin-target-mode input,
.admin-target-mode select,
.admin-target-mode textarea,
.admin-dialog input,
.admin-dialog select,
.admin-dialog textarea {
  color: #333a4c;
  background: white;
  border: 1px solid #dfe2eb;
  border-radius: 4px;
  box-shadow: none;
}
.admin-target-mode input:focus,
.admin-target-mode select:focus,
.admin-target-mode textarea:focus,
.admin-dialog input:focus,
.admin-dialog select:focus,
.admin-dialog textarea:focus { border-color: #625ed1; box-shadow: 0 0 0 2px rgba(98,94,209,.1); }
.admin-target-mode button,
.admin-dialog button { color: #4b5366; }
.admin-target-mode .admin-primary,
.admin-dialog .admin-primary { color: white; background: #625ed1; border-color: #625ed1; }

.admin-page-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; border-bottom: 1px solid var(--admin-line); }
.admin-page-head h3 { margin: 0; color: #252b3a; font-size: 17px; font-weight: 500; }
.admin-page-head p { margin: 6px 0 0; color: var(--admin-muted); font-size: 13px; }
.admin-workspace,
.admin-inline-page,
.admin-website-editor,
.admin-stat-detail { min-height: calc(100vh - 84px); padding: 22px 24px; background: white; border-radius: 10px; }
.admin-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 20px 0; }
.admin-filter label { width: 150px; margin: 0; gap: 5px; color: #535a6c; }
.admin-filter input,
.admin-filter select { height: 38px; }
.admin-filter button,
.admin-toolbar button,
.admin-back,
.inline-save button,
.admin-dialog-actions button,
.admin-period-tabs button,
.chart-head button { min-height: 34px; padding: 7px 15px; border: 1px solid #dfe2eb; border-radius: 4px; background: white; }
.admin-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-toolbar > div { display: flex; align-items: center; gap: 10px; }
.admin-toolbar > span { color: var(--admin-muted); font-size: 13px; }
.inline-select { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; color: #535a6c; }
.inline-select select { width: 180px; }
.admin-table-wrap { overflow: auto; border: 0; border-radius: 0; }
.admin-table-wrap table { min-width: 980px; color: #41485a; }
.admin-table-wrap th,
.admin-table-wrap td { height: 48px; padding: 10px 12px; border-bottom: 1px solid #eaecf2; background: white; }
.admin-table-wrap th { color: #4d5466; background: #f7f8fa; font-weight: 500; }
.admin-table-wrap tr:hover td { background: #fafaff; }
.admin-table-wrap td input,
.admin-table-wrap td select { min-width: 120px; height: 34px; padding: 6px 8px; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-row-actions button,
.text-button,
.danger-text { padding: 0; border: 0; color: #625ed1 !important; background: transparent !important; white-space: nowrap; }
.admin-row-actions .danger-text,
.danger-text { color: #ed6767 !important; }
.admin-empty { min-height: 180px; display: grid; place-items: center; align-content: center; color: #a4aaba; }
.admin-empty span { font-size: 40px; }
.admin-empty p { margin: 8px 0 0; }
.admin-status { display: inline-block; padding: 3px 9px; border-radius: 999px; color: #50a879; background: #eaf8f1; font-size: 12px; }
.admin-status.draft { color: #e19a44; background: #fff6e8; }
.admin-status.disabled { color: #9ca3b2; background: #f0f1f4; }
.admin-site-logo,
.admin-product-cover { width: 45px; height: 45px; display: inline-grid; place-items: center; overflow: hidden; border: 1px solid #e6e8ef; border-radius: 5px; color: #625ed1; background: #f3f1ff; }
.admin-product-cover img,
.admin-site-logo img { width: 100%; height: 100%; object-fit: cover; }
.admin-table-wrap td small { display: block; margin-top: 4px; color: #969cac; }

/* Dashboard */
.admin-dashboard { display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(320px, .95fr); gap: 18px; color: #30374a; }
.dashboard-main,
.dashboard-side { min-width: 0; }
.admin-note { margin: 4px 0 17px; color: #5f6678; font-size: 13px; }
.admin-period-tabs { display: flex; justify-content: flex-end; gap: 10px; margin: -43px 0 16px; }
.admin-period-tabs button,
.chart-head button { color: #555d6f; border: 0; background: #f4f5f8; }
.admin-period-tabs .active,
.chart-head .active { color: #625ed1; border: 1px solid #625ed1; background: white; }
.period-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; background: white; border-radius: 10px; }
.period-grid article { min-height: 144px; padding: 18px 18px 12px; border-right: 1px solid #e9ebf1; }
.period-grid article:last-child { border-right: 0; }
.period-grid h4 { margin: 0 0 14px; color: #343b4d; font-size: 14px; }
.period-grid h4::first-letter { color: #625ed1; }
.period-grid dl { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 0; }
.period-grid dt { color: #62697a; font-size: 12px; }
.period-grid dd { margin: 0; color: #171c28; font-size: 17px; font-weight: 700; }
.admin-chart-card,
.dashboard-bottom article,
.dashboard-side article,
.stat-funnel { padding: 18px 20px; background: white; border-radius: 10px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-head h4,
.dashboard-side h4,
.stat-funnel h4 { margin: 0; font-size: 15px; }
.chart-head > div { display: flex; align-items: center; gap: 8px; }
.chart-head select { width: 100px; height: 34px; }
.bar-chart { height: 330px; padding: 40px 30px 0; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 1px solid #e8eaf0; background: repeating-linear-gradient(to bottom, transparent 0 64px, #f0f1f5 65px); }
.bar-chart i { width: 20px; border-radius: 3px 3px 0 0; background: linear-gradient(#7772e3, #625ed1); opacity: .84; }
.chart-legend { display: flex; justify-content: center; gap: 24px; padding-top: 14px; color: #707789; font-size: 12px; }
.chart-legend span:first-child { color: #625ed1; }
.chart-legend span:last-child { color: #dd9b19; }
.dashboard-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.dashboard-bottom article { overflow: hidden; }
.dashboard-bottom table { min-width: 520px; margin-top: 14px; }
.dashboard-bottom th,
.dashboard-bottom td { color: #535a6d; border-bottom-color: #eceef3; background: white; }
.rank { width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 50%; color: white; background: #7b76de; }
.dashboard-side { display: grid; align-content: start; gap: 18px; }
.dashboard-side article { min-height: 142px; }
.todo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }
.todo-grid button { position: relative; min-height: 66px; padding: 11px 14px 11px 20px; display: grid; grid-template-columns: 1fr auto; text-align: left; border: 0; border-radius: 7px; background: #f6f7fa; }
.todo-grid button::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: #625ed1; }
.todo-grid span { font-size: 13px; }
.todo-grid b { grid-row: 2; font-size: 16px; }
.todo-grid em { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #625ed1; font-style: normal; font-size: 12px; }
.quick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.quick-grid button { min-width: 0; display: grid; gap: 7px; place-items: center; border: 0; color: #625ed1; background: transparent; font-size: 24px; }
.quick-grid span { color: #535a6d; font-size: 11px; white-space: nowrap; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.resource-grid span { padding: 12px; color: #737a8b; background: #f6f7fa; font-size: 12px; }
.resource-grid b { display: block; margin-top: 6px; color: #30374a; font-size: 14px; }
.notice-row { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding-bottom: 10px; border-bottom: 1px solid #eceef2; font-size: 12px; }
.notice-row time { color: #999faf; }

/* Website editor */
.admin-website-editor { padding-bottom: 84px; }
.admin-website-editor form { padding-top: 18px; }
.asset-column { display: block; max-width: 660px; }
.asset-column label { grid-template-columns: 110px 104px minmax(260px, 1fr); align-items: start; margin: 0 0 20px; }
.asset-column label > span { padding-top: 8px; }
.asset-column small,
.editor-setting-row small,
.radio-line small,
.switch-line small { color: #9ba1ae; font-size: 12px; line-height: 1.7; }
.picture-card { width: 104px; height: 104px; display: grid; place-items: center; align-content: center; gap: 5px; overflow: hidden; border: 1px dashed #d7dae3; border-radius: 6px; color: #9aa0ad !important; background: #fafafa; }
.picture-card b { font-size: 28px; font-weight: 300; }
.picture-card em { font-size: 12px; font-style: normal; }
.picture-card img { width: 100%; height: 100%; object-fit: cover; }
.small-picture { width: 104px; height: 104px; }
.required::before,
.site-field-grid label::before { content: "*"; margin-right: 4px; color: #ef6f6f; }
.site-field-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 2px 38px; max-width: 940px; }
.site-field-grid label { display: flex; align-items: center; gap: 8px; }
.site-field-grid input,
.site-field-grid select { min-width: 0; flex: 1; }
.site-field-grid textarea { min-height: 80px; }
.radio-line,
.switch-line { min-height: 46px; display: flex; align-items: center; gap: 22px; }
.radio-line > span,
.switch-line > span { min-width: 112px; color: #555c6e; }
.radio-line label { display: flex; grid-template-columns: auto auto; gap: 6px; align-items: center; margin: 0; color: #535a6c; }
.radio-line input { width: auto; }
.editor-section-title { margin: 26px -24px 10px; padding: 0 24px 14px; border-bottom: 1px solid #e7e9ef; font-weight: 500; }
.editor-setting-row { min-height: 70px; display: grid; grid-template-columns: 128px minmax(180px, 1fr); gap: 14px; align-items: start; padding: 12px 48px; }
.editor-setting-row > span { padding-top: 8px; }
.editor-setting-row > button { width: max-content; }
.editor-setting-row select[multiple] { min-height: 100px; }
.carousel-assets { display: flex; flex-wrap: wrap; gap: 12px; }
.sticky-form-actions { position: fixed; z-index: 5; right: 0; bottom: 0; left: 136px; height: 64px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 0 28px; border-top: 1px solid #e7e9ef; background: white; }
.sticky-form-actions button { padding: 9px 18px; border: 1px solid #dfe2e9; border-radius: 5px; background: white; }

/* Inline settings */
.admin-inline-page { background: #f6f7f9; }
.admin-inline-page .admin-page-head { margin: -22px -24px 18px; padding: 0 24px; background: white; }
.admin-inline-page form > article { margin-bottom: 18px; padding: 18px 24px; background: white; }
.admin-inline-page article h4 { margin: 0 0 20px; padding-left: 10px; border-left: 4px solid #625ed1; color: #262d3d; font-size: 15px; font-weight: 500; }
.number-rule { display: flex; align-items: center; gap: 0; color: #596073; }
.number-rule input { width: 85px; height: 34px; border-radius: 0; text-align: center; }
.number-rule button { width: 34px; height: 34px; border: 1px solid #dfe2ea; background: #f8f9fb; }
.sms-schedule-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 220px)); gap: 14px 20px; margin-bottom: 16px; }
.sms-schedule-grid label,
.sms-rule-card > label:not(.admin-switch) { display: flex; flex-direction: column; gap: 7px; color: #565d6f; font-size: 13px; }
.sms-schedule-grid input,
.sms-rule-card > label:not(.admin-switch) select { width: 100%; min-height: 36px; }
.sms-rule-card > .admin-switch { margin-top: 14px; }
.admin-info { padding: 11px 16px; color: #315cf4; background: #e9edfc; border-radius: 4px; font-size: 12px; }
.admin-muted { color: #9299a9; font-size: 12px; }
.inline-save { display: flex; justify-content: flex-end; padding: 15px 0; }
.admin-switch { display: inline-block; margin: 0; }
.admin-switch input { position: absolute; opacity: 0; pointer-events: none; }
.admin-switch i,
.admin-toggle { width: 39px; height: 21px; position: relative; display: inline-block; border: 0; border-radius: 999px; background: #c9cdd6; }
.admin-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .16s; }
.admin-switch input:checked + i,
.admin-toggle.on { color: white; background: #625ed1; }
.admin-switch input:checked + i::after { transform: translateX(18px); }
.admin-switch.large i { width: 43px; }
.global-settings form > article { min-height: 160px; }
.global-rule { display: flex; align-items: center; gap: 8px; }
.global-rule input { width: 76px; text-align: center; }

/* Users / roles / regions / statistics */
.admin-user-page { min-height: calc(100vh - 84px); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
.admin-user-page > aside,
.admin-user-page > main { padding: 20px; background: white; border-radius: 10px; }
.admin-user-page > aside > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.admin-user-page > aside > div button { border: 0; color: #625ed1; background: transparent; }
.admin-user-page aside nav { display: grid; margin-top: 18px; }
.admin-user-page aside nav button { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 0; text-align: left; background: transparent; }
.admin-user-page aside nav button.active { color: #625ed1; background: #f0eeff; }
.admin-user-page aside nav i { margin-left: auto; font-style: normal; }
.add-user { margin-bottom: 14px; padding: 8px 16px; border: 0; border-radius: 4px; }
.admin-toggle { width: 40px; padding: 0; color: white !important; font-size: 11px; }
.region-flag { color: #625ed1; }
.admin-product-cover + * { vertical-align: top; }
.admin-stat-detail .admin-back { margin: 18px 0; color: #625ed1; }
.stat-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.stat-summary article { padding: 20px; background: #f8f9fb; border-radius: 7px; }
.stat-summary span { display: block; color: #7c8393; font-size: 12px; }
.stat-summary b { display: block; margin: 10px 0 5px; color: #252b38; font-size: 25px; }
.stat-summary em { color: #55a47b; font-size: 11px; font-style: normal; }
.detail-chart { margin-top: 18px; border: 1px solid #eceef3; }
.line-chart { height: 270px; margin-top: 25px; border-bottom: 1px solid #e8eaf0; background: repeating-linear-gradient(to bottom, transparent 0 53px, #eef0f4 54px); }
.line-chart svg { width: 100%; height: 100%; overflow: visible; }
.line-chart polyline { fill: none; stroke: #625ed1; stroke-width: 3; vector-effect: non-scaling-stroke; }
.line-chart polyline.orders { stroke: #dda019; }
.stat-funnel { margin-top: 18px; border: 1px solid #eceef3; }
.stat-funnel > div { display: grid; justify-items: center; gap: 7px; margin-top: 22px; }
.stat-funnel span { display: block; padding: 12px; text-align: center; color: white; background: #716cda; clip-path: polygon(4% 0, 96% 0, 90% 100%, 10% 100%); }

/* Operations pages receive the same light target shell. */
.admin-target-mode .ops-workspace { color: #3d4456; background: white; border-color: #e5e7ee; box-shadow: none; }
.admin-target-mode .ops-filter,
.admin-target-mode .ops-toolbar,
.admin-target-mode .ops-table-wrap,
.admin-target-mode .ops-pagination { background: white; border-color: #e7e9ef; }
.admin-target-mode .ops-table th { color: #4f5667; background: #f7f8fa; border-color: #e9ebf0; }
.admin-target-mode .ops-table td { color: #4c5365; background: white; border-color: #eceef2; }
.admin-target-mode .ops-table tr:hover td { background: #fafaff; }
.admin-target-mode .tbs-button { color: #51586a; background: white; border-color: #dfe2e9; }
.admin-target-mode .tbs-button.primary, .admin-target-mode .tbs-btn-primary { color: white; background: #625ed1; border-color: #625ed1; }
.admin-target-mode .tbs-btn-ship { color: #409eff; border-color: #b3d8ff; background: #ecf5ff; }
.admin-target-mode .tbs-btn-ship:hover { color: #fff; background: #409eff; border-color: #409eff; }
.admin-target-mode .tbs-btn-danger { color: #f56c6c; border-color: #fab6b6; background: #fef0f0; }
.admin-target-mode .tbs-btn-danger:hover { color: #fff; background: #f56c6c; border-color: #f56c6c; }
.admin-target-mode .tbs-btn-warn { color: #e6a23c; border-color: #f5dab1; background: #fdf6ec; }
.admin-target-mode .tbs-btn-warn:hover { color: #fff; background: #e6a23c; border-color: #e6a23c; }
.admin-target-mode .tbs-btn-io { color: #909399; border-color: #dcdfe6; background: #f4f4f5; }
.admin-target-mode .tbs-btn-io:hover { color: #fff; background: #909399; border-color: #909399; }
.admin-target-mode .tbs-btn-batch { color: #7b5ea7; border-color: #d4c5e8; background: #f6f2fb; }
.admin-target-mode .tbs-btn-batch:hover { color: #fff; background: #7b5ea7; border-color: #7b5ea7; }
.admin-target-mode .tbs-btn-sign { color: #67c23a; border-color: #b3e19d; background: #f0f9eb; }
.admin-target-mode .tbs-btn-sign:hover { color: #fff; background: #67c23a; border-color: #67c23a; }
.admin-target-mode .ops-department-panel { color: #4d5465; background: #fafafe; border-color: #e5e7ee; }

/* Dialogs */
.admin-dialog { width: min(680px, calc(100% - 36px)); max-height: calc(100vh - 50px); overflow: auto; padding: 22px 24px; color: #3b4254; background: white; border: 1px solid #e1e4eb; border-radius: 8px; box-shadow: 0 25px 80px rgba(31, 37, 55, .24); }
.admin-dialog::backdrop { background: rgba(25, 30, 45, .42); backdrop-filter: none; }
.admin-dialog.small { width: min(440px, calc(100% - 36px)); }
.admin-dialog-head { display: flex; justify-content: space-between; align-items: center; margin: -22px -24px 20px; padding: 17px 24px; border-bottom: 1px solid #e8eaf0; }
.admin-dialog-head h3 { margin: 0; color: #282e3c; font-size: 16px; font-weight: 500; }
.admin-dialog-head button { border: 0; color: #969cac; background: transparent; font-size: 22px; }
.admin-dialog form > label { color: #565d6f; }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.admin-dialog fieldset { margin: 14px 0; border: 1px solid #e5e7ee; }
.admin-dialog legend { color: #4f5668; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.check-grid label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 7px; margin: 3px 0; }
.check-grid input { width: auto; }
.admin-tab-row { display: flex; gap: 8px; margin-bottom: 14px; }
.admin-tab-row button { padding: 8px 15px; border: 1px solid #e0e3ea; background: white; }
.admin-tab-row .active { color: #625ed1; border-color: #625ed1; }
.cross-grid { padding: 15px; background: #f8f9fb; }
.admin-role-dialog { width: min(940px, calc(100% - 36px)); }
.permission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-height: 500px; overflow: auto; }
.permission-grid fieldset { margin: 0; padding: 10px 12px; }
.permission-grid label { display: flex; grid-template-columns: auto 1fr; gap: 6px; align-items: center; margin: 5px 0; }
.permission-grid input { width: auto; }
.admin-template-dialog { width: min(920px, calc(100% - 36px)); }
.admin-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-template-grid button { overflow: hidden; padding: 0 0 12px; display: grid; text-align: left; border: 1px solid #e2e4eb; border-radius: 7px; background: white; }
.admin-template-grid button:hover { border-color: #625ed1; box-shadow: 0 0 0 2px rgba(98,94,209,.1); }
.admin-template-grid span { height: 135px; background: #f1f2f5 center/cover no-repeat; }
.admin-template-grid b,
.admin-template-grid em { padding: 8px 11px 0; }
.admin-template-grid em { color: #969cac; font-size: 11px; font-style: normal; }

@media (max-width: 1180px) {
  .admin-dashboard { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2, 1fr); }
  .site-field-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-user-page { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .app-shell.admin-target-mode { grid-template-columns: 72px minmax(0, 1fr); }
  .admin-target-mode .sidebar,
  .admin-target-mode #module-nav,
  .admin-target-mode .module-group,
  .admin-target-mode .module-button { width: 72px; }
  .admin-target-mode .module-button { justify-content: center; padding: 8px; }
  .admin-target-mode .module-button span:not(.module-icon) { display: none; }
  .admin-target-mode .page-list { left: 72px; }
  .period-grid,
  .stat-summary { grid-template-columns: repeat(2, 1fr); }
  .dashboard-bottom,
  .dashboard-side,
  .admin-user-page,
  .site-field-grid { grid-template-columns: 1fr; }
  .admin-user-page > aside { max-height: 260px; overflow: auto; }
  .permission-grid,
  .admin-template-grid { grid-template-columns: 1fr; }
  .sticky-form-actions { left: 72px; }
}

/* Target-aligned single-page template center */
.target-template-center { min-height: calc(100vh - 84px); padding: 20px; color: #363d4e; background: white; border-radius: 10px; }
.target-template-center > header { min-height: 66px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid #e6e8ef; }
.target-template-center > header h3 { margin: 0; color: #242a38; font-size: 18px; font-weight: 600; }
.target-template-center > header p { margin: 8px 0 0; color: #8c93a3; font-size: 13px; }
.target-template-counts { display: flex; gap: 8px; }
.target-template-counts span { padding: 7px 11px; border: 1px solid #dddaf8; border-radius: 999px; color: #625ed1; background: #f5f3ff; font-size: 12px; }
.target-template-toolbar { min-height: 64px; display: flex; align-items: center; gap: 12px; }
.target-template-toolbar label { margin: 0 0 0 auto; }
.target-template-toolbar input { width: 250px; height: 36px; }
.target-template-toolbar > button,
.target-template-tabs button { min-height: 36px; padding: 8px 15px; border: 1px solid #dfe2e9; border-radius: 4px; color: #555c6e; background: white; }
.target-template-toolbar > button.primary,
.target-template-tabs button.active { color: white; border-color: #625ed1; background: #625ed1; }
.target-template-toolbar > button.danger { color: #d14343; border-color: #efb6b6; background: #fff7f7; }
.target-template-toolbar > button:disabled { opacity: .45; cursor: not-allowed; }
.target-template-tabs { display: flex; gap: 0; }
.target-template-tabs button { border-radius: 0; }
.target-template-tabs button:first-child { border-radius: 4px 0 0 4px; }
.target-template-tabs button:last-child { border-radius: 0 4px 4px 0; }
.target-template-shell { width: 100%; }
.target-template-shell > main { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 280px)); gap: 20px; align-items: start; }
.target-template-card { width: 100%; min-width: 0; overflow: hidden; border: 1px solid #dfe2e9; border-radius: 5px; background: white; transition: border-color .15s, box-shadow .15s, transform .15s; }
.target-template-card:hover { transform: translateY(-2px); border-color: #aaa6e8; box-shadow: 0 10px 28px rgba(45, 51, 72, .1); }
.target-template-card.selected { border-color: #625ed1; box-shadow: 0 0 0 2px rgba(98, 94, 209, .12); }
.target-template-phone { position: relative; height: 430px; overflow: hidden; display: grid; place-items: center; color: #252a35; background: var(--template-bg, #f4f5f7); }
.target-template-phone > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.target-pinned,
.target-custom-label { position: absolute; z-index: 2; left: 0; top: 0; padding: 6px 9px; color: white; background: #ff705d; font-size: 11px; }
.target-custom-label { background: #625ed1; }
.target-selected-corner { display: none; position: absolute; z-index: 3; right: 0; top: 0; width: 34px; height: 34px; padding: 3px 4px 0 0; text-align: right; color: white; background: #58c12a; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.target-template-card.selected .target-selected-corner { display: block; }
.target-phone-shell { position: relative; width: min(218px, calc(100% - 28px)); height: 400px; border: 7px solid #252a35; border-radius: 24px; background: white; box-shadow: 0 8px 30px rgba(39,45,63,.16); }
.target-phone-shell i { position: absolute; left: 9%; right: 9%; top: 8%; height: 14%; background: var(--template-primary); opacity: .75; }
.target-phone-shell b { position: absolute; left: 9%; right: 35%; top: 28%; height: 8px; border-radius: 8px; background: #232833; box-shadow: 0 15px 0 #a1a6b0, 0 30px 0 #a1a6b0; }
.target-phone-shell em { position: absolute; right: 9%; top: 27%; width: 26%; height: 31%; border-radius: 6px; background: linear-gradient(145deg, #282d38, #777d89); }
.target-phone-shell strong { position: absolute; right: 9%; top: 5%; color: var(--template-primary); font-size: 10px; }
.target-template-name { min-height: 55px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; border-top: 1px solid #e8eaf0; }
.target-template-name b { overflow: hidden; color: #272d3b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.target-template-name span { padding: 4px 8px; color: #554fc8; border: 1px solid #d9d6ff; border-radius: 999px; background: #f3f2ff; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; }
.target-template-actions { padding: 0 10px 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.target-template-actions button,
.target-template-actions a { min-height: 28px; padding: 5px 8px; border: 1px solid #dfe2e9; border-radius: 4px; color: #606779; background: white; text-decoration: none; font-size: 10px; }
.target-template-actions .primary { color: white; border-color: #625ed1; background: #625ed1; }
.target-template-actions .danger { color: #d14343; border-color: #efb6b6; background: #fff7f7; }
.target-template-empty { grid-column: 1 / -1; min-height: 380px; display: grid; place-items: center; color: #999faf; background: #f8f9fb; }
.template-action-dialog { width: min(520px, calc(100% - 36px)); padding: 20px 22px; color: #3e4557; background: white; border: 1px solid #e0e3e9; border-radius: 8px; }
.template-action-dialog::backdrop { background: rgba(30, 35, 50, .46); }
.template-action-head { display: flex; justify-content: space-between; align-items: center; margin: -20px -22px 20px; padding: 16px 22px; border-bottom: 1px solid #e7e9ef; }
.template-action-head h3 { margin: 0; color: #282e3d; font-size: 16px; }
.template-action-head button { border: 0; color: #9299aa; background: transparent; font-size: 21px; }
.template-action-dialog label { color: #555d70; }
.template-action-dialog input,
.template-action-dialog select { color: #353c4e; background: white; border-color: #dfe2e9; }
.template-action-dialog p { color: #9299a9; font-size: 12px; line-height: 1.7; }
.landing-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; padding: 0; border: 0; }
.landing-mode-options legend { grid-column: 1 / -1; margin-bottom: 8px; color: #555d70; font-size: 13px; }
.landing-mode-options label { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 12px; border: 1px solid #dfe2e9; border-radius: 7px; cursor: pointer; transition: border-color .15s, background .15s; }
.landing-mode-options label:has(input:checked) { border-color: #625ed1; background: #f4f3ff; box-shadow: 0 0 0 1px rgba(98, 94, 209, .12); }
.landing-mode-options input { width: auto; margin-top: 3px; accent-color: #625ed1; }
.landing-mode-options span { display: grid; gap: 4px; }
.landing-mode-options b { color: #333a4d; font-size: 13px; }
.landing-mode-options small { color: #8d94a5; font-size: 11px; line-height: 1.45; }
@media (max-width: 560px) { .landing-mode-options { grid-template-columns: 1fr; } }
.template-action-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.template-action-buttons button { padding: 8px 15px; border: 1px solid #dfe2e9; border-radius: 4px; color: #555d6f; background: white; }
.template-action-buttons .primary { color: white; border-color: #625ed1; background: #625ed1; }

/* Functional client-side download center */
.download-center-dialog { width: min(980px, calc(100% - 40px)); max-height: calc(100vh - 48px); overflow: auto; padding: 0; color: #3d4456; background: #f6f7fa; border: 1px solid #e0e3e9; border-radius: 10px; box-shadow: 0 30px 100px rgba(29, 34, 50, .3); }
.download-center-dialog::backdrop { background: rgba(28, 33, 47, .48); backdrop-filter: none; }
.download-center-head { min-height: 105px; padding: 22px 26px; display: flex; justify-content: space-between; gap: 20px; color: white; background: linear-gradient(130deg, #5550bd, #7772e4); }
.download-center-head span { display: block; margin-bottom: 6px; color: #d9d7ff; font-size: 10px; letter-spacing: .15em; }
.download-center-head h3 { margin: 0; font-size: 21px; }
.download-center-head p { margin: 7px 0 0; color: #e2e1ff; font-size: 12px; }
.download-center-head button { width: 34px; height: 34px; border: 0; color: white; background: transparent; font-size: 25px; }
.download-datasets { padding: 20px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.download-datasets article { min-height: 120px; padding: 17px; display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; border: 1px solid #e1e4eb; border-radius: 7px; background: white; }
.download-datasets article > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 9px; color: #625ed1; background: #eeecff; font-size: 22px; font-style: normal; }
.download-datasets h4 { margin: 0; color: #2c3241; font-size: 15px; }
.download-datasets p { margin: 7px 0; color: #7f8799; font-size: 11px; line-height: 1.5; }
.download-datasets small { color: #a0a6b4; font-size: 10px; }
.download-datasets button { padding: 8px 12px; border: 1px solid #625ed1; border-radius: 4px; color: white; background: #625ed1; font-size: 12px; }
.download-datasets button:disabled { opacity: .6; cursor: wait; }
.download-recent { margin: 0 24px 24px; padding: 18px; border: 1px solid #e1e4eb; border-radius: 7px; background: white; }
.download-recent > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.download-recent h4 { margin: 0; color: #303646; font-size: 15px; }
.download-recent > div:first-child button { border: 0; color: #8f96a6; background: transparent; font-size: 11px; }
.download-recent table { min-width: 680px; }
.download-recent th,
.download-recent td { color: #555d6f; border-bottom: 1px solid #eceef2; background: white; }
.download-recent th { background: #f7f8fa; }
.download-recent td:first-child { display: flex; align-items: center; gap: 10px; }
.download-recent td b { display: block; max-width: 340px; overflow: hidden; color: #343a49; text-overflow: ellipsis; white-space: nowrap; }
.download-recent td small { display: block; margin-top: 3px; color: #969dac; }
.download-recent td button { border: 0; color: #625ed1; background: transparent; }
.download-file-icon { padding: 6px 7px; border-radius: 4px; color: #3aa66f; background: #e8f7f0; font-size: 9px; font-weight: 700; }
.download-empty { min-height: 105px; display: grid; place-items: center; color: #9ca2b1; background: #fafbfc; }
.store-sync-card { margin: 0 0 16px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #e2e6ef; border-radius: 8px; background: #f8faff; }
.store-sync-card strong { color: #202939; }
.store-sync-card p { margin: 5px 0 0; color: #7b8495; font-size: 12px; }

@media (max-width: 960px) {
  .target-template-shell > main { grid-template-columns: repeat(auto-fill, minmax(230px, 280px)); }
  .download-datasets { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .target-template-center > header,
  .target-template-toolbar { align-items: stretch; flex-direction: column; }
  .target-template-toolbar label { margin: 0; }
  .target-template-toolbar input { width: 100%; }
  .target-template-shell > main { grid-template-columns: 1fr; }
  .download-datasets article { grid-template-columns: 44px 1fr; }
  .download-datasets article > button { grid-column: 1 / -1; }
}