:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #26301b;
  background: #f8f8ef;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f8f8ef; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }
.topbar { height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 3px solid #c7e52f; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; color: #202d13; letter-spacing: .2px; }
.brand img { width: 142px; height: 38px; object-fit: contain; object-position: left center; }
.brand-divider { width: 1px; height: 25px; background: #dfe4d4; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.page { max-width: 1240px; margin: 0 auto; padding: 28px; }
.eyebrow { color: #79970d; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
h1 { margin: 5px 0 7px; color: #202d13; font-size: clamp(25px, 3vw, 36px); line-height: 1.2; }
h2 { margin: 0; font-size: 19px; color: #202d13; }
.muted { color: #718096; font-size: 13px; line-height: 1.6; }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 24px 0 18px; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; }
.admin-navigation { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; margin: 0 0 18px; padding: 6px; border: 1px solid #e2e8d2; border-radius: 9px; background: rgba(251,253,240,.96); box-shadow: 0 4px 14px rgba(57,72,21,.06); overflow-x: auto; }
.admin-navigation .nav-item { min-height: 34px; padding: 0 14px; border: 0; border-radius: 6px; color: #617044; background: transparent; font-size: 13px; font-weight: 750; white-space: nowrap; }
.admin-navigation .nav-item:hover, .admin-navigation .nav-item:focus-visible { color: #263713; background: #eaf3bd; outline: none; }
.admin-navigation .nav-item.active { color: #263713; background: #c7e52f; }
.section-hint { margin-left: 10px; color: #8a98a8; font-size: 12px; font-weight: 500; }
#orders-panel, #kocs-panel, #leads-panel, #content-posts-panel { scroll-margin-top: 78px; }
.workspace-hidden { display: none !important; }
#admin-kpis { display: none !important; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.field label { color: #64748b; font-size: 12px; font-weight: 650; }
input, select { height: 38px; border: 1px solid #d6ddc8; border-radius: 7px; padding: 0 11px; color: #26301b; background: #fff; outline: none; }
input:focus, select:focus { border-color: #9dbd12; box-shadow: 0 0 0 3px rgba(199,229,47,.2); }
.btn { min-height: 38px; border: 1px solid transparent; border-radius: 7px; padding: 0 14px; color: #202d13; background: #c7e52f; font-weight: 800; }
.btn:hover { background: #b5d52b; }
.btn:disabled { cursor: wait; opacity: .62; box-shadow: none; }
.btn.is-loading { position: relative; }
.btn.is-loading::before { content: ''; width: 12px; height: 12px; margin-right: 7px; display: inline-block; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .7s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
.btn.secondary { color: #364516; background: #eef5c9; border-color: #dbe8a2; }
.btn.ghost { color: #456078; background: #fff; border-color: #d8e0ea; }
.btn.danger { color: #a33b3b; background: #fff2f1; border-color: #f4c8c3; }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.dashboard { margin: 24px 0 22px; padding: 20px; border: 1px solid #dfe7c2; border-radius: 12px; background: #fbfdf0; }
.dashboard-head, .dashboard-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dashboard-head { margin-bottom: 17px; }
.dashboard-head h2 { margin: 3px 0 4px; font-size: 22px; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dashboard-kpi { min-width: 0; padding: 13px 14px; border: 1px solid #e4e9d5; border-radius: 9px; background: #fff; }
.dashboard-kpi .label { color: #718096; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-kpi .value { margin-top: 7px; color: #263713; font-size: 20px; font-weight: 800; }
.dashboard-kpi .value.negative, .dashboard-block td.negative { color: #b23d3d; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; margin-top: 14px; }
.dashboard-block { min-width: 0; overflow: hidden; border: 1px solid #e4e9d5; border-radius: 9px; background: #fff; }
.dashboard-block-head { padding: 13px 15px; border-bottom: 1px solid #edf0f4; }
.dashboard-block-head h3 { margin: 0; color: #263713; font-size: 15px; }
.dashboard-leads-block { margin-top: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { padding: 18px; border: 1px solid #e1e7ef; border-radius: 10px; background: #fff; }
.kpi .label { color: #718096; font-size: 12px; }
.kpi .value { margin-top: 9px; color: #202d13; font-size: 26px; font-weight: 800; }
.kpi .hint { margin-top: 6px; color: #8a98a8; font-size: 12px; }
.panel { border: 1px solid #e1e7ef; border-radius: 10px; background: #fff; overflow: hidden; }
.panel-head { padding: 17px 19px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-bottom: 1px solid #edf0f4; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 12px 14px; color: #526229; background: #f3f7dc; text-align: left; font-size: 12px; font-weight: 800; white-space: nowrap; }
td { padding: 13px 14px; border-top: 1px solid #eef1f5; white-space: nowrap; }
tr:hover td { background: #fbfdff; }
td.negative { color: #b23d3d; background: #fff1ef; }
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; color: #536525; background: #f0f5d9; font-size: 12px; font-weight: 700; }
.pill.green { color: #2c6d4a; background: #e9f6ee; }
.pill.amber { color: #84641c; background: #fff6df; }
.pill.gray { color: #667584; background: #eef1f4; }
.empty { padding: 48px 20px; color: #8491a1; text-align: center; }
.notice { padding: 12px 14px; border: 1px solid #d9e6a8; border-radius: 8px; color: #55651f; background: #f7fbe8; font-size: 13px; line-height: 1.6; }
.hero { margin-bottom: 25px; }
.koc-layout { max-width: 760px; margin: 0 auto; }
.form-card { padding: 22px; border: 1px solid #e1e7ef; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(57,72,21,.06); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.full { grid-column: 1 / -1; }
.choice-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label { display: grid; place-items: center; gap: 3px; min-height: 58px; border: 1px solid #d8e0ea; border-radius: 8px; color: #54687b; background: #fff; cursor: pointer; font-weight: 650; }
.choice label small { color: #91a0ad; font-size: 11px; font-weight: 500; }
.choice input:checked + label { color: #4f650c; border-color: #99b80e; background: #f4f9d9; box-shadow: 0 0 0 2px rgba(199,229,47,.18); }
.choice:has(#dinner) input:checked + label { color: #7a4c1d; border-color: #e6ad62; background: #fff5e8; box-shadow: 0 0 0 2px rgba(230,173,98,.18); }
.meal-filter { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid #d6ddc8; border-radius: 8px; background: #f8faf4; }
.meal-filter-button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 6px; color: #687783; background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; }
.meal-filter-button:hover { color: #263713; background: #eef5d5; }
.meal-filter-button.active { color: #263713; background: #c7e52f; }
.meal-filter-button.dinner.active { color: #754719; background: #f2c27e; }
.meal-tag { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.meal-tag.lunch { color: #4f650c; background: #edf6c9; }
.meal-tag.dinner { color: #805020; background: #fff0d9; }
.meal-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.meal-summary-item { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 13px 15px; border-radius: 9px; }
.meal-summary-item span { grid-row: span 2; display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.meal-summary-item strong { color: #263713; font-size: 22px; line-height: 1; }
.meal-summary-item small { color: #748291; font-size: 12px; }
.meal-summary-item.lunch { background: #f5f9e4; }
.meal-summary-item.lunch span { color: #4f650c; background: #e6f0ac; }
.meal-summary-item.dinner { background: #fff8ed; }
.meal-summary-item.dinner span { color: #805020; background: #ffe6bf; }
.dashboard-meals-block { margin-top: 14px; }
.order-summary { margin-top: 8px; padding: 10px 12px; border-radius: 7px; color: #51621e; background: #f7fbe8; font-size: 12px; font-weight: 700; }
.weekday-row { display: flex; flex-wrap: wrap; gap: 8px; }
.weekday-row label { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid #d8e0ea; border-radius: 7px; color: #5f7182; background: #fff; cursor: pointer; font-size: 12px; }
.weekday-row input:checked + span { color: #1d637c; font-weight: 700; }
.form-footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }
.orders-list { display: grid; gap: 10px; margin-top: 16px; }
.order-card { padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e3e9ef; border-radius: 9px; background: #fff; }
.order-main { display: grid; gap: 5px; }
.order-title { color: #1d3852; font-weight: 720; }
.order-meta { color: #7b8998; font-size: 12px; }
.order-actions { display: flex; gap: 7px; }
.contact-list { display: grid; gap: 10px; margin-top: 16px; }
.contact-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #e3e9ef; border-radius: 8px; background: #fff; }
.contact-item span { display: block; margin-top: 5px; color: #526229; font-weight: 700; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.contact-config-list { display: grid; gap: 13px; max-height: 65vh; overflow: auto; }
.contact-config { padding: 14px; border: 1px solid #e3e9ef; border-radius: 9px; background: #fbfcf7; }
.contact-config-title { margin-bottom: 12px; color: #263713; font-weight: 800; }
.contact-config .field + .field { margin-top: 10px; }
.modal-wide { width: min(680px, 100%); }
.qr-modal { text-align: center; }
.qr-modal img { display: block; width: min(300px, 100%); max-height: 55vh; margin: 4px auto 16px; object-fit: contain; }
.content-posts-panel { margin-top: 18px; }
.text-link { color: #346b80; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.content-preview-modal { text-align: center; }
.content-preview-modal img { display: block; width: min(640px, 100%); max-height: 70vh; margin: 0 auto 16px; object-fit: contain; }
.content-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.content-filters select { height: 32px; min-width: 96px; font-size: 12px; }
.content-summary { display: flex; flex-wrap: wrap; gap: 9px; padding: 12px 15px; color: #64748b; background: #fbfcf7; border-bottom: 1px solid #edf0f4; font-size: 12px; }
.content-summary span { padding-right: 9px; border-right: 1px solid #dfe5d5; }
.content-summary span:last-child { border-right: 0; }
.content-summary strong { margin-left: 3px; color: #263713; font-size: 15px; }
.platform-tag { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.platform-tag.xiaohongshu { color: #a53d52; background: #fdecef; }
.platform-tag.douyin { color: #28596a; background: #e7f5f8; }
.content-thumb-button { width: 52px; height: 52px; padding: 0; overflow: hidden; border: 1px solid #dce5e8; border-radius: 6px; background: #fff; cursor: pointer; }
.content-thumb { width: 100%; height: 100%; display: block; object-fit: cover; }
td small { display: block; margin-top: 4px; color: #8a98a8; font-size: 11px; }
.content-koc-panel { margin-top: 22px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title-row h2, .section-title-row h3 { margin: 0; color: #263713; }
.content-history { margin-top: 26px; padding-top: 21px; border-top: 1px solid #edf0f4; }
.content-post-list { display: grid; gap: 9px; }
.content-post-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid #e3e9ef; border-radius: 8px; background: #fbfcf7; }
.content-post-card strong { color: #263713; }
.content-post-link { margin: 5px 0; }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15, 31, 48, .42); z-index: 10; }
.modal { width: min(520px, 100%); padding: 22px; border-radius: 12px; background: #fff; box-shadow: 0 18px 50px rgba(15,31,48,.18); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.link-box { display: flex; gap: 8px; margin-top: 14px; }
.link-box input { flex: 1; min-width: 0; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 15px; border-radius: 8px; color: #fff; background: #263713; box-shadow: 0 8px 22px rgba(38,55,19,.2); font-size: 13px; z-index: 20; }
.hidden { display: none !important; }
.form-card:has(#lead-form.hidden) { display: none; }
@media (max-width: 760px) {
  .topbar { height: auto; min-height: 62px; padding: 13px 16px; gap: 12px; }
  .top-actions .btn { padding: 0 10px; font-size: 12px; }
  .page { padding: 21px 15px 35px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dashboard { padding: 15px; }
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .kpi { padding: 14px; }
  .kpi .value { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .order-card { align-items: flex-start; flex-direction: column; }
  .order-actions { width: 100%; }
  .order-actions .btn { flex: 1; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .contact-item { align-items: flex-start; flex-direction: column; }
  .contact-actions { justify-content: flex-start; }
  .content-post-card { align-items: flex-start; flex-direction: column; }
}