:root {
  --bg: #0c0d10;
  --panel: #121419;
  --panel-2: #17191f;
  --line: rgba(255,255,255,.085);
  --text: #f4f3f1;
  --muted: #8b8e98;
  --dim: #646873;
  --violet: #a58bff;
  --violet-deep: #7764d9;
  --green: #8cf1b2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; display: flex; background: radial-gradient(circle at 78% -10%, rgba(108,84,199,.11), transparent 27rem), var(--bg); }
.sidebar { width: 236px; flex: 0 0 236px; background: rgba(14,15,19,.94); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 25px 14px 17px; height: 100vh; position: sticky; top: 0; align-self: flex-start; overflow-y: auto; }
.brand-row { display:flex; align-items:center; justify-content:space-between; padding: 0 10px; }
.brand { display: flex; align-items: center; gap: 9px; font: 800 22px/1 'Manrope', sans-serif; letter-spacing: -.8px; }
.brand-mark { width: 24px; height: 24px; border: 2px solid #b6a4ff; border-radius: 50%; display: grid; place-items: center; position: relative; box-shadow: 0 0 18px rgba(165,139,255,.35); }
.brand-mark:before, .brand-mark:after, .brand-mark span { content: ''; position:absolute; border: 1.5px solid #b6a4ff; border-radius: 50%; transform: rotate(48deg); }
.brand-mark:before { width: 29px; height: 11px; }
.brand-mark:after { width: 11px; height: 29px; }
.brand-mark span { width: 5px; height: 5px; background: #b6a4ff; border: 0; }
.icon-button { background: none; border: 0; color: var(--muted); cursor: pointer; }
.mobile-close, .menu-toggle { display: none; }
.new-chat { border: 1px solid rgba(165,139,255,.32); background: rgba(165,139,255,.1); color: #e8e1ff; width:100%; margin: 33px 0 28px; border-radius: 9px; padding: 11px 10px; cursor:pointer; font-size: 13px; font-weight: 600; text-align:left; transition:.2s; }
.new-chat:hover { background: rgba(165,139,255,.18); border-color: rgba(165,139,255,.56); }
.plus { display:inline-block; font-size:19px; line-height:10px; vertical-align:-1px; margin:0 9px 0 1px; font-weight:400; }.new-chat kbd { float:right; color:#7e739b; font-size:10px; margin-top:2px; background:transparent; }
.nav-label, .section-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 1.25px; color: #646773; font-weight: 700; margin: 0 11px 9px; }.nav-label-spaced { margin-top:32px; }
.nav-item { display:flex; align-items:center; gap:12px; color:#898c96; padding:10px 11px; border-radius:8px; font-size:13px; margin-bottom:2px; transition:.2s; }.nav-item:hover { color:#e8e7e9; background:rgba(255,255,255,.04); }.nav-item.active { color:#f0eafe; background:rgba(165,139,255,.12); }.nav-icon { width:16px; text-align:center; font-size:17px; color:#727681; }.active .nav-icon { color:var(--violet); }.nav-count { font-size:10px; margin-left:auto; color:#9584e1; background:rgba(165,139,255,.15); padding:2px 7px; border-radius:20px; }
.sidebar-bottom { margin-top:auto; padding-top:28px; }.upgrade-card { padding:15px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg, rgba(165,139,255,.13), rgba(165,139,255,.03)); margin: 0 3px 17px; position:relative; overflow:hidden; }.upgrade-card:after { content:''; position:absolute; width:85px; height:85px; border-radius:50%; background:rgba(158,125,255,.13); filter:blur(20px); right:-35px; top:-30px; }.upgrade-spark { color:var(--violet); font-size:14px; margin-bottom:13px; }.upgrade-card strong { font:600 12px 'Manrope', sans-serif; }.upgrade-card p { color:#898493; font-size:10px; line-height:1.45; margin:7px 0 12px; }.upgrade-card button { border:0; background:transparent; color:#c8baff; font-size:10px; padding:0; cursor:pointer; }.upgrade-card button span { padding-left:4px; }.profile-row { display:flex; align-items:center; gap:10px; padding:0 7px; }.avatar, .mini-avatar { display:grid; place-items:center; background:linear-gradient(135deg,#ffab79,#a46568); color:#291518; font-weight:700; border-radius:50%; }.avatar { width:31px; height:31px; font-size:10px; }.profile-copy { display:flex; flex-direction:column; gap:2px; }.profile-copy strong { font-size:11px; }.profile-copy span { color:#777b84; font-size:10px; }.more-button { border:0; background:none; color:#777a83; margin-left:auto; letter-spacing:2px; font-size:11px; cursor:pointer; }
.main-content { width:calc(100% - 236px); min-width:0; }.topbar { height:73px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 49px; }.breadcrumbs { display:flex; gap:11px; align-items:center; color:#676a73; font-size:11px; }.breadcrumbs i { font-style:normal; color:#3f4149; }.breadcrumbs strong { color:#b1b0b5; font-weight:500; }.topbar-actions { display:flex; align-items:center; gap:18px; }.language-switcher { display:flex; align-items:center; gap:6px; color:#9698a2; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:7px; padding:6px 8px; font-size:12px; }.language-switcher select { appearance:none; border:0; outline:0; background:transparent; color:#b2b1ba; font:500 10px 'DM Sans',sans-serif; cursor:pointer; padding-right:2px; }.language-switcher option { background:#1a1b21; color:#f4f3f1; }.help-button { width:18px;height:18px; border:1px solid #686b75; color:#999ba4; background:none;border-radius:50%;font-size:11px; line-height:14px; cursor:pointer; }.notification-button { border:0; background:none; color:#9597a0; position:relative; cursor:pointer; padding:0; }.bell { display:block; transform:rotate(45deg); font-size:19px; line-height:18px; }.notification-button i { width:5px; height:5px; border-radius:50%; background:#a58bff; position:absolute; right:-2px; top:-1px; border:1px solid var(--bg); }.mini-avatar { width:29px; height:29px; font-size:9px; }
.content-wrap { max-width:1220px; margin:0 auto; padding:65px 50px 0; }.welcome-section { margin-bottom:35px; }.eyebrow { color:#8e82bc; font-size:11px; letter-spacing:.1px; margin-bottom:21px; display:flex; align-items:center; gap:8px; }.live-dot { width:6px; height:6px; border-radius:50%; background:#8cf1b2; box-shadow:0 0 11px #8cf1b2; }.eyebrow-arrow { color:#7665bf; font-size:14px; padding-left:3px; }.welcome-section h1 { margin:0; font:700 clamp(40px,4.5vw,66px)/1.05 'Manrope',sans-serif; letter-spacing:-3.3px; }.welcome-section h1 em { color:var(--violet); font-style:normal; }.hero-copy { color:#858890; font-size:14px; line-height:1.65; margin:20px 0 0; }
.composer-card { max-width:790px; min-height:174px; border:1px solid rgba(165,139,255,.4); border-radius:14px; background:linear-gradient(135deg, rgba(27,26,37,.95), rgba(19,20,25,.96)); box-shadow:0 16px 50px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04); padding:17px 19px 14px; position:relative; overflow:hidden; }.composer-card:before { content:''; position:absolute; width:360px;height:160px;right:-130px;top:-130px;border-radius:50%;background:rgba(164,136,255,.12);filter:blur(25px); }.composer-topline { color:#b9aaf0; font-size:11px; display:flex; gap:7px; align-items:center; position:relative; }.status-pulse { width:6px;height:6px;border-radius:50%;background:#a58bff; box-shadow:0 0 7px #a58bff; }.slash,.muted { color:#666773; }.composer-card textarea { display:block; width:100%; height:68px; resize:none; outline:none; border:0; color:#dedde4; background:transparent; padding:18px 0 8px; font-size:16px; }.composer-card textarea::placeholder { color:#676a75; }.composer-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.07); padding-top:11px; }.composer-tools { display:flex; gap:17px; }.tool-button { background:none;border:0; color:#727580; font-size:12px; cursor:pointer; padding:0; }.tool-button:first-letter { color:#9a8adc; }.tool-button:hover { color:#d0ced8; }.composer-actions { display:flex;align-items:center;gap:14px; }.shortcut-hint { font-size:10px;color:#646772; }.send-button { border:0; width:29px;height:29px;border-radius:8px;background:var(--violet);color:#20183e;font-size:21px;line-height:20px;cursor:pointer;transition:.2s; }.send-button:hover { transform:translateY(-2px); box-shadow:0 4px 18px rgba(165,139,255,.4); }
.section-block { margin-top:58px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:19px; }.section-kicker { margin:0 0 8px; color:#6f7280; }.section-heading h2 { font:600 20px 'Manrope',sans-serif; letter-spacing:-.7px; margin:0; }.view-all { color:#8c82b7; font-size:11px; }.view-all span { font-size:16px; margin-left:8px; }.model-grid { display:grid; grid-template-columns:repeat(6,minmax(135px,1fr)); gap:11px; }.model-card { min-height:191px; border-radius:11px; border:1px solid var(--line); background:linear-gradient(140deg,#15171c,#111216); padding:16px; cursor:pointer; transition:transform .2s,border-color .2s,background .2s; position:relative; overflow:hidden; }.model-card:hover { transform:translateY(-3px); border-color:rgba(165,139,255,.36); background:linear-gradient(140deg,#1b1b23,#14151b); }.model-card.featured { border-color:rgba(165,139,255,.4); background:linear-gradient(140deg,rgba(48,38,71,.7),#15151c 70%); }.model-card.featured:after { content:'Популярно'; position:absolute; top:10px; right:10px; font-size:8px; color:#b5a8eb; background:rgba(165,139,255,.13); padding:4px 6px; border-radius:10px; }.model-card-head { display:flex; justify-content:space-between; align-items:start; height:43px; }.model-icon { width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:16px; }.model-icon.openai { color:#fff; background:#25282d; }.model-icon.claude { color:#e6b38f; background:#36271e; font-size:19px; }.model-icon.gemini { background:#222743; color:#89b0ff; }.model-icon.gemini span { background:linear-gradient(180deg,#74a8ff,#bf77fb,#72d6ba);color:transparent;background-clip:text; }.model-icon.glm { background:#172d39;color:#67c9df;font-size:13px; }.model-icon.seedance { color:#f0a6ff;background:#342342; }.favorite { border:0;background:none;color:#666974;font-size:20px;line-height:18px;cursor:pointer;padding:0; }.favorite:hover,.favorite.selected { color:#d1bfff; }.favorite.selected { font-size:19px; }.model-card h3 { font:600 14px 'Manrope',sans-serif; margin:11px 0 6px; letter-spacing:-.35px; }.model-card p { color:#7d808a;font-size:10px;line-height:1.5;margin:0; }.model-meta { display:flex;justify-content:space-between;align-items:end;position:absolute;bottom:15px;left:16px;right:16px;font-size:9px; }.provider { color:#62656e; }.speed { color:#777c84; }.speed::first-letter { color:#84dda6; }.add-model { border-style:dashed;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center; }.add-model:hover { border-color:rgba(165,139,255,.55); }.add-circle { width:27px;height:27px;border:1px solid #7e739b;border-radius:50%;display:grid;place-items:center;color:#a58bff;font-size:20px;line-height:20px;margin-bottom:13px; }.add-model h3 { margin:0 0 7px; font-size:12px; }.add-model p { font-size:10px; }.browse-arrow { color:#a58bff; font-size:15px; position:absolute;bottom:14px;right:17px; }
.lower-grid { display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.8fr);gap:36px;margin-top:62px;padding-bottom:48px; }.lower-grid .section-block { margin-top:0; }.template-list { border-top:1px solid var(--line); }.template-row { width:100%;display:flex;align-items:center;gap:12px;padding:13px 3px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--text);cursor:pointer; }.template-row:hover strong { color:var(--violet); }.template-emoji { width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:14px; }.template-emoji.orange { color:#ffb078;background:#3a2820; }.template-emoji.purple { color:#bd9aff;background:#2d2445;font-size:11px; }.template-emoji.green { color:#8be9ad;background:#1d3428; }.template-row span:nth-child(2) { display:flex;flex-direction:column;gap:4px; }.template-row strong { font:500 12px 'Manrope',sans-serif;transition:.2s; }.template-row small { color:#70737d;font-size:10px; }.row-arrow { margin-left:auto;color:#696d78;font-size:17px;padding-right:5px; }.insight-card { border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#181a21,#121318);padding:20px 21px 17px;position:relative;overflow:hidden;min-height:247px; }.insight-glow { width:180px;height:100px;background:rgba(136,109,230,.13);filter:blur(35px);position:absolute;right:-70px;top:-40px;border-radius:50%; }.insight-card .section-kicker { position:relative; }.insight-number { font:700 35px 'Manrope',sans-serif;letter-spacing:-1.7px;margin-top:19px;position:relative; }.insight-number span { font:500 12px 'DM Sans',sans-serif;color:#777a84;letter-spacing:0; }.insight-subcopy { font-size:10px;color:#777a84;margin:4px 0 18px; }.trend { color:#80dfa4;margin-left:7px; }.chart { height:60px;display:flex;align-items:end;gap:7px;border-bottom:1px solid rgba(255,255,255,.08);position:relative; }.chart:before { content:'';position:absolute;left:0;right:0;top:30%;border-top:1px dashed rgba(255,255,255,.06); }.chart span { flex:1;border-radius:3px 3px 0 0;background:rgba(165,139,255,.3);position:relative;z-index:1; }.chart span.today { background:var(--violet); }.chart-labels { display:flex;justify-content:space-between;color:#5f626c;font-size:8px;margin-top:6px; }.insight-footer { display:flex;justify-content:space-between;margin-top:20px;color:#727680;font-size:10px; }.insight-footer strong { color:#b1a7cf;font-weight:500; }.progress { height:3px;background:#282930;border-radius:5px;margin-top:8px; }.progress span { display:block;width:72%;height:100%;background:linear-gradient(90deg,#8067df,#b095ff);border-radius:5px; }.footer { border-top:1px solid var(--line);padding:20px 50px;display:flex;justify-content:space-between;color:#555861;font-size:10px; }.footer i { color:#8e79dc;font-style:normal;margin-left:4px; }
.toast { position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#eae4ff;color:#252033;border-radius:8px;padding:11px 17px;font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:20; }.toast.show { opacity:1;transform:translate(-50%,0); }.overlay { display:none; }

.service-status { position:fixed; inset:0; z-index:45; display:grid; place-items:center; overflow:hidden; padding:24px; background:rgba(8,9,13,.94); }
.service-status[hidden] { display:none !important; }
.service-status-glow { position:absolute; width:52vw; height:52vw; max-width:680px; max-height:680px; border-radius:50%; background:radial-gradient(circle, rgba(128,101,218,.2), transparent 68%); filter:blur(15px); pointer-events:none; }
.service-status-card { position:relative; width:min(100%, 510px); padding:43px 42px 38px; border:1px solid rgba(165,139,255,.3); border-radius:22px; background:linear-gradient(145deg, rgba(29,27,41,.98), rgba(15,17,22,.98) 76%); box-shadow:0 28px 100px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.07); text-align:center; animation:service-status-enter .55s cubic-bezier(.2,.75,.25,1) both; }
.service-status-mark { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 25px; border:1px solid rgba(165,139,255,.3); border-radius:19px; background:rgba(165,139,255,.11); box-shadow:0 0 40px rgba(165,139,255,.14); }
.service-status-mark .brand-mark { transform:scale(1.06); }
.service-status-card .section-kicker { margin:0 0 12px; color:#a18fe0; }
.service-status-card h1 { max-width:420px; margin:0 auto; font:700 clamp(25px,4vw,35px)/1.13 'Manrope',sans-serif; letter-spacing:-1.5px; }
.service-status-card > p:not(.section-kicker) { max-width:390px; margin:17px auto 0; color:#92939e; font-size:13px; line-height:1.65; }
.service-status-card small { display:block; max-width:360px; margin:12px auto 26px; color:#686b77; font-size:10px; line-height:1.6; }
.service-status-card .primary-small { min-height:40px; padding:0 18px; font-size:11px; }
@keyframes service-status-enter { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:720px) { .service-status { padding:18px; }.service-status-card { padding:34px 22px 28px; border-radius:18px; }.service-status-mark { width:55px; height:55px; margin-bottom:20px; }.service-status-card h1 { font-size:26px; }.service-status-card > p:not(.section-kicker) { font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .service-status-card { animation:none; } }
@media (max-width: 1100px) { .content-wrap { padding-left:36px;padding-right:36px; }.topbar { padding:0 36px; }.model-grid { grid-template-columns:repeat(3,1fr); }.model-card { min-height:174px; }.lower-grid { grid-template-columns:1fr;gap:46px; }.insight-card { max-width:500px; } }
@media (max-width: 720px) { .sidebar { position:fixed;z-index:12;left:-250px;top:0;bottom:0;height:100vh;transition:left .25s;box-shadow:15px 0 40px rgba(0,0,0,.5); }.sidebar.open { left:0; }.mobile-close { display:block;font-size:24px;line-height:1; }.overlay { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:11; }.overlay.show { display:block; }.main-content { width:100%; }.topbar { height:62px;padding:0 19px; }.menu-toggle { display:block;font-size:20px;padding:0;margin-right:13px; }.breadcrumbs { margin-right:auto; }.topbar-actions { gap:10px; }.language-switcher { padding:5px 6px; }.language-switcher span { display:none; }.topbar-actions .help-button { display:none; }.content-wrap { padding:43px 19px 0; }.welcome-section { margin-bottom:28px; }.welcome-section h1 { font-size:43px;letter-spacing:-2.4px; }.hero-copy { font-size:13px; }.desktop-only { display:none; }.composer-card { min-height:170px;padding:15px; }.composer-card textarea { font-size:15px;height:68px; }.tool-button span { display:none; }.composer-tools { gap:17px; }.section-block { margin-top:45px; }.section-heading { align-items:start; }.section-heading h2 { font-size:18px; }.view-all { margin-top:12px; }.model-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }.model-card { padding:14px;min-height:178px; }.model-card h3 { font-size:13px; }.model-meta { left:14px;right:14px;bottom:13px; }.lower-grid { margin-top:47px; }.footer { padding:18px 19px; }.footer span:last-child { display:none; } }
@media (max-width: 380px) { .model-grid { grid-template-columns:1fr 1fr; }.model-card { min-height:185px; }.model-card.featured:after { display:none; }.composer-actions { gap:8px; }.shortcut-hint { display:none; } }
.model-card.featured:after { content: attr(data-featured-label); }

/* Fine UI alignment: one consistent icon language and collision-free card headers. */
.ui-icon { width:16px; height:16px; display:block; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-icon { width:18px; height:18px; display:grid; place-items:center; flex:0 0 18px; }
.nav-icon .ui-icon { width:17px; height:17px; }
.upgrade-spark { width:20px; height:20px; display:grid; place-items:center; }
.upgrade-spark .ui-icon { width:18px; height:18px; }

.language-switcher { position:relative; width:126px; min-width:126px; height:34px; display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:9px; user-select:none; cursor:pointer; }
.language-switcher > .ui-icon { width:15px; height:15px; color:#a899df; }
.language-switcher #languageCurrent { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#b7b4c2; font-size:11px; }
.language-switcher .select-chevron { margin-left:auto; color:#777280; font-size:15px; line-height:12px; transform:translateY(-1px); pointer-events:none; }
.language-switcher select { position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:0; cursor:pointer; appearance:auto; }
.language-switcher:focus-within { border-color:rgba(165,139,255,.55); box-shadow:0 0 0 3px rgba(165,139,255,.1); }

.model-card.featured:after { content:none; display:none; }
.model-card-head { height:32px; align-items:center; gap:7px; }
.model-icon { flex:0 0 31px; }
.model-badge { display:none; align-items:center; height:19px; margin-left:auto; padding:0 7px; border:1px solid rgba(165,139,255,.2); border-radius:999px; background:rgba(165,139,255,.1); color:#b8a8ed; font-size:8px; line-height:1; white-space:nowrap; }
.model-card.featured .model-badge { display:inline-flex; }
.favorite { width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; border-radius:7px; }
.favorite .ui-icon { width:17px; height:17px; stroke-width:1.6; }
.favorite:hover { background:rgba(255,255,255,.06); }
.favorite.selected .ui-icon { fill:currentColor; }
.notification-button { width:22px; height:24px; display:grid; place-items:center; }
.notification-button .ui-icon { width:17px; height:17px; }
.tool-button { display:inline-flex; align-items:center; gap:6px; }
.tool-button .ui-icon { width:14px; height:14px; color:#9181d0; }
.send-button { display:grid; place-items:center; padding:0; }
.send-button .ui-icon { width:16px; height:16px; stroke-width:2; }

@media (max-width: 720px) {
  .language-switcher { width:116px; min-width:116px; height:32px; }
  .language-switcher #languageCurrent { display:block; }
  .language-switcher .select-chevron { display:block; }
}

.language-switcher .select-chevron { width:15px; height:15px; display:grid; place-items:center; }
.language-switcher .select-chevron .ui-icon { width:13px; height:13px; stroke-width:1.8; color:#817b91; }
.help-button { width:22px; height:22px; display:grid; place-items:center; padding:0; border:0; }
.help-button .ui-icon { width:19px; height:19px; color:#8e929d; stroke-width:1.35; }
.help-button:hover .ui-icon { color:#c4b8f5; }

.models-view { max-width:1220px; margin:0 auto; padding:51px 50px 70px; }
.models-view:not([hidden]) { display:block; }
.back-link { display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; color:#9387c1; font-size:11px; cursor:pointer; transition:.2s; }
.back-link span:first-child { font-size:18px; line-height:12px; }
.back-link:hover { color:#d3c8ff; }
.models-view-heading { margin:54px 0 34px; max-width:610px; }
.models-view-heading .section-kicker { margin-bottom:13px; }
.models-view-heading h1 { margin:0; font:700 clamp(36px,4vw,56px)/1.05 'Manrope',sans-serif; letter-spacing:-2.8px; }
.models-view-heading h1:after { content:'.'; color:var(--violet); }
.models-view-heading > p:last-child { color:#858891; font-size:14px; line-height:1.6; max-width:450px; margin:17px 0 0; }
.models-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:35px; }
.catalog-tabs { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.catalog-tab { border:1px solid transparent; background:transparent; color:#777a85; border-radius:7px; padding:8px 11px; font-size:11px; cursor:pointer; transition:.2s; }
.catalog-tab:hover { color:#d5d2df; background:rgba(255,255,255,.04); }
.catalog-tab.active { color:#e6e0ff; background:rgba(165,139,255,.13); border-color:rgba(165,139,255,.25); }
.model-search { width:190px; height:34px; display:flex; align-items:center; gap:8px; flex:0 0 190px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); }
.model-search .ui-icon { width:14px; height:14px; color:#777280; }
.model-search input { width:100%; min-width:0; outline:0; border:0; background:transparent; color:#d9d5e1; font-size:11px; }
.model-search input::placeholder { color:#6d707b; }
.model-search:focus-within { border-color:rgba(165,139,255,.45); box-shadow:0 0 0 3px rgba(165,139,255,.08); }
.provider-section { margin-bottom:42px; }
.provider-heading { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.provider-logo { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-size:18px; flex:0 0 34px; }
.provider-logo.openai { background:#25282d; color:#f4f3f1; }.provider-logo.claude { background:#36271e; color:#e6b38f; }.provider-logo.gemini { background:#222743; color:#89b0ff; }.provider-logo.teal { background:#172d39; color:#67c9df; }
.provider-heading h2 { margin:0 0 3px; font:600 15px 'Manrope',sans-serif; letter-spacing:-.3px; }.provider-heading p { margin:0; color:#6f727d; font-size:10px; }.provider-count { margin-left:auto; color:#646873; font-size:10px; }.provider-plus { color:#777b86; font:400 10px 'DM Sans',sans-serif; margin-left:5px; }
.catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.catalog-card { min-height:135px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; position:relative; padding:16px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(140deg,#15171c,#111216); color:var(--text); cursor:pointer; transition:.2s; }
.catalog-card:hover, .catalog-card.selected { transform:translateY(-2px); border-color:rgba(165,139,255,.4); background:linear-gradient(140deg,rgba(47,38,70,.65),#15151c 78%); }
.catalog-card.selected:after { content:'Selected'; position:absolute; top:12px; right:12px; color:#b9aaef; background:rgba(165,139,255,.12); border:1px solid rgba(165,139,255,.22); border-radius:99px; font-size:8px; padding:4px 6px; }
.catalog-card-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; margin-bottom:14px; font-size:15px; }.catalog-card-icon.violet { color:#b7a5ff; background:#2d2644; }.catalog-card-icon.orange { color:#e7b18e; background:#382820; }.catalog-card-icon.blue { color:#91b5ff; background:#222943; }.catalog-card-icon.teal { color:#68c9df; background:#172e3a; }.catalog-card-icon.pink { color:#efa9ff; background:#342342; }
.catalog-card strong { font:600 12px 'Manrope',sans-serif; }.catalog-card small { color:#777a85; font-size:10px; margin-top:5px; }.catalog-card em { margin-top:auto; padding-top:13px; color:#9585cd; font-size:9px; font-style:normal; }
.models-view .footer { margin-left:-50px; margin-right:-50px; }

@media (max-width:1100px) { .models-view { padding-left:36px; padding-right:36px; }.catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.models-view .footer { margin-left:-36px; margin-right:-36px; } }
@media (max-width:720px) { .models-view { padding:39px 19px 45px; }.models-view-heading { margin:42px 0 27px; }.models-view-heading h1 { font-size:39px; letter-spacing:-2px; }.models-toolbar { align-items:stretch; flex-direction:column; gap:15px; }.catalog-tabs { flex-wrap:nowrap; overflow-x:auto; margin:0 -2px; padding-bottom:2px; }.catalog-tab { flex:0 0 auto; }.model-search { width:100%; flex-basis:34px; }.provider-section { margin-bottom:35px; }.provider-heading { align-items:flex-start; }.provider-count { display:none; }.catalog-grid { grid-template-columns:1fr 1fr; gap:9px; }.catalog-card { min-height:145px; padding:13px; }.catalog-card.selected:after { display:none; }.models-view .footer { margin-left:-19px; margin-right:-19px; } }
@media (max-width:380px) { .catalog-grid { grid-template-columns:1fr; }.language-switcher { width:108px; min-width:108px; }.language-switcher #languageCurrent { font-size:10px; } }

.app-view { max-width:1220px; min-height:calc(100vh - 73px); margin:0 auto; padding:51px 50px 80px; }
.app-view:not([hidden]) { display:block; }
.page-header-row { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin:53px 0 38px; }.page-header-row h1 { margin:0; font:700 clamp(36px,4vw,54px)/1.05 'Manrope',sans-serif; letter-spacing:-2.7px; }.page-header-row p:last-child { margin:16px 0 0; color:#858891; font-size:13px; line-height:1.55; }.outline-button, .primary-small { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:34px; padding:0 12px; border-radius:8px; font-size:10px; cursor:pointer; transition:.2s; }.outline-button { border:1px solid var(--line); background:rgba(255,255,255,.025); color:#a6a2ae; }.outline-button:hover { border-color:rgba(165,139,255,.45); color:#ded5ff; }.primary-small { gap:7px; border:1px solid rgba(165,139,255,.38); background:rgba(165,139,255,.12); color:#d1c6ff; }.primary-small span:first-child { font-size:16px; line-height:10px; }.primary-small:hover { background:rgba(165,139,255,.2); }
.history-layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:38px; }.history-list { border-top:1px solid var(--line); }.history-date { padding:22px 0 10px; color:#666a75; font-size:10px; text-transform:uppercase; letter-spacing:1px; font-weight:700; }.history-item { width:100%; display:flex; align-items:center; gap:13px; padding:15px 4px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; color:var(--text); cursor:pointer; }.history-item:hover .history-item-copy strong { color:var(--violet); }.history-model-icon { width:32px; height:32px; display:grid; place-items:center; flex:0 0 32px; border-radius:9px; font:700 9px 'Manrope',sans-serif; }.history-model-icon.violet { color:#b9a6ff; background:#2b2442; }.history-model-icon.pink { color:#efabff; background:#342342; }.history-model-icon.orange { color:#e5b08d; background:#39281f; }.history-model-icon.blue { color:#92b6ff; background:#222a45; }.history-item-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }.history-item-copy strong { overflow:hidden; color:#d6d3dc; font:500 12px 'Manrope',sans-serif; text-overflow:ellipsis; white-space:nowrap; transition:.2s; }.history-item-copy small { color:#6c6f7a; font-size:10px; }.history-item-arrow { margin-left:auto; color:#666b77; font-size:17px; }.history-summary { align-self:start; border:1px solid var(--line); border-radius:12px; padding:20px; background:linear-gradient(145deg,#181a21,#121318); }.history-summary > strong { display:block; margin-top:21px; font:700 42px 'Manrope',sans-serif; letter-spacing:-2px; }.history-summary > span { display:block; margin-top:2px; color:#777a85; font-size:11px; }.summary-divider { height:1px; background:var(--line); margin:22px 0 6px; }.summary-row { display:flex; justify-content:space-between; gap:12px; padding-top:12px; color:#777a84; font-size:10px; }.summary-row b { color:#c1b8dc; font-weight:500; text-align:right; }.saved-count { color:#8176a9; font-size:11px; padding-bottom:5px; }.saved-count span { color:#686b77; }.favorites-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:850px; }.favorites-grid .catalog-card { min-height:165px; }.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.collection-card { min-height:164px; position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:19px; border:1px solid var(--line); border-radius:12px; color:var(--text); text-align:left; cursor:pointer; overflow:hidden; transition:.2s; }.collection-card:hover { transform:translateY(-3px); border-color:rgba(165,139,255,.35); }.collection-card:after { content:''; position:absolute; width:130px; height:100px; right:-55px; top:-45px; border-radius:50%; filter:blur(27px); }.collection-purple { background:linear-gradient(145deg,#211d31,#14151a); }.collection-purple:after { background:rgba(157,125,255,.17); }.collection-blue { background:linear-gradient(145deg,#182031,#14151a); }.collection-blue:after { background:rgba(91,156,255,.15); }.collection-orange { background:linear-gradient(145deg,#30231e,#14151a); }.collection-orange:after { background:rgba(255,154,101,.14); }.collection-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.07); color:#c0adff; font-size:16px; margin-bottom:auto; }.collection-card strong { font:600 13px 'Manrope',sans-serif; }.collection-card small { color:#777a84; font-size:10px; margin-top:5px; }.collection-arrow { position:absolute; right:19px; bottom:18px; color:#8076a9; font-size:17px; }.collection-empty { justify-content:center; align-items:center; text-align:center; border-style:dashed; background:transparent; }.empty-plus { width:31px; height:31px; display:grid; place-items:center; margin-bottom:12px; border:1px solid #756a98; border-radius:50%; color:#a58bff; font-size:21px; }.collection-empty strong { font-size:12px; }.collection-empty small { margin-top:7px; }.settings-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; max-width:900px; }.settings-card { border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,#17191f,#121318); overflow:hidden; }.settings-card-title { padding:17px 18px 12px; color:#777a86; font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; }.settings-profile { display:flex; align-items:center; gap:11px; margin:0 17px 16px; padding:14px; border:1px solid rgba(255,255,255,.07); border-radius:9px; }.large-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#ffab79,#a46568); color:#291518; font-size:11px; font-weight:700; }.settings-profile > div:nth-child(2) { display:flex; flex-direction:column; gap:3px; min-width:0; }.settings-profile strong { font-size:11px; }.settings-profile small { color:#747781; font-size:9px; }.settings-profile .outline-button { margin-left:auto; min-height:28px; font-size:9px; }.settings-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:61px; padding:12px 18px; border-top:1px solid rgba(255,255,255,.065); }.settings-row > span { display:flex; flex-direction:column; gap:4px; min-width:0; }.settings-row strong { color:#c9c6d0; font:500 11px 'Manrope',sans-serif; }.settings-row small { color:#6e717c; font-size:9px; }.link-button, .settings-value { border:0; background:none; color:#ab9bf0; font-size:10px; cursor:pointer; }.settings-value span { margin-left:8px; font-size:14px; }.toggle { width:30px; height:18px; padding:2px; border:0; border-radius:99px; background:#2a2c33; cursor:pointer; transition:.2s; }.toggle span { display:block; width:14px; height:14px; border-radius:50%; background:#70737d; transition:.2s; }.toggle.active { background:#7865d5; }.toggle.active span { margin-left:12px; background:#f3efff; }.settings-card:nth-child(3) { grid-column:span 2; }.theme-options { display:flex; gap:10px; padding:0 18px 18px; }.theme-option { min-width:105px; padding:0; border:0; background:none; color:#868995; text-align:left; cursor:pointer; }.theme-option.active { color:#ded8f4; }.theme-preview { display:block; height:52px; margin-bottom:8px; border:2px solid transparent; border-radius:7px; }.theme-option.active .theme-preview { border-color:#9a84eb; }.dark-preview { background:linear-gradient(145deg,#252834,#101116); }.light-preview { background:linear-gradient(145deg,#f4f3f1,#c9c9d0); }.system-preview { background:linear-gradient(110deg,#252834 0 50%,#dedee1 50%); }.theme-option strong { font:500 10px 'Manrope',sans-serif; }
@media (max-width:1100px) { .app-view { padding-left:36px; padding-right:36px; }.settings-layout { max-width:none; }.history-layout { grid-template-columns:minmax(0,1fr) 235px; } }
@media (max-width:720px) { .app-view { min-height:calc(100vh - 62px); padding:39px 19px 50px; }.page-header-row { align-items:flex-start; flex-direction:column; gap:18px; margin:42px 0 29px; }.page-header-row h1 { font-size:39px; letter-spacing:-2px; }.page-header-row p:last-child { font-size:12px; }.history-layout { display:block; }.history-summary { margin-top:32px; }.favorites-grid { grid-template-columns:1fr 1fr; }.collection-grid { grid-template-columns:1fr 1fr; }.settings-layout { grid-template-columns:1fr; }.settings-card:nth-child(3) { grid-column:auto; }.settings-profile { flex-wrap:wrap; }.settings-profile .outline-button { margin-left:45px; }.theme-options { justify-content:space-between; }.theme-option { min-width:0; flex:1; } }
@media (max-width:440px) { .favorites-grid,.collection-grid { grid-template-columns:1fr; }.history-item-copy strong { white-space:normal; line-height:1.35; }.history-item-arrow { display:none; } }

/* Final responsive guardrails. */
.add-model .add-circle { width:32px; height:32px; display:grid; place-items:center; margin-bottom:13px; font-size:0; line-height:1; }
.add-model .add-circle::before { content:'+'; display:block; color:var(--violet); font-size:23px; font-weight:400; line-height:1; transform:translateY(-1px); }
.add-model { cursor:pointer; }

@media (max-width:720px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .app-shell { width:100%; min-width:0; overflow-x:hidden; }
  .main-content { width:100%; min-width:0; overflow:hidden; }
  .topbar { width:100%; min-width:0; display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:10px; padding:0 14px; }
  .menu-toggle { width:24px; margin:0; flex:0 0 24px; }
  .breadcrumbs { min-width:0; width:100%; overflow:hidden; gap:6px; white-space:nowrap; }
  .breadcrumbs > span:first-child, .breadcrumbs > i { display:none; }
  .breadcrumbs strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-actions { min-width:0; max-width:100%; gap:8px; flex:0 1 auto; }
  .language-switcher { width:104px; min-width:104px; padding:0 8px; gap:6px; }
  .language-switcher #languageCurrent { overflow:hidden; text-overflow:ellipsis; }
  .notification-button { flex:0 0 22px; }
  .mini-avatar { flex:0 0 29px; }
  .content-wrap, .models-view, .app-view { max-width:100%; }
}
@media (max-width:360px) {
  .topbar { grid-template-columns:22px minmax(0,1fr) auto; gap:7px; padding:0 10px; }
  .language-switcher { width:96px; min-width:96px; }
  .language-switcher > .ui-icon { display:none; }
  .language-switcher #languageCurrent { font-size:10px; }
  .topbar-actions { gap:6px; }
}

/* Guest state, authentication and final icon treatment. */
.guest-row { display:flex; align-items:center; gap:9px; padding:0 7px; }
.guest-icon { width:31px; height:31px; display:grid; place-items:center; flex:0 0 31px; border:1px solid rgba(165,139,255,.23); border-radius:50%; color:#9b8bdd; background:rgba(165,139,255,.08); }
.guest-icon .ui-icon { width:16px; height:16px; }
.guest-signin, .topbar-signin { border:0; background:none; color:#a99aeb; font-size:10px; cursor:pointer; transition:.2s; }
.guest-signin { margin-left:auto; padding:5px 0; }.guest-signin:hover, .topbar-signin:hover { color:#e0d8ff; }
.topbar-signin { min-height:29px; padding:0 11px; border:1px solid rgba(165,139,255,.3); border-radius:8px; background:rgba(165,139,255,.08); }
.topbar-signin:hover { border-color:rgba(165,139,255,.6); background:rgba(165,139,255,.15); }

.add-model .add-circle::before { content:none; }
.add-model .add-circle .ui-icon { width:16px; height:16px; stroke-width:1.8; color:#b8a5ff; }

.model-icon.openai, .model-icon.claude, .model-icon.gemini, .model-icon.glm, .model-icon.seedance,
.provider-logo.openai, .provider-logo.claude, .provider-logo.gemini, .provider-logo.teal,
.catalog-card-icon.violet, .catalog-card-icon.orange, .catalog-card-icon.blue, .catalog-card-icon.teal, .catalog-card-icon.pink {
  background-repeat:no-repeat; background-position:center; background-size:18px; font-size:0; color:transparent;
}
.model-icon.openai, .provider-logo.openai, .catalog-card-icon.violet { background-image:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai.svg'); }
.model-icon.claude, .provider-logo.claude, .catalog-card-icon.orange { background-image:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/anthropic.svg'); }
.model-icon.gemini, .provider-logo.gemini, .catalog-card-icon.blue { background-image:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/gemini.svg'); }
.model-icon.glm, .provider-logo.teal, .catalog-card-icon.teal { background-image:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/zhipu.svg'); }
.model-icon.seedance, .catalog-card-icon.pink { background-image:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/bytedance.svg'); }
.model-icon.gemini span { display:none; }
.provider-logo { background-size:20px; }
.catalog-card-icon { background-size:17px; }

body.modal-open { overflow:hidden; }
.auth-modal { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; }
.auth-modal[hidden] { display:none !important; }
.auth-modal:not([hidden]) { display:grid; }
.auth-backdrop { position:absolute; inset:0; background:rgba(5,6,9,.76); backdrop-filter:blur(9px); }
.auth-dialog { width:min(100%,410px); position:relative; padding:31px; border:1px solid rgba(165,139,255,.3); border-radius:17px; background:linear-gradient(145deg,#1a1824,#111318 72%); box-shadow:0 25px 90px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06); text-align:center; }
.auth-close { position:absolute; top:13px; right:14px; width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:7px; background:rgba(255,255,255,.04); color:#8d909c; font-size:19px; line-height:1; cursor:pointer; }.auth-close:hover { color:#fff; background:rgba(255,255,255,.09); }
.auth-orbit-mark { width:44px; height:44px; display:grid; place-items:center; margin:0 auto 21px; border-radius:13px; background:rgba(165,139,255,.12); }.auth-orbit-mark .brand-mark { transform:scale(.78); }
.auth-dialog .section-kicker { margin:0 0 10px; }.auth-dialog h2 { margin:0; font:650 25px/1.15 'Manrope',sans-serif; letter-spacing:-1px; }.auth-copy { max-width:310px; margin:13px auto 23px; color:#858894; font-size:12px; line-height:1.6; }.auth-dialog [data-panel-auth] { width:100%; min-height:43px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#fff; color:#1d1e22; font:600 12px 'DM Sans',sans-serif; cursor:pointer; transition:.2s; }.auth-dialog [data-panel-auth]:before { content:'G'; width:19px; height:19px; display:grid; place-items:center; margin-right:9px; border-radius:50%; color:#4285f4; font:700 13px Arial,sans-serif; }.auth-dialog [data-panel-auth]:hover { background:#f0ecff; transform:translateY(-1px); }.auth-dialog small { display:block; margin-top:16px; color:#686c77; font-size:9px; line-height:1.5; }
@media (max-width:720px) { .topbar-signin { padding:0 8px; font-size:9px; }.guest-row { padding-left:5px; padding-right:5px; }.auth-dialog { padding:27px 20px 23px; }.auth-dialog h2 { font-size:22px; } }
.auth-dialog [data-panel-auth]:before { content:''; width:19px; height:19px; display:block; margin-right:9px; border-radius:0; background:url('https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg') center/contain no-repeat; }

/* Recolor the real external SVG marks for the dark surface. */
.model-icon.openai, .provider-logo.openai, .catalog-card-icon.violet { background-image:none; background-color:#f4f1ff; -webkit-mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai.svg') center/18px 18px no-repeat; mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai.svg') center/18px 18px no-repeat; }
.model-icon.claude, .provider-logo.claude, .catalog-card-icon.orange { background-image:none; background-color:#f1b18a; -webkit-mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/anthropic.svg') center/18px 18px no-repeat; mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/anthropic.svg') center/18px 18px no-repeat; }
.model-icon.gemini, .provider-logo.gemini, .catalog-card-icon.blue { background-image:none; background-color:#8eb5ff; -webkit-mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/gemini.svg') center/18px 18px no-repeat; mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/gemini.svg') center/18px 18px no-repeat; }
.model-icon.glm, .provider-logo.teal, .catalog-card-icon.teal { background-image:none; background-color:#70d4ea; -webkit-mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/zhipu.svg') center/18px 18px no-repeat; mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/zhipu.svg') center/18px 18px no-repeat; }
.model-icon.seedance, .catalog-card-icon.pink { background-image:none; background-color:#f3b0ff; -webkit-mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/bytedance.svg') center/18px 18px no-repeat; mask:url('https://unpkg.com/@lobehub/icons-static-svg@latest/icons/bytedance.svg') center/18px 18px no-repeat; }
.provider-logo { -webkit-mask-size:20px 20px !important; mask-size:20px 20px !important; }
.catalog-card-icon { -webkit-mask-size:17px 17px !important; mask-size:17px 17px !important; }

.empty-state { min-height:285px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px 20px; border:1px dashed rgba(255,255,255,.12); border-radius:14px; background:radial-gradient(circle at 50% 0,rgba(165,139,255,.08),transparent 45%),rgba(255,255,255,.012); text-align:center; }.empty-state-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:17px; border:1px solid rgba(165,139,255,.3); border-radius:14px; color:#ab98f2; background:rgba(165,139,255,.1); }.empty-state-icon .ui-icon { width:22px; height:22px; }.empty-state-icon.heart-empty .ui-icon { stroke-width:1.4; }.empty-state h2 { margin:0; font:600 18px 'Manrope',sans-serif; }.empty-state p { max-width:320px; margin:9px 0 19px; color:#777b86; font-size:11px; line-height:1.55; }

/* Focused chat mode and compact, scrollable model picker. */
.chat-empty-state { display:none; }
.composer-card { overflow:visible; }
.composer-card:before { pointer-events:none; z-index:0; }
.composer-topline, .composer-card textarea, .composer-footer { position:relative; z-index:1; }
.model-picker { position:relative; min-width:0; }
.model-picker-toggle { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:3px 7px 3px 3px; border:1px solid transparent; border-radius:8px; background:transparent; color:#c6baff; font-size:11px; cursor:pointer; transition:.2s; }
.model-picker-toggle:hover, .model-picker-toggle[aria-expanded="true"] { border-color:rgba(165,139,255,.28); background:rgba(165,139,255,.1); }
.model-picker-current-icon { width:20px; height:20px; flex:0 0 20px; border-radius:6px; background-color:#f4f1ff; background-size:13px !important; }
.model-picker-chevron { width:13px; height:13px; color:#8f84b6; transition:transform .2s; }
.model-picker-toggle[aria-expanded="true"] .model-picker-chevron { transform:rotate(180deg); }
.model-picker-menu { position:absolute; top:calc(100% + 9px); left:0; z-index:30; width:285px; max-height:min(320px, 48vh); overflow-y:auto; padding:8px; border:1px solid rgba(165,139,255,.28); border-radius:12px; background:rgba(20,20,28,.98); box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(16px); }
.model-picker-menu[hidden] { display:none; }
.model-picker-heading { padding:5px 8px 9px; color:#777486; font-size:9px; letter-spacing:.8px; text-transform:uppercase; }
.model-picker-provider { padding:9px 8px 5px; color:#6f6d7a; font-size:9px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.model-picker-provider:first-child { padding-top:3px; }
.model-picker-option { width:100%; display:flex; align-items:center; gap:9px; padding:8px; border:0; border-radius:8px; background:transparent; color:#c9c6d2; text-align:left; cursor:pointer; transition:.16s; }
.model-picker-option:hover, .model-picker-option.selected { background:rgba(165,139,255,.12); color:#f1edff; }
.model-picker-option-icon { width:26px; height:26px; flex:0 0 26px; border-radius:7px; background-color:#f4f1ff; background-size:15px !important; }
.model-picker-option-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.model-picker-option-copy strong { overflow:hidden; font:500 11px 'Manrope',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.model-picker-option-copy small { color:#777986; font-size:9px; }
.model-picker-check { margin-left:auto; color:#a58bff; font-size:12px; opacity:0; }
.model-picker-option.selected .model-picker-check { opacity:1; }
.model-picker-menu::-webkit-scrollbar { width:6px; }
.model-picker-menu::-webkit-scrollbar-thumb { border-radius:99px; background:rgba(165,139,255,.32); }

body.chat-mode .content-wrap { min-height:calc(100vh - 73px); display:flex; flex-direction:column; max-width:980px; padding-top:22px; padding-bottom:0; }
body.chat-mode .welcome-section, body.chat-mode .content-wrap > #models, body.chat-mode .content-wrap > .lower-grid { display:none; }
body.chat-mode .chat-empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px 20px; text-align:center; }
body.chat-mode .chat-empty-mark { width:58px; height:58px; display:grid; place-items:center; margin-bottom:19px; border:1px solid rgba(165,139,255,.25); border-radius:18px; background:rgba(165,139,255,.08); box-shadow:0 0 45px rgba(165,139,255,.12); }
body.chat-mode .chat-empty-mark .brand-mark { transform:scale(.95); }
body.chat-mode .chat-empty-state h1 { margin:0; font:700 clamp(28px,4vw,42px)/1.1 'Manrope',sans-serif; letter-spacing:-1.8px; }
body.chat-mode .chat-empty-state p { margin:12px 0 0; color:#777b86; font-size:12px; }
body.chat-mode .composer-card { width:100%; max-width:900px; margin:0 auto 28px; }
body.chat-mode .footer { display:none; }
body.chat-mode { overflow:hidden; }
body.chat-mode .main-content { overflow:hidden; }
body.chat-mode .content-wrap { height:calc(100vh - 73px); min-height:0; overflow:visible; }
.model-picker-menu { position:fixed; top:auto; bottom:auto; }

@media (max-width:720px) {
  body.chat-mode .content-wrap { height:calc(100vh - 62px); min-height:0; padding:15px 19px 0; }
  body.chat-mode .chat-empty-state { padding:20px 10px; }
  body.chat-mode .chat-empty-state h1 { font-size:29px; }
  body.chat-mode .composer-card { margin-bottom:17px; }
  .model-picker-menu { width:min(285px, calc(100vw - 38px)); max-height:45vh; }
}

/* Route loading state and soft page transitions. */
.page-skeleton { max-width:1220px; min-height:calc(100vh - 73px); margin:0 auto; padding:51px 50px 80px; }
.page-skeleton[hidden] { display:none !important; }
.skeleton-line, .skeleton-card { position:relative; overflow:hidden; background:#191b22; }
.skeleton-line::after, .skeleton-card::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation:skeleton-shimmer 1.35s ease-in-out infinite; }
.skeleton-back { width:92px; height:11px; border-radius:99px; }
.skeleton-heading { margin:54px 0 34px; }
.skeleton-kicker { width:105px; height:9px; border-radius:99px; }
.skeleton-title { width:min(430px, 58%); height:52px; margin-top:15px; border-radius:10px; }
.skeleton-copy { width:min(360px, 65%); height:12px; margin-top:17px; border-radius:99px; }
.skeleton-toolbar { display:flex; align-items:center; gap:9px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.skeleton-tab { width:86px; height:28px; border-radius:7px; }
.skeleton-tab.short { width:68px; }
.skeleton-search { width:190px; height:34px; margin-left:auto; border-radius:8px; }
.skeleton-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:35px; }
.skeleton-card { min-height:145px; border:1px solid rgba(255,255,255,.06); border-radius:10px; }
@keyframes skeleton-shimmer { 100% { transform:translateX(100%); } }
.page-transition { animation:page-enter .48s cubic-bezier(.2,.75,.25,1) both; }
@keyframes page-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1100px) { .page-skeleton { padding-left:36px; padding-right:36px; }.skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .page-skeleton { min-height:calc(100vh - 62px); padding:39px 19px 50px; }.skeleton-heading { margin:42px 0 27px; }.skeleton-title { width:75%; height:42px; }.skeleton-copy { width:88%; }.skeleton-toolbar { overflow:hidden; }.skeleton-search { min-width:130px; }.skeleton-grid { gap:9px; margin-top:27px; }.skeleton-card { min-height:145px; } }
@media (prefers-reduced-motion:reduce) { .skeleton-line::after, .skeleton-card::after { animation:none; }.page-transition { animation:none; } }