:root { color-scheme: dark; }
.cree8-shell {
  --bg: #0d0f17; --surface: #131620; --sidebar: #10121b; --panel: #171a25;
  --field: #1a1d2a; --line: #272b39; --text: #f6f5ff; --sub: #a8a9ba;
  --muted: #76798e; --accent: #a788fa; --soft-accent: #242035;
  --user: #252139; --shadow: 0 14px 52px rgba(0,0,0,.3);
  position: relative; display: flex; width: 100%; min-height: 100vh; height: 100dvh;
  background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px;
}
.cree8-shell[data-theme="light"] {
  --bg: #fbfaff; --surface: #fff; --sidebar: #f4f3fa; --panel: #fff;
  --field: #f5f4f9; --line: #e5e3ed; --text: #212035; --sub: #646379;
  --muted: #828198; --accent: #7757d5; --soft-accent: #ebe6fa;
  --user: #eee8fd; --shadow: 0 14px 40px rgba(44,34,81,.1);
  color-scheme: light;
}
body.admin-bar .cree8-shell { height: calc(100dvh - 32px); min-height: calc(100vh - 32px); }
.cree8-shell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cree8-shell button { color: inherit; }
.cree8-shell :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sidebar { width: 282px; min-width: 282px; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--line); padding: 26px 15px 16px; z-index: 40; }
.brand { display:flex; align-items: center; padding:0 11px 33px; gap:12px; }
.brand-icon { background: linear-gradient(145deg,#c6a9ff,#8362e6 54%,#6955cc); color: white; width: 37px; height: 37px; border-radius: 12px; display:grid; place-items:center; font-size:24px; box-shadow:0 8px 26px #8569d73d; }
.brand-text { display:flex; flex-direction:column; gap:2px; }
.brand-text strong { font-weight:800; letter-spacing: .8px; font-size:23px; line-height:1; }
.brand-text strong span { font-size:14px; font-weight:800; color:var(--accent); margin-left:3px; }
.brand-text small { font-size:8px; font-weight:700; letter-spacing: 1.55px; color:var(--muted); }
.new-chat { background: #8d70e3; border:1px solid #a389f8; border-radius:12px; min-height:44px; display:flex; align-items:center; gap:8px; padding:0 11px; font-weight:650; color:#fff!important; width:100%; box-shadow: 0 8px 22px #7458cb2b; transition:background .2s, transform .2s; }
.new-chat:hover { background: #a68bec; transform:translateY(-1px); }
.new-chat>span:first-child { font-size:25px; font-weight:300; line-height:1; }
.keycap { margin-left:auto; color:#e6dafa; font-size:10px; border:1px solid #bea4ef91; padding:3px 5px; border-radius:5px; white-space:nowrap; }
.search-box { display:flex; margin-top:16px; padding:0 11px; height:39px; align-items:center; gap:9px; border:1px solid var(--line); border-radius:10px; background:var(--field); }
.search-box svg { width:15px; height:15px; color:var(--muted); }
.search-box input { min-width:0; width:100%; outline:0; background:transparent; color:var(--text); border:0; font-size:12px; }
.search-box input::placeholder { color:var(--muted); }
.history-heading { padding:31px 10px 13px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:1.35px; display:flex; justify-content:space-between; }
.history-heading span { border:1px solid var(--line); padding:1px 5px; border-radius:5px; }
.history { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#59536c transparent; padding:0 1px; }
.history-empty { color:var(--muted); padding:20px 12px; font-size:12px; line-height:1.6; }
.history-item { display:flex; width:100%; align-items:center; gap:3px; border-radius:9px; padding:3px; margin:2px 0; }
.history-item.active { background:var(--soft-accent); }
.chat-nav { display:flex; align-items:center; min-width:0; flex:1; gap:10px; padding:9px 7px; border:0; text-align:left; background:transparent; color:var(--sub)!important; font-size:12px; }
.history-item.active .chat-nav { color:var(--text)!important; font-weight:650; }
.chat-nav svg { width:15px; height:15px; flex:none; color:var(--muted); }
.chat-title { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.chat-nav:hover { color:var(--text)!important; }
.chat-delete { opacity:0; border:0; border-radius:7px; background:transparent; font-size:14px; padding:4px 6px; color:var(--muted)!important; }
.history-item:hover .chat-delete, .history-item.active .chat-delete, .chat-delete:focus-visible { opacity:1; }
.chat-delete:hover { color:#ff8b96!important; background:#e7546424; }
.sidebar-footer { margin-top:12px; padding:15px 7px 0; border-top:1px solid var(--line); }
.side-info { color:var(--sub); font-size:11px; display:flex; gap:8px; align-items:center; padding:6px 5px 18px; }
.status-light, .pulse-dot { width:7px; height:7px; flex:none; background:#73d9aa; border-radius:50%; box-shadow:0 0 0 3px #73d9aa16; }
.sidebar-bottom { display:flex; gap:12px; }
.side-action { flex:1; display:flex; gap:9px; align-items:center; justify-content:center; text-decoration:none; font-size:12px; background:transparent; border:1px solid var(--line); padding:11px 5px; border-radius:9px; color:var(--sub)!important; }
.side-action:hover { color:var(--text)!important; background:var(--field); }
.side-action>span:first-child, .side-action:first-letter { font-size:16px; }
.mini-foot { text-align:center; color:var(--muted); font-size:10px; margin-top:19px; }
.main-panel { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; position:relative; background:radial-gradient(ellipse 42% 33% at 51% 45%, #5541760a, transparent 99%),var(--bg); }
.topbar { height:77px; min-height:77px; display:flex; justify-content:space-between; align-items:center; padding:0 32px; border-bottom:1px solid var(--line); background:var(--bg); gap:10px; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:17px; min-width:0; }
.topbar-title { display:flex; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:var(--muted); }
.topbar-title strong { color:var(--text); font-size:14px; }
#topbar-chat-name { overflow:hidden; text-overflow:ellipsis; }
.model-chip { border:1px solid var(--line); color:var(--sub); display:flex; gap:10px; align-items:center; border-radius:50px; padding:9px 14px; font-size:11px; white-space:nowrap; }
.top-btn { border:1px solid var(--line); background:var(--surface); border-radius:9px; display:flex; gap:7px; align-items:center; padding:9px 12px; font-size:12px; }
.top-btn svg { width:16px; height:16px; }
.top-btn:hover { border-color:var(--accent); }
.icon-btn { background:transparent; border:0; border-radius:8px; padding:7px; display:inline-grid; place-items:center; }
.mobile-menu, .close-mobile, .mobile-shade { display:none; }
.conversation-viewport { flex:1; overflow:auto; min-height:0; scrollbar-width:thin; scrollbar-color:#77728a44 transparent; }
.welcome { max-width:800px; min-height:100%; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:42px 28px 20px; }
.welcome-mark { font-size:40px; display:grid; place-items:center; color:#c4a5ff; height:72px; width:72px; border:1px solid #a47cf276; border-radius:22px; margin-bottom:28px; background:radial-gradient(circle at 36% 18%,#b093f752,#543f872a); box-shadow:0 0 55px #a27bea1c; transform:rotate(-6deg); }
.eyebrow { font-size:10px; letter-spacing:2px; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:9px; margin-bottom:15px; }
.eyebrow-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; }
.welcome h1 { margin:0; letter-spacing:-2.5px; line-height:1.07; font-size:clamp(39px,5vw,62px); font-weight:750; }
.welcome h1 em { font-style:normal; background:linear-gradient(95deg,#c4a7ff,#9972ec 40%,#cc9cc7); background-clip:text; color:transparent; }
.welcome p { color:var(--sub); line-height:1.7; font-size:14px; margin:20px 0 40px; }
.prompt-grid { width:100%; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.suggestion { text-align:left; display:flex; align-items:center; gap:12px; min-width:0; padding:17px 15px; background:var(--surface); border:1px solid var(--line); border-radius:13px; transition:transform .18s,border .18s; }
.suggestion:hover { border-color:#9c79e8; transform:translateY(-2px); }
.suggestion-icon { flex:none; height:39px; width:39px; border-radius:11px; display:grid; place-items:center; font-size:21px; }
.suggestion-icon.lavender { background:#9772e82a; color:#b99df7; }
.suggestion-icon.gold { background:#d0a75b29; color:#e5b668; }
.suggestion-icon.blue { background:#548fde2b; color:#8dbaff; }
.suggestion-icon.mint { background:#50bca128; color:#75daba; }
.suggestion strong,.suggestion small { display:block; }
.suggestion strong { font-size:12px; margin-bottom:5px; }
.suggestion small { color:var(--muted); font-size:11px; }
.prompt-arrow { align-self:start; margin-left:auto; color:var(--muted); }
.messages { width:100%; max-width:900px; padding:38px 30px 65px; margin:0 auto; }
.message { display:flex; gap:14px; margin-bottom:30px; align-items:flex-start; }
.message.is-user { flex-direction:row-reverse; }
.avatar { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:19px; }
.avatar.assistant { background:linear-gradient(140deg,#a186ed,#6651bb); color:white; }
.avatar.user { background:var(--soft-accent); color:var(--accent); border:1px solid var(--line); font-weight:700; }
.message-main { min-width:0; max-width:min(100%,745px); }
.is-user .message-main { max-width:min(86%,680px); }
.message-meta { font-size:11px; font-weight:700; margin:0 0 10px; }
.is-user .message-meta { text-align:right; }
.message-content { overflow-wrap:anywhere; font-size:14px; line-height:1.8; color:var(--text); }
.is-user .message-content { padding:12px 17px; background:var(--user); border:1px solid #9676d52c; border-radius:14px 3px 14px 14px; white-space:pre-wrap; }
.message-content p { margin:0 0 11px; }
.message-content p:last-child { margin-bottom:0; }
.message-content h2,.message-content h3 { font-size:15px; line-height:1.5; margin:18px 0 8px; }
.message-content strong { font-weight:740; }
.message-content ul { padding-left:23px; }
.message-content li { margin:5px 0; }
.message-content a { color:var(--accent); }
.message-content code { padding:2px 5px; background:var(--field); border-radius:4px; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.message-content pre { margin:13px 0; padding:17px; background:#090b12; border:1px solid #38394a; border-radius:11px; overflow-x:auto; color:#e9e6fa; }
.message-content pre code { background:transparent; padding:0; color:inherit; }
.message-actions { margin-top:11px; display:flex; gap:6px; }
.small-action { font-size:11px; color:var(--muted)!important; background:transparent; border:1px solid transparent; border-radius:7px; padding:4px 7px; }
.small-action:hover { border-color:var(--line); color:var(--text)!important; }
.typing { display:flex; align-items:center; gap:5px; min-height:23px; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:typing 1.3s infinite; }
.typing i:nth-child(2) { animation-delay:.2s; }.typing i:nth-child(3) { animation-delay:.4s; }
@keyframes typing { 0%,55%,100% { transform:translateY(0);opacity:.35; } 28% { transform:translateY(-4px);opacity:1; } }
.composer-zone { width:min(900px,100%); margin:0 auto; flex:none; padding:12px 30px 21px; }
.composer { border:1px solid #57516d; background:var(--surface); border-radius:15px; box-shadow:var(--shadow); padding:12px 14px 10px; }
.composer:focus-within { border-color:#9977db; box-shadow:0 0 0 2px #9c7ef12a,var(--shadow); }
.composer textarea { background:transparent; border:0; resize:none; outline:0; width:100%; min-height:41px; max-height:195px; padding:9px 4px 6px; color:var(--text); font-size:14px; line-height:1.55; overflow-y:auto; display:block; }
.composer textarea::placeholder { color:var(--muted); }
.compose-controls, .compose-left,.compose-right { display:flex; align-items:center; }
.compose-controls { justify-content:space-between; }
.compose-left { color:var(--muted); font-size:10px; gap:8px; }
.compose-sparkle { color:#b79afa; font-size:16px; }
.separator { background:var(--line); width:1px; height:12px; margin:0 4px; }
.compose-right { gap:15px; }
.enter-hint { color:var(--muted); font-size:10px; }
.send-button,.stop-button { height:36px; width:36px; border:0; background:#9877ec; color:#fff!important; display:grid; place-items:center; border-radius:10px; }
.send-button:hover,.stop-button:hover { background:#ab8cff; }
.send-button:disabled { opacity:.4; cursor:not-allowed; }
.stop-button { background:#a65369; font-size:14px; }
.send-button svg { width:19px; height:19px; stroke-width:2.3; }
.footer-hint { text-align:center; color:var(--muted); font-size:10px; line-height:1.6; margin:12px 0 0; }
.notice { border:1px solid var(--line); background:var(--soft-accent); margin-bottom:11px; padding:10px 13px; border-radius:9px; color:var(--sub); font-size:12px; }
.notice a { color:var(--accent); }
.toast { position:absolute; right:22px; bottom:130px; pointer-events:none; z-index:55; color:#fff; background:#3f355f; padding:10px 15px; border:1px solid #8d70d0; border-radius:10px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:opacity .2s,transform .2s; }
.toast.visible { opacity:1; transform:translateY(0); }
[hidden] { display:none!important; }
@media(max-height:740px) and (min-width:701px){ .welcome { padding-top:28px; padding-bottom:25px; } .welcome-mark { width:58px;height:58px;margin-bottom:16px; } .welcome p { margin:13px 0 22px; } .suggestion { padding:12px 14px; } }
@media(max-width:850px) { .sidebar { width:240px; min-width:240px; } .keycap { display:none; } .topbar { padding:0 20px; } .model-chip { font-size:10px; } .welcome h1 { font-size:43px; } }
@media(max-width:700px) {
  body.admin-bar .cree8-shell { height:calc(100dvh - 46px); min-height:calc(100vh - 46px); }
  .sidebar { position:absolute; height:100%; left:0; top:0; transform:translateX(-105%); transition:transform .22s; width:292px; min-width:292px; box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .mobile-shade { display:none; position:absolute; inset:0; z-index:30; background:#020209b8; }
  .mobile-shade.open { display:block; }
  .close-mobile,.mobile-menu { display:inline-grid; }
  .close-mobile { margin-left:auto; }
  .topbar { height:62px; min-height:62px; padding:0 15px; }
  .topbar-left,.topbar-right { gap:9px; }
  .topbar-title { font-size:11px; }
  .topbar-title strong { font-size:12px; }
  .topbar-title span:last-child { max-width:100px; }
  .top-btn { padding:8px; }
  .top-btn span { display:none; }
  .model-chip { padding:7px 9px; font-size:9px; }
  .model-chip .pulse-dot { display:none; }
  .welcome { padding:28px 18px; justify-content:center; }
  .welcome-mark { width:55px; height:55px; font-size:33px; margin-bottom:23px; }
  .eyebrow { font-size:9px; letter-spacing:1.2px; }
  .welcome h1 { font-size:clamp(33px,9vw,47px); letter-spacing:-1.65px; }
  .welcome p { font-size:12px; margin:17px 0 28px; }
  .prompt-grid { gap:9px; }
  .suggestion { padding:12px 10px; gap:8px; align-items:flex-start; }
  .suggestion-icon { width:29px; height:29px; font-size:17px; border-radius:8px; }
  .suggestion strong { font-size:11px; }
  .suggestion small { font-size:9px; }
  .prompt-arrow { display:none; }
  .messages { padding:24px 13px 40px; }
  .message { gap:9px; margin-bottom:21px; }
  .avatar { height:29px; width:29px; font-size:16px; }
  .message-content { font-size:13px; }
  .is-user .message-main { max-width:90%; }
  .composer-zone { padding:8px 11px 12px; }
  .composer { padding:7px 11px 7px; }
  .composer textarea { min-height:34px; }
  .footer-hint { font-size:9px; margin:8px 0 0; }
  .footer-hint span,.desktop-only { display:none; }
}
@media(max-width:400px){ .topbar-title span:last-child { display:none; } .topbar-title span:nth-child(2) { display:none; } .model-chip { font-size:8px; } }
/* Version 1.1 — user account screens (light and dark aware) */
.sidebar-account { margin-top:auto; padding:12px 7px 8px; border-top:1px solid var(--line); }
.account-caption { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1.3px; padding:0 8px 9px; }
.account-launch { display:flex; width:100%; align-items:center; gap:9px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; font-weight:650; font-size:11px; }
.account-launch:hover { border-color:var(--accent); }
.account-launch>span:nth-child(2) { flex:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.account-launch>span:last-child { color:var(--accent); font-size:21px; }
.account-bubble { height:32px; width:32px; border-radius:10px; background:var(--soft-accent); color:var(--accent); display:grid; place-items:center; font-size:17px; }
.sidebar-footer { margin-top:8px; }
.account-top { font-weight:650; white-space:nowrap; color:var(--accent)!important; }
.notice button { background:none; padding:0 3px; color:var(--accent); border:0; text-decoration:underline; font-size:inherit; font-weight:700; }
.auth-is-open { overflow:hidden; }
.auth-overlay { position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px 14px; }
.auth-backdrop { position:absolute; inset:0; background:#080712cd; backdrop-filter:blur(7px); }
.auth-dialog { position:relative; z-index:1; max-width:445px; width:100%; max-height:min(92dvh,850px); overflow-y:auto; border-radius:21px; border:1px solid var(--line); color:var(--text); background:var(--surface); box-shadow:0 32px 95px #0008; padding:28px 31px 22px; scrollbar-width:thin; }
.auth-dialog-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.auth-brand-icon { height:44px; width:44px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(140deg,#b79aff,#7555d5); font-size:24px; color:white; }
.auth-close { border:1px solid var(--line); border-radius:9px; background:var(--field); height:34px; width:34px; font-size:24px; display:grid; place-items:center; }
.auth-dialog h2 { font-size:26px; letter-spacing:-.8px; margin:0 0 8px; }
.auth-subtitle { font-size:13px; color:var(--sub); line-height:1.55; margin:0 0 22px; }
.auth-form { display:flex; flex-direction:column; gap:15px; }
.auth-form>label { font-size:12px; color:var(--sub); font-weight:650; display:flex; flex-direction:column; gap:7px; }
.auth-form>label>input:not([type=checkbox]) { width:100%; border:1px solid var(--line); background:var(--field); color:var(--text); border-radius:10px; padding:12px 13px; font-size:13px; outline:none; min-height:44px; }
.auth-form>label>input:focus { border-color:var(--accent); }
.auth-form .auth-check { flex-direction:row; align-items:flex-start; font-size:11px; font-weight:400; line-height:1.5; }
.auth-check input { flex:none; accent-color:#9772e8; margin:2px 4px 0 0; }
.auth-check span { color:var(--sub); }
.auth-primary { width:100%; min-height:44px; margin-top:4px; border:0; border-radius:10px; background:linear-gradient(110deg,#956feb,#8261d3); color:#fff!important; font-weight:750; font-size:13px; }
.auth-primary:hover { filter:brightness(1.12); }
.auth-primary:disabled { opacity:.58; cursor:wait; }
.auth-links { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:19px; color:var(--sub); font-size:12px; }
.auth-links button { border:0; background:none; padding:2px; color:var(--accent); font-weight:700; font-size:12px; }
.auth-links button:hover { text-decoration:underline; }
.auth-privacy { margin:-5px 0 0; font-size:11px; }
.auth-privacy a { color:var(--accent); }
.auth-bottom { text-align:center; font-size:10px; color:var(--muted); margin-top:25px; border-top:1px solid var(--line); padding-top:17px; }
.auth-feedback { color:#88e1b3; background:#54c78f14; border:1px solid #68cb9570; padding:11px 13px; line-height:1.6; font-size:12px; border-radius:10px; margin:0 0 16px; }
.auth-feedback.error { color:#ffadb7; background:#cc4c611c; border-color:#db5b7377; }
.cree8-shell[data-theme="light"] .auth-feedback.error { color:#9a2940; }
.cree8-shell[data-theme="light"] .auth-feedback { color:#257347; }
.auth-intro { color:var(--sub); font-size:12px; line-height:1.6; margin-bottom:17px; }
.account-profile { display:flex; gap:13px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:13px; }
.account-profile-icon { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; background:#8764d8; font-size:21px; }
.account-profile strong, .account-profile small { display:block; }
.account-profile strong { font-size:14px; margin-bottom:5px; }
.account-profile small { font-size:12px; color:var(--sub); overflow-wrap:anywhere; }
.account-verify { margin:14px 0 2px; color:var(--sub); background:var(--soft-accent); border:1px solid var(--line); border-radius:10px; padding:12px; font-size:12px; }
.auth-account-links { margin:13px 0; }
.auth-signout { background:transparent; border:1px solid var(--line); color:var(--text)!important; margin-top:11px; }
@media(max-width:700px){.auth-dialog{padding:23px 21px 19px; border-radius:16px;}.auth-overlay{align-items:center;}.account-top{padding:7px 8px; font-size:11px;}.auth-dialog h2{font-size:22px;}}
@media(max-height:570px){.auth-overlay{align-items:flex-start;}.auth-dialog{max-height:calc(100dvh - 25px);}}