/* Shared customer-page canvas and sign-in only. This file does not change
   authenticated data, account gates, panel geometry or uploaded media. */
:root { background: #f5f5f7; color: #242831; }
body { background: #f5f5f7; }
#persona-sandbox-banner { background: #f3f4f6; color: #5c6470; border-bottom-color: #e5e7eb; }
#persona-sandbox-banner strong { color: #424a56; }
#persona-sandbox-banner span { color: #717987; }
#toast { background: #2e3745; box-shadow: 0 12px 32px #2029381c; }
#toast.error { background: #ae4e49; }

:where(#app-shell) .mode-switch button { color: #858d99; }
:where(#app-shell) .ai-example-button,
:where(#app-shell) .text-button,
:where(#app-shell) .profile-public-links a { color: #71829a; }
:where(#app-shell) .ai-example-button:hover,
:where(#app-shell) .text-button:hover,
:where(#app-shell) .profile-public-links a:hover { color: #4c607c; }
:where(#app-shell) .ai-message-badge { color: #88929e; }
:where(#app-shell) .message-time { color: #a0a7b1; }

#auth-screen { background: #fff; color: #242831; }
#auth-screen .auth-story { background: #f2f3f5; color: #272d36; border-right: 1px solid #e5e7eb; }
#auth-screen .story-grid { background-image: none; }
#auth-screen .auth-story::before,
#auth-screen .auth-story::after { border-color: #dfe3e8; }
#auth-screen .brand,
#auth-screen .brand-light,
#auth-screen .brand strong,
#auth-screen .brand-light strong { color: #2b333f; }
#auth-screen .brand-mark,
#auth-screen .brand-light .brand-mark { background: #374151; box-shadow: none; }
#auth-screen .brand-mark span,
#auth-screen .brand-light .brand-mark span { background: #fff; }
#auth-screen .eyebrow,
#auth-screen .story-eyebrow { color: #738092; }
#auth-screen .story-copy h1,
#auth-screen .story-copy h1 em { color: #29313d; }
#auth-screen .story-copy > p:last-child { color: #74808d; }
#auth-screen .story-footer { color: #88909c; }
#auth-screen .sample-card { background: #fff; color: #384250; border: 1px solid #e5e7eb; box-shadow: 0 20px 50px #2834450c; }
#auth-screen .sample-avatar { background: #edf0f4; color: #536477; }
#auth-screen .sample-top small { color: #9099a5; }
#auth-screen .sample-signal { background: #8394a8; }
#auth-screen .sample-bubble-in { background: #f1f3f6; color: #455162; }
#auth-screen .sample-bubble-out { background: #e8eef6; color: #4b607b; }
#auth-screen .auth-panel h2 { color: #242c37; }
#auth-screen .auth-subtitle,
#auth-screen .auth-footnote { color: #8b929d; }
#auth-screen .auth-switch { background: #f1f2f4; }
#auth-screen .auth-switch button { color: #8a929e; }
#auth-screen .auth-switch button.active { background: #fff; color: #303a49; box-shadow: 0 2px 8px #26314309; }
#auth-screen .auth-form label { color: #525d6c; }
#auth-screen .auth-form input,
#auth-screen .auth-form select { background: #f8f9fa; border-color: #e0e4e9; color: #344050; }
#auth-screen .auth-form input::placeholder { color: #a1a8b2; }
#auth-screen .primary-button { background: #374151; color: #fff; box-shadow: none; }
#auth-screen .primary-button:hover { background: #29323f; box-shadow: 0 5px 16px #2c384412; }
#auth-screen .secondary-button { background: #eef1f5; color: #526174; }
#auth-screen .public-site-link { color: #71829a; }
#auth-screen .public-site-link:hover { color: #475c79; }

/* The original form sheet uses important focus colors. Override only those
   color/ring declarations; measured chat heights and visibility are untouched. */
:is(#auth-screen, #view-profile, #ai-memory-panel, #ai-scene-panel, #view-bottles, #view-posts) :is(input, textarea, select):focus,
#ai-form input:focus { border-color: #91a0b4 !important; box-shadow: 0 0 0 3px #7f91ad12 !important; }