/* Design tokens */
:root {
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif: Georgia,"Times New Roman",serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

[data-theme=light] {
  --bg: #FAF9F5;
  --side: #F3F1EA;
  --panel: #FFFFFF;
  --line: #E7E4DA;
  --hover: #ECE9DF;
  --ink: #1F1E1D;
  --mute: #77746C;
  --acc: #C2603E;
  --accink: #FFFFFF;
  --user: #EFECE3;
  --code: #F3F1EA;
  --danger: #B42318;
  color-scheme: light;
}

[data-theme=dark] {
  --bg: #262624;
  --side: #1F1E1D;
  --panel: #30302E;
  --line: #3E3D3A;
  --hover: #353431;
  --ink: #ECEAE4;
  --mute: #A19E96;
  --acc: #D97757;
  --accink: #1F1E1D;
  --user: #353431;
  --code: #1F1E1D;
  --danger: #F97066;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

html,
body {
  height: 100%;
}

body {
  font: 15px/1.7 var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}


/* Layout and sidebar */
.app {
  display: flex;
  height: 100dvh;
}

.side {
  width: 272px;
  flex: none;
  background: var(--side);
  display: flex;
  flex-direction: column;
  transition: margin-left .35s ease,transform .35s ease;
  z-index: 30;
}

.app.collapsed .side {
  margin-left: -272px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 18px 6px;
  font: 600 18px var(--serif);
  letter-spacing: .01em;
}

.logo {
  display: grid;
  place-items: center;
  color: var(--acc);
}

.btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 500;
  transition: background .2s;
}

.btn:hover {
  background: var(--hover);
}

.btn.primary {
  color: var(--ink);
}

.btn.primary .ic {
  color: var(--acc);
}

.btn.danger {
  color: var(--danger);
  border: 1px solid var(--line);
}

.btn.newchat {
  width: auto;
  margin: 12px 12px 6px;
  padding: 10px 14px;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  font-weight: 500;
  transition: border-color .2s, box-shadow .2s;
}

.btn.newchat .ic {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--accink);
}

.btn.newchat:hover {
  background: var(--panel);
  border-color: var(--mute);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 4px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--mute);
}

.search:focus-within {
  background: var(--hover);
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
}

.sec {
  padding: 16px 20px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}

.modes {
  display: grid;
  gap: 1px;
  padding: 0 10px;
}

.mode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--mute);
  text-align: left;
  transition: background .2s,color .2s;
}

.mode:hover {
  background: var(--hover);
  color: var(--ink);
}

.mode.on {
  background: var(--hover);
  color: var(--ink);
}

.list {
  flex: 1;
  overflow: auto;
  padding: 2px 10px;
}

.item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s;
}

.item .ic:first-child {
  display: none;
}

.item:hover,
.item.on {
  background: var(--hover);
}

.item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .del {
  opacity: 0;
  padding: 3px;
  border-radius: 6px;
  color: var(--mute);
}

.item:hover .del,
.item .del:focus-visible {
  opacity: 1;
}

.item .del:hover {
  color: var(--danger);
}

.empty-list {
  padding: 10px;
  color: var(--mute);
  font-size: 13px;
}

.foot {
  padding: 10px;
}

.scrim {
  display: none;
}

/* Main area and top bar */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
}

.sq {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--mute);
  transition: background .2s,color .2s;
}

.sq:hover {
  background: var(--hover);
  color: var(--ink);
}

#menuBtn {
  color: var(--ink);
}

.title {
  flex: 1;
  font-weight: 500;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}

.chat {
  flex: 1;
  overflow: auto;
  scroll-behavior: smooth;
}

.col {
  max-width: 740px;
  margin: 0 auto;
  padding: 24px 20px 12px;
}

/* Home screen */
.hero {
  text-align: center;
  padding: 12vh 0 20px;
}

.hero .logo {
  margin: 0 auto 14px;
}

.hero .logo .ic {
  width: 34px;
  height: 34px;
}

.hero h1 {
  font: 400 clamp(26px,4vw,34px)/1.25 var(--serif);
  letter-spacing: -.01em;
}

.hero p {
  color: var(--mute);
  margin-top: 8px;
}

.sug {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.sug button {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mute);
  transition: background .2s,color .2s;
}

.sug button:hover {
  background: var(--hover);
  color: var(--ink);
}

.sug .ic {
  width: 16px;
  height: 16px;
}

.sug small {
  display: none;
}

.sug b {
  font-weight: 500;
}

/* Messages */
.msg {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
}

.msg.user {
  justify-content: flex-end;
}

.msg .av {
  width: 24px;
  display: grid;
  place-items: start center;
  flex: none;
  color: var(--acc);
  padding-top: 3px;
}

.msg .av .ic {
  width: 20px;
  height: 20px;
}

.msg .body {
  min-width: 0;
  max-width: 100%;
}

.msg.user .body {
  background: var(--user);
  padding: 10px 16px;
  border-radius: 18px;
  max-width: 85%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.body p,
.body ul,
.body ol {
  margin: 0 0 14px;
}

.body>*:last-child {
  margin-bottom: 0;
}

.body ul,
.body ol {
  padding-left: 24px;
}

.body li {
  margin: 4px 0;
}

.body strong {
  font-weight: 600;
}

.body h1,
.body h2,
.body h3,
.body h4,
.body h5,
.body h6 {
  margin: 22px 0 8px;
  line-height: 1.3;
  font-weight: 600;
}

.body h1 {
  font-size: 1.5em;
}

.body h2 {
  font-size: 1.3em;
}

.body h3 {
  font-size: 1.12em;
}

.body h4,
.body h5,
.body h6 {
  font-size: 1em;
}

.body a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-color: var(--mute);
}

.body a:hover {
  color: var(--acc);
}

.body code {
  font: 13px var(--mono);
  background: var(--hover);
  padding: 2px 6px;
  border-radius: 6px;
}

.code {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--code);
}

.code-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px 5px 14px;
  color: var(--mute);
  font: 12px var(--mono);
}

.code-h button {
  padding: 4px 8px;
  border-radius: 6px;
  font: 12px var(--font);
  color: var(--mute);
}

.code-h button:hover {
  background: var(--hover);
  color: var(--ink);
}

.code pre {
  padding: 4px 14px 14px;
  overflow: auto;
  line-height: 1.6;
}

.code code {
  background: none;
  padding: 0;
}

.body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

.body ul ul,
.body ol ul,
.body ul ol,
.body ol ol {
  margin: 4px 0;
}

.body li>p {
  margin: 0;
}

.body blockquote {
  border-left: 2px solid var(--line);
  padding: 2px 14px;
  color: var(--mute);
  margin: 0 0 14px;
}

.body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 14px;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.body th,
.body td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.body th {
  background: var(--hover);
  font-weight: 600;
}

.err {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 10px;
  font-size: 14px;
}

.typing {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mute);
  animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: .25;
    transform: scale(.7);
  }
}

/* Message box */
.composer {
  padding: 6px 16px 14px;
}

.box {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: border-color .2s;
}

.box:focus-within {
  border-color: var(--mute);
}

.box textarea {
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: none;
  max-height: 200px;
  padding: 7px 0;
  line-height: 1.5;
}

.box textarea::placeholder {
  color: var(--mute);
}

.send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--accink);
  display: grid;
  place-items: center;
  flex: none;
  transition: filter .2s;
}

.send:hover {
  filter: brightness(1.1);
}

.note {
  text-align: center;
  color: var(--mute);
  font-size: 12px;
  margin-top: 8px;
}

/* Settings dialog */
dialog {
  margin: auto;
  width: min(500px,calc(100% - 24px));
  max-height: 90dvh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  overflow: auto;
}

dialog::backdrop {
  background: rgba(20,18,15,.45);
}

.dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
}

.dh h2 {
  font: 600 18px var(--serif);
}

.db {
  padding: 4px 18px 20px;
  display: grid;
  gap: 20px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
}

.field select:focus,
.field textarea:focus {
  border-color: var(--mute);
}

.field input[type=range] {
  accent-color: var(--acc);
  width: 100%;
}

.seg {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.seg button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 9px;
  color: var(--mute);
  transition: background .25s,color .25s;
}

.seg button.on {
  background: var(--hover);
  color: var(--ink);
}

/* Responsive (tablet and phone) */
@media (max-width: 700px), (max-height: 500px) and (max-width: 950px) {
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    width: min(300px,86vw);
  }
  .app.collapsed .side {
    margin-left: 0;
  }
  .app.open .side {
    transform: none;
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20,18,15,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
    z-index: 20;
  }
  .app.open .scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .hero {
    padding-top: 8vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none!important;
    animation: none!important;
  }
}
/* KERU brand refresh: midnight + electric blue */
[data-theme=light] { --bg:#f7f9ff; --side:#eef2fc; --panel:#fff; --line:#dfe5f3; --hover:#e7edfb; --ink:#111827; --mute:#69758b; --acc:#356bff; --accink:#fff; --user:#e8efff; --code:#f1f4fb; --danger:#c43232; color-scheme:light; }
[data-theme=dark] { --bg:#080a10; --side:#0d111b; --panel:#111724; --line:#242c3d; --hover:#171f30; --ink:#f4f7ff; --mute:#9ba7bd; --acc:#356bff; --accink:#fff; --user:#151d2c; --code:#0d111b; --danger:#ff7777; color-scheme:dark; }
body { background:var(--bg); }
.brand { font-family:var(--font); font-weight:750; letter-spacing:.13em; font-size:17px; }
.brand-logo { width:22px; height:22px; display:block; }
.btn.newchat { background:linear-gradient(135deg,#356bff,#2454e8); color:#fff; border-color:#356bff; }
.btn.newchat .ic { background:rgba(255,255,255,.18); color:#fff; }
.btn.newchat:hover { background:linear-gradient(135deg,#4c7cff,#356bff); border-color:#4c7cff; }
.mode.on { background:rgba(53,107,255,.16); color:var(--ink); }
.mode.on .ic,.btn.primary .ic { color:#5684ff; }
.sug button:hover { border-color:rgba(53,107,255,.55); }
.send { background:#356bff!important; color:#fff!important; border-radius:12px!important; }
.send:hover { background:#4d7cff!important; }
:focus-visible { outline-color:#5684ff; }
.hero { padding-top:9vh; }
.hero-logo { width:48px; height:48px; object-fit:contain; margin:0 auto 18px; display:block; filter:drop-shadow(0 8px 24px rgba(53,107,255,.15)); }
.hero h1 { font-family:var(--font); font-weight:650; letter-spacing:-.04em; }
/* Five-second branded opening */
.intro { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:#05070c; color:#111; animation:intro-light 1.15s cubic-bezier(.22,.7,.2,1) 1.25s forwards; }
.intro-inner { display:flex; flex-direction:column; align-items:center; gap:14px; }
.intro-logo { width:clamp(88px,13vw,132px); height:auto; overflow:visible; }
.intro-bar { opacity:0; transform:translateY(-18px); animation:bar-drop .65s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-bar-bottom { animation-delay:.18s; } .intro-bar-middle { animation-delay:.62s; } .intro-bar-top { animation-delay:1.06s; }
@keyframes bar-drop { 0%{opacity:0;transform:translateY(-22px)} 65%{opacity:1;transform:translateY(3px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes intro-light { to { background:#fff; } }
.intro-word { color:#f4f7ff; animation:word-reveal .45s ease 1.45s forwards; font:750 clamp(21px,3vw,28px)/1 var(--font); letter-spacing:.18em; opacity:0; transform:translateY(5px);  }
.intro-loader { width:92px; height:2px; background:#242c3d; border-radius:9px; overflow:hidden; opacity:0; animation:loader-show .2s ease .2s forwards; }
.intro-loader span { display:block; width:35%; height:100%; border-radius:9px; background:#356bff; animation:loader-run 1s ease-in-out infinite; }
.intro-out { opacity:0; visibility:hidden; transition:opacity .45s ease,visibility .45s; pointer-events:none; }
@keyframes logo-breathe { 0%,100% { transform:translateY(0) scale(1); opacity:.92; } 50% { transform:translateY(-3px) scale(1.035); opacity:1; } }
@keyframes word-reveal { to { opacity:1; transform:translateY(0); } }
@keyframes loader-show { to { opacity:1; } }
@keyframes loader-run { from { transform:translateX(-110%); } to { transform:translateX(400%); } }
/* Sign-in screen */
.auth-screen { position:fixed; inset:0; z-index:100; overflow:auto; display:grid; place-items:center; padding:28px 16px; background:radial-gradient(ellipse at 50% 0%,rgba(53,107,255,.14),transparent 45%),#080a10; color:#f4f7ff; }
.auth-screen[hidden] { display:none; }
.auth-card { width:min(100%,420px); padding:34px; border:1px solid #242c3d; border-radius:24px; background:rgba(13,17,27,.94); box-shadow:0 24px 90px rgba(0,0,0,.32); }
.auth-logo { width:36px; height:36px; object-fit:contain; margin-bottom:20px; }
.eyebrow { color:#7fa0ff; font-size:10px; font-weight:800; letter-spacing:.2em; margin-bottom:10px; }
.auth-card h1 { font:700 clamp(25px,5vw,32px)/1.2 var(--font); letter-spacing:-.04em; }
.auth-card h1 span { color:#6d91ff; }
.auth-subtitle { color:#9ba7bd; margin:10px 0 24px; font-size:14px; }
.auth-form { display:grid; gap:9px; }
.auth-form label,.account-menu label { color:#c2ccdf; font-size:12px; font-weight:600; }
.auth-form input { width:100%; min-width:0; padding:12px 13px; color:#f4f7ff; background:#080c14; border:1px solid #2a3448; border-radius:10px; outline:none; margin-bottom:6px; }
.auth-form input:focus { border-color:#5684ff; box-shadow:0 0 0 3px rgba(53,107,255,.15); }
.auth-primary,.auth-provider { width:100%; min-height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:650; }
.auth-primary { background:#356bff; color:white; margin-top:5px; }
.auth-primary:hover { background:#4b7cff; }
.auth-primary:disabled,.auth-provider:disabled { opacity:.55; cursor:wait; }
.auth-link { color:#8ca8ff; font-size:13px; padding:5px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:#8793a9; font-size:11px; }
.auth-divider:before,.auth-divider:after { content:""; height:1px; background:#283145; flex:1; }
.auth-provider { background:#111724; border:1px solid #2a3448; margin-top:9px; color:#f4f7ff; }
.auth-provider:hover { border-color:#52658b; background:#151e2f; }
.google-g { color:#4285f4; font-size:20px; font-weight:800; }
.apple-mark { font-size:16px; color:white; }
.auth-error { color:#ff9999; font-size:12px; line-height:1.5; margin-top:12px; min-height:16px; }
.auth-legal { color:#748098; font-size:10px; line-height:1.5; text-align:center; margin-top:18px; }
.account-panel { position:relative; display:flex; align-items:center; gap:9px; padding:10px 8px; margin-top:8px; border:1px solid var(--line); border-radius:12px; min-width:0; }
.account-avatar { width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; background:#356bff; color:#fff; font-weight:700; background-size:cover; background-position:center; }
.account-avatar.has-photo { color:transparent; }
.account-meta { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.4; }
.account-meta strong { font-size:12px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-meta span { color:var(--mute); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-more { color:var(--mute); padding:4px; font-size:20px; line-height:1; }
.account-menu { position:absolute; left:0; right:0; bottom:calc(100% + 8px); padding:12px; display:grid; gap:8px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 14px 40px #0004; z-index:50; }
.account-menu[hidden] { display:none; }
.account-menu select { width:100%; padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--bg); }
.account-menu button { padding:9px; border-radius:8px; text-align:left; color:var(--danger); }
.account-menu button:hover { background:var(--hover); }
.quota-line { display:flex; justify-content:space-between; gap:8px; margin:12px 5px 5px; color:var(--mute); font-size:10px; }
.quota-track { height:3px; margin:0 5px 3px; border-radius:8px; overflow:hidden; background:var(--line); }
.quota-track span { display:block; height:100%; width:100%; background:#356bff; transition:width .25s; }
@media(max-width:520px) { .auth-card { padding:26px 21px; border-radius:19px; } .hero { padding-top:5vh; } }
/* Compact, restrained KERU identity and response states */
.hero-brand-mark { width:34px; height:34px; margin:0 auto 18px; display:grid; place-items:center; background:transparent; }
.hero-brand-mark img { display:block; width:30px; height:30px; object-fit:contain; }
.keru-avatar { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; margin-top:2px; }
.keru-avatar img { display:block; width:24px; height:24px; object-fit:contain; }
.keru-avatar.thinking img { animation:keru-think 1.05s cubic-bezier(.4,0,.2,1) infinite; }
.keru-avatar.speaking img { animation:keru-reply 1.25s ease-in-out infinite; }
@keyframes keru-think { 0% { transform:rotate(0) scale(.9); opacity:.72; } 70% { transform:rotate(300deg) scale(1.04); opacity:1; } 100% { transform:rotate(360deg) scale(.9); opacity:.85; } }
@keyframes keru-reply { 0%,100% { transform:translateY(0) scale(1); } 45% { transform:translateY(-3px) scale(1.07); } 70% { transform:translateY(0) scale(.98); } }
.assistant-msg .body { min-width:0; }
@media(prefers-reduced-motion:reduce) { .intro-logo,.keru-avatar img { animation:none!important; } .intro-word,.intro-loader { opacity:1; animation:none; } .intro-loader span { animation:none; } }


/* KERU launch polish: logo assembly, purposeful motion, solid tactile controls */
:root { --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.2,.85,.25,1.25); }
html { scroll-behavior: smooth; }
body, .side, .top, .composer, .box, .btn, .sq, .send, .mode, .item, .sug button,
.auth-card, .auth-provider, .auth-primary, dialog, .field input, .field select, .field textarea {
  transition: background-color .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s var(--ease-out), opacity .24s ease;
}
/* Intro is intentionally logo-only. Three bars land bottom, middle, then top. */
.intro { background:#080a10; color:#f4f7ff; animation:intro-background 1.65s ease 1.25s forwards; }
.intro-inner { width:clamp(82px,11vw,112px); aspect-ratio:1; display:grid; place-items:center; }
.intro-logo { width:100%; height:auto; overflow:visible; animation:logo-complete 2.05s ease-in-out 1.05s infinite; }
.intro-logo .logo-bar { transform-box:fill-box; transform-origin:center; opacity:0; }
.intro-logo .logo-bottom { animation:bar-land .48s var(--ease-spring) .12s forwards; }
.intro-logo .logo-middle { animation:bar-land .48s var(--ease-spring) .43s forwards; }
.intro-logo .logo-top { animation:bar-land .48s var(--ease-spring) .74s forwards; }
.intro-out { opacity:0; visibility:hidden; transition:opacity .42s ease,visibility .42s; pointer-events:none; }
@keyframes bar-land { 0% { opacity:0; transform:translateY(-42px) scale(.88,.8); } 68% { opacity:1; transform:translateY(4px) scale(1.025,1.08); } 84% { transform:translateY(-2px) scale(.995,.98); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes logo-complete { 0%,100% { filter:drop-shadow(0 0 0 rgba(53,107,255,0)); } 50% { filter:drop-shadow(0 0 18px rgba(53,107,255,.32)); } }
@keyframes intro-background { 0% { background:#080a10; } 55% { background:#f7f9ff; } 100% { background:var(--bg); } }
/* More confident controls: solid surfaces, minimal translucency. */
.btn, .sq, .mode, .item, .sug button, .auth-provider, .auth-primary, .field select, .field textarea,
.field input:not([type=range]), .account-menu, .box { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
.btn { border-radius:11px; }
.sq { border-radius:11px; }
.sq:hover, .btn:not(:disabled):hover { transform:translateY(-1px); }
.sq:active, .btn:not(:disabled):active, .send:active, .sug button:active { transform:scale(.97); }
.sq:hover { background:var(--hover); }
.item { border:1px solid transparent; }
.item:hover { transform:translateX(2px); }
.mode, .sug button { border:1px solid var(--line); }
.sug button { background:var(--panel); box-shadow:0 2px 5px rgba(0,0,0,.025); }
.sug button:hover { transform:translateY(-3px); box-shadow:0 9px 22px rgba(13,30,70,.08); }
.send { box-shadow:0 3px 9px rgba(53,107,255,.2); transition:transform .2s var(--ease-spring),background-color .2s,box-shadow .2s; }
.send:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(53,107,255,.28); }
.box:focus-within { box-shadow:0 0 0 3px rgba(53,107,255,.09),0 8px 26px rgba(0,0,0,.05); }
.auth-card { animation:card-enter .55s var(--ease-out) both; }
.auth-primary, .auth-provider { transition:transform .2s var(--ease-out),background-color .2s,border-color .2s,box-shadow .2s; }
.auth-primary:hover, .auth-provider:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.msg { animation:message-enter .32s var(--ease-out) both; }
.assistant-msg .body { animation:response-enter .36s var(--ease-out) both; }
.keru-avatar img { transition:filter .25s ease; }
.keru-avatar.thinking img { filter:drop-shadow(0 0 6px rgba(53,107,255,.28)); }
.hero-brand-mark img { animation:hero-mark-enter .65s var(--ease-out) both; }
.hero h1 { animation:hero-copy-enter .48s .08s var(--ease-out) both; }
.hero > p { animation:hero-copy-enter .48s .15s var(--ease-out) both; }
.sug button { animation:hero-copy-enter .42s var(--ease-out) both; }
.sug button:nth-child(2) { animation-delay:.05s; } .sug button:nth-child(3) { animation-delay:.1s; } .sug button:nth-child(4) { animation-delay:.15s; }
@keyframes card-enter { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes message-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes response-enter { from { opacity:.25; } to { opacity:1; } }
@keyframes hero-mark-enter { from { opacity:0; transform:translateY(-8px) scale(.82); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes hero-copy-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .intro-logo .logo-bar { opacity:1; transform:none; }
}

/* Polished light mode, onboarding, and branding controls */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] .auth-screen { background:radial-gradient(ellipse at 50% 0%,rgba(53,107,255,.11),transparent 48%),#f5f7fc; color:#101828; }
:root[data-theme="light"] .auth-card { background:rgba(255,255,255,.94); border-color:#e1e7f0; box-shadow:0 24px 80px rgba(16,24,40,.10); }
:root[data-theme="light"] .auth-subtitle { color:#667085; }
:root[data-theme="light"] .auth-form label, :root[data-theme="light"] .account-menu label { color:#344054; }
:root[data-theme="light"] .auth-form input { color:#101828; background:#fff; border-color:#d0d5dd; }
:root[data-theme="light"] .auth-provider { color:#101828; background:#fff; border-color:#d0d5dd; }
:root[data-theme="light"] .auth-legal { color:#667085; }
:root[data-theme="light"] .intro-word { color:#101828; }
:root[data-theme="light"] .intro-loader { background:#e4eaf5; }
.field-hint { color:var(--muted,#8a93a5); font-size:12px; line-height:1.5; margin:0 0 8px; }
#logoUpload { width:100%; max-width:100%; font-size:12px; color:var(--text); }
#resetLogo { margin-top:8px; }
@media (prefers-reduced-motion:reduce) { .intro-bar { animation:none!important; opacity:1!important; transform:none!important; } }


/* KERU startup-grade compact authentication */
.auth-screen { padding:24px 16px; background:var(--bg,#fff); color:var(--text,#101828); background-image:radial-gradient(ellipse at 50% 0%,rgba(53,107,255,.075),transparent 52%); }
.auth-card { width:min(100%,390px); padding:28px 28px 22px; border:1px solid var(--line,#e4e7ec); border-radius:20px; background:var(--panel,#fff); box-shadow:0 18px 55px rgba(16,24,40,.08); }
.auth-brand { display:flex; align-items:center; gap:9px; margin-bottom:24px; color:#356bff; font-size:17px; font-weight:800; letter-spacing:.14em; }
.auth-logo { width:28px; height:28px; object-fit:contain; margin:0; }
.auth-card .eyebrow { font-size:10px; margin:0 0 8px; color:#356bff; letter-spacing:.16em; }
.auth-card h1 { font-size:27px; line-height:1.18; letter-spacing:-.045em; color:var(--text,#101828); }
.auth-card h1 span { color:#356bff; }
.auth-subtitle { margin:8px 0 21px; color:var(--mute,#667085); font-size:13px; line-height:1.5; }
.auth-form { gap:8px; }
.auth-form label { margin-top:2px; color:var(--text,#344054); font-size:12px; font-weight:650; }
.auth-input-wrap { display:flex; align-items:center; gap:10px; min-width:0; height:45px; padding:0 12px; margin-bottom:5px; border:1px solid var(--line,#d0d5dd); border-radius:10px; background:var(--bg,#fff); transition:border-color .18s,box-shadow .18s; }
.auth-input-wrap:focus-within { border-color:#356bff; box-shadow:0 0 0 3px rgba(53,107,255,.12); }
.auth-input-wrap > svg { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:var(--mute,#667085); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.auth-input-wrap input { width:100%; min-width:0; height:100%; padding:0; margin:0; border:0; outline:0; box-shadow:none; border-radius:0; background:transparent; color:var(--text,#101828); font:inherit; font-size:13px; }
.auth-input-wrap input:focus { border:0; box-shadow:none; }
.password-wrap { padding-right:7px; }
.password-toggle { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:7px; color:var(--mute,#667085); }
.password-toggle:hover { background:var(--hover,#f2f4f7); color:var(--text,#101828); }
.password-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.auth-primary,.auth-provider { min-height:43px; border-radius:10px; font-size:13px; }
.auth-primary { gap:9px; margin-top:5px; background:#356bff; box-shadow:0 2px 5px rgba(53,107,255,.18); }
.auth-primary svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.auth-primary:hover { background:#2458e6; }
.auth-link { color:#356bff; margin-top:2px; font-size:12px; font-weight:600; }
.auth-divider { margin:16px 0 12px; color:var(--mute,#98a2b3); font-size:11px; }
.auth-divider:before,.auth-divider:after { background:var(--line,#eaecf0); }
.auth-provider { position:relative; margin-top:8px; gap:10px; color:var(--text,#101828); background:var(--panel,#fff); border-color:var(--line,#d0d5dd); }
.auth-provider:hover { border-color:#98aefb; background:var(--hover,#f9fafb); }
.provider-icon { position:absolute; left:14px; width:18px; height:18px; }
.facebook-icon { width:20px; height:20px; }
.auth-error { margin:8px 0 0; min-height:0; font-size:12px; }
.auth-error:empty { display:none; }
.auth-legal { margin-top:16px; font-size:10px; color:var(--mute,#98a2b3); }
:root[data-theme="dark"] .auth-screen { background-color:#080a10; background-image:radial-gradient(ellipse at 50% 0%,rgba(53,107,255,.13),transparent 52%); color:#f4f7ff; }
:root[data-theme="dark"] .auth-card { background:rgba(13,17,27,.97); border-color:#242c3d; box-shadow:0 22px 70px rgba(0,0,0,.28); }
:root[data-theme="dark"] .auth-card h1, :root[data-theme="dark"] .auth-form label { color:#f4f7ff; }
:root[data-theme="dark"] .auth-subtitle, :root[data-theme="dark"] .auth-legal { color:#9ba7bd; }
:root[data-theme="dark"] .auth-input-wrap { background:#080c14; border-color:#2a3448; }
:root[data-theme="dark"] .auth-input-wrap input { color:#f4f7ff; }
:root[data-theme="dark"] .auth-provider { background:#111724; border-color:#2a3448; color:#f4f7ff; }
:root[data-theme="dark"] .auth-provider:hover { background:#151e2f; border-color:#52658b; }
:root[data-theme="dark"] .auth-divider:before, :root[data-theme="dark"] .auth-divider:after { background:#283145; }
@media(max-width:520px) { .auth-screen { padding:18px 14px; } .auth-card { width:min(100%,390px); padding:24px 20px 19px; border-radius:17px; } .auth-brand { margin-bottom:20px; } .auth-card h1 { font-size:25px; } }
@media(prefers-reduced-motion:reduce) { .auth-card { animation:none!important; } .auth-input-wrap,.auth-primary,.auth-provider { transition:none!important; } }

/* KERU compact, image-led startup sign-in */
.auth-screen { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:18px; padding:22px clamp(20px,5vw,76px) 14px; overflow-y:auto; background:var(--bg,#fff); }
.auth-utility { width:min(100%,1400px); margin:0 auto; display:flex; align-items:center; justify-content:space-between; min-height:36px; }
.auth-mini-brand { display:flex; align-items:center; gap:8px; color:#356bff; font-size:20px; font-weight:800; letter-spacing:.13em; }
.auth-mini-brand .auth-logo { width:30px; height:30px; }
.auth-theme-toggle { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line,#e4e7ec); border-radius:999px; background:var(--panel,#fff); color:var(--text,#344054); font:600 12px var(--font); transition:background .25s,border-color .25s,transform .2s; }
.auth-theme-toggle:hover { transform:translateY(-1px); border-color:#9bb2ff; }
.auth-theme-toggle .ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.auth-layout { width:min(100%,1400px); margin:0 auto; display:grid; grid-template-columns:minmax(350px,.9fr) minmax(380px,1.1fr); align-items:center; gap:clamp(36px,7vw,112px); }
.auth-content { display:flex; justify-content:center; min-width:0; }
.auth-card { width:min(100%,440px); padding:clamp(24px,3vw,38px); border-radius:22px; }
.auth-card .auth-brand { display:none; }
.auth-card .eyebrow { margin-bottom:10px; }
.auth-card h1 { margin:0; font-size:clamp(29px,3.2vw,39px); line-height:1.13; letter-spacing:-.05em; }
.auth-subtitle { margin:10px 0 23px; font-size:14px; }
.auth-form { gap:9px; }
.auth-form label { margin-top:3px; font-size:12px; }
.auth-input-wrap { height:48px; border-radius:11px; }
.auth-input-wrap input { font-size:14px; }
.auth-primary,.auth-provider { min-height:47px; border-radius:11px; font-size:14px; }
.auth-primary { margin-top:8px; }
.auth-link { margin-top:4px; font-size:13px; }
.auth-divider { margin:17px 0 12px; font-size:12px; }
.auth-provider { margin-top:9px; }
.auth-legal { margin:16px 0 0; text-align:center; line-height:1.5; font-size:11px; }
.auth-visual { position:relative; min-width:0; height:clamp(430px,63vh,690px); overflow:hidden; border:1px solid var(--line,#e4e7ec); border-radius:22px; background:linear-gradient(145deg,rgba(53,107,255,.13),transparent 45%),var(--panel,#f4f6fb); box-shadow:0 24px 70px rgba(16,24,40,.08); }
.auth-visual > img { display:block; width:100%; height:100%; object-fit:cover; }
.auth-visual > img[hidden] { display:none; }
.auth-image-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px; text-align:center; color:var(--text,#344054); background:radial-gradient(ellipse at 50% 42%,rgba(53,107,255,.14),transparent 58%),linear-gradient(145deg,var(--panel,#fff),var(--bg,#f4f6fb)); }
.auth-image-placeholder[hidden] { display:none; }
.image-placeholder-icon { display:grid; place-items:center; width:72px; height:72px; border:1px dashed rgba(53,107,255,.55); border-radius:20px; color:#356bff; background:rgba(53,107,255,.07); }
.image-placeholder-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.auth-image-placeholder strong { font-size:17px; font-weight:700; }
.auth-image-placeholder span { max-width:300px; color:var(--mute,#667085); font-size:12px; line-height:1.6; }
.auth-image-placeholder code { color:#356bff; overflow-wrap:anywhere; }
.visual-caption { position:absolute; left:20px; right:20px; bottom:20px; display:flex; align-items:center; gap:9px; width:max-content; max-width:calc(100% - 40px); padding:11px 14px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(12,18,31,.72); color:#fff; backdrop-filter:blur(12px); font-size:12px; font-weight:600; }
.visual-dot { width:7px; height:7px; border-radius:50%; background:#6b91ff; box-shadow:0 0 0 4px rgba(107,145,255,.18); }
.auth-bottom-note { width:min(100%,1400px); margin:0 auto; color:var(--mute,#98a2b3); text-align:center; font-size:10px; }
:root[data-theme="dark"] .auth-theme-toggle { background:#111724; border-color:#2a3448; color:#e6eaf2; }
:root[data-theme="dark"] .auth-visual { background:linear-gradient(145deg,rgba(53,107,255,.18),transparent 45%),#101522; border-color:#252d40; }
:root[data-theme="dark"] .auth-image-placeholder { color:#f4f7ff; background:radial-gradient(ellipse at 50% 42%,rgba(53,107,255,.2),transparent 58%),linear-gradient(145deg,#111724,#080a10); }
:root[data-theme="dark"] .auth-image-placeholder span { color:#aab4c8; }
:root[data-theme="dark"] .auth-bottom-note { color:#8490a6; }
@media(max-width:900px) { .auth-screen { padding:18px 20px 12px; gap:12px; } .auth-layout { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:22px; } .auth-visual { height:520px; } .auth-card { padding:25px 22px; } }
@media(max-width:700px) { .auth-screen { justify-content:flex-start; padding:15px 16px 12px; } .auth-layout { grid-template-columns:1fr; gap:16px; max-width:460px; } .auth-content { order:1; } .auth-visual { order:2; height:180px; border-radius:16px; } .auth-card { padding:24px 21px 20px; } .auth-card h1 { font-size:29px; } .auth-mini-brand { font-size:18px; } .auth-mini-brand .auth-logo { width:27px; height:27px; } .auth-image-placeholder { gap:7px; } .image-placeholder-icon { width:45px; height:45px; border-radius:13px; } .image-placeholder-icon svg { width:22px; height:22px; } .auth-image-placeholder strong { font-size:14px; } .auth-image-placeholder span { font-size:10px; } .visual-caption { left:10px; bottom:10px; padding:8px 10px; } }
@media(max-height:760px) and (min-width:701px) { .auth-screen { gap:10px; padding-top:12px; } .auth-visual { height:min(65vh,540px); } .auth-card { padding:23px 26px; } .auth-subtitle { margin-bottom:16px; } .auth-divider { margin:12px 0 8px; } .auth-provider { margin-top:7px; } }

/* Final compact, production-minded KERU sign-in layout */
.auth-screen { min-height:100dvh; height:100dvh; overflow:auto; padding:18px clamp(20px,4.5vw,68px) 12px; gap:clamp(10px,2vh,22px); background:var(--bg,#fff); }
.auth-utility { width:min(100%,1240px); min-height:32px; }
.auth-mini-brand { gap:7px; font-size:17px; letter-spacing:.10em; }
.auth-mini-brand .auth-logo { width:23px; height:23px; }
.auth-theme-toggle { padding:7px 10px; }
.auth-layout { width:min(100%,1120px); grid-template-columns:minmax(330px,.92fr) minmax(320px,1.08fr); gap:clamp(32px,6vw,84px); }
.auth-content { justify-content:center; }
.auth-card { width:min(100%,390px); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.auth-card .auth-brand { display:none; }
.auth-card .eyebrow { margin:0 0 7px; font-size:10px; font-weight:750; letter-spacing:.18em; color:#356bff; }
.auth-card h1.auth-marketing { margin:0; font-family:var(--serif,Georgia,serif); font-size:clamp(36px,3.6vw,52px); line-height:1.04; letter-spacing:-.055em; font-weight:500; color:var(--text,#171717); }
.auth-subtitle { margin:10px 0 23px; max-width:350px; font-size:14px; line-height:1.55; color:var(--mute,#667085); }
.auth-form-heading { margin:0 0 13px; font-size:17px; line-height:1.3; letter-spacing:-.025em; font-weight:650; color:var(--text,#171717); }
.auth-social-options { display:grid; gap:9px; }
.auth-social-options .auth-provider { margin:0; min-height:43px; }
.auth-divider { margin:15px 0 12px; font-size:11px; }
.auth-form { gap:6px; }
.auth-form label { margin-top:2px; font-size:11px; }
.auth-input-wrap { height:43px; margin-bottom:4px; border-radius:9px; }
.auth-input-wrap input { font-size:13px; }
.auth-primary { min-height:43px; margin-top:5px; border-radius:9px; font-size:13px; }
.auth-link { margin-top:3px; font-size:12px; }
.auth-legal { margin-top:11px; font-size:10px; }
.auth-visual { height:clamp(350px,58vh,590px); border-radius:17px; box-shadow:none; }
.auth-image-placeholder { border:1px dashed rgba(53,107,255,.32); }
.auth-image-placeholder strong { font-size:15px; }
.auth-image-placeholder span { font-size:11px; }
.auth-bottom-note { font-size:10px; padding-top:2px; }
:root[data-theme="dark"] .auth-card h1.auth-marketing,:root[data-theme="dark"] .auth-form-heading { color:#f4f7ff; }
:root[data-theme="light"] .auth-card h1.auth-marketing,:root[data-theme="light"] .auth-form-heading { color:#171717; }
@media(max-width:800px) {
 .auth-screen { height:auto; min-height:100dvh; justify-content:flex-start; padding:16px 20px 12px; }
 .auth-layout { grid-template-columns:minmax(0,1fr); gap:22px; max-width:460px; }
 .auth-content { order:1; }
 .auth-card { width:100%; }
 .auth-card h1.auth-marketing { font-size:clamp(34px,9vw,44px); }
 .auth-subtitle { margin-bottom:18px; }
 .auth-visual { order:2; height:clamp(150px,28vh,230px); }
 .auth-bottom-note { padding:6px 0 2px; }
}
@media(max-height:720px) and (min-width:801px) {
 .auth-screen { gap:8px; padding-top:10px; }
 .auth-layout { gap:38px; }
 .auth-card h1.auth-marketing { font-size:38px; }
 .auth-subtitle { margin:6px 0 12px; }
 .auth-visual { height:min(58vh,420px); }
 .auth-divider { margin:10px 0 8px; }
 .auth-legal { margin-top:7px; }
}

/* Final login polish: keep the form open and editorial, not inside a white card.
   The light-theme selector above was overriding the transparent card layout. */
:root[data-theme="light"] .auth-card,
:root[data-theme="dark"] .auth-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
:root[data-theme="light"] .auth-card { color: #171717; }
:root[data-theme="light"] .auth-card h1.auth-marketing,
:root[data-theme="light"] .auth-form-heading { color: #171717; }
:root[data-theme="light"] .auth-subtitle { color: #667085; }
.auth-layout { align-items: center; }
.auth-card { animation: card-enter .5s ease-out both; }
.auth-visual { min-height: 320px; }
@media (min-width: 701px) {
  .auth-screen { overflow-y: auto; }
  .auth-card { max-width: 390px; }
}
@media (max-width: 700px) { .auth-card { animation: none; } }


/* ===== v3 overrides: intro, theme transition, composer, rich content, settings, phone login ===== */
:root{--ease:cubic-bezier(.22,.8,.2,1)}
html.fade body, html.fade body *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}
.intro{background:#080a10;animation:intro-bg3 1.3s ease .9s forwards}
@keyframes intro-bg3{to{background:#fff}}
.intro-loader{background:rgba(127,140,165,.3)}
.intro-out{transition:opacity .5s ease,visibility .5s}
.send{background:var(--acc)!important}.send:hover{background:var(--acc)!important;filter:brightness(1.1)}
.chat{font-size:var(--fs,15px)}
.no-motion *,.no-motion *::before,.no-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.no-motion .intro,.no-motion .intro *{animation-duration:revert!important}

/* composer */
.composer .box{position:relative;flex-wrap:nowrap;padding:8px 10px 8px 8px;align-items:flex-end}
.plus-wrap{position:relative;flex:none}
.plus{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--mute);transition:background-color .2s,color .2s,transform .25s var(--ease)}
.plus:hover{background:var(--hover);color:var(--ink)}.plus[aria-expanded=true]{transform:rotate(45deg);background:var(--hover);color:var(--ink)}
.plus-menu{position:absolute;bottom:46px;left:0;min-width:236px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.18);z-index:30;animation:pop .18s var(--ease)}
.plus-menu[hidden]{display:none}
.plus-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:9px;font-size:14px;text-align:left}
.plus-menu button:hover{background:var(--hover)}
.plus-menu button[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
.attach-bar{max-width:740px;margin:0 auto 8px;display:flex;flex-wrap:wrap;gap:8px}
.attach-bar[hidden]{display:none}
.chip{display:flex;align-items:center;gap:8px;max-width:230px;padding:5px 6px 5px 6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:13px;animation:pop .2s var(--ease)}
.chip img{width:34px;height:34px;object-fit:cover;border-radius:8px}.chip>.ic{width:20px;height:20px;margin:0 3px;color:var(--acc)}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--mute)}.chip button:hover{background:var(--hover);color:var(--ink)}
.chip button .ic{width:14px;height:14px}
.dragging::after{content:"Drop files to attach";position:fixed;inset:12px;z-index:90;display:grid;place-items:center;font-weight:650;font-size:18px;color:var(--acc);background:color-mix(in srgb,var(--bg) 82%,transparent);border:2px dashed var(--acc);border-radius:20px;pointer-events:none}
.att-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.att-img{max-width:150px;max-height:120px;border-radius:10px;object-fit:cover}
.att-file{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;background:rgba(127,140,165,.18);font-size:13px}.att-file .ic{width:16px;height:16px}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,12px);padding:10px 16px;background:#111724;color:#fff;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s var(--ease);z-index:200}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* hero */
.hero h1{font-size:clamp(26px,4.2vw,36px);letter-spacing:-.02em}
.hero .logo{animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}

/* code colors */
.hljs{background:none!important;color:var(--ink)}
[data-theme=light]{--h-kw:#8250df;--h-str:#0a7f48;--h-num:#b45309;--h-com:#8b95a7;--h-fn:#0b5fff;--h-bi:#b4237a;--h-at:#0b6bcb}
[data-theme=dark]{--h-kw:#c792ff;--h-str:#7ee0a8;--h-num:#ffb86b;--h-com:#6c7a93;--h-fn:#7aa7ff;--h-bi:#ff8fd0;--h-at:#5cc8ff}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-meta .hljs-keyword{color:var(--h-kw)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta .hljs-string{color:var(--h-str)}
.hljs-number,.hljs-symbol,.hljs-bullet{color:var(--h-num)}
.hljs-comment,.hljs-quote{color:var(--h-com);font-style:italic}
.hljs-title,.hljs-section,.hljs-selector-id,.hljs-selector-class{color:var(--h-fn)}
.hljs-built_in,.hljs-type,.hljs-class .hljs-title,.hljs-deletion{color:var(--h-bi)}
.hljs-attr,.hljs-attribute,.hljs-name,.hljs-variable,.hljs-template-variable,.hljs-params{color:var(--h-at)}

/* rich blocks */
.rich,.rich-skel{margin:14px 0;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.rich-skel{display:flex;align-items:center;gap:10px;padding:16px;color:var(--mute);font-size:14px}
.rich-err{padding:14px;color:var(--danger);font-size:14px}
.chart-box{position:relative;height:320px;padding:14px}
.diagram{padding:16px;overflow-x:auto;text-align:center}.diagram svg{max-width:100%;height:auto}
.rich-bar,.tbl-bar{display:flex;gap:6px;justify-content:flex-end;padding:6px 10px;border-top:1px solid var(--line)}
.rich-bar button,.tbl-bar button,.web-act button{padding:5px 10px;border-radius:8px;font-size:12.5px;color:var(--mute)}
.rich-bar button:hover,.tbl-bar button:hover,.web-act button:hover{background:var(--hover);color:var(--ink)}
.web-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs{display:flex;gap:4px}.tabs button{padding:5px 12px;border-radius:8px;font-size:13px;color:var(--mute)}.tabs button.on{background:var(--hover);color:var(--ink);font-weight:600}
.web-act{display:flex;gap:4px}
.web-p iframe{display:block;width:100%;height:480px;border:0;background:#fff}
.web-c{margin:0;padding:14px;max-height:480px;overflow:auto;font-size:13px;background:var(--code)}
.filecards{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.filecard{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel,var(--bg));box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,box-shadow .15s}
.filecard:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:0 4px 14px rgba(15,23,42,.07)}
.fc-ic{flex:none;display:grid;place-items:center;width:52px;height:60px;border-radius:12px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff;background:#64748b;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.fc-xlsx,.fc-csv{background:#16a34a}.fc-docx{background:#2563eb}.fc-pdf{background:#dc2626}.fc-md,.fc-txt,.fc-json{background:#64748b}
.fc-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.assistant-msg .body .fc-meta strong,.fc-meta strong{background:none;padding:0;font-weight:650;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-meta span{font-size:12.5px;color:var(--mute)}
.fc-btn{flex:none;padding:9px 18px;border-radius:10px;background:var(--hover);color:var(--ink);border:1px solid var(--line);font-weight:600;font-size:13.5px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fc-btn:hover{background:var(--acc);color:#fff;border-color:var(--acc)}.fc-btn:disabled{opacity:.6;cursor:default}
.fc-all{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer}.fc-all:hover{background:var(--hover)}
@media(max-width:520px){.filecard{padding:12px;gap:12px}.fc-ic{width:44px;height:52px}}
.tbl{margin:14px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl-s{overflow-x:auto}.tbl-bar{border-top:0;border-bottom:1px solid var(--line)}
.tbl table{margin:0;border-collapse:collapse;width:100%;font-size:.93em}.tbl th,.tbl td{padding:9px 13px;border-bottom:1px solid var(--line);text-align:left}.tbl th{background:var(--hover);font-weight:650}.tbl tr:last-child td{border-bottom:0}

/* settings */
.swatches{display:flex;gap:10px}.swatches button{width:30px;height:30px;border-radius:50%;background:var(--c);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line);transition:transform .2s var(--ease)}
.swatches button.on{box-shadow:0 0 0 2px var(--c)}.swatches button:hover{transform:scale(1.1)}
.field .check{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:14px;cursor:pointer}.field .check input{width:17px;height:17px;accent-color:var(--acc)}
#nick{width:100%}

/* phone login */

/* ============================================================
   v3: voice, scroll arrow, message actions, settings, a11y
   ============================================================ */
:root { --rec: #e5484d; }
[hidden] { display: none !important; }

/* layout vars driven by Settings */
.col, .box, .attach-bar, .edit-bar { max-width: var(--w, 740px); }
.msg { margin-bottom: var(--msg-gap, 26px); }
.composer { position: relative; padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* accent follows the chosen color everywhere in the app */
.btn.newchat { background: var(--acc) !important; border-color: var(--acc) !important; color: var(--accink) !important; }
.btn.newchat:hover { filter: brightness(1.08); background: var(--acc) !important; }
.btn.newchat .ic { background: rgba(255,255,255,.2) !important; color: inherit !important; }
.mode.on { background: color-mix(in srgb, var(--acc) 16%, transparent); }
.sug button:hover { border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.account-avatar { background: var(--acc); color: var(--accink); }
.quota-track span { background: var(--acc); }
.send { color: var(--accink) !important; box-shadow: 0 3px 9px color-mix(in srgb, var(--acc) 25%, transparent); }
.send[hidden] { display: none !important; }
.box:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.box textarea:focus-visible, .search input:focus-visible, .rename-input:focus-visible { outline: none; }

/* mic button (right side of the chat box) */
.mic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--mute); transition: background-color .2s, color .2s, transform .2s; }
.mic:hover { background: var(--hover); color: var(--ink); }
.mic .ic { width: 20px; height: 20px; }
.mic.rec { background: var(--rec); color: #fff; animation: mic-pulse 1.4s ease-out infinite; }
.box.listening { border-color: var(--rec); }
@keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 100% { box-shadow: 0 0 0 12px rgba(229,72,77,0); } }
.send { animation: pop .18s var(--ease); }

/* scroll-to-bottom arrow */
.to-bottom { position: absolute; left: 50%; top: -52px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.18); opacity: 0; transform: translate(-50%, 8px) scale(.9); pointer-events: none; transition: opacity .2s, transform .2s var(--ease), background-color .2s; z-index: 15; }
.to-bottom.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.to-bottom:hover { background: var(--hover); }
.to-bottom .ic { width: 20px; height: 20px; }

/* edit banner */
.edit-bar { margin: 0 auto 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 7px 14px; font-size: 13px; color: var(--mute); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.edit-bar button { padding: 4px 10px; border-radius: 8px; color: var(--ink); }
.edit-bar button:hover { background: var(--hover); }

/* message actions */
.ubox { max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.msg.user .ubox .body { max-width: 100%; }
.acts { display: flex; gap: 2px; margin-top: 6px; opacity: .55; transition: opacity .15s; }
.msg:hover .acts, .acts:focus-within { opacity: 1; }
.act { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--mute); transition: background-color .15s, color .15s; }
.act:hover { background: var(--hover); color: var(--ink); }
.act.on { color: var(--acc); background: var(--hover); }
.act .ic { width: 16px; height: 16px; }
.err { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.err-retry { flex: none; padding: 6px 12px; border-radius: 8px; border: 1px solid currentColor; font-size: 13px; font-weight: 600; }
.err-retry:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* sidebar chat rows */
.item { position: relative; }
.item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .pinmark { display: grid; color: var(--acc); }
.item .pinmark .ic { width: 13px; height: 13px; }
.item-act { display: flex; gap: 1px; opacity: 0; transition: opacity .15s; flex: none; }
.item:hover .item-act, .item.on .item-act, .item:focus-within .item-act { opacity: 1; }
.item-act button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--mute); }
.item-act button:hover { background: var(--bg); color: var(--ink); }
.item-act .del { opacity: 1; padding: 0; }
.item-act .del:hover { color: var(--danger); }
.item-act .ic { width: 15px; height: 15px; }
.rename-input { flex: 1; min-width: 0; padding: 3px 7px; border: 1px solid var(--acc); border-radius: 6px; background: var(--bg); color: var(--ink); font-size: 14px; }
@media (hover: none) { .item-act { opacity: 1; } .acts { opacity: 1; } .act { width: 36px; height: 36px; } .item-act button { width: 32px; height: 32px; } }

/* toasts */
#toast { max-width: min(92vw, 420px); text-align: center; }
#toastAct { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 12px); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; background: #111724; color: #fff; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s var(--ease); z-index: 201; }
#toastAct.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toastAct button { padding: 5px 12px; border-radius: 7px; background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
#toastAct button:hover { background: rgba(255,255,255,.24); }

/* settings dialog */
dialog { width: min(580px, calc(100% - 20px)); }
.set-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 0 14px 10px; overflow-x: auto; background: var(--panel); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tabs button { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--mute); transition: background-color .2s, color .2s; }
.set-tabs button:hover { background: var(--hover); color: var(--ink); }
.set-tabs button.on { background: var(--acc); color: var(--accink); font-weight: 600; }
.db { padding-top: 18px; }
.pane { display: grid; gap: 20px; }
.field input[type=text], .field input:not([type]), .field select { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.field input:not([type]):focus, .field select:focus { border-color: var(--acc); }
.field .muted { font-weight: 400; color: var(--mute); }
.seg4 { grid-template-columns: repeat(4, 1fr); }
.seg button { font-size: 13.5px; }
.seg button.on { background: var(--acc); color: var(--accink); }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.preset { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; transition: border-color .2s, background-color .2s; }
.preset:hover { border-color: var(--acc); background: var(--hover); }
.preset-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); }
.swatches { flex-wrap: wrap; }
.color-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mute); }
.color-row code { font-family: var(--mono); color: var(--ink); }
input[type=color] { width: 38px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.color-item { display: flex !important; justify-content: flex-start !important; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font-weight: 400 !important; font-size: 13.5px !important; }
.kbd-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 14px; font-size: 13.5px; color: var(--mute); }
kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 12px var(--mono); color: var(--ink); background: var(--bg); }
.field .btn { justify-content: center; }
.field-hint b { color: var(--ink); font-weight: 600; }

/* login */
.forgot-link { justify-self: end; align-self: flex-end; margin: -4px 0 2px; }
.auth-error[data-kind=ok] { color: #16a34a; }

/* mobile: bigger tap targets, no iOS zoom on focus */
@media (max-width: 860px) {
  .box textarea, .search input, .field input, .field select, .field textarea, .rename-input { font-size: 16px; }
  .to-bottom { top: -50px; }
}

.item .pinmark .ic { display: block !important; }


/* ===== v4: avatar photo, mode badge, highlights, richer code colors ===== */
.account-avatar { position:relative; overflow:hidden; }
.account-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.account-avatar.has-photo { background-image:none!important; }
.account-menu button { display:block; width:100%; text-align:left; }
.mode-badge { flex:none; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); }
.mode { display:flex; align-items:center; gap:9px; width:100%; }
.mode.on { font-weight:600; box-shadow:inset 3px 0 0 var(--acc); }

/* Important answers stand out like Claude: bold gets a soft marker, key points become callouts */
.assistant-msg .body strong { font-weight:700; color:var(--ink); background:none; padding:0; border-radius:0; }
.assistant-msg .body mark { background:none; color:inherit; padding:0; }
.assistant-msg .body blockquote { border-left:3px solid var(--line); background:none; border-radius:0; padding:2px 0 2px 14px; margin:12px 0; color:var(--mute); }
.assistant-msg .body blockquote strong { color:var(--ink); }
.assistant-msg .body :not(pre) > code { color:#d6336c; background:color-mix(in srgb,#d6336c 10%,transparent); border:1px solid color-mix(in srgb,#d6336c 18%,transparent); border-radius:6px; padding:1px 6px; font-size:.9em; }
[data-theme=dark] .assistant-msg .body :not(pre) > code { color:#ff9ac1; background:rgba(255,154,193,.1); border-color:rgba(255,154,193,.2); }
.assistant-msg .body h1,.assistant-msg .body h2,.assistant-msg .body h3 { color:var(--ink); }
.assistant-msg .body a { color:var(--acc); text-decoration:underline; text-underline-offset:3px; }
.assistant-msg .body th { background:color-mix(in srgb,var(--acc) 12%,transparent); }
.assistant-msg .body ul li::marker,.assistant-msg .body ol li::marker { color:var(--acc); font-weight:700; }

/* More syntax colors (Python, JS, HTML, CSS, SQL, JSON, Bash...) */
[data-theme=light]{--h-fn2:#0b5fff;--h-tag:#c2255c;--h-prop:#0b6bcb;--h-op:#5f6b7c}
[data-theme=dark]{--h-fn2:#7aa7ff;--h-tag:#ff7b9c;--h-prop:#5cc8ff;--h-op:#a5b3c9}
.hljs{color:var(--ink)}
.hljs-title.function_,.hljs-title.class_,.hljs-function .hljs-title{color:var(--h-fn2)}
.hljs-tag,.hljs-tag .hljs-name{color:var(--h-tag)}
.hljs-property,.hljs-attr,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--h-prop)}
.hljs-variable.language_,.hljs-built_in,.hljs-type{color:var(--h-bi)}
.hljs-subst,.hljs-punctuation{color:var(--ink)}
.hljs-operator{color:var(--h-op)}
.hljs-meta,.hljs-meta .hljs-keyword{color:var(--h-kw)}
.hljs-link{color:var(--h-fn2);text-decoration:underline}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
.hljs-keyword{font-weight:600}
.code-h span { text-transform:lowercase; font-weight:600; color:var(--acc); }

.rich[data-kind="file"]{border:0;background:none;border-radius:0;overflow:visible;margin:10px 0}

.brand-logo,.auth-logo,.hero-brand-mark img,.keru-avatar img,.hero-brand-mark,.brand .logo,.keru-avatar{background:transparent!important;box-shadow:none}

/* =====================================================================
   Rendering stability (keep this block last)
   Entrance animations used fill-mode "both", which keeps an identity
   transform on the element after it finishes. Safari then keeps the
   text on a scaled GPU layer, so the UI looks soft until a repaint
   (for example switching theme). "backwards" removes the effect when
   the animation ends, so text is always drawn crisp.
   ===================================================================== */
.auth-card,
.msg,
.assistant-msg .body,
.hero-brand-mark img,
.hero h1,
.hero > p,
.sug button { animation-fill-mode: backwards; }
.hero .logo { animation: none; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.app, .main, .chat { transform: none; will-change: auto; }


/* =====================================================================
   v9: colored code, Claude-style file cards, tablet/PC sidebar, motion
   ===================================================================== */

/* ---- Code blocks: full syntax colors in both modes ---- */
.code { border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.05); transition:box-shadow .25s ease, border-color .25s ease; animation:code-in .35s var(--ease-out) backwards; }
.code:hover { box-shadow:0 8px 24px rgba(15,23,42,.10); }
[data-theme=dark] .code { background:#0d1117; border-color:#262e3b; }
[data-theme=light] .code { background:#f6f8fa; border-color:#d8dee6; }
.code-h { padding:7px 8px 7px 14px; border-bottom:1px solid var(--line); }
[data-theme=dark] .code-h { background:#161b22; border-bottom-color:#262e3b; }
[data-theme=light] .code-h { background:#eceff4; border-bottom-color:#d8dee6; }
.code-lang { display:inline-flex; align-items:center; gap:8px; font:600 12px var(--mono); text-transform:lowercase; color:var(--mute)!important; letter-spacing:.02em; }
.code-dot { width:9px; height:9px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent); }
.code-act { display:flex; align-items:center; gap:2px; }
.code-h button { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px; font:600 12px var(--font); color:var(--mute); transition:background .18s,color .18s,transform .18s var(--ease-spring); }
.code-h button .ic { width:15px; height:15px; }
.code-h button:hover { background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--ink); }
.code-h button:active { transform:scale(.94); }
.code-h button.done { color:#22c55e; }
.code pre { padding:14px 16px 16px; font-size:13.5px; line-height:1.65; tab-size:2; }
.code pre::-webkit-scrollbar { height:8px; } .code pre::-webkit-scrollbar-thumb { background:rgba(127,140,165,.35); border-radius:8px; }

[data-theme=dark] .code .hljs { color:#e6edf3; }
[data-theme=dark] .code .hljs-keyword,[data-theme=dark] .code .hljs-meta .hljs-keyword,[data-theme=dark] .code .hljs-doctag { color:#ff7b72; }
[data-theme=dark] .code .hljs-string,[data-theme=dark] .code .hljs-regexp,[data-theme=dark] .code .hljs-meta .hljs-string { color:#a5d6ff; }
[data-theme=dark] .code .hljs-number,[data-theme=dark] .code .hljs-literal,[data-theme=dark] .code .hljs-symbol,[data-theme=dark] .code .hljs-bullet { color:#79c0ff; }
[data-theme=dark] .code .hljs-comment,[data-theme=dark] .code .hljs-quote { color:#8b949e; font-style:italic; }
[data-theme=dark] .code .hljs-title,[data-theme=dark] .code .hljs-title.function_,[data-theme=dark] .code .hljs-section { color:#d2a8ff; }
[data-theme=dark] .code .hljs-title.class_,[data-theme=dark] .code .hljs-built_in,[data-theme=dark] .code .hljs-type { color:#ffa657; }
[data-theme=dark] .code .hljs-attr,[data-theme=dark] .code .hljs-attribute,[data-theme=dark] .code .hljs-property,[data-theme=dark] .code .hljs-selector-class,[data-theme=dark] .code .hljs-selector-id { color:#79c0ff; }
[data-theme=dark] .code .hljs-variable,[data-theme=dark] .code .hljs-template-variable,[data-theme=dark] .code .hljs-params { color:#ffa657; }
[data-theme=dark] .code .hljs-tag,[data-theme=dark] .code .hljs-name,[data-theme=dark] .code .hljs-selector-tag { color:#7ee787; }
[data-theme=dark] .code .hljs-meta { color:#ff7b72; }
[data-theme=dark] .code .hljs-operator,[data-theme=dark] .code .hljs-punctuation { color:#c9d1d9; }
[data-theme=dark] .code .hljs-addition { color:#7ee787; background:rgba(46,160,67,.15); }
[data-theme=dark] .code .hljs-deletion { color:#ffa198; background:rgba(248,81,73,.15); }

[data-theme=light] .code .hljs { color:#1f2328; }
[data-theme=light] .code .hljs-keyword,[data-theme=light] .code .hljs-meta .hljs-keyword,[data-theme=light] .code .hljs-doctag { color:#cf222e; }
[data-theme=light] .code .hljs-string,[data-theme=light] .code .hljs-regexp,[data-theme=light] .code .hljs-meta .hljs-string { color:#0a3069; }
[data-theme=light] .code .hljs-number,[data-theme=light] .code .hljs-literal,[data-theme=light] .code .hljs-symbol,[data-theme=light] .code .hljs-bullet { color:#0550ae; }
[data-theme=light] .code .hljs-comment,[data-theme=light] .code .hljs-quote { color:#6e7781; font-style:italic; }
[data-theme=light] .code .hljs-title,[data-theme=light] .code .hljs-title.function_,[data-theme=light] .code .hljs-section { color:#8250df; }
[data-theme=light] .code .hljs-title.class_,[data-theme=light] .code .hljs-built_in,[data-theme=light] .code .hljs-type { color:#953800; }
[data-theme=light] .code .hljs-attr,[data-theme=light] .code .hljs-attribute,[data-theme=light] .code .hljs-property,[data-theme=light] .code .hljs-selector-class,[data-theme=light] .code .hljs-selector-id { color:#0550ae; }
[data-theme=light] .code .hljs-variable,[data-theme=light] .code .hljs-template-variable,[data-theme=light] .code .hljs-params { color:#953800; }
[data-theme=light] .code .hljs-tag,[data-theme=light] .code .hljs-name,[data-theme=light] .code .hljs-selector-tag { color:#116329; }
[data-theme=light] .code .hljs-meta { color:#cf222e; }
[data-theme=light] .code .hljs-operator,[data-theme=light] .code .hljs-punctuation { color:#57606a; }
[data-theme=light] .code .hljs-addition { color:#116329; background:#dafbe1; }
[data-theme=light] .code .hljs-deletion { color:#82071e; background:#ffebe9; }
@keyframes code-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- File cards (PDF, Excel, Word, ZIP, SVG, code files) ---- */
.rich[data-kind="file"] { margin:10px 0; }
.filecard { --fc:#94a3b8; position:relative; display:flex; align-items:center; gap:16px; padding:14px 18px 14px 14px; border:1px solid var(--line); border-radius:18px; background:var(--panel,var(--bg)); box-shadow:0 1px 2px rgba(15,23,42,.05); overflow:hidden; animation:fc-in .45s var(--ease-out) backwards; transition:transform .25s var(--ease-out), border-color .2s, box-shadow .25s; }
.filecard::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,color-mix(in srgb,var(--fc) 9%,transparent),transparent 42%); pointer-events:none; }
.filecard:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--fc) 55%,var(--line)); box-shadow:0 12px 30px color-mix(in srgb,var(--fc) 16%,transparent); }
.filecard[data-k=pdf] { --fc:#ef4444; } .filecard[data-k=docx] { --fc:#3b82f6; }
.filecard[data-k=xlsx],.filecard[data-k=csv] { --fc:#22c55e; } .filecard[data-k=zip] { --fc:#a78bfa; }
.filecard[data-k=svg] { --fc:#8b5cf6; } .filecard[data-k=json],.filecard[data-k=html],.filecard[data-k=css],.filecard[data-k=js],.filecard[data-k=py],.filecard[data-k=sql],.filecard[data-k=xml],.filecard[data-k=yml] { --fc:#f59e0b; }
.fc-ic { position:relative; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:56px; height:66px; border-radius:14px; color:var(--fc); background:linear-gradient(160deg,color-mix(in srgb,var(--fc) 22%,var(--panel,var(--bg))),color-mix(in srgb,var(--fc) 8%,var(--panel,var(--bg)))); border:1px solid color-mix(in srgb,var(--fc) 38%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px color-mix(in srgb,var(--fc) 16%,transparent); transition:transform .3s var(--ease-spring); font-size:0; letter-spacing:0; }
.fc-ic svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fc-ic i { font:800 9.5px/1 var(--font); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--fc); opacity:.95; }
.filecard:hover .fc-ic { transform:rotate(-4deg) scale(1.06); }
.fc-meta { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.fc-meta strong,.assistant-msg .body .fc-meta strong { font-size:15.5px; font-weight:650; letter-spacing:-.005em; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:none; padding:0; }
.fc-meta span { font-size:13px; color:var(--mute); }
.fc-btn { position:relative; flex:none; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:12px; border:1px solid var(--line); background:var(--hover); color:var(--ink); font:600 14px var(--font); cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease-spring),box-shadow .2s; }
.fc-btn .ic { width:16px; height:16px; transition:transform .25s var(--ease-spring); }
.fc-btn:hover { background:var(--fc); border-color:var(--fc); color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--fc) 35%,transparent); }
.fc-btn:hover .ic { transform:translateY(2px); }
.fc-btn:active { transform:scale(.96); }
.fc-btn.busy { opacity:.8; } .fc-btn.busy .ic { animation:fc-spin .8s linear infinite; }
.fc-btn.done,.fc-btn.done:hover { background:#16a34a; border-color:#16a34a; color:#fff; }
.fc-btn:disabled { cursor:default; }
.fc-all { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:6px; padding:10px 17px; border-radius:12px; border:1px solid var(--line); background:var(--panel,transparent); font:600 14px var(--font); color:var(--ink); cursor:pointer; transition:background .2s,transform .2s var(--ease-spring),border-color .2s; }
.fc-all:hover { background:var(--hover); border-color:color-mix(in srgb,var(--acc) 45%,var(--line)); } .fc-all:active { transform:scale(.97); }
@keyframes fc-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes fc-spin { to { transform:rotate(360deg); } }
@media (max-width:520px) { .filecard { gap:12px; padding:12px; } .fc-ic { width:48px; height:58px; } .fc-btn { padding:9px 12px; } .fc-btn span { display:none; } .fc-btn.busy span,.fc-btn.done span { display:inline; } }

/* ---- Phone drawer: smoother slide, softer scrim ---- */
@media (max-width: 700px), (max-height: 500px) and (max-width: 950px) {
  .side { transition:transform .38s var(--ease-out), box-shadow .38s; }
  .scrim { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
}

/* ---- Motion: dark + light ---- */
.item { animation:side-in .4s var(--ease-out) backwards; }
.list .item:nth-child(2){animation-delay:.04s}.list .item:nth-child(3){animation-delay:.08s}.list .item:nth-child(4){animation-delay:.12s}.list .item:nth-child(5){animation-delay:.16s}.list .item:nth-child(6){animation-delay:.2s}.list .item:nth-child(n+7){animation-delay:.24s}
@keyframes side-in { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
.sq .ic { transition:transform .45s var(--ease-spring); }
#themeBtn:hover .ic { transform:rotate(40deg) scale(1.1); } #menuBtn:active .ic { transform:scale(.88); }
.box { transition:box-shadow .3s ease, border-color .3s ease, transform .3s var(--ease-out); }
.box:focus-within { border-color:color-mix(in srgb,var(--acc) 55%,var(--line)); animation:box-glow 2.8s ease-in-out infinite; }
[data-theme=dark] .box:focus-within { box-shadow:0 0 0 3px rgba(53,107,255,.16),0 10px 34px rgba(53,107,255,.12); }
@keyframes box-glow { 0%,100% { box-shadow:0 0 0 3px rgba(53,107,255,.10),0 8px 26px rgba(53,107,255,.06); } 50% { box-shadow:0 0 0 4px rgba(53,107,255,.20),0 12px 36px rgba(53,107,255,.16); } }
.send { position:relative; overflow:hidden; }
.send::after,.auth-primary::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease-out); pointer-events:none; }
.send:hover::after,.auth-primary:hover::after { transform:translateX(120%); }
.auth-primary { position:relative; overflow:hidden; }
.auth-provider:active,.auth-primary:active { transform:scale(.975); }
.auth-provider .provider-icon { transition:transform .3s var(--ease-spring); } .auth-provider:hover .provider-icon { transform:scale(1.12); }
.rich-skel { background:linear-gradient(100deg,var(--panel) 30%,color-mix(in srgb,var(--acc) 10%,var(--panel)) 50%,var(--panel) 70%); background-size:200% 100%; animation:skel 1.4s linear infinite; }
@keyframes skel { to { background-position:-200% 0; } }
.tbl,.rich { animation:code-in .35s var(--ease-out) backwards; }
.to-bottom { animation:pop .25s var(--ease-spring); }
.mode:hover { transform:translateX(3px); }
.hero-brand-mark img { filter:drop-shadow(0 6px 18px rgba(53,107,255,.25)); }
[data-theme=light] .hero-brand-mark img { filter:drop-shadow(0 8px 20px rgba(53,107,255,.18)); }
.no-motion .filecard,.no-motion .code,.no-motion .item,.no-motion .box { animation:none!important; }
@media (prefers-reduced-motion: reduce) { .filecard,.code,.item,.box:focus-within,.rich-skel { animation:none!important; } }

/* Phone drawer: hidden until the menu button is pressed (kept last so nothing overrides it) */
@media (max-width: 700px), (max-height: 500px) and (max-width: 950px) {
  .app .side { position:fixed; inset:0 auto 0 0; width:min(300px,86vw); margin-left:0; transform:translateX(-105%); visibility:hidden; transition:transform .38s var(--ease-out), box-shadow .38s, visibility 0s linear .38s; }
  .app.open .side { transform:none; visibility:visible; transition:transform .38s var(--ease-out), box-shadow .38s, visibility 0s; box-shadow:0 0 40px rgba(0,0,0,.35); }
}

/* Code header: language label only is lowercase/accent; button labels stay normal */
.code-h button span { text-transform:none; color:inherit; font-weight:600; }


/* =====================================================================
   v10: calm, Claude-like look (no glow), dark intro, logout screen
   ===================================================================== */
/* No glowing, pulsing or shining effects: flat surfaces, thin borders, small shadows */
.box:focus-within { animation:none; border-color:color-mix(in srgb,var(--mute) 55%,var(--line)); box-shadow:0 2px 12px rgba(0,0,0,.08); }
[data-theme=dark] .box:focus-within { box-shadow:none; }
.send { box-shadow:none; transition:background-color .2s, transform .15s; }
.send:hover { transform:none; box-shadow:none; }
.send:active { transform:scale(.95); }
.send::after,.auth-primary::after { display:none; }
.auth-primary,.auth-primary:hover,.auth-provider:hover { box-shadow:none; }
.auth-input-wrap:focus-within { box-shadow:none; }
.hero-brand-mark img,[data-theme=light] .hero-brand-mark img { filter:none; }
.keru-avatar.thinking img { filter:none; }
.sug button { box-shadow:none; }
.sug button:hover { transform:none; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.item:hover,.mode:hover { transform:none; }
.filecard,.filecard:hover { box-shadow:0 1px 2px rgba(15,23,42,.05); }
.filecard:hover { transform:none; box-shadow:0 2px 10px rgba(15,23,42,.08); }
.filecard::before { display:none; }
.fc-ic { box-shadow:none; }
.fc-btn:hover { box-shadow:none; }
.code:hover { box-shadow:0 1px 2px rgba(15,23,42,.05); }
.code-dot { box-shadow:none; width:8px; height:8px; }
:root[data-theme="dark"] .auth-screen,:root[data-theme="light"] .auth-screen { background-image:none; }
.auth-visual,:root[data-theme="dark"] .auth-visual { background-image:none; box-shadow:none; }
.auth-image-placeholder { background:var(--panel); }
.visual-caption { display:none; }

/* Intro: starts dark, turns white while the logo assembles, then fades into the dark login page.
   It always uses its own colors, so it looks the same whatever theme the app is in. */
.intro { background:#080a10; animation:intro-white 1.65s ease 1.25s forwards; }
.intro-logo { animation:none; }
.intro-word { color:#101828; }
.intro-loader { background:#e4eaf5; }
@keyframes intro-white { 0% { background:#080a10; } 55%,100% { background:#f7f9ff; } }

/* Logging out screen */
.logout-overlay { position:fixed; inset:0; z-index:9000; display:grid; place-items:center; background:rgba(8,10,16,.72); animation:lo-in .2s ease both; }
.logout-overlay[hidden] { display:none; }
.lo-card { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:220px; padding:26px 32px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--ink); text-align:center; }
.lo-card strong { font-size:15px; font-weight:650; }
.lo-card small { font-size:12.5px; color:var(--mute); }
.lo-spin { width:26px; height:26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--acc); animation:lo-spin .8s linear infinite; }
@keyframes lo-spin { to { transform:rotate(360deg); } }
@keyframes lo-in { from { opacity:0; } to { opacity:1; } }

/* ============================================================
   Login v11: Google + Facebook only, professional responsive layout.
   Placed last so it wins over the earlier login layers.
   ============================================================ */
.auth-screen {
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  padding-left: max(clamp(22px, 5vw, 68px), env(safe-area-inset-left));
  padding-right: max(clamp(22px, 5vw, 68px), env(safe-area-inset-right));
}
.auth-card { width: min(100%, 400px); }
.auth-form-heading { margin: 0 0 16px; font-size: 18px; }
.auth-social-options { display: grid; gap: 12px; }
.auth-social-options .auth-provider {
  min-height: 50px; margin: 0; padding: 0 18px;
  border-radius: 12px; font-size: 15px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.auth-social-options .auth-provider:active { transform: scale(.985); }
.auth-provider .provider-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.auth-provider:focus-visible,
.auth-theme-toggle:focus-visible { outline: 2px solid #356bff; outline-offset: 2px; }
.auth-error:not(:empty) {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--danger, #c43232) 10%, transparent);
  color: var(--danger, #c43232); font-size: 13px; line-height: 1.5;
}
.auth-error:not(:empty)[data-kind="ok"] {
  background: color-mix(in srgb, #1a9b5b 10%, transparent); color: #1a9b5b;
}
.auth-legal { margin-top: 18px; font-size: 12px; line-height: 1.5; text-align: left; }

/* Tablets and phones: one column with comfortable side margins */
@media (max-width: 800px) {
  .auth-screen {
    height: auto; min-height: 100dvh; justify-content: flex-start; gap: 20px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .auth-utility { width: 100%; max-width: 440px; }
  .auth-layout { width: 100%; max-width: 440px; margin: auto; gap: 28px; }
  .auth-card { width: 100%; }
  .auth-card h1.auth-marketing { font-size: clamp(32px, 9.5vw, 42px); }
  .auth-subtitle { margin: 10px 0 24px; max-width: none; font-size: 15px; }
  .auth-visual { height: clamp(150px, 24vh, 210px); min-height: 0; border-radius: 16px; }
  .auth-legal { text-align: center; }
}
/* Small phones */
@media (max-width: 380px) {
  .auth-screen { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .auth-card h1.auth-marketing { font-size: 30px; }
  .auth-social-options .auth-provider { font-size: 14px; }
}
/* Short screens (small phones, landscape): drop the image instead of cropping the logo */
@media (max-width: 800px) and (max-height: 700px) { .auth-visual { display: none; } }
@media (max-height: 520px) {
  .auth-visual { display: none; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-social-options .auth-provider:active { transform: none; }
}
/* ---- Website preview > Code tab: syntax colors ---- */
.web-c code.hljs{background:none;padding:0;font:13px/1.6 var(--mono);white-space:pre}
[data-theme=dark] .web-c .hljs { color:#e6edf3; }
[data-theme=dark] .web-c .hljs-keyword,[data-theme=dark] .web-c .hljs-meta .hljs-keyword,[data-theme=dark] .web-c .hljs-doctag { color:#ff7b72; }
[data-theme=dark] .web-c .hljs-string,[data-theme=dark] .web-c .hljs-regexp,[data-theme=dark] .web-c .hljs-meta .hljs-string { color:#a5d6ff; }
[data-theme=dark] .web-c .hljs-number,[data-theme=dark] .web-c .hljs-literal,[data-theme=dark] .web-c .hljs-symbol,[data-theme=dark] .web-c .hljs-bullet { color:#79c0ff; }
[data-theme=dark] .web-c .hljs-comment,[data-theme=dark] .web-c .hljs-quote { color:#8b949e; font-style:italic; }
[data-theme=dark] .web-c .hljs-title,[data-theme=dark] .web-c .hljs-title.function_,[data-theme=dark] .web-c .hljs-section { color:#d2a8ff; }
[data-theme=dark] .web-c .hljs-title.class_,[data-theme=dark] .web-c .hljs-built_in,[data-theme=dark] .web-c .hljs-type { color:#ffa657; }
[data-theme=dark] .web-c .hljs-attr,[data-theme=dark] .web-c .hljs-attribute,[data-theme=dark] .web-c .hljs-property,[data-theme=dark] .web-c .hljs-selector-class,[data-theme=dark] .web-c .hljs-selector-id { color:#79c0ff; }
[data-theme=dark] .web-c .hljs-variable,[data-theme=dark] .web-c .hljs-template-variable,[data-theme=dark] .web-c .hljs-params { color:#ffa657; }
[data-theme=dark] .web-c .hljs-tag,[data-theme=dark] .web-c .hljs-name,[data-theme=dark] .web-c .hljs-selector-tag { color:#7ee787; }
[data-theme=dark] .web-c .hljs-meta { color:#ff7b72; }
[data-theme=dark] .web-c .hljs-operator,[data-theme=dark] .web-c .hljs-punctuation { color:#c9d1d9; }
[data-theme=dark] .web-c .hljs-addition { color:#7ee787; background:rgba(46,160,67,.15); }
[data-theme=dark] .web-c .hljs-deletion { color:#ffa198; background:rgba(248,81,73,.15); }
[data-theme=light] .web-c .hljs { color:#1f2328; }
[data-theme=light] .web-c .hljs-keyword,[data-theme=light] .web-c .hljs-meta .hljs-keyword,[data-theme=light] .web-c .hljs-doctag { color:#cf222e; }
[data-theme=light] .web-c .hljs-string,[data-theme=light] .web-c .hljs-regexp,[data-theme=light] .web-c .hljs-meta .hljs-string { color:#0a3069; }
[data-theme=light] .web-c .hljs-number,[data-theme=light] .web-c .hljs-literal,[data-theme=light] .web-c .hljs-symbol,[data-theme=light] .web-c .hljs-bullet { color:#0550ae; }
[data-theme=light] .web-c .hljs-comment,[data-theme=light] .web-c .hljs-quote { color:#6e7781; font-style:italic; }
[data-theme=light] .web-c .hljs-title,[data-theme=light] .web-c .hljs-title.function_,[data-theme=light] .web-c .hljs-section { color:#8250df; }
[data-theme=light] .web-c .hljs-title.class_,[data-theme=light] .web-c .hljs-built_in,[data-theme=light] .web-c .hljs-type { color:#953800; }
[data-theme=light] .web-c .hljs-attr,[data-theme=light] .web-c .hljs-attribute,[data-theme=light] .web-c .hljs-property,[data-theme=light] .web-c .hljs-selector-class,[data-theme=light] .web-c .hljs-selector-id { color:#0550ae; }
[data-theme=light] .web-c .hljs-variable,[data-theme=light] .web-c .hljs-template-variable,[data-theme=light] .web-c .hljs-params { color:#953800; }
[data-theme=light] .web-c .hljs-tag,[data-theme=light] .web-c .hljs-name,[data-theme=light] .web-c .hljs-selector-tag { color:#116329; }
[data-theme=light] .web-c .hljs-meta { color:#cf222e; }
[data-theme=light] .web-c .hljs-operator,[data-theme=light] .web-c .hljs-punctuation { color:#57606a; }
[data-theme=light] .web-c .hljs-addition { color:#116329; background:#dafbe1; }
[data-theme=light] .web-c .hljs-deletion { color:#82071e; background:#ffebe9; }