/* Nord SaaS Lite · global stability layer v0.9.2
   Loaded last on purpose: this file normalizes shared platform primitives
   without taking ownership of page-specific layouts. */

:root{
  --overlay:rgba(15,23,42,.42);
  --overlay-strong:rgba(15,23,42,.62);
  --input-bg:var(--surface);
  --input-disabled:var(--surface-3);
  --focus-ring:color-mix(in srgb,var(--accent) 20%,transparent);
  --nord-scrollbar-thumb:color-mix(in srgb,var(--muted) 52%,transparent);
  --nord-scrollbar-thumb-hover:color-mix(in srgb,var(--text-2) 62%,transparent);
  --shadow-sm:0 6px 18px rgba(15,23,42,.06);
  --shadow-lg:0 28px 90px rgba(15,23,42,.16);
  --text-soft:var(--text-2);
}
html[data-theme="dark"]{
  --overlay:rgba(2,6,12,.62);
  --overlay-strong:rgba(2,6,12,.78);
  --input-bg:var(--surface-2);
  --input-disabled:var(--surface-3);
  --focus-ring:color-mix(in srgb,var(--accent) 26%,transparent);
  --nord-scrollbar-thumb:color-mix(in srgb,var(--muted) 54%,transparent);
  --nord-scrollbar-thumb-hover:color-mix(in srgb,var(--text-2) 70%,transparent);
  --shadow-sm:0 8px 22px rgba(0,0,0,.18);
  --shadow-lg:0 32px 100px rgba(0,0,0,.48);
}

html{background:var(--bg);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body.nord-modal-open{overflow:hidden!important}
#appShell,.nord-shell,.nord-main,.nord-page,.page{max-width:100%;min-width:0}
img,video,canvas{max-width:100%;height:auto}
svg{max-width:100%}
.card,.metric-card,.modal,.toast,.panel-item,.status-row,.table-wrap{min-width:0}
.page-head>*,.card-title>*,.modal-head>*,.form-grid>*,.grid-2>*,.grid-3>*,.metrics>*{min-width:0}
p,strong,small,span,em,code,.code-box,.status-row,.card-title,.modal,.toast{overflow-wrap:anywhere}

/* Native controls must follow both themes instead of retaining browser-light chrome. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
textarea,select,.input,.textarea,.select{
  max-width:100%;
  color:var(--text);
  background-color:var(--input-bg);
  border-color:var(--border);
  color-scheme:inherit;
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.82}
input:disabled,textarea:disabled,select:disabled,.input:disabled,.textarea:disabled,.select:disabled{
  opacity:.72;
  color:var(--muted);
  background:var(--input-disabled);
  cursor:not-allowed;
}
select option,select optgroup{background:var(--surface);color:var(--text)}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup{background:var(--surface-2);color:var(--text)}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;
  caret-color:var(--text);
  transition:background-color 999999s ease-in-out 0s;
}

/* One consistent keyboard focus treatment across legacy and new pages. */
:where(button,a,input,textarea,select,[tabindex]):focus-visible{
  outline:0!important;
  box-shadow:0 0 0 3px var(--focus-ring)!important;
}
:where(button,a,input,textarea,select,[tabindex]):focus:not(:focus-visible){outline:0}

/* Shared surfaces. */
.modal-backdrop,.nord-onboarding-backdrop,.sidebar-backdrop,
.ncv-backdrop,.nct-backdrop,.nfb-backdrop,.npb-backdrop,.npbc-backdrop,.npbi-backdrop,.npbm-backdrop,.nca-backdrop,.sports-backdrop,
.ncp-backdrop,.ncp-rename-backdrop,.nx-modal-backdrop,.nx-ig-modal-backdrop,.nx-story-create-backdrop,.nx-story-editor-backdrop,
.nord-confirm-overlay{
  background:var(--overlay-strong)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
.modal,.nord-confirm-card{
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  border-color:var(--border);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-lg);
  overscroll-behavior:contain;
}
.modal-head{min-width:0}
.modal-head h1,.modal-head h2,.modal-head h3{color:var(--text)}
.modal-close{border:1px solid var(--border)!important;background:var(--surface-2)!important;color:var(--text-2)!important}
.modal-close:hover{background:var(--hover)!important;color:var(--text)!important;border-color:var(--border-strong)!important}
.toast{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-lg)}
.dropdown-menu,.context-menu,.menu-popover,[role="menu"]{
  color-scheme:inherit;
}

/* Preserve legibility in the many compact management surfaces. */
.modal label,.modal .form-group label,.modal .modal-help{line-height:1.4}
.ticket-detail-item span,.ticket-modal-kicker,
.giveaway-modal-kicker,.announcement-modal-kicker{font-size:max(9px,.64rem)}
.ticket-detail-item strong{font-size:max(11px,.78rem)}
.ticket-card-meta b,.giveaway-card-meta b{font-size:max(8px,.57rem)}
.ticket-card-meta em,.giveaway-card-meta em{font-size:max(10px,.71rem)}
.ticket-card-footer,.giveaway-card-footer{font-size:max(9px,.64rem)}

/* Dynamically injected workspaces share the same theme, viewport and readability rules. */
.nct-modal,.nfb-modal,.npb-modal,.npbc-modal,.npbi-modal,.npbm-modal,.nca-modal,.sports-modal,
.ncp-modal,.ncp-rename-dialog,.nx-modal,.nx-ig-sheet,.nx-story-create-launcher{
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 32px)!important;
  border-color:var(--border)!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow-lg)!important;
  overscroll-behavior:contain
}
.nct-modal :is(input,textarea,select),
.nfb-modal :is(input,textarea,select),
.npb-modal :is(input,textarea,select),
.npbc-modal :is(input,textarea,select),
.npbi-modal :is(input,textarea,select),
.npbm-modal :is(input,textarea,select),
.nca-modal :is(input,textarea,select),
.sports-modal :is(input,textarea,select),
.ncp-modal :is(input,textarea,select),
.ncp-rename-dialog :is(input,textarea,select),
.nx-modal :is(input,textarea,select),
.nx-ig-sheet :is(input,textarea,select),
.nx-story-create-launcher :is(input,textarea,select){
  color:var(--text)!important;
  background-color:var(--input-bg)!important;
  border-color:var(--border)!important;
  color-scheme:inherit
}
.nct-modal :is(label,small),
.nfb-modal :is(label,small),
.npb-modal :is(label,small),
.npbc-modal :is(label,small),
.npbi-modal :is(label,small),
.npbm-modal :is(label,small),
.nca-modal :is(label,small),
.sports-modal :is(label,small),
.ncp-modal :is(label,small),
.ncp-rename-dialog :is(label,small),
.nx-modal :is(label,small),
.nx-ig-sheet :is(label,small),
.nx-story-create-launcher :is(label,small){
  font-size:max(10px,.71rem)!important
}
.nct-modal :is(button,input,textarea,select),
.nfb-modal :is(button,input,textarea,select),
.npb-modal :is(button,input,textarea,select),
.npbc-modal :is(button,input,textarea,select),
.npbi-modal :is(button,input,textarea,select),
.npbm-modal :is(button,input,textarea,select),
.nca-modal :is(button,input,textarea,select),
.sports-modal :is(button,input,textarea,select),
.ncp-modal :is(button,input,textarea,select),
.ncp-rename-dialog :is(button,input,textarea,select),
.nx-modal :is(button,input,textarea,select),
.nx-ig-sheet :is(button,input,textarea,select),
.nx-story-create-launcher :is(button,input,textarea,select){
  min-width:0!important;
  max-width:100%!important
}
.nct-modal,.nfb-modal,.npb-modal,.npbc-modal,.npbi-modal,.npbm-modal,.nca-modal,.sports-modal,
.ncp-modal,.ncp-rename-dialog,.nx-modal,.nx-ig-sheet,.nx-story-create-launcher{
  scrollbar-width:thin;
  scrollbar-color:var(--nord-scrollbar-thumb) transparent
}
.nct-modal::-webkit-scrollbar,.nfb-modal::-webkit-scrollbar,.npb-modal::-webkit-scrollbar,
.npbc-modal::-webkit-scrollbar,.npbi-modal::-webkit-scrollbar,.npbm-modal::-webkit-scrollbar,
.nca-modal::-webkit-scrollbar,.sports-modal::-webkit-scrollbar,
.ncp-modal::-webkit-scrollbar,.ncp-rename-dialog::-webkit-scrollbar,.nx-modal::-webkit-scrollbar,.nx-ig-sheet::-webkit-scrollbar,.nx-story-create-launcher::-webkit-scrollbar{width:8px;height:8px}
.nct-modal::-webkit-scrollbar-thumb,.nfb-modal::-webkit-scrollbar-thumb,.npb-modal::-webkit-scrollbar-thumb,
.npbc-modal::-webkit-scrollbar-thumb,.npbi-modal::-webkit-scrollbar-thumb,.npbm-modal::-webkit-scrollbar-thumb,
.nca-modal::-webkit-scrollbar-thumb,.sports-modal::-webkit-scrollbar-thumb,
.ncp-modal::-webkit-scrollbar-thumb,.ncp-rename-dialog::-webkit-scrollbar-thumb,.nx-modal::-webkit-scrollbar-thumb,.nx-ig-sheet::-webkit-scrollbar-thumb,.nx-story-create-launcher::-webkit-scrollbar-thumb{
  border:2px solid transparent;border-radius:999px;background:var(--nord-scrollbar-thumb);background-clip:padding-box
}

/* Dense builder/admin modules must remain readable at normal desktop zoom. */
:where(
  .npb-filter button,.npb-state,.npb-meta span,.npb-meta strong,.npb-step,
  .npb-step-copy small,.npb-field label,.npb-hint,.npb-server-card small,
  .npb-review-row span,.npb-preview-title span,.npb-category-copy p,.npb-category-meta,
  .npb-preview-heading small,.npb-live,.npbc-head p,.npbc-field label,
  .npbc-icon-picker-copy small,.npbi-head p,.npbi-item span,.npbc-segment button,
  .npbm-kicker,.npbm-status
){font-size:max(9.5px,.68rem)!important}

:where(
  .automation-workflow-state,.automation-workflow-meta span,.automation-workflow-meta strong,
  .automation-template-card small,.automation-trigger-option strong,.automation-flow-step-name small,
  .automation-flow-step-config label,.automation-flow-step-note,.automation-status-filter button,
  .automation-workflow-create small,.automation-workflow-description,.automation-workflow-error,
  .automation-workflow-card-actions .btn,.automation-workflow-empty small,
  .automation-review-grid span,.automation-management-state,.automation-activity-grid span,
  .automation-create-step-copy strong,.automation-create-step-copy small
){font-size:max(9.5px,.68rem)!important}

:where(
  .nct-meta,.nct-metric span,.nct-field label,.nct-row small,.nct-invite-badge,
  .nct-invite-kpi-top span,.nct-invite-kpi small,.nct-invite-user small,
  .nct-invite-leader-count small,.nct-growth-hero span,.nct-growth-hero small,
  .nct-growth-line span,.nct-invite-table-head,.nct-invite-activity-row small,
  .nct-campaign-status,.nct-campaign-card p,.nct-campaign-stat span,
  .nct-invite-switch-copy small,.nct-invite-detail-item span,.nct-ai-day small,
  .nct-ai-meta span,.nct-ai-meta small,.nct-ai-operation span,.nct-ai-operation small,
  .nct-ai-priority strong,.nct-ai-detail span
){font-size:max(9.5px,.68rem)!important}

:where(
  .nfb-badge,.nfb-meta span,.nfb-card-v2 .nfb-code,.nfb-card-v2 .nfb-badge,
  .nfb-card-v2 .nfb-meta-copy small,.nfb-field small,.nfb-toggle small,
  .nfb-section-head small,.nfb-info,.nfb-summary span,.nfb-response-user small,
  .nfb-score,.nfb-answer-state,.nfb-expected,.nfb-preview-stats span,
  .nfb-preview-empty small,.nfb-preview-command,.nfb-panel-counter span
){font-size:max(9.5px,.68rem)!important}

:where(
  .nca-badge,.nca-stat span,.nca-member-copy small,.nca-role,.nca-role-card p,
  .nca-log small,.nca-log time,.nca-modal-head p,.nca-field label,
  .sports-badge,.sports-match small,.sports-field label
){font-size:max(9.5px,.68rem)!important}

/* Never let action rows or grid children force horizontal page overflow. */
:where(
  .npb-grid,.npb-modal-main,.npbm-main,.nct-grid,.nct-metrics,.nfb-grid,
  .nca-grid,.sports-grid,.form-grid,.grid-2,.grid-3,.metrics
)>*{min-width:0}

/* Community Voice is dynamically injected, so normalize it here too. */
.ncv-backdrop{background:var(--overlay-strong)!important}
.ncv-modal,.ncv-filter-menu{
  background:var(--surface)!important;
  color:var(--text);
  border-color:var(--border)!important;
  box-shadow:var(--shadow-lg)!important;
}
.ncv-modal label,.ncv-section-title small,.ncv-modal-meta,.ncv-modal-head p{font-size:max(10px,.71rem)!important}
.ncv-modal-content{font-size:max(12px,.86rem)!important}
.ncv-field select,.ncv-field input,.ncv-field textarea{color:var(--text)!important;background:var(--input-bg)!important}
.ncv-filter-option,.ncv-filter-toggle{color:var(--text-2)}
.ncv-filter-option:hover,.ncv-filter-toggle:hover{color:var(--text)}

/* Common builders and cards: long user content may never widen the workspace. */
.button-editor,.npbc-grid,.automation-flow-step,.automation-workflow-card,
.announcement-row,.giveaway-card,.ticket-card,.ncv-row{
  min-width:0;
  max-width:100%;
}
.announcement-row-title>strong,.automation-workflow-title strong,
.ticket-card-subject,.giveaway-card-prize{
  min-width:0;
  max-width:100%;
}
textarea{resize:vertical}

/* Global Nord scrollbar treatment for any element that actually scrolls. */
*{scrollbar-color:var(--nord-scrollbar-thumb) transparent}
*:where(.modal,.nord-nav,.table-wrap,.permission-builder,.ncv-list,.ncv-modal-body,.ncv-settings,.announcement-form-scroll,.giveaway-builder-form,.automation-builder-body)::-webkit-scrollbar{
  width:8px;height:8px
}
*:where(.modal,.nord-nav,.table-wrap,.permission-builder,.ncv-list,.ncv-modal-body,.ncv-settings,.announcement-form-scroll,.giveaway-builder-form,.automation-builder-body)::-webkit-scrollbar-track{
  background:transparent
}
*:where(.modal,.nord-nav,.table-wrap,.permission-builder,.ncv-list,.ncv-modal-body,.ncv-settings,.announcement-form-scroll,.giveaway-builder-form,.automation-builder-body)::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:var(--nord-scrollbar-thumb);
  background-clip:padding-box
}
*:where(.modal,.nord-nav,.table-wrap,.permission-builder,.ncv-list,.ncv-modal-body,.ncv-settings,.announcement-form-scroll,.giveaway-builder-form,.automation-builder-body)::-webkit-scrollbar-thumb:hover{
  background:var(--nord-scrollbar-thumb-hover);
  background-clip:padding-box
}

/* Theme-safe platform boot/auth surfaces. */
.auth-boot-screen{background:var(--bg)!important;color:var(--text)!important}
.auth-boot-card{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important}

/* Small screens: actions wrap instead of escaping modal/card bounds. */
@media(max-width:760px){
  .modal-backdrop{padding:10px!important}
  .modal,.nct-modal,.nfb-modal,.npb-modal,.npbc-modal,.npbi-modal,.npbm-modal,.nca-modal,.sports-modal,.ncp-modal,.ncp-rename-dialog,.nx-modal,.nx-ig-sheet,.nx-story-create-launcher{
    width:min(100%,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important
  }
  .form-actions,.modal-actions,.announcement-modal-actions,.giveaway-modal-actions{
    max-width:100%;flex-wrap:wrap
  }
  .form-actions>.btn,.modal-actions>.btn{max-width:100%}
  .ticket-history-actions{max-width:100%}
}
@media(max-width:520px){
  .modal-backdrop{align-items:flex-end}
  .modal,.nct-modal,.nfb-modal,.npb-modal,.npbc-modal,.npbi-modal,.npbm-modal,.nca-modal,.sports-modal,.ncp-modal,.ncp-rename-dialog,.nx-modal,.nx-ig-sheet,.nx-story-create-launcher{
    width:100%!important;max-width:100%!important;max-height:94dvh!important;border-radius:18px 18px 0 0!important
  }
  .toast-stack{left:10px!important;right:10px!important;bottom:10px!important}
  .toast{width:100%;min-width:0!important;max-width:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Light-theme surface guard.
   A number of legacy and lazy-loaded panels are rendered after the initial
   stylesheet pass. Keep their shells, loading states and empty states tied to
   the active theme so they cannot inherit a dark/transparent box. */
html[data-theme="light"]{
  --overlay:rgba(15,23,42,.34);
  --overlay-strong:rgba(15,23,42,.52);
  --shadow-sm:0 6px 18px rgba(15,23,42,.08);
  --shadow-lg:0 28px 90px rgba(15,23,42,.18);
}
html[data-theme="light"] :where(
  .page-loading,.page-error,.loading-state,.empty-state,.nord-state,
  .nct-empty,.nct-state,.nfb-empty,.nfb-loading,.nfb-preview-empty,
  .npb-empty,.npb-state,.npbi-empty,.nss-empty,.nss-state,
  .nca-empty,.ncp-empty,.ncp-guild-state,.ncv-empty,.ncv-state,
  .automation-empty,.automation-flow-empty,.automation-logic-empty,
  .automation-workflow-empty,.discord-tools-empty,.discord-tools-preview-empty,
  .fivem-empty-live,.fivem-empty-manage,.giveaway-empty,.ticket-empty,
  .sports-empty,.wl-empty,.message-media-library-empty,
  .nord-select-empty,.nx-state,.nx-explore-empty,.nx-notif-empty,
  .nx-post-detail-empty,.nx-profile-grid-empty,.nx-profile-people-empty,
  .nx-dm-empty,.nx-dm-empty-list
){
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-theme="light"] :where(
  .modal,.nord-confirm-card,.nord-onboarding-card,
  .nct-modal,.nfb-modal,.npb-modal,.npbc-modal,.npbi-modal,.npbm-modal,
  .nca-modal,.sports-modal,.ncp-modal,.ncp-rename-dialog,
  .nx-modal,.nx-ig-sheet,.nx-story-create-launcher,.ncv-modal,
  .ncv-filter-menu,.nord-select-menu,.dropdown-menu,.context-menu,.menu-popover
){
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
  box-shadow:var(--shadow-lg)!important;
}
html[data-theme="light"] :where(
  .modal :is(h1,h2,h3,h4,p,label,strong,small,span),
  .nct-modal :is(h1,h2,h3,h4,p,label,strong,small,span),
  .nfb-modal :is(h1,h2,h3,h4,p,label,strong,small,span),
  .npb-modal :is(h1,h2,h3,h4,p,label,strong,small,span),
  .ncv-modal :is(h1,h2,h3,h4,p,label,strong,small,span),
  .nx-modal :is(h1,h2,h3,h4,p,label,strong,small,span),
  .nord-select-menu :is(button,span,div)
){color:inherit}
html[data-theme="light"] :where(
  .nord-select-trigger,.nord-select-option,.nord-select-group,
  .dropdown-menu button,.context-menu button,.menu-popover button
){
  color:var(--text-2);
  background-color:var(--surface)!important;
  border-color:var(--border)!important;
}
html[data-theme="light"] :where(
  .nord-select-option:hover,.nord-select-option:focus-visible,
  .dropdown-menu button:hover,.context-menu button:hover,.menu-popover button:hover
){background:var(--hover)!important;color:var(--text)!important}
html[data-theme="light"] :where(.loading-line.active,.auth-boot-screen){background:var(--bg)!important}
html[data-theme="light"] :where(.auth-boot-card,.auth-wrap,.login-card){
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important
}
html[data-theme="light"] :where(.nx-skeleton,[class*="-skeleton"]){
  background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2))!important;
  background-size:200% 100%!important;
}
html[data-theme="light"] :where(.modal-backdrop,.nord-onboarding-backdrop,.sidebar-backdrop,
  .ncv-backdrop,.nct-backdrop,.nfb-backdrop,.npb-backdrop,.npbc-backdrop,.npbi-backdrop,
  .npbm-backdrop,.nca-backdrop,.sports-backdrop,.ncp-backdrop,.ncp-rename-backdrop,
  .nx-modal-backdrop,.nx-ig-modal-backdrop,.nx-story-create-backdrop,.nx-story-editor-backdrop,
  .nord-confirm-overlay){background:var(--overlay-strong)!important}

/* Giveaway Discord preview: Discord's dark palette is useful as a preview,
   but must not make the whole builder unreadable when Nord is in light mode. */
html[data-theme="light"] .giveaway-discord-message{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
}
html[data-theme="light"] .giveaway-discord-author strong{color:var(--text)!important}
html[data-theme="light"] .giveaway-discord-author small{color:var(--muted)!important}
html[data-theme="light"] .giveaway-discord-embed{
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-theme="light"] .giveaway-preview-title,
html[data-theme="light"] .giveaway-preview-prize strong,
html[data-theme="light"] .giveaway-preview-how strong,
html[data-theme="light"] .giveaway-preview-fields strong{color:var(--text)!important}
html[data-theme="light"] .giveaway-preview-description,
html[data-theme="light"] .giveaway-preview-prize span,
html[data-theme="light"] .giveaway-preview-how span,
html[data-theme="light"] .giveaway-preview-fields span{color:var(--text-2)!important}
html[data-theme="light"] .giveaway-preview-footer{
  border-top-color:var(--border)!important;
  color:var(--muted)!important;
}

/* All Discord-like previews use the same light surface contract. */
html[data-theme="light"] :where(.discord-preview,.messages-discord-preview,.messages-event-discord,
  .announcement-discord-message){
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-theme="light"] .discord-preview{
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
}
html[data-theme="light"] .discord-author{color:var(--text)!important}
html[data-theme="light"] .discord-author small{color:var(--muted)!important}
html[data-theme="light"] .discord-embed{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-theme="light"] .discord-embed h4{color:var(--text)!important}
html[data-theme="light"] .discord-embed p{color:var(--text-2)!important}
html[data-theme="light"] .discord-embed footer{color:var(--muted)!important;border-top-color:var(--border)!important}
html[data-theme="light"] .discord-button{color:#fff!important}
html[data-theme="light"] :where(.discord-author,.messages-discord-author strong,
  .announcement-discord-author strong){color:var(--text)!important}
html[data-theme="light"] :where(.discord-author small,.messages-discord-author small,
  .announcement-discord-author small){color:var(--muted)!important}
html[data-theme="light"] :where(.discord-embed,.messages-preview-embed,
  .announcement-discord-embed){
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-theme="light"] :where(.discord-embed h4,.messages-preview-embed-copy strong,
  .announcement-preview-title){color:var(--text)!important}
html[data-theme="light"] :where(.discord-embed p,.messages-preview-plain,
  .messages-preview-embed-copy p,.announcement-preview-message){color:var(--text-2)!important}
html[data-theme="light"] :where(.discord-embed footer,.messages-preview-embed-copy small,
  .messages-preview-timestamp,.announcement-preview-footer){color:var(--muted)!important}
html[data-theme="light"] :where(.messages-discord-channel){
  color:var(--text-2)!important;
  border-bottom-color:var(--border)!important;
}
html[data-theme="light"] :where(.messages-discord-avatar,.messages-preview-thumbnail,
  .messages-preview-media-thumbnail,.messages-preview-embed-image,
  .messages-preview-attachments img){background:var(--surface-3)!important}
html[data-theme="light"] :where(.announcement-preview-footer){border-top-color:var(--border)!important}

/* Automation wizard dark-theme contract. The builder stylesheet mixes a
   small amount of dark blue into its surfaces; define the complete palette
   here so every wizard layer follows Nord dark mode instead of rendering as a
   light window inside a dark shell. */
html[data-theme="dark"] #automationCreateModal,
html[data-theme="dark"] #automationManageModal{
  --auto-border:#2a3445;
  --auto-border-strong:#4659c9;
  --auto-panel:#151c28;
  --auto-panel-deep:#0f151f;
  --auto-soft:rgba(120,135,255,.14);
  --auto-muted:#aab5c7;
}
html[data-theme="dark"] #automationCreateModal .automation-create-wizard,
html[data-theme="dark"] #automationManageModal .automation-management-modal{
  background:#111722!important;
  color:var(--text)!important;
  border-color:var(--auto-border)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] #automationCreateModal .automation-create-wizard,
html[data-theme="dark"] #automationManageModal .automation-management-modal{
  padding:0!important;
}
html[data-theme="dark"] #automationCreateModal :where(.automation-builder-head,.automation-create-stepper,
  .automation-create-stage,.automation-create-actions),
html[data-theme="dark"] #automationManageModal :where(.automation-management-head,
  .automation-management-sidebar,.automation-management-workspace){
  color:var(--text)!important;
  border-color:var(--auto-border)!important;
}
html[data-theme="dark"] #automationCreateModal .automation-builder-head,
html[data-theme="dark"] #automationCreateModal .automation-create-stepper,
html[data-theme="dark"] #automationManageModal .automation-management-head{
  background:linear-gradient(180deg,#151d2a 0%,#111722 100%)!important;
}
html[data-theme="dark"] #automationCreateModal .automation-builder-head,
html:not([data-theme="dark"]) #automationCreateModal .automation-builder-head{
  margin-bottom:0!important;
}
html[data-theme="dark"] #automationCreateModal .automation-create-stage,
html[data-theme="dark"] #automationManageModal .automation-management-workspace{
  background:#0f151f!important;
}
html[data-theme="dark"] #automationCreateModal .automation-create-actions{
  background:#111722!important;
}
/* Keep the wizard as one continuous dark surface. The original builder adds
   blue-tinted panels behind the header, stepper and footer, which creates
   three unnecessary boxes inside the modal. */
html[data-theme="dark"] #automationCreateModal :where(.automation-builder-head,
  .automation-create-stepper,.automation-create-actions),
html[data-theme="dark"] #automationManageModal :where(.automation-management-head){
  background:transparent!important;
}
html[data-theme="dark"] #automationCreateModal .automation-create-layout,
html[data-theme="dark"] #automationCreateModal .automation-create-stage{
  background:transparent!important;
}
html[data-theme="dark"] #automationCreateModal :where(.automation-builder-section,
  .automation-template-card,.automation-trigger-option,.automation-flow-step,
  .automation-flow-canvas,.automation-logic-branch,.automation-flow-inspector-card),
html[data-theme="dark"] #automationManageModal :where(.automation-management-card,
  .automation-management-state,.automation-activity-grid>div){
  color:var(--text)!important;
  border-color:var(--auto-border)!important;
  background:var(--auto-panel-deep)!important;
}
html[data-theme="dark"] #automationCreateModal .automation-template-card:hover,
html[data-theme="dark"] #automationCreateModal .automation-trigger-option:hover{
  background:#182235!important;
}
html[data-theme="dark"] #automationCreateModal .automation-template-card.active,
html[data-theme="dark"] #automationCreateModal .automation-template-card[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(120,135,255,.20),rgba(120,135,255,.10))!important;
  border-color:#6575ed!important;
  box-shadow:inset 0 0 0 1px rgba(120,135,255,.18),0 10px 24px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] #automationCreateModal :where(.automation-template-card strong,
  .automation-builder-section-head strong,.automation-flow-step-name strong,
  .automation-create-step-copy strong,.automation-flow-inspector-card strong),
html[data-theme="dark"] #automationManageModal :where(.automation-management-card strong,
  .automation-management-state strong){color:var(--text)!important}
html[data-theme="dark"] #automationCreateModal :where(.automation-template-card small,
  .automation-builder-section-head small,.automation-flow-step-name small,
  .automation-create-step-copy small,.automation-flow-step-note),
html[data-theme="dark"] #automationManageModal :where(.automation-management-card small,
  .automation-management-state small){color:var(--auto-muted)!important}

/* Automation wizard light-theme surfaces. Do not mix the light palette with
   the dark fallback #050913 used by the original premium variables. */
html:not([data-theme="dark"]) #automationCreateModal,
html:not([data-theme="dark"]) #automationManageModal{
  --auto-border:#dfe6f0;
  --auto-border-strong:#aebcf5;
  --auto-panel:#f8fafc;
  --auto-panel-deep:#ffffff;
  --auto-soft:#eef1ff;
  --auto-muted:#718096;
}
html:not([data-theme="dark"]) #automationCreateModal .automation-create-wizard,
html:not([data-theme="dark"]) #automationManageModal .automation-management-modal{
  background:#f8fafc!important;
  color:var(--text)!important;
  border-color:var(--auto-border)!important;
  box-shadow:0 30px 90px rgba(15,23,42,.18)!important;
}
html:not([data-theme="dark"]) #automationCreateModal .automation-create-wizard,
html:not([data-theme="dark"]) #automationManageModal .automation-management-modal{
  padding:0!important;
}
html:not([data-theme="dark"]) #automationCreateModal .automation-builder-head,
html:not([data-theme="dark"]) #automationCreateModal .automation-create-stepper,
html:not([data-theme="dark"]) #automationManageModal .automation-management-head{
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)!important;
  border-color:var(--auto-border)!important;
}
html:not([data-theme="dark"]) #automationCreateModal .automation-create-stage,
html:not([data-theme="dark"]) #automationManageModal .automation-management-workspace{
  background:#ffffff!important;
}
html:not([data-theme="dark"]) #automationCreateModal :where(.automation-builder-section,
  .automation-template-card,.automation-trigger-option,.automation-flow-step,
  .automation-flow-canvas,.automation-logic-branch),
html:not([data-theme="dark"]) #automationManageModal :where(.automation-management-card,
  .automation-management-state,.automation-activity-grid>div){
  background:var(--auto-panel-deep)!important;
  color:var(--text)!important;
  border-color:var(--auto-border)!important;
}
html:not([data-theme="dark"]) #automationCreateModal .automation-template-card:hover,
html:not([data-theme="dark"]) #automationCreateModal .automation-trigger-option:hover{
  background:#f5f7ff!important;
  border-color:#b9c4f7!important;
}
html:not([data-theme="dark"]) #automationCreateModal .automation-template-card.active,
html:not([data-theme="dark"]) #automationCreateModal .automation-template-card[aria-pressed="true"]{
  background:linear-gradient(180deg,#f0f3ff 0%,#e9edff 100%)!important;
  border-color:#9aaaf4!important;
  box-shadow:inset 0 0 0 1px rgba(91,110,245,.12),0 8px 20px rgba(91,110,245,.10)!important;
}

/* Five compact steps: template, identity, trigger, logic and review. */
#automationCreateModal .automation-create-stepper{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
#automationCreateModal .automation-identity-step{
  min-height:0;
}
#automationCreateModal .automation-create-step::before{
  top:58px!important;
}
@media(max-width:1180px){
  #automationCreateModal .automation-create-step::before{
    top:50px!important;
  }
}
@media(max-width:820px){
  #automationCreateModal .automation-create-stepper{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  #automationCreateModal .automation-create-step::before{
    top:39px!important;
  }
}

/* App shell scrolling contract: navigation stays fixed while only the page
   viewport scrolls. This prevents the topbar and sidebar from drifting away
   on long dashboards and builder pages. */
html:has(#appShell:not([hidden])),
body:has(#appShell:not([hidden])){
  height:100%;
  overflow:hidden;
}
#appShell:not([hidden]){
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
#appShell:not([hidden]) .nord-main{
  min-height:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#appShell:not([hidden]) .nord-topbar{
  position:relative;
  top:auto;
  flex:0 0 auto;
}
#appShell:not([hidden]) .nord-page{
  width:100%;
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
#appShell:not([hidden]) .nord-rail,
#appShell:not([hidden]) .nord-sidebar{
  position:sticky;
  top:0;
  height:100dvh;
  max-height:100dvh;
}
html:not([data-theme="dark"]) #automationCreateModal :where(.automation-template-card strong,
  .automation-builder-section-head strong,.automation-flow-step-name strong,
  .automation-create-step-copy strong,.automation-flow-inspector-card strong),
html:not([data-theme="dark"]) #automationManageModal :where(.automation-management-card strong,
  .automation-management-state strong){color:var(--text)!important}
html:not([data-theme="dark"]) #automationCreateModal :where(.automation-template-card small,
  .automation-builder-section-head small,.automation-flow-step-name small,
  .automation-create-step-copy small,.automation-flow-step-note),
html:not([data-theme="dark"]) #automationManageModal :where(.automation-management-card small,
  .automation-management-state small){color:var(--auto-muted)!important}
html:not([data-theme="dark"]) #automationCreateModal .automation-create-step:not(.active) .automation-create-step-icon,
html:not([data-theme="dark"]) #automationCreateModal .automation-create-step:not(.current) .automation-create-step-icon{
  background:#f1f4f8!important;
  border-color:#d8e0ea!important;
  color:#7b8798!important;
}

/* Panel Discord preview: use explicit light/dark branches instead of relying
   on inherited colors. This also prevents the initial theme-application frame
   from leaving the preview stuck in Discord dark mode. */
html:not([data-theme="dark"]) .builder-preview .discord-preview,
html:not([data-theme="dark"]) .discord-preview{
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
}
html:not([data-theme="dark"]) .discord-preview .discord-author,
html:not([data-theme="dark"]) .discord-preview .discord-author strong,
html:not([data-theme="dark"]) .discord-preview .discord-embed h4{
  color:var(--text)!important;
}
html:not([data-theme="dark"]) .discord-preview .discord-author small,
html:not([data-theme="dark"]) .discord-preview .discord-embed footer{
  color:var(--muted)!important;
}
html:not([data-theme="dark"]) .discord-preview .discord-embed{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html:not([data-theme="dark"]) .discord-preview .discord-embed p{color:var(--text-2)!important}

html[data-theme="dark"] .builder-preview .discord-preview,
html[data-theme="dark"] .discord-preview{
  background:#313338!important;
  color:#dbdee1!important;
  border:1px solid #42464d!important;
}
html[data-theme="dark"] .discord-preview .discord-author,
html[data-theme="dark"] .discord-preview .discord-author strong,
html[data-theme="dark"] .discord-preview .discord-embed h4{color:#f2f3f5!important}
html[data-theme="dark"] .discord-preview .discord-author small{color:#949ba4!important}
html[data-theme="dark"] .discord-preview .discord-embed{
  background:#2b2d31!important;
  color:#dbdee1!important;
  border-color:#42464d!important;
}
html[data-theme="dark"] .discord-preview .discord-embed p{color:#dbdee1!important}
html[data-theme="dark"] .discord-preview .discord-embed footer{color:#b5bac1!important}
html[data-theme="light"] .discord-preview .discord-button,
html:not([data-theme="dark"]) .discord-preview .discord-button,
html[data-theme="dark"] .discord-preview .discord-button{color:#fff!important}

/* Panel Builder's injected preview uses npb-* classes (not discord-*). */
html:not([data-theme="dark"]) :where(.npb-discord,.npbm-discord){
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
}
html:not([data-theme="dark"]) :where(.npb-discord-author,.npbm-discord-author),
html:not([data-theme="dark"]) :where(.npb-discord-author strong,.npb-discord-author b,
  .npbm-discord-author strong,.npbm-discord-author b){color:var(--text)!important}
html:not([data-theme="dark"]) :where(.npb-discord-author small,.npbm-discord-author small,
  .npb-discord-embed footer,.npbm-discord-embed footer){color:var(--muted)!important}
html:not([data-theme="dark"]) :where(.npb-discord-embed,.npbm-discord-embed){
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html:not([data-theme="dark"]) :where(.npb-discord-embed h4,.npbm-discord-embed h4){color:var(--text)!important}
html:not([data-theme="dark"]) :where(.npb-discord-embed p,.npbm-discord-embed p){color:var(--text-2)!important}

html[data-theme="dark"] :where(.npb-discord,.npbm-discord){
  background:#313338!important;
  color:#dbdee1!important;
  border-color:#42464d!important;
}
html[data-theme="dark"] :where(.npb-discord-author,.npbm-discord-author,
  .npb-discord-author strong,.npb-discord-author b,.npbm-discord-author strong,
  .npbm-discord-author b,.npb-discord-embed h4,.npbm-discord-embed h4){color:#f2f3f5!important}
html[data-theme="dark"] :where(.npb-discord-author small,.npbm-discord-author small){color:#949ba4!important}
html[data-theme="dark"] :where(.npb-discord-embed,.npbm-discord-embed){
  background:#2b2d31!important;
  color:#dbdee1!important;
  border-color:#42464d!important;
}
html[data-theme="dark"] :where(.npb-discord-embed p,.npbm-discord-embed p){color:#dbdee1!important}
html[data-theme="dark"] :where(.npb-discord-embed footer,.npbm-discord-embed footer){color:#b5bac1!important}
html:not([data-theme="dark"]) :where(.npb-discord-button,.npbm-discord-button),
html[data-theme="dark"] :where(.npb-discord-button,.npbm-discord-button){color:#fff!important}

/* Panel list empty state: one centered CTA, without a duplicate create card. */
.npb-grid.npb-grid-empty{
  grid-template-columns:minmax(0,1fr)!important;
  justify-content:center!important;
  min-height:300px;
}
.npb-grid .npb-empty-primary{
  width:min(100%,760px);
  min-height:270px;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:42px 28px!important;
  border:1px solid var(--border)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--surface-2) 42%,var(--surface)) 100%)!important;
  box-shadow:0 14px 32px rgba(15,23,42,.05)!important;
}
.npb-grid .npb-empty-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  border-radius:17px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:22px;
}
.npb-grid .npb-empty-primary strong{font-size:15px!important}
.npb-grid .npb-empty-primary small{max-width:360px;line-height:1.5}
.npb-grid .npb-empty-action{margin-top:10px;min-height:40px;padding-inline:18px}