/* Papel granulado: botanical illustration, clear glass, and service-colored ink. */
.auth-stack { max-width: 440px; }
.auth-stack .auth-card { padding: 38px 36px 30px; border-radius: 26px; background: #ffffff24; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-align: left; }
.auth-apple { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #a32b3c; margin-bottom: 26px; }
.auth-apple img { width: 29px; height: 29px; }
.auth-eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: .15em; color: #857148; }
.auth-card h1 { margin: 0 0 18px; font-size: clamp(30px, 5vw, 38px); line-height: 1.13; letter-spacing: -.04em; color: #a42536; font-weight: 500; }
.auth-card .welcome-subtitle { margin: 0 0 28px; font-size: 14px; line-height: 1.75; color: #625f5b; }
.auth-card .btn-twitch-lg { display: flex; width: 100%; gap: 10px; padding: 14px 16px; font-size: 14px; border-radius: 11px; }
@media(max-width:650px) { .auth-stack .auth-card { padding: 30px 25px 26px; } }
:root {
  --bg: #faf3e3; --surface: #fffaf0ed; --surface-elevated: #fff9eb;
  --surface-soft: #eee6d766; --border: #bba77e45; --border-bright: #a58b5d80;
  --text: #303744; --muted: #736d68; --green: #35734b; --red: #a42536;
  --amber: #96702d; --shadow: 0 18px 50px #6554371c;
}
body { font-family: "Plus Jakarta Sans", sans-serif; background: #faf3e3 url('/botanical-frame.jpg') center / cover fixed no-repeat; }
body::before, body::after { content: none; }
.topbar { background: #fff9ec73; border-color: var(--border); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.brand, .brand-title { color: var(--text); font-weight: 500; }
.tab-btn { color: var(--muted); }
.tab-btn.active { color: #9d2938; background: #fff8e8a1; border-color: #a4253640; }
.btn { font-weight: 400; }
.btn-twitch { background: #a32b3c; color: #fff9ec; box-shadow: none; }
.btn-twitch:hover { background: #8e2232; box-shadow: none; }
.btn-ghost, .btn-secondary { color: #545b53; background: #fff8e7; border-color: var(--border); }
.btn-danger { color: #9f2b3b; background: #a32b3c0a; border-color: #a32b3c40; }
.container { position: relative; }
#panel-welcome { min-height: calc(100vh - 100px); padding: 60px 0 90px; }
.welcome-stack { width: min(100%, 730px); }
.storybook-panel { padding: 30px 32px 22px; border: 1px solid #ffffffb3; border-radius: 25px; background: #ffffff24; box-shadow: inset 0 1px 0 #ffffffe0, 0 20px 55px #51462f20; backdrop-filter: blur(3px) saturate(110%); -webkit-backdrop-filter: blur(3px) saturate(110%); }
.welcome-card { background: #fffaf075; border: 1px solid #ffffffbf; box-shadow: var(--shadow); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 36px; }
.storybook-panel .welcome-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; overflow: visible; }
.welcome-heading { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 22px; align-items: center; text-align: right; margin-bottom: 28px; }
.welcome-heading h1 { margin: 0 0 8px; font-size: 31px; font-weight: 500; letter-spacing: -.7px; line-height: 1.25; color: #a42536; }
.subscription-summary { margin: 0; color: #66616a; font-size: 12px; }
.welcome-heading .avatar-story-wrap { width: 64px; height: 64px; margin: 0; }
.welcome-heading .avatar-lg { width: 64px; height: 64px; border: 2px solid #b38c4d; border-radius: 50%; padding: 0; margin: 0; }
.avatar-fallback { display: grid; place-items: center; background: #e6d8bb; color: #705838; font-size: 24px; }
.verification-badge { position: absolute; right: -10px; bottom: 0; display: grid; place-items: center; width: 26px; height: 26px; padding: 4px; border: 2px solid #f4eddf; border-radius: 50%; background: #d5d4ce; color: #777d78; cursor: help; }
.verification-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.verification-badge [role=tooltip] { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); background: #303744; color: #fff9ec; padding: 5px 9px; border-radius: 6px; font: 12px "Plus Jakarta Sans",sans-serif; }
.verification-badge:hover [role=tooltip], .verification-badge:focus-visible [role=tooltip] { display: block; }
.storybook-panel .welcome-subtitle { margin: 0 0 25px; color: var(--text); font-size: 14px; }
.storybook-panel .community-invites { position: static; display: grid; gap: 12px; }
.storybook-panel .community-invite { --service: #234f6b; position: relative; isolation: isolate; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 17px; align-items: center; padding: 20px 17px; background: var(--service); border: 0; border-radius: 15px; box-shadow: inset 0 1px 0 #ffffff38,0 6px 15px #33444114; backdrop-filter: none; color: #fffaf0; }
.storybook-panel .whatsapp-invite { --service: #2f5945; }
.storybook-panel .discord-invite { --service: #484469; }
.storybook-panel .community-invite::before, .streamer-item::before { content: ''; position: absolute; inset: 0; background: url('/grain.svg') repeat; opacity: .2; mix-blend-mode: soft-light; pointer-events: none; z-index: -1; border-radius: inherit; }
.storybook-panel .telegram-mark, .storybook-panel .whatsapp-mark, .storybook-panel .discord-mark { width: 42px; height: 42px; background: transparent; box-shadow: none; border-radius: 0; color: #fff; }
.storybook-panel .invite-copy strong { color: #fffaf0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.storybook-panel .invite-copy span { display: none; }
.storybook-panel .community-invite form { margin: 0; }
.storybook-panel .community-invite .btn { position: static; padding: 10px 4px; min-height: auto; color: #fffaf0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; text-decoration: none; transform: none; }
.storybook-panel .community-invite a.btn::after, .storybook-panel .community-invite form .btn::after { content: ''; position: absolute; inset: 0; border-radius: 15px; }
.storybook-panel .community-invite:has(a.btn):hover, .storybook-panel .community-invite:has(form .btn):hover { filter: brightness(1.08); }
.storybook-panel .community-invite:has(:focus-visible) { outline: 3px solid #294b77; outline-offset: 4px; }
.storybook-panel .is-locked .invite-lock { background: #24334299; border-radius: inherit; }
.storybook-panel .invite-lock span { color: #fffaf0; background: #26323ced; border-color: #fff3; }
.storybook-panel .invite-lock svg { stroke: #e5c992; }
.storybook-panel .invite-unavailable { display: block; background: #4c4954; font-size: 13px; }
.welcome-footer { margin: 26px 0 0; font-size: 12px; color: #766a56; }
#panel-streamer { padding: 28px; border: 1px solid #ffffffbf; border-radius: 24px; background: #fffaf075; box-shadow: var(--shadow); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.card { background: #fffaf0ed; border-color: #ffffffbf; box-shadow: none; backdrop-filter: none; }
.streamer-item { position: relative; isolation: isolate; overflow: hidden; background: #484469; color: #fff7ea; border: 0; border-radius: 14px; padding: 20px; }
.streamer-item .muted { color: #d0cad9; }
.streamer-item .btn { color: #fff7ea; background: transparent; border-color: #ffffff40; }
.pill-connected { background: #e0f1db; color: #326b42; border-color: #91b38d; }
.pill-live { background: #ffe2d9; color: #963d3d; }
.pill-sub { background: #ede4cb; color: #6d592d; }
.pill-role, .pill-badge { background: #e8e2ed; color: #655574; }
.pill-disconnected { background: #e6e1d6; color: #6d665e; }
.subtab-btn { background: transparent; color: var(--muted); border-color: transparent; border-radius: 0; font-weight: 500; }
.subtab-btn.active { background: transparent; color: #a32b3c; border-color: transparent; border-bottom-color: #a32b3c; }
input, select { background: #fffaf0; color: #414b49; border-color: #bfb39c80; }
.data-table th { background: #eee7d8; color: #807461; font-weight: 500; }
.data-table td { border-color: #d2c5aa40; }
.data-table tbody tr:hover { background: #eee6d744; }
.messages-feed { background: #fffaf0; border-color: var(--border); }
.setup-banner { background: #fff5d9; }
.alert-banner { background: #f7e1df; color: #8e2937; }
.alert-banner.success { background: #e1efdf; color: #376142; }
@media(max-width:650px) {
  #panel-welcome { padding: 32px 0 65px; }
  .storybook-panel { padding: 26px 21px 20px; }
  .welcome-heading { grid-template-columns: minmax(0,1fr) 50px; gap: 14px; }
  .welcome-heading h1 { font-size: 25px; }
  .welcome-heading .avatar-story-wrap, .welcome-heading .avatar-lg { width: 50px; height: 50px; }
  .storybook-panel .community-invite { grid-template-columns: 32px minmax(0,1fr); padding: 18px 14px; gap: 12px; }
  .storybook-panel .telegram-mark, .storybook-panel .whatsapp-mark, .storybook-panel .discord-mark { width: 32px; height: 32px; }
  .storybook-panel .community-invite .btn, .storybook-panel .community-invite form { grid-column: 2; justify-self: start; width: auto; }
  .storybook-panel .invite-lock span { white-space: normal; text-align: center; }
  #panel-streamer { padding: 18px 12px; }
  .streamer-item { flex-wrap: wrap; padding: 16px; }
}
@media(prefers-reduced-motion:reduce) { .brand-apple img { animation: none; } }