/* ---------- Design tokens ---------- */
:root {
  --bg: #f7f7f8; --surface: #ffffff; --surface-2: #f2f2f4; --surface-3: #eaeaee;
  --border: #e4e4e9; --border-strong: #d2d2da;
  --text: #17171c; --text-2: #55555f; --text-3: #8a8a96;
  --accent: #5b5bd6; --accent-hover: #4a4ac2; --accent-soft: #eeeefc; --accent-text: #3d3dad;
  --success: #12805c; --success-soft: #e3f6ee; --warn: #a15c07; --warn-soft: #fdf1dc;
  --danger: #c4314b; --danger-soft: #fdebee; --info: #1d6fb8; --info-soft: #e5f1fb;
  --shadow-sm: 0 1px 2px rgba(20,20,30,.06); --shadow-md: 0 8px 24px rgba(20,20,30,.10); --shadow-lg: 0 20px 50px rgba(20,20,30,.18);
  --radius: 10px; --radius-sm: 7px; --sidebar: 224px; --sidebar-collapsed: 56px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  --bg: #0e0e12; --surface: #16161c; --surface-2: #1c1c24; --surface-3: #24242e;
  --border: #272731; --border-strong: #34343f;
  --text: #ececf1; --text-2: #a7a7b4; --text-3: #71717e;
  --accent: #7c7cf2; --accent-hover: #9090f6; --accent-soft: #23234a; --accent-text: #b4b4fb;
  --success: #3ccf91; --success-soft: #11291f; --warn: #f0b24b; --warn-soft: #2e2410;
  --danger: #f2677d; --danger-soft: #331820; --info: #5eaaf0; --info-soft: #14263a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 11.5px; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg.i { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Layout shell ---------- */
:root { --foot-h: 44px; }
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; transition: grid-template-columns .18s ease; }
.shell.collapsed { grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr); }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; z-index: 30; }
.brand { display: flex; align-items: center; gap: 8px; padding: 11px 13px; height: 49px; }
.brand-mark { width: 25px; height: 25px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.brand-name { font-weight: 650; white-space: nowrap; } .brand-sub { font-size: 10px; color: var(--text-3); white-space: nowrap; margin-top: -2px; }
.nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px 8px 10px; }
.brand { flex: none; }
.nav-section { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 11px 6px 5px; white-space: nowrap; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; white-space: nowrap; text-decoration: none; margin-bottom: 1px; position: relative; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--accent-soft); color: var(--accent-text); }
.nav a .count { margin-left: auto; background: var(--accent); color: #fff; border-radius: 99px; font-size: 10px; font-weight: 600; padding: 0 5px; min-width: 16px; text-align: center; }
.collapsed .brand-text, .collapsed .nav-section, .collapsed .nav a span.label, .collapsed .side-foot .who { display: none; }
.collapsed .nav a { justify-content: center; padding: 7px; } .collapsed .nav a .count { position: absolute; top: 2px; right: 6px; margin: 0; font-size: 10px; min-width: 13px; padding: 0 4px; }
.collapsed .nav-section { padding: 5px 0; height: 1px; background: var(--border); margin: 8px 6px; font-size: 0; }
.side-foot { border-top: 1px solid var(--border); padding: 8px; display: flex; align-items: center; gap: 6px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-weight: 650; font-size: 11px; flex-shrink: 0; }
.who { min-width: 0; line-height: 1.25; } .who b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who span { font-size: 11px; color: var(--text-3); }
.main { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex: none; position: relative; z-index: 20; height: 49px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 560px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 19px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.crumbs { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 12px; } .crumbs b { color: var(--text); font-weight: 600; }
.spacer { flex: 1; }
.content { padding: 19px; width: 100%; min-width: 0; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-padding-top: 12px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 13px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 19.5px; } .page-head p { margin: 2px 0 0; color: var(--text-2); }
.page-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  .shell, .shell.collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 264px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .shell.open .sidebar { transform: none; }
  .shell.open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; }
  .menu-btn { display: inline-flex; } .content { padding: 13px; } .topbar { padding: 0 11px; }
  .collapsed .brand-text, .collapsed .nav-section, .collapsed .nav a span.label, .collapsed .side-foot .who { display: revert; }
  .collapse-btn { display: none !important; }
}

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 550; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--danger); } .btn.danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-2); } .btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { height: 25px; padding: 0 7px; font-size: 12px; } .btn.icon { width: 30px; padding: 0; } .btn.sm.icon { width: 25px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.input, .select, .textarea { width: 100%; height: 30px; padding: 0 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; transition: border-color .12s, box-shadow .12s; }
.textarea { height: auto; min-height: 84px; padding: 6px 9px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.select { padding-right: 22px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a96' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.input.sm, .select.sm { height: 26px; font-size: 12px; }
.field { margin-bottom: 11px; } .field > label { display: block; font-weight: 550; font-size: 12px; margin-bottom: 5px; } .field .help { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.field.req > label::after { content: " *"; color: var(--danger); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 11px; } @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.switch { position: relative; width: 32px; height: 18px; flex-shrink: 0; display: inline-block; } .switch input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 99px; transition: .15s; }
.switch i::after { content: ""; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: .15s; }
.switch input:checked + i { background: var(--accent); border-color: var(--accent); } .switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg button { border: 0; background: none; padding: 4px 9px; border-radius: 5px; cursor: pointer; color: var(--text-2); font-weight: 550; font-size: 12px; } .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.checkbox { display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--border); } .card-h h3 { font-size: 13px; }
.card-b { padding: 13px; }
.grid { display: grid; gap: 13px; } .g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .g2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 13px; } .row { display: flex; align-items: center; gap: 8px; } .wrap { flex-wrap: wrap; }
.kpi { padding: 13px; } .kpi .label { color: var(--text-2); font-size: 12px; display: flex; align-items: center; gap: 6px; } .kpi .val { font-size: 24.5px; font-weight: 650; letter-spacing: -.02em; margin-top: 5px; } .kpi .sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.kpi .ico { width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.bar { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.bar.warn > i { background: var(--warn); } .bar.danger > i { background: var(--danger); }
.hbar { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; margin: 7px 0; font-size: 12px; } .hbar .t { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; border-radius: 99px; font-size: 11px; font-weight: 550; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; } .badge.plain::before { display: none; }
.badge.success { background: var(--success-soft); color: var(--success); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.info { background: var(--info-soft); color: var(--info); } .badge.accent { background: var(--accent-soft); color: var(--accent-text); }
.score { display: inline-grid; place-items: center; min-width: 30px; height: 19px; padding: 0 6px; border-radius: 6px; font-weight: 650; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.score.hi { background: var(--success-soft); color: var(--success); } .score.mid { background: var(--warn-soft); color: var(--warn); } .score.lo { background: var(--surface-3); color: var(--text-2); }

/* ---------- Data table ---------- */
.tbl-card { overflow: hidden; }
.tbl-bar { display: flex; gap: 6px; align-items: center; padding: 10px 11px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tbl-bar .search { position: relative; flex: 1; min-width: 220px; max-width: 400px; } .tbl-bar .search svg { position: absolute; left: 10px; top: 9px; color: var(--text-3); } .tbl-bar .search input { padding-left: 26px; }
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 7px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; position: sticky; top: 0; }
.tbl th.sortable { cursor: pointer; } .tbl th.sortable:hover { color: var(--text); } .tbl th .arrow { display: inline-block; margin-left: 4px; opacity: .35; font-size: 10px; } .tbl th.sorted .arrow { opacity: 1; color: var(--accent-text); }
.tbl td { padding: 8px 11px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.clickable { cursor: pointer; } .tbl tbody tr.clickable:hover td { background: var(--surface-2); }
.tbl td.r, .tbl th.r { text-align: right; } .tbl .cell-main { font-weight: 550; } .tbl .cell-sub { font-size: 11px; color: var(--text-3); }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px; gap: 8px; flex-wrap: wrap; }
.skel { height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sh 1.2s infinite; } @keyframes sh { to { background-position: -200% 0; } }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 38px 16px; } .empty .ring { width: 52px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin: 0 auto 11px; } .empty .ring svg { width: 21px; height: 21px; }
.empty h3 { font-size: 14px; margin-bottom: 4px; } .empty p { margin: 0 auto 13px; color: var(--text-2); max-width: 420px; }

/* ---------- Overlays ---------- */
.overlay { overscroll-behavior: contain; overflow: hidden; position: fixed; inset: 0; background: rgba(10,10,18,.5); z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; animation: fade .12s; backdrop-filter: blur(2px); }
@keyframes fade { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; animation: rise .16s; overflow: hidden; } .modal.wide { max-width: 760px; }
.modal-h { flex: none; padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-h h3 { font-size: 14px; }
.modal-b { padding: 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; } .modal-f { flex: none; padding: 11px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 6px; }
.drawer-wrap { overscroll-behavior: contain; position: fixed; inset: 0; z-index: 90; background: rgba(10,10,18,.4); animation: fade .12s; }
.drawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(560px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slide .18s ease; } @keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.drawer-h { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; } .drawer-b { padding: 16px; overflow-y: auto; flex: 1; } .drawer-f { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; gap: 6px; justify-content: flex-end; }
#toasts { position: fixed; top: 68px; right: 16px; z-index: 400; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { --tk: var(--accent); --tk-soft: var(--accent-soft); pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 10px; align-items: flex-start; padding: 10px 10px 11px 11px; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--tk); box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08); animation: toast-in .22s cubic-bezier(.2, .9, .3, 1.2); }
.toast.ok { --tk: var(--success); --tk-soft: var(--success-soft); } .toast.err { --tk: var(--danger); --tk-soft: var(--danger-soft); } .toast.warn { --tk: var(--warn); --tk-soft: var(--warn-soft); } .toast.info { --tk: var(--info); --tk-soft: var(--info-soft); }
.toast-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tk-soft); color: var(--tk); } .toast-ic .i { width: 15px; height: 15px; }
.toast-body { flex: 1; min-width: 0; padding-top: 1px; } .toast-title { font-weight: 650; font-size: 13px; line-height: 1.3; } .toast-msg { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere; }
.toast-act { margin-top: 6px; border: 1px solid var(--tk); color: var(--tk); background: transparent; border-radius: 7px; padding: 3px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .toast-act:hover { background: var(--tk-soft); }
.toast-x { flex: none; border: 0; background: transparent; color: var(--text-3, var(--text-2)); width: 23px; height: 23px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; margin: -2px -2px 0 0; } .toast-x:hover { background: var(--bg); color: var(--text); } .toast-x .i { width: 13px; height: 13px; }
.toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tk); opacity: .55; transform-origin: left; }
.toast.out { animation: toast-out .18s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
:root[data-theme="dark"] .toast { box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3); }
@media (max-width: 640px) { #toasts { top: 60px; right: 8px; left: 8px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; } .toast-bar { transition: none !important; } }
.menu { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); min-width: 190px; padding: 5px; z-index: 60; animation: rise .12s; }
.menu button { display: flex; width: 100%; gap: 7px; align-items: center; padding: 6px 8px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left; } .menu button:hover { background: var(--surface-2); } .menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }
.palette { width: 100%; max-width: 560px; align-self: start; margin-top: 12vh; } .palette input { height: 42px; border: 0; border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; font-size: 14px; padding: 0 14px; width: 100%; background: var(--surface); color: var(--text); } .palette input:focus { outline: none; box-shadow: none; }
.palette .results { max-height: 340px; overflow-y: auto; padding: 5px; } .palette .results button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; } .palette .results button.sel, .palette .results button:hover { background: var(--accent-soft); color: var(--accent-text); }
kbd { font: 11px var(--mono); background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; padding: 0 5px; border-radius: 4px; color: var(--text-2); }

/* ---------- Domain bits ---------- */
.ring { position: relative; display: inline-grid; place-items: center; } .ring b { position: absolute; font-size: 14px; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; font-size: 12.5px; } .kv dt { color: var(--text-3); } .kv dd { margin: 0; word-break: break-word; }
.timeline { border-left: 2px solid var(--border); margin-left: 5px; padding-left: 13px; } .timeline .ev { position: relative; padding-bottom: 11px; } .timeline .ev::before { content: ""; position: absolute; left: -22px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.int-card { display: flex; flex-direction: column; gap: 8px; padding: 13px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; } .int-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.int-logo { width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); } .int-logo svg { width: 18px; height: 18px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 13px; overflow-x: auto; } .tabs button { border: 0; background: none; padding: 7px 11px; cursor: pointer; color: var(--text-2); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tabs button.on { color: var(--accent-text); border-color: var(--accent); } .tabs button:hover { color: var(--text); }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 13px; } @media (max-width: 640px) { .perm-grid { grid-template-columns: 1fr; } }
.callout { display: flex; gap: 10px; padding: 10px 11px; border-radius: var(--radius); background: var(--info-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); } .callout.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .callout.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .callout svg { margin-top: 3px; }
.code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: 12.5px var(--mono); word-break: break-all; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.settings-layout { display: grid; grid-template-columns: 210px 1fr; gap: 19px; } @media (max-width: 800px) { .settings-layout { grid-template-columns: 1fr; } }
.side-tabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; align-self: start; } @media (max-width: 800px) { .side-tabs { flex-direction: row; overflow-x: auto; position: static; } }
.side-tabs button { text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; font-weight: 550; white-space: nowrap; } .side-tabs button:hover { background: var(--surface-2); } .side-tabs button.on { background: var(--accent-soft); color: var(--accent-text); }
.savebar { position: sticky; bottom: 16px; margin-top: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 13px; border-radius: var(--radius); background: var(--text); color: var(--bg); box-shadow: var(--shadow-md); animation: rise .16s; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(900px 400px at 50% -10%, var(--accent-soft), transparent), var(--bg); } .login .card { width: 100%; max-width: 400px; padding: 22px; box-shadow: var(--shadow-md); }
.agent-card { padding: 13px; display: flex; flex-direction: column; gap: 10px; }
.hint-list { margin: 0; padding-left: 14px; color: var(--text-2); } .hint-list li { margin: 2px 0; }
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--text-2); cursor: pointer; transition: .15s; } .dropzone.over, .dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Pricing editor ---------- */
.modal.xwide { max-width: 1060px; }
.pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; } @media (max-width: 920px) { .pe-grid { grid-template-columns: minmax(0, 1fr); } .pe-preview { position: static; } }
.pe-grid > *, .modal-b > * { min-width: 0; } .modal { min-width: 0; } .modal-b { overflow-x: hidden; }
@media (max-width: 640px) { .overlay { padding: 8px; } .modal-b { padding: 11px; } .adorn .input { min-width: 0; } }
.pe-preview { position: sticky; top: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px; }
.pe-preview .big { font-size: 19.5px; font-weight: 650; letter-spacing: -.01em; margin: 2px 0 8px; }
.est-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); } .est-line small { display: block; color: var(--text-3); }
.est-total { display: flex; justify-content: space-between; font-weight: 650; font-size: 14px; padding-top: 6px; }
.adorn { display: flex; } .adorn > span { display: grid; place-items: center; padding: 0 8px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2); font-size: 12px; white-space: nowrap; } .adorn > span:first-child { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .adorn > span:last-child { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .adorn .input { border-radius: 0; } .adorn > .input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .adorn > .input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; background: var(--accent-soft); color: var(--accent-text); border-radius: 99px; font-size: 11.5px; } .chip button { border: 0; background: none; cursor: pointer; color: inherit; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; padding: 0; } .chip button:hover { background: rgba(0,0,0,.1); }
.chip.ghost { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-2); padding: 3px 8px; cursor: pointer; } .chip.ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 11px; } @media (max-width: 640px) { .check-grid { grid-template-columns: 1fr; } }
.rows { display: flex; flex-direction: column; gap: 6px; } .rows .r { display: grid; gap: 6px; align-items: center; }
.plan-card { padding: 14px; display: flex; flex-direction: column; gap: 8px; position: relative; } .plan-card.off { opacity: .62; } .plan-card.pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.plan-price { font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; } .plan-card ul { list-style: none; padding: 0; margin: 0; } .plan-card li { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--text-2); padding: 2px 0; } .plan-card li svg { color: var(--success); margin-top: 3px; }
.line-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 13px; } .line-chips button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 99px; padding: 4px 10px; cursor: pointer; font-weight: 550; color: var(--text-2); } .line-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; } .line-chips button span { opacity: .7; margin-left: 4px; }

.rate-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 10px 0; background: var(--surface); } .rate-card .field { margin-bottom: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; } .grid4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 34px; gap: 0 8px; align-items: end; } .rate-x { margin-bottom: 8px; }
@media (max-width: 640px) { .grid3, .grid4 { grid-template-columns: 1fr 1fr; } }

/* campaign flow view */
.flow { display: flex; flex-direction: column; align-items: stretch; max-width: 640px; }
.flow-node { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, var(--surface)); }
.flow-node .ico { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.flow-line { width: 2px; height: 14px; background: var(--border); margin-left: 22px; }

/* ---- Agent Live Control Center ---- */
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: inline-block; }
.live-dot.on { background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: livepulse 1.8s infinite; } .live-dot.poll { background: var(--warn); }
@keyframes livepulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.gauge { padding: 11px 11px 10px; text-align: center; } .gauge svg { max-width: 190px; margin: 0 auto; display: block; }
.g-val { font-size: 23px; font-weight: 650; margin-top: -24px; position: relative; } .g-label { font-size: 12px; color: var(--text-2); margin-top: 2px; } .g-sub { font-size: 11px; }
.big { font-size: 17.5px; font-weight: 650; }
.prow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } .prow.side { margin-top: 4px; }
.pnode { flex: 1 1 170px; min-width: 150px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: var(--surface-2); transition: border-color .3s, box-shadow .3s; }
.pnode.st-processing { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); } .pnode.st-active { border-color: var(--success); } .pnode.st-failed { border-color: var(--danger); } .pnode.st-paused { border-color: var(--warn); opacity: .85; } .pnode.st-off { opacity: .55; }
.pn-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.pedge { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; color: var(--text-3); min-width: 33px; } .pedge .pe-arrow { font-size: 19.5px; line-height: 1; } .pedge .pe-n { font-size: 10px; }
.pedge.hot { color: var(--accent); animation: edgehot 1s ease-in-out 2; } @keyframes edgehot { 50% { transform: scale(1.35); } }
.agent-live.st-processing { border-color: var(--info); } .agent-live.st-failed { border-color: var(--danger); } .agent-live.st-paused { border-color: var(--warn); }
.cur { min-height: 19px; font-size: 12px; } .cur-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.spin { width: 11px; height: 11px; border: 2px solid var(--info); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } }
.term { background: #0c0d12; color: #d7d9e0; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; height: 460px; overflow: auto; padding: 6px 4px; border-radius: 0 0 var(--radius) var(--radius); }
.term-line { display: flex; gap: 6px; padding: 1px 8px; align-items: baseline; } .term-line:hover { background: #151722; } .t-time { color: #6c7086; flex-shrink: 0; } .t-agent { color: #9aa0b8; flex-shrink: 0; min-width: 76px; } .t-msg { min-width: 0; overflow-wrap: anywhere; }
.term-line.error .t-msg { color: #ff8da1; } .term-line.warning .t-msg { color: #f4c470; } .term-line.success .t-msg { color: #7fe3b4; } .term-line.progress .t-msg { color: #8fbcff; }
.tag { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 5px; flex-shrink: 0; letter-spacing: .03em; } .tag-info { background: #1d3550; color: #8fbcff; } .tag-success { background: #12382b; color: #7fe3b4; } .tag-warning { background: #3d2f12; color: #f4c470; } .tag-error { background: #43161f; color: #ff8da1; } .tag-progress { background: #2a2a55; color: #b3b3ff; } .tag-test { background: #3a2a52; color: #d9b8ff; } .tag-hand { background: #1f2a3a; color: #8fbcff; }
.ov { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; }
.pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; max-height: 240px; overflow: auto; margin: 0; } .pre.sm { max-height: 120px; }
.kv-grid { display: grid; grid-template-columns: 110px 1fr; gap: 5px 10px; font-size: 12px; }
.live-bottom { align-items: start; } @media (max-width: 1100px) { .live-bottom { grid-template-columns: minmax(0, 1fr); } }
.finding { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; gap: 5px; } .finding .rank { color: var(--text-3); font-size: 11px; font-weight: 600; min-width: 25px; }
.fix { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; background: var(--surface-2); border-radius: 8px; padding: 6px 8px; white-space: pre-line; } .fix svg { flex-shrink: 0; margin-top: 2px; color: var(--success); }
table.mini { width: 100%; border-collapse: collapse; font-size: 12px; } table.mini th { text-align: left; color: var(--text-3); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); } table.mini td { padding: 5px 6px; border-bottom: 1px solid var(--border); }

.fetch-status { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); } .fetch-status.ok { background: var(--success-soft); color: var(--success); } .fetch-status.error { background: var(--danger-soft); color: var(--danger); } .fetch-status.manual { background: var(--info-soft); color: var(--info); } .fetch-status svg { flex-shrink: 0; }
.chip { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 99px; padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--text-2); } .chip:hover { border-color: var(--accent); color: var(--accent); }
details.adv > summary { cursor: pointer; color: var(--text-2); font-size: 12px; }

/* agentic testing v2, health, maintenance, integrations hub */
.iconbtn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; padding: 0; text-decoration: none; }
.iconbtn:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); } .iconbtn.danger:hover { background: var(--danger-soft, #fde8e8); color: var(--danger); border-color: var(--danger); } .iconbtn svg { width: 14px; height: 14px; }
.iconbtn[disabled] { opacity: .45; pointer-events: none; }
.seg-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gcard { border: 1px solid var(--border); border-radius: 12px; padding: 11px; display: grid; gap: 6px; align-content: start; } .gcard h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.gcard.missing { border-top: 3px solid var(--warn); } .gcard.broken { border-top: 3px solid var(--danger); } .gcard.awaiting { border-top: 3px solid var(--info, var(--accent)); }
.runctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: pulse 1.6s infinite; } .pulse-dot.paused { background: var(--warn); animation: none; } .pulse-dot.idle { background: var(--text-3); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }
.scoreRing { display: grid; place-items: center; text-align: center; } .scoreRing .n { font-size: 35px; font-weight: 700; line-height: 1; }
.rep-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; } .rep-row.on { border-color: var(--accent); background: var(--accent-soft); } .rep-row .meta { display: grid; gap: 2px; min-width: 0; } .rep-row .acts { display: flex; gap: 5px; }
.tile-grid { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .tile { border: 1px solid var(--border); border-radius: 14px; padding: 13px; display: grid; gap: 8px; align-content: start; background: var(--surface); position: relative; } .tile.soon { opacity: .75; }
.tile .logo { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; } .tile .logo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile .caps { display: flex; gap: 5px; flex-wrap: wrap; } .tile .foot { display: flex; gap: 6px; justify-content: space-between; align-items: center; margin-top: 2px; }
.stat-line { display: flex; gap: 11px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); } .stat-line b { color: var(--text); }
.codebox { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--bg-2, var(--surface-2, #f4f4f6)); border: 1px solid var(--border); border-radius: 8px; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.map-grid { display: grid; grid-template-columns: 150px 1fr; gap: 5px 8px; align-items: center; }
.bar-s { height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; } .bar-s > i { display: block; height: 100%; background: var(--accent); }
.tile { display: flex; flex-direction: column; gap: 8px; } .tile .foot { margin-top: auto; padding-top: 4px; }

/* ---- shell: brand logo, status chips, notification bell ---- */
.brand-logo { width: 25px; height: 25px; border-radius: 7px; object-fit: contain; flex-shrink: 0; background: var(--surface); }
.chips { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; white-space: nowrap; text-decoration: none; } .chip:hover { text-decoration: none; background: var(--surface-2); } .chip b { color: var(--text); font-weight: 650; } .chip svg { width: 12px; height: 12px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); } .chip.ok .dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); } .chip.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); } .chip.warn .dot { background: var(--warn); } .chip.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); } .chip.bad .dot { background: var(--danger); }
@media (max-width: 1100px) { .chip span:not(.dot) { display: none; } .chip { padding: 0 6px; } .chip svg + span { display: none; } } @media (max-width: 760px) { .chips { display: none; } }
.bell-btn { position: relative; } .bell-badge { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 15.5px; text-align: center; border: 2px solid var(--bg); box-sizing: content-box; } .bell-badge.warn { background: var(--warn); } .bell-badge.danger { background: var(--danger); } .bell-btn.ping svg { animation: ring .9s ease 1; transform-origin: 50% 0; } @keyframes ring { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } } @media (prefers-reduced-motion: reduce) { .bell-btn.ping svg { animation: none; } }
.bell-panel { position: fixed; top: 54px; right: 14px; z-index: 95; width: min(400px, calc(100vw - 20px)); max-height: min(560px, calc(100vh - 70px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: fade .1s; }
.bell-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 11px; border-bottom: 1px solid var(--border); } .bell-tabs { display: flex; gap: 2px; padding: 5px 6px; border-bottom: 1px solid var(--border); overflow-x: auto; } .bell-tabs button { border: 0; background: none; padding: 5px 8px; border-radius: 8px; color: var(--text-2); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; } .bell-tabs button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.bell-list { overflow-y: auto; flex: 1; } .bell-item { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer; font: inherit; color: inherit; } .bell-item:hover { background: var(--surface-2); } .bell-item.unread { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.bell-item .lv { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--info, var(--accent)); } .bell-item .lv.danger { background: var(--danger); } .bell-item .lv.warn { background: var(--warn); } .bell-item .lv.success { background: var(--success); }
.bell-item .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .bell-item .ttl { font-weight: 600; font-size: 12.5px; } .bell-item .bd { color: var(--text-2); font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .bell-item .meta { color: var(--text-3); font-size: 11px; } .bell-item .src { font-weight: 600; } .bell-item .ud { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: none; }
.bell-empty { display: grid; place-items: center; gap: 6px; padding: 29px 16px; color: var(--text-3); } .bell-empty svg { width: 19px; height: 19px; }

/* ---- agents, knowledge, operations, control-center analytics ---- */
.agent-grid { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); } .acard { display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); position: relative; } .acard.retired { opacity: .65; } .acard.paused { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.avatar-lg { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; } .avatar-lg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mgr-hero { display: grid; gap: 11px; grid-template-columns: 1fr; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); }
.type-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .type-card { text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); cursor: pointer; display: grid; gap: 5px; font: inherit; color: inherit; } .type-card:hover { border-color: var(--accent); background: var(--accent-soft); } .type-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .type-card.off { opacity: .5; cursor: not-allowed; }
.perm-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); } .perm-row:last-child { border-bottom: 0; }
.kn-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } .kn-card { border: 1px solid var(--border); border-radius: 12px; padding: 11px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; } .kn-card.expired, .kn-card.draft { opacity: .75; } .kn-card .prev { color: var(--text-2); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cov-bar { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; } .cov-bar > i { display: block; height: 100%; background: var(--success); }
.ops-hero { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); } .ops-hero.run { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--success) 8%, var(--surface)), var(--surface)); } .ops-hero.stop { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 7%, var(--surface)), var(--surface)); } .ops-hero.wait { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.big-btn { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 12px; } .sched-grid { display: grid; gap: 6px; } .sched-row { display: grid; grid-template-columns: 120px 56px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); } .sched-row:last-child { border-bottom: 0; } .sched-row .times { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .sched-row input[type=time] { height: 28px; }
.cal14 { display: grid; gap: 5px; grid-template-columns: repeat(7, 1fr); } .cal14 > div { border: 1px solid var(--border); border-radius: 10px; padding: 6px; font-size: 11px; min-height: 55px; display: grid; gap: 2px; align-content: start; } .cal14 .open { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); } .cal14 .holiday { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); } .cal14 .off { background: var(--surface-2); color: var(--text-3); } .cal14 .today { box-shadow: 0 0 0 2px var(--accent); } @media (max-width: 760px) { .cal14 { grid-template-columns: repeat(2, 1fr); } .sched-row { grid-template-columns: 90px 50px 1fr; } }
.perf-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; } .perf-bars > div { flex: 1; min-width: 4px; background: var(--accent); border-radius: 3px 3px 0 0; position: relative; } .perf-bars > div.bad { background: var(--danger); } .perf-bars > div:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 3px 6px; border-radius: 6px; font-size: 10px; white-space: nowrap; z-index: 5; }
.swatch { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; padding: 0; } .logo-drop { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 12px; } .logo-drop img { width: 52px; height: 46px; object-fit: contain; border-radius: 10px; background: var(--surface-2); }
.sect-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; margin: 4px 0 -2px; } .stack-tight { display: grid; gap: 5px; }
.dotc { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; } .bar-s { height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; } .bar-s > i { display: block; height: 100%; background: var(--accent); }
.brand-preview { border: 1px solid var(--border); border-radius: 12px; padding: 11px; background: var(--surface); }
.acard .stat-line, .kn-card .stat-line { font-size: 11.5px; }
/* phone-width containment */
.topbar { min-width: 0; } .topbar > * { min-width: 0; }
.grid.g2 > *, .grid.g3 > * { min-width: 0; }
@media (max-width: 640px) { .topbar { gap: 5px; padding: 0 8px; } .card-h { flex-wrap: wrap; } .card-h .row { flex-wrap: wrap; } .content { overflow-x: clip; } .grid.g2 { grid-template-columns: minmax(0, 1fr); } }

/* industry picker */
.industry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.industry-card { display: grid; gap: 8px; align-content: start; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.industry-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ind-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); } .ind-ico svg { width: 16px; height: 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; } .chip-t { font-size: 10.5px; padding: 2px 6px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }

/* ======================= header, notifications, profile, footer (v2) ======================= */
:root { --c1: #5b5bd6; --c2: #12a678; --c3: #e0a030; --c4: #2f8ae0; --c5: #d9506a; --c6: #8a5bd6; }
:root[data-theme="dark"] { --c1: #8c8cf5; --c2: #3ccf91; --c3: #f0b24b; --c4: #5eaaf0; --c5: #f2677d; --c6: #b18cf5; }
.topbar { gap: 6px; }
.topbar > .btn, .topbar > .bell-btn, .topbar > .profile-btn, .topbar > .search-btn, .topbar > .sidebar-toggle { flex: none; min-width: 30px; }
.topbar .crumbs { min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.menu-btn, .collapse-btn { display: none !important; }
.sidebar-toggle svg, .bell-btn svg { flex: none; }
.search-btn { padding: 0 8px; }
.bell-btn .bell-badge { top: 1px; right: 0; }
.profile-btn { display: inline-flex; align-items: center; gap: 6px; height: 33px; padding: 3px 6px 3px 3px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); font: inherit; flex: none; }
.profile-btn:hover, .profile-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-strong); }
.profile-btn .pb-t { display: grid; text-align: left; line-height: 1.15; max-width: 150px; } .profile-btn .pb-t b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-btn .pb-t small { font-size: 10px; color: var(--text-3); }
.profile-btn > svg { width: 12px; height: 12px; color: var(--text-3); flex: none; }
.avatar.lg { width: 39px; height: 39px; font-size: 14px; background: var(--accent); color: #fff; }
.profile-btn .avatar { width: 26px; height: 26px; background: var(--accent); color: #fff; }
.profile-panel { position: fixed; top: 54px; right: 14px; z-index: 96; width: min(330px, calc(100vw - 20px)); max-height: calc(100vh - 66px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; animation: fade .1s; }
.pp-head { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: var(--surface-2); margin-bottom: 4px; } .pp-head b { display: block; } .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sec { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 8px 8px 4px; }
.profile-panel .seg { display: flex; margin: 0 6px 4px; } .profile-panel .seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .profile-panel .seg button.on { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); } .profile-panel .seg svg { width: 12px; height: 12px; }
.pm-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); text-align: left; } .pm-item:hover { background: var(--surface-2); } .pm-item svg { width: 15px; height: 15px; color: var(--text-3); flex: none; } .pm-l { display: grid; min-width: 0; } .pm-l small { color: var(--text-3); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.pm-item.danger { color: var(--danger); } .pm-item.danger svg { color: var(--danger); } .profile-panel hr { border: 0; border-top: 1px solid var(--border); margin: 5px 4px; }
.pp-foot { text-align: center; font-size: 10px; color: var(--text-3); padding: 6px 0 2px; }
.side-foot { flex: none; height: var(--foot-h); border-top: 1px solid var(--border); padding: 0 11px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); } .sf-brand { font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-ver { margin-left: auto; } .sf-link { color: var(--text-3); display: grid; } .sf-link:hover { color: var(--text); }
.collapsed .side-foot { justify-content: center; padding: 0 4px; } .collapsed .sf-brand, .collapsed .sf-ver { display: none; }
.app-foot { flex: none; min-height: var(--foot-h); display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 5px 19px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-3); } .app-foot a { color: var(--text-2); text-decoration: none; } .app-foot a:hover { color: var(--text); text-decoration: underline; }
.fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); display: inline-block; } .fdot.ok { background: var(--success); } .fdot.warn { background: var(--warn); } .fdot.bad { background: var(--danger); }
@media (max-width: 900px) { .app-foot { padding: 5px 13px; } }
@media (min-width: 901px) { .app-foot { height: var(--foot-h); flex-wrap: nowrap; overflow: hidden; } .app-foot > * { min-width: 0; } .app-foot .row { flex-wrap: nowrap; white-space: nowrap; } .app-foot > :first-child { overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 700px) { .profile-btn .pb-t, .profile-btn > svg { display: none; } .profile-btn { padding: 3px; } .topbar .crumbs { display: none; } }

/* notifications */
.bell-panel { width: min(430px, calc(100vw - 16px)); right: 8px; }
.bell-h { align-items: flex-start; } .bell-h b { font-size: 14px; } .bell-tabs { flex-wrap: nowrap; } .bell-tabs button { display: inline-flex; align-items: center; gap: 5px; } .bell-tabs .tc { font-style: normal; font-size: 10px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 99px; padding: 0 5px; min-width: 14px; text-align: center; line-height: 14.5px; }
.bell-f { border-top: 1px solid var(--border); padding: 8px 11px; text-align: center; font-size: 12px; background: var(--surface-2); } .bell-f a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ngroup { position: sticky; top: 0; z-index: 1; padding: 5px 11px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.nitem { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border-bottom: 1px solid var(--border); position: relative; } .nitem:hover { background: var(--surface-2); } .nitem.unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .nitem.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.nic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--info-soft); color: var(--info); } .nic svg { width: 15px; height: 15px; } .nic.success { background: var(--success-soft); color: var(--success); } .nic.warn { background: var(--warn-soft); color: var(--warn); } .nic.danger { background: var(--danger-soft); color: var(--danger); }
.ntx { flex: 1; min-width: 0; display: grid; gap: 3px; } .ntop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .ntop .ttl { font-weight: 600; font-size: 12.5px; } .ntop time { color: var(--text-3); font-size: 10.5px; white-space: nowrap; }
.nitem .bd { color: var(--text-2); font-size: 11.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nitem .meta { color: var(--text-3); font-size: 10.5px; } .nitem .src { font-weight: 600; } .lvtag { font-weight: 600; } .lvtag.danger { color: var(--danger); } .lvtag.warn { color: var(--warn); }
.nact { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .nact .btn.sm { height: 25px; padding: 0 8px; font-size: 11.5px; }
.nmark { opacity: 0; flex: none; } .nitem:hover .nmark, .nitem:focus-within .nmark, .nmark:focus-visible { opacity: 1; } @media (hover: none) { .nmark { opacity: 1; } } .dot-o { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--text-3); display: inline-block; }
.bell-empty { padding: 35px 19px; text-align: center; } .be-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; } .be-ic svg { width: 19px; height: 19px; }
.spin { width: 19px; height: 19px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } }
.notif-page .nitem { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 6px; background: var(--surface); } .notif-page .nitem.unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* ======================= charts and dashboard widgets ======================= */
.chart { display: block; overflow: visible; } .chart .grid { stroke: var(--border); stroke-width: 1; } .chart .guide { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; } .chart .ax { font-size: 10px; fill: var(--text-3); } .spark { display: block; }
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .donut-v { font-size: 23px; font-weight: 700; fill: var(--text); } .donut-l { font-size: 10.5px; fill: var(--text-3); } .donut .seg { cursor: pointer; transition: opacity .12s; } .donut .seg:hover { opacity: .8; } .gauge-v { font-size: 26.5px; font-weight: 700; fill: var(--text); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; flex: 1; min-width: 140px; } .legend li { display: flex; align-items: center; gap: 6px; font-size: 12px; } .legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .legend span { flex: 1; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend small { color: var(--text-3); width: 30px; text-align: right; }
.hbars { display: grid; gap: 7px; } .hb { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 8px; align-items: center; font-size: 12px; } .hb .hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); } .hb .hl a { color: inherit; text-decoration: none; } .hb .hl a:hover { color: var(--accent-text); text-decoration: underline; } .hb .ht { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; } .hb .ht i { display: block; height: 100%; border-radius: 99px; } .hb b { min-width: 25px; text-align: right; font-weight: 600; }
.funnel { display: grid; gap: 4px; } .fn small { display: block; color: var(--text-3); font-size: 10px; height: 12px; padding-left: 4px; } .fb { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: #fff; font-size: 12px; min-width: 110px; } .fb b { font-weight: 700; }
.heat-grid { display: grid; gap: 3px; align-items: center; } .heat-grid .hc, .heat-grid .hr { font-size: 10px; color: var(--text-3); } .hcell { height: 18px; border-radius: 4px; display: block; } .heat-scale { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 10px; color: var(--text-3); margin-top: 6px; } .heat-scale i { width: 12px; height: 9px; border-radius: 3px; display: inline-block; }
.chart-tip { position: fixed; z-index: 200; pointer-events: none; background: var(--text); color: var(--bg); padding: 6px 8px; border-radius: 8px; font-size: 11px; box-shadow: var(--shadow-md); max-width: 240px; } .chart-tip .tt { font-weight: 700; margin-bottom: 4px; } .chart-tip .tr { display: flex; align-items: center; gap: 6px; } .chart-tip .tr i { width: 8px; height: 8px; border-radius: 2px; flex: none; } .chart-tip .tr span { flex: 1; opacity: .8; } .chart-tip .tr b { margin-left: 8px; }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 13px; } .dash-grid > .w { grid-column: span 12; min-width: 0; } @media (min-width: 760px) { .dash-grid > .w4 { grid-column: span 6; } .dash-grid > .w6 { grid-column: span 6; } .dash-grid > .w3 { grid-column: span 6; } } @media (min-width: 1100px) { .dash-grid > .w3 { grid-column: span 3; } .dash-grid > .w4 { grid-column: span 4; } .dash-grid > .w6 { grid-column: span 6; } .dash-grid > .w8 { grid-column: span 8; } }
.widget { display: flex; flex-direction: column; } .widget .card-h { padding: 10px 13px; } .widget .card-h h3 { font-size: 13px; } .widget .card-b { flex: 1; min-width: 0; } .widget .wsub { color: var(--text-3); font-size: 11px; }
.kpi2 { padding: 11px 13px 8px; display: grid; gap: 4px; position: relative; overflow: hidden; } .kpi2 .kl { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; } .kpi2 .ki { width: 23px; height: 23px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); } .kpi2 .ki svg { width: 13px; height: 13px; } .kpi2 .kv { font-size: 24.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .kpi2 .kd { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); } .dchip { font-weight: 700; font-size: 10.5px; padding: 1px 6px; border-radius: 99px; background: var(--success-soft); color: var(--success); } .dchip.down { background: var(--danger-soft); color: var(--danger); } .dchip.flat { background: var(--surface-2); color: var(--text-3); } .kpi2 .spark { margin: 4px -2px 0; }
.mini-list { display: grid; } .mini-list > a, .mini-list > div { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; } .mini-list > :last-child { border-bottom: 0; } .mini-list .ml-main { flex: 1; min-width: 0; } .mini-list .ml-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .mini-list .ml-main span { color: var(--text-3); font-size: 11px; } .mini-list a:hover .ml-main b { color: var(--accent-text); }
.ranking { counter-reset: r; } .ranking > * { counter-increment: r; } .rank-n { width: 19px; height: 19px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; flex: none; }
.range-seg button { padding: 3px 8px; }
.bell-btn .bell-badge { box-sizing: border-box; min-width: 16px; height: 16px; line-height: 13px; padding: 0 4px; top: -3px; right: -4px; font-size: 10px; border: 2px solid var(--bg); }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 11px; }
@media (max-width: 520px) { .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi2 .kv { font-size: 20px; } .kpi2 .kd { flex-wrap: wrap; } }
.page-actions .range-seg { margin-right: 4px; }
.fb { min-width: 150px; } .fb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb b { flex: none; }

/* audit log v2 */
.chip-bar { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; } .cchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; } .cchip svg { width: 12px; height: 12px; } .cchip:hover { border-color: var(--border-strong); color: var(--text); } .cchip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; } .cchip i { font-style: normal; font-size: 10px; background: var(--surface-2); color: var(--text-3); border-radius: 99px; padding: 0 5px; line-height: 15.5px; } .cchip.on i { background: var(--accent); color: #fff; }
.fpill { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 2px 4px 2px 8px; font-size: 11.5px; } .fpill button { border: 0; background: none; cursor: pointer; color: var(--text-3); font-size: 14px; line-height: 1; padding: 0 5px; border-radius: 50%; } .fpill button:hover { color: var(--text); background: var(--surface-3); }
.aic { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--info-soft); color: var(--info); } .aic svg { width: 13px; height: 13px; } .aic.success { background: var(--success-soft); color: var(--success); } .aic.warn { background: var(--warn-soft); color: var(--warn); } .aic.danger { background: var(--danger-soft); color: var(--danger); }
.avatar.xs { width: 19px; height: 19px; font-size: 10px; } .nowrap { white-space: nowrap; } .aclip { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow { cursor: pointer; } .arow:hover td { background: var(--surface-2); } .arow.sev-danger td:first-child { box-shadow: inset 3px 0 0 var(--danger); } .arow.sev-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); } .arow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.audit-tbl td, .audit-tbl th { vertical-align: middle; }
@media (max-width: 760px) { .aclip { max-width: 220px; } }
.filter-row > * { flex: 0 1 180px; min-width: 140px; } .filter-row > .grow { flex: 1 1 260px; } .filter-row > label { flex: 0 0 auto; min-width: 0; }
@media (max-width: 1280px) { .hide-md { display: none; } }
.legend { min-width: 0; flex: 1 1 150px; } .legend small { width: 26px; flex: none; }
.nitem.clickable { cursor: pointer; }

/* ---- header: centred search, right-hand status icons ---- */
.top-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .top-left .crumbs { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; }
.search-wrap { min-width: 0; } .search-btn { width: 100%; height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-3); border-radius: 999px; cursor: pointer; font: inherit; box-shadow: var(--shadow-sm); } .search-btn:hover { border-color: var(--accent); } .search-btn .sb-l { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-btn kbd { font: 11px var(--mono); padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-3); background: var(--surface-2); }
.hdr-icons { display: flex; gap: 2px; } .hdr-btn { position: relative; } .hdr-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bg); box-sizing: content-box; background: var(--text-3); } .hdr-dot.ok { background: var(--success); } .hdr-dot.warn { background: var(--warn); } .hdr-dot.bad { background: var(--danger); } .hdr-dot.pulse { animation: hdrPulse 2s ease-out infinite; }
.hdr-count { position: absolute; top: 2px; right: 0; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; border: 2px solid var(--bg); box-sizing: content-box; } .hdr-count.warn { background: var(--warn); } .hdr-count.bad { background: var(--danger); }
@keyframes hdrPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } } @media (prefers-reduced-motion: reduce) { .hdr-dot.pulse { animation: none; } }
@media (max-width: 900px) { .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; } .top-left .crumbs { display: none; } }
@media (max-width: 640px) { .topbar { grid-template-columns: auto auto minmax(0, 1fr); padding: 0 8px; } .search-btn { width: 32px; padding: 0; justify-content: center; } .search-btn .sb-l, .search-btn kbd { display: none; } .top-right { gap: 2px; } .chips { display: none; } }

/* ---- inbox: three-pane mail client ---- */
.content.bare { display: flex; flex-direction: column; padding-top: 13px; padding-bottom: 13px; overflow: auto; }
.menu { min-width: 220px; max-width: min(360px, 92vw); } .menu button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 480px; }
.mail-banner { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); font-size: 12px; } .mail-banner svg { flex: none; color: var(--warn); }
.mail-app { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(300px, 380px) minmax(0, 1fr); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.mail-side { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-right: 1px solid var(--border); background: var(--surface-2); min-height: 0; overflow-y: auto; }
.mail-compose { width: 100%; height: 33px; }
.mail-acct { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: inherit; } .mail-acct:hover { border-color: var(--accent); } .mail-acct > svg { flex: none; color: var(--text-3); }
.ma-t { display: grid; min-width: 0; flex: 1; line-height: 1.25; } .ma-t b { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ma-t small { color: var(--text-3); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: 11px; } .mail-av.me { background: var(--text); color: var(--bg); } .mail-av.all { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-strong); }
.mail-acct .mail-av { width: 26px; height: 26px; }
.mail-pill { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.mail-folders { display: grid; gap: 2px; }
.mail-folder { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--text-2); cursor: pointer; font: inherit; text-align: left; } .mail-folder:hover { background: var(--surface); color: var(--text); } .mail-folder.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .mail-folder svg { flex: none; width: 15px; height: 15px; }
.mf-l { flex: 1; } .mf-n { font-size: 11px; color: var(--text-3); } .mf-n.hot { color: var(--accent-text); font-weight: 700; }
.mail-side-foot { margin-top: auto; display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); } .mail-sync { font-size: 11px; } .mail-err { color: var(--danger); margin-top: 2px; }
.mail-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); min-width: 0; }
.mail-list-h { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; } .mlh-t { flex: 1; display: grid; line-height: 1.2; min-width: 0; } .mlh-t b { font-size: 14px; } .mlh-t small { color: var(--text-3); font-size: 11px; } .mail-menu { display: none; }
.mail-search { display: flex; align-items: center; gap: 6px; margin: 5px 10px 6px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); } .mail-search svg { flex: none; color: var(--text-3); width: 14px; height: 14px; } .mail-search input { border: 0; background: none; box-shadow: none; padding: 0; height: 30px; flex: 1; min-width: 0; outline: none; color: var(--text); font: inherit; }
.mail-rows { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.mail-row { position: relative; display: flex; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--border); cursor: pointer; outline-offset: -2px; } .mail-row:hover { background: var(--surface-2); } .mail-row.on { background: var(--accent-soft); } .mail-row.unread::before { content: ""; position: absolute; left: 3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.mr-body { min-width: 0; flex: 1; display: grid; gap: 1px; } .mr-top { display: flex; align-items: baseline; gap: 5px; } .mr-from { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mr-cnt { font-size: 10px; color: var(--text-3); padding: 0 5px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); } .mr-date { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.mr-subj, .mr-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .mr-snip { color: var(--text-3); font-size: 11.5px; }
.mail-row.unread .mr-from, .mail-row.unread .mr-subj { font-weight: 700; } .mail-row.unread .mr-date { color: var(--accent-text); font-weight: 600; }
.mr-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 3px; } .mr-lead { font-size: 10.5px; color: var(--text-2); }
.mr-star { align-self: flex-start; flex: none; width: 23px; height: 23px; border: 0; border-radius: 7px; background: none; color: var(--border-strong); cursor: pointer; display: grid; place-items: center; } .mr-star svg { width: 14px; height: 14px; } .mr-star:hover { color: var(--warn); background: var(--surface); } .mr-star.on { color: var(--warn); } .mr-star.on svg { fill: currentColor; }
.mail-more { margin: 8px auto; display: flex; }
.mail-empty { display: grid; justify-items: center; align-content: center; gap: 5px; padding: 38px 19px; text-align: center; color: var(--text-3); height: 100%; } .mail-empty svg { width: 30px; height: 30px; opacity: .6; } .mail-empty b { color: var(--text); font-size: 14px; } .mail-empty p { margin: 0; max-width: 320px; font-size: 12px; } .mail-empty.big svg { width: 52px; height: 46px; }
.mail-read { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mail-bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .mail-back { display: none; } .mail-acts { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; } .mail-act svg { width: 14px; height: 14px; } .mail-act.starred svg { fill: var(--warn); color: var(--warn); }
.mail-thread { overflow-y: auto; flex: 1; min-height: 0; padding: 13px 16px 19px; display: grid; gap: 11px; align-content: start; }
.mail-subject h2 { margin: 0 0 6px; font-size: 17.5px; line-height: 1.3; overflow-wrap: anywhere; } .mail-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .mail-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); padding: 3px 7px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); } .mail-chip svg { width: 11px; height: 11px; }
.msg-list { display: grid; gap: 8px; }
.msg { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; } .msg.out { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); } .msg.open { box-shadow: var(--shadow-sm); }
.msg-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border: 0; background: none; color: var(--text); cursor: pointer; font: inherit; text-align: left; } .msg-h:hover { background: var(--surface-2); }
.msg-who { flex: 1; min-width: 0; display: grid; line-height: 1.3; } .msg-who b { font-size: 12.5px; } .msg-who small { color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-snip { display: none; color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg:not(.open) .msg-snip { display: block; } .msg:not(.open) .msg-who small { display: none; }
.msg-tags { display: flex; gap: 4px; flex-wrap: wrap; } .msg-date { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.msg-body { display: none; padding: 2px 13px 13px 46px; } .msg.open .msg-body { display: block; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 13px; } .mail-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.mail-quoted { margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--border-strong); color: var(--text-2); font-size: 12px; }
.mail-qtoggle { display: inline-block; margin-top: 5px; padding: 0 6px; height: 16px; line-height: 13px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-2); color: var(--text-2); cursor: pointer; font-size: 10px; letter-spacing: 1px; }
.mail-frame { display: block; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; min-height: 35px; }
.msg-note { margin-top: 5px; font-size: 10.5px; color: var(--text-3); }
.msg-att { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .att { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-2); font-size: 11.5px; max-width: 100%; } .att svg { width: 12px; height: 12px; flex: none; } .att small { color: var(--text-3); }
.mail-reply { border: 1px solid var(--border-strong); border-radius: 12px; padding: 8px; display: grid; gap: 6px; background: var(--surface); } .mail-reply textarea { width: 100%; min-height: 110px; resize: vertical; }
.mr-to { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; } .mr-to svg { width: 13px; height: 13px; color: var(--text-3); } .mr-to .spacer { flex: 1; } .mr-from select { max-width: 220px; }
.mail-manage { grid-column: 1 / -1; padding: 13px; overflow-y: auto; display: grid; gap: 10px; align-content: start; } .mail-manage-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mail-manage-h h2 { margin: 0; font-size: 16px; }
.mail-scrim { display: none; }
@media (max-width: 1280px) { .mail-app { grid-template-columns: 210px minmax(280px, 340px) minmax(0, 1fr); } .msg-body { padding-left: 13px; } }
@media (max-width: 1000px) {
  .mail-app { grid-template-columns: minmax(0, 1fr); }
  .mail-side { position: absolute; z-index: 6; inset: 0 auto 0 0; width: min(300px, 86%); transform: translateX(-102%); transition: transform .2s; box-shadow: var(--shadow-lg); border-right: 1px solid var(--border-strong); }
  .mail-app.show-folders .mail-side { transform: none; } .mail-app.show-folders .mail-scrim { display: block; position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.35); }
  .mail-app[data-pane="list"] .mail-read, .mail-app[data-pane="read"] .mail-list { display: none; }
  .mail-list { border-right: 0; } .mail-menu, .mail-back { display: inline-flex; } .mail-thread { padding: 10px; } .ma-l { display: none; } .mail-act { padding: 0 7px; }
}
@media (min-width: 1001px) { .mail-app[data-pane] .mail-list, .mail-app[data-pane] .mail-read { display: flex; } }
@media (prefers-reduced-motion: reduce) { .mail-side { transition: none; } }

/* ---- email template editor ---- */
.seg button { display: inline-flex; align-items: center; gap: 5px; } .seg button svg { width: 12px; height: 12px; } .seg button:disabled { opacity: .55; cursor: not-allowed; }
.page-actions-inline { display: flex; gap: 6px; flex-wrap: wrap; }
.tpl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 13px; align-items: start; }
.tpl-side { display: grid; gap: 13px; position: sticky; top: 0; max-height: calc(100dvh - 56px - var(--foot-h) - 48px); overflow-y: auto; align-content: start; }
.tpl-body-wrap { display: grid; gap: 5px; } .tpl-body-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.tpl-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .tpl-tools .btn.icon { width: 26px; height: 26px; } .tb-sep { width: 1px; height: 16px; background: var(--border-strong); margin: 0 4px; }
textarea.tpl-body { width: 100%; min-height: 340px; resize: vertical; font: 13px/1.55 var(--mono); tab-size: 2; }
.tpl-fields { display: grid; gap: 8px; margin-top: 8px; max-height: 340px; overflow-y: auto; } .tf-g { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 2px 0 4px; }
.tf { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 5px 6px; border: 0; border-radius: 7px; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; } .tf:hover:not(:disabled) { background: var(--accent-soft); } .tf code { font: 12px var(--mono); color: var(--accent-text); flex: none; } .tf span { color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-warn { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: 9px; font-size: 11.5px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); } .tpl-warn[hidden] { display: none; } .tpl-warn svg { flex: none; width: 13px; height: 13px; color: var(--warn); margin-top: 2px; } .tpl-warn code { font: 12px var(--mono); margin-right: 4px; }
.pv-head { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 10px 10px 0 0; } .pv-subj { font-weight: 650; overflow-wrap: anywhere; } .pv-meta { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.tpl-pv { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .pv-body { padding: 10px; max-height: 420px; overflow: auto; } .pv-body .mail-frame { border: 0; } .tpl-plain { font-size: 12.5px; }
.pv-modal { display: grid; justify-items: center; } .pv-env { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--surface); } .pv-env.narrow { width: 375px; max-width: 100%; box-shadow: var(--shadow-md); }
.pv-env-h { display: grid; gap: 2px; padding: 10px 13px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 12px; } .pv-env-body .pv-head { border-radius: 0; background: none; border-bottom: 1px solid var(--border); } .pv-env-body .pv-body { padding: 13px; max-height: 60vh; }
.callout.ok { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 9%, var(--surface)); } .callout.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: minmax(0, 1fr); } .tpl-side { position: static; max-height: none; } }
.mr-from select { width: auto; min-width: 170px; max-width: 240px; }
@media (max-width: 1700px) { .mail-act:not(:first-child) .ma-l { display: none; } .mail-act { padding: 0 7px; } }
.hdr-icons .btn, .top-right .btn, .top-right .profile-btn { flex: none; }
@media (max-width: 1560px) { .topbar { grid-template-columns: minmax(0, 1fr) minmax(180px, 480px) minmax(0, 1fr); } .top-right .profile-btn .pb-t, .top-right .profile-btn > svg:last-child { display: none; } }
.top-left { flex: none; min-width: 30px; } .top-left .sidebar-toggle { flex: none; min-width: 30px; }
@media (min-width: 901px) { .top-left { flex: 1 1 auto; } }
@media (max-width: 640px) { .search-wrap { width: 32px; } .topbar { grid-template-columns: auto 36px minmax(0, 1fr); } }

/* ---- overlay lock + collapsed-sidebar labels ---- */
body.modal-open { overflow: hidden; }
.nav-tip { position: fixed; z-index: 120; transform: translateY(-50%); background: var(--text); color: var(--bg); padding: 5px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); opacity: 0; transition: opacity .1s; } .nav-tip.on { opacity: 1; }
.nav-tip::before { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: inherit; transform: rotate(45deg); border-radius: 2px; }

/* ---- Social & profiles cards: 3 per row on desktop, 2 on tablet, 1 on phone ---- */
.sc-grid { display: grid; gap: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1100px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
.sc-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 292px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); } .sc-card.ok { border-top: 3px solid var(--success); } .sc-card.warn { border-top: 3px solid var(--warn); }
.sc-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } .sc-id { flex: 1; min-width: 0; } .sc-id h3 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-handle { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-top .logo { flex: none; }
.sc-badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; } .sc-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); max-width: 100%; } .sc-link svg { width: 11px; height: 11px; }
.sc-detail { margin: 0; font-size: 11.5px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 2.9em; } .sc-detail.warn { color: var(--warn); }
.sc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .sc-stat { display: grid; padding: 5px 6px; border-radius: 9px; background: var(--surface-2); min-width: 0; } .sc-stat b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-stat span { font-size: 10px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-stat.warn b { color: var(--warn); } .sc-stat.bad b { color: var(--danger); }
.sc-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; min-width: 0; flex-wrap: wrap; } .sc-agent { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; color: var(--text-2); } .sc-agent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-auto { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; }
.sc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ---- Platform Apps ---- */
.pa-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pa-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); } .pa-card.off { opacity: .8; } .pa-card.skel-card { height: 220px; background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.pa-logo { flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.pa-top { display: flex; align-items: center; gap: 8px; min-width: 0; } .pa-title { flex: 1; min-width: 0; } .pa-title h3 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pa-sub { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-summary { margin: 0; color: var(--text-2); font-size: 12px; }
.pa-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; } .pa-meta div { min-width: 0; } .pa-meta dt { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .pa-meta dd { margin: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pa-meta dd.bad { color: var(--danger); }
.pa-note { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; padding: 6px 8px; border-radius: 9px; } .pa-note svg { margin-top: 2px; } .pa-note.warn { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); } .pa-note.bad { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.pa-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; border-top: 1px solid var(--border); }
.pa-choices { display: grid; gap: 5px; max-height: 220px; overflow-y: auto; } .pa-choice { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; } .pa-choice:hover:not(:disabled) { border-color: var(--accent); } .pa-choice.on { border-color: var(--accent); background: var(--accent-soft); } .pa-choice:disabled { opacity: .55; cursor: not-allowed; } .pa-choice-t { display: grid; min-width: 0; } .pa-choice-t small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-fixed { display: flex; align-items: center; gap: 10px; } .pa-guide { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; } .pa-guide summary { cursor: pointer; font-weight: 600; } .pa-guide ol, .pa-guide ul { margin: 5px 0; padding-left: 16px; display: grid; gap: 4px; }
.pa-recipes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
@media (max-width: 480px) { .pa-act-l { display: none; } }
/* schema-driven forms */
.schema-form { display: grid; gap: 11px; } .field-err { color: var(--danger); font-size: 11.5px; margin-top: 4px; } .field-err[hidden] { display: none; } [aria-invalid="true"] { border-color: var(--danger) !important; }
.secret-row { display: flex; gap: 5px; align-items: center; } .secret-row .input { flex: 1; min-width: 0; } .req-mark { color: var(--danger); } .opt-mark { color: var(--text-3); font-weight: 400; font-size: 11px; }
.check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ---- header status chips, mail menu, scrollbars ---- */
.hdr-icons { display: flex; gap: 5px; align-items: center; }
.hdr-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; text-decoration: none; flex: none; } .hdr-chip:hover { text-decoration: none; border-color: var(--accent); color: var(--text); } .hdr-chip svg { width: 13px; height: 13px; }
.hdr-chip.ok { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success); } .hdr-chip.warn { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); color: var(--warn); } .hdr-chip.bad { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); } .hdr-chip.idle { color: var(--text-2); }
.hdr-chip.ok .hc-l, .hdr-chip.warn .hc-l, .hdr-chip.bad .hc-l { color: var(--text); } .hdr-chip.pulse svg { animation: hdrPulse2 2s ease-in-out infinite; } @keyframes hdrPulse2 { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .hdr-chip.pulse svg { animation: none; } }
.hc-n { min-width: 15px; height: 15px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 15.5px; text-align: center; margin-left: 1px; } .hdr-chip.warn .hc-n { background: var(--warn); }
.hdr-chip.dry .hc-l { display: none; } @media (min-width: 1700px) { .hdr-chip.dry .hc-l { display: inline; } }
@media (max-width: 1419px) { .hdr-chip { padding: 0 6px; } .hdr-chip .hc-l { display: none; } }
@media (max-width: 640px) { .hdr-chip { height: 25px; } }
.mail-panel { width: min(430px, calc(100vw - 16px)); } .mm-item { display: flex; gap: 9px; padding: 9px 11px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; } .mm-item:hover { background: var(--surface-2); text-decoration: none; }
.mm-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: 11px; } .mm-tx { min-width: 0; flex: 1; } .mm-top { display: flex; justify-content: space-between; gap: 6px; } .mm-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-top time { color: var(--text-3); font-size: 11px; white-space: nowrap; }
.mm-subj { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-snip { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-mb { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 10.5px; margin-top: 2px; } .mm-mb svg { width: 10px; height: 10px; }
/* A container that scrolls sideways must never grow a vertical scrollbar of its own (the "up/down arrows" artefact on tab rows). */
.tabs, .tbl-scroll, .chip-bar, .doc-table-wrap, .bell-tabs, [style*="overflow-x: auto"] { overflow-y: hidden; }
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-track { background: transparent; }
.search-wrap { max-width: 360px; justify-self: center; width: 100%; }
@media (max-width: 1500px) { .topbar { grid-template-columns: minmax(0, 1fr) minmax(160px, 240px) minmax(0, 1fr); } }

/* ---- Inbox v3: action bar, message meta grid, on-demand composer ---- */
.mail-acts{display:flex;flex-wrap:wrap;gap:2px;align-items:center;min-width:0}
.mail-sep{width:1px;height:16px;background:var(--border);margin:0 4px}
.mail-act.danger:hover{color:var(--danger)}
.mail-act.starred svg{fill:currentColor;color:var(--warn,#d89614)}
@media (max-width:1180px){.mail-act .ma-l{display:none}}
.mf-n.zero{opacity:.45}
.msg-meta-wrap{margin:0 0 8px}
.msg-meta-tg{background:none;border:0;padding:0;color:var(--accent-text);font-size:11px;cursor:pointer}
.msg-meta{display:grid;gap:3px;margin:5px 0 0;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:11.5px}
.msg-meta>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px}
.msg-meta dt{color:var(--text-3);margin:0}
.msg-meta dd{margin:0;overflow-wrap:anywhere}
.mr-h{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.mr-grid{display:grid;grid-template-columns:60px minmax(0,1fr);gap:5px 6px;align-items:center;margin-bottom:6px}
.mr-grid label{color:var(--text-3);font-size:11.5px}
.mail-compose-box{border:1px solid var(--border);border-radius:10px;padding:10px;margin:10px 0}
@media print{.mail-bar,.mail-side,.mail-list,.mail-compose-box{display:none!important}}

/* ---- Settings group list ---- */
.settings-layout{grid-template-columns:270px minmax(0,1fr)}
.settings-nav{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;gap:2px;top:8px}
.settings-nav .sn-h{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:5px 8px 4px}
.settings-nav button.sn-i{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;white-space:normal}
.sn-ico{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2)}
.sn-ico svg{width:15px;height:15px}
.sn-t{display:grid;min-width:0;line-height:1.25}.sn-t b{font-weight:600;color:var(--text)}.sn-t small{color:var(--text-3);font-size:11px;font-weight:400}
.settings-nav button.sn-i.on{background:var(--accent-soft,var(--surface-2));box-shadow:inset 0 0 0 1px var(--accent)}
.settings-nav button.sn-i.on .sn-ico{background:var(--accent);color:#fff}
.sn-dot{margin-left:auto;min-width:16px;height:16px;border-radius:9px;background:var(--warn,#d89614);color:#fff;font-size:10px;display:grid;place-items:center;padding:0 5px}
@media (max-width:1000px){.settings-layout{grid-template-columns:1fr}.settings-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;position:static}.settings-nav .sn-h{display:none}.settings-nav button.sn-i{width:auto;flex:none}.sn-t small{display:none}}

.mail-btn{position:relative}.mail-btn .mail-badge{position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;line-height:13px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;text-align:center;border:2px solid var(--bg);box-sizing:border-box}
.topbar > .mail-btn{flex:none;min-width:30px}.mail-btn svg{flex:none}
/* ---- Go-live checklist ---- */
.dash-grid > .w12 { grid-column: span 12; }
.gl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gl-bar { flex: 1 1 200px; height: 8px; border-radius: 4px; background: var(--surface-3, var(--surface-2)); overflow: hidden; } .gl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.gl-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.gl-g { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; } .gl-g.done { opacity: .75; }
.gl-gh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .gl-gc { font-size: 11px; color: var(--text-3); } .gl-gc.ok { color: var(--success); }
.gl-i { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); } .gl-gh + .gl-i { border-top: 0; }
.gl-c { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3, var(--surface-2)); color: var(--text-3); margin-top: 1px; } .gl-i.ok .gl-c { background: var(--success-soft); color: var(--success); } .gl-c svg { width: 11px; height: 11px; }
.gl-t { flex: 1; min-width: 0; display: grid; gap: 2px; } .gl-t small { color: var(--text-3); font-size: 11px; line-height: 1.35; } .gl-i.ok .gl-l { color: var(--text-3); text-decoration: line-through; }
.gl-tag { margin-left: 5px; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: var(--surface-2); color: var(--text-3); white-space: nowrap; } .gl-tag.req { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.gl-i .btn { flex: none; } .gl-none { padding: 5px 0; font-size: 11.5px; }
/* ---- Lead finder ---- */
.fd-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fd-src { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; } .fd-src > div { flex: 1; min-width: 0; display: grid; } .fd-src small { color: var(--text-3); font-size: 11px; }
.fd-si { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); } .fd-src.ok .fd-si { background: var(--success-soft); color: var(--success); } .fd-si svg { width: 14px; height: 14px; }
.fd-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 11px; }
.fd-card { padding: 11px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fd-ch { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .fd-ch > div { display: grid; } .fd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-ch small { color: var(--text-3); font-size: 11px; }
.fd-steps { display: flex; flex-wrap: wrap; gap: 5px; } .fd-step { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); } .fd-step.off { opacity: .5; text-decoration: line-through; } .fd-step svg { width: 11px; height: 11px; }
.fd-q { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .fd-nums div { display: grid; text-align: center; padding: 5px 0; border-radius: 8px; background: var(--surface-2); } .fd-nums small { color: var(--text-3); font-size: 10px; }
.fd-err { font-size: 11px; color: var(--danger); } .fd-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; } .fd-foot .faint { margin-left: auto; font-size: 11px; }
.fd-title { margin: 0; font-size: 17.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .fd-stat { padding: 8px 10px; display: grid; } .fd-stat small { color: var(--text-3); font-size: 11px; } .fd-stat b { font-size: 17.5px; }
@media (max-width: 900px) { .fd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-rbar { gap: 6px; align-items: center; margin-bottom: 8px; } .fd-rbar .chip-bar { display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; max-width: 100%; } .fd-cnt { margin-left: 5px; font-size: 10px; opacity: .8; }
.fd-org { display: grid; min-width: 160px; } .fd-org a, .fd-org small { font-size: 11px; } .fd-srcs { display: flex; gap: 4px; flex-wrap: wrap; }
.fd-mini { width: 19px; height: 19px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: 10px; font-weight: 700; text-decoration: none; } .fd-mini svg { width: 11px; height: 11px; } .fd-mini.soc { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.fd-comp { width: 70px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .fd-comp i { display: block; height: 100%; background: var(--success); }
.fd-log { display: grid; gap: 2px; font-size: 12px; } .fd-li { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); } .fd-li time { color: var(--text-3); } .fd-ls { color: var(--text-3); font-family: var(--mono, monospace); font-size: 11px; } .fd-li.warn span:last-child { color: var(--warn-text, #b45309); } .fd-li.error span:last-child { color: var(--danger); }
@media (max-width: 640px) { .fd-li { grid-template-columns: 1fr; gap: 0; } }
.fd-wf { margin: 0; padding-left: 14px; display: grid; gap: 6px; } .fd-wf li { display: grid; gap: 2px; } .fd-wf li.off { opacity: .5; }
.fd-edit-wf { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .fd-ew { border: 1px solid var(--border); border-radius: 10px; padding: 8px; } .fd-ew.off { opacity: .7; }
.fd-ewh { display: flex; align-items: flex-start; gap: 8px; } .fd-ewh small { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; } .fd-mv { display: flex; gap: 2px; flex: none; }
.fd-ewo { display: flex; flex-wrap: wrap; gap: 8px 13px; margin-top: 6px; padding-left: 38px; } .fd-opt { display: grid; gap: 4px; font-size: 11.5px; color: var(--text-2); min-width: 160px; } .fd-opt .input, .fd-opt .select { max-width: 220px; }
@media (max-width: 640px) { .fd-ewo { padding-left: 0; } }
[hidden] { display: none !important; }

/* ---- agent diagnostics ---- */
.agent-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 11.5px; }
.agent-issues li { display: flex; gap: 5px; align-items: flex-start; } .agent-issues li svg { flex: none; width: 12px; height: 12px; margin-top: 2px; }
.agent-issues li a { color: inherit; text-decoration: none; } .agent-issues li a:hover { text-decoration: underline; }
.agent-issues li.bad { color: var(--danger); } .agent-issues li.warn { color: var(--warn-text, #b45309); } .agent-issues li.info { color: var(--text-3); }
.agent-ok { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--success); } .agent-ok svg { width: 12px; height: 12px; }
.fd-cov { display: grid; gap: 4px; } .fd-cov small { color: var(--text-3); font-size: 10.5px; }

/* ---- agent memory ---- */
.mem-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; } .mem-row:last-child { border-bottom: 0; }
.mem-row small { display: block; font-size: 11px; } .mem-pre { white-space: pre-wrap; font-size: 11px; margin: 0; max-height: 280px; overflow: auto; }
.agent-next { display: flex; gap: 5px; align-items: center; text-align: left; border: 1px dashed var(--border); background: var(--surface-2); border-radius: 8px; padding: 5px 6px; font-size: 11.5px; color: var(--text-2); cursor: pointer; min-height: 28px; flex-wrap: wrap; }
.agent-next svg { width: 12px; height: 12px; flex: none; }
.agent-next > span { flex: 1; min-width: 0; } .agent-next > small { flex-basis: 100%; }
/* Settings → Cron jobs */
.cron-cmd { display: grid; gap: 4px; min-width: 0; } .cron-cmd > .row { flex-wrap: nowrap; min-width: 0; } .cron-cmd > .row > .btn { flex: none; } .cron-cmd code { flex: 1 1 0; width: 0; min-width: 0; display: block; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; overflow-x: auto; white-space: nowrap; }
.cron-steps { margin: 0; padding-left: 16px; display: grid; gap: 4px; } .cron-steps code { background: var(--surface-2); padding: 1px 5px; border-radius: 6px; }
/* Data scraper */
.sc-fields { display: grid; gap: 5px; } .sc-fh, .sc-f { display: grid; grid-template-columns: 1fr 1.6fr .9fr 1fr 1.1fr 32px; gap: 5px; align-items: center; } .sc-fh span { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 760px) { .sc-fh { display: none; } .sc-f { grid-template-columns: 1fr 1fr; padding: 6px; border: 1px solid var(--border); border-radius: 10px; } }
.sc-sug { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .sc-run summary { cursor: pointer; padding: 10px 11px; } .sc-run .fd-log { padding: 0 11px 10px; }
.sc-tbl td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Location picker (geography data) */
.geo-picker { display: grid; gap: 8px; } .geo-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.geo-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; max-width: 100%; } .geo-chip > span { overflow: hidden; text-overflow: ellipsis; } .geo-chip svg { width: 12px; height: 12px; flex: none; }
.geo-form { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 10px; } .geo-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; } .geo-f { display: grid; gap: 3px; min-width: 130px; flex: 1 1 140px; } .geo-f > span { font-size: 11px; color: var(--text-3); }
.geo-clist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 8px; max-height: 220px; overflow: auto; padding: 4px 0; } .geo-c { display: flex; gap: 5px; align-items: center; font-size: 12px; } .geo-c small { margin-left: auto; }
.geo-count { font-size: 11.5px; }
.sc-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 900px) { .sc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Live chat operations */
.lc-ops { display: grid; gap: 10px; } .lc-top { display: grid; gap: 8px; }
.lc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .lc-stat { display: flex; gap: 8px; align-items: center; padding: 8px 10px; text-align: left; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.lc-stat b { font-size: 17.5px; display: block; line-height: 1.1; } .lc-stat small { color: var(--text-3); font-size: 11px; } .lc-stat.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .lc-stat.hot .lc-si { background: var(--warn-soft); color: var(--warn); }
.lc-si { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; } .lc-si svg { width: 14px; height: 14px; }
.lc-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; }
.lc-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 10px; height: calc(100vh - 290px); min-height: 480px; }
.lc-list, .lc-conv { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lc-side { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.lc-lh { padding: 8px; display: grid; gap: 5px; border-bottom: 1px solid var(--border); } .lc-items { overflow-y: auto; flex: 1; }
.lc-item { display: grid; gap: 4px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.lc-item:hover { background: var(--surface-2); } .lc-item.on { background: var(--accent-soft); } .lc-item.unread .lc-ih b::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 5px; vertical-align: middle; }
.lc-ih { display: flex; justify-content: space-between; gap: 6px; } .lc-ih b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-ip { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-it { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lc-ch { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .lc-reason { color: var(--warn); }
.lc-msgs { flex: 1; overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); min-height: 0; }
.lc-msg { max-width: 78%; display: grid; gap: 3px; } .lc-msg.us { align-self: flex-end; justify-items: end; } .lc-msg.note { align-self: center; max-width: 90%; }
.lc-mb { padding: 7px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.lc-msg.us .lc-mb { background: var(--accent); color: #fff; border-color: var(--accent); } .lc-msg.note .lc-mb { background: #fef9c3; color: #713f12; border-color: #fde68a; }
.lc-sys { align-self: center; font-size: 11.5px; color: var(--text-3); text-align: center; max-width: 90%; }
.lc-cards { display: grid; gap: 5px; margin-top: 5px; } .lc-cardmini { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 6px; font-size: 11.5px; text-align: left; } .lc-cardmini small { text-transform: uppercase; font-size: 10px; }
.lc-thumb { max-width: 220px; max-height: 160px; border-radius: 8px; display: block; margin-top: 4px; }
.lc-typ { min-height: 18px; padding: 0 11px; font-size: 11.5px; }
.lc-comp { border-top: 1px solid var(--border); padding: 8px; display: grid; gap: 6px; } .lc-comp textarea.lc-notemode { background: #fefce8; border-color: #fde68a; }
.lc-canned { display: grid; gap: 4px; } .lc-cn { display: grid; text-align: left; gap: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 5px 8px; cursor: pointer; font: inherit; color: var(--text); } .lc-cn:hover { background: var(--surface-2); }
.lc-f { display: grid; gap: 3px; } .lc-f span { font-size: 11px; color: var(--text-3); } .lc-kv { grid-template-columns: 90px 1fr; font-size: 12px; } .lc-kv dd a { word-break: break-all; }
.lc-past { text-align: left; border: 0; background: transparent; padding: 4px 0; cursor: pointer; color: var(--text); font: inherit; font-size: 12px; }
.lc-back { display: none; }
@media (max-width: 1280px) { .lc-grid { grid-template-columns: 280px minmax(0, 1fr); } .lc-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; } }
@media (max-width: 860px) { .lc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lc-grid { grid-template-columns: minmax(0, 1fr); height: auto; } .lc-list { max-height: 60vh; } .lc-conv { height: 75vh; } .lc-grid.has-chat .lc-list { display: none; } .lc-grid:not(.has-chat) .lc-conv, .lc-grid:not(.has-chat) .lc-side { display: none; } .lc-back { display: inline-flex; } .lc-msg { max-width: 90%; } }
/* Live chat settings */
.lcs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 10px; align-items: start; } .lcs-side { position: sticky; top: 12px; }
@media (max-width: 1100px) { .lcs-grid { grid-template-columns: minmax(0, 1fr); } .lcs-side { position: static; } }
.lcs-code { flex: 1 1 0; width: 0; min-width: 0; display: block; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; overflow-x: auto; white-space: pre; }
.lcs-pre { background: var(--surface-2); padding: 8px; border-radius: 8px; font-size: 11.5px; overflow-x: auto; }
.lcs-hours { display: grid; gap: 5px; } .lcs-day { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .lcs-day .input { width: 130px; }
.lcs-prev { position: relative; padding-bottom: 56px; } .lcs-win { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #fff; color: #111827; box-shadow: var(--shadow); font-size: 12px; }
.lcs-wh { background: var(--c); color: var(--t); padding: 10px; display: flex; gap: 8px; align-items: center; } .lcs-wh small { display: block; opacity: .85; font-size: 10.5px; } .lcs-av { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-weight: 700; }
.lcs-wb { padding: 10px; display: grid; gap: 6px; background: #f8fafc; } .lcs-wb > div { padding: 6px 8px; border-radius: 12px; max-width: 85%; } .lcs-sys { color: #6b7280; font-size: 11px; text-align: center; max-width: 100% !important; justify-self: center; }
.lcs-me { background: var(--c); color: var(--t); justify-self: end; } .lcs-them { background: #fff; border: 1px solid #e5e7eb; } .lcs-pills { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 !important; } .lcs-pills span { border: 1px solid var(--c); color: var(--c); border-radius: 99px; padding: 3px 8px; font-size: 11px; background: #fff; }
.lcs-wf { border-top: 1px solid #e5e7eb; padding: 8px 10px; color: #9ca3af; display: flex; justify-content: space-between; } .lcs-wf i { width: 23px; height: 23px; border-radius: 8px; background: var(--c); }
.lcs-launch { position: absolute; bottom: 8px; display: flex; gap: 5px; align-items: center; border-radius: 99px; padding: 8px 13px; font-weight: 600; font-size: 12px; } .lcs-launch.right { right: 8px; } .lcs-launch.left { left: 8px; } .lcs-launch svg { width: 16px; height: 16px; }
.lcs-test-log { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; padding: 8px; background: var(--surface-2); border-radius: 10px; }
.lcs-tm { padding: 6px 10px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border); font-size: 13px; } .lcs-tm.me { justify-self: end; background: var(--accent); color: #fff; border-color: var(--accent); } .lcs-tm.err { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.lcs-tcard { margin-top: 5px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 8px; font-size: 11.5px; background: var(--surface-2); }
/* Campaign sequence builder */
.seq { display: flex; flex-direction: column; }
.seq-node { display: grid; grid-template-columns: 34px 1fr; gap: 8px; }
.seq-rail { display: flex; flex-direction: column; align-items: center; }
.seq-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; margin-top: 8px; }
.seq-node[data-type="wait"] .seq-dot { background: var(--surface-2, var(--border)); color: var(--text-2); }
.seq-line { flex: 1; width: 2px; background: var(--border); min-height: 11px; }
.seq-card { margin-bottom: 8px; min-width: 0; }
.seq-node.open .seq-card { border-color: var(--accent); }
.seq-palette { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-top: 5px; border-top: 1px dashed var(--border); }
.tpl-card .card-b { height: 100%; }
@media (max-width: 640px) { .seq-node { grid-template-columns: 26px 1fr; gap: 5px; } .seq-dot { width: 21px; height: 21px; } }
/* Agent Control Hub */
.ah { display: grid; grid-template-columns: 270px minmax(0, 1fr) 300px; gap: 10px; height: calc(100vh - 200px); min-height: 520px; }
.ah-mtabs { display: none; }
.ah-agents, .ah-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ah-sh { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); padding: 6px 5px 4px; }
.ah-agent { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 9px; cursor: pointer; width: 100%; }
.ah-agent:hover { background: var(--surface-2, var(--bg)); } .ah-agent.on { background: var(--accent-soft); }
.ah-agent:focus-visible { outline: 2px solid var(--accent); }
.ah-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex: none; }
.ah-agent.admin .ah-av { background: var(--accent); color: #fff; }
.ah-an { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ah-an small { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-pill { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: var(--surface-2, var(--bg)); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.ah-pill.info { background: #e0edff; color: #1d4ed8; border-color: #bfd5ff; } .ah-pill.danger { background: #fde4e4; color: #b42318; border-color: #f8c4c4; } .ah-pill.warn { background: #fdf0d5; color: #9a5b00; border-color: #f4d9a0; }
.ah-pill.info::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; animation: ah-pulse 1.2s infinite; }
@keyframes ah-pulse { 50% { opacity: .25; } }
.ah-main { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ah-mh { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-bottom: 1px solid var(--border); }
.ah-feed { flex: 1; overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ah-feed > * { flex: none; }
.ah-msg { max-width: 82%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); overflow-wrap: anywhere; }
.ah-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-color: var(--accent); white-space: pre-wrap; }
.ah-msg.err { border-color: #f3b4b4; background: #fff5f5; }
.ah-meta { font-size: 10px; opacity: .7; margin-top: 4px; }
.ah-md p { margin: 0 0 5px; } .ah-md p:last-child { margin: 0; } .ah-md ul, .ah-md ol { margin: 4px 0 5px 14px; padding: 0; } .ah-md h3, .ah-md h4, .ah-md h5 { margin: 5px 0; }
.ah-md code, .ah-card code { background: var(--surface-2, rgba(127,127,127,.12)); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.ah-code { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin: 5px 0; background: #0f172a; color: #e2e8f0; }
.ah-code-h { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; background: #1e293b; color: #94a3b8; font-size: 10px; } .ah-code-h .btn { color: #cbd5e1; }
.ah-code pre { margin: 0; padding: 8px; overflow-x: auto; font-size: 11.5px; line-height: 1.5; } .ah-code code { background: none; padding: 0; color: inherit; }
.tk-k { color: #93c5fd; } .tk-s { color: #86efac; } .tk-n { color: #fca5a5; } .tk-b, .tk-w { color: #c4b5fd; } .tk-c { color: #64748b; font-style: italic; }
.ah-table { overflow-x: auto; margin: 5px 0; } .ah-table .table { font-size: 12px; }
.ah-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); max-width: 92%; min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.ah-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2, var(--bg)); }
.ah-card-b { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ah-action.ok { border-left: 4px solid #16a34a; } .ah-action.bad { border-left: 4px solid #dc2626; }
.ah-approval { border: 2px solid #f59e0b; } .ah-approval.approved { border-color: #16a34a; } .ah-approval.rejected, .ah-approval.expired { border-color: var(--border); opacity: .85; }
.ah-ap-title { font-weight: 700; font-size: 14px; }
.ah-scope th { text-align: left; width: 45%; font-weight: 500; color: var(--text-2); }
.ah-facts { display: flex; flex-wrap: wrap; gap: 11px; font-size: 11px; color: var(--text-2); } .ah-facts .i { width: 11px; height: 11px; vertical-align: -2px; }
.ah-records { font-size: 11.5px; }
.ah-compose { border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ah-input { flex: 1; resize: vertical; min-height: 39px; max-height: 200px; }
.ah-chips { display: flex; flex-wrap: wrap; gap: 5px; } .ah-chips .chip { border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 3px 8px; font-size: 11px; cursor: pointer; color: inherit; }
.ah-typing { display: flex; gap: 4px; } .ah-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); animation: ah-pulse 1s infinite; } .ah-typing span:nth-child(2) { animation-delay: .2s; } .ah-typing span:nth-child(3) { animation-delay: .4s; }
.ah-ph { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 8px 0 4px; } .ah-ph:first-child { margin-top: 0; }
.ah-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .ah-kpi { border: 1px solid var(--border); border-radius: 9px; padding: 6px 7px; display: flex; flex-direction: column; } .ah-kpi small { color: var(--text-2); font-size: 10px; } .ah-kpi b { font-size: 14px; }
.ah-q > div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.ah-err { border-left: 3px solid #f59e0b; padding: 4px 6px; font-size: 11.5px; background: var(--bg); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; } .ah-err.error, .ah-err.ai { border-left-color: #dc2626; } .ah-err small { color: var(--text-2); }
.ah-tools { display: flex; flex-direction: column; gap: 3px; margin-bottom: 5px; } .ah-tools > small { color: var(--text-2); font-size: 10px; text-transform: uppercase; }
.ah-tool, .ah-pend { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 4px 5px; border-radius: 6px; cursor: pointer; font-size: 11.5px; } .ah-tool:hover, .ah-pend:hover { background: var(--accent-soft); }
.ah-pend { justify-content: flex-start; color: #9a5b00; }
[data-theme="dark"] .ah-msg.err { background: #3b1414; border-color: #7f1d1d; }
[data-theme="dark"] .ah-pill.info { background: #1e3a5f; color: #bfdbfe; border-color: #1e3a5f; } [data-theme="dark"] .ah-pill.danger { background: #4c1d1d; color: #fecaca; border-color: #4c1d1d; } [data-theme="dark"] .ah-pill.warn { background: #4a3510; color: #fde68a; border-color: #4a3510; }
@media (max-width: 1280px) { .ah { grid-template-columns: 240px minmax(0, 1fr); } .ah-panel { display: none; } }
@media (max-width: 860px) {
  .ah { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ah-mtabs { display: flex; gap: 5px; } .ah-mtabs .btn { flex: 1; }
  .ah[data-view="agents"] .ah-mtabs [data-v="agents"], .ah[data-view="chat"] .ah-mtabs [data-v="chat"], .ah[data-view="panel"] .ah-mtabs [data-v="panel"] { background: var(--accent); color: #fff; border-color: var(--accent); }
  .ah-agents, .ah-main, .ah-panel { display: none; } .ah[data-view="agents"] .ah-agents { display: flex; max-height: 75vh; } .ah[data-view="chat"] .ah-main { display: flex; height: 78vh; } .ah[data-view="panel"] .ah-panel { display: flex; }
  .ah-msg, .ah-card { max-width: 100%; }
}
/* Lead emails & phones */
.ct-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); }
.ct-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; } .ct-row + .ct-row { border-top: 1px solid var(--border); }
.ct-row > .i { flex: none; color: var(--text-2); width: 14px; height: 14px; }
.ct-v { flex: 1; min-width: 0; } .ct-v > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .ct-v b { font-weight: 550; overflow-wrap: anywhere; } .ct-v .faint { font-size: 11px; }
/* Duplicate review */
.dup-table td { vertical-align: top; font-size: 12px; } .dup-table tr.keep td { background: var(--accent-soft); } .dup-table .link { all: unset; cursor: pointer; font-weight: 600; color: var(--accent); } .dup-table .link:hover { text-decoration: underline; }
.dup-card .card-h { flex-wrap: wrap; gap: 6px; }
/* UI review fixes */
main.content:focus, main.content:focus-visible { outline: none; } /* focus moves here after navigation for screen readers; no ring around the whole page */
.kpi-row { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.sched-row .times { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sched-row .times .input { width: auto; flex: 1 1 130px; max-width: 170px; }
.cal14 > div b { white-space: nowrap; }
.kpi2 .kl { min-width: 0; line-height: 1.25; } .kpi2 .kl > span:last-child { white-space: normal; overflow-wrap: anywhere; } .kpi2 .kd { flex-wrap: wrap; row-gap: 2px; } .kpi2 .kd > * { min-width: 0; }
@media (min-width: 1100px) and (max-width: 1500px) { .kpi2 { padding: 10px 10px 8px; } .kpi2 .kv { font-size: 21px; } }
/* Live chat settings preview: follows the widget styling */
.lcs-prev .lcs-win { border-radius: var(--r, 14px); font-family: var(--font, inherit); }
.lcs-prev .lcs-wh { background: var(--hd, var(--c)); }
.lcs-prev .lcs-wb { background: var(--bg, #f8fafc); }
.lcs-prev .lcs-them { background: var(--ab, #fff); color: var(--at, #111827); }
.lcs-prev .lcs-me { background: var(--vb, var(--c)); }
.lcs-row { display: flex; gap: 6px; align-items: flex-end; padding: 0 !important; max-width: 92% !important; } .lcs-row .lcs-them { max-width: 100%; padding: 6px 8px; border-radius: 12px; }
.lcs-av, .lcs-mav { overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .lcs-av img, .lcs-mav img { width: 100%; height: 100%; object-fit: cover; }
.lcs-mav { width: 21px; height: 21px; border-radius: 50%; flex: none; background: var(--c); color: var(--t); font-size: 10px; }
.lcs-av.big { width: 52px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 14px; }
.lcs-launch { font-family: var(--font, inherit); }
.avatar.xl { width: 72px; height: 72px; font-size: 19.5px; background: var(--accent); color: #fff; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* data tables: row selection and the bulk-action bar */
.tbl th.chk, .tbl td.chk { width: 35px; padding-right: 0; } .tbl .tbl-chk { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); vertical-align: middle; }
.tbl td.chk { cursor: default; } .tbl tr.selected td { background: var(--accent-soft); }
.tbl-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 11px; background: var(--accent-soft); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; }
.tbl-sel-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--accent-text); font-size: 12.5px; } .tbl-sel-info .link { font-size: 12px; }
.tbl-sel-actions { display: flex; gap: 5px; flex-wrap: wrap; } .tbl-sel-actions .btn.danger { color: var(--danger); }
@media (max-width: 640px) { .tbl-sel { padding: 6px 8px; } .tbl-sel-actions { width: 100%; } .tbl-sel-actions .btn { flex: 1 1 auto; justify-content: center; } }
/* leads: more filters */
.adv-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: -5px 0 10px; } .adv-chips:empty { display: none; }
.adv-chips .chip { cursor: default; } .adv-chips .link { font-size: 11.5px; }
.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; } .adv-grid h4 { grid-column: 1 / -1; margin: 5px 0 -4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.adv-range { display: flex; gap: 6px; align-items: center; } .adv-range .input { min-width: 0; } .adv-checks { display: flex; flex-wrap: wrap; gap: 5px 11px; } .adv-checks label { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; cursor: pointer; }
@media (max-width: 640px) { .adv-grid { grid-template-columns: minmax(0, 1fr); } }
.btn .count { margin-left: 2px; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; display: inline-grid; place-items: center; }
.tbl-sel button.link, .adv-chips button.link { all: unset; cursor: pointer; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; font-size: 12px; } .tbl-sel button.link:focus-visible, .adv-chips button.link:focus-visible { outline: 2px solid var(--accent); border-radius: 3px; }
/* data scraper — collections */
.cl-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .cl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; } .cl-bar.big { height: 9px; }
.cl-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .cl-steps li { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 99px; background: var(--surface-2); color: var(--text-3); font-size: 12px; }
.cl-steps li b { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border-strong); font-size: 11px; } .cl-steps li.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .cl-steps li.on b, .cl-steps li.done b { background: var(--accent); color: #fff; border-color: var(--accent); }
.cl-in .dropzone { display: grid; place-items: center; gap: 5px; text-align: center; padding: 14px; min-height: 140px; }
.cl-prev { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; } .cl-prev table { min-width: 100%; } .cl-prev th.on, .cl-prev td.on { background: var(--accent-soft); }
.cl-probs { display: grid; gap: 4px; padding: 6px 0; font-size: 12px; max-height: 220px; overflow-y: auto; }
.cl-fields { display: grid; gap: 5px; } .cl-fh, .cl-f { display: grid; grid-template-columns: minmax(120px, 1.1fr) 104px 70px minmax(140px, 1.6fr) 130px 32px; gap: 6px; align-items: center; } .cl-fh { font-size: 11px; color: var(--text-3); font-weight: 600; } .cl-f > * { min-width: 0; }
@media (max-width: 760px) { .cl-fh { display: none; } .cl-f { grid-template-columns: 1fr 1fr; padding: 6px; border: 1px solid var(--border); border-radius: 10px; } }
.cl-q summary { cursor: pointer; font-weight: 600; } .cl-site .card-h { flex-wrap: wrap; gap: 5px; } .cl-site .card-h b { word-break: break-all; } .cl-site table.mini th { text-align: left; width: 34%; color: var(--text-2); font-weight: 600; }
.cl-tbl td { vertical-align: top; } .cl-rf { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--border); } .cl-rf a { word-break: break-all; }
.cl-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 5px 10px; }
.cl-counts .badge { font-size: 11.5px; }

/* ---------- Tasks ---------- */
.tk-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tk-kpi { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; color: var(--text-2); }
.tk-kpi:hover { border-color: var(--accent); } .tk-kpi.static { cursor: default; } .tk-kpi.static:hover { border-color: var(--border); }
.tk-kpi b { font-size: 18px; color: var(--text); } .tk-kpi .ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.tk-kpi.danger .ico { background: var(--danger-soft); color: var(--danger); } .tk-kpi.warn .ico { background: var(--warn-soft); color: var(--warn); }
.tk-bar { display: grid; gap: 8px; } .tk-bar-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tk-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-list { overflow: hidden; }
.tk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 170px 190px 100px 34px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); }
.tk-row.head { border-top: 0; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; background: var(--surface-2); }
.tk-row.sel { background: var(--accent-soft); } .tk-row:not(.head):hover { background: var(--surface-2); }
.tk-main { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: grid; gap: 2px; min-width: 0; }
.tk-title { display: flex; align-items: center; gap: 7px; min-width: 0; } .tk-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tk-sub { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-cm { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; } .tk-cm svg { width: 11px; height: 11px; }
.tk-pri { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-3); } .tk-pri.urgent { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .tk-pri.high { background: var(--warn); } .tk-pri.normal { background: var(--info); } .tk-pri.low { background: var(--border-strong); }
.tk-prog { display: flex; align-items: center; gap: 8px; font-size: 11px; } .tk-prog .bar { width: 120px; height: 4px; }
.tk-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; } .tk-who > span:not(.avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-who svg { width: 13px; height: 13px; } .tk-av { width: 22px; height: 22px; font-size: 10px; } .tk-av.agent { background: var(--surface-3); color: var(--text-2); } .tk-av svg { width: 12px; height: 12px; }
.tk-who .live-dot { background: var(--success); width: 7px; height: 7px; }
.tk-act { display: flex; justify-content: flex-end; }
.tk-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 10px; overflow-x: auto; align-items: start; }
.tk-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; display: grid; gap: 8px; min-height: 140px; align-content: start; }
.tk-col.over { border-color: var(--accent); background: var(--accent-soft); }
.tk-col-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.tk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; cursor: pointer; box-shadow: var(--shadow-sm); } .tk-card:hover { border-color: var(--accent); }
.tk-card[draggable="true"] { cursor: grab; } .tk-none { text-align: center; padding: 18px 0; font-size: 12px; }
.tk-ck { display: grid; gap: 4px; } .tk-ck-i { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .tk-ck-i > span:first-of-type { flex: 1; } .tk-ck-i.done > span:first-of-type { text-decoration: line-through; color: var(--text-3); }
.tk-tl { display: grid; gap: 10px; margin-top: 4px; } .tk-tl-i { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.tk-tl-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); } .tk-tl-ic svg { width: 13px; height: 13px; }
.tk-tl-i.agent .tk-tl-ic, .tk-tl-i.action .tk-tl-ic { background: var(--accent-soft); color: var(--accent-text); } .tk-tl-i.report .tk-tl-ic { background: var(--success-soft); color: var(--success); } .tk-tl-i.deadline .tk-tl-ic { background: var(--warn-soft); color: var(--warn); }
.tk-tl-m { white-space: pre-wrap; color: var(--text-2); margin-top: 1px; }
.tk-agent { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
@media (max-width: 1100px) { .tk-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tk-row { grid-template-columns: 22px minmax(0, 1fr) 150px 100px 34px; } .tk-row > :nth-child(4) { display: none; } }
@media (max-width: 700px) { .tk-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tk-row { grid-template-columns: 22px minmax(0, 1fr) 34px; } .tk-row > :nth-child(3), .tk-row > :nth-child(5) { display: none; } .tk-board { grid-template-columns: repeat(4, 240px); } }

/* ---------- Reminders ---------- */
.rm-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 170px auto 34px; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--border); } .rm-row:first-child { border-top: 0; }
.rm-row.off { opacity: .65; } .rm-row:hover { background: var(--surface-2); }
.rm-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); } .rm-ic.soon { background: color-mix(in srgb, #db2777 14%, var(--surface)); color: #db2777; }
.rm-when { font-size: 12px; } .rm-days { display: flex; gap: 4px; flex-wrap: wrap; } .rm-ch { display: grid; gap: 6px; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.rm-prev { padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12px; } .rm-prev:empty { display: none; }
@media (max-width: 700px) { .rm-row { grid-template-columns: 30px minmax(0, 1fr) 34px; } .rm-row > :nth-child(3), .rm-row > :nth-child(4) { display: none; } }

/* ---------- Calendar ---------- */
.cal { display: grid; gap: 10px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-nav, .cal-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cal-title { font-size: 17px; margin-left: 6px; }
.cal-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: start; }
.cal-layers { display: grid; gap: 4px; position: sticky; top: 0; }
.cal-layer { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-3); text-align: left; font-size: 12.5px; }
.cal-layer .sw { width: 12px; height: 12px; border-radius: 4px; border: 2px solid var(--c); flex: none; } .cal-layer.on { color: var(--text); } .cal-layer.on .sw { background: var(--c); }
.cal-layer:hover { background: var(--surface-2); } .cal-layer.mine { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 10px; color: var(--text-2); }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); gap: 1px; }
.cal-dow { background: var(--surface-2); padding: 6px 8px; font-size: 11px; color: var(--text-3); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.cal-day { background: var(--surface); min-height: 104px; padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: default; min-width: 0; }
.cal-day.other { background: var(--surface-2); } .cal-day.other .cal-dn { color: var(--text-3); }
.cal-dn { align-self: flex-start; border: 0; background: none; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 99px; cursor: pointer; color: var(--text-2); }
.cal-dn:hover { background: var(--surface-3); } .cal-day.today .cal-dn { background: var(--accent); color: #fff; }
.cal-ev { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; border: 0; text-align: left; font-size: 11.5px; padding: 2px 6px; border-radius: 5px; cursor: pointer; color: var(--text);
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-left: 3px solid var(--c); }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); } .cal-ev .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-ev .tm { color: var(--text-2); font-size: 10.5px; flex: none; }
.cal-ev svg { width: 11px; height: 11px; flex: none; } .cal-ev.allday { background: var(--c); color: #fff; border-left-color: var(--c); } .cal-ev.allday .tm { color: #fff; }
.cal-ev.done .tt { text-decoration: line-through; color: var(--text-3); } .cal-ev.overdue { --c: var(--danger); }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-more { border: 0; background: none; color: var(--text-2); font-size: 11px; text-align: left; padding: 1px 6px; cursor: pointer; } .cal-more:hover { color: var(--accent-text); }
.cal-week { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cal-wh { display: grid; grid-template-columns: 54px repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.cal-wd { border: 0; background: none; padding: 6px; display: grid; justify-items: center; cursor: pointer; color: var(--text-2); font-size: 11px; border-left: 1px solid var(--border); } .cal-wd b { font-size: 17px; color: var(--text); }
.cal-wd.today b { color: var(--accent-text); }
.cal-wh.ad > div { border-left: 1px solid var(--border); padding: 3px; display: grid; gap: 2px; align-content: start; min-height: 26px; } .cal-wh.ad > .cal-gutter-l { border-left: 0; font-size: 10px; text-align: right; padding: 6px 6px 0 0; }
.cal-scroll { height: min(64vh, 680px); overflow-y: auto; }
.cal-grid { display: grid; grid-template-columns: 54px repeat(var(--n), minmax(0, 1fr)); position: relative; height: calc(24 * 40px); }
.cal-gutter { position: relative; } .cal-hl { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10px; color: var(--text-3); white-space: nowrap; }
.cal-col { position: relative; border-left: 1px solid var(--border); cursor: cell; } .cal-col.today { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cal-hr { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; } .cal-hr:first-child { border-top: 0; }
.cal-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 3; pointer-events: none; } .cal-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.cal-ev.timed { position: absolute; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; padding: 2px 5px; z-index: 2; box-shadow: var(--shadow-sm); } .cal-ev.timed .tt { white-space: normal; font-weight: 550; }
.cal-ev.timed svg { display: none; } .cal-ev.timed.short { flex-direction: row; align-items: center; gap: 4px; } .cal-ev.timed.short .tt { white-space: nowrap; }
.cal-agenda { overflow: hidden; } .cal-ag-day { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); } .cal-ag-day:first-child { border-top: 0; }
.cal-ag-d { display: grid; align-content: start; color: var(--text-2); font-size: 11.5px; } .cal-ag-d b { font-size: 20px; color: var(--text); } .cal-ag-day.today .cal-ag-d b { color: var(--accent-text); }
.cal-ag-list { display: grid; gap: 4px; } .cal-ag-i { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; min-width: 0; flex-wrap: wrap; } .cal-ag-i:hover { background: var(--surface-2); }
.cal-ag-i .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; } .cal-ag-i .tm { width: 120px; color: var(--text-2); font-size: 12px; flex: none; }
.sw-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.cal-desc { white-space: pre-wrap; max-height: 220px; overflow: auto; color: var(--text-2); }
.cal-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; font-size: 10px; color: var(--text-2); } .cal-sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.cal-src { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .cal-err { color: var(--danger); font-size: 12px; margin-top: 2px; }
@media (max-width: 900px) { .cal-wrap { grid-template-columns: 1fr; } .cal-layers { display: flex; flex-wrap: wrap; position: static; } .cal-layer.mine { margin: 0; border: 0; padding-top: 6px; } .cal-day { min-height: 74px; } .cal-ev .tm { display: none; } }
@media (max-width: 600px) { .cal-day { min-height: 58px; padding: 2px; } .cal-ev:not(.timed) .tt { font-size: 10px; } .cal-ag-day { grid-template-columns: 60px 1fr; } .cal-ag-i .tm { width: auto; } }

/* ---------- Proposals ---------- */
.pr-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .pr-kpi .val { font-size: 21px; } .pr-kpi.ok .ico { background: var(--success-soft); color: var(--success); } .pr-kpi.warn .ico { background: var(--warn-soft); color: var(--warn); }
.pr-tbl td { vertical-align: top; } .pr-tbl td.r, .pr-tbl th.r, .pr-items td.r, .pr-items th.r { text-align: right; } .pr-items tr.off td { opacity: .5; }
.pr-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); flex-wrap: wrap; } .pr-link .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-kv { grid-template-columns: 90px 1fr; } .pr-kv > div { display: contents; }
.pr-tot { display: grid; gap: 3px; margin-left: auto; min-width: 240px; max-width: 360px; } .pr-tot-r { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; } .pr-tot-r.big { font-size: 15px; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 3px; } .pr-tot-r.ok b { color: var(--success); }
.pr-scope { margin: 0; padding-left: 18px; columns: 2; gap: 20px; }
.pr-thread { display: grid; gap: 10px; } .pr-msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); } .pr-msg.client { border-left: 3px solid var(--warn); } .pr-msg.agent { border-left: 3px solid var(--accent); } .pr-msg.user { border-left: 3px solid var(--success); }
.pr-msg-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .pr-msg-b { white-space: pre-wrap; } .pr-prop { margin: 6px 0 0; padding-left: 18px; } .pr-prop s { color: var(--text-3); }
.pr-eng { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .pr-eng-i { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: grid; } .pr-eng-i b { font-size: 16px; }
.pr-ver { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pr-builder { display: grid; gap: 12px; } .pr-steps { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.pr-step { border: 0; background: none; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.pr-step span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 11px; } .pr-step.on { color: var(--accent-text); background: var(--accent-soft); } .pr-step.on span { background: var(--accent); color: #fff; }
.pr-main { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; } .pr-side { position: sticky; top: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; background: var(--surface-2); } .pr-side .pr-tot { min-width: 0; margin: 0; }
.pr-lines { display: grid; gap: 6px; } .pr-line { display: grid; grid-template-columns: minmax(180px, 1fr) 130px 110px 70px 100px 70px 34px 30px; gap: 6px; align-items: start; } .pr-line.head { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.pr-line > div { display: grid; gap: 4px; } .pr-desc { font-size: 12px; } .pr-line > input[type=checkbox] { margin-top: 8px; }
.pr-tl-row { display: grid; grid-template-columns: 1fr 140px 2fr 30px; gap: 6px; }
.cal-src.off { opacity: .6; }
@media (max-width: 1100px) { .pr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pr-main { grid-template-columns: 1fr; } .pr-side { position: static; } .pr-line { grid-template-columns: 1fr 1fr 1fr; } .pr-line.head { display: none; } .pr-line > div { grid-column: 1 / -1; } }
@media (max-width: 700px) { .pr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-eng { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-scope { columns: 1; } .pr-tl-row { grid-template-columns: 1fr 1fr; } .pr-tl-row > :nth-child(3) { grid-column: 1 / -1; } }

/* ---------- Installation wizard ---------- */
.iw .iw-card { width: min(680px, 100%); }
.iw-steps { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; } .iw-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); padding: 4px 8px; border-radius: 99px; }
.iw-step span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 11px; font-weight: 650; } .iw-step em { font-style: normal; }
.iw-step.on { background: var(--accent-soft); color: var(--accent-text); } .iw-step.on span { background: var(--accent); color: #fff; } .iw-step.done span { background: var(--success-soft); color: var(--success); }
.iw-body { min-height: 260px; margin: 6px 0 14px; } .iw-foot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.iw-checks { display: grid; gap: 6px; } .iw-check { display: flex; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .iw-check > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.iw-check.ok > svg { color: var(--success); } .iw-check.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: var(--danger-soft); } .iw-check.bad > svg { color: var(--danger); } .iw-check.warn > svg { color: var(--warn); }
.iw-ind, .iw-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.iw-ind-c { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; } .iw-ind-c:hover { border-color: var(--accent); }
.iw-ind-c.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; } .iw-ind-c .ico { color: var(--accent-text); } .iw-ind-c .ico svg { width: 16px; height: 16px; }
.iw-sum { font-size: 12px; }
@media (max-width: 560px) { .iw-ind, .iw-choice { grid-template-columns: 1fr; } .iw-step em { display: none; } .iw-step.on em { display: inline; } }
/* ---------- branding: theme-aware logos, logo-only layout, sign-in background ---------- */
.brand-logos { display: inline-flex; flex-shrink: 0; } .brand-logo.wide { width: auto; max-width: 170px; border-radius: 0; background: none; }
.brand-logos .logo-dark, :root[data-theme="dark"] .brand-logos .logo-light { display: none; } :root[data-theme="dark"] .brand-logos .logo-dark { display: block; }
:root[data-logo="only"] .sidebar .brand-text { display: none; } :root[data-logo="only"] .sidebar .brand .brand-logo { width: auto; max-width: 168px; background: none; border-radius: 0; }
.login.has-img { background-size: cover; background-position: center; } .login.has-img .card { box-shadow: var(--shadow-lg); }
.brand-up { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.brand-up .bu { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; background: var(--surface); }
.brand-up .bu .pv { height: 72px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-2); overflow: hidden; } .brand-up .bu .pv.dk { background: #16161c; }
.brand-up .bu .pv img { max-height: 60px; max-width: 90%; object-fit: contain; } .brand-up .bu .pv.cover img { max-height: none; max-width: none; width: 100%; height: 100%; object-fit: cover; }
/* ---------- rich text editor + the way formatted text is shown everywhere ---------- */
.rt { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.rt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: sticky; top: 0; z-index: 1; }
.rt-btn { border: 0; background: none; color: var(--text-2); min-width: 28px; height: 28px; border-radius: 6px; display: inline-grid; place-items: center; cursor: pointer; font-size: 13px; padding: 0 5px; }
.rt-btn:hover { background: var(--surface-3); color: var(--text); } .rt-btn.on { background: var(--accent-soft); color: var(--accent-text); } .rt-btn svg { width: 15px; height: 15px; }
.rt-block { height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12.5px; padding: 0 6px; max-width: 140px; }
.rt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.rt-area { padding: 10px 12px; outline: none; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; cursor: text; }
.rt-area { position: relative; text-align: left; }
.rt-area.rt-empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; position: absolute; top: 10px; left: 12px; right: 12px; overflow: hidden; overflow-wrap: anywhere; }
.rt.disabled .rt-area { background: var(--surface-2); cursor: default; }
.rt-area, .rt-view { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.rt-area > :first-child, .rt-view > :first-child { margin-top: 0; } .rt-area > :last-child, .rt-view > :last-child { margin-bottom: 0; }
.rt-area p, .rt-view p { margin: 0 0 .7em; } .rt-area h2, .rt-view h2 { font-size: 1.3em; margin: 1em 0 .45em; } .rt-area h3, .rt-view h3 { font-size: 1.12em; margin: .9em 0 .4em; } .rt-area h4, .rt-view h4 { font-size: 1em; margin: .8em 0 .35em; }
.rt-area ul, .rt-area ol, .rt-view ul, .rt-view ol { margin: 0 0 .7em; padding-left: 1.5em; } .rt-area li, .rt-view li { margin: .15em 0; }
.rt-area blockquote, .rt-view blockquote { margin: 0 0 .7em; padding: .2em 0 .2em .9em; border-left: 3px solid var(--border-strong); color: var(--text-2); }
.rt-area pre, .rt-view pre { background: var(--surface-2); padding: 8px 10px; border-radius: 6px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; margin: 0 0 .7em; }
.rt-area hr, .rt-view hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; } .rt-area a, .rt-view a { color: var(--accent); text-decoration: underline; }
@media print { .rt-bar { display: none; } .rt { border: 0; } }
.avatar { overflow: hidden; } .avatar.lg { flex-shrink: 0; }
.person-cell .cell-sub b { font-weight: 550; color: var(--text-2); }
/* "Agent can run" picker */
.run-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.run-mode { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; color: var(--text); }
.run-mode svg { width: 16px; height: 16px; color: var(--text-3); } .run-mode.on { border-color: var(--accent); background: var(--accent-soft); } .run-mode.on svg { color: var(--accent); }
.run-mode .faint { font-size: 12px; line-height: 1.35; } .run-sched { display: grid; gap: 12px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 640px) { .run-modes { grid-template-columns: 1fr; } }
.auto-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .auto-row:last-child { border-bottom: 0; }
.rt-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
/* ---------- Database page ---------- */
.db-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.db-side { position: sticky; top: 0; display: grid; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px; max-height: calc(100vh - 200px); grid-template-rows: auto minmax(0, 1fr); }
.db-list { overflow: auto; display: grid; gap: 1px; align-content: start; }
.db-item { display: flex; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font-size: 12.5px; }
.db-item:hover { background: var(--surface-2); } .db-item.on { background: var(--accent-soft); color: var(--accent-text); } .db-name { font-family: var(--mono); overflow-wrap: anywhere; }
.db-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.db-grid { overflow: auto; max-height: 62vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.db-table { border-collapse: collapse; width: 100%; font-size: 12px; } .db-table th, .db-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.db-grid .db-table th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; white-space: nowrap; font-family: var(--mono); font-weight: 600; }
.db-grid .db-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.db-grid .db-table tbody tr { cursor: pointer; } .db-grid .db-table tbody tr:hover { background: var(--surface-2); }
.db-table.plain td, .db-table.plain th { font-family: inherit; }
.db-sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; } .db-sort.on { color: var(--accent-text); }
.db-null { color: var(--text-3); font-style: italic; } .db-secret { color: var(--text-3); letter-spacing: 1px; }
.db-sql { width: 100%; font-family: var(--mono); font-size: 13px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; min-height: 120px; }
.db-kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; margin: 0; font-size: 13px; } .db-kv dt { font-family: var(--mono); color: var(--text-2); } .db-kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); }
.db-ul { margin: 0; padding-left: 18px; font-size: 13px; } .db-ddl { padding: 10px 14px; } .db-ddl pre { white-space: pre-wrap; font-size: 12px; font-family: var(--mono); margin: 8px 0 0; }
@media (max-width: 900px) { .db-wrap { grid-template-columns: 1fr; } .db-side { position: static; max-height: 260px; } }
.db-search { width: 240px; max-width: 100%; } @media (max-width: 900px) { .db-search { width: 100%; } }
.db-main .row .select { width: auto; max-width: 100%; }
/* drawer buttons wrap onto a second line on narrow screens instead of running off the edge */
.drawer-f { flex-wrap: wrap; row-gap: 6px; }

/* Skeleton loaders: the page's outline while its code and data arrive (the server paints the first one before any script runs) */
.sk { display: block; height: 11px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: sk-shine 1.4s ease infinite; }
@keyframes sk-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.sk-lines { display: grid; gap: 9px; padding: 4px 0; width: 100%; }
.sk-page { display: grid; gap: 16px; }
.sk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .sk-head > div { flex: 1 1 200px; min-width: 0; }
.sk { max-width: 100%; }
.sk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; }
.sk-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 15px; display: grid; gap: 13px; min-width: 0; }
.sk-row { display: grid; grid-template-columns: 26px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 70px; gap: 14px; align-items: center; }
.sk-nav { padding: 6px 13px; display: grid; gap: 13px; }
.sk-box { display: grid; gap: 14px; width: min(400px, 100%); }
@media (max-width: 640px) { .sk-row { grid-template-columns: 26px minmax(0, 1fr) 60px; } .sk-row > .sk:nth-child(3), .sk-row > .sk:nth-child(4) { display: none; } }
/* before the app has read the theme setting (the first paint): follow the device, so a dark device never flashes light */
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  --bg: #0e0e12; --surface: #16161c; --surface-2: #1c1c24; --surface-3: #24242e;
  --border: #272731; --border-strong: #34343f;
  --text: #ececf1; --text-2: #a7a7b4; --text-3: #71717e;
  --accent: #7c7cf2; --accent-hover: #9090f6; --accent-soft: #23234a; --accent-text: #b4b4fb;
  --success: #3ccf91; --success-soft: #11291f; --warn: #f0b24b; --warn-soft: #2e2410;
  --danger: #f2677d; --danger-soft: #331820; --info: #5eaaf0; --info-soft: #14263a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
} }

/* Live chat widgets: one card per website, the filter bar, the editor header, the offering picker and the analytics */
.lcw-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lcw-bar .btn.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.lcw-search { max-width: 280px; } .lcw-count { margin-left: auto; font-size: 12.5px; }
.lcw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 13px; }
@media (max-width: 760px) { .lcw-grid { grid-template-columns: minmax(0, 1fr); } .lcw-search { max-width: none; flex: 1 1 160px; } .lcw-count { margin-left: 0; width: 100%; } }
.lcw-card { display: flex; flex-direction: column; gap: 11px; padding: 14px; min-width: 0; border-top: 3px solid var(--border); }
.lcw-card.st-live { border-top-color: var(--success); } .lcw-card.st-not_installed { border-top-color: var(--warn); } .lcw-card.st-off { opacity: .78; } .lcw-card.st-idle { border-top-color: var(--info); }
.lcw-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lcw-av { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; overflow: hidden; } .lcw-av img { width: 100%; height: 100%; object-fit: cover; }
.lcw-id { flex: 1; min-width: 0; } .lcw-id b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcw-dom { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--accent-text); font-weight: 600; min-width: 0; } .lcw-dom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lcw-dom svg { width: 13px; height: 13px; flex: none; }
.lcw-dom.none { color: var(--text-3); font-weight: 500; }
.lcw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lcw-kpis > div { background: var(--surface-2); border-radius: 10px; padding: 8px 9px; min-width: 0; } .lcw-kpis > div.hot { background: var(--success-soft); }
.lcw-kpis b { display: block; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; } .lcw-kpis small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; color: var(--text-2); line-height: 1.3; }
.lcw-kpis em { font-style: normal; font-weight: 600; } .lcw-kpis em.up { color: var(--success); } .lcw-kpis em.down { color: var(--danger); }
@media (max-width: 420px) { .lcw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lcw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); animation: lcw-pulse 1.8s infinite; flex: none; margin-right: 4px; vertical-align: middle; }
.lcw-dot.off { background: var(--text-3); animation: none; } @keyframes lcw-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .lcw-dot { animation: none; } }
.lcw-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.lcw-warn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 6px 9px; } .lcw-warn svg { width: 14px; height: 14px; flex: none; }
.lcw-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--border); }
.lcw-ehead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lcw-eid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .lcw-eid b { font-size: 16px; } .lcw-eid .faint { display: inline-flex; align-items: center; gap: 4px; } .lcw-eid svg { width: 13px; height: 13px; }
.lcw-kv { grid-template-columns: 170px minmax(0, 1fr); }
.lcw-pick { display: grid; gap: 10px; } .lcw-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.lcw-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; min-width: 0; } .lcw-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcw-check.on { border-color: var(--accent); background: var(--accent-soft); }
.lcw-abar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lcw-site { display: inline-flex; align-items: center; gap: 6px; } .lcw-site b { color: var(--accent-text); font-size: 15px; } .lcw-site svg { width: 16px; height: 16px; color: var(--accent-text); }
.lcw-a2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lcw-a3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .lcw-a3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .lcw-a2, .lcw-a3 { grid-template-columns: minmax(0, 1fr); } }
.lcw-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .lcw-donut .legend { flex: 1; min-width: 140px; }
.lcw-live .card-h h3 { display: flex; align-items: center; gap: 6px; } .lcw-livelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.lcw-livelist li { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; gap: 3px; min-width: 0; }
.lcw-lv-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lcw-lv-page { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent-text); min-width: 0; } .lcw-lv-page span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lcw-lv-page svg { width: 13px; height: 13px; flex: none; }
.lcw-lv-meta { font-size: 11.5px; }
.lcw-path { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lcw-path .faint { overflow: hidden; text-overflow: ellipsis; }
.lcw-recent td { vertical-align: top; }
/* the website on a chat: list item, conversation header and the side panel */
.lc-site { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); min-width: 0; margin: 1px 0 2px; } .lc-site svg { width: 12px; height: 12px; flex: none; color: var(--accent-text); }
.lc-site b { color: var(--accent-text); font-weight: 650; white-space: nowrap; } .lc-site span, .lc-site a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lc-site.big { font-size: 12.5px; } .lc-site.big b { background: var(--accent-soft); padding: 1px 7px; border-radius: 99px; }
.lc-webcard { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.lc-webhost { display: flex; align-items: center; gap: 9px; background: var(--accent-soft); border-radius: 10px; padding: 9px 11px; } .lc-webhost svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; } .lc-webhost b { color: var(--accent-text); font-size: 14.5px; word-break: break-all; }
.lc-journey summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .lc-journey ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; }
.lc-journey li { min-width: 0; } .lc-journey li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* agents: workflow order, hand-offs, assignments, supervision */
.pipeline { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.pipe-step { flex: 1 0 150px; display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 12.5px; position: relative; min-width: 0; }
.pipe-step:not(:last-child)::after { content: '›'; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); color: var(--text-3, var(--muted, #888)); font-size: 15px; z-index: 1; background: var(--bg); line-height: 1; }
.pipe-step .faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 11px; }
.agent-flow { display: grid; gap: 4px; font-size: 12px; }
.flow-next { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-text); font-weight: 600; } .flow-next svg { width: 12px; height: 12px; }
.flow-asg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2, inherit); }
.warn-text { color: var(--warn); }
.assign { display: grid; gap: 8px; }
.assign-list { display: grid; gap: 4px; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--surface); }
.assign-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; min-width: 0; }
.assign-row:hover { background: var(--surface-2); } .assign-row.on { background: var(--accent-soft); }
.assign-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sup-line { gap: 8px; font-size: 12.5px; } .sup-line .badge svg { width: 12px; height: 12px; }
.sup-rules { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sup-rule { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; background: var(--surface-2); } .sup-rule.off { opacity: .55; }
.sup-log td { vertical-align: top; }
.gr-kpis { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gr-kpis > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); } .gr-kpis b { display: block; font-size: 20px; }
.gr-events td { vertical-align: top; font-size: 12.5px; } .gr-sample { font-family: ui-monospace, monospace; font-size: 11.5px; overflow-wrap: anywhere; color: var(--text-2, inherit); }
.gr-test textarea { font-family: inherit; }
@media (max-width: 640px) { .pipe-step { flex-basis: 132px; } .sup-log th:nth-child(5), .sup-log td:nth-child(5) { display: none; } }

/* ---------- form controls: one look everywhere ---------- */
:root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* native date pickers, dropdown lists and scrollbars follow the theme */
.select { padding-right: 28px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.select option, .select optgroup { background: var(--surface); color: var(--text); }
.select[multiple] { height: auto; min-height: 90px; padding: 4px; background-image: none; white-space: normal; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly] { background-color: var(--surface-2); color: var(--text-2); cursor: not-allowed; }
.input[readonly] { cursor: default; }
.input[type=number] { -moz-appearance: textfield; } .input[type=number]::-webkit-inner-spin-button { opacity: .5; }
.input[type=date], .input[type=time], .input[type=datetime-local] { min-width: 0; }
.input[type=color], input[type=color].swatch { padding: 2px; width: 44px; height: 30px; cursor: pointer; }
:where(input[type=checkbox], input[type=radio]) { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle; transition: background-color .12s, border-color .12s, box-shadow .12s; }
:where(input[type=checkbox]) { border-radius: 4px; } :where(input[type=radio]) { border-radius: 50%; }
:where(input[type=checkbox])::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .1s; background: #fff; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
:where(input[type=radio])::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform .1s; background: #fff; }
:where(input[type=checkbox], input[type=radio]):checked { background: var(--accent); border-color: var(--accent); }
:where(input[type=checkbox], input[type=radio]):checked::before { transform: scale(1); }
:where(input[type=checkbox]):indeterminate { background: var(--accent); border-color: var(--accent); } :where(input[type=checkbox]):indeterminate::before { transform: scale(1); clip-path: inset(40% 10% 40% 10%); }
:where(input[type=checkbox], input[type=radio]):hover:not(:disabled) { border-color: var(--accent); }
:where(input[type=checkbox], input[type=radio]):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent); }
:where(input[type=checkbox], input[type=radio]):disabled { opacity: .5; cursor: not-allowed; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { cursor: pointer; }
.switch input { appearance: auto; -webkit-appearance: auto; } .switch input::before { content: none; }
/* validation */
.field-err { color: var(--danger); font-size: 11.5px; margin-top: 4px; line-height: 1.35; }
.rt[aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
/* web tasks */
.wt-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wt-card.s-waiting { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.wt-prog, .wl-prog { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .wt-prog i, .wl-prog i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s ease; }
.wt-card.s-done .wt-prog i { background: var(--success); } .wt-card.s-failed .wt-prog i { background: var(--danger); }
.wt-now { font-size: 12.5px; min-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.wt-ask { display: inline-flex; gap: 5px; align-items: flex-start; color: var(--warn); } .wt-ask svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.wt-ex { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -4px; }
.wt-url { overflow-wrap: anywhere; font-size: 11.5px; }
.wt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wt-steps li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; min-width: 0; }
.wt-steps li.bad { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.wt-thumb { width: 96px; height: 60px; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; display: block; } .wt-thumb.none { cursor: default; }
.wt-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wt-sh { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .wt-target { color: var(--text-2); overflow-wrap: anywhere; } .wt-err { color: var(--danger); }
.wt-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .wt-files li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .wt-files svg { width: 14px; height: 14px; }
.wt-big { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); display: block; }
@media (max-width: 900px) { .wt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wt-steps li { grid-template-columns: 64px 1fr; } .wt-thumb { width: 64px; height: 42px; } }
/* web task live view (its own tab) */
.wl { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.wl-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.wl-title { display: grid; min-width: 0; flex: 1; } .wl-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-title small { color: var(--text-3); font-size: 11.5px; }
.wl-dot { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-3); }
.wl-dot.on { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); } .wl-dot.on::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; animation: wl-blink 1.4s infinite; }
@keyframes wl-blink { 50% { opacity: .25; } }
.wl-prog { border-radius: 0; height: 3px; }
.wl-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; padding: 14px 16px; min-height: 0; align-items: start; }
.wl-screen { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.wl-url { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-2); background: var(--surface-2); min-width: 0; } .wl-url span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-url svg { width: 13px; height: 13px; flex: none; }
.wl-frame { display: grid; place-items: start center; background: var(--surface-2); } .wl-frame:not(:has(img)) { min-height: 300px; place-items: center; background: #0f1115; } .wl-frame img { width: 100%; height: auto; max-height: calc(100vh - 150px); object-fit: contain; display: block; }
.wl-wait { color: #9aa3b2; display: grid; justify-items: center; gap: 8px; font-size: 13px; } .wl-wait svg { width: 30px; height: 30px; opacity: .6; }
.wl-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100vh - 90px); overflow-y: auto; }
.wl-now { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; overflow-wrap: anywhere; } .wl-now small { color: var(--text-3); font-size: 11px; }
.wl-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .wl-nums div { display: grid; text-align: center; padding: 6px 0; border-radius: 8px; background: var(--surface-2); } .wl-nums small { color: var(--text-3); font-size: 10.5px; }
.wl-steps, .wl-data { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12px; } .wl-steps li { padding: 6px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); overflow-wrap: anywhere; } .wl-steps li.bad { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.wl-data li { overflow-wrap: anywhere; } .wl-data .badge { margin-left: 5px; }
@media (max-width: 900px) { .wl-body { grid-template-columns: 1fr; } .wl-side { max-height: none; } .wl-frame { min-height: 200px; } }
@media (max-width: 520px) { .wl-top { padding: 8px 12px; } .wl-body { padding: 10px 12px; } }
/* web tasks: your browser (extension) */
.wb-panel { padding: 12px 14px; display: grid; gap: 10px; }
.wb-head { display: flex; gap: 11px; align-items: flex-start; flex-wrap: wrap; } .wb-head .faint { font-size: 12.5px; }
.wb-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; } .wb-ic svg { width: 16px; height: 16px; }
.wb-state { margin-left: auto; }
.wb-actions:empty { display: none; }
.wb-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12.5px; } .wb-steps code { font-size: 11.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.wb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .wb-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .wb-list small { font-size: 12px; } .wb-list .btn { margin-left: auto; }
.wb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; } .wb-dot.on { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
@media (max-width: 520px) { .wb-state { margin-left: 0; } }
/* AI savings card on AI & usage */
.ai-save .card-b > div { display: grid; gap: 1px; } .ai-save b { font-size: 18px; } .ai-save small { font-size: 11.5px; }
/* automations */
.au-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.au-card.on { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.au-desc { font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.au-err { font-size: 12px; color: var(--danger); overflow-wrap: anywhere; }
.au-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.au-start { display: grid; gap: 4px; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); } .au-start:hover { border-color: var(--accent); }
.au-start svg { width: 16px; height: 16px; color: var(--accent-text); } .au-start span { font-size: 12.5px; color: var(--text-2); }
.au-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.au-canvas { overflow-x: auto; display: flex; flex-direction: column; align-items: center; padding: 16px 10px 30px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); min-height: 300px; overflow-x: auto; }
.au-flow { display: flex; flex-direction: column; align-items: center; width: 100%; }
.au-item { display: flex; flex-direction: column; align-items: center; width: 100%; }
.au-node { display: flex; gap: 10px; align-items: flex-start; width: min(340px, 100%); text-align: left; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.au-node:hover { border-color: var(--accent); } .au-node.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.au-node.trigger { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.au-node.off { opacity: .55; } .au-node.ai { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.au-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; } .au-ic svg { width: 14px; height: 14px; }
.au-t { display: grid; gap: 1px; min-width: 0; flex: 1; } .au-t small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .au-t b { font-size: 13px; } .au-t span { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.au-plus, .au-line { position: relative; width: 22px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; }
.au-plus::before, .au-line::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--border-strong); }
.au-plus svg { position: relative; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2); box-sizing: border-box; }
.au-plus:hover svg { border-color: var(--accent); color: var(--accent-text); }
.au-branches { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(180px, 1fr)); gap: 10px; width: 100%; margin-top: 4px; }
.au-branch { border-top: 2px solid var(--border-strong); padding-top: 6px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.au-branch.yes { border-color: color-mix(in srgb, var(--success) 60%, var(--border)); } .au-branch.no { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.au-bl { font-size: 11px; font-weight: 700; color: var(--text-2); } .au-empty { font-size: 11.5px; }
.au-panel { padding: 14px; position: sticky; top: 10px; max-height: calc(100vh - 120px); overflow-y: auto; }
.au-rule { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.au-rf { display: grid; gap: 4px; min-width: 0; }
.au-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; } .au-check input { margin-top: 2px; }
.au-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .au-types > div { display: grid; gap: 6px; align-content: start; }
.au-type { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: left; } .au-type:hover { border-color: var(--accent); } .au-type svg { width: 14px; height: 14px; color: var(--accent-text); }
.au-log { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; } .au-log li.bad { color: var(--danger); }
.au-leads { display: flex; flex-wrap: wrap; gap: 5px; }
.au-canvas > .au-flow, .au-canvas > .au-node { flex-shrink: 0; } .au-canvas { align-items: safe center; }
.au-branch.path { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .au-branch.other { border-color: var(--border-strong); border-top-style: dashed; }
.au-node.br { border-style: solid; border-width: 1px 1px 1px 3px; border-left-color: var(--accent); }
.au-node.warn { border-color: color-mix(in srgb, var(--warn) 70%, var(--border)); }
.au-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .au-stat, .au-warn { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.au-stat em { font-style: normal; color: var(--danger); } .au-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--text); } .au-warn svg { width: 11px; height: 11px; }
.au-goal { display: flex; gap: 8px; align-items: center; margin-top: 4px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--success) 60%, var(--border)); border-radius: 10px; font-size: 12.5px; width: min(420px, 100%); background: var(--surface); } .au-goal svg { width: 15px; height: 15px; color: var(--success); flex: none; }
.au-modes { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .au-modes button { border: 0; background: var(--surface); padding: 6px 14px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.au-modes button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .au-modes button:disabled { cursor: not-allowed; opacity: .55; } .au-modes button + button { border-left: 1px solid var(--border); }
.au-filters { gap: 8px; } .au-filters .input { max-width: 280px; } .au-filters .select { width: auto; }
.au-problems ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.au-simple { max-width: 820px; } .au-h { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; } .au-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; }
.au-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .au-li { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .au-li.open { border-color: var(--accent); } .au-li.warn { border-color: color-mix(in srgb, var(--warn) 70%, var(--border)); }
.au-li-h { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; } .au-li-h > svg:last-child { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.au-li.open .au-li-h > svg:last-child { transform: rotate(180deg); } .au-warn-i { width: 15px; height: 15px; color: var(--warn); flex: none; } .au-li-b { padding: 0 12px 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.au-more { display: flex; gap: 8px; align-items: center; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .au-more svg { width: 15px; height: 15px; flex: none; } .au-more .faint { font-size: 12.5px; flex: 1; }
.au-pathbox { padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.au-days { display: flex; flex-wrap: wrap; gap: 5px; } .au-days .chip { cursor: pointer; }
.au-code { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.au-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; } .au-vars code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.au-run-act { white-space: nowrap; } .au-run-act .btn + .btn { margin-left: 4px; }
@media (max-width: 1000px) { .au-wrap { grid-template-columns: 1fr; } .au-panel { position: static; max-height: none; } }
@media (max-width: 640px) { .au-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .au-branches { grid-template-columns: 1fr; } .au-filters .input { max-width: none; flex: 1 1 100%; } .au-run-act { white-space: normal; } .au-rule { grid-template-columns: 1fr 1fr; } }
/* web tasks: recipes */
.wt-sections { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; align-self: flex-start; }
.wt-sections button { display: inline-flex; gap: 6px; align-items: center; border: 0; background: var(--surface); padding: 7px 16px; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.wt-sections button svg { width: 15px; height: 15px; } .wt-sections button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .wt-sections button + button { border-left: 1px solid var(--border); }
.wr-card.changed { border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); } .wr-card.recording { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.wr-rec { display: inline-flex; gap: 5px; align-items: center; } .wr-rec i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: wrp 1.2s infinite; } @keyframes wrp { 50% { opacity: .3; } }
.wr-change { font-size: 12px; color: var(--text); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 6px; padding: 4px 8px; overflow-wrap: anywhere; margin-top: 4px; }
.wr-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12.5px; } .wr-steps.live { max-height: 180px; overflow-y: auto; }
.wr-steps.edit { list-style: none; padding: 0; gap: 8px; } .wr-steps.edit li { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; background: var(--surface); }
.wr-sh { display: flex; gap: 6px; align-items: center; font-size: 13px; } .wr-sh > span:not(.wr-tools) { flex: 1; min-width: 0; overflow-wrap: anywhere; } .wr-tools { display: inline-flex; gap: 2px; flex: none; }
.wr-runs td { vertical-align: top; } .wr-runs .badge + .badge { margin-left: 4px; }
/* inbox reply rules */
.rr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rr-rule { padding: 10px 12px; display: grid; gap: 6px; } .rr-rule.off { opacity: .6; }
.rr-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rr-n { color: var(--text-3); } .rr-tools { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.rr-ph { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .rr-ph .chip { font-size: 12px; cursor: default; } .rr-result { font-size: 13px; }
/* live chat guided answers */
.ga-stats { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--success) 10%, transparent); } .ga-stats svg { width: 15px; height: 15px; color: var(--success); flex: none; }
.ga-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ga-item.open { border-color: var(--accent); }
.ga-h { display: flex; gap: 6px; align-items: center; padding: 8px 10px; } .ga-t { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 0; } .ga-t .faint { font-size: 12px; overflow-wrap: anywhere; }
.ga-tools { display: inline-flex; gap: 2px; flex: none; } .ga-b { padding: 4px 12px 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.ga-btns { display: flex; flex-wrap: wrap; gap: 5px; } .ga-btns .chip { cursor: pointer; }
.ga-q { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-top: 6px; }
.ga-res { display: grid; gap: 6px; font-size: 13px; } .ga-bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; max-width: 520px; }
@media (max-width: 640px) { .rr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ga-q { grid-template-columns: 1fr 1fr; } .rr-tools { margin-left: 0; } }
/* timeline (lead, company, deal) */
.tl { display: grid; gap: 8px; } .tl-h { display: flex; gap: 8px; align-items: baseline; } .tl-h h4 { margin: 0; }
.tl-add { display: grid; gap: 6px; justify-items: start; } .tl-add .textarea { width: 100%; }
.tl-kinds { display: flex; flex-wrap: wrap; gap: 4px; } .tl-kinds .chip small { opacity: .7; margin-left: 3px; }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.tl-i { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; position: relative; }
.tl-i::before { content: ''; position: absolute; left: 12px; top: 30px; bottom: -6px; width: 2px; background: var(--border); } .tl-i:last-child::before { display: none; }
.tl-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); position: relative; z-index: 1; } .tl-ic svg { width: 13px; height: 13px; }
.tl-i.in .tl-ic { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } .tl-i.good .tl-ic { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); border-color: transparent; }
.tl-i.k-note .tl-ic { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--text); border-color: transparent; } .tl-i.pinned { background: color-mix(in srgb, var(--warn) 6%, transparent); border-radius: 8px; }
.tl-b { min-width: 0; display: grid; gap: 2px; } .tl-t { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 13px; } .tl-t a { font-weight: 600; } .tl-t .badge { font-size: 10.5px; }
.tl-x { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } .tl-note { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 6px; padding: 6px 8px; }
.tl-tools { display: inline-flex; gap: 2px; align-self: start; }
/* deals */
.dl-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dl-bar { gap: 8px; } .dl-bar .input { max-width: 280px; } .dl-bar .select { width: auto; }
.dl-views { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .dl-views button { display: inline-flex; gap: 5px; align-items: center; border: 0; background: var(--surface); padding: 6px 12px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; } .dl-views button svg { width: 14px; height: 14px; } .dl-views button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .dl-views button + button { border-left: 1px solid var(--border); }
.dl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.dl-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: grid; gap: 8px; min-height: 160px; align-content: start; } .dl-col.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dl-col header { display: grid; grid-template-columns: 1fr auto; gap: 0 6px; align-items: baseline; } .dl-col header small { grid-column: 1; font-size: 11px; } .dl-tot { grid-row: 1 / 3; grid-column: 2; font-size: 12px; color: var(--text-2); align-self: center; }
.dl-col.k-won { background: color-mix(in srgb, var(--success) 7%, var(--surface-2)); } .dl-col.k-lost { background: color-mix(in srgb, var(--danger) 5%, var(--surface-2)); }
.dl-cards { display: grid; gap: 6px; } .dl-empty { text-align: center; padding: 12px 0; font-size: 12px; }
.dl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; cursor: grab; } .dl-card:hover { border-color: var(--accent); } .dl-card.overdue { border-left: 3px solid var(--danger); }
.dl-open { display: grid; gap: 1px; text-align: left; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; } .dl-open b { font-size: 13px; } .dl-open span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; } .dl-meta svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.dl-late { color: var(--danger); } .dl-av { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 10px; font-weight: 700; }
.dl-move { width: 100%; font-size: 12px; }
.dl-path { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .dl-path button { flex: 1 1 auto; border: 0; background: var(--surface); padding: 7px 10px; font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; } .dl-path button + button { border-left: 1px solid var(--border); }
.dl-path button.done { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-text); } .dl-path button.on { background: var(--accent); color: #fff; font-weight: 600; }
.btn.dl-won { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.dl-stage-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto auto auto auto; gap: 6px; align-items: center; }
/* companies */
.co-bar { gap: 8px; } .co-bar .input { max-width: 320px; } .co-bar .select { width: auto; } .co-dom { font-size: 12px; } tr.clickable { cursor: pointer; }
.co-h { margin: 0 0 6px; } .co-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .co-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.co-val { margin-left: auto; } .co-score { margin-left: auto; font-size: 12px; } .ld-cd { display: grid; gap: 8px; } .ld-cd svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 640px) { .dl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-bar .input, .co-bar .input { max-width: none; flex: 1 1 100%; } .dl-board { grid-auto-columns: 82%; } .dl-stage-row { grid-template-columns: 1fr 70px auto; } }
/* Settings → Notifications → Send reports to */
.nr-chips { display: flex; flex-wrap: wrap; gap: 6px; } .nr-chips .chip, .nr-card .callout .chip { display: inline-flex; align-items: center; gap: 4px; cursor: default; font-size: 12px; padding: 3px 4px 3px 10px; }
.nr-x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; display: inline-flex; border-radius: 99px; } .nr-x:hover { color: var(--danger); } .nr-x svg { width: 12px; height: 12px; }
.nr-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; max-height: 320px; overflow: auto; }
.nr-list li + li { border-top: 1px solid var(--border); } .nr-list > li.faint { padding: 10px 12px; }
.nr-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; } .nr-row:hover { background: var(--surface-2); }
.nr-who { display: grid; flex: 1; min-width: 0; } .nr-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* @mention picker in the rich text editor */
.rt-mention { position: fixed; z-index: 1200; width: 270px; max-height: 250px; overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); }
.rt-mention li { display: grid; padding: 6px 10px; border-radius: 7px; cursor: pointer; } .rt-mention li small { color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-mention li.on { background: var(--accent-soft, var(--surface-2)); }
/* Inbox composer: Cc/Bcc, attachments, drop zone, @mentions */
.linkbtn { border: 0; background: transparent; padding: 0; color: var(--accent-text, var(--accent)); cursor: pointer; font: inherit; } .linkbtn:hover { text-decoration: underline; }
.cmp { position: relative; }
.cmp-drop { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent-text, var(--accent)); pointer-events: none; }
.cmp-to { display: flex; align-items: center; gap: 8px; } .cmp-to .input { flex: 1; min-width: 0; } .cmp-cc { display: inline-flex; gap: 8px; font-size: 12px; white-space: nowrap; }
.cmp-mentioned { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); } .cmp-mentioned svg { width: 13px; height: 13px; }
.cmp-rows { display: grid; gap: 8px; margin-bottom: 12px; } .cmp-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; } .cmp-row label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cmp-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.att.draft { background: var(--surface-2); max-width: 280px; } .att.draft.busy { opacity: .75; } .att-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.att-x, .att-dl { border: 0; background: transparent; color: var(--text-3); cursor: pointer; display: inline-flex; padding: 1px; border-radius: 6px; } .att-x:hover { color: var(--danger); } .att-dl:hover { color: var(--accent); } .att-x svg, .att-dl svg { width: 13px; height: 13px; }
.spin.sm { width: 12px; height: 12px; border-width: 2px; }
/* Reading pane: attachments, hidden pictures */
.msg-files { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; display: grid; gap: 8px; }
.mf-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .mf-h svg { width: 13px; height: 13px; }
.mf-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-pic { width: 132px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); padding: 0; cursor: zoom-in; display: grid; text-align: left; }
.mf-pic img { width: 100%; height: 90px; object-fit: cover; display: block; background: #fff; } .mf-pic span { font-size: 11px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.mf-rest { display: flex; flex-wrap: wrap; gap: 6px; }
.file-view { display: flex; justify-content: center; background: var(--surface-2); border-radius: 10px; min-height: 200px; }
.file-view img { max-width: 100%; max-height: 70vh; object-fit: contain; } .file-view iframe { width: 100%; height: 70vh; border: 0; background: #fff; border-radius: 10px; }
.msg-imgs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); }
.msg-imgs > span { flex: 1; min-width: 180px; } .msg-imgs > svg { width: 15px; height: 15px; color: var(--text-3); }
/* Data scraper — smart extraction */
.smx-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (max-width: 680px) { .smx-modes { grid-template-columns: minmax(0, 1fr); } }
.smx-mode { display: grid; gap: 4px; text-align: left; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--text); font: inherit; } .smx-mode small { color: var(--text-3); font-size: 12px; } .smx-mode:hover { border-color: var(--border-strong); } .smx-mode.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.smx-card { padding: 14px; display: grid; gap: 12px; min-width: 0; } .smx-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .smx-h h3 { font-size: 15px; margin: 0; } .smx-h p { margin: 3px 0 0; font-size: 12.5px; }
.smx-sect { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; } .smx-st { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; } .smx-st svg { width: 15px; height: 15px; color: var(--success); }
.smx-url { overflow-wrap: anywhere; text-decoration: underline dotted; text-underline-offset: 3px; color: var(--text); }
.smx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .smx-checks li { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; } .smx-checks svg { width: 14px; height: 14px; margin-top: 2px; flex: none; } .smx-checks li.ok svg { color: var(--success); } .smx-checks li.no svg { color: var(--text-3); }
.smx-note { font-size: 12px; }
.smx-kv { display: grid; gap: 4px; margin: 0; } .smx-kv div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; font-size: 13px; } .smx-kv dt { color: var(--text-3); } .smx-kv dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 560px) { .smx-kv div { grid-template-columns: 1fr; gap: 0; } }
.smx-ready { color: var(--success); font-weight: 600; } .smx-notready { color: var(--warn); font-weight: 600; }
.smx-rt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.smx-fields { display: grid; gap: 6px; } .smx-f { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto minmax(140px, 190px); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); } .smx-f.off { opacity: .55; }
.smx-fl { display: grid; gap: 2px; min-width: 0; } .smx-fl small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smx-fl .smx-sample { color: var(--text-2); font-style: italic; }
.smx-req { cursor: pointer; border: 0; font: inherit; font-size: 11px; } @media (max-width: 640px) { .smx-f { grid-template-columns: 22px minmax(0, 1fr); } .smx-f .smx-req, .smx-f select { grid-column: 2; justify-self: start; } }
.smx-adv summary { cursor: pointer; padding: 10px 12px; display: flex; gap: 7px; align-items: center; font-weight: 600; font-size: 13px; } .smx-adv summary svg { width: 14px; height: 14px; }
.smx-rules { display: grid; gap: 5px; } .smx-rule { display: grid; grid-template-columns: 160px minmax(0, 1.4fr) minmax(0, 1fr); gap: 6px; align-items: center; font-size: 12.5px; } @media (max-width: 640px) { .smx-rule { grid-template-columns: 1fr; } }
.smx-items td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smx-trace td { vertical-align: top; overflow-wrap: anywhere; } .smx-code { display: block; font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 2px; overflow-wrap: anywhere; }
.sc-stop { padding: 0 11px 6px; font-size: 12.5px; } .sc-ver { padding: 11px 12px; }
/* Files */
.files-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 900px) { .files-layout { grid-template-columns: minmax(0, 1fr); } }
.files-side { display: grid; gap: 6px; } .files-side .sect-h { margin: 0 0 2px; }
.drive-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; align-items: center; text-align: left; width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 9px 10px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.drive-card:hover { border-color: var(--accent); } .drive-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.drive-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); } .drive-ic svg { width: 17px; height: 17px; }
.drive-t { display: grid; min-width: 0; gap: 1px; } .drive-t b, .drive-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drive-t span { font-size: 12px; }
.files-ai { font-size: 12px; padding: 4px 2px; display: flex; gap: 5px; align-items: flex-start; } .files-ai svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.files-card { position: relative; } .files-card.drag { outline: 2px dashed var(--accent); outline-offset: -4px; }
.files-bar { flex-wrap: wrap; gap: 8px; } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-weight: 600; } .crumbs svg { width: 13px; height: 13px; color: var(--text-3); }
.crumb { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; display: inline-flex; gap: 5px; align-items: center; } .crumb:hover { background: var(--surface-2); color: var(--accent); }
.files-tbl td { vertical-align: middle; } .file-name { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; display: flex; gap: 9px; align-items: flex-start; text-align: left; padding: 0; min-width: 0; }
.file-name svg { width: 17px; height: 17px; flex: none; color: var(--accent); margin-top: 1px; } .file-name > span { display: grid; gap: 2px; min-width: 0; } .file-name .nm { overflow-wrap: anywhere; font-weight: 550; } .file-name:hover .nm { color: var(--accent); text-decoration: underline; }
.file-name .sub { font-size: 12px; overflow-wrap: anywhere; } .file-name mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
@media (max-width: 640px) { .files-tbl .hide-sm { display: none; } }
.files-drop { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: color-mix(in srgb, var(--surface) 85%, transparent); border-radius: inherit; pointer-events: none; font-size: 15px; } .files-drop svg { width: 30px; height: 30px; color: var(--accent); }
.doc-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); } .doc-preview iframe { width: 100%; height: 360px; border: 0; display: block; background: #fff; } .doc-preview img { display: block; max-width: 100%; max-height: 360px; margin: 0 auto; }
.doc-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; } .doc-facts .faint { font-size: 11.5px; }
.doc-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.5; max-height: 420px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0; }
.kind-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .kind-opt { display: grid; gap: 4px; text-align: left; border: 1px solid var(--border); border-radius: 11px; padding: 10px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.kind-opt svg { width: 18px; height: 18px; color: var(--accent); } .kind-opt span { font-size: 12px; } .kind-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
code.redirect { font-size: 12px; padding: 3px 6px; border-radius: 6px; background: var(--surface-2); overflow-wrap: anywhere; }
.rule-card { border: 1px solid var(--border); border-radius: 12px; padding: 11px; display: grid; gap: 7px; } .rule-card .prev { color: var(--text-2); font-size: 12.5px; }
/* Sales autopilot, deliverability, queues */
.ap-kpi { text-align: left; font: inherit; color: inherit; cursor: pointer; } .ap-kpi:hover { border-color: var(--accent); } .ap-big { font-size: 26px; font-weight: 700; }
.ap-toggle { gap: 12px; padding: 2px 0; }
.dh-card .dh-reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; } .dh-reasons li { display: flex; gap: 6px; align-items: flex-start; } .dh-reasons svg { width: 13px; height: 13px; color: var(--warn); flex: none; margin-top: 3px; }
.dh-next { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; background: var(--surface-2); } .dh-next > div { display: grid; gap: 1px; } .dh-next .faint { font-size: 12px; }
.dh-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.mn-analysis { display: grid; gap: 10px; } .mn-analysis p { margin: 0; } .mn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; font-size: 13px; } .mn-grid ul, .mn-steps { margin: 2px 0 0; padding-left: 18px; } .mn-steps li { margin-bottom: 3px; } .mn-steps .badge { margin-right: 6px; }
.bk-hours { display: grid; gap: 6px; } .bk-day { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 10px; } .bk-day .input { width: 120px; } @media (max-width: 640px) { .bk-day { grid-template-columns: 1fr; } }
.sig-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 12px; }
.fc-bars { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 6px 2px 0; } .fc-col { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; font-size: 12px; color: var(--text-3); gap: 4px; }
.fc-stack { position: relative; height: 100%; } .fc-stack i { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 6px 6px 0 0; } .fc-stack .best, .fc-legend .best { background: color-mix(in srgb, var(--accent) 22%, transparent); } .fc-stack .weighted, .fc-legend .weighted { background: color-mix(in srgb, var(--accent) 55%, transparent); left: 18%; right: 18%; } .fc-stack .commit, .fc-legend .commit { background: var(--accent); left: 34%; right: 34%; }
.fc-legend { gap: 14px; font-size: 12px; color: var(--text-2); } .fc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .dv-stats > div { display: grid; gap: 2px; } .dv-stats .faint { font-size: 12px; } @media (max-width: 640px) { .dv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-dns { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; } .dv-dns .badge svg { width: 11px; height: 11px; } .dv-issues { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; } .dv-issues .bad { color: var(--danger); } .dv-issues .info { color: var(--text-2); }
.dv-controls { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .q-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.q-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; text-align: center; } .q-nums > div { display: grid; } .q-nums b { font-size: 18px; } .q-nums span { font-size: 11px; color: var(--text-3); } .q-nums .danger b { color: var(--danger); } .q-nums .warn b { color: var(--warn); }
@media (max-width: 640px) { .q-tbl .hide-sm { display: none; } }

/* ---------- Automations: the step picker with descriptions ---------- */
.au-type { align-items: flex-start; }
.au-type svg { margin-top: 2px; flex: none; }
.au-type-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.au-type-t b { font-weight: 600; font-size: 13px; }
.au-type-t small { font-size: 12px; line-height: 1.35; }
.au-type .badge { flex: none; }
.au-types { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ---------- Approvals autopilot ---------- */
.trust-bar { height: 4px; background: var(--border); border-radius: 4px; margin: 6px 0 4px; max-width: 260px; overflow: hidden; }
.trust-bar i { display: block; height: 100%; background: var(--accent, #4f46e5); border-radius: 4px; }
.ap-lessons { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Agent briefs ---------- */
.brief-bar { gap: 10px; align-items: center; }
.brief-bar .select { width: auto; max-width: 100%; }
.brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.brief-card .brief-h { gap: 10px; flex-wrap: wrap; }
.brief-card h3 { margin: 0; overflow-wrap: anywhere; }
.brief-sub { font-size: 12.5px; }
.brief-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.brief-tools { gap: 6px; margin-left: auto; }
.brief-head p { margin: 4px 0 0; color: var(--muted, inherit); }
.brief-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.brief-kpis > div { background: var(--surface-2, rgba(127,127,127,.06)); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
.brief-kpis span { font-weight: 600; font-size: 16px; }
.brief-kpis small { font-size: 11px; color: var(--muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-kpis .bad span { color: var(--danger, #dc2626); }
.brief-plan ol { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.brief-sec { border-top: 1px solid var(--border); padding-top: 8px; }
.brief-sec-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.brief-sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.brief-sec li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; min-width: 0; }
.brief-sec li > a, .brief-sec li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.brief-sec li.failed .brief-t { color: var(--danger, #dc2626); }
.brief-at { flex: none; font-size: 11.5px; color: var(--muted, #6b7280); }
.brief-none, .brief-note { font-size: 12.5px; }
.brief-note { color: var(--warn, #b45309); }
.brief-foot { justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.brief-empty { padding: 8px 0; }
.brief-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.brief-hist-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: inherit; font: inherit; }
.brief-hist-row b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.brief-hist-body { padding: 10px 4px; }
@media (max-width: 560px) { .brief-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .brief-sec li { flex-direction: column; gap: 0; } }

/* ---------- sidebar groups, the collapsed-sidebar flyout and the Administration menu ---------- */
.nav-rule { height: 1px; background: var(--border); margin: 8px 6px; }
.nav-group { margin-top: 1px; }
.nav-group-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; text-align: left; position: relative; }
.nav-group-h:hover { background: var(--surface-2); color: var(--text); }
.nav-group-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-group-h .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-group-h .count { background: var(--accent); color: #fff; border-radius: 99px; font-size: 10px; font-weight: 600; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; }
.nav-group-h .ng-chev { width: 13px; height: 13px; color: var(--text-3); flex: none; transition: transform .15s; transform: rotate(-90deg); }
.nav-group.open > .nav-group-h .ng-chev { transform: none; }
.nav-group.has-active > .nav-group-h { color: var(--text); }
.nav-group-items { position: relative; margin: 1px 0 4px 15px; padding-left: 8px; border-left: 1px solid var(--border); }
.nav-group-items[hidden] { display: none; }
.nav a.child { padding-top: 5px; padding-bottom: 5px; }
.collapsed .nav-group-h { justify-content: center; padding: 7px; }
.collapsed .nav-group-h .label, .collapsed .nav-group-h .ng-chev { display: none; }
.collapsed .nav-group-h .count { position: absolute; top: 2px; right: 6px; margin: 0; min-width: 13px; padding: 0 3px; line-height: 13px; }
.collapsed .nav-group.has-active > .nav-group-h { background: var(--accent-soft); color: var(--accent-text); }
.collapsed .nav-rule { margin: 6px; }
.nav-fly { position: fixed; z-index: 121; min-width: 200px; max-width: min(280px, calc(100vw - 20px)); max-height: calc(100vh - 16px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.nav-fly-h { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 4px 8px 5px; }
.nav-fly a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.nav-fly a:hover, .nav-fly a:focus-visible { background: var(--surface-2); outline: none; }
.nav-fly a.active { background: var(--accent-soft); color: var(--accent-text); }
.nav-fly a svg { width: 15px; height: 15px; flex: none; color: var(--text-3); } .nav-fly a.active svg { color: inherit; }
.nav-fly a .count { margin-left: auto; background: var(--accent); color: #fff; border-radius: 99px; font-size: 10px; font-weight: 600; padding: 0 5px; min-width: 16px; text-align: center; }
.admin-btn.on { color: var(--accent-text); background: var(--accent-soft); }
.admin-panel { width: min(300px, calc(100vw - 20px)); }
.admin-panel .pm-item.on { background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 900px) {
  .collapsed .nav-group-h { justify-content: flex-start; padding: 6px 8px; }
  .collapsed .nav-group-h .label, .collapsed .nav-group-h .ng-chev { display: revert; }
  .collapsed .nav-group-h .count { position: static; }
}