/* OHY Labs theme, adapted from OHY-COMPANY-SITE on 2026-09-27. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./fonts/display.ad33cbc6d232.woff2") format("woff2");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/body.938c6e8019b6.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/mono.b636a65da4f0.woff2") format("woff2");
}
:root {
  --brand-50: #fff1f2;
  --brand-100: #ffe9eb;
  --brand-200: #ffc8cc;
  --brand-300: #ff9ca4;
  --brand-400: #ff3d49;
  --brand-500: #ff1a1a;
  --brand-600: #e51220;
  --brand-700: #c41220;
  --brand-800: #9f1220;
  --brand-900: #83131e;
  --brand-green-100: #dcfce7;
  --brand-green-200: #bbf7d0;
  --brand-green-500: #16a34a;
  --brand-green-600: #15803d;
  --brand-font-display: "Bricolage Grotesque", sans-serif;
  --brand-font-body: Manrope, system-ui, sans-serif;
  --brand-font-mono: "JetBrains Mono", monospace;
  --neutral-950: #0a0a0a;
  --neutral-900: #171717;
  --neutral-800: #262626;
  --neutral-700: #404040;
  --neutral-600: #525252;
  --neutral-500: #737373;
  --neutral-400: #a3a3a3;
  --neutral-300: #d4d4d4;
  --neutral-200: #eaeaea;
  --neutral-100: #f5f5f5;
  --neutral-50: #fafafa;
  --surface-page: #fafafa;
  --text-primary: #0a0a0a;
  --text-secondary: #52525b;
  --text-tertiary: #6b7280;
  --primary-rgb: 255, 26, 26;
  --shadow-primary: 0 3px 10px #ff1a1a20;
  --radius-xl: 8px;
  --radius-2xl: 8px;
}
body {
  color: var(--text-primary);
}
:root {
  --color-stone-50: var(--neutral-50);
  --color-stone-100: var(--neutral-100);
  --color-stone-200: var(--neutral-200);
  --color-stone-300: var(--neutral-300);
  --color-stone-400: var(--neutral-400);
  --color-stone-500: var(--neutral-500);
  --color-stone-600: var(--neutral-600);
  --color-stone-700: var(--neutral-700);
  --color-stone-800: var(--neutral-800);
  --color-stone-900: var(--neutral-900);
  --color-orange-50: var(--brand-50);
  --color-orange-100: var(--brand-100);
  --color-orange-200: var(--brand-200);
  --color-orange-300: var(--brand-300);
  --color-orange-400: var(--brand-400);
  --color-orange-500: var(--brand-500);
  --color-orange-600: var(--brand-600);
  --color-orange-700: var(--brand-700);
}
.btn-brand {
  border-radius: 6px;
  box-shadow: none;
}
.btn-brand:hover {
  box-shadow: none;
}
.acct-pill.selected,
.acct-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.caption-wrap:focus-within,
.comment-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: 0 !important;
}
button,
a,
input,
textarea,
select {
  letter-spacing: 0;
}
.ohy-main {
  border-left: 1px solid var(--border);
  min-width: 0;
  border-radius: 0;
}
.ohy-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 83px;
  padding: 20px 17px;
  text-decoration: none;
  color: var(--text-primary);
}
.ohy-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
  flex-shrink: 0;
}
.ohy-brand-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.ohy-brand-name > span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.ohy-brand-name small {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
}
img.sidebar-logo-mark {
  object-fit: contain;
  background: white;
}
#workspace-logo {
  scroll-margin-top: 24px;
}
.sidebar-collapsed .ohy-brand {
  padding-inline: 14px;
}
.sidebar-nav-item .lucide {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.8;
}
.sidebar-nav-item.active {
  box-shadow: inset 2px 0 var(--primary);
}
.ohy-attribution {
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 12px 17px;
  text-decoration: none;
}
.auth-bg {
  background: #fafafa;
  background-image: none;
}
.auth-card {
  border-radius: 8px !important;
  box-shadow: 0 5px 24px #00000005 !important;
}
.auth-card .btn-brand {
  background: var(--primary) !important;
  box-shadow: none !important;
}
.auth-card .btn-brand:hover {
  background: var(--primary-hover) !important;
}
.firas-overview {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 12px;
}
.firas-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.firas-breadcrumb {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.firas-breadcrumb > span,
.firas-separator {
  color: #b5b5ba;
  margin: 0 10px;
}
.firas-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.firas-date {
  color: var(--text-tertiary);
  font-size: 11px;
}
.firas-icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  background: white;
}
.lucide {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.8;
}
.firas-icon-button:hover {
  background: var(--neutral-100);
}
.firas-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 0 28px;
}
.firas-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brand-700);
  font-weight: 500;
  margin: 0 0 8px;
}
.firas-page-heading h1 {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 650;
  margin-bottom: 10px;
}
.firas-muted {
  font-size: 12px;
  color: var(--text-tertiary);
}
.firas-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.15s;
}
.firas-button:hover {
  background: var(--neutral-100);
}
.firas-button-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.firas-button-primary:hover {
  background: var(--primary-hover);
}
.firas-button-wide {
  width: 100%;
  margin-top: 20px;
}
.firas-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  margin-bottom: 34px;
}
.firas-metrics > div {
  padding: 0 24px;
  border-right: 1px solid var(--border);
}
.firas-metrics > div:first-child {
  padding-left: 0;
}
.firas-metrics > div:last-child {
  border: 0;
}
.firas-metrics span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.firas-metrics span .lucide {
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
}
.firas-metrics strong {
  font-size: 34px;
  line-height: 1.5;
  font-family: var(--font-display);
  font-weight: 600;
  display: block;
  margin-top: 6px;
}
.firas-metrics small {
  font-size: 10px;
  color: var(--text-tertiary);
}
.firas-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  flex: 1;
}
.firas-main-column,
.firas-side-column {
  min-width: 0;
}
.firas-side-column {
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.firas-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.firas-section-heading h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.firas-section-heading a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-tertiary);
  font-size: 11px;
  text-decoration: none;
}
.firas-section-heading a:hover {
  color: var(--primary);
}
.firas-section-heading a .lucide {
  width: 14px;
  height: 14px;
}
.firas-content-list {
  border-top: 1px solid var(--border);
}
.firas-content-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  min-width: 0;
}
.firas-content-row:hover .firas-post-copy strong {
  color: var(--brand-700);
}
.firas-post-icon {
  width: 38px;
  height: 42px;
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-tertiary);
}
.firas-post-copy {
  min-width: 0;
  flex: 1;
}
.firas-post-copy strong {
  font-size: 12px;
  font-weight: 650;
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.firas-post-copy small {
  font-size: 10px;
  display: block;
  color: var(--text-tertiary);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.firas-post-copy small > span {
  margin: 0 6px;
  color: #b5b5ba;
}
.firas-status {
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 10px;
  padding: 3px 7px;
  white-space: nowrap;
}
.firas-status[data-status="scheduled"] {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}
.firas-status[data-status="published"] {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.firas-row-arrow {
  width: 14px;
  color: #a3a3a3;
}
.firas-content-row time {
  font-size: 11px;
  color: var(--text-secondary);
}
.firas-upcoming {
  margin-top: 34px;
}
.firas-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  min-height: 210px;
  justify-content: center;
  padding: 28px 16px;
  color: var(--text-tertiary);
}
.firas-empty > .lucide {
  width: 28px;
  height: 28px;
  color: #a3a3a3;
}
.firas-empty h3 {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}
.firas-empty p {
  font-size: 12px;
  margin-top: 5px;
}
.firas-empty-compact {
  min-height: 120px;
  flex-direction: row;
  justify-content: flex-start;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.firas-agent {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.firas-agent-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}
.firas-agent-heading img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: #fafafa;
  border-radius: 8px;
}
.firas-agent-heading h2 {
  font-size: 25px;
  font-weight: 650;
  margin: 0;
  line-height: 1.2;
}
.firas-agent-heading p:last-child {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 5px;
}
.firas-agent-heading .firas-eyebrow {
  font-size: 9px;
  margin-bottom: 4px;
}
.firas-agent-status {
  margin-top: 20px;
  display: grid;
  gap: 12px;
  font-size: 11px;
}
.firas-agent-status > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.firas-agent-status dt {
  color: var(--text-tertiary);
}
.firas-agent-status dd {
  text-align: right;
  font-weight: 600;
  max-width: 150px;
}
.firas-channels {
  padding: 25px 0;
}
.firas-count {
  font-size: 10px;
  color: var(--text-tertiary);
}
.firas-channel {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  color: var(--text-primary);
  text-decoration: none;
}
.firas-platform {
  width: 34px;
  height: 34px;
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.firas-channel > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.firas-channel strong {
  font-size: 12px;
  font-weight: 650;
  display: block;
  overflow-wrap: anywhere;
}
.firas-channel small {
  font-size: 10px;
  color: var(--text-tertiary);
  display: block;
  margin-top: 3px;
}
.firas-channel > .lucide {
  width: 14px;
  color: var(--text-tertiary);
}
.firas-library-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-primary);
  border-top: 1px solid var(--border);
  padding: 20px 0;
}
.firas-library-link > span {
  flex: 1;
}
.firas-library-link .lucide {
  color: var(--text-tertiary);
}
.firas-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 18px 0 0;
  font-size: 10px;
  color: var(--text-tertiary);
}
.firas-footer > span > span {
  margin: 0 7px;
  color: #a3a3a3;
}
.firas-footer a {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.firas-footer .lucide {
  width: 12px;
  height: 12px;
}
@media (min-width: 1600px) {
  .firas-overview {
    padding-inline: 32px;
  }
  .firas-workspace-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
  }
}
@media (max-width: 1200px) {
  .firas-workspace-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
  }
  .firas-side-column {
    padding-left: 20px;
  }
  .firas-metrics > div {
    padding: 0 14px;
  }
}
@media (max-width: 760px) {
  .firas-overview {
    padding: 0 4px;
  }
  .firas-date {
    display: none;
  }
  .firas-topbar {
    gap: 8px;
  }
  .firas-top-actions {
    gap: 6px;
  }
  .firas-page-heading {
    padding: 24px 0;
    align-items: flex-start;
  }
  .firas-page-heading h1 {
    font-size: 28px;
  }
  .firas-eyebrow {
    font-size: 9px;
  }
  .firas-button {
    padding: 9px 11px;
    font-size: 11px;
  }
  .firas-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
    padding: 20px 0;
  }
  .firas-metrics > div {
    padding: 0 14px;
  }
  .firas-metrics > div:nth-child(odd) {
    padding-left: 0;
  }
  .firas-metrics > div:nth-child(even) {
    border: 0;
  }
  .firas-metrics strong {
    font-size: 30px;
  }
  .firas-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .firas-side-column {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 24px 0 0;
  }
  .firas-row-arrow {
    display: none;
  }
  .firas-content-row {
    gap: 9px;
  }
  .firas-status {
    font-size: 9px;
  }
  .firas-post-copy strong {
    font-size: 11px;
  }
  .firas-section-heading h2 {
    font-size: 17px;
  }
  .firas-footer {
    margin-top: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}