.ctw-root {
  --ctw-bg: var(--bg, #0f1319);
  --ctw-panel: var(--panel, #161b24);
  --ctw-panel-2: var(--panel2, #1d2430);
  --ctw-hover: var(--hover, #1a212c);
  --ctw-border: var(--border, #252d3b);
  --ctw-text: var(--text, #e8ecf4);
  --ctw-muted: var(--muted, #8b95ab);
  --ctw-accent: var(--accent, #0067ff);
  --ctw-accent-2: var(--accent2, #2f81ff);
  --ctw-good: var(--good, #22c55e);
  --ctw-bad: var(--bad, #ef4444);
  --ctw-warn: var(--warn, #f59e0b);
  --ctw-radius: var(--radius, 12px);
  --ctw-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, .35));
  color: var(--ctw-text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  min-width: 0;
  width: 100%;
}

.ctw-root *,
.ctw-root *::before,
.ctw-root *::after { box-sizing: border-box; }

.ctw-root button,
.ctw-root input,
.ctw-root select { font: inherit; }

.ctw-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.ctw-eyebrow {
  color: var(--ctw-accent-2);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .75px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.ctw-title { font-size: 21px; font-weight: 750; letter-spacing: -.35px; margin: 0 0 4px; }
.ctw-subtitle { color: var(--ctw-muted); font-size: 13px; margin: 0; }

.ctw-header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.ctw-source {
  align-items: center;
  background: var(--ctw-panel);
  border: 1px solid var(--ctw-border);
  border-radius: 22px;
  color: var(--ctw-muted);
  display: inline-flex;
  font-size: 11.5px;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
}

.ctw-source strong { color: var(--ctw-text); font-weight: 650; }
.ctw-source-dot { background: var(--ctw-muted); border-radius: 50%; height: 8px; width: 8px; }
.ctw-source.is-live .ctw-source-dot { background: var(--ctw-good); box-shadow: 0 0 0 4px rgba(34, 197, 94, .1); }
.ctw-source.is-warning .ctw-source-dot { background: var(--ctw-warn); box-shadow: 0 0 0 4px rgba(245, 158, 11, .1); }
.ctw-source.is-loading .ctw-source-dot { animation: ctw-pulse 1.1s infinite; background: var(--ctw-accent-2); }
.ctw-source.is-error .ctw-source-dot { background: var(--ctw-bad); }

.ctw-button {
  align-items: center;
  background: var(--ctw-accent);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 650;
  gap: 7px;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  transition: background .15s, border-color .15s, transform .15s;
}

.ctw-button:hover { background: var(--ctw-accent-2); }
.ctw-button:active { transform: translateY(1px); }
.ctw-button:focus-visible,
.ctw-tab:focus-visible,
.ctw-account-card:focus-visible,
.ctw-media-card:focus-visible { outline: 2px solid var(--ctw-accent-2); outline-offset: 2px; }
.ctw-button.is-ghost { background: var(--ctw-panel-2); border-color: var(--ctw-border); color: var(--ctw-text); }
.ctw-button.is-ghost:hover { background: var(--ctw-hover); }
.ctw-button svg,
.ctw-tab svg { height: 15px; width: 15px; }

.ctw-tabs {
  background: var(--ctw-panel);
  border: 1px solid var(--ctw-border);
  border-radius: 10px;
  display: flex;
  gap: 3px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
}

.ctw-tabs::-webkit-scrollbar { display: none; }
.ctw-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--ctw-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  gap: 7px;
  padding: 8px 13px;
}
.ctw-tab:hover { background: var(--ctw-hover); color: var(--ctw-text); }
.ctw-tab.is-active { background: var(--ctw-panel-2); color: var(--ctw-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }

.ctw-kpis {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18px;
}

.ctw-kpi,
.ctw-panel,
.ctw-account-card,
.ctw-person-card,
.ctw-media-card {
  background: var(--ctw-panel);
  border: 1px solid var(--ctw-border);
  border-radius: var(--ctw-radius);
}

.ctw-kpi { min-width: 0; padding: 14px 15px; }
.ctw-kpi-label { color: var(--ctw-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .58px; margin-bottom: 6px; text-transform: uppercase; }
.ctw-kpi-value { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 750; letter-spacing: -.55px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-kpi-value.is-positive { color: var(--ctw-good); }
.ctw-kpi-value.is-negative { color: var(--ctw-bad); }
.ctw-kpi-sub { color: var(--ctw-muted); font-size: 10.5px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ctw-toolbar {
  align-items: center;
  background: var(--ctw-panel);
  border: 1px solid var(--ctw-border);
  border-radius: var(--ctw-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 10px;
}

.ctw-toolbar-group { align-items: center; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; }
.ctw-toolbar-group.is-right { flex: 0 1 auto; justify-content: flex-end; }
.ctw-input,
.ctw-select {
  background: var(--ctw-panel-2);
  border: 1px solid var(--ctw-border);
  border-radius: 8px;
  color: var(--ctw-text);
  font-size: 12.5px;
  height: 36px;
  min-width: 150px;
  outline: none;
  padding: 7px 10px;
}
.ctw-input { flex: 1 1 220px; max-width: 340px; }
.ctw-input:focus,
.ctw-select:focus { border-color: var(--ctw-accent); }
.ctw-input::placeholder { color: var(--ctw-muted); }
.ctw-result-count { color: var(--ctw-muted); font-size: 11.5px; padding: 0 4px; white-space: nowrap; }

.ctw-panel { margin-bottom: 16px; min-width: 0; overflow: hidden; }
.ctw-panel-head { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; padding: 17px 18px 0; }
.ctw-panel-title { font-size: 14px; font-weight: 700; margin: 0; }
.ctw-panel-copy { color: var(--ctw-muted); font-size: 11.5px; margin-top: 3px; }
.ctw-panel-body { padding: 16px 18px 18px; }
.ctw-two-col { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }

.ctw-account-grid,
.ctw-person-grid,
.ctw-media-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); }

.ctw-account-card,
.ctw-media-card {
  color: inherit;
  cursor: pointer;
  display: block;
  padding: 0;
  text-align: left;
  transition: border-color .15s, transform .15s;
  width: 100%;
}
.ctw-account-card { padding: 15px; }
.ctw-account-card:hover,
.ctw-media-card:hover { border-color: var(--ctw-accent); transform: translateY(-1px); }

.ctw-account-top,
.ctw-person-top { align-items: center; display: flex; gap: 10px; min-width: 0; }
.ctw-avatar {
  align-items: center;
  background: rgba(0, 103, 255, .13);
  border: 1px solid rgba(47, 129, 255, .25);
  border-radius: 50%;
  color: var(--ctw-accent-2);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 750;
  height: 34px;
  justify-content: center;
  overflow: hidden;
  width: 34px;
}
.ctw-avatar img { height: 100%; object-fit: cover; width: 100%; }
.ctw-account-name,
.ctw-person-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-account-meta,
.ctw-person-meta { color: var(--ctw-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-account-identity,
.ctw-person-identity { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
.ctw-account-top .ctw-badge { margin-left: auto; }

.ctw-mini-grid { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); margin-top: 13px; }
.ctw-mini-stat { background: var(--ctw-panel-2); border-radius: 8px; min-width: 0; padding: 7px 6px; text-align: center; }
.ctw-mini-label { color: var(--ctw-muted); font-size: 8px; font-weight: 650; letter-spacing: .45px; text-transform: uppercase; }
.ctw-mini-value { font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-card-footer { align-items: flex-end; display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }
.ctw-delta { font-size: 10.5px; font-variant-numeric: tabular-nums; font-weight: 650; }
.ctw-delta.is-up { color: var(--ctw-good); }
.ctw-delta.is-down { color: var(--ctw-bad); }
.ctw-spark { color: var(--ctw-accent-2); display: block; height: 34px; width: 112px; }
.ctw-spark path.ctw-spark-area { fill: currentColor; opacity: .08; stroke: none; }
.ctw-spark polyline { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.ctw-badge {
  align-items: center;
  background: var(--ctw-panel-2);
  border-radius: 18px;
  color: var(--ctw-muted);
  display: inline-flex;
  font-size: 10px;
  font-weight: 650;
  max-width: 130px;
  padding: 3px 8px;
  text-transform: capitalize;
  white-space: nowrap;
}
.ctw-badge.is-good { background: rgba(34, 197, 94, .13); color: var(--ctw-good); }
.ctw-badge.is-warn { background: rgba(245, 158, 11, .13); color: var(--ctw-warn); }
.ctw-badge.is-bad { background: rgba(239, 68, 68, .13); color: var(--ctw-bad); }
.ctw-badge.is-info { background: rgba(0, 103, 255, .13); color: var(--ctw-accent-2); }

.ctw-bars { display: flex; flex-direction: column; gap: 11px; }
.ctw-bar-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(95px, 145px) minmax(90px, 1fr) 75px; }
.ctw-bar-label { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-bar-track { background: var(--ctw-panel-2); border-radius: 8px; height: 7px; overflow: hidden; }
.ctw-bar-fill { background: linear-gradient(90deg, var(--ctw-accent), var(--ctw-accent-2)); border-radius: inherit; height: 100%; min-width: 2px; }
.ctw-bar-value { color: var(--ctw-muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }

.ctw-trend { align-items: center; display: flex; min-height: 160px; }
.ctw-trend .ctw-spark { height: 130px; width: 100%; }
.ctw-trend-meta { align-items: center; color: var(--ctw-muted); display: flex; font-size: 10.5px; justify-content: space-between; margin-top: 6px; }

.ctw-table-wrap { overflow-x: auto; width: 100%; }
.ctw-table { border-collapse: collapse; min-width: 760px; width: 100%; }
.ctw-table th { border-bottom: 1px solid var(--ctw-border); color: var(--ctw-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .55px; padding: 9px 10px; text-align: left; text-transform: uppercase; }
.ctw-table td { border-bottom: 1px solid var(--ctw-border); font-size: 12px; padding: 11px 10px; vertical-align: middle; }
.ctw-table tr:last-child td { border-bottom: 0; }
.ctw-table tbody tr:hover td { background: var(--ctw-hover); }
.ctw-table .is-number { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ctw-table-primary { font-weight: 700; }
.ctw-table-secondary { color: var(--ctw-muted); font-size: 10.5px; margin-top: 2px; }
.ctw-link { color: var(--ctw-accent-2); text-decoration: none; }
.ctw-link:hover { text-decoration: underline; }
.ctw-link svg { height: 13px; margin-left: 3px; vertical-align: -2px; width: 13px; }

.ctw-person-card { min-width: 0; padding: 15px; }
.ctw-person-card .ctw-mini-grid { grid-template-columns: repeat(3, 1fr); }
.ctw-person-summary { color: var(--ctw-muted); font-size: 11px; margin-top: 11px; }

.ctw-media-card { overflow: hidden; }
.ctw-media-thumb { align-items: center; background: var(--ctw-panel-2); display: flex; height: 154px; justify-content: center; overflow: hidden; position: relative; }
.ctw-media-thumb img { height: 100%; object-fit: cover; width: 100%; }
.ctw-media-placeholder { color: var(--ctw-muted); font-size: 12px; font-weight: 650; }
.ctw-media-thumb .ctw-badge { left: 9px; position: absolute; top: 9px; }
.ctw-media-body { padding: 12px 13px 13px; }
.ctw-media-title { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-media-meta { color: var(--ctw-muted); font-size: 10.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-media-stats { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.ctw-media-stats div { background: var(--ctw-panel-2); border-radius: 7px; padding: 6px; text-align: center; }
.ctw-media-stats b { display: block; font-size: 11.5px; }
.ctw-media-stats span { color: var(--ctw-muted); font-size: 8.5px; text-transform: uppercase; }

.ctw-state {
  align-items: center;
  background: var(--ctw-panel);
  border: 1px solid var(--ctw-border);
  border-radius: var(--ctw-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 330px;
  padding: 45px 24px;
  text-align: center;
}
.ctw-state-icon { align-items: center; background: var(--ctw-panel-2); border-radius: 14px; color: var(--ctw-muted); display: flex; height: 46px; justify-content: center; margin-bottom: 14px; width: 46px; }
.ctw-state-icon svg { height: 21px; width: 21px; }
.ctw-state.is-error .ctw-state-icon { background: rgba(239, 68, 68, .12); color: var(--ctw-bad); }
.ctw-state-title { font-size: 15px; font-weight: 700; }
.ctw-state-copy { color: var(--ctw-muted); font-size: 12px; line-height: 1.6; margin: 6px auto 16px; max-width: 440px; }

.ctw-skeleton-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.ctw-skeleton { animation: ctw-shimmer 1.25s infinite linear; background: linear-gradient(90deg, var(--ctw-panel-2) 20%, var(--ctw-hover) 48%, var(--ctw-panel-2) 76%); background-size: 220% 100%; border-radius: 10px; height: 95px; }

.ctw-drawer-backdrop {
  align-items: stretch;
  background: rgba(0, 0, 0, .56);
  display: flex;
  inset: 0;
  justify-content: flex-end;
  position: fixed;
  z-index: 90;
}
.ctw-drawer {
  background: var(--ctw-bg);
  border-left: 1px solid var(--ctw-border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .3);
  max-width: 520px;
  overflow-y: auto;
  padding: 22px;
  width: min(92vw, 520px);
}
.ctw-drawer-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.ctw-drawer-title { font-size: 17px; font-weight: 750; margin: 0; }
.ctw-drawer-copy { color: var(--ctw-muted); font-size: 11.5px; margin-top: 3px; }
.ctw-detail-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
.ctw-detail-cell { background: var(--ctw-panel); border: 1px solid var(--ctw-border); border-radius: 9px; min-width: 0; padding: 10px; }
.ctw-detail-label { color: var(--ctw-muted); font-size: 8.5px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
.ctw-detail-value { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 700; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes ctw-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes ctw-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (max-width: 1120px) {
  .ctw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ctw-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ctw-header { align-items: stretch; flex-direction: column; }
  .ctw-header-actions { justify-content: flex-start; }
  .ctw-tabs { margin-left: -2px; margin-right: -2px; }
  .ctw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctw-toolbar { align-items: stretch; flex-direction: column; }
  .ctw-toolbar-group,
  .ctw-toolbar-group.is-right { align-items: stretch; flex-direction: column; justify-content: flex-start; }
  .ctw-input,
  .ctw-select { max-width: none; width: 100%; }
  .ctw-input { flex: 0 0 36px; }
  .ctw-account-grid,
  .ctw-person-grid,
  .ctw-media-grid { grid-template-columns: 1fr; }
  .ctw-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .ctw-two-col { display: block; }
  .ctw-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .ctw-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ctw-root *,
  .ctw-root *::before,
  .ctw-root *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}