:root {
    --navy: #073b2a;
    --navy-2: #0b5138;
    --navy-3: #126b4a;
    --blue: #0f8f62;
    --blue-dark: #0a6f4b;
    --cyan: #34c58a;
    --bg: #eef5f1;
    --surface: #fff;
    --surface-soft: #f4f8f6;
    --line: #d4e1da;
    --line-dark: #bdcec5;
    --text: #24382e;
    --muted: #6f8177;
    --success: #0f8f62;
    --warning: #b65d13;
    --danger: #c33b4a;
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}

* { box-sizing: border-box; }
html { min-width: 1180px; background: var(--bg); }
body { margin: 0; background: var(--bg); font-size: 12px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.promo-strip { position: sticky; top: 0; z-index: 100; display: flex; height: 32px; align-items: center; gap: 28px; padding: 0 18px; border-bottom: 1px solid #b9d7c7; background: linear-gradient(90deg, #e2f6eb 0 55%, #0f8f62 55%); color: #087751; }
.promo-strip strong { font-size: 13px; }
.promo-strip span { color: #3c7660; }
.promo-strip .promo-right { margin-left: auto; color: #fff; }

.global-header { position: sticky; top: 32px; z-index: 99; display: flex; height: 48px; align-items: center; gap: 10px; padding: 0 9px; background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.home-symbol { display: grid; width: 34px; height: 34px; margin: 0 2px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; background: linear-gradient(135deg, #20ad79, #08704f); color: #fff; font-size: 19px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.seller-center { padding: 8px 12px; border-radius: 2px; background: #dbe7e0; color: #123b2b; font-weight: 700; white-space: nowrap; }
.header-icons { display: flex; align-items: center; gap: 2px; }
.header-icons a, .gear-button { display: grid; width: 34px; height: 34px; place-items: center; color: #b9dac9; font-size: 16px; }
.header-icons a:hover, .gear-button:hover { color: #fff; background: #0c5b3f; }
.notice-ticker { min-width: 180px; flex: 1; overflow: hidden; color: #c8ded3; text-overflow: ellipsis; white-space: nowrap; }
.notice-ticker b { color: #e3f4eb; }
.global-search { display: grid; width: min(460px, 38vw); grid-template-columns: 145px 1fr 38px; }
.global-search select, .global-search input { height: 31px; border: 0; border-right: 1px solid #92aa9d; border-radius: 0; background: #dbe5df; }
.global-search select { padding: 0 8px; }
.global-search input { padding: 0 9px; }
.global-search button { border: 0; background: #0c7652; color: #fff; font-size: 20px; cursor: pointer; }
.quick-button { height: 31px; padding: 7px 15px; border: 1px solid #9bb9a9; background: #f4f7f5; color: #173e2d; font-weight: 700; white-space: nowrap; }
.quick-button.secondary { background: #d8eee2; }
.gear-button { width: 36px; background: #167a55; color: #ddf6e9; }

.work-tabs { position: sticky; top: 80px; z-index: 96; display: flex; height: 34px; align-items: end; gap: 2px; padding: 3px 8px 0 66px; border-bottom: 1px solid #9db2a7; background: #d9e2dd; }
.work-tab { display: flex; min-width: 148px; height: 30px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; transform: skew(-12deg); border: 1px solid #adbbb4; border-bottom: 0; background: #c7d2cc; color: #40584b; }
.work-tab > * { transform: skew(12deg); }
.work-tab i { margin-left: auto; color: #879a90; font-style: normal; }
.work-tab.active { background: #fff; color: #193b2c; }
.work-tab.home { min-width: 54px; max-width: 54px; font-size: 16px; }

.category-rail { position: fixed; top: 114px; bottom: 0; left: 0; z-index: 95; width: 60px; background: #06412e; color: #c8e4d6; }
.category-rail ul { margin: 0; padding: 0; list-style: none; }
.rail-item { position: relative; border-bottom: 1px solid rgba(255,255,255,.08); }
.rail-link { display: flex; height: 62px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #d9eee3; }
.rail-link:hover, .rail-item.active > .rail-link { background: #07583c; color: #fff; }
.rail-item.active > .rail-link { box-shadow: inset 3px 0 var(--cyan); }
.rail-icon { font-size: 17px; }
.submenu-panel { position: absolute; top: 0; left: 60px; display: none; width: 220px; padding: 11px 0 12px; border: 1px solid #0a6444; background: #085037; box-shadow: 7px 7px 18px rgba(3,39,25,.24); }
.rail-item:hover .submenu-panel, .rail-item:focus-within .submenu-panel { display: block; }
.submenu-panel strong { display: block; padding: 6px 15px 10px; border-bottom: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 13px; }
.submenu-panel a { display: flex; height: 34px; align-items: center; gap: 9px; padding: 0 14px; color: #d0e8dc; }
.submenu-panel a span { color: #5fd4a0; font-size: 7px; }
.submenu-panel a:hover, .submenu-panel a.active { background: #0d704c; color: #fff; }
.rail-disabled { display: flex; height: 43px; flex-direction: column; align-items: center; justify-content: center; color: #719984; }
.rail-disabled small { font-size: 9px; }

.app-main { min-height: calc(100vh - 114px); margin-left: 60px; }
.page-caption { display: flex; height: 38px; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); background: #fff; }
.page-caption strong { font-size: 13px; }
.page-caption span { color: var(--muted); font-size: 10px; }
.content-area { padding: 11px 12px 50px; }

.alert { margin-bottom: 10px; padding: 10px 13px; border: 1px solid; border-radius: 2px; }
.alert.success { border-color: #9fd8c4; background: #e9f8f3; color: #087653; }
.alert.error { border-color: #efb3ba; background: #fff0f2; color: #ad2838; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

.plto-workspace { display: grid; grid-template-columns: 275px minmax(760px, 1fr); gap: 10px; align-items: start; }
.search-sidebar, .data-surface, .panel, .form-card, .table-card, .dashboard-card { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 2px rgba(20,35,56,.04); }
.search-sidebar { position: sticky; top: 122px; }
.side-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #f4f6f8; }
.side-tabs a { padding: 11px 3px; border-right: 1px solid var(--line); color: #6e7b8e; text-align: center; }
.side-tabs a.active { border-top: 2px solid var(--blue); background: #fff; color: var(--blue); font-weight: 700; }
.search-form { padding: 12px; }
.search-block { padding: 0 0 13px; border-bottom: 1px solid #e6e9ee; margin-bottom: 13px; }
.search-block:last-child { border-bottom: 0; }
.search-block h3 { margin: 0 0 8px; color: #4d5a6f; font-size: 11px; }
.inline-fields { display: grid; grid-template-columns: 1fr 92px; gap: 5px; }
.match-fields { display: grid; grid-template-columns: 1fr 88px; gap: 5px; }
.date-range { display: grid; grid-template-columns: 1fr 15px 1fr; align-items: center; gap: 4px; }
.date-range span { text-align: center; }
.preset-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.preset-buttons button { min-width: 46px; height: 25px; border: 1px solid var(--line-dark); background: #fff; color: #657186; cursor: pointer; }
.detail-search-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.side-actions { display: flex; gap: 5px; }
.side-actions .button { flex: 1; }
.search-note { margin: 6px 0 0; color: #8b96a5; font-size: 10px; line-height: 1.45; }

input, select, textarea { width: 100%; border: 1px solid var(--line-dark); border-radius: 2px; background: #fff; color: var(--text); outline: 0; }
input, select { height: 31px; padding: 0 8px; }
textarea { padding: 8px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(15,143,98,.12); }
label { cursor: default; }

.data-surface { min-width: 0; }
.surface-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.surface-head h1 { margin: 0; font-size: 16px; }
.surface-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.button-group, .toolbar-actions, .table-controls, .form-actions { display: flex; align-items: center; gap: 5px; }
.button { display: inline-flex; min-height: 31px; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid var(--line-dark); border-radius: 2px; background: #fff; color: #445168; cursor: pointer; font-weight: 700; white-space: nowrap; }
.button:hover { border-color: #8996a8; background: #f5f7f9; }
.button.primary { border-color: var(--blue-dark); background: var(--blue); color: #fff; }
.button.primary:hover { background: var(--blue-dark); }
.button.sky { border-color: #62b895; background: #e8f7f0; color: #08734f; }
.button.danger { border-color: #d48790; background: #fff3f4; color: #b72f3e; }
.button.ghost { background: #f7f8f9; }
.button.small { min-height: 26px; padding: 0 8px; font-size: 10px; }

.action-toolbar { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 11px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.toolbar-actions { flex-wrap: wrap; }
.toolbar-actions .button { min-width: 72px; }
.bulk-transmission-form select { width: 260px; }
.bulk-transmission-form [data-selected-products] { min-width: 46px; color: var(--blue-dark); font-weight: 700; }
.status-strip { display: flex; min-height: 49px; align-items: stretch; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fff; }
.status-card { display: flex; min-width: 88px; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #e4e7eb; color: #6f7c90; }
.status-card strong { margin-top: 3px; color: #157c57; font-size: 15px; }
.status-card.active { box-shadow: inset 0 -3px var(--blue); color: #213d31; font-weight: 700; }
.order-status-strip .status-card { min-width: 92px; }
.order-status-strip { max-height: 58px; }
.order-summary-row { display: flex; min-height: 40px; align-items: center; gap: 24px; padding: 7px 11px; border-bottom: 1px solid var(--line); background: #f8fbf9; color: var(--muted); }
.order-summary-row b { color: var(--blue-dark); }
.order-table th, .order-table td { max-width: 260px; }
.order-table td { overflow: hidden; text-overflow: ellipsis; }
.order-table td:nth-child(10) { white-space: normal; min-width: 180px; }
.order-totals { padding: 9px 12px; border-top: 1px solid var(--line); background: #f8faf9; color: #536b5e; text-align: right; }
.current-matching { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: #eff9f4; color: #476657; }
.matching-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: #e8efeb; }
.matching-pane { min-width: 0; border: 1px solid var(--line); background: #fff; }
.matching-pane-head { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.matching-pane-head h2 { margin: 0; font-size: 14px; }
.matching-pane-head span { color: var(--muted); }
.matching-search { display: grid; grid-template-columns: 125px minmax(160px, 1fr) auto auto; gap: 5px; padding: 8px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.matching-table { min-height: 370px; max-height: 58vh; }
.matching-table table { min-width: 820px; }
.matching-table .selected-row td { background: #e7f7ef; }
.content-tabs { display: flex; min-height: 38px; align-items: end; gap: 1px; padding: 6px 9px 0; border-bottom: 1px solid var(--line); background: #f5f6f8; }
.content-tabs a { min-width: 116px; padding: 8px 12px; border: 1px solid var(--line); border-bottom: 0; background: #e9edf1; color: #68758a; text-align: center; }
.content-tabs a.active { background: #fff; color: var(--blue); font-weight: 700; }
.table-controls { justify-content: flex-end; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.table-controls select { width: 130px; }

.table-scroll, .table-card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { min-height: 36px; padding: 9px 10px; border-right: 1px solid #e3e7ec; border-bottom: 1px solid #dfe4ea; text-align: left; vertical-align: middle; }
th:last-child, td:last-child { border-right: 0; }
th { background: #f1f3f6; color: #4f5d72; font-size: 10px; font-weight: 700; text-align: center; }
td { background: #fff; font-size: 11px; }
tr:hover td { background: #f4fbf7; }
th.number, td.number { text-align: right; }
td.center { text-align: center; }
.check-cell { width: 34px; text-align: center; }
.check-cell input, input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; }
.product-thumb { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); background: #f5f7fa; color: #8793a5; font-weight: 800; }
.product-link { color: #0b8058; font-weight: 700; }
code { color: #46546a; font-family: Consolas, monospace; font-size: 10px; }
.empty { padding: 55px 20px !important; color: #8b96a7; text-align: center; }
.empty-inline { padding: 16px 0; color: var(--muted); }
.pager { display: flex; justify-content: center; gap: 14px; padding: 10px; border-top: 1px solid var(--line); }
.pager a { color: var(--blue); font-weight: 700; }
.pager .disabled { color: #b9c0ca; }

.badge { display: inline-flex; min-height: 21px; align-items: center; padding: 0 7px; border-radius: 10px; background: #edf0f4; color: #5f6b7e; font-size: 9px; font-weight: 800; }
.badge.selling, .badge.succeeded, .badge.info, .badge.active, .badge.completed { background: #dff6ed; color: var(--success); }
.badge.rejected, .badge.failed, .badge.error { background: #fde4e7; color: var(--danger); }
.badge.out_of_stock, .badge.blocked, .badge.warning, .badge.waiting { background: #fff0d9; color: var(--warning); }
.badge.drafted, .badge.ready, .badge.queued, .badge.running { background: #e2f3eb; color: #0a7551; }
.badge.inactive { background: #eceff3; color: #7c8797; }

.page-actions { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 10px; }
.page-actions h1 { margin: 0 0 5px; font-size: 20px; }
.page-actions p { margin: 0; color: var(--muted); }
.filter-card { display: flex; gap: 7px; align-items: end; padding: 11px; border: 1px solid var(--line); background: #fff; margin-bottom: 10px; }
.field { display: flex; min-width: 150px; flex-direction: column; gap: 5px; }
.field.grow { flex: 1; }
.field label { color: #47556a; font-size: 10px; font-weight: 700; }
.field small { color: var(--muted); line-height: 1.45; }
.form-card, .panel { padding: 16px; }
.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.section-heading { margin: 22px 0 12px; padding-top: 17px; border-top: 1px solid var(--line); }
.section-heading h2, .panel h2 { margin: 0 0 5px; font-size: 14px; }
.section-heading p, .panel-help { margin: 0; color: var(--muted); }
.option-grid { display: flex; flex-direction: column; gap: 6px; }
.option-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 110px 90px; gap: 5px; }
.form-actions { justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.check-field { display: flex; align-items: center; gap: 7px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.panel.spaced { margin-top: 10px; }
.definition-list { margin: 10px 0 0; }
.definition-list div { display: grid; grid-template-columns: 120px 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); }
.definition-list dt { color: var(--muted); }
.definition-list dd { margin: 0; font-weight: 700; }
.channel-action { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
.channel-action small { display: block; margin-top: 3px; color: var(--muted); }
.channel-action > div:first-of-type { min-width: 160px; flex: 1; }
.transmission-action-select { width: 190px; margin-right: 6px; }

.verification-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; padding: 13px 16px; border: 1px solid #e2bd75; background: #fff8e9; }
.verification-box.verified { border-color: #92ceb8; background: #effaf6; }
.verification-status { display: flex; align-items: center; gap: 11px; }
.verification-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e7a737; color: #fff; font-size: 16px; font-weight: 900; }
.verification-box.verified .verification-icon { background: var(--success); }
.verification-status strong { display: block; font-size: 12px; }
.verification-status p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.credential-label { display: flex; min-height: 18px; align-items: center; justify-content: space-between; gap: 8px; }
.credential-state { display: inline-flex; min-height: 19px; align-items: center; padding: 0 7px; border-radius: 10px; font-size: 9px; font-weight: 800; }
.credential-state.saved { background: #dff6ed; color: var(--success); }
.credential-state.missing { background: #fff0d9; color: var(--warning); }
.credential-field { padding: 10px; border: 1px solid var(--line); background: var(--surface-soft); }
.credential-field input::placeholder { color: #8896a8; }

.settings-grid { grid-template-columns: 1.1fr .9fr; }
.account-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.account-card { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); }
.account-card:hover { border-color: #79b89c; background: #f4fbf7; }
.channel-logo { display: grid; width: 34px; height: 34px; place-items: center; background: #e1f3e9; color: var(--blue); font-weight: 900; }
.account-card small { display: block; margin-top: 3px; color: var(--muted); }
.account-arrow { color: #96a0ae; font-size: 19px; }
.stack-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.support-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.support-matrix div { padding: 11px; border: 1px solid var(--line); background: var(--surface-soft); }
.support-matrix strong, .support-matrix span { display: block; }
.support-matrix span { margin-top: 5px; color: var(--muted); line-height: 1.45; }

.record-form { margin: 9px; padding: 12px; border: 1px solid #c5dacf; background: #f4fbf7; }
.record-form summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.record-form[open] summary { margin-bottom: 12px; }
.metadata-line { color: #708095; font-size: 10px; }
.row-actions { display: flex; justify-content: center; gap: 4px; }

.inventory-summary, .dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.inventory-summary > *, .dashboard-metrics > * { padding: 13px 16px; border-right: 1px solid var(--line); background: #fff; }
.inventory-summary > *:last-child, .dashboard-metrics > *:last-child { border-right: 0; }
.inventory-summary span, .dashboard-metrics span { display: block; color: var(--muted); font-size: 10px; }
.inventory-summary strong, .dashboard-metrics strong { display: block; margin-top: 5px; font-size: 18px; }
.adjust-form { display: grid; min-width: 330px; grid-template-columns: 86px 70px 1fr auto; gap: 4px; }
.adjust-form input, .adjust-form select { height: 27px; }

.dashboard-wrap { display: grid; gap: 10px; }
.dashboard-top { display: grid; grid-template-columns: 1fr 320px; gap: 10px; }
.dashboard-card { padding: 15px; }
.dashboard-card h2 { margin: 0 0 12px; font-size: 13px; }
.usage-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.usage-row > div { padding: 10px 15px; border-right: 1px solid var(--line); }
.usage-row > div:last-child { border-right: 0; }
.usage-row small, .usage-row strong { display: block; }
.usage-row strong { margin-top: 6px; font-size: 17px; }
.banner-card { min-height: 120px; background: linear-gradient(135deg, #087052, #18a46f); color: #fff; }
.banner-card p { color: #d9f3e6; line-height: 1.7; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.mini-status { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }
.mini-status > div { padding: 14px; border-right: 1px solid var(--line); text-align: center; }
.mini-status strong { display: block; margin-top: 7px; color: var(--blue); font-size: 18px; }

.floating-tools { position: fixed; right: 13px; bottom: 14px; z-index: 80; display: flex; flex-direction: column; gap: 5px; }
.floating-tools a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #b7cec1; border-radius: 50%; background: #fff; color: #39725a; font-weight: 800; box-shadow: 0 2px 7px rgba(23,70,48,.13); }

.order-sync-form { display: grid; grid-template-columns: minmax(230px, 310px) auto auto; align-items: center; gap: 5px; }
.order-sync-form select { min-width: 230px; }

@media (max-width: 1280px) {
    html { min-width: 1080px; }
    .global-search { width: 340px; }
    .work-tab { min-width: 130px; }
    .plto-workspace { grid-template-columns: 245px minmax(720px, 1fr); }
}