/* Neworia workspace redesign: one calm command surface, a queue-first home,
   and a true tablet layout. The existing CSS remains the feature foundation. */
:root {
  --bg: #071522;
  --sidebar: #141b22;
  --panel: #1b232b;
  --panel-2: #252e36;
  --control: #171f27;
  --line: #38444c;
  --sidebar-line: #2e3c47;
  --text: #f2f1ed;
  --muted: #bac3c9;
  --blue: #37b9e8;
  --blue-light: #a7e8ff;
  --focus: #72d3fb;
  --green: #52c99e;
  --red: #fa7780;
  --amber: #73d4f7;
  --radius: 10px;
  --radius-sm: 7px;
  --surface-shadow: 0 12px 34px #010b1426;
}
body.light {
  --bg: #e9ebed;
  --sidebar: #e1e4e6;
  --panel: #ffffff;
  --panel-2: #f4f4f2;
  --control: #ffffff;
  --line: #cbd0d2;
  --sidebar-line: #c3c9cc;
  --text: #222a30;
  --muted: #56636c;
  --blue: #087eaa;
  --blue-light: #ffe6c7;
  --focus: #087eaa;
  --green: #128563;
  --red: #ba3d4c;
  --amber: #087eaa;
  --surface-shadow: 0 10px 26px #1436470c;
}
html { scroll-padding-top: 74px; scrollbar-color: var(--line) var(--bg); }
body { background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
body:not(.light) { color-scheme: dark; }
body.light { color-scheme: light; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#app.layout { width: 100%; min-height: 100dvh; grid-template-columns: 270px minmax(0, 1fr); overflow-x: clip; background: var(--bg); }
.sidebar { position: sticky; top: 0; z-index: 25; display: flex; width: 270px; height: 100dvh; min-height: 0; flex-direction: column; overflow: hidden; padding: 16px 12px 12px; border-right: 1px solid var(--sidebar-line); background: var(--sidebar); }
.sidebar-brand-area { flex: 0 0 auto; padding: 0 6px 13px; }
.brand { gap: 11px; padding: 3px 2px 9px; color: var(--text); text-decoration: none; }
.brand-mark.small { width: 38px; height: 38px; border: 1px solid #2c5b73; border-radius: 9px; background: transparent; box-shadow: none; object-fit: contain; }
.brand b { font-size: 13px; font-weight: 750; letter-spacing: .075em; }
.brand small { color: var(--muted); font-size: 11px; }
.sidebar-workspace { display: block; min-height: 0; flex: 1 1 auto; overflow: hidden; border-top: 1px solid var(--sidebar-line); }
.side-navigation { height: 100%; overflow: auto; padding: 11px 2px 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.module-search { position: sticky; top: -11px; z-index: 3; display: grid; gap: 6px; margin: -11px -2px 14px; padding: 12px 8px 11px; border-bottom: 1px solid var(--sidebar-line); background: var(--sidebar); }
.module-search > span { color: var(--muted); font-size: 11px; font-weight: 550; }
.module-search input { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--control); color: var(--text); font-size: 13px; }
.module-search input::placeholder { color: var(--muted); }
.module-search input:focus { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 18%, transparent); }
.nav-group { display: grid; gap: 2px; margin: 0 0 9px; }
.nav-group[hidden], .nav-group.nav-search-empty { display: none !important; }
.nav-group-toggle { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; text-transform: none; }
.nav-group-toggle:hover { background: var(--panel-2); color: var(--text); }
.nav-group-chevron { display: grid; color: var(--muted); transition: transform .18s ease; }
.nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(180deg); }
.nav-item { display: flex; min-height: 40px; align-items: center; gap: 11px; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; text-align: left; }
.nav-item span { display: grid; width: 18px; flex: 0 0 18px; place-items: center; color: currentColor; }
.nav-item span svg { width: 17px; height: 17px; }
.nav-item:hover { background: color-mix(in srgb, var(--blue) 8%, var(--panel)); color: var(--text); }
.nav-item.active { border-color: color-mix(in srgb, var(--blue) 28%, var(--line)); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); color: var(--text); font-weight: 650; box-shadow: inset 2px 0 var(--blue); }
.nav-item.active span { color: var(--blue); }
.nav-item.nav-search-hidden { display: none !important; }
.sidebar-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; flex: 0 0 auto; margin-top: 8px; padding: 11px 3px 0; border-top: 1px solid var(--sidebar-line); background: var(--sidebar); }
.sidebar-bottom .online { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 25px; color: var(--muted); font-size: 11px; }
.sidebar-bottom .online::before { width: 7px; height: 7px; border-radius: 50%; background: var(--green); content: ""; }
.logout { min-height: 38px; padding: 6px 8px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); font-size: 12px; text-align: left; }
.logout:hover { border-color: var(--line); background: var(--panel-2); color: var(--text); }
.main { width: 100%; max-width: 1880px; min-width: 0; min-height: 100dvh; margin-inline: auto; padding: 0 clamp(22px, 3vw, 48px) 46px; }
.topbar { position: sticky; z-index: 15; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; margin: 0 calc(-1 * clamp(22px, 3vw, 48px)) 26px; padding: 10px clamp(22px, 3vw, 48px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 96%, transparent); }
.topbar-title, .topbar-actions { min-width: 0; }
.topbar .breadcrumbs { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.topbar .breadcrumbs span { padding-inline: 7px; color: var(--blue); }
.topbar h1 { margin: 1px 0 0; color: var(--text); font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.topbar-server-picker { display: grid; width: min(230px, 24vw); gap: 3px; padding-right: 14px; border-right: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .035em; }
.topbar-server-picker select, .mobile-server-picker select { width: 100%; min-width: 0; min-height: 42px; padding: 7px 34px 7px 11px; border: 1px solid var(--line); border-radius: 7px; background-color: var(--panel); color: var(--text); font-size: 13px; }
.topbar-server-picker select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%239bb8c6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 10px center; background-repeat: no-repeat; background-size: 15px; }
.user-chip { display: flex; max-width: 220px; min-height: 42px; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 12px; }
.user-chip img { width: 31px; height: 31px; border: 0; border-radius: 50%; object-fit: cover; }
.mobile-server-picker { display: none; }
.view { min-width: 0; animation: workspace-in .22s cubic-bezier(.2,.7,.25,1) both; }
.overview-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.overview-page-heading h2 { margin: 0 0 5px; color: var(--text); font-size: clamp(23px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; }
.overview-page-heading p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.overview-page-heading p strong { color: var(--text); font-weight: 600; }
.overview-separator { color: var(--blue); }
.overview-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.health-pill { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--green) 9%, var(--panel)); color: var(--green); font-size: 12px; font-weight: 650; }
.health-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.health-pill.offline { border-color: color-mix(in srgb, var(--red) 36%, var(--line)); background: color-mix(in srgb, var(--red) 8%, var(--panel)); color: var(--red); }
.button, .text-button { min-height: 40px; border-radius: 7px; font-weight: 600; }
.button.primary { border: 1px solid var(--blue); background: var(--blue); color: #041824; }
.button.primary:hover:not(:disabled) { border-color: #72d3fb; background: #72d3fb; }
.button.ghost { border: 1px solid var(--line); background: transparent; color: var(--text); }
.button.ghost:hover:not(:disabled) { border-color: var(--blue); background: var(--panel-2); }
.text-button { padding: 7px 10px; color: var(--blue-light); }
.text-button:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--text); }
.multi-select-tools .text-button:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 12%, var(--panel-2)); color: var(--text); }
.overview-focus { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.focus-card { position: relative; display: grid; min-width: 0; min-height: 82px; grid-template-columns: 11px minmax(0, 1fr); align-items: center; gap: 10px; padding: 13px 16px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; transition: background-color .16s ease; }
.focus-card:last-child { border-right: 0; }
.focus-card:hover { background: var(--panel-2); }
.focus-card:focus-visible { z-index: 1; outline-offset: -3px; }
.focus-icon { display: grid; width: 9px; height: 9px; place-items: center; border-radius: 50%; background: var(--blue); }
.focus-icon svg { display: none; }
.focus-urgent .focus-icon { background: var(--red); }
.focus-unassigned .focus-icon { background: var(--amber); }
.focus-completed .focus-icon { background: #849caf; }
.focus-card > span:last-child { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; }
.focus-card small { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; font-weight: 600; }
.focus-card strong { color: var(--text); font-size: 23px; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.15; }
.focus-card em { grid-column: 1 / -1; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.panel, .stat-card, .login-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
.panel { padding: 0; }
.panel-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 19px; border-bottom: 1px solid var(--line); }
.panel-head > div { min-width: 0; }
.panel-head h3, .panel h3, .section-intro h2 { margin: 0; color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.panel-head p, .panel-head .muted { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.overview-tickets { grid-column: 1; min-width: 0; overflow: hidden; }
.overview-tickets .panel-head { min-height: 66px; }
.overview-tickets .ticket-list { min-height: 0; padding: 0 18px; }
.overview-tickets .empty-state { min-height: 124px; padding: 36px 14px; color: var(--muted); text-align: center; }
.ticket-row { display: grid; min-width: 0; min-height: 62px; grid-template-columns: minmax(180px, 1.4fr) minmax(105px, .75fr) minmax(130px, .9fr); align-items: center; gap: 16px; padding: 10px 8px; border-bottom: 1px solid var(--line); background: transparent; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row:hover { background: color-mix(in srgb, var(--blue) 6%, var(--panel)); }
.ticket-name { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ticket-meta { color: var(--muted); font-size: 11px; }
.ticket-row .badge { justify-self: start; }
.ticket-assignee { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.overview-secondary-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: start; gap: 18px; }
.overview-secondary-grid > .overview-team-panel { grid-column: auto; grid-row: auto; min-width: 0; width: 100%; overflow: hidden; }
.overview-team-panel .panel-head select { width: auto; min-width: 130px; }
.distribution { display: grid; gap: 0; padding: 2px 18px; }
.distribution-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.distribution-row:last-child { border-bottom: 0; }
.distribution-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.distribution-row b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }
.progress-track { height: 5px; overflow: hidden; border-radius: 5px; background: var(--panel-2); }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.progress-track i.open { background: var(--amber); }
.progress-track i.claimed { background: var(--blue); }
.progress-track i.working { background: var(--green); }
.progress-track i.closed { background: #849caf; }
.attention-list, .compact-summary { display: grid; gap: 0; padding: 7px 14px; }
.attention-list > button { display: grid; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 7px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.attention-list > button:last-child { border-bottom: 0; }
.attention-list > button:hover { background: var(--panel-2); }
.attention-list .attention-icon { display: none; }
.attention-list > button > span:nth-child(2) { display: grid; gap: 2px; }
.attention-list b { font-size: 12px; }
.attention-list small { color: var(--muted); font-size: 11px; }
.attention-list strong { display: grid; color: var(--blue); }
.type-chip { min-width: 0; min-height: 42px; padding: 7px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.type-chip:last-child { border-bottom: 0; }
.type-chip strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.overview-metrics { margin-top: 28px; }
.overview-metrics-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.overview-metrics-heading h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 650; }
.overview-metrics-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { min-height: 95px; padding: 13px 15px; }
.stat-top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.stat-icon { display: none; }
.stat-value { margin-top: 7px; color: var(--text); font-size: 21px; font-variant-numeric: tabular-nums; font-weight: 650; }
.stat-sub { margin-top: 3px; color: var(--muted); font-size: 11px; }
.rating-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.rating-insights .panel { overflow: hidden; }
.rating-list { padding: 8px 15px; }
.rating-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.rating-row:last-child { border-bottom: 0; }
.rating-score { color: var(--blue-light); font-variant-numeric: tabular-nums; }
.rating-score small { color: var(--muted); }
.rating-count, .rating-date { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.section-intro { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 0 0 17px; border-bottom: 1px solid var(--line); }
.section-intro > div { min-width: 0; }
.section-intro h2 { font-size: 23px; letter-spacing: -.03em; }
.section-intro p { max-width: 68ch; margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.section-intro > .button { flex: 0 0 auto; }
.content-grid, .events-grid, .applications-layout, .logging-studio-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.settings-panel { display: grid; min-width: 0; gap: 15px; padding: 20px; }
.module-card { min-width: 0; overflow: hidden; }
.module-fields { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; padding: 18px; }
.module-fields > *, .settings-panel > * { min-width: 0; }
.module-fields > :is(.editor-heading, .editor-actions, .ticket-meta, .empty-state, .module-list, .linked-role-list, .invite-reward-rows, .counter-rows, .team-role-rows, .role-option-rows, .question-list, .resource-list, .resource-filters, .teamlist-preview, .preview-label, [id$="-rows"], [id$="-list"]), .module-fields > label:has(textarea), .module-fields > label:has(select[multiple]) { grid-column: 1 / -1; }
.input, textarea.input, select.input, .multi-select-trigger, .form-question { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--control); color: var(--text); }
textarea.input { min-height: 112px; resize: vertical; }
.input::placeholder, textarea.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus, textarea.input:focus, select.input:focus, .multi-select-trigger:focus-visible { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 18%, transparent); outline-offset: 1px; }
select.input option, select option { background: var(--panel); color: var(--text); }
.editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.panel .table-panel { min-width: 0; padding: 0 16px 12px; }
.ticket-table { min-width: 0; width: 100%; border-collapse: collapse; }
.ticket-table th { padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
.ticket-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.ticket-table tr:last-child td { border-bottom: 0; }
.notice { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); }
.badge { min-height: 22px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.empty-state { color: var(--muted); }
.mobile-tabbar, .mobile-server-picker { display: none; }
.mobile-more-dialog { width: min(520px, calc(100vw - 28px)); max-height: min(82dvh, 760px); margin: auto 14px 14px auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 18px 58px #0008; }
.mobile-more-dialog::backdrop { background: #020a10a8; backdrop-filter: blur(4px); }
.mobile-more-card { padding: 17px; }
@keyframes workspace-in { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 761px) and (max-width: 1120px) {
  #app.layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); }
  .sidebar { display: flex; width: 224px; padding: 13px 9px 10px; }
  .mobile-tabbar, .mobile-server-picker { display: none !important; }
  .brand small { font-size: 11px; }
  .main { padding-right: 22px; padding-left: 22px; }
  .topbar { margin-right: -22px; margin-left: -22px; padding-right: 22px; padding-left: 22px; }
  .topbar-server-picker { display: grid; width: 158px; }
  .overview-page-heading { align-items: flex-start; flex-wrap: wrap; }
  .overview-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-card:nth-child(2) { border-right: 0; }
  .focus-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .overview-secondary-grid { grid-template-columns: minmax(0, 1fr); }
  .rating-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rating-recent-panel { grid-column: 1 / -1; }
  .content-grid, .events-grid, .applications-layout, .logging-studio-grid { grid-template-columns: minmax(0, 1fr); }
  .module-fields { grid-template-columns: minmax(0, 1fr); }
  .module-fields > * { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  #app.layout { display: block; min-height: 100dvh; }
  .sidebar { display: none; }
  .main { width: 100%; max-width: none; min-height: 100dvh; padding: 0 15px calc(86px + env(safe-area-inset-bottom)); }
  .topbar { display: grid; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 -15px 18px; padding: calc(7px + env(safe-area-inset-top)) 15px 8px; }
  .topbar-title { min-width: 0; }
  .topbar .breadcrumbs { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar h1 { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { max-width: 56vw; gap: 6px; }
  .topbar-server-picker { display: none; }
  .mobile-server-picker { display: grid; width: clamp(112px, 33vw, 158px); gap: 2px; color: var(--muted); font-size: 11px; }
  .mobile-server-picker select { min-height: 40px; padding: 5px 28px 5px 8px; font-size: 12px; }
  .user-chip { width: 36px; min-width: 36px; max-width: 36px; min-height: 36px; overflow: hidden; justify-content: center; padding: 2px; }
  .user-chip img { width: 30px; height: 30px; }
  .user-chip span { display: none; }
  .overview-page-heading { display: grid; align-items: start; gap: 13px; margin-bottom: 14px; padding-bottom: 13px; }
  .overview-page-heading h2 { font-size: 24px; }
  .overview-page-heading p { gap: 5px; font-size: 12px; }
  .overview-page-actions { justify-content: space-between; }
  .health-pill { min-height: 36px; font-size: 11px; }
  .overview-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 9px; }
  .focus-card { min-height: 76px; gap: 8px; padding: 10px 12px; }
  .focus-card:nth-child(2) { border-right: 0; }
  .focus-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .focus-card small { font-size: 11px; }
  .focus-card strong { font-size: 20px; }
  .focus-card em { font-size: 10px; }
  .overview-tickets .panel-head { align-items: flex-start; padding: 13px 13px; }
  .overview-tickets .panel-head h3 { font-size: 15px; }
  .overview-tickets .panel-head .text-button { min-height: 40px; padding: 5px 7px; font-size: 12px; }
  .overview-tickets .ticket-list { padding: 0 12px; }
  .overview-tickets .empty-state { min-height: 78px; padding: 22px 8px; font-size: 12px; }
  .ticket-row { min-height: 66px; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 9px; padding: 9px 3px; }
  .ticket-row > div:first-child { grid-row: span 2; min-width: 0; }
  .ticket-row .badge { justify-self: end; }
  .ticket-assignee { grid-column: 2; justify-self: end; font-size: 11px; }
  .overview-secondary-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .overview-team-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .overview-team-panel .panel-head select { width: 100%; }
  .overview-metrics { margin-top: 20px; }
  .overview-metrics-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { min-height: 82px; padding: 10px; }
  .stat-value { margin-top: 5px; font-size: 18px; }
  .stat-top, .stat-sub { font-size: 11px; }
  .rating-insights { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 14px; }
  .rating-recent-panel { grid-column: auto; }
  .section-intro { align-items: stretch; flex-direction: column; gap: 11px; margin-bottom: 15px; padding-bottom: 13px; }
  .section-intro h2 { font-size: 21px; }
  .section-intro p { font-size: 12px; }
  .section-intro > .button { align-self: flex-start; min-height: 44px; }
  .content-grid, .events-grid, .applications-layout, .logging-studio-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .settings-panel { gap: 13px; padding: 15px; }
  .module-card > .module-fields, .module-fields { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 14px; }
  .module-fields > * { grid-column: 1 / -1; }
  .input, textarea.input, select.input, .multi-select-trigger { min-height: 44px; font-size: 16px; }
  .editor-actions > * { flex: 1 1 150px; }
  .mobile-tabbar { position: fixed; z-index: 40; inset: auto 0 0; display: grid !important; min-height: 62px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--sidebar) 96%, transparent); box-shadow: 0 -12px 30px #0002; }
  .mobile-tab { display: grid; min-width: 0; min-height: 48px; align-content: center; justify-items: center; gap: 3px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); }
  .mobile-tab > span { display: grid; place-items: center; }
  .mobile-tab > span svg { width: 19px; height: 19px; }
  .mobile-tab small { overflow: hidden; max-width: 100%; color: inherit; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tab.active { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); color: var(--blue-light); }
  body.light .mobile-tab.active { color: var(--blue); }
  .mobile-more-dialog { inset: auto 0 0; width: 100%; max-width: none; max-height: min(82dvh, 760px); margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .mobile-more-card { max-height: min(82dvh, 760px); overflow: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .mobile-more-head { position: sticky; top: -18px; z-index: 1; padding: 8px 0 12px; background: var(--panel); }
  .mobile-more-group { margin: 18px 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
  .mobile-more-item { min-height: 48px; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); }
}
@media (max-width: 390px) {
  .main { padding-right: 12px; padding-left: 12px; }
  .topbar { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  .topbar-actions { max-width: 58vw; }
  .mobile-server-picker { width: clamp(104px, 32vw, 132px); }
  .overview-page-actions { gap: 6px; }
  .overview-page-actions .button { padding-inline: 9px; font-size: 11px; }
  .focus-card { grid-template-columns: 8px minmax(0, 1fr); gap: 7px; padding-inline: 8px; }
  .focus-card em { white-space: normal; }
  .overview-tickets .panel-head { flex-direction: column; gap: 6px; }
  .overview-tickets .panel-head .text-button { align-self: flex-end; }
}
@media (pointer: coarse) {
  :where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea, [role="button"]) { min-height: 44px; }
  .mobile-tab { min-height: 48px; }
  .drawer-close { min-width: 44px; min-height: 44px; }
  .nav-group-toggle, .nav-item, .logout { min-height: 44px; }
  .overview-tickets .panel-head .text-button { min-height: 44px; }
  .nav-item:active, .button:active, .text-button:active, .mobile-tab:active { background-color: color-mix(in srgb, var(--blue) 14%, var(--panel)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .mobile-tabbar { background: var(--bg); }
  .mobile-more-dialog::backdrop { backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: #4d748a; --muted: #c4dce6; }
  body.light { --line: #536e7c; --muted: #334b57; }
  .panel, .stat-card, .input, textarea.input, select.input { border-width: 2px; }
}