:root {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #263247;
  background: #f6f8fb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 10px 16px; background: #4277e9; color: #fff; font-weight: 600; transition: background .15s, border-color .15s, box-shadow .15s; }
button:hover { background: #3266d6; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #648cf1; outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.light { background: #f1f4fa; color: #4a607d; }
button.light:hover { background: #e7edfa; }
button.warn { background: #fff1eb; color: #a4523c; }
input, select { min-height: 42px; padding: 9px 12px; border: 1px solid #dbe1ea; border-radius: 8px; background: #fff; color: #283348; }
input::placeholder { color: #a0aaba; }
label { display: grid; gap: 7px; color: #667288; font-size: 13px; font-weight: 600; }
h1, h2, h3, p { margin-top: 0; }

.app { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; min-height: 500px; background: #fff; border-right: 1px solid #e9edf3; }
.brand { display: flex; align-items: center; gap: 11px; padding: 28px 22px 24px; color: #233149; font-size: 17px; font-weight: 750; letter-spacing: .01em; }
.brand img { width: 37px; height: 37px; object-fit: contain; border-radius: 10px; }
.brand small { display: block; margin-top: 3px; color: #a2aabb; font-size: 11px; font-weight: 400; letter-spacing: .025em; }
.sidebar nav { display: grid; align-content: start; gap: 17px; overflow-y: auto; padding: 8px 13px 24px; }
.nav-group { display: grid; gap: 3px; }
.nav-heading { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; color: #a0aabc; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.nav-collapse summary { cursor: pointer; list-style: none; }
.nav-collapse summary::-webkit-details-marker { display: none; }
.nav-collapse summary span { font-size: 16px; font-weight: 400; transition: transform .15s; }
.nav-collapse[open] summary span { transform: rotate(180deg); }
.sidebar nav button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 9px 12px; text-align: left; background: transparent; color: #5e6b82; font-size: 13px; font-weight: 550; }
.sidebar nav button:hover { background: #f4f7fe; color: #386fe4; }
.sidebar nav button.active { background: #ecf2ff; color: #386fe4; font-weight: 700; }
.nav-icon { display: inline-grid; place-items: center; width: 21px; margin-right: 11px; color: #8194b1; font-size: 17px; line-height: 1; }
.sidebar nav button.active .nav-icon, .sidebar nav button:hover .nav-icon { color: #477cf0; }
.sidebar nav button.nav-create { margin-bottom: 8px; background: #f1f4fa; color: #325abb; font-weight: 680; }
.sidebar nav button.nav-create:hover { background: #e8efff; }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 17px 18px; border-top: 1px solid #edf0f5; color: #3d4b61; font-size: 12px; }
.avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #eaf0ff; color: #4277e9; font-weight: 700; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot button { margin-left: auto; padding: 6px; background: transparent; color: #8c98a9; font-size: 12px; white-space: nowrap; }
.sidebar-foot button:hover { background: #f2f5fb; }

.main { min-width: 0; max-width: 1820px; padding: 43px clamp(24px, 4.1vw, 68px) 80px; }
.top { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin: 0 0 30px; }
.top h1 { margin: 0 0 9px; color: #1e2c42; font-size: 28px; font-weight: 730; letter-spacing: -.025em; }
.explainer { margin: 0; color: #909caf; font-size: 13px; line-height: 1.6; }
.top-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.card, .panel { background: #fff; border: 1px solid #edf0f5; border-radius: 12px; }
.card { min-width: 0; padding: 20px; }
.card span { display: block; color: #8b97aa; font-size: 13px; }
.card strong { display: block; margin-top: 10px; color: #2c3850; font-size: 27px; }
.panel { overflow: auto; margin-bottom: 18px; padding: 21px 23px; box-shadow: 0 8px 28px #253b6205, 0 1px 3px #263a6004; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel h2 { margin: 0; font-size: 17px; font-weight: 690; }
.panel p.muted { font-size: 13px; }
.muted { color: #8e9bad; }
.hint { padding: 12px 14px; border: 1px solid #e2eafd; border-radius: 8px; background: #f5f8ff; color: #62758f; font-size: 13px; line-height: 1.6; }
.table-wrap { overflow: auto; }
table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #eff2f6; text-align: left; vertical-align: middle; }
th { color: #8793a5; background: #fafbfe; font-weight: 600; white-space: nowrap; }
td { color: #435168; }
.price-change-list { overflow: hidden; border: 1px solid #e7ebf2; border-radius: 10px; }
.price-change-product { border-bottom: 1px solid #edf1f6; background: #fff; }
.price-change-product:last-child { border-bottom: 0; }
.price-change-product[open] { background: #fafcff; }
.price-change-product > summary { display: grid; grid-template-columns: minmax(220px,1fr) minmax(180px,.8fr) auto 18px; align-items: center; gap: 18px; min-height: 66px; padding: 12px 15px; cursor: pointer; list-style: none; }
.price-change-product > summary::-webkit-details-marker { display: none; }
.price-change-product > summary:hover { background: #f8faff; }
.price-change-product > summary div { min-width: 0; }
.price-change-product > summary small { display: block; margin-bottom: 3px; color: #99a5b6; font-size: 10px; }
.price-change-product > summary strong { color: #315fba; font-size: 14px; }
.price-change-product > summary span { overflow: hidden; color: #66758b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.price-change-product > summary b { padding: 5px 9px; border-radius: 99px; background: #eef3ff; color: #5173b5; font-size: 11px; font-weight: 650; white-space: nowrap; }
.price-change-product > summary i { color: #8ea0bb; font-style: normal; transition: transform .15s; }
.price-change-product[open] > summary i { transform: rotate(180deg); }
.price-change-details { padding: 0 15px 15px; border-top: 1px solid #edf1f6; }
.price-change-product-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 3px 10px; }
.price-change-product-meta div { min-width: 0; }
.price-change-product-meta strong,.price-change-product-meta span { display: block; }
.price-change-product-meta strong { overflow: hidden; color: #435168; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.price-change-product-meta span { margin-top: 4px; color: #98a4b4; font-size: 10px; }
.price-change-product-meta a { flex: none; color: #356bd5; font-size: 11px; text-decoration: none; }
.price-change-details table { min-width: 720px; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 99px; background: #f1f3f7; color: #69778d; font-size: 12px; white-space: nowrap; }
.badge.yes, .badge.completed { background: #e9f6ed; color: #358453; }
.badge.no, .badge.failed, .badge.needs_login { background: #fff0ec; color: #ae5542; }
.badge.waiting_for_export, .badge.running, .badge.queued { background: #fff5dc; color: #946e20; }
.row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.row label { min-width: 160px; }
.row button { min-height: 42px; }
.stack { display: grid; gap: 14px; }
.stack textarea, .work-result textarea { width: 100%; padding: 10px 12px; border: 1px solid #dbe1ea; border-radius: 8px; background: #fff; color: #283348; font: inherit; resize: vertical; }
.stack textarea:focus-visible, .work-result textarea:focus-visible { outline: 2px solid #648cf1; outline-offset: 2px; }
.work-compose .row label { flex: 1 1 180px; }
.work-compose .stack > button { justify-self: start; }
.work-list { display: grid; gap: 12px; }
.work-item { padding: 18px 20px; border: 1px solid #e8edf4; border-radius: 10px; }
.work-item-head, .work-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.work-kind { color: #6380ac; font-size: 12px; font-weight: 650; }
.work-item h3 { margin: 11px 0 7px; color: #28354c; font-size: 16px; }
.work-meta, .work-description, .work-completed { margin: 0 0 10px; color: #8291a7; font-size: 13px; line-height: 1.6; }
.work-description { color: #51617a; white-space: pre-wrap; }
.work-completed { padding: 11px; border-radius: 7px; background: #f1f8f3; color: #36724d; white-space: pre-wrap; }
.work-controls { margin-top: 14px; }
.work-result { display: flex; align-items: end; gap: 9px; width: 100%; flex-wrap: wrap; }
.work-result label { flex: 1 1 280px; }
.work-history { margin-top: 12px; padding: 12px; border-radius: 8px; background: #f6f8fc; color: #758399; font-size: 12px; line-height: 1.8; }
.compose-mode .main { max-width: none; padding: 0; background: radial-gradient(circle at 50% 38%, #f4f8ff, #f8faff 62%, #fff); }
.compose-mode .top { display: none; }
.compose-mode #content { min-height: 100vh; }
.compose-shell { width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: clamp(55px, 10vh, 120px) 0 70px; }
.compose-hero { text-align: center; margin-bottom: 40px; }
.compose-kicker { color: #879dc7; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.compose-hero h2 { margin: 17px 0 13px; font-size: clamp(29px, 3.6vw, 48px); letter-spacing: -.04em; color: #1f2b42; }
.compose-hero h2 em { color: #4378ed; font-style: normal; }
.compose-hero p { color: #8792a5; font-size: clamp(14px, 1.5vw, 19px); }
.chat-composer { border: 1px solid #e5eaf4; border-radius: 21px; background: #fff; padding: 25px 27px 18px; box-shadow: 0 18px 55px #42639618; }
.chat-composer textarea { display: block; width: 100%; min-height: 125px; padding: 0; border: 0; outline: none; resize: vertical; color: #23324e; font: inherit; font-size: 17px; line-height: 1.7; }
.chat-composer textarea::placeholder { color: #a2aab9; }
.chat-composer textarea:disabled { background: #fff; }
.chat-composer.chat-dragover { border-color: #759bfa; background: #f4f7ff; box-shadow: 0 0 0 4px #7da4fa25; }
.chat-drop-hint { display: none; margin: 0 0 14px; padding: 14px; border: 1px dashed #759bfa; border-radius: 12px; color: #4d78d5; text-align: center; font-size: 13px; }
.chat-dragover .chat-drop-hint { display: block; }
.chat-pending-file { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 0 14px; padding: 6px 8px 6px 12px; border: 1px solid #dce7fc; border-radius: 10px; background: #f4f7ff; color: #456285; font-size: 12px; }
.chat-pending-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pending-file button { flex: none; padding: 0 5px; background: transparent; color: #6a7890; font-size: 18px; line-height: 1; }
.chat-composer-footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid #edf0f6; padding-top: 15px; }
.chat-mode { flex: none; min-width: 0; max-width: 115px; min-height: 36px; padding: 6px 9px; border: 1px solid #e7ebf2; border-radius: 9px; background: #fff; color: #56657d; font-size: 12px; }
.chat-fixed-model { min-width: 0; overflow: hidden; color: #677b9a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer-footer button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 24px; }
.chat-attach { display: inline-flex; align-items: center; min-height: 35px; margin-left: auto; white-space: nowrap; cursor: pointer; }
.chat-gallery { display: grid; gap: 12px; margin-bottom: 24px; }
.chat-gallery h3 { font-size: 14px; color: #63718a; }
.chat-asset { display: grid; gap: 10px; min-width: 0; border: 1px solid #e8edf4; border-radius: 14px; padding: 15px; background: #fff; }
.chat-asset img, .chat-asset video { display: block; max-width: 100%; max-height: 460px; border-radius: 10px; object-fit: contain; }
.chat-asset strong, .chat-asset span { color: #56657d; font-size: 13px; }
.chat-action-preview { margin-bottom: 16px; padding: 17px; border: 1px solid #e7eaf2; border-radius: 14px; background: #fff; }
.chat-action-fields { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.chat-action-fields label { flex: 1; }
.chat-action-preview p { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-action-preview button { margin-right: 10px; }
.chat-disclaimer { margin: 12px 0 40px; color: #9ca7b8; text-align: center; font-size: 12px; }
.compose-starters h3 { margin: 0 0 16px; color: #566477; font-size: 14px; }
.starter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.starter-grid button { position: relative; display: grid; gap: 9px; min-height: 146px; padding: 21px; border: 1px solid #ecf0f7; border-radius: 15px; background: #fff; text-align: left; box-shadow: 0 8px 24px #3b5e9c08; }
.starter-grid button:hover { background: #fdfdff; border-color: #cbdafa; }
.starter-grid button span { justify-self: end; color: #5c8cf4; font-size: 22px; }
.starter-grid button strong { color: #344058; font-size: 15px; }
.starter-grid button small { color: #9ca7b7; font-size: 12px; font-weight: 400; line-height: 1.5; }
.chat-history { display: grid; gap: 20px; margin-bottom: 30px; }
.chat-message { max-width: 85%; padding: 17px 20px; border: 1px solid #e7ecf6; border-radius: 16px; background: #fff; }
.chat-message.user { justify-self: end; background: #edf3ff; }
.chat-message span { color: #7391c4; font-size: 12px; font-weight: 700; }
.chat-message p { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #33425a; line-height: 1.7; }
#chat-stop { background: #edf2fb; color: #4f688b; font-size: 17px; }
.sidebar-recent { display: none; padding: 16px 20px; border-top: 1px solid #edf0f5; color: #929eb1; font-size: 12px; }
.compose-mode .sidebar-recent { display: block; }
.sidebar-recent-head { margin-bottom: 10px; color: #77869d; font-weight: 650; }
#recent-chats { display: grid; gap: 3px; max-height: 185px; overflow-y: auto; }
#recent-chats button { overflow: hidden; padding: 8px 0; background: none; color: #66758d; text-align: left; font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
#recent-chats button:hover { color: #4378ed; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media(max-width: 1000px) { .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 650px) { .compose-shell { width: calc(100% - 32px); padding-top: 44px; } .chat-composer { padding: 20px; } .chat-composer textarea { min-height: 110px; font-size: 15px; } .chat-composer-footer { flex-wrap: wrap; } .starter-grid { grid-template-columns: 1fr 1fr; } .starter-grid button { min-height: 135px; padding: 15px; } .sidebar-recent { display: none; } }
.checkline { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #55647a; }
.checkline input { min-height: auto; }
.empty { padding: 28px; text-align: center; color: #9ca7b7; }
.inline-action { padding: 7px 10px; font-size: 12px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.inline-link { color: #4277e9; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.store-overview { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 25px; padding: 30px 32px; border: 1px solid #e5ebf5; border-radius: 18px; background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%); box-shadow: 0 14px 36px #263a6009; }
.store-overview-copy { max-width: 570px; }
.store-overview-copy h2 { margin: 7px 0 10px; color: #1f2d45; font-size: 25px; letter-spacing: -.025em; }
.store-overview-copy p { margin: 0; color: #8390a4; font-size: 13px; line-height: 1.7; }
.store-overview-stats { display: grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: 10px; min-width: min(51%, 480px); }
.store-overview-stats div { padding: 13px 15px; border-left: 1px solid #e3eaf4; }
.store-overview-stats strong, .store-overview-stats span { display: block; }
.store-overview-stats strong { color: #2e5fc4; font-size: 24px; letter-spacing: -.03em; }
.store-overview-stats span { margin-top: 4px; color: #8a97a9; font-size: 11px; white-space: nowrap; }
.store-platform-group { margin-bottom: 24px; padding: 25px 27px 28px; border: 1px solid #e7ecf4; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px #263a6007; }
.store-platform-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.store-platform-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #293952; font-size: 18px; }
.store-platform-icon { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #edf3ff; color: #4676d8; font-size: 16px; font-weight: 750; }
.store-platform-icon.small { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.store-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.store-card { min-width: 0; padding: 18px 19px 17px; border: 1px solid #e8edf4; border-radius: 13px; background: #fcfdff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.store-card:hover { border-color: #c8d6f1; box-shadow: 0 9px 24px #375f9b10; transform: translateY(-1px); }
.store-card-head { display: flex; align-items: center; gap: 11px; }
.store-card-title { min-width: 0; flex: 1; }
.store-card-title h3 { overflow: hidden; margin: 0 0 4px; color: #2a3953; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.store-card-title p { overflow: hidden; margin: 0; color: #8c99aa; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.store-card-count { flex: none; color: #8493a8; font-size: 11px; }
.store-card-status { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr); gap: 12px; margin: 17px 0 13px; padding: 12px 0; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
.store-card-status > div { min-width: 0; }
.store-card-status small { display: block; margin-bottom: 6px; color: #9aa6b6; font-size: 11px; }
.store-card-status strong { display: block; overflow: hidden; color: #52627a; font-size: 12px; font-weight: 550; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.store-card-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; min-height: 18px; color: #9aa5b4; font-size: 11px; }
.store-card-actions { display: flex; gap: 8px; margin-top: 15px; }
.store-card-actions button { min-height: 35px; padding: 7px 12px; font-size: 12px; }
.erp-store-panel { margin-bottom: 24px; border-color: #dfe8f8; background: linear-gradient(145deg, #fff 0%, #f8fbff 100%); }
.erp-store-panel .panel-head { align-items: start; }
.erp-store-panel .row + .hint, .erp-store-panel .row + .table-wrap, .erp-store-panel .hint + .table-wrap { margin-top: 16px; }
.store-tools { margin-bottom: 18px; padding: 0 23px; border: 1px solid #e7ecf3; border-radius: 13px; background: #fff; box-shadow: 0 8px 28px #253b6205; }
.store-tools summary { padding: 18px 0; cursor: pointer; color: #52647f; font-size: 13px; font-weight: 650; list-style: none; }
.store-tools summary::-webkit-details-marker { display: none; }
.store-tools summary::before { display: inline-block; margin-right: 8px; color: #658be1; content: '＋'; font-size: 16px; }
.store-tools[open] summary::before { content: '−'; }
.store-tools summary span { margin-left: 7px; color: #9ba7b7; font-size: 11px; font-weight: 400; }
.store-tools-grid { display: grid; gap: 2px; padding-bottom: 8px; }
.store-tools-grid .panel { margin-bottom: 14px; box-shadow: none; }
.shop-shell { height: calc(100vh - 160px); min-height: 570px; display: flex; flex-direction: column; }
.shop-toolbar { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border: 1px solid #edf0f5; border-radius: 12px 12px 0 0; }
.shop-toolbar > div { display: grid; gap: 4px; margin-right: auto; }
.shop-toolbar strong { color: #273854; }
.shop-toolbar span { color: #7b8ba4; font-size: 12px; }
.shop-webview-host { flex: 1; min-height: 420px; border: 1px solid #edf0f5; border-top: 0; background: #fff; }
.shop-webview-host webview { display: flex; width: 100%; height: 100%; }
.shop-shell .hint { margin-top: 10px; }
.login-link { color: #4277e9; font-size: 13px; font-weight: 600; }
#shop-session-host { position: fixed; z-index: 5; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; }
#shop-session-host webview { position: fixed; display: flex; left: -10000px; top: -10000px; width: 1200px; height: 800px; opacity: .01; pointer-events: none; }

.connector-toolbar { margin-bottom: 19px; padding: 23px 27px; border: 1px solid #e9edf4; border-radius: 13px; background: #fff; box-shadow: 0 8px 28px #253b6205; }
.connector-toolbar .row { align-items: center; gap: 12px; }
.connector-toolbar label { display: block; min-width: 70px; color: #536278; font-size: 13px; }
.connector-toolbar .search-input { position: relative; width: clamp(230px, 35vw, 400px); }
.search-input span { position: absolute; top: 50%; left: 15px; transform: translateY(-54%); color: #a1aec2; font-size: 21px; line-height: 1; }
.search-input input { width: 100%; height: 43px; padding-left: 41px; background: #fcfdff; }
.connector-section { padding: 27px 27px 30px; }
.connector-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.section-kicker { display: block; margin-bottom: 7px; color: #a1aebe; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.connector-section-head h2 { color: #243149; font-size: 19px; letter-spacing: -.01em; }
.section-count { color: #a1aec0; font-size: 12px; }
.connector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.connector-card { display: flex; position: relative; align-items: center; gap: 14px; min-width: 0; min-height: 103px; padding: 16px; border: 1px solid #e8edf4; border-radius: 11px; background: #fff; color: #263449; text-align: left; }
.connector-card:hover { border-color: #b9caf3; background: #fbfcff; box-shadow: 0 8px 24px #27497b13; transform: translateY(-1px); }
.connector-icon { display: grid; place-items: center; flex: none; width: 49px; height: 49px; border-radius: 12px; background: #eaf0ff; color: #426bd6; font-size: 23px; font-weight: 750; }
.connector-icon.orange { background: #fff0e5; color: #dc7138; }
.connector-icon.red { background: #fff0ed; color: #dc5e57; }
.connector-icon.black { background: #eceef3; color: #41485a; }
.connector-info { display: grid; gap: 8px; min-width: 0; flex: 1; }
.connector-name { overflow: hidden; color: #2e3a50; font-size: 15px; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
.connector-info small { overflow: hidden; color: #96a2b4; font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.connector-shop small { display: block; margin-top: 6px; color: #94a0b1; font-size: 12px; font-weight: 400; line-height: 1.6; }
.connector-status { flex: none; padding: 3px 7px; border-radius: 5px; background: #f2f5fb; color: #7588a8; font-size: 10px; font-weight: 600; white-space: nowrap; }
.connector-status.data_available { background: #eaf6ee; color: #347c50; }
.connector-status.manual_report, .connector-status.configured { background: #eaf0ff; color: #4369bb; }
.connector-status.unsupported { background: #f1f2f5; color: #9aa5b4; }
.connector-card .connector-info { min-width: 0; }
.pending-connectors { margin-top: 23px; border-top: 1px solid #edf1f6; }
.pending-connectors summary { width: fit-content; padding: 20px 0 2px; cursor: pointer; color: #8090a7; font-size: 13px; font-weight: 550; }
.pending-connectors summary span { margin-left: 5px; color: #a9b4c3; }
.pending-connectors .connector-grid { padding-top: 15px; }
.pending-connectors .connector-card { background: #fbfcfe; }
.pending-connectors .connector-icon { opacity: .65; }
.connector-back { margin: 0 0 18px; padding: 8px 0; background: transparent; color: #667eaa; font-size: 13px; }
.connector-back:hover { background: transparent; color: #3b6bcb; }
.connector-detail { padding: 0; }
.connector-detail-head { display: flex; align-items: center; gap: 16px; padding: 27px 30px; border-bottom: 1px solid #edf0f5; }
.connector-detail-head h2 { margin: 0 0 4px; color: #27354e; font-size: 20px; }
.connector-detail-head p { margin: 0; color: #96a2b3; font-size: 12px; }
.connector-detail-head .connector-status { margin-left: auto; font-size: 12px; }
.connector-detail-body { padding: 27px 30px 32px; }
.connector-detail-status { margin: 0 0 7px; color: #425674; font-size: 16px; font-weight: 650; }
.connector-detail-body > .muted { margin-bottom: 22px; }
.connector-actions { display: grid; justify-items: start; gap: 15px; margin-top: 18px; }
.connector-shop-list { display: grid; width: 100%; gap: 12px; }
.connector-shop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; padding: 16px 18px; border: 1px solid #e9edf3; border-radius: 10px; }
.connector-shop > div { margin-right: auto; }
.connector-shop strong { display: block; }

.skill-panel { margin: 0 0 20px; padding: 18px 20px; border: 1px solid #e8edf4; border-radius: 14px; background: #fff; }
.skill-square { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 26px; }
.skill-card { display: grid; gap: 13px; padding: 24px; text-align: left; border: 1px solid #e5eaf2; border-radius: 15px; background: #fff; color: #314561; box-shadow: 0 5px 22px #263a6010; }
.skill-card:hover { background: #f9fbff; border-color: #b8caeb; }
.skill-card-icon { font-size: 27px; color: #5a79b9; }
.skill-card strong { font-size: 17px; }
.skill-card p { min-height: 43px; margin: 0; font-size: 13px; line-height: 1.7; color: #8490a3; }
.skill-card small { font-size: 11px; color: #8994a6; }
.skill-card-start { font-size: 12px; color: #577ac0; }
.skill-report-preview { width: 100%; height: 650px; margin-top: 12px; border: 1px solid #e5eaf2; border-radius: 10px; background: white; }
.skill-selectors { display: flex; flex-wrap: wrap; gap: 14px; }
.skill-selectors label { display: grid; gap: 7px; flex: 1; min-width: 190px; color: #6c7b91; font-size: 12px; }
.skill-selectors select { width: 100%; padding: 10px; border: 1px solid #e4eaf2; border-radius: 8px; background: #f9fbfd; color: #2b3f5d; }
.skill-summary { margin-top: 16px; font-size: 13px; color: #65748b; }
.skill-summary p { margin: 8px 0; line-height: 1.6; }
.skill-panel details { margin-top: 14px; font-size: 12px; color: #65748b; }
.skill-panel summary { cursor: pointer; }
.skill-panel textarea { width: 100%; margin: 9px 0; padding: 10px; font-family: monospace; }
.skill-panel details label { display: block; margin-top: 12px; }
.skill-run { padding: 12px 0; border-top: 1px solid #edf1f6; }
.skill-run small { display: block; margin: 7px 0; }
.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: #f6f8fc; }
.login-card { display: grid; gap: 16px; width: min(420px, 100%); padding: 36px; border: 1px solid #e8ecf3; border-radius: 15px; background: #fff; box-shadow: 0 16px 48px #273b6012; }
.login-logo { justify-self: center; width: 132px; height: 132px; object-fit: contain; }
.login-card h1 { margin: 0; text-align: center; font-size: 24px; }
.login-card p { margin: 0 0 5px; color: #909caf; text-align: center; }
.login-card button { min-height: 44px; margin-top: 4px; }
.device-login { padding-top: 2px; border-top: 1px solid #edf0f5; }
.device-login summary { padding-top: 14px; cursor: pointer; color: #5273ad; text-align: center; font-size: 13px; font-weight: 650; }
.device-login .stack { margin-top: 14px; }
.device-login p { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
#notice { position: fixed; z-index: 10; top: 20px; right: 20px; display: none; max-width: 420px; padding: 13px 16px; border-radius: 8px; background: #314a77; box-shadow: 0 8px 28px #273b6030; color: #fff; font-size: 13px; }
#notice.error { background: #ad5245; }
#notice.show { display: block; }

.operations-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 18px; padding: 31px 34px; overflow: hidden; border: 1px solid #dfe7f5; border-radius: 18px; background: linear-gradient(135deg,#fff 8%,#f3f7ff 100%); box-shadow: 0 18px 45px #29446f0b; }
.operations-hero > div { max-width: 690px; }
.operations-hero h2 { margin: 8px 0 10px; color: #20304a; font-size: 28px; letter-spacing: -.035em; }
.operations-hero p { margin: 0; color: #7f8da2; font-size: 13px; line-height: 1.75; }
.operations-hero button { display: flex; align-items: center; gap: 9px; flex: none; min-height: 49px; padding: 12px 19px; border-radius: 12px; box-shadow: 0 10px 22px #4277e92b; }
.operations-hero button span { font-size: 19px; font-weight: 400; }
.operation-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.operation-summary > div { position: relative; min-width: 0; padding: 19px 21px; overflow: hidden; border: 1px solid #e8edf4; border-radius: 13px; background: #fff; }
.operation-summary > div::before { position: absolute; top: 0; right: 0; width: 70px; height: 70px; border-radius: 0 0 0 70px; background: #eef3ff; content: ''; opacity: .7; }
.operation-summary > div.good::before { background: #e6f5eb; }
.operation-summary > div.partial::before { background: #fff2d8; }
.operation-summary > div.attention::before { background: #ffebe6; }
.operation-summary span,.operation-summary small,.operation-summary strong { display: block; position: relative; }
.operation-summary span { color: #7e8ca1; font-size: 12px; }
.operation-summary strong { margin: 8px 0 3px; color: #283953; font-size: 29px; letter-spacing: -.04em; }
.operation-summary small { color: #a0aaba; font-size: 11px; }
.operation-toolbar { display: flex; align-items: end; gap: 12px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #e7ecf4; border-radius: 13px; background: #fff; }
.operation-toolbar label { flex: 0 1 230px; }
.operation-toolbar label:first-child { flex: 1 1 300px; }
.operation-toolbar label span,.operation-toolbar > div span { color: #98a4b5; font-size: 11px; }
.operation-toolbar input,.operation-toolbar select { width: 100%; }
.operation-toolbar > div { display: grid; gap: 7px; margin-left: auto; padding: 0 8px 6px 16px; white-space: nowrap; }
.operation-toolbar > div strong { color: #4f6078; font-size: 13px; }
.operation-platform { margin-bottom: 19px; padding: 22px 24px 24px; border: 1px solid #e7ecf4; border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #2b406908; }
.operation-platform-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.operation-platform-head h2 { display: flex; align-items: center; gap: 11px; margin: 0; color: #2b3a52; font-size: 17px; }
.operation-platform-head > span { color: #9aa6b6; font-size: 12px; }
.operation-store-list { display: grid; gap: 11px; }
.operation-store { border: 1px solid #e8edf4; border-radius: 12px; background: #fcfdff; }
.operation-store[open] { border-color: #cfdcf2; box-shadow: 0 10px 28px #294d8510; }
.operation-store > summary { display: grid; grid-template-columns: minmax(220px,1.15fr) 150px minmax(410px,2fr) auto; align-items: center; gap: 17px; padding: 16px 18px; cursor: pointer; list-style: none; }
.operation-store > summary::-webkit-details-marker { display: none; }
.operation-store-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.operation-store-title > div { min-width: 0; }
.operation-store-title h3 { overflow: hidden; margin: 0 0 4px; color: #2a3850; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.operation-store-title p { overflow: hidden; margin: 0; color: #9aa5b4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.operation-store-progress > span { display: block; margin-bottom: 6px; color: #718096; font-size: 11px; text-align: right; }
.operation-store-progress > div { height: 5px; overflow: hidden; border-radius: 5px; background: #edf1f6; }
.operation-store-progress i { display: block; height: 100%; border-radius: inherit; background: #55a875; }
.operation-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.operation-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; background: #f2f4f8; color: #748298; font-size: 10px; }
.operation-pill i { width: 5px; height: 5px; border-radius: 50%; background: #96a2b2; }
.operation-pill b { font-weight: 500; opacity: .8; }
.operation-pill.verified { background: #eaf6ee; color: #357d50; }
.operation-pill.verified i { background: #46a267; }
.operation-pill.partial,.operation-pill.running { background: #fff5de; color: #8c6b2c; }
.operation-pill.partial i,.operation-pill.running i { background: #d59d33; }
.operation-pill.missing,.operation-pill.waiting,.operation-pill.failed { background: #fff0ec; color: #a75a4b; }
.operation-pill.missing i,.operation-pill.waiting i,.operation-pill.failed i { background: #d66e5b; }
.operation-pill.unsupported { color: #99a4b3; }
.operation-expand { color: #7388aa; font-size: 11px; white-space: nowrap; }
.operation-domain-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; padding: 0 18px 18px; border-top: 1px solid #edf1f6; }
.operation-domain { min-width: 0; margin-top: 16px; padding: 16px; border: 1px solid #e8edf4; border-radius: 10px; background: #fff; }
.operation-domain-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.operation-domain-head strong { color: #33425a; font-size: 13px; }
.operation-domain-head span { padding: 3px 6px; border-radius: 5px; background: #f1f3f7; color: #79869a; font-size: 10px; }
.operation-domain.verified .operation-domain-head span { background: #eaf6ee; color: #357d50; }
.operation-domain.partial .operation-domain-head span,.operation-domain.running .operation-domain-head span { background: #fff5de; color: #8c6b2c; }
.operation-domain.missing .operation-domain-head span,.operation-domain.waiting .operation-domain-head span,.operation-domain.failed .operation-domain-head span { background: #fff0ec; color: #a75a4b; }
.operation-domain-number { margin: 17px 0 14px; color: #2d3e58; font-size: 24px; font-weight: 720; }
.operation-domain-number small { margin-left: 3px; color: #9aa5b4; font-size: 10px; font-weight: 400; }
.operation-domain dl { display: grid; gap: 7px; margin: 0; }
.operation-domain dl div { display: grid; grid-template-columns: 55px minmax(0,1fr); gap: 9px; font-size: 10px; line-height: 1.45; }
.operation-domain dt { color: #a0aab8; }
.operation-domain dd { overflow: hidden; margin: 0; color: #64738a; text-overflow: ellipsis; white-space: nowrap; }
.operation-domain p { min-height: 35px; margin: 13px 0 12px; color: #7f8da1; font-size: 11px; line-height: 1.55; }
.operation-note { margin-top: 5px; }
.collection-progress { margin-bottom: 18px; padding: 20px 23px; border: 1px solid #dce6f7; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px #294d8509; }
.collection-progress-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.collection-progress-head h3 { margin: 6px 0 0; color: #30425f; font-size: 16px; }
.collection-progress-head > strong { color: #4f76c5; font-size: 19px; }
.progress-track { height: 7px; margin: 15px 0; overflow: hidden; border-radius: 7px; background: #edf1f7; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5a85e7,#68b487); transition: width .25s; }
.collection-progress ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.collection-progress li { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 10px; border-radius: 7px; background: #f7f9fc; color: #748299; font-size: 11px; }
.collection-progress li strong { color: #53647c; font-weight: 550; text-align: right; }
.collection-progress li.failed strong,.collection-progress li.needs_login strong { color: #ad5949; }
.collection-progress > p { margin: 14px 0 0; color: #8190a5; font-size: 11px; }
.collection-simple { margin: 0 0 12px; overflow: hidden; border: 1px solid #e1e8f2; border-radius: 12px; background: #fff; }
.collection-simple-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 19px 14px; }
.collection-simple-head h3 { margin: 3px 0 3px; color: #33445d; font-size: 16px; }
.collection-simple-head p { margin: 0; color: #8a97aa; font-size: 10px; }
.collection-simple-head > span { color: #5577b6; font-size: 10px; white-space: nowrap; }
.collection-platform-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 19px 12px; }
.collection-platform-tabs button { min-height: 30px; padding: 5px 12px; border: 0; border-radius: 7px; background: #f2f5f9; color: #708097; font-size: 10px; box-shadow: none; white-space: nowrap; }
.collection-platform-tabs button.active { background: #e8efff; color: #3971e4; }
.collection-simple-flow { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); border-top: 1px solid #edf1f6; }
.collection-simple-step { min-width: 0; padding: 16px 19px; }
.collection-simple-step + .collection-simple-step { border-left: 1px solid #edf1f6; }
.collection-simple-step > b { display: flex; align-items: center; gap: 8px; color: #45566e; font-size: 11px; }
.collection-simple-step > b i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #edf3ff; color: #3971e4; font-size: 9px; font-style: normal; }
.collection-simple-fields { display: grid; grid-template-columns: 1.15fr 1.25fr minmax(125px,.75fr) auto; align-items: end; gap: 8px; margin-top: 12px; }
.collection-simple-fields label { display: grid; gap: 5px; min-width: 0; }
.collection-simple-fields label > span { color: #8a97aa; font-size: 9px; }
.collection-simple-fields select,.collection-simple-fields input { width: 100%; min-width: 0; }
.collection-simple-fields button,.collection-simple-backfill button { min-height: 38px; padding: 8px 13px; white-space: nowrap; }
.collection-simple-note { margin: 9px 0 0; color: #8a97aa; font-size: 9px; line-height: 1.5; }
.collection-simple-backfill { display: grid; gap: 12px; margin-top: 12px; }
.collection-simple-backfill > div { display: grid; gap: 4px; }
.collection-simple-backfill strong { color: #405169; font-size: 13px; }
.collection-simple-backfill span,.collection-simple-backfill small { color: #8794a7; font-size: 9px; line-height: 1.45; }
.collection-simple-status { border-top: 1px solid #edf1f6; }
.collection-simple-status > summary { padding: 11px 19px; color: #66758b; cursor: pointer; font-size: 10px; list-style-position: inside; }
.collection-simple-status > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 7px; padding: 0 19px 15px; }
.collection-simple-status article { padding: 9px 10px; border-radius: 7px; background: #f8fafc; }
.collection-simple-status article > span { color: #45566e; font-size: 10px; }
.collection-simple-status article > b { display: block; margin-top: 3px; color: #7d899a; font-size: 8px; font-weight: 550; }
.collection-simple-status article details { margin-top: 5px; color: #8794a7; font-size: 8px; }
.collection-simple-status article p,.collection-simple-status article small { display: block; margin: 5px 0 0; line-height: 1.45; }
.collection-simple-status article pre { max-height: 190px; overflow: auto; white-space: pre-wrap; }
.collection-last-issues { margin: 0 19px 15px; border-radius: 8px; background: #fff8ed; }
.collection-last-issues > summary { padding: 10px 12px; color: #876536; cursor: pointer; font-size: 10px; font-weight: 600; }
.collection-last-issues > div { max-height: 260px; overflow: auto; padding: 0 12px 10px; }
.collection-last-issues p { display: grid; grid-template-columns: minmax(180px,.8fr) 1.7fr; gap: 12px; margin: 5px 0; color: #8c7557; font-size: 9px; line-height: 1.5; }
.collection-last-issues strong { color: #775a32; }
.collection-result-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 3px; }
.collection-result-summary span { padding: 6px 10px; border-radius: 999px; background: #f3f6fb; color: #53627a; font-size: 10px; font-weight: 650; }
.collection-result-detail { margin-top: 9px; border-top: 1px solid #e8edf5; padding-top: 9px; }
.collection-result-detail > summary { cursor: pointer; color: #55708f; font-size: 10px; font-weight: 650; }
.collection-result-detail ul { margin-top: 9px; max-height: 260px; overflow: auto; }

@media (max-width: 1350px) { .connector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards,.operation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .operation-store > summary { grid-template-columns: minmax(230px,1fr) 140px minmax(300px,1.5fr); } .operation-expand { display: none; } .operation-domain-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .collection-simple-flow { grid-template-columns: 1fr; } .collection-simple-step + .collection-simple-step { border-top: 1px solid #edf1f6; border-left: 0; } }
@media (max-width: 800px) { .app { grid-template-columns: 190px minmax(0, 1fr); } .main { padding: 32px 20px 60px; } .brand { padding-left: 17px; } .sidebar nav { padding-inline: 9px; } .split { grid-template-columns: 1fr; } .collection-simple-head { align-items: flex-start; flex-direction: column; } .collection-simple-fields { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .app { display: block; } .sidebar { position: static; height: auto; min-height: 0; } .brand { padding: 15px 18px; } .sidebar nav { display: flex; gap: 8px; overflow: auto; padding: 3px 12px 12px; } .nav-group { display: flex; flex: none; gap: 4px; align-items: center; } .nav-group > .nav-heading { display: none; } .nav-collapse summary { display: flex; align-items: center; flex: none; padding: 9px; border-radius: 8px; white-space: nowrap; } .nav-collapse[open] summary { background: #ecf2ff; color: #386fe4; } .sidebar nav button { width: auto; white-space: nowrap; } .sidebar-foot { display: none; } .main { padding: 24px 16px 60px; } .top { flex-direction: column; } .top h1 { font-size: 24px; } .connector-grid { grid-template-columns: 1fr; } .connector-toolbar { padding: 18px; } .connector-toolbar .search-input { width: 100%; } .connector-toolbar .row { align-items: stretch; } .connector-detail-head { flex-wrap: wrap; } .store-overview { display: block; padding: 23px 20px; } .store-overview-stats { min-width: 0; margin-top: 23px; grid-template-columns: repeat(2, 1fr); } .store-overview-stats div { border-left: 0; border-top: 1px solid #e3eaf4; } .store-platform-group { padding: 21px 17px; } .store-card-grid { grid-template-columns: 1fr; } .operations-hero { display: block; padding: 24px 20px; } .operations-hero button { margin-top: 20px; width: 100%; justify-content: center; } .operation-summary { grid-template-columns: 1fr 1fr; } .operation-toolbar { display: grid; grid-template-columns: 1fr; } .operation-toolbar > div { margin-left: 0; padding-left: 0; } .operation-platform { padding: 18px 13px; } .operation-store > summary { grid-template-columns: 1fr; } .operation-store-progress > span { text-align: left; } .operation-domain-grid { grid-template-columns: 1fr; padding-inline: 12px; } .collection-progress li { display: grid; } .collection-progress li strong { text-align: left; } }

/* 经营数据：汇总在上，店铺明细按需展开。 */
.operations-hero { margin-bottom: 14px; padding: 18px 21px; border-radius: 13px; box-shadow: none; }
.operations-hero > div { max-width: none; }
.operations-hero h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.02em; }
.operations-hero p { font-size: 12px; line-height: 1.45; }
.operations-hero button { min-height: 42px; padding: 9px 16px; border-radius: 9px; box-shadow: none; }
.operations-hero button span { font-size: 16px; }
.operation-range { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.operation-range-tabs { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #e3e9f1; border-radius: 9px; background: #f7f9fc; }
.operation-range-tabs button { min-height: 30px; padding: 5px 14px; border: 0; border-radius: 6px; background: transparent; color: #728096; font-size: 11px; font-weight: 600; box-shadow: none; }
.operation-range-tabs button:hover { background: #fff; color: #355b9f; }
.operation-range-tabs button.active { background: #fff; color: #2e67c7; box-shadow: 0 1px 4px rgba(31,53,88,.1); }
.operation-range > span { color: #98a4b5; font-size: 10px; }
.operation-sync-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 10px; padding: 11px 15px; border: 1px solid #e4eaf2; border-radius: 10px; background: #fff; }
.operation-sync-status > div { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.operation-sync-status > div span,.operation-sync-status > div small { color: #8e9bad; font-size: 10px; }
.operation-sync-status > div strong { color: #33445d; font-size: 17px; }
.operation-sync-status p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.operation-sync-status p b { padding: 4px 7px; border-radius: 6px; background: #f2f4f8; color: #7d899a; font-size: 9px; font-weight: 600; }
.operation-sync-status p b.verified { background: #eaf6ee; color: #357d50; }
.operation-sync-status p b.partial { background: #fff5de; color: #8c6b2c; }
.operation-sync-status p b.missing,.operation-sync-status p b.waiting { background: #fff0ec; color: #a75a4b; }
.operation-sync-status em { color: #98a4b5; font-size: 9px; font-style: normal; text-align: right; }
.operation-summary { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.operation-summary > div { padding: 15px 16px; border-radius: 10px; }
.operation-summary > div::before { display: none; }
.operation-summary span { font-size: 11px; }
.operation-summary strong { overflow: hidden; margin: 7px 0 4px; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.operation-summary small { overflow: hidden; min-height: 29px; color: #98a4b5; font-size: 10px; line-height: 1.45; }
.operation-directory { overflow: hidden; border: 1px solid #e3e9f1; border-radius: 13px; background: #fff; }
.operation-directory-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; cursor: pointer; list-style: none; }
.operation-directory-fold > summary::-webkit-details-marker { display: none; }
.operation-directory-fold > summary strong,.operation-directory-fold > summary small { display: block; }
.operation-directory-fold > summary strong { color: #40516a; font-size: 13px; }
.operation-directory-fold > summary small { margin-top: 4px; color: #98a4b5; font-size: 10px; font-weight: 400; }
.operation-directory-fold > summary > span { color: #55708f; font-size: 11px; font-weight: 650; white-space: nowrap; }
.operation-directory-fold > summary > span::after { content: '⌄'; display: inline-block; margin-left: 8px; transition: transform .15s; }
.operation-directory-fold[open] > summary > span::after { transform: rotate(180deg); }
.operation-directory-fold[open] > summary { border-bottom: 1px solid #e9edf3; background: #fbfcfe; }
.operation-toolbar { margin: 0; padding: 13px 16px; border: 0; border-bottom: 1px solid #e9edf3; border-radius: 0; background: #fbfcfe; }
.operation-toolbar label { flex: 0 1 210px; }
.operation-toolbar label:first-child { flex: 0 1 280px; }
.operation-toolbar > div { display: flex; align-items: baseline; gap: 5px; padding-bottom: 8px; }
.operation-toolbar > div strong { color: #34445d; font-size: 18px; }
.operation-list-header,.operation-store > summary { display: grid; grid-template-columns: minmax(175px,1.35fr) repeat(5,minmax(90px,.9fr)) minmax(82px,.7fr) 16px; align-items: center; gap: 12px; }
.operation-list-header { padding: 10px 17px; border-bottom: 1px solid #e9edf3; background: #f6f8fb; color: #929eae; font-size: 10px; }
.operation-store-list { display: block; }
.operation-store { border: 0; border-bottom: 1px solid #edf0f4; border-radius: 0; background: #fff; }
.operation-store:last-child { border-bottom: 0; }
.operation-store[open] { border-color: #dce4ef; box-shadow: none; }
.operation-store > summary { padding: 13px 17px; }
.operation-store > summary:hover { background: #fafcff; }
.operation-store-title h3 { margin-bottom: 3px; font-size: 13px; }
.operation-store-title p { font-size: 10px; }
.operation-store-figure,.operation-store-state { min-width: 0; }
.operation-store-figure strong,.operation-store-state strong { display: block; overflow: hidden; color: #3b4b63; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.operation-store-figure small,.operation-store-state small { display: block; overflow: hidden; margin-top: 4px; color: #98a4b5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.operation-store-state strong { color: #4a7d5b; }
.operation-expand { color: #8ca0bc; font-size: 13px; transition: transform .15s; }
.operation-store[open] .operation-expand { transform: rotate(180deg); }
.operation-domain-grid { display: block; padding: 6px 17px 13px; border-top: 1px solid #edf1f6; background: #fafbfd; }
.operation-domain { display: grid; grid-template-columns: 115px 70px 150px minmax(220px,1fr) auto; align-items: center; gap: 13px; margin-top: 7px; padding: 9px 11px; border-radius: 7px; }
.operation-domain-head { justify-content: flex-start; }
.operation-domain-head strong { min-width: 48px; font-size: 11px; }
.operation-domain-head span { white-space: nowrap; }
.operation-domain-count { color: #43536b; font-size: 11px; font-weight: 600; }
.operation-domain-date { color: #728197; font-size: 10px; white-space: nowrap; }
.operation-domain-source { min-width: 0; }
.operation-domain-source b,.operation-domain-source small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-domain-source b { color: #52627a; font-size: 10px; font-weight: 550; }
.operation-domain-source small { margin-top: 3px; color: #99a4b3; font-size: 9px; }
.operation-domain .inline-action { min-width: 45px; padding: 5px 8px; font-size: 10px; }
.operation-note { margin-top: 10px; }

@media (max-width: 1450px) {
  .operation-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .operation-list-header,.operation-store > summary { grid-template-columns: minmax(165px,1.3fr) repeat(5,minmax(78px,.85fr)) minmax(75px,.7fr) 15px; gap: 9px; }
}
@media (max-width: 1000px) {
  .operation-sync-status { grid-template-columns: 1fr; gap: 8px; }
  .operation-sync-status em { text-align: left; }
  .operation-list-header { display: none; }
  .operation-store > summary { grid-template-columns: minmax(180px,1.3fr) repeat(2,minmax(90px,1fr)) 15px; }
  .operation-store > summary .operation-store-figure:nth-of-type(n+4),.operation-store-state { display: none; }
  .operation-domain { grid-template-columns: 105px 65px 130px minmax(180px,1fr) auto; }
}
@media (max-width: 650px) {
  .operations-hero { padding: 17px; }
  .operations-hero button { margin-top: 14px; }
  .operation-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operation-range { align-items: flex-start; flex-direction: column; gap: 7px; }
  .operation-range-tabs { width: 100%; }
  .operation-range-tabs button { flex: 1; padding-inline: 5px; }
  .operation-summary > div { padding: 13px; }
  .operation-toolbar { grid-template-columns: 1fr 1fr; }
  .operation-toolbar > div { grid-column: 1 / -1; margin-left: 0; padding: 0; }
  .operation-store > summary { grid-template-columns: minmax(0,1fr) 15px; }
  .operation-store > summary .operation-store-figure,.operation-store > summary .operation-store-state { display: none; }
  .operation-domain-grid { padding-inline: 10px; }
  .operation-domain { grid-template-columns: 1fr auto; gap: 7px 10px; }
  .operation-domain-count,.operation-domain-date { font-size: 10px; }
  .operation-domain-source { grid-column: 1 / -1; }
  .operation-domain .inline-action { grid-column: 2; grid-row: 1; }
  .price-change-product > summary { grid-template-columns: minmax(0,1fr) auto 16px; gap: 9px; }
  .price-change-product > summary span { grid-column: 1; grid-row: 2; }
  .price-change-product > summary b { grid-column: 2; grid-row: 1 / span 2; }
  .price-change-product > summary i { grid-column: 3; grid-row: 1 / span 2; }
}