/* Shared semantic roles: quiet primary-family surfaces, visible secondary headers. */
:root {
  --bg: hsl(var(--guild-hue), var(--guild-saturation), 4%);
  --panel: hsl(var(--guild-hue), var(--guild-saturation), 9%);
  --panel2: hsl(var(--guild-hue), var(--guild-saturation), 6%);
  --line: rgba(var(--guild-border-rgb), .22);
  --line2: rgba(var(--guild-border-rgb), .38);
  --text: #f0f3ef;
  --muted: #b0bab0;
  --hover: rgba(var(--guild-border-rgb), .10);
  /* Established admin modal palette. Guild color belongs on the top strip only. */
  --admin-modal-header: #242424;
  --admin-modal-body: #363636;
  --admin-modal-panel: #303030;
  --admin-modal-control: #454545;
  --admin-modal-control-locked: #292929;
  --admin-modal-footer: #242424;
  --admin-modal-border: #888;
  --admin-modal-divider: #555;
  --admin-modal-button: #474747;
  --admin-modal-primary: #ddd;
  --admin-modal-primary-ink: #111;
}
.info-bar, .notes-panel .utility-panel-title, .upload-panel .utility-panel-title,
.table-headline, .guild-section-heading {
  background: linear-gradient(100deg, var(--guild-accent), var(--guild-accent-low));
  color: var(--guild-accent-ink);
  border-color: rgba(0,0,0,.18);
  text-shadow: none;
}
.table-headline, .guild-section-heading {
  margin: 0 0 12px;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}
.guild-section-heading { border-radius: 12px 12px 0 0; }
.table-headline { border-radius: 20px 20px 0 0; }
.info-bar .raffle-name-text, .info-bar .raffle-title-sep { color: inherit; }
.info-bar #raffle_titlebar, .info-bar #raffle_titlebar .raffle-status-text,
.info-bar #raffle_titlebar .raffle-name-text {
  color: var(--guild-accent-ink) !important;
  text-shadow: none;
}
.info-bar { border-radius: 20px 20px 0 0; }
#dropzone_uploader .dz-message span { color: var(--muted); opacity: 1; }
.notes-panel .note-tab, .notes-panel .note-action-btn, .notes-panel .note-save-status {
  color: var(--guild-accent-ink);
  text-shadow: none;
}
.notes-panel .note-tab { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.22); }
.notes-panel .note-tab.active {
  background: var(--panel);
  color: var(--text);
  border-color: var(--panel);
}
.notes-panel .note-action-btn { border-color: transparent; }
.notes-panel .note-action-btn:hover { color: var(--guild-accent-ink); background: rgba(0,0,0,.10); }
.mobile-public-nav-btn.is-active, .mobile-public-nav-btn.active,
.new-raffle-primary, #add_prize_button {
  background: linear-gradient(100deg, var(--guild-accent), var(--guild-accent-low));
  color: var(--guild-accent-ink);
  border-color: rgba(0,0,0,.2);
  text-shadow: none;
}
.mobile-public-nav-btn.is-active .nav-label, .mobile-public-nav-btn.is-active .nav-kicker { color: inherit; }
.prize.prize-style-featured::before { background: var(--guild-accent); }
.prize.prize-style-featured .pbadge { background: var(--guild-accent); color: var(--guild-accent-ink); border-color: transparent; }
/* Keep the third-party ticket grid selection within the guild's primary family. */
.handsontable .wtBorder { background-color: hsl(var(--guild-hue), var(--guild-saturation), 42%) !important; }
/* Template surface choices do not change prize-card or modal treatments. */
html.template-page-background, .template-page-background body {
  background: var(--template-page-background) !important;
}
.template-gradient { --template-container-background: linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.25)),var(--template-container-color); }
.template-solid { --template-container-background: var(--template-container-color); }
:is(.template-solid,.template-gradient) :is(.info-panel,.prizes-panel,.entrants-panel,#notesPanel,.upload-panel,#left,#right,#center,#ticket_list) {
  background: var(--template-container-background);
}
/* Solid is confined to content surfaces, never upload/editor controls or menus. */
.template-solid :is(.info-panel,.prizes-panel,.entrants-panel,#notesPanel,.upload-panel,#center,#right) {
  background-image:none!important;
  background-color:var(--template-container-color)!important;
  box-shadow:none!important;
}
/* These are the public notes' container fill, not an interactive control. */
.template-solid .info-panel .info-body {
  background-image: none;
  background-color: transparent;
}


.template-page-background.template-page-shaded body {
  background: radial-gradient(ellipse at top left,rgba(255,255,255,.04),transparent 45%),linear-gradient(180deg,transparent,rgba(0,0,0,.3)),var(--template-page-background) !important;
}
/* Let the actual container color show through these full-width content layers. */
:is(.template-solid,.template-gradient) .info-panel .info-body,
:is(.template-solid,.template-gradient) #notesPanel .notes-editor-surface {
  background: transparent;
}

/* Header/menu shading is independent of the four content boxes. */
.template-menu-solid { --template-menu-background:var(--template-container-color); }
.template-menu-gradient { --template-menu-background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.25)),var(--template-container-color); }
:is(.template-menu-solid,.template-menu-gradient) :is(.button-bar,.public-channel-switch-button,.public-channel-switch-menu,.public-submenu-menu,.profile-menu-panel,.profile-menu-lookup,.profile-submenu-panel,.tool-menu-panel,.template-no-image) { background:var(--template-menu-background)!important; }
.template-menu-solid :is(.admin-header,.page > .header,.button-bar,.profile-menu-panel,.profile-menu-lookup,.profile-submenu-panel,.tool-menu-panel,.public-channel-switch-button,.public-channel-switch-menu,.public-submenu-menu,.template-no-image) { box-shadow:none!important; }
.template-menu-solid :is(.profile-menu-panel,.profile-submenu-panel,.tool-menu-panel)::before { background:var(--template-container-color)!important;box-shadow:none!important; }
.template-menu-solid .admin-header.template-no-image::before { background:none!important; }

/* Local contrast behind header lettering, independent of image darkening. */
.header-text-backdrop{position:relative;isolation:isolate;min-width:0}
.header-text-lines{display:flex;flex-direction:column;gap:inherit}
.header-text-backdrop::before{
  content:"";position:absolute;inset:-4px auto -4px -10px;width:calc(var(--header-text-width,100%) + 20px);z-index:-1;pointer-events:none;
  background:rgba(0,0,0,.45);
  border-radius:6px;
}
.template-no-image .header-text-backdrop::before{display:none}

/* Keep the contrast patch snug around the longer text line, not its grid track. */
.header-text-backdrop{width:fit-content;max-width:100%;align-self:flex-start;justify-self:start}
.header-text-backdrop > *{max-width:100%}


.header-left > .header-text-backdrop{align-self:center}

/* First-render contract: classes and variables arrive in the server's HTML.
   Previews set the same state on their detached document before inserting it. */
:root {
 --guild-modal-strip:var(--guild-modal-color,#242424);
 --user-modal-strip:var(--guild-modal-color,#242424);
 --account-strip:var(--guild-modal-color,#242424);
 --studio-strip:var(--guild-modal-color,#242424);
 --admin-strip-color:var(--guild-modal-color,#242424);
 --popup-strip:var(--guild-modal-color,#242424);
 --donation-modal-strip:var(--guild-modal-color,#242424);
}
.custom-template :is(.admin-header,.page > .header) {
 box-sizing:border-box;position:relative;padding:12px 20px!important;align-items:center!important;gap:12px 18px!important;
 height:var(--template-header-desktop);min-height:var(--template-header-desktop);
 background:var(--template-menu-background,var(--template-container-color));
}
.template-without-image .header-text-backdrop::before{display:none}
.template-menu-solid.template-without-image .admin-header::before{background:none!important}

:is(.template-header,.custom-template .admin-header,.custom-template .page > .header){box-sizing:border-box;position:relative;padding:12px 20px!important;align-items:center!important;gap:12px 18px!important}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-left{min-width:0;flex:1 1 auto;max-width:100%;flex-wrap:nowrap;align-items:center}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-title h1{font-size:1.95rem;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-subtitle{font-size:.88rem;line-height:1.25;margin-top:4px;gap:5px}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .stats .stat{min-width:108px;padding:8px 12px}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .stats .stat-label{font-size:.64rem;letter-spacing:.04em}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .stats .stat-value{font-size:1.4rem;line-height:1.2}

@media (min-width:701px){
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header){flex-direction:row;display:flex}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-left{display:flex;gap:14px;width:auto}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .stats{width:auto}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-right{width:auto;flex:0 0 auto}
}

@media (max-width:700px){
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header){padding:12px 14px!important;display:flex;flex-direction:column;justify-content:center;gap:10px!important}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-left{display:flex;gap:12px;width:100%;flex:0 1 auto}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) :is(#mainLogo,.header-logo,.extractor-logo){width:56px;min-width:56px;max-width:56px;height:56px;min-height:56px;max-height:56px;flex:0 0 auto}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) :is(.title-block,.header-title){min-width:0;flex:1 1 auto}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) :is(.title-block,.header-title) h1{font-size:1.5rem;line-height:1.06;white-space:normal;overflow-wrap:anywhere}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-subtitle{font-size:.82rem;line-height:1.2}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) :is(.stats,.header-right){width:100%;flex:0 0 auto}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .stats .stat{flex:1;min-width:0;padding:5px 10px}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .extractor-brand{gap:12px;max-width:100%;min-width:0}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) #guild_header{white-space:nowrap;overflow-wrap:normal}
:is(.template-header,.custom-template .admin-header,.custom-template .page > .header) .header-text-backdrop{flex:0 1 auto}
.custom-template :is(.admin-header,.page > .header){height:var(--template-header-mobile);min-height:var(--template-header-mobile)}
}
.custom-template [data-template-box="0"]{--guild-accent-ink:var(--box-ink-0);background:var(--box-0)!important;color:var(--box-ink-0)!important}
.custom-template [data-template-box="0"] .raffle-name-text,.custom-template [data-template-box="0"] #raffle_titlebar,.custom-template [data-template-box="0"] .raffle-status-text,.custom-template [data-template-box="0"] .note-tab:not(.active),.custom-template [data-template-box="0"] .note-action-btn,.custom-template [data-template-box="0"] .note-save-status{color:var(--box-ink-0)!important}
.custom-template [data-template-box="1"]{--guild-accent-ink:var(--box-ink-1);background:var(--box-1)!important;color:var(--box-ink-1)!important}
.custom-template [data-template-box="1"] .raffle-name-text,.custom-template [data-template-box="1"] #raffle_titlebar,.custom-template [data-template-box="1"] .raffle-status-text,.custom-template [data-template-box="1"] .note-tab:not(.active),.custom-template [data-template-box="1"] .note-action-btn,.custom-template [data-template-box="1"] .note-save-status{color:var(--box-ink-1)!important}
.custom-template [data-template-box="2"]{--guild-accent-ink:var(--box-ink-2);background:var(--box-2)!important;color:var(--box-ink-2)!important}
.custom-template [data-template-box="2"] .raffle-name-text,.custom-template [data-template-box="2"] #raffle_titlebar,.custom-template [data-template-box="2"] .raffle-status-text,.custom-template [data-template-box="2"] .note-tab:not(.active),.custom-template [data-template-box="2"] .note-action-btn,.custom-template [data-template-box="2"] .note-save-status{color:var(--box-ink-2)!important}
.custom-template [data-template-box="3"]{--guild-accent-ink:var(--box-ink-3);background:var(--box-3)!important;color:var(--box-ink-3)!important}
.custom-template [data-template-box="3"] .raffle-name-text,.custom-template [data-template-box="3"] #raffle_titlebar,.custom-template [data-template-box="3"] .raffle-status-text,.custom-template [data-template-box="3"] .note-tab:not(.active),.custom-template [data-template-box="3"] .note-action-btn,.custom-template [data-template-box="3"] .note-save-status{color:var(--box-ink-3)!important}