@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
/* Streamer-owned templates. Stable keys preserve existing saved preferences. */
html[data-theme] { --font-body: 'Noto Sans Thai', 'DM Sans', sans-serif; --font-head: var(--font-body); --text: #f0effa; --muted: #aaa8c4; --surface: #181724; --surface-soft: #211f31; --line: #ffffff14; --field-bg: #11101e; --accent: #b69afa; --accent-rgb: 182,154,250; --accent-2: #ec8cbd; --accent2-rgb: 236,140,189; --accent-3: #69d6ac; --accent3-rgb: 105,214,172; --bg-card: var(--surface); --bg-dark: #0e0d17; --page-bg: #0e0d17; --border-glow: var(--line); --grad: linear-gradient(115deg,#8b5cf6,#d56bb1); --btn-text: #fff; --name-grad: linear-gradient(var(--text),var(--text)); --radius: 22px; --grid-color: transparent; --orb-1: #7040cf20; --orb-2: #b84b9120; color-scheme: dark; }
html[data-theme="cyberpunk"] { --surface: #101e36; --surface-soft: #192a45; --field-bg: #0a182e; --text: #f4f7ff; --muted: #a5b6d0; --accent: #91bcff; --accent-rgb: 145,188,255; --accent-2: #91bcff; --accent2-rgb: 145,188,255; --page-bg: #071224; --grad: linear-gradient(110deg,#377cf0,#5769e8); --orb-1: #245faa25; --orb-2: #665be51a; }
html[data-theme="wave"] { --surface: #fff; --surface-soft: #fff4f7; --field-bg: #faf7f9; --text: #382c34; --muted: #7c6773; --line: #ecdfe6; --accent: #bc376c; --accent-rgb: 188,55,108; --accent-2: #bc376c; --accent2-rgb: 188,55,108; --accent-3: #278568; --accent3-rgb: 39,133,104; --page-bg: radial-gradient(ellipse at 0 0,#fbe1ec,transparent 55%),#fffafb; --grad: linear-gradient(110deg,#ce4d7e,#b8396c); --orb-1: transparent; --orb-2: transparent; color-scheme: light; }
html[data-theme="arcade"] { --surface: #fff; --surface-soft: #f1f6f3; --field-bg: #f8faf9; --text: #203c33; --muted: #64786f; --line: #dce6e0; --accent: #286650; --accent-rgb: 40,102,80; --accent-2: #286650; --accent2-rgb: 40,102,80; --accent-3: #286650; --accent3-rgb: 40,102,80; --page-bg: #f3f6f3; --grad: linear-gradient(110deg,#2f6c57,#245340); --orb-1: transparent; --orb-2: transparent; --radius: 12px; color-scheme: light; }
html[data-theme="premium"] { --surface: #18191b; --surface-soft: #222222; --field-bg: #101113; --text: #eee9df; --muted: #aaa69d; --line: #ffffff18; --accent: #d4b87e; --accent-rgb: 212,184,126; --accent-2: #d4b87e; --accent2-rgb: 212,184,126; --page-bg: #0d0f11; --grad: linear-gradient(110deg,#e6cc93,#c6a56e); --btn-text: #252017; --orb-1: transparent; --orb-2: transparent; --radius: 16px; }
body { color: var(--text); font: 14px/1.65 var(--font-body); background: var(--page-bg); }
[data-theme="wave"] body { background-size: auto; animation: none; }
body::before { background-image: none; }
.donate-topbar { position: relative; z-index: 1; max-width: 1120px; padding: 26px 24px 20px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.donate-brand { display: flex; align-items: center; text-decoration: none; gap: 9px; color: var(--text); font: 800 25px/1 'DM Sans',sans-serif; letter-spacing: -1px; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 32px; border-radius: 10px 10px 10px 2px; color: var(--btn-text); background: var(--grad); font-size: 19px; }
.brand-dot { color: var(--accent); margin-left: -9px; }
.topbar-caption { color: var(--muted); font-size: 12px; }
.container { max-width: 1120px; padding: 10px 24px 36px; }
#page-content { display: grid; grid-template-columns: minmax(0,350px) minmax(0,1fr); gap: 24px; align-items: start; }
.creator-panel, .donate-sheet { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 60px #00000012; overflow: hidden; min-width: 0; }
.creator-panel { padding: 26px; }
.donation-column { min-width: 0; }
.header { padding: 0; margin: 0; text-align: left; }
.creator-cover { height: 120px; background: linear-gradient(130deg,#54348d,#362e67,#9d4a81); margin: -26px -26px 0; position: relative; overflow: hidden; }
.cover-orbit { position: absolute; width: 200px; height: 200px; border: 28px solid #ffffff13; border-radius: 50%; top: -90px; right: -55px; box-shadow: 0 0 0 20px #ffffff06; transform: rotate(-25deg); }
.cover-label { display: none; position: absolute; left: 32px; top: 36px; max-width: 360px; font: 800 38px/1.1 'DM Sans',sans-serif; letter-spacing: -1px; color: #fff; }
.creator-identity { position: relative; padding-top: 0; }
.streamer-avatar { width: 86px; height: 86px; margin: -38px 0 18px; border: 5px solid var(--surface); background: var(--grad); color: #fff; border-radius: 50%; font: 700 28px var(--font-body); }
.streamer-avatar img { border-radius: inherit; }
.creator-eyebrow { display: block; color: var(--accent); font: 600 10px/1.5 'DM Sans',sans-serif; letter-spacing: 1.7px; margin-bottom: 7px; }
.streamer-name { font: 700 24px/1.4 var(--font-body); letter-spacing: -.6px; background: none; -webkit-text-fill-color: var(--text); color: var(--text); overflow-wrap: anywhere; }
.streamer-sub { font-size: 12px; letter-spacing: 0; color: var(--muted); overflow-wrap: anywhere; }
.live-badge { font: 700 10px var(--font-body); letter-spacing: 1px; margin: 12px 0 0; }
.streamer-bio, .creator-welcome { font-size: 13px; line-height: 1.8; color: var(--muted); margin-top: 16px; white-space: pre-line; overflow-wrap: anywhere; }
.social-section { border-top: 0; padding-top: 0; margin-top: 20px; }
.social-heading { font: 500 12px var(--font-body); color: var(--muted); }
.social-grid { justify-content: flex-start; margin-top: 8px; gap: 6px; }
.social-link { border: 1px solid var(--line); background: var(--surface-soft); color: var(--text); font-size: 12px; padding: 6px 11px; min-height: 36px; border-radius: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: none; }
.card::before { display: none; }
.creator-panel .card { padding: 22px 0 0; margin: 22px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.stats-row { gap: 10px; }
.stat-box { background: var(--surface-soft); padding: 14px 8px; border: 0; border-radius: 12px; text-align: left; }
.stat-value { font: 700 22px/1.4 'DM Sans',sans-serif; color: var(--text); }
.stat-label { font-size: 11px; letter-spacing: 0; color: var(--muted); margin-top: 4px; }
.section-title { justify-content: space-between; flex-wrap: wrap; text-transform: none; color: var(--text); letter-spacing: 0; font: 600 13px var(--font-body); }
.section-title h2 { font: inherit; }
.section-title::after { display: none; }
.feed-refresh { border: 0; background: var(--surface-soft); color: var(--muted); padding: 6px 9px; border-radius: 8px; }
.donation-item { background: var(--surface-soft); border-color: var(--line); padding: 10px; }
.donor-avatar { font: 600 14px var(--font-body); color: var(--btn-text); background: var(--grad); width: 30px; height: 30px; }
.donor-name { font-size: 12px; color: var(--text); }
.donor-msg, .feed-empty { color: var(--muted); font-size: 12px; }
.donor-amount { font: 600 13px var(--font-body); color: var(--accent-3); }
.feed-empty { text-align: left; padding: 10px 0; line-height: 1.8; }
.donate-sheet { padding: 30px; }
.donate-intro { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.donate-intro h2 { font: 700 22px/1.6 var(--font-body); letter-spacing: -.5px; overflow-wrap: anywhere; }
.donate-intro h2 span { color: var(--accent); }
.donate-intro p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.donate-step { padding: 22px 0; border-bottom: 1px dashed var(--line); }
.step-heading { display: flex; align-items: center; gap: 10px; font: 600 15px/1.6 var(--font-body); margin-bottom: 16px; }
.step-number { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border-radius: 9px; background: rgba(var(--accent-rgb),.13); color: var(--accent); font: 700 12px 'DM Sans',sans-serif; }
.amount-grid { gap: 8px; margin-bottom: 12px; }
.amount-btn { color: var(--text); font: 600 15px var(--font-body); padding: 14px 4px; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 11px; min-height: 50px; box-shadow: none; }
.amount-btn .baht { display: inline; font-size: inherit; opacity: 1; margin-right: 3px; }
.amount-btn.active, .pay-tab.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),.12); box-shadow: 0 0 0 1px var(--accent); }
.amount-btn:hover, .pay-tab:hover { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),.06); }
.cyber-input { background: var(--field-bg); color: var(--text); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; min-height: 48px; font: 400 14px/1.6 var(--font-body); resize: vertical; }
.cyber-input::placeholder { color: var(--muted); opacity: .8; }
.cyber-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12); }
.field-label { display: block; font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 8px; }
.optional-label { color: var(--muted); font-weight: 400; }
.field-group { margin-bottom: 16px; }
.message-field { margin-bottom: 0; }
.message-count { text-align: right; color: var(--muted); font: 400 11px 'DM Sans',sans-serif; margin-top: 6px; }
.custom-amount-wrap .baht-symbol { font: 600 16px var(--font-body); color: var(--muted); }
.amount-hint { text-align: left; color: var(--muted); font-size: 11px; margin-top: 9px; }
.pay-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; color: var(--text); border-color: var(--line); background: var(--surface-soft); border-radius: 11px; font-family: var(--font-body); }
.pay-tab .pay-icon { font-size: 19px; margin: 0; }
.pay-tab .pay-name { font: 500 12px var(--font-body); letter-spacing: 0; }
.payment-explanation { margin-top: 12px; font-size: 12px; color: var(--muted); padding: 12px; border-radius: 9px; background: var(--field-bg); }
.donate-checkout { padding-top: 20px; }
.checkout-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.checkout-total strong { font: 700 24px 'DM Sans',sans-serif; color: var(--text); }
.submit-btn { font: 600 15px var(--font-body); letter-spacing: 0; text-transform: none; border-radius: 11px; min-height: 52px; box-shadow: none; }
.checkout-note { color: var(--muted); font-size: 11px; text-align: center; margin-top: 10px; }
.powered { grid-column: 1/-1; font: 600 10px 'DM Sans',sans-serif; letter-spacing: 1px; color: var(--muted); margin-top: 8px; }
.footer-note { display: block; color: var(--muted) !important; font: 400 11px var(--font-body); margin-top: 7px; letter-spacing: 0; }
.not-accepting { background: var(--surface); border-color: var(--line); color: var(--muted); padding: 32px 24px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* The local StreamGift reference: purple split panels, star field and soft glass. */
[data-theme="glass"] body::before { background-image: radial-gradient(1px 1px at 20% 15%,#e7c8ff80 50%,transparent),radial-gradient(1px 1px at 70% 45%,#c9bcff60 50%,transparent),radial-gradient(1px 1px at 45% 80%,#ffffff60 50%,transparent); background-size: 170px 210px,230px 270px,310px 330px; }
[data-theme="glass"] .creator-panel { position: sticky; top: 24px; }
[data-theme="glass"] .creator-panel, [data-theme="glass"] .donate-sheet { background: #181724ec; backdrop-filter: blur(16px); }
/* Banner-led creator page, inspired by the reference's clear profile hierarchy. */
[data-theme="cyberpunk"] #page-content { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); }
[data-theme="cyberpunk"] .creator-panel { display: contents; }
[data-theme="cyberpunk"] .header { grid-column: 1/-1; border: 1px solid var(--line); border-radius: 22px; padding: 0 32px 28px; background: var(--surface); overflow: hidden; }
[data-theme="cyberpunk"] .creator-cover { height: 190px; margin: 0 -32px; background: radial-gradient(ellipse at 80% 20%,#3e76e6,transparent 60%),linear-gradient(120deg,#243eb8,#08182c); }
[data-theme="cyberpunk"] .cover-label { display: block; }
[data-theme="cyberpunk"] .cover-orbit { width: 330px; height: 330px; border-width: 48px; top: -110px; right: 70px; }
[data-theme="cyberpunk"] .creator-identity { display: flex; align-items: end; gap: 20px; }
[data-theme="cyberpunk"] .streamer-avatar { width: 106px; height: 106px; flex-shrink: 0; margin: -34px 0 0; }
[data-theme="cyberpunk"] .identity-copy { padding: 16px 0 0; }
[data-theme="cyberpunk"] .creator-eyebrow { display: none; }
[data-theme="cyberpunk"] .stats-card { grid-column: 1; grid-row: 2; padding: 20px; margin: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
[data-theme="cyberpunk"] .history-card { grid-column: 1; grid-row: 3; padding: 20px; margin: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
[data-theme="cyberpunk"] .donation-column { grid-column: 2; grid-row: 2/5; }
[data-theme="cyberpunk"] #page-content { grid-template-rows: auto auto auto 1fr auto; }
/* White/pink creator card and a central form, inspired by Hiwdo's soft interface. */
[data-theme="wave"] .container, [data-theme="wave"] .donate-topbar { max-width: 830px; }
[data-theme="wave"] #page-content { display: flex; flex-direction: column; gap: 20px; }
[data-theme="wave"] #page-content > *, [data-theme="wave"] .creator-panel > * { width: 100%; }
[data-theme="wave"] .creator-panel { display: contents; }
[data-theme="wave"] .header { order: 0; border: 1px solid var(--line); border-radius: 22px; padding: 0 28px 24px; background: var(--surface); overflow: hidden; box-shadow: 0 3px 0 #eadce438; }
[data-theme="wave"] .creator-cover { height: 144px; margin: 0 -28px; background: radial-gradient(ellipse at 70% 20%,#ffe9ef,transparent),linear-gradient(135deg,#fde0eb,#fff7fa); }
[data-theme="wave"] .cover-orbit { border-color: #df719d15; box-shadow: 0 0 0 20px #df719d08; }
[data-theme="wave"] .creator-identity { display: flex; gap: 18px; align-items: end; }
[data-theme="wave"] .streamer-avatar { flex-shrink: 0; margin-bottom: 0; }
[data-theme="wave"] .identity-copy { padding-top: 16px; }
[data-theme="wave"] .creator-eyebrow { display: none; }
[data-theme="wave"] .stats-card { order: 2; border: 0; padding: 0; margin: 0; }
[data-theme="wave"] .history-card { order: 3; padding: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 20px; margin: 0; }
[data-theme="wave"] .donation-column { order: 1; }
[data-theme="wave"] .powered { order: 4; }
[data-theme="wave"] .donate-intro { text-align: center; }
/* Clean green/white editorial layout with a quiet, borderless profile. */
[data-theme="arcade"] .creator-panel { background: transparent; border: 0; box-shadow: none; padding: 24px 10px; }
[data-theme="arcade"] .creator-cover { display: none; }
[data-theme="arcade"] .streamer-avatar { margin: 0 0 20px; border: 0; border-radius: 18px; }
[data-theme="arcade"] .donate-sheet { box-shadow: 0 8px 40px #30493b08; border-radius: 12px; }
[data-theme="arcade"] .step-number { border-radius: 50%; }
/* A compact horizontal profile above two balanced columns in charcoal/gold. */
[data-theme="premium"] .container { max-width: 1080px; }
[data-theme="premium"] .creator-cover { height: 90px; background: linear-gradient(110deg,#574833,#252421); }
[data-theme="premium"] .creator-panel { border-top: 3px solid #b99b65; }
[data-theme="premium"] .streamer-avatar { border-radius: 16px; background: #b99b65; color: #272219; }
[data-theme="premium"] .donate-sheet { border-radius: 4px 22px 4px 22px; }
[data-theme="premium"] .step-number { background: none; border: 1px solid var(--accent); border-radius: 50%; }
/* Payment screens inherit light/dark foregrounds as well as the selected surface. */
.modal { color: var(--text); background: var(--surface); border-color: var(--line); max-width: 460px; padding: 30px 24px; }
.modal::before { display: none; }
.modal-title { font: 600 19px var(--font-body); letter-spacing: 0; text-transform: none; padding-right: 20px; }
.modal-close { color: var(--muted); width: 36px; height: 36px; top: 7px; right: 7px; }
.countdown, .instruction-note, .detail-row .label, .upload-zone, .status-screen p { color: var(--muted); font-family: var(--font-body); }
.detail-row, .media-block, .upload-zone { background: var(--field-bg); border-color: var(--line); }
.detail-row .value { color: var(--text); overflow-wrap: anywhere; }
.modal-action { font: 600 14px var(--font-body); letter-spacing: 0; text-transform: none; }
.modal-action.ghost { color: var(--text); border-color: var(--line); }
.ghost-btn { color: var(--accent); }
.status-screen h3 { font: 600 20px var(--font-body); letter-spacing: 0; }
.form-error { color: #d74460; }
@media(max-width: 760px) {
 .donate-topbar { padding: 20px 18px 16px; }.topbar-caption { font-size: 10px; max-width: 140px; text-align: right; }
 .container { padding: 4px 14px 30px; }#page-content,[data-theme="cyberpunk"] #page-content { display: flex; flex-direction: column; gap: 16px; }
 #page-content > *, .creator-panel > * { min-width: 0; }.creator-panel, .donation-column, .powered { width: 100%; }
 [data-theme="glass"] .creator-panel { position: static; }.creator-panel { padding: 22px; }.creator-cover { margin: -22px -22px 0; height: 105px; }
 .donate-sheet { padding: 23px 20px; }.donate-intro h2 { font-size: 20px; }.donate-step { padding: 20px 0; }.step-heading { font-size: 14px; }
 .pay-tab { flex-direction: column; gap: 3px; }.pay-tab .pay-name { font-size: 11px; }.cyber-input { font-size: 16px; }
 [data-theme="cyberpunk"] .header { width: 100%; padding: 0 22px 22px; }[data-theme="cyberpunk"] .creator-cover { margin: 0 -22px; height: 145px; }
 [data-theme="cyberpunk"] .cover-label { left: 22px; top: 28px; font-size: 29px; max-width: 270px; }[data-theme="cyberpunk"] .cover-orbit { right: -170px; }
 [data-theme="cyberpunk"] .streamer-avatar { width: 80px; height: 80px; }[data-theme="cyberpunk"] .stats-card,[data-theme="cyberpunk"] .history-card { width: 100%; }
 [data-theme="cyberpunk"] .donation-column { order: 1; }[data-theme="cyberpunk"] .stats-card { order: 2; }[data-theme="cyberpunk"] .history-card { order: 3; }[data-theme="cyberpunk"] .powered { order: 4; }
 [data-theme="wave"] .header { padding: 0 20px 22px; }[data-theme="wave"] .creator-cover { margin: 0 -20px; height: 110px; }
 .streamer-name { font-size: 22px; }.creator-identity { flex-wrap: wrap; }.identity-copy { min-width: 0; flex: 1; }
}
/* Additional reference-inspired templates, independently selectable by streamers. */
html[data-theme="easydonate"] { --surface: #162336; --surface-soft: #1e3048; --field-bg: #101d30; --text: #f1f6ff; --muted: #adbed5; --line: #30435d; --accent: #63c9ff; --accent-rgb: 99,201,255; --accent-2: #63c9ff; --accent2-rgb: 99,201,255; --accent-3: #78dfbe; --accent3-rgb: 120,223,190; --page-bg: #0c1728; --grad: linear-gradient(110deg,#177fce,#2563d3); --orb-1: transparent; --orb-2: transparent; --radius: 14px; }
[data-theme="easydonate"] .container, [data-theme="easydonate"] .donate-topbar { max-width: 1060px; }
[data-theme="easydonate"] #page-content { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); grid-template-rows: auto auto auto 1fr auto; gap: 20px; }
[data-theme="easydonate"] .creator-panel { display: contents; }
[data-theme="easydonate"] .header { grid-column: 1/-1; padding: 0 30px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
[data-theme="easydonate"] .creator-cover { height: 210px; margin: 0 -30px; background: radial-gradient(ellipse at 85% 0,#1c90b866,transparent 60%),repeating-linear-gradient(125deg,transparent 0 70px,#ffffff04 70px 72px),linear-gradient(115deg,#19315e,#174878,#10213c); }
[data-theme="easydonate"] .cover-orbit { width: 380px; height: 380px; top: -160px; right: 30px; border-width: 50px; }
[data-theme="easydonate"] .creator-identity { display: flex; gap: 22px; align-items: end; }
[data-theme="easydonate"] .streamer-avatar { width: 108px; height: 108px; flex-shrink: 0; margin: -40px 0 0; border-radius: 22px; }
[data-theme="easydonate"] .identity-copy { padding-top: 18px; }
[data-theme="easydonate"] .creator-eyebrow { display: none; }
[data-theme="easydonate"] .creator-welcome { display: none; }
[data-theme="easydonate"] .social-link { border-radius: 8px; }
[data-theme="easydonate"] .donation-column { grid-column: 1; grid-row: 2/5; }
[data-theme="easydonate"] .creator-panel .card { grid-column: 2; padding: 22px; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
[data-theme="easydonate"] .stats-card { grid-row: 2; }
[data-theme="easydonate"] .history-card { grid-row: 3; }
[data-theme="easydonate"] .donate-intro { border-bottom: 2px solid var(--accent); }
[data-theme="easydonate"] .step-number { border-radius: 50%; background: #247dc4; color: #fff; }
[data-theme="easydonate"] .amount-btn, [data-theme="easydonate"] .cyber-input, [data-theme="easydonate"] .pay-tab, [data-theme="easydonate"] .submit-btn { border-radius: 8px; }
html[data-theme="hiwdo"] { --surface: #fff; --surface-soft: #fff2f6; --field-bg: #fffcfd; --text: #442d39; --muted: #806775; --line: #f0dce5; --accent: #c9407c; --accent-rgb: 201,64,124; --accent-2: #c9407c; --accent2-rgb: 201,64,124; --accent-3: #258268; --accent3-rgb: 37,130,104; --page-bg: #fff8fb; --grad: linear-gradient(110deg,#d74a88,#c9407c); --orb-1: transparent; --orb-2: transparent; --radius: 26px; color-scheme: light; }
[data-theme="hiwdo"] body { background-image: linear-gradient(#eed6e455 1px,transparent 1px),linear-gradient(90deg,#eed6e455 1px,transparent 1px); background-size: 28px 28px; }
[data-theme="hiwdo"] .container, [data-theme="hiwdo"] .donate-topbar { max-width: 700px; }
[data-theme="hiwdo"] #page-content { display: flex; flex-direction: column; gap: 22px; }
[data-theme="hiwdo"] #page-content > *, [data-theme="hiwdo"] .creator-panel > * { width: 100%; }
[data-theme="hiwdo"] .creator-panel { display: contents; }
[data-theme="hiwdo"] .header { order: 0; padding: 0 28px 28px; border: 1px solid var(--line); border-radius: 28px; background: #fff; overflow: hidden; text-align: center; box-shadow: 0 7px 0 #efd9e34d; }
[data-theme="hiwdo"] .creator-cover { height: 145px; margin: 0 -28px; background: radial-gradient(circle at 12% 80%,#fff8 0 26px,transparent 27px),radial-gradient(circle at 85% 20%,#fff7 0 45px,transparent 46px),linear-gradient(115deg,#f9dae9,#f9e6f1,#eddcf1); }
[data-theme="hiwdo"] .cover-orbit { border-color: #fff6; right: 60px; top: -115px; }
[data-theme="hiwdo"] .streamer-avatar { width: 96px; height: 96px; margin: -48px auto 12px; border: 6px solid #fff; box-shadow: 0 3px 14px #b55b8520; }
[data-theme="hiwdo"] .creator-eyebrow, [data-theme="hiwdo"] .creator-welcome { display: none; }
[data-theme="hiwdo"] .streamer-name { font-size: 25px; }
[data-theme="hiwdo"] .streamer-bio { max-width: 430px; margin: 12px auto 0; }
[data-theme="hiwdo"] .social-grid { justify-content: center; }
[data-theme="hiwdo"] .social-link { background: #fff; border-color: #efcddd; color: #a83669; }
[data-theme="hiwdo"] .donation-column { order: 1; }
[data-theme="hiwdo"] .creator-panel .stats-card { order: 2; padding: 0; margin: 0; border: 0; }
[data-theme="hiwdo"] .stat-box { padding: 18px; border: 1px solid var(--line); border-radius: 20px; text-align: center; background: #fff; }
[data-theme="hiwdo"] .creator-panel .history-card { order: 3; border: 1px solid var(--line); border-radius: 26px; background: #fff; padding: 24px; margin: 0; }
[data-theme="hiwdo"] .powered { order: 4; }
[data-theme="hiwdo"] .donate-sheet { box-shadow: 0 7px 0 #efd9e34d; }
[data-theme="hiwdo"] .donate-intro { text-align: center; border: 0; padding-bottom: 10px; }
[data-theme="hiwdo"] .donate-intro h2 { font-size: 21px; }
[data-theme="hiwdo"] .step-number { background: #fce3ee; border-radius: 50%; }
[data-theme="hiwdo"] .amount-btn, [data-theme="hiwdo"] .pay-tab { border-radius: 16px; background: #fff; }
[data-theme="hiwdo"] .amount-btn.active, [data-theme="hiwdo"] .pay-tab.active { background: #fff0f6; }
[data-theme="hiwdo"] .cyber-input { border-radius: 14px; }
[data-theme="hiwdo"] .submit-btn { border-radius: 28px; box-shadow: 0 4px 0 #aa2e63; }
@media(max-width: 760px) {
 [data-theme="easydonate"] #page-content { display: flex; flex-direction: column; gap: 16px; }
 [data-theme="easydonate"] .header { width: 100%; padding: 0 20px 22px; }
 [data-theme="easydonate"] .creator-cover { height: 155px; margin: 0 -20px; }
 [data-theme="easydonate"] .streamer-avatar { width: 80px; height: 80px; margin-top: -28px; border-radius: 18px; }
 [data-theme="easydonate"] .creator-identity { gap: 14px; }
 [data-theme="easydonate"] .donation-column { order: 1; }
 [data-theme="easydonate"] .stats-card { order: 2; }
 [data-theme="easydonate"] .history-card { order: 3; }
 [data-theme="easydonate"] .powered { order: 4; }
 [data-theme="hiwdo"] .header { padding: 0 20px 24px; }
 [data-theme="hiwdo"] .creator-cover { margin: 0 -20px; height: 120px; }
 [data-theme="hiwdo"] .donate-sheet { padding: 24px 18px; }
}
/* StreamGift: the supplied local mock's compact sidebar and purple glass form. */
html[data-theme="streamgift"] { --surface: #171727; --surface-soft: #1d1d31; --field-bg: #12121f; --text: #eef0ff; --muted: #aaaac8; --line: #ffffff17; --accent: #b496fc; --accent-rgb: 180,150,252; --accent-2: #ec4899; --accent2-rgb: 236,72,153; --accent-3: #34d399; --accent3-rgb: 52,211,153; --page-bg: radial-gradient(900px 500px at 85% -10%,#8b5cf62e,transparent 60%),radial-gradient(700px 400px at -10% 20%,#ec48991f,transparent 60%),#0d0d16; --grad: linear-gradient(135deg,#8b5cf6,#ec4899); --orb-1: transparent; --orb-2: transparent; --radius: 16px; }
[data-theme="streamgift"] body::before { background-image: radial-gradient(1px 1px at 20% 15%,#e7c8ff90 50%,transparent),radial-gradient(1px 1px at 70% 45%,#c9bcff70 50%,transparent),radial-gradient(1px 1px at 45% 80%,#ffffff70 50%,transparent); background-size: 170px 210px,230px 270px,310px 330px; }
[data-theme="streamgift"] .container, [data-theme="streamgift"] .donate-topbar { max-width: 1080px; }
[data-theme="streamgift"] #page-content { grid-template-columns: minmax(0,360px) minmax(0,1fr); }
[data-theme="streamgift"] .creator-panel { position: sticky; top: 20px; padding: 28px 24px; background: #171727c7; backdrop-filter: blur(12px); box-shadow: 0 20px 50px #00000059; }
[data-theme="streamgift"] .creator-cover, [data-theme="streamgift"] .creator-eyebrow, [data-theme="streamgift"] .creator-welcome { display: none; }
[data-theme="streamgift"] .streamer-avatar { width: 96px; height: 96px; margin: 2px 0 18px; border: 3px solid var(--surface); box-shadow: 0 0 0 2px #8b5cf6; }
[data-theme="streamgift"] .streamer-name { font-weight: 800; }
[data-theme="streamgift"] .creator-identity { position: relative; }
[data-theme="streamgift"] .live-badge { position: absolute; top: 70px; left: 18px; margin: 0; padding: 4px 9px; background: #e11d48; border: 2px solid var(--surface); border-radius: 20px; color: #fff; }
[data-theme="streamgift"] .social-link { background: #1d1d31; }
[data-theme="streamgift"] .stat-value { color: #34d399; }
[data-theme="streamgift"] .donate-sheet { padding: 28px; background: radial-gradient(420px circle at 50% 0,#8b5cf621,transparent 65%),#171727d1; backdrop-filter: blur(12px); box-shadow: 0 20px 50px #00000059; }
[data-theme="streamgift"] .donate-intro { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-theme="streamgift"] .donate-step:first-of-type { padding-top: 0; }
[data-theme="streamgift"] .step-heading { font-size: 17px; }
[data-theme="streamgift"] .step-number { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; }
[data-theme="streamgift"] .amount-btn { background: #1d1d31; border-radius: 12px; }
[data-theme="streamgift"] .amount-btn.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px #8b5cf659; }
[data-theme="streamgift"] .pay-tab { background: #12121f; }
[data-theme="streamgift"] .pay-tab.active { color: #fff; background: linear-gradient(135deg,#8b5cf640,#ec489940); border-color: #b496fc; box-shadow: none; }
[data-theme="streamgift"] .cyber-input { border-radius: 12px; }
[data-theme="streamgift"] .field-label { color: var(--muted); }
[data-theme="streamgift"] .payment-explanation { border: 1px dashed #8b5cf673; background: #8b5cf60f; padding: 16px; }
[data-theme="streamgift"] .submit-btn { box-shadow: 0 8px 25px #8b5cf633; border-radius: 12px; }
@media(max-width: 760px) {
 [data-theme="streamgift"] #page-content { display: flex; flex-direction: column; }
 [data-theme="streamgift"] .creator-panel { position: static; padding: 24px; }
 [data-theme="streamgift"] .donate-sheet { padding: 24px 20px; }
 [data-theme="streamgift"] .step-heading { font-size: 15px; }
}
/* Uploaded branding applies to every template, including coverless defaults. */
.creator-cover.custom-cover { display: block; }
.creator-cover.custom-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-theme="arcade"] .creator-cover.custom-cover { height: 150px; margin: 0 0 22px; border-radius: 12px; }
[data-theme="streamgift"] .creator-cover.custom-cover { height: 145px; margin: -28px -24px 0; }
[data-theme="streamgift"].has-custom-cover .streamer-avatar { position: relative; margin-top: -32px; }
.custom-page-background { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-size: cover; }
.custom-page-background::after { content: ''; position: absolute; inset: 0; background: #0d0d1680; }
[data-theme="wave"] .custom-page-background::after, [data-theme="arcade"] .custom-page-background::after, [data-theme="hiwdo"] .custom-page-background::after { background: #fff8fbc4; }
.container { position: relative; z-index: 1; }
@media(max-width: 760px) { [data-theme="streamgift"] .creator-cover.custom-cover { margin-top: -24px; } }
@media(prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }