@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/noto-sans-thai.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/noto-sans-thai-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Shared application chrome. Public creator themes and OBS overlays stay scoped. */
:root { --ux-focus: #8ce8d0; --ux-font: 'Noto Sans Thai', system-ui, sans-serif; }
body.product-shell, body.auth-page {
  --neon-blue: #7fe2cc;
  --neon-green: #93e8b3;
  --neon-pink: #f0b9a2;
  --bg-dark: #0b1220;
  --bg-card: #121d2e;
  --border-glow: #2b3b50;
  --text-muted: #a4b3c6;
  background: var(--bg-dark);
  color: #edf3fa;
  font: 400 15px/1.65 var(--ux-font);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
body.product-shell *, body.auth-page * { box-sizing: border-box; }
body.product-shell button, body.product-shell input, body.product-shell textarea,
body.product-shell select, body.auth-page button, body.auth-page input { font-family: var(--ux-font); }
button, a, input, select, textarea, [tabindex] { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ux-focus); outline-offset: 3px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 1001; padding: 12px 20px; background: #a2f0dd; color: #10231f; border-radius: 10px; font: 600 15px var(--ux-font); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; border: 0; }
.product-shell .sidebar { width: 246px; padding: 30px 16px 20px; border-color: #263447; background: #0e1827; overflow-y: auto; z-index: 40; }
.product-shell .logo, .auth-page .logo {
  display: flex; align-items: center; gap: 10px; padding: 0 12px 22px;
  background: none; -webkit-text-fill-color: currentColor; color: #f5fafc;
  font: 700 23px/1.2 var(--ux-font); letter-spacing: -.7px;
}
.product-shell .logo-sub { margin: -12px 12px 22px; color: #a4b3c6; font: 600 11px var(--ux-font); letter-spacing: 1.5px; }
.brand-symbol { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #7fe2cc; color: #143b34; flex-shrink: 0; }
.brand-symbol svg { width: 22px; height: 22px; }
.product-shell .nav { gap: 5px; }
.product-shell .nav a { min-height: 46px; padding: 11px 12px; border-radius: 10px; color: #aebdd0; font: 500 14px/1.5 var(--ux-font); gap: 12px; transition: background-color .18s, color .18s; }
.product-shell .nav a:hover { color: #f4fafc; background: #172638; }
.product-shell .nav a.active { color: #a3efdb; background: #1b3738; border-color: #315956; }
.nav-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.product-shell .nav .badge { background: #efb8a3; color: #422a24; font: 700 11px var(--ux-font); padding: 2px 7px; }
.nav-section, .product-shell .nav-group { padding: 20px 12px 5px; font: 600 11px var(--ux-font); color: #94a8bf; letter-spacing: .3px; }
.product-shell .user-chip { margin-top: 24px; padding: 18px 12px 0; border-color: #263447; font-size: 13px; overflow-wrap: anywhere; }
.product-shell .user-chip .name { color: #e5edf5; font-weight: 600; }
.product-shell .logout { font: 500 13px var(--ux-font); min-height: 44px; display: inline-flex; align-items: center; color: #b8c6d6; cursor: pointer; background: none; border: 0; }
.product-shell .main { min-width: 0; padding: 38px clamp(22px, 3.4vw, 56px); }
.product-shell .main > * { max-width: 1180px; }
.product-shell .view-title { color: #f2f7fb; font: 600 clamp(24px, 2.2vw, 30px)/1.4 var(--ux-font); letter-spacing: -.7px; text-transform: none; margin-bottom: 25px; }
.product-shell .card { background: #121d2e; border-color: #2a394d; border-radius: 16px; padding: 22px; margin-bottom: 20px; box-shadow: 0 4px 16px #0000000a; }
.product-shell .card-title { font: 600 14px/1.6 var(--ux-font); text-transform: none; letter-spacing: 0; color: #b5c3d4; margin-bottom: 14px; }
.product-shell .stat-big { font: 600 clamp(24px, 2.4vw, 32px)/1.4 var(--ux-font); color: #f3f7fb; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.product-shell .stat-big.green { color: #91e4c5; }
.product-shell .stat-sub, .product-shell .muted { color: #a4b3c6; font-size: 13px; }
.product-shell .grid-2, .product-shell .grid-3 { gap: 18px; }
.product-shell .grid-2 > *, .product-shell .grid-3 > * { min-width: 0; }
.product-shell .field label { font: 500 14px/1.6 var(--ux-font); color: #c6d3e1; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.product-shell .inp { min-height: 46px; font-size: 15px; line-height: 1.6; background: #0e1827; border-color: #35465c; color: #f1f6fa; border-radius: 9px; padding: 11px 13px; }
.product-shell .inp:focus { border-color: #7fe2cc; box-shadow: 0 0 0 3px #7fe2cc16; }
.product-shell .inp::placeholder { color: #8fa1b8; opacity: 1; }
.product-shell select.inp option { background: #121d2e; color: #f1f6fa; }
.product-shell .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 17px; border-radius: 9px; font: 600 14px/1.4 var(--ux-font); letter-spacing: 0; text-transform: none; color: #103a31; background: #7fe2cc; border: 1px solid #7fe2cc; text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s; }
.product-shell .btn:hover { filter: brightness(1.06); transform: none; }
.product-shell .btn.ghost, .product-shell .btn.blue, .product-shell .btn.small.blue { background: #14283a; color: #b5e8e0; border-color: #3a5962; }
.product-shell .btn.danger, .product-shell .btn.red { background: #362330; color: #ffb5be; border-color: #78505c; }
.product-shell .btn.small { min-height: 40px; font-size: 13px; padding: 8px 12px; }
.product-shell button:disabled, .product-shell .btn:disabled { opacity: .55; cursor: wait; filter: none; }
.product-shell .row { flex-wrap: wrap; gap: 10px; }
.product-shell .mono { overflow-wrap: anywhere; }
.product-shell table { width: 100%; font-size: 14px; border-collapse: collapse; }
.product-shell th { font: 500 12px/1.6 var(--ux-font); color: #acbfd2; letter-spacing: 0; text-transform: none; background: #101b2a; }
.product-shell th, .product-shell td { padding: 13px 12px; border-color: #26364b; }
.product-shell tbody tr:hover { background: #1a2a3d77; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 10px; }
.table-scroll:focus-visible { outline-offset: -3px; }
.product-shell .toast { z-index: 300; bottom: 24px; max-width: calc(100vw - 32px); background: #193a32; border-color: #629e88; color: #c1f6e2; font: 500 14px/1.6 var(--ux-font); box-shadow: 0 8px 30px #0005; }
.product-shell .toast.err { background: #39232c; border-color: #a66777; color: #ffc5cc; }
.product-shell .wtype-card { border-radius: 13px; background: #152235; border-color: #304459; padding: 17px; min-width: 0; transition: border-color .18s, background .18s; }
.product-shell .wtype-card:hover { border-color: #6aaf9f; background: #1b303e; transform: none; }
.product-shell .wtype-card.active { border-color: #7fe2cc; background: #1b363c; }
.product-shell .wtype-card .wt-name { font-family: var(--ux-font); letter-spacing: 0; }
.product-shell .wtype-card .wt-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: #203b42; color: #a1e3d3; }
.product-shell .wtype-card .wt-icon svg { width: 22px; height: 22px; }
.product-shell .wtype-card .wt-sub { color: #afc0d4; font-size: 12px; }
.product-shell .widget-gallery-head { padding: 22px 24px; border: 1px solid #2d4859; border-radius: 18px; background: linear-gradient(110deg, #142c35, #0d1727 80%); margin-bottom: 22px !important; }
.product-shell .widget-gallery-head .studio-art { border: 0; mix-blend-mode: lighten; }
.product-shell .preview-wrap, .product-shell .preview-stage { border-radius: 13px; }
.product-shell .cfg-hdr { min-height: 46px; padding: 13px 16px; font: 600 14px/1.5 var(--ux-font); letter-spacing: 0; }
.product-shell .cfg-bd { padding: 18px; }
.product-shell .img-zone div:last-child { color: #afc0d4 !important; }
.studio-art { display: block; width: min(100%, 480px); height: auto; object-fit: contain; border-radius: 16px; }
.shell-mobile-header, .shell-backdrop, .shell-close { display: none; }
.auth-page::before { display: none; }
.auth-page { background: radial-gradient(ellipse at 10% 15%, #163a3e 0, transparent 45%), #0b1220; }
.auth-page .auth-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: 70px; width: min(1050px, 100%); margin: 48px auto; position: relative; }
.auth-page .auth-intro h1 { font: 600 clamp(32px, 4vw, 48px)/1.4 var(--ux-font); letter-spacing: -1px; margin: 12px 0 18px; }
.auth-page .auth-intro p { max-width: 430px; color: #adbdcf; font-size: 16px; line-height: 1.85; }
.auth-page .auth-eyebrow { color: #9fead6; font: 600 12px var(--ux-font); letter-spacing: 2px; }
.auth-page .auth-intro img { width: 100%; max-width: 490px; height: auto; border-radius: 24px; margin-top: 20px; }
.auth-page .card { max-width: none; border-color: #32445c; border-radius: 22px; background: #132033; padding: 32px; box-shadow: 0 25px 100px #0003; }
.auth-page .logo { justify-content: center; margin: 0 0 16px; padding: 0; }
.auth-page .auth-heading { text-align: center; font-size: 21px; font-weight: 600; margin: 8px 0; }
.auth-page .auth-description { font-size: 14px; color: #afbed0; text-align: center; margin-bottom: 24px; }
.auth-page .tabs { gap: 6px; margin-bottom: 24px; }
.auth-page .tab { min-height: 44px; font: 500 13px/1.4 var(--ux-font); letter-spacing: 0; color: #becbd9; padding: 9px; }
.auth-page .tab.active { color: #a4efdc; background: #1d393d; border-color: #578f85; }
.auth-page .field { margin-bottom: 20px; }
.auth-page .field label { color: #cbd7e5; font: 500 14px var(--ux-font); letter-spacing: 0; margin-bottom: 9px; }
.auth-page .field input { background: #0e192b; border-color: #3a4e68; color: #f2f7fb; font: 400 16px var(--ux-font); min-height: 48px; padding: 12px 14px; }
.auth-page .field input::placeholder { color: #9bacc1; }
.auth-page .password-wrap { position: relative; }
.auth-page .password-wrap input { padding-right: 65px; }
.auth-page .password-toggle { position: absolute; right: 7px; top: 4px; min-width: 48px; height: 42px; border: 0; background: transparent; color: #9ce5d2; font-size: 12px; cursor: pointer; border-radius: 6px; }
.auth-page .btn { background: #8ce5ce; color: #153b33; font: 600 15px var(--ux-font); letter-spacing: 0; min-height: 48px; border-radius: 10px; }
.auth-page .error { color: #ffbec8; font: 400 14px/1.6 var(--ux-font); }
.auth-page .auth-back { display: block; text-align: center; color: #b8d9df; margin-top: 20px; font-size: 14px; text-underline-offset: 4px; }
.auth-page .auth-note { margin-top: 20px; color: #a9bbce; text-align: center; font-size: 12px; line-height: 1.75; }
.network-notice { padding: 12px 18px; background: #413323; border-bottom: 1px solid #82663c; color: #ffe0a8; font: 500 14px/1.6 var(--ux-font); text-align: center; }
.network-notice[hidden], .hidden { display: none !important; }
.account-page .container { max-width: 960px; padding-top: 40px; }
.account-page .topbar { flex-wrap: wrap; }
.account-page .logo { padding: 0; text-decoration: none; }
.account-page .tabs { flex-wrap: wrap; }
.account-page .tab { min-height: 44px; font: 500 14px var(--ux-font); letter-spacing: 0; color: #b9cbdc; }
.account-page .tab.active { color: #9fead6; border-color: #609f91; }
.account-page .acct-head { flex-wrap: wrap; }
.account-page .acct-name, .account-page .muted { overflow-wrap: anywhere; }
.account-page .stat-num, .account-page .amount-cell, .account-page .status-pill { font-family: var(--ux-font); }
.account-page .stat-lbl { color: #acbfd2; font-size: 13px; }
.account-page .status-pill { white-space: nowrap; }
@media (max-width: 760px) {
  html body.donor-journey .creator-panel { padding: 18px; }
  html body.donor-journey .creator-cover { height: 68px; margin: -18px -18px 0; }
  html body.donor-journey .creator-identity { display: flex; align-items: center; gap: 12px; margin-top: 14px; text-align: left; }
  html body.donor-journey .streamer-avatar { width: 56px; height: 56px; min-width: 56px; margin: 0; font-size: 24px; border-width: 2px; }
  html body.donor-journey .identity-copy { padding: 0; min-width: 0; }
  html body.donor-journey .streamer-name { font-size: 23px; margin: 3px 0; }
  html body.donor-journey .creator-eyebrow { font-size: 10px; }
  html body.donor-journey .creator-welcome { font-size: 13px; margin: 12px 0 0; }
  html body.donor-journey #page-content > .stats-card,
  html body.donor-journey #page-content > .history-card { order: 2; width: 100%; margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 16px); }
  html body.donor-journey #page-content > .history-card { order: 3; }
  html body.donor-journey .donation-column { order: 1; }
  html body.donor-journey .powered { order: 4; }
}
@media (max-width: 1100px) {
  .product-shell .sidebar { width: 218px; padding-inline: 12px; }
  .product-shell .main { padding: 30px 22px; }
}
@media (max-width: 800px) {
  .product-shell .layout { display: block; min-height: calc(100dvh - 66px); }
  .product-shell .main { padding: 24px 18px; width: 100%; }
  .product-shell .main > * { min-width: 0; }
  .product-shell .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: min(300px, 86vw); padding: 24px 18px; transform: translateX(-105%); visibility: hidden; transition: transform .2s, visibility .2s; z-index: 202; }
  .product-shell.menu-open .sidebar { transform: translateX(0); visibility: visible; transition: transform .2s; }
  .product-shell .sidebar .logo { font-size: 23px; padding: 0 10px 22px; padding-right: 25px; }
  .product-shell .sidebar .nav a span.txt, .product-shell .sidebar .user-chip { display: block; }
  .product-shell .sidebar .nav a { min-height: 47px; }
  .product-shell .shell-mobile-header { display: flex; position: sticky; top: 0; z-index: 35; background: #0e1827f5; border-bottom: 1px solid #2b3b50; padding: 10px 18px; height: 66px; align-items: center; justify-content: space-between; gap: 16px; backdrop-filter: blur(16px); }
  .shell-mobile-header .shell-wordmark { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.5px; color: #f4f8fb; text-decoration: none; }
  .shell-menu-button, .shell-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; border: 1px solid #42566d; background: #18283b; color: #e7f1f8; border-radius: 9px; padding: 8px 12px; cursor: pointer; font: 500 14px var(--ux-font); }
  .shell-close { position: absolute; right: 16px; top: 20px; }
  .shell-backdrop { display: block; position: fixed; inset: 0; z-index: 201; background: #050b16aa; border: 0; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  .product-shell.menu-open .shell-backdrop { opacity: 1; visibility: visible; }
  .product-shell.menu-open { overflow: hidden; }
  .product-shell .grid-3 { grid-template-columns: 1fr; }
  .product-shell .card { padding: 18px; border-radius: 14px; }
  .product-shell .view-title { font-size: 25px; margin-bottom: 20px; }
  .product-shell .btn.small { min-height: 44px; }
  .product-shell .inp { font-size: 16px; }
  .auth-page .auth-layout { grid-template-columns: 1fr; max-width: 460px; gap: 0; margin: 24px auto; }
  .auth-page .auth-intro { display: none; }
  .auth-page .card { padding: 28px 22px; }
}
@media (max-width: 520px) {
  .product-shell .main { padding: 20px 14px; }
  .product-shell .grid-2 { grid-template-columns: 1fr; }
  .product-shell .card { padding: 16px; }
  .product-shell .stat-big { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}