@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
  :root {
  --ink:#182327;
  --muted:#788487;
  --line:#e7ebeb;
  --paper:#fff;
  --canvas:#f4f6f6;
  --green:#16856e;
  --green2:#e8f4f0;
  --amber:#a8610b;
  --amber2:#fff2dc;
  --red:#bd5048;
  --red2:#fcedeb;
  --blue:#4974ba;
  --blue2:#edf2fb;
  --shadow:0 7px 24px #2132310b
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:14px 'DM Sans',sans-serif
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
.layout {
  min-height:100vh;
  display:grid;
  grid-template-columns:244px 1fr
}
.sidebar {
  background:#fff;
  border-right:1px solid var(--line);
  padding:25px 16px;
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 10px 30px;
  font:800 16px Manrope
}
.brand-icon {
  width:34px;
  height:34px;
  background:#183a33;
  border-radius:11px;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:17px
}
.brand small {
  display:block;
  font:500 10px 'DM Sans';
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:2px
}
.nav-label {
  font-size:10px;
  color:#a0a9aa;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  padding:12px 11px 7px
}
.nav {
  display:grid;
  gap:4px
}
.nav button {
  height:40px;
  border:0;
  background:transparent;
  border-radius:9px;
  text-align:left;
  padding:0 11px;
  color:#687476;
  display:flex;
  align-items:center;
  gap:11px
}
.nav button:hover,.nav button.active {
  background:#edf4f1;
  color:#146c59;
  font-weight:700
}
.nav .ico {
  width:18px;
  text-align:center;
  font-size:16px
}
.count {
  margin-left:auto;
  background:#e8eeee;
  border-radius:20px;
  padding:2px 8px;
  font-size:11px
}
.side-bottom {
  margin-top:auto
}
.team-card {
  background:#f5f7f6;
  border-radius:12px;
  padding:13px;
  margin:13px 3px 0
}
.team-card strong {
  font-size:12px
}
.team-card p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px
}
.online {
  display:inline-block;
  width:7px;
  height:7px;
  background:#38aa7b;
  border-radius:50%;
  margin-right:6px
}
.main {
  min-width:0
}
.topbar {
  height:69px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 34px;
  gap:18px
}
.crumb {
  font:700 12px Manrope;
  color:#364346
}
.top-spacer {
  flex:1
}
.search {
  position:relative;
  width:min(320px,35vw)
}
.search input {
  width:100%;
  border:1px solid var(--line);
  background:#f8f9f9;
  border-radius:8px;
  padding:9px 12px 9px 34px;
  outline:0
}
.search input:focus {
  border-color:#87b6a9
}
.search span {
  position:absolute;
  left:11px;
  top:8px;
  color:#899494
}
.top-user {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:600
}
.avatar {
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dcebe5;
  color:#266c5c;
  font-weight:700;
  font-size:11px
}
.content {
  max-width:1500px;
  margin:auto;
  padding:29px 34px 60px
}
.pagehead {
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:23px
}
.pagehead h1 {
  font:800 25px Manrope;
  margin:0 0 5px;
  letter-spacing:-.6px
}
.pagehead p {
  color:var(--muted);
  margin:0;
  font-size:13px
}
.actions {
  margin-left:auto;
  display:flex;
  gap:9px
}
.btn {
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:9px 13px;
  color:#465457;
  font-weight:600;
  font-size:12px
}
.btn:hover {
  background:#f7f9f8
}
.btn.primary {
  background:#176f5b;
  border-color:#176f5b;
  color:#fff
}
.btn.primary:hover {
  background:#125744
}
.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:14px;
  margin-bottom:19px
}
.stat {
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  padding:16px 17px;
  box-shadow:var(--shadow)
}
.stat-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  font-weight:600
}
.stat-icon {
  width:29px;
  height:29px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#edf4f1;
  color:#267360;
  font-size:14px
}
.stat strong {
  font:800 26px Manrope;
  display:block;
  margin-top:7px;
  letter-spacing:-.6px
}
.stat-sub {
  color:var(--muted);
  font-size:10px;
  margin-top:4px
}
.stat-sub b {
  color:var(--green)
}
.grid {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(270px,.85fr);
  gap:16px;
  align-items:start
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:var(--shadow);
  overflow:hidden
}
.panel-head {
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px
}
.panel-head h2 {
  font:700 14px Manrope;
  margin:0
}
.panel-head p {
  font-size:11px;
  color:var(--muted);
  margin:4px 0 0
}
.panel-head .right {
  margin-left:auto
}
.panel-body {
  padding:15px 18px
}
.filters {
  display:flex;
  gap:8px;
  margin-bottom:13px
}
.filters select {
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  padding:7px 9px;
  color:#536164;
  font-size:11px
}
.ticket-list {
  display:grid
}
.ticket {
  display:grid;
  grid-template-columns:3px minmax(0,1fr) auto;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid #eff1f1;
  align-items:center;
  cursor:pointer
}
.ticket:last-child {
  border-bottom:0
}
.ticket:hover .ticket-title {
  color:var(--green)
}
.priority-line {
  height:36px;
  border-radius:3px;
  background:#ef9c50
}
.priority-line.critical {
  background:#d65a51
}
.priority-line.low {
  background:#8ab7a6
}
.ticket-title {
  font-weight:700;
  font-size:12px;
  margin-bottom:5px
}
.ticket-meta {
  color:var(--muted);
  font-size:10px;
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.ticket-end {
  text-align:right;
  display:grid;
  justify-items:end;
  gap:8px
}
.badge {
  border-radius:30px;
  padding:4px 8px;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
  background:#eef0f0;
  color:#687476
}
.badge.open {
  background:var(--amber2);
  color:var(--amber)
}
.badge.progress {
  background:var(--blue2);
  color:var(--blue)
}
.badge.scheduled {
  background:#e9f3ff;
  color:#3975ad
}
.badge.resolved {
  background:var(--green2);
  color:var(--green)
}
.badge.urgent {
  background:var(--red2);
  color:var(--red)
}
.sla {
  font-size:10px;
  color:#a06919
}
.sla.late {
  color:var(--red);
  font-weight:700
}
.schedule-item {
  display:grid;
  grid-template-columns:44px 3px 1fr;
  gap:10px;
  align-items:stretch;
  padding:11px 0;
  border-bottom:1px solid #eff1f1
}
.schedule-item:last-child {
  border-bottom:0
}
.time {
  font-weight:700;
  font-size:10px;
  padding-top:2px;
  color:#465457
}
.schedule-line {
  background:#68a18f;
  border-radius:4px
}
.schedule-line.blue {
  background:#7a99cb
}
.schedule-line.amber {
  background:#e3ac5a
}
.visit-title {
  font-weight:700;
  font-size:11px
}
.visit-meta {
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}
.tech {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  color:#556365;
  font-size:10px
}
.mini-avatar {
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf2ef;
  color:#39725f;
  font-size:8px;
  font-weight:700
}
.table-wrap {
  overflow:auto
}
.table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}
.table th {
  background:#fafbfb;
  color:#8a9697;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:11px 15px
}
.table td {
  padding:12px 15px;
  border-top:1px solid #eff1f1;
  font-size:11px;
  white-space:nowrap
}
.table tr:hover td {
  background:#fafcfa
}
.customer-cell {
  font-weight:700
}
.subcell {
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.techs {
  display:grid;
  gap:10px
}
.tech-row {
  display:flex;
  align-items:center;
  gap:10px
}
.tech-row .avatar {
  width:34px;
  height:34px
}
.tech-info {
  flex:1
}
.tech-info strong {
  font-size:11px
}
.tech-info div {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.load {
  font-size:10px;
  color:#657173
}
.loadbar {
  height:4px;
  width:72px;
  background:#edf0ef;
  border-radius:9px;
  margin-top:5px;
  overflow:hidden
}
.loadbar i {
  display:block;
  height:100%;
  background:#69a38f;
  border-radius:9px
}
.availability {
  font-size:9px;
  font-weight:700;
  color:#218267
}
.empty {
  padding:35px 15px;
  text-align:center;
  color:var(--muted);
  font-size:12px
}
.views {
  display:flex;
  gap:5px;
  margin-left:auto
}
.views button {
  border:1px solid var(--line);
  background:#fff;
  padding:7px 10px;
  border-radius:7px;
  color:#687476;
  font-size:11px
}
.views button.active {
  background:#edf4f1;
  color:#176f5b;
  border-color:#d9e9e4;
  font-weight:700
}
.calendar-toolbar {
  display:flex;
  align-items:center;
  gap:12px
}
.calendar-toolbar strong {
  font:700 13px Manrope;
  min-width:132px;
  text-align:center
}
.week {
  display:grid;
  grid-template-columns:repeat(7,minmax(115px,1fr));
  min-width:805px
}
.weekday {
  text-align:center;
  padding:12px 4px;
  color:var(--muted);
  font-size:10px;
  border-bottom:1px solid var(--line)
}
.weekday b {
  display:block;
  font:700 15px Manrope;
  color:var(--ink);
  margin-top:5px
}
.weekday.today b {
  color:var(--green)
}
.weekdays {
  display:grid;
  grid-template-columns:repeat(7,minmax(115px,1fr));
  min-width:805px
}
.calendar-scroll {
  overflow:auto
}
.daycol {
  min-height:350px;
  padding:8px 5px;
  border-right:1px solid #f0f2f2
}
.daycol:last-child {
  border-right:0
}
.event {
  border-left:3px solid #64a48e;
  background:#edf5f1;
  border-radius:4px;
  padding:7px;
  margin:5px 0;
  cursor:pointer
}
.event.blue {
  border-color:#7a99cb;
  background:#eff3fb
}
.event.amber {
  border-color:#e3ac5a;
  background:#fff5e5
}
.event .et {
  font-size:9px;
  color:#72807d
}
.event strong {
  display:block;
  font-size:10px;
  margin:4px 0
}
.event small {
  font-size:9px;
  color:#657270
}
.ticket-controls {
  display:flex;
  gap:9px;
  align-items:center
}
.ticket-controls select {
  border:1px solid var(--line);
  padding:8px;
  border-radius:7px;
  font-size:11px
}
.modal-backdrop {
  position:fixed;
  inset:0;
  background:#14252266;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9
}
.modal-backdrop.show {
  display:flex
}
.modal {
  background:#fff;
  width:min(540px,100%);
  max-height:92vh;
  overflow:auto;
  border-radius:14px;
  box-shadow:0 22px 80px #0f272655
}
.modal-head {
  padding:19px 21px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center
}
.modal-head h2 {
  margin:0;
  font:800 16px Manrope
}
.modal-head button {
  margin-left:auto;
  border:0;
  background:transparent;
  font-size:20px;
  color:var(--muted)
}
.modal-body {
  padding:19px 21px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}
.field {
  display:grid;
  gap:6px
}
.field.full {
  grid-column:1/-1
}
.field label {
  font-size:10px;
  color:#687476;
  font-weight:700
}
.field input,.field select,.field textarea {
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px 10px;
  outline:0;
  width:100%;
  font-size:12px
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color:#78aa9b
}
.field textarea {
  min-height:76px;
  resize:vertical
}
.modal-foot {
  padding:13px 21px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:8px
}
.toast {
  position:fixed;
  right:22px;
  bottom:22px;
  max-width:min(520px,calc(100vw - 32px));
  background:#183a33;
  color:white;
  border-radius:9px;
  padding:12px 16px;
  box-shadow:var(--shadow);
  font-size:12px;
  opacity:0;
  transform:translateY(8px);
  transition:.2s;
  pointer-events:none;
  z-index:11
}
.toast.show {
  opacity:1;
  transform:translateY(0)
}
.mobile-menu {
  display:none;
  border:0;
  background:none;
  font-size:19px
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ink:#f0f4f3;
  --muted:#a0adaa;
  --line:#242b2d;
  --paper:#111719;
  --canvas:#090d0f;
  --green:#69d6b2;
  --green2:#142c27;
  --amber:#f1bd70;
  --amber2:#302416;
  --red:#f08c83;
  --red2:#321d1c;
  --blue:#9bbaff;
  --blue2:#1b2639;
  --shadow:0 10px 30px #0008
}
:root[data-theme="dark"] body { background:var(--canvas); color:var(--ink); }
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .auth-card { background:var(--paper); }
:root[data-theme="dark"] .sidebar { border-color:var(--line); }
:root[data-theme="dark"] .brand-icon { background:#173b32; }
:root[data-theme="dark"] .nav-label,
:root[data-theme="dark"] .nav button,
:root[data-theme="dark"] .crumb,
:root[data-theme="dark"] .ticket-meta,
:root[data-theme="dark"] .visit-meta,
:root[data-theme="dark"] .subcell,
:root[data-theme="dark"] .tech-info div,
:root[data-theme="dark"] .calendar-toolbar,
:root[data-theme="dark"] .weekday { color:var(--muted); }
:root[data-theme="dark"] .nav button:hover,
:root[data-theme="dark"] .nav button.active,
:root[data-theme="dark"] .views button.active { background:var(--green2); color:var(--green); }
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] .search input,
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .weekday,
:root[data-theme="dark"] .daycol,
:root[data-theme="dark"] .history-list,
:root[data-theme="dark"] .history-empty { background:#0c1113; }
:root[data-theme="dark"] .search input,
:root[data-theme="dark"] .filters select,
:root[data-theme="dark"] .ticket-controls select,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .auth-card input { background:#090d0f; color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .btn:not(.primary),
:root[data-theme="dark"] .views button { background:#111719; color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .btn:not(.primary):hover,
:root[data-theme="dark"] .views button:hover { background:#1a2225; }
:root[data-theme="dark"] .stat-icon,
:root[data-theme="dark"] .mini-avatar,
:root[data-theme="dark"] .tech-row .avatar { background:#183229; color:var(--green); }
:root[data-theme="dark"] .ticket,
:root[data-theme="dark"] .schedule-item,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .daycol,
:root[data-theme="dark"] .event,
:root[data-theme="dark"] .modal-head,
:root[data-theme="dark"] .modal-foot,
:root[data-theme="dark"] .history-list,
:root[data-theme="dark"] .history-entry,
:root[data-theme="dark"] .history-empty { border-color:var(--line); }
:root[data-theme="dark"] .table tr:hover td { background:#171e20; }
:root[data-theme="dark"] .ticket-title,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .tech-info strong,
:root[data-theme="dark"] .visit-title { color:var(--ink); }
:root[data-theme="dark"] .badge { background:#252d30; color:#d7dfdd; }
:root[data-theme="dark"] .badge.scheduled { background:var(--blue2); color:var(--blue); }
:root[data-theme="dark"] .badge.urgent { background:var(--red2); color:var(--red); }
:root[data-theme="dark"] .event.blue { background:#172237; }
:root[data-theme="dark"] .event.amber { background:#2c2114; }
:root[data-theme="dark"] .count { background:#20292b; color:var(--ink); }
:root[data-theme="dark"] .modal-backdrop { background:#000b; }
@media(max-width:1050px) {
  .layout {
  grid-template-columns:210px 1fr
}
.content {
  padding:24px
}
.topbar {
  padding:0 24px
}
.grid {
  grid-template-columns:1fr
}
.stats {
  grid-template-columns:repeat(2,1fr)
}

}
@media(max-width:700px) {
  .layout {
  display:block
}
.sidebar {
  display:none;
  position:fixed;
  z-index:8;
  inset:0 auto 0 0;
  width:255px;
  box-shadow:0 0 0 100vw #14252255
}
.sidebar.open {
  display:flex
}
.topbar {
  height:59px;
  padding:0 15px;
  gap:11px
}
.mobile-menu {
  display:block
}
.crumb {
  font-size:11px
}
.search {
  width:auto;
  flex:1
}
.search input {
  font-size:11px
}
.top-user span {
  display:none
}
.content {
  padding:21px 14px 40px
}
.pagehead {
  display:block
}
.pagehead h1 {
  font-size:22px
}
.actions {
  margin:15px 0 0
}
.stats {
  gap:9px
}
.stat {
  padding:13px
}
.stat strong {
  font-size:22px
}
.grid {
  gap:12px
}
.panel-head {
  padding:14px
}
.panel-body {
  padding:12px 14px
}
.ticket-meta {
  gap:5px
}
.ticket {
  gap:8px
}
.ticket-end .badge {
  font-size:8px
}
.form-grid {
  grid-template-columns:1fr
}
.field.full {
  grid-column:auto
}
.views {
  margin-left:0
}
.pagehead:has(.views) {
  display:flex;
  flex-wrap:wrap
}
.pagehead:has(.views) .views {
  margin-left:auto
}
.ticket-controls {
  flex-wrap:wrap
}

}
/* Local demonstration controls and ticket history */
.role-switcher {
  max-width: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--ink);
  background: var(--paper);
  font-size: 11px;
}
.history-list {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
}
.history-entry {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.history-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.history-entry span, .history-entry small, .history-empty { color: var(--muted); }
.history-empty { padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 700px) {
  .topbar { overflow-x: auto; }
  .role-switcher { flex: 0 0 120px; }
}

/* Authenticated Vex application */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.auth-card { width: min(460px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.auth-card h1 { margin: 25px 0 8px; font: 800 23px Manrope, sans-serif; color: var(--ink); }
.auth-card p, .auth-card li { color: var(--muted); line-height: 1.6; font-size: 13px; }
.auth-card ol { padding-left: 21px; }
.auth-card code { color: var(--green); font-size: 12px; }
.auth-card form { display: grid; gap: 14px; margin-top: 20px; }
.auth-card form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
.auth-card input { padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.password-entry { position:relative; display:block; }
.password-entry input { width:100%; padding-right:48px; }
.password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; padding:6px; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; }
.password-toggle:hover { color:var(--green); background:var(--panel); }
.password-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.check-field { display:flex; align-items:flex-start; gap:9px; color:var(--ink); font-size:13px; }
.check-field input { width:auto; margin-top:3px; }
.customer-open { padding:0; text-align:left; font-weight:700; }
.auth-card .btn { min-height: 40px; }
.text-button { margin-top: 15px; padding: 4px 0; border: 0; background: transparent; color: var(--green); font-size: 12px; cursor: pointer; }
.auth-message, .security-note { padding: 11px; border-radius: 8px; background: var(--amber2); color: var(--amber) !important; font-size: 12px !important; }
.auth-card .security-note { margin-top: 18px; }
.auth-card button { color: var(--ink); }
.auth-card .btn.primary { color: #fff; }
.mfa-qr { display:block; width:min(220px, 100%); height:auto; margin:18px auto; padding:12px; border-radius:12px; background:#fff; }
.auth-card button:disabled { opacity:.6; cursor:wait; }
.automation-panel { margin-bottom:16px; }
.automation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:16px; }
.automation-grid h3 { margin:0 0 10px; color:var(--muted); font-size:12px; }
.automation-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.automation-row:hover { color:var(--green); }
.automation-main { min-width:0; display:grid; gap:4px; }
.automation-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.automation-main small,.automation-alert { color:var(--muted); font-size:10px; }
.automation-alert { flex:0 0 auto; font-weight:700; }
.team-table { min-width:980px; }
.team-table td small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.session-state { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; color:var(--muted); font-size:11px; }
.session-state.is-online { color:#148564; font-weight:700; }
.session-state.is-online::before { width:7px; height:7px; border-radius:50%; background:#27a879; content:""; }
.btn.danger { border-color:#e8c7c2; color:#a7352e; }
.btn.danger:hover { background:#fff0ed; }
.btn.danger:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width: 900px) {
  .automation-grid { grid-template-columns:1fr; gap:12px; }
}