:root {
  --primary: #3aa5dc;
  --dimmed: #f0f9ff;
  --white: #ffffff;
  --black: #000000;
  --gray: #767b7e;
  --success: #dbeff7;
  --bg-inform: #dbe1f7;
  --inform: #3a83dc;
  --bg-warning: #fff5c7;
  --warning: #b1640c;
  --bg-error: #f1cdcd;
  --error: #bb0606;
  --border-radius: 10px;
}

@font-face {
  font-family: "Century Gothic";
  src: url("./assets/centurygothic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Century Gothic";
  src: url("./assets/centurygothic_bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--white);
}

body,
input,
textarea,
select,
button {
  font-family: "Century Gothic", sans-serif;
}
h1 {
  font-size: 32px;
}
h2,
label {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}
h3 {
  font-size: 14px;
}
h4 {
  font-size: 11px;
}
h5 {
  font-size: 10px;
  text-transform: uppercase;
}
p,
ul,
li {
  font-size: 11px;
}
ul,
ol {
  padding-left: 20px;
}

.w-full {
  width: 100% !important;
}
.w-adapt {
  width: calc(100% - 38px) !important;
}
.m-auto {
  margin: auto !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.nowrap {
  white-space: nowrap;
}
.block {
  display: block;
}
.m-0 {
  margin: 0 !important;
}
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}

.btn {
  background-color: var(--primary);
  color: var(--white);
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  width: fit-content;
  border-radius: var(--border-radius);
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}

.secondary-btn {
  color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary);
  background-color: var(--white);
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  width: fit-content;
  border-radius: var(--border-radius);
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}

.flat-btn {
  color: var(--primary);
  display: block;
  width: fit-content;
  background-color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid var(--primary);
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}

.flat-btn-remove {
  color: var(--error);
  background-color: var(--dimmed);
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 5px 4px;
  border-radius: var(--border-radius);
}

.main-btn.active {
  background-color: #d3ebf7;
}
.main-btn {
  background-color: var(--dimmed);
  color: var(--primary);
  text-decoration: none;
  padding: 5px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: var(--border-radius);
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}

.btn:hover,
.secondary-btn:hover,
.flat-btn:hover,
.main-btn:hover,
.flat-btn-remove:hover {
  filter: brightness(0.85);
}

.btn.small,
.secondary-btn.small {
  padding: 6px 8px;
  font-size: 12px;
}

.flat-btn.small {
  font-size: 12px;
}

.btn:has(img),
.secondary-btn:has(img) {
  display: flex;
  padding: 9px 20px 9px 12px;
  align-items: center;
  gap: 8px;
}
.btn.icon:has(img) {
  display: flex;
  padding: 9px 12px 9px 20px;
  align-items: center;
  gap: 8px;
}

.btn.small:has(img),
.secondary-btn.small:has(img) {
  display: flex;
  padding: 6px 18px 6px 10px;
  align-items: center;
  gap: 5px;
}

input.text-input,
textarea {
  padding: 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--primary);
  font-size: 14px;
}

input.text-input {
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 18px 18px;
  padding: 8px 2px 8px 32px;
}

input.text-input.username {
  background-image: url("./assets/person.svg");
}
input.text-input.password {
  background-image: url("./assets/lock.svg");
}
input.text-input.search {
  background-image: url("./assets/search.svg");
}

select {
  padding: 7px 30px 7px 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--primary);
  font-size: 14px;
  background-image: url("./assets/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 6px center;
  appearance: none;
  background-size: 18px 18px;
}

table {
  box-sizing: border-box;
  border-spacing: 0;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  overflow: hidden;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 8px;
}
table thead {
  background-color: var(--dimmed);
  color: var(--gray);
  border: 0;
  text-transform: uppercase;
  font-size: 14px;
}
table thead th {
  padding: 10px 8px;
}
table thead tr > :first-child {
  padding-left: 20px;
  text-align: left;
}
table thead tr > :last-child {
  padding-right: 20px;
}
table tbody tr > :first-child {
  padding-left: 20px;
  text-align: left;
}
table tbody tr > :last-child {
  padding-right: 20px;
}
table tbody {
  font-size: 12px;
}
table tbody td {
  padding: 10px 12px;
}

.pagination span {
  color: var(--primary);
  font-weight: bold;
}

.pagination-btn.active {
  background-color: var(--primary);
  color: var(--dimmed);
}
.pagination-btn {
  background-color: var(--dimmed);
  text-decoration: none;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  color: var(--primary);
  transition: all 0.2s ease-in-out;
}
.pagination-btn:hover {
  filter: brightness(0.85);
}

.status {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  background-color: var(--success);
  color: var(--primary);
}
.status.inform {
  background-color: var(--bg-inform);
  color: var(--inform);
}
.status.warning {
  background-color: var(--bg-warning);
  color: var(--warning);
}
.status.error {
  background-color: var(--bg-error);
  color: var(--error);
}
.action-container {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.action-btn {
  background-color: var(--dimmed);
  padding: 2px;
  border-radius: 2px;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.action-btn:hover {
  filter: brightness(0.85);
}
.action-btn.error {
  background-color: var(--bg-error);
}
.action-btn img {
  width: 17px;
  height: 17px;
}

.tabs {
  display: flex;
  gap: 1px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--primary);
  width: fit-content;
  background-color: var(--primary);
}

.tab {
  padding: 8px 12px;
  background: var(--white);
  width: fit-content;
  border: none;
  color: var(--black);
  transition: all 0.2s ease-in-out;
}
.tab:hover {
  filter: brightness(0.85);
}

.tab.active {
  background: var(--primary);
  color: var(--white);
}

.main-tabs {
  display: flex;
  gap: 0px;
}

.main-tabs .tab {
  padding: 6px 22px 3px 22px;
  width: 100%;
  border: none;
  background: var(--white);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  color: var(--gray);
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom: 2px solid #ddd;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.main-tabs .tab:hover {
  filter: brightness(0.9);
}

.main-tabs .tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--dimmed);
}

.toast-notification {
  display: flex;
  gap: 10px;
  width: fit-content;
  padding: 10px;
  border-radius: var(--border-radius);
  background-color: var(--dimmed);
}
.toast-notification h3 {
  text-transform: uppercase;
}

.toast-notification h3,
.toast-notification p {
  margin: 0;
}

.toast-notification p {
  font-size: 11px !important;
}

.toast-notification.inform {
  background-color: var(--bg-inform);
}
.toast-notification.warning {
  background-color: var(--bg-warning);
}
.toast-notification.error {
  background-color: var(--bg-error);
}

.data-dashboard {
  background-color: var(--dimmed);
  border-radius: var(--border-radius);
  width: fit-content;
  text-align: center;
  padding: 10px 20px;
}
.data-dashboard span {
  color: var(--primary);
  font-weight: bold;
  font-size: 20px;
}
.data-dashboard p {
  margin: 0;
}
.data-dashboard p {
  margin: 0;
  font-size: 13px;
}

.history-container {
  width: fit-content;
  background-color: var(--dimmed);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.history-item {
  border-bottom: 1px solid var(--primary);
  padding: 8px 16px;
  background-color: var(--dimmed);
  transition: all 0.2s ease-in-out;
}
.history-item:hover {
  filter: brightness(0.85);
}
.history-item small {
  font-size: 11px;
}
.history-item small span {
  background-color: var(--primary);
  color: var(--white);
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
}
.history-container > :last-child {
  border-bottom: 0px;
}
.history-item h2,
.history-item p {
  margin: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.stepper {
  display: flex;
  align-items: center;
  width: 100%;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dimmed);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.line {
  flex: 1;
  height: 2px;
  background: #ccc;
  margin: 0 10px;
}
.step.completed .circle {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.line.completed {
  background: var(--primary);
}
.step span {
  font-size: 14px;
  color: var(--black);
  font-weight: bold;
}

.progress {
  width: 100%;
  height: 10px;
  background: var(--dimmed);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.accordion {
  background: var(--dimmed);
  border-radius: var(--border-radius);
  overflow: hidden;
  max-height: 53.5px;
  transition: all 0.3s ease;
}

.accordion.expanded {
  max-height: 500px;
}
.accordion.expanded .main img {
  transform: rotate(180deg);
}
.accordion .main img {
  transition: all 0.3s ease;
}

.accordion .main {
  background-color: var(--dimmed);
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 10px;
  transition: all 0.3s ease;
}
.accordion .main:hover {
  filter: brightness(0.9);
}
.accordion .main h2,
.accordion .main p {
  margin: 0;
  text-transform: unset;
}
.accordion .main {
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 10px;
}
.accordion .ai {
  background: #6b5ce7;
  font-weight: bold;
  height: fit-content;
  padding: 7px;
  color: var(--white);
  border-radius: var(--border-radius);
}
.accordion .expand {
  padding: 10px;
  padding-top: 0;
}
.accordion .actions {
  display: flex;
  gap: 8px;
  justify-content: right;
  margin-top: 16px;
}
.accordion input {
  width: calc(100% - 38px);
}
.modal {
  background: var(--white);
  border-radius: var(--border-radius);
  width: 400px;
  padding: 24px;
}
.modal h2 {
  text-transform: none;
  font-size: 24px;
  margin-top: 0;
}
.modal .actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.empty-state {
  margin: 0;
  width: 240px;
}
.empty-state img {
  width: 60px;
}
.empty-state figcaption {
  flex-direction: column;
  display: flex;
  justify-content: center;
  text-align: center;
}
.empty-state img,
.empty-state a {
  margin: auto;
  display: block;
}
.empty-state a {
  width: calc(100% - 40px);
}
.empty-state h2 {
  margin: 0;
  margin-top: 8px;
}
.empty-state p {
  opacity: 0.6;
}
.login-page {
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  border: none;
}

hr {
  background-color: var(--primary);
  height: 1px;
  margin: 0;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}

/* Login page */

.login-container {
  background-color: var(--white);
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 400px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.login-page form {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
.login-page label {
  color: var(--primary);
  width: 100%;
  margin-top: 18px;
}
.login-page p {
  font-size: 16px;
}
.login-page button {
  margin-top: 18px;
}
.login-page input {
  margin-top: 6px;
}
.login-page .ai {
  font-weight: bold;
  color: var(--primary);
  margin-top: 6px;
  display: block;
}

/* Dashboard page */

aside {
  width: 300px;
  height: 100vh;
  background-color: var(--dimmed);
}
aside .container {
  padding: 40px 16px 40px 16px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
}
aside p {
  font-size: 14px;
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  padding: 8px 0;
  margin-top: 28px;
  display: block;
}
aside .nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  height: 100%;
}

.dashboard {
  display: flex;
  flex-direction: row;
}
.dashboard main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 35px);
  overflow-y: auto;
}
.dashboard .activity,
.dashboard .filter {
  display: flex;
  gap: 20px;
  align-items: center;
}
.dashboard .activity div,
.dashboard .filter input {
  width: 100%;
}
.dashboard .filter select {
  min-width: 200px;
}
.dashboard label {
  text-transform: none;
  font-weight: normal;
}
.dashboard table {
  margin-top: 18px;
}

.dashboard .history-container {
  max-height: calc(100vh - 450px);
  overflow-y: scroll;
}
.dashboard .history-container:has(.empty-state) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.dashboard table {
  display: block;
  max-height: calc(100vh - 350px);
  overflow-y: scroll;
  overflow-x: auto;
}

.breadcrumbs {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--primary);
}
.header h1 {
  margin: 0;
}
.header .link {
  font-size: 14px;
  color: var(--primary);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px 14px;
  padding: 0px 18px 0px 0px;
  background-image: url("./assets/external-link.svg");
}
table .link {
  color: var(--primary);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px 14px;
  padding: 0px 18px 0px 0px;
  background-image: url("./assets/external-link.svg");
}

.range-container input[type="range"] {
  width: 100%;
  appearance: none;
  height: 3px;
  border-radius: 999px;
  outline: none;
  background: #3aa6dc8d;
}
.range-container input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.range-container .range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-left: 8px;
}
.range-container .range-labels span {
  font-size: 12px;
  text-align: center;
}
.range-container .range-labels span:first-child {
  text-align: left;
}
.range-container .range-labels span:last-child {
  text-align: right;
}

.info-container {
  width: 400px;
}
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.info {
  background-color: var(--dimmed);
  border-radius: var(--border-radius);
  padding: 10px;
}
.info p {
  margin-top: 10px;
}
.info p,
.info ul,
.info li,
.info a {
  font-size: 12px;
  display: block;
}
.info a {
  color: var(--primary);
  text-decoration: underline;
  line-height: 1.5;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--dimmed);
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

  z-index: 1000;
  overflow: hidden;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  display: block;
  color: var(--primary);
  margin-bottom: 4px;
  margin-top: 4px;
}

/* =========================================================================
   COMPAT BRIDGE (design-refresh integration)
   Map the token + utility/component class names our existing markup & JS
   still emit onto the new design system, so the app adopts the new palette
   without rewriting every inline style. Retire piecemeal as pages migrate.
   ========================================================================= */
:root {
  --primary-color: var(--primary);
  --primary-dark: #2b8bbf;
  --secondary-color: #10b981;
  --success-color: #10b981;  --success-light: #d1fae5;
  --danger-color:  #ef4444;  --danger-light:  #fee2e2;
  --warning-color: #f59e0b;  --warning-light: #fef3c7;
  --text-primary: #1f2937;   --text-secondary: var(--gray);  --text-muted: var(--gray);
  --border-color: #e5e7eb;   --bg-light: var(--dimmed);      --bg-white: var(--white);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
  --chatgpt-color:#10a37f; --claude-color:#d97757; --gemini-color:#34a853;
  --perplexity-color:#6b5ce7; --deepseek-color:#1e40af; --grok-color:#1a1a1a;
  --openai-color:#0d8a6f; --llama-color:#0467df; --other-color:#6b7280;
}

/* utility/button classes our JS emits */
.text-muted { color: var(--gray); }
.btn-sm { padding: .35rem .75rem; font-size: .8125rem; }
.btn-primary { background: var(--primary); color:#fff; border:1px solid var(--primary); }
.btn-primary:hover { background:#2b8bbf; }
.btn-outline { background:#fff; color: var(--primary); border:1px solid var(--border-color); }
.btn-outline:hover { border-color: var(--primary); }

/* dashboard client-row components (designer's own spec, ported) */
.status-badge { padding:.35rem .65rem; border-radius:.25rem; font-size:.75rem; font-weight:600; white-space:nowrap; display:inline-block; }
.status-active { background:#d1fae5; color:#065f46; border:1px solid #10b981; }
.status-setup-needed { background:#fef3c7; color:#92400e; border:1px solid #fbbf24; }
.status-inactive { background:#fee2e2; color:#991b1b; border:1px solid #ef4444; }
.status-over-limit { background:#f3e8ff; color:#6b21a8; border:1px solid #a855f7; }
.mention-count { color: var(--primary); font-weight:600; }
.toggle-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid; border-radius:.375rem; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .2s; white-space:nowrap; background:#fff; }
.toggle-btn.running { color:#065f46; border-color:#10b981; background:#d1fae5; }
.toggle-btn.running:hover { background:#a7f3d0; border-color:#059669; }
.toggle-btn.paused { color:#92400e; border-color:#fbbf24; background:#fef3c7; }
.toggle-btn.paused:hover { background:#fde68a; border-color:#f59e0b; }
.toggle-btn:disabled { opacity:.5; cursor:not-allowed; }
.toggle-btn .icon { font-size:.875rem; }

/* ---- layout + card utilities our analytics/modals markup uses (design-refresh) ---- */
.card { background:#fff; border:1px solid var(--border-color); border-radius: var(--border-radius,10px); box-shadow: var(--shadow-sm); }
.card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border-color); }
.card-header h4 { margin:0; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem}
.mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1.5rem}
.flex{display:flex} .justify-between{justify-content:space-between} .items-center{align-items:center}
.text-center{text-align:center} .text-success{color:#10b981}
.analytics-summary-card{text-align:center} .analytics-stat-value{font-weight:700}
.skeleton-loader{background:linear-gradient(90deg,#f0f0f0 25%,#e5e7eb 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton 1.5s infinite;border-radius:.5rem}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:.375rem;font-size:.7rem;font-weight:600;background:#eef2ff;color:#3730a3}
.badge-success{background:#d1fae5;color:#065f46}
.btn-lg{padding:.65rem 1.25rem;font-size:1rem}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---- modal chrome (our .modal-* classes, used by the designer's page too) ---- */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
/* backdrop must actually cover the overlay (and sit behind the dialog) so a
   click outside the dialog closes the modal */
.modal-backdrop { position:absolute; inset:0; z-index:0; }
/* overflow:hidden + flex column (header/footer fixed, body scrolls) so every
   corner clips to the border-radius */
.modal-container, .modal-content { position:relative; z-index:1; background:#fff; border-radius:var(--border-radius,10px); max-width:900px; width:100%; max-height:90vh; overflow:hidden; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.modal-header { flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-color); }
.modal-header h2 { margin:0; font-size:1.25rem; }
.modal-body { padding:1.5rem; overflow-y:auto; flex:1 1 auto; }
.modal-footer { flex-shrink:0; display:flex; justify-content:flex-end; gap:.5rem; padding:1rem 1.5rem; border-top:1px solid var(--border-color); }
.modal-close { background:none; border:none; font-size:1.5rem; cursor:pointer; line-height:1; color:var(--gray); }

/* ---- plan banner (in-flow card at top of main; mount id=universal-plan-banner).
   The shared plan-banner.js looks for .navbar to anchor after; the new sidebar
   layout has none, and body.dashboard is display:flex — so without an existing
   mount it would prepend to <body> and become a flex column. Each re-framed page
   now carries <div id="universal-plan-banner"> inside its content, which the
   script fills in place. These styles restore the banner's appearance. ---- */
.plan-banner { width:100%; margin-bottom:1.5rem; border:1px solid var(--border-color,#e5e7eb); border-radius:var(--border-radius,10px); background:var(--bg-white,#fff); font-size:0.875rem; color:var(--text-primary,#1a1a1a); }
.plan-banner-inner { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1.25rem; }
.plan-banner-icon { flex-shrink:0; font-size:1.1rem; line-height:1; }
.plan-banner-text { flex:1; min-width:0; }
.plan-banner-text strong { color:var(--text-primary,#1a1a1a); font-weight:600; }
.plan-banner-current { display:inline-flex; align-items:center; gap:0.35rem; }
.plan-banner-chip { display:inline-block; padding:0.1rem 0.55rem; border-radius:999px; font-size:0.7rem; font-weight:600; letter-spacing:0.02em; background:rgba(37,99,235,0.1); color:var(--primary-color,#2563eb); }
.plan-banner-sep { color:var(--border-color,#e5e7eb); margin:0 0.35rem; }
.plan-banner-note { color:var(--text-secondary,#6b7280); }
.plan-banner-action { flex-shrink:0; font-weight:600; color:var(--primary-color,#2563eb); text-decoration:none; white-space:nowrap; }
.plan-banner-action:hover { text-decoration:underline; }
.plan-banner.is-notice { background:var(--warning-light,#fffbeb); border-color:#fcd34d; }
.plan-banner.is-notice .plan-banner-chip { background:rgba(245,158,11,0.18); color:#92400e; }
.plan-banner.is-notice .plan-banner-action { color:#92400e; }
.plan-banner.is-warning { background:var(--danger-light,#fef2f2); border-color:#fca5a5; }
.plan-banner.is-warning .plan-banner-chip { background:rgba(239,68,68,0.15); color:#991b1b; }
.plan-banner.is-warning .plan-banner-action { color:#991b1b; }
@media (max-width:640px){ .plan-banner-inner{ flex-wrap:wrap; } .plan-banner-action{ width:100%; } }

/* ---- form controls + flex-col (dropped when the previews left styles.css;
   needed by the settings tabs, the add-phrases wizard, and any re-framed form
   markup). Without .flex-col a `flex flex-col` column lays out as a row. ---- */
.flex-col { flex-direction: column; }
.form-group { margin-bottom: 1rem; }
.form-label { display:block; font-weight:500; margin-bottom:0.375rem; font-size:0.875rem; color:var(--text-primary,#1a1a1a); }
.form-input, .form-select, .form-textarea {
  width:100%; box-sizing:border-box; padding:0.5rem 0.75rem;
  border:1px solid var(--border-color,#e5e7eb); border-radius:0.375rem;
  font-size:0.875rem; font-family:inherit; background:#fff; color:var(--text-primary,#1a1a1a);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--primary-color,#2563eb); box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}

/* Settings › API Keys two-column layout — was an inline `2fr 1fr` grid (couldn't
   go responsive); class-based so it collapses to one column on narrow/mobile. */
.settings-keys-grid { display:grid; grid-template-columns:2fr 1fr; gap:2rem; align-items:start; }
@media (max-width: 900px) { .settings-keys-grid { grid-template-columns:1fr; } }

/* ============================================================
   TOP NAVIGATION (replaces the sidebar). Body keeps .dashboard
   for its content styles, but .topnav neutralizes the sidebar
   flex model so the page flows normally under a sticky top bar.
   ============================================================ */
body.topnav { display:block; }
body.topnav main, body.topnav .topnav-main { display:block; height:auto; max-height:none; overflow:visible; }
body.topnav table { max-height:none; overflow-y:visible; }

.topnav-bar { background:#fff; border-bottom:1px solid var(--border-color,#e5e7eb); position:sticky; top:0; z-index:100; }
.topnav-inner { display:flex; align-items:center; gap:1.5rem; max-width:1400px; margin:0 auto; padding:0.6rem 1.5rem; }
.topnav-brand { display:flex; align-items:center; flex-shrink:0; }
.topnav-brand img { height:30px; width:auto; display:block; }
.topnav-links { display:flex; align-items:center; gap:0.25rem; flex:1; }
.topnav-link { padding:0.5rem 0.9rem; border-radius:8px; color:var(--text-secondary,#6b7280); text-decoration:none; font-weight:500; font-size:0.9rem; white-space:nowrap; transition:background .15s,color .15s; }
.topnav-link:hover { background:var(--dimmed,#f3f4f6); color:var(--text-primary,#1a1a1a); }
.topnav-link.active { background:var(--primary,#2563eb); color:#fff; }
.topnav-user { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.topnav-user .user-name { color:var(--text-secondary,#6b7280); font-size:0.875rem; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topnav-logout { color:var(--text-secondary,#6b7280); text-decoration:none; font-size:0.875rem; font-weight:500; }
.topnav-logout:hover { color:var(--danger-color,#ef4444); }
.topnav-main { max-width:1400px; margin:0 auto; padding:1.5rem; }
@media (max-width:768px){
  .topnav-inner{ flex-wrap:wrap; gap:0.75rem 1rem; }
  .topnav-links{ order:3; width:100%; overflow-x:auto; padding-bottom:0.25rem; }
  .topnav-user{ margin-left:auto; }
}

/* ---- analytics sub-tabs (client-detail) ---- */
.analytics-subtabs { display:flex; flex-wrap:wrap; gap:0.25rem; border-bottom:2px solid var(--border-color,#e5e7eb); margin:0.75rem 0 1.25rem; }
.analytics-subtab-btn { padding:0.6rem 1rem; background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; font-size:0.9rem; font-weight:500; color:var(--text-secondary,#6b7280); white-space:nowrap; transition:color .15s,border-color .15s; }
.analytics-subtab-btn:hover { color:var(--primary,#2563eb); }
.analytics-subtab-btn.active { color:var(--primary,#2563eb); border-bottom-color:var(--primary,#2563eb); }
@media (max-width:640px){ .analytics-subtabs{ overflow-x:auto; flex-wrap:nowrap; } }

/* ---- analytics bar: sub-tabs (left) + persistent filters (right) ---- */
.analytics-bar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:0.25rem 1rem; border-bottom:2px solid var(--border-color,#e5e7eb); margin:0.75rem 0 1.25rem; }
.analytics-bar .analytics-subtabs { border-bottom:none; margin:0; flex-wrap:wrap; }
.analytics-filters { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
/* Analytics heading + filters in one row (like the Tracking Phrases header);
   the sub-tabs sit on their own row below. */
.analytics-head { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.analytics-head h2 { white-space:nowrap; }
/* date inputs match the designer's base <select> look (the period/comparison
   selects now use that base style directly, like the Tracking Phrases filter) */
.analytics-filter-select { padding:7px 10px; font-size:14px; border:1px solid var(--primary,#2563eb); border-radius:var(--border-radius,8px); background:#fff; color:var(--text-primary,#1a1a1a); }
#analytics-custom-range { display:flex; gap:0.4rem; align-items:center; }

/* ---- client-detail phrases table ----
   .dashboard table forces display:block + overflow:scroll, which (a) stops the
   width:100% table from stretching its columns (dead space to the right where
   History used to be) and (b) clips the absolutely-positioned row Actions
   dropdown. Render it as a normal full-width table with visible overflow. */
#phrases { display: table !important; width: 100%; max-height: none !important; overflow: visible !important; }
#phrases thead { position: static !important; }

/* Cap the Tracking Phrases list so a long list never buries the Analytics section
   below it. The list scrolls inside a fixed-height box with a pinned header. The
   row Actions menu is rendered position:fixed (see toggleActionsDropdown) so it
   escapes this overflow instead of being clipped. */
.phrases-scroll {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
}
.phrases-scroll #phrases thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-light, #f9fafb);
}

/* ---- phrase-performance modal tabs ---- */
.perf-subtabs { display:flex; flex-wrap:wrap; gap:0.25rem; border-bottom:2px solid var(--border-color,#e5e7eb); margin:0 0 1.25rem; }
.perf-tab-btn { padding:0.6rem 1rem; background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; font-size:0.9rem; font-weight:500; color:var(--text-secondary,#6b7280); white-space:nowrap; }
.perf-tab-btn:hover { color:var(--primary,#2563eb); }
.perf-tab-btn.active { color:var(--primary,#2563eb); border-bottom-color:var(--primary,#2563eb); }
@media (max-width:640px){ .perf-subtabs{ overflow-x:auto; flex-wrap:nowrap; } }

/* ---- progress bars (Visibility by Model). The render uses .progress-bar; the
   base CSS only styled .progress-fill, so the colored bar had no height. ---- */
.progress { border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; }
/* data tables fill their container (e.g. All Variations table inside its tab) */
.data-table { width: 100%; }

/* Modal tables must render as normal full-width tables. The global
   `.dashboard table { display:block }` (for the sidebar-era scroll tables) makes
   a width:100% table stop stretching its columns, so modal tables (All
   Variations, Recent Mentions/Misses) bunched to the left and looked small.
   The scroll lives on the wrapper div, so the table itself needs no overflow. */
.modal-container table { display: table !important; width: 100%; max-height: none !important; overflow: visible !important; }

/* Month by Month tables are narrow; the global .dashboard table { display:block }
   stops their columns from stretching (dead space on the right). Render them as
   normal full-width tables so they fill the card like Top Sources. */
[data-analytics-sub="monthly"] table,
[data-perftab="monthly"] table { display: table !important; width: 100%; max-height: none !important; overflow: visible !important; }