:root {
    /* D&D Reference Design - Strict Red/Gold Theme */
    --fang-bg-color: var(--ninjo-grund);
    /* Parchment Light */
    --fang-text-color: var(--ninjo-text);
    --fang-card-bg: #ffffff;
    --fang-nav-bg: var(--ninjo-leiste);
    --fang-border-color: var(--ninjo-rand);

    /* Strict Theme Colors */
    --fang-primary-red: var(--ninjo-marke);
    /* Dark D&D Red */
    --fang-accent-gold: var(--ninjo-akzent);
    /* Metallic Gold */
    --fang-header-text: #ffffff;
    --fang-canvas-bg: #fbf9f4;
    /* Slightly darker parchment for canvas */

    /* The same two accents as bare RGB components, so translucent tints can be written
       as rgba(var(--fang-primary-red-rgb), 0.2) instead of hard-coding the colour again.
       Without these, every rgba() tint silently stays D&D red/gold when a theme swaps the
       accents, which is why the cyberpunk theme needed ~90 override rules to repaint what
       should have followed along by itself. Keep in sync with the accents above. */
    --fang-primary-red-rgb: 139, 0, 0;
    --fang-accent-gold-rgb: 212, 175, 55;

    --fang-font-main: var(--ninjo-schrift);
    --fang-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --fang-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fang-app-window .fang-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Added to prevent canvas overflow */
}

/* --- Container Frame --- */
.fang-app-container .container {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

/* Sidebar Styling */
.fang-app-container .sidebar-base {
    width: 300px;
    background: var(--fang-bg-color);
    font-family: var(--fang-font-main);
    color: var(--fang-text-color);
}

.fang-app-window .window-content {
    padding: 0;
    overflow: hidden;
    background: var(--fang-bg-color);
}

.fang-app-container {
    position: relative; /* anchor for the in-window editor overlay (inset: 0) */
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--fang-bg-color);
    font-family: var(--fang-font-main);
    color: var(--fang-text-color);
}

.fang-app-container * {
    box-sizing: border-box;
}

/* Optional Theme: Cyberpunk (enabled via standard module settings) */
:root.fang-theme-cyberpunk,
body.fang-theme-cyberpunk {
    --fang-bg-color: #071019;
    --fang-text-color: #d9ecff;
    --fang-card-bg: #0b1622;
    --fang-nav-bg: #0a1320;
    --fang-border-color: #1f3a56;
    --fang-primary-red: #ff2e88;
    --fang-accent-gold: #33d9ff;
    --fang-primary-red-rgb: 255, 46, 136;
    --fang-accent-gold-rgb: 51, 217, 255;
    --fang-header-text: #e8fbff;
    --fang-canvas-bg: #040911;
    --fang-font-main: "Rajdhani", "Trebuchet MS", "Segoe UI", sans-serif;
}

.fang-app-container.fang-theme-cyberpunk {
    --fang-bg-color: #071019;
    --fang-text-color: #d9ecff;
    --fang-card-bg: #0b1622;
    --fang-nav-bg: #0a1320;
    --fang-border-color: #1f3a56;
    --fang-primary-red: #ff2e88;
    --fang-accent-gold: #33d9ff;
    --fang-primary-red-rgb: 255, 46, 136;
    --fang-accent-gold-rgb: 51, 217, 255;
    --fang-header-text: #e8fbff;
    --fang-canvas-bg: #040911;
    --fang-font-main: "Rajdhani", "Trebuchet MS", "Segoe UI", sans-serif;
}

.fang-app-container.fang-theme-cyberpunk .sidebar {
    border-right-color: #33d9ff;
    box-shadow: 0 0 22px rgba(51, 217, 255, 0.16), inset 0 0 0 1px rgba(255, 46, 136, 0.12);
}

.fang-app-container.fang-theme-cyberpunk .sidebar-header {
    background: linear-gradient(135deg, #170920 0%, #0d2032 52%, #0a1320 100%);
    border-bottom-color: #33d9ff;
}

.fang-app-container.fang-theme-cyberpunk .sidebar-header p {
    color: #b9e8ff;
}

.fang-app-container.fang-theme-cyberpunk .control-group h3 {
    color: #7feaff;
}

.fang-app-container.fang-theme-cyberpunk input[type="text"],
.fang-app-container.fang-theme-cyberpunk input[type="number"],
.fang-app-container.fang-theme-cyberpunk input[type="date"],
.fang-app-container.fang-theme-cyberpunk select {
    background: #0c1b2a;
    border-color: #27506f;
    color: #d9ecff;
}

.fang-app-container.fang-theme-cyberpunk input[type="text"]:focus,
.fang-app-container.fang-theme-cyberpunk input[type="number"]:focus,
.fang-app-container.fang-theme-cyberpunk input[type="date"]:focus,
.fang-app-container.fang-theme-cyberpunk select:focus {
    border-color: #33d9ff;
    box-shadow: 0 0 0 2px rgba(51, 217, 255, 0.24);
}

.fang-app-container.fang-theme-cyberpunk .action-btn,
.fang-app-container.fang-theme-cyberpunk .secondary-btn {
    background: linear-gradient(180deg, #13293d 0%, #0d2031 100%);
    border-color: #2c5a7d;
    color: #d9ecff;
}

.fang-app-container.fang-theme-cyberpunk .action-btn:hover,
.fang-app-container.fang-theme-cyberpunk .secondary-btn:hover {
    background: linear-gradient(180deg, #1a3a57 0%, #132a40 100%);
}

.fang-app-container.fang-theme-cyberpunk .action-btn.active {
    background: linear-gradient(180deg, #33d9ff 0%, #1497bc 100%);
    border-color: #ff2e88;
    color: #041019;
}

.fang-app-container.fang-theme-cyberpunk .fang-lock-btn {
    background: linear-gradient(180deg, #ff2e88 0%, #b61f63 100%);
    border-color: #33d9ff;
    color: #f7fdff;
}

.fang-app-container.fang-theme-cyberpunk .fang-lock-btn.active {
    background: linear-gradient(180deg, #33d9ff 0%, #1497bc 100%);
    color: #041019;
}

.fang-app-container.fang-theme-cyberpunk .canvas-container {
    background-color: #040911;
    background-image:
        linear-gradient(transparent 24px, rgba(51, 217, 255, 0.06) 25px, transparent 26px),
        linear-gradient(90deg, transparent 24px, rgba(255, 46, 136, 0.045) 25px, transparent 26px),
        radial-gradient(circle at 18% 24%, rgba(255, 46, 136, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 84% 76%, rgba(51, 217, 255, 0.13) 0%, transparent 46%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
    background-size: 25px 25px, 25px 25px, cover, cover, cover;
    box-shadow: inset 0 0 70px rgba(3, 8, 15, 0.95);
}

.fang-app-container.fang-theme-cyberpunk .narrative-card,
.fang-app-container.fang-theme-cyberpunk .quest-spotlight-card,
.fang-app-container.fang-theme-cyberpunk .edge-spotlight-card {
    background: linear-gradient(140deg, #0b1623 0%, #0b1724 55%, #11243a 100%);
    border-color: #33d9ff;
    box-shadow: 0 0 35px rgba(51, 217, 255, 0.16), 0 18px 45px rgba(0, 0, 0, 0.45);
}

.fang-app-container.fang-theme-cyberpunk #narrative-title,
.fang-app-container.fang-theme-cyberpunk #edge-narrative-title,
.fang-app-container.fang-theme-cyberpunk #quest-spotlight-title {
    color: #7feaff;
}

/* GM-only elements: default-hidden, shown only when the body is explicitly marked
   as role-gm in main.js Hooks.once("ready"). This prevents a brief flash of
   GM-only controls during the early render before the ready hook fires, and also
   protects against the role class being unset entirely (e.g. if the hook fails). */
.fang-app-container .gm-only {
    display: none !important;
}

body.role-gm .fang-app-container .gm-only {
    display: revert !important;
}

/* A GM-only sidebar panel is still a panel: it shows only while it is the active one.
   The rule above reverts display with !important, which beats `.tab-content {display:none}`
   on specificity alone — so every GM-only panel rendered at once, stacked on top of each
   other. This needs to be more specific than the revert to put the panels back in charge
   of their own visibility. */
body.role-gm .fang-app-container .tab-content.gm-only:not(.active) {
    display: none !important;
}

/* Sidebar Styling */
.fang-app-container .sidebar {
    width: 76px;
    background-color: var(--fang-nav-bg);
    border-right: 2px solid var(--fang-primary-red);
    box-shadow: var(--fang-shadow-sm);
    display: flex;
    flex-direction: column;
    z-index: 1600;
    overflow: visible;
    position: relative;
}

.fang-app-container .sidebar-header {
    background-color: var(--fang-primary-red);
    color: var(--fang-header-text);
    padding: 15px 20px;
    border-bottom: 2px solid var(--fang-accent-gold);
}

.fang-app-container .sidebar-header h1,
.fang-app-container .sidebar-header p {
    display: none;
}

/* ---------------------------------------------------------------------------
   Form controls follow the theme.

   Foundry paints its own checkboxes (appearance: none), so accent-color alone does
   nothing — the tick came out in Foundry's orange (--checkbox-checked-color: #ee9b3a)
   no matter which FANG theme was on, which looked plain wrong next to cyan cyberpunk.
   Setting Foundry's own variable is the polite way in: it keeps FANG out of the
   checkbox's internals and keeps working if that markup changes. accent-color stays
   for range sliders and any control Foundry leaves native.
   --------------------------------------------------------------------------- */
/* Set on the input itself, not on a container: Foundry declares this variable directly
   on input[type="checkbox"], so a value inherited from an ancestor never reaches it. */
.fang-app-container input[type="checkbox"],
.fang-app-container input[type="radio"],
.fang-dialog input[type="checkbox"],
.fang-dialog input[type="radio"] {
    --checkbox-checked-color: var(--fang-primary-red);
    accent-color: var(--fang-primary-red);
}

.fang-app-container input[type="range"],
.fang-dialog input[type="range"] {
    accent-color: var(--fang-primary-red);
}

/* ---------------------------------------------------------------------------
   Sidebar building blocks
   These replace the inline styles that were copy-pasted onto every toggle row,
   hint paragraph and full-width button. One definition, one place to change.
   --------------------------------------------------------------------------- */

/* A label with its switch on the right. */
.fang-app-container .fang-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
}

.fang-app-container .fang-toggle-row label {
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}

.fang-app-container .fang-toggle-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
    flex: none;
}

/* Explanatory text under a control. Quiet on purpose. */
.fang-app-container .fang-hint {
    font-size: 0.8em;
    line-height: 1.35;
    opacity: 0.75;
    margin: 4px 0 6px;
}

.fang-app-container .fang-hint-warn {
    color: var(--fang-accent-gold);
    opacity: 1;
}

.fang-app-container .fang-hint-warn[hidden] {
    display: none;
}

.fang-app-container .fang-range-row {
    margin-bottom: 6px;
}

.fang-app-container .fang-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    opacity: 0.75;
    margin-bottom: 2px;
}

.fang-app-container .fang-range-row input[type="range"] {
    width: 100%;
    height: 6px;
    margin: 5px 0;
}

.fang-app-container .fang-btn-block {
    width: 100%;
}

.fang-app-container .fang-btn-accent {
    border-color: var(--fang-accent-gold);
}

/* The pin note inside a token tooltip: a footnote to the lore, not a headline. */
.fang-tooltip-pin {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid rgba(var(--fang-accent-gold-rgb), 0.3);
    font-size: 0.85em;
    opacity: 0.85;
}

.fang-tooltip-pin i {
    color: var(--fang-accent-gold);
    margin-right: 5px;
}

/* ---------------------------------------------------------------------------
   Quest picker — floating panel when a character has more than one quest.
   Its entire appearance used to live in a style="" block in the template.
   --------------------------------------------------------------------------- */
#fang-quest-picker {
    position: absolute;
    z-index: 1000;
    min-width: 220px;
    max-width: 300px;
    background: var(--fang-card-bg);
    border: 1px solid var(--fang-border-color);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 10px rgba(var(--fang-accent-gold-rgb), 0.12);
    font-family: var(--fang-font-main);
    overflow: hidden;
}

#fang-quest-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--fang-primary-red);
    color: var(--fang-header-text);
    border-bottom: 2px solid var(--fang-accent-gold);
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#fang-quest-picker-header i {
    color: var(--fang-accent-gold);
}

#fang-quest-picker-list {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

/* ---------------------------------------------------------------------------
   Empty state — what a manager shows before anything exists.
   The faction and location dialogs used to render an empty box: no list, no
   explanation, just a void with an Add button under it. If there is nothing yet,
   that is exactly the moment to say what the thing is for.
   --------------------------------------------------------------------------- */
.fang-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 26px 18px;
}

/* Inside a manager list, the empty state *is* the content — it fills the reserved
   height and centres, instead of leaving a blank box with a message tacked underneath. */
.fang-dialog #fang-factions-list.is-empty,
.fang-dialog #fang-zones-list.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fang-dialog .is-empty .fang-empty-state {
    height: 100%;
}

.fang-empty-state i {
    font-size: 1.7rem;
    color: var(--fang-accent-gold);
    opacity: 0.55;
    margin-bottom: 2px;
}

.fang-empty-state__title {
    margin: 0;
    font-weight: 700;
    color: var(--fang-text-color);
}

.fang-empty-state__hint {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.4;
    opacity: 0.75;
    max-width: 42ch;
}

/* ---------------------------------------------------------------------------
   Segmented control — for picking exactly one of N modes.
   Grouping used to be two separate buttons, which said nothing about the modes
   being mutually exclusive or which one was active. A radio group does both.
   --------------------------------------------------------------------------- */
.fang-app-container .fang-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 3px;
    background: var(--fang-nav-bg);
    border: 1px solid var(--fang-border-color);
    border-radius: 12px;
}

.fang-app-container .fang-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--fang-text-color);
    font-family: var(--fang-font-main);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.7;
    transition: background 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

.fang-app-container .fang-segment i {
    font-size: 0.95em;
}

.fang-app-container .fang-segment:hover:not(.active) {
    opacity: 1;
    background: rgba(var(--fang-accent-gold-rgb), 0.12);
}

.fang-app-container .fang-segment.active {
    background: var(--fang-primary-red);
    color: #fff;
    opacity: 1;
    box-shadow: var(--fang-shadow-sm);
}

.fang-app-container .fang-segment:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.fang-app-container .fang-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    align-items: stretch;
}

.fang-app-container .fang-rail-btn {
    width: 52px;
    height: 52px;
    border: 1px solid var(--fang-border-color);
    border-radius: 14px;
    background: var(--fang-card-bg);
    color: var(--fang-primary-red);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.fang-app-container .fang-rail-btn:hover,
.fang-app-container .fang-rail-btn.active {
    transform: translateX(3px);
    border-color: var(--fang-accent-gold);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 14px rgba(var(--fang-accent-gold-rgb), 0.25);
}

.fang-app-container .sidebar-header h1 {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fang-header-text);
    border: none;
}

/* --- Edit Lock Banner --- */
.fang-app-container .lock-banner {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e9e4d9;
    border-bottom: 1px solid var(--fang-border-color);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.fang-app-container .fang-sidebar-status .lock-banner {
    border-bottom: 2px solid var(--fang-border-color);
    flex-direction: column;
    gap: 6px;
    padding: 8px 6px;
    font-size: 0.72rem;
    text-align: center;
}

.fang-app-container .fang-sidebar-status .lock-info {
    justify-content: center;
    gap: 4px;
}

.fang-app-container .fang-sidebar-status #lock-text,
.fang-app-container .fang-sidebar-status #lock-btn-text {
    display: none;
}

.fang-app-container .fang-sidebar-status .fang-lock-btn {
    min-width: 44px;
    justify-content: center;
    padding: 7px;
}

.fang-app-container .lock-banner.no-editor {
    border-left: 4px solid #aaa;
}

/* Collaborative mode: no lock to hold, just a note on who else is in here.
   Deliberately calm — this is the normal state, not a warning. */
.fang-app-container .lock-banner.collaborative {
    background: rgba(var(--fang-accent-gold-rgb), 0.08);
    border-left: 4px solid var(--fang-accent-gold);
}

.fang-app-container .lock-banner.collaborative .lock-info i {
    color: var(--fang-accent-gold);
}

.fang-app-container .lock-banner.i-am-editor {
    background: rgba(var(--fang-primary-red-rgb), 0.05);
    border-left: 4px solid var(--fang-primary-red);
}

.fang-app-container .lock-banner.someone-else-editing {
    background: #eee;
    border-left: 4px solid var(--fang-accent-gold);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        border-left-color: var(--fang-accent-gold);
    }

    50% {
        border-left-color: #f3e5ab;
    }

    100% {
        border-left-color: var(--fang-accent-gold);
    }
}

.fang-app-container .lock-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #444;
}

.fang-lock-btn {
    background: var(--fang-primary-red);
    color: white;
    border: 1px solid var(--fang-accent-gold);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--fang-font-main);
    transition: background 0.2s;
}

.fang-lock-btn:hover {
    background: #a00;
}

.fang-lock-btn.active {
    background: var(--fang-accent-gold);
    color: var(--fang-primary-red);
}

/* Disabled UI State */
.fang-app-container .sidebar-locked .control-group {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(0.5);
    position: relative;
}

.fang-app-container .sidebar-locked .control-group::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

/* --- Canvas Lock Indicator --- */
.fang-app-container .canvas-lock-indicator {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(253, 251, 247, 0.9);
    padding: 8px 20px;
    border-radius: 30px;
    border: 2px solid var(--fang-accent-gold);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--fang-primary-red);
    pointer-events: none;
    animation: slide-down 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes slide-down {
    from {
        transform: translate(-50%, -100%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.fang-app-container .canvas-lock-indicator i {
    font-size: 1.2rem;
    color: var(--fang-accent-gold);
}

.fang-app-container .canvas-lock-indicator.hidden,
.fang-app-container .hidden {
    display: none !important;
}

.fang-app-container .fang-canvas-edit-tools {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 930;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(253, 251, 247, 0.92);
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.24);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(3px);
}

.fang-app-container .fang-canvas-tool-btn {
    min-height: 40px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.3);
    border-radius: 10px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fffaf0;
    color: var(--fang-primary-red);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(var(--fang-primary-red-rgb), 0.14);
}

.fang-app-container .fang-canvas-tool-btn:hover,
.fang-app-container .fang-canvas-tool-btn.active {
    background: var(--fang-primary-red);
    color: #fff;
    border-color: var(--fang-accent-gold);
    transform: translateY(-1px);
}

.fang-app-container .fang-canvas-tool-btn.awaiting-target {
    background: #24538f;
    color: #fff;
    border-color: #9fc4ff;
    box-shadow: 0 0 0 3px rgba(36, 83, 143, 0.18), 0 8px 18px rgba(36, 83, 143, 0.25);
}

.fang-app-container .fang-canvas-edit-status {
    grid-column: 1 / -1;
    max-width: 420px;
    padding: 6px 9px;
    border-radius: 9px;
    background: rgba(20, 28, 38, 0.9);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.fang-quest-section-title,
.fang-quest-add-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5f4a21;
    font-family: var(--fang-font-header);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.fang-quest-section-title {
    margin-bottom: 8px;
}

.fang-quest-manager ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.fang-quest-manager-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--fang-border-color);
    border-radius: 10px;
    background: var(--fang-bg-color);
    cursor: pointer;
}

.fang-quest-manager-row:hover {
    border-color: var(--fang-accent-gold);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.fang-quest-title {
    font-weight: 800;
    color: #2b221a;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fang-quest-manager-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

.fang-quest-status {
    width: auto;
    min-width: 108px;
    height: 30px;
    padding: 2px 26px 2px 8px;
    border: 1px solid var(--fang-border-color);
    border-radius: 8px;
    background-color: #fffaf0;
    color: #2b221a;
    font-size: 0.78rem;
    font-weight: 800;
}

.fang-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--fang-border-color);
    border-radius: 8px;
    background: #fffaf0;
    color: #6f5a2a;
    cursor: pointer;
}

.fang-icon-btn:hover {
    border-color: var(--fang-accent-gold);
    transform: translateY(-1px);
}

.fang-icon-btn.danger {
    color: var(--fang-primary-red);
    background: rgba(var(--fang-primary-red-rgb), 0.08);
}

.fang-quest-manager-empty {
    padding: 14px;
    border: 1px dashed var(--fang-border-color);
    border-radius: 12px;
    color: #666;
    background: rgba(255, 255, 255, 0.45);
}

.fang-quest-visibility {
    align-self: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.fang-quest-visibility.is-hidden {
    background: rgba(var(--fang-primary-red-rgb), 0.1);
    color: var(--fang-primary-red);
}

.fang-quest-add {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--fang-border-color);
}

.fang-quest-drop-zone {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon hint";
    align-items: center;
    gap: 2px 10px;
    min-height: 70px;
    padding: 12px 14px;
    border: 2px dashed var(--fang-accent-gold);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--fang-accent-gold-rgb), 0.12), rgba(var(--fang-primary-red-rgb), 0.04));
    color: var(--fang-primary-red);
}

.fang-quest-drop-zone i {
    grid-area: icon;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(var(--fang-primary-red-rgb), 0.1);
    font-size: 1.25rem;
}

.fang-quest-drop-zone strong {
    grid-area: title;
    font-weight: 900;
}

.fang-quest-drop-zone span {
    grid-area: hint;
    color: rgba(43, 34, 26, 0.74);
    font-size: 0.86rem;
    line-height: 1.25;
}

.fang-quest-drop-zone.drag-over {
    background: rgba(var(--fang-accent-gold-rgb), 0.2);
    box-shadow: 0 0 0 3px rgba(var(--fang-accent-gold-rgb), 0.16);
}

.fang-quest-add-picker {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.46);
}

.fang-quest-add-picker > label:first-child {
    margin: 0;
    color: var(--fang-text-color);
    font-weight: 800;
}

.fang-quest-add-picker .action-btn {
    min-height: 40px;
}

.fang-app-container .fang-quest-canvas-panel {
    position: absolute;
    inset: 0;
    z-index: 1750;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
}

.fang-app-container .fang-quest-canvas-card {
    position: relative;
    width: min(760px, 92%);
    min-width: 360px;
    max-height: 85%;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top left, rgba(var(--fang-accent-gold-rgb), 0.12), transparent 34%),
        #fdfbf7;
    border: 2px solid var(--fang-accent-gold);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--fang-accent-gold-rgb), 0.2);
    animation: fangCinemaEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 760px) {
    .fang-app-container .fang-quest-canvas-card {
        width: 94%;
        min-width: 0;
    }
}

.fang-app-container .fang-quest-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 58px 10px 24px;
    background: transparent;
    color: #3a2a12;
    border-bottom: 2px solid var(--fang-accent-gold);
}

.fang-app-container .fang-quest-canvas-header h3 {
    margin: 0;
    color: inherit;
    border: 0;
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fang-app-container .fang-quest-canvas-header h3 i {
    color: var(--fang-accent-gold);
}

.fang-app-container .fang-quest-canvas-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #888;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}

.fang-app-container .fang-quest-canvas-close:hover {
    color: var(--fang-primary-red);
    background: rgba(var(--fang-primary-red-rgb), 0.06);
}

.fang-app-container .fang-quest-canvas-card .fang-quest-manager {
    overflow: auto;
    padding: 20px 24px 24px;
}

.fang-app-container.fang-theme-cyberpunk .fang-quest-canvas-card {
    background: rgba(3, 15, 26, 0.95);
    border-color: #33d9ff;
    box-shadow: 0 0 0 1px rgba(51, 217, 255, 0.35), 0 22px 50px rgba(0, 0, 0, 0.45);
}

.fang-app-container.fang-theme-cyberpunk .fang-quest-canvas-header {
    background: transparent;
    color: #33d9ff;
    border-bottom-color: #33d9ff;
}

/* Add a gold accent line */
.fang-app-container .sidebar-header h1::before {
    content: "";
    display: block;
    width: 12px;
    height: 24px;
    background-color: var(--fang-accent-gold);
    border-radius: 4px;
}

.fang-app-container .sidebar-header p {
    font-size: 0.85rem;
    color: #ffd;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 0;
}

/* Tabs Navigation */
@keyframes fangPulseGlow {
    0% {
        text-shadow: 0 0 5px rgba(var(--fang-accent-gold-rgb), 0.5);
    }

    50% {
        text-shadow: 0 0 10px rgba(var(--fang-accent-gold-rgb), 0.9), 0 0 20px rgba(var(--fang-accent-gold-rgb), 0.5);
    }

    100% {
        text-shadow: 0 0 5px rgba(var(--fang-accent-gold-rgb), 0.5);
    }
}

.fang-app-container .tabs-container {
    position: absolute;
    left: 88px;
    top: 12px;
    width: 340px;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    display: none;
    border: 1px solid var(--fang-border-color);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    background: var(--fang-card-bg);
    z-index: 1700;
}

.fang-app-container.sidebar-panel-open .tabs-container {
    display: block;
}

.fang-app-container .tab-content {
    display: none;
    animation: fangFadeIn 0.3s ease;
}

.fang-app-container .tab-content.active {
    display: block;
}

@keyframes fangFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.fang-app-container .control-group {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    background-color: var(--fang-card-bg);
    border-bottom: 1px solid var(--fang-border-color);
    gap: 12px;
}

.fang-app-container .control-group h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fang-primary-red);
    text-transform: uppercase;
    margin-bottom: 4px;
    border: none;
}

/* Inputs & Selects */
.fang-app-container input[type="text"],
.fang-app-container input[type="number"],
.fang-app-container input[type="date"],
.fang-app-container select {
    width: 100%;
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid var(--fang-border-color);
    border-radius: 2px;
    color: var(--fang-text-color);
    font-family: var(--fang-font-main);
    font-size: 0.95rem;
    transition: all 0.2s;
    outline: none;
    height: auto;
}

.fang-app-container input[type="text"]:focus,
.fang-app-container input[type="number"]:focus,
.fang-app-container input[type="date"]:focus,
.fang-app-container select:focus {
    border-color: var(--fang-accent-gold);
    box-shadow: 0 0 0 2px rgba(var(--fang-accent-gold-rgb), 0.2);
}

.fang-app-container .input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.fang-app-container .input-row input {
    flex: 1;
}

.fang-app-container .input-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Buttons */
.fang-app-container .btn {
    padding: 10px 15px;
    border: none;
    border-radius: 2px;
    font-family: var(--fang-font-main);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--fang-shadow-sm);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    line-height: normal;
}

.fang-app-container .btn:active {
    transform: translateY(2px);
    border-bottom-width: 0px;
    margin-top: 2px;
}

/* Filled Button */
.fang-app-container .primary-btn {
    background-color: var(--fang-primary-red);
    color: var(--fang-header-text);
}

.fang-app-container .primary-btn:hover {
    background-color: #600000;
    box-shadow: none;
}

/* Base Buttons */
.fang-app-container .secondary-btn {
    background-color: var(--fang-nav-bg);
    color: var(--fang-text-color);
    border: 1px solid var(--fang-border-color);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: 4px;
}

.fang-app-container .secondary-btn:hover {
    background-color: #ebe5dc;
    color: var(--fang-primary-red);
    box-shadow: none;
}

.fang-app-container .button-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.fang-app-container .actions-group .button-row {
    display: flex;
    gap: 4px;
}

.fang-app-container .actions-group .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 8px 10px;
    height: 36px;
    white-space: nowrap;
}

/* Elevated Action Buttons */
.fang-app-container .action-btn {
    flex: 1;
    background-color: var(--fang-nav-bg);
    color: var(--fang-text-color);
    border: 1px solid var(--fang-border-color);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.fang-app-container .action-btn:hover {
    background-color: #ebe5dc;
    box-shadow: none;
}

.fang-app-container .action-btn.active {
    background-color: #f1dfba;
    border-color: var(--fang-accent-gold);
    color: var(--fang-primary-red);
}

.fang-app-container .file-label {
    margin: 0;
}

/* Canvas Area */
.fang-app-container .canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: #fdfbf7;
    /* Soft antique paper texture */
    background-image:
        radial-gradient(at 0% 0%, rgba(var(--fang-accent-gold-rgb), 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(var(--fang-primary-red-rgb), 0.02) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(0, 0, 0, 0.01) 0px, transparent 100%);
    box-shadow: inset 0 0 50px rgba(220, 214, 204, 0.3);
}

.fang-app-container #graphCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    display: block;
    touch-action: none;
    user-select: none;
    /* Fix inline-block baseline descender gap causing scrollbars */
}

.fang-app-container #graphCanvas:active {
    cursor: grabbing;
}

.fang-app-container .fang-search-floating {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 901;
    background: rgba(253, 251, 247, 0.9);
    border: 1px solid rgba(var(--fang-accent-gold-rgb), 0.45);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    padding: 6px 8px;
}

.fang-app-container .fang-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fang-app-container .fang-search-row > i {
    color: #7a2b2b;
    font-size: 0.9rem;
}

.fang-app-container #fangSearchInput {
    width: clamp(180px, 24vw, 320px);
    margin: 0;
    padding: 6px 8px;
    height: 32px;
    background: rgba(255, 255, 255, 0.92);
}

.fang-app-container .fang-search-isolate-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #2e2b29;
    user-select: none;
    white-space: nowrap;
    cursor: pointer;
}

.fang-app-container .fang-search-isolate-wrap input {
    width: auto;
    margin: 0;
}

.fang-app-container #fangSearchClear {
    flex: 0 0 auto;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.fang-monitor .fang-app-container .fang-search-floating {
    display: none !important;
}

@media (max-width: 980px) {
    .fang-app-container .fang-search-floating {
        left: 14px;
        right: 14px;
    }

    .fang-app-container #fangSearchInput {
        width: 100%;
        min-width: 0;
    }

    .fang-app-container .fang-search-isolate-wrap span {
        display: none;
    }
}

/* Custom Scrollbar */
.fang-app-container .sidebar::-webkit-scrollbar {
    width: 8px;
}

.fang-app-container .sidebar::-webkit-scrollbar-track {
    background: var(--fang-nav-bg);
}

.fang-app-container .sidebar::-webkit-scrollbar-thumb {
    background-color: var(--fang-border-color);
    border-radius: 4px;
}

.fang-app-container .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

/* Fullscreen Override for Players */
body #fang-app.fang-app-window.fang-fullscreen-player {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 2147483647 !important;
    /* Maximum possible z-index to cover Monk's Display */
    overflow: hidden !important;
}

body #fang-app.fang-app-window.fang-fullscreen-player .sidebar {
    display: none !important;
}

/* Hide the Foundry Window Header when in fullscreen mode */
body #fang-app.fang-app-window.fang-fullscreen-player .window-header {
    display: none !important;
}

body #fang-app.fang-app-window.fang-fullscreen-player .window-content {
    background: var(--fang-bg-color) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

body #fang-app.fang-app-window.fang-fullscreen-player .fang-app-container {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* === MONITOR FULLSCREEN: Body-Level Resets === */
body.fang-monitor {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Hyper-specific override for Monitor Fullscreen */
html body.fang-monitor div#fang-app.fang-app-window.fang-fullscreen-player {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 200000 !important;
    display: flex !important;
    flex-direction: column;
    border: none !important;
    box-shadow: none !important;
}

/* Force window-content to fill in monitor mode */
html body.fang-monitor div#fang-app .window-content {
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 1 !important;
}

body.fang-monitor #ui-bottom,
body.fang-monitor #hotbar,
body.fang-monitor #players,
body.fang-monitor #ui-top,
body.fang-monitor #ui-left,
body.fang-monitor #ui-right,
body.fang-monitor #navigation,
body.fang-monitor #controls,
body.fang-monitor #sidebar {
    display: none !important;
}

body.fang-monitor #fang-app.fang-app-window {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    z-index: 200000 !important;
    display: flex !important;
    border: none !important;
    box-shadow: none !important;
}

/* === MONITOR: Spotlight Readability (TV distance) === */
body.fang-monitor .fang-app-container .narrative-card {
    width: 96%;
    max-width: 1200px;
    max-height: 92%;
    padding: 46px;
    gap: 46px;
}

body.fang-monitor .fang-app-container .narrative-left-side {
    width: 300px;
    gap: 18px;
}

body.fang-monitor .fang-app-container .narrative-portrait-container {
    width: 230px;
    height: 230px;
}

body.fang-monitor .fang-app-container .narrative-content h2 {
    font-size: 3.1rem;
    margin-bottom: 18px;
}

body.fang-monitor #narrative-subtitle {
    font-size: 1.35rem;
    margin-bottom: 14px;
}

body.fang-monitor #narrative-text,
body.fang-monitor #edge-narrative-text,
body.fang-monitor #quest-spotlight-text {
    font-size: 1.55rem;
    line-height: 1.85;
}

body.fang-monitor .fang-app-container #narrative-quests-container {
    padding-top: 18px;
}

body.fang-monitor .fang-app-container .narrative-quests-header {
    font-size: 1.35rem;
    margin-bottom: 14px;
}

body.fang-monitor .fang-app-container .narrative-quest-item {
    font-size: 1.1rem;
    padding: 10px 12px;
    margin-bottom: 8px;
}

body.fang-monitor .fang-app-container .narrative-close {
    top: 22px;
    right: 22px;
    font-size: 2rem;
}

/* Custom D&D Dialog Styling */
.fang-dialog.window-app {
    font-family: var(--fang-font-main);
    border: 1px solid var(--fang-accent-gold);
    border-radius: 4px;
}

.fang-dialog,
.fang-dialog * {
    box-sizing: border-box;
}

.fang-dialog .window-header {
    background-color: var(--fang-primary-red);
    color: var(--fang-header-text);
    border-bottom: 2px solid var(--fang-accent-gold);
    border-radius: 4px 4px 0 0;
}

.fang-dialog .window-content {
    background: var(--fang-bg-color);
    color: var(--fang-text-color);
    padding: 0;
    font-size: 0.95rem;
    word-break: break-word;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    max-height: 75vh;
}

.fang-dialog .dialog-content {
    padding: 15px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.fang-dialog .dialog-content .btn,
.fang-dialog .dialog-content button,
.fang-dialog .dialog-content input,
.fang-dialog .dialog-content select,
.fang-dialog .dialog-content textarea {
    max-width: 100%;
}

.fang-dialog .dialog-content .btn {
    display: block;
    width: 100%;
}

.fang-dialog hr {
    border: 0;
    border-top: 1px solid var(--fang-border-color);
    margin: 12px 0;
}

.fang-dialog .fang-dialog-section {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--fang-border-color);
}

.fang-dialog .fang-drop-zone {
    border: 2px dashed rgba(0, 0, 0, 0.35);
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background: rgba(255, 255, 255, 0.6);
}

.fang-dialog .fang-drop-zone:hover {
    border-color: var(--fang-accent-gold);
}

.fang-dialog .fang-drop-zone.has-link {
    border-color: var(--fang-accent-gold);
}

.fang-dialog .fang-drop-zone-add {
    padding: 8px;
}

.fang-dialog .fang-drop-remove {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 2px 6px;
    width: auto;
}

.fang-dialog .fang-quest-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--fang-border-color);
    border-radius: 4px;
    margin-bottom: 5px;
}

.fang-dialog .dialog-buttons {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 8px 15px;
    border-top: 1px solid var(--fang-border-color);
    background: var(--fang-bg-color);
}


/* One modern rule for every text control in a dialog. textarea was missing before,
   so it fell through to Foundry's default — dark background, monospace font — which
   is what made the description fields look like code editors next to the tidy name
   inputs. All three now share the same light, rounded, app-font styling. */
.fang-dialog input[type="text"],
.fang-dialog input[type="number"],
.fang-dialog input[type="date"],
.fang-dialog select,
.fang-dialog textarea {
    width: 100%;
    padding: 9px 12px;
    background-color: #fff;
    border: 1px solid var(--fang-border-color);
    border-radius: 9px;
    color: var(--fang-text-color);
    font-family: var(--fang-font-main);
    font-size: 0.92rem;
    line-height: 1.4;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: auto;
}

.fang-dialog textarea {
    resize: vertical;
    min-height: 46px;
}

.fang-dialog input[type="text"]::placeholder,
.fang-dialog input[type="number"]::placeholder,
.fang-dialog input[type="date"]::placeholder,
.fang-dialog textarea::placeholder {
    color: rgba(43, 34, 26, 0.4);
}

.fang-dialog input[type="text"]:focus,
.fang-dialog input[type="number"]:focus,
.fang-dialog input[type="date"]:focus,
.fang-dialog select:focus,
.fang-dialog textarea:focus {
    border-color: var(--fang-accent-gold);
    box-shadow: 0 0 0 3px rgba(var(--fang-accent-gold-rgb), 0.22);
}

/* Native dropdown list contrast fallback */
.fang-dialog select option,
.fang-dialog select optgroup {
    background: #f4f7fb;
    color: #0f1720;
}

.fang-dialog .dialog-buttons button {
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 0.88rem !important;
    line-height: 34px !important;
    flex: 1;
    background-color: var(--fang-primary-red);
    color: var(--fang-header-text);
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    font-family: var(--fang-font-main);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.fang-dialog .dialog-buttons button:hover {
    background-color: #600000;
    box-shadow: none;
}

.fang-dialog .dialog-buttons button.cancel {
    background-color: var(--fang-nav-bg);
    color: var(--fang-primary-red);
    border: 1px solid var(--fang-border-color);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.fang-dialog .dialog-buttons button.cancel:hover {
    background-color: #ebe5dc;
}

/* ===========================================================================
   In-window editor panel — faction/location management opens here instead of a
   separate Foundry window. A large modern card centred over the graph.
   =========================================================================== */
.fang-editor-overlay {
    position: absolute;
    inset: 0;
    /* Above the FANG-internal layers — canvas tools (~930), legend, and the narrative
       overlays (1000). This is a modal management panel; it must cover all of them. */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.fang-editor-overlay.hidden {
    display: none;
}

/* On a tablet the window is already clamped to the screen, so every pixel of padding here
   comes straight off the panel. Give the editor the room instead. */
@media (max-height: 780px), (max-width: 860px) {
    .fang-editor-overlay {
        padding: 8px;
    }

    .fang-editor-panel {
        border-radius: 10px;
    }

    .fang-editor-header {
        padding: 10px 14px;
    }

    .fang-editor-body {
        padding: 12px 14px;
    }

    .fang-editor-footer {
        padding: 10px 14px;
    }
}

.fang-editor-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 6, 0.5);
    backdrop-filter: blur(3px);
}

.fang-editor-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: 100%;
    background: var(--fang-bg-color);
    border: 1px solid var(--fang-border-color);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
    animation: fangEditorIn 0.18s ease;
}

@keyframes fangEditorIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.fang-editor-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--fang-primary-red), rgba(var(--fang-primary-red-rgb), 0.82));
    color: var(--fang-header-text);
    border-bottom: 2px solid var(--fang-accent-gold);
}

.fang-editor-header h2 {
    margin: 0;
    font-family: var(--fang-font-header);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fang-header-text);
    border: none;
}

.fang-editor-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--fang-header-text);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.fang-editor-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.fang-editor-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px;
}

.fang-editor-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--fang-border-color);
    background: var(--fang-nav-bg);
}

/* Left group holds destructive actions; right group holds Save/Cancel. When there is
   no left button the right group still sits at the far right (space-between + empty
   left group). */
.fang-editor-footer-left,
.fang-editor-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fang-editor-btn.danger-btn {
    background: var(--fang-primary-red);
    border-color: var(--fang-primary-red);
    color: #fff;
    opacity: 0.9;
}

.fang-editor-btn.danger-btn:hover {
    opacity: 1;
}

.fang-editor-btn {
    min-width: 130px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-weight: 700;
}

.fang-editor-btn.primary {
    background: var(--fang-primary-red);
    border-color: var(--fang-primary-red);
    color: #fff;
}

.fang-editor-lead {
    margin: 0 0 14px;
    color: rgba(43, 34, 26, 0.72);
    font-size: 0.92rem;
    line-height: 1.4;
}

/* The manager was written for a full-height dialog; inside the panel body it just
   flows naturally. Compound selector so these beat the .fang-dialog rules the body
   also carries (it has both classes). */
.fang-editor-body.fang-dialog .fang-faction-manager {
    height: auto;
    gap: 0;
}

.fang-editor-body.fang-dialog #fang-factions-list,
.fang-editor-body.fang-dialog #fang-zones-list {
    min-height: 0;
    max-height: none;
    overflow: visible;
    border: none;
    padding: 0;
    background: none;
    margin-bottom: 12px;
}

.fang-dialog .fang-faction-manager {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 12px;
}

.fang-dialog .fang-faction-manager__header {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.16);
    border-left: 4px solid var(--fang-primary-red);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--fang-primary-red-rgb), 0.08), rgba(var(--fang-accent-gold-rgb), 0.08));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.fang-dialog .fang-faction-manager__header strong {
    display: block;
    margin-bottom: 3px;
    color: var(--fang-primary-red);
    font-family: var(--fang-font-header);
    font-size: 1.02rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fang-dialog .fang-faction-manager__header p {
    margin: 0;
    color: rgba(43, 34, 26, 0.74);
    font-size: 0.9rem;
    line-height: 1.35;
}

.fang-dialog .fang-faction-manager__toggles {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.fang-dialog .fang-toggle-card {
    display: grid;
    grid-template-columns: auto 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.18);
    border-radius: 12px;
    background: rgba(255, 252, 244, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44), 0 4px 14px rgba(0, 0, 0, 0.06);
    color: var(--fang-text-color);
    font-weight: 700;
    cursor: pointer;
}

.fang-dialog .fang-toggle-card input {
    margin: 0;
}

.fang-dialog .fang-toggle-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(var(--fang-primary-red-rgb), 0.09);
    color: var(--fang-primary-red);
}

.fang-dialog #fang-factions-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10px;
    min-height: 300px;
    max-height: none;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.14);
    border-radius: 14px;
    padding: 10px;
    background: rgba(255, 252, 244, 0.58);
}

.fang-dialog .fang-faction-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 9px;
    padding: 9px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.fang-dialog .fang-faction-item:last-child {
    margin-bottom: 0;
}

.fang-dialog .fang-faction-main-row {
    display: flex;
    gap: 7px;
    align-items: center;
}

.fang-dialog .fang-faction-item .faction-color {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.22);
    border-radius: 8px;
    cursor: pointer;
}

.fang-dialog .fang-faction-item .faction-name {
    flex: 1;
    min-height: 36px;
    font-weight: 700;
}

.fang-dialog .fang-faction-item .faction-description {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 10px;
    resize: vertical;
}

.fang-dialog .fang-faction-visibility-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 0.82rem;
}

/* Member count per zone. A zone is only drawn once it has members, so an empty one
   needs to say so — otherwise a freshly created zone looks broken. */
.fang-dialog .fang-zone-members {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #5a4a2f;
}

.fang-dialog .fang-zone-members > i {
    margin-top: 2px;
    color: var(--fang-accent-gold);
}

.fang-dialog .fang-zone-members.is-empty {
    color: #7a6a55;
    font-style: italic;
}

.fang-dialog .fang-zone-members.is-empty > i {
    color: #a8956f;
}

.fang-dialog .fang-faction-visibility-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.12);
    border-radius: 9px;
    background: rgba(255, 252, 244, 0.72);
    font-weight: 700;
}

.fang-dialog .fang-faction-actions-row {
    display: flex;
    justify-content: flex-end;
}

.fang-dialog .faction-icon-preview {
    flex: 0 0 34px;
    height: 34px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.18);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.fang-dialog .fang-faction-icon-btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
}

.fang-dialog .fang-faction-delete-btn {
    width: auto;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.45);
    border-radius: 9px;
    background: rgba(var(--fang-primary-red-rgb), 0.1);
    color: var(--fang-primary-red);
    font-weight: 800;
}

.fang-dialog .fang-faction-delete-btn:hover {
    background: var(--fang-primary-red);
    color: #fff;
}

.fang-dialog .fang-add-faction-btn {
    flex: 0 0 auto;
    width: 100%;
    min-height: 42px;
    margin-bottom: 0;
    border: 1px solid var(--fang-accent-gold);
    border-radius: 12px;
    background: rgba(var(--fang-primary-red-rgb), 0.06);
    color: var(--fang-primary-red);
    font-weight: 800;
}

:root.fang-theme-cyberpunk .fang-dialog input[type="text"],
:root.fang-theme-cyberpunk .fang-dialog input[type="number"],
:root.fang-theme-cyberpunk .fang-dialog input[type="date"],
:root.fang-theme-cyberpunk .fang-dialog select,
:root.fang-theme-cyberpunk .fang-dialog textarea,
body.fang-theme-cyberpunk .fang-dialog input[type="text"],
body.fang-theme-cyberpunk .fang-dialog input[type="number"],
body.fang-theme-cyberpunk .fang-dialog input[type="date"],
body.fang-theme-cyberpunk .fang-dialog select,
body.fang-theme-cyberpunk .fang-dialog textarea {
    background: #0c1b2a;
    color: #d9ecff;
    border-color: #27506f;
}

/* Placeholder on the dark cyberpunk input surface — the default parchment tone is
   invisible there. */
:root.fang-theme-cyberpunk .fang-dialog input[type="text"]::placeholder,
:root.fang-theme-cyberpunk .fang-dialog input[type="number"]::placeholder,
:root.fang-theme-cyberpunk .fang-dialog input[type="date"]::placeholder,
:root.fang-theme-cyberpunk .fang-dialog textarea::placeholder,
body.fang-theme-cyberpunk .fang-dialog input[type="text"]::placeholder,
body.fang-theme-cyberpunk .fang-dialog input[type="number"]::placeholder,
body.fang-theme-cyberpunk .fang-dialog input[type="date"]::placeholder,
body.fang-theme-cyberpunk .fang-dialog textarea::placeholder {
    color: rgba(217, 236, 255, 0.4);
}

:root.fang-theme-cyberpunk .fang-dialog select option,
:root.fang-theme-cyberpunk .fang-dialog select optgroup,
body.fang-theme-cyberpunk .fang-dialog select option,
body.fang-theme-cyberpunk .fang-dialog select optgroup {
    background: #f4f7fb;
    color: #0f1720;
}

/* (The cyberpunk-only checkbox accent that used to sit here is now a themed rule for
   every FANG checkbox/radio/range — see "Form controls follow the theme" further up.
   It only covered .fang-dialog, which is why the sidebar switches stayed browser-orange
   in the cyberpunk theme.) */

:root.fang-theme-cyberpunk .fang-dialog .dialog-buttons button.cancel,
body.fang-theme-cyberpunk .fang-dialog .dialog-buttons button.cancel {
    background-color: #0d2031;
    color: #33d9ff;
    border-color: #2c5a7d;
}

:root.fang-theme-cyberpunk .fang-dialog .dialog-buttons button.cancel:hover,
body.fang-theme-cyberpunk .fang-dialog .dialog-buttons button.cancel:hover {
    background-color: #15324b;
}

:root.fang-theme-cyberpunk .fang-dialog .fang-faction-manager__header,
body.fang-theme-cyberpunk .fang-dialog .fang-faction-manager__header {
    background: linear-gradient(135deg, rgba(255, 43, 139, 0.12), rgba(51, 217, 255, 0.1));
    border-color: rgba(51, 217, 255, 0.35);
    border-left-color: #ff2b8b;
}

:root.fang-theme-cyberpunk .fang-dialog .fang-faction-manager__header strong,
body.fang-theme-cyberpunk .fang-dialog .fang-faction-manager__header strong {
    color: #ff2b8b;
}

:root.fang-theme-cyberpunk .fang-dialog .fang-faction-manager__header p,
body.fang-theme-cyberpunk .fang-dialog .fang-faction-manager__header p {
    color: rgba(217, 236, 255, 0.76);
}

:root.fang-theme-cyberpunk .fang-dialog .fang-toggle-card,
body.fang-theme-cyberpunk .fang-dialog .fang-toggle-card,
:root.fang-theme-cyberpunk .fang-dialog .fang-faction-item,
body.fang-theme-cyberpunk .fang-dialog .fang-faction-item,
:root.fang-theme-cyberpunk .fang-dialog .fang-faction-visibility-row label,
body.fang-theme-cyberpunk .fang-dialog .fang-faction-visibility-row label {
    background: rgba(10, 26, 42, 0.78);
    border-color: rgba(51, 217, 255, 0.28);
    color: #d9ecff;
}

:root.fang-theme-cyberpunk .fang-dialog .fang-toggle-card__icon,
body.fang-theme-cyberpunk .fang-dialog .fang-toggle-card__icon {
    background: rgba(255, 43, 139, 0.14);
    color: #33d9ff;
}

:root.fang-theme-cyberpunk .fang-dialog #fang-factions-list,
body.fang-theme-cyberpunk .fang-dialog #fang-factions-list {
    background: rgba(8, 18, 30, 0.65);
    border-color: #2c5a7d;
}

:root.fang-theme-cyberpunk .fang-dialog .fang-add-faction-btn,
body.fang-theme-cyberpunk .fang-dialog .fang-add-faction-btn {
    background: rgba(51, 217, 255, 0.08);
    color: #d9ecff;
}

:root.fang-theme-cyberpunk .fang-dialog .faction-icon-preview,
body.fang-theme-cyberpunk .fang-dialog .faction-icon-preview {
    border-color: #2c5a7d;
    background: rgba(10, 26, 42, 0.9);
}

/* --- Floating Context Menu --- */
#fang-context-menu,
#fang-edge-context-menu {
    position: absolute;
    z-index: 1000;
    width: 220px;
    background: var(--fang-card-bg);
    border: 1px solid var(--fang-border-color);
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 0 8px rgba(var(--fang-accent-gold-rgb), 0.1);
    font-family: var(--fang-font-main);
    color: var(--fang-text-color);
    overflow: hidden;
    transition: opacity 0.15s ease-in-out, transform 0.1s ease-out;
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none;
    /* Ignore clicks while fading out */
}

#fang-context-menu:not(.hidden),
#fang-edge-context-menu:not(.hidden) {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#fang-context-menu ul,
#fang-edge-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

.fang-app-container .ctx-item {
    min-height: 44px;
    padding: 11px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.fang-app-container .ctx-item.ctx-primary {
    font-weight: 800;
}

.fang-app-container .ctx-item i {
    width: 16px;
    text-align: center;
    color: var(--fang-accent-gold);
}

.fang-app-container .ctx-item:hover {
    background: var(--fang-nav-bg);
    border-left-color: var(--fang-primary-red);
    color: var(--fang-primary-red);
}

.fang-app-container .ctx-item.danger:hover {
    background: #ffe6e6;
    border-left-color: var(--fang-primary-red);
    color: var(--fang-primary-red);
}

/* Rail buttons an extension adds: same look, same spacing as the built-in ones. */
.fang-rail-extensions {
    display: contents;
}

/* A menu item that needs edit mode. Muted rather than hidden, with the reason in
   small type next to it, so the function is visible even while it cannot be used. */
.fang-app-container .ctx-item.is-locked {
    opacity: 0.55;
    cursor: default;
}

.fang-app-container .ctx-item.is-locked:hover {
    background: transparent;
    border-left-color: transparent;
    color: inherit;
}

.fang-app-container .ctx-item .ctx-hint {
    margin-left: auto;
    padding-left: 10px;
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.85;
    white-space: nowrap;
}

/* The connections window: one row per connection, the other end's name carrying the
   weight, the relationship label and the direction glyph quieter beside it. */
.fang-connection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.fang-connection-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.fang-connection-row:last-child {
    border-bottom: none;
}

.fang-connection-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.fang-connection-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.fang-connection-label {
    opacity: 0.8;
}

.fang-connection-dir {
    opacity: 0.6;
}

.fang-connection-other {
    font-weight: 700;
}

.fang-connection-badge {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    opacity: 0.85;
}

.fang-connection-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}

.fang-connection-actions .btn {
    min-width: var(--ninjo-tippziel, 32px);
    min-height: var(--ninjo-tippziel, 32px);
    padding: 4px 8px;
}

.fang-app-container .ctx-item.danger i {
    color: #ff4d4d;
}

.fang-actor-editor-dialog .window-content {
    padding: 0;
}

.fang-actor-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px;
    background: var(--fang-card-bg);
}

.fang-actor-editor .fang-editor-section,
.fang-actor-editor .fang-editor-actions {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--fang-border-color);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.fang-actor-editor .fang-editor-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    border: 0;
    color: var(--fang-primary-red);
    font-size: 0.95rem;
    text-transform: uppercase;
}

.fang-actor-editor label {
    display: block;
    margin: 8px 0 4px;
    font-weight: 700;
}

.fang-actor-editor input[type="text"],
.fang-actor-editor input[type="number"],
.fang-actor-editor input[type="date"],
.fang-actor-editor select,
.fang-actor-editor textarea {
    width: 100%;
}

.fang-actor-editor textarea {
    min-height: 130px;
    resize: vertical;
}

.fang-actor-editor .fang-editor-notes,
.fang-actor-editor .fang-editor-actions {
    grid-column: 1 / -1;
}

.fang-actor-editor .fang-condition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.fang-actor-editor .fang-editor-check,
.fang-actor-editor .fang-condition-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

/* A simple stack of full-width buttons. It used to be a 4-column grid built for the
   wide dialog, which squeezed each button into a quarter-width cell — the long German
   "Delete Actor" label then overflowed its box. Delete moved to the footer; what is
   left (open journal, replace placeholder) just stacks. */
.fang-actor-editor .fang-editor-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 800px) {
    .fang-actor-editor {
        grid-template-columns: 1fr;
    }

    .fang-actor-editor .fang-editor-notes,
    .fang-actor-editor .fang-editor-actions {
        grid-column: auto;
    }
}

/* --- Floating Hover Lore Tooltip --- */
#fang-tooltip {
    position: absolute;
    z-index: 999;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    border: 1px solid var(--fang-accent-gold);
    border-radius: 4px;
    padding: 12px 15px;
    color: var(--fang-text-color);
    font-family: var(--fang-font-main);
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    /* Clicks fall through to the canvas */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-out;
    transform: translateY(10px);
    opacity: 0;
    /* Optional: A subtle glow */
    box-shadow: 0 0 15px rgba(var(--fang-accent-gold-rgb), 0.1);
    /* Prevent text overflow */
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

#fang-tooltip:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

/* When lore is empty, force hidden even if JS gets confused */
#fang-tooltip:empty {
    display: none !important;
}

/* --- Narrative Spotlight Overlay --- */
.fang-narrative-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.fang-narrative-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

.fang-app-container .narrative-card {
    background: #fdfbf7;
    border: 2px solid var(--fang-accent-gold);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--fang-accent-gold-rgb), 0.2);
    width: 90%;
    max-width: 850px;
    max-height: 85%;
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 35px;
    gap: 35px;
    animation: fangCinemaEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes fangCinemaEnter {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

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

.fang-app-container .narrative-left-side {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.fang-app-container .narrative-portrait-container {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--fang-accent-gold);
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.fang-app-container .narrative-portrait-container.hidden {
    display: none;
}

.fang-app-container .narrative-portrait-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fang-app-container .narrative-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fang-app-container .narrative-content h2 {
    font-size: 2.2rem;
    color: var(--fang-primary-red);
    margin: 0 0 15px 0;
    border-bottom: 2px solid var(--fang-accent-gold);
    padding-bottom: 5px;
    font-weight: 800;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: break-word;
}

#narrative-subtitle {
    font-size: 1.1rem;
    color: var(--fang-accent-gold);
    font-style: italic;
    margin-bottom: 10px;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: break-word;
}

#narrative-text,
#edge-narrative-text {
    font-family: var(--fang-font-main);
    font-size: 1.25rem;
    line-height: 1.7;
    color: #222;
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    margin-top: 10px;
}

.fang-app-container #narrative-quests-container {
    flex: 0 0 auto;
    width: 100%;
    border-top: 1px solid var(--fang-accent-gold);
    padding-top: 15px;
    display: flex;
    flex-direction: column;
}

.fang-app-container #narrative-quests-container.hidden {
    display: none;
}

.fang-app-container .narrative-quests-header {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fang-primary-red);
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 6px;
    letter-spacing: 0.5px;
}

.fang-app-container #narrative-quests-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fang-app-container .narrative-quest-item {
    font-family: var(--fang-font-main);
    font-size: 1.05rem;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
}

.fang-app-container .narrative-quest-item:hover {
    background: rgba(var(--fang-accent-gold-rgb), 0.08);
    border-left-color: var(--fang-primary-red);
    transform: translateX(4px);
    color: var(--fang-primary-red);
}

.fang-app-container .narrative-quest-item i {
    color: var(--fang-accent-gold);
}

/* --- Edge Specific Override for Spotlight --- */
.fang-app-container .edge-spotlight-card {
    max-width: 900px;
    /* Wider for dual portraits */
    justify-content: space-between;
    align-items: center;
}

.fang-app-container .edge-spotlight-card .edge-content {
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fang-app-container .edge-spotlight-card h2#edge-narrative-title {
    font-size: 2rem;
    color: var(--fang-primary-red);
    margin: 0 0 15px 0;
    border-bottom: 2px solid var(--fang-accent-gold);
    padding-bottom: 5px;
    font-weight: 800;
    display: inline-block;
    align-self: center;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
}

.fang-app-container .narrative-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #888;
    cursor: pointer;
    font-size: 1.4rem;
    transition: color 0.2s;
    z-index: 10;
}

.fang-app-container .narrative-close:hover {
    color: var(--fang-primary-red);
}

/* Spectator Mode Indicator */
.fang-app-container .spectator-active-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(var(--fang-primary-red-rgb), 0.85);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    z-index: 1500;
    pointer-events: none;
    display: none;
    /* Shown via JS */
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(var(--fang-primary-red-rgb), 0.4);
    border: 1px solid var(--fang-accent-gold);
}

.fang-app-container .spectator-active-indicator.active {
    display: flex;
    animation: fangFadeIn 0.3s ease;
}

.fang-app-container .spectator-active-indicator i {
    animation: fangPulseIndicator 1.5s linear infinite;
    color: #ff4d4d;
}

@keyframes fangPulseIndicator {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

/* --- UI Button Grouping Nest --- */
.fang-app-container .button-group-nest {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--fang-border-color);
    border-left: 3px solid var(--fang-accent-gold);
    border-radius: 4px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.fang-app-container .button-group-nest:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #c0b9ae;
}

.fang-app-container .button-group-nest h4 {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 6px 0;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-style: italic;
    margin-bottom: 10px;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: break-word;
}

#narrative-text,
#edge-narrative-text {
    font-family: var(--fang-font-main);
    font-size: 1.25rem;
    line-height: 1.7;
    color: #222;
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    margin-top: 10px;
}

.fang-app-container #narrative-quests-container {
    flex: 0 0 auto;
    width: 100%;
    border-top: 1px solid var(--fang-accent-gold);
    padding-top: 15px;
    display: flex;
    flex-direction: column;
}

.fang-app-container #narrative-quests-container.hidden {
    display: none;
}

.fang-app-container .narrative-quests-header {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fang-primary-red);
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 6px;
    letter-spacing: 0.5px;
}

.fang-app-container #narrative-quests-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fang-app-container .narrative-quest-item {
    font-family: var(--fang-font-main);
    font-size: 1.05rem;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
}

.fang-app-container .narrative-quest-item:hover {
    background: rgba(var(--fang-accent-gold-rgb), 0.08);
    border-left-color: var(--fang-primary-red);
    transform: translateX(4px);
    color: var(--fang-primary-red);
}

.fang-app-container .narrative-quest-item i {
    color: var(--fang-accent-gold);
}

/* --- Edge Specific Override for Spotlight --- */
.fang-app-container .edge-spotlight-card {
    max-width: 900px;
    /* Wider for dual portraits */
    justify-content: space-between;
    align-items: center;
}

.fang-app-container .edge-spotlight-card .edge-content {
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fang-app-container .edge-spotlight-card h2#edge-narrative-title {
    font-size: 2rem;
    color: var(--fang-primary-red);
    margin: 0 0 15px 0;
    border-bottom: 2px solid var(--fang-accent-gold);
    padding-bottom: 5px;
    font-weight: 800;
    display: inline-block;
    align-self: center;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
}

.fang-app-container .narrative-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #888;
    cursor: pointer;
    font-size: 1.4rem;
    transition: color 0.2s;
    z-index: 10;
}

.fang-app-container .narrative-close:hover {
    color: var(--fang-primary-red);
}

/* Spectator Mode Indicator */
.fang-app-container .spectator-active-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(var(--fang-primary-red-rgb), 0.85);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    z-index: 1500;
    pointer-events: none;
    display: none;
    /* Shown via JS */
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(var(--fang-primary-red-rgb), 0.4);
    border: 1px solid var(--fang-accent-gold);
}

.fang-app-container .spectator-active-indicator.active {
    display: flex;
    animation: fangFadeIn 0.3s ease;
}

.fang-app-container .spectator-active-indicator i {
    animation: fangPulseIndicator 1.5s linear infinite;
    color: #ff4d4d;
}

@keyframes fangPulseIndicator {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

/* --- UI Button Grouping Nest --- */
.fang-app-container .button-group-nest {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--fang-border-color);
    border-left: 3px solid var(--fang-accent-gold);
    border-radius: 4px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.fang-app-container .button-group-nest:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #c0b9ae;
}

.fang-app-container .button-group-nest h4 {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 6px 0;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 2px;
}

.fang-app-container .button-group-nest .btn {
    width: 100%;
}

/* --- Background Settings & Premium Features --- */
.fang-app-container #fang-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    transition: background-color 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

.fang-app-container #fang-bg-layer.no-transition {
    transition: none !important;
}

/* Texture Overlay (Grain) */
.fang-app-container .canvas-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* Above bg layer, below canvas */
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ffilter id='n' %3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.fang-app-container .premium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.fang-app-container .premium-badge {
    background: linear-gradient(135deg, #FFD700, #B8860B);
    color: #1a0000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(var(--fang-accent-gold-rgb), 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fang-app-container .premium-disclaimer {
    font-size: 0.75rem;
    font-style: italic;
    color: #887b66;
    margin-top: 8px;
    line-height: 1.3;
    display: flex;
    gap: 6px;
    padding: 8px;
    background: rgba(var(--fang-accent-gold-rgb), 0.05);
    border-radius: 4px;
    border-left: 2px solid var(--fang-accent-gold);
}

.fang-app-container .bg-sub-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--fang-border-color);
    animation: fangFadeIn 0.3s ease;
}

.fang-app-container .color-palette-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.fang-app-container .color-patch {
    aspect-ratio: 1;
    border-radius: 50%; /* Make them circular for a more premium look */
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.fang-app-container .color-patch:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.fang-app-container .color-patch.active {
    border-color: var(--fang-accent-gold);
    box-shadow: 0 0 0 2px white, 0 0 15px var(--fang-accent-gold);
}

/* --- Background Configuration Dialog Styles (Premium Redesign) --- */
.fang-config-dialog {
    border: 1px solid var(--fang-accent-gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.fang-config-dialog .window-content {
    background: var(--fang-bg-color);
    color: var(--fang-text-color);
    padding: 0;
    border: none;
}

.fang-config-dialog .window-header {
    background-color: var(--fang-primary-red) !important;
    border-bottom: 2px solid var(--fang-accent-gold) !important;
}

/* More robust selectors for Foundry's V13+ app structure */
#fang-background-config {
    border: 1px solid var(--fang-accent-gold);
    box-shadow: var(--fang-shadow-md);
    border-radius: 4px;
}

#fang-background-config .window-content {
    background: var(--fang-bg-color);
    color: var(--fang-text-color);
    padding: 0;
}

#fang-background-config .window-header {
    background-color: var(--fang-primary-red) !important;
    border-bottom: 2px solid var(--fang-accent-gold) !important;
}

.background-config-container {
    padding: 15px;
}

.bg-config-section {
    margin-top: 14px;
    animation: fangSlideIn 0.3s ease-out;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.bg-config-section.hidden {
    display: none;
}

.bg-config-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--fang-primary-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
}

.background-config-container select,
.background-config-container input[type="number"],
.background-config-container input[type="date"],
.background-config-container input[type="text"] {
    height: 34px;
    background: #fff;
    color: var(--fang-text-color);
    border: 1px solid var(--fang-border-color);
    border-radius: 2px;
    padding: 0 10px;
}

.background-config-container .flexrow.gap-5 {
    display: flex;
    gap: 6px;
    align-items: center;
}

.background-config-container .file-picker.small-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 34px;
    border: 1px solid rgba(var(--fang-accent-gold-rgb), 0.35);
    border-radius: 2px;
    background: #fff;
    color: var(--fang-text-color);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.background-config-container .file-picker.small-btn:hover {
    transform: translateY(-1px);
    border-color: var(--fang-accent-gold);
    box-shadow: 0 0 10px rgba(var(--fang-accent-gold-rgb), 0.25);
}

.background-config-container .slider-group {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.10);
}

.background-config-container .slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    color: #6b5f4f;
    margin-bottom: 6px;
}

.background-config-container input[type="range"] {
    width: 100%;
}

.background-config-container .color-palette-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    justify-items: center;
}

.background-config-container .color-patch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.14);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.background-config-container .color-patch:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.background-config-container .color-patch.active {
    border-color: var(--fang-accent-gold);
    box-shadow: 0 0 0 2px white, 0 0 15px var(--fang-accent-gold);
}

.background-config-container .preset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.background-config-container .preset-tile {
    position: relative;
    height: 56px;
    border-radius: 8px;
    border: 1px solid var(--fang-border-color);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: #fff;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.background-config-container .preset-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.background-config-container .preset-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--fang-accent-gold-rgb), 0.55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.background-config-container .preset-tile.active {
    border-color: var(--fang-accent-gold);
    box-shadow: 0 0 0 2px rgba(var(--fang-accent-gold-rgb), 0.25), 0 8px 20px rgba(0, 0, 0, 0.18);
}

.background-config-container .preset-name {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    letter-spacing: 0.2px;
    text-align: left;
}

.background-config-container .preset-tile.preset-parchment {
    background-color: #f3e6cf;
    background-image:
        radial-gradient(circle at 18% 38%, rgba(120, 75, 35, 0.10) 0%, transparent 58%),
        radial-gradient(circle at 78% 62%, rgba(120, 75, 35, 0.08) 0%, transparent 62%),
        linear-gradient(0deg, rgba(90, 60, 30, 0.04), rgba(255,255,255,0) 45%),
        repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.018) 0 2px, rgba(255, 255, 255, 0) 2px 7px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 55%, transparent 62%, rgba(60, 40, 20, 0.18) 100%);
    background-blend-mode: multiply, multiply, normal, normal, overlay, normal;
}

.background-config-container .preset-tile.preset-dark {
    background: linear-gradient(135deg, #0f2a16 0%, #1f3b1e 55%, #2b2012 100%);
    background-image:
        radial-gradient(circle at 22% 30%, rgba(255, 238, 180, 0.13) 0%, transparent 45%),
        radial-gradient(circle at 74% 68%, rgba(255, 238, 180, 0.10) 0%, transparent 52%),
        radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0.35) 0%, transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,0.45) 100%);
    background-size: cover, cover, cover, 260px 260px, cover;
    background-blend-mode: screen, screen, multiply, overlay, normal;
}

.background-config-container .preset-tile.preset-starfield {
    background-color: #020205;
    background-image:
        radial-gradient(circle at 18% 28%, rgba(170, 80, 255, 0.28) 0%, transparent 48%),
        radial-gradient(circle at 78% 68%, rgba(60, 140, 255, 0.22) 0%, transparent 52%),
        radial-gradient(circle at 88% 22%, rgba(0, 200, 180, 0.10) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
        radial-gradient(rgba(255,255,255,0.85) 0.9px, transparent 1.1px),
        radial-gradient(rgba(255,255,255,0.55) 0.7px, transparent 0.9px);
    background-size: cover, cover, cover, 260px 260px, 170px 170px, 260px 260px;
    background-position: center, center, center, 0 0, 10px 30px, 60px 90px;
    background-blend-mode: screen, screen, screen, overlay, normal, normal;
}

.background-config-container .preset-tile.preset-ethereal {
    background: linear-gradient(135deg, #1a0d2e 0%, #0c2b3b 55%, #10341f 100%);
    background-image:
        radial-gradient(circle at 24% 32%, rgba(0, 255, 208, 0.14) 0%, transparent 46%),
        radial-gradient(circle at 70% 62%, rgba(170, 80, 255, 0.18) 0%, transparent 52%),
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 55%, transparent 58%, rgba(0,0,0,0.40) 100%);
    background-size: cover, cover, cover, 260px 260px, cover;
    background-blend-mode: screen, screen, screen, overlay, normal;
}

.background-config-container .preset-tile.preset-stone {
    background-color: #2a2a2a;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0) 1px 9px),
        radial-gradient(circle at 35% 35%, rgba(0, 0, 0, 0.35) 0%, transparent 55%),
        linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28));
    background-blend-mode: overlay;
}

.background-config-container .preset-tile.preset-stars {
    background-color: #000;
    background-image:
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 550px 550px, 350px 350px;
    background-position: 40px 60px, 130px 270px;
}

.background-config-container select:focus,
.background-config-container input[type="number"]:focus,
.background-config-container input[type="date"]:focus,
.background-config-container input[type="text"]:focus {
    border-color: var(--fang-accent-gold);
    box-shadow: 0 0 5px var(--fang-accent-gold);
}

.background-config-container hr {
    border: 0;
    border-top: 1px solid var(--fang-border-color);
    margin: 12px 0;
}

.background-config-container .premium-notice {
    margin-top: 30px;
    padding: 15px;
    background: rgba(var(--fang-accent-gold-rgb), 0.08);
    border-radius: 6px;
    border: 1px solid rgba(var(--fang-accent-gold-rgb), 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: none;
}

.background-config-container .premium-badge {
    background: var(--fang-accent-gold);
    color: #1a0a0a;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.7rem;
    text-transform: uppercase;
    box-shadow: 0 0 10px var(--fang-accent-gold);
}

.background-config-container .premium-notice p {
    font-size: 0.78rem;
    color: var(--fang-accent-gold);
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

:root.fang-theme-cyberpunk .background-config-container .bg-config-section label,
body.fang-theme-cyberpunk .background-config-container .bg-config-section label {
    color: #7feaff;
}

:root.fang-theme-cyberpunk .background-config-container select,
:root.fang-theme-cyberpunk .background-config-container input[type="text"],
:root.fang-theme-cyberpunk .background-config-container input[type="number"],
:root.fang-theme-cyberpunk .background-config-container input[type="date"],
body.fang-theme-cyberpunk .background-config-container select,
body.fang-theme-cyberpunk .background-config-container input[type="number"],
body.fang-theme-cyberpunk .background-config-container input[type="date"],
body.fang-theme-cyberpunk .background-config-container input[type="text"] {
    background: #0c1b2a;
    color: #d9ecff;
    border-color: #27506f;
}

:root.fang-theme-cyberpunk .background-config-container .file-picker.small-btn,
body.fang-theme-cyberpunk .background-config-container .file-picker.small-btn {
    background: #0f2234;
    color: #d9ecff;
    border-color: #2c5a7d;
}

:root.fang-theme-cyberpunk .background-config-container .slider-group,
body.fang-theme-cyberpunk .background-config-container .slider-group {
    border-top-color: rgba(51, 217, 255, 0.24);
}

:root.fang-theme-cyberpunk .background-config-container .slider-label,
body.fang-theme-cyberpunk .background-config-container .slider-label {
    color: #9ec6e8;
}

:root.fang-theme-cyberpunk .background-config-container .premium-notice,
body.fang-theme-cyberpunk .background-config-container .premium-notice {
    background: rgba(51, 217, 255, 0.08);
    border-color: rgba(51, 217, 255, 0.4);
}

:root.fang-theme-cyberpunk .background-config-container .premium-badge,
body.fang-theme-cyberpunk .background-config-container .premium-badge {
    background: linear-gradient(180deg, #33d9ff 0%, #1497bc 100%);
    color: #041019;
    box-shadow: 0 0 12px rgba(51, 217, 255, 0.55);
}

:root.fang-theme-cyberpunk .background-config-container .premium-notice p,
body.fang-theme-cyberpunk .background-config-container .premium-notice p {
    color: #9ec6e8;
}

@keyframes fangSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Background Presets - Enhanced Visuals */
/* ---------------------------------------------------------------------------
   Background presets.

   All of them follow the same recipe, because the two that did not were broken:
     background-color  — the base tone
     background-image  — every layer, with the base gradient LAST (= bottom)
   Writing `background: linear-gradient(...)` and then `background-image: ...` on
   the next line silently drops the gradient: the shorthand resets background-image,
   and the following declaration overwrites it. That is why "forest" rendered grey
   instead of green and "ethereal" lost its violet — the colour existed only in the
   source, never on screen.

   Depth comes from stacking: colour wash -> texture -> vignette. The vignette is
   always last (topmost) so it frames the whole thing.
   --------------------------------------------------------------------------- */

.fang-app-container #fang-bg-layer.fang-bg-preset-parchment {
    background-color: #f3e6cf;
    background-image:
        radial-gradient(circle at 18% 38%, rgba(120, 75, 35, 0.10) 0%, transparent 58%),
        radial-gradient(circle at 78% 62%, rgba(120, 75, 35, 0.08) 0%, transparent 62%),
        linear-gradient(0deg, rgba(90, 60, 30, 0.04), rgba(255, 255, 255, 0) 45%),
        repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.018) 0 2px, rgba(255, 255, 255, 0) 2px 7px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 55%, transparent 62%, rgba(60, 40, 20, 0.18) 100%);
    background-blend-mode: multiply, multiply, normal, normal, overlay, normal;
    filter: sepia(0.25) contrast(1.05);
}

/* Forest & jungle: canopy light from above left, deep green below, warm earth at the
   bottom edge. The green base is a real layer now, not a lost shorthand. */
.fang-app-container #fang-bg-layer.fang-bg-preset-dark {
    background-color: #16301a;
    background-image:
        /* shafts of light through the canopy */
        linear-gradient(102deg, rgba(214, 238, 160, 0.13) 0 3%, transparent 3% 9%,
                                rgba(214, 238, 160, 0.09) 9% 11%, transparent 11% 20%,
                                rgba(214, 238, 160, 0.11) 20% 22%, transparent 22% 34%,
                                rgba(214, 238, 160, 0.06) 34% 37%, transparent 37%),
        radial-gradient(ellipse at 22% 8%, rgba(220, 245, 170, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 92%, rgba(10, 24, 12, 0.5) 0%, transparent 60%),
        /* leaf mottling */
        radial-gradient(circle at 30% 70%, rgba(60, 110, 50, 0.35) 0%, transparent 40%),
        radial-gradient(circle at 68% 30%, rgba(46, 92, 42, 0.3) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
        /* base: canopy green into forest floor */
        linear-gradient(160deg, #24512a 0%, #16301a 55%, #2b2415 100%),
        radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
    background-size: cover, cover, cover, cover, cover, 320px 320px, cover, cover;
    background-blend-mode: screen, screen, multiply, overlay, overlay, overlay, normal, normal;
}

/* Deep space nebula with two star sizes for parallax. */
.fang-app-container #fang-bg-layer.fang-bg-preset-starfield {
    background-color: #05030d;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.9) 0.9px, transparent 1.1px),
        radial-gradient(rgba(190, 215, 255, 0.55) 0.7px, transparent 0.9px),
        radial-gradient(ellipse at 18% 28%, rgba(170, 80, 255, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 78% 68%, rgba(60, 140, 255, 0.28) 0%, transparent 54%),
        radial-gradient(ellipse at 88% 22%, rgba(0, 200, 180, 0.14) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
        linear-gradient(150deg, #120a2a 0%, #05030d 60%, #0a0518 100%),
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
    background-size: 170px 170px, 260px 260px, cover, cover, cover, 320px 320px, cover, cover;
    background-position: 10px 30px, 60px 90px, center, center, center, 0 0, center, center;
    background-blend-mode: normal, normal, screen, screen, screen, overlay, normal, normal;
}

/* Feywild mist: teal and violet drifting over deep blue-green. */
.fang-app-container #fang-bg-layer.fang-bg-preset-ethereal {
    background-color: #10283a;
    background-image:
        radial-gradient(ellipse at 24% 32%, rgba(0, 255, 208, 0.2) 0%, transparent 48%),
        radial-gradient(ellipse at 70% 62%, rgba(170, 80, 255, 0.24) 0%, transparent 54%),
        radial-gradient(ellipse at 85% 20%, rgba(230, 255, 250, 0.12) 0%, transparent 42%),
        /* mist banding */
        repeating-linear-gradient(172deg, rgba(190, 245, 255, 0.05) 0 14px, rgba(255, 255, 255, 0) 14px 46px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e0f38 0%, #0c2b3b 55%, #10341f 100%),
        radial-gradient(circle at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
    background-size: cover, cover, cover, cover, 360px 360px, cover, cover;
    background-blend-mode: screen, screen, screen, screen, overlay, normal, normal;
}

/* Dungeon stone: courses of blocks, offset row by row, damp and unevenly lit.
   The masonry is an SVG tile, not repeating-linear-gradient: crossed gradients can only
   produce an aligned grid, which reads as tiling, not as a wall. The tile carries two
   courses with the joints offset by half a block, so it stacks into real bond. */
.fang-app-container #fang-bg-layer.fang-bg-preset-stone {
    background-color: #3a3733;
    background-image:
        /* damp patches */
        radial-gradient(ellipse at 28% 24%, rgba(120, 140, 120, 0.10) 0%, transparent 42%),
        radial-gradient(ellipse at 72% 76%, rgba(90, 110, 130, 0.08) 0%, transparent 45%),
        /* masonry: two offset courses per tile */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64'%3E%3Cg fill='none' stroke='rgba(18,16,14,0.55)' stroke-width='3'%3E%3Cpath d='M0 1.5H128M0 32.5H128M0 63.5H128'/%3E%3Cpath d='M32 1.5V32.5M96 1.5V32.5M0 32.5V63.5M64 32.5V63.5M128 32.5V63.5'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'%3E%3Cpath d='M0 4H128M0 35H128'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"),
        linear-gradient(165deg, #45413c 0%, #34312d 60%, #26241f 100%),
        radial-gradient(circle at 45% 40%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
    background-size: cover, cover, 128px 64px, 300px 300px, cover, cover;
    background-blend-mode: screen, screen, normal, overlay, normal, normal;
}

/* Clear night sky: three star sizes, subtle milky way, no nebula. */
.fang-app-container #fang-bg-layer.fang-bg-preset-stars {
    background-color: #04060f;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.95) 1.1px, transparent 1.4px),
        radial-gradient(rgba(215, 230, 255, 0.7) 0.8px, transparent 1px),
        radial-gradient(rgba(255, 240, 210, 0.5) 0.6px, transparent 0.8px),
        /* milky way band */
        linear-gradient(108deg, transparent 34%, rgba(190, 205, 245, 0.09) 45%, rgba(210, 220, 255, 0.05) 52%, transparent 63%),
        linear-gradient(180deg, #0a1024 0%, #04060f 55%, #02030a 100%),
        radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
    background-size: 190px 190px, 120px 120px, 260px 260px, cover, cover, cover;
    background-position: 20px 40px, 70px 110px, 140px 30px, center, center, center;
    background-blend-mode: normal, normal, normal, screen, normal, normal;
}


/* --- Narrative Sidebar & Quest Quests --- */
.fang-app-container .narrative-left-side {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    gap: 15px;
}

.fang-app-container #narrative-quests-container {
    /* No "box" around the quest list; keep it integrated like the Spotlight body */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 14px 0 0 0;
}

.fang-app-container .narrative-quests-header {
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--fang-primary-red);
    text-transform: uppercase;
    border-bottom: 2px solid var(--fang-accent-gold);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.06em;
}

.fang-app-container #narrative-quests-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fang-app-container .narrative-quest-item {
    padding: 7px 10px;
    margin-bottom: 4px;
    background: white;
    border-radius: 4px;
    border: 1px solid var(--fang-border-color);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.fang-app-container .narrative-quest-item:hover {
    background: var(--fang-nav-bg);
    border-color: var(--fang-accent-gold);
    color: var(--fang-primary-red);
    transform: translateX(3px);
}

.fang-app-container .narrative-quest-item i {
    color: var(--fang-accent-gold);
    font-size: 0.8rem;
}

/* --- Quest Spotlight Card (match Narrative Spotlight look) --- */
.fang-app-container .quest-spotlight-card {
    /* Keep same background/border/shadow as .narrative-card; only minor sizing tweak */
    max-width: 850px;
}

/* Improve title readability on some Foundry themes where primary red renders too dark */
#fang-quest-spotlight-overlay #quest-spotlight-title {
    color: var(--fang-primary-red);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 6px 18px rgba(0, 0, 0, 0.08);
    line-height: 1.15;
    padding-top: 2px; /* avoid glyph ascenders being clipped in some renderers */
}

#fang-quest-spotlight-overlay .narrative-content {
    /* Default .narrative-content uses overflow:hidden, which can clip shadows/large glyphs */
    overflow: visible;
}

#quest-spotlight-text {
    /* Mirror narrative text styling so it feels like the same Spotlight surface */
    font-family: var(--fang-font-main);
    font-size: 1.25rem;
    line-height: 1.7;
    color: #222;
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    margin-top: 10px;
}

#quest-spotlight-text :is(h1, h2, h3, h4, h5, h6) {
    font-style: normal; /* base text is italic; headings should be crisp */
    color: var(--fang-primary-red);
    margin: 0.9em 0 0.35em;
    line-height: 1.15;
    padding-top: 2px;
    border-bottom: 2px solid rgba(var(--fang-accent-gold-rgb), 0.85);
    padding-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* === Beta Rail Layout Hardening ===
   Older sidebar/tab rules live above this block and can otherwise override the
   compact rail. Keep this late in the file so the modern layout wins. */
.fang-app-container .sidebar {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    overflow: visible !important;
}

.fang-app-container .sidebar-header {
    width: 76px !important;
    min-height: 48px;
    padding: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fang-app-container .sidebar-header h1 {
    display: grid !important;
    place-items: center;
    width: 100%;
    height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--fang-header-text) !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    overflow: hidden;
    text-transform: uppercase;
}

.fang-app-container .sidebar-header h1::before {
    display: none !important;
}

.fang-app-container .sidebar-header h1::after {
    content: none !important;
}

.fang-app-container .sidebar-header p,
.fang-app-container .fang-rail {
    width: 76px;
    flex: 0 0 auto;
}

.fang-app-container .fang-rail-btn {
    min-width: 52px;
    min-height: 52px;
}

.fang-app-container .fang-sidebar-status {
    width: 76px;
    padding: 8px 6px 10px;
    border-bottom: 1px solid rgba(var(--fang-primary-red-rgb), 0.35);
}

.fang-app-container .fang-sidebar-status .lock-banner {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 5px;
    box-shadow: none;
}

.fang-app-container .fang-sidebar-status .lock-info {
    min-height: 16px;
}

.fang-app-container .fang-sidebar-status .lock-info i {
    color: rgba(40, 40, 40, 0.55);
    font-size: 0.85rem;
}

.fang-app-container .fang-sidebar-status .fang-lock-btn {
    width: 52px;
    min-width: 52px;
    height: 34px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 0;
}

.fang-app-container .fang-sidebar-status .lock-banner.no-editor,
.fang-app-container .fang-sidebar-status .lock-banner.i-am-editor,
.fang-app-container .fang-sidebar-status .lock-banner.someone-else-editing {
    border-left: 0;
}

.fang-app-container .fang-sidebar-status .lock-banner.no-editor .lock-info i {
    color: #6f6a5f;
}

.fang-app-container .fang-sidebar-status .lock-banner.no-editor .fang-lock-btn {
    background: #fffaf0;
    border: 2px solid var(--fang-accent-gold);
    color: var(--fang-primary-red);
    box-shadow: 0 2px 0 rgba(var(--fang-primary-red-rgb), 0.18);
}

.fang-app-container .fang-sidebar-status .lock-banner.no-editor .fang-lock-btn:hover {
    background: #fff2c4;
    transform: translateY(-1px);
}

.fang-app-container .fang-sidebar-status .lock-banner.i-am-editor .lock-info i {
    color: #198754;
    filter: drop-shadow(0 0 4px rgba(25, 135, 84, 0.35));
}

.fang-app-container .fang-sidebar-status .lock-banner.i-am-editor .fang-lock-btn {
    background: #198754;
    border: 2px solid #d7f5df;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.18), 0 8px 18px rgba(25, 135, 84, 0.28);
}

.fang-app-container .fang-sidebar-status .lock-banner.i-am-editor .fang-lock-btn:hover {
    background: #146c43;
    transform: translateY(-1px);
}

.fang-app-container .fang-sidebar-status .lock-banner.someone-else-editing .lock-info i {
    color: #9b1c1c;
}

.fang-app-container .fang-sidebar-status .lock-banner.someone-else-editing .fang-lock-btn {
    background: #eee8dc;
    border: 2px solid #b8afa0;
    color: #7a7468;
    box-shadow: none;
}

.fang-app-container:not(.sidebar-panel-open) .tabs-container {
    display: none !important;
}

.fang-app-container.sidebar-panel-open .tabs-container {
    display: block !important;
}

.fang-app-container .canvas-container {
    min-width: 0;
}

.fang-history-log,
.fang-history-editor {
    color: var(--fang-text-color);
    font-family: var(--fang-font-main);
}

.fang-app-container .fang-history-canvas-panel {
    position: absolute;
    inset: 0;
    z-index: 1760;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
}

.fang-app-container .fang-history-canvas-card {
    position: relative;
    width: min(760px, 92%);
    min-width: 360px;
    max-height: 85%;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top left, rgba(var(--fang-accent-gold-rgb), 0.12), transparent 34%),
        #fdfbf7;
    border: 2px solid var(--fang-accent-gold);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--fang-accent-gold-rgb), 0.2);
    animation: fangCinemaEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.fang-app-container .fang-history-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 58px 10px 24px;
    background: transparent;
    color: #3a2a12;
    border-bottom: 2px solid var(--fang-accent-gold);
}

.fang-app-container .fang-history-canvas-header h3 {
    margin: 0;
    color: inherit;
    border: 0;
    font-size: 1.35rem;
    line-height: 1.15;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fang-app-container .fang-history-canvas-header h3 i {
    color: var(--fang-accent-gold);
}

.fang-app-container .fang-history-canvas-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #888;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    /* Above the sticky header block, which spans the full width of the card with an opaque
       background and would otherwise paint over this button and swallow its clicks. */
    z-index: 4;
}

.fang-app-container .fang-history-canvas-close:hover {
    color: var(--fang-primary-red);
    background: rgba(var(--fang-primary-red-rgb), 0.06);
}

.fang-history-log {
    max-height: min(70vh, 720px);
    overflow-y: auto;
    padding: 20px 24px 24px;
}

.fang-history-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid rgba(var(--fang-accent-gold-rgb), 0.65);
    padding: 0 44px 10px 0;
}

.fang-history-log-header h2 {
    margin: 0;
    color: var(--fang-primary-red);
    font-size: 1.25rem;
    line-height: 1.15;
}

.fang-history-log-header p {
    margin: 4px 0 0;
    opacity: 0.76;
}

.fang-history-add {
    min-height: 38px;
    border: 2px solid var(--fang-accent-gold);
    border-radius: 6px;
    background: var(--fang-primary-red);
    color: var(--fang-header-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fang-font-main);
    font-size: 0.95rem;
    font-weight: 800;
    padding: 7px 13px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 3px rgba(var(--fang-accent-gold-rgb), 0.12);
}

.fang-history-add:hover {
    background: #a00000;
    transform: translateY(-1px);
}

.fang-history-filter-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 14px;
}

.fang-history-filter-row label {
    color: var(--fang-text-color);
    font-size: 0.86rem;
    font-weight: 800;
}

.fang-history-filter-row select {
    min-width: 170px;
}

/* Title, "add event" and the time axis stay put while the log scrolls -- all three are
   things you reach for at any point in a long chronicle, not just at its top. They share
   one sticky block so the axis does not have to know how tall the header is. The
   background has to match the card behind it, hence the own property. */
/* The disabled add button still reads as a button, just plainly out of reach. */
.fang-app-container .fang-history-add:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    filter: saturate(0.5);
}

.fang-history-sticky {
    --fang-history-rail-bg: var(--ninjo-grund);
    position: sticky;
    top: -20px;
    z-index: 3;
    margin: 0 -24px 16px;
    padding: 20px 24px 8px;
    background: var(--fang-history-rail-bg);
    border-bottom: 1px solid rgba(var(--fang-accent-gold-rgb), 0.4);
}

.fang-history-sticky .fang-history-log-header {
    margin-bottom: 10px;
}

.fang-history-timeline {
    margin: 0;
    padding: 0;
}

/* No scrollbar on purpose: the axis is wheeled or dragged. A visible bar turns it back
   into a list that spilled over, which is exactly what it should not look like. */
.fang-history-axis-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    /* Room for the dots to grow into on hover without clipping. */
    padding: 6px 0;
    /* The edges hint that there is more when it does not all fit. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.fang-history-axis-scroll::-webkit-scrollbar {
    display: none;
}

.fang-history-axis-scroll.dragging {
    cursor: grabbing;
}

.fang-history-axis {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 100%;
    /* Minimum spacing per day. Below this the ticks would touch, so the axis grows instead
       and is panned. */
    gap: 4px;
    /* Keeps the outermost ticks clear of the fade at the edges. */
    padding: 0 10px;
}

/* The line the ticks sit on. */
.fang-history-axis::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        rgba(var(--fang-accent-gold-rgb), 0.45),
        rgba(var(--fang-accent-gold-rgb), 0.9));
    border-radius: 2px;
}

.fang-history-tick {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The dot itself. Its size carries how much happened that day. */
.fang-history-tick > span {
    width: var(--fang-tick-size, 8px);
    height: var(--fang-tick-size, 8px);
    border-radius: 50%;
    background: var(--fang-history-rail-bg);
    box-shadow: 0 0 0 2px var(--fang-accent-gold);
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

/* Foundry outlines every focused button with a 2.7px rounded rectangle. On a round tick
   that reads as damage, and it lingers after a click. Gone for the pointer; keyboard users
   get a round ring instead, so tabbing through the axis is still visible. */
/* The tick is a bare hit area; everything visible lives on the round span inside it.
   Generic button styling from outside this stylesheet drew a rounded rectangle on it --
   a focus outline after a click, and an orange glow plus hairline on .active. Both looked
   like damage around a dot. Keyboard focus is shown on the span instead, in its own shape. */
.fang-app-container .fang-history-tick,
.fang-app-container .fang-history-tick.active,
.fang-app-container .fang-history-tick:hover,
.fang-app-container .fang-history-tick:focus,
.fang-app-container .fang-history-tick:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none;
    background: none;
}

.fang-app-container .fang-history-tick:focus-visible > span {
    box-shadow: 0 0 0 2px var(--fang-accent-gold), 0 0 0 5px rgba(var(--fang-accent-gold-rgb), 0.45);
}

.fang-history-tick:hover > span {
    transform: scale(1.35);
    background: var(--fang-accent-gold);
}

.fang-history-tick.active > span {
    background: var(--fang-primary-red);
    box-shadow: 0 0 0 2px var(--fang-accent-gold), 0 0 0 5px rgba(var(--fang-primary-red-rgb), 0.18);
    transform: scale(1.25);
}

/* Names whatever the pointer is on, or where the reading position is. */
.fang-history-axis-label {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    min-height: 1.4em;
    margin: 2px 0 0;
    color: var(--fang-primary-red);
    font-size: 0.86rem;
    font-weight: 600;
}

.fang-history-axis-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(var(--fang-primary-red-rgb), 0.12);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.fang-history-axis-count:empty {
    display: none;
}

.fang-app-container.fang-theme-cyberpunk .fang-history-sticky {
    --fang-history-rail-bg: rgba(3, 15, 26, 0.95);
    border-bottom-color: rgba(51, 217, 255, 0.45);
}

/* Restored after the time-axis rewrite replaced a range of this file that reached further
   than intended and took the whole entry-form styling with it. */
.fang-app-container .fang-history-when {
    margin-bottom: 10px;
}

.fang-app-container .fang-history-when .fang-segment {
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    line-height: 1.2;
}

.fang-app-container .fang-history-when-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fang-app-container .fang-history-when-main i {
    font-size: 0.95em;
    opacity: 0.85;
}

/* The date is context for the label above it, not a heading of its own. */
.fang-app-container .fang-history-when .fang-history-when-date {
    font-size: 0.8em;
    font-weight: 500;
    opacity: 0.72;
}

/* The plain red block read as a warning. A gold hairline and a little depth put it
   back in line with the rest of FANG's controls. */
.fang-app-container .fang-history-when .fang-segment.active {
    background: linear-gradient(180deg, rgba(var(--fang-primary-red-rgb), 0.94), var(--fang-primary-red));
    box-shadow: inset 0 0 0 1px rgba(var(--fang-accent-gold-rgb), 0.55), 0 1px 3px rgba(0, 0, 0, 0.22);
}

.fang-history-when-earlier {
    margin: 0 0 6px;
    padding: 10px 12px 4px;
    border: 1px solid rgba(var(--fang-accent-gold-rgb), 0.45);
    border-radius: 8px;
    background: rgba(var(--fang-accent-gold-rgb), 0.07);
}

.fang-history-when-earlier > label:first-child {
    margin-top: 0;
}

/* Day, month, year. The month carries the name, so it gets the room. */
.fang-app-container .fang-history-picker {
    display: grid;
    grid-template-columns: 5rem 1fr 6.5rem;
    gap: 8px;
    margin: 0 0 8px;
}

.fang-app-container .fang-history-picker select,
.fang-app-container .fang-history-picker input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 8px 10px;
    border-radius: 6px;
    /* Foundry gives number inputs a 32px line-height, which made the year field taller
       than the two selects beside it. */
    line-height: 1.2;
    font-size: 0.92rem;
}

.fang-app-container .fang-history-picker input[type="number"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* The resolved date, so nobody has to add the three fields up in their head. */
.fang-app-container .fang-history-picked {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(var(--fang-accent-gold-rgb), 0.16);
    color: var(--fang-primary-red);
    font-size: 0.92rem;
    font-weight: 600;
}

.fang-app-container .fang-history-picked i {
    opacity: 0.75;
}

/* Marks an entry that sits on the day it happened but was only learned of later. */
.fang-history-learned {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 6px;
    color: var(--fang-primary-red);
    font-size: 0.84rem;
    font-style: italic;
    opacity: 0.9;
}

/* Releasing the entry is its own decision, not a property of the GM notes it used to sit
   under. The frame is what says so at a glance. */
/* Faction membership is a list now, so it is shown as one. Each row carries the colour of
   its faction, because that is the colour its arc gets on the token ring. */
.fang-faction-picks {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--fang-border, rgba(212, 175, 55, 0.3));
    border-radius: 8px;
}

.fang-faction-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

.fang-faction-pick:last-child {
    border-bottom: none;
}

.fang-faction-pick.is-on {
    background: rgba(212, 175, 55, 0.09);
}

.fang-faction-pick .fang-editor-check {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.fang-faction-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
}

.fang-faction-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hidden until a second faction is ticked - with one there is nothing to choose. */
.fang-faction-primary {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    min-width: var(--ninjo-tippziel, 32px);
    min-height: var(--ninjo-tippziel, 32px);
    color: rgba(212, 175, 55, 0.55);
    line-height: 1;
}

.fang-faction-primary:hover,
.fang-faction-primary.is-primary {
    color: var(--ninjo-akzent, #d4af37);
}

.fang-history-release {
    margin: 10px 0 4px;
    padding: 10px 12px 4px;
    border: 1px solid rgba(var(--fang-accent-gold-rgb), 0.45);
    border-radius: 8px;
    background: rgba(var(--fang-accent-gold-rgb), 0.07);
}

.fang-history-release .fang-editor-check {
    margin: 0;
    font-weight: 600;
}

/* Time and category sit together at the head of an entry, right-aligned. */
.fang-history-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.fang-history-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fang-text-color);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.68;
    white-space: nowrap;
}

.fang-history-time i {
    font-size: 0.9em;
}

.fang-history-day {
    margin: 0 0 16px;
}

.fang-history-day h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--fang-primary-red);
    font-size: 0.98rem;
}

.fang-history-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fang-history-entry {
    background: rgba(255, 250, 240, 0.78);
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.2);
    border-radius: 8px;
    padding: 10px;
}

.fang-history-entry-media {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.fang-history-entry-media img {
    width: 54px;
    height: 54px;
    border: 2px solid rgba(var(--fang-accent-gold-rgb), 0.7);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.fang-history-entry-body {
    min-width: 0;
}

.fang-history-entry-head,
.fang-history-actions,
.fang-history-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fang-history-entry-head {
    align-items: flex-start;
}

.fang-history-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.fang-history-entry-head strong {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--fang-primary-red);
    min-width: 0;
    overflow-wrap: anywhere;
}

.fang-history-token-label {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: #4b3315;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fang-history-entry p {
    margin: 8px 0 0;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* GM-only context note below the player-visible text. Marked with a shield icon
   and a subtle red/gold tint so the GM can distinguish their private context
   at a glance. Players never receive this paragraph. */
.fang-history-entry p.fang-history-gm-text {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(var(--fang-primary-red-rgb), 0.05);
    border-left: 3px solid var(--fang-primary-red, var(--fang-primary-red));
    border-radius: 4px;
    font-style: italic;
    color: #5a3315;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.fang-history-entry p.fang-history-gm-text > i {
    color: var(--fang-primary-red, var(--fang-primary-red));
    margin-top: 3px;
    flex: 0 0 auto;
}

.fang-history-entry p.fang-history-gm-text > span {
    flex: 1 1 auto;
}

.fang-history-category {
    display: inline-flex;
    flex: 0 0 auto;
    width: fit-content;
    margin-left: auto;
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--fang-accent-gold-rgb), 0.14);
    color: #5d3f00;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
}

.fang-history-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.fang-history-refs span {
    border: 1px solid rgba(var(--fang-primary-red-rgb), 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    padding: 3px 7px;
    font-size: 0.78rem;
}

.fang-history-actions {
    justify-content: flex-end;
    margin-top: 8px;
}

.fang-history-empty {
    border: 1px dashed rgba(var(--fang-primary-red-rgb), 0.28);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    opacity: 0.78;
}

.fang-history-editor {
    display: grid;
    gap: 8px;
    overflow: auto;
    padding: 20px 24px 24px;
}

.fang-history-editor input[type="text"],
.fang-history-editor input[type="number"],
.fang-history-editor input[type="date"],
.fang-history-editor textarea,
.fang-history-editor select {
    width: 100%;
    border: 1px solid rgba(58, 42, 18, 0.22);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--fang-text-color);
    font-family: var(--fang-font-main);
    font-size: 0.95rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fang-history-editor input[type="text"],
.fang-history-editor input[type="number"],
.fang-history-editor input[type="date"],
.fang-history-editor select {
    min-height: 44px;
    padding: 8px 12px;
}

.fang-history-editor textarea {
    min-height: 92px;
    padding: 10px 12px;
    resize: vertical;
}

.fang-history-editor input[type="text"]:focus,
.fang-history-editor input[type="number"]:focus,
.fang-history-editor input[type="date"]:focus,
.fang-history-editor textarea:focus,
.fang-history-editor select:focus {
    border-color: var(--fang-accent-gold);
    outline: 2px solid rgba(var(--fang-accent-gold-rgb), 0.18);
    box-shadow: 0 0 0 1px rgba(var(--fang-accent-gold-rgb), 0.2);
}

.fang-history-editor textarea::placeholder,
.fang-history-editor input::placeholder {
    color: rgba(58, 42, 18, 0.55);
}

.fang-history-form-row {
    align-items: center;
    margin-top: 4px;
}

.fang-history-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 8px;
}

.fang-history-editor-actions .fang-history-save {
    width: auto;
    min-width: 150px;
    min-height: 38px;
    border: 2px solid var(--fang-accent-gold);
    border-radius: 4px;
    background: var(--fang-primary-red);
    color: var(--fang-header-text);
    font-weight: 800;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}

.fang-history-editor-actions .fang-history-save:hover {
    background: #a00000;
    color: var(--fang-header-text);
}

.fang-history-editor-actions .fang-history-cancel {
    width: auto;
    min-width: 0;
    min-height: 34px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(58, 42, 18, 0.75);
    font-weight: 700;
    padding: 6px 9px;
}

.fang-history-editor-actions .fang-history-cancel:hover {
    background: rgba(var(--fang-primary-red-rgb), 0.06);
    color: var(--fang-primary-red);
}

.fang-app-container.fang-theme-cyberpunk .fang-history-canvas-card {
    background: rgba(3, 15, 26, 0.95);
    border-color: #33d9ff;
    box-shadow: 0 0 0 1px rgba(51, 217, 255, 0.35), 0 22px 50px rgba(0, 0, 0, 0.45);
}

.fang-app-container.fang-theme-cyberpunk .fang-history-canvas-header {
    color: #33d9ff;
    border-bottom-color: #33d9ff;
}

.fang-app-container.fang-theme-cyberpunk .fang-history-editor input[type="text"],
.fang-app-container.fang-theme-cyberpunk .fang-history-editor input[type="number"],
.fang-app-container.fang-theme-cyberpunk .fang-history-editor input[type="date"],
.fang-app-container.fang-theme-cyberpunk .fang-history-editor textarea,
.fang-app-container.fang-theme-cyberpunk .fang-history-editor select {
    background: rgba(8, 18, 31, 0.82);
    border-color: rgba(51, 217, 255, 0.42);
    color: #eafcff;
}

.fang-app-container.fang-theme-cyberpunk .fang-history-editor-actions .fang-history-cancel {
    color: rgba(234, 252, 255, 0.75);
}

.fang-app-container .fang-canvas-prompt-panel {
    position: absolute;
    inset: 0;
    z-index: 1780;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
}

.fang-app-container .fang-canvas-prompt-card {
    position: relative;
    width: min(520px, 92%);
    min-width: 320px;
    background:
        radial-gradient(circle at top left, rgba(var(--fang-accent-gold-rgb), 0.12), transparent 34%),
        #fdfbf7;
    border: 2px solid var(--fang-accent-gold);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.48), 0 0 20px rgba(var(--fang-accent-gold-rgb), 0.18);
    overflow: hidden;
    animation: fangCinemaEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fang-app-container .fang-canvas-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 56px 12px 24px;
    border-bottom: 2px solid var(--fang-accent-gold);
    color: #3a2a12;
}

.fang-app-container .fang-canvas-prompt-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.fang-app-container .fang-canvas-prompt-header h3 i {
    color: var(--fang-accent-gold);
}

.fang-app-container .fang-canvas-prompt-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #888;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.fang-app-container .fang-canvas-prompt-close:hover {
    color: var(--fang-primary-red);
    background: rgba(var(--fang-primary-red-rgb), 0.06);
}

.fang-app-container .fang-canvas-prompt-body {
    padding: 18px 24px 8px;
    color: var(--fang-text-color);
}

.fang-app-container .fang-canvas-prompt-body p {
    margin: 0 0 12px;
}

.fang-app-container .fang-canvas-prompt-fields {
    display: grid;
    gap: 6px;
}

.fang-app-container .fang-canvas-prompt-fields label {
    font-weight: 800;
}

.fang-app-container .fang-canvas-prompt-fields input[type="number"],
.fang-app-container .fang-canvas-prompt-fields input[type="date"],
.fang-app-container .fang-canvas-prompt-fields input[type="text"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(58, 42, 18, 0.22);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--fang-text-color);
    font-family: var(--fang-font-main);
    font-size: 0.95rem;
    padding: 8px 12px;
}

.fang-app-container .fang-canvas-prompt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 24px 24px;
}

.fang-app-container .fang-canvas-prompt-action {
    width: auto;
    min-height: 38px;
    border: 1px solid rgba(58, 42, 18, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.72);
    color: #3a2a12;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fang-font-main);
    font-weight: 800;
    padding: 7px 13px;
}

.fang-app-container .fang-canvas-prompt-action.primary {
    border: 2px solid var(--fang-accent-gold);
    background: var(--fang-primary-red);
    color: var(--fang-header-text);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}

.fang-app-container .fang-canvas-prompt-action:hover {
    transform: translateY(-1px);
}

.fang-app-container.fang-theme-cyberpunk .fang-canvas-prompt-card {
    background: rgba(3, 15, 26, 0.95);
    border-color: #33d9ff;
}

.fang-app-container.fang-theme-cyberpunk .fang-canvas-prompt-header {
    color: #33d9ff;
    border-bottom-color: #33d9ff;
}

.fang-app-container.fang-theme-cyberpunk .fang-canvas-prompt-fields input[type="number"],
.fang-app-container.fang-theme-cyberpunk .fang-canvas-prompt-fields input[type="date"],
.fang-app-container.fang-theme-cyberpunk .fang-canvas-prompt-fields input[type="text"] {
    background: rgba(8, 18, 31, 0.82);
    border-color: rgba(51, 217, 255, 0.42);
    color: #eafcff;
}

@media (max-width: 760px) {
    .fang-app-container .fang-history-canvas-card {
        width: 94%;
        min-width: 0;
    }

    .fang-app-container .fang-canvas-prompt-card {
        width: 94%;
        min-width: 0;
    }

    .fang-history-log-header,
    .fang-history-filter-row,
    .fang-history-entry-media,
    .fang-history-form-row,
    .fang-history-editor-actions,
    .fang-app-container .fang-canvas-prompt-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fang-history-editor-actions .fang-history-save,
    .fang-history-editor-actions .fang-history-cancel,
    .fang-app-container .fang-canvas-prompt-action {
        width: 100%;
    }
}