:root {
  --navy: #091222;
  --navy-2: #101c32;
  --navy-3: #172541;
  --page: #f5f7fb;
  --surface: #fff;
  --line: #e3e8f0;
  --text: #0c1628;
  --muted: #7f8ba0;
  --red: #d93d31;
  --red-soft: #fff0ed;
  --gold: #eda43a;
  --gold-soft: #fff5e6;
  --blue: #377ee7;
  --purple: #785be7;
  --green: #11a77d;
  --sidebar: 240px;
  --shadow: 0 6px 18px rgba(26, 46, 77, .04);
}
* { box-sizing: border-box; }
html { background: var(--page); color: var(--text); font-family: "Manrope", "Noto Sans SC", system-ui, sans-serif; }
body { min-width: 1180px; margin: 0; background: var(--page); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.icon { width: 17px; height: 17px; display:block; object-fit:contain; }
.icon.sm { width: 14px; height: 14px; }
.icon.lg { width: 21px; height: 21px; }
.shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 5; padding: 21px 12px 15px; color: #c9d2df; background: var(--navy); display: flex; flex-direction: column; }
.brand { height: 58px; padding: 0 13px 17px; margin-bottom: 13px; border-bottom: 1px solid rgba(216,227,246,.12); display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 30px; height: 36px; border-radius: 14px 14px 12px 12px; display: grid; place-items: center; color: #ffe2a2; background: linear-gradient(145deg, #faaf39, #d23c2c); box-shadow: 0 0 0 3px rgba(237,164,58,.15); }
.brand-mark .icon { width: 22px; height: 22px; }
.brand-title { font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.brand-subtitle { margin-top: 3px; font-size: 10px; color: #8b98ae; }
.nav { display: grid; gap: 3px; }
.nav-item { min-height: 42px; padding: 0 13px; border: 0; border-left: 3px solid transparent; border-radius: 0 9px 9px 0; color: #aeb9cb; background: transparent; display: flex; align-items: center; gap: 13px; text-align: left; font-size: 13px; transition: .18s ease; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { border-left-color: var(--red); color: #fff; background: var(--navy-3); font-weight: 700; }
.nav-item.active .icon { color: #eda43a; }
.nav-item .nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; color: #fff; background: var(--red); display: grid; place-items: center; font-size: 10px; }
.sidebar-spacer { flex: 1; }
.switcher { margin: 0 1px 12px; padding: 12px 10px; border: 1px solid rgba(237,164,58,.4); border-radius: 14px; color: #f1ab3b; background: rgba(237,164,58,.08); display:flex; align-items:center; gap:8px; }
.switcher .icon { width: 15px; }
.switcher strong { display: block; font-size: 12px; }
.switcher small { display: block; margin-top: 2px; color: #8d98aa; font-size: 10px; }
.switcher .icon:last-child { margin-left: auto; color:#8290a7; }
.presence { margin: 0 4px 12px; padding: 8px 11px; border-radius: 8px; background:#0d1a31; color:#8795ab; font-size:10px; }
.presence b { color:#f0a93b; }
.profile { padding: 10px; border: 1px solid #233352; border-radius: 13px; display:flex; align-items:center; gap:9px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display:grid; place-items:center; color:#fff; background:#eda43a; font-size:12px; font-weight:800; }
.profile strong { color:#fff; font-size:12px; }
.profile small { display:block; margin-top:2px; color:#7d8ba2; font-size:10px; }
.profile .icon { margin-left:auto; color:#8c99ad; }
.main { margin-left: var(--sidebar); min-height:100vh; }
.topbar { height: 56px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #fff; display:flex; align-items:center; gap:20px; }
.page-label { min-width: 170px; font-size:17px; font-weight:800; }
.global-search { width: 450px; height: 36px; margin-left: auto; padding: 0 12px; border: 1px solid #e1e6ee; border-radius: 9px; color:#9aa5b6; background:#f8fafd; display:flex; align-items:center; gap:9px; font-size:12px; }
.global-search kbd { margin-left:auto; padding:3px 6px; border:1px solid #dde4ee; border-radius:5px; color:#8b97a9; background:#fff; font:11px "DM Mono", monospace; }
.top-actions { display:flex; align-items:center; gap:18px; }
.bell { position:relative; border:0; background:transparent; color:#5f6d82; }
.bell .notice { position:absolute; top:-6px; right:-8px; width:15px; height:15px; border-radius:50%; color:#fff; background:var(--red); font-size:9px; display:grid; place-items:center; }
.user-menu { height:36px; padding:0 11px 0 6px; border:1px solid #e1e6ee; border-radius:20px; color:#536174; background:#fff; display:flex; align-items:center; gap:8px; font-size:12px; }
.user-menu .avatar { width:25px; height:25px; }
.role { padding:3px 5px; border-radius:4px; color:#c47918; background:#fff1dc; font-size:9px; }
.primary { height:38px; padding:0 15px; border:0; border-radius:8px; color:#fff; background:var(--red); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:800; box-shadow: 0 7px 14px rgba(217,61,49,.14); }
.primary:hover { background:#c8362b; }
.workspace { padding: 24px 32px 56px; }
.container { max-width: 1392px; margin: 0 auto; }
.hero { min-height:120px; padding:26px 28px; border-radius:15px; color:#fff; background:#0b172c url('./assets/service-hero.png') center/cover no-repeat; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; }
.hero::after { content:""; position:absolute; inset:auto -50px -105px auto; width:380px; height:250px; background:url('./assets/service-hero.png') center/cover no-repeat; opacity:.12; border-radius:50%; }
.hero-content { position:relative; z-index:1; }
.hero h1 { margin:0; font-size:23px; letter-spacing:-.03em; }
.hero p { margin:7px 0 0; color:#b5c0d0; font-size:12px; }
.hero-actions { position:relative; z-index:1; display:flex; gap:11px; }
.outline-light { height:38px; padding:0 15px; border:1px solid #9aa7bc; border-radius:9px; color:#fff; background:transparent; display:inline-flex; align-items:center; gap:7px; font-size:12px; }
.outline-light:hover { background:rgba(255,255,255,.08); }
.metric-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:16px; }
.metric { min-height:112px; padding:17px 16px; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:13px; background:#fff; box-shadow:var(--shadow); }
.metric.red { border-top-color:#e55a4c; } .metric.purple { border-top-color:#805ee7; } .metric.green { border-top-color:#17ae81; } .metric.gold { border-top-color:#eea637; }
.metric-label { display:flex; align-items:center; gap:8px; color:#8792a5; font-size:11px; }
.metric-label .metric-icon { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:#edf4ff; color:var(--blue); }
.metric.red .metric-icon { color:#e35b4f; background:#fff0ef; } .metric.purple .metric-icon { color:#805ee7; background:#f1efff; } .metric.green .metric-icon { color:#17ae81; background:#e9f8f3; } .metric.gold .metric-icon { color:#e89c2a; background:#fff5e7; }
.metric-value { margin-top:8px; font:800 29px/1 "DM Mono", monospace; letter-spacing:-.08em; }
.metric-foot { margin-top:7px; color:#9aa4b5; font-size:10px; }
.metric-foot.up { color:#13a277; } .metric-foot span { margin-left:4px; }
.panel-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(330px,.9fr); gap:16px; margin-top:16px; }
.panel { padding:20px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel h2 { margin:0; font-size:15px; letter-spacing:-.02em; }
.more { border:0; color:#98a4b4; background:transparent; font-size:16px; }
.empty { min-height:290px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.empty-art { width:90px; height:90px; margin-bottom:14px; border:1px solid #e8edf3; border-radius:50%; color:#d69b47; background:#fffaf1; display:grid; place-items:center; }
.empty-art .icon { width:42px; height:42px; }
.empty strong { font-size:14px; }
.empty p { margin-top:8px; color:#a0abbc; font-size:12px; }
.empty .primary { margin-top:17px; height:37px; }
.bars { margin-top:23px; display:grid; gap:17px; }
.bar-row { display:grid; grid-template-columns:75px 1fr 26px; gap:10px; align-items:center; color:#647287; font-size:11px; }
.bar-track { height:16px; border-radius:7px; overflow:hidden; background:#f0f2f6; }
.bar-fill { height:100%; border-radius:7px; background:#eda43a; }
.bar-row:nth-child(2) .bar-fill { background:#7b61db; } .bar-row:nth-child(3) .bar-fill { background:#df6182; } .bar-row:nth-child(4) .bar-fill { background:#3288df; }
.deadline { margin-top:18px; padding:15px; border:1px solid #f1b0aa; border-radius:10px; background:#fffafa; }
.deadline-top { display:flex; justify-content:space-between; color:#d74439; font-size:10px; }
.deadline h3 { margin:13px 0 0; font-size:13px; }
.deadline small { display:block; margin-top:17px; color:#9aa5b5; font-size:10px; text-align:right; }
.deadline-line { height:6px; margin-top:13px; border-radius:5px; background:#e9eaf0; overflow:hidden; }
.deadline-line span { display:block; width:78%; height:100%; background:#dd3e34; }
.wide-panel { margin-top:16px; }
.status-list { margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:15px 28px; }
.status-line { display:grid; grid-template-columns:85px 1fr 34px; gap:10px; align-items:center; color:#718096; font-size:11px; }
.status-line .bar-track { height:10px; } .status-line .bar-fill { background:#eda43a; } .status-line:nth-child(2) .bar-fill { background:#377ee7; } .status-line:nth-child(3) .bar-fill { background:#785be7; } .status-line:nth-child(4) .bar-fill { background:#11a77d; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:19px; }
.page-heading h1 { margin:0; font-size:24px; }
.page-heading p { margin-top:7px; color:#8a95a8; font-size:12px; }
.page-tabs { display:flex; gap:27px; border-bottom:1px solid var(--line); }
.page-tab { padding:0 0 13px; border:0; border-bottom:2px solid transparent; color:#8b97aa; background:transparent; font-size:13px; }
.page-tab.active { border-color:var(--red); color:var(--text); font-weight:800; }
.filters { margin:20px 0 13px; display:flex; gap:9px; align-items:center; }
.filter-input { width:260px; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:8px; color:#647287; background:#fff; font-size:11px; outline:0; }
.filter-select { height:36px; min-width:110px; padding:0 10px; border:1px solid var(--line); border-radius:8px; color:#647287; background:#fff; font-size:11px; }
.filter-pills { display:flex; gap:7px; margin-bottom:15px; }
.filter-pill { padding:7px 12px; border:1px solid #e2e7ee; border-radius:999px; color:#728096; background:#fff; font-size:11px; }
.filter-pill.active { border-color:#f2c48a; color:#bf781c; background:#fff9ee; }
.ticket-table { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }
.ticket-head,.ticket-row { display:grid; grid-template-columns:70px 115px minmax(240px,1.3fr) 115px 115px 98px 108px 108px; gap:13px; align-items:center; }
.ticket-head { min-height:40px; padding:0 15px; color:#8793a7; background:#f8fafc; font-size:11px; }
.ticket-row { min-height:72px; padding:0 15px; border-top:1px solid #edf0f4; font-size:11px; }
.ticket-row:hover { background:#fbfcff; }
.priority { color:#7d899d; }
.ticket-title strong { display:block; color:#182337; font-size:12px; }
.ticket-title small { display:block; margin-top:4px; color:#8b96a7; }
.dept-chip { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:10px; }
.dept-chip.from { color:#0b9c79; background:#e9f8f3; } .dept-chip.to { color:#ca851f; background:#fff4e2; }
.ticket-status { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:999px; color:#c6811e; background:#fff2da; font-size:10px; }
.ticket-status::before { content:""; width:5px; height:5px; border-radius:50%; background:#edaa3c; }
.ticket-status.processing { color:#7256d8; background:#f1efff; } .ticket-status.processing::before { background:#785be7; }
.ticket-status.done { color:#159a78; background:#e9f8f3; } .ticket-status.done::before { background:#12a87c; }
.overdue { display:block; color:#d94439; margin-top:3px; font-size:10px; }
.count { color:#8c98a8; }
.section-row { margin-top:17px; display:flex; align-items:center; gap:14px; }
.section-row h2 { margin:0; font-size:18px; }
.section-row small { color:#8f9aac; font-size:11px; }
.customer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:17px; }
.customer-card,.directory-card,.dept-card { padding:17px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }
.customer-card h3,.directory-card h3 { margin:0; font-size:13px; }
.customer-card p,.directory-card p { margin-top:8px; color:#8a95a8; font-size:11px; line-height:1.7; }
.customer-card .customer-meta { margin-top:17px; display:flex; justify-content:space-between; color:#8490a4; font-size:10px; }
.directory-toolbar { display:flex; gap:8px; margin:18px 0 23px; }
.directory-toolbar input { width:410px; }
.dept-section { margin-top:28px; }
.dept-head { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.dept-color { width:5px; height:31px; border-radius:5px; background:#efa737; }
.dept-head h2 { margin:0; font-size:18px; }
.dept-head p { margin:3px 0 0; color:#8c97aa; font-size:11px; }
.directory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.directory-card { min-height:109px; position:relative; }
.service-icon { width:34px; height:34px; margin-bottom:10px; border-radius:10px; display:grid; place-items:center; color:#eda43a; background:#fff5e7; }
.directory-card .sla { display:inline-flex; margin-top:13px; padding:4px 8px; border-radius:999px; color:#da942b; background:#fff4df; font-size:10px; }
.directory-card .start { position:absolute; inset:auto 8px 8px; height:36px; display:none; width:calc(100% - 16px); }
.directory-card:hover .start { display:flex; }
.view-hero { min-height:157px; background:#0b172c; color:#fff; border-radius:13px; padding:28px; position:relative; overflow:hidden; }
.view-hero::after { content:""; position:absolute; inset:0 0 0 auto; width:38%; background:url('./assets/service-hero.png') center/cover; opacity:.15; }
.view-hero h1 { position:relative; z-index:1; margin:0; font-size:22px; }
.view-hero p { position:relative; z-index:1; margin-top:8px; max-width:410px; color:#bdc7d6; font-size:12px; line-height:1.6; }
.view-hero strong { position:relative; z-index:1; display:block; margin-top:16px; color:#eda43a; font-size:11px; }
.dept-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:17px; }
.dept-card { min-height:260px; }
.dept-card-head { display:flex; gap:11px; align-items:center; }
.dept-card .service-icon { margin:0; color:#377ee7; background:#edf4ff; }
.dept-card:nth-child(2) .service-icon { color:#785be7; background:#f1efff; } .dept-card:nth-child(3) .service-icon { color:#df6182; background:#fff0f5; } .dept-card:nth-child(4) .service-icon { color:#377ee7; background:#edf4ff; }
.dept-card h3 { margin:0; font-size:15px; }
.dept-card small { display:block; margin-top:4px; color:#8d98a9; font-size:10px; }
.dept-card p { margin:17px 0 13px; color:#8a95a8; font-size:11px; line-height:1.7; }
.tag-cloud { min-height:50px; display:flex; flex-wrap:wrap; gap:7px; }
.tag-cloud span { padding:6px 8px; border-radius:999px; color:#738198; background:#f5f7fa; font-size:10px; }
.dept-stat { margin-top:15px; padding-top:13px; border-top:1px solid #edf0f4; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dept-stat strong { display:block; font:700 17px "DM Mono",monospace; } .dept-stat small { margin-top:4px; }
.dept-link { display:inline-flex; margin-top:14px; color:#d99933; font-size:11px; }
.stats-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.chart-grid { display:grid; grid-template-columns:1.3fr .9fr; gap:16px; margin-top:17px; }
.chart-box { min-height:332px; }
.chart { height:230px; margin-top:24px; padding:0 13px 23px 33px; border-bottom:1px solid #e7ebf1; border-left:1px solid #e7ebf1; position:relative; display:flex; align-items:flex-end; justify-content:space-around; gap:22px; }
.chart::before,.chart::after { content:""; position:absolute; left:0; right:0; border-top:1px dashed #edf0f4; } .chart::before { top:42px; } .chart::after { top:112px; }
.chart-month { display:flex; align-items:flex-end; gap:6px; height:100%; position:relative; z-index:1; }
.chart-bar { width:19px; border-radius:5px 5px 0 0; background:#75a5e7; }
.chart-line { width:19px; border-radius:50%; background:#11a77d; box-shadow:0 0 0 4px rgba(17,167,125,.12); }
.chart-month small { position:absolute; bottom:-22px; left:-8px; color:#8995a8; font-size:10px; white-space:nowrap; }
.legend { display:flex; justify-content:flex-end; gap:16px; color:#7f8ba0; font-size:10px; }
.legend i { display:inline-block; width:9px; height:9px; margin-right:4px; border-radius:2px; background:#75a5e7; } .legend i.green { border-radius:50%; background:#11a77d; }
.funnel { margin:25px auto 0; width:250px; display:grid; gap:7px; text-align:center; color:#fff; font-size:11px; font-weight:700; }
.funnel span { display:grid; place-items:center; height:45px; background:#eda43a; clip-path:polygon(0 0,100% 0,86% 100%,14% 100%); } .funnel span:nth-child(2) { width:85%; margin:auto; background:#377ee7; } .funnel span:nth-child(3) { width:73%; margin:auto; background:#785be7; } .funnel span:nth-child(4) { width:61%; margin:auto; background:#11a77d; } .funnel span:nth-child(5) { width:49%; margin:auto; background:#9aa7b8; }
.compare-table { width:100%; margin-top:22px; border-collapse:collapse; color:#718096; font-size:11px; } .compare-table th,.compare-table td { padding:12px 11px; border-bottom:1px solid #edf0f4; text-align:left; } .compare-table th { color:#8995a6; font-weight:500; } .compare-table td strong { color:#162238; }
.modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:24px; background:rgba(5,12,24,.48); }
.modal-card { width:min(580px,100%); max-height:90vh; overflow:auto; padding:23px; border-radius:15px; background:#fff; box-shadow:0 20px 70px rgba(3,10,24,.25); }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:21px; } .modal-head h2 { margin:0; font-size:18px; } .modal-close { border:0; color:#8a95a7; background:transparent; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .field { display:grid; gap:7px; } .field.full { grid-column:1/-1; } .field label { color:#5f6d82; font-size:11px; } .field input,.field select,.field textarea { width:100%; padding:10px 11px; border:1px solid #dfe5ed; border-radius:8px; outline:0; color:#172339; background:#fbfcfe; font-size:12px; } .field textarea { min-height:84px; resize:vertical; line-height:1.6; } .field input:focus,.field select:focus,.field textarea:focus { border-color:#e29b35; box-shadow:0 0 0 3px rgba(226,155,53,.13); }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; } .ghost-btn { height:38px; padding:0 14px; border:1px solid #dfe5ed; border-radius:8px; color:#667489; background:#fff; font-size:12px; }
.toast { position:fixed; z-index:40; left:50%; bottom:24px; padding:10px 15px; border-radius:8px; color:#fff; background:#192840; box-shadow:0 10px 26px rgba(0,0,0,.18); opacity:0; transform:translate(-50%,10px); pointer-events:none; transition:.2s ease; font-size:12px; } .toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 1380px) { .workspace { padding-left:24px; padding-right:24px; } .directory-grid,.dept-grid { grid-template-columns:repeat(3,1fr); } .customer-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 1180px) { body { min-width: 980px; } .metric-grid { grid-template-columns:repeat(3,1fr); } .metric:nth-child(4),.metric:nth-child(5) { display:none; } .directory-grid,.dept-grid { grid-template-columns:repeat(2,1fr); } .customer-grid { grid-template-columns:repeat(2,1fr); } .ticket-head,.ticket-row { grid-template-columns:60px 100px minmax(200px,1fr) 95px 95px 90px; } .ticket-head > :nth-child(7),.ticket-head > :nth-child(8),.ticket-row > :nth-child(7),.ticket-row > :nth-child(8) { display:none; } }
@media (max-width: 1180px) {
  body { min-width:0; }
  .main { min-width:0; }
  .topbar { min-height:56px; height:auto; padding:9px 13px; gap:8px; flex-wrap:wrap; }
  .page-label { order:1; flex:1 1 auto; min-width:0; }
  .top-actions { order:2; margin-left:auto; flex:0 0 auto; }
  .global-search { order:3; flex:1 1 100%; width:100%; max-width:none; min-width:0; height:36px; }
  .global-search input { min-width:0; font-size:12px; }
  .global-search kbd { display:none; }
}
@media (max-width: 900px) {
  body { min-width: 0; }
  .sidebar { width: 76px; padding: 17px 8px 12px; }
  .brand { justify-content:center; padding:0 0 17px; }
  .brand > div:last-child,.nav-item > span:not(.nav-badge),.switcher > div,.switcher > .icon:last-child,.presence,.profile > div:not(.avatar),.profile > .icon { display:none; }
  .nav-item { justify-content:center; padding:0; position:relative; }
  .nav-item .nav-badge { position:absolute; top:4px; right:8px; }
  .switcher { justify-content:center; padding:10px 0; }
  .profile { justify-content:center; padding:8px 0; }
  .main { margin-left:76px; }
  .topbar { min-height:56px; height:auto; padding:9px 13px; gap:8px; flex-wrap:wrap; }
  .page-label { order:1; flex:1 1 auto; min-width:0; white-space:nowrap; font-size:15px; }
  .global-search { order:3; flex:1 1 100%; width:100%; max-width:none; min-width:0; height:36px; }
  .global-search input { min-width:0; font-size:12px; }
  .global-search kbd { display:none; }
  .top-actions { order:2; flex:0 0 auto; margin-left:auto; gap:6px; }
  .top-actions .primary { height:36px; padding:0 9px; font-size:11px; }
  .user-menu { display:none; }
  .workspace { padding:16px 13px 42px; }
  .hero { padding:20px; }
  .hero-actions { display:none; }
  .metric-grid,.stats-cards { grid-template-columns:repeat(2,1fr) !important; }
  .metric:nth-child(4),.metric:nth-child(5) { display:block; }
  .panel-grid,.chart-grid { grid-template-columns:1fr; }
  .directory-grid,.dept-grid,.customer-grid { grid-template-columns:1fr; }
  .ticket-head,.ticket-row { grid-template-columns:56px 95px minmax(170px,1fr) 90px; }
  .ticket-head > :nth-child(5),.ticket-head > :nth-child(6),.ticket-head > :nth-child(7),.ticket-head > :nth-child(8),.ticket-row > :nth-child(5),.ticket-row > :nth-child(6),.ticket-row > :nth-child(7),.ticket-row > :nth-child(8) { display:none; }
  .filters { flex-wrap:wrap; }
  .filter-input { width:100%; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}

/* Compact phone layout: keep navigation and primary actions reachable without horizontal scrolling. */
@media (max-width: 640px) {
  html, body { width:100%; min-width:0; overflow-x:hidden; }
  .sidebar { position:relative; inset:auto; width:100%; height:62px; min-height:62px; padding:7px 10px; flex-direction:row; align-items:center; gap:10px; overflow:hidden; }
  .brand { flex:0 0 auto; padding:0; border:0; }
  .brand > div:last-child { display:block; }
  .brand-title { font-size:12px; }
  .brand-subtitle { display:none; }
  .brand-mark { width:34px; height:34px; }
  .nav { display:flex; flex:1 1 auto; min-width:0; gap:4px; overflow-x:auto; scrollbar-width:none; }
  .nav::-webkit-scrollbar { display:none; }
  .nav-item { flex:0 0 auto; width:auto; min-width:46px; height:46px; padding:5px 7px; gap:2px; flex-direction:column; justify-content:center; border-radius:8px; }
  .nav-item > span:not(.nav-badge) { display:block; font-size:9px; line-height:1.1; }
  .nav-item .icon { width:17px; height:17px; }
  .nav-item .nav-badge { top:1px; right:1px; }
  .sidebar-spacer, .presence, .profile { display:none; }
  .main { margin-left:0; min-width:0; }
  .topbar { min-height:56px; height:auto; padding:9px 12px; gap:8px; flex-wrap:wrap; }
  .page-label { order:0; flex:0 0 auto; font-size:15px; }
  .global-search { order:2; flex:1 1 100%; width:100%; max-width:none; height:36px; }
  .top-actions { order:1; margin-left:auto; gap:5px; }
  .bell { display:none; }
  .user-menu { display:none; }
  .top-actions .primary { height:36px; padding:0 10px; font-size:11px; }
  .workspace { padding:12px 10px 32px; }
  .container { width:100%; }
  .hero { min-height:0; padding:18px 16px; border-radius:12px; }
  .hero h1 { max-width:100%; font-size:22px; line-height:1.3; }
  .hero p { font-size:11px; }
  .hero-actions { display:flex; margin-top:14px; }
  .hero-actions .ghost-btn { flex:1; }
  .metric-grid, .stats-cards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px; }
  .metric { min-width:0; padding:13px; }
  .metric-label { font-size:10px; }
  .metric-value { font-size:22px; }
  .metric-foot { font-size:9px; }
  .panel-grid, .chart-grid { grid-template-columns:1fr; gap:10px; }
  .panel { padding:15px; }
  .panel-head h2 { font-size:15px; }
  .status-list { grid-template-columns:1fr; gap:10px; }
  .ticket-table { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ticket-head, .ticket-row { min-width:560px; grid-template-columns:56px 95px minmax(170px,1fr) 90px; }
  .ticket-head > :nth-child(n+5), .ticket-row > :nth-child(n+5) { display:none; }
  .filters { gap:7px; }
  .filter-input { min-width:0; width:100%; }
  .filter-select { flex:1 1 calc(50% - 7px); min-width:0; }
  .directory-grid, .dept-grid, .customer-grid { grid-template-columns:1fr; gap:10px; }
  .directory-card, .dept-card, .customer-card { min-height:0; }
  .form-grid { gap:10px; }
  .modal { padding:10px; }
  .modal-card { max-height:calc(100vh - 20px); padding:16px; border-radius:12px; }
  .comment-form { flex-direction:column; align-items:stretch; }
  .comment-form .primary { width:100%; }
  .funnel { width:min(250px,100%); }
  .compare-table { min-width:480px; }
}

/* Runtime compact header: applied from the measured topbar width so embedded mobile webviews cannot keep the desktop row. */
.topbar.compact { min-height:56px; height:auto; padding:9px 13px; gap:8px; flex-wrap:wrap; }
.topbar.compact .page-label { order:1; flex:1 1 auto; min-width:0; }
.topbar.compact .top-actions { order:2; margin-left:auto; flex:0 0 auto; }
.topbar.compact .global-search { order:3; flex:1 1 100%; width:100%; max-width:none; min-width:0; height:36px; }
.topbar.compact .global-search input { min-width:0; font-size:12px; }
.topbar.compact .global-search kbd { display:none; }