@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../vendor/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(../vendor/fonts/inter-latin-800-normal.woff2) format('woff2')}
:root {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --secondary: #a855f7;
  --sidebar: #111c35;
  --sidebar-2: #0c162c;
  --sidebar-text: #b9c5d9;
  --bg: #f5f7fc;
  --card: #ffffff;
  --surface: var(--surface);
  --surface-2: var(--surface-2);
  --input-bg: #ffffff;
  --text: #17233d;
  --muted: #718096;
  --border: #e5e9f2;
  --row-border: var(--row-border);
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --radius: 13px;
  --shadow: 0 8px 24px rgba(24, 35, 61, .07);
  --sidebar-width: 270px;
  --font: Inter, system-ui, sans-serif;
  --primary-soft: color-mix(in srgb, var(--primary) 11%, var(--card));
  --primary-softer: color-mix(in srgb, var(--primary) 5%, var(--card));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin-top: 0; }
canvas { max-width: 100%; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.text-sm { font-size: 12px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }
.right { margin-left: auto; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  z-index: 40;
  display: flex;
  flex-direction: column;
  color: #dbe5f7;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 28%),
    linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  transition: transform .25s ease;
  box-shadow: 10px 0 30px rgba(8, 15, 32, .08);
}

.brand {
  height: 76px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: white;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}

.brand-title { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.4px; }
.brand-subtitle { color: #98a7c2; font-size: 10px; margin-top: 2px; }

.nav-scroll {
  padding: 16px 12px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  flex: 1;
}

.nav-label {
  padding: 16px 12px 8px;
  color: #71809c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}

.nav-item {
  width: 100%;
  min-height: 42px;
  margin: 3px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 10px;
  color: var(--sidebar-text);
  background: transparent;
  text-align: left;
  transition: .18s ease;
}

.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 95%, transparent), color-mix(in srgb, var(--primary) 66%, transparent));
  box-shadow: 0 6px 15px color-mix(in srgb, var(--primary) 22%, transparent);
}

.nav-count {
  margin-left: auto;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.15);
  font-size: 10px;
  font-weight: 700;
}

.sidebar-user {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user-box {
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  background: rgba(255,255,255,.05);
}

.main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  transition: margin .25s ease;
}

.header {
  height: 76px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 18px;
  background: color-mix(in srgb, var(--card) 91%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.mobile-menu { display: none !important; }

.search {
  position: relative;
  width: min(430px, 40vw);
}

.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  color: #94a3b8;
}

.search input {
  width: 100%;
  height: 43px;
  padding: 0 42px;
  border: 1px solid var(--border);
  border-radius: 11px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  transition: .2s;
}

.search input:focus, .field:focus, textarea:focus {
  border-color: #b794f6;
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.shortcut {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #94a3b8;
  background: var(--card);
  font-size: 10px;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  min-height: 40px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  transition: .18s ease;
}

.btn svg { width: 17px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--primary) 22%, transparent);
}
.btn-primary:hover { box-shadow: 0 9px 20px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-light { color: var(--text); background: var(--card); border-color: var(--border); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-success { color: #fff; background: var(--success); }
.btn-sm { min-height: 34px; padding: 0 11px; font-size: 12px; }
.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #64748b;
  background: var(--card);
}
.icon-btn svg { width: 18px; }
.notification-dot {
  position: absolute;
  right: 7px;
  top: 6px;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--danger);
}

.avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  font-size: 12px;
  font-weight: 800;
}
.avatar.green { background: linear-gradient(135deg,#16a34a,#22c55e); }
.avatar.orange { background: linear-gradient(135deg,#f97316,#f59e0b); }
.avatar.blue { background: linear-gradient(135deg,#2563eb,#06b6d4); }
.avatar.red { background: linear-gradient(135deg,#ef4444,#f97316); }
.avatar.sm { width: 29px; height: 29px; font-size: 9px; }
.avatar.lg { width: 74px; height: 74px; font-size: 22px; }

.profile-trigger {
  padding: 4px 7px 4px 4px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  border-radius: 10px;
}
.profile-trigger:hover { background: var(--primary-soft); }
.profile-trigger svg { width: 15px; color: var(--muted); }
.profile-name { font-weight: 700; font-size: 12px; }
.profile-role { color: var(--muted); font-size: 10px; }

.content { padding: 26px 28px 40px; }
.page { animation: pageIn .25s ease; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.page-head {
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.page-head h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.7px; }
.page-head p { margin: 0; color: var(--muted); }
.page-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.card.flush { padding: 0; overflow: hidden; }
.card-title {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title h3 { margin: 0; font-size: 15px; }
.card-title .right { color: var(--muted); font-size: 12px; }

.metric {
  position: relative;
  min-height: 136px;
  overflow: hidden;
}
.metric:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -30px;
  bottom: -45px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.metric-top { display: flex; justify-content: space-between; align-items: flex-start; }
.metric-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--primary);
  background: var(--primary-soft);
}
.metric-icon svg { width: 20px; }
.metric-icon.green { color: var(--success); background: #eaf9ef; }
.metric-icon.amber { color: var(--warning); background: #fff7e5; }
.metric-icon.blue { color: var(--info); background: #eaf2ff; }
.metric-value { margin: 15px 0 3px; font-size: 28px; font-weight: 800; letter-spacing: -.8px; }
.metric-label { color: var(--muted); font-size: 12px; }
.trend { font-size: 11px; font-weight: 700; }
.trend.up { color: var(--success); }
.trend.down { color: var(--danger); }

.chart-wrap { height: 280px; position: relative; }
.chart-wrap.small { height: 230px; }

.toolbar {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--border);
}
.toolbar-search { min-width: 230px; flex: 1; position: relative; }
.toolbar-search svg {
  position: absolute;
  left: 11px;
  top: 10px;
  width: 16px;
  color: #94a3b8;
}
.toolbar-search input { width: 100%; padding-left: 35px; }

.field {
  min-height: 39px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  color: var(--text);
  background: var(--input-bg);
}
textarea.field { padding: 12px; resize: vertical; }
.field-label { margin: 0 0 7px; display: block; font-weight: 700; font-size: 12px; }
.form-group { margin-bottom: 16px; }
.form-help { margin-top: 5px; color: var(--muted); font-size: 11px; }
.field.error { border-color: var(--danger); }
.field.success { border-color: var(--success); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  padding: 12px 15px;
  color: #8290a7;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: .4px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--row-border);
  vertical-align: middle;
}
tbody tr { transition: .15s; }
tbody tr:hover { background: var(--primary-softer); }
tbody tr:last-child td { border-bottom: 0; }
.ticket-subject { font-weight: 700; cursor: pointer; }
.ticket-subject:hover { color: var(--primary); }
.customer-cell { display: flex; align-items: center; gap: 9px; }

.badge {
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.badge:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge.open { color: #2563eb; background: #eaf2ff; }
.badge.progress { color: #7c3aed; background: var(--primary-soft); }
.badge.resolved, .badge.active, .badge.online { color: #15803d; background: #eaf9ef; }
.badge.pending, .badge.medium, .badge.away { color: #b45309; background: #fff6df; }
.badge.high { color: #dc2626; background: #feecec; }
.badge.critical { color: #fff; background: #dc2626; }
.badge.low, .badge.offline { color: #64748b; background: #eef2f7; }
.badge.vip { color: #7c3aed; background: var(--primary-soft); }

.pagination {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.pages { display: flex; gap: 5px; }
.page-btn {
  width: 31px;
  height: 31px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.page-btn.active { color: white; border-color: var(--primary); background: var(--primary); }

.progress {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--row-border);
}
.progress > span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--primary),var(--secondary));
}

.list-item {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: 0; }

.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 13px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
}
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.ticket-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.ticket-heading {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  border-bottom: 1px solid var(--border);
}
.ticket-heading h2 { margin: 3px 0 7px; font-size: 20px; }
.conversation { padding: 22px; background: var(--surface); }
.message {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.message.agent { flex-direction: row-reverse; }
.bubble {
  max-width: 78%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 5px 14px 14px 14px;
  background: var(--card);
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(20,30,55,.04);
}
.agent .bubble {
  color: #fff;
  border: 0;
  border-radius: 14px 5px 14px 14px;
  background: linear-gradient(135deg,var(--primary-dark),var(--secondary));
}
.message-meta { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 18px; font-size: 10px; font-weight: 700; }
.agent .message-meta { color: #e9ddff; }
.attachment {
  margin-top: 10px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  font-size: 11px;
}
.agent .attachment { background: rgba(255,255,255,.13); }

.composer { border-top: 1px solid var(--border); }
.editor-toolbar {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.editor-tool {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
}
.editor-tool:hover { color: var(--primary); background: var(--primary-soft); }
.editor-area {
  width: 100%;
  min-height: 125px;
  padding: 16px;
  border: 0;
  outline: none;
  resize: vertical;
}
.composer-footer {
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
}

.info-row {
  padding: 11px 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: 0; }
.info-row > span:first-child { color: var(--muted); font-size: 12px; }

.chat-shell {
  height: calc(100vh - 132px);
  min-height: 650px;
  padding: 0;
  display: grid;
  grid-template-columns: 285px minmax(380px,1fr) 285px;
  overflow: hidden;
}
.chat-list, .chat-profile { border-right: 1px solid var(--border); overflow-y: auto; }
.chat-profile { border-right: 0; border-left: 1px solid var(--border); }
.chat-panel { display: flex; flex-direction: column; min-width: 0; }
.chat-top { padding: 16px; border-bottom: 1px solid var(--border); }
.chat-item {
  padding: 14px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: .15s;
}
.chat-item:hover, .chat-item.active { background: var(--primary-soft); }
.chat-item.active { border-left: 3px solid var(--primary); }
.chat-window { flex: 1; padding: 22px; overflow-y: auto; background: var(--surface); }
.typing { color: var(--muted); font-size: 11px; font-style: italic; }
.chat-compose { padding: 12px; display: flex; gap: 8px; border-top: 1px solid var(--border); }
.chat-compose input { flex: 1; }

.settings-layout { grid-template-columns: 230px minmax(0,1fr); align-items: start; }
.settings-menu button {
  width: 100%;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  color: #64748b;
  background: transparent;
  text-align: left;
  font-weight: 600;
}
.settings-menu button.active, .settings-menu button:hover { color: var(--primary); background: var(--primary-soft); }
.settings-menu svg { width: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-grid .wide { grid-column: 1 / -1; }

.switch {
  width: 42px;
  height: 23px;
  padding: 3px;
  display: inline-flex;
  justify-content: flex-start;
  border: 0;
  border-radius: 30px;
  background: #cbd5e1;
}
.switch:after {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.switch.on { justify-content: flex-end; background: var(--primary); }

.article-card { min-height: 190px; }
.article-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--primary);
  background: var(--primary-soft);
}

.portal-hero {
  padding: 42px;
  color: white;
  border: 0;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.16), transparent 25%),
    linear-gradient(135deg,var(--primary-dark),var(--secondary));
}
.portal-search {
  width: min(680px,100%);
  margin-top: 24px;
  position: relative;
}
.portal-search input {
  width: 100%;
  height: 54px;
  padding: 0 20px 0 48px;
  border: 0;
  border-radius: 12px;
  outline: none;
  box-shadow: 0 12px 30px rgba(30,10,70,.2);
}
.portal-search svg {
  position: absolute;
  left: 17px;
  top: 18px;
  color: var(--primary);
}

.login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(400px, .85fr) 1.15fr;
  background: var(--card);
}
.login-form-wrap {
  padding: 55px max(45px, 8vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-brand { margin-bottom: 50px; display: flex; align-items: center; gap: 11px; }
.login-panel {
  padding: 60px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg,var(--sidebar),var(--primary-dark));
}
.login-illustration { width: min(560px,90%); position: relative; z-index: 2; }
.illustration-card {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 70px rgba(0,0,0,.2);
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  background: color-mix(in srgb, var(--secondary) 35%, transparent);
}
.orb.one { width: 300px; height: 300px; top: -90px; right: -80px; }
.orb.two { width: 220px; height: 220px; left: -80px; bottom: -60px; }

.dropdown {
  min-width: 220px;
  padding: 7px;
  position: fixed;
  right: 24px;
  top: 68px;
  z-index: 80;
  display: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(20,30,55,.16);
}
.dropdown.open { display: block; animation: pageIn .15s ease; }
.dropdown button {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: var(--card);
  text-align: left;
}
.dropdown button:hover { background: var(--primary-soft); color: var(--primary); }
.dropdown svg { width: 16px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8,15,32,.55);
  backdrop-filter: blur(3px);
}
.modal-backdrop.open { display: flex; }
.modal {
  width: min(620px,100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(.97) translateY(8px); } }
.modal-head, .modal-foot { padding: 18px 21px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); }
.modal-foot { justify-content:flex-end; border-top:1px solid var(--border); border-bottom:0; }
.modal-body { padding: 21px; }

.toast-area {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: grid;
  gap: 9px;
}
.toast {
  min-width: 290px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  border-radius: 10px;
  background: #17233d;
  box-shadow: 0 15px 35px rgba(20,30,55,.2);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } }
.toast svg { width: 18px; color: #86efac; }

.empty-state { padding: 50px 20px; text-align: center; }
.empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: grid;
  place-items: center;
  color: var(--primary);
  border-radius: 18px;
  background: var(--primary-soft);
}

.skeleton {
  border-radius: 7px;
  background: linear-gradient(90deg,#edf0f4 25%,#f8f9fb 50%,#edf0f4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  background: rgba(8,15,32,.5);
}

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chat-shell { grid-template-columns: 250px 1fr; }
  .chat-profile { display: none; }
  .ticket-layout { grid-template-columns: minmax(0,1fr) 285px; }
  .profile-copy { display: none; }
}

@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .mobile-overlay.open { display: block; }
  .main { margin-left: 0; }
  .mobile-menu { display: grid !important; }
  .header { padding: 0 15px; }
  .header .search { display: none; }
  .new-ticket-label { display: none; }
  .content { padding: 20px 15px 32px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .ticket-layout, .settings-layout { grid-template-columns: 1fr; }
  .settings-menu { display: flex; overflow-x: auto; }
  .settings-menu button { white-space: nowrap; width: auto; }
  .page-head { flex-direction: column; }
  .page-actions { margin-left: 0; }
  .chat-shell { height: auto; min-height: 720px; grid-template-columns: 1fr; }
  .chat-list { display: none; }
  .login-view { grid-template-columns: 1fr; }
  .login-panel { display: none; }
  .login-form-wrap { padding: 35px 24px; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .profile-trigger { display: none; }
  .header { gap: 8px; }
  .content { padding: 16px 11px 28px; }
  .card { padding: 16px; }
  .page-head h1 { font-size: 22px; }
  .ticket-heading { flex-direction: column; }
  .bubble { max-width: 88%; }
  .portal-hero { padding: 28px 20px; }
  .pagination > span { display: none; }
}


/* ==========================================================================
   SupportHub application extensions (beyond the static design)
   ========================================================================== */
a.btn, label.btn { display: inline-flex; }
.btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--primary); background: var(--primary-soft); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.link { color: var(--primary); font-weight: 700; }
.link:hover { text-decoration: underline; }
.field { max-width: 100%; }
select.field { padding-right: 28px; }
.w-full, .field.w-full { width: 100%; }
.form-help code, code.inline { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; }
.alert { padding: 12px 14px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.alert svg { flex: none; width: 18px; margin-top: 1px; }
.alert.success { color: #166534; background: #ecfdf3; border-color: #bbf7d0; }
.alert.error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.alert.warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.alert.info { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.alert ul { margin: 0; padding-left: 18px; }
.toast.error svg { color: #fca5a5; }
.chip { padding: 4px 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; font-weight: 600; }
.chip button { border: 0; background: none; padding: 0; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.p-0 { padding: 0 !important; } .pad { padding: 18px 20px; }
.hr { height: 1px; background: var(--border); margin: 16px 0; border: 0; }
.kbd { padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 10px; color: var(--muted); }
.color-dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; flex: none; }
.dot-online { color: #86efac; } .dot-away { color: #fcd34d; } .dot-offline { color: #94a3b8; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prose { line-height: 1.7; word-wrap: break-word; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--border); color: var(--muted); }
.prose pre, .prose code { background: var(--surface-2); border-radius: 6px; padding: 2px 5px; font-size: 12px; }
.prose pre { padding: 10px; overflow-x: auto; }
.prose p { margin: 0 0 10px; }
.prose p:last-child { margin-bottom: 0; }
.agent .bubble .prose a { color: #fff; text-decoration: underline; }
.message.note .bubble { background: #fffbeb; border-color: #fde68a; color: #422006; }
.message.note .message-meta { color: #a16207; }
.message.system { justify-content: center; }
.message.system .bubble { max-width: 90%; padding: 6px 12px; font-size: 11px; color: var(--muted); background: transparent; border: 1px dashed var(--border); box-shadow: none; }
.bubble { min-width: 0; }
.message-actions { margin-top: 8px; display: flex; gap: 10px; font-size: 10px; opacity: .8; }
.rte { border: 0; }
.rte-area { min-height: 140px; max-height: 480px; overflow-y: auto; padding: 16px; outline: none; line-height: 1.6; }
.rte-area:empty:before { content: attr(data-placeholder); color: var(--muted); }
.rte-area.bordered, .rte.bordered { border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); }
.rte.bordered .editor-toolbar { border-radius: 9px 9px 0 0; }
.composer .tab.note-active.active { color: #b45309; border-bottom-color: #f59e0b; }
.composer.is-note .rte-area { background: #fffbeb; color: #422006; }
.search-results { position: absolute; top: 48px; left: 0; right: 0; z-index: 90; display: none; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 16px 40px rgba(20,30,55,.16); max-height: 70vh; overflow-y: auto; }
.search-results.open { display: block; }
.search-results a { padding: 9px 10px; display: flex; gap: 10px; align-items: center; border-radius: 8px; }
.search-results a:hover, .search-results a.active { background: var(--primary-soft); }
.search-results .group { padding: 8px 10px 4px; font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.notif-panel { width: 360px; right: 90px; padding: 0; }
.notif-panel .notif-list { max-height: 420px; overflow-y: auto; }
.notif-item { padding: 12px 14px; display: flex; gap: 10px; border-bottom: 1px solid var(--border); }
.notif-item.unread { background: var(--primary-softer); }
.notif-item:hover { background: var(--primary-soft); }
.nav-item { text-decoration: none; }
.nav-sub { padding-left: 42px !important; min-height: 34px !important; font-size: 13px; }
.sidebar-user-box { cursor: pointer; }
.sidebar-user-box .grow { min-width: 0; }
.settings-menu a { width: 100%; padding: 11px 12px; display: flex; align-items: center; gap: 9px; border-radius: 8px; color: var(--muted); font-weight: 600; }
.settings-menu a.active, .settings-menu a:hover { color: var(--primary); background: var(--primary-soft); }
.settings-menu a svg { width: 16px; }
.settings-menu .menu-label { padding: 14px 12px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 800; }
.code-box { padding: 12px 14px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; position: relative; }
.code-box .copy { position: absolute; top: 7px; right: 7px; padding: 3px 8px; border: 1px solid #334155; border-radius: 6px; background: #1e293b; color: #cbd5e1; font-size: 10px; }
.theme-card { padding: 0; overflow: hidden; }
.theme-card .preview { height: 120px; display: grid; grid-template-columns: 34% 1fr; }
.theme-card .preview .pv-side { padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.theme-card .preview .pv-side span { height: 7px; border-radius: 5px; background: rgba(255,255,255,.18); }
.theme-card .preview .pv-side span.on { height: 9px; }
.theme-card .preview .pv-main { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.theme-card .preview .pv-main i { height: 26px; border-radius: 7px; display: block; }
.theme-card.active { outline: 2px solid var(--primary); outline-offset: 2px; }
.repeater-row { padding: 10px; margin-bottom: 8px; display: grid; gap: 8px; grid-template-columns: 1.2fr 1fr 1.4fr auto; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.repeater-row.actions-row { grid-template-columns: 1.2fr 2fr auto; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.check-grid label, label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; }
.check-grid label input, label.check input { margin-top: 2px; }
.stat-mini { padding: 12px; border-radius: 10px; background: var(--surface-2); text-align: center; }
.stat-mini b { font-size: 20px; display: block; }
.timeline { position: relative; padding-left: 18px; }
.timeline:before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline .tl-item { position: relative; padding: 0 0 14px; font-size: 12px; }
.timeline .tl-item:before { content: ""; position: absolute; left: -17px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--primary); }
.presence-bar { padding: 8px 20px; display: none; gap: 8px; align-items: center; font-size: 12px; color: #92400e; background: #fffbeb; border-bottom: 1px solid #fde68a; }
.presence-bar.show { display: flex; }
.pill-tabs { display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.pill-tabs a, .pill-tabs button { padding: 6px 11px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 12px; }
.pill-tabs .active { background: var(--card); color: var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.sla-chip { font-size: 11px; font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.sla-chip.bad { color: var(--danger); } .sla-chip.warn { color: var(--warning); } .sla-chip.ok { color: var(--success); }
.portal-shell { min-height: 100vh; background: var(--bg); }
.portal-nav { height: 70px; padding: 0 max(20px, calc((100vw - 1180px)/2)); display: flex; align-items: center; gap: 14px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.portal-nav .links { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.portal-nav .links a { padding: 8px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.portal-nav .links a:hover, .portal-nav .links a.active { color: var(--primary); background: var(--primary-soft); }
.portal-main { width: min(1180px, calc(100% - 32px)); margin: 26px auto 60px; }
.portal-footer { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); background: var(--card); }
.portal-logo { max-height: 38px; max-width: 170px; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input { display: none; }
.star-input label { font-size: 26px; color: #cbd5e1; cursor: pointer; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #f59e0b; }
.landing-hero { padding: 90px 20px 70px; text-align: center; color: #fff; background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--secondary) 45%, transparent), transparent 40%), linear-gradient(145deg, var(--sidebar), var(--primary-dark)); }
.landing-hero h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -1.6px; line-height: 1.08; margin: 18px auto 16px; max-width: 900px; }
.landing-hero p { color: #ddd6fe; font-size: 17px; max-width: 640px; margin: 0 auto 30px; line-height: 1.6; }
.landing-section { width: min(1180px, calc(100% - 32px)); margin: 70px auto; }
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured { outline: 2px solid var(--primary); }
.price-card .price { font-size: 38px; font-weight: 800; letter-spacing: -1px; }
.price-card ul { padding: 0; list-style: none; margin: 18px 0; display: grid; gap: 9px; }
.price-card li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.price-card li svg { width: 16px; color: var(--success); }
.subdomain-input { display: flex; align-items: stretch; }
.subdomain-input input { border-radius: 9px 0 0 9px; flex: 1; min-width: 0; }
.subdomain-input span { padding: 0 12px; display: flex; align-items: center; border: 1px solid var(--border); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface-2); color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 820px) {
  .repeater-row, .repeater-row.actions-row { grid-template-columns: 1fr; }
  .notif-panel { width: calc(100vw - 30px); right: 15px; }
  .portal-nav .links a span { display: none; }
  .chat-shell { grid-template-columns: 1fr; height: auto; }
  .chat-list { max-height: 260px; }
}
@media print {
  .sidebar, .header, .composer, .no-print, .toast-area { display: none !important; }
  .main { margin: 0 !important; }
  body { background: #fff; }
}

/* Platform logo */
.platform-logo-chip { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 6px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.platform-logo-chip img { height: 38px; width: auto; max-width: 200px; display: block; }
.platform-brand { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
.platform-brand .brand-subtitle { padding-left: 4px; }
.powered-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; color: var(--muted); font-size: 12px; font-weight: 600; opacity: .8; }
.powered-by:hover { opacity: 1; }
.sidebar .brand.platform-brand, .brand.platform-brand { height: auto !important; min-height: 0; padding-top: 18px !important; padding-bottom: 14px !important; }