:root {
  --ink: #181818;
  --muted: #717171;
  --line: #e8e8e8;
  --paper: #f9f9f9;
  --soft: #f3f6fa;
  --dark: #181818;
  --green: #8acb9b;
}

html { scroll-padding-top: 90px; }
body { background: var(--paper); color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; }
p, .muted { color: var(--muted); }
input, select { background: #fff; color: var(--ink); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline-color: #191919; }
.shell { width: min(1240px, calc(100% - 64px)); }
.kicker, .panel-label, .plan-list-title, .stat-label { color: #898989; font: 11px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.heading-muted { color: #696969; }
.gradient-heading { background: none; color: #181818; -webkit-background-clip: initial; background-clip: initial; }

/* Shared navigation matches the public landing page. */
.site-header { height: 75px; border-color: #e8e8e8; background: #f9f9f9f5; backdrop-filter: blur(16px); }
.nav-row { gap: 42px; }
.brand { gap: 7px; color: #181818; font-size: 17px; font-weight: 800; letter-spacing: -.06em; text-transform: uppercase; }
.brand:before { content: ""; display: inline-block; width: 27px; height: 27px; flex: none; background: url("../img/kora-star-gradient.svg?v=3") center/contain no-repeat; }
.brand-logo { display: none; }
.main-nav { margin-left: auto; color: #353535; font-size: 14px; gap: 28px; }
.main-nav a:hover, .footer-row a:hover { color: #858585; }
.nav-action { gap: 20px; margin-left: auto; }
.nav-action .nav-chat { color: #353535; font-size: 14px; font-weight: 500; }
.nav-action .nav-chat:hover, .nav-action .nav-chat.active { color: #111; }
.nav-action .nav-chat:after { background: #181818; }
.button { min-height: 43px; padding: 10px 18px; border-radius: 4px; }
.button-dark { background: #181818; border-color: #181818; color: #fff; }
.button-dark:hover { background: #343434; border-color: #343434; }
.button-white, .button-quiet, .button-outline-light { background: #fff; border-color: #d9d9d9; color: #181818; }
.button-white:hover, .button-quiet:hover, .button-outline-light:hover { background: #f3f6fa; border-color: #a9a9a9; }
.button:disabled { background: #ececec; border-color: #e0e0e0; color: #777; }
.site-footer { border-color: #e9e9e9; background: #f9f9f9; color: #727272; }
.footer-brand { color: #181818; text-transform: uppercase; }
.footer-note { color: #969696; }

/* Light grid and cloud treatment for the existing inner-page layouts. */
.page-main, .dashboard-main, .admin-main { position: relative; }
.page-main { padding-block: 93px 112px; }
.models-main, .plans-main, .dashboard-main, .admin-main, .error-page {
  background-image: linear-gradient(#7777770a 1px, transparent 1px), linear-gradient(90deg, #7777770a 1px, transparent 1px);
  background-size: 88px 88px;
}
.page-intro, .models-intro {
  position: relative;
  padding: 55px 34px 66px;
  border: 1px solid #ededed;
  background: linear-gradient(180deg, #f9f9f9de 3%, #f9f9f9b8 48%, #eaf3fcbd 100%), url("../img/sky-clouds.png") center 55% / cover;
}
.page-intro { max-width: none; margin-bottom: 22px; }
.page-intro h1, .models-intro h1 { color: #171717; font-size: clamp(46px, 5vw, 72px); font-weight: 650; letter-spacing: -.065em; line-height: 1.07; }
.page-intro p, .models-intro p { color: #585858; }
.fine-print { color: #838383; }

/* Plans */
.pricing-grid { max-width: 1100px; gap: 12px; }
.pricing-card { min-height: 480px; padding: 34px; border: 1px solid #e6e6e6; border-radius: 2px; background: #fff; box-shadow: 0 10px 32px #3b6a9510; }
.pricing-card-featured { border-color: #bfd4eb; background: linear-gradient(155deg, #e9f3ff, #fff 65%); box-shadow: 0 18px 35px #6b93bd21; }
.plan-label { color: #1a1a1a; }
.small-tag, .plan-price span, .pricing-card>p, .plan-pending { color: #777; }
.plan-price { color: #171717; font-weight: 630; }
.plan-list-title { border-color: #ebebeb; }
.check-list li { color: #575757; }
.check-list li:before { content: ""; top: 11px; width: 6px; height: 10px; border-right: 2px solid #517cb0; border-bottom: 2px solid #517cb0; transform: rotate(45deg); }
.plan-bottom-link { color: #747474; }
.plan-bottom-link a { color: #191919; }

/* Live model catalogue */
.models-intro { align-items: center; margin-bottom: 12px; }
.catalogue-tally { border: 1px solid #e8e8e8; border-radius: 4px; background: #fff; box-shadow: 0 12px 24px #46668b16; }
.catalogue-tally strong { color: #181818; }
.catalogue-tally>span:last-child { color: #777; }
.models-legend { border-color: #e8e8e8; color: #555; }
.legend-note, .model-group-count { color: #878787; }
.free-dot { background: #8ccc9c; }
.pro-dot { background: #a8c6ec; }
.model-group h2 { color: #181818; }
.model-row { border: 1px solid #e9e9e9; border-radius: 4px; background: #fff; box-shadow: 0 8px 24px #506b8310; }
.model-row:hover { border-color: #bfd0e3; box-shadow: 0 14px 30px #506b8319; }
.model-row-name code { color: #888; }
.model-row-mark { background: #e9f5ed; border-color: #d4e9dc; color: #4b8b67; }
.gemini-mark { background: #ebf2ff; border-color: #d5e4f8; color: #718fbd; }
.claude-mark { background: #fbefe9; border-color: #eedbcd; color: #b78e75; }
.other-mark { background: #f1ebfa; border-color: #e3d9f0; color: #9b83ba; }
.model-row-claude-icon { filter: none; }
.model-row-brand-icon { display: block; width: 24px; height: 24px; filter: none; }
.access-pill { border-radius: 3px; }
.free-access { background: #eaf7ee; border-color: #d5ebda; color: #39734e; }
.pro-access { background: #eaf2fc; border-color: #d5e3f5; color: #456c9d; }
.discount-pill { background: #fff5e5; border-color: #f0dfc5; color: #9b702c; }
.catalogue-empty { border-color: #e8e8e8; border-radius: 4px; background: #fff; }
.catalogue-empty>span { color: #9bbce7; }
.models-outro { border-color: #dce8f5; border-radius: 4px; background: linear-gradient(120deg, #eaf3fd, #fff); }

/* Sign in, error, workspace, and admin: keep their controls and structure. */
.grid-backdrop-light { background-color: #f9f9f9; background-image: linear-gradient(#7777770b 1px,transparent 1px),linear-gradient(90deg,#7777770b 1px,transparent 1px),linear-gradient(180deg,#f9f9f9,#e5f0fb); background-size: 88px 88px,88px 88px,100% 100%; }
.auth-card { border: 1px solid #e6e6e6; border-radius: 4px; background: #fff; box-shadow: 0 25px 65px #6983a026; }
.auth-card h1, .panel h2, .panel h3 { color: #181818; }
.auth-card>p { color: #777; }
.login-button { border-color: #e4e4e4; border-radius: 4px; background: #fff; color: #1c1c1c; }
.login-button:not(.disabled):hover { border-color: #acc7e4; background: #f2f7fc; }
.login-button.disabled { background: #f8f8f8; color: #999; }
.stack-form input, .inline-form input, .form-row input, .form-row select, .log-filters input, .log-filters select, .search-form input, .search-form select, .micro-form select, .model-form input { border-color: #dedede; background: #fff; color: #181818; }
.stack-form label, .form-row label, .log-filters label { color: #666; }
.dashboard-main, .admin-main { padding-top: 55px; }
.dashboard-heading h1 { color: #181818; font-weight: 650; letter-spacing: -.06em; }
.tier-pill, .status-label { border-color: #e2e2e2; border-radius: 3px; background: #f8f8f8; color: #555; }
.key-reveal { border-color: #b8dfc3; background: #eff9f1; }
.key-reveal code { border-color: #c6e7cf; background: #fff; color: #235a34; }
.usage-panel { border: 1px solid #d9e6f4; border-radius: 4px; background: linear-gradient(115deg,#e9f3fe,#fff 75%); color: #181818; box-shadow: 0 14px 30px #46698814; }
.usage-panel .panel-label, .usage-reset { color: #777; }
.usage-spark { color: #9ebee5; }
.usage-progress, .usage-progress::-webkit-progress-bar { background: #e2e8f0; }
.usage-progress::-webkit-progress-value { background: linear-gradient(90deg,#9fc5f4,#95cfb3); }
.usage-progress::-moz-progress-bar { background: #9fc5f4; }
.usage-meta, .usage-meta span:last-child { color: #484848; }
.panel, .stat-card { border: 1px solid #e6e6e6; border-radius: 4px; background: #fff; box-shadow: 0 10px 30px #4e688513; }
.quickstart-panel pre, .log-content { border: 1px solid #eaeaea; border-radius: 4px; background: #f8f9fb; color: #353535; }
th { background: #f7f8fa; color: #777; }
th,td { border-color: #ebebeb; }
.strong, td strong { color: #232323; }
.table-sub, .panel-count, .empty-cell { color: #858585; }
.text-button, .text-link { color: #416c9d; }
.text-button.danger { color: #af5a5a; }
.model-chip { border-color: #e6e6e6; background: #fff; }
.model-chip code, .provider-mini, .stat-card span, .stat-card small { color: #868686; }
.admin-tabs { border-color: #e5e5e5; }
.admin-tabs a { color: #777; }
.admin-tabs a:hover { color: #181818; border-color: #181818; }
.check-inline { color: #555; }
.check-inline input { accent-color: #181818; }
.model-settings-table input[type=number], .model-settings-table input[name^=levels_], .model-settings-table input[name^=default_reasoning_] { border-color: #ddd; background: #fff; color: #181818; }
.model-settings-table input::placeholder { color: #a0a0a0; }
.model-save-bar { border-color: #e2e2e2; background: #fff; box-shadow: 0 12px 30px #596d891f; }
.model-save-bar span { color: #666; }
.model-save-bar .button { background: #181818; border-color: #181818; color: #fff; }
.model-save-bar .button:hover { background: #343434; border-color: #343434; }
.notice { border-color: #cae6d1; background: #f0faf2; color: #386845; }
.detail-list dt, .detail-list dd { border-color: #ebebeb; }
.detail-list dt { color: #777; }
.error-page h1 { color: #181818; }

@media (max-width: 900px) {
  .nav-row { gap: 20px; }
  .main-nav { gap: 17px; font-size: 12px; }
}
@media (max-width: 640px) {
  .models-main, .plans-main, .dashboard-main, .admin-main, .error-page, .grid-backdrop-light {
    background-image: linear-gradient(#ffffffd6,#f5faffc9), url("../img/sky-clouds.png");
    background-position: center top;
    background-size: cover;
  }
  .shell { width: min(100% - 32px,1240px); }
  .site-header { height: auto; min-height: 64px; }
  .nav-row { min-height: 64px; height: auto; padding-block: 9px; flex-wrap: wrap; gap: 8px; }
  .brand { font-size: 15px; }
  .brand-logo { width: 31px; height: 31px; }
  .nav-action { gap: 10px; }
  .nav-action .nav-chat { font-size: 12px; }
  .nav-action .button { min-height: 35px; padding: 7px 10px; }
  .main-nav { order: 3; flex-basis: 100%; justify-content: center; gap: 18px; overflow-x: auto; white-space: nowrap; padding: 3px 0; }
  .main-nav .nav-dashboard, .main-nav .nav-admin { display: inline; }
  .page-main { padding-block: 45px 70px; }
  .page-intro, .models-intro { padding: 44px 21px 50px; }
  .page-intro h1, .models-intro h1 { font-size: clamp(42px, 11vw, 59px); }
  .catalogue-tally { margin-top: 24px; }
  .pricing-card { min-height: 0; padding: 26px; }
  .dashboard-main, .admin-main { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .model-row, .login-button { transition: none; }
}