:root {
  color-scheme: dark;
  --bg: #06080c;
  --sidebar: #0b0e13;
  --panel: #0f1219;
  --panel-2: #11151d;
  --line: #1c222d;
  --line-soft: #151a23;
  --text: #f3f5fb;
  --muted: #87a0b7;
  --dim: #647486;
  --pink: #f23d93;
  --pink-soft: rgba(242, 61, 147, .14);
  --green: #00dfa4;
  --yellow: #ffd000;
  --red: #ff3548;
  --gold: #e6a800;
  --sidebar-width: 232px;
  --topbar-height: 50px;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[v-cloak] > * { visibility: hidden; }
#app[v-cloak] {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
#app[v-cloak]::before {
  content: "Carregando PostFlow…";
  color: #f3f5fb;
  font: 600 16px/1.4 system-ui, sans-serif;
}
svg { width: 18px; height: 18px; stroke-width: 1.8; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(90, 70, 110, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 70, 110, .04) 1px, transparent 1px),
    radial-gradient(circle at 54% 0%, rgba(75, 9, 60, .11), transparent 36%),
    linear-gradient(110deg, transparent 60%, rgba(96, 12, 76, .06));
  background-size: 48px 48px, 48px 48px, auto, auto;
  z-index: 0;
}

.app-shell { min-height: 100vh; position: relative; z-index: 1; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: rgba(10, 13, 18, .97);
  border-right: 1px solid #1b202a;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 50;
  scrollbar-width: thin;
  scrollbar-color: #2a303c transparent;
}
.sidebar-nav { padding: 7px 12px 30px; }
.sidebar-mobile-brand { display: none; }
.nav-kicker {
  margin: 8px 12px 7px;
  color: #607386;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
}
.nav-kicker:not(:first-child) { margin-top: 18px; }
.nav-item {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #8ea1b3;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-item:hover { color: var(--text); background: rgba(255, 255, 255, .025); }
.nav-item:active { transform: translateY(1px); }
.nav-item.active { color: white; border-color: rgba(242, 61, 147, .78); background: linear-gradient(90deg, rgba(242, 61, 147, .08), rgba(242, 61, 147, .025)); box-shadow: inset 0 0 24px rgba(242, 61, 147, .035); }
.nav-item.active > svg:first-child, .nav-item.active .nav-arrow { color: var(--pink); }
.nav-item svg { width: 17px; height: 17px; }
.nav-arrow { width: 7px; height: 7px; justify-self: end; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .18s; }
.nav-item.active .nav-arrow { opacity: 1; }

.topbar {
  position: fixed;
  inset: 0 0 auto var(--sidebar-width);
  height: var(--topbar-height);
  border-bottom: 1px solid #1a1d27;
  background: linear-gradient(90deg, rgba(18, 8, 20, .96), rgba(8, 9, 14, .97));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 18px;
  z-index: 40;
  transition: left .25s ease;
}
.menu-button { margin-right: 7px; }
.icon-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #99a6b6;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.icon-button:hover { color: white; background: rgba(255, 255, 255, .055); }
.brand { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 9px; padding: 0; cursor: pointer; }
.brand-orb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e62c7c, #b81c63);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px rgba(242, 61, 147, .37), inset 0 1px rgba(255,255,255,.26);
}
.brand-orb svg { width: 17px; height: 17px; }
.brand-name { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; letter-spacing: .22em; }
.bot-status {
  height: 28px;
  border: 1px solid #1b1d27;
  border-radius: 9px;
  background: rgba(7, 9, 13, .55);
  color: #d9dce8;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .09em;
  cursor: pointer;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a3366d; box-shadow: 0 0 10px rgba(242, 61, 147, .6); }
.bot-status.online .status-dot { background: var(--green); box-shadow: 0 0 10px rgba(0, 223, 164, .65); }
.stop-loop-topbar { margin-left: 8px; height: 32px; font-weight: 700; box-shadow: 0 0 12px rgba(255, 53, 72, .35); animation: pulse-subtle 2s infinite; }
.start-loop-topbar { margin-left: 8px; height: 32px; font-weight: 700; }
@keyframes pulse-subtle { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
.topbar-spacer { flex: 1; }
.avatar { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #111b27; color: #f3f7ff; font-family: "IBM Plex Mono", monospace; font-weight: 600; cursor: pointer; }

.workspace {
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 17px) 16px 32px;
  min-height: 100vh;
  transition: margin-left .25s ease;
}
.page-heading { min-height: 96px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 16px; }
.page-heading.reference-heading-hidden { display: none; }
.eyebrow { color: #60758c; font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.page-heading h1 { margin: 5px 0 0; color: #f5f7fc; font-size: clamp(28px, 2.1vw, 34px); line-height: 1; letter-spacing: -.035em; }
.page-heading p { margin: 4px 0 0; color: #8da5ba; font-size: 13px; }
.refresh-area { display: flex; align-items: center; gap: 12px; color: #8399ad; font-size: 11px; white-space: nowrap; }
.view { animation: view-in .24s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.stack-lg { display: grid; gap: 20px; }

.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
.metric-card, .period-card, .panel, .account-card, .queue-cards article {
  background: linear-gradient(145deg, rgba(15, 18, 25, .98), rgba(13, 16, 22, .98));
  border: 1px solid var(--line);
  border-radius: 12px;
}
.metric-card { min-height: 130px; height: 130px; padding: 16px; position: relative; overflow: hidden; }
.metric-action { width: 100%; color: var(--text); text-align: left; font: inherit; appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.metric-action .metric-top { min-height: 33px; justify-content: flex-start; }
.metric-action > strong, .metric-action > small { text-align: left; }
.metric-action:hover { border-color: rgba(230, 168, 0, .78); transform: translateY(-1px); box-shadow: inset 0 0 32px rgba(230, 168, 0, .11), 0 8px 24px rgba(0,0,0,.18); }
.metric-action:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.metric-card.featured { border-color: rgba(196, 143, 0, .55); box-shadow: inset 0 0 28px rgba(187, 129, 0, .08); }
.metric-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: #8ca5ba; font-family: "IBM Plex Mono", monospace; font-size: 9px; line-height: 1.35; letter-spacing: .08em; }
.metric-icon { width: 33px; height: 33px; flex: 0 0 auto; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.metric-icon svg { width: 16px; height: 16px; }
.metric-icon.pink, .feature-icon { color: var(--pink); background: rgba(242, 61, 147, .14); }
.metric-icon.green { color: var(--green); background: rgba(0, 223, 164, .13); }
.metric-icon.red { color: var(--red); background: rgba(255, 53, 72, .13); }
.metric-icon.yellow { color: var(--yellow); background: rgba(255, 208, 0, .12); }
.metric-icon.purple { color: #b68cff; background: rgba(182, 140, 255, .13); }
.metric-card > strong { display: block; margin-top: 7px; font-family: "IBM Plex Mono", monospace; font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.metric-card > small, .period-card > small { display: block; margin-top: 9px; color: #82a0b8; font-size: 11px; }
.gold-text { color: #efb900 !important; font-weight: 600; }
.metric-dragon { position: absolute; z-index: 0; right: -2px; top: 5px; width: 98px; height: 82px; object-fit: contain; opacity: .82; pointer-events: none; filter: drop-shadow(1px 0 0 rgba(230, 168, 0, .82)) drop-shadow(-1px 0 0 rgba(230, 168, 0, .82)) drop-shadow(0 1px 0 rgba(230, 168, 0, .82)) drop-shadow(0 -1px 0 rgba(230, 168, 0, .82)) drop-shadow(0 0 13px rgba(255, 193, 0, .42)); }
.metric-action > strong, .metric-action > small, .metric-action > .metric-top { position: relative; z-index: 1; }
.sparkline { position: absolute; z-index: 2; left: 0; bottom: 3px; width: 100%; height: 34px; }
.sparkline path { fill: none; stroke: rgba(230, 168, 0, .8); stroke-width: 1.1; vector-effect: non-scaling-stroke; }

.period-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.period-card { min-height: 130px; padding: 16px; }
.period-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.period-label { display: inline-flex; align-items: center; gap: 8px; color: #8fa8bd; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .07em; }
.period-card > strong { display: block; margin-top: 13px; font-family: "IBM Plex Mono", monospace; font-size: 29px; line-height: 1; }
.segmented { display: flex; align-items: center; padding: 2px; border-radius: 9px; background: #111821; }
.segmented button { height: 25px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #8095aa; font-size: 10px; cursor: pointer; }
.segmented button.active { color: #ff69ac; background: rgba(242, 61, 147, .2); }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1232px; }
.feature-card { height: 74px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.feature-card:hover { border-color: rgba(242, 61, 147, .38); background: #11141c; transform: translateY(-1px); }
.feature-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.feature-icon.large { width: 48px; height: 48px; border-radius: 14px; }
.feature-card strong { display: block; font-size: 16px; }
.feature-card small { display: block; margin-top: 2px; color: #8298ad; font-size: 11px; }

.dashboard-bottom { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(340px, 1fr); gap: 11px; }
.panel { padding: 18px; }
.forecast-panel, .queue-summary { min-height: 336px; }
.panel-heading { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.panel-heading h2 { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 16px; letter-spacing: -.01em; }
.panel-heading h2 svg { color: var(--pink); width: 17px; height: 17px; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: #86a1b9; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; }
.text-button:hover { color: white; }
.text-button svg { width: 14px; height: 14px; }
.empty-state { min-height: 245px; color: #7894aa; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; text-align: center; }
.empty-state svg { color: #41566a; }
.empty-state.small { min-height: 130px; flex-direction: column; }
.empty-state.tall { min-height: 330px; flex-direction: column; }
.empty-state.tall svg { width: 38px; height: 38px; }
.empty-state.tall strong { color: var(--text); }
.summary-row { height: 40px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; color: #82a0b7; font-size: 13px; }
.summary-row strong { color: #f5f7fc; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.forecast-list { display: grid; gap: 8px; }
.forecast-row { min-height: 66px; padding: 10px 13px; border: 1px solid var(--line-soft); border-radius: 10px; background: #0b0e14; display: flex; align-items: center; gap: 12px; }
.forecast-row > span:nth-child(2) { min-width: 0; flex: 1; }
.forecast-row strong, .forecast-row small { display: block; }
.forecast-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.folder-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--pink-soft); color: var(--pink); display: inline-flex; align-items: center; justify-content: center; }
.forecast-count { font-family: "IBM Plex Mono", monospace; color: white; }

.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.preparer-page { min-width: 0; }
.preparer-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); gap: 20px; align-items: start; }
.preparer-fallback-card { grid-column: 1 / -1; display: grid; gap: 8px; }
.preparer-fallback-card .toggle-line { min-height: 54px; }
.adapter-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid rgba(242,61,147,.45); border-radius: 12px; background: linear-gradient(90deg, rgba(242,61,147,.08), rgba(20,14,29,.72)); }
.adapter-strip.compact { padding: 11px 14px; }
.adapter-strip.ready { border-color: rgba(0,223,164,.42); background: linear-gradient(90deg, rgba(0,223,164,.07), rgba(20,14,29,.72)); }
.adapter-strip.blocked { border-color: rgba(242,61,147,.35); }
.adapter-strip > div { display: grid; gap: 4px; min-width: 0; }
.adapter-strip strong { color: var(--text); font-size: 13px; }
.adapter-strip small { color: var(--muted); font-size: 11px; }
.adapter-strip label { min-width: 150px; }
.preparer-form { margin-top: 16px; }
.preparer-form textarea { resize: vertical; }
.range-field { display: grid; gap: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.range-field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.range-field b { font-size: 9px; font-weight: 600; }
.range-field strong { color: var(--pink); font-family: "IBM Plex Mono", monospace; font-size: 15px; letter-spacing: 0; }
.range-field input[type="range"] { width: 100%; min-height: 20px; padding: 0; accent-color: var(--pink); }
.range-field > small { color: var(--muted); font-size: 10px; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.field-hint { color: var(--muted); font-size: 10px; margin-top: -8px; }
.photo-picker { display: grid; gap: 8px; }
.photo-picker > span { color: var(--text-soft); font-size: 11px; font-weight: 600; }
.preparer-account-list { display: grid; gap: 7px; margin-top: 12px; max-height: 390px; overflow-y: auto; padding-right: 3px; }
.preparer-account-list .story-account-row { grid-template-columns: auto 34px minmax(0,1fr) auto auto; }
.preparer-account-list input:disabled { opacity: .35; }
.preparer-account-delete { justify-self: end; white-space: nowrap; }
.security-note { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; margin-top: 14px; border-radius: 9px; color: var(--muted); background: rgba(242,61,147,.06); font-size: 10px; line-height: 1.45; }
.security-note svg { color: var(--pink); width: 16px; flex: 0 0 auto; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.preparer-job-list { display: grid; gap: 8px; margin-top: 12px; }
.preparer-job { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(10,13,19,.7); }
.preparer-job > div:first-child { display: grid; gap: 4px; min-width: 0; flex: 1; }
.preparer-job > div:first-child strong { font-size: 12px; color: var(--text); }
.preparer-job > div:first-child small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-progress { display: grid; justify-items: end; gap: 3px; min-width: 78px; }
.job-progress strong { color: var(--text); font-size: 12px; }
.job-progress small { color: var(--muted); font-size: 9px; }
.library-source-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px dashed var(--line-soft); border-radius: 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.library-source-note svg { width: 16px; flex: 0 0 auto; color: var(--pink); }
.span-2 { grid-column: span 1; }
.control-banner { min-height: 114px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(110deg, rgba(242, 61, 147, .08), rgba(15, 18, 25, .98) 48%); }
.loop-mode-panel { display: grid; gap: 15px; background: linear-gradient(110deg, rgba(242, 61, 147, .055), rgba(15, 18, 25, .98) 48%); }
.loop-mode-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.loop-mode-heading h2 { margin: 5px 0 0; font-size: 18px; }
.loop-mode-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.mode-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(242,61,147,.42); border-radius: 9px; color: var(--pink); background: rgba(242,61,147,.09); font-size: 10px; }
.mode-status svg { width: 14px; height: 14px; }
.mode-glyph { display: inline-flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 18px; line-height: 1; }
.mode-status .mode-glyph { font-size: 16px; }
.loop-mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.loop-mode-card { min-height: 74px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8, 11, 16, .75); display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 9px; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.loop-mode-card:hover { border-color: rgba(242,61,147,.44); transform: translateY(-1px); }
.loop-mode-card.active { border-color: rgba(242,61,147,.85); background: linear-gradient(110deg, rgba(242,61,147,.16), rgba(16,13,23,.92)); box-shadow: inset 0 0 20px rgba(242,61,147,.05); }
.loop-mode-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #9eb1c3; background: rgba(141,163,185,.1); }
.loop-mode-card.active .loop-mode-icon { color: var(--pink); background: rgba(242,61,147,.16); }
.loop-mode-icon svg { width: 15px; height: 15px; }
.loop-mode-card strong, .loop-mode-card small { display: block; }
.loop-mode-card strong { font-size: 12px; }
.loop-mode-card small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.mode-check { color: var(--pink); width: 15px; height: 15px; font-family: "IBM Plex Mono", monospace; font-size: 14px; text-align: center; }
.mode-schedule-field { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; align-items: end; gap: 12px; padding-top: 2px; }
.mode-schedule-field label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.mode-schedule-field small { color: var(--muted); font-size: 10px; padding-bottom: 8px; }
.control-copy { display: flex; align-items: center; gap: 15px; }
.control-copy h2 { margin: 3px 0; font-size: 20px; }
.control-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.form-panel { display: grid; gap: 18px; }
.form-grid { display: grid; gap: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.two > .span-2 { grid-column: 1 / -1; }
label { position: relative; color: #93a8ba; display: grid; gap: 7px; font-size: 12px; font-weight: 600; }
input, textarea, select {
  width: 100%;
  border: 1px solid #242a35;
  border-radius: 10px;
  outline: none;
  background: #0a0d12;
  color: #f1f4fa;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 400;
  transition: border-color .18s, box-shadow .18s;
}
input, select { min-height: 43px; }
textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #536170; }
input:focus, textarea:focus, select:focus { border-color: rgba(242, 61, 147, .7); box-shadow: 0 0 0 3px rgba(242, 61, 147, .08); }
.input-action { display: flex; gap: 8px; }
.input-action input { flex: 1; }
.form-footer { padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.muted { color: #758b9f; font-size: 11px; }
.button { min-height: 40px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .16s, border-color .16s, background .16s, opacity .16s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .48; cursor: not-allowed; }
.button svg { width: 15px; height: 15px; }
.button.primary { color: white; background: linear-gradient(135deg, #df2c7d, #bb1d67); border-color: #ed4692; box-shadow: 0 8px 24px rgba(216, 38, 118, .14); }
.button.secondary { color: #dce4ed; background: #151b24; border-color: #27303c; }
.button.danger { color: #ffacb4; background: rgba(255, 53, 72, .1); border-color: rgba(255, 53, 72, .35); }
.button.compact { min-height: 34px; padding: 0 12px; }
.badge, .count-badge { min-height: 24px; padding: 0 8px; border-radius: 7px; background: rgba(242, 61, 147, .1); color: #ee62a1; display: inline-flex; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .06em; }
.badge.prototype { color: #a9b8c6; background: #161c25; }
.account-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.check-card { min-height: 36px; padding: 0 10px; border: 1px solid #262d38; border-radius: 9px; display: flex; align-items: center; gap: 7px; background: #0b0f15; cursor: pointer; }
.check-card input { width: 15px; min-height: 15px; accent-color: var(--pink); }
.mini-stats { display: grid; gap: 0; }
.mini-stats > div { min-height: 76px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-stats > div:last-child { border-bottom: 0; }
.mini-stats span { color: var(--muted); font-size: 12px; }
.mini-stats strong { font-family: "IBM Plex Mono", monospace; font-size: 24px; }
.mini-stats .small-value { font-size: 13px; }
.compact-list { display: grid; }
.compact-list > div { min-height: 48px; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: 12px; }
.compact-list > div:last-child { border-bottom: 0; }
.compact-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-list small { color: var(--green); }

.info-strip { padding: 12px 13px; border: 1px solid #233242; border-radius: 10px; background: rgba(34, 64, 88, .14); color: #9bb2c5; display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; }
.info-strip svg { flex: 0 0 auto; color: #72a5ca; }
.toggle-line { min-height: 64px; padding: 12px 13px; border: 1px solid #242b36; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #0b0e14; }
.toggle-line strong, .toggle-line small { display: block; }
.toggle-line strong { color: var(--text); font-size: 13px; }
.toggle-line small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.switch { appearance: none; width: 40px; min-width: 40px; min-height: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: #29313d; cursor: pointer; position: relative; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8997a5; transition: left .18s, background .18s; }
.switch:checked { background: rgba(242, 61, 147, .35); }
.switch:checked::after { left: 21px; background: var(--pink); box-shadow: 0 0 10px rgba(242, 61, 147, .55); }
.preview-phone { padding: 20px; display: flex; align-items: center; justify-content: center; }
.phone-frame { width: 210px; height: 410px; padding: 8px; border: 1px solid #333a45; border-radius: 34px; background: #050608; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.phone-story { width: 100%; height: 100%; padding: 18px 13px; border-radius: 27px; background: radial-gradient(circle at 70% 20%, rgba(242,61,147,.28), transparent 30%), linear-gradient(145deg, #202632, #10131a 55%, #291122); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; }
.story-avatar { align-self: flex-start; width: 24px; height: 24px; border: 2px solid var(--pink); border-radius: 50%; background: #303b49; }
.phone-story small { position: absolute; left: 44px; top: 23px; color: white; font-size: 8px; }
.phone-story > svg { margin: auto; width: 56px; height: 56px; color: rgba(255,255,255,.38); }
.phone-story strong { max-width: 160px; margin-bottom: 22px; font-size: 15px; }
.story-link { min-width: 118px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.88); color: #12131a; font-size: 10px; font-weight: 700; }
.result-list { display: grid; gap: 12px; }
.result-list > div { padding: 12px; border: 1px solid var(--line-soft); border-radius: 9px; }
.result-list span, .result-list strong { display: block; }
.result-list span { color: var(--muted); font-size: 11px; }
.result-list strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; }

.upload-zone { min-height: 210px; padding: 26px; border: 1px dashed rgba(242, 61, 147, .38); border-radius: 14px; background: radial-gradient(circle at 50% 0, rgba(242,61,147,.08), transparent 50%), var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; position: relative; transition: border-color .18s, background .18s; }
.upload-zone.dragging { border-color: var(--pink); background-color: rgba(242,61,147,.06); }
.upload-icon { width: 52px; height: 52px; border-radius: 15px; background: var(--pink-soft); color: var(--pink); display: inline-flex; align-items: center; justify-content: center; }
.upload-icon svg { width: 25px; height: 25px; }
.upload-zone.busy .upload-icon svg { animation: spin .8s linear infinite; }
.upload-zone h2 { margin: 0; font-size: 18px; }
.upload-zone p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.upload-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.progress { width: min(460px, 90%); height: 6px; border-radius: 999px; overflow: hidden; background: #222834; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), #ff8a42); transition: width .25s; }

.table-panel { padding: 0; overflow: hidden; }
.table-panel > .panel-heading { padding: 16px 18px 2px; }
.responsive-table { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { height: 40px; padding: 0 16px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: #0b0e13; color: #71879a; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .07em; text-align: left; white-space: nowrap; }
td { min-height: 58px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: #a7b5c3; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255,255,255,.012); }
.file-cell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.file-cell > span:last-child { min-width: 0; }
.file-cell strong, .file-cell small { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-cell strong { color: #e8edf3; }
.file-cell small { margin-top: 3px; color: var(--dim); font-size: 10px; }
.file-thumb { width: 34px; height: 34px; border-radius: 9px; background: var(--pink-soft); color: var(--pink); display: inline-flex; align-items: center; justify-content: center; }
.file-thumb svg { width: 14px; height: 14px; }
.status-pill { min-height: 23px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.status-pill.success { color: var(--green); background: rgba(0, 223, 164, .11); }
.status-pill.danger { color: #ff6575; background: rgba(255, 53, 72, .11); }
.status-pill.neutral { color: #9babb9; background: #1a2029; }
.status-pill.warning { color: var(--yellow); background: rgba(255, 208, 0, .12); }
.danger-ghost { color: #9c6772; }
.danger-ghost:hover { color: #ff6575; background: rgba(255,53,72,.1); }
.field-counter { position: absolute; right: 10px; bottom: 9px; color: #596878; font-size: 10px; }
.validation-list { display: grid; gap: 8px; }
.validation-list > div { min-height: 45px; padding: 0 11px; border: 1px solid var(--line-soft); border-radius: 9px; color: var(--dim); display: flex; align-items: center; gap: 9px; font-size: 12px; }
.validation-list > div.ok { color: var(--green); border-color: rgba(0, 223, 164, .16); }

.account-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.account-actions h2 { margin: 0; font-size: 18px; }
.account-actions p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.account-actions > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.accounts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.account-card { padding: 16px; }
.account-top { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.account-top img, .account-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.account-avatar { background: var(--pink-soft); color: var(--pink); display: inline-flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.account-top strong, .account-top small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-top small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.account-data { margin-top: 15px; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.account-data span, .account-data strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-data span { color: var(--dim); font-size: 9px; }
.account-data strong { margin-top: 3px; font-size: 12px; }
.account-footer { padding-top: 10px; display: flex; justify-content: space-between; }
.proxy-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.proxy-add > div { display: flex; gap: 8px; }
.mono { font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.app-tile { text-align: center; }
.app-logo { width: 56px; height: 56px; margin: 8px auto 14px; border-radius: 16px; background: linear-gradient(145deg, #6b44e9, #e03a83, #f2a02b); color: white; display: flex; align-items: center; justify-content: center; }
.app-logo svg { width: 27px; height: 27px; }
.app-tile h3 { margin: 0; }
.app-tile p { color: var(--muted); font-size: 12px; }
.timeline-card { text-align: center; padding-top: 38px; }
.timeline-card > strong { display: block; margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 24px; }
.timeline { height: 6px; margin: 36px 10px 22px; border-radius: 999px; background: #262d37; }
.timeline span { display: block; margin-left: 22%; width: 58%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), #fb8a4c); box-shadow: 0 0 18px rgba(242,61,147,.35); }
.timeline-card p { color: var(--muted); font-size: 12px; }

.queue-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.queue-cards article { min-height: 92px; padding: 15px; }
.queue-cards span, .queue-cards strong { display: block; }
.queue-cards span { color: var(--muted); font-size: 11px; }
.queue-cards strong { margin-top: 9px; font-family: "IBM Plex Mono", monospace; font-size: 26px; }
.terminal-panel { padding: 0; overflow: hidden; }
.terminal-panel .panel-heading { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.terminal { height: 220px; padding: 13px 16px; overflow-y: auto; background: #05070a; color: #a8b4c0; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.8; }
.terminal > div > span { color: #617286; }
.terminal-empty { color: #455361; }
.log-success { color: #52ddb6; }
.log-error { color: #ff6575; }
.log-warning { color: #f5c851; }
.live-label { color: var(--green); display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 9px; }
.live-label > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(0,223,164,.7); }

.green-text { color: var(--green) !important; }
.red-text, .danger-text { color: var(--red) !important; }
.yellow-text { color: var(--yellow) !important; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; padding: 20px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 20px; border: 1px solid #2a303b; border-radius: 16px; background: #10141b; box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.modal-close { color: #d3dbe5; font-size: 24px; font-weight: 300; line-height: 1; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 110; width: min(370px, calc(100vw - 36px)); display: grid; gap: 8px; }
.toast { min-height: 52px; padding: 11px 13px; border: 1px solid #2a313d; border-radius: 11px; background: rgba(19, 24, 32, .98); box-shadow: 0 18px 50px rgba(0,0,0,.34); display: flex; align-items: center; gap: 10px; color: #d9e0e8; font-size: 12px; animation: toast-in .22s ease both; }
.toast-symbol { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #66a9d9; box-shadow: 0 0 10px currentColor; }
.toast.success .toast-symbol { color: var(--green); background: var(--green); }
.toast.error .toast-symbol { color: var(--red); background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Reference-style publishing pages */
.reference-page { width: min(100%, 1440px); margin-inline: auto; }
.page-tool-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.reference-title { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 25px; letter-spacing: -.03em; }
.reference-title svg { color: var(--pink); width: 23px; }
.page-tool-row p { margin: 0; color: var(--muted); font-size: 12px; }
.tool-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.soft-pill { border: 1px solid var(--line); background: rgba(20,22,31,.8); color: var(--muted); border-radius: 999px; padding: 9px 13px; font-size: 11px; }
.upload-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--green); font-size: 10px; }
.upload-note svg { width: 12px; }
.loop-config-shell { padding: 11px; }
.loop-accordion { border: 1px solid var(--line); border-radius: 12px; background: rgba(11,14,20,.72); margin-bottom: 9px; overflow: hidden; transition: border-color .2s ease, background .2s ease; }
.loop-accordion.open { border-color: rgba(233,58,143,.66); background: linear-gradient(90deg, rgba(41,18,35,.55), rgba(11,14,20,.8)); }
.loop-accordion-head { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.loop-accordion-head > span:nth-child(2) { flex: 1; display: grid; gap: 3px; }
.loop-accordion-head strong { font-size: 14px; }
.loop-accordion-head small { color: var(--muted); font-size: 11px; }
.loop-head-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--pink); background: rgba(233,58,143,.13); }
.loop-head-icon svg { width: 17px; }
.loop-chevron { width: 17px; color: var(--muted); transition: transform .2s ease; }
.loop-accordion.open .loop-chevron { transform: rotate(180deg); color: var(--pink); }
.loop-accordion-body { padding: 0 15px 16px 61px; animation: accordion-in .2s ease both; }
@keyframes accordion-in { from { opacity: .1; transform: translateY(-4px); } }
.cover-dropzone { width: 100%; min-height: 88px; display: grid; place-items: center; gap: 4px; border: 1px dashed #303847; border-radius: 10px; background: rgba(9,12,17,.78); color: var(--text); cursor: pointer; }
.cover-dropzone:hover { border-color: var(--pink); background: rgba(233,58,143,.06); }
.cover-dropzone svg { color: var(--pink); width: 18px; }
.cover-dropzone strong { font-size: 12px; }
.cover-dropzone small { color: var(--muted); font-size: 10px; }
.selected-file { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding: 9px 11px; border-radius: 8px; background: rgba(33,38,50,.55); color: var(--text); font-size: 11px; }
.selected-file svg { width: 14px; vertical-align: -3px; color: var(--pink); }
.effects-list { display: grid; gap: 7px; }
.effect-row { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 10px 12px; border: 1px solid #202632; border-radius: 9px; background: rgba(8,11,16,.62); cursor: pointer; }
.effect-row:hover { border-color: #394152; }
.effect-row span { display: grid; gap: 3px; }
.effect-row strong { font-size: 12px; }
.effect-row small { color: var(--muted); font-size: 10px; }
.effect-row.accent-row { border-color: rgba(233,58,143,.58); background: rgba(49,21,43,.46); }
.variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.variant-grid > label, .variant-textarea { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 10px 11px; border: 1px solid #202632; border-radius: 9px; background: rgba(8,11,16,.62); color: var(--muted); font-size: 10px; }
.variant-grid > label > input:not(.switch), .variant-grid > label > select, .variant-textarea textarea { min-height: 36px; font-size: 11px; }
.variant-grid small, .variant-textarea small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.variant-grid .span-2 { grid-column: span 2; }
.variant-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.variant-toggle > span { display: grid; gap: 3px; }
.variant-toggle strong { color: var(--text); font-size: 11px; }
.variant-presets { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid #202632; border-radius: 9px; }
.variant-presets legend { padding: 0 5px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.variant-presets label { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-size: 10px; }
.variant-textarea { margin-top: 8px; }
.compact-dropzone { min-height: 66px; margin-top: 10px; }
.music-track-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.music-track-list > span { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(17,21,29,.75); color: var(--muted); font-size: 9px; }
.music-track-list svg { width: 12px; color: var(--pink); }
.music-track-list .text-button { padding: 0 0 0 4px; font-size: 9px; }
.variant-warning { margin: 8px 0 0; color: var(--yellow); font-size: 10px; }
.variant-hint { margin: 0 0 4px; padding: 8px 11px; border: 1px solid rgba(233,58,143,.28); border-radius: 8px; background: rgba(49,21,43,.28); color: var(--muted); font-size: 10px; line-height: 1.45; }
.metadata-segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: 9px; background: #202632; }
.metadata-segmented.codec-segmented { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.metadata-segmented button { border: 0; border-radius: 7px; padding: 9px 8px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.metadata-segmented button.active { background: var(--pink); color: #fff; box-shadow: 0 5px 14px rgba(233,58,143,.2); }
.loop-bottom-config { display: grid; grid-template-columns: .8fr .8fr 1.5fr 1.7fr; gap: 12px; padding: 16px 4px 4px; border-top: 1px solid var(--line); margin-top: 5px; }
.loop-bottom-config label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.loop-bottom-config input { text-transform: none; letter-spacing: 0; }
.loop-account-field { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.loop-account-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.loop-account-heading > span { color: var(--muted); }
.loop-account-actions { display: flex; gap: 5px; }
.loop-account-actions .text-button { padding: 0; font-size: 9px; }
.loop-account-summary { min-height: 30px; color: var(--text); font-size: 10px; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.loop-account-toggle { width: fit-content; padding: 0; border: 0; background: transparent; color: var(--pink); display: inline-flex; align-items: center; gap: 5px; font-size: 10px; cursor: pointer; }
.loop-account-toggle svg { width: 13px; height: 13px; }
.loop-account-toggle .loop-chevron { transition: transform .2s ease; }
.loop-account-toggle.open .loop-chevron { transform: rotate(180deg); }
.loop-account-list-wrap { display: grid; gap: 7px; }
.loop-account-search { min-height: 32px !important; padding: 6px 9px !important; font-size: 10px !important; }
.compact-selector { min-height: 38px; max-height: 176px; padding-right: 4px; overflow-y: auto; align-content: start; }
.loop-account-field .compact-selector .check-card { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); text-transform: none; letter-spacing: 0; }
.loop-account-field .compact-selector .check-card input { width: 15px; min-height: 15px; accent-color: var(--pink); }
.loop-video-field { grid-column: span 1; }
.compact-selector .check-card > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-selector .check-card small { display: block; color: #738398; font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.variation-control { padding: 17px 4px 3px; }
.variation-control > div { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.variation-control strong { color: var(--pink); }
.variation-control input[type=range] { width: 100%; accent-color: var(--pink); margin: 10px 0 4px; }
.variation-control small { color: var(--muted); font-size: 10px; }
.loop-footer { padding-top: 14px; }
.loop-shortcuts { margin-top: 0; }

.story-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.story-metrics article { min-height: 67px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(18,20,29,.7); }
.story-metrics .metric-icon { grid-row: 1 / span 2; }
.story-metrics strong { color: var(--text); font-size: 18px; line-height: 1; }
.story-metrics small { color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.sync-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 11px; }
.sync-bar > span { display: flex; align-items: center; gap: 8px; }
.sync-bar svg { width: 14px; color: var(--pink); }
.simultaneous { display: flex; align-items: center; gap: 4px; padding: 3px 5px 3px 10px; border: 1px solid var(--line); border-radius: 10px; }
.simultaneous b { margin-right: 6px; color: var(--text); font-size: 11px; }
.simultaneous button { border: 0; border-radius: 7px; padding: 7px 8px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.simultaneous button.active { background: var(--pink); color: #fff; }
.worker-controls { display: flex; align-items: end; gap: 8px; padding: 5px 6px 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(11,14,20,.55); }
.worker-controls label { display: grid; gap: 3px; min-width: 84px; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.worker-controls input { width: 84px; min-height: 30px; padding: 5px 8px; font-size: 11px; }
.worker-controls .range-worker { min-width: 180px; }
.range-worker > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.range-worker strong { color: var(--pink); font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0; }
.range-worker input[type="range"] { width: 180px; min-height: 18px; padding: 0; accent-color: var(--pink); }
.worker-controls .button { align-self: end; min-height: 30px; }
.stories-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 12px; }
.stories-right { display: grid; gap: 12px; }
.reference-card { padding: 15px; }
.reference-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reference-card-head > div:first-child { display: grid; gap: 4px; }
.reference-card-head small { color: var(--muted); font-size: 10px; }
.section-code { color: #b4c0d1; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .18em; }
.selection-count { display: block; margin: 16px 0 8px; color: var(--muted); font-size: 10px; }
.story-account-list { display: grid; gap: 6px; }
.story-account-row { display: grid; grid-template-columns: 18px 30px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #232a35; border-radius: 8px; background: rgba(10,13,19,.7); cursor: pointer; }
.story-account-row > span:nth-child(3) { display: grid; gap: 2px; }
.story-account-row strong { font-size: 11px; }
.story-account-row small { color: var(--muted); font-size: 9px; }
.story-account-row .account-avatar { width: 28px; height: 28px; font-size: 9px; }
.empty-inline, .queue-empty { display: grid; place-items: center; min-height: 68px; padding: 12px; border: 1px solid #222936; border-radius: 9px; color: var(--muted); font-size: 11px; text-align: center; }
.creative-counts { display: flex; gap: 6px; }
.creative-counts span { display: grid; gap: 2px; justify-items: center; padding: 7px 9px; border: 1px solid #272e3c; border-radius: 8px; color: var(--muted); font-size: 8px; }
.creative-counts strong { color: var(--text); font-size: 12px; }
.story-upload { margin-top: 13px; min-height: 67px; }
.asset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.asset-chips span { padding: 6px 8px; border-radius: 999px; background: rgba(233,58,143,.12); color: #f5a6ca; font-size: 10px; }
.asset-chips button { border: 0; background: transparent; color: inherit; cursor: pointer; }
.story-draft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.story-draft-grid label { color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.story-draft-grid .input-action { margin-top: 5px; }
.creative-links { display: flex; gap: 8px; margin-top: 11px; }
.story-queue-list, .queue-post-list { display: grid; gap: 7px; margin-top: 13px; }
.story-queue-list > div, .queue-post-list > div { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: rgba(10,13,19,.7); font-size: 11px; }
.story-queue-list small, .queue-post-list small { margin-left: auto; color: var(--muted); }
.story-create-panel { padding: 15px; }
.story-create-panel .form-grid { margin-top: 15px; }

.account-search-row { display: flex; }
.search-field { width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(22,25,35,.72); }
.search-field svg { width: 15px; color: var(--muted); }
.search-field input { border: 0; background: transparent; }
.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 10px; }
.filter-row button, .account-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid transparent; border-radius: 999px; background: rgba(28,31,42,.72); color: var(--muted); font-size: 10px; cursor: pointer; }
.filter-row button.active, .account-tabs button.active { border-color: var(--pink); color: #ff66ad; background: rgba(233,58,143,.11); }
.filter-row svg, .account-tabs svg { width: 12px; }
.account-tabs { padding: 10px; border: 1px solid var(--line); border-radius: 11px; }
.account-counter-row { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.account-counter-row article { min-height: 72px; display: grid; align-content: center; gap: 7px; padding: 11px 16px; border-right: 1px solid var(--line); background: rgba(14,17,24,.7); }
.account-counter-row article:last-child { border-right: 0; }
.account-counter-row strong { font-size: 19px; }
.account-counter-row small { color: var(--muted); font-size: 9px; }
.accounts-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 10px; }
.accounts-toolbar .button { margin-left: auto; }
.accounts-toolbar strong { color: var(--text); }
.reference-account-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

.proxy-info { border-color: rgba(233,58,143,.55); }
.proxy-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.proxy-profile-card { padding: 14px; }
.proxy-card-head { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: start; }
.proxy-card-head h3 { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .07em; }
.proxy-card-head p { margin: 5px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.proxy-active { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 10px; }
.proxy-active svg { width: 11px; }
.inline-switch { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.fallback-line { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 7px; padding: 8px 9px; border: 1px solid #202632; border-radius: 8px; color: var(--text); font-size: 10px; }
.proxy-fields { display: grid; grid-template-columns: minmax(0,1fr) 78px; gap: 8px 12px; margin-top: 15px; }
.proxy-fields label { display: grid; gap: 5px; }
.proxy-fields b { color: var(--pink); font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .08em; }
.proxy-fields input { min-height: 28px; border: 0; border-bottom: 1px solid #252c37; border-radius: 0; background: transparent; padding-inline: 2px; }
.proxy-profile-card .button.full { width: 100%; margin-top: 12px; }
.proxy-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pink-text { color: #ff4ca2 !important; }

.dark-segment { background: rgba(24,27,37,.8); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.dark-segment button { border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: 7px 9px; font-size: 10px; cursor: pointer; }
.dark-segment button.active { background: var(--pink); color: #fff; }
.queue-reference-metrics { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px; }
.automation-queue-card { min-height: 140px; }
.automation-queue-list { display: grid; gap: 7px; }
.automation-queue-row { min-height: 48px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(9,12,17,.72); display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; }
.automation-queue-row > span:nth-child(2) { min-width: 0; }
.automation-queue-row strong, .automation-queue-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automation-queue-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.queue-job-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.queue-job-actions .button { min-height: 28px; padding: 0 8px; font-size: 9px; }
.queue-job-id { color: var(--dim); font-family: "IBM Plex Mono", monospace; font-size: 10px; }
.queue-reference-metrics article { min-height: 66px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(21,23,32,.76); text-align: center; }
.queue-reference-metrics article > span svg { width: 14px; }
.queue-reference-metrics strong { font-size: 16px; }
.queue-reference-metrics small { color: var(--muted); font-size: 9px; }
.queue-wide-card { min-height: 104px; padding: 15px; }
.queue-wide-card > .panel-heading > span { color: var(--muted); font-size: 10px; }
.queue-history-card { min-height: 250px; }
.cyan-text { color: #6de1ff !important; }
.blue-text { color: #64a7ff !important; }

.sidebar-collapsed .sidebar { width: 70px; }
.sidebar-collapsed .sidebar-nav { padding-inline: 9px; }
.sidebar-collapsed .nav-kicker, .sidebar-collapsed .nav-item span, .sidebar-collapsed .nav-arrow { display: none; }
.sidebar-collapsed .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
.sidebar-collapsed .topbar { left: 70px; }
.sidebar-collapsed .workspace { margin-left: 70px; }

@media (max-width: 1420px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .accounts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .dashboard-bottom, .content-grid, .preparer-columns { grid-template-columns: 1fr; }
  .feature-grid { gap: 11px; max-width: none; }
  .forecast-panel, .queue-summary { min-height: auto; }
  .queue-summary { padding-bottom: 10px; }
  .preview-phone { min-height: 470px; }
  .proxy-profile-grid, .stories-columns { grid-template-columns: 1fr 1fr; }
  .queue-reference-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .loop-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  :root { --topbar-height: 58px; }
  .sidebar, .sidebar-collapsed .sidebar { width: min(292px, 86vw); transform: translateX(-102%); box-shadow: 24px 0 80px rgba(0,0,0,.5); transition: transform .24s ease; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-mobile-brand { height: 58px; padding: 0 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .18em; }
  .sidebar-mobile-brand .brand-orb { width: 32px; height: 32px; }
  .close-sidebar { margin-left: auto; }
  .mobile-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.64); backdrop-filter: blur(3px); }
  .topbar, .sidebar-collapsed .topbar { left: 0; padding-inline: 11px; }
  .workspace, .sidebar-collapsed .workspace { margin-left: 0; padding: calc(var(--topbar-height) + 12px) 12px 24px; }
  .menu-button { margin-right: 0; }
  .brand-name { font-size: 12px; }
  .bot-status { margin-left: auto; }
  .topbar-spacer { display: none; }
  .avatar { display: none; }
  .page-heading { min-height: 102px; align-items: flex-start; flex-direction: column; justify-content: flex-end; gap: 12px; }
  .refresh-area { width: 100%; justify-content: space-between; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { height: 66px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .form-grid.two > .span-2 { grid-column: auto; }
  .control-banner, .account-actions, .form-footer { align-items: stretch; flex-direction: column; }
  .loop-mode-heading { flex-direction: column; }
  .loop-mode-grid { grid-template-columns: 1fr; }
  .mode-schedule-field { grid-template-columns: 1fr; }
  .account-actions > div:last-child { width: 100%; }
  .account-actions .button { flex: 1; }
  .accounts-grid { grid-template-columns: 1fr; }
  .proxy-add { grid-template-columns: 1fr; }
  .proxy-add > div { justify-content: flex-end; }
  .queue-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-tool-row { flex-direction: column; }
  .tool-actions { justify-content: flex-start; }
  .adapter-strip { align-items: flex-start; flex-direction: column; }
  .adapter-strip label { width: 100%; }
  .button-row { justify-content: flex-start; }
  .loop-bottom-config, .story-draft-grid { grid-template-columns: 1fr 1fr; }
  .stories-columns, .proxy-profile-grid { grid-template-columns: 1fr; }
  .account-counter-row { grid-template-columns: repeat(2, 1fr); }
  .account-counter-row article:nth-child(2n) { border-right: 0; }
  .account-counter-row article { border-bottom: 1px solid var(--line); }
  .account-counter-row article:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .accounts-toolbar { gap: 10px; }
  .accounts-toolbar .button { margin-left: 0; }
  .queue-reference-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sync-bar { align-items: flex-start; flex-direction: column; }
  .simultaneous { width: 100%; overflow-x: auto; }
  .worker-controls { width: 100%; flex-wrap: wrap; }
  .worker-controls label { flex: 1 1 120px; }
  .worker-controls .range-worker { flex-basis: 100%; }
  .range-worker input[type="range"] { width: 100%; }
}
@media (max-width: 520px) {
  .brand-orb { width: 31px; height: 31px; }
  .brand-name { letter-spacing: .15em; }
  .bot-status { padding-inline: 7px; font-size: 9px; }
  .page-heading h1 { font-size: 28px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 116px; height: 116px; }
  .metric-dragon { right: -1px; top: 4px; width: 82px; height: 68px; }
  .period-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .dashboard-bottom { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 15px; }
  .upload-zone { padding: 22px 15px; }
  .upload-actions { width: 100%; }
  .upload-actions .button { width: 100%; }
  .input-action { flex-direction: column; }
  .account-top { grid-template-columns: 42px minmax(0, 1fr); }
  .account-top .status-pill { grid-column: 1 / -1; justify-self: start; }
  .account-data { grid-template-columns: 1fr 1fr; }
  .queue-cards { grid-template-columns: 1fr 1fr; }
  .loop-accordion-body { padding-left: 15px; }
  .variant-grid { grid-template-columns: 1fr; }
  .variant-grid .span-2 { grid-column: span 1; }
  .loop-bottom-config { grid-template-columns: 1fr; }
  .metadata-segmented { grid-template-columns: repeat(2, 1fr); }
  .story-metrics { grid-template-columns: 1fr 1fr; }
  .story-draft-grid { grid-template-columns: 1fr; }
  .reference-card-head { flex-direction: column; }
  .creative-counts { align-self: stretch; }
  .creative-counts span { flex: 1; }
  .account-counter-row { grid-template-columns: 1fr 1fr; }
  .account-counter-row article { padding-inline: 10px; }
  .story-account-row { grid-template-columns: 18px 30px minmax(0,1fr); }
  .story-account-row .status-pill { grid-column: 3; justify-self: start; }
  .preparer-account-list .story-account-row { grid-template-columns: 18px 30px minmax(0,1fr) auto; }
  .preparer-account-list .preparer-account-delete { grid-column: 4; grid-row: 1 / span 2; }
  .preparer-account-list .preparer-account-delete span { display: none; }
  .page-tool-row .tool-actions { width: 100%; }
  .page-tool-row .tool-actions > * { flex: 1; }
}

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

/* ── OAuth Auto-Connect Panel ──────────────────────────────── */
.oauth-connect-panel { margin-top: 16px; }
.oauth-connect-body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 4px; }
.oauth-connect-body label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.oauth-connect-body .mono-textarea {
  font-family: "IBM Plex Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: .78rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
  transition: border-color .15s;
}
.oauth-connect-body .mono-textarea:focus { outline: none; border-color: var(--pink); }
.oauth-connect-body .mono-textarea:disabled { opacity: .5; cursor: not-allowed; }
.oauth-connect-info {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(0, 164, 200, .07);
  border: 1px solid rgba(0, 164, 200, .18);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}
.oauth-connect-info svg { flex-shrink: 0; color: #00a4c8; margin-top: 1px; }

/* Session progress list */
.oauth-sessions-list {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oauth-sessions-head { display: flex; align-items: center; gap: 8px; }
.oauth-sessions-head strong { font-size: .88rem; }
.oauth-sessions-head small { color: var(--muted); font-size: .78rem; }
.oauth-session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .82rem;
}
.oauth-session-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.oauth-session-row > span:nth-child(2) strong { font-size: .88rem; }
.oauth-session-row > span:nth-child(2) small { font-size: .75rem; color: var(--muted); }
.danger-text { color: var(--red) !important; }
.soft-pill.success { background: rgba(0, 223, 164, .12); color: var(--green); }
.soft-pill.warning { background: rgba(255, 208, 0, .12); color: var(--yellow); }

/* Compact, resumable Preparador flow */
.pipeline-options { display: grid; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(10,13,19,.42); }
.pipeline-options > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.pipeline-options > summary::-webkit-details-marker { display: none; }
.pipeline-options > summary > span { display: grid; gap: 2px; }
.pipeline-options > summary strong { color: var(--text); font-size: 12px; }
.pipeline-options > summary small { color: var(--muted); font-size: 10px; }
.pipeline-options > summary svg { width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; }
.pipeline-options[open] > summary svg { transform: rotate(180deg); }
.pipeline-options-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pipeline-options-grid .toggle-line { min-height: 48px; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(21,23,32,.66); }
.pipeline-options-grid .pipeline-photo-picker,
.pipeline-options-grid .pipeline-bio-field { grid-column: 1 / -1; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(21,23,32,.66); display: grid; gap: 6px; }
.pipeline-options-grid .pipeline-bio-field > span,
.pipeline-options-grid .pipeline-photo-picker > span { color: var(--text-soft); font-size: 10px; font-weight: 600; }
.pipeline-options-grid .pipeline-bio-field strong,
.pipeline-options-grid .pipeline-photo-picker strong { font-size: 10px; }
.cover-dropzone.compact { min-height: 52px; }
.toggle-line.compact strong { font-size: 10px; }
.toggle-line.compact small { font-size: 9px; line-height: 1.35; }
.pipeline-form-footer { display: grid; gap: 8px; }
.pipeline-footer-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pipeline-worker-label { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 11px; white-space: nowrap; }
.pipeline-worker-label svg { width: 13px; height: 13px; color: var(--muted); }
.pipeline-worker-label strong { color: var(--text); min-width: 18px; }
.pipeline-worker-label input[type="range"] { accent-color: var(--pink); }
.oauth-sessions-head .text-button { margin-left: auto; }
.pipeline-session { border: 1px solid var(--line); border-radius: 9px; background: rgba(10,13,19,.62); overflow: hidden; }
.pipeline-session > summary { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; cursor: pointer; list-style: none; }
.pipeline-session > summary::-webkit-details-marker { display: none; }
.pipeline-summary-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pipeline-summary-main strong { color: var(--text); font-size: 12px; white-space: nowrap; }
.pipeline-summary-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--dim); }
.status-dot.success { background: var(--green); box-shadow: 0 0 0 3px rgba(0,223,164,.1); }
.status-dot.warning { background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,208,0,.1); }
.status-dot.danger { background: var(--red); box-shadow: 0 0 0 3px rgba(255,76,108,.1); }
.pipeline-stage-list { display: grid; gap: 1px; padding: 0 10px 8px; }
.pipeline-stage { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border-top: 1px solid rgba(255,255,255,.035); }
.pipeline-stage .stage-marker { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.06); font-size: 10px; }
.pipeline-stage > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.pipeline-stage strong { font-size: 10px; color: var(--text-soft); }
.pipeline-stage small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-stage em { color: var(--muted); font-size: 9px; font-style: normal; white-space: nowrap; }
.pipeline-stage.completed .stage-marker { color: var(--green); background: rgba(0,223,164,.12); }
.pipeline-stage.running .stage-marker, .pipeline-stage.waiting .stage-marker, .pipeline-stage.manual_required .stage-marker { color: var(--yellow); background: rgba(255,208,0,.12); }
.pipeline-stage.error .stage-marker { color: var(--red); background: rgba(255,76,108,.12); }
.pipeline-stage.skipped { opacity: .6; }
.pipeline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 11px; }
.pipeline-actions small { flex: 1 1 220px; min-width: 0; }
.pipeline-actions a { text-decoration: none; }

.preparer-mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0 12px; }
.preparer-mode-grid button { display: grid; gap: 3px; padding: 10px 12px; text-align: left; color: var(--muted); background: rgba(10,13,19,.45); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.preparer-mode-grid button:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.preparer-mode-grid button.active { color: var(--text); border-color: rgba(255,47,121,.5); background: rgba(255,47,121,.08); box-shadow: inset 0 0 0 1px rgba(255,47,121,.08); }
.preparer-mode-grid span { font-size: 11px; font-weight: 700; }
.preparer-mode-grid small { font-size: 9px; line-height: 1.35; }
.preparer-runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.preparer-runtime-card { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,13,19,.55); }
.preparer-runtime-card.ready { border-color: rgba(0,223,164,.22); }
.preparer-runtime-card.attention { border-color: rgba(255,208,0,.2); }
.preparer-runtime-card .runtime-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.05); }
.preparer-runtime-card.ready .runtime-icon { color: var(--green); background: rgba(0,223,164,.1); }
.preparer-runtime-card > div { display: grid; gap: 2px; min-width: 0; }
.preparer-runtime-card strong { font-size: 11px; color: var(--text); }
.preparer-runtime-card small { font-size: 9px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-summary-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.session-summary-meta .icon-button { width: 28px; height: 28px; flex: 0 0 auto; }
.session-summary-meta > small { color: var(--muted); font-size: 9px; }
.pipeline-event-log { margin: 0 12px 11px; border-top: 1px solid var(--line-soft); }
.pipeline-event-log > summary { padding: 8px 0; color: var(--muted); font-size: 10px; cursor: pointer; }
.pipeline-event-log > div { display: grid; gap: 1px; padding-bottom: 6px; }
.pipeline-event-log p { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; gap: 8px; align-items: center; margin: 0; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.03); font-size: 9px; }
.pipeline-event-log time, .pipeline-event-log em { color: var(--muted); font-style: normal; }
.pipeline-event-log span { color: var(--text-soft); }
.settings-advanced { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.settings-advanced > summary { color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 600; }
.settings-advanced .form-grid { margin-top: 12px; }

@media (max-width: 900px) {
  .preparer-mode-grid, .pipeline-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preparer-runtime-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .preparer-mode-grid, .pipeline-options-grid { grid-template-columns: 1fr; }
  .pipeline-session > summary { align-items: flex-start; }
  .pipeline-summary-main { flex-wrap: wrap; }
  .session-summary-meta { align-items: flex-end; flex-direction: column; }
  .preparer-runtime-card { grid-template-columns: 32px minmax(0,1fr); }
  .preparer-runtime-card .button { grid-column: 2; justify-self: start; }
  .pipeline-event-log p { grid-template-columns: 1fr; }
}