/* Additive theme: Classic retains the existing layout and palette. */
.io-appearance { padding: 0 18px 10px; flex-shrink: 0; }
.io-appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.io-appearance-label { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.io-appearance-switch { display: flex; padding: 3px; border: 1px solid var(--line); background: #fff; border-radius: 26px; }
.io-appearance-switch button { min-height: 44px; padding: 0 13px; border: 0; border-radius: 22px; font: inherit; font-size: 12px; font-weight: 750; color: var(--ink); background: transparent; cursor: pointer; }
.io-appearance-switch button[aria-pressed='true'] { background: var(--accent); color: #fff; }
.io-appearance-switch button:focus-visible { outline: 3px solid #bc5c13; outline-offset: 2px; }
[data-appearance-status]:empty { display: none; }
[data-appearance-status] { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.io-lively-scene { display: none; }
:root[data-appearance='lively'] { --paper: #fff9ee; --ink: #28203c; --muted: #655669; --accent: #5735cf; --line: #e8dcce; --wash: #ede5ff; }
:root[data-appearance='lively'] body { background: #f1e9fc; }
:root[data-appearance='lively'] :is(.io-app,.io-landing,.io-main,.io-app-scroll) { background: var(--paper); }
:root[data-appearance='lively'] :is(.io-header,.io-app-header,.io-app-nav,.io-appearance) { background: var(--paper); }
:root[data-appearance='lively'] .io-wordmark span { color: #d92a60; }
:root[data-appearance='lively'] .io-lively-scene { display: flex; align-items: center; justify-content: space-between; gap: 6px; position: relative; overflow: hidden; padding: 14px 16px; margin: 0 0 16px; border-radius: 24px; background: #ffe29a; color: #28203c; }
.io-lively-scene div { position: relative; z-index: 1; flex: 1; }
.io-lively-scene small { display: block; font-size: 9px; font-weight: 850; letter-spacing: .08em; color: #55351e; }
.io-lively-scene strong { display: block; margin: 8px 0; font-size: 26px; line-height: 1.08; letter-spacing: -.04em; }
.io-lively-scene p { margin: 0; color: #55351e; font-size: 12px; line-height: 1.4; }
.io-lively-scene img { width: 116px; height: 116px; flex-shrink: 0; }
:root[data-appearance='lively'] .io-lively-scene img { animation: io-lively-float 2.2s ease-in-out 2; }
:root[data-appearance='lively'] .io-pinned-chat { border: 1px solid #c7b5f6; background: #eee5ff; box-shadow: 0 5px 0 #ded1f7; margin-bottom: 18px; }
:root[data-appearance='lively'] .io-chat-avatar { background: #5735cf; color: #fff; }
:root[data-appearance='lively'] .io-primary { background: #5735cf; box-shadow: 0 4px 0 #342073; border-color: #5735cf; }
:root[data-appearance='lively'] .io-downloads button:first-child { background: #d9f6e8; border-color: #9fd7bd; }
:root[data-appearance='lively'] .io-downloads button:last-child { background: #ffe4ea; border-color: #f0bfca; }
:root[data-appearance='lively'] .io-downloads button { border-radius: 16px; padding: 10px; }
:root[data-appearance='lively'] .io-home-tasks > button { padding-inline: 12px; margin-bottom: 6px; }
:root[data-appearance='lively'] #tasks-panel > .io-access-banner { display: none; }
:root[data-appearance='lively'] #tasks-panel .io-workspace-heading p:not(.io-eyebrow) { display: none; }
:root[data-appearance='lively'] #tasks-panel .io-workspace-heading h1 { font-size: 24px; margin-bottom: 12px; }
:root[data-appearance='lively'] .io-task-tile .io-tile-arrow { display: none; }
:root[data-appearance='lively'] .io-task-tile .io-tile-icon { align-self: flex-start; border-radius: 15px; background: #fff9; font-size: 25px; }
.io-tile-icon .io-lively-icon { display: none; }
:root[data-appearance='lively'] .io-tile-icon .io-classic-icon { display: none; }
:root[data-appearance='lively'] .io-tile-icon .io-lively-icon { display: inline; }
:root[data-appearance='lively'] .io-home-tasks button { background: #fff; border-radius: 16px; }
:root[data-appearance='lively'] .io-access-banner { background: #5735cf; color: #fff; border-color: #5735cf; }
:root[data-appearance='lively'] .io-access-banner small { color: #f2eaff; }
:root[data-appearance='lively'] .io-preview-pill { background: #ffe29a; color: #55351e; border-color: #e4bc60; }
:root[data-appearance='lively'] .io-task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border: 0; background: transparent; overflow: visible; }
:root[data-appearance='lively'] .io-task-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; min-height: 176px; padding: 16px; border: 1px solid #d6c8f0; border-radius: 22px; background: #ede5ff; text-align: left; box-shadow: 0 3px 0 #e3d6c6; }
:root[data-appearance='lively'] .io-task-tile:nth-child(2) { background: #d9f6e8; border-color: #b2dbc9; }
:root[data-appearance='lively'] .io-task-tile:nth-child(3) { background: #ffe4ea; border-color: #efc3ce; }
:root[data-appearance='lively'] .io-task-tile:nth-child(4) { background: #ffeab2; border-color: #e5ce8e; }
:root[data-appearance='lively'] .io-task-tile:nth-child(5) { background: #def0ff; border-color: #bfd9ee; grid-column: 1 / -1; min-height: 130px; }
:root[data-appearance='lively'] .io-task-tile::after { display: none; }
:root[data-appearance='lively'] .io-task-tile :is(strong,small) { white-space: normal; }
:root[data-appearance='lively'] .io-task-tile small { color: #51475f; }
:root[data-appearance='lively'] .io-app-nav [aria-current='page'] { color: #5735cf; background: #ede5ff; border-radius: 20px; }
:root[data-appearance='lively'] .io-work-result { background: #fff; }
@keyframes io-lively-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
:root[data-quiet='true'] .io-lively-scene img { animation: none; }
:root[data-appearance-sleeping='true'] .io-lively-scene img { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-appearance='lively']:not([data-quiet='true']) :is(.io-task-tile,.io-primary) { transition: transform 140ms ease; }
  :root[data-appearance='lively']:not([data-quiet='true']) :is(.io-task-tile,.io-primary):active { transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) { .io-lively-scene img { animation: none !important; } }
@media (max-width: 350px) { .io-appearance-label { font-size: 9px; } .io-appearance { padding-inline: 14px; } .io-lively-scene img { width: 96px; height: 96px; } .io-lively-scene strong { font-size: 23px; } }