/* ═══════════════════════════════════════════════════════
   Crackerio CRM — Custom Theme
   Light + Dark · Gold brand · Fraunces + Figtree
════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Figtree:wght@300;400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════
   CSS VARIABLES
   Border strategy: box-shadow: 0 0 0 1px var(--cr-border)
   everywhere — one consistent pixel.
════════════════════════════════════════════════════ */

/* ── Light theme ───────────────────────────────────── */
:root {
    --cr-gold:       #7A4608;
    --cr-gold-l:     #9A5E0A;
    --cr-gold-pale:  #BA7818;
    --cr-gold-btn:   linear-gradient(135deg, #BA7818, #7A4608);
    --cr-bg:         #EDE4CF;
    --cr-surface:    #E3D8C0;
    --cr-card:       #FFFFFF;
    --cr-text:       #2A1A08;
    --cr-text-hi:    #160C02;
    --cr-text-mid:   #6B4A18;
    --cr-border:     rgba(100,60,8,0.18);
    --cr-border-hi:  rgba(100,60,8,0.40);
    --cr-glow:       rgba(100,60,8,0.10);
    --cr-input-bg:   #FFFFFF;
    --cr-sidebar-bg: #E3D8C0;
    --cr-topbar-bg:  rgba(255,255,255,0.90);
    --cr-dot:        rgba(100,60,8,0.10);
    --cr-divider:    rgba(100,60,8,0.12);
}

/* ── Dark theme ────────────────────────────────────── */
html.dark {
    --cr-gold:       #C8830E;
    --cr-gold-l:     #E8AA3A;
    --cr-gold-pale:  #F5D080;
    --cr-gold-btn:   linear-gradient(135deg, #E8AA3A, #C8830E);
    --cr-bg:         #070402;
    --cr-surface:    #0E0703;
    --cr-card:       #160A04;
    --cr-text:       #D4C4A4;
    --cr-text-hi:    #F2E2C0;
    --cr-text-mid:   #7A6848;
    --cr-border:     rgba(200,130,14,0.24);
    --cr-border-hi:  rgba(200,130,14,0.52);
    --cr-glow:       rgba(200,130,14,0.12);
    --cr-input-bg:   #0E0703;
    --cr-sidebar-bg: #0E0703;
    --cr-topbar-bg:  rgba(7,4,2,0.88);
    --cr-dot:        rgba(200,130,14,0.15);
    --cr-divider:    rgba(200,130,14,0.12);
}

/* ════════════════════════════════════════════════════
   BORDER MIXIN
   All "card" borders use the same single rule:
   box-shadow: 0 0 0 1px var(--cr-border)
   This overrides Tailwind's ring + shadow-sm in one go.
════════════════════════════════════════════════════ */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-account,
.fi-simple-main .fi-section {
    box-shadow: 0 0 0 1px var(--cr-border) !important;
}

/* ════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════ */

html, body {
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif !important;
}

.fi-body {
    background-color: var(--cr-bg) !important;
    background-image: radial-gradient(circle, var(--cr-dot) 1px, transparent 1px) !important;
    background-size: 36px 36px !important;
}

html.dark .fi-layout::before {
    content: '';
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 280px;
    background: radial-gradient(ellipse, rgba(200,130,14,0.07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════ */

.fi-sidebar {
    background-color: var(--cr-card) !important;
    /* Right divider uses inset box-shadow — same 1px visual weight as all other borders */
    box-shadow: inset -1px 0 0 var(--cr-border) !important;
}

.fi-sidebar-nav,
.fi-sidebar-header {
    background-color: transparent !important;
}

.fi-sidebar-header {
    height: 4rem !important;
    display: flex !important;
    align-items: center !important;
    /* Bottom divider — matches topbar inset approach */
    box-shadow: inset 0 -1px 0 var(--cr-border) !important;
}

/* Nav items */
.fi-sidebar-item-button {
    border-radius: 8px !important;
    color: var(--cr-text) !important;
    transition: background-color 0.18s, color 0.18s !important;
}

.fi-sidebar-item-button:hover {
    background-color: color-mix(in srgb, var(--cr-gold) 10%, transparent) !important;
    color: var(--cr-gold-l) !important;
}

.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current="page"] {
    background-color: color-mix(in srgb, var(--cr-gold) 13%, transparent) !important;
    color: var(--cr-gold) !important;
    box-shadow: inset 3px 0 0 var(--cr-gold) !important;
}

html.dark .fi-sidebar-item-button.fi-active,
html.dark .fi-sidebar-item-button[aria-current="page"] {
    color: var(--cr-gold-l) !important;
}

.fi-sidebar-item-label       { font-weight: 500 !important; color: inherit !important; }
.fi-sidebar-item-icon        { color: inherit !important; }

.fi-sidebar-group-label {
    color: var(--cr-text-mid) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* ════════════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════════════ */

.fi-topbar {
    height: 4rem !important;
    background-color: var(--cr-topbar-bg) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    /* Use inset shadow — same 1px weight as sidebar and card borders */
    box-shadow: inset 0 -1px 0 var(--cr-border) !important;
}

nav.fi-topbar-nav {
    height: 100% !important;
    background-color: transparent !important;
}

/* ════════════════════════════════════════════════════
   MAIN CONTENT
════════════════════════════════════════════════════ */

.fi-main-ctn, main.fi-main { background-color: transparent !important; }

/* ════════════════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════════════════ */

.fi-header-heading, h1.fi-header-heading {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 700 !important;
    color: var(--cr-text-hi) !important;
    letter-spacing: -0.03em !important;
}

.fi-breadcrumbs-item-label                             { color: var(--cr-text-mid) !important; }
.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label { color: var(--cr-text) !important; }

/* ════════════════════════════════════════════════════
   SECTIONS
════════════════════════════════════════════════════ */

.fi-section {
    background-color: var(--cr-card) !important;
    border-radius: 12px !important;
    /* box-shadow border already set in the unified block above */
}

/* Header — only recolor, never change spacing */
.fi-section-header {
    background-color: transparent !important;
    border-bottom-color: var(--cr-border) !important;
}

.fi-section-header-heading {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--cr-text-hi) !important;
    font-weight: 700 !important;
}

/* Content container — only recolor the existing conditional border-top */
.fi-section-content-ctn {
    background-color: transparent !important;
    border-top-color: var(--cr-border) !important;
}

/* ════════════════════════════════════════════════════
   TABLE
════════════════════════════════════════════════════ */

.fi-ta-ctn {
    background-color: var(--cr-card) !important;
    border-radius: 12px !important;
    /* box-shadow border from unified block */
    overflow: hidden !important;
    --tw-divide-color: var(--cr-divider) !important;
}

/* Paint every layer of the table so body dots never bleed through */
.fi-ta-ctn table,
.fi-ta-ctn thead,
.fi-ta-ctn tbody,
.fi-ta-ctn tfoot,
.fi-ta-footer-ctn {
    background-color: var(--cr-card) !important;
}

.fi-ta-ctn > * + * { border-top-color: var(--cr-divider) !important; }

.fi-ta-header-ctn,
.fi-ta-header-toolbar { background-color: var(--cr-card) !important; }

/* Column headers */
thead th, .fi-table-header-cell {
    background-color: transparent !important;
    color: var(--cr-text-mid) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-bottom-color: var(--cr-divider) !important;
}

/* Rows */
.fi-ta-record {
    background-color: var(--cr-card) !important;
    transition: background-color 0.13s !important;
}

.fi-ta-record:hover,
.fi-ta-row:hover td {
    background-color: color-mix(in srgb, var(--cr-gold) 6%, var(--cr-card)) !important;
}

tbody td {
    color: var(--cr-text) !important;
    border-bottom-color: var(--cr-divider) !important;
}

.fi-ta-empty-state { color: var(--cr-text-mid) !important; }

/* ════════════════════════════════════════════════════
   WIDGETS
════════════════════════════════════════════════════ */

.fi-wi-stats-overview-stat,
.fi-wi-account {
    background-color: var(--cr-card) !important;
    border-radius: 12px !important;
    transition: box-shadow 0.2s !important;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px var(--cr-border-hi), 0 8px 28px var(--cr-glow) !important;
}

/* ════════════════════════════════════════════════════
   FORM FIELDS
════════════════════════════════════════════════════ */

.fi-fo-field-wrp-label,
.fi-fo-field-wrp > div > div > label {
    color: var(--cr-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.fi-fo-helper-text  { color: var(--cr-text-mid) !important; font-size: 12px !important; }
.fi-fo-field-wrp-error-message { color: #b91c1c !important; font-size: 12px !important; }
html.dark .fi-fo-field-wrp-error-message { color: #f87171 !important; }

/* ── Input wrapper — single consistent border ──────── */
.fi-input-wrp {
    background-color: var(--cr-input-bg) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    /* Replace Tailwind ring + shadow-sm with our 1px border */
    box-shadow: 0 0 0 1px var(--cr-border) !important;
    transition: box-shadow 0.15s !important;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--cr-gold), 0 0 0 3px var(--cr-glow) !important;
}

/* Inner inputs: transparent bg (wrapper paints it) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"] {
    background-color: transparent !important;
    color: var(--cr-text-hi) !important;
    border: none !important;
    box-shadow: none !important;
}

textarea {
    background-color: var(--cr-input-bg) !important;
    color: var(--cr-text-hi) !important;
    border: none !important;
    box-shadow: 0 0 0 1px var(--cr-border) !important;
    border-radius: 8px !important;
    transition: box-shadow 0.15s !important;
}

textarea:focus {
    box-shadow: 0 0 0 1px var(--cr-gold), 0 0 0 3px var(--cr-glow) !important;
    outline: none !important;
}

/* Choices.js select internals */
.choices__inner {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.choices__list--dropdown,
.choices__list[role="listbox"] {
    background-color: var(--cr-card) !important;
    box-shadow: 0 0 0 1px var(--cr-border-hi), 0 8px 32px rgba(0,0,0,0.12) !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

html.dark .choices__list--dropdown,
html.dark .choices__list[role="listbox"] {
    box-shadow: 0 0 0 1px var(--cr-border-hi), 0 8px 32px rgba(0,0,0,0.50) !important;
}

.choices__item--choice { color: var(--cr-text) !important; }

.choices__item--choice.is-highlighted,
.choices__item--choice:hover {
    background-color: color-mix(in srgb, var(--cr-gold) 12%, var(--cr-card)) !important;
    color: var(--cr-text-hi) !important;
}

/* ════════════════════════════════════════════════════
   TABS
════════════════════════════════════════════════════ */

.fi-tabs {
    background-color: transparent !important;
    border-bottom: 1px solid var(--cr-border) !important;
}

.fi-tabs-tab {
    color: var(--cr-text-mid) !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    background-color: transparent !important;
    transition: color 0.18s !important;
}

.fi-tabs-tab:hover   { color: var(--cr-text) !important; background-color: transparent !important; }

.fi-tabs-tab[aria-selected="true"] {
    color: var(--cr-gold) !important;
    border-bottom-color: var(--cr-gold) !important;
    background-color: transparent !important;
}

html.dark .fi-tabs-tab[aria-selected="true"] { color: var(--cr-gold-l) !important; border-bottom-color: var(--cr-gold-l) !important; }

/* ════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════ */

.fi-btn-color-primary {
    background: var(--cr-gold-btn) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.20) !important;
    transition: transform 0.14s, box-shadow 0.14s !important;
}

.fi-btn-color-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cr-gold) 35%, transparent) !important;
}

.fi-btn-color-gray {
    background-color: var(--cr-card) !important;
    box-shadow: 0 0 0 1px var(--cr-border) !important;
    border-color: transparent !important;
    color: var(--cr-text) !important;
}

.fi-btn-color-gray:hover {
    box-shadow: 0 0 0 1px var(--cr-border-hi) !important;
    color: var(--cr-text-hi) !important;
    background-color: color-mix(in srgb, var(--cr-gold) 6%, var(--cr-card)) !important;
}

/* ════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════ */

.fi-badge-color-warning {
    background-color: color-mix(in srgb, var(--cr-gold) 14%, transparent) !important;
    color: var(--cr-gold) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cr-gold) 32%, transparent) !important;
    border-color: transparent !important;
}

html.dark .fi-badge-color-warning { color: var(--cr-gold-l) !important; }

.fi-badge-color-success {
    background-color: rgba(34,197,94,0.12) !important;
    color: #15803d !important;
    box-shadow: 0 0 0 1px rgba(34,197,94,0.28) !important;
    border-color: transparent !important;
}

html.dark .fi-badge-color-success { color: #4ade80 !important; }

.fi-badge-color-info {
    background-color: rgba(14,165,233,0.12) !important;
    color: #0369a1 !important;
    box-shadow: 0 0 0 1px rgba(14,165,233,0.28) !important;
    border-color: transparent !important;
}

html.dark .fi-badge-color-info { color: #38bdf8 !important; }

.fi-badge-color-danger {
    background-color: rgba(239,68,68,0.12) !important;
    color: #b91c1c !important;
    box-shadow: 0 0 0 1px rgba(239,68,68,0.28) !important;
    border-color: transparent !important;
}

html.dark .fi-badge-color-danger { color: #f87171 !important; }

/* ════════════════════════════════════════════════════
   DROPDOWNS
════════════════════════════════════════════════════ */

.fi-dropdown-panel {
    background-color: var(--cr-card) !important;
    box-shadow: 0 0 0 1px var(--cr-border), 0 12px 40px rgba(0,0,0,0.12) !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

html.dark .fi-dropdown-panel {
    box-shadow: 0 0 0 1px var(--cr-border), 0 16px 48px rgba(0,0,0,0.55) !important;
}

.fi-dropdown-list-item-label  { color: var(--cr-text) !important; }

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus {
    background-color: color-mix(in srgb, var(--cr-gold) 10%, var(--cr-card)) !important;
}

/* ════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════ */

.fi-modal-window {
    background-color: var(--cr-card) !important;
    box-shadow: 0 0 0 1px var(--cr-border), 0 24px 80px rgba(0,0,0,0.18) !important;
    border: none !important;
    border-radius: 16px !important;
}

html.dark .fi-modal-window {
    background-color: var(--cr-surface) !important;
    box-shadow: 0 0 0 1px var(--cr-border), 0 24px 80px rgba(0,0,0,0.75) !important;
}

.fi-modal-header {
    border-bottom: 1px solid var(--cr-border) !important;
}

.fi-modal-header-heading {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--cr-text-hi) !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════
   NOTIFICATIONS
════════════════════════════════════════════════════ */

.fi-notification {
    background-color: var(--cr-card) !important;
    box-shadow: 0 0 0 1px var(--cr-border), 0 8px 32px rgba(0,0,0,0.12) !important;
    border: none !important;
}

html.dark .fi-notification {
    box-shadow: 0 0 0 1px var(--cr-border), 0 8px 32px rgba(0,0,0,0.55) !important;
}

.fi-notification-title { color: var(--cr-text-hi) !important; }
.fi-notification-body  { color: var(--cr-text) !important; }

/* ════════════════════════════════════════════════════
   TOGGLE
════════════════════════════════════════════════════ */

button[role="switch"][aria-checked="true"] {
    background-color: var(--cr-gold) !important;
}

/* ════════════════════════════════════════════════════
   FILE UPLOAD
════════════════════════════════════════════════════ */

.fi-fo-file-upload {
    background-color: var(--cr-input-bg) !important;
    box-shadow: 0 0 0 2px var(--cr-border) !important; /* 2px dashed feel via dash simulation below */
    border: 2px dashed var(--cr-border) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    transition: border-color 0.18s !important;
}

.fi-fo-file-upload:hover { border-color: var(--cr-border-hi) !important; }

/* ════════════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════════════ */

.fi-pagination-item > a,
.fi-pagination-item > button,
.fi-pagination-item > span {
    background-color: var(--cr-card) !important;
    box-shadow: 0 0 0 1px var(--cr-border) !important;
    border-color: transparent !important;
    color: var(--cr-text) !important;
}

.fi-pagination-item > [aria-current="page"],
.fi-pagination-item > button[aria-current="page"] {
    background: var(--cr-gold-btn) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════════════════ */

.fi-simple-layout {
    background-color: var(--cr-bg) !important;
    background-image: radial-gradient(circle, var(--cr-dot) 1px, transparent 1px) !important;
    background-size: 36px 36px !important;
    min-height: 100vh !important;
}

/* Subtle radial glow centered behind the card */
.fi-simple-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 40%, var(--cr-glow), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

html.dark .fi-simple-layout::before {
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200,130,14,0.10), transparent 70%);
}

/* The card IS .fi-simple-main — paint it, don't make it transparent */
.fi-simple-main {
    background-color: var(--cr-card) !important;
    position: relative;
    z-index: 1;
    box-shadow:
        0 0 0 1px var(--cr-border),
        0 8px 40px rgba(0,0,0,0.10),
        0 0 60px var(--cr-glow) !important;
}

html.dark .fi-simple-main {
    box-shadow:
        0 0 0 1px var(--cr-border),
        0 8px 48px rgba(0,0,0,0.60),
        0 0 60px var(--cr-glow) !important;
}

/* Inner divide-y wrapper (logo / form / links sections) */
.fi-simple-main > [class*="divide-y"],
.fi-simple-main .divide-y {
    background-color: var(--cr-card) !important;
}

/* Sections inside the login card inherit the card bg */
.fi-simple-main .fi-section {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════
   TIPTAP EDITOR
════════════════════════════════════════════════════ */

/* Outer frame: just recolor ring */
.tiptap-editor {
    background-color: var(--cr-card) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    /* Disable Tailwind shadow-sm + ring-1 */
    --tw-shadow: none !important;
    --tw-ring-shadow: none !important;
}

/* The actual visual border lives on the wrapper */
.tiptap-wrapper {
    background-color: var(--cr-input-bg) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 1px var(--cr-border) !important;
    /* Remove Tailwind's focus-within ring (it overlaps toolbar) */
    --tw-ring-shadow: none !important;
    transition: box-shadow 0.15s !important;
}

.tiptap-wrapper:focus-within {
    box-shadow: 0 0 0 1px var(--cr-gold), 0 0 0 3px var(--cr-glow) !important;
}

/* Toolbar */
.tiptap-toolbar {
    background-color: var(--cr-surface) !important;
    border-bottom: 1px solid var(--cr-border) !important;
    border-radius: 7px 7px 0 0 !important;
    --tw-divide-color: var(--cr-border) !important;
}

.tiptap-toolbar [class*="border-l"],
.tiptap-toolbar [class*="border-t"],
.tiptap-toolbar > div + div { border-color: var(--cr-border) !important; }

/* Toolbar buttons — no ring artifact */
.tiptap-tool {
    border-radius: 5px !important;
    color: var(--cr-text) !important;
    /* completely remove the ring-1 ring-transparent Tailwind classes */
    --tw-ring-shadow: none !important;
    --tw-ring-offset-shadow: none !important;
    box-shadow: none !important;
    transition: background-color 0.13s, color 0.13s !important;
}

.tiptap-tool:hover {
    background-color: color-mix(in srgb, var(--cr-gold) 12%, var(--cr-surface)) !important;
    color: var(--cr-text-hi) !important;
    box-shadow: none !important;
}

/* Active button state */
.tiptap-tool[class*="!bg-gray-500"],
.tiptap-tool .active {
    background-color: color-mix(in srgb, var(--cr-gold) 20%, var(--cr-surface)) !important;
}

/* Content scroll area — NO border, wrapper owns it */
.tiptap-prosemirror-wrapper {
    background-color: var(--cr-input-bg) !important;
    border-radius: 0 0 7px 7px !important;
}

/* ProseMirror — only text, no structural borders */
.ProseMirror {
    color: var(--cr-text-hi) !important;
    font-family: 'Figtree', sans-serif !important;
    line-height: 1.75 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ProseMirror p, .ProseMirror li { color: var(--cr-text) !important; }

.ProseMirror h1, .ProseMirror h2, .ProseMirror h3,
.ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--cr-text-hi) !important;
    font-weight: 700 !important;
}

.ProseMirror a { color: var(--cr-gold) !important; text-decoration: underline !important; }
html.dark .ProseMirror a { color: var(--cr-gold-l) !important; }

.ProseMirror code {
    background-color: color-mix(in srgb, var(--cr-gold) 12%, transparent) !important;
    color: var(--cr-gold) !important;
    border-radius: 4px !important;
    padding: 0.1em 0.35em !important;
}

html.dark .ProseMirror code { color: var(--cr-gold-pale) !important; }

.ProseMirror pre {
    background-color: var(--cr-surface) !important;
    box-shadow: 0 0 0 1px var(--cr-border) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 1rem !important;
}

.ProseMirror blockquote {
    border-left: 3px solid var(--cr-gold) !important;
    color: var(--cr-text-mid) !important;
    padding-left: 1rem !important;
}

/* ════════════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--cr-gold) 30%, transparent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--cr-gold) 55%, transparent); }

/* ════════════════════════════════════════════════════
   MISC
════════════════════════════════════════════════════ */

.fi-logo { text-decoration: none !important; }

.fi-header-heading {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--cr-text-hi) !important;
}