:root {
    --blue: #2878f0;
    --blue-deep: #1f69dd;
    --blue-soft: #edf5ff;
    --page: #f3f5f7;
    --white: #fff;
    --ink: #252525;
    --muted: #8b8f94;
    --line: #e8eaed;
    --sidebar: 250px;
    --header: 66px;
    --macos-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    --pointer-default: default;
    --pointer-hand: pointer;
    --pointer-text: text;
    --pointer-no: not-allowed;
}

.dialog-close {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #8a9298;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.dialog-close:hover { color: #343a40; background: transparent; }

*, *::before, *::after { box-sizing: border-box; cursor: var(--pointer-default); }
html { min-width: 1650px; background: var(--page); font-family: var(--macos-font); }
body { margin: 0; min-width: 1650px; color: var(--ink); background: var(--page); font-family: var(--macos-font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.security-watermark { position: fixed; z-index: 9999; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
a { color: inherit; text-decoration: none; }
a, button, select, summary, [role="button"] { cursor: var(--pointer-hand); }
input, textarea { cursor: var(--pointer-text); }
button, input, select, textarea { font: inherit; }
button { cursor: var(--pointer-hand); }
[disabled], [aria-disabled="true"] { cursor: var(--pointer-no); }

.admin-shell { min-height: 100vh; }
.admin-sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--sidebar); overflow-y: auto; border-right: 1px solid #e5e7ea; background: #fff; scrollbar-width: thin; scrollbar-color: #dfe3e7 transparent; }
.sidebar-brand { display: flex; height: var(--header); align-items: center; padding: 0 20px; border-bottom: 1px solid #edf0f2; }
.sidebar-brand a { display: flex; align-items: center; gap: 8px; }
.brand-symbol { display: grid; width: 33px; height: 33px; place-items: center; overflow: hidden; border-radius: 6px; }
.brand-symbol img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-name { color: #ed3532; font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.brand-suffix { margin-left: 1px; color: #60646b; font-size: 14px; }
.sidebar-nav { padding: 12px 12px 42px; }
.nav-section { padding-bottom: 11px; }
.sidebar-link, .sidebar-group-title { position: relative; display: flex; min-height: 39px; align-items: center; gap: 12px; padding: 0 12px; color: #5b6066; font-size: 14px; }
.sidebar-link:hover, .sidebar-group-title:hover { color: var(--blue); background: #f6f9fd; }
.sidebar-link i, .sidebar-group-title > i { width: 20px; color: #8d949b; font-size: 13px; text-align: center; }
.sidebar-link em { margin-left: auto; padding: 0 5px; border-radius: 4px; color: #fff; background: #f04438; font-size: 11px; font-style: normal; line-height: 21px; }
.sidebar-menu-group { margin-top: 5px; }
.sidebar-menu-group.is-current > .sidebar-group-title, .sidebar-menu-group.is-expanded > .sidebar-group-title { color: var(--blue); }
.sidebar-group-title { width: 100%; min-height: 41px; border: 0; text-align: left; background: transparent; }
.sidebar-group-title b { display: grid; width: 18px; margin-left: auto; place-items: center; color: #b0b4ba; font-size: 12px; font-weight: 400; transition: transform .16s ease; }
.sidebar-menu-group.is-expanded > .sidebar-group-title b { transform: rotate(180deg); }
.sidebar-sub-grid { display: none; grid-template-columns: 1fr 1fr; padding: 2px 10px 6px 44px; }
.sidebar-menu-group.is-expanded > .sidebar-sub-grid { display: grid; }
.sidebar-sub-grid a { min-width: 0; overflow: hidden; padding: 5px 4px; color: #747a80; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-sub-grid a.is-current { color: var(--blue); font-weight: 500; }
.sidebar-sub-grid a:hover { color: var(--blue); }
.sidebar-divider { height: 1px; margin: 10px 10px 8px; background: #edf0f2; }
.compact-group .sidebar-sub-grid { padding-bottom: 5px; }

.admin-main { min-height: 100vh; margin-left: var(--sidebar); }
.admin-header { position: sticky; z-index: 15; top: 0; display: flex; height: var(--header); align-items: center; justify-content: space-between; padding: 0 26px 0 20px; border-bottom: 1px solid #e6e8eb; background: #fff; }
.header-left, .header-right, .header-search, .header-shortcuts, .header-tool, .header-user { display: flex; align-items: center; }
.header-left { min-width: 0; gap: 23px; }
.header-menu-button { display: none; border: 0; color: #6f747a; background: transparent; }
.header-search { width: 335px; height: 38px; gap: 9px; padding: 0 12px; border-radius: 5px; background: #f5f6f8; color: #a1a6ad; }
.header-search i { font-size: 13px; }
.header-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #4d5359; background: transparent; font-size: 13px; }
.header-search input::placeholder { color: #a9adb2; }
.header-shortcuts { gap: 27px; color: #4e5359; font-size: 13px; white-space: nowrap; }
.header-shortcuts a:hover, .header-tool:hover { color: var(--blue); }
.header-shortcuts sup { display: inline-grid; min-width: 18px; height: 18px; place-items: center; border-radius: 11px; color: #fff; background: #f04438; font-size: 11px; line-height: 1; }
.header-right { gap: 26px; }
.header-tool { flex-direction: column; gap: 1px; padding: 0; border: 0; color: #686d72; background: transparent; font-size: 12px; line-height: 1.2; cursor: pointer; }
.header-tool i { margin-bottom: 2px; font-size: 15px; }
.header-qr-menu { position: relative; }
.header-qr-menu::after { position: absolute; top: 100%; right: -24px; left: -24px; height: 12px; content: ""; }
.header-qr-dropdown { position: absolute; z-index: 30; top: calc(100% + 12px); left: 50%; width: 248px; padding: 16px 16px 14px; border: 1px solid #e4e7eb; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(30, 45, 60, .14); text-align: center; transform: translateX(-50%); }
.header-qr-dropdown[hidden] { display: none; }
.header-qr-dropdown::before { position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; border-top: 1px solid #e4e7eb; border-left: 1px solid #e4e7eb; background: #fff; content: ""; transform: translateX(-50%) rotate(45deg); }
.header-qr-code { display: grid; width: 148px; height: 148px; margin: 0 auto 10px; place-items: center; overflow: hidden; border: 1px solid #eef0f2; border-radius: 6px; }
.header-qr-code canvas, .header-qr-code img { display: block; width: 132px; height: 132px; }
.header-qr-dropdown strong { display: block; color: #2d3338; font-size: 13px; font-weight: 600; }
.header-qr-link { display: flex; margin-top: 10px; overflow: hidden; border: 1px solid #e4e7eb; border-radius: 4px; }
.header-qr-link input { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 0; outline: 0; color: #667078; background: #f7f8f9; font-size: 12px; }
.header-qr-link button { flex: 0 0 52px; border: 0; border-left: 1px solid #e4e7eb; color: var(--blue); background: #fff; font-size: 12px; cursor: pointer; }
.header-qr-link button:hover { background: var(--blue-soft); }
.header-line { width: 1px; height: 30px; background: #e5e7ea; }
.header-user-menu { position: relative; }
.header-user-menu::after { position: absolute; top: 100%; right: 0; left: 0; height: 10px; content: ""; }
.header-user { position: relative; z-index: 2; gap: 8px; padding: 0; border: 0; color: #5b6066; background: transparent; font-size: 13px; }
.header-user > i { color: #a9adb2; font-size: 13px; transition: transform .16s ease; }
.header-user-dropdown { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; width: 154px; padding: 6px; border: 1px solid #e4e7eb; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(30, 45, 60, .14); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; visibility: hidden; }
.header-user-dropdown::before { position: absolute; top: -6px; right: 18px; width: 10px; height: 10px; border-top: 1px solid #e4e7eb; border-left: 1px solid #e4e7eb; background: #fff; content: ""; transform: rotate(45deg); }
.header-user-menu:hover .header-user-dropdown, .header-user-menu:focus-within .header-user-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.header-user-menu:hover .header-user > i, .header-user-menu:focus-within .header-user > i { transform: rotate(180deg); }
.header-user-dropdown a, .header-user-dropdown button { position: relative; z-index: 1; display: flex; width: 100%; min-height: 36px; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 4px; color: #596168; background: transparent; font-size: 13px; text-align: left; }
.header-user-dropdown a:hover, .header-user-dropdown button:hover, .header-user-dropdown a:focus-visible, .header-user-dropdown button:focus-visible { outline: 0; color: var(--blue); background: var(--blue-soft); }
.header-user-dropdown i { width: 15px; color: #8f979f; font-size: 13px; text-align: center; }
.header-user-dropdown .is-danger { color: #e04b46; }
.header-user-dropdown .is-danger i { color: #e04b46; }
.user-avatar { display: block; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; }

.dashboard-content { padding: 14px 75px 36px 15px; }
.reference-dashboard { width: 100%; }
.metric-strip { display: grid; grid-template-columns: repeat(8, minmax(150px, 1fr)); gap: 1px; margin-bottom: 12px; padding: 0 3px; border: 1px solid var(--line); background: var(--line); }
.reference-metric { min-height: 95px; padding: 15px 15px 12px; background: #fff; }
.reference-metric > span { display: block; overflow: hidden; color: #555b61; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.reference-metric strong { display: block; margin-top: 8px; color: #1f2327; font-size: 24px; font-weight: 600; line-height: 1.1; }
.reference-metric strong small { margin-left: 3px; color: #4a4f55; font-size: 12px; font-weight: 400; }
.reference-metric a { display: block; margin-top: 4px; color: #337fe9; font-size: 12px; }
.service-strip { margin-bottom: 12px; }
.service-strip .reference-metric { min-height: 90px; }
.service-strip .reference-metric strong { font-size: 21px; }
.service-strip .reference-metric a { color: #8d9298; }

.dashboard-promo-notice { position: relative; display: flex; min-height: 94px; align-items: center; margin-bottom: 12px; padding: 0 48px 0 20px; overflow: hidden; border: 1px solid #d7e6fb; border-radius: 4px; background: linear-gradient(105deg, #eef6ff 0%, #fff 54%, #f5f9ff 100%); }
.dashboard-promo-notice::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, #4a98f6, #2878f0); content: ""; }
.dashboard-promo-notice::after { position: absolute; right: 13%; bottom: -76px; width: 190px; height: 190px; border: 1px solid rgba(73, 143, 231, .12); border-radius: 50%; content: ""; box-shadow: 0 0 0 20px rgba(73, 143, 231, .035), 0 0 0 42px rgba(73, 143, 231, .025); }
.dashboard-promo-visual { position: relative; display: grid; width: 76px; height: 76px; flex: 0 0 76px; place-items: center; margin-right: 17px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #6aaaf8, #2878f0); box-shadow: 0 8px 18px rgba(40, 120, 240, .18); }
.dashboard-promo-visual i { position: relative; z-index: 1; font-size: 29px; transform: rotate(-9deg); }
.dashboard-promo-orbit { position: absolute; display: block; border: 2px solid rgba(255, 255, 255, .72); border-radius: 50%; }
.dashboard-promo-orbit-one { top: 12px; right: 11px; width: 9px; height: 9px; }
.dashboard-promo-orbit-two { right: 16px; bottom: 13px; width: 5px; height: 5px; border: 0; background: #ffd66f; }
.dashboard-promo-copy { position: relative; z-index: 1; min-width: 330px; }
.dashboard-promo-kicker { display: flex; align-items: center; gap: 6px; color: #6e91bd; font-size: 12px; }
.dashboard-promo-kicker span { width: 6px; height: 6px; border-radius: 50%; background: #f4b632; box-shadow: 0 0 0 3px rgba(244, 182, 50, .16); }
.dashboard-promo-copy h2 { margin: 5px 0 0; color: #2f5f9e; font-size: 19px; font-weight: 600; line-height: 1.35; }
.dashboard-promo-copy p { margin: 5px 0 0; color: #7a8fa8; font-size: 13px; }
.dashboard-promo-benefits { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; margin-left: auto; padding: 0 45px 0 55px; color: #6684a8; font-size: 12px; white-space: nowrap; }
.dashboard-promo-benefits span { display: flex; align-items: center; gap: 7px; }
.dashboard-promo-benefits i { width: 15px; color: #4a92ee; font-size: 13px; text-align: center; }
.dashboard-promo-action { position: relative; z-index: 1; display: inline-flex; min-width: 113px; height: 37px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 4px; color: #fff; background: #2878f0; box-shadow: 0 5px 12px rgba(40, 120, 240, .18); font-size: 13px; }
.dashboard-promo-action:hover { background: #1f69dd; box-shadow: 0 7px 15px rgba(40, 120, 240, .25); }
.dashboard-promo-action i { font-size: 11px; transition: transform .16s ease; }
.dashboard-promo-action:hover i { transform: translateX(3px); }
.dashboard-promo-close { position: absolute; z-index: 2; top: 10px; right: 12px; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 4px; color: #9eb3cd; background: transparent; font-size: 13px; }
.dashboard-promo-close:hover { color: #4c7db4; background: rgba(40, 120, 240, .08); }

.reference-card { border: 1px solid var(--line); background: #fff; }
.operation-overview { margin-bottom: 12px; }
.reference-card-title { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #eef0f2; }
.reference-card-title > div:first-child { display: flex; align-items: center; gap: 12px; }
.reference-card-title strong { color: #353a3f; font-size: 16px; font-weight: 600; }
.reference-card-title span { color: #9a9fa5; font-size: 12px; }
.reference-card-title em { color: #f0783e; font-size: 12px; font-style: normal; }
.reference-title-actions { display: flex; align-items: center; gap: 8px; }
.reference-title-actions button, .outline-button { height: 33px; padding: 5px 12px; border: 1px solid #bdd4f8; border-radius: 3px; color: var(--blue); background: #fff; font-size: 12px; }
.reference-title-actions button:hover, .outline-button:hover { border-color: var(--blue); background: var(--blue-soft); }
.title-blue-button { color: #fff !important; border-color: var(--blue) !important; background: var(--blue) !important; }
.operation-body { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: stretch; }
.operation-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; padding: 16px; border-right: 1px solid #eef0f2; }
.operation-stats button { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-width: 0; padding: 12px; border: 1px solid #eef0f2; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.operation-stats button:hover, .operation-stats button.is-selected { border-color: #b9d2f8; background: #f7faff; }
.operation-stats button i { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: #347fdb; background: #eef5ff; font-size: 13px; }
.operation-stats button:nth-child(2) i { color: #20a072; background: #eaf8f2; }
.operation-stats button:nth-child(3) i { color: #8062ca; background: #f2edff; }
.operation-stats button:nth-child(4) i { color: #dc8b28; background: #fff5e6; }
.operation-stats button span { color: #6a7076; font-size: 12px; }
.operation-stats button strong { color: #252a2f; font-size: 18px; font-weight: 600; line-height: 1.2; }
.operation-stats button small { grid-column: 2; color: #a0a5aa; font-size: 12px; }
.reference-chart-wrap { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 16px 20px; }
.chart-filter { display: flex; align-items: center; gap: 8px; height: 28px; color: #6a7076; font-size: 12px; }
.chart-dates { margin-left: auto; color: #a0a5aa; font-size: 12px; }
.reference-chart { display: flex; height: 188px; margin-top: 8px; }
.reference-chart[hidden] { display: none; }
.reference-y-axis { display: flex; width: 52px; flex-direction: column; justify-content: space-between; padding: 2px 8px 22px 0; color: #a5aab0; font-size: 11px; text-align: right; }
.reference-plot { position: relative; flex: 1; }
.plot-lines { position: absolute; inset: 0 0 22px; display: flex; flex-direction: column; justify-content: space-between; }
.plot-lines i { display: block; border-top: 1px solid #f0f2f4; }
.reference-plot svg { position: absolute; inset: 0 0 22px; width: 100%; height: calc(100% - 22px); overflow: visible; }
.reference-plot svg path { fill: none; stroke: #2878f0; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart-hover { position: absolute; inset: 0 0 22px; pointer-events: none; }
.chart-hover-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(40, 120, 240, .35); }
.chart-hover-dot { position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #2878f0; box-shadow: 0 0 0 1px #2878f0; transform: translate(-50%, -50%); }
.chart-hover-tip { position: absolute; z-index: 2; min-width: 148px; padding: 8px 10px; border-radius: 6px; color: #fff; background: rgba(32, 38, 46, .92); box-shadow: 0 6px 16px rgba(20, 30, 45, .18); font-size: 12px; line-height: 1.7; white-space: nowrap; }
.chart-hover-tip b { display: block; margin-bottom: 2px; font-weight: 600; }
.chart-hover-tip span { display: flex; justify-content: space-between; gap: 16px; }
.chart-hover-tip em { font-style: normal; color: #d5dbe2; }
.reference-title-actions button[disabled] { opacity: .6; cursor: default; }
.reference-x-axis { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #a5aab0; font-size: 12px; }
.reference-title-actions a { display: inline-flex; height: 33px; align-items: center; padding: 0 12px; border: 1px solid #bdd4f8; border-radius: 3px; color: var(--blue); background: #fff; font-size: 12px; }

.reference-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.promotion-card, .service-promotion-card { min-width: 0; }
.title-red { color: #e8463e !important; }
.promotion-banner, .service-banner { display: flex; min-height: 87px; align-items: center; margin: 14px 15px 9px; padding: 10px 14px; background: #fafbfc; }
.promotion-label { display: block; width: 51px; height: 59px; margin-right: 13px; object-fit: cover; }
.promotion-label b { font-size: 15px; }
.promotion-banner > div:nth-child(2), .service-banner > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.promotion-banner strong, .service-banner strong { overflow: hidden; color: #43484d; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.promotion-banner span, .service-banner small { margin-top: 6px; color: #8f959b; font-size: 12px; }
.promotion-banner span i { margin-right: 4px; color: #eea731; font-size: 12px; }
.small-blue-button { min-width: 84px; height: 33px; padding: 0 10px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-size: 12px; }
.small-blue-button:hover, .blue-action:hover { background: var(--blue-deep); }
.promotion-tabs { display: flex; align-items: center; gap: 18px; height: 42px; padding: 0 16px; border-top: 1px solid #f0f1f3; border-bottom: 1px solid #f0f1f3; color: #777d83; font-size: 12px; }
.promotion-tabs span { position: relative; cursor: default; }
.promotion-tabs span.is-active { color: var(--blue); }
.promotion-tabs span.is-active::after { position: absolute; right: 0; bottom: -13px; left: 0; height: 3px; background: var(--blue); content: ""; }
.promotion-tabs a { margin-left: auto; color: var(--blue); }
.activity-list { padding: 3px 16px 9px; }
.activity-list > div { display: flex; min-height: 54px; align-items: center; gap: 12px; border-bottom: 1px solid #f2f3f4; }
.activity-list > div:last-child { border-bottom: 0; }
.activity-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 4px; font-size: 12px; }
.red-icon { color: #ef4d45; background: #ffeded; }
.orange-icon { color: #efa127; background: #fff6df; }
.blue-icon { color: #4d8be9; background: #edf5ff; }
.activity-list > div > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.activity-list strong { color: #4b5157; font-size: 13px; font-weight: 500; }
.activity-list small { overflow: hidden; margin-top: 2px; color: #a1a6ab; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.activity-image { display: block; width: 27px; height: 27px; flex: 0 0 auto; object-fit: contain; }
.promotion-badge, .promo-mark { display: grid; flex: 0 0 auto; place-items: center; margin-right: 13px; }
.promotion-badge { width: 51px; height: 59px; padding: 0 6px; color: #fff; background: linear-gradient(160deg, #ff7a4d, #ef4d45); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; }
.promo-mark { width: 48px; height: 48px; border-radius: 8px; font-size: 20px; }
.small-blue-button.is-static { display: inline-flex; align-items: center; justify-content: center; color: #ffffff;}
a.official-banner { color: inherit; text-decoration: none; }
.promo-empty { padding: 28px 16px; color: #a1a6ab; font-size: 12px; text-align: center; }
.service-banner { margin-bottom: 10px; }
.gift-box { display: block; width: 48px; height: 48px; margin-right: 13px; object-fit: contain; }
.title-blue { color: var(--blue) !important; }
.secondary-tabs { margin-top: 3px; }
.official-banner { display: flex; min-height: 129px; align-items: center; justify-content: space-between; margin: 14px 15px 15px; padding: 0 39px 0 93px; overflow: hidden; background: linear-gradient(105deg, #e5edff, #cfddfb); }
.official-banner > div:first-child { display: flex; flex-direction: column; }
.official-banner strong { color: #4d6ca8; font-size: 24px; font-weight: 700; }
.official-banner span { margin-top: 4px; color: #7791bd; font-size: 12px; }
.banner-graphic { position: relative; width: 140px; height: 108px; color: #829ed3; font-size: 48px; }
.banner-graphic i:first-child { position: absolute; right: 63px; bottom: 14px; transform: rotate(-16deg); }
.banner-graphic i:last-child { position: absolute; top: 12px; right: 1px; color: #b3c7eb; font-size: 64px; transform: rotate(-15deg); }

.quick-tools { position: fixed; z-index: 25; top: 120px; right: 12px; display: flex; width: 56px; flex-direction: column; border: 1px solid #e0e3e6; background: #fff; box-shadow: 0 1px 7px rgba(20, 32, 45, .08); }
.quick-tools button { position: relative; display: flex; min-height: 72px; align-items: center; flex-direction: column; justify-content: center; gap: 3px; border: 0; border-bottom: 1px solid #edf0f2; color: #6f757b; background: #fff; font-size: 18px; }
.quick-tools a { position: relative; display: flex; min-height: 72px; align-items: center; flex-direction: column; justify-content: center; gap: 3px; border-bottom: 1px solid #edf0f2; color: #6f757b; background: #fff; font-size: 18px; text-decoration: none; }
.quick-tools a:hover { color: var(--blue); background: #f5f9ff; }
.quick-tools button:hover { color: var(--blue); background: #f5f9ff; }
.quick-tools small { font-size: 11px; }
.quick-badge { position: absolute; top: -9px; right: -7px; display: grid; width: 23px; height: 23px; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #f04438; font-size: 12px; }

.message-page { display: grid; min-height: calc(100vh - var(--header) - 64px); grid-template-columns: 132px 355px minmax(0, 1fr); overflow: hidden; border: 1px solid #e5e8eb; border-radius: 5px; color: #4c5258; background: #fff; }
.message-categories { display: flex; flex-direction: column; padding: 9px 0; border-right: 1px solid #e8eaed; background: #f7f8fa; }
.message-categories a { display: flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 15px; border-left: 2px solid transparent; color: #596168; font-size: 13px; }
.message-categories a:hover { color: var(--blue); background: #f1f6fd; }
.message-categories a.is-current { border-left-color: var(--blue); color: var(--blue); background: #fff; }
.message-category-count { display: inline-grid; min-width: 18px; height: 18px; place-items: center; border-radius: 9px; color: #e4544d; background: #fff0ef; font-size: 10px; }
.message-list-panel { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #e8eaed; }
.message-list-toolbar { display: flex; min-height: 47px; align-items: center; gap: 11px; padding: 0 12px; border-bottom: 1px solid #e9ecef; color: #5f666d; font-size: 12px; white-space: nowrap; }
.message-list-toolbar label, .message-list-footer label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.message-list-toolbar input, .message-list-footer input, .message-checkbox { width: 13px; height: 13px; margin: 0; accent-color: var(--blue); }
.message-unread-filter { color: #858c92; }
.message-read-button { height: 27px; margin-left: auto; padding: 0 10px; border: 1px solid #d9dee3; border-radius: 3px; color: #596168; background: #fff; font-size: 11px; }
.message-read-button:hover { border-color: #a9c8f5; color: var(--blue); }
.message-list { min-height: 0; flex: 1; overflow-y: auto; scrollbar-color: #d6dce2 transparent; scrollbar-width: thin; }
.message-list-item { position: relative; display: flex; min-height: 78px; gap: 8px; padding: 11px 10px 9px 12px; border-bottom: 1px solid #edf0f2; }
.message-list-item:hover { background: #f6f9fd; }
.message-list-item.is-selected { background: #edf5ff; }
.message-checkbox { flex: 0 0 13px; margin-top: 3px; }
.message-item-link { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.message-item-title { overflow: hidden; color: #616970; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.message-list-item.is-unread .message-item-title { color: #377ed8; font-weight: 500; }
.message-item-summary { overflow: hidden; margin-top: 3px; color: #949ba1; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.message-item-link time { margin-top: 4px; color: #9ea4aa; font-size: 10px; }
.message-list-footer { display: flex; min-height: 36px; align-items: center; justify-content: space-between; padding: 0 12px; color: #8f969c; font-size: 11px; }
.message-content-panel { position: relative; display: flex; min-width: 0; min-height: 510px; flex-direction: column; background: #fff; }
.message-content-header { display: flex; min-height: 71px; align-items: center; flex-direction: column; justify-content: center; padding: 12px 20px 9px; border-bottom: 1px solid #eef0f2; text-align: center; }
.message-content-heading { display: flex; align-items: center; justify-content: center; gap: 8px; }
.message-content-category { padding: 2px 6px; border: 1px solid #dce9f8; border-radius: 2px; color: #4e85c3; background: #f2f7fd; font-size: 10px; white-space: nowrap; }
.message-content-header h1 { margin: 0; color: #3f454a; font-size: 16px; font-weight: 500; line-height: 1.5; }
.message-content-header time { margin-top: 2px; color: #a2a8ad; font-size: 10px; }
.message-body { min-height: 0; flex: 1; overflow-y: auto; padding: 17px 22px 40px; color: #4e555b; font-size: 12px; line-height: 1.9; scrollbar-color: #d6dce2 transparent; scrollbar-width: thin; }
.message-body p { margin: 0 0 15px; white-space: normal; }
.message-body a { color: #2878d5; text-decoration: underline; }
.message-signature { padding: 0 22px 48px; color: #697078; font-size: 11px; }
.message-pagination { position: absolute; right: 0; bottom: 0; left: 0; display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid #eceff1; background: rgba(255, 255, 255, .97); }
.message-pagination a { display: inline-flex; height: 27px; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid #d9dee3; border-radius: 3px; color: #535b62; background: #fff; font-size: 11px; }
.message-pagination a:hover { border-color: #a9c8f5; color: var(--blue); }
.message-pagination a.is-disabled { color: #b9bfc4; background: #f7f8f9; pointer-events: none; }
.message-list-empty, .message-content-empty { display: flex; align-items: center; flex-direction: column; justify-content: center; color: #9ba2a8; }
.message-list-empty { min-height: 190px; gap: 8px; font-size: 12px; }
.message-list-empty i, .message-content-empty i { color: #c3cbd2; font-size: 27px; }
.message-list-note { padding: 8px 12px; border-bottom: 1px solid #e7f6ee; color: #3d9b78; background: #f4fbf8; font-size: 12px; }
.message-content-empty { min-height: 450px; gap: 8px; }
.message-content-empty strong { margin-top: 5px; color: #788188; font-size: 14px; font-weight: 500; }
.message-content-empty span { color: #a1a8ae; font-size: 12px; }


.blacklist-page { width: 100%; color: #4c5258; }
.blacklist-page-heading { display: flex; min-height: 92px; align-items: flex-start; justify-content: space-between; padding: 0 2px 14px; }
.blacklist-page-heading .list-breadcrumb { height: 29px; }
.blacklist-page-heading h1 { margin: 0; color: #353b41; font-size: 24px; font-weight: 600; line-height: 1.35; }
.blacklist-page-heading p { margin: 5px 0 0; color: #9299a0; font-size: 13px; }
.blacklist-heading-note { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #d8e8fb; border-radius: 4px; color: #5187c8; background: #f4f8fe; font-size: 12px; }
.blacklist-heading-actions { display: flex; align-items: center; gap: 10px; }
.blacklist-heading-actions .blue-action { display: inline-flex; height: 34px; align-items: center; gap: 6px; }
.blacklist-pagination a { display: grid; min-width: 28px; height: 28px; place-items: center; border: 1px solid #e5e8eb; border-radius: 3px; color: #697178; background: #fff; }
.blacklist-filter-actions .gray-action { display: inline-flex; align-items: center; }
.blacklist-table td > form { margin: 0; }

.blacklist-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.blacklist-summary-card { display: flex; min-height: 104px; align-items: center; gap: 13px; padding: 16px 17px; overflow: hidden; }
.blacklist-summary-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 10px; font-size: 17px; }
.blacklist-summary-card > div { display: flex; min-width: 0; flex-direction: column; }
.blacklist-summary-card small { color: #737a81; font-size: 12px; }
.blacklist-summary-card strong { margin-top: 2px; color: #30363c; font-size: 24px; font-weight: 600; line-height: 1.2; }
.blacklist-summary-card div > span { overflow: hidden; margin-top: 3px; color: #a0a6ac; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.blacklist-summary-blue .blacklist-summary-icon { color: #397fd8; background: #edf5ff; }
.blacklist-summary-orange .blacklist-summary-icon { color: #df9228; background: #fff5e5; }
.blacklist-summary-green .blacklist-summary-icon { color: #25a073; background: #eaf8f2; }
.blacklist-summary-purple .blacklist-summary-icon { color: #8062c7; background: #f2edff; }
.blacklist-filter-card { margin-bottom: 12px; overflow: hidden; }
.blacklist-filter-card .reference-card-title { min-height: 56px; }
.blacklist-filter-tip { display: inline-flex; align-items: center; gap: 5px; color: #929aa1 !important; font-size: 11px !important; }
.blacklist-filter-tip i { color: #87a7cd; }
.blacklist-filter-grid { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr)) auto; align-items: end; gap: 14px; padding: 17px 18px 18px; }
.blacklist-filter-grid label { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.blacklist-filter-grid label > span { color: #6b7177; font-size: 12px; }
.blacklist-filter-grid select { display: block; width: 100%; height: 41px; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #70767c; background: #fff; font-size: 13px; }
.blacklist-filter-grid select:focus { border-color: #a9c8f5; }
.blacklist-filter-actions { display: flex; gap: 8px; }
.blacklist-filter-actions .blue-action, .blacklist-filter-actions .gray-action { height: 41px; padding: 0 17px; white-space: nowrap; }
.blacklist-data-card { overflow: hidden; }
.blacklist-list-heading { min-height: 59px; }
.blacklist-list-heading b, .blacklist-pagination b { color: #555d64; font-weight: 500; }
.blacklist-list-actions { display: flex; align-items: center; gap: 14px; }
.blacklist-list-actions > span { display: inline-flex; align-items: center; gap: 5px; color: #9aa1a7; font-size: 11px; }
.blacklist-list-actions > span i { color: #2aad78; font-size: 10px; }
.blacklist-list-actions .outline-button { display: inline-flex; height: 33px; align-items: center; gap: 6px; }
.blacklist-table { min-width: 1250px; table-layout: fixed; }
.blacklist-table th:nth-child(1) { width: 12%; }
.blacklist-table th:nth-child(2) { width: 10%; }
.blacklist-table th:nth-child(3) { width: 14%; }
.blacklist-table th:nth-child(4) { width: 16%; }
.blacklist-table th:nth-child(5) { width: 9%; }
.blacklist-table th:nth-child(6) { width: 15%; }
.blacklist-table th:nth-child(7) { width: 18%; }
.blacklist-table th:nth-child(8) { width: 8%; }
.blacklist-table th, .blacklist-table td { padding-right: 13px; padding-left: 13px; }
.blacklist-table th:first-child, .blacklist-table td:first-child { padding-left: 18px; }
.blacklist-type, .blacklist-store { display: inline-flex; align-items: center; gap: 7px; }
.blacklist-type i { color: #6e9ed7; font-size: 12px; }
.blacklist-store { color: #697178; }
.blacklist-store i { color: #96a0a9; font-size: 11px; }
.blacklist-hit-count { display: inline-flex; min-width: 42px; justify-content: center; padding: 3px 7px; border-radius: 3px; color: #d37f21; background: #fff5e7; font-size: 12px; }
.blacklist-reason { max-width: 240px; overflow: hidden; color: #747b82 !important; text-overflow: ellipsis; white-space: nowrap; }
.blacklist-unban-action { padding: 4px 8px; border-radius: 3px; }
.blacklist-unban-action:hover { background: var(--blue-soft); }
.blacklist-operation-muted { color: #a8aeb3; font-size: 12px; }
.blacklist-empty-state { display: flex; min-height: 220px; align-items: center; flex-direction: column; justify-content: center; gap: 5px; color: #9da4aa; }
.blacklist-empty-state i { margin-bottom: 6px; color: #c4ccd3; font-size: 27px; }
.blacklist-empty-state strong { color: #727a81; font-size: 14px; font-weight: 500; }
.blacklist-empty-state[hidden] { display: none; }
.blacklist-pagination { min-height: 63px; }
.blacklist-footnote { display: flex; align-items: center; gap: 7px; padding: 13px 2px 0; color: #9ba2a8; font-size: 12px; }
.blacklist-footnote i { color: #86a7ce; }
@media (max-width: 1100px) {
    .blacklist-filter-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
    .blacklist-filter-grid label:first-child { grid-column: span 2; }
    .blacklist-filter-actions { grid-column: span 3; }
    .blacklist-filter-actions .blue-action, .blacklist-filter-actions .gray-action { flex: 0 0 auto; }
}
@media (max-width: 760px) {
    .blacklist-page-heading { display: block; }
    .blacklist-heading-actions { display: block; }
    .blacklist-heading-note { margin-top: 10px; }
    .blacklist-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blacklist-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blacklist-filter-grid label:first-child, .blacklist-filter-actions { grid-column: 1 / -1; }
    .blacklist-list-heading { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
}

.list-breadcrumb { display: flex; align-items: center; gap: 12px; height: 47px; color: #969ba0; font-size: 13px; }
.list-breadcrumb i { color: #b9bec3; font-size: 12px; }
.list-breadcrumb strong { color: #52585e; font-weight: 500; }
.list-toolbar { padding: 18px; margin-bottom: 12px; }
.list-filter-line { display: flex; align-items: flex-end; gap: 15px; }
.list-filter-line label { display: flex; min-width: 218px; flex: 1; flex-direction: column; gap: 7px; }
.list-filter-line label:first-child { flex: 2; }
.list-filter-line label > span { color: #6b7177; font-size: 13px; }
.list-input, .list-filter-line select { display: flex; width: 100%; height: 41px; align-items: center; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 3px; color: #70767c; background: #fff; outline: 0; font-size: 13px; }
.list-input:focus-within, .list-filter-line select:focus { border-color: #a9c8f5; }
.list-input i { margin-right: 9px; color: #a3a8ae; font-size: 12px; }
.list-input input { width: 100%; min-width: 0; border: 0; outline: 0; font-size: 13px; }
.list-filter-line select { display: block; }
.blue-action, .gray-action { display: inline-flex; height: 41px; align-items: center; justify-content: center; padding: 0 23px; border: 0; border-radius: 3px; font-size: 13px; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.blue-action { color: #fff; background: var(--blue); }
.gray-action { border: 1px solid #dfe3e7; color: #646b71; background: #fff; }
.list-data-card { overflow: hidden; }
.list-data-card .reference-card-title { min-height: 59px; }
.reference-data-table { min-width: 1350px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { height: 50px; padding: 0 18px; border-bottom: 1px solid #edf0f2; color: #6d7379; background: #fafbfc; font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
.data-table td { height: 59px; padding: 0 18px; border-bottom: 1px solid #f0f2f4; color: #5d6369; font-size: 13px; white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: #fcfdfe; }
.data-table tbody tr:hover { background: #f3f8ff; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td strong { color: #444a50; font-weight: 500; }
.muted-cell { color: #9ca1a6 !important; }
.amount-cell { color: #343a40 !important; font-weight: 600; }
.status-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 3px; font-size: 12px; line-height: 1; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success { color: #1c9b63; background: #edf9f3; }
.status-warning { color: #dd8616; background: #fff7e7; }
.status-danger { color: #d94b43; background: #fff0ef; }
.status-neutral { color: #747a80; background: #f1f3f5; }
.status-info { color: #2878f0; background: #eef5ff; }
.table-action { padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 13px; }
.operation-cell { text-align: center; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 15px 18px; border-top: 1px solid #edf0f2; color: #9aa0a6; font-size: 12px; }
.pagination > span:first-child { margin-right: 10px; }
.pagination button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #dfe3e7; border-radius: 3px; color: #787e84; background: #fff; font-size: 12px; }
.pagination button:hover, .pagination button.is-active { border-color: #a9c8f5; color: var(--blue); background: var(--blue-soft); }
.pagination label { display: flex; align-items: center; gap: 5px; margin-left: 12px; }
.pagination select { height: 35px; border: 1px solid #dfe3e7; color: #747a80; background: #fff; font-size: 12px; }
.preview-toast { position: fixed; z-index: 50; right: 81px; bottom: 20px; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid #cfe5d8; border-radius: 3px; color: #198754; background: #f4fcf6; box-shadow: 0 1px 7px rgba(30, 50, 40, .08); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease; }
.cards-page { width: 100%; color: #4c5258; }
.cards-page-heading { display: flex; min-height: 92px; align-items: flex-start; justify-content: space-between; padding: 0 2px 14px; }
.cards-page-heading .list-breadcrumb { height: 29px; }
.cards-page-heading h1 { margin: 0; color: #353b41; font-size: 24px; font-weight: 600; line-height: 1.35; }
.cards-page-heading p { margin: 5px 0 0; color: #9299a0; font-size: 13px; }
.cards-heading-actions { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.cards-heading-actions .blue-action, .cards-heading-actions .outline-button { display: inline-flex; height: 36px; align-items: center; gap: 6px; padding: 0 14px; }
.cards-filter-grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(140px, 1fr)) auto; align-items: end; gap: 14px; padding: 17px 18px 18px; }
.cards-filter-grid label { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.cards-filter-grid label > span { color: #6b7177; font-size: 12px; }
.cards-filter-grid select { display: block; width: 100%; height: 41px; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #70767c; background: #fff; font-size: 13px; }
.cards-filter-grid select:focus { border-color: #a9c8f5; }
.cards-list-actions { display: flex; align-items: center; gap: 8px; }
.cards-table { min-width: 1280px; }
.cards-check-col { width: 42px; }
.cards-subline { display: block; margin-top: 3px; color: #9aa1a7; font-size: 12px; }
.cards-content { display: inline-block; max-width: 280px; overflow: hidden; color: #44505c; font-family: Consolas, "Courier New", monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cards-inline-form { display: inline; }
.cards-danger-button { border-color: #f0c8c4; color: #d94b43; }
.cards-danger-text { color: #d94b43; }
.cards-dialog { width: min(560px, calc(100% - 32px)); }
.cards-dialog textarea, .account-dialog-body select { width: 100%; padding: 10px 11px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; }
.cards-dialog textarea { min-height: 160px; resize: vertical; }
.cards-dialog small { color: #8a9298; font-size: 11px; }
.pagination a { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #dfe3e7; border-radius: 3px; color: #787e84; background: #fff; font-size: 12px; }
.pagination a:hover { border-color: #a9c8f5; color: var(--blue); background: var(--blue-soft); }
.blue-action, .gray-action, a.blue-action, a.gray-action { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
@media (max-width: 1100px) {
    .cards-filter-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
    .cards-filter-grid label:first-child, .cards-filter-grid .blacklist-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .cards-page-heading { display: block; }
    .cards-heading-actions { margin-top: 10px; }
}

.preview-toast.is-visible { opacity: 1; transform: translateY(0); }
.preview-toast strong { font-size: 13px; }
.preview-toast small { color: #6e937c; font-size: 11px; }
.app-confirm-dialog { width: min(420px, calc(100vw - 32px)); border: 0; border-radius: 8px; padding: 0; }
.app-confirm-dialog::backdrop { background: rgba(23, 28, 33, .38); }
.app-confirm-dialog form { display: grid; }
.app-confirm-dialog header, .app-confirm-dialog footer { display: grid; align-items: center; padding: 14px 18px; }
.app-confirm-dialog header { grid-template-columns: 1fr auto; border-bottom: 1px solid #eef1f4; }
.app-confirm-dialog header strong { color: #333; font-size: 15px; }
.app-confirm-dialog p { margin: 0; padding: 18px; color: #5d656c; font-size: 13px; line-height: 1.7; }
.app-confirm-dialog footer { grid-template-columns: auto auto; justify-content: flex-end; gap: 8px; border-top: 1px solid #eef1f4; }
.app-confirm-dialog.is-alert [data-app-confirm-cancel] { display: none; }
.app-confirm-dialog.is-danger [data-app-confirm-ok] { background: #d94b43; }
.app-confirm-dialog.is-danger [data-app-confirm-ok]:hover { background: #c43f38; }




.finance-page { min-width: 0; color: #4c5258; font-size: 13px; }
.finance-overview { padding: 10px 8px 18px; background: #fff; }
.finance-account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 13px; }
.finance-account-card { position: relative; min-height: 123px; padding: 18px 20px 14px; border: 1px solid #e4e7ea; border-radius: 5px; background: #fff; }
.finance-card-header, .finance-balance-line, .finance-bank-meta { display: flex; align-items: center; }
.finance-card-header { justify-content: space-between; gap: 12px; }
.finance-card-title { display: flex; align-items: center; gap: 12px; color: #4f555b; }
.finance-card-title a { color: #3b78ba; font-size: 12px; }
.finance-card-title a:hover, .finance-section-heading a:hover, .finance-secondary-card a:hover, .finance-bank-card a:hover { color: var(--blue); }
.finance-withdraw-button { width: 54px; height: 25px; border: 1px solid #c9cdd1; border-radius: 3px; color: #596168; background: #fff; font-size: 12px; }
.finance-withdraw-button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.finance-withdraw-button:disabled { border-color: #e3e5e7; color: #b0b5b9; background: #f5f6f7; cursor: not-allowed; }
.finance-balance-line { gap: 14px; margin-top: 8px; }
.finance-balance-line strong { color: #ef7d20; font-size: 25px; font-weight: 600; line-height: 1.15; }
.finance-marketing-card .finance-balance-line strong { color: #303438; }
.finance-balance-line span { color: #777d83; font-size: 12px; }
.finance-restriction { display: flex; min-height: 27px; align-items: center; gap: 5px; margin: 7px 0 -2px; padding: 0 7px; color: #7e8286; background: linear-gradient(90deg, #fffaf0, rgba(255, 250, 240, 0)); font-size: 11px; }
.finance-restriction i { color: #efb52b; font-size: 12px; }
.finance-restriction a { color: #3b78ba; }
.finance-loan-card { padding-bottom: 42px; }
.finance-auto-withdraw { right: 20px; bottom: 14px; }
.finance-secondary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 13px; margin-top: 13px; }
.finance-secondary-card, .finance-bank-card { min-height: 117px; border: 1px solid #e4e7ea; border-radius: 5px; background: #fff; }
.finance-secondary-body { min-height: 74px; padding: 22px 20px 10px; }
.finance-secondary-body span { display: block; color: #555b61; }
.finance-secondary-body strong { display: block; margin-top: 10px; color: #4e545a; font-size: 17px; font-weight: 400; }
.finance-secondary-card footer, .finance-bank-card footer { display: flex; min-height: 41px; align-items: center; padding: 0 20px; border-top: 1px solid #edf0f2; }
.finance-secondary-card footer a, .finance-bank-card footer a { color: #3b78ba; font-size: 12px; }
.finance-bank-body { display: flex; min-height: 74px; align-items: center; gap: 13px; padding: 13px 20px 7px; }
.finance-bank-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; color: #fff; background: #eb625c; font-size: 12px; }
.finance-bank-icon.is-alipay { background: #1677ff; }
.finance-bank-body > div { min-width: 0; }
.finance-bank-body strong { display: block; overflow: hidden; color: #565c62; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-meta { gap: 18px; margin-top: 4px; color: #6e747a; font-size: 12px; }
.finance-bank-meta em { padding: 1px 6px; border-radius: 3px; color: #92979c; background: #f1f2f3; font-size: 11px; font-style: normal; }
.finance-withdrawals { margin-top: 21px; }
.finance-section-heading { display: flex; min-height: 37px; align-items: center; justify-content: space-between; }
.finance-section-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #52585e; font-size: 15px; font-weight: 500; }
.finance-section-heading h2::before { width: 3px; height: 16px; background: var(--blue); content: ""; }
.finance-section-heading a { color: #777d83; font-size: 11px; }
.finance-withdrawal-table-wrap { overflow-x: auto; border: 1px solid #e5e8eb; background: #fff; }
.finance-withdrawal-table { min-width: 760px; table-layout: fixed; }
.finance-withdrawal-table th { height: 35px; padding: 0 13px; border-right: 1px solid #e5e8eb; color: #646b71; background: #f7f8fa; font-size: 11px; font-weight: 500; }
.finance-withdrawal-table td { height: 39px; padding: 0 13px; border-right: 1px solid #e9ecef; color: #555b61; font-size: 12px; }
.finance-withdrawal-table th:last-child, .finance-withdrawal-table td:last-child { border-right: 0; }
.finance-withdrawal-table th:nth-child(1) { width: 12%; }
.finance-withdrawal-table th:nth-child(2) { width: 17%; }
.finance-withdrawal-table th:nth-child(3) { width: 16%; }
.finance-withdrawal-table th:nth-child(4) { width: 25%; }
.finance-withdrawal-table th:nth-child(5) { width: 30%; }
.finance-withdrawal-amount { text-align: right; }
.finance-empty { color: #8b9298; text-align: center; }
.finance-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 8px; color: #4c5258; background: #fff; }
.finance-dialog::backdrop { background: rgba(22, 28, 36, .45); }
.finance-dialog header, .finance-dialog footer { display: flex; align-items: center; justify-content: space-between; }
.finance-dialog header { padding: 16px 18px 0; }
.finance-dialog h2 { margin: 0; color: #30363c; font-size: 16px; font-weight: 600; }
.finance-dialog footer button { border: 1px solid #d5d9dd; border-radius: 4px; background: #fff; color: #596068; }
.finance-dialog p, .finance-dialog label, .finance-bank-list, .finance-dialog [data-finance-fields] { margin: 14px 18px; }
.finance-dialog [data-finance-fields] { display: grid; gap: 14px; }
.finance-dialog [data-finance-fields][hidden] { display: none; }
.finance-dialog [data-finance-fields] label { margin: 0; }
.finance-dialog label { display: grid; gap: 6px; color: #596068; font-size: 12px; }
.finance-dialog input, .finance-dialog select { height: 34px; padding: 0 10px; border: 1px solid #d7dce1; border-radius: 4px; color: #30363c; font-size: 13px; }
.finance-check { display: flex; align-items: center; gap: 8px; }
.finance-check input { width: 15px; height: 15px; }
.finance-dialog-note { color: #7b838a; font-size: 12px; }
.finance-dialog footer { gap: 8px; justify-content: flex-end; padding: 0 18px 16px; }
.finance-dialog footer button { min-width: 72px; height: 32px; }
.finance-dialog footer button[type="submit"], .finance-dialog [data-finance-add-bank] { border-color: var(--blue); color: #fff; background: var(--blue); }
.finance-bank-list { display: grid; gap: 8px; padding: 0; list-style: none; }
.finance-bank-list li, .finance-bank-list li > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.finance-bank-list li { padding: 10px 12px; border: 1px solid #e6eaee; border-radius: 5px; }
.finance-bank-list strong, .finance-bank-list span { display: block; }
.finance-bank-list span, .finance-bank-list button { color: #7b838a; font-size: 12px; }
.finance-bank-list button { padding: 0; border: 0; background: transparent; }
.finance-ledger-wrap { max-height: 360px; margin: 14px 18px; overflow: auto; }
.finance-ledger-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.finance-ledger-wrap th, .finance-ledger-wrap td { padding: 8px; border-bottom: 1px solid #eef1f4; text-align: left; }
.finance-ledger-wrap .is-in { color: #1f9d55; }
.finance-ledger-wrap .is-out { color: #d14343; }
.finance-dialog dl { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px 12px; margin: 16px 18px; font-size: 13px; }
.finance-dialog dt { color: #7b838a; }
.finance-withdrawal-status { margin-right: 13px; }
.finance-progress-link { color: #3b78ba; }
.finance-progress-link:hover { color: var(--blue); }
.finance-load-more { display: flex; min-height: 33px; align-items: center; gap: 5px; margin: 0 auto; padding: 0; border: 0; color: #3b78ba; background: transparent; font-size: 11px; }
.finance-load-more:hover { color: var(--blue); }
.finance-load-more i { font-size: 10px; }
.finance-report-page { min-width: 0; }
.finance-report-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 12px; padding: 16px 18px; }
.finance-report-filter label { display: grid; gap: 6px; color: #697178; font-size: 12px; }
.finance-report-filter input, .finance-report-filter select { width: 168px; height: 34px; padding: 0 10px; border: 1px solid #d7dce1; border-radius: 4px; color: #30363c; background: #fff; font-size: 13px; }
.finance-report-filter .blue-action, .finance-report-filter .gray-action { width: 72px; height: 34px; }
.finance-bill-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.finance-bill-tabs a { height: 30px; padding: 0 12px; border: 1px solid #e3e7eb; border-radius: 3px; color: #6d757c; background: #fff; font-size: 12px; line-height: 28px; }
.finance-bill-tabs a.is-active, .finance-bill-tabs a:hover { border-color: #bdd4f8; color: var(--blue); background: var(--blue-soft); }
.finance-bill-table, .finance-record-table { min-width: 860px; }
.finance-bill-table td:nth-child(5), .finance-record-table td:nth-child(3), .finance-record-table td:nth-child(4) { text-align: right; }
.finance-amount-in { color: #1f9d55; }
.finance-amount-out { color: #d14343; }
.finance-status { margin-right: 10px; }
.finance-status-paid { color: #1f9d55; }
.finance-status-rejected { color: #d14343; }
.finance-status-pending_review, .finance-status-processing { color: #d98916; }
.finance-report-note { padding: 16px 18px; }
.finance-report-note strong { color: #3d444b; font-size: 13px; }
.finance-report-note p, .finance-report-limit { margin: 6px 0 0; color: #8b9298; font-size: 12px; }
.finance-report-limit { margin-top: 10px; }
@media (max-width: 900px) {
    .finance-account-grid, .finance-secondary-grid { grid-template-columns: 1fr; }
    .finance-account-card { min-height: 123px; }
}
@media (max-width: 520px) {
    .finance-overview { padding-right: 0; padding-left: 0; }
    .finance-account-card { padding-right: 14px; padding-left: 14px; }
    .finance-balance-line { align-items: flex-start; flex-direction: column; gap: 2px; }
    .finance-secondary-body, .finance-secondary-card footer, .finance-bank-body, .finance-bank-card footer { padding-right: 14px; padding-left: 14px; }
    .finance-section-heading a { font-size: 10px; }
}

.deposit-page-heading { display: flex; height: 47px; align-items: flex-start; justify-content: space-between; }
.deposit-page-heading h1 { margin: 0; color: #555b60; font-size: 17px; font-weight: 500; }
.deposit-page-heading a, .deposit-card-heading a, .deposit-section-heading a { color: #3378bb; }
.deposit-page-heading a { padding-top: 3px; font-size: 12px; }
.deposit-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deposit-balance-card { position: relative; min-height: 185px; padding: 17px 20px 15px; border: 1px solid #e5e8eb; border-radius: 5px; background: #fff; }
.deposit-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; color: #4f555b; }
.deposit-card-heading > div { display: flex; align-items: center; gap: 12px; }
.deposit-card-heading > div > span { text-decoration: underline dotted #b7bdc2; text-underline-offset: 3px; }
.deposit-card-heading a { font-size: 12px; white-space: nowrap; }
.deposit-limit { color: #555b60; font-size: 12px; }
.deposit-balance-value { display: block; margin-top: 15px; color: #50565b; font-size: 24px; font-weight: 400; line-height: 1.2; }
.deposit-card-footer { margin-top: 24px; }
.deposit-balance-warning { display: flex; align-items: center; gap: 6px; min-height: 18px; color: #777e84; font-size: 12px; }
.deposit-balance-warning i { color: #f2ae26; font-size: 11px; }
.deposit-actions { display: flex; gap: 10px; margin-top: 8px; }
.deposit-actions .blue-action, .deposit-actions .gray-action { width: 66px; height: 34px; padding: 0; font-size: 12px; }
.deposit-actions .gray-action:disabled { border-color: #e2e4e6; color: #a7acb1; background: #f4f5f6; }
.deposit-auto-topup { position: absolute; right: 18px; bottom: 19px; display: flex; align-items: center; gap: 8px; color: #858b90; font-size: 12px; cursor: pointer; }
.deposit-auto-topup input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.deposit-auto-topup i { position: relative; display: block; width: 32px; height: 18px; border-radius: 10px; background: #d9dcdf; transition: background .15s ease; }
.deposit-auto-topup i::after { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); content: ""; transition: transform .15s ease; }
.deposit-auto-topup input:checked + i { background: var(--blue); }
.deposit-auto-topup input:checked + i::after { transform: translateX(14px); }
.deposit-auto-topup input:focus-visible + i { outline: 2px solid #9fc3f5; outline-offset: 2px; }
.activity-deposit-card .deposit-balance-value { margin-bottom: 24px; }
.activity-deposit-card .deposit-actions { margin-top: 0; }
.deposit-transactions { margin-top: 15px; }
.deposit-section-heading { display: flex; height: 43px; align-items: center; justify-content: space-between; }
.deposit-section-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; color: #52585e; font-size: 15px; font-weight: 500; }
.deposit-section-heading h2::before { width: 2px; height: 16px; background: var(--blue); content: ""; }
.deposit-section-heading a { font-size: 12px; }
/* .deposit-table-card { overflow: hidden; padding: 12px 18px 0; } */
.deposit-table { min-width: 700px; border: 1px solid #e9ecef; }
.deposit-table th { height: 40px; padding: 0 12px; border-right: 1px solid #e9ecef; color: #656b71; background: #f7f8fa; font-size: 12px; }
.deposit-table td { height: 42px; padding: 0 12px; border-right: 1px solid #e9ecef; color: #555b61; font-size: 12px; }
.deposit-table th:last-child, .deposit-table td:last-child { border-right: 0; }
.deposit-table th:nth-child(1) { width: 17%; }
.deposit-table th:nth-child(2) { width: 14%; }
.deposit-table th:nth-child(3) { width: 14%; }
.deposit-table th:nth-child(4) { width: 12%; }
.deposit-table th:nth-child(5) { width: 30%; }
.deposit-table th:nth-child(6) { width: 13%; }
.deposit-table .deposit-amount { font-weight: 500; }
.deposit-amount-positive { color: #d68a1c !important; }
.deposit-amount-negative { color: #53595f !important; }
.deposit-table .table-action { border: 0; padding: 0; color: #3378bb; background: transparent; font-size: 12px; }
.deposit-empty { color: #8b939a; text-align: center; }
.deposit-balance-ok { display: flex; align-items: center; gap: 6px; min-height: 18px; color: #2f8f62; font-size: 12px; }
.deposit-card-heading button { border: 0; padding: 0; color: #3378bb; background: transparent; font-size: 12px; }
.deposit-page-heading button { border: 0; padding-top: 3px; color: #3378bb; background: transparent; font-size: 12px; }

.pay-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; }
.pay-modal[hidden] { display: none; }
.pay-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 36, .55); backdrop-filter: blur(10px); }
.pay-dialog { position: relative; z-index: 1; width: min(440px, calc(100vw - 48px)); padding: 26px 26px 22px; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgba(16, 32, 56, .32); }
.pay-close { position: absolute; top: 16px; right: 16px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; color: #8b97a6; background: #f2f5f9; transition: background .15s ease, color .15s ease; }
.pay-close:hover { color: #243140; background: #e7edf4; }
.pay-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-right: 28px; }
.pay-head > i { display: grid; flex: none; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #2878f0; background: #eef5ff; font-size: 18px; }
.pay-head h2 { margin: 0; color: #17202b; font-size: 18px; font-weight: 650; }
.pay-head p { margin: 3px 0 0; color: #8090a0; font-size: 12.5px; line-height: 1.5; }
.pay-amount-box { padding: 14px 16px 10px; border-radius: 14px; background: linear-gradient(180deg, #f7faff 0%, #f3f7fc 100%); }
.pay-amount-box > span { color: #8090a0; font-size: 12px; }
.pay-amount-box label { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.pay-amount-box em { color: #17202b; font-style: normal; font-size: 20px; font-weight: 650; }
.pay-amount-box input { width: 100%; border: 0; outline: 0; color: #17202b; background: transparent; font-size: 34px; font-weight: 680; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.pay-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pay-presets button { height: 34px; border: 1px solid transparent; border-radius: 9px; color: #52606c; background: #f3f6fa; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pay-presets button:hover { color: #2878f0; }
.pay-presets button.is-active { border-color: #2878f0; color: #2878f0; background: #eef5ff; }
.pay-section-label { margin: 18px 0 8px; color: #8090a0; font-size: 12px; }
.pay-channels { display: grid; gap: 8px; }
.pay-channels label { position: relative; display: flex; height: 52px; align-items: center; gap: 12px; padding: 0 14px; border: 1.5px solid #e6ecf3; border-radius: 12px; color: #243140; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pay-channels label:hover { border-color: #c5d5ea; }
.pay-channels label > i { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: #8b97a6; font-size: 15px; }
.pay-channels .is-alipay_pc > i, .pay-channels .is-alipay_face > i { background: #1677ff; }
.pay-channels .is-wechat_pay > i { background: #07c160; }
.pay-channels .is-epay > i { background: #2878f0; }
.pay-channels label > span { font-size: 14px; font-weight: 600; }
.pay-channels input { position: absolute; opacity: 0; }
.pay-channels label > b { margin-left: auto; width: 18px; height: 18px; border: 1.5px solid #d3dce6; border-radius: 50%; }
.pay-channels label:has(input:checked) { border-color: #2878f0; background: #f7faff; }
.pay-channels label:has(input:checked) > b { border: 5px solid #2878f0; }
.pay-types { margin-top: 14px; }
.pay-types[hidden] { display: none; }
.pay-types .pay-section-label { margin-top: 0; }
.pay-types > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-types label { position: relative; display: flex; height: 44px; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid #e6ecf3; border-radius: 11px; color: #52606c; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pay-types input { position: absolute; opacity: 0; }
.pay-types i { font-size: 16px; }
.pay-types .is-alipay i { color: #1677ff; }
.pay-types .is-wxpay i { color: #07c160; }
.pay-types label:has(input:checked).is-alipay { border-color: #1677ff; color: #1677ff; background: #f2f7ff; }
.pay-types label:has(input:checked).is-wxpay { border-color: #07c160; color: #07c160; background: #f1fbf5; }
.pay-empty, .pay-error { color: #c2410c; font-size: 13px; }
.pay-error { margin: 12px 0 0; }
.pay-actions { display: grid; grid-template-columns: 96px 1fr; gap: 10px; margin-top: 20px; }
.pay-cancel, .pay-submit { height: 42px; border-radius: 11px; font-size: 14px; font-weight: 600; }
.pay-cancel { border: 1px solid #e1e8f0; color: #52606c; background: #fff; }
.pay-cancel:hover { background: #f6f8fb; }
.pay-submit { border: 0; color: #fff; background: linear-gradient(180deg, #3b8bff 0%, #2878f0 100%); box-shadow: 0 6px 14px rgba(40, 120, 240, .28); }
.pay-submit:hover { background: linear-gradient(180deg, #4c95ff 0%, #1f6fe6 100%); }
.pay-submit:disabled { background: #c5d2e2; box-shadow: none; }
.pay-amount { display: block; margin: 2px 0 16px; color: #17202b; font-size: 36px; font-weight: 680; letter-spacing: -.5px; text-align: center; font-variant-numeric: tabular-nums; }
.pay-amount::before { content: "¥"; margin-right: 2px; font-size: 18px; font-weight: 650; }
.pay-qr { display: grid; width: 212px; height: 212px; margin: 0 auto; place-items: center; border: 1px solid #e7eef6; border-radius: 18px; background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #dbe8f8, #eef3f8) border-box; box-shadow: 0 10px 26px rgba(24, 46, 78, .08); }
.pay-qr canvas, .pay-qr img { width: 180px; height: 180px; }
.pay-status { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 16px 0 0; color: #52606c; font-size: 13px; text-align: center; }
.pay-status i { color: #2878f0; }
.pay-qr-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.pay-dialog small { color: #93a0ab; font-size: 12px; }
.pay-open { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #2878f0; font-size: 12.5px; font-weight: 600; }
.pay-open[hidden] { display: none; }
.pay-open i { font-size: 10px; }
.pay-receipt { display: grid; grid-template-columns: 92px 1fr; gap: 8px 12px; margin: 8px 0 0; }
.pay-receipt dt { color: #8b969f; font-size: 13px; }
.pay-receipt dd { margin: 0; color: #243140; font-size: 13px; word-break: break-all; }
body.pay-modal-open { overflow: hidden; }
.pay-dialog.is-alipay .pay-head > i { color: #1677ff; background: #eef5ff; }
.pay-dialog.is-wxpay .pay-head > i { color: #07c160; background: #eefaf3; }
.pay-dialog.is-wxpay .pay-status i { color: #07c160; }
.pay-receipt { display: grid; grid-template-columns: 92px 1fr; gap: 8px 12px; margin: 8px 0 0; }
.pay-receipt dt { color: #8b969f; font-size: 13px; }
.pay-receipt dd { margin: 0; color: #243140; font-size: 13px; word-break: break-all; }
body.pay-modal-open { overflow: hidden; }
@media (max-width: 900px) {
    .deposit-balance-grid { grid-template-columns: 1fr; }
    .deposit-balance-card { min-height: 185px; }
    /* .deposit-table-card { padding: 8px 8px 0; } */
}
@media (max-width: 520px) {
    .deposit-page-heading { height: 42px; }
    .deposit-auto-topup { right: 12px; bottom: 14px; }
    .deposit-card-heading { gap: 6px; }
    .deposit-card-heading > div { gap: 7px; }
    .deposit-limit { white-space: nowrap; }
}

@media (max-width: 1875px) {
    .header-shortcuts { gap: 14px; }
    .header-right { gap: 14px; }
    .dashboard-content { padding-right: 66px; }
    .quick-tools { right: 3px; }
}
@media (max-width: 1440px) {
    html, body { min-width: 320px; }
    .admin-sidebar { width: 333px; box-shadow: 5px 0 18px rgba(0, 0, 0, .12); transform: translateX(-100%); transition: transform .16s ease; }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-main { margin-left: 0; }
    .header-menu-button { display: block; }
    .header-search { width: 315px; }
    .header-shortcuts { display: none; }
    .header-right .header-tool span, .header-line { display: none; }
    .dashboard-content { padding-right: 15px; }
    .metric-strip { grid-template-columns: repeat(4, 1fr); }
    .operation-body { grid-template-columns: 1fr; }
    .reference-chart-wrap { padding: 5px 18px 18px; }
    .reference-lower-grid { grid-template-columns: 1fr; }
    .quick-tools { top: 96px; }
}
@media (max-width: 720px) {
    .header-search { width: 220px; }
    .header-user span:not(.user-avatar), .header-user > i { display: none; }
    .dashboard-content { padding: 7px; }
    .metric-strip { grid-template-columns: repeat(2, 1fr); }
    .reference-title-actions button:first-child { display: none; }
    .message-page { min-height: calc(100vh - var(--header) - 78px); grid-template-columns: 108px minmax(230px, 36%) minmax(320px, 1fr); }
    .message-categories a { padding: 0 10px; font-size: 12px; }
    .message-list-toolbar { gap: 7px; padding: 0 8px; font-size: 11px; }
    .message-read-button { padding: 0 7px; font-size: 10px; }
    .message-content-header { padding-right: 12px; padding-left: 12px; }
    .message-body { padding-right: 16px; padding-left: 16px; }
    .message-signature { padding-right: 16px; padding-left: 16px; }
    .list-filter-line { display: grid; grid-template-columns: 1fr 1fr; }
    .list-filter-line label:first-child { grid-column: 1 / -1; }
    .list-filter-line label { min-width: 0; }
    .list-filter-line button { width: 100%; }
    .quick-tools { display: none; }
}

.ticket-page { min-width: 0; color: #4c5258; }
.ticket-page-heading { display: flex; height: 38px; align-items: center; }
.ticket-page-heading h1 { margin: 0; color: #3f454a; font-size: 17px; font-weight: 500; }
.ticket-overview, .ticket-filter { margin-bottom: 12px; }
.ticket-section-heading { display: flex; min-height: 43px; align-items: center; gap: 11px; padding: 0 14px; border-bottom: 1px solid #eef0f2; }
.ticket-section-heading::before { width: 3px; height: 16px; background: var(--blue); content: ""; }
.ticket-section-heading strong { color: #4b5156; font-size: 14px; font-weight: 500; }
.ticket-section-heading span { color: #969da4; font-size: 11px; }
.ticket-notice { display: flex; min-height: 29px; align-items: center; gap: 7px; margin: 10px 14px 7px; padding: 0 9px; border: 1px solid #f1dba8; border-radius: 2px; color: #8a6b2e; background: #fff8e8; font-size: 11px; }
.ticket-notice i { color: #f0a51f; font-size: 13px; }
.ticket-notice a { margin-left: auto; color: #e64b45; white-space: nowrap; }
.ticket-metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 14px 14px; border: 1px solid #edf0f2; }
.ticket-metric { min-height: 77px; padding: 13px 16px 10px; border-right: 1px solid #edf0f2; }
.ticket-metric:last-child { border-right: 0; }
.ticket-metric > span { display: block; color: #656b71; font-size: 11px; }
.ticket-metric strong { display: block; margin-top: 7px; color: #353a40; font-size: 20px; font-weight: 600; line-height: 1; }
.ticket-metric strong small { margin-left: 3px; color: #656b71; font-size: 11px; font-weight: 400; }
.ticket-metric-danger { color: #ec6060 !important; }
.ticket-metric em { display: block; margin-top: 6px; color: #898f95; font-size: 10px; font-style: normal; }
.ticket-status-tabs { display: flex; min-height: 54px; align-items: center; gap: 35px; padding: 0 16px; border-bottom: 1px solid #edf0f2; background: #f7f8fa; }
.ticket-status-tabs button { height: 28px; min-width: 94px; padding: 0 15px; border: 1px solid transparent; color: #697078; background: transparent; font-size: 11px; }
.ticket-status-tabs button.is-active { border-color: #dfe3e7; color: #3d444b; background: #fff; }
.ticket-filter-fields { display: grid; grid-template-columns: 1.05fr 1.05fr 1.05fr 1fr 1.35fr auto; gap: 10px 18px; align-items: end; padding: 14px 16px 16px; background: #f7f8fa; }
.ticket-filter-fields label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.ticket-filter-fields label > span { color: #6e757c; font-size: 11px; }
.ticket-filter-fields input, .ticket-filter-fields select { width: 100%; height: 30px; padding: 0 9px; border: 1px solid #dfe3e7; border-radius: 2px; outline: 0; color: #6c737a; background: #fff; font-size: 11px; }
.ticket-filter-fields input:focus, .ticket-filter-fields select:focus { border-color: #a9c8f5; }
.ticket-date-range { grid-column: 5 / 6; }
.ticket-query-button { width: 52px; height: 30px; padding: 0; border: 0; border-radius: 2px; color: #fff; background: var(--blue); font-size: 11px; }
.ticket-query-button:hover { background: var(--blue-deep); }
.ticket-results-heading { display: flex; height: 36px; align-items: center; gap: 8px; padding-left: 2px; }
.ticket-results-heading::before { width: 3px; height: 16px; background: var(--blue); content: ""; }
.ticket-results-heading strong { color: #4b5156; font-size: 14px; font-weight: 500; }
.ticket-results-heading span { color: #969da4; font-size: 11px; }
.ticket-results-heading b { color: #e65e5e; font-weight: 500; }
.ticket-table { overflow: hidden; }
.ticket-table-head, .ticket-row-content { display: grid; grid-template-columns: 2.6fr 1.8fr 1.1fr 1.15fr; }
.ticket-table-head { min-height: 30px; align-items: center; padding: 0 12px; border-bottom: 1px solid #e9ecef; color: #7c838a; background: #f8f9fa; font-size: 10px; }
.ticket-table-head span:nth-child(n+2) { padding-left: 9px; }
.ticket-row { border-bottom: 1px solid #edf0f2; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row-top { display: flex; min-height: 29px; align-items: center; padding: 0 12px; border-bottom: 1px solid #edf0f2; color: #777e85; background: #fafbfc; font-size: 10px; }
.ticket-row-top a, .ticket-row-top button, .ticket-operation button { color: #337fe9; }
.ticket-row-top button { margin-left: 5px; padding: 0; border: 0; background: transparent; font-size: 10px; }
.ticket-row-top time { margin-left: auto; color: #8f969c; }
.ticket-row-content { min-height: 61px; align-items: stretch; }
.ticket-order-info, .ticket-progress, .ticket-process-time, .ticket-operation { display: flex; min-width: 0; align-items: center; padding: 8px 12px; border-right: 1px solid #edf0f2; }
.ticket-order-info { gap: 8px; }
.ticket-order-info > div:last-child { min-width: 0; }
.ticket-thumb { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border: 1px solid #d9e0e7; color: #7a9ac6; background: #eff4fb; font-size: 18px; }
.ticket-order-info strong { display: block; overflow: hidden; color: #4d545b; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ticket-order-info p { overflow: hidden; margin: 3px 0 0; color: #969da4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ticket-progress { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.ticket-progress .status-tag { padding: 0; color: #8b9298; background: transparent; font-size: 10px; }
.ticket-progress .status-dot { display: none; }
.ticket-progress strong { color: #4f565d; font-size: 11px; font-weight: 500; }
.ticket-process-time { color: #858c93; font-size: 10px; }
.ticket-operation { border-right: 0; }
.ticket-operation button, .ticket-operation a { padding: 0; border: 0; background: transparent; color: #337fe9; font-size: 11px; }
.ticket-process-time { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.ticket-process-time small { color: #8d949b; font-size: 10px; }
.ticket-due-overdue { color: #ec6060 !important; }
.ticket-due-soon { color: #d4880f !important; }
.ticket-empty { margin: 0; padding: 28px 14px; color: #98a0a6; font-size: 12px; text-align: center; }
.ticket-pager { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 2px 0; color: #7d848b; font-size: 12px; }
.ticket-pager a { color: #337fe9; }
.ticket-detail { margin-top: 12px; }
.ticket-detail-body { padding: 16px 18px 4px; }
.ticket-detail-body h2 { margin: 0 0 8px; color: #3f454a; font-size: 15px; font-weight: 500; }
.ticket-detail-body p { margin: 0 0 14px; color: #5d646b; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.ticket-detail-body blockquote { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #d7e4f8; background: #f7f9fc; }
.ticket-detail-body blockquote b { margin-right: 8px; color: #3f454a; font-size: 12px; }
.ticket-detail-body blockquote time { color: #98a0a6; font-size: 11px; }
.ticket-detail-body blockquote span { display: block; margin-top: 6px; color: #5d646b; font-size: 13px; line-height: 1.7; }
.ticket-reply { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 16px; }
.ticket-reply label { display: flex; flex-direction: column; gap: 6px; }
.ticket-reply span { color: #6e757c; font-size: 12px; }
.ticket-reply textarea { min-height: 96px; padding: 8px 10px; border: 1px solid #dfe3e7; border-radius: 2px; color: #4c5258; font-size: 13px; resize: vertical; }
.ticket-reply div { display: flex; gap: 8px; }
.ticket-reply button { height: 32px; padding: 0 14px; border: 1px solid #d7e0ea; border-radius: 2px; color: #4c5258; background: #fff; font-size: 12px; }
.ticket-reply button[value="1"] { border-color: transparent; color: #fff; background: var(--blue); }
.ticket-status-tabs a { display: inline-flex; height: 28px; min-width: 94px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid transparent; color: #697078; font-size: 11px; }
.ticket-status-tabs a.is-active { border-color: #dfe3e7; color: #3d444b; background: #fff; }

@media (max-width: 900px) {
    .ticket-metric-grid { grid-template-columns: repeat(3, 1fr); }
    .ticket-metric:nth-child(3) { border-right: 0; }
    .ticket-metric:nth-child(n+4) { border-top: 1px solid #edf0f2; }
    .ticket-status-tabs { gap: 8px; overflow-x: auto; }
    .ticket-filter-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ticket-date-range { grid-column: 1 / 3; }
    .ticket-query-button { width: 100%; }
    .ticket-table { overflow-x: auto; }
    .ticket-table-head, .ticket-row-content { min-width: 760px; }
}

.after-sales-workbench { min-width: 0; color: #4c5258; font-size: 15px; }
.after-sales-heading { display: flex; height: 58px; align-items: center; }
.after-sales-heading h1 { margin: 0; color: #3f454a; font-size: 22px; font-weight: 500; }
.after-sales-tabs { display: flex; min-height: 56px; align-items: center; gap: 31px; padding: 0 17px; border: 1px solid #e5e8eb; background: #fff; }
.after-sales-tabs > a { position: relative; display: inline-flex; height: 56px; align-items: center; color: #686f76; font-size: 15px; }
.after-sales-tabs > a:hover, .after-sales-tabs > a.is-active { color: var(--blue); }
.after-sales-tabs > a.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--blue); content: ""; }
.after-sales-tab-actions { display: flex; gap: 22px; margin-left: auto; color: #337fe9; font-size: 13px; }
.after-sales-section { margin-top: 18px; }
.after-sales-section-heading { display: flex; height: 47px; align-items: center; gap: 11px; }
.after-sales-section-heading::before { width: 3px; height: 19px; background: var(--blue); content: ""; }
.after-sales-section-heading strong { color: #4b5156; font-size: 17px; font-weight: 500; }
.after-sales-section-heading span { color: #969da4; font-size: 13px; }
.after-sales-section-heading a { margin-left: auto; color: #337fe9; font-size: 13px; }
.after-sales-experience { display: flex; min-height: 190px; align-items: center; gap: 43px; padding: 20px 32px; }
.after-sales-score-ring { display: grid; width: 146px; height: 146px; flex: 0 0 146px; place-items: center; border: 7px solid #f0f1f2; border-right-color: #e1e3e5; border-bottom-color: #e1e3e5; border-radius: 50%; transform: rotate(-35deg); }
.after-sales-score-ring > div { display: flex; align-items: center; flex-direction: column; gap: 11px; transform: rotate(35deg); }
.after-sales-score-ring strong { color: #5b6167; font-size: 13px; font-weight: 500; }
.after-sales-score-ring b { color: #33393f; font-size: 23px; font-weight: 500; }
.after-sales-score-ring small { color: #7b8288; font-size: 13px; font-weight: 400; }
.after-sales-experience p { margin: 0; color: #464d53; font-size: 18px; }
.after-sales-score-ring.is-scored { border-color: #edf3fb; border-top-color: var(--blue); border-right-color: var(--blue); }
.after-sales-score-note { display: flex; flex-direction: column; gap: 8px; }
.after-sales-score-note span { color: #8b939a; font-size: 13px; }
.after-sales-score-detail { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; padding: 16px 8px; }
.after-sales-score-detail div { padding: 0 20px; border-right: 1px solid #edf0f2; }
.after-sales-score-detail div:last-child { border-right: 0; }
.after-sales-score-detail span { display: flex; align-items: center; gap: 8px; color: #686f76; font-size: 14px; }
.after-sales-score-detail small { color: #337fe9; font-size: 12px; }
.after-sales-score-detail strong { display: block; margin-top: 8px; color: #252a2f; font-size: 22px; font-weight: 600; }
.after-sales-metrics { position: relative; padding: 17px 19px 17px; }
.after-sales-metrics-caption { margin-bottom: 13px; color: #969da4; font-size: 13px; }
.after-sales-metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.after-sales-metric { min-height: 78px; padding: 0 20px; border-right: 1px solid #edf0f2; }
.after-sales-metric:first-child { padding-left: 4px; }
.after-sales-metric:last-child { border-right: 0; }
.after-sales-metric span { display: block; color: #686f76; font-size: 14px; }
.after-sales-metric strong { display: block; margin-top: 10px; color: #252a2f; font-size: 25px; font-weight: 600; line-height: 1; }
.after-sales-metric strong small { margin-left: 5px; color: #656c72; font-size: 13px; font-weight: 400; }
.after-sales-metric-next { position: absolute; top: 50px; right: -1px; display: grid; width: 31px; height: 46px; place-items: center; border: 1px solid #e3e7ea; border-radius: 5px 0 0 5px; color: #777f86; background: #fff; font-size: 18px; }
.after-sales-query-section { margin-top: 18px; }
.after-sales-queue { display: flex; min-height: 70px; align-items: flex-start; gap: 22px; padding: 17px 19px 16px; border: 1px solid var(--line); background: #fff; }
.after-sales-queue-label { flex: 0 0 auto; padding-top: 11px; color: #686f76; font-size: 14px; }
.after-sales-queue-grid { display: grid; grid-template-columns: repeat(8, minmax(130px, 1fr)); gap: 12px; width: 100%; }
.after-sales-queue-button { display: grid; min-height: 40px; place-items: center; padding: 0 13px; overflow: hidden; border: 1px solid #dfe3e7; color: #697178; background: #fff; font-size: 13px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.after-sales-queue-button b { margin-left: 4px; color: #e65c57; font-weight: 400; }
.after-sales-queue-button:hover, .after-sales-queue-button.is-active { border-color: #9dc2f2; color: var(--blue); background: #f4f8ff; }
.after-sales-search { display: flex; align-items: flex-end; gap: 16px; margin-top: 13px; padding: 17px 19px 19px; }
.after-sales-search label { display: flex; width: min(500px, 100%); flex-direction: column; gap: 8px; }
.after-sales-search label span { color: #686f76; font-size: 14px; }
.after-sales-search input { height: 40px; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 2px; outline: 0; color: #697178; font-size: 14px; }
.after-sales-search input:focus { border-color: #9fc3f5; }
.after-sales-search .blue-action { height: 40px; padding: 0 23px; font-size: 14px; }
.after-sales-order-list { margin-top: 13px; padding: 0 0 14px; }
.after-sales-order-caption { padding: 14px 19px; color: #686f76; font-size: 14px; }
.after-sales-order-caption b { color: #252a2f; }
.after-sales-order-wrap { overflow-x: auto; }
.after-sales-order-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.after-sales-order-table th, .after-sales-order-table td { padding: 12px 14px; border-top: 1px solid #edf0f2; color: #5e666d; font-size: 13px; text-align: left; }
.after-sales-order-table th { color: #687078; background: #f7f8fa; font-weight: 500; }
.after-sales-order-table strong, .after-sales-order-table small, .after-sales-order-table span { display: block; }
.after-sales-order-table small, .after-sales-order-table span { margin-top: 4px; color: #8b939a; }
.after-sales-order-table span { color: #d9842b; }
.after-sales-order-empty { display: flex; height: 220px; align-items: center; justify-content: center; flex-direction: column; color: #8b939a; text-align: center; }
.after-sales-order-empty-icon, .after-sales-order-empty strong, .after-sales-order-empty small { display: block; }
.after-sales-order-empty-icon { color: #c5ccd2; font-size: 34px; }
.after-sales-order-empty strong { margin-top: 10px; color: #7c848b; font-size: 14px; font-weight: 500; }
.after-sales-order-empty small { margin-top: 6px; color: #a2a8ae; font-size: 12px; }
.after-sales-order-pager { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 19px 0; }
.after-sales-order-pager a { color: #337fe9; text-decoration: none; }
.after-sales-order-pager a.is-disabled { color: #b7bec4; pointer-events: none; }
.after-sales-order-actions { display: flex; gap: 8px; white-space: nowrap; }
.after-sales-order-actions button { height: 30px; padding: 0 12px; border: 1px solid #c9dcfa; border-radius: 3px; color: var(--blue); background: #f4f8ff; font-size: 12px; }
.after-sales-order-actions button:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.after-sales-order-actions span { margin: 0; color: #b0b6bc; font-size: 12px; }
.after-sales-dialog { width: min(560px, calc(100vw - 48px)); padding: 0; border: 0; border-radius: 8px; color: var(--ink); background: #fff; box-shadow: 0 18px 48px rgba(31, 41, 51, .18); }
.after-sales-dialog::backdrop { background: rgba(23, 28, 33, .45); }
.after-sales-dialog form { display: grid; }
.after-sales-dialog header, .after-sales-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.after-sales-dialog header { border-bottom: 1px solid #eef1f4; }
.after-sales-dialog header strong { display: block; color: #1f2327; font-size: 16px; }
.after-sales-dialog header small, .after-sales-proof-field small { display: block; margin-top: 4px; color: #8b939a; font-size: 12px; }
.after-sales-refund-choices { display: grid; gap: 10px; padding: 18px 20px 0; }
.after-sales-refund-choices label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid #e3e7eb; border-radius: 6px; }
.after-sales-refund-choices label:has(input:checked) { border-color: #9dc2f2; background: #f4f8ff; }
.after-sales-refund-choices input { margin-top: 3px; accent-color: var(--blue); }
.after-sales-refund-choices strong { display: block; color: #1f2327; font-size: 14px; }
.after-sales-refund-choices small { display: block; margin-top: 4px; color: #6d757c; font-size: 12px; line-height: 1.7; }
.after-sales-refund-preview { margin: 14px 20px 0; padding: 12px 14px; border-radius: 6px; color: #3f6ca8; background: #f4f8ff; font-size: 13px; line-height: 1.7; }
.after-sales-refund-note, .after-sales-proof-field { display: grid; gap: 8px; padding: 16px 20px 0; }
.after-sales-refund-note span, .after-sales-proof-field span { color: #5e666d; font-size: 13px; }
.after-sales-refund-note textarea, .after-sales-proof-field textarea { min-height: 78px; padding: 10px 12px; border: 1px solid #dfe3e7; border-radius: 4px; outline: 0; resize: vertical; font-size: 13px; line-height: 1.7; }
.after-sales-proof-field > span:first-child { color: #5e666d; font-size: 13px; }
.after-sales-proof-drop { position: relative; display: grid; min-height: 108px; place-items: center; border: 1px dashed #cfd6dd; border-radius: 6px; background: #fafbfc; cursor: pointer; overflow: hidden; }
.after-sales-proof-drop:hover, .after-sales-proof-drop:focus-within { border-color: #9dc2f2; background: #f4f8ff; }
.after-sales-proof-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.after-sales-proof-placeholder { display: grid; justify-items: center; gap: 4px; padding: 18px; text-align: center; }
.after-sales-proof-placeholder i { color: var(--blue); font-size: 22px; }
.after-sales-proof-placeholder strong { color: #3c444b; font-size: 13px; font-weight: 600; }
.after-sales-proof-placeholder small { color: #9aa1a8; font-size: 12px; }
.after-sales-proof-drop.is-filled .after-sales-proof-placeholder { display: none; }
.after-sales-proof-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 20px 0; }
.after-sales-proof-row .after-sales-proof-field { padding: 0; }
.after-sales-proof-preview { display: grid; justify-items: center; gap: 8px; padding: 12px; text-align: center; }
.after-sales-proof-preview[hidden] { display: none; }
.after-sales-proof-preview img { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; background: #eef1f4; }
.after-sales-proof-preview em { color: #5e666d; font-size: 12px; font-style: normal; word-break: break-all; }
.after-sales-proof-note { margin: 12px 20px 0; color: #8b939a; font-size: 12px; line-height: 1.7; }
.after-sales-refund-note textarea:focus, .after-sales-proof-field input:focus { border-color: #9fc3f5; }
.after-sales-dialog footer { justify-content: flex-end; margin-top: 18px; border-top: 1px solid #eef1f4; }
.after-sales-dialog footer button { height: 36px; padding: 0 16px; border: 1px solid #dfe3e7; border-radius: 3px; color: #5e666d; background: #fff; font-size: 13px; }
.after-sales-dialog footer .blue-action { border-color: var(--blue); color: #fff; background: var(--blue); }
@media (max-width: 900px) {
    .after-sales-metric-grid { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    .after-sales-metric:nth-child(2) { border-right: 0; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
    .after-sales-metric:nth-child(n+3) { border-top: 1px solid #edf0f2; padding-top: 15px; }
    .after-sales-score-detail { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
    .after-sales-queue-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
}
@media (max-width: 600px) {
    .after-sales-tabs { gap: 18px; overflow-x: auto; white-space: nowrap; }
    .after-sales-tab-actions { display: none; }
    .after-sales-experience { align-items: flex-start; flex-direction: column; gap: 16px; }
    .after-sales-queue { flex-direction: column; gap: 10px; }
    .after-sales-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .after-sales-search { align-items: stretch; flex-direction: column; }
    .after-sales-search label { width: 100%; }
    .after-sales-proof-row { grid-template-columns: 1fr; }
}

.after-sales-settings-panel[hidden] { display: none; }
.after-sales-settings-notice { display: flex; min-height: 115px; align-items: flex-start; gap: 17px; padding: 22px 25px; border: 1px solid #e5e8eb; background: #fff; }
.after-sales-settings-notice-icon { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; border-radius: 50%; color: #7fa8ed; background: #edf4ff; font-size: 29px; }
.after-sales-settings-notice strong { display: block; color: #3e454b; font-size: 16px; font-weight: 600; }
.after-sales-settings-notice ol { display: grid; gap: 5px; margin: 10px 0 0; padding-left: 18px; color: #858d94; font-size: 12px; }
.after-sales-settings-notice li::marker { color: #a2a9af; }
.after-sales-settings-card { margin-top: 13px; min-height: 360px; }
.after-sales-settings-card-heading { display: flex; height: 57px; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid #eef0f2; }
.after-sales-settings-marker { width: 3px; height: 18px; background: var(--blue); }
.after-sales-settings-card-heading h2 { margin: 0; color: #4b5156; font-size: 16px; font-weight: 500; }
.after-sales-phone-feedback { margin: 16px 18px 0; padding: 10px 12px; border-radius: 2px; color: #2f7d32; background: #f1f8f2; font-size: 13px; }
.after-sales-phone-feedback.is-error { color: #c44742; background: #fdf3f2; }
.after-sales-phone-form { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px 20px; border: 1px solid #eef1f4; border-radius: 2px; }
.after-sales-contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 18px 0; }
.after-sales-contact-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.after-sales-contact-heading strong { color: #2f363c; font-size: 14px; }
.after-sales-contact-heading span { padding: 2px 8px; border-radius: 2px; color: #8a9299; background: #f4f6f8; font-size: 12px; }
.after-sales-contact-heading span.is-bound { color: #2f7d32; background: #f1f8f2; }
.after-sales-phone-rule { margin: 14px 18px 18px; color: #e89650; font-size: 12px; line-height: 1.6; }
.after-sales-phone-current { margin: 0 0 6px; color: #697178; font-size: 13px; }
.after-sales-phone-current b { color: #3e454b; }
.after-sales-phone-field { display: flex; flex-direction: column; gap: 7px; }
.after-sales-phone-field > span:first-child { color: #697178; font-size: 13px; }
.after-sales-phone-field input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 2px; outline: 0; color: #3e454b; background: #fff; font-size: 13px; }
.after-sales-phone-field input:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.after-sales-phone-field small { color: #e89650; font-size: 11px; line-height: 1.45; }
.after-sales-code-control { display: flex; height: 38px; border: 1px solid #dfe3e7; border-radius: 2px; }
.after-sales-code-control:focus-within { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.after-sales-code-control input { height: 36px; flex: 1; border: 0; box-shadow: none; }
.after-sales-code-control input:focus { border: 0; box-shadow: none; }
.after-sales-code-control button { width: 95px; border: 0; border-left: 1px solid #e5e8eb; color: #697178; background: #fff; font-size: 12px; }
.after-sales-code-control button:hover { color: var(--blue); background: var(--blue-soft); }
.after-sales-code-control button:disabled { color: #b3bac0; background: #fafbfc; cursor: not-allowed; }
.after-sales-confirm-button { height: 40px; margin-top: 11px; border: 0; border-radius: 2px; color: #fff; background: #3e7ff0; font-size: 13px; }
.after-sales-confirm-button:hover { background: var(--blue-deep); }
@media (max-width: 860px) {
    .after-sales-contact-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .after-sales-settings-notice { padding: 17px; }
    .after-sales-settings-notice-icon { width: 46px; height: 46px; flex-basis: 46px; font-size: 22px; }
    .after-sales-settings-notice strong { font-size: 14px; }
    .after-sales-phone-rule { margin-right: 20px; margin-left: 20px; }
}

.order-notice-stack { display: grid; gap: 3px; margin: -1px 0 10px; }
.order-notice { display: flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid; font-size: 11px; }
.order-notice i { font-size: 13px; }
.order-notice span { min-width: 0; flex: 1; }
.order-notice a { color: #337fe9; }
.order-notice button { padding: 0; border: 0; color: #68737d; background: transparent; font-size: 11px; }
.order-notice-warning { border-color: #f0ddb3; color: #806829; background: #fff9eb; }
.order-notice-warning i { color: #f2aa21; }
.order-notice-info { border-color: #dbe9f8; color: #6c7680; background: #f3f8fe; }
.order-notice-info i { color: #f2aa21; }
.order-status-tabs { display: flex; min-height: 45px; align-items: stretch; padding: 0 5px; border: 1px solid #e5e8eb; background: #fff; }
.order-status-tab { position: relative; display: flex; min-width: 132px; flex-direction: column; justify-content: center; padding: 0 12px; border-right: 1px solid #f0f1f2; color: #596168; font-size: 13px; text-align: center; }
.order-status-tab span { white-space: nowrap; }
.order-status-tab em { margin-left: 2px; color: #687078; font-size: 12px; font-style: normal; }
.order-status-tab small { display: none; color: #9ba1a7; font-size: 10px; }
.order-status-tab:hover, .order-status-tab.is-active { color: var(--blue); }
.order-status-tab.is-active::after { position: absolute; right: 11px; bottom: -1px; left: 11px; height: 2px; background: var(--blue); content: ""; }
.order-reminder { display: flex; align-items: center; gap: 5px; margin-left: auto; padding: 0 12px; border: 0; color: #767d84; background: transparent; font-size: 11px; }
.order-reminder:hover { color: var(--blue); }
.order-filter-card { margin-top: 10px; padding: 15px 14px 13px; background: #f7f8fa; }
.order-filter-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.15fr; gap: 10px 18px; align-items: end; }
.order-filter-grid label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.order-filter-grid label > span { color: #5f676e; font-size: 11px; }
.order-filter-grid input, .order-filter-grid select { width: 100%; height: 30px; padding: 0 9px; border: 1px solid #dfe3e7; border-radius: 2px; outline: 0; color: #697178; background: #fff; font-size: 11px; }
.order-filter-grid input:focus, .order-filter-grid select:focus { border-color: #9fc3f5; }
.order-phone-input { display: flex; min-width: 0; }
.order-phone-input select { width: 78px; border-radius: 2px 0 0 2px; border-right: 0; }
.order-phone-input input { min-width: 0; border-radius: 0 2px 2px 0; }
.order-date-field { grid-column: 1 / 2; }
.order-date-range { display: flex; grid-column: 2 / 4; align-items: center; }
.order-date-range input { border-radius: 2px 0 0 2px; }
.order-date-range span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dfe3e7; border-left: 0; color: #a3a9af; background: #fff; font-size: 12px; }
.order-filter-actions { display: flex; align-items: center; gap: 8px; }
.order-filter-actions .blue-action, .order-filter-actions .gray-action { height: 30px; padding: 0 17px; font-size: 11px; }
.order-more-filter { padding: 0 0 0 3px; border: 0; color: #5282bf; background: transparent; font-size: 11px; }
.order-more-filter i { margin-left: 2px; }
.order-data-card { margin-top: 10px; overflow: hidden; }
.order-labels { display: flex; min-height: 38px; align-items: center; gap: 18px; padding: 0 13px; border-bottom: 1px solid #eceff1; color: #697177; font-size: 11px; }
.order-labels > span { display: grid; width: 44px; height: 38px; margin: 0 4px 0 -13px; place-items: center; border-right: 1px solid #eceff1; color: #5c646b; background: #fafbfc; }
.order-labels button { padding: 0; border: 0; color: #6a7279; background: transparent; font-size: 11px; }
.order-labels button.is-active, .order-labels button:hover { color: var(--blue); }
.order-labels button i { margin-left: 3px; color: #a1a7ad; font-size: 9px; }
.order-batch-toolbar { display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 0 13px; color: #888f96; font-size: 11px; }
.order-batch-toolbar .gray-action { height: 27px; padding: 0 11px; font-size: 11px; }
.order-batch-toolbar b { color: #e65c57; font-weight: 500; }
.order-table-wrap { overflow-x: auto; }
.order-table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: auto; }
.order-table th { height: 31px; padding: 0 9px; border: 1px solid #e7eaed; color: #687078; background: #f7f8fa; font-size: 10px; font-weight: 500; text-align: left; white-space: nowrap; }
.order-table td { padding: 0 9px; border: 1px solid #e9ecef; color: #5e666d; font-size: 10px; vertical-align: middle; }
.order-table input[type="checkbox"] { width: 12px; height: 12px; margin: 0; accent-color: var(--blue); }
.order-check-cell { padding: 0 !important; text-align: center; }
.order-group-row td { height: 27px; padding: 0 9px; color: #687078; background: #fafbfc; font-size: 10px; }
.order-group-row td > span { margin-left: 25px; }
.order-group-row button { margin-left: 7px; padding: 0; border: 0; color: #337fe9; background: transparent; font-size: 10px; }
.order-group-row time { float: right; color: #858c93; }
.order-detail-row td { height: 76px; }
.order-detail-row:hover td { background: #fbfdff; }
.order-product { display: flex; align-items: center; gap: 8px; min-width: 0; }
.order-product-thumb { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center; border: 1px solid #dfe3e7; border-radius: 2px; font-size: 19px; }
img.order-product-thumb { display: block; object-fit: cover; background: #f4f6f8; }
.thumb-purple { color: #7c66bd; background: linear-gradient(135deg, #f2e6ff, #e7d5ff); }
.thumb-orange { color: #e58a31; background: linear-gradient(135deg, #fff0d0, #ffdca8); }
.thumb-blue { color: #4c8edb; background: linear-gradient(135deg, #dcedff, #c1dcfc); }
.order-product > div { min-width: 0; }
.order-product strong, .order-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-product strong { color: #3f6da7; font-size: 11px; font-weight: 500; }
.order-product small { margin-top: 4px; color: #747c83; font-size: 10px; }
.order-state { display: flex; flex-direction: column; gap: 3px; }
.order-state strong { color: #4b535a; font-size: 10px; font-weight: 500; }
.order-state small { color: #7f878e; font-size: 10px; }
.order-state a, .order-receiver a, .order-buyer a, .order-actions a { color: #337fe9; }
.order-receiver, .order-buyer, .order-actions { display: flex; flex-direction: column; gap: 4px; }
.order-receiver span, .order-buyer strong { color: #5d656c; font-size: 10px; font-weight: 400; }
.order-actions a { white-space: nowrap; }
.order-empty { height: 230px !important; text-align: center; }
.order-empty-icon, .order-empty strong, .order-empty small { display: block; }
.order-empty-icon { color: #c4cbd2; font-size: 31px; }
.order-empty strong { margin-top: 9px; color: #7c848b; font-size: 13px; font-weight: 500; }
.order-empty small { margin-top: 4px; color: #a2a8ae; font-size: 11px; }
.order-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-height: 51px; padding: 0 13px; color: #939aa0; font-size: 11px; }
.order-pagination > span:first-child { margin-right: 8px; }
.order-pagination button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dfe3e7; border-radius: 2px; color: #737b82; background: #fff; font-size: 10px; }
.order-pagination button:hover, .order-pagination button.is-active { border-color: #a6c8f4; color: var(--blue); background: var(--blue-soft); }
.order-pagination button:disabled { color: #c5cbd0; background: #fafbfc; cursor: not-allowed; }
.order-pagination label { display: flex; align-items: center; gap: 5px; margin-left: 11px; }
.order-pagination select { height: 27px; border: 1px solid #dfe3e7; color: #737b82; background: #fff; font-size: 10px; }


/* 工单与订单中心使用与后台列表一致的中等信息密度，避免局部页面缩小成独立视觉体系。 */
.ticket-page, .order-center-page { font-size: 13px; }
.ticket-page-heading { height: 47px; }
.ticket-page-heading h1 { font-size: 17px; }
.ticket-section-heading { min-height: 47px; padding: 0 16px; gap: 12px; }
.ticket-section-heading::before, .ticket-results-heading::before { height: 18px; }
.ticket-section-heading strong, .ticket-results-heading strong { font-size: 15px; }
.ticket-section-heading span, .ticket-results-heading span { font-size: 12px; }
.ticket-notice { min-height: 34px; margin: 12px 16px 9px; padding: 0 10px; font-size: 12px; }
.ticket-metric-grid { margin: 0 16px 16px; }
.ticket-metric { min-height: 91px; padding: 15px 17px 12px; }
.ticket-metric > span { font-size: 12px; }
.ticket-metric strong { margin-top: 8px; font-size: 23px; }
.ticket-metric strong small { font-size: 12px; }
.ticket-metric em { margin-top: 7px; font-size: 11px; }
.ticket-status-tabs { min-height: 58px; gap: 32px; padding: 0 18px; }
.ticket-status-tabs button { height: 32px; min-width: 100px; padding: 0 16px; font-size: 12px; }
.ticket-filter-fields { gap: 12px 18px; padding: 16px 18px 18px; }
.ticket-filter-fields label { gap: 7px; }
.ticket-filter-fields label > span { font-size: 12px; }
.ticket-filter-fields input, .ticket-filter-fields select { height: 34px; padding: 0 10px; font-size: 12px; }
.ticket-query-button { width: 60px; height: 34px; font-size: 12px; }
.ticket-results-heading { height: 43px; gap: 9px; }
.ticket-table-head { min-height: 36px; padding: 0 14px; font-size: 12px; }
.ticket-table-head span:nth-child(n+2) { padding-left: 11px; }
.ticket-row-top { min-height: 34px; padding: 0 14px; font-size: 12px; }
.ticket-row-top button { margin-left: 6px; font-size: 12px; }
.ticket-row-content { min-height: 82px; }
.ticket-order-info, .ticket-progress, .ticket-process-time, .ticket-operation { padding: 10px 14px; }
.ticket-order-info { gap: 10px; }
.ticket-thumb { width: 44px; height: 44px; font-size: 20px; }
.ticket-order-info strong { font-size: 12px; }
.ticket-order-info p { margin-top: 4px; font-size: 11px; }
.ticket-progress { gap: 5px; }
.ticket-progress .status-tag { font-size: 11px; }
.ticket-progress strong { font-size: 12px; }
.ticket-process-time { font-size: 11px; }
.ticket-operation button { font-size: 12px; }

.order-notice { min-height: 34px; padding: 0 12px; font-size: 12px; }
.order-notice button { font-size: 12px; }
.order-status-tabs { min-height: 52px; }
.order-status-tab { min-width: 142px; padding: 0 14px; font-size: 14px; }
.order-status-tab em { font-size: 13px; }
.order-reminder { padding: 0 14px; font-size: 12px; }
.order-filter-card { padding: 18px 16px 16px; }
.order-filter-grid { gap: 12px 18px; }
.order-filter-grid label { gap: 6px; }
.order-filter-grid label > span { font-size: 12px; }
.order-filter-grid input, .order-filter-grid select { height: 34px; padding: 0 10px; font-size: 12px; }
.order-phone-input select { width: 86px; }
.order-date-range span { width: 34px; height: 34px; }
.order-filter-actions { gap: 9px; }
.order-filter-actions .blue-action, .order-filter-actions .gray-action { height: 34px; padding: 0 19px; font-size: 12px; }
.order-more-filter { font-size: 12px; }
.order-labels { min-height: 44px; gap: 20px; padding: 0 15px; font-size: 12px; }
.order-labels > span { width: 50px; height: 44px; margin-left: -15px; }
.order-labels button { font-size: 12px; }
.order-batch-toolbar { min-height: 49px; gap: 13px; padding: 0 15px; font-size: 12px; }
.order-batch-toolbar .gray-action { height: 30px; padding: 0 12px; font-size: 12px; }
.order-table { min-width: 1280px; }
.order-table th { height: 38px; padding: 0 10px; font-size: 12px; text-align: center;}
.order-table td { padding: 0 10px; font-size: 12px; }
.order-group-row td { height: 34px; padding: 0 10px; font-size: 12px; }
.order-group-row button { margin-left: 8px; font-size: 12px; }
.order-table th:nth-child(3), .order-table td:nth-child(3),
.order-table th:nth-child(7), .order-table td:nth-child(7) { text-align: right; white-space: nowrap; }
.order-product { gap: 10px; }
.order-product-thumb { width: 52px; height: 52px; font-size: 21px; }
.order-product strong { font-size: 12px; }
.order-product small { margin-top: 5px; font-size: 11px; }
.order-price, .order-fulfillment, .order-money { display: flex; flex-direction: column; gap: 4px; }
.order-price strong, .order-fulfillment strong, .order-money strong { color: #4b535a; font-size: 12px; font-weight: 500; }
.order-price small, .order-fulfillment small, .order-money small, .order-receiver small { color: #8b939a; font-size: 11px; }
.order-fulfillment .is-delivered { color: #3f9a62; }
.order-fulfillment .is-pending { color: #d9842b; }
.order-state { gap: 4px; }
.order-state strong, .order-state small, .order-receiver span, .order-buyer strong { font-size: 11px; }
.order-buyer-line { display: flex; align-items: center; justify-content: flex-start; gap: 8px; white-space: nowrap; }
.order-buyer-line strong { color: #4b535a; font-size: 12px; font-weight: 500; }
.order-buyer-line span { color: #687078; font-size: 12px; font-variant-numeric: tabular-nums; }
.order-buyer-line button { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 12px; cursor: pointer; }
.order-pagination a { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dfe3e7; border-radius: 2px; color: #737b82; background: #fff; font-size: 11px; text-decoration: none; }
.order-pagination a:hover, .order-pagination a.is-active { border-color: #a6c8f4; color: var(--blue); background: var(--blue-soft); }
.order-pagination a.is-disabled { color: #c5cbd0; background: #fafbfc; pointer-events: none; }
.order-batch-toolbar input[name="merchant_note"] { width: min(360px, 42vw); height: 30px; border: 1px solid #dfe3e7; border-radius: 2px; padding: 0 8px; color: #5d656c; font-size: 12px; }
.order-receiver button, .order-actions button, .order-group-row button { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 12px; cursor: pointer; }
.order-detail-dialog { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: 8px; padding: 0; }
.order-detail-dialog::backdrop { background: rgba(23, 28, 33, .38); }
.order-detail-dialog form { display: grid; }
.order-detail-dialog header, .order-detail-dialog dl { display: grid; gap: 10px; padding: 16px 18px; }
.order-detail-dialog header { grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid #eef1f4; }
.order-detail-dialog dl { grid-template-columns: 88px 1fr; margin: 0; }
.order-detail-dialog dt { color: #8b939a; }
.order-detail-dialog dd { margin: 0; color: #333; word-break: break-all; }
.order-ship-dialog { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 8px; padding: 0; }
.order-ship-dialog::backdrop { background: rgba(23, 28, 33, .38); }
.order-ship-dialog form { display: grid; }
.order-ship-dialog header, .order-ship-dialog footer { display: grid; align-items: center; padding: 14px 18px; }
.order-ship-dialog header { grid-template-columns: 1fr auto; border-bottom: 1px solid #eef1f4; }
.order-ship-body { display: grid; gap: 14px; padding: 16px 18px; }
.order-ship-body > p { margin: 0; color: #5d656c; font-size: 13px; }
.order-ship-modes { display: flex; gap: 18px; }
.order-ship-modes label { display: flex; align-items: center; gap: 6px; color: #333; font-size: 13px; cursor: pointer; }
.order-ship-content { display: grid; gap: 6px; }
.order-ship-content span { color: #5d656c; font-size: 12px; }
.order-ship-content textarea { width: 100%; border: 1px solid #dfe3e7; border-radius: 4px; padding: 8px; color: #333; font-size: 13px; resize: vertical; }
.order-ship-content small { color: #8b939a; font-size: 12px; }
.order-ship-content input[type="file"] { color: #5d656c; font-size: 12px; }
.order-ship-warning { display: flex; gap: 8px; align-items: flex-start; border-radius: 4px; padding: 10px 12px; color: #9a5b12; background: #fff7ec; font-size: 12px; line-height: 1.6; }
.order-ship-dialog footer { grid-template-columns: auto auto; justify-content: flex-end; gap: 8px; border-top: 1px solid #eef1f4; }
.order-blacklist-targets { display: grid; gap: 6px; margin: 0; padding: 10px 12px; list-style: none; border-radius: 4px; background: #f7f9fb; }
.order-blacklist-targets li { color: #5d656c; font-size: 12px; }
.order-blacklist-dialog label { display: grid; gap: 6px; }
.order-blacklist-dialog label span { color: #5d656c; font-size: 12px; }
.order-blacklist-dialog select { height: 34px; border: 1px solid #dfe3e7; border-radius: 4px; padding: 0 8px; color: #333; font-size: 13px; }
.order-pagination button { width: 30px; height: 30px; font-size: 11px; }
.order-pagination select { height: 30px; font-size: 11px; }

@media (max-width: 1100px) {
    .message-page { grid-template-columns: 120px minmax(250px, 38%) minmax(360px, 1fr); }
}
@media (max-width: 780px) {
    .message-page { min-height: calc(100vh - var(--header) - 78px); grid-template-columns: 95px minmax(220px, 1fr); }
    .message-categories { grid-row: 1; }
    .message-list-panel { grid-row: 1; }
    .message-content-panel { grid-column: 1 / -1; min-height: 480px; border-top: 1px solid #e8eaed; }
    .message-categories { border-bottom: 1px solid #e8eaed; }
    .message-list-panel { border-right: 0; border-bottom: 1px solid #e8eaed; }
}
@media (max-width: 520px) {
    .message-page { grid-template-columns: 82px minmax(0, 1fr); }
    .message-categories a { min-height: 39px; padding: 0 7px; font-size: 11px; }
    .message-category-count { min-width: 16px; height: 16px; font-size: 9px; }
    .message-list-toolbar { gap: 5px; font-size: 10px; }
    .message-unread-filter { gap: 2px !important; }
    .message-content-heading { flex-wrap: wrap; }
    .message-content-header h1 { font-size: 15px; }
    .message-body { padding: 15px 13px 38px; font-size: 12px; }
}

@media (max-width: 1100px) {
    .order-status-tabs { overflow-x: auto; }
    .order-status-tab { min-width: 132px; }
    .order-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .order-date-field { grid-column: auto; }
    .order-date-range { grid-column: span 2; }
    .order-filter-actions { grid-column: span 3; }
}
@media (max-width: 900px) {
    .ticket-status-tabs { gap: 10px; overflow-x: auto; }
    .ticket-filter-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ticket-date-range { grid-column: 1 / 3; }
    .ticket-query-button { width: 100%; }
    .ticket-table { overflow-x: auto; }
    .ticket-table-head, .ticket-row-content { min-width: 840px; }
}
.product-management-page { min-width: 0; color: #4c5258; font-size: 13px; }
.product-page-heading { display: flex; height: 47px; align-items: center; }
.product-page-heading h1 { margin: 0; color: #3f454a; font-size: 17px; font-weight: 500; }
.product-status-tabs { display: flex; min-height: 46px; align-items: stretch; padding: 0 5px; border: 1px solid #e5e8eb; background: #fff; }
.product-status-tab { position: relative; display: flex; min-width: 82px; align-items: center; justify-content: center; padding: 0 14px; border-right: 1px solid #f0f1f2; color: #60676e; font-size: 13px; white-space: nowrap; }
.product-status-tab em { margin-left: 2px; color: #858c92; font-size: 12px; font-style: normal; }
.product-status-tab:hover, .product-status-tab.is-active { color: var(--blue); }
.product-status-tab.is-active::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: var(--blue); content: ""; }
.product-tab-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; padding: 0 11px; }
.product-tab-actions button { padding: 0; border: 0; color: #727980; background: transparent; font-size: 12px; }
.product-tab-actions button:hover { color: var(--blue); }
.product-tab-actions i { margin-right: 4px; color: #90979d; }
.product-filter-card { margin-top: 10px; padding: 17px 16px 16px; background: #f7f8fa; }
.product-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; align-items: end; }
.product-filter-grid label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.product-filter-grid label > span { color: #5f676e; font-size: 12px; }
.product-filter-grid input, .product-filter-grid select { width: 100%; height: 34px; padding: 0 10px; border: 1px solid #dfe3e7; border-radius: 2px; outline: 0; color: #697178; background: #fff; font-size: 12px; }
.product-filter-grid input:focus, .product-filter-grid select:focus { border-color: #9fc3f5; }
.product-filter-actions { display: flex; align-items: center; gap: 9px; }
.product-filter-actions .blue-action, .product-filter-actions .gray-action { display: inline-flex; height: 34px; align-items: center; justify-content: center; padding: 0 19px; font-size: 12px; line-height: 1; text-align: center; }
.product-more-filter { padding: 0 0 0 3px; border: 0; color: #5282bf; background: transparent; font-size: 12px; white-space: nowrap; }
.product-more-filter i { margin-left: 2px; }
.product-action-bar { display: flex; align-items: center; gap: 9px; min-height: 53px; }
.product-action-bar .blue-action, .product-action-bar .gray-action, .product-action-bar .outline-button { display: inline-flex; min-width: 88px; height: 34px; align-items: center; justify-content: center; padding: 0 14px; font-size: 12px; line-height: 34px; text-align: center; }
.product-action-bar .outline-button { border-color: #a9c8f5; }
.product-more-actions { display: flex; align-items: center; gap: 5px; }
.product-data-card { overflow: hidden; }
.product-count-bar { display: flex; min-height: 43px; align-items: center; gap: 12px; padding: 0 15px; border-bottom: 1px solid #edf0f2; color: #858c93; font-size: 12px; }
.product-count-bar b { color: #e45c57; font-weight: 500; }
.product-source-label { padding-left: 12px; border-left: 1px solid #e6e9ec; color: #697179; }
.product-table-wrap { overflow-x: auto; }
.product-table { width: 100%; min-width: 1540px; border-collapse: collapse; table-layout: fixed; }
.product-table th { height: 39px; padding: 0 10px; border: 1px solid #e7eaed; color: #687078; background: #f7f8fa; font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; }
.product-table td { height: 103px; padding: 8px 10px; border: 1px solid #e9ecef; color: #5e666d; font-size: 12px; vertical-align: middle; }
.product-table tbody tr:nth-child(even) td { background: #fcfdfe; }
.product-table tbody tr:hover td { background: #f3f8ff; }
.product-table th:nth-child(1), .product-table td:nth-child(1) { width: 39px; }
.product-table th:nth-child(2), .product-table td:nth-child(2) { width: 330px; }
.product-table th:nth-child(3), .product-table td:nth-child(3) { width: 145px; }
.product-table th:nth-child(4), .product-table td:nth-child(4) { width: 125px; }
.product-table th:nth-child(5), .product-table td:nth-child(5) { width: 75px; }
.product-table th:nth-child(6), .product-table td:nth-child(6) { width: 105px; }
.product-table th:nth-child(7), .product-table td:nth-child(7) { width: 145px; }
.product-table th:nth-child(8), .product-table td:nth-child(8) { width: 105px; }
.product-table th:nth-child(9), .product-table td:nth-child(9) { width: 150px; }
.product-table th:nth-child(10), .product-table td:nth-child(10) { width: 180px; }
.product-check-cell { padding: 0 !important; text-align: center !important; }
.product-table input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: var(--blue); }
.table-head-link { margin-left: 4px; padding: 0; border: 0; color: #337fe9; background: transparent; font-size: 11px; }
.product-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.product-thumb { display: grid; width: 66px; height: 66px; flex: 0 0 auto; place-items: center; border: 1px solid #dce2e8; border-radius: 2px; font-size: 25px; }
.thumb-purple { color: #765db5; background: linear-gradient(135deg, #f2e8ff, #d6c0fa); }
.thumb-red { color: #d76261; background: linear-gradient(135deg, #ffe7e1, #f6c0b5); }
.thumb-cyan { color: #3a9cb0; background: linear-gradient(135deg, #def8fb, #b5e5eb); }
.thumb-blue { color: #4e7fc2; background: linear-gradient(135deg, #e1efff, #bad5fb); }
.thumb-violet { color: #766fb7; background: linear-gradient(135deg, #ebeaff, #c9c5f4); }
.thumb-orange { color: #e28c2c; background: linear-gradient(135deg, #fff0cf, #ffd79d); }
.thumb-green { color: #48a777; background: linear-gradient(135deg, #e3f8ea, #b8e6ca); }
.product-info > div { min-width: 0; }
.product-info strong, .product-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-info strong { color: #3d6da8; font-size: 12px; font-weight: 500; }
.product-info small { margin-top: 5px; color: #7d858c; font-size: 11px; }
.product-cell-stack, .product-actions { display: flex; flex-direction: column; gap: 4px; }
.product-cell-stack strong { color: #4d555c; font-size: 12px; font-weight: 500; }
.product-cell-stack span { color: #8d949a; font-size: 11px; }
.product-cell-stack a, .product-actions a { color: #337fe9; font-size: 11px; white-space: nowrap; }
.product-cell-stack a:hover, .product-actions a:hover, .table-head-link:hover { color: var(--blue-deep); }
.product-muted { color: #959ca2 !important; }
.product-time strong { color: #596169; font-size: 11px; font-weight: 400; }
.product-empty { height: 260px !important; text-align: center; }
.product-empty > span, .product-empty strong, .product-empty small { display: block; }
.product-empty > span { color: #c5ccd2; font-size: 37px; }
.product-empty strong { margin-top: 10px; color: #788188; font-size: 14px; font-weight: 500; }
.product-empty small { margin-top: 5px; color: #a1a8ae; font-size: 12px; }
.product-pagination { display: flex; min-height: 57px; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 15px; color: #939aa0; font-size: 12px; }
.product-pagination > span:first-child { margin-right: 8px; }
.product-pagination button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dfe3e7; border-radius: 2px; color: #737b82; background: #fff; font-size: 11px; }
.product-pagination button:hover, .product-pagination button.is-active { border-color: #a6c8f4; color: var(--blue); background: var(--blue-soft); }
.product-pagination button:disabled { color: #c5cbd0; background: #fafbfc; cursor: not-allowed; }
.product-pagination label { display: flex; align-items: center; gap: 5px; margin-left: 11px; }
.product-pagination select { height: 30px; border: 1px solid #dfe3e7; color: #737b82; background: #fff; font-size: 11px; }

@media (max-width: 1100px) {
    .product-status-tabs { overflow-x: auto; }
    .product-status-tab { min-width: 78px; }
    .product-tab-actions { display: none; }
    .product-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-filter-actions { grid-column: span 3; }
}
@media (max-width: 720px) {
    .product-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-filter-actions { grid-column: span 2; }
    .product-action-bar { overflow-x: auto; white-space: nowrap; }
    .product-action-bar > * { flex: 0 0 auto; }
    .product-count-bar { white-space: nowrap; }
}

.store-settings-page { width: min(100%, 1200px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.store-link-page { width: min(100%, 760px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.store-link-card { overflow: hidden; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.store-link-address { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #eef0f2; }
.store-link-address > span { color: #8a9299; font-size: 12px; }
.store-link-address strong { overflow: hidden; color: #2f6fdb; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.store-link-address div { display: flex; gap: 8px; }
.store-link-address button,
.store-link-address a { display: inline-flex; height: 30px; align-items: center; padding: 0 12px; border: 1px solid #d7dde3; border-radius: 3px; color: #4c5258; background: #fff; font-size: 12px; text-decoration: none; }
.store-link-address button:hover,
.store-link-address a:hover { border-color: #8eb4ef; color: #2f6fdb; }
.store-link-editor { display: grid; gap: 8px; padding: 18px 20px; }
.store-link-editor > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #4e555b; font-size: 12px; }
.store-link-editor small { color: #9ba2a8; font-size: 11px; font-weight: 400; }
.store-link-input { display: flex; align-items: center; }
.store-link-input b { display: inline-flex; height: 38px; align-items: center; padding: 0 12px; border: 1px solid #dfe3e7; border-right: 0; border-radius: 3px 0 0 3px; color: #8a9299; background: #f7f8fa; font-weight: 500; }
.store-link-input input { width: 100%; height: 38px; min-width: 0; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 0 3px 3px 0; outline: 0; color: #343a40; font-size: 14px; }
.store-link-input input:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.store-link-meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 20px; border-top: 1px solid #eef0f2; background: #fafbfc; }
.store-link-meta > span { padding: 3px 8px; border-radius: 3px; color: #5886bd; background: #eef5ff; font-size: 11px; }
.store-link-meta > span.is-custom { color: #9a6a18; background: #fff6e8; }
.store-link-meta p { margin: 0; color: #929aa1; font-size: 12px; }
.store-link-meta button { min-width: 72px; height: 34px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-size: 13px; }
.store-link-meta button:hover { background: var(--blue-deep); }
@media (max-width: 700px) {
    .store-link-address, .store-link-meta { grid-template-columns: 1fr; }
    .store-link-editor > span { align-items: flex-start; flex-direction: column; }
}
.store-settings-heading { display: flex; min-height: 80px; align-items: center; justify-content: space-between; }
.store-settings-heading h1 { margin: 0; color: #343a40; font-size: 20px; font-weight: 600; }
.store-settings-heading p { margin: 5px 0 0; color: #8e969d; font-size: 12px; }
.store-settings-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d8eee1; border-radius: 3px; color: #248b5b; background: #f4fbf6; font-size: 12px; }
.store-settings-form { display: flex; flex-direction: column; gap: 12px; }
.store-settings-feedback { margin: 0; padding: 9px 12px; border: 1px solid; border-radius: 3px; font-size: 12px; }
.store-settings-feedback.is-success { border-color: #d8eee1; color: #248b5b; background: #f4fbf6; }
.store-settings-feedback.is-error { border-color: #f2d8d7; color: #c6514b; background: #fff6f5; }
.store-settings-card { overflow: hidden; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 49, .025); }
.store-settings-card-heading { display: flex; min-height: 69px; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #eef0f2; }
.store-heading-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #347fdb; background: #eef5ff; font-size: 14px; }
.store-heading-icon-green { color: #20a072; background: #eaf8f2; }
.store-heading-icon-purple { color: #8062ca; background: #f2edff; }
.store-heading-icon-orange { color: #dc8b28; background: #fff5e6; }
.store-settings-card-heading h2 { margin: 0; color: #3e454b; font-size: 14px; font-weight: 600; }
.store-settings-card-heading p { margin: 3px 0 0; color: #969da3; font-size: 11px; }
.store-settings-card-heading-row { padding-right: 18px; }
.store-settings-card-heading-row > div { flex: 1; }
.store-add-button { display: inline-flex; height: 32px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #b9d1f4; border-radius: 3px; color: #2878f0; background: #fff; font-size: 12px; }
.store-add-button:hover { background: #f3f8ff; }
.store-settings-fields { padding: 0 22px; }
.store-form-row { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid #f0f2f4; }
.store-settings-fields > .store-form-row:last-child { border-bottom: 0; }
.store-field-label { display: flex; flex-direction: column; gap: 4px; }
.store-field-label strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.store-field-label small, .store-field-control > small { color: #9ba2a8; font-size: 11px; }
.store-field-control { display: flex; max-width: 660px; flex-direction: column; gap: 6px; }
.store-field-control input, .store-field-control textarea, .store-repeat-row input, .store-repeat-row select { width: 100%; min-width: 0; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; font-size: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.store-field-control input, .store-repeat-row input, .store-repeat-row select { height: 37px; padding: 0 11px; }
.store-field-control textarea { min-height: 96px; padding: 9px 11px; resize: vertical; }
.store-field-control input:focus, .store-field-control textarea:focus, .store-repeat-row input:focus, .store-repeat-row select:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.store-field-control input::placeholder, .store-field-control textarea::placeholder, .store-repeat-row input::placeholder { color: #b2b8bd; }
.store-avatar-row { min-height: 120px; }
.store-avatar-editor { display: flex; align-items: center; gap: 15px; }
.store-avatar-editor img { width: 74px; height: 74px; flex: 0 0 74px; border: 1px solid #e4e8eb; border-radius: 50%; background: #f5f7f8; object-fit: cover; }
.store-avatar-editor > div { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; }
.store-upload-button { display: inline-flex; height: 31px; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; font-size: 12px; cursor: pointer; }
.store-upload-button:hover { border-color: #a9c8f5; color: var(--blue); }
.store-file-input { position: absolute; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.store-avatar-editor > div > span { color: #9ba2a8; font-size: 11px; }
.store-notice-row { align-items: start; }
.store-notice-row .store-field-label { padding-top: 7px; }
.store-character-count { align-self: flex-end; }
.store-character-count span { color: #69737b; }
.store-repeat-list { display: flex; flex-direction: column; padding: 4px 20px 15px; }
.store-repeat-row { display: grid; grid-template-columns: 34px minmax(160px, .8fr) minmax(220px, 1.4fr) 66px; gap: 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid #f0f2f4; }
.store-repeat-index { display: grid; width: 30px; height: 30px; align-self: center; place-items: center; border-radius: 6px; color: #78828a; background: #f3f5f7; font-size: 12px; }
.store-repeat-row label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.store-repeat-row label > span { color: #788188; font-size: 11px; }
.store-repeat-row input, .store-repeat-row select { height: 35px; }
.store-remove-button { display: inline-flex; height: 35px; align-items: center; justify-content: center; gap: 5px; border: 1px solid #f2d8d7; border-radius: 3px; color: #d45b55; background: #fff; font-size: 11px; }
.store-remove-button:hover { background: #fff5f4; }
.store-button-repeat-row { grid-template-columns: 34px minmax(135px, .8fr) minmax(190px, 1.3fr) minmax(100px, .55fr) 66px; }
.store-repeat-empty { padding: 21px 0 8px; color: #9ba2a8; font-size: 12px; text-align: center; }
.store-settings-footer { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.store-settings-footer > span { color: #929aa1; font-size: 11px; }
.store-settings-footer > span i { margin-right: 4px; color: #9aabbc; }
.store-save-button { display: inline-flex; min-width: 116px; height: 37px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-size: 13px; }
.store-save-button:hover { background: var(--blue-deep); }

.account-settings-page { width: min(100%, 1200px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.account-settings-heading { display: flex; min-height: 80px; align-items: center; justify-content: space-between; }
.account-settings-heading h1 { margin: 0; color: #343a40; font-size: 20px; font-weight: 600; }
.account-settings-heading p { margin: 5px 0 0; color: #8e969d; font-size: 12px; }
.account-security-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d8eee1; border-radius: 3px; color: #248b5b; background: #f4fbf6; font-size: 12px; }
.account-settings-form { display: flex; flex-direction: column; gap: 12px; }
.account-settings-card { overflow: hidden; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 49, .025); }
.account-card-heading { display: flex; min-height: 69px; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #eef0f2; }
.account-heading-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #347fdb; background: #eef5ff; font-size: 14px; }
.account-heading-icon-green { color: #20a072; background: #eaf8f2; }
.account-heading-icon-purple { color: #8062ca; background: #f2edff; }
.account-card-heading h2 { margin: 0; color: #3e454b; font-size: 14px; font-weight: 600; }
.account-card-heading p { margin: 3px 0 0; color: #969da3; font-size: 11px; }
.account-settings-fields { padding: 0 22px; }
.account-form-row { display: grid; min-height: 75px; grid-template-columns: 205px minmax(0, 1fr); gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid #f0f2f4; }
.account-settings-fields > .account-form-row:last-child { border-bottom: 0; }
.account-field-label { display: flex; flex-direction: column; gap: 4px; }
.account-field-label strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.account-field-label small { color: #9ba2a8; font-size: 11px; }
.account-avatar-row { min-height: 120px; }
.account-avatar-editor { display: flex; align-items: center; gap: 15px; }
.account-avatar-editor img { width: 74px; height: 74px; flex: 0 0 74px; border: 1px solid #e4e8eb; border-radius: 50%; background: #f5f7f8; object-fit: cover; }
.account-avatar-editor > div { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; }
.account-avatar-editor > div > span { color: #9ba2a8; font-size: 11px; }
.account-upload-button { display: inline-flex; height: 31px; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; font-size: 12px; cursor: pointer; }
.account-upload-button:hover { border-color: #a9c8f5; color: var(--blue); }
.account-file-input { position: absolute; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.account-field-control { display: flex; max-width: 660px; flex-direction: column; gap: 6px; }
.account-field-control input { width: 100%; height: 37px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; font-size: 12px; }
.account-field-control input:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.account-field-control > small { color: #9ba2a8; font-size: 11px; }
.account-value { display: flex; min-height: 38px; align-items: center; gap: 11px; color: #545c63; font-size: 12px; }
.account-readonly-tag, .account-device-tag { padding: 3px 7px; border-radius: 3px; color: #8a9298; background: #f2f4f6; font-size: 10px; }
.account-device-tag { color: #5886bd; background: #eef5ff; }
.account-device-tag i { margin-right: 3px; }
.account-security-list { padding: 0 22px; }
.account-security-row { display: flex; min-height: 76px; align-items: center; gap: 14px; border-bottom: 1px solid #f0f2f4; }
.account-security-row:last-child { border-bottom: 0; }
.account-security-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 9px; color: #477fca; background: #eef5ff; font-size: 14px; }
.account-email-icon { color: #a174ce; background: #f5effb; }
.account-phone-icon { color: #dc9841; background: #fff6e9; }
.account-security-info { display: flex; min-width: 180px; flex: 1; flex-direction: column; gap: 4px; }
.account-security-info strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.account-security-info small { color: #9ba2a8; font-size: 11px; }
.account-security-status { min-width: 70px; color: #299365; font-size: 11px; }
.account-security-status i { margin-right: 3px; }
.account-row-button { display: inline-flex; min-width: 95px; align-items: center; justify-content: flex-end; gap: 7px; padding: 7px 0; border: 0; color: #347fdb; background: transparent; font-size: 12px; }
.account-row-button:hover { color: var(--blue-deep); }
.account-row-button i { color: #aab1b7; font-size: 10px; }
.account-switch { display: inline-flex; align-items: center; gap: 8px; color: #748087; font-size: 11px; cursor: pointer; }
.account-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-switch > span { position: relative; width: 34px; height: 19px; border-radius: 12px; background: #c8cdd1; transition: background .15s ease; }
.account-switch > span::after { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .16); content: ""; transition: transform .15s ease; }
.account-switch input:checked + span { background: var(--blue); }
.account-switch input:checked + span::after { transform: translateX(15px); }
.account-switch input:focus-visible + span { outline: 2px solid #8eb7f2; outline-offset: 2px; }
.account-settings-footer { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.account-settings-footer > span { color: #929aa1; font-size: 11px; }
.account-settings-footer > span i { margin-right: 4px; color: #9aabbc; }
.account-save-button { display: inline-flex; min-width: 116px; height: 37px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-size: 13px; }
.account-save-button:hover { background: var(--blue-deep); }
.account-feedback { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 11px 13px; border-radius: 4px; font-size: 12px; }
.account-feedback-error { border: 1px solid #f3d0cc; color: #c45b52; background: #fff6f5; }
.account-feedback-success { border: 1px solid #cfe6d7; color: #2a8a5b; background: #f4fbf6; }
.account-feedback ul { margin: 4px 0 0; padding-left: 16px; }
.account-row-button { text-decoration: none; }
.account-security-status:not(:has(i)) { color: #8a9298; }
.account-dialog-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; background: rgba(32, 41, 51, .38); }
.account-dialog-backdrop[hidden] { display: none; }
.account-dialog { width: min(420px, calc(100% - 32px)); overflow: hidden; border: 1px solid #e5e8eb; border-radius: 8px; background: #fff; box-shadow: 0 18px 40px rgba(28, 39, 49, .16); }
.account-dialog-heading { display: flex; min-height: 56px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #eef0f2; }
.account-dialog-heading h2 { margin: 0; color: #343a40; font-size: 15px; }
.account-dialog-heading a, .account-dialog-heading button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; color: #8a9298; background: transparent; cursor: pointer; }
.account-dialog-body { display: grid; gap: 12px; padding: 18px; }
.account-dialog-body label { display: grid; gap: 6px; color: #5d666d; font-size: 12px; }
.account-dialog-body input { height: 38px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; }
.account-dialog-body input:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.account-dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 16px; }
.account-dialog-cancel { display: inline-flex; height: 37px; align-items: center; padding: 0 14px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; font-size: 13px; text-decoration: none; cursor: pointer; }
.cards-dialog-error { margin: 0; padding: 8px 10px; border-radius: 3px; color: #b42318; background: #fef3f2; font-size: 12px; }

@media (max-width: 900px) {
    .account-form-row { grid-template-columns: 165px minmax(0, 1fr); }
    .account-security-list { padding: 0 16px; }
    .account-settings-fields { padding: 0 16px; }
}
@media (max-width: 600px) {
    .account-settings-heading { min-height: 73px; }
    .account-settings-heading h1 { font-size: 18px; }
    .account-settings-heading p { max-width: 280px; line-height: 1.6; }
    .account-security-state { display: none; }
    .account-card-heading { min-height: 64px; padding: 0 13px; }
    .account-settings-fields { padding: 0 14px; }
    .account-form-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
    .account-field-control { max-width: none; }
    .account-security-list { padding: 0 13px; }
    .account-security-row { flex-wrap: wrap; gap: 9px; padding: 13px 0; }
    .account-security-icon { width: 32px; height: 32px; flex-basis: 32px; }
    .account-security-info { min-width: 120px; }
    .account-security-status { min-width: auto; margin-left: 41px; }
    .account-row-button { margin-left: auto; }
    .account-settings-footer { align-items: flex-start; flex-direction: column; }
    .account-save-button { width: 100%; }
}

@media (max-width: 900px) {
    .store-form-row { grid-template-columns: 165px minmax(0, 1fr); }
    .store-button-repeat-row { grid-template-columns: 30px minmax(120px, 1fr) minmax(170px, 1.3fr) 100px 62px; gap: 8px; }
    .store-repeat-row { grid-template-columns: 30px minmax(125px, .8fr) minmax(180px, 1.3fr) 62px; gap: 8px; }
    .store-settings-card { overflow-x: auto; }
    .store-repeat-list { min-width: 650px; }
    .store-button-repeat-row { min-width: 740px; }
}
@media (max-width: 600px) {
    .store-settings-heading { min-height: 73px; }
    .store-settings-heading h1 { font-size: 18px; }
    .store-settings-heading p { max-width: 280px; line-height: 1.6; }
    .store-settings-state { display: none; }
    .store-settings-card-heading { min-height: 64px; padding: 0 13px; }
    .store-settings-card-heading-row { padding-right: 12px; }
    .store-settings-fields { padding: 0 14px; }
    .store-form-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
    .store-avatar-row { grid-template-columns: 1fr; }
    .store-field-control { max-width: none; }
    .store-settings-footer { align-items: flex-start; flex-direction: column; }
    .store-save-button { width: 100%; }
}

.notification-page { width: min(100%, 1200px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.notification-heading { display: flex; min-height: 80px; align-items: center; justify-content: space-between; }
.notification-heading h1 { margin: 0; color: #343a40; font-size: 20px; font-weight: 600; }
.notification-heading p { margin: 5px 0 0; color: #8e969d; font-size: 12px; }
.notification-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid; border-radius: 3px; font-size: 12px; }
.notification-state.is-bound { border-color: #d8eee1; color: #248b5b; background: #f4fbf6; }
.notification-state.is-unbound { border-color: #f0ddb3; color: #9a762b; background: #fff9eb; }
.notification-feedback { display: flex; min-height: 36px; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 12px; border: 1px solid; border-radius: 3px; font-size: 12px; }
.notification-feedback-success { border-color: #d8eee1; color: #248b5b; background: #f4fbf6; }
.notification-feedback-error { border-color: #f2d8d7; color: #c6514b; background: #fff6f5; }
.notification-form { display: flex; flex-direction: column; gap: 12px; }
.notification-card { overflow: hidden; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 49, .025); }
.notification-card-heading { display: flex; min-height: 69px; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #eef0f2; }
.notification-card-heading > div { min-width: 0; flex: 1; }
.notification-card-heading h2 { margin: 0; color: #3e454b; font-size: 14px; font-weight: 600; }
.notification-card-heading p { margin: 3px 0 0; color: #969da3; font-size: 11px; }
.notification-channel-icon, .notification-heading-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; font-size: 17px; }
.notification-channel-icon-wechat { color: #1aad19; background: #eaf8e8; }
.notification-channel-icon-email { color: #8062ca; background: #f2edff; }
.notification-heading-icon { color: #347fdb; background: #eef5ff; font-size: 14px; }
.notification-card-heading-row { padding-right: 18px; }
.notification-live-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 3px; color: #2878f0; background: #edf5ff; font-size: 11px; white-space: nowrap; }
.notification-binding-body { padding: 20px 22px; }
.notification-bound-summary { display: flex; min-height: 68px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #eef0f2; border-radius: 4px; background: #fafbfc; }
.notification-bound-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 9px; color: #1aad19; background: #eaf8e8; font-size: 18px; }
.notification-bound-summary > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.notification-bound-summary strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.notification-bound-summary small { overflow: hidden; color: #9ba2a8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.notification-outline-button { height: 32px; padding: 0 12px; border: 1px solid #b9d1f4; border-radius: 3px; color: #2878f0; background: #fff; font-size: 12px; white-space: nowrap; }
.notification-outline-button:hover { background: #f3f8ff; }
.notification-placeholder { display: flex; min-height: 112px; align-items: center; flex-direction: column; justify-content: center; gap: 4px; margin-top: 12px; border: 1px dashed #dfe5eb; border-radius: 4px; color: #9ba2a8; background: #fcfdfe; text-align: center; }
.notification-placeholder i { color: #8fb3e9; font-size: 25px; }
.notification-placeholder strong { color: #69737b; font-size: 13px; font-weight: 500; }
.notification-placeholder span { font-size: 11px; }
.notification-email-field { display: flex; max-width: 660px; flex-direction: column; gap: 6px; }
.notification-email-field > span { color: #4e555b; font-size: 12px; font-weight: 500; }
.notification-email-field input { width: 100%; height: 37px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; font-size: 12px; }
.notification-email-field input:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.notification-email-field input::placeholder { color: #b2b8bd; }
.notification-email-field small { color: #9ba2a8; font-size: 11px; }
.notification-event-list { padding: 0 22px; }
.notification-event-row { display: flex; min-height: 76px; align-items: center; gap: 14px; border-bottom: 1px solid #f0f2f4; cursor: pointer; }
.notification-event-row:last-child { border-bottom: 0; }
.notification-event-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 9px; color: #477fca; background: #eef5ff; font-size: 14px; }
.notification-event-row:nth-child(2) .notification-event-icon { color: #dc9841; background: #fff6e9; }
.notification-event-row:nth-child(3) .notification-event-icon { color: #20a072; background: #eaf8f2; }
.notification-event-row:nth-child(4) .notification-event-icon { color: #8062ca; background: #f2edff; }
.notification-event-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.notification-event-copy strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.notification-event-copy small { color: #9ba2a8; font-size: 11px; }
.notification-switch { display: inline-flex; align-items: center; gap: 8px; color: #748087; font-size: 11px; }
.notification-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.notification-switch i { position: relative; display: block; width: 34px; height: 19px; border-radius: 12px; background: #c8cdd1; transition: background .15s ease; }
.notification-switch i::after { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .16); content: ""; transition: transform .15s ease; }
.notification-switch input:checked + i { background: var(--blue); }
.notification-switch input:checked + i::after { transform: translateX(15px); }
.notification-switch input:focus-visible + i { outline: 2px solid #8eb7f2; outline-offset: 2px; }
.notification-settings-footer { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.notification-settings-footer > span { color: #929aa1; font-size: 11px; }
.notification-settings-footer > span i { margin-right: 4px; color: #9aabbc; }
.notification-save-button { display: inline-flex; min-width: 116px; height: 37px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-size: 13px; }
.notification-save-button:hover { background: var(--blue-deep); }

@media (max-width: 600px) {
    .notification-heading { min-height: 73px; }
    .notification-heading h1 { font-size: 18px; }
    .notification-heading p { max-width: 280px; line-height: 1.6; }
    .notification-state { display: none; }
    .notification-card-heading { min-height: 64px; padding: 0 13px; }
    .notification-card-heading-row { padding-right: 12px; }
    .notification-binding-body { padding: 14px; }
    .notification-event-list { padding: 0 14px; }
    .notification-event-row { gap: 9px; padding: 13px 0; }
    .notification-event-icon { width: 32px; height: 32px; flex-basis: 32px; }
    .notification-switch b { display: none; }
    .notification-settings-footer { align-items: flex-start; flex-direction: column; }
    .notification-save-button { width: 100%; }
}

.customer-panel { position: fixed; z-index: 40; top: 75px; right: 70px; display: flex; width: min(880px, calc(100vw - 90px)); height: min(670px, calc(100vh - 16px)); height: min(670px, calc(100dvh - 16px)); flex-direction: column; overflow: hidden; border: 2px solid #ff4d54; border-radius: 7px; background: #fff; box-shadow: 0 4px 18px rgba(28, 39, 49, .22); visibility: hidden; transform: scale(.98) translateY(8px); transform-origin: top right; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.customer-panel.is-open { visibility: visible; transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.customer-header { display: grid; min-height: 46px; grid-template-columns: 1fr auto 1fr 40px; align-items: center; gap: 12px; padding: 0 15px 0 17px; color: #fff; background: #ff4d54; }
.customer-header h2 { display: flex; align-items: center; gap: 4px; margin: 0; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; }
.customer-header h2 span { padding: 1px 3px; border: 1px solid rgba(255, 244, 174, .8); border-radius: 2px; color: #fff4a7; font-size: 10px; line-height: 1.1; }
.customer-back, .customer-progress, .customer-close { padding: 0; border: 0; color: #fff; background: transparent; }
.customer-back { display: inline-flex; align-items: center; justify-self: start; gap: 5px; font-size: 13px; }
.customer-back i { font-size: 13px; }
.customer-progress { display: inline-flex; align-items: center; justify-self: end; gap: 5px; font-size: 12px; }
.customer-progress i { font-size: 13px; }
.customer-close { display: grid; width: 18px; height: 18px; place-items: center; justify-self: end; border-radius: 50%; background: #fff; color: #ff4d54; font-size: 10px; }
.customer-body { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(0, 1fr) 194px; background: #f8f8f8; }
.customer-conversation { min-width: 0; overflow-y: auto; padding: 24px 22px 30px; scrollbar-color: #d5d8da transparent; scrollbar-width: thin; }
.customer-message-meta { margin-bottom: 10px; color: #aeb4ba; font-size: 12px; text-align: center; }
.customer-message-row { display: flex; align-items: flex-start; gap: 12px; }
.customer-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; }
.customer-message-content { min-width: 0; max-width: min(520px, calc(100% - 60px)); }
.customer-sender { display: block; margin: 1px 0 6px; color: #8d949b; font-size: 13px; }
.customer-message-bubble { padding: 13px 15px 12px; border-radius: 0 5px 5px 5px; color: #2365c0; background: #fff; box-shadow: 0 1px 2px rgba(42, 47, 52, .035); font-size: 13px; line-height: 1.55; }
.customer-message-bubble p { margin: 0 0 2px; color: #39444f; }
.customer-message-bubble button { display: block; max-width: 100%; overflow: hidden; padding: 0; border: 0; color: #2365c0; background: transparent; font-size: 13px; line-height: 1.55; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.customer-message-bubble button:hover { color: #f04d53; }
.customer-tools { overflow-y: auto; padding: 15px 14px 20px; border-left: 1px solid #e1e2e3; background: #fff; scrollbar-width: thin; }
.customer-tools h3 { margin: 0 0 13px; color: #3d464d; font-size: 15px; font-weight: 500; }
.customer-tools button { display: block; width: 100%; overflow: hidden; padding: 0; border: 0; color: #67717a; background: transparent; font-size: 13px; line-height: 2.75; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.customer-tools button::before { display: inline-block; width: 8px; color: #c4c9ce; content: "•"; }
.customer-tools button:hover { color: #f04d53; }
.customer-compose { position: relative; min-height: 163px; padding: 10px 18px 13px; border-top: 1px solid #e3e4e5; background: #fff; }
.customer-suggestions { display: flex; gap: 9px; min-height: 29px; align-items: center; }
.customer-suggestions button { min-height: 25px; padding: 0 11px; border: 1px solid #d5d8da; border-radius: 13px; color: #737b82; background: #fff; font-size: 12px; }
.customer-suggestions button:hover { border-color: #ff9a9e; color: #f04d53; }
.customer-compose-tools { display: flex; align-items: center; gap: 15px; margin-top: 6px; }
.customer-compose-tools button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: #3478d0; background: transparent; font-size: 13px; }
.customer-compose-tools button:hover { color: #f04d53; }
.customer-compose-tools span { font-size: 14px; }
.customer-compose textarea { display: block; width: calc(100% - 84px); height: 54px; margin-top: 5px; padding: 4px 2px; border: 0; outline: 0; color: #4d565e; background: transparent; font-size: 13px; line-height: 1.5; resize: none; }
.customer-compose textarea::placeholder { color: #adb3b8; }
.customer-send { position: absolute; right: 18px; bottom: 18px; width: 66px; height: 35px; border: 0; border-radius: 4px; color: #fff; background: #ff4d54; font-size: 13px; }
.customer-send:hover { background: #ed3f47; }
.quick-tools button[data-tool-panel="customer"].is-active { color: #f04a50; background: #fff6f6; }

.butler-panel { position: fixed; z-index: 40; top: 75px; right: 70px; display: flex; width: min(880px, calc(100vw - 90px)); height: min(670px, calc(100vh - 16px)); height: min(670px, calc(100dvh - 16px)); flex-direction: column; overflow: hidden; border: 2px solid #ff4b52; border-radius: 7px; background: #fff; box-shadow: 0 4px 18px rgba(28, 39, 49, .22); visibility: hidden; transform: translateX(18px); transform-origin: top right; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.butler-panel.is-open { visibility: visible; transform: translateX(0); opacity: 1; pointer-events: auto; }
.butler-header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 17px 0 19px; color: #fff; background: #ff4b52; }
.butler-header h2 { margin: 0; color: inherit; font-size: 17px; font-weight: 500; line-height: 1.4; }
.butler-header-actions { display: flex; align-items: center; gap: 12px; }
.butler-header-action { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 12px; white-space: nowrap; }
.butler-header-action i { font-size: 14px; }
.butler-header-actions > i, .butler-footer > i { width: 1px; height: 17px; background: rgba(255, 255, 255, .45); }
.butler-close { display: grid; width: 17px; height: 17px; flex: 0 0 17px; margin-left: 5px; place-items: center; border: 0; border-radius: 50%; color: #ff4b52; background: #fff; font-size: 10px; }
.butler-search-wrap { padding: 4px 19px 7px; background: #ff4b52; }
.butler-search { display: flex; height: 30px; align-items: center; gap: 9px; padding: 0 13px; border-radius: 18px; color: #a5a9ad; background: #fff; }
.butler-search > i { font-size: 12px; }
.butler-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: #4f555b; background: transparent; font-size: 13px; }
.butler-search input::placeholder { color: #a1a6ab; }
.butler-hot-topics { display: flex; min-height: 43px; align-items: center; gap: 8px; overflow-x: auto; padding: 0 18px 8px; background: #ff4b52; scrollbar-width: none; }
.butler-hot-topics::-webkit-scrollbar { display: none; }
.butler-hot-topics button { flex: 0 0 auto; min-height: 26px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 15px; color: #fff; background: rgba(255, 255, 255, .16); font-size: 12px; line-height: 1.2; }
.butler-hot-topics button:hover, .butler-hot-topics button.is-active { background: rgba(255, 255, 255, .27); }
.butler-content { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; background: #fff; }
.butler-self-service, .butler-faq-section { flex: 0 0 auto; padding: 12px 19px 0; }
.butler-self-service h3, .butler-faq-section h3 { margin: 0 0 8px; color: #353a3e; font-size: 17px; font-weight: 500; line-height: 1.5; }
.butler-service-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.butler-service-links button { display: flex; min-width: 0; height: 36px; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border: 1px solid #c9cacc; border-radius: 4px; color: #666a6d; background: #fff; font-size: 12px; white-space: nowrap; }
.butler-service-links button:hover { border-color: #ff686d; color: #f04a50; background: #fffafa; }
.butler-service-links button i { font-size: 13px; }
.butler-faq-section { min-height: 0; flex: 1; overflow: hidden; padding-top: 12px; padding-bottom: 52px; }
.butler-faq-section h3 { margin-bottom: 8px; }
.butler-faq-list { height: calc(100% - 32px); overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-color: #96999b #f2f2f2; scrollbar-width: thin; }
.butler-faq-list::-webkit-scrollbar { width: 8px; }
.butler-faq-list::-webkit-scrollbar-track { border-radius: 6px; background: #f2f2f2; }
.butler-faq-list::-webkit-scrollbar-thumb { border-radius: 6px; background: #96999b; }
.butler-faq-list li { position: relative; display: flex; min-height: 43px; align-items: center; padding: 0 7px 0 11px; border-bottom: 1px solid #eff0f1; }
.butler-faq-list li::before { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #d9dcde; content: ""; transform: translateY(-50%); }
.butler-faq-list li[hidden] { display: none; }
.butler-faq-list li button { width: 100%; overflow: hidden; padding: 0; border: 0; color: #4d5256; background: transparent; font-size: 14px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.butler-faq-list li button:hover { color: #f04a50; }
.butler-faq-list .butler-no-results { justify-content: center; border-bottom: 0; color: #9ba1a6; font-size: 13px; }
.butler-faq-list .butler-no-results::before { display: none; }
.butler-footer { position: absolute; right: 0; bottom: 0; left: 0; display: flex; width: max-content; min-height: 36px; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 26px; padding: 0 17px; border-radius: 20px; background: #ff4b52; box-shadow: 0 3px 12px rgba(0, 0, 0, .17); }
.butler-footer button { padding: 0; border: 0; color: #fff; background: transparent; font-size: 13px; white-space: nowrap; }
.butler-footer > i { height: 14px; }
.quick-tools button[data-tool-panel="butler"].is-active { color: #f04a50; background: #fff6f6; }
@media (max-width: 520px) {
    .customer-panel { top: 0; right: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
    .customer-header { grid-template-columns: auto 1fr auto; padding-right: 12px; padding-left: 14px; }
    .customer-header h2 { justify-self: center; font-size: 15px; }
    .customer-back { font-size: 12px; }
    .customer-progress { display: none; }
    .customer-body { grid-template-columns: minmax(0, 1fr) 150px; }
    .customer-conversation { padding-right: 13px; padding-left: 13px; }
    .customer-tools { padding-right: 10px; padding-left: 10px; }
    .customer-message-content { max-width: calc(100% - 57px); }
    .customer-compose { padding-right: 13px; padding-left: 13px; }
    .customer-send { right: 13px; }

    .butler-header-actions { gap: 8px; }
    .butler-header-action { gap: 4px; font-size: 11px; }
    .butler-search-wrap { padding-right: 12px; padding-left: 12px; }
    .butler-hot-topics { padding-right: 12px; padding-left: 12px; }
    .butler-self-service, .butler-faq-section { padding-right: 12px; padding-left: 12px; }
    .butler-self-service h3, .butler-faq-section h3 { font-size: 16px; }
    .butler-service-links { gap: 6px; }
    .butler-service-links button { gap: 4px; padding: 0 3px; font-size: 11px; }
    .butler-faq-list li button { font-size: 13px; }
}

.publish-subsection-heading { display: flex; min-height: 56px; align-items: center; gap: 10px; border-bottom: 1px solid #f0f2f4; }
.publish-subsection-heading strong { color: #4e555b; font-size: 13px; font-weight: 600; }
.publish-subsection-heading > span { color: #9ba2a8; font-size: 11px; }
.publish-outline-button { display: inline-flex; height: 31px; align-items: center; gap: 5px; margin-left: auto; padding: 0 11px; border: 1px solid #b9d1f4; border-radius: 3px; color: var(--blue); background: #fff; font-size: 11px; }
.publish-outline-button:hover, .publish-add-row:hover { background: var(--blue-soft); }
.publish-spec-table-wrap, .publish-discount-table-wrap { overflow-x: auto; }
.publish-spec-table, .publish-discount-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.publish-spec-table th, .publish-discount-table th { height: 39px; padding: 0 10px; border-bottom: 1px solid #e9ecef; color: #707880; background: #f8f9fa; font-size: 11px; font-weight: 500; text-align: left; white-space: nowrap; }
.publish-spec-table td, .publish-discount-table td { height: 57px; padding: 8px 10px; border-bottom: 1px solid #f0f2f4; color: #667078; font-size: 11px; }
.publish-spec-table tr:last-child td, .publish-discount-table tr:last-child td { border-bottom: 0; }
.publish-spec-table td:nth-child(1) { width: 24%; }
.publish-spec-table td:nth-child(2) { width: 25%; }
.publish-spec-table td:nth-child(3), .publish-spec-table td:nth-child(4) { width: 18%; }
.publish-spec-table input, .publish-discount-table input { height: 33px; padding: 0 9px; font-size: 11px; }
.publish-number-input, .publish-unit-input { display: flex; align-items: center; }
.publish-number-input span, .publish-unit-input span { display: grid; height: 33px; place-items: center; padding: 0 8px; border: 1px solid #dfe3e7; border-right: 0; color: #929aa1; background: #f8f9fa; font-size: 11px; }
.publish-number-input input, .publish-unit-input input { border-radius: 0 3px 3px 0; }
.publish-table-remove { padding: 0; border: 0; color: #d47770; background: transparent; font-size: 11px; }
.publish-table-remove:hover { color: #c64d45; }
.publish-inventory-summary { display: flex; min-height: 42px; align-items: center; gap: 25px; padding: 0 10px; border-top: 1px solid #f0f2f4; color: #8b949b; font-size: 11px; }
.publish-inventory-summary i { margin-right: 3px; color: #7ea5d8; }
.publish-inventory-summary strong { color: #56616a; font-weight: 500; }
.publish-discount-block { margin: 14px 0 20px; border: 1px solid #edf0f2; border-radius: 3px; }
.publish-discount-block .publish-subsection-heading { min-height: 51px; padding: 0 12px; background: #fafbfc; }
.publish-discount-block .publish-discount-table-wrap { padding: 0 10px; }
.publish-discount-result { color: #8a9299 !important; }
.publish-add-row { display: inline-flex; height: 30px; align-items: center; gap: 5px; margin: 4px 10px 10px; padding: 0 9px; border: 0; border-radius: 3px; color: var(--blue); background: transparent; font-size: 11px; }
.publish-switch { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #7e878e; font-size: 11px; cursor: pointer; }
.publish-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.publish-switch i { position: relative; display: block; width: 31px; height: 18px; border-radius: 10px; background: #c8cdd1; transition: background .15s ease; }
.publish-switch i::after { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); content: ""; transition: transform .15s ease; }
.publish-switch input:checked + i { background: var(--blue); }
.publish-switch input:checked + i::after { transform: translateX(13px); }
.publish-commitment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 0 17px; }
.publish-commitment-card { position: relative; display: flex; min-height: 112px; align-items: flex-start; gap: 10px; padding: 15px 28px 13px 13px; border: 1px solid #e2e6e9; border-radius: 4px; background: #fff; cursor: pointer; }
.publish-commitment-card:hover, .publish-commitment-card.is-enabled { border-color: #acd0fa; background: #f8fbff; }
.publish-commitment-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 8px; color: #4b89da; background: #edf5ff; font-size: 15px; }
.publish-commitment-card:nth-child(2) .publish-commitment-icon { color: #20a072; background: #eaf8f2; }
.publish-commitment-card:nth-child(3) .publish-commitment-icon { color: #d58c35; background: #fff5e6; }
.publish-commitment-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.publish-commitment-copy strong { color: #4c555c; font-size: 12px; font-weight: 600; }
.publish-commitment-copy small { color: #929ba2; font-size: 10px; line-height: 1.6; }
.publish-commitment-check { position: absolute; top: 11px; right: 11px; color: #c3cbd1; font-size: 13px; }
.publish-commitment-card.is-enabled .publish-commitment-check { color: var(--blue); }
.publish-notice { display: flex; min-height: 35px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid; border-radius: 3px; font-size: 11px; }
.publish-notice-info { margin-bottom: 20px; border-color: #dbe9f8; color: #6c7884; background: #f4f8fd; }
.publish-notice-info i { color: #6b9cdb; }
.publish-notice-warning { border-color: #f0ddb3; color: #806829; background: #fff9eb; }
.publish-notice-warning i { color: #eeab25; }
.publish-gate { display: grid; gap: 8px; margin-bottom: 14px; }
.publish-gate-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #f3d7b0; border-radius: 10px; background: #fff8ee; }
.publish-gate-item > i { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #b7791f; background: #ffefd2; font-size: 13px; }
.publish-gate-item span { flex: 1; color: #7a5b24; font-size: 13px; line-height: 1.6; }
.publish-gate-item a { display: inline-flex; flex: none; align-items: center; gap: 3px; color: #2878f0; font-size: 13px; font-weight: 600; }
.publish-submit-button:disabled { cursor: not-allowed; opacity: .45; }
.publish-delivery-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 0 17px; }
.publish-delivery-option { position: relative; display: flex; min-height: 91px; align-items: flex-start; gap: 10px; padding: 14px 28px 12px 14px; border: 1px solid #e2e6e9; border-radius: 4px; cursor: pointer; }
.publish-delivery-option:hover, .publish-delivery-option.is-selected { border-color: #acd0fa; background: #f8fbff; }
.publish-delivery-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #4b89da; background: #edf5ff; font-size: 15px; }
.publish-delivery-icon-orange { color: #d58c35; background: #fff5e6; }
.publish-delivery-icon-green { color: #20a072; background: #eaf8f2; }
.publish-delivery-option > span:nth-child(3) { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.publish-delivery-option strong { color: #4c555c; font-size: 12px; font-weight: 600; }
.publish-delivery-option small { color: #929ba2; font-size: 10px; line-height: 1.6; }
.publish-delivery-check { position: absolute; top: 11px; right: 11px; color: #c3cbd1; font-size: 13px; }
.publish-delivery-option.is-selected .publish-delivery-check { color: var(--blue); }
.publish-delivery-settings { padding-bottom: 20px; }
.publish-delivery-settings[hidden] { display: none; }
.publish-delivery-settings .publish-field { max-width: none; }
.publish-delivery-settings .publish-field textarea { min-height: 91px; }
.publish-ship-promise { margin: 0; border: 0; padding: 0; }
.publish-ship-promise legend { margin-bottom: 10px; color: #4c555c; font-size: 12px; font-weight: 600; }
.publish-ship-promise-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.publish-ship-promise-options label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid #e2e6e9; border-radius: 4px; color: #4c555c; font-size: 12px; cursor: pointer; }
.publish-ship-promise-options label:hover, .publish-ship-promise-options label.is-selected { border-color: #acd0fa; color: var(--blue); background: #f8fbff; }
.publish-ship-promise-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.publish-ship-promise small { display: block; margin: 8px 0 14px; color: #929ba2; font-size: 11px; line-height: 1.6; }

.product-publish-page { width: min(100%, 1380px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.publish-page-heading { display: flex; min-height: 94px; align-items: center; justify-content: space-between; }
.publish-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #9aa1a7; font-size: 12px; }
.publish-breadcrumb a:hover { color: var(--blue); }
.publish-breadcrumb i { color: #bdc2c7; font-size: 10px; }
.publish-breadcrumb strong { color: #596168; font-weight: 500; }
.publish-page-heading h1 { margin: 0; color: #343a40; font-size: 22px; font-weight: 600; line-height: 1.25; }
.publish-page-heading p { margin: 5px 0 0; color: #9299a0; font-size: 12px; }
.publish-draft-state { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #d8e5f8; border-radius: 3px; color: #4a7cb9; background: #f4f8ff; font-size: 12px; }
.product-publish-form { display: flex; flex-direction: column; gap: 12px; }
.publish-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 12px; align-items: start; }
.publish-main-column { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.publish-side-column { position: sticky; top: calc(var(--header) + 14px); display: flex; min-width: 0; max-height: calc(100vh - var(--header) - 28px); flex-direction: column; gap: 12px; overflow: auto; }
.publish-section-card, .publish-anchor-card, .publish-preview-card { overflow: hidden; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 49, .025); }
.publish-section-heading { display: flex; min-height: 70px; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #eef0f2; }
.publish-section-heading > div { min-width: 0; flex: 1; }
.publish-section-index { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 13px; font-weight: 600; }
.publish-section-heading h2 { margin: 0; color: #3e454b; font-size: 15px; font-weight: 600; }
.publish-section-heading p { margin: 3px 0 0; color: #969da3; font-size: 11px; }
.publish-required-tip, .publish-optional-tip { padding: 4px 7px; border-radius: 3px; color: #d26c62; background: #fff1ef; font-size: 10px; }
.publish-optional-tip { color: #889198; background: #f2f4f6; }
.publish-section-body { padding: 0 22px; }
.publish-form-row { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid #f0f2f4; }
.publish-section-body > .publish-form-row:last-child { border-bottom: 0; }
.publish-field-label { display: flex; flex-direction: column; gap: 4px; }
.publish-field-label strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.publish-field-label strong em, .publish-field > span em, .publish-spec-table th em { color: #ee655d; font-style: normal; }
.publish-field-label small, .publish-field > small { color: #9ba2a8; font-size: 11px; }
.publish-field-control, .publish-field { display: flex; max-width: 690px; flex-direction: column; gap: 6px; }
.publish-field input, .publish-field select, .publish-field textarea, .publish-field-control input, .publish-detail-editor textarea, .publish-spec-table input, .publish-discount-table input { width: 100%; min-width: 0; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; font-size: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.publish-field input, .publish-field select, .publish-field-control input { height: 37px; padding: 0 11px; }
.publish-field textarea, .publish-detail-editor textarea { min-height: 96px; padding: 9px 11px; resize: vertical; }
.publish-field input:focus, .publish-field select:focus, .publish-field textarea:focus, .publish-field-control input:focus, .publish-detail-editor textarea:focus, .publish-spec-table input:focus, .publish-discount-table input:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.publish-field input::placeholder, .publish-field textarea::placeholder, .publish-field-control input::placeholder, .publish-detail-editor textarea::placeholder, .publish-spec-table input::placeholder { color: #b2b8bd; }
.publish-category-body { padding-top: 19px; padding-bottom: 19px; }
.publish-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.publish-category-path { display: flex; min-height: 38px; align-items: center; gap: 8px; margin-top: 16px; padding: 0 11px; border: 1px solid #e7eef8; border-radius: 3px; color: #8a949c; background: #f7faff; font-size: 11px; }
.publish-category-path > i:first-child { color: #5b91d7; }
.publish-category-path > i { color: #b3bdc6; font-size: 10px; }
.publish-category-path strong { color: #4f6e97; font-weight: 500; }
.publish-category-path small { margin-left: auto; color: #9ba6b0; }
.publish-image-row { align-items: start; }
.publish-image-area { display: flex; max-width: 690px; flex-direction: column; gap: 8px; }
.publish-image-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.publish-image-upload { display: flex; width: 108px; height: 108px; align-items: center; flex-direction: column; justify-content: center; gap: 5px; border: 1px dashed #b8cde9; border-radius: 4px; color: #548bd0; background: #f8fbff; cursor: pointer; }
.publish-image-upload:hover { border-color: var(--blue); background: #f1f7ff; }
.publish-image-upload > i { font-size: 22px; }
.publish-image-upload strong { font-size: 12px; font-weight: 500; }
.publish-image-upload small { color: #9eabb7; font-size: 10px; }
.publish-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
.publish-image-preview { position: relative; width: 108px; height: 108px; overflow: hidden; border: 1px solid #dfe5eb; border-radius: 4px; background: #f5f7f9; }
.publish-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.publish-image-preview button { position: absolute; top: 5px; right: 5px; display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(35, 43, 50, .62); font-size: 10px; }
.publish-helper-text { color: #9ba2a8; font-size: 11px; }
.publish-helper-text i { margin-right: 4px; color: #90afd2; }
.publish-character-count { align-self: flex-end; }
.publish-attribute-row { align-items: start; }
.publish-attribute-content { display: flex; max-width: 690px; flex-direction: column; gap: 15px; }
.publish-attribute-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.publish-attribute-tags label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #dfe3e7; border-radius: 3px; color: #69737b; background: #fff; font-size: 11px; cursor: pointer; }
.publish-attribute-tags label:has(input:checked) { border-color: #bad2f5; color: #397aca; background: #f3f8ff; }
.publish-attribute-tags input, .publish-commitment-card > input, .publish-delivery-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.publish-attribute-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 15px; }
.publish-detail-row { align-items: start; border-bottom: 0; }
.publish-detail-editor { max-width: 690px; overflow: hidden; border: 1px solid #dfe3e7; border-radius: 3px; }
.publish-editor-toolbar { display: flex; height: 38px; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid #eef0f2; background: #fafbfc; }
.publish-editor-toolbar button { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 3px; color: #69737b; background: transparent; font-size: 12px; }
.publish-editor-toolbar button:hover { color: var(--blue); background: var(--blue-soft); }
.publish-editor-toolbar span { margin-left: 8px; color: #9ba2a8; font-size: 11px; }
.publish-detail-editor textarea { display: block; min-height: 142px; border: 0; border-radius: 0; box-shadow: none; }
.publish-detail-editor textarea:focus { box-shadow: none; }

.publish-anchor-card { flex: 0 0 auto; }
.publish-anchor-heading, .publish-side-card-heading { display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #eef0f2; }
.publish-anchor-heading strong, .publish-side-card-heading strong { color: #4b535a; font-size: 13px; font-weight: 600; }
.publish-anchor-heading span { color: #9aa2a8; font-size: 11px; }
.publish-anchor-nav { padding: 8px 0; }
.publish-anchor-nav a { position: relative; display: flex; min-height: 55px; align-items: center; gap: 10px; padding: 0 15px; color: #818a91; }
.publish-anchor-nav a::before { position: absolute; top: 39px; left: 24px; width: 1px; height: 17px; background: #e5e9ed; content: ""; }
.publish-anchor-nav a:last-child::before { display: none; }
.publish-anchor-nav a:hover, .publish-anchor-nav a.is-active { color: var(--blue); background: #f7faff; }
.publish-anchor-nav a > span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #d6dde4; border-radius: 50%; color: #89939b; background: #fff; font-size: 10px; }
.publish-anchor-nav a.is-active > span { border-color: var(--blue); color: #fff; background: var(--blue); }
.publish-anchor-nav a > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.publish-anchor-nav strong { color: inherit; font-size: 12px; font-weight: 500; }
.publish-anchor-nav small { color: #a0a8ae; font-size: 10px; }
.publish-side-card-heading button { padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 11px; }
.publish-preview-thumb { display: flex; min-height: 86px; align-items: center; gap: 10px; margin: 13px 15px; padding: 0 11px; border: 1px solid #e5eaf0; border-radius: 3px; color: #6592c8; background: linear-gradient(135deg, #f2f7ff, #e8f0fb); }
.publish-preview-thumb i { font-size: 25px; }
.publish-preview-thumb span { overflow: hidden; color: #526d8f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.publish-preview-meta { display: flex; min-height: 31px; align-items: center; justify-content: space-between; padding: 0 15px; color: #929aa1; font-size: 11px; }
.publish-preview-meta strong { color: #59636b; font-weight: 500; }
.publish-preview-meta:last-child { margin-bottom: 11px; }
.publish-preview-phone { overflow: hidden; margin: 12px; border: 1px solid #e7edf4; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(40, 68, 110, .08); }
.publish-preview-cover { position: relative; display: grid; height: 168px; place-items: center; overflow: hidden; background: linear-gradient(180deg, #edf4ff 0%, #f7f9fc 100%); }
.publish-preview-cover img { width: 100%; height: 100%; object-fit: cover; }
.publish-preview-cover-empty { display: grid; gap: 8px; place-items: center; color: #8aa0bd; font-size: 12px; }
.publish-preview-cover-empty i { font-size: 28px; }
.publish-preview-badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 999px; color: #fff; background: rgba(32, 84, 176, .86); font-size: 10px; }
.publish-preview-body { display: grid; gap: 8px; padding: 12px 13px 14px; }
.publish-preview-body > strong { overflow: hidden; color: #243241; font-size: 14px; line-height: 1.45; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.publish-preview-price { color: #e4554c; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.publish-preview-shop { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #6b7785; font-size: 11px; }
.publish-preview-shop small { overflow: hidden; color: #93a0ab; text-overflow: ellipsis; white-space: nowrap; }
.publish-preview-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 18px; }
.publish-preview-chips em { padding: 3px 7px; border-radius: 999px; color: #3d7ad4; background: #eef5ff; font-size: 10px; font-style: normal; }
.publish-preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.publish-preview-stats div { padding: 8px 10px; border-radius: 8px; background: #f6f8fb; }
.publish-preview-stats dt { color: #93a0ab; font-size: 10px; }
.publish-preview-stats dd { margin: 3px 0 0; color: #3d4650; font-size: 12px; font-weight: 600; }
.publish-preview-sheet { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; }
.publish-preview-sheet[hidden] { display: none; }
.publish-preview-sheet-backdrop { position: absolute; inset: 0; background: rgba(18, 28, 41, .46); backdrop-filter: blur(8px); }
.publish-preview-sheet-dialog { position: relative; z-index: 1; width: min(420px, calc(100vw - 48px)); overflow: hidden; border: 1px solid #dce7f5; border-radius: 18px; background: #fff; box-shadow: 0 28px 64px rgba(24, 46, 78, .28); }
.publish-preview-sheet-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.publish-preview-sheet-heading small { color: #8aa0bd; font-size: 11px; }
.publish-preview-sheet-heading h2 { margin: 4px 0 0; color: #1f2a37; font-size: 18px; }
.publish-preview-sheet-heading button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; color: #8aa0bd; background: #f5f8fc; }
.publish-preview-sheet-body { padding: 0 18px 18px; }
.publish-preview-sheet-body .publish-preview-phone { margin: 0; }
body.publish-preview-open { overflow: hidden; }
.publish-discount-block.is-disabled .publish-discount-table-wrap,
.publish-discount-block.is-disabled .publish-add-row { opacity: .45; pointer-events: none; }
.product-category-child { color: #5d666d; }
.product-pagination a { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dfe3e7; border-radius: 2px; color: #737b82; background: #fff; font-size: 11px; }
.product-pagination a:hover { border-color: #a6c8f4; color: var(--blue); background: var(--blue-soft); }
.product-thumb img, img.product-thumb { width: 66px; height: 66px; object-fit: cover; border: 1px solid #dce2e8; border-radius: 2px; }
.product-tab-actions a { color: #727980; font-size: 12px; }
.product-tab-actions a:hover { color: var(--blue); }
.product-actions .table-action { padding: 0; border: 0; color: #337fe9; background: transparent; font-size: 11px; text-align: left; }
.product-action-bar .cards-inline-form { display: inline-flex; align-items: center; gap: 9px; }
.publish-side-tip { display: flex; align-items: flex-start; gap: 9px; padding: 13px; border: 1px solid #f1dfb5; border-radius: 4px; color: #94722f; background: #fffaf0; }
.publish-side-tip > i { margin-top: 2px; color: #e5a52a; font-size: 15px; }
.publish-side-tip strong { font-size: 12px; font-weight: 600; }
.publish-side-tip p { margin: 4px 0 0; color: #a18b5a; font-size: 10px; line-height: 1.7; }
.publish-form-footer { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.publish-form-footer > span { color: #929aa1; font-size: 11px; }
.publish-form-footer > span i { margin-right: 4px; color: #8ea9c9; }
.publish-form-footer > div { display: flex; align-items: center; gap: 8px; }
.publish-form-footer .publish-cancel-button,
.publish-form-footer .publish-draft-button,
.publish-form-footer .publish-submit-button { display: inline-flex; min-width: 72px; height: 36px; align-items: center; justify-content: center; padding: 0 16px; border-radius: 3px; font-size: 12px; line-height: 1; text-align: center; text-decoration: none; box-sizing: border-box; white-space: nowrap; }
.publish-form-footer .publish-cancel-button { border: 1px solid #dfe3e7; color: #5d666d; background: #fff; }
.publish-form-footer .publish-draft-button { border: 1px solid #b9d1f4; color: var(--blue); background: #fff; }
.publish-form-footer .publish-submit-button { border: 0; color: #fff; background: var(--blue); }
.publish-form-footer .publish-cancel-button:hover, .publish-form-footer .publish-draft-button:hover { background: var(--blue-soft); }
.publish-form-footer .publish-submit-button:hover { background: var(--blue-deep); }
@media (max-width: 1000px) {
    .publish-layout { grid-template-columns: minmax(0, 1fr); }
    .publish-side-column { position: static; display: grid; max-height: none; grid-template-columns: 1fr 1fr; align-items: start; overflow: visible; }
    .publish-side-tip { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .publish-page-heading { min-height: 83px; }
    .publish-draft-state { display: none; }
    .publish-section-heading { padding: 0 13px; }
    .publish-section-body { padding: 0 14px; }
    .publish-form-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
    .publish-field-control, .publish-field, .publish-image-area, .publish-attribute-content, .publish-detail-editor { max-width: none; }
    .publish-category-body { padding-top: 14px; padding-bottom: 14px; }
    .publish-field-grid, .publish-attribute-grid, .publish-commitment-grid, .publish-delivery-options, .publish-ship-promise-options { grid-template-columns: 1fr; }
    .publish-category-path { align-items: flex-start; flex-wrap: wrap; padding: 9px 11px; }
    .publish-category-path small { width: 100%; margin-left: 0; }
    .publish-inventory-summary { flex-wrap: wrap; gap: 7px 18px; padding: 7px 10px; }
    .publish-discount-block { margin-bottom: 14px; }
    .publish-subsection-heading { flex-wrap: wrap; padding: 8px 0; }
    .publish-form-footer { align-items: flex-start; flex-direction: column; }
    .publish-form-footer > div { width: 100%; }
    .publish-cancel-button, .publish-draft-button, .publish-submit-button { flex: 1; padding: 0 8px; }
    .publish-side-column { display: flex; overflow: visible; }
}

.merchant-login-card { padding: 26px 39px 29px; border: 1px solid rgba(222, 229, 238, .95); border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 45px rgba(31, 54, 89, .11); }
.merchant-login-card-topline { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #f0f2f6; color: #51667f; font-size: 11px; }.merchant-login-card-topline span, .merchant-login-card-topline small { display: inline-flex; align-items: center; gap: 6px; }.merchant-login-card-topline span i { color: #347ee2; }.merchant-login-card-topline small { color: #a5afbd; }.merchant-login-card-topline small i { color: #6c9bdd; }
.merchant-login-card-heading { padding-top: 24px; text-align: center; }.merchant-login-card-heading h2 { margin: 0; color: #24364e; font-size: 28px; font-weight: 700; letter-spacing: -.5px; }.merchant-login-card-heading p { margin: 8px 0 16px; color: #9aa6b5; font-size: 12px; }
.merchant-login-notice { display: flex; align-items: center; gap: 7px; margin-bottom: 21px; padding: 9px 10px; border: 1px solid #dcecff; border-radius: 7px; color: #6484a8; background: #f5f9ff; font-size: 11px; }.merchant-login-notice i { color: #3d8df5; }
.merchant-login-tabs { display: flex; height: 42px; margin-bottom: 24px; border-bottom: 1px solid #edf0f4; }.merchant-login-tabs button { position: relative; flex: 1; border: 0; color: #98a3b1; background: transparent; font-size: 13px; }.merchant-login-tabs button.is-active { color: #2978e9; font-weight: 600; }.merchant-login-tabs button.is-active::after { position: absolute; right: 24px; bottom: -1px; left: 24px; height: 2px; border-radius: 2px; background: #2878f0; content: ""; }
.merchant-login-form { display: grid; gap: 16px; }.merchant-login-form.is-hidden, .merchant-scan-panel.is-hidden { display: none; }.merchant-login-field { display: grid; gap: 8px; color: #5d6b7d; font-size: 12px; font-weight: 500; }.merchant-login-input-wrap { display: flex; height: 46px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #dfe5ec; border-radius: 7px; color: #aeb8c3; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }.merchant-login-input-wrap:focus-within { border-color: #8fbaf5; background: #fcfdff; box-shadow: 0 0 0 3px rgba(40, 120, 240, .1); }.merchant-login-input-wrap > i { width: 15px; text-align: center; }.merchant-login-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: #3d4b5d; background: transparent; font-size: 13px; }.merchant-login-input-wrap input[type="password"]::-ms-reveal, .merchant-login-input-wrap input[type="password"]::-ms-clear { display: none; }.merchant-login-input-wrap input::-webkit-credentials-auto-fill-button, .merchant-login-input-wrap input::-webkit-strong-password-auto-fill-button { visibility: hidden; pointer-events: none; }.merchant-login-input-wrap input::placeholder { color: #b6bec8; }.merchant-password-toggle { display: grid; width: 22px; height: 25px; place-items: center; padding: 0; border: 0; color: #aeb8c3; background: transparent; }
.merchant-login-options { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 1px; color: #9aa5b2; font-size: 11px; }.merchant-login-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }.merchant-login-options input { width: 13px; height: 13px; margin: 0; accent-color: #2878f0; }.merchant-login-options a { color: #5b88c8; }.merchant-login-options a:hover, .merchant-login-register a:hover { color: #1d63d0; text-decoration: underline; }
.merchant-login-submit { display: flex; height: 46px; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(100deg, #3d8df5, #236de4); box-shadow: 0 9px 17px rgba(40, 120, 240, .23); font-size: 14px; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }.merchant-login-submit:hover { background: linear-gradient(100deg, #2e7fec, #1c61d4); box-shadow: 0 12px 21px rgba(40, 120, 240, .28); transform: translateY(-1px); }
.merchant-login-error { display: flex; align-items: center; gap: 8px; margin: -8px 0 16px; padding: 9px 11px; border: 1px solid #f5d3d0; border-radius: 6px; color: #ca5148; background: #fff5f4; font-size: 12px; }.merchant-login-error i { color: #e26057; }
.merchant-register-notice { display: flex; align-items: center; gap: 8px; margin: -8px 0 16px; padding: 9px 11px; border: 1px solid #cfe8dc; border-radius: 6px; color: #2f8a62; background: #f3fbf7; font-size: 12px; }
.merchant-register-channels { display: flex; gap: 16px; color: #5d6b7d; font-size: 12px; }.merchant-register-channels label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }.merchant-register-channels input { accent-color: #2878f0; }
.merchant-register-code { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }.merchant-register-code button { border: 1px solid #c9dbf4; border-radius: 7px; color: #2878f0; background: #f5f9ff; font-size: 12px; font-weight: 600; }.merchant-register-code button:disabled { color: #98a8bd; background: #f4f7fb; cursor: not-allowed; }
.merchant-scan-panel { display: flex; min-height: 246px; align-items: center; flex-direction: column; text-align: center; }.merchant-scan-code { display: grid; width: 142px; height: 142px; margin: 0 auto 8px; padding: 10px; place-items: center; border: 1px solid #e2e8f0; background: repeating-linear-gradient(45deg, #27384a 0 3px, #fff 3px 7px, #27384a 7px 9px, #fff 9px 14px); }.merchant-scan-code span { display: grid; width: 80px; height: 80px; place-items: center; color: #29394c; background: #fff; font-size: 37px; }.merchant-scan-status { margin-bottom: 8px; color: #46aa81; font-size: 10px; }.merchant-scan-status i { margin-right: 3px; font-size: 7px; }.merchant-scan-panel strong { color: #506075; font-size: 13px; font-weight: 500; }.merchant-scan-panel p { margin: 6px 0 11px; color: #9ba6b4; font-size: 11px; }.merchant-scan-refresh { padding: 0; border: 0; color: #347ee2; background: transparent; font-size: 11px; }.merchant-scan-refresh:hover { color: #165fc5; }
.merchant-login-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0 16px; color: #c4cbd3; font-size: 11px; }.merchant-login-divider::before, .merchant-login-divider::after { height: 1px; flex: 1; background: #edf0f4; content: ""; }.merchant-login-register { margin: 0; color: #9ba6b3; font-size: 12px; text-align: center; }.merchant-login-register a { color: #377fdc; }.merchant-login-trust { display: flex; justify-content: center; gap: 17px; margin-top: 22px; padding-top: 17px; border-top: 1px solid #f0f2f5; color: #a3adb9; font-size: 10px; }.merchant-login-trust span { display: inline-flex; align-items: center; gap: 4px; }.merchant-login-trust i { color: #7da9e6; }
.merchant-login-footer { padding: 0 24px 25px; color: #a5aeb9; font-size: 11px; text-align: center; }.merchant-login-footer nav { display: flex; justify-content: center; gap: 22px; margin-bottom: 7px; }.merchant-login-footer a:hover { color: #377fdc; }.merchant-login-footer p { margin: 0; }.merchant-login-toast { position: fixed; z-index: 10; bottom: 30px; left: 50%; padding: 10px 17px; border: 1px solid #c9ddf8; border-radius: 7px; color: #3475c5; background: #f4f8ff; box-shadow: 0 7px 20px rgba(48, 92, 155, .12); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .16s ease, transform .16s ease; }.merchant-login-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .merchant-login-main { grid-template-columns: 1fr; gap: 24px; padding-top: 26px; }.merchant-login-hero { min-height: 420px; }.merchant-login-hero-copy { min-height: 420px; padding: 42px; }.merchant-login-hero h1 { font-size: 58px; }.merchant-login-feature-list { max-width: 620px; }.merchant-login-card { width: min(440px, 100%); justify-self: center; } }
@media (max-width: 520px) { .merchant-login-header { height: 62px; padding: 0 18px; }.merchant-login-header-tools span { display: none; }.merchant-login-header-tools { gap: 0; }.merchant-login-main { width: calc(100% - 28px); padding: 14px 0 32px; }.merchant-login-hero { min-height: 430px; border-radius: 17px; }.merchant-login-hero-copy { min-height: 430px; padding: 28px 24px; }.merchant-login-hero-label { margin-bottom: 26px; font-size: 11px; }.merchant-login-eyebrow { margin-bottom: 15px; font-size: 11px; }.merchant-login-hero h1 { font-size: 43px; letter-spacing: 2px; }.merchant-login-hero-description { margin-top: 14px; font-size: 13px; }.merchant-login-feature-list { gap: 7px; margin-top: 25px; }.merchant-login-feature { min-height: 61px; flex-direction: column; justify-content: center; gap: 5px; padding: 7px 4px; text-align: center; }.merchant-login-feature-icon { width: 25px; height: 25px; flex-basis: 25px; }.merchant-login-feature strong { font-size: 10px; }.merchant-login-feature small { display: none; }.merchant-login-hero-metrics { gap: 12px; margin-top: 28px; }.merchant-login-hero-metrics strong { font-size: 15px; }.merchant-login-hero-metrics small { font-size: 9px; }.merchant-login-card { padding: 22px 20px 22px; border-radius: 14px; }.merchant-login-card-heading { padding-top: 19px; }.merchant-login-notice { font-size: 10px; }.merchant-login-trust { gap: 8px; font-size: 9px; }.merchant-login-footer nav { gap: 13px; } }
html:has(body.merchant-login-body) { min-width: 320px; background: #f4f7fb; }

/* 推广概况：沿用后台的卡片、蓝色操作和中等信息密度，保持与订单、售后页面一致。 */
.promotion-overview-page { min-width: 0; color: #4c5258; font-size: 13px; }
.promotion-page-heading { display: flex; min-height: 80px; align-items: center; justify-content: space-between; }
.promotion-page-heading h1 { margin: 0; color: #343a40; font-size: 20px; font-weight: 600; }
.promotion-page-heading p { margin: 5px 0 0; color: #8e969d; font-size: 12px; }
.promotion-heading-actions { display: flex; align-items: center; gap: 14px; }
.promotion-heading-actions > span { display: inline-flex; align-items: center; gap: 5px; color: #299365; font-size: 11px; }
.promotion-heading-actions > span i { font-size: 10px; }
.promotion-heading-actions .outline-button { display: inline-flex; align-items: center; gap: 6px; }
.promotion-filter-bar { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(450px, 1.2fr); gap: 18px 30px; margin-bottom: 12px; padding: 18px 20px 19px; }
.promotion-filter-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.promotion-filter-heading-copy { display: flex; min-width: 0; align-items: center; gap: 11px; }
.promotion-filter-heading-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #347fdb; background: #eef5ff; font-size: 14px; }
.promotion-filter-heading-copy > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.promotion-filter-heading-copy strong { color: #3e454b; font-size: 14px; font-weight: 600; }
.promotion-filter-heading-copy small { overflow: hidden; color: #969da3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.promotion-filter-updated { color: #a0a7ad; font-size: 11px; white-space: nowrap; }
.promotion-filter-updated i { margin-right: 4px; color: #9aabbc; }
.promotion-filter-fields { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto; gap: 12px; align-items: end; }
.promotion-filter-fields label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.promotion-filter-fields label > span { color: #697178; font-size: 11px; }
.promotion-filter-fields select { width: 100%; height: 35px; padding: 0 10px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #697178; background: #fff; font-size: 12px; }
.promotion-filter-fields select:focus { border-color: #9fc3f5; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.promotion-filter-actions { display: flex; align-items: center; gap: 8px; }
.promotion-filter-actions .blue-action, .promotion-filter-actions .gray-action { min-width: 62px; height: 35px; padding: 0 15px; font-size: 12px; }
.promotion-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.promotion-metric-card { position: relative; min-height: 125px; padding: 18px 20px 14px 72px; }
.promotion-metric-icon { position: absolute; top: 20px; left: 20px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; color: #347fdb; background: #eef5ff; font-size: 15px; }
.promotion-metric-card:nth-child(2) .promotion-metric-icon { color: #20a072; background: #eaf8f2; }
.promotion-metric-card:nth-child(3) .promotion-metric-icon { color: #8062ca; background: #f2edff; }
.promotion-metric-card:nth-child(4) .promotion-metric-icon { color: #dc8b28; background: #fff5e6; }
.promotion-metric-card > span { display: block; color: #697178; font-size: 12px; }
.promotion-metric-card strong { display: block; margin-top: 8px; color: #252a2f; font-size: 24px; font-weight: 600; line-height: 1; }
.promotion-metric-card strong small { margin-left: 4px; color: #656c72; font-size: 12px; font-weight: 400; }
.promotion-metric-card em { display: block; margin-top: 9px; color: #9ba2a8; font-size: 11px; font-style: normal; }
.promotion-data-card { overflow: hidden; margin-bottom: 12px; }
.promotion-chart-tabs { display: flex; gap: 4px; }
.promotion-chart-tabs button { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 2px; color: #81888f; background: #fff; font-size: 11px; }
.promotion-chart-tabs button:hover, .promotion-chart-tabs button.is-active { border-color: #bdd4f8; color: var(--blue); background: var(--blue-soft); }
.promotion-chart-area { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 18px; min-height: 218px; padding: 22px 22px 10px; }
.promotion-chart-summary { display: flex; flex-direction: column; justify-content: center; padding-bottom: 18px; }
.promotion-chart-summary strong { color: #252a2f; font-size: 29px; font-weight: 600; line-height: 1; }
.promotion-chart-summary > span { margin-top: 9px; color: #697178; font-size: 12px; }
.promotion-chart-summary small { margin-top: 13px; color: #9ba2a8; font-size: 11px; }
.promotion-chart-summary small b { color: #299365; font-weight: 400; }
.promotion-chart { display: flex; height: 177px; margin-top: 2px; }
.promotion-chart-y-axis { display: flex; width: 39px; flex-direction: column; justify-content: space-between; padding: 2px 7px 24px 0; color: #a5aab0; font-size: 11px; text-align: right; }
.promotion-chart-plot { position: relative; flex: 1; }
.promotion-chart-lines { position: absolute; inset: 0 0 24px; display: flex; flex-direction: column; justify-content: space-between; }
.promotion-chart-lines i { border-top: 1px solid #f0f2f4; }
.promotion-chart-plot svg { position: absolute; inset: 0 0 24px; width: 100%; height: calc(100% - 24px); overflow: visible; }
.promotion-chart-plot path { fill: none; stroke: #2878f0; stroke-width: 3; vector-effect: non-scaling-stroke; }
.promotion-chart-x-axis { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #a5aab0; font-size: 11px; }
.promotion-trend-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 22px 18px; border: 1px solid #edf0f2; }
.promotion-trend-metrics > div { min-height: 68px; padding: 12px 16px; border-right: 1px solid #edf0f2; }
.promotion-trend-metrics > div:last-child { border-right: 0; }
.promotion-trend-metrics span { display: block; color: #697178; font-size: 11px; }
.promotion-trend-metrics strong { display: block; margin-top: 7px; color: #353a40; font-size: 19px; font-weight: 600; line-height: 1; }
.promotion-trend-metrics small { margin-left: 3px; color: #656c72; font-size: 11px; font-weight: 400; }
.promotion-lower-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 12px; }
.promotion-channel-card, .promotion-guide-card { min-width: 0; overflow: hidden; }
.promotion-channel-card .reference-card-title a { color: #337fe9; font-size: 12px; }
.promotion-channel-list { padding: 2px 18px 7px; }
.promotion-channel-row { display: flex; min-height: 72px; align-items: center; gap: 12px; border-bottom: 1px solid #f0f2f4; }
.promotion-channel-row:last-child { border-bottom: 0; }
.promotion-channel-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 8px; font-size: 15px; }
.promotion-icon-blue { color: #347fdb; background: #eef5ff; }
.promotion-icon-purple { color: #8062ca; background: #f2edff; }
.promotion-icon-orange { color: #dc8b28; background: #fff5e6; }
.promotion-channel-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.promotion-channel-copy strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.promotion-channel-copy small { overflow: hidden; color: #9ba2a8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.promotion-channel-status { padding: 4px 7px; border-radius: 3px; color: #92999f; background: #f2f4f6; font-size: 10px; white-space: nowrap; }
.promotion-channel-row .table-action { flex: 0 0 auto; font-size: 12px; }
.promotion-guide-list { padding: 2px 18px 7px; }
.promotion-guide-list a { display: flex; min-height: 72px; align-items: center; gap: 11px; border-bottom: 1px solid #f0f2f4; }
.promotion-guide-list a:last-child { border-bottom: 0; }
.promotion-guide-list a > i:first-child { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 7px; color: #347fdb; background: #eef5ff; font-size: 13px; }
.promotion-guide-list a:nth-child(2) > i:first-child { color: #20a072; background: #eaf8f2; }
.promotion-guide-list a:nth-child(3) > i:first-child { color: #dc8b28; background: #fff5e6; }
.promotion-guide-list a span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.promotion-guide-list strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.promotion-guide-list small { overflow: hidden; color: #9ba2a8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.promotion-guide-list a > i:last-child { color: #b5bcc2; font-size: 11px; }
@media (max-width: 900px) {
    .promotion-filter-bar { grid-template-columns: 1fr; gap: 14px; }
    .promotion-filter-heading { align-items: flex-start; }
    .promotion-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promotion-filter-actions { grid-column: 1 / -1; }
    .promotion-filter-actions .blue-action, .promotion-filter-actions .gray-action { flex: 1; }
    .promotion-metric-grid { grid-template-columns: repeat(2, 1fr); }
    .promotion-chart-area { grid-template-columns: 1fr; gap: 0; }
    .promotion-chart-summary { min-height: 85px; padding: 0; }
    .promotion-lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .promotion-page-heading { min-height: 73px; }
    .promotion-page-heading h1 { font-size: 18px; }
    .promotion-heading-actions > span { display: none; }
    .promotion-filter-bar { padding: 15px 14px; }
    .promotion-filter-heading { display: block; }
    .promotion-filter-updated { display: block; margin: 10px 0 0 45px; }
    .promotion-filter-fields { grid-template-columns: 1fr; }
    .promotion-filter-actions { grid-column: auto; }
    .promotion-metric-grid { grid-template-columns: 1fr; }
    .promotion-chart-tabs { gap: 0; }
    .promotion-chart-tabs button { padding: 0 6px; font-size: 10px; }
    .promotion-trend-metrics { grid-template-columns: repeat(2, 1fr); }
    .promotion-trend-metrics > div:nth-child(2) { border-right: 0; }
    .promotion-trend-metrics > div:nth-child(n+3) { border-top: 1px solid #edf0f2; }
}

.sales-stats-page { min-width: 0; color: #4c5258; font-size: 13px; }
.sales-stats-page .promotion-page-heading { min-height: 68px; }
.sales-stats-page .outline-button { display: inline-flex; align-items: center; gap: 6px; }
.sales-range-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.sales-range-tabs a { height: 32px; padding: 0 14px; border: 1px solid #e3e7eb; border-radius: 3px; color: #6d757c; background: #fff; font-size: 12px; line-height: 30px; }
.sales-range-tabs a.is-active, .sales-range-tabs a:hover { border-color: #bdd4f8; color: var(--blue); background: var(--blue-soft); }
.sales-change-up { color: #299365; }
.sales-change-down { color: #d15a52; }
.sales-stats-page .promotion-chart-tabs a { display: inline-flex; height: 28px; align-items: center; padding: 0 10px; border: 1px solid transparent; border-radius: 2px; color: #81888f; font-size: 11px; }
.sales-stats-page .promotion-chart-tabs a.is-active, .sales-stats-page .promotion-chart-tabs a:hover { border-color: #bdd4f8; color: var(--blue); background: var(--blue-soft); }
.sales-lower-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; }
.sales-table-wrap { padding: 0 18px 12px; }
.sales-table-wrap .data-table { width: 100%; }
.sales-amount { color: #252a2f; font-weight: 600; }
.sales-empty { padding: 28px 0; color: #9ba2a8; text-align: center; }
.sales-extra-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 18px 14px; background: #edf0f2; }
.sales-extra-list > div { min-height: 74px; padding: 13px 14px; background: #fff; }
.sales-extra-list dt { color: #697178; font-size: 11px; }
.sales-extra-list dd { margin: 8px 0 0; color: #252a2f; font-size: 20px; font-weight: 600; line-height: 1; }
.sales-extra-list small { margin-left: 3px; color: #656c72; font-size: 11px; font-weight: 400; }
.sales-note { margin: 0 18px 16px; color: #9ba2a8; font-size: 11px; line-height: 1.6; }
@media (max-width: 900px) {
    .sales-lower-grid { grid-template-columns: 1fr; }
    .sales-range-tabs { flex-wrap: wrap; }
}


.merchant-login-body { position: relative; overflow-x: hidden; color: #26364a; background: #f4f7fb; }
.merchant-login-header { position: relative; z-index: 2; display: flex; height: 74px; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(222, 230, 240, .8); background: rgba(255, 255, 255, .88); box-shadow: 0 1px 0 rgba(255, 255, 255, .7); backdrop-filter: blur(18px); }
.merchant-login-brand { display: inline-flex; align-items: center; gap: 9px; color: #53657b; }
.merchant-login-brand-mark { display: grid; width: 35px; height: 35px; place-items: center; overflow: hidden; border-radius: 10px; box-shadow: 0 7px 16px rgba(235, 67, 71, .22); }
.merchant-login-brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.merchant-login-brand strong { color: #e84643; font-size: 21px; letter-spacing: -.5px; }
.merchant-login-brand span:last-child { padding-left: 10px; border-left: 1px solid #dfe5ec; font-size: 13px; }
.merchant-login-header-tools { display: flex; align-items: center; gap: 24px; color: #8997a8; font-size: 12px; }
.merchant-login-header-tools span, .merchant-login-header-tools a { display: inline-flex; align-items: center; gap: 6px; }
.merchant-login-header-tools span i { color: #42be88; font-size: 10px; }
.merchant-login-header-tools a { color: #547cae; }
.merchant-login-header-tools a:hover { color: #236de4; }
.merchant-login-main { display: grid; width: min(500px, calc(100% - 48px)); min-height: 660px; margin: 0 auto; align-items: center; gap: 76px; padding: 42px 0 50px; }
.merchant-login-hero { position: relative; min-height: 510px; overflow: hidden; border: 1px solid rgba(126, 184, 255, .28); border-radius: 26px; color: #fff; background: linear-gradient(140deg, #1636a9 0%, #1559d5 51%, #182f99 100%); box-shadow: 0 25px 60px rgba(32, 73, 170, .22); isolation: isolate; }
.merchant-login-hero::before, .merchant-login-hero::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
.merchant-login-hero::before { top: -210px; left: -160px; width: 650px; height: 650px; border: 1px solid rgba(128, 181, 255, .19); box-shadow: 0 0 0 38px rgba(128, 181, 255, .07), 0 0 0 76px rgba(128, 181, 255, .05), 0 0 0 114px rgba(128, 181, 255, .035); }
.merchant-login-hero::after { right: -120px; bottom: -190px; width: 510px; height: 510px; border: 1px solid rgba(128, 181, 255, .15); box-shadow: 0 0 0 34px rgba(128, 181, 255, .06), 0 0 0 68px rgba(128, 181, 255, .04); }
.merchant-login-orbit { position: absolute; z-index: -1; border: 1px solid rgba(155, 207, 255, .22); border-radius: 50%; transform: rotate(-24deg); }
.orbit-large { top: 46px; left: 15%; width: 600px; height: 325px; }.orbit-medium { top: 119px; left: 24%; width: 430px; height: 230px; }.orbit-small { top: 186px; left: 34%; width: 270px; height: 140px; }
.merchant-login-star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #a9e8ff; box-shadow: 0 0 12px 4px rgba(142, 231, 255, .7); }.star-one { top: 22%; left: 13%; }.star-two { top: 69%; left: 20%; }.star-three { top: 40%; right: 12%; }
.merchant-login-hero-copy { position: relative; z-index: 1; display: flex; min-height: 510px; flex-direction: column; justify-content: center; padding: 44px 58px 40px; }
.merchant-login-hero-label { display: flex; align-items: center; gap: 11px; margin-bottom: 33px; font-size: 13px; }.merchant-login-hero-label span { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; }.merchant-login-hero-label span i { color: #74e3ff; }.merchant-login-hero-label em { padding-left: 11px; border-left: 1px solid rgba(255, 255, 255, .32); color: #add7ff; font-style: normal; }
.merchant-login-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #9cd8ff; font-size: 14px; font-weight: 500; }.merchant-login-eyebrow i { color: #61e4ff; }
.merchant-login-hero h1 { margin: 0; color: #fff; font-size: clamp(52px, 6vw, 76px); font-weight: 800; letter-spacing: 4px; line-height: 1.08; text-shadow: 0 6px 18px rgba(0, 17, 91, .25); }.merchant-login-hero h1 span { color: #d9f7ff; }
.merchant-login-hero-description { margin: 20px 0 0; color: #c1deff; font-size: 16px; line-height: 1.8; letter-spacing: 1px; }
.merchant-login-feature-list { display: grid; max-width: 500px; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 35px; }
.merchant-login-feature { display: flex; min-height: 70px; align-items: center; gap: 9px; padding: 11px 10px; border: 1px solid rgba(183, 224, 255, .15); border-radius: 11px; background: rgba(255, 255, 255, .08); backdrop-filter: blur(8px); }.merchant-login-feature-icon { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 8px; color: #70e6ff; background: rgba(94, 223, 255, .13); font-size: 12px; }.merchant-login-feature strong, .merchant-login-feature small { display: block; }.merchant-login-feature strong { color: #f4fbff; font-size: 12px; font-weight: 600; }.merchant-login-feature small { margin-top: 3px; color: #add5f9; font-size: 10px; line-height: 1.3; }
.merchant-login-hero-metrics { display: flex; align-items: center; gap: 19px; margin-top: 40px; }.merchant-login-hero-metrics span { display: grid; gap: 1px; }.merchant-login-hero-metrics strong { color: #fff; font-size: 18px; font-weight: 700; }.merchant-login-hero-metrics small { color: #9dc9f3; font-size: 10px; }.merchant-login-hero-metrics i { width: 1px; height: 24px; background: rgba(185, 224, 255, .3); }

.verification-page { width: min(100%, 1200px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.verification-heading { display: flex; min-height: 80px; align-items: center; justify-content: space-between; }
.verification-heading h1 { margin: 0; color: #343a40; font-size: 20px; font-weight: 600; }
.verification-heading p { margin: 5px 0 0; color: #8e969d; font-size: 12px; }
.verification-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d8eee1; border-radius: 3px; color: #248b5b; background: #f4fbf6; font-size: 12px; }
.verification-state.is-unverified { border-color: #f0ddb3; color: #9a762b; background: #fff9eb; }
.verification-state.is-pending { border-color: #cfe0f7; color: #3478d0; background: #f3f8ff; }
.verification-state.is-rejected { border-color: #f2d8d7; color: #c6514b; background: #fff6f5; }
.verification-form { display: flex; flex-direction: column; gap: 12px; }
.verification-card { overflow: hidden; margin-bottom: 12px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 49, .025); }
.verification-card-heading { display: flex; min-height: 69px; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #eef0f2; }
.verification-card-heading > div { min-width: 0; flex: 1; }
.verification-heading-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #347fdb; background: #eef5ff; font-size: 14px; }
.verification-heading-icon.is-enterprise { color: #8062ca; background: #f2edff; }
.verification-card-heading h2 { margin: 0; color: #3e454b; font-size: 14px; font-weight: 600; }
.verification-card-heading p { margin: 3px 0 0; color: #969da3; font-size: 11px; }
.verification-back { color: #347fdb; font-size: 12px; white-space: nowrap; }
.verification-empty { padding: 28px 22px; color: #8e969d; text-align: center; }
.verification-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; }
.verification-type-card { display: flex; min-height: 250px; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid #e5e8eb; border-radius: 6px; background: #fff; text-align: left; }
.verification-type-card:hover { border-color: #b9d1f4; box-shadow: 0 8px 18px rgba(40, 120, 240, .06); }
.verification-type-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: #347fdb; background: #eef5ff; font-size: 18px; }
.verification-type-icon.is-enterprise { color: #8062ca; background: #f2edff; }
.verification-type-card strong { margin-top: 14px; color: #343a40; font-size: 16px; }
.verification-type-card p { margin: 8px 0 0; color: #8e969d; font-size: 12px; line-height: 1.6; }
.verification-type-card ul { margin: 14px 0 18px; padding-left: 18px; color: #697178; font-size: 12px; line-height: 1.8; }
.verification-type-card button { margin-top: auto; height: 34px; padding: 0 14px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-size: 12px; }
.verification-fields { padding: 0 22px; }
.verification-row { display: grid; min-height: 75px; grid-template-columns: 205px minmax(0, 1fr); gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid #f0f2f4; }
.verification-fields > .verification-row:last-child { border-bottom: 0; }
.verification-row-block { align-items: flex-start; }
.verification-label { display: flex; flex-direction: column; gap: 4px; }
.verification-label strong { color: #4e555b; font-size: 12px; font-weight: 500; }
.verification-label small { color: #9ba2a8; font-size: 11px; }
.verification-control { display: flex; max-width: 660px; }
.verification-control input { width: 100%; height: 37px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; font-size: 12px; }
.verification-control input:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.verification-agreement { max-width: 660px; padding: 12px 14px; border: 1px solid #edf0f2; border-radius: 4px; background: #fafbfc; }
.verification-agreement p { margin: 0 0 10px; color: #5d666d; font-size: 12px; line-height: 1.7; }
.verification-agreement label { display: flex; align-items: flex-start; gap: 8px; color: #4e555b; font-size: 12px; }
.verification-agreement input { margin-top: 2px; }
.verification-tip { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #cfe0f7; border-radius: 4px; color: #3478d0; background: #f3f8ff; font-size: 12px; }
.verification-upload { display: flex; align-items: center; gap: 12px; }
.verification-upload a { color: #347fdb; font-size: 12px; }
.verification-footer { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.verification-footer > span { color: #929aa1; font-size: 11px; }
.verification-footer > span i { margin-right: 4px; color: #9aabbc; }
.verification-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 8px 22px 18px; }
.verification-result-grid > div { display: flex; min-height: 62px; flex-direction: column; justify-content: center; gap: 4px; border-bottom: 1px solid #f0f2f4; }
.verification-result-grid span { color: #9ba2a8; font-size: 11px; }
.verification-result-grid strong { color: #4e555b; font-size: 13px; font-weight: 500; }
.verification-reject { margin: 0 22px 16px; padding: 10px 12px; border: 1px solid #f2d8d7; border-radius: 4px; color: #c6514b; background: #fff6f5; }
.verification-license-link, .verification-ghost-button { display: inline-flex; margin: 0 10px 18px 10px; height: 32px; align-items: center; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; font-size: 12px; }
.verification-inline-form { display: inline-flex; }
.face-qr-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; }
.face-qr-modal[hidden] { display: none; }
.face-qr-backdrop { position: absolute; inset: 0; background: rgba(18, 28, 41, .46); backdrop-filter: blur(8px); }
.face-qr-dialog { position: relative; z-index: 1; width: min(420px, calc(100vw - 48px)); padding: 28px 28px 24px; border: 1px solid #dce7f5; border-radius: 18px; background: #fff; box-shadow: 0 28px 64px rgba(24, 46, 78, .28); text-align: center; }
.face-qr-close { position: absolute; top: 14px; right: 14px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; color: #8aa0bd; background: #f5f8fc; }
.face-qr-kicker { display: inline-flex; height: 24px; align-items: center; padding: 0 10px; border-radius: 999px; color: #2878f0; background: #eef6ff; font-size: 12px; font-weight: 600; }
.face-qr-dialog h2 { margin: 12px 0 8px; color: #1f2a37; font-size: 20px; }
.face-qr-dialog p { margin: 0 0 18px; color: #66717d; font-size: 13px; line-height: 1.7; }
.face-qr-code { display: grid; width: 220px; height: 220px; margin: 0 auto 14px; place-items: center; overflow: hidden; border: 1px solid #e8eef6; border-radius: 16px; background: #fff; }
.face-qr-code img { width: 100%; height: 100%; object-fit: cover; }
.face-qr-link { display: inline-flex; color: #2878f0; font-size: 13px; }
.face-qr-dialog small { display: block; margin-top: 12px; color: #93a0ab; font-size: 12px; }
body.face-qr-open { overflow: hidden; }
@media (max-width: 900px) {
    .verification-type-grid { grid-template-columns: 1fr; }
    .verification-row { grid-template-columns: 165px minmax(0, 1fr); }
    .verification-result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .verification-heading { min-height: 73px; }
    .verification-heading h1 { font-size: 18px; }
    .verification-state { display: none; }
    .verification-row { grid-template-columns: 1fr; gap: 10px; }
    .verification-footer { flex-direction: column; align-items: flex-start; }
    .verification-footer .account-save-button { width: 100%; }
}

.verify-reminder { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; }
.verify-reminder[hidden] { display: none; }
.verify-reminder-backdrop { position: absolute; inset: 0; background: rgba(18, 28, 41, .46); backdrop-filter: blur(8px); }
.verify-reminder-dialog { position: relative; z-index: 1; width: min(640px, calc(100vw - 48px)); overflow: hidden; border: 1px solid #dce7f5; border-radius: 18px; background: #fff; box-shadow: 0 28px 64px rgba(24, 46, 78, .28); }
.verify-reminder-close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; color: #8aa0bd; background: rgba(255, 255, 255, .72); }
.verify-reminder-close:hover { color: #4d5d73; background: #fff; }
.verify-reminder-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 28px 28px 22px; background: linear-gradient(135deg, #eef6ff 0%, #f7fbff 58%, #fff 100%); }
.verify-reminder-kicker { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; color: #2878f0; background: #fff; box-shadow: 0 0 0 1px #d7e6fb inset; font-size: 12px; font-weight: 600; }
.verify-reminder-hero h2 { margin: 10px 0 8px; color: #1f2a37; font-size: 24px; line-height: 1.3; }
.verify-reminder-hero p { margin: 0; max-width: 430px; color: #66717d; font-size: 13px; line-height: 1.7; }
.verify-reminder-badge { display: grid; width: 72px; height: 72px; flex: 0 0 72px; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(160deg, #4d94ff, #1f69dd); box-shadow: 0 12px 24px rgba(40, 120, 240, .28); font-size: 28px; }
.verify-reminder-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 28px 4px; list-style: none; }
.verify-reminder-steps li { display: flex; min-height: 74px; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px 10px 14px; border: 1px solid #edf1f5; border-radius: 12px; background: #fafbfc; }
.verify-reminder-steps span { display: grid; width: 20px; height: 20px; margin-bottom: 4px; place-items: center; border-radius: 50%; color: #8b949d; background: #eef1f4; font-size: 11px; font-weight: 700; }
.verify-reminder-steps strong { color: #3d4650; font-size: 13px; }
.verify-reminder-steps small { color: #93a0ab; font-size: 11px; }
.verify-reminder-steps .is-done { background: #f3fbf6; border-color: #d8eee1; }
.verify-reminder-steps .is-done span { color: #fff; background: #2f9a63; }
.verify-reminder-steps .is-current { background: #f3f8ff; border-color: #cfe0f7; }
.verify-reminder-steps .is-current span { color: #fff; background: var(--blue); }
.verify-reminder-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 28px 8px; }
.verify-reminder-body h3 { margin: 0 0 10px; color: #3e454b; font-size: 13px; }
.verify-reminder-benefits { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.verify-reminder-benefits li { display: flex; align-items: center; gap: 8px; color: #55606a; font-size: 12px; }
.verify-reminder-benefits i { width: 18px; color: #2878f0; }
.verify-reminder-types { display: grid; gap: 10px; }
.verify-reminder-types article { padding: 12px 13px; border: 1px solid #edf0f2; border-radius: 10px; background: #fafbfc; }
.verify-reminder-types strong { display: block; margin-bottom: 4px; color: #343a40; font-size: 13px; }
.verify-reminder-types p { margin: 0; color: #7b858e; font-size: 12px; line-height: 1.65; }
.verify-reminder-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 28px 0; padding: 10px 12px; border: 1px solid #e8eef6; border-radius: 10px; color: #66717d; background: #f7faff; font-size: 12px; line-height: 1.6; }
.verify-reminder-note i { margin-top: 2px; color: #4d8ee8; }
.verify-reminder-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px 24px; }
.verify-reminder-later { height: 40px; padding: 0 16px; border: 1px solid #dfe3e7; border-radius: 8px; color: #596169; background: #fff; font-size: 13px; }
.verify-reminder-later:hover { border-color: #c9d0d6; color: #343a40; }
.verify-reminder-go { display: inline-flex; height: 40px; align-items: center; gap: 8px; padding: 0 18px; border-radius: 8px; color: #fff; background: linear-gradient(180deg, #3b86f4, #1f69dd); font-size: 13px; font-weight: 600; box-shadow: 0 8px 16px rgba(40, 120, 240, .22); }
.verify-reminder-go:hover { color: #fff; background: linear-gradient(180deg, #2f7aee, #1a5dcc); }
@media (max-width: 720px) {
    .verify-reminder-hero { padding: 24px 20px 18px; }
    .verify-reminder-badge { display: none; }
    .verify-reminder-steps, .verify-reminder-body { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
    .verify-reminder-note, .verify-reminder-actions { margin-left: 20px; margin-right: 20px; }
    .verify-reminder-actions { flex-direction: column-reverse; padding-left: 0; padding-right: 0; }
    .verify-reminder-later, .verify-reminder-go { width: 100%; justify-content: center; }
}

.operation-log-page { width: min(100%, 1200px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.operation-log-heading { display: flex; min-height: 92px; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 2px 14px; }
.operation-log-heading .list-breadcrumb { height: 29px; }
.operation-log-heading h1 { margin: 0; color: #353b41; font-size: 24px; font-weight: 600; line-height: 1.35; }
.operation-log-heading p { margin: 5px 0 0; color: #9299a0; font-size: 13px; }
.operation-log-state { display: inline-flex; height: 32px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #d7e6fb; border-radius: 3px; color: #3478d0; background: #f3f8ff; white-space: nowrap; }
.operation-log-card { overflow: hidden; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 49, .025); }
.operation-log-filters { display: flex; align-items: flex-end; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #eef0f2; }
.operation-log-filters label { display: flex; min-width: 180px; flex-direction: column; gap: 6px; }
.operation-log-filters label:first-child { flex: 1; }
.operation-log-filters span { color: #8e969d; font-size: 12px; }
.operation-log-filters input, .operation-log-filters select { height: 34px; padding: 0 10px; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; font-size: 12px; }
.operation-log-filters input:focus, .operation-log-filters select:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.operation-log-filter-actions { display: flex; align-items: center; gap: 8px; }
.operation-log-filter-actions button, .operation-log-filter-actions a { display: inline-flex; height: 34px; align-items: center; padding: 0 14px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; font-size: 12px; }
.operation-log-filter-actions button { border-color: transparent; color: #fff; background: var(--blue); }
.operation-log-table { width: 100%; border-collapse: collapse; }
.operation-log-table th, .operation-log-table td { padding: 13px 16px; border-bottom: 1px solid #f0f2f4; text-align: left; }
.operation-log-table th { color: #8e969d; background: #fafbfc; font-size: 12px; font-weight: 500; }
.operation-log-table td strong { color: #3e454b; font-weight: 600; }
.operation-log-muted { color: #8e969d; }
.operation-log-empty { padding: 36px 16px !important; color: #9ba2a8; text-align: center !important; }
.operation-log-result { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 3px; font-size: 12px; }
.operation-log-result.is-success { color: #248b5b; background: #eef8f3; }
.operation-log-result.is-failed { color: #c6514b; background: #fff4f3; }
.operation-log-pagination { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; color: #8e969d; }
.operation-log-pagination div { display: flex; align-items: center; gap: 8px; }
.operation-log-pagination a, .operation-log-pagination button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #e5e8eb; border-radius: 3px; color: #697178; background: #fff; }
.operation-log-pagination button:disabled { color: #c5cbd0; }
.operation-log-pagination strong { min-width: 52px; color: #4e555b; font-size: 12px; font-weight: 500; text-align: center; }
@media (max-width: 760px) {
    .operation-log-heading, .operation-log-filters, .operation-log-pagination { display: block; }
    .operation-log-state { display: none; }
    .operation-log-filters label, .operation-log-filter-actions { margin-top: 10px; }
    .operation-log-pagination div { margin-top: 8px; }
}

.dispute-page { width: min(100%, 1200px); margin: 0 auto; color: #4c5258; font-size: 13px; }
.dispute-heading { display: flex; min-height: 92px; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 2px 14px; }
.dispute-heading .list-breadcrumb { height: 29px; }
.dispute-heading h1 { margin: 0; color: #353b41; font-size: 24px; font-weight: 600; }
.dispute-heading p { margin: 5px 0 0; color: #9299a0; }
.dispute-heading > button, .dispute-dialog footer button[type="submit"] { display: inline-flex; height: 34px; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); }
.dispute-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.dispute-metrics article { padding: 14px 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.dispute-metrics span { color: #8e969d; font-size: 12px; }
.dispute-metrics strong { display: block; margin-top: 6px; color: #353b41; font-size: 22px; }
.dispute-card { overflow: hidden; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.dispute-filters { display: flex; align-items: flex-end; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #eef0f2; }
.dispute-filters label { display: flex; min-width: 160px; flex: 1; flex-direction: column; gap: 6px; }
.dispute-filters span, .dispute-form-grid span { color: #8e969d; font-size: 12px; }
.dispute-filters input, .dispute-filters select, .dispute-form-grid input, .dispute-form-grid select, .dispute-form-grid textarea { width: 100%; border: 1px solid #dfe3e7; border-radius: 3px; outline: 0; color: #4f5860; background: #fff; font: inherit; }
.dispute-filters input, .dispute-filters select, .dispute-form-grid input, .dispute-form-grid select { height: 34px; padding: 0 10px; }
.dispute-form-grid textarea { min-height: 110px; padding: 8px 10px; resize: vertical; }
.dispute-filters input:focus, .dispute-filters select:focus, .dispute-form-grid input:focus, .dispute-form-grid select:focus, .dispute-form-grid textarea:focus { border-color: #8eb7f2; box-shadow: 0 0 0 2px rgba(40, 120, 240, .08); }
.dispute-filter-actions { display: flex; gap: 8px; }
.dispute-filter-actions button, .dispute-filter-actions a, .dispute-table td > button, .dispute-dialog footer button { display: inline-flex; height: 34px; align-items: center; padding: 0 14px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; }
.dispute-filter-actions button { border-color: transparent; color: #fff; background: var(--blue); }
.dispute-table { width: 100%; border-collapse: collapse; }
.dispute-table th, .dispute-table td { padding: 13px 16px; border-bottom: 1px solid #f0f2f4; text-align: left; vertical-align: top; }
.dispute-table th { color: #8e969d; background: #fafbfc; font-size: 12px; font-weight: 500; }
.dispute-table td strong, .dispute-table td small { display: block; }
.dispute-table td strong { color: #3e454b; font-weight: 600; }
.dispute-table td small, .dispute-muted { max-width: 280px; color: #8e969d; }
.dispute-table td small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dispute-table td form { display: inline; }
.dispute-table td > button, .dispute-table td form button { height: 28px; padding: 0 10px; }
.dispute-empty { padding: 36px 16px !important; color: #9ba2a8; text-align: center !important; }
.dispute-detail-row td { background: #fafbfc; }
.dispute-detail-row p { margin: 4px 0 10px; white-space: pre-wrap; }
.dispute-pagination { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; color: #8e969d; }
.dispute-pagination div { display: flex; align-items: center; gap: 8px; }
.dispute-pagination a, .dispute-pagination button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #e5e8eb; border-radius: 3px; color: #697178; background: #fff; }
.dispute-pagination button:disabled { color: #c5cbd0; }
.dispute-dialog { width: min(680px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 6px; }
.dispute-dialog::backdrop { background: rgba(28, 39, 49, .35); }
.dispute-dialog header, .dispute-dialog footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.dispute-dialog header { border-bottom: 1px solid #eef0f2; }
.dispute-dialog header strong, .dispute-dialog header small { display: block; }
.dispute-dialog header small { margin-top: 3px; color: #8e969d; }
.dispute-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 18px; }
.dispute-form-grid label { display: flex; flex-direction: column; gap: 6px; }
.dispute-form-wide { grid-column: 1 / -1; }
.dispute-dialog footer { justify-content: flex-end; gap: 8px; border-top: 1px solid #eef0f2; }
.complaint-dialog-body { display: grid; gap: 10px; padding: 16px 18px; }
.complaint-dialog-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.complaint-dialog-body dt { color: #8e969d; font-size: 12px; }
.complaint-dialog-body dd, .complaint-dialog-body p { margin: 3px 0 0; color: #3e454b; white-space: pre-wrap; }
.complaint-dialog-body label { display: flex; flex-direction: column; gap: 6px; }
.complaint-dialog-body span, .complaint-dialog-body small { color: #8e969d; font-size: 12px; }
.complaint-dialog-body select, .complaint-dialog-body textarea { width: 100%; border: 1px solid #dfe3e7; border-radius: 3px; color: #4f5860; background: #fff; font: inherit; }
.complaint-dialog-body select { height: 34px; padding: 0 10px; }
.complaint-dialog-body textarea { min-height: 110px; padding: 8px 10px; resize: vertical; }
.complaint-thread { display: grid; gap: 8px; }
.complaint-thread article { padding: 8px 10px; border-radius: 4px; background: #f7f9fb; }
.complaint-thread span { color: #8e969d; font-size: 12px; }
.complaint-thread p { margin: 4px 0 0; white-space: pre-wrap; }
.complaint-dialog footer button[data-complaint-switch-reply], .complaint-dialog footer button[data-complaint-switch-evidence] { border-color: transparent; color: #fff; background: var(--blue); }
@media (max-width: 760px) {
    .dispute-heading, .dispute-filters, .dispute-pagination { display: block; }
    .complaint-dialog-body dl, .complaint-reply-grid, .dispute-metrics, .dispute-form-grid { grid-template-columns: 1fr; }
    .dispute-filters label, .dispute-filter-actions, .dispute-pagination div { margin-top: 10px; }
}

.app-market, .app-runtime { width: min(100%, 1200px); margin: 0 auto; }
.app-market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px; }
.app-card img, .app-runtime-heading img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.app-card strong, .app-card small, .app-card p { display: block; }
.app-card small, .app-card p, .app-market-empty span { color: #8e969d; font-size: 12px; }
.app-card p { margin: 6px 0 0; line-height: 1.6; }
.app-card footer, .app-card footer div, .app-runtime-heading { display: flex; align-items: center; gap: 8px; }
.app-card footer { grid-column: 1 / -1; justify-content: space-between; }
.app-card footer span, .app-card footer a, .app-card footer button, .app-runtime-heading a, .app-runtime-form button { display: inline-flex; height: 30px; align-items: center; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; font-size: 12px; }
.app-card footer span.is-installed { border-color: #d8eee1; color: #248b5b; background: #f4fbf6; }
.app-card footer button, .app-runtime-form button { border-color: transparent; color: #fff; background: var(--blue); }
.app-market-empty, .app-runtime-form { padding: 22px; }
.app-runtime-heading { justify-content: space-between; margin-bottom: 12px; }
.app-runtime-heading div { flex: 1; }
.app-runtime-heading h1 { margin: 0; font-size: 20px; }
.app-runtime-heading p { margin: 4px 0 0; color: #8e969d; font-size: 12px; }
.app-runtime-form { display: grid; gap: 12px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.app-runtime-form label { display: grid; gap: 6px; color: #697178; font-size: 12px; }
.app-runtime-form input, .app-runtime-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #dfe3e7; border-radius: 3px; color: #4f5860; }
.app-runtime-form button { justify-self: start; }

.card-tools { width: min(100%, 1200px); margin: 0 auto; }
.card-tools-heading, .card-tools-editor-bar, .card-tools-submit, .card-tools-option-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-tools-heading { margin-bottom: 12px; }
.card-tools-heading h1 { margin: 4px 0 0; font-size: 20px; }
.card-tools-heading p, .card-tools-options p { margin: 4px 0 0; color: #8e969d; font-size: 12px; }
.card-tools-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; align-items: start; }
.card-tools-panel { border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.card-tools-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; border-bottom: 1px solid #eef0f2; }
.card-tools-tabs button, .card-tools-editor-bar button, .card-tools-option-actions button { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dfe3e7; border-radius: 3px; color: #596169; background: #fff; font-size: 12px; }
.card-tools-tabs button { justify-content: flex-start; padding: 0 10px; }
.card-tools-tabs button[aria-selected="true"] { border-color: #bdd4f8; color: var(--blue); background: var(--blue-soft); }
.card-tools-options { display: none; gap: 10px; padding: 14px 12px; }
.card-tools-options.is-active { display: grid; }
.card-tools-options label { display: grid; gap: 6px; color: #697178; font-size: 12px; }
.card-tools-options input, .card-tools-options select, .card-tools textarea { width: 100%; border: 1px solid #dfe3e7; border-radius: 3px; color: #4f5860; background: #fff; }
.card-tools-options input, .card-tools-options select { height: 34px; padding: 0 10px; }
.card-tools-check { display: flex !important; align-items: center; gap: 8px; }
.card-tools-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.card-tools-submit { padding: 12px; border-top: 1px solid #eef0f2; }
.card-tools-submit button, .card-tools-option-actions button { border-color: transparent; color: #fff; background: var(--blue); }
.card-tools-editor-bar { min-height: 48px; padding: 8px 12px; border-bottom: 1px solid #eef0f2; }
.card-tools-editor-bar strong { color: #697178; font-size: 12px; font-weight: 500; }
.card-tools-editor-bar div { display: flex; gap: 8px; }
.card-tools-editor-bar button { padding: 0 12px; }
.card-tools textarea { display: block; min-height: 520px; padding: 14px; border-width: 0; outline: 0; resize: vertical; font-family: Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.7; }
@media (max-width: 900px) {
    .card-tools-layout, .card-tools-tabs { grid-template-columns: 1fr; }
    .card-tools-heading, .card-tools-submit { align-items: stretch; flex-direction: column; }
}
@media (max-width: 1100px) { .app-market-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .app-market-grid { grid-template-columns: 1fr; } }

.rule-page { display: grid; min-height: calc(100vh - var(--header) - 64px); grid-template-columns: 210px 320px minmax(0, 1fr); overflow: hidden; border: 1px solid #e5e8eb; border-radius: 5px; background: #fff; }
.rule-nav, .rule-list-panel { border-right: 1px solid #eef0f2; }
.rule-nav { padding: 18px 12px; background: #fbfcfd; }
.rule-nav-heading { padding: 4px 10px 14px; }
.rule-nav-heading span, .rule-document-heading span, .rule-list-item > span { color: #98a1a8; font-size: 11px; letter-spacing: .4px; }
.rule-nav-heading strong { display: block; margin-top: 3px; color: #2f363c; font-size: 18px; }
.rule-nav a, .rule-list-item { display: flex; align-items: center; }
.rule-nav a { min-height: 38px; gap: 9px; margin-bottom: 4px; padding: 0 10px; border-radius: 4px; color: #626b72; font-size: 13px; }
.rule-nav a i { width: 16px; color: #98a1a8; text-align: center; }
.rule-nav a em { margin-left: auto; color: #9aa3aa; font-size: 12px; font-style: normal; }
.rule-nav a.is-current, .rule-nav a:hover { color: var(--blue); background: #f3f7fd; }
.rule-nav a.is-current i, .rule-nav a:hover i { color: var(--blue); }
.rule-search { display: flex; height: 52px; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid #eef0f2; color: #a0a7ad; }
.rule-search input { width: 100%; border: 0; outline: 0; color: #4d555c; background: transparent; font-size: 13px; }
.rule-list { max-height: calc(100vh - var(--header) - 116px); overflow: auto; }
.rule-list-item { display: block; padding: 13px 16px; border-bottom: 1px solid #f3f5f6; }
.rule-list-item strong, .rule-list-item small { display: block; }
.rule-list-item strong { margin-top: 3px; overflow: hidden; color: #343b41; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rule-list-item small { display: -webkit-box; margin-top: 4px; overflow: hidden; color: #8d959c; font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rule-list-item.is-selected, .rule-list-item:hover { background: #f7faff; }
.rule-list-item.is-selected { box-shadow: inset 3px 0 var(--blue); }
.rule-document { min-width: 0; padding: 28px 36px 42px; overflow: auto; }
.rule-document-heading, .rule-document-meta, .rule-empty { display: flex; }
.rule-document-heading { align-items: flex-start; justify-content: space-between; gap: 24px; }
.rule-document-heading h1 { margin: 5px 0 0; color: #242b31; font-size: 24px; line-height: 1.35; }
.rule-document-meta { flex: 0 0 auto; gap: 18px; }
.rule-document-meta span { display: block; color: #98a1a8; font-size: 12px; }
.rule-document-meta strong { display: block; margin-top: 3px; color: #3d454c; font-size: 13px; }
.rule-document-summary { margin: 18px 0 0; padding: 12px 14px; border-radius: 4px; color: #5d6770; background: #f7f9fb; font-size: 13px; line-height: 1.7; }
.rule-document-body { max-width: 820px; margin-top: 8px; }
.rule-document-body h2 { margin: 24px 0 8px; color: #2c343b; font-size: 16px; }
.rule-document-body ul { margin: 0; padding-left: 18px; }
.rule-document-body li { margin: 6px 0; color: #4d565e; font-size: 14px; line-height: 1.75; }
.rule-empty { min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #98a1a8; text-align: center; }
.rule-empty i { font-size: 24px; }
.rule-empty strong, .rule-empty span { display: block; }
.rule-empty strong { color: #59636b; font-size: 15px; }
.rule-document-empty { min-height: 420px; }
.header-tool.is-current { color: var(--blue); }
@media (max-width: 1200px) {
    .rule-page { grid-template-columns: 180px 270px minmax(0, 1fr); }
    .rule-document { padding: 22px; }
}

.shop-guide { min-width: 0; color: #4c5258; }
.shop-guide-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; min-height: 78px; }
.shop-guide-heading h1 { margin: 6px 0; color: #3f454a; font-size: 22px; font-weight: 500; }
.shop-guide-heading p { max-width: 640px; margin: 0; color: #8b939a; font-size: 13px; line-height: 1.7; }
.shop-guide-heading > a { display: inline-flex; height: 34px; align-items: center; padding: 0 14px; border-radius: 4px; color: #fff; background: var(--blue); font-size: 13px; }
.shop-guide-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.shop-guide-steps article, .shop-guide-grid section { border: 1px solid #e7ebef; border-radius: 8px; background: #fff; }
.shop-guide-steps article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; }
.shop-guide-steps b { color: var(--blue); font-size: 16px; }
.shop-guide-steps strong, .shop-guide-grid strong, .shop-guide-grid b { display: block; color: #3f454a; font-size: 14px; font-weight: 600; }
.shop-guide-steps p, .shop-guide-grid p, .shop-guide-grid span { margin: 5px 0 0; color: #8b939a; font-size: 12px; line-height: 1.7; }
.shop-guide-steps a { color: var(--blue); font-size: 13px; white-space: nowrap; }
.shop-guide-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; margin-top: 12px; }
.shop-guide-grid section { padding: 16px 18px; }
.shop-guide-grid h2 { margin: 0 0 12px; color: #3f454a; font-size: 16px; font-weight: 600; }
.shop-guide-grid article + article, .shop-guide-grid a + a { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f2f4; }
.shop-guide-grid a { display: block; }
.shop-guide-grid a:hover b { color: var(--blue); }
@media (max-width: 900px) {
    .shop-guide-heading, .shop-guide-steps, .shop-guide-grid, .shop-guide-steps article { grid-template-columns: 1fr; }
    .shop-guide-heading { display: grid; }
}

.growth-page { min-width: 0; color: #4c5258; }
.growth-current, .growth-levels article, .growth-rules { border: 1px solid #e7ebef; border-radius: 8px; background: #fff; }
.growth-current { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 28px; align-items: center; padding: 22px 24px; }
.growth-current span, .growth-levels span, .growth-rules span { color: #8b939a; font-size: 12px; }
.growth-current strong { display: block; margin-top: 4px; color: #1f2327; font-size: 34px; line-height: 1; }
.growth-current strong small { margin-left: 4px; font-size: 14px; font-weight: 500; }
.growth-current p, .growth-current em { margin: 0; color: #667078; font-size: 13px; font-style: normal; }
.growth-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #eef2f5; }
.growth-progress b { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.growth-current em { grid-column: 2; }
.growth-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.growth-levels article { min-height: 188px; padding: 16px; }
.growth-levels article.is-current { border-color: #b9d4f6; box-shadow: inset 0 0 0 1px #d7e8fa; }
.growth-levels article.is-reached { background: #fbfcfd; }
.growth-levels header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.growth-levels b { color: var(--blue); font-size: 18px; }
.growth-levels ul { margin: 14px 0 0; padding-left: 16px; }
.growth-levels li { margin: 7px 0; color: #5d666d; font-size: 12px; line-height: 1.6; }
.growth-rules { margin-top: 12px; padding: 16px 18px 18px; }
.growth-rules h2 { margin: 0 0 12px; color: #3f454a; font-size: 16px; font-weight: 600; }
.growth-rules > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.growth-rules article { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 0; }
.growth-rules b { grid-row: span 2; color: #1f2327; font-size: 16px; }
.growth-rules b.plus { color: #1d9a57; }
.growth-rules b.minus { color: #d14343; }
.growth-rules strong { color: #3f454a; font-size: 13px; }
@media (max-width: 1100px) {
    .growth-levels, .growth-rules > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .growth-current, .growth-levels, .growth-rules > div { grid-template-columns: 1fr; }
    .growth-current em { grid-column: auto; }
}

.qq-bot { width: min(100%, 1180px); margin: 0 auto; }
.qq-bot-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.qq-bot-heading h1 { margin: 4px 0 0; font-size: 20px; }
.qq-bot-heading p { margin: 4px 0 0; color: #8e969d; font-size: 12px; }
.qq-bot-heading-side { display: flex; align-items: center; gap: 8px; }
.qq-bot-state { display: inline-flex; height: 33px; align-items: center; padding: 0 10px; border-radius: 3px; color: #8a5a12; background: #fff6e8; font-size: 12px; }
.qq-bot-state.is-on { color: #1d7a49; background: #eefaf3; }
.qq-bot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.qq-bot-card { margin-bottom: 12px; padding: 16px 18px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.qq-bot-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.qq-bot-card header strong { display: block; color: #2c3338; font-size: 15px; }
.qq-bot-card header span, .qq-bot-save p, .qq-bot-fields small { display: block; margin-top: 3px; color: #8e969d; font-size: 12px; font-weight: 400; }
.qq-bot-card header button, .qq-bot-save button, .qq-bot-webhook button { height: 32px; padding: 0 12px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-size: 12px; }
.qq-bot-card header button { border: 1px solid #bdd4f8; color: var(--blue); background: #fff; }
.qq-bot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qq-bot-fields label, .qq-bot-table article label, .qq-bot-webhook label { display: grid; gap: 6px; }
.qq-bot-fields label > span, .qq-bot-table article label > span, .qq-bot-webhook label > span { color: #697178; font-size: 12px; }
.qq-bot-card input, .qq-bot-card select, .qq-bot-card textarea { width: 100%; border: 1px solid #dfe3e7; border-radius: 3px; color: #2f363c; background: #fff; font: inherit; }
.qq-bot-card input, .qq-bot-card select { height: 36px; padding: 0 10px; }
.qq-bot-card textarea { min-height: 72px; padding: 8px 10px; resize: vertical; line-height: 1.6; }
.qq-bot-switch { display: inline-flex; align-items: center; gap: 8px; color: #596169; font-size: 12px; white-space: nowrap; }
.qq-bot-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qq-bot-switch i { position: relative; width: 36px; height: 20px; border-radius: 99px; background: #d5dbe1; }
.qq-bot-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.qq-bot-switch input:checked + i { background: var(--blue); }
.qq-bot-switch input:checked + i::after { transform: translateX(16px); }
.qq-bot-switch input:focus-visible + i { outline: 2px solid #bdd4f8; }
.qq-bot-table { display: grid; }
.qq-bot-table-head, .qq-bot-table article { display: grid; grid-template-columns: 52px 120px 120px 128px minmax(180px, 1fr) 32px; gap: 8px; align-items: start; }
.qq-bot-table-head { margin-bottom: 6px; color: #98a1a8; font-size: 12px; }
.qq-bot-table article { margin-bottom: 8px; padding: 10px; border: 1px solid #eef0f2; border-radius: 4px; background: #fbfcfd; }
.qq-bot-table article label > span { display: none; }
.qq-bot-table article textarea { min-height: 36px; }
.qq-bot-table article button { display: grid; width: 32px; height: 36px; place-items: center; border: 0; color: #98a1a8; background: transparent; }
.qq-bot-table article button:hover { color: #d14343; }
.qq-bot-webhook { border-color: #f0d9a6; background: #fffaf0; }
.qq-bot-webhook ol { margin: 0 0 14px; padding-left: 18px; color: #6d6252; font-size: 12px; line-height: 1.7; }
.qq-bot-webhook label div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.qq-bot-webhook input { background: #fff; }
.qq-bot-save button { width: 100%; height: 36px; }
@media (max-width: 1100px) {
    .qq-bot-layout, .qq-bot-fields { grid-template-columns: 1fr; }
    .qq-bot-table-head { display: none; }
    .qq-bot-table article { grid-template-columns: 1fr auto; }
    .qq-bot-table article label { grid-column: 1 / -1; }
    .qq-bot-table article label > span { display: block; }
    .qq-bot-switch-compact { grid-column: 1; }
}

.kasu { width: min(100%, 1180px); margin: 0 auto; }
.kasu-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kasu-heading h1 { margin: 4px 0 0; font-size: 18px; }
.kasu-toast { margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.kasu-toast.is-ok { color: #1d7a49; background: #eefaf3; }
.kasu-toast.is-error { color: #b42318; background: #fdecec; }
.kasu-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 14px; align-items: start; }
.kasu-side { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid #e6e9ed; border-radius: 10px; background: #fff; }
.kasu-side-head { padding: 8px 10px 6px; color: #9aa1a8; font-size: 11px; letter-spacing: .08em; }
.kasu-side-list { display: grid; gap: 2px; }
.kasu-side-list button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; text-align: left; color: #3a4248; background: transparent; cursor: pointer; }
.kasu-side-list button i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #d5dae0; }
.kasu-side-list button span { display: grid; gap: 1px; min-width: 0; }
.kasu-side-list button b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.kasu-side-list button small { overflow: hidden; color: #9aa1a8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kasu-side-list button[aria-pressed="true"] { color: var(--blue); background: var(--blue-soft); }
.kasu-side-list button[aria-pressed="true"] i { background: var(--blue); }
.kasu-side-list button[aria-pressed="true"] small { color: #7ea4de; }
.kasu-side-add { margin-top: 4px; padding: 8px 10px; border: 1px dashed #d7dce1; border-radius: 7px; color: #7b848c; background: transparent; font-size: 12px; text-align: center; cursor: pointer; }
.kasu-side-add:hover { border-color: var(--blue); color: var(--blue); }
.kasu-side-label { padding: 4px 8px 6px; color: #8e969d; font-size: 12px; }
.kasu-side-list button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; text-align: left; color: #3a4248; background: transparent; cursor: pointer; }
.kasu-main { min-width: 0; }
.kasu-sync { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px; border-radius: 6px; background: #f4f8ff; }
.kasu-sync[hidden] { display: none; }
.kasu-sync b { color: #2457b2; font-size: 13px; font-weight: 550; }
.kasu-sync i { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: #d9e6fb; }
.kasu-sync i::after { content: ""; display: block; width: 35%; height: 100%; background: var(--blue); animation: kasu-sync 1.1s ease-in-out infinite; }
@keyframes kasu-sync { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.kasu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.kasu-stats article { padding: 10px 14px; border: 1px solid #e5e8eb; border-radius: 8px; background: #fff; }
.kasu-stats b { display: block; color: #243038; font-size: 18px; font-weight: 650; }
.kasu-stats span { color: #8e969d; font-size: 12px; }
.kasu-tabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid #e5e8eb; }
.kasu-tabs button { height: 36px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; color: #697178; background: transparent; font-size: 13px; }
.kasu-tabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 650; }
.kasu-panel { display: none; padding: 14px 16px; border: 1px solid #e5e8eb; border-radius: 8px; background: #fff; }
.kasu-panel.is-active { display: block; }
.kasu-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.kasu-toolbar input, .kasu-toolbar select, .kasu-settings input, .kasu-settings select, .kasu-callback input { height: 34px; padding: 0 10px; border: 1px solid #dfe3e7; border-radius: 6px; color: #2f363c; background: #fff; font: inherit; font-size: 13px; }
.kasu-toolbar input[name="keyword"] { flex: 1; min-width: 0; }
.kasu-toolbar select { width: 132px; }
.kasu button { height: 32px; padding: 0 12px; border: 1px solid #d5e4fb; border-radius: 6px; color: var(--blue); background: #fff; font-size: 12px; cursor: pointer; }
.kasu-toolbar button[data-kasu-action="sync-all"], .kasu-settings-actions button[type="submit"], .kasu-empty button { border-color: var(--blue); color: #fff; background: var(--blue); }
.kasu button:disabled { opacity: .6; }
.kasu-goods, .kasu-orders { display: grid; }
.kasu-goods article, .kasu-orders article { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px 44px auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #f1f3f5; }
.kasu-goods img, .kasu-goods i { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: #f3f6f9; }
.kasu-goods strong, .kasu-orders strong { display: block; overflow: hidden; color: #243038; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.kasu-goods small, .kasu-orders small, .kasu-price small, .kasu-settings small, .kasu-callback span { color: #8e969d; font-size: 12px; }
.kasu-price { text-align: right; }
.kasu-price b { display: block; color: #243038; font-size: 14px; }
.kasu-goods em { color: #8a5a12; font-size: 12px; font-style: normal; }
.kasu-goods em.is-on { color: #1d7a49; }
.kasu-orders article { grid-template-columns: minmax(0, 1fr) 180px 72px auto; }
.kasu-orders p { grid-column: 1 / -1; margin: -4px 0 0; color: #b42318; font-size: 12px; }
.kasu-order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.kasu-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; color: #8e969d; font-size: 12px; }
.kasu-pages[hidden] { display: none; }
.kasu-pages > span:first-child { margin-right: 6px; }
.kasu-pages a, .kasu-pages .is-disabled { display: grid; min-width: 30px; height: 30px; place-items: center; padding: 0 6px; border: 1px solid #e5e8eb; border-radius: 6px; color: #596169; font-size: 12px; }
.kasu-pages .is-disabled { color: #c5cbd0; background: #fafbfc; }
.kasu-pages a.is-current { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.kasu-empty { display: grid; justify-items: start; gap: 6px; padding: 36px 8px; }
.kasu-empty strong { color: #243038; font-size: 14px; }
.kasu-empty span { color: #8e969d; font-size: 12px; }
.kasu-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kasu-settings label { display: grid; gap: 6px; }
.kasu-settings label > span { color: #697178; font-size: 12px; }
.kasu-check { display: flex !important; grid-column: 1 / -1; align-items: center; gap: 8px; color: #596169; font-size: 12px; }
.kasu-check input { width: 14px; height: 14px; accent-color: var(--blue); }
.kasu-settings-actions { display: flex; gap: 8px; margin-top: 14px; }
.kasu-settings-actions button[data-kasu-action="delete-site"] { margin-left: auto; border-color: #f3c9c6; color: #b42318; }
.kasu-callback { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f3f5; }
.kasu-callback strong { display: block; color: #243038; font-size: 13px; }
@media (max-width: 860px) {
    .kasu-body, .kasu-stats, .kasu-settings-grid { grid-template-columns: 1fr; }
    .kasu-goods article, .kasu-orders article { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .kasu-goods em, .kasu-price { display: none; }
    .kasu-toolbar { flex-wrap: wrap; }
}
.kasu-heading, .kasu-heading-side { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kasu-heading { margin-bottom: 16px; }
.kasu-heading h1 { margin: 4px 0 0; font-size: 20px; }
.kasu-heading p { margin: 4px 0 0; color: #8e969d; font-size: 12px; }
.kasu-state { display: inline-flex; height: 33px; align-items: center; padding: 0 10px; border-radius: 3px; color: #8a5a12; background: #fff6e8; font-size: 12px; }
.kasu-state.is-on { color: #1d7a49; background: #eefaf3; }
.kasu-toast { margin-bottom: 12px; padding: 10px 12px; border-radius: 4px; font-size: 13px; }
.kasu-toast.is-ok { color: #1d7a49; background: #eefaf3; }
.kasu-sync { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px; border-radius: 4px; background: #f4f8ff; }
.kasu-sync[hidden] { display: none; }
.kasu-sync b { color: #2457b2; font-size: 13px; font-weight: 550; }
.kasu-sync i { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: #d9e6fb; }
.kasu-sync i::after { content: ""; display: block; width: 35%; height: 100%; background: var(--blue); animation: kasu-sync 1.1s ease-in-out infinite; }
@keyframes kasu-sync { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.kasu-sites button { height: 32px; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 99px; color: #596169; background: #fff; font-size: 12px; }
.kasu-sites button[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.kasu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kasu-stats article { padding: 14px 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.kasu-stats b { display: block; color: #243038; font-size: 20px; font-weight: 650; }
.kasu-stats span { color: #8e969d; font-size: 12px; }
.kasu-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid #e5e8eb; }
.kasu-tabs button { height: 38px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; color: #697178; background: transparent; font-size: 13px; }
.kasu-tabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 650; }
.kasu-panel { display: none; padding: 16px; border: 1px solid #e5e8eb; border-radius: 4px; background: #fff; }
.kasu-panel.is-active { display: block; }
.kasu-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.kasu-toolbar input, .kasu-toolbar select, .kasu-settings input, .kasu-settings select, .kasu-callback input { height: 36px; padding: 0 10px; border: 1px solid #dfe3e7; border-radius: 3px; color: #2f363c; background: #fff; font: inherit; }
.kasu-toolbar input[name="remote_keyword"], .kasu-toolbar input[name="keyword"] { flex: 1; }
.kasu-toolbar input[name="remote_page"] { width: 72px; }
.kasu-toolbar select { width: 128px; }
.kasu button { height: 34px; padding: 0 12px; border: 1px solid #bdd4f8; border-radius: 3px; color: var(--blue); background: #fff; font-size: 12px; }
.kasu-toolbar button[type="submit"], .kasu-settings-actions button[type="submit"], .kasu-empty button { border-color: var(--blue); color: #fff; background: var(--blue); }
.kasu button:disabled { opacity: .6; }
.kasu-goods, .kasu-orders { display: grid; }
.kasu-goods article, .kasu-orders article { display: grid; grid-template-columns: 42px minmax(0, 1fr) 92px 52px auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #eef0f2; }
.kasu-goods img, .kasu-goods i { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; background: #f3f6f9; }
.kasu-goods strong, .kasu-orders strong { display: block; overflow: hidden; color: #243038; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.kasu-goods small, .kasu-orders small, .kasu-price small, .kasu-settings small, .kasu-callback span { color: #8e969d; font-size: 12px; }
.kasu-price b { display: block; color: #243038; font-size: 15px; }
.kasu-goods em { color: #8a5a12; font-size: 12px; font-style: normal; }
.kasu-goods em.is-on { color: #1d7a49; }
.kasu-orders article { grid-template-columns: minmax(0, 1fr) 180px 72px auto; }
.kasu-orders p { grid-column: 1 / -1; margin: -6px 0 0; color: #b42318; font-size: 12px; }
.kasu-order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.kasu-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; color: #8e969d; font-size: 12px; }
.kasu-pages a, .kasu-pages .is-disabled { display: grid; min-width: 30px; height: 30px; place-items: center; padding: 0 6px; border: 1px solid #e5e8eb; border-radius: 3px; color: #596169; font-size: 12px; }
.kasu-pages .is-disabled { color: #c5cbd0; background: #fafbfc; }
.kasu-pages a.is-current { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.kasu-empty { display: grid; justify-items: start; gap: 4px; padding: 28px 8px; }
.kasu-empty strong { color: #243038; font-size: 15px; }
.kasu-empty span { color: #8e969d; font-size: 12px; }
.kasu-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kasu-settings label { display: grid; gap: 6px; }
.kasu-settings label > span { color: #697178; font-size: 12px; }
.kasu-span { grid-column: 1 / -1; }
.kasu-check { display: flex !important; grid-column: 1 / -1; align-items: center; gap: 8px; color: #596169; font-size: 12px; }
.kasu-check input { width: 14px; height: 14px; accent-color: var(--blue); }
.kasu-settings-actions { display: flex; gap: 8px; margin-top: 14px; }
.kasu-callback { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f2; }
.kasu-callback strong { display: block; color: #243038; font-size: 13px; }
@media (max-width: 860px) {
    .kasu-stats, .kasu-settings-grid, .kasu-goods article, .kasu-orders article { grid-template-columns: 1fr 1fr; }
    .kasu-toolbar { flex-wrap: wrap; }
}