@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Oxanium:wght@500;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --gt-bg-0: #040404;
  --gt-bg-1: #0b0b0b;
  --gt-bg-2: #141414;
  --gt-bg-3: #1a1a1a;
  --gt-panel: rgba(15, 15, 15, 0.96);
  --gt-panel-2: rgba(24, 24, 24, 0.98);
  --gt-frame: #ffb100;
  --gt-frame-soft: #c78300;
  --gt-active: #2d6dff;
  --gt-text: #f1be48;
  --gt-text-soft: #dfbf68;
  --gt-text-dim: #d2a53a;
  --gt-danger: #ff4d36;
  --gt-warning: #ffb100;
  --gt-handoff: #ff7a00;
  --gt-info: #2d6dff;
  --gt-success: #f2c94c;
  --gt-closed: #5a6472;
  --gt-grid-line: rgba(255, 177, 0, 0.12);
  --gt-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
  --gt-radius: 18px;
  --gt-radius-lg: 24px;
  --glass-bg: rgba(15, 15, 15, 0.96);
  --glass-border: rgba(255, 177, 0, 0.24);
  --shadow-lg: var(--gt-shadow);
  --radius-lg: var(--gt-radius-lg);
  --text-primary: var(--gt-text);
  --text-secondary: var(--gt-text-soft);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--gt-text);
  font-family: 'IBM Plex Sans', sans-serif;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.88)),
    linear-gradient(90deg, transparent 0 19%, var(--gt-grid-line) 19% 19.3%, transparent 19.3% 39%, var(--gt-grid-line) 39% 39.3%, transparent 39.3% 59%, var(--gt-grid-line) 59% 59.3%, transparent 59.3% 79%, var(--gt-grid-line) 79% 79.3%, transparent 79.3%),
    linear-gradient(0deg, transparent 0 24%, var(--gt-grid-line) 24% 24.3%, transparent 24.3% 49%, var(--gt-grid-line) 49% 49.3%, transparent 49.3% 74%, var(--gt-grid-line) 74% 74.3%, transparent 74.3%),
    radial-gradient(circle at top right, rgba(255, 177, 0, 0.08), transparent 25%),
    radial-gradient(circle at bottom left, rgba(45, 109, 255, 0.08), transparent 25%),
    #050505;
  background-attachment: fixed;
}

body,
body p,
body span,
body div,
body small,
body strong,
body label,
body li,
body td,
body th,
body input,
body textarea,
body select,
body button,
body a {
  color: #f1be48;
}

a { color: inherit; }

.btn,
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
  box-shadow: none !important;
}

.btn {
  border-radius: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gt-button-primary,
.btn-primary {
  background: linear-gradient(180deg, #1d1402 0%, #090909 100%);
  border: 1px solid #f7c556;
  color: #f1be48 !important;
}

.gt-button-primary:hover,
.btn-primary:hover {
  background: linear-gradient(180deg, #2a1b03 0%, #111111 100%);
  color: #ffd56b !important;
}

.gt-button-secondary,
.btn-outline-light,
.btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 177, 0, 0.45);
  color: #f1be48 !important;
}

.gt-button-danger,
.btn-danger {
  background: linear-gradient(180deg, #331109 0%, #1a0907 100%);
  border: 1px solid #ff9673;
  color: #f1be48 !important;
}

.gt-input,
.form-control,
.form-select,
textarea.form-control {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 177, 0, 0.26);
  color: #f1be48 !important;
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
}

.gt-input::placeholder,
.form-control::placeholder {
  color: var(--gt-text-dim);
}

.gt-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
}

.gt-rail {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  padding: 20px 18px;
  background: var(--gt-panel);
  border: 2px solid var(--gt-frame);
  border-radius: var(--gt-radius-lg);
  box-shadow: var(--gt-shadow);
  overflow-y: auto;
}

.gt-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 177, 0, 0.24);
  margin-bottom: 18px;
}

.gt-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ff5b3c 0%, #dd2d18 100%);
  border: 2px solid #fff;
  color: #fff;
  font-family: 'Oxanium', sans-serif;
  font-weight: 800;
}

.gt-brand-title,
.gt-screen-title,
.gt-panel-header h2,
.gt-mini-title,
.gt-protocol-title,
.gt-case-strip h2 {
  font-family: 'Oxanium', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f1be48 !important;
  text-shadow: 0 0 14px rgba(255, 177, 0, 0.08);
}

.gt-brand-title { font-size: 1.15rem; font-weight: 800; }
.gt-brand-subtitle { color: #d8ac44 !important; font-size: 0.84rem; }

.gt-rail-group-title,
.gt-kicker,
.gt-panel-kicker,
.gt-card-kicker,
.gt-metric-label {
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #d8ac44 !important;
}

.gt-destination-list {
  display: grid;
  gap: 10px;
}

.gt-destination-list.compact { margin-top: 8px; }

.gt-destination-tile,
.gt-destination-block {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 177, 0, 0.24);
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.gt-destination-tile:hover,
.gt-destination-block:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 177, 0, 0.7);
}

.gt-destination-tile.active {
  background: linear-gradient(180deg, rgba(39, 39, 39, 0.98), rgba(14, 14, 14, 0.98));
  border-color: #fff;
  box-shadow: inset 0 0 0 2px rgba(45, 109, 255, 0.3);
}

.gt-destination-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gt-destination-copy strong {
  font-family: 'Oxanium', sans-serif;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.gt-destination-copy small {
  color: #cfa23a !important;
}

.gt-icon-tile {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oxanium', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #000;
}

.gt-red { background: linear-gradient(180deg, #ff5b3c 0%, #d6220f 100%); color: #111; }
.gt-orange { background: linear-gradient(180deg, #ff9d1e 0%, #d86d00 100%); }
.gt-amber { background: linear-gradient(180deg, #ffca28 0%, #f09a00 100%); }
.gt-yellow { background: linear-gradient(180deg, #ffd84e 0%, #f8b000 100%); }
.gt-checker { background: linear-gradient(180deg, #ffffff 0%, #dbdbdb 100%); }

.gt-screen {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.gt-topbar,
.gt-panel-frame,
.gt-case-strip {
  background: var(--gt-panel);
  border: 2px solid var(--gt-frame);
  border-radius: var(--gt-radius-lg);
  box-shadow: var(--gt-shadow);
}

.gt-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
}

.gt-screen-title { margin: 8px 0 6px; font-size: 2rem; font-weight: 800; }
.gt-screen-subtitle { margin: 0; color: #e2c16a !important; max-width: 74ch; }
.gt-screen-subtitle,
.page-subtitle {
  display: none !important;
}
.gt-topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.gt-flash-stack { display: grid; gap: 10px; }
.gt-flash { padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; font-weight: 600; }
.gt-flash.success { background: rgba(242, 201, 76, 0.14); border-color: rgba(242, 201, 76, 0.4); }
.gt-flash.danger { background: rgba(255, 77, 54, 0.12); border-color: rgba(255, 77, 54, 0.4); }
.gt-flash.info { background: rgba(45, 109, 255, 0.12); border-color: rgba(45, 109, 255, 0.4); }

.gt-page-grid { display: grid; gap: 16px; }

.gt-metric-grid { display: grid; gap: 14px; }
.gt-metric-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gt-metric-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gt-metric-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gt-metric-grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.gt-metric-card {
  background: var(--gt-panel-2);
  border: 1px solid rgba(255, 177, 0, 0.22);
  border-radius: 18px;
  padding: 16px;
}

.gt-metric-card strong {
  display: block;
  font-family: 'Oxanium', sans-serif;
  font-size: 1.7rem;
  margin-top: 8px;
  color: #f1be48 !important;
  text-shadow: 0 0 14px rgba(255, 177, 0, 0.08);
}

.gt-metric-card small { color: #d6b45a !important; display: block; margin-top: 6px; }
.gt-metric-card.attention { border-color: rgba(45, 109, 255, 0.6); }
.gt-metric-card.warning { border-color: rgba(255, 177, 0, 0.6); }
.gt-metric-card.alert { border-color: rgba(255, 122, 0, 0.6); }
.gt-metric-card.danger { border-color: rgba(255, 77, 54, 0.7); }
.gt-metric-card.handoff { border-color: rgba(255, 122, 0, 0.7); }
.gt-metric-card.info { border-color: rgba(45, 109, 255, 0.7); }
.gt-metric-card.muted { border-color: rgba(120, 120, 120, 0.4); }

.gt-two-column {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.gt-two-column.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt-span-4 { grid-column: span 4; }
.gt-span-8 { grid-column: span 8; }

.gt-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 177, 0, 0.18);
}

.gt-panel-header h2,
.gt-mini-title { margin: 4px 0 0; font-size: 1.15rem; }

.gt-panel-body { padding: 18px 20px 20px; }

.gt-inline-link,
.gt-inline-chip,
.gt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

.gt-inline-link { text-decoration: none; color: var(--gt-warning); }
.gt-inline-chip { padding: 6px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,177,0,0.3); }
.gt-inline-chip { color: #f1be48 !important; }
.gt-inline-chip.warning { border-color: rgba(255,177,0,0.65); }
.gt-inline-chip.danger { border-color: rgba(255,77,54,0.65); }
.gt-inline-chip.alert { border-color: rgba(255,122,0,0.65); }

.gt-card-stack,
.gt-list-grid,
.gt-kv-stack,
.gt-form-stack,
.gt-activity-strip,
.gt-split-stack {
  display: grid;
  gap: 12px;
}

.gt-list-grid.compact,
.gt-card-stack.compact { gap: 10px; }
.gt-split-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gt-protocol-card,
.gt-list-item,
.gt-protocol-row {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 177, 0, 0.18);
  border-radius: 18px;
  padding: 14px;
}

.gt-protocol-card.urgent,
.gt-protocol-row.priority { border-color: rgba(255, 77, 54, 0.55); }
.gt-list-item.static { cursor: default; }

.gt-card-topline,
.gt-protocol-header,
.gt-card-line,
.gt-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.gt-card-topline strong,
.gt-protocol-title,
.gt-list-item strong { font-size: 1rem; }
.gt-card-topline span,
.gt-protocol-meta,
.gt-meta-inline,
.gt-list-item small,
.gt-list-item span,
.gt-kv span,
.gt-empty-state { color: var(--gt-text-soft); }

.gt-card-topline strong,
.gt-list-item strong,
.gt-kv strong,
.gt-panel-body strong,
.gt-message-heading strong,
.gt-message-top strong,
.gt-date-divider,
.gt-inline-link {
  color: #f1be48 !important;
}

.gt-protocol-meta,
.gt-meta-inline,
.gt-list-item small,
.gt-list-item span,
.gt-kv span,
.gt-empty-state,
.gt-case-strip p,
.gt-activity-item small,
.gt-destination-block small {
  color: #d7b55e !important;
}

.gt-card-grid,
.gt-protocol-aux-grid,
.gt-case-meta-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.gt-card-grid,
.gt-protocol-aux-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gt-protocol-aux-grid.compact.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gt-case-meta-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.gt-card-preview {
  margin: 12px 0 0;
  color: var(--gt-text);
  line-height: 1.5;
}

.gt-badge-row,
.gt-inline-actions,
.gt-toolbar-main,
.gt-toolbar-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gt-badge-row { margin-top: 12px; }
.gt-inline-actions { margin-top: 14px; }

.gt-status-badge {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.gt-status-badge.open,
.gt-status-badge.bot-active,
.gt-status-badge.waiting-waiting_client { border-color: rgba(45, 109, 255, 0.55); color: #bcd1ff; }
.gt-status-badge.closed { border-color: rgba(95, 102, 114, 0.6); color: #c2cad8; }
.gt-status-badge.unread { border-color: rgba(255, 177, 0, 0.75); color: #ffd56b; }
.gt-status-badge.waiting-waiting_operator,
.gt-status-badge.priority { border-color: rgba(255, 77, 54, 0.8); color: #ffb0a2; }
.gt-status-badge.handoff,
.gt-status-badge.waiting-human_handoff { border-color: rgba(255, 122, 0, 0.8); color: #ffc28a; }
.gt-status-badge.os-open { border-color: rgba(255, 122, 0, 0.8); color: #ffd69a; }
.gt-status-badge.reopened { border-color: rgba(45, 109, 255, 0.8); color: #d7e4ff; }

.gt-empty-state {
  padding: 26px;
  text-align: center;
  border: 1px dashed rgba(255, 177, 0, 0.2);
  border-radius: 14px;
}

.gt-empty-state.compact { padding: 14px; }

.gt-toolbar {
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}

.gt-queue-list { display: grid; gap: 14px; }

.gt-protocol-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 16px;
  align-items: stretch;
}

.gt-protocol-row.compact { grid-template-columns: minmax(0, 1fr) 340px; }

.gt-protocol-actions,
.compact-form {
  display: grid;
  gap: 10px;
  align-content: start;
}

.gt-protocol-main { display: grid; gap: 10px; }
.gt-meta-inline.right { text-align: right; }
.with-top-space { margin-top: 14px; }

.gt-activity-item {
  display: grid;
  gap: 2px;
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid rgba(255, 177, 0, 0.16);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}

.gt-activity-item strong { font-family: 'Oxanium', sans-serif; }
.gt-activity-item small { color: #d7b55e !important; }

.gt-case-strip {
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}

.gt-case-strip h2 { margin: 4px 0 6px; font-size: 1.45rem; }
.gt-case-strip p { margin: 0; color: #e0c16a !important; }

.gt-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) 380px;
  gap: 16px;
}

.gt-side-rail,
.timeline-column { display: grid; gap: 16px; align-self: start; }

.gt-timeline {
  max-height: 70vh;
  overflow-y: auto;
}

.gt-date-divider {
  align-self: center;
  justify-self: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 177, 0, 0.12);
  color: var(--gt-warning);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

.gt-message-card {
  border: 1px solid rgba(255, 177, 0, 0.16);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.gt-message-card.user { border-left: 4px solid var(--gt-warning); }
.gt-message-card.assistant { border-left: 4px solid var(--gt-active); }
.gt-message-card.admin { border-left: 4px solid var(--gt-handoff); }
.gt-message-card.system,
.gt-message-card.system-event { border-left: 4px solid var(--gt-success); }

.gt-message-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #e0c16a !important;
}

.gt-message-heading,
.gt-message-meta-pack {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gt-message-meta-pack {
  justify-content: flex-end;
}

.gt-message-top span {
  color: #dcbf70 !important;
}

.gt-message-body {
  white-space: pre-wrap;
  line-height: 1.65;
  color: #f7e6b3 !important;
}

.gt-message-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 177, 0, 0.28);
  background: rgba(255, 177, 0, 0.08);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f1be48 !important;
}

.gt-message-status.read {
  border-color: rgba(242, 201, 76, 0.5);
  background: rgba(242, 201, 76, 0.14);
}

.gt-message-status.delivered,
.gt-message-status.sent {
  border-color: rgba(45, 109, 255, 0.35);
  background: rgba(45, 109, 255, 0.1);
}

.gt-inline-chip.compact {
  padding: 2px 8px;
  font-size: 0.8rem;
}

.gt-kv {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,177,0,0.14);
}

.gt-kv strong { text-align: right; }

.gt-form-grid,
.two-column-form {
  display: grid;
  gap: 10px;
}

.gt-reply-dock {
  border-top: 1px solid rgba(255, 177, 0, 0.18);
  padding: 16px 20px 20px;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.96), rgba(8, 8, 8, 0.98));
  position: sticky;
  bottom: 0;
  z-index: 3;
}

.gt-reply-form {
  display: grid;
  gap: 10px;
}

.gt-reply-label {
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #f1be48;
  font-weight: 700;
}

.gt-reply-textarea {
  min-height: 120px;
}

.two-column-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gt-textarea-label { display: grid; gap: 6px; font-weight: 600; }
.gt-textarea { min-height: 180px; font-family: 'IBM Plex Mono', monospace; }

.gt-destination-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.gt-destination-block {
  flex-direction: column;
  align-items: flex-start;
  min-height: 150px;
}

.gt-destination-block strong {
  font-family: 'Oxanium', sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
}

.gt-destination-block small { color: #d7b55e !important; }

.gt-table-wrap { overflow-x: auto; }

.gt-data-table {
  width: 100%;
  border-collapse: collapse;
}

.gt-data-table th,
.gt-data-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 177, 0, 0.14);
  vertical-align: top;
}

.gt-data-table th {
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gt-text-dim);
  font-size: 0.82rem;
}

.gt-auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.gt-auth-card {
  width: min(520px, 100%);
  background: var(--gt-panel);
  border: 2px solid var(--gt-frame);
  border-radius: var(--gt-radius-lg);
  box-shadow: var(--gt-shadow);
  padding: 28px;
}

.gt-mobile-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 2px solid var(--gt-frame);
  background: #101010;
  color: var(--gt-text);
}

@media (max-width: 1500px) {
  .gt-metric-grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gt-metric-grid-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1240px) {
  .gt-shell { grid-template-columns: 1fr; }
  .gt-rail {
    position: fixed;
    left: 16px;
    top: 16px;
    width: min(320px, calc(100vw - 32px));
    height: calc(100vh - 32px);
    transform: translateX(-120%);
    transition: transform 0.2s ease;
    z-index: 45;
  }
  .gt-rail.mobile-open { transform: translateX(0); }
  .gt-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .gt-nav-open { overflow: hidden; }
  .gt-detail-layout,
  .gt-protocol-row,
  .gt-protocol-row.compact,
  .gt-two-column,
  .gt-two-column.equal,
  .gt-destination-grid,
  .gt-case-meta-grid,
  .gt-card-grid,
  .gt-protocol-aux-grid,
  .two-column-form,
  .gt-metric-grid-5,
  .gt-metric-grid-4 {
    grid-template-columns: 1fr;
  }
  .gt-span-4,
  .gt-span-8 { grid-column: span 1; }
}

@media (max-width: 768px) {
  .gt-shell { padding: 12px; }
  .gt-topbar,
  .gt-panel-body,
  .gt-panel-header,
  .gt-case-strip,
  .gt-toolbar { padding-left: 14px; padding-right: 14px; }
  .gt-screen-title { font-size: 1.45rem; }
  .gt-metric-grid-8,
  .gt-metric-grid-7,
  .gt-metric-grid-5,
  .gt-metric-grid-4,
  .gt-destination-grid,
  .gt-split-stack,
  .gt-protocol-aux-grid.compact.four {
    grid-template-columns: 1fr;
  }
}