:root {
    color-scheme: dark;
    --bg: #120e0c;
    --bg-elevated: #191411;
    --bg-panel: #1d1714;
    --bg-hover: #251e19;
    --bg-soft: #211a16;
    --surface: rgba(255,255,255,.034);
    --border: rgba(233,219,199,.105);
    --border-strong: rgba(233,219,199,.18);
    --text: #f8f4ed;
    --text-soft: #bcafa1;
    --text-muted: #84776c;
    --gold: #e4bb63;
    --gold-bright: #f0d48b;
    --gold-dark: #a77a35;
    --gold-ink: #22180c;
    --green: #78c69b;
    --red: #ee8986;
    --violet: #ae9aee;
    --mint: #76cbbb;
    --cyan: #82bdcd;
    --coral: #e99b81;
    --sidebar: #15100e;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 34px;
    --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --shadow: 0 20px 75px rgba(0,0,0,.27);
}

/* J AI Image, J AI Video, and conversation navigation */
.media-mode-button { display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;color:var(--text-soft);background:var(--surface);font-size:11px;font-weight:700; }
.media-mode-button:hover { color:var(--gold-bright);border-color:var(--gold); }
.media-studio { position:absolute;inset:58px 0 0;z-index:35;padding:24px;overflow:auto;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px); }
.media-studio-card { width:min(960px,100%);margin:20px auto;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--bg-panel);box-shadow:var(--shadow); }
.media-studio-heading { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px; }.media-studio-heading h2{margin:4px 0 0;font-size:30px}.media-studio textarea{width:100%;resize:vertical;min-height:110px}.media-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.media-options select{min-width:130px}.media-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:22px}.media-result{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.media-result-preview{aspect-ratio:1/1;background:#090909}.media-result img,.media-result video{width:100%;height:100%;object-fit:cover}.media-result>div:last-child{display:flex;flex-direction:column;gap:7px;padding:12px}.media-result strong{font-size:12px;line-height:1.45}.media-result span{color:var(--text-muted);font-size:10px}.scroll-latest{position:absolute;right:24px;bottom:108px;z-index:22;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--text);background:var(--bg-panel);box-shadow:var(--shadow)}.scroll-latest .icon{transform:rotate(90deg)}.account-return{display:inline-grid!important}
.scroll-latest{display:none}.scroll-latest.is-visible{display:grid}.composer-region{position:relative;z-index:24}.chat-main{position:relative}.sidebar-backdrop{pointer-events:none}.jai-dialog-backdrop{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.68);backdrop-filter:blur(7px)}.jai-dialog{width:min(430px,100%);padding:22px;border:1px solid var(--border-strong);border-radius:16px;background:var(--bg-panel);box-shadow:var(--shadow)}.jai-dialog-brand{display:flex;align-items:center;gap:11px}.jai-dialog-brand img{width:40px;height:40px;border-radius:10px;object-fit:cover}.jai-dialog-brand>div{display:flex;flex-direction:column}.jai-dialog-brand strong{font-size:20px;letter-spacing:-.03em}.jai-dialog-brand span{color:var(--gold);font-size:8px;letter-spacing:.12em}.jai-dialog p{margin:18px 0;color:var(--text-soft);font-size:13px;line-height:1.65}.jai-dialog input{width:100%;margin:-5px 0 18px}.jai-dialog-actions{display:flex;justify-content:flex-end;gap:9px}
@media(max-width:720px){.media-mode-button span{display:none}.media-mode-button{padding:7px}.media-studio{padding:10px}.media-studio-card{padding:16px}.scroll-latest{right:14px}.chat-top-actions .top-upgrade{display:none}.chat-shell.sidebar-visible .sidebar-backdrop{pointer-events:auto}}

.message-media{width:min(680px,100%);margin:14px 0 4px;overflow:hidden;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-panel)}.message-media>img,.message-media>video{display:block;width:100%;max-height:620px;object-fit:contain;background:#090909}.message-media figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:12px}.message-media figcaption strong{font-size:12px}.message-media figcaption span{overflow:hidden;color:var(--text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.message-media figcaption .button{grid-column:2;grid-row:1/3}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #fbf8f3;
    --bg-elevated: #fff;
    --bg-panel: #fff;
    --bg-hover: #f4eee6;
    --bg-soft: #f6f1ea;
    --surface: rgba(81,52,34,.045);
    --border: rgba(82,56,37,.12);
    --border-strong: rgba(82,56,37,.2);
    --text: #211813;
    --text-soft: #66594d;
    --text-muted: #8c7c6c;
    --gold: #a77525;
    --gold-bright: #966416;
    --gold-dark: #d4aa64;
    --gold-ink: #fff;
    --sidebar: #f4eee8;
    --shadow: 0 20px 70px rgba(51,37,22,.09);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.58; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
html[data-text-size="compact"] body { font-size: 14px; }
html[data-text-size="large"] body { font-size: 17px; }
html[data-reduce-motion="true"], html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
img { max-width: 100%; }
::selection { background: rgba(228,187,99,.28); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.page-container { width: min(100% - clamp(32px, 8vw, 140px), 1480px); margin-inline: auto; }

.site-header { height: 80px; border-bottom: 1px solid transparent; position: sticky; z-index: 30; top: 0; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); }
.site-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 43px; height: 43px; border-radius: 12px; object-fit: cover; background: var(--surface); }
.brand-logo.is-missing, .login-project-logo.is-missing { display: none; }
.brand-wordmark { display: flex; flex-direction: column; gap: 0; line-height: 1.18; }
.brand-wordmark strong { font-size: 14px; letter-spacing: .11em; white-space: nowrap; }
.brand-wordmark > span { color: var(--text-muted); font-size: 8px; letter-spacing: .17em; white-space: nowrap; }
.desktop-nav { display: flex; align-items: center; gap: 32px; }
.desktop-nav a, .site-footer a { color: var(--text-soft); font-size: 14px; transition: color .18s ease; }
.desktop-nav a:hover, .site-footer a:hover { color: var(--gold); }
.site-header-actions { display: flex; align-items: center; gap: 11px; }
.header-owner-control { gap: 7px; }
.header-owner-control > .icon { width: 15px; height: 15px; }
.language-switch { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 10px; }
.language-switch a { padding: 5px 8px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; border-radius: 7px; }
.language-switch a.is-active { color: var(--gold); background: rgba(228,187,99,.12); }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; border: 1px solid transparent; border-radius: 11px; font-weight: 600; font-size: 13px; line-height: 1.2; transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button .icon { width: 17px; height: 17px; }
.button-gold { color: var(--gold-ink); background: linear-gradient(135deg, #efd18d, #d8a64e); border-color: rgba(250,221,166,.35); }
.button-gold:hover { background: linear-gradient(135deg, #f5dda8, #e6b664); }
.button-outline { color: var(--text); background: transparent; border-color: var(--border-strong); }
.button-outline:hover { background: var(--surface); border-color: rgba(228,187,99,.4); }
.button-ghost { color: var(--text-soft); background: transparent; }
.button-ghost:hover { color: var(--text); background: var(--surface); }
.button-danger { color: var(--red); background: rgba(238,137,134,.07); border-color: rgba(238,137,134,.19); }
.button-block { width: 100%; }
.button-large { min-height: 52px; padding-inline: 22px; font-size: 14px; }
.button-small { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.header-profile { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border: 1px solid var(--border); border-radius: 24px; }
.header-profile-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.avatar { width: 40px; height: 40px; display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; color: var(--gold); background: rgba(228,187,99,.12); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 31px; height: 31px; font-size: 12px; }

.hero-section { min-height: clamp(640px, 76vh, 930px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .88fr); gap: clamp(48px, 8vw, 130px); align-items: center; position: relative; isolation: isolate; }
.hero-glow { position: absolute; z-index: -1; pointer-events: none; filter: blur(85px); border-radius: 50%; }
.hero-glow-left { top: 17%; left: -14%; width: 440px; height: 440px; background: rgba(92,46,28,.19); }
.hero-glow-right { right: -8%; bottom: 5%; width: 510px; height: 430px; background: rgba(191,135,55,.095); }
.hero-eyebrow, .section-eyebrow, .owner-nav-caption { display: inline-flex; align-items: center; gap: 9px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(120,198,155,.8); }
.hero-copy h1 { margin: 23px 0 17px; font-size: clamp(52px, 6.4vw, 90px); line-height: 1.02; letter-spacing: -.074em; font-weight: 680; }
.hero-copy h1 > span { display: block; }
.gold-gradient { background: linear-gradient(105deg, #f3db9b 5%, #d5a458 57%, #f5dfac 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-description { max-width: 590px; margin: 0; color: var(--text-soft); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; margin-top: 31px; }
.hero-trust-chips { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hero-trust-chips > span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; }
.hero-trust-chips .icon { width: 15px; height: 15px; color: var(--gold); }
.hero-workspace { min-height: 463px; padding: 17px; border: 1px solid rgba(230,195,125,.17); border-radius: 23px; background: linear-gradient(145deg, rgba(35,27,22,.96), rgba(23,18,15,.94)); box-shadow: var(--shadow), 0 0 90px rgba(182,128,53,.08); transform: perspective(1100px) rotateY(-5deg); }
html[data-theme="light"] .hero-workspace { background: linear-gradient(145deg,#fff,#f8f3ed); }
.preview-topbar { height: 43px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px 12px; border-bottom: 1px solid var(--border); }
.preview-topbar > span:first-child { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.preview-topbar .icon { width: 16px; height: 16px; color: var(--gold); }
.preview-live { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 10px; }
.preview-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.preview-conversation { min-height: 334px; display: flex; flex-direction: column; gap: 16px; padding: 30px 8px 18px; }
.preview-message { max-width: 88%; padding: 12px 14px; border-radius: 15px; font-size: 12px; line-height: 1.7; }
.preview-user { align-self: flex-end; color: var(--text); background: rgba(228,187,99,.12); border: 1px solid rgba(228,187,99,.13); }
.preview-assistant { align-self: flex-start; background: var(--surface); }
.preview-assistant p { margin: 8px 0; }
.preview-assistant-label { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.preview-list { display: grid; gap: 7px; }
.preview-list > span { display: flex; gap: 8px; color: var(--text-soft); }
.preview-list b { color: var(--gold); font-size: 10px; }
.preview-composer { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); }
.preview-composer > span:nth-child(2) { flex: 1; font-size: 11px; }
.preview-composer > .icon { width: 16px; height: 16px; }
.preview-send { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--gold-ink); background: var(--gold); }
.preview-send .icon { width: 16px; height: 16px; }

.feature-section, .model-section, .pricing-section, .cta-section { padding-top: clamp(80px, 12vw, 150px); }
.tz-identity-section { min-height: 310px; display: flex; align-items: center; justify-content: space-between; gap: 34px; position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(80px, 12vw, 150px); padding: clamp(38px, 6vw, 74px); border: 1px solid rgba(252,209,22,.19); border-radius: 26px; background: #17120f; }
.tz-flag-field { position: absolute; z-index: -2; inset: 0; background: linear-gradient(145deg, #1eb53a 0 37%, #fcd116 37% 41%, #050505 41% 59%, #fcd116 59% 63%, #00a3dd 63% 100%); opacity: .19; }
.tz-identity-section::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(18,14,12,.96) 0%, rgba(18,14,12,.76) 54%, rgba(18,14,12,.24) 100%); }
.tz-identity-copy { max-width: 690px; }
.tz-identity-copy h2 { margin: 15px 0 10px; font-size: clamp(34px, 5vw, 64px); line-height: 1.06; letter-spacing: -.06em; }
.tz-identity-copy p { max-width: 610px; margin: 0; color: var(--text-soft); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.8; }
.tz-identity-mark { width: clamp(105px, 13vw, 180px); aspect-ratio: 1; display: grid; flex: 0 0 auto; place-items: center; align-content: center; border: 1px solid rgba(252,209,22,.3); border-radius: 50%; color: #f7dd71; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 10px rgba(255,255,255,.025); }
.tz-identity-mark strong { font-size: clamp(16px, 2vw, 29px); letter-spacing: -.035em; white-space: nowrap; }
.tz-identity-mark span { color: rgba(255,255,255,.64); font-size: 11px; font-weight: 700; letter-spacing: .28em; }
.section-heading { margin-bottom: 40px; }
.section-heading h1, .section-heading h2 { margin: 12px 0 8px; font-size: clamp(33px, 4.2vw, 56px); line-height: 1.13; letter-spacing: -.053em; font-weight: 640; }
.section-heading > p { max-width: 640px; margin: 9px auto 0; color: var(--text-soft); font-size: 15px; }
.section-heading-center { text-align: center; }
.section-heading-center .section-eyebrow { justify-content: center; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card { min-height: 210px; padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--bg-panel); }
.feature-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(228,187,99,.1); color: var(--gold); }
.tone-violet .feature-icon { background: rgba(174,154,238,.11); color: var(--violet); }
.tone-mint .feature-icon { background: rgba(118,203,187,.11); color: var(--mint); }
.tone-cyan .feature-icon { background: rgba(130,189,205,.11); color: var(--cyan); }
.tone-coral .feature-icon { background: rgba(233,155,129,.11); color: var(--coral); }
.feature-card h3 { margin: 17px 0 7px; font-size: 16px; font-weight: 620; }
.feature-card p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.78; }
.model-showcase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.model-card { min-height: 125px; padding: 17px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.model-card-top { display: flex; align-items: center; gap: 8px; }
.model-card-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.model-orb, .model-option-orb, .model-active-orb { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #ffe6ab, #d49a3d 53%, #744221); box-shadow: 0 0 13px rgba(220,175,94,.27); }
.model-badge { margin-left: auto; padding: 2px 5px; border-radius: 5px; color: var(--gold); background: rgba(228,187,99,.09); font-size: 8px; }
.model-card p { margin: 12px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 17px; }
.pricing-card { display: flex; flex-direction: column; position: relative; min-height: 415px; padding: 28px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.pricing-featured { border-color: rgba(228,187,99,.52); background: linear-gradient(155deg, rgba(228,187,99,.09), rgba(228,187,99,.025) 45%, var(--surface)); box-shadow: 0 0 70px rgba(191,145,69,.085); }
.popular-pill { position: absolute; top: -12px; right: 23px; padding: 5px 10px; border-radius: 8px; color: var(--gold-ink); background: var(--gold); font-size: 10px; font-weight: 700; }
.pricing-card h3 { margin: 3px 0 7px; font-size: 19px; }
.pricing-description { min-height: 42px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.7; }
.pricing-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; min-height: 72px; margin-top: 21px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pricing-amount strong { font-size: 37px; line-height: 1; letter-spacing: -.06em; }
.pricing-amount > span { color: var(--text-muted); font-size: 11px; }
.pricing-features { display: grid; gap: 12px; margin: 20px 0 22px; padding: 0; list-style: none; }
.pricing-features li { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 11px; }
.pricing-features .icon { width: 16px; height: 16px; color: var(--gold); }
.pricing-card > .button, .package-purchase-form { margin-top: auto; }
.cta-section { padding-bottom: 120px; }
.cta-card { display: flex; flex-direction: column; align-items: center; padding: 74px 25px; border: 1px solid rgba(228,187,99,.19); border-radius: 25px; background: radial-gradient(ellipse at center top, rgba(193,140,58,.14), transparent 66%), var(--surface); text-align: center; }
.cta-card h2 { margin: 16px 0 7px; font-size: clamp(33px, 5vw, 61px); line-height: 1.1; letter-spacing: -.065em; }
.cta-card > p { max-width: 550px; color: var(--text-soft); }
.cta-card .button { margin-top: 14px; }
.site-footer { margin-top: 32px; border-top: 1px solid var(--border); background: linear-gradient(180deg, rgba(75,36,28,.055), transparent 82%); }
.footer-inner { display: grid; gap: 22px; padding-block: 29px 20px; }
.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.footer-brand .brand-logo { width: 37px; height: 37px; }
.footer-brand .brand-wordmark strong { font-size: 13px; letter-spacing: .055em; }
.footer-brand .brand-wordmark > span { color: var(--text-muted); font-size: 8px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 28px); }
.footer-links a { color: var(--text-soft); font-size: 11px; }
.footer-links a:hover { color: var(--gold); }
.footer-bottom { padding-top: 16px; border-top: 1px solid var(--border); }
.footer-bottom > p, .footer-location { margin: 0; color: var(--text-muted); font-size: 10px; }
.footer-location { white-space: nowrap; }
.identity-notice { position: fixed; z-index: 82; right: 16px; bottom: 16px; left: auto; max-width: min(580px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(228,187,99,.3); border-radius: 11px; background: var(--bg-panel); box-shadow: var(--shadow); font-size: 11px; }
.identity-notice > .icon { width: 17px; height: 17px; color: var(--gold); }
.identity-notice strong { color: var(--gold); }
.identity-notice a { margin-left: auto; color: var(--gold); white-space: nowrap; }

.center-page { min-height: calc(100svh - 172px); display: grid; place-items: center; padding: 50px 18px; position: relative; overflow: hidden; }
.login-card, .message-card { width: min(100%, 490px); padding: clamp(32px, 6vw, 56px); border: 1px solid var(--border); border-radius: 24px; background: var(--bg-elevated); box-shadow: var(--shadow); text-align: center; }
.login-project-logo { width: 62px; height: 62px; margin-bottom: 15px; border-radius: 17px; object-fit: cover; }
.login-card .section-eyebrow { display: flex; justify-content: center; }
.login-card h1, .message-card h1 { margin: 17px 0 9px; font-size: 35px; line-height: 1.15; letter-spacing: -.055em; }
.login-card > p, .message-card > p { margin: 0 0 28px; color: var(--text-soft); font-size: 13px; line-height: 1.8; }
.secure-note { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 20px; color: var(--text-muted); font-size: 10px; }
.secure-note .icon { width: 15px; height: 15px; color: var(--green); }
.flash-stack { position: fixed; z-index: 80; top: 92px; left: 50%; transform: translateX(-50%); width: min(92vw, 620px); pointer-events: none; }
.flash { margin-bottom: 8px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); box-shadow: var(--shadow); font-size: 12px; pointer-events: auto; }
.flash-success { border-color: rgba(120,198,155,.35); color: var(--green); }
.flash-error { border-color: rgba(238,137,134,.35); color: var(--red); }

.install-shell { padding-block: 42px 95px; }
.install-panel { width: min(100%, 860px); margin-inline: auto; padding: clamp(24px, 5vw, 46px); border: 1px solid var(--border); border-radius: 22px; background: var(--bg-elevated); }
.install-heading h1 { margin: 11px 0 5px; font-size: 38px; letter-spacing: -.05em; }
.install-heading p { color: var(--text-soft); font-size: 13px; }
.requirement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 24px 0; }
.requirement { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 10px; }
.requirement strong { color: var(--green); font-size: 10px; }
.requirement.missing strong { color: var(--red); }
.install-form, .owner-form, .editor-form { display: grid; gap: 15px; }
.form-section-title { margin-top: 15px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.field { display: grid; gap: 6px; color: var(--text-soft); font-size: 11px; font-weight: 550; }
.field input, .field select, .field textarea, .inline-owner-form select { min-height: 42px; width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 9px; outline: none; color: var(--text); background: var(--bg); font-size: 12px; transition: border-color .18s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-dark); }
.field input:disabled { opacity: .65; }
.field textarea { min-height: 100px; resize: vertical; }
.field small { color: var(--text-muted); font-size: 9px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.install-note, .owner-help-banner { display: flex; align-items: flex-start; gap: 9px; padding: 13px 15px; border: 1px solid rgba(228,187,99,.22); border-radius: 11px; color: var(--text-soft); background: rgba(228,187,99,.055); font-size: 11px; line-height: 1.7; }
.install-note strong, .owner-help-banner strong { color: var(--gold); }

.packages-shell { padding-block: 27px 105px; }
.packages-top { margin-bottom: 34px; }
.package-detail-grid { margin-top: 43px; }
.package-model-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 22px; }
.package-model-list > span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); font-size: 9px; }
.current-plan-label { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; margin-top: auto; border: 1px solid rgba(120,198,155,.3); border-radius: 10px; color: var(--green); font-size: 12px; }
.current-plan-label .icon { width: 16px; height: 16px; }
.package-expiry { margin-top: 8px; color: var(--text-muted); text-align: center; font-size: 10px; }
.package-purchase-form { display: grid; gap: 10px; }
.field-compact input { min-height: 39px; }
.payment-help { margin: 0; color: var(--text-muted); text-align: center; font-size: 9px; line-height: 1.6; }
.payment-status-card { display: flex; align-items: center; gap: 15px; padding: 20px; margin: 25px auto 0; border: 1px solid rgba(228,187,99,.31); border-radius: 15px; background: rgba(228,187,99,.065); }
.payment-status-card > div { flex: 1; }
.payment-status-card strong { font-size: 13px; }
.payment-status-card p { margin: 2px 0 0; color: var(--text-soft); font-size: 11px; }
.payment-status-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; color: var(--gold); background: rgba(228,187,99,.13); }
.payment-complete { border-color: rgba(120,198,155,.35); background: rgba(120,198,155,.075); }
.payment-complete .payment-status-icon { color: var(--green); }

/* Professional conversation workspace */
.chat-page { overflow: hidden; }
.chat-shell { height: 100dvh; min-height: 440px; display: grid; grid-template-columns: clamp(265px, 23vw, 315px) minmax(0, 1fr); overflow: hidden; transition: grid-template-columns .22s ease; }
.chat-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.chat-shell.sidebar-collapsed .chat-sidebar { overflow: hidden; padding-inline: 0; border-right-width: 0; opacity: 0; pointer-events: none; }
.chat-sidebar { min-width: 0; display: flex; flex-direction: column; padding: 15px 13px 10px; border-right: 1px solid var(--border); background: var(--sidebar); }
.sidebar-top { min-height: 58px; display: flex; align-items: center; justify-content: space-between; }
.sidebar-brand .brand-logo { width: 36px; height: 36px; border-radius: 10px; }
.sidebar-brand .brand-wordmark strong { font-size: 12px; }
.sidebar-brand .brand-wordmark > span { font-size: 7px; }
.sidebar-close { display: inline-grid; }
.new-chat-button { min-height: 41px; display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 0 11px; border: 1px solid rgba(228,187,99,.34); border-radius: 10px; color: var(--gold); background: rgba(228,187,99,.075); font-size: 12px; font-weight: 600; }
.new-chat-button > span { display: flex; align-items: center; gap: 8px; }
.new-chat-button .icon { width: 16px; height: 16px; }
.new-chat-button kbd { color: var(--text-muted); font-size: 9px; font-weight: 400; }
.history-search { min-height: 39px; display: flex; align-items: center; gap: 7px; margin-top: 13px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.history-search > .icon { width: 15px; height: 15px; color: var(--text-muted); }
.history-search input { width: 100%; min-width: 0; border: 0; outline: none; color: var(--text); background: transparent; font-size: 11px; }
.history-search input::placeholder { color: var(--text-muted); }
.history-heading { display: flex; align-items: center; justify-content: space-between; margin: 21px 1px 7px; color: var(--text-muted); font-size: 10px; font-weight: 600; }
.icon-button { width: 34px; height: 34px; display: inline-grid; flex: 0 0 auto; place-items: center; border: 0; border-radius: 8px; color: var(--text-soft); background: transparent; transition: background .15s ease, color .15s ease; }
.icon-button:hover { color: var(--text); background: var(--surface); }
.archived-toggle { width: 28px; height: 28px; }
.archived-toggle .icon { width: 15px; height: 15px; }
.archived-toggle.is-active { color: var(--gold); background: rgba(228,187,99,.09); }
.conversation-list { min-height: 0; flex: 1; overflow-y: auto; padding: 0 2px 8px; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
.history-empty { padding: 18px 6px; color: var(--text-muted); font-size: 11px; }
.history-group { margin: 9px 0 4px; }
.history-group-title { padding: 7px 7px 5px; color: var(--text-muted); font-size: 9px; font-weight: 650; letter-spacing: .025em; }
.history-item-wrap { position: relative; }
.history-item { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 7px 34px 7px 8px; overflow: hidden; border: 0; border-radius: 8px; color: var(--text-soft); background: transparent; text-align: left; }
.history-item:hover, .history-item.is-active { color: var(--text); background: var(--surface); }
.history-item.is-active { background: rgba(228,187,99,.085); }
.history-item > .icon { width: 14px; height: 14px; color: var(--text-muted); }
.history-item-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.history-action-button { position: absolute; top: 3px; right: 2px; width: 30px; height: 31px; opacity: 0; }
.history-item-wrap:hover .history-action-button, .history-item.is-active + .history-action-button, .history-action-button[aria-expanded="true"] { opacity: 1; }
.history-action-button .icon { width: 17px; height: 17px; }
.history-menu { position: fixed; z-index: 70; width: 177px; padding: 5px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-panel); box-shadow: var(--shadow); }
.history-menu button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 7px; color: var(--text-soft); background: transparent; text-align: left; font-size: 11px; }
.history-menu button:hover { color: var(--text); background: var(--surface); }
.history-menu button.is-danger { color: var(--red); }
.history-menu button .icon { width: 15px; height: 15px; }
.sidebar-bottom { display: grid; gap: 9px; margin-top: 7px; padding-top: 10px; border-top: 1px solid var(--border); }
.plan-card { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 10px 10px 11px; border: 1px solid rgba(228,187,99,.22); border-radius: 10px; background: rgba(228,187,99,.055); }
.plan-card > div, .profile-copy { min-width: 0; display: flex; flex-direction: column; }
.plan-label { color: var(--gold); font-size: 11px; font-weight: 650; }
.plan-usage { color: var(--text-muted); font-size: 9px; }
.plan-card > .icon { width: 15px; height: 15px; color: var(--gold); }
.profile-wrap { position: relative; }
.profile-button { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 9px; padding: 5px 4px; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.profile-button:hover { background: var(--surface); }
.profile-button > .avatar { width: 34px; height: 34px; font-size: 12px; }
.profile-copy { flex: 1; }
.profile-copy strong, .profile-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { font-size: 10px; }
.profile-copy > span { color: var(--text-muted); font-size: 9px; }
.profile-button > .icon { width: 18px; height: 18px; color: var(--text-muted); }
.profile-menu { position: absolute; z-index: 50; bottom: calc(100% + 7px); left: 0; width: 100%; padding: 6px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-panel); box-shadow: var(--shadow); }
.profile-menu > a, .profile-menu > button, .logout-button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 7px; border: 0; border-radius: 7px; color: var(--text-soft); background: transparent; text-align: left; font-size: 11px; }
.profile-menu > a:hover, .profile-menu > button:hover, .logout-button:hover { color: var(--text); background: var(--surface); }
.profile-menu .icon { width: 15px; height: 15px; }
.menu-subvalue { margin-left: auto; color: var(--text-muted); font-size: 9px; }
.profile-language { display: flex; align-items: center; gap: 6px; margin: 4px 0; padding: 8px 7px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 10px; }
.profile-language > span { flex: 1; color: var(--text-soft); }
.profile-language a { padding: 4px 7px; border-radius: 5px; color: var(--text-muted); font-size: 9px; }
.profile-language a.active { color: var(--gold); background: rgba(228,187,99,.11); }
.logout-button { color: var(--red); }
.workspace-footer { margin: 1px 3px 0; color: var(--text-muted); font-size: 8px; line-height: 1.55; }
.plan-card-owner { border-color: rgba(228,187,99,.22); background: rgba(228,187,99,.055); }

.chat-main { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 63px minmax(0, 1fr) auto; overflow: hidden; background: var(--bg); }
.chat-topbar { z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 clamp(17px, 4vw, 50px); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 94%, transparent); }
.sidebar-open, .mobile-new-chat { display: inline-grid; }
.sidebar-open { color: var(--text-soft); }
.top-owner-control { border-color: rgba(228,187,99,.27); color: var(--gold); }
.message-time { margin-left: 4px; color: var(--text-muted); font-size: 9px; }
.chat-density-compact .message { margin-bottom: 12px; }
.chat-density-compact .message-content { line-height: 1.55; }
.chat-shell[data-text-size="compact"] .message-content { font-size: 12px; }
.chat-shell[data-text-size="large"] .message-content { font-size: 16px; }
.model-selector-wrap { position: relative; }
.model-selector { min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 630; }
.model-selector:hover { background: var(--surface); }
.model-selector > .icon { width: 15px; height: 15px; color: var(--text-muted); }
.model-active-orb { width: 11px; height: 11px; }
.model-dropdown { position: absolute; z-index: 45; top: 45px; left: 0; width: min(380px, calc(100vw - 45px)); max-height: min(70vh, 590px); overflow: auto; padding: 7px; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--bg-panel); box-shadow: var(--shadow); }
.dropdown-label { display: block; padding: 9px 8px 7px; color: var(--text-muted); font-size: 9px; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.model-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.model-option:hover, .model-option.selected { background: var(--surface); }
.model-option > span:nth-child(2) { min-width: 0; flex: 1; display: grid; gap: 2px; }
.model-option strong { font-size: 11px; }
.model-option small { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.model-option-badge { color: var(--gold); font-size: 9px; }
.model-upgrade { min-height: 39px; display: flex; align-items: center; gap: 7px; margin-top: 4px; padding: 8px; border-top: 1px solid var(--border); color: var(--gold); font-size: 11px; }
.model-upgrade .icon { width: 15px; height: 15px; }
.chat-top-actions { display: flex; align-items: center; gap: 8px; }
.top-upgrade { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(228,187,99,.25); border-radius: 8px; color: var(--gold); font-size: 10px; }
.top-upgrade .icon { width: 14px; height: 14px; }
.question-popover { position: absolute; z-index: 40; top: 58px; right: 35px; width: min(355px, calc(100vw - 30px)); max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-panel); box-shadow: var(--shadow); }
.question-item { width: 100%; padding: 9px; overflow: hidden; border: 0; border-radius: 7px; color: var(--text-soft); background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.question-item:hover { color: var(--text); background: var(--surface); }
.chat-scroll { min-height: 0; overflow: auto; overflow-anchor: none; overscroll-behavior-y: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
.empty-workspace { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px 22px 25px; text-align: center; }
.welcome-orb { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(228,187,99,.3); border-radius: 18px; color: var(--gold); background: radial-gradient(circle at 30% 25%, rgba(247,222,170,.17), rgba(168,114,48,.1)); box-shadow: 0 0 38px rgba(210,161,80,.12); }
.welcome-orb .icon { width: 26px; height: 26px; }
.welcome-greeting { color: var(--gold); font-size: 11px; letter-spacing: .03em; }
.empty-workspace h1 { max-width: 650px; margin: 8px 0 25px; font-size: clamp(25px, 4vw, 39px); line-height: 1.17; letter-spacing: -.055em; font-weight: 620; }
.suggestion-grid { width: min(100%, 690px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.suggestion-card { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--surface); text-align: left; transition: border-color .18s ease, background .18s ease; }
.suggestion-card:hover { border-color: rgba(228,187,99,.32); background: var(--bg-hover); }
.suggestion-card .icon { width: 17px; height: 17px; color: var(--gold); }
.suggestion-card > span { font-size: 11px; }
.message-thread { width: min(100% - 56px, 840px); margin-inline: auto; padding: 26px 0 30px; }
.message { display: flex; gap: 13px; margin-bottom: 24px; scroll-margin-top: 14px; }
.message-user { justify-content: flex-end; }
.message-assistant { justify-content: flex-start; }
.message-assistant.is-streaming { min-height: max(220px, calc(100dvh - 250px)); }
.message-avatar { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 9px; color: var(--gold); background: rgba(228,187,99,.12); font-size: 11px; font-weight: 650; }
.message-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.message-avatar > .icon { width: 18px; height: 18px; }
.message-user .message-avatar { order: 2; border-radius: 50%; }
.message-body { min-width: 0; max-width: min(85%, 730px); }
.message-user .message-body { display: grid; justify-items: end; }
.message-user .message-content { padding: 11px 15px; border: 1px solid rgba(228,187,99,.12); border-radius: 17px 17px 5px 17px; background: rgba(228,187,99,.085); }
.message-assistant .message-body { max-width: calc(100% - 44px); padding-top: 3px; }
.message-model-name { margin-bottom: 5px; color: var(--gold); font-size: 10px; font-weight: 650; }
.message-content { overflow-wrap: anywhere; font-size: 13px; line-height: 1.85; }
.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }
.message-content h1, .message-content h2, .message-content h3 { margin: 19px 0 8px; line-height: 1.35; }
.message-content h1 { font-size: 19px; }
.message-content h2 { font-size: 17px; }
.message-content h3 { font-size: 15px; }
.message-content p { margin: 8px 0; }
.message-content ul, .message-content ol { margin: 8px 0; padding-left: 22px; }
.message-content blockquote { margin: 10px 0; padding: 5px 12px; border-left: 2px solid var(--gold-dark); color: var(--text-soft); }
.message-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.message-content code { padding: 2px 5px; border-radius: 5px; color: var(--gold-bright); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .91em; }
.message-content pre { position: relative; margin: 12px 0; padding: 38px 14px 14px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.message-content pre code { padding: 0; color: var(--text); background: transparent; white-space: pre; font-size: 11px; line-height: 1.7; }
.code-language { position: absolute; top: 10px; left: 12px; color: var(--text-muted); font-size: 9px; }
.code-copy { position: absolute; top: 7px; right: 9px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-soft); background: var(--surface); font-size: 9px; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0; }
.message-attachment { display: flex; align-items: center; gap: 6px; max-width: 235px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); font-size: 10px; }
.message-attachment img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }
.message-attachment .icon { width: 15px; height: 15px; color: var(--gold); }
.message-attachment > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-actions { display: flex; gap: 3px; margin-top: 5px; opacity: 0; transition: opacity .15s ease; }
.message:hover .message-actions, .message-actions:focus-within { opacity: 1; }
.message-action { width: 27px; height: 27px; }
.message-action > .icon { width: 14px; height: 14px; }
.message-thinking { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.thinking-dots { display: flex; gap: 4px; }
.thinking-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: dot-pulse 1.1s ease infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .18s; }
.thinking-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot-pulse { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.message-editor { width: min(610px, 72vw); min-height: 90px; padding: 10px; border: 1px solid var(--gold-dark); border-radius: 9px; color: var(--text); background: var(--bg-soft); resize: vertical; }
.message-edit-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }

.composer-region { padding: 7px clamp(18px, 5vw, 62px) max(10px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 75%, transparent); }
.composer { width: min(100%, 830px); margin-inline: auto; position: relative; padding: 11px 12px 8px; border: 1px solid var(--border-strong); border-radius: 17px; background: var(--bg-elevated); box-shadow: 0 5px 32px rgba(0,0,0,.1); transition: border-color .2s ease; }
.composer:focus-within { border-color: rgba(228,187,99,.43); }
.composer > textarea { width: 100%; min-height: 37px; max-height: 210px; padding: 7px 5px; overflow-y: auto; border: 0; outline: none; color: var(--text); background: transparent; resize: none; font-size: 13px; line-height: 1.6; }
.composer > textarea::placeholder { color: var(--text-muted); }
.composer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.composer-left { display: flex; align-items: center; gap: 5px; }
.attachment-button { width: 31px; height: 31px; }
.attachment-button .icon { width: 17px; height: 17px; }
.composer-model { padding-left: 6px; color: var(--text-muted); font-size: 10px; }
.send-button { width: 33px; height: 33px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--gold-ink); background: var(--gold); }
.send-button:disabled { color: var(--text-muted); background: var(--bg-hover); opacity: 1; }
.send-button.is-streaming { color: var(--text); background: var(--bg-hover); }
.send-button > .icon { width: 18px; height: 18px; }
.composer-disclaimer { margin: 7px 0 0; color: var(--text-muted); text-align: center; font-size: 9px; }
.attachment-tray { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 8px; }
.attachment-chip { max-width: 200px; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.attachment-chip img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.attachment-chip > .icon { width: 15px; height: 15px; color: var(--gold); }
.attachment-chip-name { min-width: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.attachment-chip-remove { width: 20px; height: 20px; }
.attachment-chip-remove > .icon { width: 13px; height: 13px; }
.formatting-toolbar { position: absolute; z-index: 16; top: -43px; left: 12px; display: flex; gap: 3px; padding: 4px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-panel); box-shadow: var(--shadow); }
.formatting-toolbar button { width: 29px; height: 27px; border: 0; border-radius: 5px; background: transparent; }
.formatting-toolbar button:hover { color: var(--gold); background: var(--surface); }
.drop-overlay { position: absolute; z-index: 60; inset: 70px 15px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px dashed var(--gold); border-radius: 20px; color: var(--gold); background: color-mix(in srgb, var(--bg) 93%, transparent); }
.drop-overlay > .icon { width: 38px; height: 38px; }
.sidebar-backdrop { display: none; }
.toast-root { position: fixed; z-index: 90; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: min(420px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-panel); box-shadow: var(--shadow); color: var(--text); font-size: 11px; pointer-events: auto; }
.toast-error { border-color: rgba(238,137,134,.36); color: var(--red); }

/* Platform owner management */
.owner-page { min-height: 100vh; }
.owner-shell { min-height: 100vh; display: grid; grid-template-columns: 245px minmax(0, 1fr); transition: grid-template-columns .22s ease; }
.owner-shell.panel-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.owner-shell.panel-collapsed .owner-sidebar { overflow: hidden; padding-inline: 0; border-right-width: 0; opacity: 0; pointer-events: none; }
.owner-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 14px 18px; border-right: 1px solid var(--border); background: var(--sidebar); }
.owner-sidebar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.owner-sidebar-heading .panel-close { margin-top: 3px; }
.owner-brand { padding: 3px 2px 24px; }
.owner-brand .brand-logo { width: 39px; height: 39px; }
.owner-nav-caption { margin: 9px 6px 12px; font-size: 9px; }
.owner-nav { display: grid; gap: 3px; }
.owner-nav a { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; color: var(--text-soft); font-size: 11px; }
.owner-nav a:hover { color: var(--text); background: var(--surface); }
.owner-nav a.active { color: var(--gold); background: rgba(228,187,99,.11); }
.owner-nav a > i { padding: 1px 6px; border-radius: 8px; color: var(--gold); background: rgba(228,187,99,.14); font-size: 9px; font-style: normal; }
.owner-sidebar-bottom { display: grid; gap: 5px; margin-top: auto; }
.owner-back { display: flex; align-items: center; gap: 8px; padding: 13px 7px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 11px; }
.owner-back > .icon { width: 16px; height: 16px; }
.owner-main { width: min(100%, 1600px); min-width: 0; padding: 0 clamp(20px, 5vw, 70px) 80px; }
.owner-topbar { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.owner-topbar-heading { min-width: 0; display: flex; align-items: center; gap: 13px; }
.panel-open, .panel-close { display: inline-grid; }
.panel-backdrop { display: none; }
.owner-context { color: var(--gold); font-size: 9px; font-weight: 650; letter-spacing: .1em; }
.owner-topbar h1 { margin: 3px 0 0; font-size: 25px; letter-spacing: -.04em; }
.owner-top-actions { display: flex; align-items: center; gap: 12px; }
.owner-mobile-tabs { display: none; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.metric-card { display: grid; gap: 4px; padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.metric-card > span { color: var(--text-soft); font-size: 10px; }
.metric-card > strong { font-size: 27px; letter-spacing: -.045em; }
.metric-card > small { color: var(--text-muted); font-size: 9px; }
.owner-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 15px; }
.owner-card { margin-bottom: 15px; padding: 19px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.owner-overview-grid .owner-card { margin-bottom: 0; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-heading h2 { margin: 0; font-size: 15px; }
.card-heading p { margin: 4px 0 0; color: var(--text-soft); font-size: 10px; }
.card-heading > a { color: var(--gold); font-size: 10px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 43px; border-bottom: 1px solid var(--border); }
.status-row:last-child { border-bottom: 0; }
.status-row > span { color: var(--text-soft); font-size: 11px; }
.status-row > strong { font-size: 10px; text-align: right; }
.owner-card > .button-block { margin-top: 17px; }
.status-pill { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid transparent; border-radius: 15px; font-size: 9px; font-weight: 600; text-transform: capitalize; }
.status-healthy { border-color: rgba(120,198,155,.24); color: var(--green); background: rgba(120,198,155,.09); }
.status-degraded { border-color: rgba(228,187,99,.25); color: var(--gold); background: rgba(228,187,99,.08); }
.status-offline { border-color: rgba(238,137,134,.23); color: var(--red); background: rgba(238,137,134,.08); }
.status-unconfigured { border-color: var(--border); color: var(--text-muted); background: var(--surface); }
.quick-links { display: grid; }
.quick-links a { display: grid; gap: 3px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.quick-links a:last-child { border-bottom: 0; }
.quick-links strong { font-size: 11px; }
.quick-links span { color: var(--text-muted); font-size: 10px; }
.owner-table-card { margin-top: 15px; }
.table-scroll { overflow: auto; }
.owner-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }
.owner-table th { padding: 10px 9px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 9px; font-weight: 650; white-space: nowrap; }
.owner-table td { padding: 11px 9px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 10px; }
.owner-table tbody tr:last-child td { border-bottom: 0; }
.owner-table td > strong, .owner-table td > small { display: block; }
.owner-table td > strong { color: var(--text); font-size: 10px; }
.owner-table td > small { color: var(--text-muted); font-size: 9px; }
.empty-table { padding: 22px 9px !important; text-align: center; }
.id-cell { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 9px !important; }
.owner-form-card { max-width: 850px; }
.owner-help-banner { margin-bottom: 17px; }
.owner-help-banner .icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gold); }
.owner-publishing-note { margin-top: 15px; margin-bottom: 0; }
.cron-command { display: block; overflow-wrap: anywhere; padding: 13px; border: 1px solid var(--border); border-radius: 9px; color: var(--gold); background: var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.7; user-select: all; }
.owner-form { margin-bottom: 18px; }
.check-field { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 10px; }
.check-field input { accent-color: var(--gold); }
.checks-inline { display: flex; flex-wrap: wrap; gap: 15px; }
.owner-form-actions { display: flex; gap: 9px; }
.health-detail { display: block; margin-top: 14px; color: var(--text-soft); font-size: 10px; }
.owner-section-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.owner-section-intro > p { margin: 0; color: var(--text-soft); font-size: 11px; }
.owner-section-intro > span { flex: 0 0 auto; color: var(--gold); font-size: 10px; }
.editor-card { margin-bottom: 9px; padding: 0 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.editor-new { border-style: dashed; border-color: rgba(228,187,99,.31); }
.editor-card > summary { min-height: 63px; display: flex; align-items: center; gap: 11px; list-style: none; cursor: pointer; }
.editor-card > summary::-webkit-details-marker { display: none; }
.editor-summary { min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; }
.editor-summary > span:last-child { min-width: 0; display: grid; gap: 2px; }
.editor-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.editor-summary small { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.editor-chevron { width: 16px; height: 16px; color: var(--text-muted); transition: transform .2s ease; }
.editor-card[open] .editor-chevron { transform: rotate(180deg); }
.editor-form { padding: 16px 0 17px; border-top: 1px solid var(--border); }
.editor-form > .button { justify-self: start; }
.editor-delete { padding: 0 0 17px; }
.package-orb { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--gold); background: rgba(228,187,99,.1); font-size: 8px; font-weight: 700; }
.model-access-fieldset { margin: 0; padding: 11px; border: 1px solid var(--border); border-radius: 9px; }
.model-access-fieldset > legend { padding-inline: 5px; color: var(--text-soft); font-size: 10px; }
.model-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.gateway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gateway-active { border-color: rgba(120,198,155,.27); }
.owner-users-table { min-width: 1170px; }
.inline-owner-form { display: flex; align-items: center; gap: 6px; }
.inline-owner-form select { min-width: 130px; min-height: 34px; padding: 5px 7px; font-size: 10px; }
.owner-role { color: var(--gold); font-size: 10px; }
.impersonate-link { gap: 5px; }
.impersonate-link > .icon { width: 13px; height: 13px; }

/* Personal account settings */
.settings-page { min-height: 100vh; }
.settings-workspace { width: min(100% - clamp(32px, 8vw, 140px), 1320px); padding-block: 48px 84px; }
.settings-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 32px; }
.settings-eyebrow { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.settings-heading h1 { margin: 7px 0 2px; font-size: clamp(32px, 4vw, 50px); line-height: 1.1; letter-spacing: -.055em; }
.settings-heading p { margin: 0; color: var(--text-soft); font-size: 13px; }
.settings-back { gap: 7px; }
.settings-back > .icon { width: 16px; height: 16px; }
.settings-shell { position: relative; display: grid; grid-template-columns: 245px minmax(0, 1fr); align-items: start; gap: 26px; transition: grid-template-columns .22s ease, gap .22s ease; }
.settings-shell.panel-collapsed { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
.settings-shell.panel-collapsed .settings-sidebar { overflow: hidden; width: 0; opacity: 0; pointer-events: none; }
.settings-sidebar { position: sticky; top: 105px; min-width: 0; display: grid; gap: 18px; padding: 5px 0; }
.settings-sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; }
.settings-sidebar-top > strong { color: var(--text-soft); font-size: 12px; }
.settings-navigation { display: grid; gap: 3px; }
.settings-navigation a, .settings-platform-link { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text-soft); font-size: 11px; }
.settings-navigation a:hover, .settings-platform-link:hover { color: var(--gold); background: rgba(228,187,99,.08); }
.settings-navigation a > .icon, .settings-platform-link > .icon { width: 16px; height: 16px; }
.settings-platform-link { margin-top: 3px; border-top: 1px solid var(--border); border-radius: 0; }
.settings-content { min-width: 0; display: grid; gap: 16px; }
.settings-content-top { display: flex; align-items: center; gap: 9px; min-height: 36px; color: var(--text-soft); font-size: 11px; }
.settings-card { min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--border); border-radius: 17px; background: linear-gradient(160deg, rgba(255,255,255,.032), rgba(255,255,255,.012)); scroll-margin-top: 100px; }
.settings-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 21px; }
.settings-card-title > div > span { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.settings-card-title h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.035em; }
.settings-security-pill, .settings-current-session { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid rgba(120,198,155,.24); border-radius: 20px; color: var(--green); font-size: 9px; white-space: nowrap; }
.settings-security-pill > .icon { width: 13px; height: 13px; }
.settings-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.settings-avatar { width: 56px; height: 56px; font-size: 19px; }
.settings-profile > div { min-width: 0; display: grid; }
.settings-profile strong { overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.settings-profile > div > span { overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; }
.settings-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 17px 0; border-block: 1px solid var(--border); }
.settings-info-grid > div { display: grid; gap: 3px; }
.settings-info-grid > div > span { color: var(--text-muted); font-size: 10px; }
.settings-info-grid > div > strong { overflow-wrap: anywhere; font-size: 11px; }
.settings-help { margin: 15px 0; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.settings-preferences-form { display: grid; gap: 16px; }
.settings-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-select { display: grid; gap: 7px; }
.settings-select > span { color: var(--text-soft); font-size: 11px; }
.settings-select > select { min-height: 43px; width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text); background: var(--bg-panel); font-size: 11px; }
.settings-option-list { display: grid; }
.settings-option { position: relative; min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 11px; border-top: 1px solid var(--border); cursor: pointer; }
.settings-option:first-child { border-top: 0; }
.settings-option > span:first-child { min-width: 0; display: grid; gap: 2px; }
.settings-option > span:first-child > strong { font-size: 12px; }
.settings-option > span:first-child > small { color: var(--text-soft); font-size: 10px; }
.settings-option > input { position: absolute; right: 0; width: 43px; height: 25px; opacity: 0; }
.settings-switch { position: relative; width: 43px; height: 25px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--bg-soft); transition: background .16s ease; }
.settings-switch::before { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-muted); content: ""; transition: transform .16s ease, background .16s ease; }
.settings-option > input:checked + .settings-switch { border-color: rgba(228,187,99,.5); background: rgba(228,187,99,.16); }
.settings-option > input:checked + .settings-switch::before { transform: translateX(18px); background: var(--gold); }
.settings-option > input:focus-visible + .settings-switch { outline: 2px solid var(--gold); outline-offset: 3px; }
.settings-save-bar { position: sticky; z-index: 9; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-panel); box-shadow: var(--shadow); }
.settings-save-bar > span { color: var(--text-soft); font-size: 10px; }
.settings-save-bar .button { gap: 6px; white-space: nowrap; }
.settings-save-bar .button > .icon { width: 15px; height: 15px; }
.settings-data-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.settings-data-counts > div { display: grid; gap: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.settings-data-counts strong { color: var(--gold); font-size: 24px; line-height: 1.05; }
.settings-data-counts span { color: var(--text-soft); font-size: 10px; }
.settings-action-row { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 13px; border-top: 1px solid var(--border); }
.settings-action-row > div { min-width: 0; display: grid; gap: 3px; }
.settings-action-row > div > strong { font-size: 12px; }
.settings-action-row > div > span { color: var(--text-soft); font-size: 10px; }
.settings-action-row .button { gap: 6px; white-space: nowrap; }
.settings-action-row .button > .icon { width: 14px; height: 14px; }
.settings-danger-row > div > strong { color: var(--red); }
.settings-session-list { display: grid; }
.settings-session { min-height: 62px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--border); }
.settings-session > .icon { width: 16px; height: 16px; color: var(--gold); }
.settings-session > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
.settings-session > div > strong { font-size: 11px; }
.settings-session > div > span { overflow-wrap: anywhere; color: var(--text-muted); font-size: 10px; }
.settings-security-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

@media (min-width: 1920px) {
    body { font-size: 17px; }
    .page-container { width: min(100% - 160px, 1760px); }
    .hero-section { min-height: min(76vh, 1040px); }
    .hero-copy h1 { font-size: clamp(90px, 5.2vw, 118px); }
    .hero-description { max-width: 700px; font-size: 19px; }
    .hero-workspace { min-height: 545px; padding: 22px; }
    .preview-conversation { min-height: 400px; }
    .feature-card { min-height: 235px; padding: 31px; }
    .feature-card h3 { font-size: 18px; }
    .feature-card p { font-size: 14px; }
    .model-card { min-height: 148px; padding: 21px; }
    .model-card-top strong { font-size: 13px; }
    .model-card p { font-size: 12px; }
    .chat-shell { grid-template-columns: 350px minmax(0, 1fr); }
    .message-thread { width: min(100% - 90px, 1000px); }
    .composer { width: min(100%, 990px); }
    .message-content, .composer > textarea { font-size: 15px; }
    .owner-shell { grid-template-columns: 280px minmax(0, 1fr); }
    .owner-main { width: min(100%, 1830px); }
    .owner-nav a, .settings-navigation a, .settings-platform-link { min-height: 44px; font-size: 13px; }
    .settings-workspace { width: min(100% - 180px, 1600px); }
    .settings-shell { grid-template-columns: 285px minmax(0, 1fr); gap: 36px; }
    .settings-card-title h2 { font-size: 23px; }
    .settings-option > span:first-child > strong, .settings-action-row > div > strong { font-size: 14px; }
    .settings-option > span:first-child > small, .settings-action-row > div > span, .settings-help { font-size: 12px; }
    .footer-links a, .footer-bottom > p, .footer-location { font-size: 12px; }
}

@media (min-width: 3000px) {
    body { font-size: 20px; }
    .page-container { width: min(100% - 260px, 2200px); }
    .hero-copy h1 { font-size: 140px; }
    .section-heading h1, .section-heading h2 { font-size: 76px; }
    .chat-shell { grid-template-columns: 410px minmax(0, 1fr); }
    .chat-sidebar { padding: 24px 20px 16px; }
    .message-thread, .composer { max-width: 1180px; }
    .message-content, .composer > textarea { font-size: 18px; }
    .owner-shell { grid-template-columns: 350px minmax(0, 1fr); }
    .owner-main { width: min(100%, 2120px); }
    .owner-nav a { min-height: 53px; font-size: 15px; }
    .settings-workspace { width: min(100% - 280px, 1870px); }
    .settings-shell { grid-template-columns: 340px minmax(0, 1fr); gap: 45px; }
    .settings-navigation a { min-height: 52px; font-size: 15px; }
    .settings-card { padding: 39px; }
    .settings-option > span:first-child > strong { font-size: 16px; }
}

@media (max-width: 1250px) {
    .model-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-section { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: 43px; }
    .hero-copy h1 { font-size: clamp(49px, 7vw, 74px); }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .page-container { width: min(100% - 42px, 760px); }
    .desktop-nav { display: none; }
    .hero-section { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: 38px; padding-block: 88px 25px; }
    .hero-copy { text-align: center; }
    .hero-description { margin-inline: auto; }
    .hero-actions, .hero-trust-chips { justify-content: center; }
    .hero-workspace { width: min(100%, 570px); margin-inline: auto; transform: none; }
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .model-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .pricing-card { min-height: auto; }
    .tz-identity-section { min-height: 280px; }
    .pricing-features { margin-bottom: 23px; }
    .owner-shell { grid-template-columns: minmax(0, 1fr); }
    .owner-sidebar { position: fixed; z-index: 66; top: 0; bottom: 0; left: 0; width: min(315px, 86vw); height: 100dvh; display: flex; overflow-y: auto; transform: translateX(-104%); transition: transform .22s ease; }
    .owner-shell.panel-collapsed { grid-template-columns: minmax(0, 1fr); }
    .owner-shell.panel-collapsed .owner-sidebar { padding-inline: 14px; border-right-width: 1px; opacity: 1; pointer-events: auto; }
    .owner-shell.panel-visible .owner-sidebar { transform: translateX(0); }
    .panel-backdrop { position: fixed; z-index: 65; inset: 0; display: block; visibility: hidden; opacity: 0; background: rgba(0,0,0,.57); transition: opacity .2s ease, visibility .2s ease; }
    [data-panel-root].panel-visible > .panel-backdrop { visibility: visible; opacity: 1; }
    .owner-main { padding-inline: 21px; }
    .owner-mobile-tabs { display: flex; gap: 5px; margin: -7px 0 20px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
    .owner-mobile-tabs::-webkit-scrollbar { display: none; }
    .owner-mobile-tabs > a { flex: 0 0 auto; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-soft); font-size: 10px; }
    .owner-mobile-tabs > a.active { border-color: rgba(228,187,99,.28); color: var(--gold); background: rgba(228,187,99,.09); }
    .settings-workspace { width: calc(100% - 42px); }
    .settings-shell, .settings-shell.panel-collapsed { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .settings-sidebar { position: fixed; z-index: 66; top: 0; bottom: 0; left: 0; width: min(320px, 87vw); align-content: start; overflow-y: auto; padding: 22px 14px; border-right: 1px solid var(--border); background: var(--sidebar); transform: translateX(-104%); transition: transform .22s ease; }
    .settings-shell.panel-collapsed .settings-sidebar { width: min(320px, 87vw); opacity: 1; pointer-events: auto; }
    .settings-shell.panel-visible .settings-sidebar { transform: translateX(0); }
}

@media (max-width: 720px) {
    .chat-shell { grid-template-columns: minmax(0, 1fr); }
    .chat-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
    .chat-sidebar { position: fixed; z-index: 61; top: 0; bottom: 0; left: 0; width: min(320px, 87vw); transform: translateX(-103%); transition: transform .23s ease; }
    .chat-shell.sidebar-collapsed .chat-sidebar { padding-inline: 13px; border-right-width: 1px; opacity: 1; pointer-events: auto; }
    .chat-shell.sidebar-visible .chat-sidebar { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; z-index: 60; inset: 0; display: block; visibility: hidden; opacity: 0; background: rgba(0,0,0,.56); transition: opacity .2s ease, visibility .2s ease; }
    .chat-shell.sidebar-visible .sidebar-backdrop { visibility: visible; opacity: 1; }
    .sidebar-close, .sidebar-open, .mobile-new-chat { display: inline-grid; }
    .chat-main { grid-template-rows: 58px minmax(0, 1fr) auto; }
    .chat-topbar { padding-inline: 11px; }
    .chat-topbar > .sidebar-open { margin-right: -4px; }
    .model-selector-wrap { margin-right: auto; }
    .model-selector { padding-inline: 5px; font-size: 11px; }
    .top-upgrade { padding: 6px; }
    .top-upgrade > span { max-width: 89px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .chat-top-actions { gap: 2px; }
    .question-popover { right: 12px; }
    .message-thread { width: calc(100% - 31px); padding-top: 19px; }
    .message { gap: 8px; }
    .message-avatar { width: 27px; height: 27px; }
    .message-body { max-width: 88%; }
    .message-assistant .message-body { max-width: calc(100% - 35px); }
    .message-content { font-size: 12px; }
    .message-actions { opacity: 1; }
    .composer-region { padding-inline: 9px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .composer { padding: 8px 9px 7px; border-radius: 15px; }
    .composer > textarea { font-size: 16px; }
    .composer-disclaimer { margin-top: 5px; font-size: 8px; }
    .suggestion-card { min-height: 57px; padding: 9px; }
    .suggestion-card > span { font-size: 10px; }
    .empty-workspace { padding-inline: 14px; }
    .empty-workspace h1 { font-size: clamp(24px, 7vw, 33px); }
    .settings-heading { align-items: flex-start; }
    .settings-heading p { max-width: 360px; }
    .settings-field-grid { gap: 12px; }
    .footer-top { align-items: flex-start; }
}

@media (max-width: 570px) {
    .page-container { width: calc(100% - 30px); }
    .site-header { height: 67px; }
    .site-header-inner { gap: 8px; }
    .brand { gap: 8px; }
    .brand-logo { width: 35px; height: 35px; border-radius: 9px; }
    .brand-wordmark strong { font-size: 11px; }
    .brand-wordmark > span { font-size: 6.5px; }
    .site-header-actions { gap: 6px; }
    .language-switch a { padding: 5px 6px; font-size: 9px; }
    .header-login { display: none; }
    .header-start { min-height: 35px; padding-inline: 8px; font-size: 10px; }
    .header-profile-name { display: none; }
    .header-owner-control { min-width: 34px; padding-inline: 7px; }
    .header-owner-control > span { display: none; }
    .hero-section { gap: 27px; padding-top: 63px; }
    .hero-copy h1 { margin-top: 18px; font-size: clamp(43px, 11.5vw, 64px); }
    .hero-description { font-size: 14px; }
    .hero-actions { gap: 8px; }
    .hero-actions > .button { min-height: 44px; padding-inline: 11px; font-size: 11px; }
    .hero-trust-chips { gap: 9px; margin-top: 25px; }
    .hero-trust-chips > span { font-size: 9px; }
    .hero-workspace { min-height: 390px; padding: 12px; }
    .preview-conversation { min-height: 285px; padding: 22px 3px 12px; }
    .preview-message { max-width: 94%; font-size: 11px; }
    .feature-section, .model-section, .pricing-section, .cta-section { padding-top: 77px; }
    .tz-identity-section { min-height: 330px; display: grid; align-content: end; margin-top: 77px; padding: 27px 22px; border-radius: 20px; }
    .tz-identity-section::after { background: linear-gradient(0deg, rgba(18,14,12,.97) 0%, rgba(18,14,12,.72) 64%, rgba(18,14,12,.32) 100%); }
    .tz-identity-mark { position: absolute; top: 24px; right: 24px; width: 88px; }
    .tz-identity-mark strong { font-size: 14px; }
    .section-heading { margin-bottom: 25px; }
    .section-heading h1, .section-heading h2 { font-size: 33px; }
    .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .feature-card { min-height: 170px; padding: 19px; }
    .model-showcase { gap: 8px; }
    .model-card { min-height: 118px; padding: 12px; }
    .model-card-top { gap: 5px; }
    .model-card-top strong { font-size: 10px; }
    .model-badge { max-width: 58px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; }
    .pricing-card { padding: 23px; }
    .cta-section { padding-bottom: 76px; }
    .cta-card { padding: 54px 17px; }
    .footer-inner { gap: 16px; padding-block: 22px 18px; }
    .footer-top, .footer-bottom { align-items: flex-start; flex-direction: column; gap: 13px; }
    .footer-links { gap: 10px 15px; }
    .footer-bottom > p { max-width: 330px; font-size: 9px; line-height: 1.7; }
    .requirement-grid, .form-grid, .form-grid-four, .owner-overview-grid, .gateway-grid { grid-template-columns: minmax(0, 1fr); }
    .install-heading h1 { font-size: 32px; }
    .payment-status-card { flex-wrap: wrap; }
    .payment-status-card > .button { width: 100%; }
    .owner-topbar { min-height: 81px; }
    .owner-topbar h1 { font-size: 21px; }
    .owner-open-chat { max-width: 95px; overflow: hidden; padding-inline: 8px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .metric-grid { gap: 8px; }
    .metric-card { padding: 12px; }
    .metric-card > strong { font-size: 23px; }
    .owner-main { padding-inline: 13px; }
    .owner-card { padding: 14px; }
    .card-heading { flex-wrap: wrap; }
    .owner-section-intro { display: grid; gap: 5px; }
    .model-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .editor-card { padding-inline: 10px; }
    .editor-card > summary { gap: 6px; }
    .editor-summary { gap: 7px; }
    .editor-summary strong { font-size: 10px; }
    .owner-topbar-heading { gap: 7px; }
    .owner-topbar .owner-context { font-size: 8px; }
    .identity-notice { right: 8px; bottom: 8px; gap: 6px; padding: 9px; font-size: 9px; }
    .settings-workspace { width: calc(100% - 28px); padding-top: 33px; }
    .settings-heading { gap: 10px; }
    .settings-heading h1 { font-size: 34px; }
    .settings-heading p { font-size: 11px; }
    .settings-back { max-width: 120px; padding-inline: 8px; font-size: 9px; }
    .settings-card { padding: 17px; border-radius: 14px; }
    .settings-card-title h2 { font-size: 18px; }
    .settings-field-grid, .settings-info-grid { grid-template-columns: minmax(0, 1fr); }
    .settings-data-counts { gap: 7px; }
    .settings-data-counts > div { padding: 10px 7px; }
    .settings-data-counts strong { font-size: 20px; }
    .settings-data-counts span { overflow-wrap: anywhere; font-size: 9px; }
    .settings-action-row { align-items: flex-start; flex-direction: column; gap: 10px; }
    .settings-save-bar { align-items: flex-start; flex-direction: column; gap: 9px; }
    .settings-save-bar > .button { align-self: stretch; justify-content: center; }
    .settings-option > span:first-child > small { font-size: 9px; }
}

@media (max-width: 350px) {
    .brand-wordmark > span { display: none; }
    .header-start { max-width: 97px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hero-actions { flex-wrap: wrap; }
    .hero-actions > .button { flex: 1 1 auto; }
    .hero-trust-chips { justify-content: flex-start; }
    .model-showcase { grid-template-columns: minmax(0, 1fr); }
    .suggestion-grid { grid-template-columns: minmax(0, 1fr); }
    .suggestion-card { min-height: 45px; }
    .model-selector { max-width: 137px; }
    #active-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .metric-grid { grid-template-columns: minmax(0, 1fr); }
    .top-upgrade > span { max-width: 52px; }
    .owner-open-chat { max-width: 72px; }
    .owner-context { max-width: 120px; overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
    .settings-heading { flex-wrap: wrap; }
    .settings-back { max-width: none; }
    .settings-card { padding: 14px; }
    .settings-security-pill { padding-inline: 6px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}