/* This declares the base color tokens used by older template styles. */
:root {
    --palette-blue: #38BDF8;
    --palette-ash: #1B2538;
    --palette-light: #FFFFFF;
    --palette-black: #0B1020;
    --palette-ink: rgba(148, 163, 184, 0.28);
    --palette-module: #151C2D;
    --bg: #0B1020;
    --surface: #151C2D;
    --surface-soft: #1B2538;
    --surface-blue: rgba(56, 189, 248, 0.12);
    --panel: #151C2D;
    --panel-soft: #1B2538;
    --paragraph-bg: #182033;
    --module-bg: #151C2D;
    --line: rgba(148, 163, 184, 0.2);
    --line-strong: rgba(148, 163, 184, 0.34);
    --text: #FFFFFF;
    --muted: #94A3B8;
    --blue: #38BDF8;
    --blue-dark: #F8FAFC;
    --teal: #38BDF8;
    --green: #34D399;
    --danger: #F87171;
    --shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
    --game-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

/* Argus Engine UI refresh: compact strategy-dashboard treatment inspired by
   modern grand-strategy interfaces, without third-party assets. */
:root {
    --palette-blue: #38BDF8;
    --palette-ash: #1B2538;
    --palette-light: #FFFFFF;
    --palette-black: #0B1020;
    --palette-ink: rgba(148, 163, 184, 0.28);
    --palette-module: #151C2D;
    --bg: #0B1020;
    --surface: #151C2D;
    --surface-soft: #1B2538;
    --surface-blue: rgba(56, 189, 248, 0.12);
    --panel: #151C2D;
    --panel-soft: #1B2538;
    --paragraph-bg: #182033;
    --module-bg: #151C2D;
    --line: rgba(148, 163, 184, 0.2);
    --line-strong: rgba(148, 163, 184, 0.34);
    --text: #FFFFFF;
    --muted: #94A3B8;
    --blue: #38BDF8;
    --blue-dark: #F8FAFC;
    --teal: #38BDF8;
    --green: #34D399;
    --gold: #FBBF24;
    --danger: #F87171;
    --shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
    --game-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    --focus-ring: 0 0 0 4px rgba(56, 189, 248, 0.24);
}

/* This sets the global document, body, type, and focus behavior. */
html {
    background: var(--bg) !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg) !important;
    background-image:
        radial-gradient(circle at 18% 10%, rgba(56, 189, 248, 0.13) 0%, transparent 34%),
        linear-gradient(180deg, #0B1020 0%, #0F172A 100%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
}

body.campaign-detail-page {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background-color: #3A2415 !important;
    background-image: url("../images/campaign-desk-background.05a3de6eeda8.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

body.modal-open {
    overflow: hidden !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
}

[hidden] {
    display: none !important;
}

/* This controls the shared page shell and sticky application header. */
.app-shell,
.shell {
    width: min(1700px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
    padding: 12px 0 24px !important;
}

.topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 50 !important;
    display: flex !important;
    width: 96vw !important;
    min-height: 64px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 0 14px 50% !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(149, 174, 200, 0.55) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 12px 34px rgba(7, 27, 49, 0.13) !important;
    color: var(--text) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(18px);
}

.brand,
.identity {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 6px !important;
}

.identity {
    display: grid !important;
    gap: 2px !important;
}

.brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 auto !important;
    border: 1px solid #D0D2D4 !important;
    border-radius: 8px !important;
    background: #303337 !important;
    box-shadow: 0 8px 18px rgba(11, 38, 69, 0.15) !important;
    object-fit: cover !important;
}

.brand-text {
    display: grid !important;
    min-width: 0 !important;
    gap: 1px !important;
}

.brand-kicker,
.eyebrow {
    margin: 0 !important;
    color: var(--teal) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.brand-title {
    color: var(--blue-dark) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}

.topbar h1,
.identity h1,
h1 {
    margin: 0 !important;
    color: var(--blue-dark) !important;
    font-size: clamp(1.45rem, 1.1rem + 0.9vw, 2.1rem) !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
}

h2,
.section-title,
.panel-title,
.admin-action-title {
    color: var(--blue-dark) !important;
    font-weight: 850 !important;
}

.main-nav,
.mode-switch {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px !important;
    border: 1px solid #E0E1E2 !important;
    border-radius: 8px !important;
    background: #F5F5F5 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.nav-link,
.mode-link {
    display: inline-flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.nav-link:hover,
.mode-link:hover {
    border-color: #D0D2D5 !important;
    background: #F6F6F5 !important;
    color: var(--blue-dark) !important;
    transform: none !important;
}

.nav-link.active,
.mode-link.active {
    border-color: #626970 !important;
    background: var(--blue) !important;
    color: #F6F6F5 !important;
    box-shadow: 0 8px 18px rgba(36, 120, 212, 0.2) !important;
}

.admin-nav {
    position: relative !important;
    display: inline-flex !important;
    min-width: 0 !important;
}

.admin-nav-toggle {
    cursor: pointer !important;
    list-style: none !important;
}

.admin-nav-toggle::-webkit-details-marker {
    display: none !important;
}

.admin-nav-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    z-index: 40 !important;
    display: none !important;
    min-width: 150px !important;
    padding: 6px !important;
    border: 1px solid #C9CCD0 !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
    box-shadow: 0 14px 28px rgba(21, 32, 51, 0.18) !important;
}

.admin-nav[open] .admin-nav-menu {
    display: grid !important;
    gap: 5px !important;
}

.admin-nav-item {
    width: 100% !important;
    justify-content: flex-start !important;
}

.account-strip,
.controls {
    display: flex !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.balance-pill,
.user-tab,
.count-pill,
.status-pill,
.row-count,
.character-count,
.npc-source {
    border: 1px solid #DEDFE0 !important;
    border-radius: 999px !important;
    background: #F7F7F7 !important;
    color: var(--blue-dark) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

.balance-pill {
    min-height: 34px !important;
    padding: 7px 11px !important;
    white-space: nowrap !important;
}

a.balance-pill {
    cursor: pointer !important;
    text-decoration: none !important;
}

a.balance-pill:hover {
    border-color: var(--blue) !important;
    background: #F6F6F5 !important;
}

.user-tab {
    min-height: 38px !important;
    padding: 4px 5px 4px 11px !important;
}

.user-tab button {
    min-height: 30px !important;
    padding: 6px 9px !important;
}

.logout-button {
    min-height: 32px !important;
    padding: 7px 16px !important;
    border: 1px solid #C9CCD0 !important;
    border-radius: 999px !important;
    background: #F7F7F7 !important;
    color: var(--blue-dark) !important;
    box-shadow: none !important;
}

.logout-button:hover {
    border-color: var(--blue) !important;
    background: #FFFFFF !important;
    color: var(--palette-black) !important;
}

.button,
.button-form button,
.create-form button,
.delete-form button,
.action-delete-form button,
.share-button,
.balance-form button {
    display: inline-flex !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border: 1px solid #A2A5A8 !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
    color: var(--blue-dark) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 0 rgba(17, 35, 56, 0.06) !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.button:hover,
.button-form button:hover,
.create-form button:hover,
.delete-form button:hover,
.action-delete-form button:hover,
.share-button:hover,
.balance-form button:hover {
    border-color: var(--blue) !important;
    background: #F2F2F3 !important;
    color: var(--blue-dark) !important;
    transform: translateY(-1px) !important;
}

.button.primary,
.button-form.primary button,
.create-form button,
.share-button,
.balance-form button {
    border-color: #626970 !important;
    background: linear-gradient(180deg, #72777D 0%, #555B62 100%) !important;
    color: #F6F6F5 !important;
    box-shadow: 0 10px 20px rgba(36, 120, 212, 0.18) !important;
}

.button.danger,
.delete-form button,
.action-delete-form button {
    border-color: #C8C8C8 !important;
    background: #F5F5F5 !important;
    color: var(--danger) !important;
}

input,
select,
textarea,
.balance-form input {
    border: 1px solid #C8CACC !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
    color: var(--text) !important;
    box-shadow: inset 0 1px 2px rgba(17, 35, 56, 0.04) !important;
}

input:focus,
select:focus,
textarea:focus,
.balance-form input:focus {
    border-color: var(--blue) !important;
    box-shadow: var(--focus-ring), inset 0 1px 2px rgba(17, 35, 56, 0.04) !important;
}

.page-header {
    display: grid !important;
    gap: 14px !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid #DCDDDE !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: var(--shadow) !important;
}

/* This arranges the major dashboard and campaign page grids. */
.overview-grid,
.database-meta,
.start-grid,
.user-grid,
.debug-grid,
.database-layout,
.campaign-section,
.dashboard-panel {
    gap: 12px !important;
}

.overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.user-grid {
    width: 96vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    column-gap: 24px !important;
    row-gap: 12px !important;
    grid-template-columns: minmax(390px, 31vw) minmax(420px, 1fr) !important;
    align-items: start !important;
}

.campaign-detail-page .shell {
    width: min(2000px, calc(100vw - 96px)) !important;
    max-width: calc(100vw - 32px) !important;
    overflow-x: clip !important;
}

.campaign-detail-page .topbar {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    transform: none !important;
}

.campaign-command-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.campaign-workspace.user-grid {
    --bs-gutter-x: 0 !important;
    display: flex !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}

.campaign-primary-workspace,
.campaign-command-column {
    min-width: 0 !important;
}

.player-rail {
    --rail-header-height: 58px;
    --action-dock-bottom: clamp(14px, 2vw, 30px);
    --action-dock-size: 54px;
    --action-dock-gap: 14px;
    position: fixed !important;
    top: auto !important;
    right: clamp(14px, 2vw, 36px) !important;
    bottom: calc(var(--action-dock-bottom) + var(--action-dock-size) + var(--action-dock-gap)) !important;
    left: auto !important;
    width: min(520px, calc(100vw - 28px)) !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    min-height: 0 !important;
    align-self: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    isolation: isolate !important;
    z-index: 75 !important;
}

/* This controls collapsible rail panels in the campaign view. */
.player-rail .panel-header {
    height: var(--rail-header-height) !important;
    min-height: var(--rail-header-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.rail-disclosure-panel,
.player-block-panel {
    min-height: 0 !important;
    overflow: hidden !important;
}

.index-card {
    --index-card-width: min(clamp(360px, 28vw, 520px), calc(100vw - 36px));
    --index-card-header-height: 54px;
    --index-card-closed-tab-width: var(--index-card-header-height);
    position: fixed !important;
    top: clamp(78px, 10vh, 118px) !important;
    left: 0 !important;
    z-index: 120 !important;
    display: grid !important;
    width: var(--index-card-width) !important;
    max-width: none !important;
    appearance: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #b8b8b8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #fffdf5 0%, #f8f4e8 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    color: #2f2a22 !important;
    cursor: pointer !important;
    font-family: Georgia, "Times New Roman", serif !important;
    text-align: left !important;
    user-select: none !important;
    transform: translateX(18px) rotate(0deg) !important;
    transform-box: border-box !important;
    transform-origin: top left !important;
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform !important;
}

.index-card[data-index-card-open="false"] {
    transform: translateX(var(--index-card-closed-tab-width)) rotate(90deg) !important;
}

.index-card:hover,
.index-card:focus-visible {
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.index-card,
.index-card * {
    color: #2f2a22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.index-card-header {
    display: flex !important;
    min-height: 54px !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 16px 24px 10px !important;
    border-bottom: 2px solid #cf3f35 !important;
    background: rgba(255, 255, 255, 0.28) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.index-card-header-title,
.index-card-round {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.index-card-round {
    flex: 0 0 auto !important;
    color: #4a4236 !important;
}

.index-card-body {
    display: grid !important;
    padding: 0 24px 18px !important;
}

.card-line {
    display: grid !important;
    height: 38px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: end !important;
    column-gap: 28px !important;
    border-bottom: 1.5px solid rgba(55, 93, 210, 0.72) !important;
}

.line-left,
.line-right {
    min-width: 0 !important;
    padding-bottom: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    transform: translateY(-0.04em) !important;
    white-space: nowrap !important;
}

.line-left {
    font-weight: 600 !important;
}

.line-right {
    color: #4a4236 !important;
    text-align: right !important;
}

.rail-disclosure-panel .panel-header,
.player-block-panel .panel-header {
    gap: 10px !important;
}

.rail-disclosure-toggle,
.player-block-toggle {
    display: flex !important;
    min-width: 0 !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    cursor: pointer !important;
    text-align: left !important;
}

.rail-disclosure-toggle .panel-title,
.player-block-toggle .panel-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.rail-disclosure-caret,
.player-block-caret {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 auto !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform 160ms ease !important;
}

.player-block-panel[data-player-block-open="true"] .player-block-caret {
    transform: rotate(225deg) !important;
}

.rail-disclosure-panel .panel-body,
.player-block-panel .panel-body {
    max-height: calc(100vh - 430px) !important;
    overflow-y: auto !important;
    transition:
        max-height 220ms ease,
        padding-top 180ms ease,
        padding-bottom 180ms ease,
        opacity 160ms ease !important;
}

.player-block-panel[data-player-block-open="false"] .panel-body {
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.player-block-panel[data-player-block-open="true"] .panel-body {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* This styles the action composer anchored at the bottom of the player rail. */
.action-composer-panel {
    width: 100% !important;
    max-height: calc(100vh - 132px) !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 20 !important;
    overflow: hidden !important;
}

.action-composer-panel .panel-body {
    display: grid !important;
    gap: 10px !important;
}

.action-composer-panel.typewriter-action-ui {
    position: fixed !important;
    left: auto !important;
    right: clamp(14px, 2vw, 36px) !important;
    bottom: calc(
        var(--action-dock-bottom, 30px)
        + var(--action-dock-size, 54px)
        + var(--action-dock-gap, 14px)
    ) !important;
    z-index: 75 !important;
    display: flex !important;
    width: clamp(340px, 34vw, 520px) !important;
    max-height: calc(100vh - 96px) !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: text !important;
    transform: none !important;
}

.action-form.typewriter-action-form,
.typewriter-action-form {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
}

.typewriter-paper {
    position: relative !important;
    z-index: 1 !important;
    width: 74% !important;
    min-height: 168px !important;
    max-height: none !important;
    margin-bottom: -18px !important;
    padding: 24px 28px 34px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.typewriter-paper::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

.typewriter-paper::after {
    content: none !important;
    display: none !important;
    background: none !important;
    pointer-events: none !important;
}

body.campaign-detail-page .typewriter-action-ui textarea.typewriter-paper-text,
body.campaign-detail-page .typewriter-action-ui .action-textarea.typewriter-paper-text,
body.campaign-detail-page .typewriter-action-ui .typewriter-paper-text {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    min-height: 106px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 38px 0 0 !important;
    overflow: hidden !important;
    resize: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2F2A22 !important;
    caret-color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
    line-height: 29px !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
}

body.campaign-detail-page .typewriter-action-ui textarea.typewriter-paper-text:focus,
body.campaign-detail-page .typewriter-action-ui .action-textarea.typewriter-paper-text:focus,
body.campaign-detail-page .typewriter-action-ui .typewriter-paper-text:focus {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.campaign-detail-page .typewriter-action-ui .typewriter-paper-text::placeholder {
    color: rgba(47, 42, 34, 0.58) !important;
}

body.campaign-detail-page .typewriter-action-ui:focus-within .typewriter-body,
body.campaign-detail-page .typewriter-action-ui:focus-within .typewriter-paper,
body.campaign-detail-page .typewriter-action-ui.is-active .typewriter-body,
body.campaign-detail-page .typewriter-action-ui.is-active .typewriter-paper {
    border-color: #C4A572 !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.14),
        0 0 0 2px rgba(196, 165, 114, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

.typewriter-body {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    padding: 26px 28px 24px !important;
    box-sizing: border-box !important;
    border: 1px solid #8F8F8F !important;
    border-radius: 6px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.16)),
        linear-gradient(180deg, #4A4A46 0%, #2C2B29 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.24),
        0 3px 8px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.typewriter-top-bar {
    height: 18px !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(20, 20, 20, 0.55) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.24)),
        #20201F !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 3px 8px rgba(0, 0, 0, 0.24) !important;
}

.typewriter-keys {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.typewriter-keys span {
    height: 26px !important;
    border: 1px solid rgba(0, 0, 0, 0.42) !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #D8D0C0 100%) !important;
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.typewriter-spacebar {
    display: block !important;
    width: 62% !important;
    min-width: 190px !important;
    height: 38px !important;
    margin: 0 auto !important;
    border: 2px solid #2F2A22 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #EEE6D5 100%) !important;
    color: #000000 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    cursor: pointer !important;
    transition:
        background 140ms ease,
        border-color 140ms ease,
        transform 120ms ease !important;
}

.typewriter-spacebar:hover {
    border-color: #211D18 !important;
    background: linear-gradient(180deg, #D8D0C0 0%, #B9AD98 100%) !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
}

.typewriter-spacebar:active {
    transform: translateY(0) !important;
}

.typewriter-spacebar:disabled {
    cursor: wait !important;
    opacity: 0.72 !important;
}

.action-bubble-flight.typewriter-action-flight {
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    line-height: 1.5 !important;
}

.action-textarea {
    min-height: clamp(120px, 18vh, 190px) !important;
    max-height: 32vh !important;
    border: 2px solid #A7AAAD !important;
    background: #ECEDEE !important;
    box-shadow:
        inset 0 2px 6px rgba(19, 64, 99, 0.08),
        0 8px 18px rgba(19, 64, 99, 0.08) !important;
}

.action-textarea:focus {
    border-color: #626970 !important;
    background: #F3F3F4 !important;
}

.desk-drawer {
    position: fixed !important;
    top: clamp(78px, 10vh, 118px) !important;
    right: 0 !important;
    bottom: calc(
        var(--action-dock-bottom, 30px)
        + var(--action-dock-size, 54px)
        + var(--action-dock-gap, 14px)
        + var(--action-composer-height, 270px)
        + 12px
    ) !important;
    left: auto !important;
    z-index: 70 !important;
    --drawer-handle-width: 58px;
    --drawer-scroll-end-pad: clamp(34px, 8vh, 96px);
    width: clamp(340px, 58vw, 900px) !important;
    height: auto !important;
    min-height: 260px !important;
    overflow: hidden !important;
    border: 1px solid #8F7460 !important;
    border-right: 0 !important;
    border-radius: 8px 0 0 8px !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.05),
            rgba(255, 255, 255, 0.04)
        ),
        repeating-linear-gradient(
            8deg,
            rgba(255, 255, 255, 0.045) 0,
            rgba(255, 255, 255, 0.045) 2px,
            rgba(0, 0, 0, 0.035) 3px,
            rgba(0, 0, 0, 0.035) 6px
        ),
        linear-gradient(180deg, #8A5D3D 0%, #6F472E 100%) !important;
    box-shadow:
        -16px 0 32px rgba(0, 0, 0, 0.24),
        -4px 0 10px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transform: translateX(calc(100% - var(--drawer-handle-width))) !important;
    transition:
        transform 320ms ease,
        box-shadow 320ms ease !important;
    will-change: transform !important;
}

.desk-drawer.is-open,
.desk-drawer[data-desk-drawer-open="true"] {
    box-shadow:
        -22px 0 44px rgba(0, 0, 0, 0.28),
        -5px 0 14px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateX(0) !important;
}

.desk-drawer:not(.is-open):not([data-desk-drawer-open="true"]) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.desk-drawer-top {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    width: var(--drawer-handle-width) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    border-right: 1px solid rgba(45, 28, 18, 0.45) !important;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.08)),
        rgba(83, 51, 32, 0.28) !important;
}

.desk-drawer:not(.is-open):not([data-desk-drawer-open="true"]) .desk-drawer-top {
    border-right-color: transparent !important;
    background: transparent !important;
}

.drawer-toggle,
.drawer-tab,
.drawer-link {
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: #1F2A3D !important;
    color: var(--text) !important;
    box-shadow: 0 1px 0 rgba(17, 35, 56, 0.06) !important;
    cursor: pointer !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.drawer-toggle {
    display: inline-flex !important;
    width: 42px !important;
    min-width: 42px !important;
    min-height: 150px !important;
    padding: 12px 8px !important;
    white-space: nowrap !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
}

.drawer-tabs {
    display: grid !important;
    width: min(520px, 100%) !important;
    justify-self: center !important;
    grid-template-columns: repeat(4, minmax(74px, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
}

.drawer-tab {
    display: inline-flex !important;
    width: 100% !important;
    padding: 0 12px !important;
}

.drawer-toggle:hover,
.drawer-tab:hover,
.drawer-link:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
    background: #273449 !important;
    color: var(--text) !important;
    transform: translateY(-1px) !important;
}

.drawer-tab.active,
.drawer-tab[aria-selected="true"] {
    border-color: rgba(56, 189, 248, 0.72) !important;
    background: linear-gradient(180deg, #60A5FA 0%, var(--blue) 100%) !important;
    color: #07111F !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.18) !important;
}

.desk-drawer-content {
    height: 100% !important;
    margin-left: var(--drawer-handle-width) !important;
    padding: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.05)) !important;
}

.drawer-panel {
    display: grid !important;
    height: 100% !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px 22px !important;
    overflow: hidden !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.drawer-panel[hidden] {
    display: none !important;
}

.drawer-player-panel {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    align-content: start !important;
    grid-template-rows: auto auto !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.drawer-player-section {
    display: grid !important;
    min-height: 0 !important;
    gap: 14px !important;
    padding: 20px 22px !important;
    overflow: hidden !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.drawer-player-actions-section {
    grid-template-rows: auto minmax(0, auto) !important;
}

.drawer-player-actions-list {
    display: grid !important;
    max-height: clamp(132px, 25vh, 260px) !important;
    min-height: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    list-style: none !important;
    counter-reset: drawer-actions !important;
}

.drawer-player-action {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px !important;
    border: 1px solid rgba(47, 42, 34, 0.16) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    color: #2F2A22 !important;
    counter-increment: drawer-actions !important;
}

.drawer-player-action::before {
    content: counter(drawer-actions) !important;
    display: inline-grid !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    border: 1px solid rgba(47, 42, 34, 0.18) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.42) !important;
    color: #4A4236 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.drawer-player-action-text {
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    color: #2F2A22 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
}

.drawer-player-action-summary {
    display: flex !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.drawer-player-action-buttons {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.drawer-action-delete-form {
    margin: 0 !important;
    justify-self: auto !important;
}

.drawer-action-edit-form {
    display: grid !important;
    grid-column: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
}

.drawer-action-edit-form[hidden] {
    display: none !important;
}

.drawer-action-edit-text {
    min-height: 92px !important;
    padding: 10px 12px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

.drawer-action-edit-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.drawer-quest-panel {
    min-height: 0 !important;
}

.drawer-panel-header {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.drawer-kicker,
.drawer-panel h2,
.drawer-quest-title-toggle,
.drawer-quest-title-separator,
.drawer-summary-card h3,
.drawer-field-list,
.drawer-field,
.drawer-mini-list,
.drawer-empty,
.drawer-count {
    font-family: Georgia, "Times New Roman", serif !important;
}

.drawer-kicker {
    margin: 0 0 4px !important;
    color: #6D6254 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.drawer-panel h2 {
    margin: 0 !important;
    color: #2B261F !important;
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.drawer-quest-heading {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.drawer-quest-panel .drawer-panel-header {
    align-items: center !important;
    flex-wrap: wrap !important;
}

.drawer-quest-title-toggle {
    appearance: none !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2B261F !important;
    cursor: pointer !important;
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: none !important;
}

.drawer-quest-title-toggle.active,
.drawer-quest-title-toggle[aria-selected="true"] {
    background: rgba(47, 42, 34, 0.12) !important;
}

.drawer-quest-title-toggle:hover,
.drawer-quest-title-toggle:focus-visible {
    background: rgba(47, 42, 34, 0.08) !important;
}

.drawer-quest-title-toggle:focus-visible {
    outline: 2px solid rgba(47, 42, 34, 0.34) !important;
    outline-offset: 2px !important;
}

.drawer-quest-title-separator {
    color: #4A4236 !important;
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.drawer-link {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 8px 12px !important;
    font-size: 0.84rem !important;
}

.drawer-count {
    display: inline-flex !important;
    min-height: 30px !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(47, 42, 34, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    color: #4A4236 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.drawer-field-list,
.drawer-card-list {
    display: grid !important;
    min-height: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
}

.drawer-panel > .drawer-field-list,
.drawer-panel > .drawer-card-list {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-right: 6px !important;
    padding-bottom: var(--drawer-scroll-end-pad) !important;
    scroll-padding-bottom: var(--drawer-scroll-end-pad) !important;
}

.drawer-quest-pages {
    display: grid !important;
    min-height: 0 !important;
}

.drawer-quest-page {
    display: grid !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 12px !important;
}

.drawer-quest-page[hidden] {
    display: none !important;
}

.drawer-quest-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-right: 6px !important;
    padding-bottom: var(--drawer-scroll-end-pad) !important;
    scroll-padding-bottom: var(--drawer-scroll-end-pad) !important;
}

.drawer-field {
    display: grid !important;
    grid-template-columns: minmax(90px, 0.36fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(55, 93, 210, 0.28) !important;
}

.drawer-player-panel .drawer-field {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
}

.drawer-field dt,
.drawer-mini-list dt {
    color: #6D6254 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.drawer-field dd,
.drawer-mini-list dd {
    min-width: 0 !important;
    margin: 0 !important;
    color: #2F2A22 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.drawer-summary-card {
    display: grid !important;
    gap: 9px !important;
    padding: 12px !important;
    border: 1px solid rgba(47, 42, 34, 0.2) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.drawer-summary-card.is-new {
    border-color: rgba(56, 93, 210, 0.38) !important;
}

.drawer-summary-card.is-completed {
    opacity: 0.82 !important;
}

.drawer-summary-card.is-current {
    border-color: rgba(55, 93, 210, 0.5) !important;
    box-shadow:
        0 0 0 1px rgba(55, 93, 210, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.drawer-summary-header {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.drawer-summary-card h3 {
    margin: 0 !important;
    color: #2B261F !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.drawer-summary-header span {
    flex: 0 0 auto !important;
    color: #6D6254 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.drawer-summary-description {
    margin: 0 !important;
    color: #4A4236 !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
}

.drawer-mini-list {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
}

.drawer-mini-list div {
    display: grid !important;
    gap: 2px !important;
}

.drawer-empty {
    margin: 0 !important;
    color: #4A4236 !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
}

.action-bubble-flight {
    position: fixed !important;
    z-index: 9999 !important;
    display: block !important;
    overflow: hidden !important;
    padding: 14px !important;
    border: 2px solid #A7AAAD !important;
    border-radius: 8px !important;
    background: #ECEDEE !important;
    color: var(--text) !important;
    box-shadow: 0 18px 38px rgba(19, 64, 99, 0.18) !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    pointer-events: none !important;
    transition:
        transform 420ms cubic-bezier(0.17, 0.84, 0.44, 1),
        opacity 420ms ease !important;
}

.action-bubble-flight.npc-chat-flight {
    z-index: 10100 !important;
}

.quick-action-dock {
    position: fixed !important;
    right: clamp(14px, 2vw, 36px) !important;
    bottom: clamp(14px, 2vw, 30px) !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
}

.control-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.quick-action-form {
    margin: 0 !important;
}

.quick-icon-button.control-btn {
    position: relative !important;
    display: inline-flex !important;
    width: 82px !important;
    height: 54px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(184, 184, 184, 0.28) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.10)),
        linear-gradient(180deg, #20365F 0%, #16294B 100%) !important;
    color: #F6F6F5 !important;
    cursor: pointer !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.18),
        0 2px 5px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease !important;
}

.quick-icon-button.control-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.22),
        0 3px 6px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.quick-icon-button.control-btn:active {
    transform: translateY(1px) !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.18),
        inset 0 2px 4px rgba(0, 0, 0, 0.18) !important;
}

.quick-icon-button.control-btn:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(120, 150, 255, 0.20),
        0 8px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.quick-icon-button:disabled {
    cursor: not-allowed !important;
    filter: grayscale(0.4) !important;
    opacity: 0.58 !important;
}

.control-btn-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

/* This styles the NPC, item, quest, and chat alert badges used by the side menus. */
.npc-alert-badge {
    position: absolute !important;
    top: -13px !important;
    right: -13px !important;
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.34)) !important;
    pointer-events: none !important;
}

.npc-chat-alert-badge {
    position: absolute !important;
    top: -13px !important;
    left: -13px !important;
    z-index: 2 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.36)) !important;
    pointer-events: none !important;
}

.item-alert-badge {
    position: absolute !important;
    top: -13px !important;
    right: -13px !important;
    z-index: 3 !important;
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.34)) !important;
    pointer-events: none !important;
}

.quest-alert-badge {
    position: absolute !important;
    top: -13px !important;
    left: -13px !important;
    z-index: 3 !important;
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.34)) !important;
    pointer-events: none !important;
}

.quest-alert-badge.completed-quest-alert {
    filter:
        hue-rotate(112deg)
        saturate(1.55)
        brightness(0.9)
        drop-shadow(0 7px 10px rgba(29, 111, 68, 0.38)) !important;
}

.quick-icon-button.has-npc-alert {
    border-color: #D7112E !important;
}

.quick-icon-button.has-chat-alert {
    border-color: #D7112E !important;
}

.sticky-notification-center {
    position: fixed !important;
    left: 24px !important;
    bottom: 24px !important;
    z-index: 1300 !important;
    display: flex !important;
    width: clamp(300px, 30vw, 520px) !important;
    max-height: min(420px, 62vh) !important;
    min-height: 220px !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 18px 20px 20px !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.035)),
        linear-gradient(180deg, #FFF3A8 0%, #F5DF72 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-18px, 18px) rotate(-4deg) scale(0.92) !important;
    transform-origin: bottom left !important;
    visibility: hidden !important;
    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 220ms ease !important;
}

.sticky-notification-center.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: rotate(-1.2deg) scale(1) !important;
    visibility: visible !important;
}

.sticky-notification-center.is-sticking {
    animation: sticky-note-stick 420ms ease-out !important;
}

@keyframes sticky-note-stick {
    0% {
        opacity: 0;
        transform: translate(-90px, 90px) rotate(-10deg) scale(0.82);
    }

    62% {
        opacity: 1;
        transform: translate(4px, -5px) rotate(0.4deg) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: rotate(-1.2deg) scale(1);
    }
}

.sticky-notification-center::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 42px !important;
    border-radius: 5px 5px 0 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02)) !important;
    pointer-events: none !important;
}

.sticky-note-top {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(92, 75, 25, 0.24) !important;
}

.sticky-note-top h2 {
    margin: 0 !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.1 !important;
}

.sticky-note-count {
    display: inline-flex !important;
    box-sizing: border-box !important;
    min-width: 28px !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border: 1px solid rgba(92, 75, 25, 0.32) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    color: #2F2A22 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.sticky-notification-list {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    list-style: none !important;
}

.sticky-notification-button {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(92, 75, 25, 0.22) !important;
    border-radius: 5px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.025)) !important;
    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    color: #2F2A22 !important;
    cursor: pointer !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.sticky-notification-button:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(0, 0, 0, 0.018)) !important;
    transform: translateY(-1px) !important;
}

.sticky-notification-button:active {
    transform: translateY(0) !important;
}

.sticky-notification-label {
    display: block !important;
    margin-bottom: 2px !important;
    color: rgba(47, 42, 34, 0.62) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.sticky-notification-message {
    display: block !important;
    color: #2F2A22 !important;
}

.utility-menu {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 10px) !important;
    display: grid !important;
    width: min(260px, calc(100vw - 28px)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid var(--palette-ink) !important;
    border-radius: 8px !important;
    background: var(--module-bg) !important;
    box-shadow: var(--game-shadow) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition:
        opacity 160ms ease,
        transform 160ms ease !important;
}

.utility-menu[aria-hidden="true"] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
}

/* This styles transient backend notices shown after validation or API errors. */
.campaign-notice-stack {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
}

.campaign-notice {
    display: grid !important;
    gap: 5px !important;
    padding: 12px 14px !important;
    border: 1px solid #B7BABE !important;
    border-left: 4px solid #555B62 !important;
    border-radius: 8px !important;
    background: rgba(246, 246, 245, 0.96) !important;
    color: var(--text) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14) !important;
}

.campaign-notice.warning {
    border-left-color: #D7112E !important;
}

.campaign-notice-label {
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
}

.campaign-notice p {
    margin: 0 !important;
    line-height: 1.45 !important;
}

.utility-menu-form {
    margin: 0 !important;
}

.utility-menu button,
.utility-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: var(--paragraph-bg) !important;
    color: var(--palette-black) !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    text-align: left !important;
}

.utility-menu button:hover,
.utility-menu button:focus-visible,
.utility-menu a:hover,
.utility-menu a:focus-visible {
    border-color: var(--palette-ink) !important;
    background: var(--palette-ash) !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.start-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(340px, 0.72fr) !important;
}

.page-subtitle {
    margin: 6px 0 0 !important;
    color: var(--muted) !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
}

.ai-settings-layout {
    display: grid !important;
    max-width: 980px !important;
    margin: 0 auto !important;
}

.ai-settings-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    display: grid !important;
    place-items: center !important;
    padding: 22px !important;
    overflow: auto !important;
    background: rgba(36, 38, 40, 0.58) !important;
}

.ai-settings-backdrop[hidden] {
    display: none !important;
}

.ai-settings-window {
    width: min(980px, 100%) !important;
    max-height: min(760px, calc(100vh - 44px)) !important;
    overflow: hidden !important;
}

.ai-settings-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--palette-black) !important;
}

.ai-settings-header .panel-title {
    color: var(--palette-light) !important;
}

.ai-settings-window .panel-body {
    max-height: calc(min(760px, 100vh - 44px) - 61px) !important;
    overflow: auto !important;
}

.ai-settings-panel {
    overflow: hidden !important;
}

.ai-settings-form,
.ai-settings-list {
    display: grid !important;
    gap: 14px !important;
}

.ai-setting-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    gap: 14px !important;
    align-items: end !important;
    padding: 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--module-bg) !important;
}

.ai-setting-copy {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.ai-setting-copy label {
    color: var(--blue-dark) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
}

.ai-setting-copy p {
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1.4 !important;
}

.ai-model-select {
    display: grid !important;
    gap: 6px !important;
}

.ai-model-select select {
    width: 100% !important;
}

.ai-settings-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    padding-top: 4px !important;
}

.database-layout {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) !important;
}

.panel,
/* This styles the main dashboard sections and reusable panel/card surfaces. */
.campaign-section,
.campaign-card,
.scenario-card,
.summary-tile,
.meta-card,
.event-card,
.recommendation-card,
.character-toggle,
.field-value.pre,
.data-block,
.admin-actions,
.auth-card {
    border: 1px solid #DCDDDE !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: var(--shadow) !important;
}

.panel,
.campaign-section,
.auth-card {
    overflow: hidden !important;
}

.panel-header,
.section-header,
.event-header {
    padding: 12px 14px !important;
    border-bottom: 1px solid #DCDDDE !important;
    background: linear-gradient(180deg, #F6F6F5 0%, #F5F5F5 100%) !important;
}

.panel-header:not(.with-action) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.panel-title,
.section-title,
h2 {
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.panel-body,
.section-body {
    padding: 14px !important;
}

.summary-tile,
.meta-card {
    min-width: 0 !important;
    padding: 13px !important;
}

.summary-label,
.meta-label,
.field-label,
.status-label,
.event-footer-label,
.npc-label,
.player-block-label,
.recommendation-label,
.finance-label {
    color: var(--muted) !important;
    font-size: 0.7rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.summary-value,
.meta-value,
.status-value,
.event-footer-value,
.npc-value,
.player-block-value,
.field-value,
.recommendation-value {
    color: var(--text) !important;
}

.campaign-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 14px !important;
}

.campaign-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}

.campaign-card.campaign-tile {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-content: start !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.campaign-tile-media {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 150px !important;
    overflow: hidden !important;
    border: 1px solid var(--palette-black) !important;
    border-radius: 12px !important;
    background: var(--palette-black) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

.campaign-tile-image-link,
.campaign-tile-image-link img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.campaign-tile-image-link img {
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 220ms ease, filter 220ms ease !important;
}

.campaign-card.campaign-tile:hover .campaign-tile-image-link img,
.campaign-card.campaign-tile:focus-within .campaign-tile-image-link img {
    filter: saturate(1.08) contrast(1.04) !important;
    transform: scale(1.025) !important;
}

.campaign-player-pill {
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    max-width: calc(100% - 56px) !important;
    min-height: 30px !important;
    align-items: center !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    color: #F6F6F5 !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.campaign-tile-menu {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 5 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 160ms ease !important;
}

.campaign-card.campaign-tile:hover .campaign-tile-menu,
.campaign-card.campaign-tile:focus-within .campaign-tile-menu,
.campaign-tile-menu[open] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.campaign-tile-menu summary {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.76) !important;
    color: #F6F6F5 !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    list-style: none !important;
}

.campaign-tile-menu summary::-webkit-details-marker {
    display: none !important;
}

.campaign-tile-menu-popover {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    display: grid !important;
    min-width: 168px !important;
    overflow: hidden !important;
    border: 1px solid var(--palette-black) !important;
    border-radius: 8px !important;
    background: var(--palette-light) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26) !important;
}

.campaign-tile-menu-popover a,
.campaign-tile-menu-popover button {
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--palette-black) !important;
    cursor: pointer !important;
    font-size: 0.88rem !important;
    font-weight: 850 !important;
    text-align: left !important;
}

.campaign-tile-menu-popover a:hover,
.campaign-tile-menu-popover button:hover {
    background: var(--palette-blue) !important;
}

.campaign-tile-menu-popover .delete-form,
.campaign-tile-menu-popover .delete-form button {
    margin: 0 !important;
}

.campaign-tile-body {
    display: grid !important;
    gap: 4px !important;
    padding: 0 2px !important;
}

.campaign-card.campaign-tile .campaign-title {
    margin: 0 !important;
    color: var(--palette-black) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.campaign-card.campaign-tile .campaign-title a {
    color: inherit !important;
}

.campaign-tile-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    color: rgba(0, 0, 0, 0.62) !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
}

.campaign-tile-meta span + span::before {
    content: "·" !important;
    padding: 0 7px !important;
}

.campaign-card:hover,
.scenario-card:hover,
.event-card:hover,
.summary-tile:hover,
.meta-card:hover {
    border-color: #B9BBBD !important;
    box-shadow: 0 18px 36px rgba(7, 27, 49, 0.14) !important;
}

.campaign-title,
.scenario-title,
.event-title,
.npc-name,
.recommendation-name {
    color: var(--blue-dark) !important;
    font-weight: 850 !important;
}

.campaign-meta,
.scenario-meta,
.status-list,
.player-block-list,
.field-list,
.npc-field-list {
    gap: 8px !important;
}

.meta-item,
.status-row,
.player-block-row,
.field-row {
    border: 1px solid #E4E4E5 !important;
    border-radius: 8px !important;
    background: #F8F8F8 !important;
}

.meta-item,
.status-row {
    padding: 9px 10px !important;
}

.player-block-row,
.field-row {
    padding: 10px !important;
}

/* This styles the event reader, event log drawer, and event navigation controls. */
.event-panel {
    min-height: calc(100vh - 104px) !important;
    --event-log-drawer-height: min(480px, 52vh);
    --event-log-drawer-offset: 0px;
    position: relative !important;
    overflow: hidden !important;
}

.event-panel-header {
    position: relative !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 18px !important;
    overflow: visible !important;
}

.info-tab-nav {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.info-tab-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    min-width: 88px !important;
    padding: 8px 12px !important;
    border: 1px solid #C4C6C8 !important;
    border-radius: 6px !important;
    background: #F6F6F5 !important;
    color: var(--muted) !important;
    cursor: pointer !important;
    font-weight: 850 !important;
    overflow: visible !important;
}

.info-tab-button.has-item-alert {
    border-color: #D7112E !important;
}

.info-tab-button.has-quest-alert {
    border-color: #D7112E !important;
}

.info-tab-button.has-completed-quest-alert {
    border-color: #2F8A5C !important;
    box-shadow: 0 0 0 1px rgba(47, 138, 92, 0.18) !important;
}

.info-tab-button.active {
    border-color: #555B62 !important;
    background: #555B62 !important;
    color: #F6F6F5 !important;
    box-shadow: 0 8px 18px rgba(15, 87, 149, 0.22) !important;
}

.panel-log-tabs {
    position: absolute !important;
    left: 14px !important;
    bottom: -28px !important;
    z-index: 40 !important;
    display: flex !important;
    gap: 6px !important;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.panel-log-tab {
    min-height: 30px !important;
    padding: 6px 12px !important;
    border: 1px solid #DCDDDE !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    background: linear-gradient(180deg, #F6F6F5 0%, #F5F5F5 100%) !important;
    color: var(--blue-dark) !important;
    cursor: pointer !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 16px rgba(7, 27, 49, 0.08) !important;
}

.panel-log-tab.active {
    border-color: #DCDDDE !important;
    background: linear-gradient(180deg, #F6F6F5 0%, #F5F5F5 100%) !important;
    color: var(--blue-dark) !important;
}

.event-panel[data-event-log-open="true"] .panel-log-tabs {
    transform: translateY(
        calc(var(--event-log-drawer-offset) + var(--event-log-drawer-height))
    ) !important;
}

.event-panel[data-event-log-open="true"] .panel-log-tab.active {
    border-color: #DCDDDE !important;
    background: linear-gradient(180deg, #F6F6F5 0%, #F5F5F5 100%) !important;
    color: var(--blue-dark) !important;
    box-shadow: 0 12px 22px rgba(7, 27, 49, 0.12) !important;
}

.event-panel-body {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-top: 44px !important;
}

.event-panel-body[data-event-log-open="true"] {
    overflow: visible !important;
}

.event-api-call-notice {
    display: grid !important;
    width: min(560px, 100%) !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
    padding: 10px 12px 12px !important;
    border: 1px solid #D4D6D8 !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(246, 246, 245, 0.98) 0%, rgba(229, 230, 231, 0.92) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 22px rgba(7, 27, 49, 0.10) !important;
}

.event-api-call-notice[hidden] {
    display: none !important;
}

.event-paper-workspace .event-paper-body[data-event-loading="true"] .event-reader-layout,
.event-paper-workspace .event-paper-body[data-event-loading="true"] .current-event-pane > .empty {
    display: none !important;
}

.event-paper-workspace .event-paper-body[data-event-loading="true"] .event-api-call-notice {
    display: grid !important;
    width: clamp(320px, 72vw, 820px) !important;
    min-height: clamp(480px, 82vh, 980px) !important;
    align-content: center !important;
    justify-items: stretch !important;
    gap: 18px !important;
    margin: clamp(18px, 3vh, 34px) auto 0 !important;
    padding: clamp(28px, 4vw, 56px) !important;
    box-sizing: border-box !important;
    border: 1px solid #b8b8b8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #fbf8ef 0%, #f4efe2 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.event-paper-workspace .event-paper-body[data-event-loading="true"] .event-loading-subtext {
    justify-self: center !important;
    color: #3c352c !important;
    font-family: Georgia, "Times New Roman", serif !important;
    text-align: center !important;
}

.event-paper-workspace .event-paper-body[data-event-loading="true"] .event-loading-progress {
    width: min(520px, 100%) !important;
    justify-self: center !important;
}

.event-loading-progress {
    position: relative !important;
    height: 14px !important;
    overflow: hidden !important;
    border: 1px solid #AEB2B7 !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, #DCDDDE 0%, #F2F2F3 52%, #D5D7DA 100%) !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.72) !important;
}

.event-loading-progress::before {
    content: "" !important;
    position: absolute !important;
    inset: 3px !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, 0.42) !important;
}

.event-loading-progress-fill,
.event-loading-progress-shine {
    position: absolute !important;
    pointer-events: none !important;
}

.event-loading-progress-fill {
    top: 2px !important;
    bottom: 2px !important;
    left: 2px !important;
    width: 38% !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, #4F555B 0%, #737A82 48%, #303337 100%) !important;
    box-shadow:
        0 0 12px rgba(85, 91, 98, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
    animation: eventLoadingSweep 1.9s cubic-bezier(0.45, 0, 0.2, 1) infinite !important;
}

.event-loading-progress-shine {
    inset: 1px 0 !important;
    width: 42% !important;
    border-radius: inherit !important;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.66) 50%, transparent 100%) !important;
    mix-blend-mode: screen !important;
    opacity: 0.72 !important;
    transform: translateX(-120%) !important;
    animation: eventLoadingShine 1.45s linear infinite !important;
}

.event-loading-subtext {
    margin: 0 !important;
    color: var(--blue-dark) !important;
    font-size: 0.95rem !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
}

.event-api-call-notice[data-loading-phase="objects"] .event-loading-progress-fill {
    background:
        linear-gradient(90deg, #596068 0%, #828991 48%, #3B4046 100%) !important;
}

.event-api-call-notice[data-loading-phase="backend"] .event-loading-progress-fill {
    background:
        linear-gradient(90deg, #303337 0%, #686F77 50%, #242628 100%) !important;
}

@keyframes eventLoadingSweep {
    0% {
        opacity: 0.72;
        transform: translateX(-36%) scaleX(0.62);
    }

    42% {
        opacity: 1;
        transform: translateX(92%) scaleX(1.08);
    }

    100% {
        opacity: 0.76;
        transform: translateX(232%) scaleX(0.7);
    }
}

@keyframes eventLoadingShine {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(260%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-loading-progress-fill,
    .event-loading-progress-shine {
        animation: none !important;
    }

    .event-loading-progress-fill {
        width: calc(100% - 4px) !important;
        transform: none !important;
    }

    .event-loading-progress-shine {
        display: none !important;
    }
}

.info-tab-stage {
    position: relative !important;
    min-height: calc(100vh - 250px) !important;
    overflow: hidden !important;
}

.info-pane {
    position: absolute !important;
    inset: 0 !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(0) !important;
    transition:
        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease !important;
}

.info-pane.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.info-pane.slide-in-left {
    transform: translateX(-104%) !important;
}

.info-pane.slide-in-right {
    transform: translateX(104%) !important;
}

.info-pane.slide-out-left {
    transform: translateX(-104%) !important;
    opacity: 0 !important;
}

.info-pane.slide-out-right {
    transform: translateX(104%) !important;
    opacity: 0 !important;
}

.central-card-list {
    display: grid !important;
    gap: 12px !important;
    align-content: start !important;
    padding-right: 4px !important;
}

.item-capacity-row {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 0 14px !important;
}

.item-capacity {
    display: inline-flex !important;
    width: min(280px, 100%) !important;
    min-height: 68px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px 18px !important;
    border: 2px solid var(--palette-ink) !important;
    border-radius: 8px !important;
    background: var(--paragraph-bg) !important;
    color: var(--palette-black) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
    font-size: 1.65rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

.item-capacity-current {
    font-size: 2.65rem !important;
    font-weight: 950 !important;
}

.item-capacity-current.is-available {
    color: #2F8A5C !important;
}

.item-capacity-current.is-full {
    color: #D7112E !important;
}

.central-info-card {
    box-shadow: 0 10px 24px rgba(7, 27, 49, 0.08) !important;
}

.item-dropdown-list {
    gap: 8px !important;
}

.central-info-card.item-dropdown-card {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.item-dropdown {
    display: grid !important;
}

.item-dropdown-summary {
    min-height: 46px !important;
    align-items: center !important;
    padding: 11px 12px !important;
    cursor: pointer !important;
    list-style: none !important;
}

.item-dropdown-summary::-webkit-details-marker {
    display: none !important;
}

.item-dropdown-summary::before {
    content: "+" !important;
    display: inline-grid !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto !important;
    place-items: center !important;
    border: 1px solid #C4C6C8 !important;
    border-radius: 999px !important;
    background: #F6F6F5 !important;
    color: var(--blue-dark) !important;
    font-weight: 900 !important;
}

.item-dropdown[open] .item-dropdown-summary::before {
    content: "-" !important;
}

.item-dropdown-summary .npc-name {
    flex: 1 1 auto !important;
}

.item-dropdown-fields {
    padding: 0 12px 12px !important;
}

.log-delete-button {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
}

.central-info-card.new-item,
.central-info-card.new-quest {
    border-color: #D7112E !important;
    border-width: 2px !important;
    box-shadow:
        0 0 0 1px rgba(215, 17, 46, 0.22),
        0 12px 24px rgba(215, 17, 46, 0.18) !important;
}

.central-info-card.new-item,
.central-info-card.new-quest {
    cursor: pointer !important;
}

.central-info-card.completed-quest {
    border-color: #2F8A5C !important;
    border-width: 2px !important;
    cursor: pointer !important;
    box-shadow:
        0 0 0 1px rgba(47, 138, 92, 0.22),
        0 12px 24px rgba(47, 138, 92, 0.18) !important;
}

.central-info-card.completed-quest-swoosh {
    pointer-events: none !important;
    animation: completedQuestSwooshUp 360ms cubic-bezier(0.24, 0.88, 0.34, 1) forwards !important;
}

.item-new-label,
.quest-new-label,
.quest-complete-label {
    display: inline-flex !important;
    min-height: 24px !important;
    align-items: center !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #D7112E !important;
    color: #FFFFFF !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
}

.quest-complete-label {
    background: #2F8A5C !important;
}

.item-new-label[hidden],
.quest-new-label[hidden],
.quest-complete-label[hidden] {
    display: none !important;
}

@keyframes completedQuestSwooshUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    72% {
        opacity: 0.92;
        transform: translateY(-78px) scale(0.985);
    }
    100% {
        opacity: 0;
        transform: translateY(-128px) scale(0.96);
    }
}

.event-reader-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.event-stage {
    display: grid !important;
    min-height: 0 !important;
    min-width: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
}

.event-feed {
    display: grid !important;
    gap: 12px !important;
    max-height: calc(100vh - 220px) !important;
    min-height: 420px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}

.event-reader-card[hidden] {
    display: none !important;
}

.event-card {
    background: #F6F6F5 !important;
}

.event-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.event-body {
    padding: 18px !important;
    color: var(--text) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

.event-footer,
.event-log-footer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-top: 1px solid #DCDDDE !important;
    background: #F8F8F8 !important;
}

.event-footer-item,
.event-log-footer-item {
    min-width: 0 !important;
    padding: 8px !important;
    border: 1px solid #E4E4E5 !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
}

.event-progress {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    padding: 4px 9px !important;
    border: 1px solid #DEDFE0 !important;
    border-radius: 999px !important;
    color: var(--blue-dark) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
}

.event-reader-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
}

.event-previous-button[hidden],
.event-next-button[hidden] {
    display: none !important;
}

.event-log-rail {
    display: none !important;
    align-items: start !important;
}

.event-log-toggle {
    position: sticky !important;
    top: 90px !important;
    min-width: 92px !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
}

.event-log-toggle:hover {
    transform: rotate(180deg) translateY(-1px) !important;
}

.event-log-drawer {
    position: absolute !important;
    top: var(--event-log-drawer-offset) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
    display: grid !important;
    width: auto !important;
    height: var(--event-log-drawer-height) !important;
    max-height: none !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid #A2A5A8 !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    background: #F6F6F5 !important;
    box-shadow: 0 18px 32px rgba(7, 27, 49, 0.15) !important;
    transform: translateY(calc(-100% - 2px)) !important;
    transition:
        transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 180ms ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin-bottom: 0 !important;
}

.event-panel-body[data-event-log-open="true"] .event-log-drawer {
    pointer-events: none !important;
}

.event-log-drawer[aria-hidden="true"] {
    visibility: hidden !important;
}

.event-panel-body[data-event-log-open="true"] .event-log-drawer[aria-hidden="false"] {
    visibility: visible !important;
    pointer-events: auto !important;
}

.panel-log-drawer[aria-hidden="false"] {
    height: var(--event-log-drawer-height) !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    margin-bottom: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.event-log-header,
.event-log-item {
    border-color: #DCDDDE !important;
}

.event-log-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #DCDDDE !important;
    background: linear-gradient(180deg, #F6F6F5 0%, #F5F5F5 100%) !important;
}

.event-log-title-main {
    margin: 0 !important;
    color: var(--blue-dark) !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
}

.event-log-count {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    padding: 4px 9px !important;
    border: 1px solid #DEDFE0 !important;
    border-radius: 999px !important;
    background: #F7F7F7 !important;
    color: var(--blue-dark) !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.event-log-list {
    display: grid !important;
    gap: 12px !important;
    align-content: start !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    overscroll-behavior: contain !important;
    padding: 14px !important;
    background: #F4F4F5 !important;
}

.event-log-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid #DCDDDE !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
    box-shadow: 0 8px 18px rgba(7, 27, 49, 0.08) !important;
}

.quest-log-item.quest-log-arrival {
    animation: questLogArrivalPulse 1100ms ease-out !important;
}

@keyframes questLogArrivalPulse {
    0% {
        border-color: #2F8A5C;
        box-shadow:
            0 0 0 0 rgba(47, 138, 92, 0.34),
            0 10px 22px rgba(47, 138, 92, 0.2);
    }
    100% {
        border-color: #DCDDDE;
        box-shadow: 0 8px 18px rgba(7, 27, 49, 0.08);
    }
}

.event-log-index {
    display: inline-grid !important;
    width: 28px !important;
    height: 28px !important;
    place-items: center !important;
    border: 1px solid #DCDDDE !important;
    border-radius: 999px !important;
    background: #F7F7F7 !important;
    color: var(--blue-dark) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
}

.event-log-content {
    display: grid !important;
    min-width: 0 !important;
    gap: 8px !important;
}

.event-log-title {
    margin: 0 !important;
    color: var(--blue-dark) !important;
    font-size: 0.98rem !important;
    font-weight: 850 !important;
}

.event-log-description {
    margin: 0 !important;
    color: var(--text) !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
}

.event-log-kicker {
    color: var(--teal) !important;
}

.data-block {
    max-height: 520px !important;
    padding: 12px !important;
    background: var(--paragraph-bg) !important;
    color: var(--text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
}

.action-form,
.player-block-form,
.auth-form {
    gap: 12px !important;
}

.action-edit-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.action-edit-text {
    min-height: 74px !important;
}

.character-launch-button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: space-between !important;
    text-align: left !important;
}

/* This styles the overlay menus for quests, inventory, and NPC chat. */
body[data-inventory-menu-open="true"] {
    overflow: hidden !important;
}

.quest-menu-backdrop,
.inventory-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 82px 18px 22px !important;
    background: rgba(9, 30, 54, 0.28) !important;
    backdrop-filter: blur(4px) !important;
}

.quest-menu-backdrop[hidden],
.inventory-menu-backdrop[hidden] {
    display: none !important;
}

.quest-menu-window,
.inventory-menu-window {
    display: grid !important;
    width: min(1120px, calc(100vw - 36px)) !important;
    height: min(900px, calc(100vh - 106px)) !important;
    min-height: 520px !important;
    overflow: hidden !important;
    border: 1px solid #767B80 !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
    box-shadow: 0 32px 80px rgba(5, 17, 34, 0.28) !important;
}

.npc-chat-panel,
.quest-menu-panel,
.inventory-menu-panel {
    min-height: 0 !important;
    height: 100% !important;
    background: #F4F4F5 !important;
}

.npc-chat-panel,
.quest-menu-panel,
.inventory-menu-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    overflow: hidden !important;
}

.npc-chat-panel[hidden],
.npc-profile-card[hidden],
.npc-chat-thread[hidden],
.menu-disclosure-card[hidden] {
    display: none !important;
}

.npc-chat-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #9EA2A6 !important;
    background: #F6F6F5 !important;
    text-align: center !important;
}

.npc-chat-header {
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) 116px !important;
}

.npc-chat-title {
    margin: 0 !important;
    max-width: calc(100% - 140px) !important;
    overflow-wrap: anywhere !important;
    color: var(--blue-dark) !important;
    font-size: 1.35rem !important;
    font-weight: 850 !important;
    text-align: center !important;
}

.npc-chat-title {
    grid-column: 2 !important;
    max-width: 100% !important;
}

.npc-profile-toggle {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    width: 116px !important;
    min-width: 116px !important;
    transform: none !important;
    white-space: nowrap !important;
}

.npc-profile-toggle:hover,
.npc-profile-toggle:focus-visible {
    transform: none !important;
}

.quest-button-list {
    grid-auto-rows: minmax(70px, auto) !important;
}

.inventory-button-list {
    grid-auto-rows: minmax(70px, auto) !important;
}

.menu-disclosure-card {
    display: grid !important;
    min-height: 0 !important;
    align-content: start !important;
    overflow: hidden !important;
    border: 1px solid #A9ADB1 !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
    box-shadow: 0 8px 18px rgba(7, 27, 49, 0.08) !important;
}

.menu-disclosure-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 14px !important;
    border: 0 !important;
    background: #F6F6F5 !important;
    color: var(--text) !important;
    cursor: pointer !important;
    text-align: left !important;
}

.menu-disclosure-card[data-open="true"] .menu-disclosure-toggle,
.menu-disclosure-toggle:hover {
    background: #ECEDEF !important;
}

.menu-disclosure-caret {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 auto !important;
    border-right: 2px solid var(--blue-dark) !important;
    border-bottom: 2px solid var(--blue-dark) !important;
    transform: rotate(45deg) !important;
    transition: transform 160ms ease !important;
}

.menu-disclosure-toggle[aria-expanded="true"] .menu-disclosure-caret {
    transform: rotate(225deg) !important;
}

.menu-disclosure-panel {
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px !important;
    border-top: 1px solid #9EA2A6 !important;
    background: #F7F7F8 !important;
}

.menu-disclosure-panel[hidden] {
    display: none !important;
}

.npc-chat-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.npc-chat-log {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    background: #F7F7F8 !important;
}

.npc-profile-tray {
    max-height: 0 !important;
    overflow: hidden !important;
    border-bottom: 0 solid transparent !important;
    background: #F0F0F1 !important;
    transition: max-height 180ms ease, border-bottom-width 180ms ease !important;
}

.npc-chat-panel[data-profile-open="true"] .npc-profile-tray {
    max-height: 280px !important;
    overflow-y: auto !important;
    border-bottom: 1px solid #9EA2A6 !important;
}

.npc-profile-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 18px !important;
    background: transparent !important;
    text-align: center !important;
}

.npc-profile-section {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
}

.npc-profile-heading {
    margin: 0 !important;
    color: var(--blue-dark) !important;
    font-size: 0.94rem !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
}

.npc-profile-text {
    margin: 0 !important;
    color: var(--text) !important;
    line-height: 1.5 !important;
}

.npc-chat-thread {
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
}

.npc-message {
    border: 1px solid #A9ADB1 !important;
    border-radius: 8px !important;
    background: #F6F6F5 !important;
    box-shadow: 0 8px 18px rgba(7, 27, 49, 0.08) !important;
}

.npc-message.player {
    border-color: #B6BABE !important;
    background: #ECEDEF !important;
}

.npc-message.npc {
    border-color: #B2B2B2 !important;
    background: #F4F4F3 !important;
}

.npc-message-content {
    white-space: pre-wrap !important;
}

.npc-message.pending-player-message {
    opacity: 1 !important;
    transform: none !important;
}

.npc-message.typing-message {
    width: max-content !important;
    min-width: 82px !important;
    padding: 12px 14px !important;
}

.npc-typing-dots {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.npc-typing-dots span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--palette-black) !important;
    opacity: 0.38 !important;
    animation: npcTypingDot 1s ease-in-out infinite !important;
}

.npc-typing-dots span:nth-child(2) {
    animation-delay: 140ms !important;
}

.npc-typing-dots span:nth-child(3) {
    animation-delay: 280ms !important;
}

@keyframes npcMessageSwooshUp {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes npcTypingDot {
    0%,
    80%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.npc-chat-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-top: 1px solid #9EA2A6 !important;
    background: #F6F6F5 !important;
}

.npc-chat-textarea {
    min-height: 78px !important;
}

.npc-chat-footer {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-top: 1px solid #9EA2A6 !important;
    background: #F6F6F5 !important;
}

.npc-chat-footer {
    justify-content: space-between !important;
}

.usage-table,
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.usage-table th,
.usage-table td,
th,
td {
    border-bottom: 1px solid #E1E2E3 !important;
}

th,
.usage-table th {
    background: #F7F7F7 !important;
    color: var(--muted) !important;
}

.table-link {
    min-height: 40px !important;
    border: 1px solid #DCDDDE !important;
    background: #F6F6F5 !important;
}

.table-link.active {
    border-color: var(--blue) !important;
    background: #ECEDEF !important;
    color: var(--blue-dark) !important;
}

.auth-shell {
    min-height: 100vh !important;
    padding: 24px !important;
}

.auth-card {
    width: min(520px, 100%) !important;
}

.auth-header {
    padding: 24px !important;
    border-bottom: 1px solid #DCDDDE !important;
    background: #F6F6F5 !important;
    color: var(--text) !important;
    text-align: center !important;
}

.auth-logo {
    width: 70px !important;
    height: 70px !important;
    justify-self: center !important;
    border: 1px solid #D0D2D4 !important;
    background: #303337 !important;
}

.auth-title {
    color: var(--blue-dark) !important;
}

.auth-subtitle {
    color: var(--muted) !important;
}

.auth-body {
    padding: 20px !important;
}

/* Grayscale refresh: soft charcoal, layered grays, and off-white surfaces. */
body,
.app-shell,
.shell {
    color: var(--palette-black) !important;
}

.topbar,
.panel,
.campaign-section,
.admin-actions,
.auth-card,
.event-log-drawer,
.quest-menu-window,
.inventory-menu-window,
.menu-disclosure-card,
.event-panel-body,
.panel-body,
.section-body {
    border-color: var(--palette-ink) !important;
    background: var(--module-bg) !important;
    color: var(--palette-black) !important;
}

.campaign-card,
.scenario-card,
.summary-tile,
.meta-card,
.event-card,
.recommendation-card,
.character-toggle,
.field-value.pre,
.data-block,
.npc-message,
.table-link,
input,
select,
textarea {
    border-color: var(--palette-ink) !important;
    background: var(--palette-ash) !important;
    color: var(--palette-black) !important;
}

.panel-header,
.section-header,
.event-header,
.event-log-header,
.npc-chat-header,
.auth-header,
.npc-chat-form,
.npc-chat-footer {
    border-color: var(--palette-black) !important;
    background: var(--palette-black) !important;
    color: var(--palette-light) !important;
}

.panel-header *,
.section-header *,
.event-header *,
.event-log-header *,
.npc-chat-header *,
.auth-header *,
.npc-chat-form *,
.npc-chat-footer * {
    color: var(--palette-light) !important;
}

.npc-chat-form .npc-chat-textarea {
    background: var(--palette-ash) !important;
    color: var(--palette-black) !important;
    caret-color: var(--palette-black) !important;
}

.npc-chat-form .npc-chat-textarea::placeholder {
    color: var(--muted) !important;
}

.npc-chat-error-popover {
    grid-column: 1 / -1 !important;
    display: grid !important;
    gap: 3px !important;
    padding: 9px 11px !important;
    border: 1px solid #d04a45 !important;
    border-radius: 8px !important;
    background: #fff0ef !important;
    color: #8f1f1b !important;
    box-shadow: 0 8px 20px rgba(143, 31, 27, 0.16) !important;
}

.npc-chat-error-popover strong,
.npc-chat-error-popover p {
    margin: 0 !important;
    color: #8f1f1b !important;
}

.npc-chat-error-popover strong {
    font-size: 0.86rem !important;
    font-weight: 900 !important;
}

.npc-chat-error-popover p {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
}

.brand-mark,
.auth-logo {
    border-color: var(--palette-black) !important;
    background: var(--palette-black) !important;
}

.brand-kicker,
.eyebrow,
.event-log-kicker,
.summary-label,
.meta-label,
.field-label,
.status-label,
.event-footer-label,
.event-log-footer-label,
.npc-label,
.player-block-label,
.recommendation-label,
.finance-label {
    color: var(--palette-ink) !important;
}

.panel-header .event-log-kicker,
.event-log-header .event-log-kicker,
.auth-header .eyebrow {
    color: var(--palette-ash) !important;
}

.brand-title,
.topbar h1,
.identity h1,
h1,
.campaign-title,
.scenario-title,
.event-title,
.event-log-title-main,
.event-log-title,
.npc-name,
.npc-chat-title,
.npc-profile-heading,
.recommendation-name,
.auth-title {
    color: var(--palette-black) !important;
}

.campaign-card *,
.scenario-card *,
.summary-tile *,
.meta-card *,
.event-card *,
.event-log-item *,
.recommendation-card *,
.character-toggle *,
.field-value.pre,
.data-block,
.npc-message *,
.table-link *,
.menu-disclosure-panel *,
.npc-profile-tray *,
.meta-item *,
.status-row *,
.player-block-row *,
.field-row *,
.event-footer-item *,
.event-log-footer-item * {
    color: var(--palette-black) !important;
}

.scenario-card .scenario-thumbnail-label {
    color: #FFFFFF !important;
}

.campaign-card .summary-label,
.scenario-card .summary-label,
.summary-tile .summary-label,
.meta-card .meta-label,
.event-footer-label,
.event-log-footer-label,
.npc-label,
.player-block-label,
.field-label,
.status-label {
    color: var(--palette-ink) !important;
}

.panel-header .event-title,
.event-header .event-title,
.event-log-header .event-log-title-main,
.npc-chat-header .npc-chat-title,
.auth-header .auth-title {
    color: var(--palette-light) !important;
}

.nav-link,
.mode-link,
.info-tab-button,
.panel-log-tab,
.button,
.table-link,
.menu-disclosure-toggle,
.character-launch-button {
    border-color: var(--palette-ink) !important;
    background: var(--palette-ash) !important;
    color: var(--palette-black) !important;
}

.nav-link.active,
.mode-link.active,
.info-tab-button.active,
.button.primary,
.button.active,
.table-link.active,
.menu-disclosure-card[data-open="true"] .menu-disclosure-toggle,
.menu-disclosure-toggle:hover {
    border-color: var(--palette-black) !important;
    background: var(--palette-blue) !important;
    color: var(--palette-light) !important;
}

.button.danger,
.danger {
    border-color: var(--palette-black) !important;
    background: var(--palette-black) !important;
    color: var(--palette-light) !important;
}

.panel-log-tab,
.panel-log-tab.active,
.event-panel[data-event-log-open="true"] .panel-log-tab.active {
    border-color: var(--palette-black) !important;
    background: var(--palette-black) !important;
    color: var(--palette-light) !important;
}

.event-panel[data-event-log-open="true"] .panel-log-tab.active {
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24) !important;
}

.mode-switch,
.info-tab-nav,
.event-progress,
.event-log-count,
.character-count,
.row-count,
.count-pill {
    border-color: var(--palette-ink) !important;
    background: var(--surface-blue) !important;
    color: var(--palette-black) !important;
}

.panel-body,
.section-body,
.event-log-list,
.event-footer,
.event-log-footer,
.menu-disclosure-panel,
.npc-chat-log,
.npc-profile-tray,
.player-block-panel .panel-body,
.action-composer-panel .panel-body {
    background: var(--module-bg) !important;
    color: var(--palette-black) !important;
}

.event-body,
.event-log-description,
.event-footer-item,
.event-log-footer-item,
.meta-item,
.status-row,
.player-block-row,
.field-row,
.npc-field-list,
.npc-profile-text,
.npc-message-content,
.empty,
.data-block {
    background: var(--paragraph-bg) !important;
    color: var(--palette-black) !important;
}

.event-log-item,
.event-log-index,
.npc-message.player,
.npc-message.npc,
.summary-tile:hover,
.meta-card:hover,
.campaign-card:hover,
.scenario-card:hover,
.event-card:hover {
    border-color: var(--palette-ink) !important;
    background: var(--palette-ash) !important;
    color: var(--palette-black) !important;
}

.quest-menu-backdrop,
.inventory-menu-backdrop {
    background: rgba(0, 0, 0, 0.54) !important;
}

th,
.usage-table th {
    background: var(--palette-black) !important;
    color: var(--palette-light) !important;
}

.usage-table td,
td {
    background: var(--palette-ash) !important;
    color: var(--palette-black) !important;
    border-color: var(--palette-ink) !important;
}

.campaign-card.campaign-tile,
.campaign-card.campaign-tile:hover {
    border: 0 !important;
    background: transparent !important;
    color: var(--palette-black) !important;
    box-shadow: none !important;
}

.campaign-card.campaign-tile .campaign-player-pill,
.campaign-card.campaign-tile .campaign-player-pill * {
    color: var(--palette-light) !important;
}

.campaign-card.campaign-tile .campaign-tile-menu summary,
.campaign-card.campaign-tile .campaign-tile-menu summary * {
    color: var(--palette-light) !important;
}

.campaign-card.campaign-tile .campaign-tile-menu-popover,
.campaign-card.campaign-tile .campaign-tile-menu-popover * {
    color: var(--palette-black) !important;
}

.app-header {
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) auto minmax(220px, 1fr) !important;
    min-height: 58px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 8px 12px !important;
}

.app-brand {
    width: auto !important;
    justify-self: start !important;
    gap: 9px !important;
    padding: 0 !important;
}

.app-brand-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
}

.app-brand-title {
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.app-main-nav {
    justify-self: center !important;
}

.app-account-strip {
    justify-self: end !important;
    flex-wrap: nowrap !important;
}

.app-account-strip .user-tab {
    flex-wrap: nowrap !important;
}

.user-name {
    max-width: 18ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.auth-shell {
    min-height: calc(100vh - 92px) !important;
}

/* This keeps the game UI usable as the viewport narrows. */
@media (max-width: 1180px) {
    .overview-grid,
    .database-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .user-grid,
    .start-grid,
    .database-layout {
        width: auto !important;
        margin-left: 0 !important;
        transform: none !important;
        grid-template-columns: 1fr !important;
    }

    .event-panel {
        min-height: auto !important;
    }

    .player-rail {
        --action-dock-bottom: 12px;
        --action-dock-gap: 12px;
        position: fixed !important;
        right: 12px !important;
        bottom: calc(var(--action-dock-bottom) + var(--action-dock-size) + var(--action-dock-gap)) !important;
        left: auto !important;
        width: min(440px, calc(100vw - 24px)) !important;
        height: auto !important;
        max-height: calc(100vh - 104px) !important;
        min-height: auto !important;
    }

    .player-block-panel .panel-body {
        max-height: none !important;
    }

    .action-composer-panel {
        margin-top: 0 !important;
        max-height: calc(100vh - 112px) !important;
    }

    .desk-drawer {
        top: 76px !important;
        bottom: calc(
            var(--action-dock-bottom, 12px)
            + var(--action-dock-size, 54px)
            + var(--action-dock-gap, 12px)
            + var(--action-composer-height, 250px)
            + 12px
        ) !important;
        width: min(760px, calc(100vw - 24px)) !important;
        height: auto !important;
        min-height: 240px !important;
    }

    .event-feed {
        max-height: 680px !important;
    }
}

@media (max-width: 780px) {
    .app-shell,
    .shell {
        width: min(100% - 20px, 1700px) !important;
        padding-top: 10px !important;
    }

    .topbar {
        position: static !important;
        width: 100% !important;
        align-items: stretch !important;
        flex-direction: column !important;
        margin: 0 0 14px 0 !important;
        transform: none !important;
    }

    .app-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .app-brand,
    .app-main-nav,
    .app-account-strip {
        justify-self: stretch !important;
    }

    .event-panel-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .info-tab-nav {
        width: 100% !important;
    }

    .info-tab-button {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .panel-log-tabs {
        position: static !important;
        margin: 8px 0 -8px !important;
    }

    .event-panel[data-event-log-open="true"] .panel-log-tabs {
        transform: none !important;
    }

    .panel-log-tab {
        flex: 1 !important;
        border-top: 1px solid #DCDDDE !important;
        border-radius: 8px !important;
    }

    .info-tab-stage {
        min-height: 520px !important;
    }

    .quick-action-dock {
        right: 12px !important;
        bottom: 12px !important;
    }

    .action-composer-panel.typewriter-action-ui {
        bottom: calc(12px + var(--action-dock-size, 54px) + 12px) !important;
        right: 12px !important;
        width: min(420px, calc(100vw - 24px)) !important;
        max-height: calc(100vh - 84px) !important;
    }

    .typewriter-paper {
        width: 78% !important;
        min-height: 132px !important;
        max-height: none !important;
        margin-bottom: -14px !important;
        padding: 18px 20px 26px !important;
    }

    .typewriter-paper::before {
        content: none !important;
        display: none !important;
    }

    .typewriter-paper::after {
        content: none !important;
        display: none !important;
    }

    body.campaign-detail-page .typewriter-action-ui .typewriter-paper-text {
        min-height: 88px !important;
        max-height: none !important;
        padding-top: 28px !important;
        font-size: 0.94rem !important;
        line-height: 26px !important;
    }

    .typewriter-body {
        padding: 20px 22px 18px !important;
    }

    .typewriter-top-bar {
        height: 14px !important;
        margin-bottom: 14px !important;
    }

    .typewriter-keys {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .typewriter-keys span {
        height: 20px !important;
    }

    .typewriter-spacebar {
        width: 70% !important;
        min-width: 170px !important;
    }

    .sticky-notification-center {
        left: 12px !important;
        bottom: 12px !important;
        width: min(340px, calc(100vw - 24px)) !important;
        min-height: 178px !important;
        max-height: min(340px, 46vh) !important;
        padding: 16px !important;
    }

    .desk-drawer {
        --drawer-handle-width: 52px;
        top: 78px !important;
        right: 0 !important;
        bottom: calc(
            12px
            + var(--action-dock-size, 54px)
            + 12px
            + var(--action-composer-height, 250px)
            + 10px
        ) !important;
        left: auto !important;
        width: min(420px, calc(100vw - 12px)) !important;
        height: auto !important;
        min-height: 220px !important;
        transform: translateX(calc(100% - var(--drawer-handle-width))) !important;
    }

    .desk-drawer.is-open,
    .desk-drawer[data-desk-drawer-open="true"] {
        transform: translateX(0) !important;
    }

    .desk-drawer-top {
        width: var(--drawer-handle-width) !important;
        height: auto !important;
        gap: 0 !important;
        padding: 10px 7px !important;
    }

    .drawer-toggle {
        width: 38px !important;
        min-width: 38px !important;
        min-height: 132px !important;
        padding: 10px 7px !important;
        writing-mode: vertical-rl !important;
    }

    .drawer-tabs {
        gap: 6px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .drawer-tab {
        min-height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.84rem !important;
    }

    .desk-drawer-content {
        height: 100% !important;
        margin-left: var(--drawer-handle-width) !important;
        padding: 12px !important;
    }

    .drawer-panel {
        padding: 16px !important;
    }

    .drawer-field {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .quick-icon-button {
        width: 48px !important;
        height: 48px !important;
    }

    .brand,
    .identity {
        width: 100% !important;
    }

    .main-nav,
    .mode-switch,
    .account-strip,
    .controls {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        width: 100% !important;
    }

    .button,
    .button-form,
    .button-form button,
    .balance-pill,
    .user-tab,
    .create-form,
    .create-form button,
    .delete-form,
    .delete-form button,
    .share-form,
    .share-button {
        width: 100% !important;
    }

    .overview-grid,
    .database-meta,
    .finance-summary,
    .ai-setting-card,
    .event-footer,
    .event-log-footer {
        grid-template-columns: 1fr !important;
    }

    .event-reader-layout,
    .npc-chat-main,
    .npc-chat-form,
    .action-edit-form {
        grid-template-columns: 1fr !important;
    }

    .quest-menu-backdrop,
    .inventory-menu-backdrop {
        padding: 10px !important;
    }

    .quest-menu-window,
    .inventory-menu-window {
        width: 100% !important;
        height: calc(100vh - 20px) !important;
        min-height: 0 !important;
    }

    .npc-chat-title {
        font-size: 1.12rem !important;
    }

    .npc-chat-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        text-align: left !important;
    }

    .npc-chat-title {
        grid-column: 1 !important;
        text-align: left !important;
    }

    .npc-profile-toggle {
        grid-column: 2 !important;
        width: 108px !important;
        min-width: 108px !important;
    }

    .npc-profile-card {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }

    .npc-chat-footer .button {
        width: auto !important;
    }

}

/* Final dark-system cascade: keep legacy selectors visually consistent. */
.topbar,
.panel,
.campaign-card,
.scenario-card,
.profile-section,
.profile-card,
.profile-form-card,
.campaign-section,
.admin-actions,
.auth-card,
.event-card,
.event-log-drawer,
.quest-menu-window,
.inventory-menu-window,
.menu-disclosure-card,
.ai-settings-window {
    border-color: var(--line) !important;
    background: var(--panel) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

.panel-body,
.section-body,
.event-panel-body,
.menu-disclosure-panel,
.npc-chat-log,
.npc-profile-tray,
.utility-menu {
    background: var(--panel) !important;
    color: var(--text) !important;
}

.panel-header,
.section-header,
.event-header,
.event-log-header,
.npc-chat-header,
.auth-header,
.ai-settings-header,
.npc-chat-form,
.npc-chat-footer {
    border-color: var(--line-strong) !important;
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    color: var(--text) !important;
}

.topbar *,
.panel-header *,
.section-header *,
.event-header *,
.event-log-header *,
.npc-chat-header *,
.auth-header *,
.ai-settings-header *,
.npc-chat-form *,
.npc-chat-footer * {
    color: var(--text) !important;
}

.summary-label,
.meta-label,
.field-label,
.status-label,
.event-footer-label,
.event-log-footer-label,
.npc-label,
.player-block-label,
.recommendation-label,
.finance-label,
.event-log-kicker,
.brand-kicker,
.eyebrow {
    color: var(--muted) !important;
}

.status-row,
.player-block-row,
.field-row,
.event-body,
.event-log-description,
.event-footer-item,
.event-log-footer-item,
.meta-item,
.profile-stat,
.profile-swatch-option,
.profile-segment-option,
.profile-notice,
.field-value.pre,
.data-block,
.npc-field-list,
.npc-profile-text,
.npc-message-content,
.empty,
.ai-setting-card {
    border-color: var(--line) !important;
    background: var(--paragraph-bg) !important;
    color: var(--text) !important;
}

.status-row *,
.player-block-row *,
.field-row *,
.event-body *,
.event-log-description *,
.event-footer-item *,
.event-log-footer-item *,
.meta-item *,
.profile-stat *,
.profile-swatch-option *,
.profile-segment-option *,
.profile-notice *,
.field-value.pre *,
.data-block *,
.npc-field-list *,
.npc-profile-text *,
.npc-message-content *,
.empty *,
.ai-setting-card * {
    color: var(--text) !important;
}

.status-row .status-label,
.player-block-row .player-block-label,
.field-row .field-label,
.event-footer-item .event-footer-label,
.event-log-footer-item .event-log-footer-label,
.meta-item .meta-label,
.npc-field-list .npc-label,
.ai-setting-card .field-label {
    color: var(--muted) !important;
}

textarea,
.action-textarea,
.action-edit-text,
.npc-chat-textarea,
select,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    border-color: var(--line) !important;
    background: #0F172A !important;
    color: var(--text) !important;
    caret-color: var(--blue) !important;
}

textarea::placeholder,
input::placeholder {
    color: var(--muted) !important;
}

textarea:focus,
.action-textarea:focus,
.action-edit-text:focus,
.npc-chat-textarea:focus,
select:focus,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--blue) !important;
    background: #111827 !important;
    box-shadow: var(--focus-ring) !important;
}

.button,
.button-form button,
.create-form button,
.delete-form button,
.action-delete-form button,
.share-button,
.balance-form button,
.nav-link,
.mode-link,
.info-tab-button,
.panel-log-tab,
.table-link,
.menu-disclosure-toggle,
.character-launch-button,
.item-dropdown-summary,
.quick-icon-button,
.logout-button,
.balance-pill,
.user-tab,
.event-progress,
.event-log-count,
.character-count,
.row-count,
.count-pill {
    border-color: var(--line) !important;
    background: #1F2A3D !important;
    color: var(--text) !important;
}

.button.primary,
.button.active,
.button-form.primary button,
.create-form button,
.nav-link.active,
.mode-link.active,
.info-tab-button.active,
.event-panel[data-event-log-open="true"] .panel-log-tab.active,
.table-link.active {
    border-color: rgba(56, 189, 248, 0.72) !important;
    background: linear-gradient(180deg, #60A5FA 0%, var(--blue) 100%) !important;
    color: #07111F !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.18) !important;
}

.button:hover,
.button-form button:hover,
.nav-link:hover,
.mode-link:hover,
.info-tab-button:hover,
.panel-log-tab:hover,
.menu-disclosure-toggle:hover,
.quick-icon-button:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
    background: #273449 !important;
    color: var(--text) !important;
}

/* Dashboard tab readability: light headings on dark chrome, dark text on light badges. */
[data-dashboard-panel="home"] .home-section-label,
[data-dashboard-panel="campaigns"] .section-title,
[data-dashboard-panel="scenarios"] .section-title {
    color: #F8FAFC !important;
}

[data-dashboard-panel="campaigns"] .section-count,
[data-dashboard-panel="scenarios"] .section-count,
[data-dashboard-panel="scenarios"] .scenario-shelf-title {
    color: #0B1020 !important;
}

[data-dashboard-panel="scenarios"] .scenario-card .scenario-card-title,
[data-dashboard-panel="campaigns"] .campaign-card.campaign-tile .campaign-title,
[data-dashboard-panel="campaigns"] .campaign-card.campaign-tile .campaign-title a,
[data-dashboard-panel="home"] .campaign-card.campaign-tile .campaign-title,
[data-dashboard-panel="home"] .campaign-card.campaign-tile .campaign-title a,
[data-dashboard-panel="home"] .hot-scenario-title {
    color: #F8FAFC !important;
}

[data-dashboard-panel="scenarios"] .scenario-card .scenario-card-summary,
[data-dashboard-panel="campaigns"] .campaign-card.campaign-tile .campaign-tile-meta,
[data-dashboard-panel="campaigns"] .campaign-card.campaign-tile .campaign-tile-meta *,
[data-dashboard-panel="home"] .campaign-card.campaign-tile .campaign-tile-meta,
[data-dashboard-panel="home"] .campaign-card.campaign-tile .campaign-tile-meta *,
[data-dashboard-panel="home"] .hot-scenario-meta,
[data-dashboard-panel="home"] .hot-scenario-summary {
    color: #CBD5E1 !important;
}

[data-dashboard-panel="scenarios"] .scenario-feature-card .scenario-title {
    color: #0B1020 !important;
}

[data-dashboard-panel="scenarios"] .scenario-feature-card .scenario-summary {
    color: #334155 !important;
}

[data-dashboard-panel="scenarios"] .scenario-feature-card .scenario-kicker {
    color: #0F5E91 !important;
}

[data-dashboard-panel="scenarios"] .scenario-feature-card .scenario-stat {
    border-color: #D5DEE8 !important;
    background: #FFFFFF !important;
    color: #0B1020 !important;
}

[data-dashboard-panel="scenarios"] .scenario-card .button:not(.primary),
[data-dashboard-panel="scenarios"] .scenario-feature-card .button:not(.primary) {
    color: #F8FAFC !important;
}

.button.danger,
.danger,
.delete-form button,
.action-delete-form button {
    border-color: rgba(248, 113, 113, 0.5) !important;
    background: rgba(127, 29, 29, 0.52) !important;
    color: #FECACA !important;
}

.event-paper-workspace {
    min-height: calc(100vh - 104px) !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.event-paper-workspace .event-paper-body {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
}

.event-paper-workspace .current-event-pane,
.event-paper-workspace .event-reader-layout,
.event-paper-workspace .event-stage {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
}

.desk-drawer .drawer-panel {
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    color: #2F2A22 !important;
}

.desk-drawer .drawer-player-panel {
    background: transparent !important;
    color: #2F2A22 !important;
    box-shadow: none !important;
}

.desk-drawer .drawer-player-section {
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    color: #2F2A22 !important;
}

.desk-drawer .drawer-panel h2,
.desk-drawer .drawer-player-action-text,
.desk-drawer .drawer-quest-title-toggle,
.desk-drawer .drawer-summary-card h3,
.desk-drawer .drawer-field dd,
.desk-drawer .drawer-mini-list dd {
    color: #2F2A22 !important;
}

.desk-drawer .drawer-kicker,
.desk-drawer .drawer-field dt,
.desk-drawer .drawer-mini-list dt,
.desk-drawer .drawer-summary-header span,
.desk-drawer .drawer-summary-description,
.desk-drawer .drawer-quest-title-separator,
.desk-drawer .drawer-count,
.desk-drawer .drawer-empty {
    color: #4A4236 !important;
}

.desk-drawer .drawer-field,
.desk-drawer .drawer-player-action,
.desk-drawer .drawer-summary-card {
    background: rgba(255, 255, 255, 0.34) !important;
    color: #2F2A22 !important;
}

.desk-drawer .drawer-link {
    background: #1F2A3D !important;
    color: var(--text) !important;
}

/* Paper event reader: the current event is displayed as a parchment page. */
.info-pane[data-info-pane="events"] .event-feed {
    align-content: start !important;
    justify-items: center !important;
    overflow: visible !important;
    padding: 0 !important;
}

.info-pane[data-info-pane="events"] .paper-ui {
    width: clamp(320px, 72vw, 820px) !important;
    min-height: clamp(480px, 82vh, 980px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-self: center !important;
    margin: clamp(18px, 3vh, 34px) auto 0 !important;
    padding: clamp(28px, 4vw, 56px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid #b8b8b8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #fbf8ef 0%, #f4efe2 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    color: #2f2a22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.info-pane[data-info-pane="events"] .event-reader-card[hidden],
.info-pane[data-info-pane="events"] .event-reader-card:not(.active) {
    display: none !important;
}

.info-pane[data-info-pane="events"] .paper-ui *,
.info-pane[data-info-pane="events"] .paper-ui p,
.info-pane[data-info-pane="events"] .paper-ui span {
    font-family: Georgia, "Times New Roman", serif !important;
}

.info-pane[data-info-pane="events"] .paper-header-group {
    flex: 0 0 auto !important;
    margin-bottom: clamp(28px, 4vh, 52px) !important;
}

.info-pane[data-info-pane="events"] .paper-title {
    margin: 0 !important;
    color: #2b261f !important;
    font-size: clamp(1.65rem, 3vw, 2.65rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.12 !important;
}

.info-pane[data-info-pane="events"] .paper-subtext {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem 0.65rem !important;
    margin: 8px 0 0 !important;
    color: #6d6254 !important;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
    line-height: 1.35 !important;
}

.info-pane[data-info-pane="events"] .paper-subtext-item {
    color: #6d6254 !important;
}

.info-pane[data-info-pane="events"] .paper-subtext-item + .paper-subtext-item::before {
    content: "\00B7" !important;
    margin-right: 0.65rem !important;
    color: rgba(109, 98, 84, 0.72) !important;
}

.info-pane[data-info-pane="events"] .paper-description {
    flex: 0 0 auto !important;
    max-width: 68ch !important;
    overflow: hidden auto !important;
    color: #3c352c !important;
    font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
    line-height: 1.65 !important;
    scrollbar-width: thin !important;
}

.info-pane[data-info-pane="events"] .paper-description p {
    margin: 0 !important;
    color: #3c352c !important;
}

.info-pane[data-info-pane="events"] .paper-footer {
    margin-top: auto !important;
    padding-top: clamp(28px, 4vh, 48px) !important;
    border-top: 1px solid rgba(80, 80, 80, 0.16) !important;
    color: #6d6254 !important;
    font-size: clamp(0.85rem, 1.2vw, 1rem) !important;
    line-height: 1.4 !important;
}

.info-pane[data-info-pane="events"] .paper-footer-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 24px !important;
}

.info-pane[data-info-pane="events"] .paper-footer-item {
    display: inline-flex !important;
    min-width: 0 !important;
    gap: 6px !important;
    color: #6d6254 !important;
}

.info-pane[data-info-pane="events"] .paper-footer-label {
    color: #6d6254 !important;
    font-weight: 700 !important;
}

.info-pane[data-info-pane="events"] .paper-footer-value {
    color: #3c352c !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.info-pane[data-info-pane="events"] .event-reader-actions {
    width: clamp(320px, 72vw, 820px) !important;
    max-width: none !important;
    margin: 12px auto 0 !important;
}

@media (max-width: 780px) {
    .event-paper-workspace .event-paper-body[data-event-loading="true"] .event-api-call-notice,
    .info-pane[data-info-pane="events"] .paper-ui {
        width: min(100%, 520px) !important;
        min-height: clamp(440px, 74vh, 760px) !important;
    }

    .info-pane[data-info-pane="events"] .event-reader-actions {
        width: min(100%, 520px) !important;
    }
}

/* NPC clipboard: adapts the clipboard sample while preserving existing NPC chat behavior. */
body[data-npc-menu-open="true"] {
    overflow: hidden !important;
}

.npc-clipboard {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1250 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 8px 24px 12px !important;
    background: rgba(13, 17, 25, 0.38) !important;
    backdrop-filter: blur(4px) !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard[hidden] {
    display: none !important;
}

.npc-clipboard .npc-clipboard-board {
    position: relative !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: min(1120px, calc(100vw - 48px)) !important;
    height: min(960px, calc(100vh - 20px)) !important;
    min-height: min(640px, calc(100vh - 20px)) !important;
    padding: 34px 18px 18px !important;
    overflow: hidden !important;
    border: 1px solid #8F7460 !important;
    border-radius: 6px !important;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.04)),
        repeating-linear-gradient(
            8deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 2px,
            rgba(0, 0, 0, 0.035) 3px,
            rgba(0, 0, 0, 0.035) 7px
        ),
        linear-gradient(180deg, #8A5D3D 0%, #654027 100%) !important;
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.28),
        0 5px 12px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    opacity: 0 !important;
    transform: translateY(28px) !important;
    transition:
        transform 420ms ease,
        opacity 220ms ease !important;
}

.npc-clipboard.is-open .npc-clipboard-board {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.npc-clipboard .npc-clipboard-clip-button {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    z-index: 5 !important;
    width: 180px !important;
    height: 44px !important;
    border: 1px solid #8F8F8F !important;
    border-radius: 0 0 14px 14px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.14)),
        linear-gradient(180deg, #D8D4CA 0%, #8E897F 100%) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    cursor: pointer !important;
    transform: translate(-50%, -12px) !important;
    transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.npc-clipboard .npc-clipboard-clip-button:hover {
    transform: translate(-50%, -12px) translateY(-1px) !important;
}

.npc-clipboard .npc-clipboard-clip-button:focus-visible {
    box-shadow:
        0 0 0 3px rgba(47, 42, 34, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    outline: none !important;
}

.npc-clipboard .npc-clipboard-clip-inner {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    width: 72px !important;
    height: 12px !important;
    border: 1px solid rgba(40, 40, 40, 0.22) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.08)) !important;
    transform: translateX(-50%) !important;
}

.npc-clipboard .npc-clipboard-paper,
.npc-clipboard .npc-chat-panel {
    position: relative !important;
    z-index: 2 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-clipboard-paper {
    display: flex !important;
    flex-direction: column !important;
    padding: 30px 28px 28px !important;
}

.npc-clipboard .npc-clipboard-paper[hidden],
.npc-clipboard .npc-chat-panel[hidden],
.npc-clipboard .npc-card[hidden],
.npc-clipboard .npc-card.is-hidden {
    display: none !important;
}

.npc-clipboard .npc-paper-header,
.npc-clipboard .npc-chat-header {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 0 14px !important;
    border: 0 !important;
    border-bottom: 2px solid #CF3F35 !important;
    background: transparent !important;
    color: #2F2A22 !important;
    text-align: left !important;
}

.npc-clipboard .npc-paper-title,
.npc-clipboard .npc-chat-title {
    max-width: none !important;
    margin: 0 !important;
    color: #2B261F !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.65rem, 2.4vw, 2.35rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

.npc-clipboard .npc-paper-header p {
    margin: 8px 0 0 !important;
    color: #6D6254 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(0.95rem, 1.2vw, 1.08rem) !important;
    line-height: 1.35 !important;
}

.npc-clipboard .npc-profile-toggle,
.npc-clipboard .npc-chat-back,
.npc-clipboard .npc-menu-close {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #EEE6D5 100%) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    cursor: pointer !important;
    transform: none !important;
}

.npc-clipboard .npc-profile-toggle:hover,
.npc-clipboard .npc-chat-back:hover,
.npc-clipboard .npc-menu-close:hover {
    border-color: #9F9F9F !important;
    background: linear-gradient(180deg, #F4EFE2 0%, #DED2BA 100%) !important;
    color: #2F2A22 !important;
    transform: translateY(-1px) !important;
}

.npc-clipboard .npc-search-wrap {
    flex: 0 0 auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.npc-clipboard .npc-search-input {
    width: min(380px, 100%) !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 239, 226, 0.86)) !important;
    color: #2F2A22 !important;
    caret-color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.96rem !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.npc-clipboard .npc-search-input::placeholder {
    color: #6D6254 !important;
}

.npc-clipboard .npc-search-input:focus {
    border-color: rgba(47, 42, 34, 0.72) !important;
    background: linear-gradient(180deg, #FFFDF5 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 0 0 3px rgba(47, 42, 34, 0.12),
        inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    outline: none !important;
}

.npc-clipboard .npc-card-list {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(106px, auto) !important;
    align-content: start !important;
    gap: 14px !important;
    min-height: 0 !important;
    margin: 0 -8px 0 0 !important;
    padding: 2px 8px 6px 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.npc-clipboard .npc-card-list::-webkit-scrollbar {
    width: 10px !important;
}

.npc-clipboard .npc-card-list::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(90, 75, 55, 0.12) !important;
}

.npc-clipboard .npc-card-list::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(90, 75, 55, 0.32) !important;
}

.npc-clipboard .npc-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: 106px !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(140, 120, 40, 0.28) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.03)),
        linear-gradient(180deg, #FFF3A8 0%, #F5DF72 100%) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    text-align: left !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.13),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
    cursor: pointer !important;
    transform: none !important;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease !important;
}

.npc-clipboard .npc-card:hover {
    border-color: rgba(140, 120, 40, 0.46) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.04)),
        linear-gradient(180deg, #FFF6BD 0%, #ECD160 100%) !important;
    box-shadow:
        0 11px 22px rgba(0, 0, 0, 0.16),
        0 3px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
    transform: translateY(-2px) !important;
}

.npc-clipboard .npc-card:focus-visible {
    border-color: rgba(47, 42, 34, 0.82) !important;
    box-shadow:
        0 0 0 3px rgba(47, 42, 34, 0.16),
        0 11px 22px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    outline: none !important;
}

.npc-clipboard .npc-card-name {
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.06rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
}

.npc-clipboard .npc-card-message {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    margin-top: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #5D5032 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.94rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.npc-clipboard .npc-card.new-npc,
.npc-clipboard .npc-card.unread-message,
.npc-clipboard .npc-card.has-new-message {
    border-color: rgba(207, 63, 53, 0.62) !important;
    border-width: 2px !important;
    box-shadow:
        0 0 0 1px rgba(207, 63, 53, 0.24),
        0 0 24px rgba(207, 63, 53, 0.32),
        0 12px 24px rgba(207, 63, 53, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.npc-clipboard .npc-card.new-npc .npc-card-message,
.npc-clipboard .npc-card.unread-message .npc-card-message,
.npc-clipboard .npc-card.has-new-message .npc-card-message {
    color: #7B312C !important;
    font-weight: 700 !important;
}

.npc-clipboard .npc-card.active {
    border-color: #2F2A22 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(0, 0, 0, 0.04)),
        linear-gradient(180deg, #FFF0A0 0%, #E8C94E 100%) !important;
    color: #2F2A22 !important;
}

.npc-clipboard .npc-search-empty {
    margin: 12px 2px 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(109, 98, 84, 0.24) !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.32) !important;
    color: #6D6254 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-chat-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    padding: 28px 28px 24px !important;
}

.npc-clipboard .npc-chat-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.npc-clipboard .npc-chat-title {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.npc-clipboard .npc-profile-toggle {
    grid-column: auto !important;
    justify-self: end !important;
}

.npc-clipboard .npc-profile-tray,
.npc-clipboard .npc-chat-log,
.npc-clipboard .npc-chat-form,
.npc-clipboard .npc-chat-footer {
    border-color: rgba(109, 98, 84, 0.24) !important;
    background: transparent !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-chat-main {
    min-height: 0 !important;
    overflow: hidden !important;
}

.npc-clipboard .npc-chat-log {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px 2px 12px 0 !important;
}

.npc-clipboard .npc-message {
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-message-speaker,
.npc-clipboard .npc-profile-heading {
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-message-content,
.npc-clipboard .npc-profile-text,
.npc-clipboard .npc-chat-empty {
    border-color: rgba(109, 98, 84, 0.24) !important;
    background: rgba(255, 255, 255, 0.32) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(109, 98, 84, 0.24) !important;
}

.npc-clipboard .npc-chat-textarea {
    min-height: 74px !important;
    border-color: #B8B8B8 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 239, 226, 0.86)) !important;
    color: #2F2A22 !important;
    caret-color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-chat-textarea::placeholder {
    color: #6D6254 !important;
}

.npc-clipboard .npc-chat-textarea:focus {
    border-color: rgba(47, 42, 34, 0.72) !important;
    background: #FFFDF5 !important;
    box-shadow: 0 0 0 3px rgba(47, 42, 34, 0.12) !important;
}

.npc-clipboard .npc-chat-form .button.primary {
    align-self: stretch !important;
    border-color: #2F2A22 !important;
    background: linear-gradient(180deg, #D8D0C0 0%, #B9AD98 100%) !important;
    color: #000000 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.npc-clipboard .npc-chat-form .button.primary:hover {
    background: linear-gradient(180deg, #CFC4B0 0%, #A99D89 100%) !important;
}

.npc-clipboard .npc-chat-footer {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(109, 98, 84, 0.24) !important;
}

@media (max-width: 760px) {
    .npc-clipboard {
        padding: 6px !important;
    }

    .npc-clipboard .npc-clipboard-board {
        width: calc(100vw - 12px) !important;
        height: calc(100vh - 12px) !important;
        min-height: 0 !important;
        padding: 30px 12px 12px !important;
    }

    .npc-clipboard .npc-clipboard-paper,
    .npc-clipboard .npc-chat-panel {
        padding: 24px 18px !important;
    }

    .npc-clipboard .npc-card-list {
        grid-template-columns: 1fr !important;
    }

    .npc-clipboard .npc-chat-header,
    .npc-clipboard .npc-chat-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .npc-clipboard .npc-profile-toggle,
    .npc-clipboard .npc-chat-form .button.primary {
        justify-self: stretch !important;
    }
}

/* Campaign detail has late inline dark-theme rules; these ID-scoped rules keep the clipboard paper design intact. */
body.campaign-detail-page #npcClipboard .npc-clipboard-paper {
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    color: #2F2A22 !important;
}

body.campaign-detail-page #npcClipboard .npc-paper-header {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 0 14px !important;
    border: 0 !important;
    border-bottom: 2px solid #CF3F35 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2F2A22 !important;
    box-shadow: none !important;
    text-align: left !important;
}

body.campaign-detail-page #npcClipboard .npc-paper-header *,
body.campaign-detail-page #npcClipboard .npc-paper-header .npc-paper-title {
    background: transparent !important;
    color: #2B261F !important;
    box-shadow: none !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

body.campaign-detail-page #npcClipboard .npc-paper-header .npc-paper-title {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(1.65rem, 2.4vw, 2.35rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

body.campaign-detail-page #npcClipboard .npc-paper-header p {
    margin: 8px 0 0 !important;
    color: #6D6254 !important;
    font-size: clamp(0.95rem, 1.2vw, 1.08rem) !important;
    line-height: 1.35 !important;
}

body.campaign-detail-page #npcClipboard .npc-search-wrap {
    flex: 0 0 auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.campaign-detail-page #npcClipboard .npc-search-wrap *,
body.campaign-detail-page #npcClipboard .npc-search-input {
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

body.campaign-detail-page #npcClipboard .npc-search-input {
    width: min(380px, 100%) !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 239, 226, 0.86)) !important;
    caret-color: #2F2A22 !important;
    font-size: 0.96rem !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

body.campaign-detail-page #npcClipboard .npc-search-input::placeholder {
    color: #6D6254 !important;
}

body.campaign-detail-page #npcClipboard .npc-search-input:focus {
    border-color: rgba(47, 42, 34, 0.72) !important;
    background: linear-gradient(180deg, #FFFDF5 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 0 0 3px rgba(47, 42, 34, 0.12),
        inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    outline: none !important;
}

body.campaign-detail-page #npcClipboard .npc-card-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(106px, auto) !important;
    align-content: start !important;
    gap: 14px !important;
    min-height: 0 !important;
    margin: 0 -8px 0 0 !important;
    padding: 2px 8px 6px 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.campaign-detail-page #npcClipboard .npc-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: 106px !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(140, 120, 40, 0.28) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.03)),
        linear-gradient(180deg, #FFF3A8 0%, #F5DF72 100%) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    text-align: left !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.13),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
    transform: none !important;
}

body.campaign-detail-page #npcClipboard .npc-card:hover {
    border-color: rgba(140, 120, 40, 0.46) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.04)),
        linear-gradient(180deg, #FFF6BD 0%, #ECD160 100%) !important;
    color: #2F2A22 !important;
    box-shadow:
        0 11px 22px rgba(0, 0, 0, 0.16),
        0 3px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
    transform: translateY(-2px) !important;
}

body.campaign-detail-page #npcClipboard .npc-card-name {
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.06rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

body.campaign-detail-page #npcClipboard .npc-card-message {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    margin-top: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5D5032 !important;
    box-shadow: none !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.94rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

body.campaign-detail-page #npcClipboard .npc-card.new-npc,
body.campaign-detail-page #npcClipboard .npc-card.unread-message,
body.campaign-detail-page #npcClipboard .npc-card.has-new-message {
    border-color: rgba(207, 63, 53, 0.62) !important;
    border-width: 2px !important;
    box-shadow:
        0 0 0 1px rgba(207, 63, 53, 0.24),
        0 0 24px rgba(207, 63, 53, 0.32),
        0 12px 24px rgba(207, 63, 53, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

body.campaign-detail-page #npcClipboard .npc-card.new-npc .npc-card-message,
body.campaign-detail-page #npcClipboard .npc-card.unread-message .npc-card-message,
body.campaign-detail-page #npcClipboard .npc-card.has-new-message .npc-card-message {
    color: #7B312C !important;
    font-weight: 700 !important;
}

body.campaign-detail-page #npcClipboard .npc-card.active {
    border-color: #2F2A22 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(0, 0, 0, 0.04)),
        linear-gradient(180deg, #FFF0A0 0%, #E8C94E 100%) !important;
    color: #2F2A22 !important;
}

@media (max-width: 760px) {
    body.campaign-detail-page #npcClipboard .npc-card-list {
        grid-template-columns: 1fr !important;
    }
}

/* NPC chat paper redesign. Scoped tightly so late campaign dark-theme rules cannot repaint it. */
body.campaign-detail-page #npcClipboard[data-npc-chat-open="true"] #npcClipboardClose {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel.npc-chat-panel {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel.npc-chat-panel[hidden] {
    display: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-board {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-clip-close {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    z-index: 10 !important;
    width: 190px !important;
    height: 46px !important;
    border: 1px solid #8F8F8F !important;
    border-radius: 0 0 14px 14px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(0, 0, 0, 0.14)),
        linear-gradient(180deg, #D8D4CA 0%, #8E897F 100%) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
    cursor: pointer !important;
    transform: translate(-50%, -12px) !important;
    transition: transform 160ms ease, box-shadow 160ms ease !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-clip-close:hover {
    transform: translate(-50%, -13px) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-clip-close:focus-visible {
    box-shadow:
        0 0 0 3px rgba(47, 42, 34, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
    outline: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-clip-slot {
    position: absolute !important;
    left: 50% !important;
    top: 10px !important;
    width: 78px !important;
    height: 12px !important;
    border: 1px solid rgba(40, 40, 40, 0.22) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(0, 0, 0, 0.08)) !important;
    transform: translateX(-50%) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-clip-arrow {
    position: absolute !important;
    left: 50% !important;
    bottom: 5px !important;
    color: rgba(47, 42, 34, 0.75) !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    transform: translateX(-50%) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-paper {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 34px 38px 28px !important;
    overflow: hidden !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.018)),
        linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-paper::before {
    content: "" !important;
    position: absolute !important;
    left: 42px !important;
    right: 42px !important;
    top: 156px !important;
    bottom: 138px !important;
    z-index: 0 !important;
    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 31px,
            rgba(95, 110, 150, 0.08) 32px,
            rgba(95, 110, 150, 0.08) 33px
        ) !important;
    pointer-events: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-paper::after {
    content: "" !important;
    position: absolute !important;
    left: 58px !important;
    top: 156px !important;
    bottom: 138px !important;
    z-index: 0 !important;
    width: 1px !important;
    background: rgba(207, 63, 53, 0.13) !important;
    pointer-events: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-top-actions {
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 8px !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .desk-blue-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 112px !important;
    height: 50px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(184, 184, 184, 0.28) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)),
        linear-gradient(180deg, #20365F 0%, #16294B 100%) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.18),
        0 2px 5px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    color: #F7F3EA !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .desk-blue-button *,
body.campaign-detail-page #npcClipboard #npcChatPanel .desk-blue-button:hover * {
    color: #F7F3EA !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .desk-blue-button:hover {
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.22),
        0 3px 6px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-1px) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .desk-blue-button:active {
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.18),
        inset 0 2px 4px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(1px) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .desk-blue-button:focus-visible {
    box-shadow:
        0 0 0 3px rgba(47, 42, 34, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    outline: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .desk-button-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    object-fit: contain !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-button-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-header {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 4px 150px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2F2A22 !important;
    text-align: center !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-title,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-header h1 {
    max-width: none !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.9rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-header-rule {
    position: relative !important;
    width: min(420px, 70%) !important;
    height: 1px !important;
    margin: 16px auto 0 !important;
    background: rgba(70, 60, 45, 0.24) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-header-rule::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border: 1px solid rgba(70, 60, 45, 0.35) !important;
    background: #F4EFE2 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-scroll {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 0 18px !important;
    padding: 20px 30px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(90, 75, 55, 0.16) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #2F2A22 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-scroll::-webkit-scrollbar {
    width: 10px !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-scroll::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(90, 75, 55, 0.12) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(90, 75, 55, 0.32) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-thread {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    min-height: 100% !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-thread[hidden],
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-profile-card[hidden],
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper[hidden] {
    display: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message {
    position: relative !important;
    max-width: min(560px, 74%) !important;
    padding: 18px 22px !important;
    border-radius: 5px !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.sticky-message,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.npc {
    align-self: flex-start !important;
    border: 1px solid rgba(140, 120, 40, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.035)),
        linear-gradient(180deg, #FFF3A8 0%, #F5DF72 100%) !important;
    transform: rotate(-0.8deg) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.player-message,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.player {
    align-self: flex-end !important;
    border: 1px solid rgba(115, 135, 160, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(0, 0, 0, 0.02)),
        linear-gradient(180deg, #EEF4FB 0%, #DCE8F5 100%) !important;
    transform: rotate(0.6deg) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.sticky-message::after,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.player-message::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 5px 0 5px 0 !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.16)) !important;
    clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message-speaker,
body.campaign-detail-page #npcClipboard #npcChatPanel .message-speaker {
    display: block !important;
    margin: 0 0 8px !important;
    color: rgba(47, 42, 34, 0.68) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message-content {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.03rem !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-empty {
    align-self: center !important;
    display: grid !important;
    width: min(520px, 100%) !important;
    margin: auto 0 !important;
    padding: clamp(32px, 7vh, 72px) 20px !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    text-align: center !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-empty-title {
    margin: 0 !important;
    color: #2B261F !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.55rem, 2.6vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-empty-text {
    margin: 0 auto !important;
    max-width: 34ch !important;
    color: #5F5447 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1rem, 1.35vw, 1.14rem) !important;
    line-height: 1.55 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.pending-player-message {
    opacity: 1 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message.typing-message {
    width: 136px !important;
    min-height: 76px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .typing-dots,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-typing-dots {
    display: flex !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .typing-dots span,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-typing-dots span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(47, 42, 34, 0.5) !important;
    animation: npcTypingDot 900ms infinite ease-in-out !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .typing-dots span:nth-child(2),
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-typing-dots span:nth-child(2) {
    animation-delay: 120ms !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .typing-dots span:nth-child(3),
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-typing-dots span:nth-child(3) {
    animation-delay: 240ms !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message-form.npc-chat-form {
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    border-top: 1px dashed rgba(70, 60, 45, 0.34) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2F2A22 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-input-wrap {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 150px !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 10px !important;
    border: 1px solid rgba(90, 75, 55, 0.22) !important;
    border-radius: 6px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.018)),
        linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-input-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(47, 42, 34, 0.55) !important;
    font-size: 1.5rem !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-input-icon-img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    opacity: 0.58 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message-input.npc-chat-textarea {
    min-height: 54px !important;
    max-height: 140px !important;
    resize: none !important;
    padding: 15px 16px !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(244, 239, 226, 0.86)) !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.05) !important;
    color: #2F2A22 !important;
    caret-color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    outline: none !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message-input.npc-chat-textarea::placeholder {
    color: rgba(47, 42, 34, 0.46) !important;
    font-style: italic !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-message-input.npc-chat-textarea:focus {
    border-color: rgba(47, 42, 34, 0.72) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(244, 239, 226, 0.86)) !important;
    box-shadow:
        0 0 0 3px rgba(47, 42, 34, 0.12),
        inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    border: 1px solid rgba(184, 184, 184, 0.28) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)),
        linear-gradient(180deg, #20365F 0%, #16294B 100%) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.18),
        0 2px 5px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    color: #F7F3EA !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform 140ms ease, box-shadow 140ms ease !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-button *,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-button:hover * {
    color: #F7F3EA !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-button:hover {
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.22),
        0 3px 6px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-1px) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-button:active {
    transform: translateY(1px) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-button:disabled {
    cursor: progress !important;
    opacity: 0.78 !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .send-icon,
body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    object-fit: contain !important;
    font-size: 0.95rem !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-page.npc-profile-tray {
    position: absolute !important;
    right: 26px !important;
    top: 126px !important;
    bottom: 124px !important;
    z-index: 6 !important;
    width: min(390px, 42%) !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    perspective: 1200px !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel[data-profile-open="true"] .npc-details-page {
    pointer-events: auto !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper {
    position: relative !important;
    display: block !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 34px 34px 52px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 5px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.02)),
        linear-gradient(180deg, #FBF8EF 0%, #F4EFE2 100%) !important;
    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    color: #2F2A22 !important;
    opacity: 0 !important;
    transform: translateX(112%) rotateY(-18deg) rotateZ(1.2deg) !important;
    transform-origin: left center !important;
    transition: transform 420ms ease, opacity 220ms ease !important;
    scrollbar-gutter: stable both-edges !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper::-webkit-scrollbar {
    width: 9px !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(90, 75, 55, 0.12) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(90, 75, 55, 0.28) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel[data-profile-open="true"] .npc-details-paper:not([hidden]) {
    opacity: 1 !important;
    transform: translateX(0) rotateY(0deg) rotateZ(-1.2deg) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 0 0 5px 0 !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.18)) !important;
    clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper .npc-profile-heading {
    margin: 0 !important;
    color: #2F2A22 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-detail-rule {
    width: 78% !important;
    height: 1px !important;
    margin: 14px auto 0 !important;
    background: rgba(70, 60, 45, 0.22) !important;
}

body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-paper .npc-profile-text {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #3C352C !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
}

@media (max-width: 840px) {
    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-paper {
        padding: 28px 20px 22px !important;
    }

    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-title,
    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-chat-header h1 {
        font-size: 1.55rem !important;
        letter-spacing: 0.08em !important;
    }

    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-input-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-input-icon {
        display: none !important;
    }

    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-send-button {
        min-height: 48px !important;
    }

    body.campaign-detail-page #npcClipboard #npcChatPanel .npc-details-page.npc-profile-tray {
        left: 20px !important;
        right: 20px !important;
        top: 124px !important;
        bottom: 128px !important;
        width: auto !important;
    }
}

/* Universal Argus header: source-of-truth styles for the shared _app_header partial. */
.app-shell:has(> .argus-topbar),
.shell:has(> .argus-topbar),
body.campaign-detail-page .shell:has(> .argus-topbar) {
    overflow-x: visible !important;
    padding-top: 0 !important;
}

.argus-topbar.topbar.app-header,
body.campaign-detail-page .argus-topbar.topbar.app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2000 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(260px, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 0 18px calc(50% - 50vw) !important;
    padding: 10px 18px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(184, 184, 184, 0.22) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.18)),
        linear-gradient(180deg, #121B2E 0%, #0B1220 100%) !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #F7F3EA !important;
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: 0 !important;
    transform: none !important;
    backdrop-filter: none !important;
}

.argus-topbar.topbar.app-header *,
body.campaign-detail-page .argus-topbar.topbar.app-header * {
    color: #F7F3EA !important;
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: 0 !important;
}

.argus-brand.brand.app-brand,
body.campaign-detail-page .argus-brand.brand.app-brand {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-self: start !important;
    gap: 12px !important;
    width: auto !important;
    padding: 0 !important;
    color: #F7F3EA !important;
    text-decoration: none !important;
}

.argus-brand-mark.brand-mark.app-brand-mark,
body.campaign-detail-page .argus-brand-mark.brand-mark.app-brand-mark {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(184, 184, 184, 0.22) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.14)),
        linear-gradient(180deg, #1A2947 0%, #101A2F 100%) !important;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: #F7F3EA !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    object-fit: initial !important;
}

.argus-brand-name.brand-title.app-brand-title,
body.campaign-detail-page .argus-brand-name.brand-title.app-brand-title {
    max-width: none !important;
    overflow: visible !important;
    color: #F7F3EA !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-wrap: nowrap !important;
    white-space: nowrap !important;
}

.argus-nav.main-nav.app-main-nav,
body.campaign-detail-page .argus-nav.main-nav.app-main-nav {
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    gap: 8px !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid rgba(184, 184, 184, 0.2) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)),
        rgba(255, 255, 255, 0.05) !important;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.argus-nav-button.nav-link,
.argus-nav-button.admin-nav-toggle,
body.campaign-detail-page .argus-nav-button.nav-link,
body.campaign-detail-page .argus-nav-button.admin-nav-toggle {
    display: inline-flex !important;
    min-width: 92px !important;
    min-height: 0 !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border: 1px solid rgba(184, 184, 184, 0.2) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(0, 0, 0, 0.1)),
        linear-gradient(180deg, #1A2947 0%, #101A2F 100%) !important;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #F7F3EA !important;
    cursor: pointer !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease,
        background 140ms ease !important;
}

.argus-nav-button.nav-link:hover,
.argus-nav-button.admin-nav-toggle:hover,
body.campaign-detail-page .argus-nav-button.nav-link:hover,
body.campaign-detail-page .argus-nav-button.admin-nav-toggle:hover {
    border-color: rgba(184, 184, 184, 0.32) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(0, 0, 0, 0.1)),
        linear-gradient(180deg, #20335A 0%, #13213B 100%) !important;
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: #F7F3EA !important;
    transform: translateY(-1px) !important;
}

.argus-nav-button.nav-link:active,
.argus-nav-button.admin-nav-toggle:active,
body.campaign-detail-page .argus-nav-button.nav-link:active,
body.campaign-detail-page .argus-nav-button.admin-nav-toggle:active {
    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.18),
        inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(1px) !important;
}

.argus-nav-button.is-active,
.argus-nav-button.active,
body.campaign-detail-page .argus-nav-button.is-active,
body.campaign-detail-page .argus-nav-button.active {
    border-color: rgba(160, 220, 255, 0.55) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(0, 0, 0, 0.04)),
        linear-gradient(180deg, #62C8FF 0%, #32AEEA 100%) !important;
    box-shadow:
        0 8px 16px rgba(50, 174, 234, 0.22),
        0 2px 5px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    color: #09111F !important;
}

.argus-nav-button.is-active *,
.argus-nav-button.active *,
body.campaign-detail-page .argus-nav-button.is-active *,
body.campaign-detail-page .argus-nav-button.active * {
    color: #09111F !important;
}

.argus-nav-button:focus-visible,
.argus-billing-button:focus-visible,
.argus-account-button:focus-visible,
.argus-account-dropdown a:focus-visible,
.argus-account-dropdown button:focus-visible,
body.campaign-detail-page .argus-nav-button:focus-visible,
body.campaign-detail-page .argus-billing-button:focus-visible,
body.campaign-detail-page .argus-account-button:focus-visible,
body.campaign-detail-page .argus-account-dropdown a:focus-visible,
body.campaign-detail-page .argus-account-dropdown button:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(98, 200, 255, 0.24),
        0 8px 14px rgba(0, 0, 0, 0.2) !important;
}

.argus-admin-menu.admin-nav,
body.campaign-detail-page .argus-admin-menu.admin-nav {
    position: relative !important;
    display: inline-flex !important;
    min-width: 0 !important;
}

.argus-admin-menu.admin-nav > summary,
body.campaign-detail-page .argus-admin-menu.admin-nav > summary {
    list-style: none !important;
}

.argus-admin-menu.admin-nav > summary::-webkit-details-marker,
body.campaign-detail-page .argus-admin-menu.admin-nav > summary::-webkit-details-marker {
    display: none !important;
}

.argus-admin-dropdown.admin-nav-menu,
body.campaign-detail-page .argus-admin-dropdown.admin-nav-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    z-index: 2100 !important;
    display: none !important;
    min-width: 190px !important;
    padding: 8px !important;
    border: 1px solid rgba(184, 184, 184, 0.22) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.14)),
        linear-gradient(180deg, #121B2E 0%, #0B1220 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.argus-admin-menu.admin-nav[open] .argus-admin-dropdown,
body.campaign-detail-page .argus-admin-menu.admin-nav[open] .argus-admin-dropdown {
    display: grid !important;
    gap: 4px !important;
}

.argus-dropdown-link.admin-nav-item,
body.campaign-detail-page .argus-dropdown-link.admin-nav-item {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
}

.argus-user-actions.account-strip.app-account-strip,
body.campaign-detail-page .argus-user-actions.account-strip.app-account-strip {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.argus-billing-button.balance-pill,
body.campaign-detail-page .argus-billing-button.balance-pill {
    display: inline-flex !important;
    height: 40px !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(184, 184, 184, 0.22) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(0, 0, 0, 0.1)),
        linear-gradient(180deg, #1A2947 0%, #101A2F 100%) !important;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #F7F3EA !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease !important;
}

.argus-billing-button.balance-pill:hover,
body.campaign-detail-page .argus-billing-button.balance-pill:hover {
    border-color: rgba(98, 200, 255, 0.36) !important;
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px) !important;
}

.argus-billing-button .billing-label,
body.campaign-detail-page .argus-billing-button .billing-label {
    color: rgba(247, 243, 234, 0.72) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.argus-billing-button .billing-amount,
body.campaign-detail-page .argus-billing-button .billing-amount {
    color: #62C8FF !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.argus-account-menu,
body.campaign-detail-page .argus-account-menu {
    position: relative !important;
    display: inline-flex !important;
}

.argus-account-button.user-tab,
body.campaign-detail-page .argus-account-button.user-tab {
    display: inline-flex !important;
    height: 40px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 12px 0 8px !important;
    border: 1px solid rgba(184, 184, 184, 0.22) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(0, 0, 0, 0.1)),
        linear-gradient(180deg, #1A2947 0%, #101A2F 100%) !important;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #F7F3EA !important;
    cursor: pointer !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    transform: none !important;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease !important;
}

.argus-account-button.user-tab:hover,
body.campaign-detail-page .argus-account-button.user-tab:hover {
    border-color: rgba(184, 184, 184, 0.34) !important;
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px) !important;
}

.account-avatar.user-avatar,
body.campaign-detail-page .account-avatar.user-avatar {
    display: inline-flex !important;
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(98, 200, 255, 0.3) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.08)),
        linear-gradient(180deg, #62C8FF 0%, #32AEEA 100%) !important;
    color: #09111F !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.profile-accent-blue {
    --profile-accent-start: #62C8FF;
    --profile-accent-end: #1877B9;
}

.profile-accent-teal {
    --profile-accent-start: #5EEAD4;
    --profile-accent-end: #138F97;
}

.profile-accent-green {
    --profile-accent-start: #86EFAC;
    --profile-accent-end: #27785D;
}

.profile-accent-gold {
    --profile-accent-start: #FDE68A;
    --profile-accent-end: #B7791F;
}

.profile-accent-rose {
    --profile-accent-start: #FDA4AF;
    --profile-accent-end: #BE3A4A;
}

.profile-accent-violet {
    --profile-accent-start: #C4B5FD;
    --profile-accent-end: #6D5BD0;
}

.profile-accent-slate {
    --profile-accent-start: #CBD5E1;
    --profile-accent-end: #475569;
}

.account-avatar.user-avatar[class*="profile-accent-"],
body.campaign-detail-page .account-avatar.user-avatar[class*="profile-accent-"] {
    border-color: rgba(255, 255, 255, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.1)),
        linear-gradient(180deg, var(--profile-accent-start), var(--profile-accent-end)) !important;
    color: #09111F !important;
}

.profile-preview-banner[class*="profile-accent-"],
.profile-swatch {
    background:
        linear-gradient(135deg, var(--profile-accent-start), var(--profile-accent-end)) !important;
}

.profile-swatch-option:has(input:checked),
.profile-segment-option:has(input:checked) {
    border-color: rgba(98, 200, 255, 0.68) !important;
    background:
        linear-gradient(180deg, rgba(98, 200, 255, 0.18), rgba(98, 200, 255, 0.08)),
        var(--paragraph-bg) !important;
}

.profile-verification-pill.verified {
    border-color: rgba(134, 239, 172, 0.45) !important;
    color: #86EFAC !important;
}

.profile-verification-pill.unverified,
.profile-notice.warning,
.profile-notice.error {
    border-color: rgba(253, 164, 175, 0.45) !important;
    color: #FDA4AF !important;
}

.profile-notice.success {
    border-color: rgba(134, 239, 172, 0.45) !important;
    color: #86EFAC !important;
}

.account-name.user-name,
body.campaign-detail-page .account-name.user-name {
    max-width: 18ch !important;
    overflow: hidden !important;
    color: #F7F3EA !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.account-caret,
body.campaign-detail-page .account-caret {
    color: rgba(247, 243, 234, 0.72) !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
}

.argus-account-dropdown,
body.campaign-detail-page .argus-account-dropdown {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    z-index: 2100 !important;
    display: none !important;
    min-width: 190px !important;
    padding: 8px !important;
    border: 1px solid rgba(184, 184, 184, 0.22) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.14)),
        linear-gradient(180deg, #121B2E 0%, #0B1220 100%) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.argus-account-menu.is-open .argus-account-dropdown,
body.campaign-detail-page .argus-account-menu.is-open .argus-account-dropdown {
    display: grid !important;
    gap: 4px !important;
}

.argus-account-dropdown[hidden],
body.campaign-detail-page .argus-account-dropdown[hidden] {
    display: none !important;
}

.argus-account-dropdown a,
.argus-account-dropdown button,
body.campaign-detail-page .argus-account-dropdown a,
body.campaign-detail-page .argus-account-dropdown button {
    display: flex !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #F7F3EA !important;
    cursor: pointer !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-decoration: none !important;
}

.argus-account-dropdown a:hover,
.argus-account-dropdown button:hover,
body.campaign-detail-page .argus-account-dropdown a:hover,
body.campaign-detail-page .argus-account-dropdown button:hover {
    border-color: rgba(184, 184, 184, 0.18) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(0, 0, 0, 0.06)),
        rgba(98, 200, 255, 0.08) !important;
}

.argus-account-dropdown form,
body.campaign-detail-page .argus-account-dropdown form {
    margin: 6px 0 0 !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(184, 184, 184, 0.14) !important;
}

@media (max-width: 1180px) {
    .argus-topbar.topbar.app-header,
    body.campaign-detail-page .argus-topbar.topbar.app-header {
        height: auto !important;
        min-height: 68px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .argus-brand.brand.app-brand,
    .argus-nav.main-nav.app-main-nav,
    .argus-user-actions.account-strip.app-account-strip,
    body.campaign-detail-page .argus-brand.brand.app-brand,
    body.campaign-detail-page .argus-nav.main-nav.app-main-nav,
    body.campaign-detail-page .argus-user-actions.account-strip.app-account-strip {
        justify-self: center !important;
    }

    .argus-nav.main-nav.app-main-nav,
    body.campaign-detail-page .argus-nav.main-nav.app-main-nav {
        overflow-x: auto !important;
    }
}

@media (max-width: 620px) {
    .argus-topbar.topbar.app-header,
    body.campaign-detail-page .argus-topbar.topbar.app-header {
        position: static !important;
        width: 100% !important;
        margin: 0 0 14px 0 !important;
        transform: none !important;
    }

    .argus-nav-button.nav-link,
    .argus-nav-button.admin-nav-toggle,
    body.campaign-detail-page .argus-nav-button.nav-link,
    body.campaign-detail-page .argus-nav-button.admin-nav-toggle {
        min-width: auto !important;
        padding: 0 12px !important;
    }

    .argus-billing-button .billing-label,
    .account-name.user-name,
    body.campaign-detail-page .argus-billing-button .billing-label,
    body.campaign-detail-page .account-name.user-name {
        display: none !important;
    }

    .argus-user-actions.account-strip.app-account-strip,
    body.campaign-detail-page .argus-user-actions.account-strip.app-account-strip {
        width: 100% !important;
        justify-content: center !important;
    }
}