@import "tailwindcss";

@layer base {
  :root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --surface-soft: #eef2f8;
    --border: #dfe7f3;
    --text: #1f2a44;
    --muted: #6b7280;
    --accent: #10b981;
    --accent-strong: #059669;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --danger-bg: #fee2e2;
    --danger-text: #b91c1c;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  :root[data-theme="dark"] {
    --bg: #111827;
    --surface: #182131;
    --surface-strong: #101826;
    --surface-soft: #243247;
    --border: #314155;
    --text: #e5eefc;
    --muted: #9db0cc;
    --accent: #34d399;
    --accent-strong: #10b981;
    --success-bg: #14532d;
    --success-text: #dcfce7;
    --danger-bg: #7f1d1d;
    --danger-text: #fee2e2;
    --warning-bg: #78350f;
    --warning-text: #fef3c7;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body,
  #__nuxt {
    min-height: 100vh;
  }

  html {
    background-color: var(--bg);
  }

  body {
    @apply m-0 antialiased;
    background-color: var(--bg);
    color: var(--text);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button {
    @apply inline-flex items-center justify-center rounded-2xl px-4 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60;
    border: 1px solid transparent;
    background-color: var(--accent);
    color: white;
  }

  button:hover:not(:disabled) {
    background-color: var(--accent-strong);
  }

  input,
  select,
  textarea {
    @apply mt-1.5 w-full rounded-2xl px-4 py-3 text-sm outline-none transition;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--muted);
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

@layer components {
  .sakai-shell {
    @apply min-h-screen;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 24%),
      var(--bg);
  }

  .sakai-main {
    @apply min-h-screen;
  }

  .sakai-shell--guest .sakai-main {
    @apply mx-auto w-full max-w-7xl;
  }

  .sakai-sidebar {
    @apply hidden;
  }

  .sakai-topbar {
    @apply flex flex-col gap-4 px-4 py-4;
  }

  .sakai-topbar--guest {
    @apply py-6;
  }

  .sakai-topbar__headline {
    @apply grid gap-1;
  }

  .sakai-topbar__headline h1 {
    @apply m-0 text-2xl font-semibold;
  }

  .sakai-topbar__headline p {
    @apply m-0 text-sm;
    color: var(--muted);
  }

  .sakai-topbar__actions {
    @apply flex flex-wrap items-center gap-3;
  }

  .sakai-user-chip {
    @apply inline-flex items-center gap-3 rounded-2xl border px-3 py-2;
    border-color: var(--border);
    background-color: var(--surface);
  }

  .sakai-user-chip strong,
  .sakai-user-chip span {
    @apply block;
  }

  .sakai-user-chip span {
    @apply text-xs;
    color: var(--muted);
  }

  .sakai-content {
    @apply px-4 pb-24;
  }

  .sakai-shell--guest .sakai-content {
    @apply pb-10;
  }

  .sakai-bottom-bar {
    @apply fixed inset-x-4 bottom-4 z-40 flex items-center justify-around rounded-[22px] border px-2 py-2;
    border-color: color-mix(in srgb, var(--border) 85%, transparent);
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 12%, transparent);
    backdrop-filter: blur(18px);
  }

  .sakai-bottom-bar__item {
    @apply flex min-w-0 flex-1 flex-col items-center gap-1 rounded-2xl px-2 py-2 text-center text-[0.7rem] font-medium transition;
    color: var(--muted);
  }

  .sakai-bottom-bar__item i {
    @apply text-base;
  }

  .sakai-bottom-bar__item--active {
    background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
    color: var(--text);
  }

  .sakai-page {
    @apply grid gap-4;
  }

  .sakai-hero-card {
    @apply flex flex-col gap-4 rounded-[24px] border p-5;
    border-color: var(--border);
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%),
      var(--surface);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 4%, transparent);
  }

  .sakai-hero-card h2 {
    @apply m-0 text-3xl font-semibold;
  }

  .sakai-hero-card p {
    @apply m-0 text-sm leading-6;
    color: var(--muted);
  }

  .sakai-hero-card__tags {
    @apply flex flex-wrap items-center gap-2;
  }

  .sakai-section-label {
    @apply mb-2 inline-block text-xs font-semibold uppercase tracking-[0.18em];
    color: var(--muted);
  }

  .sakai-bot-grid {
    @apply grid gap-4;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sakai-bot-card {
    @apply overflow-hidden aspect-square rounded-[24px];
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 5%, transparent);
  }

  .sakai-bot-card .p-card-body,
  .sakai-filter-card .p-card-body,
  .sakai-signal-panel .p-card-body,
  .sakai-summary-panel .p-card-body {
    @apply p-0;
  }

  .sakai-bot-card .p-card-content,
  .sakai-filter-card .p-card-content,
  .sakai-signal-panel .p-card-content,
  .sakai-summary-panel .p-card-content {
    @apply p-0;
  }

  .sakai-bot-card .p-card-content {
    @apply grid gap-4 p-5;
  }

  .sakai-bot-card__top {
    @apply flex items-center justify-between gap-3;
  }

  .sakai-bot-card__icon {
    @apply grid h-12 w-12 place-items-center rounded-2xl;
    background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
    color: var(--accent-strong);
  }

  .sakai-bot-card__body {
    @apply grid gap-2;
  }

  .sakai-bot-card__eyebrow {
    @apply text-xs font-semibold uppercase tracking-[0.18em];
    color: var(--muted);
  }

  .sakai-bot-card__body h3 {
    @apply m-0 text-2xl font-semibold leading-tight;
  }

  .sakai-bot-card__body p {
    @apply m-0 text-sm leading-6;
    color: var(--muted);
  }

  .sakai-bot-card__loading {
    @apply grid gap-4;
  }

  .sakai-bot-card__link {
    @apply block;
  }

  .sakai-page-back {
    @apply mb-3;
  }

  .sakai-filter-card,
  .sakai-signal-panel,
  .sakai-summary-panel {
    @apply rounded-[24px];
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 4%, transparent);
  }

  .sakai-filter-card .p-card-content {
    @apply p-5;
  }

  .sakai-filter-grid {
    @apply grid gap-4;
  }

  .sakai-field {
    @apply grid gap-2;
  }

  .sakai-field label {
    @apply text-sm font-medium;
    color: var(--text);
  }

  .sakai-tab-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.125rem;
  }

  .sakai-tab-scroll::before,
  .sakai-tab-scroll::after {
    content: "";
    position: sticky;
    top: 0;
    bottom: 0;
    width: 1rem;
    display: block;
    pointer-events: none;
    z-index: 1;
  }

  .sakai-tab-scroll::before {
    left: 0;
    float: left;
    margin-right: -1rem;
    background: linear-gradient(90deg, var(--surface-strong), color-mix(in srgb, var(--surface-strong) 0%, transparent));
  }

  .sakai-tab-scroll::after {
    right: 0;
    float: right;
    margin-left: -1rem;
    background: linear-gradient(270deg, var(--surface-strong), color-mix(in srgb, var(--surface-strong) 0%, transparent));
  }

  .sakai-tab-scroll .p-selectbutton {
    display: inline-flex;
    min-width: max-content;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-inline: 0.125rem;
  }

  .sakai-tab-scroll .p-togglebutton {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sakai-signal-layout {
    @apply grid gap-4;
  }

  .sakai-signal-layout--detail {
    @apply items-start;
  }

  .sakai-signal-detail-main,
  .sakai-signal-detail-aside {
    @apply grid gap-4;
  }

  .sakai-signal-panel .p-card-title,
  .sakai-summary-panel .p-card-title {
    @apply text-2xl font-semibold;
    color: var(--text);
  }

  .sakai-signal-panel .p-card-subtitle {
    color: var(--muted);
  }

  .sakai-signal-panel .p-card-caption,
  .sakai-summary-panel .p-card-caption {
    @apply px-5 pt-5;
  }

  .sakai-signal-panel .p-card-content,
  .sakai-summary-panel .p-card-content {
    @apply p-5 pt-4;
  }

  .sakai-signal-list {
    @apply grid gap-3;
  }

  .sakai-signal-link {
    @apply block rounded-[20px] no-underline transition-transform duration-150;
    color: inherit;
  }

  .sakai-signal-link:hover {
    @apply -translate-y-0.5;
  }

  .sakai-signal-link:focus-visible {
    @apply outline-none;
  }

  .sakai-signal-link:focus-visible .sakai-signal-card {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  }

  .sakai-signal-skeleton {
    @apply grid gap-3 rounded-2xl border p-4;
    border-color: var(--border);
    background-color: var(--surface-soft);
  }

  .sakai-signal-card {
    @apply flex flex-col gap-4 rounded-[20px] border p-4;
    border-color: var(--border);
    background-color: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
  }

  .sakai-signal-card__main {
    @apply grid gap-3;
  }

  .sakai-signal-card__meta {
    @apply flex flex-wrap gap-3 text-sm;
    color: var(--muted);
  }

  .sakai-signal-card__meta span {
    @apply inline-flex items-center gap-2;
  }

  .sakai-signal-card__teams {
    @apply grid gap-1 text-lg;
  }

  .sakai-signal-card__actions {
    @apply flex;
  }

  .sakai-copy-button {
    @apply inline-flex items-center justify-center gap-2 shrink-0 rounded-full;
    width: 2.25rem;
    height: 2.25rem;
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--muted);
  }

  .sakai-copy-button--wide {
    @apply justify-center flex rounded-2xl px-4 py-3 text-sm font-semibold;
    width: 100%;
    min-height: 3.25rem;
  }

  .sakai-copy-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--text);
  }

  .sakai-signal-card__market {
    @apply flex flex-wrap gap-2 text-sm;
    color: var(--muted);
  }

  .sakai-signal-card__market span {
    @apply inline-flex items-center rounded-full px-3 py-1;
    background-color: var(--surface-soft);
  }

  .sakai-signal-card__forecast {
    @apply overflow-hidden rounded-2xl;
    /* background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-soft)); */
    color: var(--text);
    width: 100%;
    min-width: 0;
  }

  :root[data-theme="dark"] .sakai-signal-card__forecast {
    background-color: rgb(255 255 255 / 0.8);
  }

  .sakai-signal-card__forecast-image {
    @apply block h-auto w-full;
    max-height: 220px;
    object-fit: cover;
  }

  :root[data-theme="dark"] .sakai-signal-card__forecast-image {
    /* filter: grayscale(1) brightness(1.18) contrast(1.05); */
  }

  .sakai-signal-card__forecast-text {
    @apply m-0 flex min-h-[3rem] items-center rounded-2xl px-4 py-3 text-sm font-semibold leading-6;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
      color-mix(in srgb, var(--surface-soft) 92%, white 8%);
    color: var(--text);
    word-break: break-word;
  }

  .sakai-signal-card__forecast-text--empty {
    color: var(--muted);
    font-weight: 500;
  }

  .sakai-signal-card__side {
    @apply flex flex-wrap items-center justify-between gap-3;
  }

  .sakai-signal-card__side > .sakai-signal-card__forecast {
    flex: 1 0 100%;
  }

  .sakai-signal-card__odds {
    @apply rounded-2xl px-4 py-2 text-lg font-bold;
    background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
    color: var(--text);
  }

  .sakai-signal-card--detail {
    @apply gap-5;
  }

  .sakai-signal-card__side--detail {
    @apply items-stretch;
  }

  .sakai-signal-card__forecast-image--detail {
    max-height: 26rem;
  }

  .sakai-signal-detail-loading {
    @apply grid;
  }

  .sakai-signal-detail-skeleton {
    @apply grid gap-4;
  }

  .sakai-signal-detail__timezone {
    @apply m-0 text-sm;
    color: var(--muted);
  }

  .sakai-signal-detail__status-row {
    @apply flex flex-wrap items-center justify-between gap-3;
  }

  .sakai-signal-detail-grid {
    @apply grid gap-3;
  }

  .sakai-signal-detail-item {
    @apply flex items-center justify-between gap-4 rounded-2xl border px-4 py-3;
    border-color: var(--border);
    background-color: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
  }

  .sakai-signal-detail-item span {
    @apply text-sm;
    color: var(--muted);
  }

  .sakai-signal-detail-item strong {
    @apply text-right font-semibold;
    color: var(--text);
  }

  .sakai-signal-detail-note {
    @apply mt-4 rounded-[20px] border p-4;
    border-color: var(--border);
    background-color: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
  }

  .sakai-signal-detail-note span {
    @apply text-sm font-semibold uppercase tracking-[0.16em];
    color: var(--muted);
  }

  .sakai-signal-detail-note p {
    @apply mb-0 mt-3 text-sm leading-6;
    color: var(--text);
  }

  .sakai-summary-panel--sticky {
    position: static;
  }

  .sakai-summary-list {
    @apply grid gap-3;
  }

  .sakai-summary-item {
    @apply flex items-center justify-between rounded-2xl border px-4 py-3;
    border-color: var(--border);
    background-color: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
  }

  .sakai-summary-item span {
    color: var(--muted);
  }

  .sakai-summary-item strong {
    @apply text-xl font-semibold;
  }

  .app-shell {
    @apply min-h-screen;
    background-color: var(--bg);
  }

  .app-shell--single {
    @apply mx-auto flex min-h-screen w-full max-w-7xl flex-col px-4 py-4;
  }

  .brand {
    @apply text-xl font-extrabold uppercase tracking-[0.18em];
  }

  .topbar {
    @apply mb-4 flex flex-col gap-4 rounded-[28px] border p-4;
    border-color: var(--border);
    background-color: var(--surface-strong);
  }

  .topbar__brand {
    @apply grid gap-1;
  }

  .topbar__subtitle {
    @apply text-sm;
    color: var(--muted);
  }

  .topbar__actions {
    @apply flex flex-col gap-3;
  }

  .topbar__nav {
    @apply flex flex-wrap gap-2;
  }

  .topbar__extras {
    @apply flex flex-col gap-3;
  }

  .user-chip {
    @apply grid gap-1 rounded-2xl border px-4 py-3 text-sm;
    border-color: var(--border);
    background-color: var(--surface);
  }

  .topbar__link,
  .theme-toggle,
  button.secondary,
  .sort-toggle {
    @apply rounded-2xl border px-4 py-3 text-sm font-medium;
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--text);
  }

  .topbar__link--accent {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    background-color: color-mix(in srgb, var(--accent) 14%, var(--surface));
  }

  .topbar__link:hover,
  .theme-toggle:hover,
  button.secondary:hover,
  .sort-toggle:hover:not(:disabled) {
    background-color: var(--surface-soft);
  }

  .content--single {
    @apply flex-1;
  }

  .push-consent,
  .panel,
  .signal-card {
    @apply rounded-[28px] border p-4;
    border-color: var(--border);
    background-color: var(--surface-strong);
  }

  .push-consent {
    @apply mb-4 flex flex-col gap-4;
    margin-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  }

  .app-update {
    @apply mb-4;
  }

  .app-update--blocking {
    @apply fixed inset-0 z-[120] flex items-center justify-center p-5;
    background: color-mix(in srgb, var(--bg) 84%, black 16%);
  }

  .app-update--blocking .push-consent__content,
  .app-update--blocking .push-consent__actions {
    width: min(100%, 26rem);
  }

  .app-update--blocking .push-consent__content,
  .app-update--blocking .push-consent__actions button {
    max-width: 26rem;
  }

  .app-update--blocking::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
  }

  .app-update--blocking .push-consent__content,
  .app-update--blocking .push-consent__actions {
    position: relative;
    z-index: 1;
  }

  .app-update--blocking .push-consent__content {
    @apply rounded-[28px] border p-5;
    border-color: var(--border);
    background-color: var(--surface-strong);
  }

  .app-update--blocking .push-consent__actions {
    @apply mt-4 flex flex-col gap-3;
  }

  .push-consent--install {
    background-color: color-mix(in srgb, var(--warning-bg) 16%, var(--surface-strong));
  }

  .push-consent__content {
    @apply grid gap-2;
  }

  .push-consent__content p,
  .push-consent__message {
    @apply m-0 text-sm;
    color: var(--muted);
  }

  .push-consent__hint {
    color: var(--warning-text);
  }

  .push-consent__actions {
    @apply flex flex-col gap-2;
  }

  .push-consent__message {
    @apply mb-4;
  }

  .password-field {
    @apply relative;
  }

  .password-field input {
    @apply pr-12;
  }

  .password-field__toggle {
    @apply absolute right-2 top-1/2 grid h-9 w-9 -translate-y-1/2 place-items-center rounded-full;
    color: var(--muted);
    background-color: transparent;
  }

  .password-field__toggle i {
    @apply text-base;
  }

  .password-field__toggle:hover {
    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
  }

  .page,
  .page-signals,
  .admin-grid,
  .signals-table,
  .admin-list,
  .auth-panel {
    @apply grid gap-4;
  }

  .admin-users-toolbar {
    @apply my-4;
  }

  .button-row {
    @apply mt-4;
  }

  .page-header,
  .button-row,
  .admin-row,
  .admin-user-card__header,
  .admin-user-card__body,
  .push-row__heading,
  .admin-users-toolbar,
  .filters,
  .signals-toolbar__row,
  .signals-toolbar__tabs,
  .signals-toolbar__per-page,
  .signals-pagination__controls,
  .toggle,
  .admin-user-subscription,
  .admin-bot-chip-list {
    @apply flex flex-col gap-3;
  }

  .page-header {
    @apply rounded-[28px] border p-4;
    border-color: var(--border);
    background-color: var(--surface-strong);
  }

  .page-header--admin-section {
    @apply items-start;
  }

  .page-header--signals h1 {
    @apply my-1 text-3xl font-bold leading-tight;
  }

  .eyebrow {
    @apply m-0 text-xs font-semibold uppercase tracking-[0.18em];
    color: var(--muted);
  }

  .muted,
  .meta,
  .signal-row__league,
  .signal-row__status-hint,
  .signal-row__time,
  .signals-pagination__summary {
    color: var(--muted);
  }

  .signals-toolbar__search,
  .admin-users-toolbar__search,
  .signals-pagination__input {
    @apply mt-0;
  }

  .signals-toolbar__row--desktop {
    @apply hidden;
  }

  .signals-toolbar__row--mobile {
    @apply flex;
  }

  .signals-toolbar__compact-grid {
    @apply grid gap-3;
    grid-template-columns: minmax(0, 1fr);
  }

  .signals-table {
    @apply overflow-hidden rounded-[28px] border;
    border-color: var(--border);
    background-color: var(--surface-strong);
  }

  .signal-row {
    @apply grid gap-4 p-4;
    border-bottom: 1px solid var(--border);
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-row:last-child {
    border-bottom: 0;
  }

  .signal-row__teams,
  .signal-row__status,
  .signal-row__market,
  .signal-row__bank,
  .signal-row__team-list {
    @apply grid gap-2;
  }

  .signal-row__teams {
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-row__time {
    @apply flex items-center gap-2 text-sm;
  }

  .signal-row__clock {
    color: var(--accent);
  }

  .signal-row__sport {
    @apply inline-flex w-fit items-center gap-2 rounded-full border px-3 py-1.5 text-xs;
    border-color: var(--border);
    background-color: var(--surface);
  }

  .signal-row__sport-name {
    @apply max-w-[10rem] truncate;
  }

  .signal-row__team-list {
    @apply text-base;
  }

  .signal-row__bot {
    @apply text-xs font-semibold uppercase tracking-[0.14em];
    color: var(--accent);
  }

  .signal-row__badge,
  .status-pill {
    @apply inline-flex w-fit min-h-10 mt-2 items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.08em];
  }

  .signal-row__badge--pending,
  .status-pending,
  .status-void,
  .status-unpublished {
    background-color: var(--surface-soft);
    color: var(--text);
  }

  .signal-row__badge--inactive {
    background-color: var(--surface-soft);
    color: var(--muted);
  }

  .signal-row__badge--win,
  .status-win {
    background-color: var(--success-bg);
    color: var(--success-text);
  }

  .signal-row__badge--lose,
  .status-lose {
    background-color: var(--danger-bg);
    color: var(--danger-text);
  }

  .signal-row__badge--void,
  .signal-row__badge--unpublished {
    background-color: var(--surface-soft);
    color: var(--text);
  }

  .signal-row__badge--manual_review,
  .status-manual_review {
    background-color: var(--warning-bg);
    color: var(--warning-text);
  }

  .signal-row__odds {
    @apply w-fit rounded-2xl px-4 py-2 text-lg font-extrabold;
    background-color: var(--surface);
    color: var(--text);
  }

  .signal-main {
    @apply text-base leading-7;
  }

  .auth-page {
    @apply grid min-h-[calc(100vh-12rem)] w-full items-center gap-8;
  }

  .auth-panel {
    @apply w-full max-w-md;
  }

  .auth-page__intro {
    @apply grid gap-3;
    max-width: 32rem;
  }

  .auth-page__intro h1 {
    @apply m-0 text-4xl font-semibold leading-tight;
  }

  .auth-page__intro .muted {
    @apply m-0 text-base leading-7;
  }

  .detail-grid,
  .admin-summary-grid,
  .admin-bot-access-grid,
  .admin-subscription-grid {
    @apply grid gap-4 mt-3;
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-grid dt {
    @apply mb-1 text-sm;
    color: var(--muted);
  }

  .detail-panel h1,
  .panel h1,
  .panel h2 {
    @apply m-0;
  }

  .info-box,
  .error,
  .success {
    @apply rounded-2xl p-4 text-sm;
  }

  .info-box {
    background-color: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }

  .error {
    background-color: var(--danger-bg);
    color: var(--danger-text);
  }

  .success {
    background-color: var(--success-bg);
    color: var(--success-text);
  }

  .toggle {
    @apply items-center;
  }

  .toggle input,
  .admin-bot-access-option input {
    @apply mt-0 h-4 w-4 shrink-0 rounded border;
  }

  .admin-row,
  .admin-user-card,
  .push-row {
    @apply border-t pt-4;
    border-color: var(--border);
  }

  .admin-summary-card {
    @apply grid gap-2;
  }

  .admin-summary-card strong {
    @apply text-4xl leading-none;
  }

  .admin-user-subscriptions {
    @apply mt-3 grid gap-2;
  }

  .admin-subscription-manager {
    @apply grid gap-3;
  }

  .admin-subscription-manager__toggle {
    @apply flex list-none items-center justify-between gap-3 rounded-2xl border px-4 py-3 text-left;
    border-color: var(--border);
    background-color: color-mix(in srgb, var(--surface-strong) 72%, transparent);
    cursor: pointer;
  }

  .admin-subscription-manager__toggle-icon {
    @apply inline-flex h-7 w-7 items-center justify-center rounded-full text-base font-semibold leading-none;
    color: var(--muted);
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    transition: transform 0.2s ease;
  }

  .admin-subscription-manager__toggle::-webkit-details-marker {
    display: none;
  }

  .admin-subscription-manager__toggle::marker {
    content: "";
  }

  .admin-subscription-manager[open] .admin-subscription-manager__toggle-icon {
    transform: rotate(45deg);
  }

  .admin-bot-access-option {
    @apply flex items-start gap-3 rounded-2xl border p-4;
    border-color: var(--border);
    background-color: var(--surface);
  }

  .admin-subscription-card {
    @apply grid gap-3 rounded-2xl border p-4;
    border-color: var(--border);
    background-color: var(--surface);
  }

  .admin-subscription-select {
    border-width: 1px;
  }

  .admin-subscription-select--active {
    background-color: color-mix(in srgb, var(--success-bg) 45%, var(--surface));
    border-color: color-mix(in srgb, var(--success-text) 35%, var(--border));
    color: var(--success-text);
  }

  .admin-subscription-select--expired {
    background-color: color-mix(in srgb, var(--danger-bg) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--danger-text) 28%, var(--border));
    color: var(--danger-text);
  }

  .admin-subscription-select--canceled {
    background-color: color-mix(in srgb, var(--surface-strong) 85%, var(--surface));
    border-color: var(--border);
    color: var(--muted);
  }

  .admin-subscription-table-wrap {
    @apply hidden mt-3 overflow-x-auto rounded-2xl border;
    border-color: var(--border);
    background-color: var(--surface);
  }

  .admin-subscription-table {
    @apply w-full border-collapse;
  }

  .admin-subscription-table th,
  .admin-subscription-table td {
    @apply p-4 align-top text-left;
    border-bottom: 1px solid var(--border);
  }

  .admin-subscription-table th {
    @apply text-xs font-semibold uppercase tracking-[0.12em];
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-strong) 75%, transparent);
  }

  .admin-subscription-table tbody tr:last-child td {
    border-bottom: none;
  }

  .admin-subscription-table__bot {
    @apply min-w-[12rem];
  }

  .admin-subscription-table__bot strong,
  .admin-subscription-table__bot small {
    @apply block;
  }

  .admin-subscription-table__bot small {
    @apply mt-1;
    color: var(--muted);
  }

  .admin-subscription-table__field {
    @apply grid gap-3 min-w-[12rem];
  }

  .admin-subscription-table td input,
  .admin-subscription-table td select {
    @apply w-full;
  }

  .admin-subscription-table__actions {
    @apply grid gap-2 min-w-[11rem];
  }

  .admin-subscription-card__header {
    @apply flex items-start justify-between gap-3;
  }

  .admin-subscription-card__header small {
    @apply block mt-1;
    color: var(--muted);
  }

  .admin-bot-access-option span {
    @apply grid gap-1;
  }

  .admin-bot-access-option small {
    color: var(--muted);
  }

  .push-row {
    @apply grid gap-4;
    grid-template-columns: minmax(0, 1fr);
  }

  .push-row__main,
  .push-row__meta,
  .push-row__event {
    @apply grid gap-2;
  }

  .push-row__endpoint {
    @apply m-0 break-all text-sm;
    color: var(--muted);
  }

  .notification-settings {
    @apply grid gap-5;
  }

  .notification-settings__header {
    @apply grid gap-2;
  }

  .notification-settings__header h1 {
    @apply m-0 text-2xl font-bold leading-tight;
  }

  .notification-settings__header .muted {
    @apply m-0 text-sm;
  }

  .notification-settings__list {
    @apply grid gap-3;
  }

  .notification-option {
    @apply flex items-start gap-3 rounded-2xl border p-4;
    border-color: var(--border);
    background-color: var(--surface);
  }

  .notification-option input {
    @apply mt-1 h-4 w-4 shrink-0 rounded border;
  }

  .notification-option__body {
    @apply grid gap-1;
  }

  .notification-option__body strong {
    @apply text-sm font-semibold;
  }

  .notification-option__body small {
    @apply text-sm leading-5;
    color: var(--muted);
  }

  .notification-settings__actions {
    @apply grid gap-3;
  }

  .settings-version {
    @apply px-2 pb-2 text-center text-sm;
    color: var(--muted);
  }

  .mobile-nav__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 1.5rem;
  }

  .mobile-nav__badge {
    position: absolute;
    top: -0.55rem;
    right: -0.85rem;
    display: inline-flex;
    min-width: 1.2rem;
    height: 1.2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 16px color-mix(in srgb, #ef4444 35%, transparent);
  }

  .bots-page {
    @apply gap-5;
  }

  .bots-hero,
  .bot-feed-hero,
  .bot-feed-filters,
  .bot-feed-pagination {
    @apply rounded-[28px] border p-4;
    border-color: var(--border);
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%),
      var(--surface-strong);
  }

  .bots-hero h1,
  .bot-feed-hero h1 {
    @apply m-0 text-3xl font-bold leading-tight;
  }

  .bots-hero {
    background: var(--surface-strong);
  }

  .bots-hero__copy {
    @apply grid gap-2;
    max-width: 34rem;
  }

  .bot-grid {
    @apply grid gap-4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bot-tile {
    @apply grid gap-4 rounded-3xl border p-3.5 transition;
    min-height: 11.25rem;
    align-content: space-between;
    border-color: color-mix(in srgb, var(--border) 92%, white 8%);
    background: var(--surface);
    /* box-shadow:
      0 1px 2px color-mix(in srgb, var(--bg) 5%, transparent),
      0 10px 24px color-mix(in srgb, var(--bg) 6%, transparent); */
  }

  .bot-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--bg) 8%, transparent),
      0 14px 32px color-mix(in srgb, var(--bg) 10%, transparent);
    transform: translateY(-2px);
  }

  .bot-tile__top {
    @apply flex items-center justify-between gap-3;
  }

  .bot-tile__icon {
    @apply grid h-10 w-10 place-items-center rounded-2xl;
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
    color: var(--accent);
  }

  .bot-tile__icon span {
    @apply text-base font-semibold;
  }

  .bot-tile__eyebrow {
    @apply text-xs font-semibold uppercase tracking-[0.14em];
    margin: 0;
    color: var(--muted);
  }

  .bot-tile__count,
  .bot-feed-hero__pill {
    @apply inline-flex min-w-9 items-center justify-center rounded-full px-2.5 py-1 text-xs font-semibold;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-strong));
    color: var(--accent-strong);
  }


  .bot-tile__body,
  .bot-feed-hero__copy,
  .bot-feed-hero__meta,
  .bot-feed-filters__selects {
    @apply grid gap-2;
  }

  .bot-tile__body h2 {
    @apply m-0 text-[1.35rem] font-semibold leading-tight;
  }

  .bot-tile__meta {
    @apply m-0 text-sm leading-5;
    color: var(--muted);
  }

  .bot-tile__footer {
    @apply mt-1 flex flex-row items-center justify-between rounded-2xl border px-3 py-2;
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    background-color: color-mix(in srgb, var(--surface-strong) 80%, var(--surface));
  }

  .bot-tile__action {
    @apply text-sm font-medium;
    color: var(--text);
  }

  .bot-tile__arrow {
    @apply text-base leading-none;
    color: var(--accent);
  }

  .bot-feed-hero__back {
    @apply inline-flex w-fit items-center rounded-full border px-3 py-1.5 text-sm font-medium transition;
    border-color: var(--border);
    color: var(--muted);
  }

  .bot-feed-hero__back:hover {
    color: var(--text);
    background-color: var(--surface);
  }

  .bot-feed-hero__meta {
    @apply gap-2;
  }

  .bot-feed-filters {
    @apply grid gap-4;
  }

  .bot-feed-filters__tabs {
    @apply flex flex-wrap gap-2;
  }

  .bot-feed-filters__selects {
    grid-template-columns: minmax(0, 1fr);
  }
}

@layer utilities {
  .surface-card {
    background-color: var(--surface-strong);
    border-color: var(--border);
  }
}

@media (min-width: 768px) {
  @layer components {
    .sakai-shell {
      @apply grid;
      grid-template-columns: 18rem minmax(0, 1fr);
    }

    .sakai-shell--guest {
      grid-template-columns: minmax(0, 1fr);
    }

    .sakai-sidebar {
      @apply sticky top-0 flex h-screen flex-col gap-6 border-r px-5 py-6;
      border-color: var(--border);
      background-color: color-mix(in srgb, var(--surface) 90%, white 10%);
    }

    .sakai-bottom-bar {
      @apply hidden;
    }

    .sakai-sidebar__brand {
      @apply flex items-center gap-3;
    }

    .sakai-sidebar__brand strong {
      @apply block text-lg;
    }

    .sakai-sidebar__brand p {
      @apply m-0 text-sm;
      color: var(--muted);
    }

    .sakai-sidebar__logo {
      @apply grid h-12 w-12 place-items-center rounded-2xl text-xl;
      background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
      color: var(--accent-strong);
    }

    .sakai-sidebar__nav {
      @apply grid gap-2;
    }

    .sakai-nav-item {
      @apply inline-flex items-center gap-3 rounded-2xl px-3 py-3 text-sm font-medium transition;
      color: var(--muted);
    }

    .sakai-nav-item:hover,
    .sakai-nav-item--active {
      background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
      color: var(--text);
    }

    .sakai-sidebar__footer {
      @apply mt-auto;
    }

    .sakai-sidebar__hint {
      @apply grid gap-1 rounded-2xl border p-4;
      border-color: var(--border);
      background-color: var(--surface);
    }

    .sakai-sidebar__hint span {
      @apply text-sm;
      color: var(--muted);
    }

    .sakai-topbar {
      @apply flex flex-row items-center justify-between px-6 py-6;
    }

    .sakai-topbar--guest {
      @apply mx-auto w-full max-w-7xl items-start;
    }

    .sakai-content {
      @apply px-6 pb-8;
    }

    .sakai-shell--guest .sakai-content {
      @apply mx-auto w-full max-w-7xl px-6;
    }

    .sakai-hero-card {
      @apply flex flex-row items-start justify-between;
    }

    .sakai-filter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sakai-signal-card {
      @apply flex flex-row items-center justify-between;
    }

    .sakai-signal-card--detail {
      align-items: flex-start;
    }

    .sakai-signal-card__side {
      @apply grid justify-items-end;
      min-width: 8rem;
    }

    .sakai-copy-button--wide {
      width: auto;
      min-width: 11rem;
      min-height: 2.75rem;
      padding-inline: 1rem;
      padding-block: 0.65rem;
    }

    .sakai-signal-card__side > .sakai-signal-card__forecast {
      width: auto;
      max-width: 240px;
      justify-self: stretch;
      flex: initial;
    }

    .sakai-signal-card__side--detail {
      /* min-width: min(24rem, 38%); */
    }

    .sakai-signal-card__side--detail > .sakai-signal-card__forecast {
      max-width: none;
      width: 100%;
    }

    .sakai-signal-layout--detail {
      grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.75fr);
      gap: 1.5rem;
    }

    .sakai-signal-detail-main {
      min-width: 0;
    }

    .sakai-signal-detail-aside {
      align-self: start;
    }

    .sakai-summary-panel--sticky {
      position: sticky;
      top: calc(1rem + env(safe-area-inset-top, 0px));
    }

    .auth-page {
      @apply mx-auto;
      grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 28rem);
      max-width: 72rem;
      min-height: calc(100vh - 10rem);
    }

    .app-shell--single {
      @apply px-6 py-5;
    }

    .topbar {
      @apply flex flex-row items-start justify-between p-5;
    }

    .topbar__actions,
    .topbar__extras {
      @apply items-end;
    }

    .topbar__nav,
    .push-consent__actions,
    .filters,
    .signals-toolbar__row,
    .signals-toolbar__tabs,
    .signals-toolbar__per-page,
    .signals-pagination__controls,
    .button-row,
    .admin-users-toolbar,
    .admin-bot-chip-list,
    .push-row__heading {
      @apply flex flex-row items-center;
    }

    .user-chip {
      @apply min-w-64;
    }

    .page-header {
      @apply items-start justify-between p-5;
    }

    .page-header--signals h1 {
      @apply text-5xl;
    }

    .bots-hero h1,
    .bot-feed-hero h1 {
      @apply text-4xl;
    }

    .signals-toolbar__search,
    .admin-users-toolbar__search {
      @apply flex-1;
    }

    .signals-toolbar__row--desktop {
      @apply hidden;
    }

    .signals-toolbar__row--mobile {
      @apply flex;
    }

    .signal-row {
      @apply items-center;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .signal-row__status {
      @apply items-end text-right;
    }

    .detail-grid,
    .admin-summary-grid,
    .admin-bot-access-grid,
    .admin-subscription-grid {
      
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bot-feed-hero {
      @apply flex flex-row items-end justify-between;
    }

    .bot-feed-filters__selects {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-card__header,
    .admin-row {
      @apply flex flex-row items-start justify-between;
    }

    .admin-user-card__body {
      @apply flex flex-col items-stretch;
    }
  }
}

@media (min-width: 1024px) {
  @layer components {
    .sakai-bot-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sakai-filter-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sakai-signal-layout {
      grid-template-columns: minmax(0, 2.1fr) minmax(280px, 0.9fr);
      align-items: start;
    }

    .topbar__actions {
      @apply flex flex-row items-start justify-end;
    }

    .topbar__extras {
      @apply flex flex-row items-stretch;
    }

    .signals-toolbar {
      @apply gap-3;
    }

    .signals-toolbar__row--desktop {
      @apply flex;
    }

    .signals-toolbar__row--mobile {
      @apply hidden;
    }

    .signals-toolbar__row {
      @apply flex flex-row flex-wrap justify-end;
    }

    .bot-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bot-feed-filters {
      grid-template-columns: minmax(240px, 1.2fr) minmax(220px, auto) minmax(320px, 1.4fr);
      align-items: start;
    }

    .bot-feed-filters__selects {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .signal-row {
      grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
    }

    .push-row {
      grid-template-columns: minmax(280px, 2fr) minmax(220px, 1.2fr) minmax(240px, 1.4fr);
    }

    .detail-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-summary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-bot-access-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-subscription-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-subscription-grid--mobile {
      @apply hidden;
    }

    .admin-subscription-table-wrap {
      @apply block;
    }
  }
}