:root {
  --ink: #17202a;
  --muted: #68717d;
  --subtle: #8b949f;
  --line: #e5e8ec;
  --soft: #f5f6f8;
  --paper: #ffffff;
  --sidebar: #171b21;
  --sidebar-2: #22272f;
  --brand: #d94a32;
  --brand-dark: #b93824;
  --orange: #e58a24;
  --green: #248a61;
  --blue: #3574c9;
  --purple: #7257b5;
  --shadow: 0 14px 40px rgba(30, 39, 50, .12);
  --sidebar-width: 248px;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #eef0f3;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { background: #eef0f3; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 30;
  display: flex; flex-direction: column; color: #f4f6f8; background: var(--sidebar);
  border-right: 1px solid #2c323a;
}
.brand { height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid #2b3037; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--brand); color: white; border-radius: 6px; font-weight: 800; font-size: 17px; }
.brand-name { font-weight: 700; font-size: 16px; }
.brand-sub { margin-top: 3px; color: #929aa5; font-size: 11px; }
.nav { padding: 18px 12px; flex: 1; overflow-y: auto; }
.nav-label { padding: 0 12px; margin: 2px 0 8px; font-size: 11px; color: #69727d; }
.nav-item { width: 100%; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 13px; margin: 4px 0; color: #aeb5be; background: transparent; border: 0; border-radius: 6px; text-align: left; }
.nav-item:hover { color: #fff; background: #20252c; }
.nav-item.active { color: #fff; background: #292f37; box-shadow: inset 3px 0 var(--brand); }
.nav-item svg { width: 18px; height: 18px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--brand); font-size: 11px; }
.sidebar-footer { padding: 14px 12px 18px; border-top: 1px solid #2b3037; }
.workspace-entry { height:42px; display:flex; align-items:center; gap:10px; margin:0 12px 12px; padding:0 12px; border:1px solid #343b45; border-radius:6px; color:#d4d9df; background:#20252c; text-align:left; }
.workspace-entry:hover { border-color:#555f6b; color:white; }
.workspace-entry svg { width:16px; }
.workspace-entry svg:last-child { margin-left:auto; color:#7c8691; }
.role-block { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 6px; color: white; background: #20252c; text-align: left; }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #58616d; font-weight: 700; }
.avatar.red { background: var(--brand); }
.avatar-image { overflow: hidden; padding: 0; }
.avatar-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.role-block strong { display: block; font-size: 13px; }
.role-block span { color: #89929d; font-size: 11px; }
.role-block svg { width: 15px; margin-left: auto; color: #727b86; }

.main { grid-column: 2; min-width: 0; }
.topbar { height: 76px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 0 30px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.icon-btn.mobile-menu { display: none; }
.search { width: min(440px, 42vw); position: relative; }
.search svg { width: 17px; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--subtle); }
.search input { width: 100%; height: 40px; padding: 0 38px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--soft); }
.search input:focus { border-color: #aab0b8; background: white; }
.top-spacer { flex: 1; }
.icon-btn { width: 38px; height: 38px; position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: white; color: #59626d; }
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.icon-btn svg { width: 18px; }
.notify-dot { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); border: 1px solid white; }
.notify-count { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 9px; color: white; background: var(--brand); border: 2px solid white; font-size: 9px; font-weight: 700; }
.top-user { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.top-user div div { font-weight: 600; font-size: 13px; }
.top-user span { font-size: 11px; color: var(--muted); }
.content { padding: 28px 30px 48px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.3; letter-spacing: 0; }
.page-head p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.head-actions { min-width: 0; display: flex; align-items: center; gap: 10px; }

.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; color: #454d57; background: white; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: #c7ccd2; background: #fafafa; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { border-color: var(--brand); color: white; background: var(--brand); }
.btn-primary:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
.btn-dark { border-color: var(--sidebar); color: white; background: var(--sidebar); }
.btn-danger { color: #bd3525; border-color: #efc9c3; background: #fff7f5; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; }
.metric { min-width: 0; padding: 21px 22px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.metric-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: #f4f5f7; color: #656e79; }
.metric-icon svg { width: 17px; }
.metric-value { margin-top: 14px; font-size: 26px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.metric-foot { margin-top: 11px; color: var(--subtle); font-size: 12px; overflow-wrap: anywhere; }
.metric-foot strong { color: var(--green); font-weight: 600; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .7fr); gap: 18px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.panel + .panel { margin-top: 18px; }
.panel-head { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.panel-title { min-width: 0; display: flex; align-items: center; gap: 9px; font-weight: 700; overflow-wrap: anywhere; }
.panel-title svg { width: 18px; color: var(--brand); }
.panel-meta { color: var(--muted); font-size: 12px; }
.link-btn { border: 0; background: transparent; color: var(--blue); font-size: 13px; }
.todo-list { padding: 4px 18px 8px; }
.todo-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; min-height: 72px; border-bottom: 1px solid #edf0f2; }
.todo-item:last-child { border-bottom: 0; }
.todo-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; }
.todo-icon svg { width: 17px; }
.todo-icon.orange { color: #b56812; background: #fff3e4; }
.todo-icon.blue { color: #2b6ab9; background: #eaf3ff; }
.todo-icon.red { color: #c23c28; background: #fff0ed; }
.todo-icon.green { color: #167950; background: #e8f7f0; }
.todo-name { font-weight: 600; }
.todo-desc { margin-top: 4px; color: var(--muted); font-size: 12px; }
.todo-count { font-size: 20px; font-weight: 700; }
.todo-button { width: 100%; border: 0; background: transparent; text-align: left; }
.todo-button span:nth-child(2) { min-width: 0; }
.todo-button .todo-name, .todo-button .todo-desc { display: block; }

.dashboard-grid > aside, .dashboard-grid > aside > .panel { width:100%; min-width:0; }
.live-list { padding:8px 18px 14px; }
.live-item { min-width:0; display:flex; align-items:flex-start; gap:11px; padding:11px 0; }
.live-line { width:2px; height:34px; flex:0 0 auto; margin:3px 3px 0 0; background:var(--line); }
.live-line.active { background: var(--green); }
.live-content { min-width:0; flex:1; }
.live-content strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-content span { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.live-time { flex:0 0 auto; color:var(--subtle); font-size:11px; white-space:nowrap; }
.dashboard-notification-list { width:100%; min-width:0; padding:8px 18px 14px; }
.dashboard-notification-item { position:relative; width:100%; min-width:0; padding:12px 0 12px 14px; border-bottom:1px solid var(--line); }
.dashboard-notification-item:last-child { border-bottom:0; }
.dashboard-notification-accent { position:absolute; left:0; top:14px; width:3px; height:32px; border-radius:2px; background:var(--line); }
.dashboard-notification-accent.active { background:var(--green); }
.dashboard-notification-head { width:100%; min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.dashboard-notification-head strong { min-width:0; flex:1; font-size:13px; line-height:1.45; white-space:normal; overflow-wrap:break-word; word-break:normal; writing-mode:horizontal-tb; }
.dashboard-notification-head time { flex:0 0 auto; color:var(--subtle); font-size:11px; white-space:nowrap; }
.dashboard-notification-item p { width:100%; min-width:0; margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.6; white-space:normal; overflow-wrap:break-word; word-break:normal; writing-mode:horizontal-tb; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 18px 18px; }
.quick-action { height: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; color: #4d5661; font-weight: 600; }
.quick-action:hover { border-color: #bec4cb; background: white; }
.quick-action svg { width: 18px; color: var(--brand); }

.table-panel { overflow: hidden; }
.toolbar { min-height: 64px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 6px; background: var(--soft); }
.tab { height: 32px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 12px; }
.tab.active { color: var(--ink); background: white; box-shadow: 0 1px 3px rgba(20,27,36,.1); font-weight: 600; }
.toolbar-spacer { flex: 1; }
.field-inline { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: #4e5661; background: white; outline: 0; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.data-table th { padding: 12px 16px; color: #7b8490; background: #fafbfc; border-bottom: 1px solid var(--line); font-size: 11px; text-align: left; font-weight: 600; }
.data-table td { height: 68px; padding: 10px 16px; border-bottom: 1px solid #edf0f2; vertical-align: middle; }
.data-table tbody tr:hover { background: #fcfcfd; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.order-id { font-weight: 600; color: #303842; }
.subtext { display: block; margin-top: 4px; color: var(--subtle); font-size: 11px; }
.customer-cell { display: flex; align-items: center; gap: 9px; }
.mini-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #edf0f3; color: #5c6570; font-size: 11px; font-weight: 700; }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag-red { color: #b63825; background: #ffefec; }
.tag-orange { color: #9d5a0b; background: #fff1dc; }
.tag-green { color: #177650; background: #e7f6ef; }
.tag-blue { color: #2864ad; background: #eaf2fd; }
.tag-gray { color: #66707b; background: #edf0f3; }
.tag-purple { color: #6549a1; background: #f0ebfb; }
.amount { font-weight: 700; }
.member-stack { display: flex; align-items: center; }
.member-stack .mini-avatar { margin-left: -7px; border: 2px solid white; }
.member-stack .mini-avatar:first-child { margin-left: 0; }
.action-menu { display: flex; gap: 6px; }
.empty { padding: 60px 20px; color: var(--muted); text-align: center; }
.empty svg { display: block; width: 36px; height: 36px; margin: 0 auto 12px; color: #b2b8bf; }

.people-grid, .customer-grid, .content-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.person-card { min-width:0; padding: 18px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.person-head { display: flex; gap: 12px; align-items: center; }
.person-head .avatar { width: 42px; height: 42px; }
.person-head h3 { margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.person-head p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.status-dot { width: 8px; height: 8px; display: inline-block; margin-right: 5px; border-radius: 50%; background: #a7adb5; }
.status-dot.online { background: var(--green); }
.status-dot.busy { background: var(--orange); }
.person-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 17px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.person-stats div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.person-stats span { display: block; color: var(--muted); font-size: 11px; }
.person-stats strong { display: block; margin-top: 5px; font-size: 16px; }
.person-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; min-width:0; }
.person-actions .permission { margin-right:auto; }
.person-actions .permission-select { flex:1 1 132px; min-width:0; max-width:100%; }
.person-actions .btn { flex:0 0 auto; }
.person-head > div { min-width:0; }
.person-info { display: grid; gap: 9px; margin: 16px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.person-info span { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.person-info b { min-width:0; color: var(--ink); font-size: 12px; overflow-wrap:anywhere; text-align:right; }
.hitter-people-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); }
.hitter-person-card { overflow:hidden; }
.title-stack { margin-bottom:4px; color:#8a6d2f; font-size:11px; font-weight:700; overflow-wrap:anywhere; }
.person-tools { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:6px; margin-left:auto; }
.access-toggle { display:inline-flex; flex:1 1 170px; align-items:center; gap:8px; min-width:0; cursor:pointer; }
.access-toggle input { position:absolute; opacity:0; pointer-events:none; }
.toggle-track { position:relative; flex:0 0 38px; width:38px; height:22px; border-radius:11px; background:#b8bec5; transition:.18s; }
.toggle-track i { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:white; box-shadow:0 1px 3px #0003; transition:.18s; }
.access-toggle input:checked + .toggle-track { background:var(--green); }
.access-toggle input:checked + .toggle-track i { transform:translateX(16px); }
.access-toggle input:focus-visible + .toggle-track { outline:2px solid #ef8d7e; outline-offset:2px; }
.access-toggle b { min-width:0; color:var(--ink); font-size:12px; overflow-wrap:anywhere; }
.access-toggle.is-disabled, .access-toggle:has(input:disabled) { cursor:not-allowed; opacity:.58; }
.title-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.title-choice-grid label { min-width:0; display:flex; align-items:center; gap:9px; padding:11px 12px; border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.title-choice-grid label:has(input:checked) { border-color:#d7a049; background:#fffaf0; }
.title-choice-grid span { min-width:0; overflow-wrap:anywhere; }
.title-choice-grid .empty-inline { grid-column:1/-1; }
.inline-create { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.title-select-button { display:inline-flex; align-items:center; gap:6px; margin-top:5px; padding:0; }
.title-select-button svg { width:15px; }
.person-color-0 { background:#4f667b; }.person-color-1 { background:#7a5f57; }.person-color-2 { background:#4f796b; }.person-color-3 { background:#786a4e; }.person-color-4 { background:#65715c; }.person-color-5 { background:#6b6280; }
.permission { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.switch { width: 36px; height: 20px; position: relative; border: 0; border-radius: 10px; background: #c3c8ce; }
.switch::after { content: ""; width: 16px; height: 16px; position: absolute; left: 2px; top: 2px; border-radius: 50%; background: white; transition: .2s; }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(16px); }

.chart-layout { display: grid; grid-template-columns: 1.6fr .8fr; gap: 18px; }
.chart { height: 260px; padding: 26px 22px 20px; display: flex; align-items: flex-end; gap: 18px; border-top: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 49px, #edf0f2 50px); }
.bar-col { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.bar { width: min(36px, 70%); min-height: 4px; background: var(--brand); border-radius: 3px 3px 0 0; }
.bar-col span { color: var(--muted); font-size: 11px; }
.rank-list { padding: 8px 18px 16px; }
.rank-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rank-item:last-child { border-bottom: 0; }
.rank-num { color: var(--subtle); font-weight: 700; }
.rank-item strong { font-size: 13px; }
.rank-item span { color: var(--muted); font-size: 12px; }

.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(16,21,27,.48); animation: fade .15s ease-out; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 61; width: min(620px, 94vw); display: flex; flex-direction: column; background: white; box-shadow: var(--shadow); animation: slide .2s ease-out; }
.drawer-head { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 18px; }
.drawer-head .icon-btn { margin-left: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); background: #fafbfc; }
.detail-hero { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.detail-hero h3 { margin: 4px 0 6px; font-size: 20px; }
.detail-hero p { margin: 0; color: var(--muted); }
.detail-amount { text-align: right; }
.detail-amount strong { display: block; font-size: 23px; }
.detail-amount span { color: var(--muted); font-size: 11px; }
.detail-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: 0; }
.detail-section h4 { margin: 0 0 14px; font-size: 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; }
.detail-label { color: var(--muted); font-size: 11px; }
.detail-value { margin-top: 4px; font-weight: 500; }
.timeline { position: relative; padding-left: 19px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 1px; background: #dfe3e7; }
.timeline-item { position: relative; padding: 0 0 16px 8px; }
.timeline-item::before { content: ""; position: absolute; left: -18px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #aab1b9; box-shadow: 0 0 0 3px white; }
.timeline-item:first-child::before { background: var(--brand); }
.timeline-item strong { display: block; font-size: 12px; }
.timeline-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

.modal { position: fixed; left: 50%; top: 50%; z-index: 61; width: min(760px, calc(100vw - 28px)); max-height: 90vh; display: flex; flex-direction: column; transform: translate(-50%, -50%); border-radius: 8px; background: white; box-shadow: var(--shadow); animation: pop .18s ease-out; }
.modal-sm { width: min(480px, calc(100vw - 28px)); }
.modal-head { min-height: 66px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-head .icon-btn { margin-left: auto; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fafbfc; }
.form-section + .form-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-section-title { margin: 0 0 14px; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-suffix { position: relative; }
.input-suffix .form-control { padding-right: 40px; }
.input-suffix > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.form-group { min-width: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-label { display: block; margin-bottom: 7px; color: #4f5863; font-size: 12px; font-weight: 600; }
.required::after { content: " *"; color: var(--brand); }
.form-control { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d9dde2; border-radius: 5px; background: white; outline: 0; }
textarea.form-control { height: 76px; padding-top: 10px; resize: vertical; }
.form-control:focus { border-color: #89939f; box-shadow: 0 0 0 3px rgba(80,91,104,.08); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.segmented label { height: 40px; display: grid; place-items: center; border: 1px solid #d9dde2; color: var(--muted); cursor: pointer; }
.segmented label:first-child { border-radius: 5px 0 0 5px; }
.segmented label:last-child { margin-left: -1px; border-radius: 0 5px 5px 0; }
.segmented input { display: none; }
.segmented label:has(input:checked) { z-index: 1; color: var(--brand); border-color: var(--brand); background: #fff7f5; font-weight: 600; }
.head-actions .segmented { display:grid; grid-template-columns:repeat(3,minmax(72px,1fr)); min-width:252px; border:1px solid var(--line); border-radius:6px; background:white; overflow:hidden; }
.head-actions .segmented button { height:38px; padding:0 14px; border:0; border-right:1px solid var(--line); color:var(--muted); background:white; white-space:nowrap; }
.head-actions .segmented button:last-child { border-right:0; }
.head-actions .segmented button:hover { background:var(--soft); }
.head-actions .segmented button.active { color:white; background:var(--brand); font-weight:700; }
.check-row { display: flex; flex-wrap: wrap; gap: 16px; }
.check-row label { display: flex; align-items: center; gap: 7px; color: #505965; font-size: 12px; }
.hint { margin-top: 6px; color: var(--subtle); font-size: 11px; }

.toast { min-width: 270px; max-width: min(420px, calc(100vw - 30px)); display: flex; align-items: center; gap: 10px; padding: 13px 15px; margin-top: 10px; border-radius: 6px; color: white; background: #20262d; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast svg { width: 18px; color: #67c79f; }
.toast-error svg { color: #ff8d7b; }
#toast-root { position: fixed; right: 22px; top: 84px; z-index: 100; }

/* Authentication */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(540px, 1.1fr); background: white; }
.auth-brand { min-height: 100vh; position: relative; overflow: hidden; color: white; background: #171b21; }
.auth-brand::before { content:""; position:absolute; inset:0; opacity:.18; background:repeating-linear-gradient(120deg,transparent 0,transparent 58px,#7c8792 59px,transparent 60px); }
.auth-brand::after { content:"川"; position:absolute; right:-60px; bottom:-140px; color:#d94a32; opacity:.12; font-size:420px; line-height:1; font-weight:800; }
.auth-brand-inner { min-height:100vh; position:relative; z-index:1; display:flex; flex-direction:column; padding:44px 54px; }
.auth-logo { display:flex; align-items:center; gap:13px; }
.auth-logo > span, .auth-mobile-brand span { width:42px; height:42px; display:grid; place-items:center; border-radius:6px; color:white; background:var(--brand); font-size:20px; font-weight:800; }
.auth-logo strong { display:block; font-size:17px; }
.auth-logo small { display:block; margin-top:4px; color:#929aa5; font-size:10px; }
.auth-copy { margin:auto 0; }
.auth-copy > p { margin:0 0 18px; color:#d96855; font-size:11px; font-weight:700; }
.auth-copy h1 { margin:0; font-size:44px; line-height:1.28; letter-spacing:0; }
.auth-rule { width:42px; height:3px; margin:28px 0 20px; background:var(--brand); }
.auth-copy > span { color:#9aa2ad; }
.auth-foot { color:#747d88; font-size:12px; }
.auth-form-wrap { display:grid; place-items:center; padding:46px 7vw; overflow-y:auto; }
.auth-form-box { width:min(460px,100%); }
.auth-mobile-brand { display:none; }
.auth-tabs { display:flex; gap:24px; margin-bottom:36px; border-bottom:1px solid var(--line); }
.auth-tabs button { position:relative; padding:0 2px 13px; border:0; background:transparent; color:var(--muted); font-weight:600; }
.auth-tabs button.active { color:var(--ink); }
.auth-tabs button.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand); }
.auth-title { margin-bottom:26px; }
.auth-title h2 { margin:0 0 8px; font-size:25px; }
.auth-title p { margin:0; color:var(--muted); }
.auth-form > .form-group { display:block; margin-bottom:17px; }
.auth-grid { margin-bottom:20px; }
.input-icon { position:relative; }
.input-icon > svg { position:absolute; left:12px; top:11px; color:#8a929c; }
.input-icon .form-control { padding-left:40px; padding-right:40px; }
.input-icon button { position:absolute; right:7px; top:4px; width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; color:#8a929c; }
.input-icon button svg { width:16px; }
.auth-submit { width:100%; min-height:44px; margin-top:6px; }
.auth-note { margin:15px 0 0; color:var(--subtle); font-size:11px; text-align:center; }

/* Hitter workspace and operational controls */
.work-switch { display:flex; padding:3px; border-radius:6px; background:#e4e7ea; }
.work-switch button { height:34px; padding:0 12px; border:0; border-radius:4px; color:var(--muted); background:transparent; font-size:12px; }
.work-switch button.active { color:white; background:var(--green); font-weight:600; }
.alert-banner { min-width:0; display:flex; align-items:center; gap:10px; margin-bottom:16px; padding:13px 15px; border:1px solid #efc8c1; border-radius:6px; color:#a43d2c; background:#fff4f1; overflow-wrap:anywhere; }
.alert-banner svg { width:18px; }
.order-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.order-card { display:flex; flex-direction:column; min-height:280px; padding:18px; border:1px solid var(--line); border-radius:8px; background:white; }
.order-card, .order-card > *, .order-card-info > div { min-width:0; }
.order-card.specified { border-top:3px solid var(--brand); }
.order-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.order-card-top time { color:var(--subtle); font-size:11px; }
.order-card h3 { margin:18px 0 6px; font-size:16px; overflow-wrap:anywhere; }
.order-card > p { margin:0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.order-card-info { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:20px 0; }
.order-card-info span { display:block; color:var(--subtle); font-size:10px; }
.order-card-info b { display:block; margin-top:5px; font-size:13px; overflow-wrap:anywhere; }
.order-card-info-full { grid-column:1/-1; }
.order-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.order-card-actions .btn { flex:1; }
.order-flag-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.order-priority-note { display:flex; align-items:flex-start; gap:7px; margin-top:12px; padding:9px 10px; border:1px solid #f0c9bc; background:#fff7f3; color:#8e3e2d; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.order-priority-note > i { flex:0 0 auto; margin-top:1px; }
.order-entry-reason { margin:0 0 10px; color:#a13e31; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.specified-detail .order-priority-note { margin:0 0 12px; }
.supplement-detail { border-left:3px solid #d97832; padding-left:14px; }
.supplement-detail p { overflow-wrap:anywhere; }
.loading { min-height:300px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); }
.loading svg { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.date-range { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.report-bars { display:grid; gap:20px; padding:24px; }
.report-bars > div { position:relative; display:grid; grid-template-columns:1fr auto; gap:6px; padding-bottom:13px; }
.report-bars small { color:var(--muted); }
.report-bars i { position:absolute; left:0; bottom:0; height:4px; border-radius:2px; background:var(--brand); }
.report-customer { margin-top:18px; }
.rank-item small { color:var(--brand); font-size:10px; font-weight:500; }
.empty-inline { padding:25px 0; color:var(--muted); text-align:center; }
.content-avatar { border-radius:6px; background:#596775; }
.content-body { min-height:76px; line-height:1.7; color:var(--muted); }
.content-image { width:calc(100% + 36px); height:150px; display:block; margin:-18px -18px 16px; object-fit:cover; border-radius:7px 7px 0 0; }
.content-image-link { width:calc(100% + 36px); display:block; margin:-18px -18px 16px; border-bottom:1px solid var(--line); background:#fafbfc; }
.content-image-link .content-image { width:100%; height:170px; margin:0; border-radius:7px 7px 0 0; object-fit:cover; }
.content-image-link > span { min-height:34px; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--blue); font-size:11px; font-weight:600; }
.content-image-link:hover > span { background:#f3f6f9; }
.file-control { padding:7px; }
.hitter-checks { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hitter-checks label { display:flex; align-items:center; gap:8px; min-height:44px; padding:7px 9px; border:1px solid var(--line); border-radius:5px; }
.hitter-checks label:has(input:checked) { border-color:var(--brand); background:#fff7f5; }
.hitter-checks small { margin-left:auto; color:var(--subtle); }
.boss-specified-picker .hitter-checks label > span:not(.mini-avatar) { display:flex; flex:1; min-width:0; align-items:center; justify-content:space-between; gap:8px; }
.boss-specified-picker .hitter-checks small { margin-left:0; text-align:right; }
.upload-zone { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; margin-bottom:18px; border:1px dashed #b8bec6; border-radius:6px; color:var(--muted); background:#fafbfc; cursor:pointer; text-align:center; }
.upload-zone input { width:1px; height:1px; opacity:0; }
.upload-zone svg { color:var(--brand); }
.upload-zone span { font-size:11px; }
.notifications-drawer { width:min(460px,94vw); }
.notifications-drawer .drawer-head .btn { margin-left:auto; }
.notifications-drawer .drawer-head .icon-btn { margin-left:0; }
.notification-list { display:grid; gap:8px; }
.notification-item { width:100%; display:flex; gap:12px; padding:14px; border:1px solid var(--line); border-radius:6px; background:white; text-align:left; }
.notification-item.unread { border-left:3px solid var(--brand); background:#fffaf9; }
.notification-item > span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:6px; color:var(--brand); background:#fff0ed; }
.notification-item > div { min-width:0; }
.notification-item strong { display:block; }
.notification-item p { margin:5px 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; word-break:break-word; }
.notification-item time { color:var(--subtle); font-size:10px; }
.profile-hero { display:flex; align-items:center; gap:13px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.profile-hero h3 { margin:0 0 4px; }
.profile-hero p { margin:0; color:var(--muted); }
.form-intro { margin:0 0 18px; padding:11px 13px; border-left:3px solid var(--brand); color:var(--muted); background:#f7f8f9; font-size:12px; line-height:1.6; }

/* Account, approval and order-detail secondary views */
.settings-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,340px); gap:18px; align-items:start; }
.settings-main { min-width:0; }
.settings-panel { overflow:hidden; }
.settings-form { display:grid; gap:16px; padding:20px; }
.settings-form > .btn { justify-self:start; }
.avatar-editor { display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.avatar-editor strong { display:block; font-size:16px; }
.avatar-editor p { margin:5px 0; color:var(--muted); font-size:12px; }
.avatar-editor small { color:var(--subtle); font-size:11px; }
.avatar-xl { width:72px; height:72px; font-size:19px; }
.avatar-upload { position:relative; flex:0 0 auto; cursor:pointer; }
.avatar-upload > span { position:absolute; right:-2px; bottom:-2px; width:27px; height:27px; display:grid; place-items:center; border:2px solid white; border-radius:50%; color:white; background:var(--brand); }
.avatar-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.avatar-upload-button { display:block; margin-top:6px; border:0; background:transparent; color:var(--brand); font-size:12px; cursor:pointer; }
.avatar-crop-stage { width:320px; height:320px; margin:0 auto 18px; background:#1f252c; display:grid; place-items:center; overflow:hidden; }
.avatar-crop-stage canvas { width:320px; height:320px; display:block; }
.account-overview { padding:24px; text-align:center; }
.account-overview .account-avatar { display:flex; justify-content:center; }
.account-overview h3 { margin:12px 0 4px; }
.account-overview > p { margin:0 0 20px; color:var(--muted); }
.account-overview dl { margin:0; text-align:left; }
.account-overview dl div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.account-overview dt { color:var(--muted); font-size:12px; }
.account-overview dd { margin:0; font-size:12px; font-weight:600; text-align:right; }
.account-history { border-top:1px solid var(--line); }
.account-history .data-table { min-width:680px; }
.capability-summary { padding:10px 18px 16px; }
.capability-summary > div { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:7px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.capability-summary > div:last-child { border-bottom:0; }
.capability-summary .status-dot { margin:0; }
.capability-summary b { color:var(--muted); font-size:11px; }
.capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.capability-grid label { min-width:0; display:grid; grid-template-columns:auto 34px 1fr; align-items:center; gap:9px; padding:12px; border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.capability-grid label:has(input:checked) { border-color:#e3a69c; background:#fff8f6; }
.capability-grid label > span { width:32px; height:32px; display:grid; place-items:center; border-radius:5px; color:var(--brand); background:#fff0ed; }
.capability-grid label > span svg { width:16px; }
.capability-grid label > div { min-width:0; }
.capability-grid strong, .capability-grid small { display:block; overflow-wrap:anywhere; }
.capability-grid strong { font-size:12px; }
.capability-grid small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.45; }
.replace-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.replace-row > div:first-child { min-width:180px; flex:1; }
.replace-row strong, .replace-row span { display:block; }
.replace-row > div:first-child span { margin-top:5px; color:var(--muted); font-size:11px; }
.detail-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.detail-images a { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#fafbfc; }
.detail-images img { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; }
.detail-images span { display:block; padding:8px; overflow:hidden; color:var(--muted); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.order-timeline { position:relative; display:grid; gap:0; }
.order-timeline > div { position:relative; display:grid; grid-template-columns:105px 1fr auto; gap:10px; padding:0 0 18px 20px; }
.order-timeline > div::before { content:""; position:absolute; left:4px; top:8px; bottom:-8px; width:1px; background:var(--line); }
.order-timeline > div:last-child::before { display:none; }
.order-timeline i { position:absolute; left:0; top:5px; width:9px; height:9px; border:2px solid white; border-radius:50%; background:var(--brand); box-shadow:0 0 0 1px #e5a094; }
.order-timeline span, .order-timeline small { color:var(--muted); font-size:10px; }
.order-timeline strong { font-size:12px; }
.secondary-panel { margin-top:18px; }
.template-panel, .guide-price-panel { margin-top:18px; }
.template-panel .panel-head { min-height:68px; }
.template-panel .data-table { min-width:980px; }
.guide-price-panel .data-table { min-width:820px; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(30px); opacity: .7; } }
@keyframes pop { from { transform: translate(-50%, -48%); opacity: .4; } }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .people-grid, .customer-grid, .content-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid, .chart-layout { grid-template-columns: 1fr; }
  .order-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1300px) and (min-width: 761px) {
  .hitter-people-grid { grid-template-columns:1fr; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .page-head { align-items:stretch; flex-direction:column; }
  .head-actions { flex-wrap:wrap; }
  .metrics { grid-template-columns:1fr; }
  .metric { border-right:0; border-bottom:1px solid var(--line); }
  .metric:nth-child(2) { border-right:0; }
  .metric:last-child { border-bottom:0; }
  .order-card-grid { grid-template-columns:1fr; }
  .work-switch { width:100%; }
  .work-switch button { flex:1; }
}
@media (max-width: 760px) {
  :root { --sidebar-width: 230px; }
  .shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: .2s; box-shadow: var(--shadow); }
  .shell.menu-open .sidebar { transform: translateX(0); }
  .main { width: 100%; }
  .topbar { height: 62px; padding: 0 14px; }
  .icon-btn.mobile-menu { display: grid; }
  .search { flex: 1; width: auto; }
  .top-user, .topbar > .icon-btn:nth-of-type(2) { display: none; }
  .content { padding: 20px 14px 36px; }
  .page-head { align-items: stretch; flex-direction: column; margin-bottom: 18px; }
  .page-head h1 { font-size: 21px; }
  .head-actions { width: 100%; flex-wrap:wrap; }
  .head-actions .btn { flex: 1; }
  .head-actions .segmented { width:100%; min-width:0; }
  .head-actions .segmented button { min-width:0; padding:0 8px; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:nth-child(3) { border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .people-grid, .customer-grid, .content-grid { grid-template-columns: 1fr; }
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: auto; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .toolbar { align-items: stretch; }
  .tabs { width: 100%; overflow-x: auto; }
  .tab { flex: 0 0 auto; }
  .toolbar-spacer { display: none; }
  .field-inline { flex: 1; min-width: 120px; }
  #toast-root { right: 15px; top: 66px; }
  .auth-shell { display:block; background:white; }
  .auth-brand { display:none; }
  .auth-form-wrap { min-height:100vh; display:block; padding:30px 20px 44px; }
  .auth-mobile-brand { display:flex; align-items:center; gap:10px; margin-bottom:34px; }
  .auth-mobile-brand span { width:36px; height:36px; font-size:17px; }
  .auth-tabs { margin-bottom:28px; }
  .auth-grid { grid-template-columns:1fr; }
  .order-card-grid { grid-template-columns:1fr; }
  .work-switch { width:100%; }
  .work-switch button { flex:1; }
  .date-range { width:100%; }
  .date-range .field-inline { width:calc(50% - 18px); }
  .hitter-checks { grid-template-columns:1fr; }
  .settings-layout { grid-template-columns:1fr; }
  .settings-layout aside { order:-1; }
  .capability-grid { grid-template-columns:1fr; }
  .title-choice-grid { grid-template-columns:1fr; }
  .person-actions { align-items:stretch; }
  .access-toggle { flex-basis:100%; min-height:30px; }
  .person-tools { width:100%; margin-left:0; }
  .person-tools .btn { flex:1; }
  .detail-images { grid-template-columns:1fr 1fr; }
  .order-timeline > div { grid-template-columns:1fr; gap:3px; }
}
.deletion-reason{max-width:360px;white-space:normal;overflow-wrap:anywhere}
.snapshot-details{margin-top:16px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.snapshot-details summary{padding:12px 14px;cursor:pointer;font-weight:700}
.snapshot-details pre{max-height:420px;margin:0;padding:14px;overflow:auto;border-top:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
.public-boss-shell{min-height:100vh;background:#f6f7f9;color:#1c222b;font-family:Inter,"Noto Sans SC",sans-serif}
.boss-client-shell{min-height:100vh;background:#f6f7f9;color:#1c222b;padding-bottom:82px}.boss-client-top{height:68px;padding:0 clamp(18px,5vw,70px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e7e9ee;position:sticky;top:0;z-index:9}.boss-client-brand{display:flex;align-items:center;gap:9px}.boss-client-brand>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#c51f2b;color:#fff;font-weight:800;font-size:19px}.boss-client-brand strong{font-size:16px}.boss-client-user{display:flex;align-items:center;gap:8px;color:#66707d;font-size:13px}.boss-client-content{max-width:1180px;margin:0 auto;padding:24px clamp(16px,4vw,54px)}.boss-client-hero{padding:42px clamp(20px,5vw,52px);border-radius:12px;background:linear-gradient(120deg,#252c37,#822833);color:#fff}.boss-client-hero h1{font-size:clamp(28px,5vw,48px);margin:10px 0}.boss-client-hero p{color:#e7cfd1;margin:0 0 22px}.boss-client-section{margin-top:28px}.boss-client-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.boss-client-section-title h2{font-size:22px;margin:0}.boss-client-section-title button{border:0;background:transparent;color:#c51f2b;cursor:pointer}.boss-client-category-pills{display:flex;gap:10px;overflow:auto}.boss-client-category-pills button{display:flex;align-items:center;gap:12px;white-space:nowrap;border:1px solid #e4e7ec;background:#fff;padding:14px 17px;border-radius:8px;color:#4f5865;cursor:pointer}.boss-client-contact{margin-top:28px;display:flex;justify-content:space-between;align-items:center;padding:20px 22px;background:#fff;border:1px solid #e7e9ee;border-radius:9px}.boss-client-contact span,.boss-client-contact small{display:block;color:#8a919c;font-size:12px}.boss-client-contact strong{display:block;margin:6px 0;font-size:18px}.boss-client-contact em{font-style:normal;background:#e9edf1;color:#78818c;padding:5px 10px;border-radius:15px;font-size:12px}.boss-client-contact em.online{background:#e3f7eb;color:#17834a}.boss-client-page-head{margin:5px 0 24px}.boss-client-page-head h1{font-size:30px;margin:0 0 8px}.boss-client-page-head p{color:#88909b;margin:0}.boss-client-category-tabs{margin-bottom:22px}.boss-client-switch{display:flex;gap:4px;background:#eceff2;padding:4px;border-radius:8px;width:max-content;margin-bottom:22px}.boss-client-switch button{border:0;background:transparent;color:#737c87;padding:9px 18px;border-radius:6px;cursor:pointer}.boss-client-switch button.active{background:#fff;color:#c51f2b;box-shadow:0 2px 8px #20263012}.boss-client-profile-section .page-head{margin-top:0}.boss-client-tabs{height:76px;position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:center;gap:clamp(10px,6vw,65px);background:#fff;border-top:1px solid #e4e7ec;box-shadow:0 -5px 20px #18202c0c}.boss-client-tabs button{min-width:64px;border:0;background:transparent;color:#929aa4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:12px inherit;cursor:pointer}.boss-client-tabs button.active{color:#c51f2b}.auth-modal{width:min(460px,calc(100vw - 30px));max-height:calc(100vh - 30px);overflow:auto;background:#fff;border-radius:12px;padding:24px;box-shadow:0 22px 70px #11182740}.auth-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.auth-modal-head .public-brand strong{font-size:18px}.modal-backdrop:has(.auth-modal){display:flex;align-items:center;justify-content:center}.auth-modal .auth-form{margin:0}.auth-modal .auth-brand,.auth-modal .auth-mobile-brand{display:none}
.public-boss-header{height:76px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;gap:28px;background:#fff;border-bottom:1px solid #e7e9ee;position:sticky;top:0;z-index:10}
.public-brand{display:flex;align-items:center;gap:10px;margin-right:auto}.public-brand>span{display:grid;place-items:center;width:38px;height:38px;background:#c51f2b;color:#fff;font-weight:800;font-size:22px;border-radius:10px}.public-brand strong{display:block;font-size:17px}.public-brand small{display:block;color:#8a919c;font-size:11px;margin-top:3px}.public-boss-header nav{display:flex;gap:20px}.public-boss-header nav button,.public-footer button{border:0;background:transparent;color:#68717e;cursor:pointer;font:inherit}.public-boss-header nav button:hover,.public-footer button:hover{color:#c51f2b}.public-header-actions{display:flex;gap:8px}.public-login-btn,.public-internal-btn,.public-primary-btn,.public-ghost-btn{border:0;border-radius:7px;padding:10px 17px;font:600 13px inherit;cursor:pointer}.public-login-btn,.public-primary-btn{background:#c51f2b;color:#fff}.public-internal-btn{background:#f1f2f5;color:#505967}.public-ghost-btn{background:transparent;color:#c51f2b;border:1px solid #e7a7ad}
.public-hero{max-width:1280px;margin:0 auto;padding:clamp(60px,9vw,118px) clamp(20px,5vw,72px);display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;background:linear-gradient(125deg,#fff 0%,#fff8f7 52%,#f7eef0 100%)}.public-hero h1{font-size:clamp(38px,6vw,70px);letter-spacing:0;margin:12px 0 18px}.public-hero p{color:#69717e;font-size:17px;max-width:560px;line-height:1.8}.public-eyebrow,.public-section-heading>div>span,.public-contact-copy>span{color:#c51f2b;font-size:11px;font-weight:700;letter-spacing:1.8px}.public-hero-actions{display:flex;gap:12px;margin-top:30px}.public-hero-panel{background:#20262f;color:#fff;padding:30px;border-radius:12px;box-shadow:0 18px 45px #262d3b25}.public-hero-panel span{color:#f7b8bd;font-size:12px}.public-hero-panel strong{display:block;font-size:25px;line-height:1.45;margin:15px 0}.public-hero-panel small{color:#c3cad3;line-height:1.7}
.public-section{max-width:1280px;margin:0 auto;padding:70px clamp(20px,5vw,72px)}.public-section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.public-section-heading h2{font-size:30px;margin:8px 0 0}.public-section-heading p{color:#8a919c;font-size:13px}.public-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.public-service-card{background:#fff;border:1px solid #e7e9ee;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.public-service-card:hover{transform:translateY(-4px);box-shadow:0 14px 35px #242b3513}.public-service-card>img{display:block;width:100%;height:170px;object-fit:cover}.public-service-art{height:170px;background:linear-gradient(135deg,#272e3a,#ba303c);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:end}.public-service-art span{font-size:12px;opacity:.75}.public-service-art b{font-size:25px;margin-top:8px}.public-service-card-body{padding:18px}.public-service-category{color:#c51f2b;font-size:11px}.public-service-card h3{margin:8px 0;font-size:18px}.public-service-card p{height:38px;overflow:hidden;color:#8a919c;font-size:13px;line-height:1.5;margin:0 0 18px}.public-service-card-body>div{display:flex;align-items:center;justify-content:space-between}.public-service-card strong{font-size:20px;color:#c51f2b}.public-mini-action{border:0;background:#fff0f1;color:#c51f2b;border-radius:5px;padding:7px 10px;cursor:pointer}.public-category-section{background:#fff;max-width:none;padding-left:max(20px,calc((100% - 1136px)/2));padding-right:max(20px,calc((100% - 1136px)/2))}.public-category-tabs{display:flex;gap:8px;overflow:auto;margin-bottom:22px}.public-category-tabs button{border:1px solid #e4e7ec;background:#fff;border-radius:20px;padding:9px 18px;color:#727b88;white-space:nowrap;cursor:pointer}.public-category-tabs button.active{background:#c51f2b;border-color:#c51f2b;color:#fff}.public-contact-card{display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:center;background:#fff;border:1px solid #e7e9ee;border-radius:12px;padding:28px}.public-contact-card>img{width:180px;height:180px;object-fit:contain}.public-contact-copy h2{font-size:27px;margin:10px 0}.public-contact-copy p,.public-contact-copy small{color:#7c8591;line-height:1.7}.public-contact-line{display:flex;align-items:center;gap:14px;margin:20px 0}.public-contact-line strong{font-size:20px}.public-contact-line em{font-size:12px;font-style:normal;background:#f1f2f5;color:#7b8490;padding:5px 9px;border-radius:12px}.public-contact-line em.online{background:#e4f7ec;color:#17834a}.public-footer{padding:30px clamp(20px,5vw,72px);display:flex;justify-content:space-between;color:#9299a3;font-size:12px;border-top:1px solid #e7e9ee}.public-detail-drawer{position:fixed;z-index:31;right:0;top:0;height:100vh;width:min(520px,100vw);overflow:auto;background:#fff;box-shadow:-15px 0 45px #1d263027}.public-detail-head{height:64px;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid #e7e9ee;color:#707987;font-size:13px}.public-detail-image{width:100%;max-height:260px;object-fit:cover}.public-detail-body{padding:28px}.public-detail-body h2{font-size:30px;margin:10px 0}.public-detail-price{color:#c51f2b;font-size:28px;font-weight:800;margin:14px 0}.public-detail-price small{font-size:12px;margin-left:4px;color:#9a6065}.public-detail-body>p{color:#69717e;line-height:1.8}.public-detail-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.public-detail-list div{background:#f7f8fa;padding:12px;border-radius:7px}.public-detail-list span,.public-detail-list b{display:block;font-size:12px}.public-detail-list span{color:#8b939d;margin-bottom:6px}.public-detail-list b{line-height:1.45}.public-order-button{width:100%;font-size:15px}.public-detail-note{display:block;color:#9aa1aa;line-height:1.6;margin-top:15px}.auth-context-note{padding:10px 12px;background:#fff5f5;color:#b22833;border-radius:6px;font-size:12px;margin-bottom:16px}.auth-back-public{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;border:0;background:transparent;color:#8a919c;padding:14px;cursor:pointer}.public-settings-panel{margin-top:22px}.public-template-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.public-template-checks label{display:flex;gap:8px;align-items:center;padding:9px;background:#f7f8fa;border-radius:6px;font-size:12px}
@media (max-width:800px){.public-boss-header{height:auto;padding:14px 18px;flex-wrap:wrap;gap:12px}.public-boss-header nav{order:3;width:100%;justify-content:space-between}.public-header-actions{gap:5px}.public-login-btn,.public-internal-btn{padding:8px 10px;font-size:12px}.public-hero{grid-template-columns:1fr;padding-top:60px}.public-hero-panel{max-width:420px}.public-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-section{padding-top:48px;padding-bottom:48px}.public-section-heading{display:block}.public-section-heading p{margin-top:10px}.public-contact-card{grid-template-columns:1fr}.public-contact-card>img{width:150px;height:150px}.public-detail-list{grid-template-columns:1fr 1fr}.public-footer{gap:12px;flex-direction:column}.public-template-checks{grid-template-columns:1fr}}
@media (max-width:480px){.public-service-grid{grid-template-columns:1fr}.public-hero h1{font-size:40px}.public-hero-panel strong{font-size:21px}.public-contact-line{flex-wrap:wrap}}
.public-detail-drawer{z-index:61}
.auth-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:61}
.hitter-picker-search{margin:8px 0 10px}
.boss-current-order{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;margin:-4px 0 24px;background:#fff;border:1px solid #f0d4d6;border-left:4px solid #c51f2b;border-radius:9px;box-shadow:0 8px 24px #242b350c}.boss-current-order h2{margin:5px 0;font-size:20px}.boss-current-order p{margin:0;color:#89919c;font-size:12px}.boss-current-order-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.boss-profile-layout{display:block}.boss-profile-layout .settings-panel{max-width:760px;margin-bottom:18px}.boss-profile-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.boss-profile-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;background:#fff;border:1px solid #e3e7ec;border-radius:8px;min-width:0}.boss-profile-card h3{margin:5px 0;font-size:17px}.boss-profile-card p{margin:0;color:#77818e;font-size:12px;overflow-wrap:anywhere}.boss-profile-card .action-menu{flex-shrink:0}.boss-profile-modal .modal-body{overflow-y:auto;max-height:65vh}
@media(max-width:600px){.boss-current-order{align-items:flex-start;flex-direction:column}.boss-current-order-meta{width:100%;justify-content:space-between}}
.boss-client-shell [data-page="boss-create"]{display:none!important}
.guest-boss-nav{display:flex;gap:6px;max-width:1180px;margin:0 auto;padding:12px clamp(12px,4vw,54px) 0;overflow-x:auto;background:#f6f7f9}.guest-boss-nav button{border:0;background:#fff;color:#77818e;border-radius:6px;padding:9px 16px;white-space:nowrap;cursor:pointer}.guest-boss-nav button.active{background:#c51f2b;color:#fff}.guest-login-prompt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px}.guest-login-prompt .empty-inline{margin:0}
.guest-boss-nav{display:none}
.guest-boss-shell .guest-boss-tabs{display:flex!important;visibility:visible;opacity:1;z-index:100}
.guest-boss-actions{display:flex;gap:6px;align-items:center}.guest-boss-actions button{white-space:nowrap}
@media(max-width:480px){.guest-boss-actions{gap:4px}.guest-boss-actions button{padding:8px 9px;font-size:11px}}
@media(max-width:480px){.guest-boss-nav{padding:8px 10px 0}.guest-boss-nav button{flex:1;padding:8px 10px;font-size:12px}.guest-login-prompt{align-items:stretch;flex-direction:column;padding:22px 16px}.guest-login-prompt .btn{width:100%}}
/* Mobile workspace tuning */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .shell{display:block;min-height:100vh}
  .main{width:100%;min-width:0}
  .topbar{height:auto;min-height:62px;padding:10px 14px;gap:8px;flex-wrap:wrap}
  .topbar .search{order:3;flex-basis:100%;height:38px}
  .topbar .top-spacer{display:none}
  .top-user{margin-left:auto;max-width:145px;min-width:0}
  .top-user>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .content{padding:16px 13px 28px}
  .page-head{align-items:flex-start;gap:10px;margin-bottom:16px;flex-wrap:wrap}
  .page-head h1{font-size:22px;line-height:1.3}
  .page-head .head-actions{width:100%;display:flex;flex-wrap:wrap;gap:7px}
  .page-head .head-actions .btn{flex:1 1 auto;min-width:120px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .metric{padding:13px 12px;min-width:0}
  .metric-value{font-size:19px;overflow-wrap:anywhere}
  .panel-head{align-items:flex-start;gap:8px;flex-wrap:wrap;padding:14px}
  .panel-head .link-btn{margin-left:auto}
  .table-panel{overflow:hidden}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table{font-size:12px;min-width:640px}
  .data-table th,.data-table td{padding:9px 10px}
  .order-card-grid{grid-template-columns:1fr;gap:10px}
  .order-card{min-height:0;padding:14px}
  .order-card h3{margin-top:13px;font-size:15px}
  .order-card-info{gap:10px;margin:15px 0}
  .order-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-card-actions .btn{width:100%;min-width:0;padding-left:8px;padding-right:8px}
  .dashboard-grid{grid-template-columns:1fr;gap:12px}
  .form-grid,.settings-layout,.content-grid,.chart-layout{grid-template-columns:1fr}
  .form-group.full{grid-column:auto}
  .settings-panel{padding:15px}
  .hitter-checks{grid-template-columns:1fr}
  .action-menu{display:flex;flex-wrap:wrap;gap:6px}
  .action-menu .btn{min-width:0;max-width:100%}
  .drawer{width:100vw;max-width:100vw}
  .drawer-head{min-height:62px;padding:0 14px}
  .drawer-body{padding:15px}
  .drawer-actions{padding:11px 14px}
  .modal{width:calc(100vw - 20px);max-height:94vh}
  .modal-body{padding:15px}
  .modal-foot{padding:11px 15px;flex-wrap:wrap}
  .modal-foot .btn{flex:1;min-width:110px}
  .detail-grid{grid-template-columns:1fr 1fr}
  .detail-hero{display:block}
  .detail-amount{text-align:left;margin-top:12px}
  .detail-images{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .top-user .avatar{width:30px;height:30px}
  .content{padding-left:10px;padding-right:10px}
  .metrics{gap:7px}
  .metric-label{font-size:10px}
  .metric-hint{font-size:10px;line-height:1.35}
  .boss-client-content{padding:14px 12px 22px}
  .boss-client-top{height:58px;padding:0 12px}
  .boss-client-brand strong{font-size:14px}
  .boss-client-user>span:last-child{display:none}
  .boss-client-tabs{height:64px;gap:0;justify-content:stretch}
  .boss-client-tabs button{flex:1;min-width:0;font-size:11px}
  .boss-client-hero{padding:28px 18px;border-radius:9px}
  .boss-client-hero h1{font-size:30px}
  .boss-client-section{margin-top:20px}
  .public-service-grid{grid-template-columns:1fr}
  .boss-client-page-head h1{font-size:24px}
  .boss-client-contact{padding:15px;align-items:flex-start;gap:12px}
  .boss-profile-list{grid-template-columns:1fr}
  .boss-profile-card{align-items:flex-start;flex-direction:column}
  .boss-profile-card .action-menu{width:100%}
  .boss-profile-card .action-menu .btn{flex:1}
  .boss-current-order{padding:14px;margin-bottom:16px}
  .boss-current-order-meta{align-items:stretch;flex-direction:column}
  .boss-current-order-meta .btn{width:100%}
  .detail-grid{grid-template-columns:1fr}
  .detail-images{grid-template-columns:1fr}
  .check-row{align-items:stretch;flex-direction:column}
  .check-row .btn{width:100%}
  .segmented{width:100%;flex-wrap:wrap}
  .segmented label,.segmented button{flex:1;min-width:100px}
  .hitter-person-card .person-actions{align-items:stretch}
  .public-detail-body{padding:20px 16px}
  .public-detail-body h2{font-size:24px}
  .public-detail-list{grid-template-columns:1fr 1fr}
}