:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b10;
  color: #eef2f7;
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; }
body { margin: 0; width: 100%; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: radial-gradient(circle at top, #182333 0, #080b10 48%); }
.app { width: min(920px, 100%); min-width: 0; min-height: 100vh; min-height: 100dvh; margin: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.app-with-promo { grid-template-rows: auto auto 1fr auto auto; }
.app-with-update { grid-template-rows: auto auto 1fr auto auto; }
header { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid #253044; background: rgba(8, 11, 16, .82); backdrop-filter: blur(12px); }
header > div:not(.buggy-badge) { min-width: 0; }
.brand-mark, .avatar { display: block; flex: 0 0 auto; object-fit: cover; background: #0b0e14; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 0 30px rgba(98, 230, 167, .2); }
.avatar { width: 30px; height: 30px; border-radius: 9px; }
h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
header p { margin: 3px 0 0; color: #8fa0b7; font-size: 13px; }
.buggy-badge { max-width: 100%; margin-left: auto; padding: 7px 11px; border: 1px solid #713d57; border-radius: 999px; color: #ff94bb; background: #27131d; font-size: 11px; font-weight: 800; text-align: center; overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: .08em; }
.plus-update { margin: 14px 24px 0; padding: 14px 16px; display: flex; align-items: center; gap: 18px; border: 1px solid #4f3653; border-radius: 14px; background: linear-gradient(135deg, rgba(56, 26, 55, .78), rgba(18, 25, 35, .94)); }
.plus-update, .plus-update div { min-width: 0; }
.plus-update span { display: block; margin-bottom: 3px; color: #ff94d2; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.plus-update strong { display: block; color: #f9dff3; font-size: 13px; }
.plus-update p { margin: 4px 0 0; color: #b9aabc; font-size: 11px; line-height: 1.45; }
.ultimate-card { margin: 16px 24px 0; padding: 18px 20px; display: flex; align-items: center; gap: 22px; border: 1px solid #8b7534; border-radius: 16px; background: linear-gradient(135deg, rgba(72, 56, 18, .72), rgba(18, 25, 35, .96)); box-shadow: 0 16px 44px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 225, 116, .08); }
.model-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 24px 0; }
.model-showcase .ultimate-card { margin: 0; }
.model-showcase .pro-card { grid-column: 1 / -1; border-color: #ff5fa2; background: linear-gradient(135deg, rgba(84, 22, 67, .8), rgba(18, 25, 35, .96)); }
.model-showcase .pro-card h2 { color: #ffd6e8; }
.model-showcase .pro-card .ultimate-badge { color: #ff9bc5; }
.model-showcase .plus-card { border-color: #5471a6; background: linear-gradient(135deg, rgba(26, 47, 84, .78), rgba(18, 25, 35, .96)); }
.model-showcase .compact-card { align-items: flex-start; }
.landing-notice { margin: 14px 24px 0; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #303c50; border-radius: 11px; color: #aab8ca; background: rgba(18, 25, 35, .88); font-size: 12px; }
.landing-notice a { color: #8fe8c3; font-weight: 750; text-decoration: none; }
.landing-notice a:hover { text-decoration: underline; }
.landing-notice a:focus-visible { outline: 3px solid #90a8ff; outline-offset: 3px; }
.code-app { --accent: #69e6ff; }
.code-badge { color: #8cecff; border-color: #316d7c; background: #102a32; }
.code-update { border-color: #316d7c; background: linear-gradient(135deg, rgba(15, 52, 64, .92), rgba(30, 23, 45, .92)); }
.code-update span { color: #8cecff; }
.code-update strong { color: #d8f9ff; }
.ultimate-copy { min-width: 0; }
.ultimate-badge { display: inline-block; color: #ffe17b; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.ultimate-card h2 { margin: 4px 0 3px; color: #fff4c7; font-size: 18px; letter-spacing: -.02em; }
.ultimate-card p { margin: 0; color: #d7d2bd; font-size: 13px; line-height: 1.45; }
.ultimate-card small { display: block; margin-top: 6px; color: #999680; font-size: 11px; line-height: 1.4; }
.ultimate-button { flex: 0 0 auto; padding: 11px 17px; border: 1px solid #ffe17b; border-radius: 10px; color: #1a1608; background: #ffe17b; font-size: 13px; font-weight: 850; text-decoration: none; box-shadow: 0 8px 24px rgba(255, 225, 123, .16); transition: transform .18s ease, box-shadow .18s ease; }
.ultimate-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 225, 123, .24); }
.ultimate-button:focus-visible { outline: 3px solid #90a8ff; outline-offset: 3px; }
select, textarea, button { font: inherit; }
select { color: #edf5f1; background: #121923; border: 1px solid #303c50; border-radius: 9px; padding: 8px 10px; }
.messages { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.message { display: flex; min-width: 0; align-items: flex-start; gap: 11px; max-width: 82%; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message.user .avatar { display: grid; place-items: center; color: #06100c; background: #90a8ff; font-weight: 900; }
.bubble { min-width: 0; max-width: 100%; padding: 12px 15px; border: 1px solid #273348; border-radius: 5px 17px 17px; background: #141b26; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.48; }
.user .bubble { border-color: #355c63; border-radius: 17px 5px 17px 17px; background: #173137; }
.message.thinking .bubble { color: #98a7ba; font-style: italic; }
.mega-app .mega-thinking-text { display: inline-block; opacity: 1; transition: opacity .3s ease; }
.mega-app .mega-thinking-text.mega-thinking-fade { opacity: 0; }
.mega-warning { border-color: #713d57; background: linear-gradient(135deg, rgba(67, 24, 48, .88), rgba(18, 25, 35, .96)); }
.mega-warning strong { color: #ffb1cf; }
.mega-warning p { color: #d2bdc8; }
.code-panel { width: 100%; max-width: 100%; margin: 12px 0; overflow: hidden; border: 1px solid #34445c; border-radius: 10px; background: #090d13; }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; color: #9fb1c8; background: #17202c; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: lowercase; }
.copy-code { padding: 4px 9px; color: #b9f6d9; border: 1px solid #355d50; border-radius: 6px; background: #132921; font-size: 11px; }
.code-panel pre { max-width: 100%; margin: 0; padding: 14px; overflow-x: auto; white-space: pre; }
.code-panel code { color: #dbe8f6; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.composer { min-width: 0; margin: 0 24px; padding: 10px; display: flex; gap: 10px; align-items: flex-end; border: 1px solid #334056; border-radius: 16px; background: #111822; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
textarea { flex: 1 1 auto; min-width: 0; max-height: 150px; resize: none; color: #f5f7fa; background: transparent; border: 0; outline: 0; padding: 8px; line-height: 1.4; }
button { cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px; color: #07110d; background: #62e6a7; font-weight: 750; }
button:disabled { cursor: wait; opacity: .55; }
footer { min-width: 0; padding: 14px 25px max(22px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 16px; color: #78889e; font-size: 12px; }
footer a { overflow-wrap: anywhere; }
footer button { padding: 0; color: #91a4bd; background: none; font-size: 12px; font-weight: 600; }
@media (max-width: 620px) {
  header { flex-wrap: wrap; padding: 16px 14px; gap: 10px; }
  header p { overflow-wrap: anywhere; }
  .buggy-badge { margin-left: 0; }
  .landing-notice { margin: 12px 12px 0; align-items: flex-start; flex-direction: column; }
  .model-showcase { grid-template-columns: 1fr; margin: 12px 12px 0; }
  .model-showcase .pro-card { grid-column: auto; }
  .ultimate-card, .plus-update { margin: 12px 12px 0; padding: 14px; align-items: stretch; flex-direction: column; gap: 12px; }
  .model-showcase .ultimate-card { margin: 0; }
  .ultimate-button { width: 100%; text-align: center; }
  .messages, .mega-app .messages { padding: 18px 12px; gap: 14px; }
  .message, .mega-app .message { width: auto; max-width: 100%; }
  .message .bubble { max-width: calc(100vw - 78px); }
  .message.user .bubble { max-width: calc(100vw - 78px); }
  .bubble, .mega-app .bubble { padding: 11px 12px; font-size: 15px; line-height: 1.42; }
  .code-panel pre { padding: 11px; }
  .code-panel code { font-size: 12px; }
  .composer, .mega-app .composer { margin: 0 10px; padding: 7px; gap: 6px; border-radius: 13px; }
  textarea { padding: 8px 6px; font-size: 16px; }
  .composer > button { flex: 0 0 auto; padding: 10px 13px; }
  footer, .mega-app footer { padding: 11px 12px max(16px, env(safe-area-inset-bottom)); align-items: center; flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .brand-mark { width: 40px; height: 40px; }
  h1 { font-size: 18px; }
  .avatar { width: 26px; height: 26px; }
  .message { gap: 7px; }
  .message .bubble, .message.user .bubble { max-width: calc(100vw - 59px); }
  .plus-update { padding: 12px; }
  footer { align-items: flex-start; flex-direction: column; gap: 9px; }
}