/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:        #0a0c0f;
  --bg2:       #101318;
  --bg3:       #151a20;
  --bg4:       #1c222b;
  --border:    #23282f;
  --border2:   #2a2f36;
  --accent:    #e3c56b;
  --accent2:   #d9b24e;
  --green:     #7ed6a2;
  --blue:      #7fb2d9;
  --orange:    #d98a5a;
  --red:       #f08a7e;
  --text:      #b6bec7;
  --text2:     #8a93a0;
  --text3:     #5b636e;
  --font:      'JetBrains Mono', 'Menlo', 'Courier New', monospace;
  --topbar-h:  58px;
  --sidebar-w: 300px;
  --term-h:    320px;
  --radius:    6px;
  --report-card-accent: #d9c17a;

  /* ── Hourly/Daily report palette — exact hex from Dmytro's Скейл mockup ── */
  --r-bg-page:          #0a0c0f;
  --r-bg-periods:       #14181d;
  --r-bg-banners:       #0f1216;
  --r-row-zebra:        #0d1117;
  --r-row-highlight:    #181e25;
  --r-campaign-hdr:     #1a1f26;
  --r-colhead-periods:  #171c22;
  --r-colhead-banners:  #13171d;
  --r-titlebar-periods: #1c222a;
  --r-titlebar-banners: #161a20;
  --r-border-row-p:     #20262e;
  --r-border-row-b:     #1e232a;
  --r-border-periods:   #262c34;
  --r-border-banners:   #23282f;
  --r-tab-border:       #2a2f36;
  --r-txt-key:          #d6dbe1;
  --r-txt-title:        #d2d8de;
  --r-txt-default:      #c9cfd7;
  --r-txt-panel-label:  #9aa4b0;
  --r-txt-dim:          #8a93a0;
  --r-txt-secondary:    #7f8894;
  --r-txt-colhead:      #6b7480;
  --r-txt-dim2:         #5b636e;
  --r-txt-dash:         #454c55;
  --r-green:            #7ed6a2;
  --r-amber:            #e3c56b;
  --r-red:              #f08a7e;
  --r-recency-0:        #1c222a; /* newest / today */
  --r-recency-1:        #171c22;
  --r-recency-2:        #14181d;
  --r-recency-3:        #12161b; /* oldest */
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  display: flex;
  flex-direction: column;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
  z-index: 100;
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }

.topbar-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  user-select: none;
  line-height: 1;
  gap: 2px;
}
.logo-main {
  font-family: var(--font);
  font-weight: 800;
  font-size: 26px;
  color: #e8e8e8;
  letter-spacing: -0.5px;
}
.logo-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  position: relative;
  top: -16px;
  margin-left: 2px;
}
.logo-sub {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 3px;
  margin-left: 36px;
  text-transform: uppercase;
}

.project-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text2);
  cursor: default;
  transition: border-color 0.15s;
}
.project-chip:hover { border-color: var(--border2); }

.project-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text3);
}
.project-dot.active { background: var(--green); box-shadow: 0 0 6px var(--green); }

.server-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text2);
  padding: 4px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text3);
}
.status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ── Buttons ───────────────────────────────────────────────── */
.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: var(--radius);
  padding: 5px 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); }

.sidebar-toggle { border: none; padding: 6px; }

/* ── Layout ────────────────────────────────────────────────── */
.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s, min-width 0.2s;
}

.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  gap: 0;
}

.stab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-family: var(--font);
  font-size: 12px;
  padding: 10px 10px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.stab:hover { color: var(--text); }
.stab.active { color: var(--text); border-bottom-color: var(--accent); }

.badge {
  background: var(--bg4);
  color: var(--text2);
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 10px;
}

.tab-pane { display: none; flex: 1; overflow-y: auto; }
.tab-pane.active { display: flex; flex-direction: column; }

/* ── Agent List ────────────────────────────────────────────── */
.agent-list {
  display: flex;
  flex-direction: column;
  padding: 6px 6px;
  gap: 2px;
}

.agent-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
  position: relative;
}
.agent-item:hover { background: var(--bg3); }
.agent-item.active {
  background: var(--bg3);
  border-color: var(--border2);
}
.agent-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}

.agent-item-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.agent-item-body { flex: 1; min-width: 0; }

.agent-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-item-desc {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.agent-item-model {
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
}

.agent-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
  margin-top: 5px;
  transition: background 0.3s, box-shadow 0.3s;
}
.agent-status-dot.active {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: dot-pulse 1.4s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--green); }
  50%       { box-shadow: 0 0 10px var(--green), 0 0 18px rgba(0,255,136,0.4); }
}

/* ── Projects ──────────────────────────────────────────────── */
.project-list { padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.project-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}
.project-item.active { background: var(--bg3); border-color: var(--border2); }
.project-item-info { display: flex; flex-direction: column; gap: 2px; }
.project-item-name { font-size: 12px; font-weight: 600; color: var(--text); }
.project-item-path { font-size: 10px; color: var(--text3); }

/* ── Main ──────────────────────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Agent Header ──────────────────────────────────────────── */
.agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}

.agent-header-left { display: flex; align-items: center; gap: 10px; }
.agent-header-right { display: flex; align-items: center; gap: 8px; }

.agent-header-icon { font-size: 20px; }

.agent-header-name { font-size: 14px; font-weight: 600; color: var(--text); }
.agent-header-model { font-size: 11px; color: var(--text3); margin-top: 1px; }

.status-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--green);
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-badge.thinking { border-color: var(--accent); color: var(--accent); }
.status-badge.error { border-color: var(--red); color: var(--red); }
.status-badge.reconnecting {
  border-color: var(--orange);
  color: var(--orange);
  animation: reconnect-pulse 1s ease-in-out infinite;
}
@keyframes reconnect-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.reconnect-hint {
  font-size: 11px;
  color: var(--orange);
  padding: 4px 8px;
  margin-top: 4px;
  border-left: 2px solid var(--orange);
  opacity: 0.8;
  animation: reconnect-pulse 1s ease-in-out infinite;
}

/* ── Empty State ───────────────────────────────────────────── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text3);
}

.empty-icon {
  font-size: 40px;
  opacity: 0.3;
}

.empty-title { font-size: 15px; font-weight: 600; color: var(--text2); }
.empty-sub { font-size: 12px; color: var(--text3); text-align: center; max-width: 260px; line-height: 1.5; }

/* ── Messages ──────────────────────────────────────────────── */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.msg {
  display: flex;
  gap: 10px;
  max-width: 100%;
  animation: msgIn 0.2s ease;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  margin-top: 2px;
}

.msg-body { flex: 1; min-width: 0; }

.msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.msg-author { font-size: 12px; font-weight: 600; color: var(--text); }
.msg-time { font-size: 10px; color: var(--text3); }

.msg-content {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* user messages */
.msg.user .msg-avatar { background: var(--accent); color: #000; border-color: var(--accent); }
.msg.user .msg-author { color: var(--accent); }

/* code blocks inside message */
.msg-content code {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font);
}

.msg-content pre {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  overflow-x: auto;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.msg-content pre code { background: none; border: none; padding: 0; }

/* streaming content wrapper */
.msg-content-stream {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* plain text block */
.text-block {
  white-space: pre-wrap;
}

/* thinking block */
.thinking-block {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--border2);
  padding: 5px 8px;
  border-radius: 0 3px 3px 0;
  margin: 2px 0;
}
.thinking-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text3);
  flex-shrink: 0;
  padding-top: 1px;
}
.thinking-text {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
}

/* tool call row */
.tool-call {
  font-size: 12px;
  font-family: var(--font);
  margin: 3px 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.tc-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  background: var(--bg3);
  border-left: 2px solid var(--border2);
}
.tool-call.done  .tc-header { border-left-color: var(--green); }
.tool-call.error .tc-header { border-left-color: var(--red); }

.tc-spinner {
  flex-shrink: 0;
  width: 14px;
  color: var(--text3);
  font-size: 13px;
}
.tool-call.done  .tc-spinner { color: var(--green); }
.tool-call.error .tc-spinner { color: var(--red); }

.tc-name {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.tc-input {
  color: var(--text2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tc-timer {
  font-size: 10px;
  color: var(--text3);
  flex-shrink: 0;
  margin-left: auto;
}

/* cost badge in msg-meta */
.msg-cost {
  font-size: 10px;
  color: var(--text3);
  margin-left: 4px;
}

/* code blocks */
.msg-content-stream code {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font);
}

.msg-content-stream pre {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  overflow-x: auto;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.msg-content-stream pre code {
  background: none;
  border: none;
  padding: 0;
}

/* ── Sidebar create button ─────────────────────────────────── */
.create-btn {
  display: block;
  width: calc(100% - 12px);
  margin: 8px 6px 4px;
  padding: 7px 12px;
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  color: var(--text2);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.create-btn:hover {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Agent "⋯" menu button ─────────────────────────────────── */
.agent-menu-btn {
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
  align-self: flex-start;
  margin-top: 2px;
}
.agent-item:hover .agent-menu-btn { opacity: 1; }
.agent-menu-btn:hover { background: var(--bg4); color: var(--text); }

/* project delete */
.proj-del-btn { font-size: 11px; opacity: 0; }
.project-item:hover .proj-del-btn { opacity: 1; }

/* ── Context menu ──────────────────────────────────────────── */
.context-menu {
  position: fixed;
  z-index: 500;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 4px;
  min-width: 130px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.ctx-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: var(--font);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.ctx-item:hover { background: var(--bg4); color: var(--text); }
.ctx-item.danger:hover { color: var(--red); }

/* ── Input Area ────────────────────────────────────────────── */
.input-area {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 8px 7px 10px;
  transition: border-color 0.15s;
}
.input-wrapper:focus-within { border-color: var(--border2); }

.message-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  resize: none;
  line-height: 1.5;
  max-height: 160px;
  overflow-y: auto;
}
.message-input::placeholder { color: var(--text3); }

.send-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius);
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}
.send-btn:hover { background: var(--accent2); }
.send-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Stop button ─────────────────────────────────────────────── */
.stop-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.stop-btn:hover { background: #ff6666; }

/* ── Queue display ───────────────────────────────────────────── */
.queue-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text2);
}
.queue-items {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-clear {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 5px;
  border-radius: 4px;
}
.queue-clear:hover { color: var(--red); background: var(--bg4); }

/* ── Attach button ─────────────────────────────────────────── */
.attach-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.attach-btn:hover { background: var(--bg4); color: var(--text2); border-color: var(--border2); }
.attach-btn.has-files { border-color: var(--accent); color: var(--accent); }

/* ── Mic button ────────────────────────────────────────────── */
.mic-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text3);
  border-radius: var(--radius);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  overflow: hidden;
}
.mic-btn:hover { background: var(--bg4); color: var(--text2); border-color: var(--border2); }
.mic-btn.listening {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255,68,68,0.08);
}

.mic-pulse {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: var(--radius);
  background: var(--red);
  opacity: 0;
  display: none;
}
.mic-btn.listening .mic-pulse {
  display: block;
  animation: mic-ring 1.2s ease-out infinite;
}
@keyframes mic-ring {
  0%   { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* voice hint bar */
.input-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--red);
  padding: 4px 2px 0;
}
.hint-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 1s ease-in-out infinite;
}
.hint-dot.active {
  background: #4caf50;
  animation: pulse 0.6s ease-in-out infinite;
}
.input-hint--error {
  color: #e55;
}
.input-hint--error .hint-dot { display: none; }

/* ── Form elements ─────────────────────────────────────────── */
.modal-xs { max-width: 320px; }
.modal-sm { max-width: 420px; }

.form-hint {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.5;
  margin-top: -4px;
}
.form-hint strong { color: var(--text2); }

.modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.5px;
}
.req { color: var(--red); }

.form-input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  resize: vertical;
}
.form-input:focus { border-color: var(--border2); }
.form-input option { background: var(--bg3); }

.emoji-input {
  width: 52px;
  font-size: 18px;
  text-align: center;
  padding: 5px;
}

.btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius);
  padding: 7px 16px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent2); }

/* ── Logs Modal ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  width: 760px;
  max-width: 94vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}

.log-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-all;
}

.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  font-family: var(--font);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-outline:hover { background: var(--bg3); }

/* ── Terminal Bar ──────────────────────────────────────────── */
.terminal-bar {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.terminal-bar-inner {
  height: var(--term-h);
  display: flex;
  flex-direction: column;
  background: #000;
}

.terminal-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.terminal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text2);
}

.terminal-path-label {
  font-size: 11px;
  color: var(--text3);
  flex: 1;
}

.terminal-iframe {
  flex: 1;
  border: none;
  width: 100%;
  background: #000;
}

.terminal-toggle-btn {
  display: block;
  width: 100%;
  background: var(--bg2);
  border: none;
  border-top: none;
  color: var(--text2);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.terminal-toggle-btn:hover { background: var(--bg3); color: var(--text); }
.terminal-toggle-btn.hidden { display: none; }

/* ── Shortcuts Panel ───────────────────────────────────────── */
.shortcuts-panel {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s, min-width 0.2s;
}
.shortcuts-panel.collapsed { width: 0; min-width: 0; }
.shortcuts-panel.collapsed .shortcuts-header,
.shortcuts-panel.collapsed .shortcuts-list { opacity: 0; pointer-events: none; }

/* Tab button visible only when collapsed */
.shortcuts-expand-tab {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 48px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  z-index: 10;
}
.shortcuts-expand-tab:hover { background: var(--bg3); color: var(--text1); }
.shortcuts-panel.collapsed .shortcuts-expand-tab { display: flex; }

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.shortcuts-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text3);
}

.shortcuts-collapse { border: none; padding: 4px; }

.shortcuts-list {
  overflow-y: auto;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shortcut-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 10px 8px;
  transition: border-color 0.15s;
}
.shortcut-card:hover { border-color: var(--border2); }
.shortcut-card.running { border-color: var(--accent); }
.shortcut-card.done    { border-color: var(--green); }
.shortcut-card.task-error { border-color: var(--red); }
.accent-card { border-color: #333322; }
.dim-card { opacity: 0.75; }
.dim-card:hover { opacity: 1; }

.sc-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.sc-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.sc-info { flex: 1; min-width: 0; }

.sc-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-status {
  font-size: 10px;
  margin-top: 3px;
}
.sc-status.idle    { color: var(--text3); }
.sc-status.running { color: var(--accent); animation: pulse 1s ease-in-out infinite; }
.sc-status.done    { color: var(--green); }
.sc-status.error   { color: var(--red); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.sc-actions {
  display: flex;
  gap: 5px;
}

.sc-run-btn {
  flex: 1;
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sc-run-btn:hover:not(:disabled) { background: var(--border2); }
.sc-run-btn:disabled { opacity: 0.35; cursor: default; }
.accent-run {
  background: rgba(238,255,0,0.1);
  border-color: rgba(238,255,0,0.3);
  color: var(--accent);
}
.accent-run:hover:not(:disabled) { background: rgba(238,255,0,0.18); }

.sc-log-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text3);
  padding: 5px 7px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.sc-log-btn:hover { background: var(--bg4); color: var(--text2); }

.task-log-running-badge {
  font-size: 11px;
  color: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

/* ── Per-agent chat containers ─────────────────────────────── */
.agent-chat {
  display: none;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.agent-chat.active { display: flex; }

/* ── Thinking block — collapsible ──────────────────────────── */
.thinking-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--border2);
  padding: 5px 8px;
  border-radius: 0 3px 3px 0;
  margin: 2px 0;
  cursor: pointer;
  user-select: none;
}
.thinking-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.thinking-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text3);
  flex-shrink: 0;
}
.thinking-toggle {
  font-size: 9px;
  color: var(--text3);
}
.thinking-text {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}
.thinking-block.expanded .thinking-text { display: block; }

/* ── Tool output block ─────────────────────────────────────── */
.tc-output {
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  padding: 5px 8px 5px 22px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
  border-left: 2px solid var(--border);
  line-height: 1.5;
}
.tc-stderr {
  color: var(--red);
  border-left-color: var(--red);
}

/* ── Result summary row ────────────────────────────────────── */
.result-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--text3);
  padding: 5px 8px;
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: var(--radius);
  margin-top: 6px;
  flex-wrap: wrap;
}
.result-summary .rs-check { color: var(--green); font-size: 11px; }
.result-summary .rs-cost  { color: var(--text2); }
.result-summary .rs-tok   { color: var(--text2); }
.result-summary .rs-time  { color: var(--text2); }

/* ── AskUserQuestion modal ─────────────────────────────────── */
.ask-modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  width: 540px;
  max-width: 94vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.ask-modal-badge {
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.ask-modal-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ask-q { display: flex; flex-direction: column; gap: 8px; }
.ask-q + .ask-q {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ask-q-chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text2);
  text-transform: uppercase;
  align-self: flex-start;
}
.ask-q-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
.ask-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ask-option-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  user-select: none;
}
.ask-option-btn:hover { background: var(--bg4); }
.ask-option-btn.selected {
  border-color: var(--accent);
  background: rgba(238,255,0,0.06);
}
.ask-option-inner { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ask-option-label { font-size: 12px; font-weight: 600; color: var(--text); }
.ask-option-desc  { font-size: 11px; color: var(--text2); line-height: 1.4; }
.ask-option-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.12s, background 0.12s;
}
.ask-option-btn.selected .ask-option-dot { border-color: var(--accent); background: var(--accent); }
.ask-option-check {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 2px solid var(--border2);
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.12s, background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #000;
  font-weight: 800;
}
.ask-option-btn.selected .ask-option-check { border-color: var(--accent); background: var(--accent); }
.ask-option-btn.selected .ask-option-check::after { content: '✓'; }
.ask-other-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  padding: 0;
  margin-top: 4px;
  width: 100%;
  display: none;
}
.ask-option-btn.other-open .ask-other-input { display: block; }
.ask-text-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.12s;
  width: 100%;
}
.ask-text-input:focus { border-color: var(--accent); }

/* inline placeholder in chat when modal opens */
.ask-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--text2);
  font-size: 11px;
}
.ask-inline-badge {
  width: 18px; height: 18px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.ask-inline.answered { opacity: 0.45; }
.ask-inline-answer { color: var(--text); font-size: 11px; }

/* ── Queued message (pending while agent streams) ───────────── */
.msg.queued-msg {
  opacity: 0.55;
}
.msg.queued-msg .msg-content-stream {
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  padding: 5px 8px;
}
.queued-badge {
  display: inline-flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 5px;
  letter-spacing: 0.3px;
}

/* ── /btw aside message ─────────────────────────────────────── */
.msg.btw-msg .msg-body {
  border-left: 2px solid #f59e0b;
  padding-left: 10px;
}
.btw-label {
  display: inline-flex;
  align-items: center;
  background: rgba(245,158,11,0.12);
  border: 1px solid #f59e0b;
  color: #f59e0b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

/* ── File drop overlay ─────────────────────────────────────── */
.drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(238,255,0,0.07);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1px;
}
.drop-overlay.visible { display: flex; }

/* ── Inline image preview in input ────────────────────────── */
.img-preview-strip {
  display: flex;
  gap: 6px;
  padding: 4px 0 2px;
  flex-wrap: wrap;
}
.img-preview-item {
  position: relative;
}
.img-preview-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border2);
}
.img-preview-item button {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ── File chip in input preview strip ─────────────────────── */
.file-chip-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 4px 8px 4px 6px;
  font-size: 11px;
  color: var(--text2);
  max-width: 200px;
}
.file-chip-icon { flex-shrink: 0; font-size: 13px; }
.file-chip-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}
.file-chip-item button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 10px;
  padding: 0 0 0 2px;
  flex-shrink: 0;
  line-height: 1;
}
.file-chip-item button:hover { color: var(--red); }

/* ── Drag handle on agent items ────────────────────────────── */
.drag-handle {
  font-size: 13px;
  color: var(--text3);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.1s;
  align-self: center;
  flex-shrink: 0;
  padding: 2px 3px;
  user-select: none;
}
.agent-item:hover .drag-handle { opacity: 1; }
.agent-item[draggable="true"] { cursor: default; }
.agent-item[draggable="true"]:active { cursor: grabbing; }
.agent-item.drag-over { border-color: var(--accent); background: rgba(238,255,0,0.05); }

/* ── Main pane relative positioning for drop overlay ───────── */
.main { position: relative; }

/* ── Scroll-to-bottom button ───────────────────────────────── */
.scroll-down-btn {
  position: absolute;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent !important;
  border: 1.5px solid var(--accent) !important;
  color: var(--accent) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 20;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.scroll-down-btn:hover { background: rgba(227,197,107,0.12) !important; border-color: var(--accent) !important; color: var(--accent) !important; }

/* ── Mobile-only topbar buttons (hidden on desktop) ────────── */
.mobile-shortcuts-btn,
.hard-refresh-btn { display: none; }

/* ── Shortcuts mobile drawer backdrop ──────────────────────── */
.shortcuts-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 155;
  cursor: pointer;
}
.shortcuts-backdrop.visible { display: block; }

/* ── Mobile backdrop + back button (base) ──────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  background: rgba(0,0,0,0.6);
  z-index: 149;
  cursor: pointer;
}
.sidebar-backdrop.visible { display: block; }

.mobile-back-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.mobile-back-btn:hover { background: var(--bg3); color: var(--text); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 280px; }

  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    height: calc(100% - var(--topbar-h));
    z-index: 150;
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6);
  }
  .sidebar.mobile-open { transform: translateX(0); }

  .mobile-back-btn { display: flex; }
  .mobile-shortcuts-btn { display: flex; }
  .hard-refresh-btn {
    display: flex;
    border: 1px solid var(--border);
    color: var(--fg2);
    font-weight: 400;
    gap: 5px;
    padding: 4px 10px;
  }
  .hard-refresh-btn:hover { background: var(--bg3); }

  /* Shortcuts panel → bottom drawer on mobile */
  .shortcuts-panel {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    min-width: 100% !important;
    height: auto;
    max-height: 75vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    z-index: 160;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
  }
  .shortcuts-panel.mobile-open { transform: translateY(0) !important; }
  .shortcuts-panel.collapsed {
    width: 100% !important;
    min-width: 100% !important;
    transform: translateY(100%) !important;
  }
  .shortcuts-panel .shortcuts-expand-tab { display: none !important; }
  .shortcuts-panel .shortcuts-list {
    overflow-y: auto;
    max-height: calc(75vh - 44px);
  }
  /* Drag handle pill at top of drawer */
  .shortcuts-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }

  .topbar { padding: 0 8px; }
  .topbar-center { display: none; }
  .server-status { display: none; }
  .messages { padding: 12px; gap: 14px; }
  .input-area { padding: 8px 10px 10px; }
  .scroll-down-btn { bottom: 76px; }
}

@media (max-width: 400px) {
  :root { --sidebar-w: 100vw; }
}

/* ── Business Context Popup ────────────────────────────────── */
.biz-popup {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#bizPopup {
  width: 520px !important;
  max-width: min(520px, 92vw) !important;
  height: auto !important;
  max-height: 80vh !important;
  min-height: 300px !important;
  background: #1a1a1a !important;
  border: 1px solid #444 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

.biz-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.biz-popup-header-left { display: flex; align-items: center; gap: 10px; }

.biz-popup-icon { font-size: 18px; }

.biz-popup-title { font-size: 14px; font-weight: 600; color: var(--text); }

.biz-popup-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }

.biz-status-text { font-size: 11px; color: var(--text2); }

.biz-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--text2);
  word-break: break-word;
}

.biz-chat-log {
  max-height: 160px;
  overflow-y: auto;
  padding: 6px 18px;
  border-top: 1px solid var(--border);
  display: none;
}

/* ── Auto Rules popup cards ─────────────────────────────── */
#autoRulesPopup { width: 640px !important; max-width: min(640px, 96vw) !important; max-height: 85vh !important; }

.ar-global {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.ar-global-stat {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}
.ar-global-stat b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.ar-global-stat span {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.ar-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.ar-rule {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ar-rule-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.ar-filter-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ar-badge {
  font-size: 11px;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: monospace;
  white-space: nowrap;
}
.ar-badge-contains {
  background: rgba(99,179,237,.12);
  color: #63b3ed;
  border: 1px solid rgba(99,179,237,.3);
}
.ar-badge-excludes {
  background: rgba(252,129,74,.1);
  color: #fc8149;
  border: 1px solid rgba(252,129,74,.25);
}
.ar-groups {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ar-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg2);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.ar-group-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  min-width: 14px;
  padding-top: 2px;
  flex-shrink: 0;
}
.ar-group-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ar-tag {
  font-size: 11px;
  color: var(--text2);
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

.biz-log-entry {
  padding: 3px 0;
  font-size: 11px;
}
.biz-log-entry.sent  { color: var(--accent); }
.biz-log-entry.ok    { color: var(--green); }
.biz-log-entry.error { color: var(--red); }

.biz-input-area {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.biz-input-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 768px) {
  #bizOverlay {
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .biz-popup,
  #bizPopup {
    width: 100% !important;
    max-width: 100% !important;
    height: 85vh !important;
    max-height: 85vh !important;
    min-height: 0 !important;
    border-radius: 14px 14px 0 0 !important;
  }
}

/* ── Nav drawer (burger menu) ─────────────────────────────────── */
.nav-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  cursor: pointer;
}
.nav-drawer-backdrop.visible { display: block; }

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--bg2);
  border-right: 1px solid var(--border2);
  z-index: 301;
  display: flex;
  flex-direction: column;
  padding: calc(var(--topbar-h) + 12px) 8px 12px;
  gap: 4px;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  box-shadow: 4px 0 24px rgba(0,0,0,0.6);
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-drawer-item:hover { background: var(--bg3); color: var(--text); }
.nav-drawer-item.active { background: var(--bg3); border-color: var(--border2); color: var(--accent); }
.nav-drawer-icon { font-size: 15px; }

/* ── App pages (Agents / Hourly / Daily) ──────────────────────── */
.app-page { display: none; flex: 1; min-height: 0; overflow: hidden; }
.app-page.active { display: flex; flex-direction: column; }

/* ── Report pages (Hourly/Daily) ──────────────────────────────── */
.report-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--r-tab-border);
  background: var(--r-bg-page);
  flex-shrink: 0;
}
.report-page-title { font-size: 15px; font-weight: 700; color: var(--r-txt-title); }
.report-page-meta { display: flex; align-items: center; gap: 12px; }
.report-updated-at { font-size: 11px; color: var(--r-txt-colhead); }
.report-toast {
  font-size: 11px;
  color: var(--r-green);
  opacity: 0;
  transition: opacity 0.2s;
}
.report-toast.visible { opacity: 1; }

.report-subtabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  background: transparent;
}
.report-subtabs::-webkit-scrollbar { height: 6px; }
.report-subtab { white-space: nowrap; }
.report-subtab {
  background: transparent;
  border: 1px solid var(--r-tab-border);
  border-radius: var(--radius);
  color: var(--r-txt-dim);
  font-family: var(--font);
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.report-subtab:hover { background: var(--r-bg-periods); color: var(--r-txt-default); }
.report-subtab.active {
  background: var(--r-amber);
  border-color: var(--r-amber);
  color: #0e1013;
  font-weight: 600;
}

.report-zoom { display: flex; align-items: center; gap: 2px; }
.report-zoom-btn {
  background: transparent;
  border: 1px solid var(--r-tab-border);
  border-radius: var(--radius);
  color: var(--r-txt-dim);
  font-family: var(--font);
  font-size: 12px;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.report-zoom-btn:hover { background: var(--r-bg-periods); color: var(--r-txt-default); }
.report-zoom-reset {
  background: transparent;
  border: 1px solid var(--r-tab-border);
  border-radius: var(--radius);
  color: var(--r-txt-dim);
  font-family: var(--font);
  font-size: 11px;
  min-width: 42px;
  height: 22px;
  padding: 0 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.report-zoom-reset:hover { background: var(--r-bg-periods); color: var(--r-txt-default); }

.report-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 16px 16px;
  background: var(--r-bg-page);
}
.report-empty {
  color: var(--r-txt-dim);
  font-size: 12px;
  padding: 24px;
  text-align: center;
}

/* Base table — flat tabs (0-23, Ретест, Банери, …) */
.report-table {
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--r-txt-default);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.report-table td {
  border: 1px solid transparent;
  border-bottom: 1px solid var(--r-border-row-p);
  padding: 8px 13px;
  white-space: nowrap;
  background: var(--r-bg-periods);
}
.report-table tr:hover td { filter: brightness(1.1); }
.report-table td.cell-bold { font-weight: 600; color: var(--r-txt-default); }
.report-table td.cell-selected { outline: 2px solid var(--r-amber); outline-offset: -2px; }

/* Sheet meta title ("Скейл • 04.07.2026 …") */
.report-sheet-title {
  color: var(--r-txt-colhead);
  font-size: 11px;
  padding: 0 0 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ── Card layout (Скейл, Скейл Man, Тести, Тотал) ── */
.report-cardsheet { display: flex; flex-direction: column; gap: 34px; }
.report-card { background: transparent; }

/* Campaign header bar */
.report-card-header {
  border-left: 3px solid var(--r-amber);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--r-txt-key);
  background: var(--r-campaign-hdr);
  border-radius: 8px;
  margin-bottom: 10px;
}

.report-card-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
}
.report-card-table-group { flex-shrink: 0; }

/* Panel surfaces */
.report-periods {
  background: var(--r-bg-periods);
  border: 1px solid var(--r-border-periods);
  border-radius: 8px;
  overflow: hidden;
}
.report-banners {
  background: var(--r-bg-banners);
  border: 1px solid var(--r-border-banners);
  border-radius: 8px;
  overflow: hidden;
}

/* Cells inside card panels: transparent so the panel surface shows */
.report-card-table-group .report-table { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.report-card-table-group .report-table td {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--r-border-row-p);
}
.report-banners .report-table td { border-bottom: 1px solid var(--r-border-row-b); }
.report-card-table-group .report-table tr:hover td { filter: brightness(1.08); }

/* Zebra striping (both tables) */
.report-row-even td { background: var(--r-row-zebra) !important; }

/* Summary row ("30 Днів" — first data row of each campaign block) */
.report-row-highlight td {
  background: var(--r-row-highlight) !important;
  color: var(--r-txt-key);
  font-weight: 600;
}

/* Banners panel title row ("Банери (топ 10)") */
.report-panel-title-row td {
  background: var(--r-titlebar-banners);
  color: var(--r-txt-panel-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-bottom: 1px solid var(--r-border-banners) !important;
  padding: 6px 10px;
}

/* Period group headers ("Сьогодні"/"Дні 1–3"/"Дні 4–6"/"7 Днів") */
.report-group-header td {
  background: var(--r-colhead-banners);
  color: var(--r-txt-dim);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--r-border-banners) !important;
  border-right: 1px solid var(--r-border-banners);
  padding: 5px 10px;
}

/* Column-label rows (Spend/CPA/CPM… and Банер/CPA/Покупки/Спенд) */
.report-card-colhead td {
  background: var(--r-colhead-periods);
  color: var(--r-txt-colhead);
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--r-border-periods) !important;
  padding: 5px 10px;
}
.report-banners .report-card-colhead td {
  background: var(--r-colhead-banners);
  border-bottom: 1px solid var(--r-border-banners) !important;
}

/* Periods panel title bar — first cell of the left col-header ("Кампанія / Період") */
.report-periods .report-card-colhead td:first-child {
  background: var(--r-titlebar-periods);
  color: var(--r-txt-panel-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 220px;
}

/* ── Flat report tabs (0-23, Ретест, Банери*, Дольоти, Аудиторія) ── */
.report-table td { background: var(--r-bg-periods); }

/* Sheet meta line (row 1: "0-23 • 04.07 …") */
.report-meta-row td {
  background: var(--r-bg-page);
  color: var(--r-txt-colhead);
  font-size: 11px;
  border-bottom: 1px solid var(--r-tab-border) !important;
  padding: 7px 10px;
}

/* Section bands ("▌ ТОТАЛ", "НОВІ БАНЕРИ …", "▌ ПЛЕЙСМЕНТИ", campaign rows) */
.report-section-row td {
  background: var(--r-campaign-hdr);
  color: var(--r-txt-panel-label);
  font-weight: 700;
  font-size: 11.5px;
  border-top: 1px solid var(--r-border-periods) !important;
  border-bottom: 1px solid var(--r-border-periods) !important;
  padding: 7px 12px;
}

/* Period-group header row (Аудиторія: Сьогодні / Вчора / 3д / 7д) */
.report-group-head-row td {
  color: var(--r-txt-key);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--r-border-periods) !important;
  border-left: 1px solid var(--r-border-periods);
  padding: 5px 10px;
}

/* Recency brightness ramp (gradient B) — applied per column to group headers + data */
.report-table td.report-recency-0 { background: var(--r-recency-0); }
.report-table td.report-recency-1 { background: var(--r-recency-1); }
.report-table td.report-recency-2 { background: var(--r-recency-2); }
.report-table td.report-recency-3 { background: var(--r-recency-3); }

/* ── Banner day-tiles (Скейл/Скейл Man/Тести/Тотал top-10 banners) ── */
.report-banners-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.report-banners-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--r-txt-panel-label); font-weight: 600; padding: 0 2px 2px;
}
.report-banner-tiles { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; }
.report-banner-tile {
  background: var(--r-bg-banners);
  border: 1px solid var(--r-border-banners);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.report-banner-tile .report-table { width: 100%; }
.report-banner-name span {
  display: inline-block; max-width: 230px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}

/* main-period band in the periods table (combo: cool label + gray-blue band) */
.report-period-main td { background: #171d28; }
/* current-hour column highlight (0-23) */
td.report-now-col { background: rgba(245, 158, 11, 0.13); }

/* Аудиторія — per-period tiles: section band + recency-tinted tiles */
.report-tiled { display: flex; flex-direction: column; gap: 28px; }
.report-tiled-section { display: flex; flex-direction: column; gap: 6px; }
.report-section-band {
  background: var(--r-campaign-hdr);
  color: var(--r-txt-key);
  border-left: 3px solid var(--r-amber);
  border-radius: 8px;
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 14px;
  margin-bottom: 4px;
}
.report-banner-tile.rt-0 { background: var(--r-recency-0); }
.report-banner-tile.rt-1 { background: var(--r-recency-1); }
.report-banner-tile.rt-2 { background: var(--r-recency-2); }
.report-banner-tile.rt-3 { background: var(--r-recency-3); }
.report-banner-tile.rt-0 .report-table td,
.report-banner-tile.rt-1 .report-table td,
.report-banner-tile.rt-2 .report-table td,
.report-banner-tile.rt-3 .report-table td { background: transparent; }

/* 0-23 hourly grid: cool category/campaign bands + hours|totals|changes tiles */
.report-hourly { display: flex; flex-direction: column; gap: 6px; }
.report-hourly .report-cat-band { margin-top: 22px; }
.report-cat-band { border-radius: 8px; font-weight: 700; font-size: 12.5px; padding: 8px 14px; }
.report-camp-band { border-radius: 8px; font-weight: 600; font-size: 12px; padding: 6px 14px; margin-top: 6px; }
.report-metric-label { color: var(--r-txt-default); font-weight: 600; }

/* Cells are natively selectable / copyable */
.report-table { user-select: text; -webkit-user-select: text; }

/* Uniform cell height — every row as tall as the tallest ("Покупки") */
.report-table td { height: 36px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; vertical-align: middle; }

/* Strict tile alignment: fixed widths so tiles line up one under another */
.report-banner-tile .report-table { table-layout: fixed; width: 100%; }
.report-tiled .report-banner-nametile { width: 210px; }
.report-tiled .report-banner-tile:not(.report-banner-nametile) { width: 340px; }
.report-card-body .report-banner-nametile { width: 260px; }
.report-card-body .report-banner-tile:not(.report-banner-nametile) { width: 220px; }
.report-hours-tile .report-table { width: auto; }
.report-hours-tile .report-table td { width: 58px; }

.report-totals-tile { width: 380px; }
.report-changes-tile { width: 200px; }

/* 0-23 & Аудиторія scroll as one grid (the wrap scrolls), not each block separately */
.report-hourly .report-banner-tiles,
.report-tiled .report-banner-tiles { overflow-x: visible; }

/* 0-23 single aligned table */
.report-hourly-table { table-layout: fixed; }
.report-hourly-table td.report-group-start { border-left: 2px solid var(--r-tab-border); }
.report-cat-row td { font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; }
.report-camp-row td { font-weight: 600; }

/* Yellow (studio colour) headers with black text everywhere — clear separators */
.report-card-header { background: var(--r-amber); color: #14110a; border-left: none; }
.report-section-band { background: var(--r-amber); color: #14110a; border-left: none; }
.report-group-head-row td { background: var(--r-amber); color: #14110a; }
.report-banners-title { color: var(--r-amber); }

/* ── header/tile revisions ── */
/* 0-23: category groups separated by a bigger gap; headers end at the data */
.report-hourly { display: flex; flex-direction: column; }
.report-hourly-group { display: flex; flex-direction: column; gap: 6px; width: max-content; margin-top: 34px; }
.report-hourly-group:first-of-type { margin-top: 6px; }
.report-hourly-tiles { display: flex; align-items: flex-start; gap: 8px; }
.report-cat-header { background: var(--r-amber); color: #14110a; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 8px; }
.report-camp-header { color: #14110a; font-weight: 600; font-size: 12px; padding: 6px 14px; border-radius: 8px; }

/* Headers stop at the last data column, not the screen edge */
.report-card { width: fit-content; }
.report-tiled-section { width: fit-content; }

/* Flat tabs (Ретест/Банери/Дольоти): rounded, content-width, yellow section bands */
.report-flat { display: inline-block; border: 1px solid var(--r-border-periods); border-radius: 8px; overflow: hidden; }
.report-section-row td { background: var(--r-amber); color: #14110a; }

/* Аудиторія: only the block header is yellow — segment header grey, period names light */
.report-group-head-row td { background: transparent; color: var(--r-txt-dim); }

.report-section-row td.cell-bold { color: #14110a; }
/* all report headers and cells selectable / copyable */
.report-table-wrap, .report-table-wrap * { user-select: text; -webkit-user-select: text; }
/* 0-23 campaign headers same height as the Тотал header */
.report-camp-header { padding: 8px 14px; font-size: 12.5px; }

/* 0-23 tiles: width from colgroup so hours/totals/changes align across every block */
.report-hours-tile .report-table,
.report-totals-tile .report-table,
.report-changes-tile .report-table { width: auto; }

/* 2) flat tabs (Ретест/Банери/Дольоти): separate borders so the rounded wrapper actually clips */
.report-flat .report-table { border-collapse: separate; border-spacing: 0; }
.report-flat .report-table td { border: 0; border-bottom: 1px solid var(--r-border-row-p); }

/* 8) current-hour column: solid fill, no zebra showing through */
td.report-now-col { background: #5c636e !important; }

/* Larger, more legible report font without growing tables (smaller side padding) */
.report-table { font-size: 13.5px; }
.report-table td { padding-left: 9px; padding-right: 9px; }
.report-card-colhead td, .report-group-head-row td { font-size: 12px; }

/* 0-23: single sticky hour-label strip (per-block hour rows removed) */
.report-hourly-sticky { position: sticky; top: 0; z-index: 5; background: var(--r-bg-page); padding-bottom: 4px; }
.report-hourly-group { margin-top: 26px; }

/* sticky hour strip: flush to top + yellow header like everywhere, black text */
.report-sheet-title { padding-top: 14px; }
.report-hourly-sticky { top: 0; background: var(--r-bg-page); }
.report-hourly-sticky .report-banner-tile { border-radius: 10px; }
.report-hourly-sticky .report-card-colhead td { background: var(--r-amber); color: #14110a; }

/* "Немає даних" placeholder rows: plain grey band, not a yellow header */
.report-nodata-row td { background: var(--r-campaign-hdr); color: var(--r-txt-dim); font-weight: 500; }

/* all report data text = the same grey as the tab labels (--r-txt-dim) */
.report-table td { color: var(--r-txt-dim); }
.report-table td.cell-bold { color: var(--r-txt-dim); }

/* flat-tab yellow section headers keep black text (was overridden by the global grey) */
.report-section-row td, .report-section-row td.cell-bold { color: #14110a; }

/* stronger highlight of the row under the cursor */
.report-table td.row-hover { box-shadow: inset 0 2px 0 #9d8a3f, inset 0 -2px 0 #9d8a3f; }

/* No cell grid — rows separated by zebra only; cell borders appear only on selection.
   Removing borders also makes the hover line continuous (no per-cell breaks). */
.report-table td { border: 0 !important; }


/* ══ Creative — Авто/Мануал, tiles, editor modal ═════════════════ */
.creative-filters {
  display: flex; align-items: center; gap: 10px;
  padding: 0; background: transparent; flex: 1; min-width: 0;
}
.cc-track {
  background: transparent; border: 1px solid var(--r-tab-border); border-radius: 8px;
  color: var(--r-txt-dim); font: 12px ui-monospace, Menlo, Consolas, monospace;
  padding: 6px 16px; cursor: pointer;
}
.cc-track.active { background: var(--r-bg-periods); color: var(--r-txt-key); border-color: #4a515b; }
.cc-track:disabled { opacity: .5; cursor: not-allowed; }
.cc-gendraft {
  margin-left: auto; background: var(--r-amber); color: #14110a; border: 0; border-radius: 8px;
  font: 700 12px ui-monospace, Menlo, Consolas, monospace; padding: 8px 16px; cursor: pointer;
}
.cc-gendraft:hover { filter: brightness(1.06); }
.cc-gendraft:disabled { opacity: .6; cursor: not-allowed; }

/* ── tiles: 8 per row, full hook ── */
.creative-wrap {
  flex: 1; overflow: auto; padding: 14px;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; align-content: start;
}
@media (max-width: 1300px) { .creative-wrap { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 1000px) { .creative-wrap { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 640px)  { .creative-wrap { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cc-tile {
  position: relative; cursor: pointer; padding: 8px 9px 10px;
  border-radius: 9px; border: 1.5px solid transparent; background: var(--r-bg-periods);
  display: flex; flex-direction: column; gap: 5px;
  height: 160px; overflow: hidden;
  transition: transform .1s, box-shadow .1s;
}
.cc-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.cc-tile-num { font: 10px ui-monospace, Menlo, Consolas, monospace; color: var(--r-txt-colhead); }
.cc-tile-hook {
  font: 10.5px/1.42 ui-monospace, Menlo, Consolas, monospace; color: var(--r-txt-default);
  overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}
.cc-tile-meta {
  margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
  font: 9.5px ui-monospace, Menlo, Consolas, monospace; color: var(--r-txt-dim);
}
.cc-tile-task {
  background: var(--r-green); color: #0c1a10; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
}

/* ── lifecycle colours ── */
.cc-tile.cc-l-draft { border-left: 3px solid var(--r-amber); }
.cc-tile.cc-l-ready { border-color: #a97be0; background: #1b1524; }
.cc-tile.cc-l-sent  { border-color: var(--r-green); background: #10201a; }
.cc-tile.cc-blink-purple, .cc-tile.cc-blink-green { border-width: 3px; }
.cc-tile.cc-blink-purple { animation: cc-bl-purple .8s ease-in-out infinite; }
.cc-tile.cc-blink-green  { animation: cc-bl-green .8s ease-in-out infinite; }
@keyframes cc-bl-purple {
  0%,100% { border-color: #5a3d7a; box-shadow: 0 0 0 0 rgba(169,123,224,0); }
  50%     { border-color: #e6c6ff; box-shadow: 0 0 0 3px rgba(169,123,224,.55), 0 0 24px 3px rgba(169,123,224,.95); }
}
@keyframes cc-bl-green {
  0%,100% { border-color: #2c6b47; box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  50%     { border-color: #b6ffce; box-shadow: 0 0 0 3px rgba(74,222,128,.5), 0 0 24px 3px rgba(74,222,128,.9); }
}

/* ── modal ── */
.cc-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(4,6,9,.66); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cc-modal {
  width: min(700px, 95vw); max-height: 90vh; overflow: auto;
  background: var(--r-bg-periods); border: 1px solid var(--r-border-periods); border-radius: 14px;
  display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.cc-modal.cc-l-ready { border-top: 3px solid #a97be0; }
.cc-modal.cc-l-sent  { border-top: 3px solid var(--r-green); }
.cc-modal-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--r-border-periods);
}
.cc-modal-close {
  margin-left: 6px; background: transparent; border: 0; color: var(--r-txt-dim);
  font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.cc-modal-close:hover { background: var(--r-bg-banners); color: var(--r-txt-default); }
.cc-modal-body { padding: 13px 16px; display: flex; flex-direction: column; gap: 6px; }
.cc-modal-foot {
  padding: 12px 16px; border-top: 1px solid var(--r-border-periods);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.cc-field-lbl {
  font: 700 9px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .09em;
  color: var(--r-txt-colhead); text-transform: uppercase; margin-top: 6px;
}
.cc-idea { color: var(--r-txt-default); font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.cc-hook-plain {
  color: var(--r-txt-panel-label); font: italic 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace;
  border-left: 2px solid var(--r-amber); padding-left: 9px;
}

/* ── variation tabs ── */
.cc-vtabs { display: flex; gap: 5px; margin-top: 10px; }
.cc-vtab {
  flex: 1; background: var(--r-bg-banners); border: 1px solid var(--r-border-banners); border-radius: 7px;
  color: var(--r-txt-dim); font: 600 11px ui-monospace, Menlo, Consolas, monospace;
  padding: 6px 0; cursor: pointer;
}
.cc-vtab.active { background: var(--r-amber); border-color: var(--r-amber); color: #14110a; }
.cc-vbody { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

/* draft editor dropdowns */
.cc-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.cc-dd { display: flex; flex-direction: column; gap: 3px; }
.cc-dd label {
  font: 700 8.5px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .07em;
  text-transform: uppercase; color: var(--r-txt-colhead);
}
/* custom dropdown (fully themed, replaces native <select>) */
.cc-cddbtn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: var(--r-bg-banners); border: 1px solid var(--r-border-banners); border-radius: 6px;
  color: var(--r-txt-default); font: 11.5px ui-monospace, Menlo, Consolas, monospace;
  padding: 7px 9px; cursor: pointer; text-align: left;
}
.cc-cddbtn:hover { border-color: #4a515b; }
.cc-cddbtn.dis { opacity: .4; cursor: not-allowed; }
.cc-cddbtn-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cddbtn-c { color: var(--r-amber); font-size: 9px; flex: none; }
.cc-cddbtn-author { border-color: var(--r-amber); }
.cc-dd-author { margin-top: 4px; }
.cc-cdd-pop {
  position: fixed; z-index: 1100; max-height: 264px; overflow-y: auto;
  background: var(--r-bg-periods); border: 1px solid var(--r-amber); border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0,0,0,.6); padding: 4px;
}
.cc-cdd-opt {
  padding: 7px 11px; border-radius: 5px; cursor: pointer; white-space: nowrap;
  color: var(--r-txt-default); font: 11.5px ui-monospace, Menlo, Consolas, monospace;
}
.cc-cdd-opt:hover { background: var(--r-bg-banners); }
.cc-cdd-opt.sel { background: var(--r-amber); color: #14110a; font-weight: 600; }

/* ready variation fields — broken into cards */
.cc-gv { display: flex; flex-direction: column; gap: 8px; }
.cc-gv-lbl {
  font: 700 8.5px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .07em;
  text-transform: uppercase; color: var(--r-txt-colhead); margin-bottom: 3px;
}
.cc-gv-val { color: var(--r-txt-dim); font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; }
.cc-gv-card {
  background: var(--r-bg-banners); border: 1px solid var(--r-border-banners);
  border-radius: 8px; padding: 8px 10px;
}
.cc-gv-card.cc-en .cc-gv-val { font-style: normal; color: var(--r-txt-default); font-weight: 500; }
.cc-gv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-gv-grid .cc-gv-card { padding: 7px 9px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chip {
  background: var(--r-bg-banners); border: 1px solid var(--r-border-banners); border-radius: 6px;
  padding: 3px 8px; font: 10.5px ui-monospace, Menlo, Consolas, monospace; color: var(--r-txt-secondary);
}

/* head chips + actions */
.cc-num { color: var(--r-txt-colhead); font: 11.5px ui-monospace, Menlo, Consolas, monospace; }
.cc-angle { background: var(--r-amber); color: #14110a; font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 6px; }
.cc-author { margin-left: auto; color: var(--r-txt-dim); font: 11px ui-monospace, Menlo, Consolas, monospace; }
.cc-action {
  border: 1px solid var(--r-amber); background: var(--r-amber); color: #14110a;
  font: 600 12px ui-monospace, Menlo, Consolas, monospace; padding: 8px 15px; border-radius: 8px; cursor: pointer;
}
.cc-action:disabled { opacity: .5; cursor: not-allowed; }
.cc-action-airtable { border-color: #a97be0; background: #a97be0; color: #12091c; }
.cc-foot-note { color: var(--r-txt-dim); font: 11px ui-monospace, Menlo, Consolas, monospace; }
.cc-foot-err  { color: var(--r-red); font: 11px ui-monospace, Menlo, Consolas, monospace; }
.cc-foot-ok   { color: var(--r-green); font: 600 12px ui-monospace, Menlo, Consolas, monospace; }
.cc-empty-track { grid-column: 1 / -1; text-align: center; color: var(--r-txt-dim); padding: 40px; font: 13px ui-monospace, Menlo, Consolas, monospace; }


/* ── unified line icons (nav + shortcuts + popups) ─────────────── */
.nav-drawer-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:0; }
.nav-drawer-icon svg { width:16px; height:16px; }
.sc-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; color:var(--text2); font-size:0; }
.sc-icon svg { width:16px; height:16px; }
.shortcut-card.accent-card .sc-icon { color:var(--accent); }
.shortcut-card:hover .sc-icon { color:var(--text); }
.biz-popup-icon { display:inline-flex; align-items:center; justify-content:center; color:var(--accent); }
.biz-popup-icon svg { width:20px; height:20px; }

/* ── hide non-essential chrome (project chip, server IP, terminal) ── */
.project-chip, .server-status, .terminal-bar { display: none !important; }


/* ── chat panel grey, rest black (invert) ─────────────────────── */
.topbar, .sidebar, .nav-drawer, .shortcuts-panel { background: var(--bg) !important; }
.main { background: var(--bg2); }

/* ── agent letter-avatars (replace emoji) ─────────────────────── */
.agent-item { align-items: center; }
.agent-item-icon {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 12px; font-weight: 700;
}
.agent-item.active .agent-item-icon { color: var(--accent); border-color: var(--accent); }
.agent-header-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--accent); font-size: 13px; font-weight: 700;
}
.msg.assistant .msg-avatar { color: var(--accent); font-weight: 700; }


/* ── Lucide agent icon sizing ── */
.agent-item-icon svg { width: 15px; height: 15px; }
.agent-header-icon svg { width: 16px; height: 16px; }
.msg-avatar svg { width: 15px; height: 15px; }

/* ── shortcuts styled like agent items (single row, same height, symmetry) ── */
.shortcuts-list { display: flex; flex-direction: column; padding: 6px 6px; gap: 2px; }
.shortcut-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
}
.shortcut-card:hover { background: var(--bg3); border-color: transparent; }
.sc-top { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin-bottom: 0; }
.sc-icon {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text2); font-size: 0;
}
.sc-icon svg { width: 15px; height: 15px; }
.shortcut-card.accent-card .sc-icon { color: var(--accent); border-color: var(--accent); }
.shortcut-card:hover .sc-icon { color: var(--text); }
.sc-info { flex: 1; min-width: 0; }
.sc-name { font-size: 12px; }
.sc-status { font-size: 9px; margin-top: 1px; }
.sc-actions { flex-shrink: 0; gap: 5px; }
.sc-run-btn { flex: none; padding: 5px 10px; font-size: 10.5px; }
.sc-log-btn { padding: 5px 6px; }


/* ── bigger rows to use vertical space + uniform icon boxes ── */
.agent-list, .shortcuts-list { padding: 8px 8px; gap: 4px; }
.agent-item, .shortcut-card { padding: 11px 10px; }
.agent-item-icon, .sc-icon { width: 30px; height: 30px; border-radius: 8px; }
.agent-item-icon svg, .sc-icon svg { width: 16px; height: 16px; }
.agent-item-name, .sc-name { font-size: 12.5px; }

/* Draft icon: drop the special amber, match the rest */
.shortcut-card.accent-card .sc-icon { color: var(--text2); border-color: var(--border2); }
.shortcut-card:hover .sc-icon { color: var(--text); }

/* one uniform action button; remove per-card log burger */
.sc-log-btn { display: none !important; }
.sc-actions { justify-content: flex-end; }
.sc-run-btn { flex: none; min-width: 66px; text-align: center; padding: 6px 10px; }

/* Logs plate under SHORTCUTS header (aligns list start with agents) */
.sc-logs-wrap { position: relative; margin: 8px 8px 0; }
.sc-logs-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; background: transparent; border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text2);
  font: 600 11px var(--font); cursor: pointer; transition: background .15s, color .15s;
}
.sc-logs-btn:hover { background: var(--bg3); color: var(--text); }
.sc-logs-caret { margin-left: auto; }
.sc-logs-menu {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.sc-logs-menu.open { display: block; }
.sc-logs-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--text2); font: 11.5px var(--font); padding: 7px 10px; border-radius: 5px; cursor: pointer;
}
.sc-logs-item:hover { background: var(--bg3); color: var(--text); }

/* ── remove topbar Logs button + Projects tab ── */
#logsBtn { display: none !important; }
.stab[data-tab="projects"] { display: none !important; }

/* ── taller Logs plate so shortcuts list aligns with agents list ── */
.sc-logs-btn { padding: 10px 12px; }

/* ── Creative Авто/Мануал active tab: amber like other site tabs ── */
.cc-track.active { background: var(--r-amber) !important; border-color: var(--r-amber) !important; color: #14110a !important; font-weight: 600; }

/* ── Generate Draft button: centered text, no icon ── */
.cc-gendraft { text-align: center; justify-content: center; }


/* ── Manual track: 3-per-row grid + text fields ── */
.creative-wrap.mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-dd-full { width: 100%; }
.cc-ta {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--r-bg-banners); border: 1px solid var(--r-border-banners); border-radius: 6px;
  color: var(--r-txt-default); font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 7px 9px;
}
.cc-ta:focus { outline: none; border-color: var(--r-amber); }


/* ── User account dropdown ── */
.user-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
  width: 240px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); padding: 6px; cursor: default;
}
.user-menu.open { display: block; }
.user-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); }
.user-menu-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border2); flex-shrink: 0; }
.user-menu-id { min-width: 0; }
.user-menu-name { font: 600 12.5px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-email { font: 11px var(--font); color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-info { padding: 10px 8px; font: 11px var(--font); color: var(--text3); }
.user-menu-logout {
  width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px;
  color: var(--text2); font: 600 12px var(--font); padding: 9px 10px; cursor: pointer; transition: background .12s, color .12s;
}
.user-menu-logout:hover { background: var(--bg3); color: var(--accent); }


/* ── Manual tiles: square-ish with hook/body/cta preview ── */
.creative-wrap.mm-grid .cc-tile { height: 200px; }  /* fixed uniform height; author reserved, overflow clipped (global overflow:hidden) */
.mm-tf { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; }
.mm-tl { font: 700 8px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .09em; color: var(--r-txt-colhead); }
.mm-tv { font: 10.5px/1.35 ui-monospace, Menlo, Consolas, monospace; color: var(--r-txt-default); overflow: hidden; }
.mm-c1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.mm-c2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mm-c3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }


/* ── profile usage table ── */
.um-usage { display: flex; flex-direction: column; gap: 1px; padding: 4px 2px 2px; }
.um-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; font: 11px var(--font); color: var(--text); padding: 3px 6px; }
.um-row span:nth-child(2), .um-row span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.um-row span:nth-child(3) { color: var(--accent); min-width: 44px; }
.um-row.um-head span { color: var(--text3); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }


/* ── Superadmin access panel ── */
.acc-modal { width: min(660px, 95vw); }
.acc-add { display: flex; gap: 8px; margin-bottom: 12px; }
.acc-add input { flex: 1; background: var(--bg3); border: 1px solid var(--border2); border-radius: 7px; color: var(--text); font: 12px var(--font); padding: 8px 10px; }
.acc-add input:focus { outline: none; border-color: var(--accent); }
.acc-add button { background: var(--accent); color: #14110a; border: 0; border-radius: 7px; font: 600 12px var(--font); padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.acc-row { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; }
.acc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.acc-email { font: 600 12.5px var(--font); color: var(--text); }
.acc-owner { font: 700 9px var(--font); letter-spacing: .08em; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 6px; }
.acc-remove { background: transparent; border: 0; color: var(--text3); cursor: pointer; font-size: 14px; }
.acc-remove:hover { color: var(--red); }
.acc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-tg { background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; color: var(--text2); font: 11px var(--font); padding: 5px 10px; cursor: pointer; }
.acc-tg.on { background: var(--accent); border-color: var(--accent); color: #14110a; font-weight: 600; }
.acc-tg:disabled { opacity: .5; cursor: not-allowed; }
.acc-tg.sm { font-size: 10px; padding: 4px 8px; }
.acc-agents { margin-top: 9px; }
.acc-agents summary { font: 11px var(--font); color: var(--text2); cursor: pointer; user-select: none; }
.acc-ag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }


/* ── manual slot clear (trash) ── */
.mm-clear { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--r-txt-dim); cursor: pointer; border-radius: 5px; opacity: .55; transition: opacity .12s, color .12s, background .12s; }
.mm-clear:hover { color: var(--r-red); background: var(--r-bg-banners); opacity: 1; }
.mm-clear svg { width: 14px; height: 14px; }


/* ── daily flat report: rounded amber header bands ── */
.report-flat .report-section-row td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.report-flat .report-section-row td:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.report-flat .report-colhead-amber td { font-weight: 600; }


/* ══ Setup tab ══ */
#page-setup { height: 100%; }
.su-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,0.85fr); gap: 14px; padding: 16px; height: 100%; box-sizing: border-box; }
.su-left, .su-right { display: flex; flex-direction: column; min-height: 0; }
.su-console { flex: 1; overflow-y: auto; background: var(--r-bg-periods); border: 1px solid var(--r-border-periods); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--r-txt-dim); white-space: pre-wrap; }
.su-console-empty { color: var(--r-txt-colhead); font-style: italic; }
.su-msg { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.03); color: var(--text); }
.su-msg-sys { color: var(--accent); }
.su-msg-err { color: var(--r-red, #e06666); }
.su-actions { display: flex; gap: 10px; margin-top: 12px; }
.su-btn { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--r-border-periods); background: var(--r-campaign-hdr); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.su-btn:hover { border-color: var(--accent); }
.su-btn:disabled { opacity: .5; cursor: default; }
.su-btn-test { background: var(--accent); color: #14110a; border-color: var(--accent); }
.su-btn-test:hover { filter: brightness(1.05); }
.su-right .su-banner-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.su-btab { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--r-border-periods); background: var(--r-campaign-hdr); color: var(--r-txt-dim); font-size: 12px; cursor: pointer; }
.su-btab.active { background: var(--accent); color: #14110a; border-color: var(--accent); font-weight: 600; }
.su-banner-body { flex: 1; overflow: auto; }
.su-banner-body td { cursor: pointer; }
/* Mix popup */
.su-mix-modal { max-width: 460px; }
.su-tpl-dd { position: relative; margin-bottom: 6px; }
.su-tpl-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--r-border-periods); background: var(--r-bg-periods); color: var(--text); font-size: 13px; cursor: pointer; }
.su-tpl-list { position: absolute; z-index: 20; left: 0; right: 0; margin-top: 4px; max-height: 260px; overflow-y: auto; background: var(--r-campaign-hdr); border: 1px solid var(--r-border-periods); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.su-tpl-opt { padding: 8px 12px; font-size: 13px; color: var(--r-txt-dim); cursor: pointer; }
.su-tpl-opt:hover { background: var(--r-bg-periods); color: var(--text); }
.su-tpl-opt.sel { color: var(--accent); }
.su-mix-ta { width: 100%; min-height: 140px; box-sizing: border-box; resize: vertical; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--r-border-periods); background: var(--r-bg-periods); color: var(--text); font-size: 13px; font-family: inherit; }
.su-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--r-campaign-hdr); color: var(--text); border: 1px solid var(--accent); padding: 9px 16px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 3000; }
.su-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 900px) { .su-grid { grid-template-columns: 1fr; } }


/* setup: fix layout + fit banner table */
.su-msg { white-space: pre-wrap; }
.su-right { min-width: 0; }
.su-banner-body { min-width: 0; }
.su-banner-body .report-flat { display: block; width: 100%; overflow-x: auto; }
.su-banner-body .report-table { font-size: 11px; }
.su-banner-body .report-table td { padding-left: 6px; padding-right: 6px; height: 30px; }
@media (max-width: 900px) { .su-grid { grid-template-columns: 1fr; } }


/* ── creative idea edit (pencil) ── */
.cc-tile { position: relative; }
.cc-tile-edit { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--r-txt-dim); cursor: pointer; border-radius: 5px; opacity: .55; transition: opacity .12s, color .12s, background .12s; }
.cc-tile-edit:hover { color: var(--accent); background: var(--r-bg-periods); opacity: 1; }
.cc-tile-edit svg { width: 14px; height: 14px; }
.cc-modal-edit { background: transparent; border: 0; color: var(--r-txt-dim); cursor: pointer; padding: 4px; margin-left: 4px; border-radius: 6px; display: inline-flex; align-items: center; }
.cc-modal-edit:hover { color: var(--accent); }
.cc-modal-edit svg { width: 16px; height: 16px; }
.cc-edit .cc-ef { margin-bottom: 10px; }
.cc-edit .cc-ef label { display: block; font-size: 11px; color: var(--r-txt-colhead); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.cc-ef-ta { width: 100%; box-sizing: border-box; min-height: 54px; resize: vertical; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--r-border-periods); background: var(--r-bg-periods); color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.5; }
.cc-ef-ta.cc-en { color: var(--r-txt-dim); }
.cc-ef-in { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--r-border-periods); background: var(--r-bg-periods); color: var(--text); font-size: 13px; font-family: inherit; }
.cc-ef-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }


/* setup mix inline dropdown + time */
.su-left { position: relative; }
.su-mix-panel { position: absolute; left: 0; right: 0; bottom: 60px; max-height: 72%; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; background: var(--r-campaign-hdr); border: 1px solid var(--accent); border-radius: 12px; padding: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.4); z-index: 40; }
.su-mix-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--text); }
.su-mix-x { background: transparent; border: 0; color: var(--r-txt-dim); cursor: pointer; font-size: 15px; line-height: 1; }
.su-mix-x:hover { color: var(--accent); }
.su-mix-go { margin-top: 2px; }
.su-time { color: var(--r-txt-colhead); font-size: 11px; margin-right: 8px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.su-msg { display: flex; align-items: baseline; }
.su-msg .su-text { white-space: pre-wrap; flex: 1 1 auto; min-width: 0; }
.su-banner-body td[data-c='1'] { cursor: pointer; }


/* setup: 3rd column notepad, chat tiles */
.su-mid, .su-note { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.su-msg { display: block; background: var(--r-campaign-hdr); border: 1px solid var(--r-border-periods); border-radius: 9px; padding: 8px 11px; margin-bottom: 8px; }
.su-msg .su-time { display: block; color: var(--r-txt-colhead); font-size: 10.5px; margin-bottom: 3px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.su-msg .su-text { display: block; white-space: pre-wrap; color: var(--text); font-size: 12.5px; line-height: 1.5; }
.su-console { display: block; }
.su-note-head { font-size: 12px; font-weight: 600; color: var(--r-txt-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.su-note-ta { flex: 1; width: 100%; box-sizing: border-box; resize: none; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--r-border-periods); background: var(--r-bg-periods); color: var(--text); font-size: 13px; line-height: 1.6; font-family: inherit; tab-size: 4; }
.su-note-ta:focus { outline: none; border-color: var(--accent); }
@media (max-width: 1100px) { .su-grid { grid-template-columns: 1fr; } .su-note-ta { min-height: 200px; } }


/* adapt: setup banner table fits column (top-left origin); manual grid on small screens */
.su-banner-body { }
.su-banner-body .report-flat { transform-origin: top left; }
@media (max-width: 640px) { .creative-wrap.mm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }


/* tighter hourly column tiles so more columns fit (match Sheets width) */
.report-hourly-tiles { gap: 3px; }


/* center all placeholder dashes in report cells */
.report-table td.report-dash { text-align: center !important; }


/* setup launch logs popup */
.su-logs-modal { max-width: 460px; }
.su-logs-body { max-height: 72vh; overflow-y: auto; padding: 0 !important; }
.su-log-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--r-border-periods); cursor: pointer; font-size: 13px; }
.su-log-row:hover { background: var(--r-bg-periods); }
.su-log-row.empty { cursor: default; }
.su-log-date { font-variant-numeric: tabular-nums; color: var(--text); }
.su-log-row.empty .su-log-date, .su-log-row.empty .su-log-sum { color: var(--r-txt-colhead); }
.su-log-sum { color: var(--r-txt-dim); }
.su-log-detail { padding: 8px 16px 12px; background: var(--r-bg-periods); border-bottom: 1px solid var(--r-border-periods); font-size: 12.5px; }
.su-log-line { color: var(--text); margin: 3px 0; }
.su-log-dim { color: var(--r-txt-colhead); }
.su-log-mix { display: flex; justify-content: space-between; color: var(--r-txt-dim); padding: 2px 0 2px 14px; }
.su-log-mix span { color: var(--accent); font-variant-numeric: tabular-nums; }


/* format dropdown: coming-soon (disabled) options */
.cc-cdd-opt.cc-cdd-soon { opacity: .5; cursor: not-allowed; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cc-cdd-opt.cc-cdd-soon:hover { background: transparent; }
.cc-cdd-soonlbl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--r-txt-colhead); border: 1px solid var(--r-border-periods); border-radius: 4px; padding: 1px 4px; white-space: nowrap; }


/* setup: banner picked for mix */
.su-banner-body td.su-picked { background: rgba(227,197,107,0.22) !important; color: var(--accent) !important; font-weight: 600; }

.report-table td.report-act { text-align: center !important; }


/* ═══ mobile adaptation for recent changes (headers, setup, profile) ═══ */
@media (max-width: 768px) {
  /* merged headers: title+meta on row 1, tabs/filters wrap to row 2 (scrollable) */
  .report-page-header { flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
  .report-page-title { font-size: 14px; }
  .report-subtabs, .creative-filters { order: 5; flex-basis: 100%; }
  .report-page-meta { gap: 8px; flex-wrap: wrap; }
  /* profile menu: pin to viewport so it can't be clipped/pushed off-screen */
  .user-menu { position: fixed; top: calc(var(--topbar-h) + 4px); right: 8px; left: auto; width: min(280px, 92vw); }
  #logsBtn { display: none; }
  /* setup: let the page scroll and give stacked columns real height */
  #page-setup { overflow-y: auto; }
  .su-grid { height: auto; min-height: 100%; grid-template-columns: 1fr; }
  .su-left { position: static; }
  .su-console { min-height: 180px; max-height: 42vh; }
  .su-mix-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; max-height: 70vh; }
  .su-banner-body { min-height: 240px; }
  .su-note-ta { min-height: 200px; }
}


/* ══ Calendar tab ══ */
#page-dashboard { overflow-y: auto; }
.cal-body { display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.cal-grid-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 440px)); gap: 20px; justify-content: start; }
.cal-month { background: var(--r-bg-periods); border: 1px solid var(--r-border-periods); border-radius: 14px; padding: 14px 14px 16px; }
.cal-month-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; }
.cal-weekdays div { text-align: center; font-size: 9px; color: var(--r-txt-colhead); text-transform: uppercase; letter-spacing: .03em; }
.cal-grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cell { position: relative; aspect-ratio: 1 / 1; min-height: 50px; border-radius: 9px; border: 1px solid var(--r-border-periods); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: border-color .1s, transform .05s; }
.cal-cell:hover:not(.cal-blank):not(.cal-nodata) { border-color: var(--accent); }
.cal-cell.sel { outline: 2px solid var(--accent); outline-offset: -2px; border-color: var(--accent); }
.cal-cell.cal-blank { border: 0; background: transparent; cursor: default; }
.cal-cell.cal-nodata { border-color: transparent; background: transparent; cursor: default; }
.cal-dn { position: absolute; top: 4px; left: 6px; font-size: 9px; color: var(--r-txt-colhead); font-variant-numeric: tabular-nums; }
.cal-cell.cal-nodata .cal-dn { color: var(--r-border-row-p, #2a3038); }
.cal-cpa { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cal-sp { font-size: 9.5px; color: var(--r-txt-dim); font-variant-numeric: tabular-nums; margin-top: 1px; }

.cal-summary { border-top: 1px solid var(--r-border-periods); padding-top: 16px; }
.cal-sum-empty { color: var(--r-txt-dim); font-size: 13px; padding: 8px 2px; }
.cal-sum-head { font-size: 12px; color: var(--r-txt-dim); margin-bottom: 12px; }
.cal-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cal-metric { background: var(--r-bg-periods); border: 1px solid var(--r-border-periods); border-radius: 12px; padding: 12px 14px; }
.cal-metric-lbl { font-size: 10px; color: var(--r-txt-colhead); text-transform: uppercase; letter-spacing: .04em; }
.cal-metric-val { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 4px; }
.cal-sum-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cal-sum-block { background: var(--r-bg-periods); border: 1px solid var(--r-border-periods); border-radius: 12px; padding: 14px 16px; }
.cal-block-title { font-size: 10.5px; color: var(--r-txt-colhead); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.cal-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--r-txt-dim); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.cal-kv:last-child { border-bottom: 0; }
.cal-kv b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.cal-kv.cal-geo { display: grid; grid-template-columns: 1fr auto auto; align-items: center; }
.cal-geo > span { color: var(--r-txt-key); font-weight: 600; }
.cal-geo b { min-width: 78px; text-align: right; }
.cal-geo-cpa { min-width: 60px; }
@media (max-width: 768px) { .cal-grid-wrap { grid-template-columns: 1fr; } }


/* calendar: compare (period B) + comparison table */
.cal-cell.selB { box-shadow: inset 0 0 0 2px hsl(210, 90%, 62%); }
#calCompareBtn.active { background: hsl(210, 90%, 62%) !important; color: #08111c !important; border-color: hsl(210, 90%, 62%) !important; }
.cal-cmp-table { border: 1px solid var(--r-border-periods); border-radius: 12px; overflow: hidden; }
.cal-cmp-head, .cal-cmp-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.8fr; gap: 10px; padding: 9px 14px; align-items: center; }
.cal-cmp-head { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--r-txt-colhead); background: var(--r-campaign-hdr); }
.cal-cmp-head span:not(:first-child) { text-align: right; }
.cal-cmp-row { border-top: 1px solid var(--r-border-periods); font-size: 13px; }
.cal-cmp-lbl { color: var(--r-txt-dim); }
.cal-cmp-row b { text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-cmp-d { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-dim { color: var(--r-txt-dim); }


/* calendar: 2-month pager */
.cal-grid-outer { display: flex; flex-direction: column; gap: 12px; }
.cal-nav { display: flex; align-items: center; gap: 14px; }
.cal-nav-lbl { font-size: 13px; font-weight: 600; color: var(--text); min-width: 200px; }
.cal-nav-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--r-border-periods); background: var(--r-bg-periods); color: var(--text); font-size: 16px; cursor: pointer; line-height: 1; }
.cal-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-nav-btn:disabled { opacity: .35; cursor: default; }


/* calendar: adjacent-month filler cells (grey, diagonal hatch) */
.cal-cell.cal-outside { border-color: transparent; background: transparent; cursor: default; position: relative; background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,.10) 4px, rgba(255,255,255,.10) 6px); }
.cal-out-num { font-size: 12px; color: #4a515b; font-variant-numeric: tabular-nums; }


/* calendar: no-data days within a month also hatched (treated as non-existent) */
.cal-cell.cal-nodata { background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,.10) 4px, rgba(255,255,255,.10) 6px); }
.cal-cell.cal-nodata .cal-dn { color: #4a515b; }

.cal-grid-outer, .cal-nav { user-select: none; -webkit-user-select: none; }


/* calendar summary tabs + tables */
.cal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.cal-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--r-border-periods); background: var(--r-bg-periods); color: var(--r-txt-dim); font-size: 12px; cursor: pointer; }
.cal-tab.active { background: var(--accent); color: #14110a; border-color: var(--accent); font-weight: 600; }
.cal-tbl { border: 1px solid var(--r-border-periods); border-radius: 12px; overflow: hidden; }
.cal-tr { display: grid; grid-template-columns: 1.4fr repeat(7, 1fr); gap: 8px; padding: 8px 14px; align-items: center; font-size: 13px; border-top: 1px solid var(--r-border-periods); }
.cal-tbl-cmp .cal-tr { grid-template-columns: 1fr 1.6fr 1.6fr 0.8fr 1.2fr; }
.cal-tr:first-child { border-top: 0; }
.cal-th { background: var(--r-campaign-hdr); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--r-txt-colhead); }
.cal-tr > span { color: var(--r-txt-key); font-weight: 600; }
.cal-tr > b { text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-th > b { color: var(--r-txt-colhead); font-weight: 400; }
.cal-tr .cal-cmp-d { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-st { background: var(--r-bg-periods); border: 1px solid var(--r-border-periods); border-radius: 12px; padding: 14px; margin-top: 4px; max-width: 520px; }
.cal-st-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.04); }
.cal-st-row:last-child { border-bottom: 0; }
.cal-st-row > span { color: var(--r-txt-dim); }
.cal-st-row > b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-st-row i { color: var(--r-txt-colhead); font-style: normal; font-size: 11px; }


/* calendar: cap table widths so compare/tables don't stretch full-screen */
.cal-cmp-table { max-width: 780px; }
.cal-tbl { max-width: 960px; }
.cal-tbl-cmp { max-width: 900px; }


/* calendar: hard-cap tab content width + left align (no full-screen stretch) */
.cal-tab-body { max-width: 1320px; }
.cal-tab-body .cal-cmp-table, .cal-tab-body .cal-tbl { max-width: 100%; }
.cal-cmp-head, .cal-cmp-row { grid-template-columns: 1.3fr 1fr 1fr 0.7fr; }
.cal-tbl-cmp .cal-tr { grid-template-columns: 0.7fr 1.5fr 0.6fr 1.5fr 0.6fr; }


/* calendar geo: two tables, columnar */
.cal-geo-sp .cal-tr { grid-template-columns: 0.9fr 1fr 0.7fr; }
.cal-geo-spc .cal-tr { grid-template-columns: 0.7fr 1fr 0.6fr 1fr 0.6fr 0.7fr; }
.cal-geo-cpa .cal-tr { grid-template-columns: 0.9fr 1fr; }
.cal-geo-cpac .cal-tr { grid-template-columns: 0.9fr 1fr 1fr 0.8fr; }
.cal-geo-sp, .cal-geo-cpa { max-width: 460px; }
.cal-geo-spc, .cal-geo-cpac { max-width: 720px; }


/* calendar: geo tables side-by-side + denser rows */
.cal-geo-row { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.cal-geo-col { min-width: 0; }
.cal-tr { padding: 5px 12px !important; font-size: 12px; }
.cal-th { padding: 5px 12px !important; }


/* calendar: sector mini-tables, several per row */
.cal-sec-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cal-sec-row > div { min-width: 0; }
.cal-mt { min-width: 240px; }
.cal-mt4 .cal-tr { grid-template-columns: 0.8fr 1fr 1fr 0.8fr; }
.cal-sp3 .cal-tr { grid-template-columns: 0.9fr 1fr 0.7fr; }
.cal-sp5 .cal-tr { grid-template-columns: 0.7fr 1fr 0.5fr 1fr 0.5fr 0.7fr; }
.cal-cpa2 .cal-tr { grid-template-columns: 0.9fr 1fr; }
.cal-cpa4 .cal-tr { grid-template-columns: 0.9fr 1fr 1fr 0.8fr; }
.cal-mk-single .cal-tr { grid-template-columns: 0.9fr repeat(9, 1fr); }
.cal-sp3, .cal-cpa2, .cal-mt4, .cal-cpa4 { max-width: 380px; }
.cal-sp5 { max-width: 460px; }
.cal-mk-single { max-width: 960px; }


/* calendar geo compare: narrow 3-col tables */
.cal-g3 .cal-tr { grid-template-columns: 0.7fr 1fr 0.55fr 0.7fr; }
.cal-g3 { max-width: 340px; }


/* calendar: calendar left, stats right */
.cal-body { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 26px; align-items: start; }
.cal-grid-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cal-summary { border-top: 0 !important; padding-top: 0 !important; }
.cal-tab-body { max-width: 100%; }
@media (max-width: 1300px) { .cal-body { grid-template-columns: 1fr; } }


/* calendar two-column: clamp right side, no horizontal bleed */
#page-dashboard { overflow-x: hidden; }
.cal-summary, .cal-tab-body, .cal-metrics, .cal-sec-row, .cal-metric, .cal-mt { min-width: 0; }
.cal-metrics { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }


/* calendar: single continuous strip */
.cal-strip-wk, .cal-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-strip-wk { margin-bottom: 6px; }
.cal-strip-wk div { text-align: center; font-size: 9px; color: var(--r-txt-colhead); text-transform: uppercase; letter-spacing: .03em; }
.cal-mlabel { position: absolute; top: 3px; right: 5px; font-size: 8px; font-weight: 700; color: var(--accent); text-transform: uppercase; }


/* calendar: month sections in one grid (band divider + weekday header) */
.cal-wk-cell { text-align: center; font-size: 9px; color: var(--r-txt-colhead); text-transform: uppercase; letter-spacing: .03em; padding-bottom: 2px; }
.cal-mband { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--text); padding: 12px 2px 6px; border-top: 1px solid var(--r-border-periods); margin-top: 8px; }
.cal-strip > .cal-mband:first-of-type { border-top: 0; margin-top: 4px; }


/* calendar: A|B group divider inside merged spend table */
.cal-tr > .cal-sep { border-left: 1px solid var(--r-border-periods); padding-left: 12px; }


/* calendar: continuous solid dividers (move row vpadding onto cells so border spans full height) */
.cal-tr { padding-top: 0 !important; padding-bottom: 0 !important; }
.cal-tr > span, .cal-tr > b { padding-top: 6px; padding-bottom: 6px; box-sizing: border-box; }
.cal-cmp-head, .cal-cmp-row { padding-top: 0 !important; padding-bottom: 0 !important; }
.cal-cmp-head > span, .cal-cmp-row > span, .cal-cmp-row > b { padding-top: 9px; padding-bottom: 9px; box-sizing: border-box; }
.cal-sep { border-left: 1px solid var(--r-border-periods) !important; padding-left: 12px !important; }


/* geo 3-table widths */
.cal-g2 .cal-tr { grid-template-columns: 0.9fr 1fr; }
.cal-g3c .cal-tr { grid-template-columns: 0.7fr 1fr 1fr 0.8fr; }
.cal-g2 { max-width: 300px; }
.cal-g3c { max-width: 380px; }

/* calendar: compact cells so all months fit one screen height */
.cal-cell { aspect-ratio: auto !important; height: 44px !important; min-height: 44px !important; padding: 2px 3px !important; gap: 0 !important; }
.cal-dn { font-size: 8px !important; top: 2px !important; left: 4px !important; }
.cal-cpa { font-size: 11px !important; line-height: 1.05 !important; }
.cal-sp { font-size: 8px !important; margin-top: 0 !important; }
.cal-out-num { font-size: 10px !important; }
.cal-strip { gap: 4px !important; }
.cal-mband { padding: 8px 2px 3px !important; margin-top: 5px !important; font-size: 11px !important; }


/* bigger fonts inside calendar cells (same 44px cell height) */
.cal-dn { font-size: 10px !important; }
.cal-cpa { font-size: 14px !important; line-height: 1.0 !important; }
.cal-sp { font-size: 10px !important; }
.cal-out-num { font-size: 12px !important; }


/* push cpa+spend down within cell (day# stays top-left) */
.cal-cell { justify-content: flex-end !important; padding-bottom: 5px !important; }


/* === proper tables: stretch cells so column dividers are continuous (no floating sticks) === */
.cal-tr, .cal-cmp-head, .cal-cmp-row { align-items: stretch !important; }
/* more breathing room in sector tables */
.cal-tr { padding-left: 14px !important; padding-right: 14px !important; font-size: 13px !important; }
.cal-tr > span, .cal-tr > b, .cal-tr > .cal-cmp-d { padding-top: 8px !important; padding-bottom: 8px !important; }
.cal-cmp-head > span, .cal-cmp-row > span, .cal-cmp-row > b, .cal-cmp-row > .cal-cmp-d { padding-top: 10px !important; padding-bottom: 10px !important; }
/* bigger marketer + audience tables */
.cal-mt4 { max-width: 460px !important; }
.cal-cpa4 { max-width: 440px !important; }
.cal-sp5 { max-width: 540px !important; }
/* overview: narrower table + tighter gap between metric name and first column */
.cal-tab-body .cal-cmp-table { max-width: 760px !important; }
.cal-cmp-head, .cal-cmp-row { grid-template-columns: 1.15fr 1fr 1fr 0.85fr !important; }


/* combined Скейл / Тести table: wider label col + group separator before Тести */
.cal-st2 { max-width: 400px !important; }
.cal-st2 .cal-tr { grid-template-columns: 1.3fr 1fr 1fr 0.75fr !important; }
.cal-tr.cal-grp { border-top: 2px solid var(--r-txt-colhead) !important; }


/* ===== Interactive Calendar: compact date-range picker + heatmap ribbon ===== */
.cal-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:relative; margin:4px 0 16px; }
.cal-ctl-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cal-pick { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1px; background:var(--r-campaign-hdr); border:1px solid var(--r-border-periods); border-radius:10px; padding:7px 30px 7px 14px; cursor:pointer; min-width:150px; }
.cal-pick:hover { border-color:var(--r-txt-key); }
.cal-pick-lbl { font-size:13px; font-weight:700; color:var(--text); }
.cal-pick-sub { font-size:10px; color:var(--r-txt-colhead); font-variant-numeric:tabular-nums; }
.cal-pick-caret { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--r-txt-colhead); font-size:11px; }
.cal-pick-b { border-style:dashed; }
.cal-cmp-toggle { background:transparent; border:1px dashed var(--r-border-periods); border-radius:10px; padding:10px 14px; font-size:12px; color:var(--r-txt-key); cursor:pointer; }
.cal-cmp-toggle:hover { border-color:var(--r-txt-key); color:var(--text); }
.cal-cmp-vs { font-size:11px; color:var(--r-txt-colhead); text-transform:uppercase; letter-spacing:.05em; }
.cal-icon-btn { background:transparent; border:1px solid var(--r-border-periods); border-radius:9px; width:34px; height:34px; color:var(--r-txt-colhead); cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.cal-icon-btn:hover { color:var(--text); border-color:var(--r-txt-key); }
.cal-reset { margin-left:auto; }

/* popover */
.cal-pop { position:absolute; top:100%; left:0; margin-top:8px; z-index:60; background:var(--r-campaign-hdr,#15171c); border:1px solid var(--r-border-periods); border-radius:14px; padding:14px; display:flex; gap:16px; box-shadow:0 16px 48px rgba(0,0,0,.55); }
.cal-pop-presets { display:flex; flex-direction:column; gap:2px; min-width:158px; border-right:1px solid var(--r-border-periods); padding-right:12px; }
.cal-preset { text-align:left; background:transparent; border:0; border-radius:8px; padding:8px 12px; font-size:13px; color:var(--r-txt-key); cursor:pointer; }
.cal-preset:hover { background:var(--r-border-periods); color:var(--text); }
.cal-preset.active { background:var(--accent); color:#14110a; font-weight:700; }
.cal-pop-cals { display:flex; align-items:center; gap:10px; }
.cal-mini-nav { background:transparent; border:1px solid var(--r-border-periods); border-radius:8px; width:28px; height:28px; color:var(--r-txt-key); cursor:pointer; }
.cal-mini-nav:disabled { opacity:.3; cursor:default; }
.cal-mini-hd { font-size:12px; font-weight:700; color:var(--text); text-align:center; margin-bottom:8px; }
.cal-mini-grid { display:grid; grid-template-columns:repeat(7,28px); gap:2px; }
.cal-mini-wk { font-size:9px; color:var(--r-txt-colhead); text-align:center; height:15px; line-height:15px; }
.cal-mini-d { width:28px; height:28px; border:0; background:transparent; color:var(--text); font-size:11px; border-radius:7px; cursor:pointer; font-variant-numeric:tabular-nums; padding:0; }
.cal-mini-d:hover { background:var(--r-border-periods); }
.cal-mini-empty { visibility:hidden; }
.cal-mini-dis { color:var(--r-txt-dim); opacity:.3; cursor:default; }
.cal-mini-dis:hover { background:transparent; }
.cal-mini-in { background:hsla(210,90%,60%,.20); border-radius:0; }
.cal-mini-s { background:hsl(210,90%,60%); color:#fff; font-weight:700; border-radius:7px 0 0 7px; }
.cal-mini-e { background:hsl(210,90%,60%); color:#fff; font-weight:700; border-radius:0 7px 7px 0; }
.cal-mini-s.cal-mini-e { border-radius:7px; }

/* heatmap ribbon */
.cal-ribbon-wrap { overflow-x:auto; margin-bottom:20px; padding-bottom:4px; }
.cal-ribbon { display:flex; gap:3px; align-items:flex-end; min-width:min-content; padding:2px; }
.cal-rb { position:relative; flex:0 0 20px; width:20px; height:40px; border:0; background:transparent; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
.cal-rb.rb-mstart { margin-left:9px; }
.cal-rb-fill { width:100%; height:26px; border-radius:4px; background:var(--rbc); opacity:.82; transition:opacity .12s, transform .12s; }
.cal-rb:hover .cal-rb-fill { opacity:1; transform:scaleY(1.08); }
.cal-rb-day { font-size:8px; color:var(--r-txt-colhead); font-variant-numeric:tabular-nums; }
.cal-rb.rb-a .cal-rb-fill { outline:2px solid #fff; outline-offset:1px; }
.cal-rb.rb-a .cal-rb-day { color:var(--text); font-weight:700; }
.cal-rb.rb-b .cal-rb-fill { outline:2px dashed hsl(210,90%,65%); outline-offset:1px; }
.cal-rb.rb-b .cal-rb-day { color:hsl(210,90%,65%); font-weight:700; }


/* calendar page: give content breathing room from edges */
#page-dashboard { padding: 16px 26px 32px; box-sizing: border-box; }
@media (max-width:700px){ #page-dashboard { padding: 12px 14px 24px; } }


/* ===== ribbon v2: month labels + dividers + spend/CPA per day ===== */
.cal-ribbon { display:flex; gap:0; align-items:flex-start; min-width:min-content; padding:2px; }
.cal-rb-mo { display:flex; flex-direction:column; gap:7px; padding:0 12px; border-left:1px solid var(--r-border-periods); }
.cal-rb-mo:first-child { border-left:0; padding-left:2px; }
.cal-rb-molbl { font-size:11px; font-weight:700; color:var(--text); letter-spacing:.02em; padding-left:2px; text-transform:uppercase; }
.cal-rb-row { display:flex; gap:3px; }
.cal-rb { flex:0 0 34px; width:34px; height:52px; border:1.5px solid transparent; border-radius:7px; padding:4px 0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; transition:transform .1s; background:transparent; }
.cal-rb:hover { transform:translateY(-2px); }
.cal-rb-day { font-size:8px; color:var(--r-txt-colhead); font-variant-numeric:tabular-nums; line-height:1; }
.cal-rb-cpa { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15; }
.cal-rb-sp { font-size:8px; color:var(--r-txt-dim); font-variant-numeric:tabular-nums; line-height:1; }
.cal-rb.rb-a { border-color:#fff; }
.cal-rb.rb-b { border-color:hsl(210,90%,65%); border-style:dashed; }


/* ribbon v3: date above the cell, bigger CPA/spend inside */
.cal-rb-row { display:flex; gap:4px; align-items:flex-start; }
.cal-rb-cell { display:flex; flex-direction:column; align-items:center; gap:3px; }
.cal-rb-cell > .cal-rb-day { font-size:9px; color:var(--r-txt-colhead); font-variant-numeric:tabular-nums; line-height:1; }
.cal-rb { flex:0 0 42px; width:42px; height:46px; border:1.5px solid transparent; border-radius:8px; padding:4px 0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:transparent; transition:transform .1s; }
.cal-rb:hover { transform:translateY(-2px); }
.cal-rb-cpa { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.cal-rb-sp { font-size:10px; color:var(--r-txt-dim); font-variant-numeric:tabular-nums; line-height:1; }
.cal-rb.rb-a { border-color:#fff; }
.cal-rb.rb-b { border-color:hsl(210,90%,65%); border-style:dashed; }


/* compare: active edit-target highlight + ribbon hint */
.cal-pick-active { border-color:#fff !important; box-shadow:0 0 0 2px rgba(255,255,255,.22); }
.cal-pick-b.cal-pick-active { border-color:hsl(210,90%,65%) !important; border-style:solid !important; box-shadow:0 0 0 2px hsla(210,90%,65%,.32); }
.cal-ribbon { display:block; }
.cal-rb-strip { display:flex; gap:0; align-items:flex-start; min-width:min-content; }
.cal-rb-hint { font-size:11px; color:var(--r-txt-colhead); margin:0 0 9px 2px; }
.cal-rb-hint-dim { color:var(--r-txt-dim); font-size:10px; }


/* wide tables (banners / format) — real <table>, continuous collapsed borders */
.cal-wide-wrap { overflow-x:auto; margin-bottom:10px; }
.cal-wide { border-collapse:collapse; font-size:12px; }
.cal-wide th, .cal-wide td { padding:7px 12px; border:1px solid var(--r-border-periods); white-space:nowrap; text-align:left; }
.cal-wide th { background:var(--r-campaign-hdr); color:var(--r-txt-colhead); font-size:10px; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.cal-wide th.num, .cal-wide td.num { text-align:right; font-variant-numeric:tabular-nums; }
.cal-wide td > b { color:var(--text); font-weight:700; }
.cal-wide tbody tr:first-child td { background:rgba(255,255,255,.03); }
.cal-wide tbody tr:hover td { background:rgba(255,255,255,.05); }
.cal-bn-name { display:inline-block; overflow:visible; vertical-align:bottom; color:var(--r-txt-key); }


/* popover: tile heatmap month-calendar (replaces plain mini-cal + always-on ribbon) */
.cal-pop { flex-direction:column; gap:12px; max-width:92vw; overflow:auto; }
.cal-pop-hd { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.cal-pop-body { display:flex; gap:16px; align-items:flex-start; }
.cal-cmini .cal-mini-hd { font-size:12px; font-weight:700; color:var(--text); text-align:center; margin-bottom:8px; }
.cal-cmini-grid { display:grid; grid-template-columns:repeat(7,42px); gap:3px; }
.cal-cmini-wk { font-size:9px; color:var(--r-txt-colhead); text-align:center; height:14px; line-height:14px; }
.cal-ctile { width:42px; height:42px; border:1.5px solid transparent; border-radius:8px; padding:2px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; background:transparent; transition:transform .1s; }
.cal-ct-empty { visibility:hidden; }
.cal-ct-dis { opacity:.32; cursor:default; }
.cal-ct-d { font-size:8px; color:var(--r-txt-colhead); line-height:1; }
.cal-ct-cpa { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.05; }
.cal-ctile:not(.cal-ct-dis):not(.cal-ct-empty):hover { transform:translateY(-1px); }
.cal-ct-in { box-shadow: inset 0 0 0 1.5px var(--ring); }
.cal-ct-s, .cal-ct-e { border-color: var(--ring) !important; }


/* compare picker: the other (already-chosen) period shown locked */
.cal-ct-lock { opacity:.5; cursor:not-allowed; border:1.5px dashed var(--oring); }
.cal-ct-lock .cal-ct-cpa, .cal-ct-lock .cal-ct-d { filter:grayscale(.3); }


/* popover header legend */
.cal-pop-hd { display:flex; align-items:center; gap:14px; }
.cal-pop-leg { font-size:10px; color:var(--r-txt-dim); font-weight:400; text-transform:none; letter-spacing:0; }
.cal-pop-leg::before { content:''; display:inline-block; width:14px; height:9px; border:1.5px dashed var(--r-txt-dim); border-radius:3px; margin-right:5px; vertical-align:middle; }


/* bigger picker tiles to fit day + CPA + spend */
.cal-cmini-grid { grid-template-columns:repeat(7,58px) !important; gap:4px !important; }
.cal-ctile { width:58px !important; height:56px !important; gap:2px !important; padding:4px 0 !important; }
.cal-ct-d { font-size:9px !important; }
.cal-ct-cpa { font-size:14px !important; }
.cal-ct-sp { font-size:9px; color:var(--r-txt-dim); font-variant-numeric:tabular-nums; line-height:1; }

/* ================= UNIFIED CALENDAR DASHBOARD (consolidated) ================= */
.cal-sec-title { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--r-txt-colhead); margin:20px 0 8px; padding-left:2px; }
.cal-tab-body > .cal-sec-title:first-child { margin-top:2px; }
.cal-sec-note { font-size:11px; color:var(--r-txt-dim); margin:8px 0 0 2px; }

/* PANEL */
.cal-mt { background:var(--r-bg-periods) !important; border:1px solid var(--r-border-periods) !important; border-radius:10px !important; overflow:hidden !important; max-width:none !important; min-width:0; margin:0; }
.cal-mt .cal-block-title, .cal-st > .cal-block-title { background:var(--r-campaign-hdr); color:var(--r-txt-key); font-size:11px !important; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:10px 14px !important; margin:0 !important; border-bottom:1px solid var(--r-border-periods); display:flex; align-items:center; }

/* GRID tables inside panel */
.cal-mt .cal-tbl { border:0 !important; border-radius:0 !important; max-width:none !important; }
.cal-tbl .cal-tr { border-top:1px solid var(--r-border-row-p) !important; }
.cal-tbl .cal-tr.cal-th { border-top:0 !important; background:var(--r-colhead-periods) !important; }
.cal-tbl .cal-tr:not(.cal-th):hover { background:var(--r-row-highlight); }

/* WIDE tables inside panel */
.cal-mt .cal-wide-wrap { margin:0 !important; }
.cal-wide { width:100%; border-collapse:collapse; }
.cal-wide th { background:var(--r-colhead-periods) !important; color:var(--r-txt-colhead) !important; border-color:var(--r-border-row-p) !important; border-top:0 !important; }
.cal-wide td { border-color:var(--r-border-row-p) !important; background:transparent !important; }
.cal-wide tbody tr:first-child td { background:rgba(255,255,255,.025) !important; }
.cal-wide tbody tr:hover td { background:var(--r-row-highlight) !important; }
.cal-wide tr > *:first-child { border-left:0 !important; }
.cal-wide tr > *:last-child { border-right:0 !important; }

/* LAYOUT: pack panels, no holes */
.cal-sec-row { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)) !important; gap:14px !important; align-items:start !important; }
.cal-sec-row > div, .cal-sec-row > .cal-mt { min-width:0; }
.cal-tab-body { max-width:100% !important; }
.cal-tab-body > .cal-mt { margin-bottom:14px; }

/* period A/B badges */
.cal-per { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:5px; font-size:10px; font-weight:800; margin-right:8px; flex:0 0 auto; }
.cal-per-a { background:#e9edf2; color:#14181d; }
.cal-per-b { background:hsl(210,90%,60%); color:#fff; }

/* comparison divider */
.cal-tr > .cal-sep { border-left:1px solid var(--r-border-periods) !important; }

/* metric cards */
.cal-metrics { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)) !important; gap:12px !important; margin-bottom:16px !important; }
.cal-metric { background:var(--r-bg-periods) !important; border:1px solid var(--r-border-periods) !important; border-radius:10px !important; padding:13px 15px !important; }
.cal-metric-val { font-size:21px !important; }

/* scale/tests panel */
.cal-st { background:var(--r-bg-periods) !important; border:1px solid var(--r-border-periods) !important; border-radius:10px !important; padding:0 !important; overflow:hidden; max-width:520px; }
.cal-st .cal-st-row { padding:8px 14px !important; }
.cal-st .cal-st-row:not(:last-child) { border-bottom:1px solid var(--r-border-row-p) !important; }

/* tabs = segmented control */
.cal-tabs { display:inline-flex !important; flex-wrap:wrap; gap:3px !important; background:var(--r-bg-periods); border:1px solid var(--r-border-periods); border-radius:10px; padding:4px !important; margin:12px 0 16px !important; }
.cal-tab { border:0 !important; background:transparent !important; color:var(--r-txt-dim) !important; border-radius:7px !important; padding:6px 13px !important; }
.cal-tab.active { background:var(--accent) !important; color:#14110a !important; font-weight:700 !important; }
.cal-tab:not(.active):hover { color:var(--r-txt-key) !important; background:var(--r-row-highlight) !important; }

/* summary head */
.cal-sum-head { font-size:12px; color:var(--r-txt-key); margin-bottom:2px; font-weight:600; }


/* Overview Scale/Tests -> two balanced cards filling the row */
.cal-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:680px){ .cal-split { grid-template-columns:1fr; } }
.cal-split-card { background:var(--r-bg-periods); border:1px solid var(--r-border-periods); border-radius:10px; overflow:hidden; }
.cal-split-hd { padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--r-txt-key); background:var(--r-campaign-hdr); border-bottom:1px solid var(--r-border-periods); display:flex; align-items:center; gap:8px; }
.cal-split-hd::before { content:''; width:8px; height:8px; border-radius:2px; flex:0 0 auto; }
.cal-split-scale .cal-split-hd::before { background:var(--accent); }
.cal-split-tests .cal-split-hd::before { background:hsl(210,90%,60%); }
.cal-split-grid { display:grid; grid-template-columns:1fr 1fr 1fr; }
.cal-sm { padding:12px 14px; display:flex; flex-direction:column; gap:5px; border-right:1px solid var(--r-border-row-p); }
.cal-sm:last-child { border-right:0; }
.cal-sm > span { font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--r-txt-colhead); }
.cal-sm-v { display:flex; align-items:baseline; gap:6px; }
.cal-sm-v > b { font-size:17px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.cal-sm-v > i { font-size:11px; color:var(--r-txt-dim); font-style:normal; }


/* ===== compare tables: colored A/B columns + dividers ===== */
.cal-cmp th.col-a, .cal-cmp td.col-a { background: rgba(227,197,107,.06) !important; }
.cal-cmp th.col-b, .cal-cmp td.col-b { background: rgba(127,178,217,.09) !important; }
.cal-cmp .col-b, .cal-cmp .col-d { border-left: 2px solid var(--r-border-periods) !important; }
.cal-cmp th.col-a { color: var(--accent) !important; }
.cal-cmp th.col-b { color: hsl(210,90%,68%) !important; }
.cal-cmp th .cal-per { margin-right:6px; vertical-align:middle; }
.cal-cmp tbody tr:hover td.col-a { background: rgba(227,197,107,.11) !important; }
.cal-cmp tbody tr:hover td.col-b { background: rgba(127,178,217,.14) !important; }
.cal-cmp tr.cal-grp td { border-top: 2px solid var(--r-border-periods) !important; }
/* insights group labels */
.cal-grp-lbl { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--r-txt-dim); margin:14px 0 6px 2px; }


/* amber block dividers */
.cal-sec-title { border-left: 3px solid var(--accent); padding: 3px 0 3px 10px !important; color: var(--r-txt-key) !important; }
.cal-grp-lbl { border-left: 2px solid var(--accent2); padding-left: 8px !important; }

/* fix black-stripe: no body column tint (uniform body); color periods in headers only */
.cal-cmp td.col-a, .cal-cmp td.col-b { background: transparent !important; }
.cal-cmp tbody tr:first-child td.col-a, .cal-cmp tbody tr:first-child td.col-b { background: rgba(255,255,255,.025) !important; }
.cal-cmp tbody tr:hover td.col-a, .cal-cmp tbody tr:hover td.col-b { background: var(--r-row-highlight) !important; }
.cal-cmp th.col-a { background: rgba(227,197,107,.13) !important; }
.cal-cmp th.col-b { background: rgba(127,178,217,.15) !important; }
.cal-cmp .col-b, .cal-cmp .col-d { border-left: 1px solid var(--r-border-periods) !important; }

/* compare tables: equal A/B column widths + remove header tint bands */
.cal-cmp { table-layout: fixed; width: 100%; }
.cal-cmp th:first-child, .cal-cmp td:first-child { width: 24%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-cmp .col-a, .cal-cmp .col-b { width: 28%; }
.cal-cmp .col-d { width: 20%; }
.cal-cmp th.col-a, .cal-cmp th.col-b { background: transparent !important; }
.cal-cmp th.col-a, .cal-cmp td.col-a, .cal-cmp th.col-b, .cal-cmp td.col-b { overflow: hidden; text-overflow: ellipsis; }


/* amber marketer section headers (Banners) */
.cal-block-title.cal-hd-amber { background: rgba(227,197,107,.13) !important; color: var(--accent) !important; border-bottom: 1px solid rgba(227,197,107,.32) !important; }


/* marketer header: solid yellow + black text (like project headers/active tab) */
.cal-block-title.cal-hd-amber { background: var(--accent) !important; color: #14110a !important; border-bottom: 1px solid var(--accent2) !important; }
/* geo x format compare: stacked Video/Static per period column */
.cal-gf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* compare columns: clear A(amber)/B(blue) accent rails + faint tint */
.cal-cmp th.col-a, .cal-cmp td.col-a { border-left: 3px solid var(--accent) !important; background: rgba(227,197,107,.05) !important; }
.cal-cmp th.col-b, .cal-cmp td.col-b { border-left: 3px solid hsl(210,90%,60%) !important; background: rgba(127,178,217,.06) !important; }
.cal-cmp .col-d { border-left: 1px solid var(--r-border-periods) !important; }
.cal-cmp tbody tr:hover td.col-a { background: rgba(227,197,107,.11) !important; }
.cal-cmp tbody tr:hover td.col-b { background: rgba(127,178,217,.13) !important; }

/* A/B period-colored panel headers (separate-table comparisons: Audience/Geo/Placements/Format) */
.cal-block-title.cal-hd-a { background: rgba(227,197,107,.14) !important; color: var(--accent) !important; border-bottom: 1px solid rgba(227,197,107,.30) !important; }
.cal-block-title.cal-hd-a .cal-per-a { background:#e9edf2; color:#14181d; }
.cal-block-title.cal-hd-b { background: rgba(127,178,217,.16) !important; color: hsl(210,90%,74%) !important; border-bottom: 1px solid rgba(127,178,217,.35) !important; }

.cal-wide-bn { table-layout:fixed; }
.cal-wide-bn th:first-child, .cal-wide-bn td:first-child { width:340px; }
.cal-wide-bn .cal-bn-name { display:block; width:100%; white-space:normal; word-break:break-all; }

/* A/B swap overrides */
.cal-cmp th.col-a, .cal-cmp td.col-a { border-left: 3px solid hsl(210,90%,60%) !important; background: rgba(127,178,217,.06) !important; }
.cal-cmp th.col-a { color: hsl(210,90%,72%) !important; background: rgba(127,178,217,.15) !important; }
.cal-cmp tbody tr:first-child td.col-a { background: rgba(127,178,217,.10) !important; }
.cal-cmp tbody tr:hover td.col-a { background: rgba(127,178,217,.13) !important; }
.cal-cmp th.col-b, .cal-cmp td.col-b { border-left: 3px solid var(--accent) !important; background: rgba(227,197,107,.06) !important; }
.cal-cmp th.col-b { color: var(--accent) !important; background: rgba(227,197,107,.14) !important; }
.cal-cmp tbody tr:first-child td.col-b { background: rgba(227,197,107,.10) !important; }
.cal-cmp tbody tr:hover td.col-b { background: rgba(227,197,107,.11) !important; }
.cal-per-a { background: hsl(210,90%,60%) !important; color:#fff !important; }
.cal-per-b { background: var(--accent) !important; color:#14110a !important; }
.cal-block-title.cal-hd-a { background: rgba(127,178,217,.16) !important; color: hsl(210,90%,74%) !important; border-bottom-color: rgba(127,178,217,.35) !important; }
.cal-block-title.cal-hd-b { background: rgba(227,197,107,.14) !important; color: var(--accent) !important; border-bottom-color: rgba(227,197,107,.30) !important; }
.cal-block-title.cal-hd-a .cal-per-a { background: hsl(210,90%,60%) !important; color:#fff !important; }
.cal-block-title.cal-hd-b .cal-per-b { background: var(--accent) !important; color:#14110a !important; }

/* first picker (original = yellow B) frame */
#calRangeBtn { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(227,197,107,.30); }
#calRangeBtn.cal-pick-active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(227,197,107,.48); }

/* tile calendar: bold ring + zebra locked */
.cal-ct-in { box-shadow: inset 0 0 0 1.5px var(--ring) !important; border-color: transparent !important; }
.cal-ct-lock { opacity:.65 !important; position:relative; border:1.5px dashed var(--oring) !important; }
.cal-ct-lock::before { content:''; position:absolute; inset:0; border-radius:8px; pointer-events:none; opacity:.5; background: repeating-linear-gradient(45deg, transparent 0 5px, var(--oring) 5px 7px); }


/* yellow divider between the two months */
.cal-cmini + .cal-cmini { border-left: 2px solid var(--accent); padding-left: 16px; margin-left: 4px; }

/* tile layout: date top-left, bigger CPA/spend */
.cal-ctile { position: relative; justify-content: center; }
.cal-ct-d { position: absolute !important; top: 3px; left: 6px; font-size: 10px !important; line-height: 1; }
.cal-ct-cpa { font-size: 17px !important; margin-top: 4px; }
.cal-ct-sp { font-size: 11px !important; }

/* failed generation / Airtable send — red border */
.cc-tile.cc-error { border-color: var(--r-red) !important; background: rgba(242,85,90,.09) !important; }

/* mobile horizontal scroll: Marketers single + Banners */
.cal-mk-single { overflow-x: auto; }
.cal-mk-single .cal-tr { min-width: 680px; }
.cal-wide-bn { min-width: 940px; }

/* ── Funnels tab ── */
#page-funnels { overflow-y: auto; }
.fn-wrap { padding: 20px 22px 40px; }
.fn-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.fn-title { font-size:22px; font-weight:700; color:var(--text); }
.fn-sub { font-size:12px; color:var(--text2); margin-top:3px; }
.fn-upd-all { background:var(--accent); color:#14110a; border:0; border-radius:9px; padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.fn-upd-all:hover { filter:brightness(1.06); }
.fn-sector { border:1px solid var(--r-border-periods,#2a2e35); border-radius:14px; margin-bottom:16px; background:rgba(255,255,255,.02); overflow:hidden; }
.fn-sec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 14px; background:var(--accent); flex-wrap:wrap; }
.fn-sec-l { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fn-sec-name { font-size:15px; font-weight:700; color:#14110a; }
.fn-sec-meta { font-size:11px; color:var(--text2); }
.fn-cap { color:var(--accent); }
.fn-sec-actions { display:flex; gap:7px; flex-wrap:wrap; }
.fn-a { background:var(--r-campaign-hdr,#20242b); color:var(--text); border:1px solid var(--r-border-periods,#2a2e35); border-radius:8px; padding:6px 11px; font-size:12px; cursor:pointer; white-space:nowrap; }
.fn-a:hover:not(:disabled) { border-color:var(--accent); }
.fn-a:disabled { opacity:.5; cursor:default; }
.fn-a-detail { color:var(--accent); }
.fn-strip { display:flex; gap:20px; overflow-x:auto; padding:20px 18px; }
.fn-thumb { position:relative; flex:0 0 auto; width:204px; padding:0; border:1px solid var(--r-border-periods,#2a2e35); border-radius:8px; overflow:hidden; cursor:pointer; background:#fff; transition:transform .1s, border-color .1s; }
.fn-thumb:hover { transform:translateY(-2px); border-color:var(--accent); }
.fn-thumb img { display:block; width:100%; height:auto; background:#fff; }

.fn-thumb-badge{position:absolute;top:5px;right:5px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;color:#fff;letter-spacing:.4px;z-index:4;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.fn-bd-co{background:#12b76a;} .fn-bd-pw{background:#f79009;} .fn-bd-of{background:#9b6dff;} .fn-bd-te{background:#667085;}
.fn-thumb-n { position:absolute; top:5px; left:5px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; font-weight:700; padding:2px 8px; border-radius:6px; }
.fn-empty { padding:22px 16px; color:var(--text2); font-size:13px; }
.fn-board-ov { position:fixed; inset:0; z-index:2000; background:rgba(8,10,14,.95); display:flex; flex-direction:column; }
.fn-board-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.fn-board-title { color:var(--text); font-weight:600; font-size:14px; }
.fn-board-tools { display:flex; align-items:center; gap:6px; }
.fn-board-tools button { background:rgba(255,255,255,.08); color:var(--text); border:0; border-radius:7px; padding:5px 11px; font-size:14px; cursor:pointer; min-width:34px; }
.fn-board-tools button:hover { background:rgba(255,255,255,.16); }
.fn-board-close { font-size:15px !important; }
#fnZlbl { color:var(--text2); font-size:12px; min-width:44px; text-align:center; font-variant-numeric:tabular-nums; }
.fn-board-canvas { flex:1; overflow:hidden; cursor:grab; position:relative; }
.fn-board-canvas.grabbing { cursor:grabbing; }
.fn-board-inner { position:absolute; top:0; left:0; transform-origin:0 0; }
.fn-node { position:absolute; background:#fff; border:2px solid rgba(255,255,255,.15); border-radius:10px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.fn-node-branch { border-color:var(--accent); box-shadow:0 0 0 3px rgba(227,197,107,.3), 0 6px 24px rgba(0,0,0,.5); }
.fn-node-hd { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:5px 8px; z-index:2; }
.fn-node-n { background:rgba(0,0,0,.72); color:#fff; font-size:12px; font-weight:700; padding:2px 8px; border-radius:7px; }
.fn-node-badge { background:var(--accent); color:#14110a; font-size:11px; font-weight:700; padding:2px 8px; border-radius:7px; cursor:help; }
.fn-node img { display:block; width:100%; height:auto; }
.fn-node.gnode { cursor:pointer; }
.fn-node.gnode:hover { border-color:var(--accent); }
.fn-node.gnode img { height:100%; object-fit:cover; object-position:top center; }
.fn-board-svg { position:absolute; top:0; left:0; pointer-events:none; }
.fn-elab { pointer-events:none; }
.fg-opts { height:50px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-content:flex-start; overflow:auto; width:100%; }
.fg-opts-h { color:var(--text2); font-size:11px; width:100%; text-align:center; margin-bottom:2px; }
.fg-opt { font-size:11px; padding:3px 9px; border-radius:8px; border:1px solid rgba(255,255,255,.2); color:var(--text2); }
.fg-opt.act { background:#e3c56b; color:#14110a; border-color:#e3c56b; font-weight:700; }
.fn-link { position:absolute; height:2px; background:rgba(255,255,255,.25); }

/* funnel preview lightbox viewer */
.fn-viewer-ov { position:fixed; inset:0; z-index:2100; background:rgba(6,8,12,.93); display:flex; align-items:center; justify-content:center; }
.fn-v-stage { display:flex; flex-direction:column; align-items:center; gap:12px; }
.fn-v-stage img { max-height:86vh; max-width:min(460px,92vw); border-radius:12px; box-shadow:0 12px 60px rgba(0,0,0,.6); background:#fff; }
.fn-v-cap { color:var(--text2); font-size:13px; font-variant-numeric:tabular-nums; }
.fn-v-arrow { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); color:#fff; border:0; width:54px; height:54px; border-radius:50%; font-size:30px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fn-v-arrow:hover { background:rgba(255,255,255,.22); }
.fn-v-prev { left:26px; } .fn-v-next { right:26px; }
.fn-v-close { position:fixed; top:18px; right:22px; background:rgba(255,255,255,.1); color:#fff; border:0; width:40px; height:40px; border-radius:50%; font-size:16px; cursor:pointer; }
.fn-v-close:hover { background:rgba(255,255,255,.22); }

/* funnels: per-funnel sub-blocks + add/delete */
.fn-sec-head .fn-a-add { background:#161a20; color:var(--text); border-color:#161a20; font-weight:600; }
.fn-a-del { color:hsl(5,80%,68%); }
.fn-funnel { border-top:1px solid var(--r-border-periods,#2a2e35); }
.fn-funnel:first-of-type { border-top:0; }
.fn-fn-head { display:flex; align-items:center; gap:10px; padding:9px 16px; flex-wrap:wrap; }
.fn-fn-url { font-size:12px; color:var(--text2); font-family:ui-monospace,Menlo,monospace; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fn-fn-meta { font-size:11px; color:var(--text2); }
.fn-fn-actions { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }

/* funnel graph viewer (creative + minimap tree) */
.fn-graph-ov { position:fixed; inset:0; z-index:2100; background:rgba(6,8,12,.95); display:flex; flex-direction:column; align-items:center; }
.fg-body { flex:1; display:flex; width:100%; min-height:0; padding:52px 16px 16px; gap:10px; box-sizing:border-box; }
.fg-left { position:relative; flex:0 0 auto; width:min(46vw,470px); height:100%; display:flex; align-items:center; justify-content:center; }
.fg-left .fn-v-prev { position:absolute; left:4px; top:50%; transform:translateY(-50%); }
.fg-left .fn-v-next { position:absolute; right:4px; top:50%; transform:translateY(-50%); }
.fg-mapwrap { flex:1; min-width:0; display:flex; }
.fg-stage { width:340px; max-width:38vw; display:flex; flex-direction:column; align-items:center; gap:6px; }
.fg-imgwrap { display:flex; flex-direction:column; align-items:center; gap:8px; min-height:0; }
.fg-imgwrap img { max-height:calc(100vh - 110px); max-width:min(400px,40vw); border-radius:10px; box-shadow:0 10px 50px rgba(0,0,0,.6); background:#fff; }
.fg-img { position:static; transform:none; max-height:calc(100vh - 300px); max-width:100%; border-radius:10px; box-shadow:0 10px 50px rgba(0,0,0,.6); background:#fff; }
.fg-cap { position:static; text-align:center; color:var(--text2); font-size:12px; }
.fg-up { position:static; transform:rotate(90deg); }
.fg-down { position:static; transform:rotate(-90deg); }
.fn-updown:hover { background:rgba(255,255,255,.22); }
.fg-map { flex:1; width:100%; height:100%; overflow:auto; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(0,0,0,.35); position:relative; box-sizing:border-box; }
.fg-vlist { display:flex; flex-direction:column; gap:3px; padding:8px; }
.fg-row { display:flex; align-items:center; gap:6px; min-height:26px; }
.fg-rowtiles { display:flex; gap:3px; flex:0 0 auto; }
.fg-rowttl { color:var(--text2); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.fg-row.cur .fg-rowttl { color:#fff; }
.fg-mn.conv { border-style:dashed; opacity:.85; }
.fg-row-br { display:flex; gap:4px; margin-left:8px; padding-left:8px; border-left:2px solid rgba(227,197,107,.3); }
.fg-map-svg { position:absolute; top:6px; left:0; pointer-events:none; }
.fg-mn { flex:0 0 auto; min-width:30px; height:26px; padding:0 6px; border-radius:6px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:var(--text2); font-size:11px; font-weight:700; cursor:pointer; }
.fg-mn.onp { border-color:#e3c56b; color:#fff; }
.fg-mn.cur { background:#e3c56b; color:#14110a; border-color:#e3c56b; box-shadow:0 0 0 2px rgba(227,197,107,.5); }
.fg-mn.fork { border-style:dashed; }
.fg-mn.pay, .fg-mn.off { background:hsl(210,90%,55%); color:#fff; }

/* manual tile: pencil + trash coexist */
.creative-wrap.mm-grid .cc-tile .mm-clear { right: 40px; }

.v3-scroll { flex:1; overflow:auto; padding:20px 24px; }
.v3-row { display:flex; align-items:flex-start; gap:18px; margin-bottom:16px; }
.v3-screen { position:relative; flex:0 0 auto; width:150px; }
.v3-screen.pay { outline:2px solid var(--accent); border-radius:10px; outline-offset:2px; }
.v3-num { position:absolute; top:5px; left:5px; z-index:2; background:var(--accent); color:#14110a; font-weight:700; font-size:12px; padding:2px 9px; border-radius:8px; }
.v3-thumb { width:150px; border-radius:8px; border:1px solid rgba(255,255,255,.15); cursor:zoom-in; display:block; background:#fff; }
.v3-thumb:hover { border-color:var(--accent); }
.v3-vthumb { width:112px; }
.v3-ttl { font-size:11px; color:var(--text2); margin-top:5px; line-height:1.3; }
.v3-branches { display:flex; flex-direction:column; gap:9px; padding-top:6px; min-width:0; }
.v3-branch { display:flex; align-items:center; gap:9px; background:rgba(227,197,107,.06); border-left:2px solid rgba(227,197,107,.45); padding:7px 11px; border-radius:9px; }
.v3-ans { color:var(--accent); font-size:12px; font-weight:600; white-space:nowrap; }
.v3-ret { color:var(--text2); font-size:11px; white-space:nowrap; }
.v3-ret.v3-end { color:#f0616d; }
.v3-lb { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:zoom-out; }
.v3-lb img { max-height:92vh; max-width:92vw; border-radius:8px; box-shadow:0 10px 60px rgba(0,0,0,.7); }
.v3-lb-cap { color:#fff; margin-top:12px; font-size:13px; max-width:80vw; text-align:center; }

.v3c { position:absolute; user-select:none; }
.fn-board-canvas, .fn-board-inner { user-select:none; -webkit-user-select:none; }
.v3-thumb { -webkit-user-drag:none; user-drag:none; }
.v3c .v3-thumb { width:100%; height:100%; object-fit:contain; object-position:top center; border-radius:8px; border:1px solid rgba(255,255,255,.15); cursor:zoom-in; display:block; background:#fff; }
.v3c.sp .v3-thumb { border-color:rgba(227,197,107,.6); box-shadow:0 0 0 2px rgba(227,197,107,.25); }
.v3c.pay .v3-thumb { border-color:#f0616d; }
.v3c.geo .v3-thumb { border-color:#4ea1ff; box-shadow:0 0 0 2px rgba(78,161,255,.3); }
.v3c .v3-thumb:hover { border-color:var(--accent); }
.v3c-n { position:absolute; top:-46px; left:50%; transform:translateX(-50%); z-index:2; background:var(--accent); color:#14110a; font-weight:800; font-size:20px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.v3c.var .v3c-n { background:rgba(227,197,107,.9); }

.v3-lab { position:absolute; transform:translate(-50%,-50%); background:rgba(10,12,16,.94); color:var(--accent); font-size:13px; font-weight:700; padding:3px 10px; border-radius:9px; border:1px solid rgba(227,197,107,.45); white-space:nowrap; pointer-events:none; }

.fn-top-btns { display:flex; gap:8px; }
.fn-sum-ov { position:fixed; inset:0; z-index:2500; background:rgba(6,8,12,.86); display:flex; align-items:center; justify-content:center; }
.fn-sum-card { background:#12151b; border:1px solid rgba(255,255,255,.12); border-radius:14px; max-width:640px; width:90%; max-height:80vh; overflow:auto; }
.fn-sum-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--accent); font-weight:700; font-size:16px; }
.fn-sum-head button { background:none; border:0; color:var(--text2); font-size:18px; cursor:pointer; }
.fn-sum-body { padding:18px; color:var(--text2); line-height:1.55; font-size:14px; }

.fn-add-btn { font-size:18px; font-weight:800; line-height:1; padding-left:14px; padding-right:14px; }
.fn-sec-ord { display:flex; gap:4px; }
.fn-ord { padding:2px 8px !important; font-size:11px !important; line-height:1; }
.fn-fn-url { text-decoration:none; cursor:pointer; }
.fn-fn-url:hover { text-decoration:underline; }
.fn-add-sec { margin-bottom:20px; }
.fn-add-t { font-weight:700; color:var(--text); margin-bottom:8px; font-size:13px; }
.fn-add-row { display:flex; gap:8px; margin-bottom:8px; }
.fn-add-in { flex:1; min-width:0; background:#0e1116; border:1px solid rgba(255,255,255,.14); color:var(--text); border-radius:8px; padding:9px 11px; font-size:13px; }
.fn-a-go { background:var(--accent); color:#14110a; border-color:var(--accent); font-weight:700; white-space:nowrap; }

.fn-top-btns .fn-upd-all { padding:7px 15px; font-size:13px; border-radius:8px; }
.fn-add-btn { font-size:14px !important; font-weight:800; padding:5px 11px !important; }
.fn-sec-head { justify-content:flex-start; gap:10px; }
.fn-grip { cursor:grab; user-select:none; opacity:1; font-size:16px; line-height:1; }
.fn-grip:hover { opacity:1; }
.fn-grip:active { cursor:grabbing; }
.fn-grip-b { color:var(--accent); }
.fn-grip-f { color:var(--accent); margin-right:2px; }
.fn-dragging { opacity:.45; outline:2px dashed var(--accent); outline-offset:2px; }

.fn-gear-btn { font-size:20px; padding:3px 15px; line-height:1; }
.fn-fn-url:focus, .fn-fn-url:focus-visible { outline:none; box-shadow:none; }
.fn-set-card { background:#12151b; border:1px solid rgba(255,255,255,.12); border-radius:14px; max-width:860px; width:94%; max-height:86vh; overflow:auto; }
.fn-set-sec { margin-bottom:22px; }
.fn-set-t { font-weight:700; color:var(--text); font-size:13px; margin-bottom:10px; letter-spacing:.03em; text-transform:uppercase; }
.fn-dd-mount { flex:1; min-width:0; }
.fn-bm-brand { border:1px solid rgba(255,255,255,.1); border-radius:10px; margin-bottom:10px; overflow:hidden; }
.fn-bm-head { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--accent); flex-wrap:wrap; }
.fn-bm-name { font-weight:700; color:#14110a; font-size:14px; }
.fn-bm-fp { color:#14110a; font-size:11px; text-decoration:underline; opacity:.85; }
.fn-bm-acts { margin-left:auto; display:flex; gap:6px; }
.fn-bm-funnels { padding:8px 12px 10px; display:flex; flex-direction:column; gap:6px; }
.fn-bm-funnel { display:flex; align-items:center; gap:10px; padding:6px 9px; background:#0e1116; border:1px solid rgba(255,255,255,.08); border-radius:8px; }
.fn-bm-url { color:var(--text2); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.fn-bm-empty { color:var(--text2); font-size:12px; padding:2px 2px; }
.fn-be-name, .fn-be-fp { flex:1; min-width:120px; }

.fn-set-top { display:flex; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.fn-set-col { flex:1; min-width:230px; display:flex; flex-direction:column; gap:8px; }
.fn-set-col .fn-add-in { flex:none; width:100%; }
.fn-set-col .fn-dd-mount { width:100%; }
.fn-set-add { align-self:flex-start; }
.fn-ord-brand { margin-bottom:8px; }
.fn-ord-brow { display:flex; align-items:center; gap:9px; padding:7px 10px; background:#161a20; border:1px solid rgba(255,255,255,.09); border-radius:8px; }
.fn-ord-bname { font-weight:700; color:var(--text); font-size:13.5px; }
.fn-ord-fp { color:var(--accent); font-size:11px; text-decoration:none; }
.fn-ord-fp:hover { text-decoration:underline; }
.fn-ord-acts { margin-left:auto; display:flex; gap:6px; }
.fn-ord-funnels { margin:3px 0 8px 20px; display:flex; flex-direction:column; gap:4px; }
.fn-ord-fitem { display:flex; align-items:center; gap:8px; padding:5px 9px; background:#0e1116; border:1px solid rgba(255,255,255,.06); border-radius:7px; }
.fn-ord-branch { color:var(--text2); opacity:.55; font-family:ui-monospace,Menlo,Consolas,monospace; }
.fn-ord-fname { color:var(--text2); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.fn-ord-empty { color:var(--text2); font-size:11px; margin:2px 0 8px 20px; }
.fn-mini { padding:3px 9px !important; font-size:11px !important; }
.fn-set-foot { position:sticky; bottom:0; background:#12151b; border-top:1px solid rgba(255,255,255,.1); padding:12px 18px; display:flex; justify-content:flex-end; }

.fn-top-btns .fn-gear-btn { font-size:22px; padding:2px 14px; }

.fn-thumb-var { position:relative; overflow:visible !important; border-color:transparent !important; }
.fn-thumb-var::after {
  content:""; position:absolute; inset:-7px; pointer-events:none; border-radius:12px; z-index:3;
  background-image:
    repeating-linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 18px),
    repeating-linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 18px),
    repeating-linear-gradient(0deg,var(--accent) 0 9px,transparent 9px 18px),
    repeating-linear-gradient(0deg,var(--accent) 0 9px,transparent 9px 18px);
  background-size:100% 4px,100% 4px,4px 100%,4px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
  animation:fn-ants .5s linear infinite;
}
@keyframes fn-ants { to { background-position:18px 0,-18px 100%,0 -18px,100% 18px; } }
@media (prefers-reduced-motion: reduce) { .fn-thumb-var::after { animation:none; } }

.fn-var-ov { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.93); display:flex; align-items:flex-start; justify-content:flex-start; padding:20px; overflow:hidden; }
.fn-var-x { position:absolute; top:16px; right:22px; background:none; border:0; color:#fff; font-size:26px; line-height:1; cursor:pointer; z-index:2; }
.fn-var-row { display:flex; gap:22px; overflow-x:auto; overflow-y:hidden; width:100%; height:calc(100vh - 40px); align-items:flex-start; padding:6px 4px 6px 40px; }
.fn-var-card { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; overflow-y:auto; overflow-x:hidden; padding-right:4px; }
.fn-var-card img { width:380px; max-width:none; max-height:none; height:auto; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.6); display:block; }
.fn-var-cap { position:sticky; top:0; z-index:2; color:var(--accent); font-size:13px; text-align:center; width:380px; background:rgba(20,17,10,.95); border:1px solid var(--accent); padding:7px 12px; border-radius:8px; font-weight:700; }

.fn-thumb-ab { position:relative; overflow:visible !important; border-color:transparent !important; }
.fn-thumb-ab::after { content:""; position:absolute; inset:-7px; pointer-events:none; border-radius:12px; z-index:3; border:3px solid #b06dff; box-shadow:0 0 0 1px rgba(176,109,255,.35); }
.fn-thumb-geo { position:relative; overflow:visible !important; border-color:transparent !important; }
.fn-thumb-geo::after { content:""; position:absolute; inset:-7px; pointer-events:none; border-radius:12px; z-index:3; border:3px solid #4ea1ff; box-shadow:0 0 0 1px rgba(78,161,255,.35); }
.fn-ab-sec { position:absolute; left:0; right:0; bottom:0; background:rgba(12,15,20,.96); border-top:1px solid rgba(255,255,255,.14); padding:9px 16px; z-index:6; max-height:300px; overflow:auto; }
.fn-ab-title { font-weight:700; color:var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.fn-ab-list { display:flex; flex-wrap:wrap; gap:8px; }
.fn-ab-card { width:120px; flex:0 0 auto; cursor:zoom-in; border:2px solid rgba(176,109,255,.55); border-radius:8px; overflow:hidden; background:#fff; }
.fn-ab-card img { display:block; width:100%; height:200px; object-fit:cover; object-position:top center; }
.fn-ab-cap { font-size:10px; color:#cbd2dc; padding:3px 5px; background:#161a20; text-align:center; line-height:1.25; }
.fn-ab-item { background:#161a20; border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:3px 9px; font-size:12px; color:var(--text2); }
.fn-ab-empty { color:var(--text2); font-size:12px; font-style:italic; }

#fnDDPop { z-index:3200 !important; }

/* compact tool calls: collapse output by default, expand on click */
.tool-call .tc-output { display:none; }
.tool-call.expanded .tc-output { display:block; }
.tool-call.has-output .tc-header { cursor:pointer; }
.tc-caret { color:var(--text2); font-size:10px; opacity:.6; }
.tool-call.has-output .tc-caret::before { content:'\25b8'; }
.tool-call.has-output.expanded .tc-caret::before { content:'\25be'; }

.fn-loc-block { flex:0 0 auto; border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:7px 8px; cursor:zoom-in; background:#12151a; }
.fn-loc-block:hover { border-color:var(--accent); }
.fn-loc-hd { font-size:11px; color:var(--accent); font-weight:700; margin-bottom:5px; }
.fn-loc-mini { display:flex; gap:5px; }
.fn-loc-m { width:66px; }
.fn-loc-m img { width:66px; height:120px; object-fit:cover; object-position:top center; border-radius:4px; display:block; background:#fff; }
.fn-loc-m span { display:block; font-size:9px; color:#cbd2dc; text-align:center; margin-top:2px; line-height:1.2; }