/* OpenHosst panel styles. Only tokens.css values are used: change the brand there, not here. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--oh-base); color: var(--oh-ink);
  font: var(--oh-text-body)/1.7 var(--oh-font-sans); -webkit-font-smoothing: antialiased;
  background-image: var(--oh-hero-mesh); background-repeat: no-repeat; background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--oh-font-heading); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--oh-space-3); color: var(--oh-ink); }
h1 { font-size: var(--oh-text-h2); line-height: 1.15; }
h2 { font-size: var(--oh-text-h3); line-height: 1.3; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--oh-space-3); }
a { color: var(--oh-teal-bright); text-decoration: none; }
a:hover { color: var(--oh-mint); }
code, .mono { font-family: var(--oh-font-mono); font-size: 0.85em; }
:focus-visible { outline: none; box-shadow: var(--oh-focus); border-radius: var(--oh-radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--oh-gradient); color: var(--oh-base); padding: .5rem 1rem; border-radius: var(--oh-radius-full); }

/* ---- header (floating pill, like openhosst.com) ---- */
.nav { position: sticky; top: var(--oh-space-4); z-index: 50; margin: var(--oh-space-4) auto 0; width: calc(100% - 2rem); max-width: 72rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--oh-space-5);
  padding: .6rem 1.25rem; border: 1px solid var(--oh-line); border-radius: var(--oh-radius-full);
  background: rgba(22, 32, 34, .6); backdrop-filter: blur(24px); box-shadow: var(--oh-shadow-float); }
.brand { display: inline-flex; align-items: center; gap: .5rem; font: 700 1.1rem var(--oh-font-display); color: var(--oh-ink); }
.brand img { width: 26px; height: 26px; filter: drop-shadow(0 0 8px rgba(189, 255, 240, .5)); }
.nav-links { display: flex; align-items: center; gap: var(--oh-space-5); font-size: var(--oh-text-small); font-weight: 500; }
.nav-links a { color: var(--oh-mute); transition: color var(--oh-fast) var(--oh-ease-standard); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--oh-ink); }
.nav-links form { margin: 0; }

.wrap { width: calc(100% - 2rem); max-width: 72rem; margin: var(--oh-space-10) auto var(--oh-space-16); }
.narrow { max-width: 30rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--oh-space-4); flex-wrap: wrap; margin-bottom: var(--oh-space-6); }
.muted { color: var(--oh-mute); } .faint { color: var(--oh-faint); } .small { font-size: var(--oh-text-small); }
.grad { background: var(--oh-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- surfaces ---- */
.card { background: rgba(22, 32, 34, .5); border: 1px solid var(--oh-line); border-radius: var(--oh-radius-card); padding: var(--oh-space-6);
  transition: border-color var(--oh-base-time) var(--oh-ease), box-shadow var(--oh-base-time) var(--oh-ease); }
a.card:hover, .card.hover:hover { border-color: var(--oh-line-bright); box-shadow: var(--oh-shadow-card); }
.card.lit { box-shadow: var(--oh-shadow-lit); }
.grid { display: grid; gap: var(--oh-space-4); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.row { display: flex; align-items: center; gap: var(--oh-space-3); flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: var(--oh-space-4); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: 0 1.25rem;
  border-radius: var(--oh-radius-full); border: 1px solid var(--oh-line-bright); background: transparent; color: var(--oh-ink);
  font: 600 .9rem var(--oh-font-heading); cursor: pointer; transition: background var(--oh-fast) var(--oh-ease-standard), box-shadow var(--oh-base-time) var(--oh-ease); }
.btn:hover { background: var(--oh-teal-10); color: var(--oh-ink); }
.btn.primary { background: var(--oh-gradient); color: var(--oh-base); border-color: transparent; }
.btn.primary:hover { box-shadow: var(--oh-glow); background: var(--oh-gradient); color: var(--oh-base); }
.btn.danger { border-color: var(--oh-danger-30); color: var(--oh-danger); }
.btn.danger:hover { background: var(--oh-danger-10); }
.btn.sm { min-height: 2rem; padding: 0 .9rem; font-size: .8rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.link { border: 0; min-height: 0; padding: 0; color: var(--oh-teal-bright); }

/* ---- forms ---- */
label { display: block; font: 600 .85rem var(--oh-font-heading); margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: 2.6rem; padding: .55rem .85rem; border-radius: var(--oh-radius-btn); border: 1px solid var(--oh-line-bright);
  background: var(--oh-surface); color: var(--oh-ink); font: inherit; }
input::placeholder, textarea::placeholder { color: var(--oh-faint); }
textarea { resize: vertical; }
.field { margin-bottom: var(--oh-space-4); }
.hint { color: var(--oh-mute); font-size: .8rem; margin-top: .3rem; }

/* ---- feedback ---- */
.flash { margin: var(--oh-space-4) auto 0; width: calc(100% - 2rem); max-width: 72rem; padding: .8rem 1.1rem; border-radius: var(--oh-radius-md); border: 1px solid var(--oh-line-bright); background: var(--oh-teal-10); }
.flash.err { border-color: var(--oh-danger-30); background: var(--oh-danger-10); }
.flash.info { border-color: rgba(59,130,246,.4); background: var(--oh-info-15); }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .7rem; border-radius: var(--oh-radius-full); font: 600 .75rem var(--oh-font-heading); border: 1px solid var(--oh-line); }
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--oh-success); background: var(--oh-success-15); } .pill.warn { color: var(--oh-warn); background: var(--oh-warn-15); }
.pill.info { color: var(--oh-info); background: var(--oh-info-15); } .pill.danger { color: var(--oh-danger); background: var(--oh-danger-10); }
.pill.mute { color: var(--oh-mute); } .pill.info::before { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.meter { height: .45rem; border-radius: var(--oh-radius-full); background: var(--oh-teal-10); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--oh-gradient); border-radius: inherit; transition: width var(--oh-slow) var(--oh-ease); }
.meter.hot > span { background: var(--oh-warn); }

/* ---- tabs ---- */
.tabs { display: flex; gap: var(--oh-space-1); flex-wrap: wrap; border-bottom: 1px solid var(--oh-line); margin-bottom: var(--oh-space-6); }
.tabs a { padding: .6rem 1rem; color: var(--oh-mute); font: 600 .9rem var(--oh-font-heading); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--oh-ink); } .tabs a[aria-current="page"] { color: var(--oh-teal-bright); border-color: var(--oh-teal); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--oh-text-small); }
th { text-align: left; font: 600 .75rem var(--oh-font-heading); color: var(--oh-mute); text-transform: uppercase; letter-spacing: .05em; }
th, td { padding: .7rem .8rem; border-bottom: 1px solid var(--oh-line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.copy { cursor: pointer; }

/* ---- plans ---- */
.plan { display: flex; flex-direction: column; gap: var(--oh-space-3); cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan:has(input:checked) { border-color: var(--oh-teal); box-shadow: var(--oh-shadow-lit); }
.plan:has(input:focus-visible) { box-shadow: var(--oh-focus); }
.price { font: 800 2.25rem var(--oh-font-display); letter-spacing: -.03em; } .price small { font: 500 .9rem var(--oh-font-sans); color: var(--oh-mute); }
.plan ul { list-style: none; margin: 0; padding: 0; color: var(--oh-mute); font-size: var(--oh-text-small); }
.plan li { padding: .2rem 0; } .plan li::before { content: "✓"; color: var(--oh-teal); margin-right: .5rem; }

/* ---- chat ---- */
.chat { display: grid; grid-template-columns: 16rem 1fr; gap: var(--oh-space-4); min-height: 32rem; }
@media (max-width: 52rem) { .chat { grid-template-columns: 1fr; } }
.sessions { display: flex; flex-direction: column; gap: var(--oh-space-1); max-height: 34rem; overflow-y: auto; }
.sessions a { display: block; padding: .55rem .8rem; border-radius: var(--oh-radius-md); color: var(--oh-mute); font-size: var(--oh-text-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sessions a:hover { background: var(--oh-teal-05); color: var(--oh-ink); } .sessions a[aria-current="true"] { background: var(--oh-teal-10); color: var(--oh-ink); }
.thread { display: flex; flex-direction: column; min-height: 32rem; padding: 0; overflow: hidden; }
#log { flex: 1; overflow-y: auto; padding: var(--oh-space-5); display: flex; flex-direction: column; gap: var(--oh-space-3); max-height: 34rem; }
.msg { max-width: 85%; padding: .7rem 1rem; border-radius: var(--oh-radius-card); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--oh-teal-15); border: 1px solid var(--oh-line-bright); border-bottom-right-radius: .25rem; }
.msg.assistant { align-self: flex-start; background: var(--oh-surface); border: 1px solid var(--oh-line); border-bottom-left-radius: .25rem; }
.tool { align-self: flex-start; max-width: 92%; font: .78rem var(--oh-font-mono); background: var(--oh-base); border: 1px solid var(--oh-line); border-radius: var(--oh-radius-md); padding: .5rem .8rem; color: var(--oh-mute); }
.tool summary { cursor: pointer; color: var(--oh-teal-bright); overflow-wrap: anywhere; } .tool pre { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note { align-self: center; color: var(--oh-mute); font-size: .8rem; }
.composer { display: flex; gap: var(--oh-space-3); padding: var(--oh-space-4); border-top: 1px solid var(--oh-line); background: rgba(9, 13, 14, .4); }
.composer textarea { min-height: 3.2rem; }
.typing { align-self: flex-start; color: var(--oh-mute); font-size: .85rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; font-size: var(--oh-text-small); }
.kv dt { color: var(--oh-mute); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.center { text-align: center; }
.hero { padding: var(--oh-space-10) 0 var(--oh-space-6); }
.footer { text-align: center; color: var(--oh-faint); font-size: .8rem; padding: var(--oh-space-8) 1rem; }