/* ShoeStock visual system: graphite, warm white, burnt orange. */
:root {
  --bg: #f4f3f0;
  --card: #fff;
  --ink: #242424;
  --muted: #73716d;
  --line: #e5e3de;
  --accent: #b9431a;
  --green: var(--accent); /* Compatibility with existing component classes. */
  --deep: #913112;
  --lime: #f28b59;
  --radius: 10px;
  --shadow: 0 12px 36px #1b191314;
}
body { background: var(--bg); -webkit-font-smoothing: antialiased; }
::selection { background: #fbd4be; color: #242424; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, select, textarea { border-color: #dcd9d2; border-radius: 6px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid #b9431a22; }
input::placeholder, textarea::placeholder { color: #827f79; }
.btn { border-radius: 6px; min-height: 38px; transition: background .15s, border-color .15s; }
.btn:hover { background: #f2f0eb; border-color: #c8c3ba; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn.primary:hover { background: var(--deep); border-color: var(--deep); }
.btn.small { border-radius: 5px; }
.btn.text { border-color: transparent; }
.workspace .sidebar { background: #202123; color: #eae8e3; border: 0; padding-top: 32px; }
.workspace .brand { padding-bottom: 36px; }
.workspace .brand strong { color: #fff; letter-spacing: 2px; }
.workspace .brand small { color: #a7a6a3; font-size: 10px; letter-spacing: 1.6px; }
.workspace .nav-btn { color: #bcbcb9; border-radius: 6px; padding: 12px 15px; margin: 4px 0; }
.workspace .nav-btn:hover { background: #303133; color: white; }
.workspace .nav-btn.active { background: #36302b; color: #ffad7f; box-shadow: inset 3px 0 #ef8957; }
.workspace .nav-label { color: #969591; letter-spacing: 1px; font-size: 11px; padding-top: 26px; }
.workspace .sidebar-bottom { color: #aaa9a5; border-top: 1px solid #393a3b; padding: 18px 12px 0; line-height: 1.8; }
.workspace .sidebar-bottom strong { color: #e5e2da; font-size: 11px; letter-spacing: 1.5px; font-weight: 500; }
.workspace .topbar { background: #faf9f6; height: 68px; border-bottom: 1px solid var(--line); }
.workspace #breadcrumb { font-weight: 500; font-size: 13px; }
.workspace .avatar { color: #51483e; background: #eae4db; border-radius: 50%; }
.workspace .content { max-width: 1440px; padding: 32px 36px 48px; }
.workspace .eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.workspace .page-head h1, .screen-heading h1 { font-size: 30px; letter-spacing: -1px; font-weight: 750; }
.screen-heading { padding: 0 0 26px; align-items: flex-end; }
.screen-heading p { margin-top: 7px; font-size: 13px; color: var(--muted); }
.heading-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.screen-heading .heading-actions select { border: 1px solid var(--line); max-width: 180px; min-height: 40px; }
.workspace .panel { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 20px; }
.workspace .panel-head { padding: 22px 24px 18px; }
.workspace .panel-head h2 { font-size: 15px; font-weight: 650; }
.summary-grid { gap: 0; padding: 0 8px; margin: 0 16px 16px; }
.summary-grid .kpi { background: white; border-radius: 0; padding: 20px 16px; border-right: 1px solid var(--line); }
.summary-grid .kpi:last-child { border-right: 0; }
.summary-grid .kpi:nth-child(2), .summary-grid .kpi:nth-child(4) { background: white; }
.summary-grid .kpi:nth-child(3) { background: #262729; border-radius: 7px; border-right: 0; }
.summary-grid .kpi:nth-child(3) .kpi-label, .summary-grid .kpi:nth-child(3) .kpi-foot { color: #c1c0bc; }
.summary-grid .kpi:nth-child(3) .kpi-value { color: #fff; }
.summary-grid .kpi-label { color: #686761; font-size: 12px; }
.summary-grid .kpi-value { font-size: clamp(22px, 2.3vw, 34px); letter-spacing: -1px; font-weight: 650; margin-top: 12px; overflow-wrap: anywhere; white-space: normal; }
.kpi-foot { color: #76736d; line-height: 1.6; }
.summary-line { background: #f6f5f2; color: #615e57; border-radius: 5px; margin: 0 24px; font-size: 12px; padding: 12px 16px; }
.muted-note { color: #76736c; line-height: 1.8; }
.screen-tabs { border-bottom: 1px solid var(--line); padding: 0 24px; gap: 24px; }
.screen-tabs button { flex: 0 0 auto; color: #716e67; font-size: 13px; min-height: 44px; padding: 12px 6px; }
.screen-tabs button.selected { color: var(--accent); }
.screen-tabs button.selected:after { background: var(--accent); left: 6px; right: 6px; bottom: 0; width: auto; height: 2px; border-radius: 0; }
.day-grid { gap: 0; padding: 0 24px 20px; }
.day-metric { border: 0; border-left: 2px solid #e9e5dd; border-radius: 0; margin: 12px 0; padding: 4px 20px; gap: 8px; }
.day-metric span { font-size: 12px; color: #625f58; }
.day-metric strong { font-size: 26px; font-weight: 600; letter-spacing: -.5px; }
.day-metric small { color: #7d7972; }
.shortcut-grid { gap: 10px; padding: 0 24px 24px; }
.shortcut { border: 1px solid var(--line); border-radius: 7px; color: #4e4b46; flex-direction: row; padding: 17px 10px; gap: 10px; }
.shortcut svg { color: var(--accent); width: 20px; height: 20px; }
.shortcut:hover { background: #faf6f0; border-color: #dbc0a9; }
.workspace .note { background: #f5f3ef; border-color: #e4dfd6; color: #696257; border-radius: 6px; }
.workspace .badge.green, .badge.green { background: #eaf0ea; color: #3b633e; }
.badge.gold { background: #fbf0dd; color: #865d1b; }
.badge.red { background: #faeaea; color: #9c3535; }
.badge.purple { background: #eceef8; color: #505c96; }
th { background: #f5f4f0; color: #69655e; border-color: var(--line); font-size: 11px; font-weight: 600; padding: 13px 18px; }
td { padding: 17px 18px; font-size: 13px; border-color: #eeece7; }
tbody tr:hover { background: #fcfaf6; }
.product-thumb, .trade-product .product-thumb, .trade-post .product-thumb { background: #edeae3; color: #797062; border-radius: 7px; }
.product-cell .name { font-weight: 550; }
.trade-product, .trade-post, .warehouse-card { border: 1px solid var(--line); border-radius: 9px; }
.size-chip { background: #f3f1ec; color: #4b453d; border: 1px solid #e4dfd6; border-radius: 4px; }
.size-chip:hover { background: #fff1e7; border-color: #d1a68c; }
.size-chip small { color: #797269; }
.hall-search { border: 1px solid #ddd9d1; border-radius: 7px; }
.filter button.selected { background: #fff0e5; color: #983b18; border-color: #d7ab8e; }
.publish-sizes label { background: #f4f1eb; border-radius: 5px; }
.publish-sizes input { accent-color: var(--accent); }
.estimate-result, .public-contact { background: #f8f2e9; border-radius: 8px; }
.estimate-result strong { color: var(--accent); }
.profile-hero { background: #292a2c; border-radius: 10px; color: white; padding: 32px; }
.profile-hero p { color: #c1bdb5; }
.profile-avatar { background: #454039; color: #f7b185; border: 1px solid #78624d; border-radius: 12px; }
.setting-rows button { font-size: 14px; }
.warehouse-card p, .contact-record p { color: var(--muted); }
.empty > svg { color: #a29b8e; }
.empty h3 { color: #4b4842; }
.empty p { color: #777168; }
.line-editor, .detail-stat { background: #f6f4ef; border-radius: 7px; }
.field label { color: #5a564f; }
.region-picker { min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; }
.region-picker legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.region-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.region-columns .field { margin: 0; }
.region-picker select:disabled { background: #f3f1ed; color: #787269; }
.legacy-region { margin-top: 12px; color: var(--muted); font-size: 12px; }
@media (min-width: 761px) { .workspace .sidebar { overflow-y: auto; } }
@media (max-width: 480px) { .region-columns { grid-template-columns: 1fr; gap: 12px; } }
dialog { border-radius: 12px; box-shadow: 0 28px 90px #15110b40; }
dialog::backdrop { background: #17161488; }
.modal-head { border-bottom-color: var(--line); }
#toast { background: #272626; border-radius: 7px; }
.login { grid-template-columns: 1.15fr 1fr; background: #faf9f6; }
.login-art { background: #222325; padding: clamp(36px, 5vw, 80px); }
.login-art:after { content: 'SHOESTOCK'; border: 0; border-radius: 0; width: auto; height: auto; font-size: clamp(60px, 8vw, 140px); font-weight: 800; letter-spacing: -7px; color: #ffffff08; transform: rotate(-90deg); transform-origin: right bottom; right: 20px; top: auto; bottom: 65%; pointer-events: none; }
.login-art .brand small { color: #aaa49c; }
.login-copy h1 { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.4; letter-spacing: -1px; font-weight: 750; }
.login-copy p { color: #bcb7af; }
.login-copy .eyebrow { color: #efa175; }
.login-copy .line { background: #f08d58; height: 4px; width: 44px; }
.login-foot { color: #b8b1a6; letter-spacing: 1px; }
.login-form h2 { font-size: 30px; letter-spacing: -1px; }
.login-form .eyebrow { color: var(--accent); }
.login-form .note { background: transparent; border: 0; padding: 0; color: #787168; }
@media (min-width: 761px) and (max-width: 1100px) {
  .workspace .content { padding: 26px 22px; }
  .screen-heading { align-items: flex-start; }
  .heading-actions { max-width: 220px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .summary-grid .kpi { border: 0; }
  .shortcut { flex-direction: column; font-size: 12px; }
}
@media (max-width: 760px) {
  .workspace .sidebar { background: transparent; padding: 0; }
  .workspace .sidebar .primary-nav { background: #fcfbf8; border-top-color: #dedad2; padding-top: 9px; }
  .workspace .primary-nav .nav-btn { color: #77736c; border-radius: 0; padding: 3px 1px; margin: 0; }
  .workspace .primary-nav .nav-btn.active { background: transparent; color: var(--accent); box-shadow: none; }
  .workspace .tools-nav { background: #f4f2ed; gap: 4px; }
  .workspace .tools-nav .nav-btn { color: #646059; margin: 0; min-height: 36px; }
  .workspace .tools-nav .nav-btn.active { color: #9e3d1b; background: #f8e6d8; box-shadow: none; }
  .workspace .topbar { height: 58px; background: #242527; color: white; }
  .workspace .topbar .btn { color: #d5d0c8; }
  .workspace .avatar { background: #50463b; color: #ffd3b8; }
  .workspace .content, .workspace:has(.nav-btn.active) .content { background: var(--bg); padding: 22px 14px 24px; }
  .screen-heading { align-items: flex-start; flex-direction: column; gap: 18px; padding: 0 2px 22px; }
  .screen-heading h1, .workspace .page-head h1 { font-size: 26px; }
  .screen-heading p { font-size: 12px; }
  .heading-actions { width: 100%; justify-content: flex-start; gap: 8px; }
  .screen-heading .heading-actions select { flex: 1; max-width: none; width: 100px; font-size: 12px; }
  .heading-actions .btn { font-size: 12px; min-height: 40px; padding: 10px 12px; }
  .workspace .panel { border-radius: 8px; margin-bottom: 16px; }
  .workspace .panel-head { padding: 18px 16px 12px; }
  .summary-grid { padding: 0; margin: 0 12px 12px; gap: 8px; }
  .summary-grid .kpi { padding: 15px 12px; border: 0; background: #f8f7f4; border-radius: 6px; }
  .summary-grid .kpi:nth-child(2), .summary-grid .kpi:nth-child(4) { background: #f8f7f4; }
  .summary-grid .kpi:nth-child(3) { background: #262729; }
  .summary-grid .kpi-value { font-size: 23px; margin-top: 8px; }
  .summary-grid .kpi-label { font-size: 11px; }
  .summary-line { margin: 0 12px; padding: 10px 12px; font-size: 11px; }
  .screen-tabs { gap: 18px; padding: 0 16px; }
  .day-grid { padding: 0 16px 16px; }
  .day-metric { padding: 2px 12px; margin: 10px 0; }
  .day-metric strong { font-size: 22px; }
  .day-metric span { font-size: 11px; }
  .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 14px 16px; }
  .shortcut { padding: 14px 7px; font-size: 12px; }
  .profile-hero { background: #292a2c; padding: 24px 18px; margin-bottom: 18px; }
  .profile-avatar { width: 62px; height: 62px; }
  .trade-product, .trade-post { border-radius: 8px; }
  .login { display: block; }
  .login-art { padding: 26px; min-height: 270px; }
  .login-copy h1 { font-size: 30px; }
  .login-art:after { display: none; }
  .login-form-wrap { padding: 30px 25px 40px; }
  .login-form h2 { font-size: 26px; }
  .dewu-summary .kpi { padding: 14px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.workspace-tabs {display:flex;gap:5px;overflow-x:auto;max-width:100%;padding:12px 28px 0;background:#f1efe9;border-bottom:1px solid var(--line);scrollbar-width:thin;}
.workspace-tab {display:flex;align-items:center;flex:0 0 auto;border:1px solid #e1ded7;border-bottom:0;border-radius:9px 9px 0 0;background:#eae7e0;color:#726c62;}
.workspace-tab.selected {background:var(--bg);color:var(--accent);box-shadow:inset 0 3px var(--accent);}
.workspace-tab [role=tab] {border:0;background:none;color:inherit;padding:14px 15px;white-space:nowrap;font-size:13px;font-weight:600;cursor:pointer;}
.workspace-tab .tab-close {border:0;background:none;color:inherit;width:32px;height:36px;margin-right:5px;border-radius:5px;font-size:20px;cursor:pointer;}
.workspace-tab .tab-close:hover {background:#ddd7cc;color:#322d27;}
.workspace-tab button:focus-visible {outline:2px solid var(--accent);outline-offset:-3px;}
@media(max-width:760px){.workspace-tabs{padding:8px 12px 0;gap:4px;}.workspace-tab [role=tab]{padding:12px;font-size:12px;}.workspace-tab .tab-close{width:32px;}}