:root {
    --bg: #f4f1ea;
    --panel: #ffffff;
    --ink: #27231d;
    --muted: #6d665c;
    --line: #ddd5c8;
    --accent: #2f6f73;
    --accent-strong: #24575b;
    --danger-bg: #f9e3df;
    --danger-text: #8b2d21;
    --shadow: 0 18px 45px rgba(35, 31, 25, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
}

a {
    color: inherit;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(90deg, rgba(17, 12, 8, 0.72), rgba(17, 12, 8, 0.3) 50%, rgba(17, 12, 8, 0.62)),
        url("../images/ui/Tavern.png") center / cover no-repeat;
}

.auth-shell {
    width: min(100%, 560px);
    justify-self: start;
    margin-left: clamp(0px, 7vw, 112px);
}

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 680px;
    padding: 96px 104px 108px;
    border: 0;
    background: transparent url("../images/ui/Notice.png") center / 100% 100% no-repeat;
    box-shadow: none;
    color: #33261b;
    font-family: "MedievalSharp", Arial, Helvetica, sans-serif;
}

.login-copy {
    margin-bottom: 22px;
}

.login-panel p,
.login-panel label span {
    color: #4b3826;
    text-shadow: 0 1px 0 rgba(255, 244, 205, 0.34);
}

.login-panel input {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(89, 62, 37, 0.32);
}

.notice-title {
    margin: 0 0 12px;
    color: #4c170f;
    font-size: 1.42rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 219, 150, 0.48), 0 2px 4px rgba(69, 35, 16, 0.24);
    text-transform: uppercase;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 10px;
    font-size: 2rem;
    line-height: 1.1;
}

h2 {
    margin-bottom: 8px;
    font-size: 1.05rem;
}

p {
    color: var(--muted);
    line-height: 1.55;
}

.form-stack {
    display: grid;
    gap: 16px;
}

.form-fieldset {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

.form-fieldset legend {
    padding: 0 6px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.field-help {
    margin: 0;
    font-size: 0.9rem;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.checkbox-card {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 64px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #faf8f3;
    color: var(--ink);
}

.checkbox-card input {
    width: 18px;
    min-height: 18px;
    margin: 2px 0 0;
}

.checkbox-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.checkbox-card strong,
.checkbox-card small {
    overflow-wrap: anywhere;
}

.checkbox-card small {
    color: var(--muted);
    font-weight: 600;
}

.campaign-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: start;
    gap: 22px;
}

.campaign-edit-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.campaign-edit-layout .campaign-player-picker {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 150px);
    overflow: auto;
}

.campaign-edit-layout .campaign-player-picker .checkbox-grid {
    grid-template-columns: 1fr;
}

.campaign-player-picker summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.campaign-player-picker summary::-webkit-details-marker {
    display: none;
}

.campaign-player-picker summary::before {
    content: "+";
    display: grid;
    width: 24px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
    line-height: 1;
}

.campaign-player-picker[open] summary::before {
    content: "-";
}

.campaign-player-picker summary strong {
    margin-right: auto;
}

.campaign-player-picker summary span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .campaign-edit-layout {
        grid-template-columns: 1fr;
    }

    .campaign-edit-layout .campaign-player-picker {
        position: static;
        max-height: none;
    }
}

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

input,
select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--ink);
    font: inherit;
}

textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--ink);
    font: inherit;
    line-height: 1.45;
}

input:focus,
select:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(47, 111, 115, 0.16);
}

textarea:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(47, 111, 115, 0.16);
}

.note-format-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin: 0 0 1px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 8px;
    padding: 4px;
    background: color-mix(in srgb, var(--panel) 76%, transparent);
    box-shadow: 0 4px 12px rgba(35, 31, 25, 0.08);
}

.note-format-button {
    display: inline-grid;
    width: 32px;
    min-height: 30px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    padding: 0;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.note-format-button:hover,
.note-format-button:focus {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-strong);
    outline: 0;
}

.note-format-button[data-format="bold"] {
    font-weight: 900;
}

.note-format-button[data-format="italic"] {
    font-style: italic;
    font-weight: 800;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 9px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.button.primary {
    background: var(--accent);
    color: #ffffff;
}

.button.primary:hover {
    background: var(--accent-strong);
}

.button.ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.icon-button {
    width: 44px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.alert {
    margin-bottom: 18px;
    border-radius: 6px;
    background: var(--danger-bg);
    color: var(--danger-text);
    padding: 12px 14px;
    font-weight: 700;
}

.app-page {
    min-height: 100vh;
}

.dashboard-landing-page {
    background:
        linear-gradient(90deg, rgba(7, 8, 9, 0.72), rgba(7, 8, 9, 0.38) 48%, rgba(7, 8, 9, 0.7)),
        url("../images/ui/Dungeon entrance.png") center / cover fixed no-repeat;
    font-family: "Metamorphous", Arial, Helvetica, sans-serif;
}

.dashboard-landing-page .button,
.dashboard-landing-page input,
.dashboard-landing-page select,
.dashboard-landing-page textarea,
.dashboard-landing-page table {
    font-family: "Metamorphous", Arial, Helvetica, sans-serif;
}

.dashboard-landing-page .topbar {
    border-bottom-color: rgba(255, 244, 220, 0.18);
    background: rgba(13, 12, 10, 0.48);
    color: #fff7e8;
    backdrop-filter: blur(6px);
}

.dashboard-landing-page .topbar .button,
.dashboard-landing-page .page-header .compact-actions .button {
    min-height: 44px;
    border: 0;
    background: transparent url("../images/ui/Banner parchment transparent.png") center / 100% 100% no-repeat;
    color: #3f2b1a;
    box-shadow: none;
    text-shadow: 0 1px 0 rgba(255, 244, 205, 0.45);
}

.dashboard-landing-page .page-header .compact-actions .button {
    min-width: 174px;
    padding: 13px 24px;
}

.dashboard-landing-page .topbar .button {
    padding: 11px 24px;
}

.dashboard-landing-page .topbar .button:hover,
.dashboard-landing-page .page-header .compact-actions .button:hover {
    color: #2f6f73;
}

.dashboard-landing-page .content {
    color: #fff7e8;
}

.dashboard-landing-page .page-header p,
.dashboard-landing-page .section-heading,
.dashboard-landing-page .section-heading h2 {
    color: #efe2ca;
}

.dashboard-landing-page .page-header .eyebrow {
    color: #f0ba5a;
}

.dashboard-landing-page .module-card,
.dashboard-landing-page .table-panel,
.dashboard-landing-page .empty-state {
    background: rgba(255, 252, 244, 0.9);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.dashboard-landing-page .dashboard-board {
    display: grid;
    align-items: start;
    gap: 28px;
}

.dashboard-landing-page .dashboard-board.has-admin-panel {
    grid-template-columns: minmax(420px, 720px) minmax(360px, 430px);
    justify-content: space-between;
}

.dashboard-landing-page .dashboard-campaign-list {
    grid-template-columns: 1fr;
    max-width: 720px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 186, 90, 0.62) transparent;
}

.dashboard-landing-page .dashboard-campaign-list::-webkit-scrollbar,
.dashboard-landing-page .admin-user-roster::-webkit-scrollbar {
    width: 8px;
}

.dashboard-landing-page .dashboard-campaign-list::-webkit-scrollbar-track,
.dashboard-landing-page .admin-user-roster::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-landing-page .dashboard-campaign-list::-webkit-scrollbar-thumb,
.dashboard-landing-page .admin-user-roster::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(240, 186, 90, 0.62);
}

.dashboard-landing-page .campaign-card {
    display: grid;
    gap: 18px;
    min-height: 190px;
    border: 0;
    background: transparent url("../images/ui/Banner parchment transparent.png") center / 100% 100% no-repeat;
    box-shadow: none;
    color: #3f2b1a;
    padding: 38px 48px 34px;
}

.dashboard-landing-page .dashboard-campaign-card-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.dashboard-landing-page .dashboard-campaign-marks {
    display: grid;
    grid-template-columns: repeat(2, 92px);
    align-items: center;
    gap: 12px;
}

.dashboard-landing-page .dashboard-campaign-marks img {
    width: 92px;
    max-height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(63, 43, 26, 0.24));
}

.dashboard-landing-page .dashboard-campaign-copy {
    min-width: 0;
}

.dashboard-landing-page .campaign-card h2,
.dashboard-landing-page .campaign-card p {
    color: #3f2b1a;
}

.dashboard-landing-page .campaign-card h2 {
    margin-bottom: 4px;
    font-size: 2rem;
}

.dashboard-landing-page .dashboard-campaign-copy > p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-landing-page .campaign-card .eyebrow {
    margin-bottom: 4px;
    color: #2f6f73;
}

.dashboard-landing-page .campaign-card .meta-row {
    color: #5f4a36;
}

.dashboard-landing-page .admin-users-card .table-panel {
    border: 0;
    background: transparent url("../images/ui/Notice 2 transparent.png") center / 100% 100% no-repeat;
    box-shadow: none;
    color: #3f2b1a;
    min-height: 560px;
    padding: 96px 58px 96px;
}

.dashboard-landing-page .admin-user-heading {
    color: #5f4a36;
}

.dashboard-landing-page .admin-users-card .status-pill {
    border-color: rgba(95, 74, 54, 0.32);
    background: rgba(255, 246, 218, 0.34);
    color: #5f4a36;
}

.admin-user-roster {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 74, 54, 0.5) transparent;
}

.admin-user-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(72px, 0.75fr) auto auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(95, 74, 54, 0.22);
    padding: 8px 0;
    color: #3f2b1a;
    font-size: 0.74rem;
}

.admin-user-heading {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-user-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.admin-user-row .status-pill {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 0.68rem;
}

.admin-user-row .table-action {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 0.68rem;
}

.campaign-create-page {
    background:
        linear-gradient(90deg, rgba(10, 7, 4, 0.72), rgba(10, 7, 4, 0.28) 48%, rgba(10, 7, 4, 0.68)),
        url("../images/ui/Cartographer.png") center / cover fixed no-repeat;
    color: #fff7e8;
    font-family: "Metamorphous", Arial, Helvetica, sans-serif;
}

.campaign-create-page .button,
.campaign-create-page input,
.campaign-create-page select,
.campaign-create-page textarea {
    font-family: "Metamorphous", Arial, Helvetica, sans-serif;
}

.campaign-create-page .topbar {
    border-bottom-color: rgba(255, 244, 220, 0.18);
    background: rgba(13, 10, 7, 0.48);
    color: #fff7e8;
    backdrop-filter: blur(6px);
}

.campaign-create-page .content {
    display: grid;
    grid-template-columns: minmax(420px, 560px);
    align-items: start;
    justify-content: center;
    min-height: calc(100vh - 72px);
    padding-left: clamp(230px, 38vw, 700px);
    padding-right: clamp(100px, 13vw, 260px);
}

.campaign-create-page .form-panel-title {
    margin: 0 0 18px;
    color: #f0ba5a;
    font-family: "Metamorphous", Arial, Helvetica, sans-serif;
    font-size: 2.35rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.campaign-create-page .form-panel {
    width: min(100%, 620px);
    max-width: none;
    margin-top: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #2e2116;
    padding: 8px 18px 34px;
    text-shadow: 0 1px 0 rgba(255, 228, 173, 0.34);
    transform: translate(28px, 52px);
}

.campaign-create-page .form-stack {
    gap: 9px;
}

.campaign-create-page .form-panel textarea {
    min-height: 96px;
}

.campaign-create-page .form-panel label span {
    color: #f0ba5a;
    font-size: 0.76rem;
    font-weight: 800;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.48);
    text-transform: uppercase;
}

.campaign-create-page .form-panel input,
.campaign-create-page .form-panel select,
.campaign-create-page .form-panel textarea {
    border-color: rgba(89, 62, 37, 0.34);
    background: rgba(255, 244, 214, 0.54);
    color: #2e2116;
    box-shadow: inset 0 1px 4px rgba(58, 34, 14, 0.16);
}

.campaign-create-page .form-panel .button {
    min-width: 190px;
    min-height: 56px;
    border: 0;
    background: transparent url("../images/ui/Banner parchment transparent.png") center / 100% 100% no-repeat;
    color: #3f2b1a;
    padding: 16px 34px;
    box-shadow: none;
    text-shadow: 0 1px 0 rgba(255, 244, 205, 0.45);
}

.campaign-create-page .form-panel .button:hover {
    color: #2f6f73;
}

.campaign-create-page .topbar .button {
    min-height: 44px;
    border: 0;
    background: transparent url("../images/ui/Banner parchment transparent.png") center / 100% 100% no-repeat;
    color: #3f2b1a;
    padding: 11px 24px;
    box-shadow: none;
}

.user-create-page {
    background:
        linear-gradient(90deg, rgba(10, 7, 4, 0.58), rgba(10, 7, 4, 0.16) 46%, rgba(10, 7, 4, 0.62)),
        url("../images/ui/Adventurer log.png") center / cover fixed no-repeat;
    color: #fff7e8;
    font-family: "Metamorphous", Arial, Helvetica, sans-serif;
}

.user-create-page .button,
.user-create-page input,
.user-create-page select,
.user-create-page textarea {
    font-family: "Metamorphous", Arial, Helvetica, sans-serif;
}

.user-create-page .topbar {
    border-bottom-color: rgba(255, 244, 220, 0.18);
    background: rgba(13, 10, 7, 0.48);
    color: #fff7e8;
    backdrop-filter: blur(6px);
}

.user-create-page .content {
    display: grid;
    grid-template-columns: minmax(420px, 560px);
    align-items: start;
    justify-content: end;
    min-height: calc(100vh - 72px);
    padding-left: clamp(260px, 30vw, 580px);
    padding-right: clamp(260px, 24vw, 480px);
}

.user-create-page .form-panel {
    width: min(100%, 600px);
    max-height: calc(100vh - 112px);
    margin-top: 0;
    overflow-y: auto;
    scrollbar-width: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #2e2116;
    padding: 14px 18px 34px;
    text-shadow: 0 1px 0 rgba(255, 228, 173, 0.34);
    transform: translateY(30px);
}

.user-create-page .form-panel::-webkit-scrollbar {
    display: none;
}

.user-create-page .form-panel-title {
    margin: 0 0 16px;
    color: #f0ba5a;
    font-size: 2.1rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.user-create-page .form-stack {
    gap: 8px;
}

.user-create-page .form-panel label span,
.user-create-page .form-fieldset legend {
    color: #f0ba5a;
    font-size: 0.72rem;
    font-weight: 800;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.48);
    text-transform: uppercase;
}

.user-create-page .form-panel input,
.user-create-page .form-panel select {
    min-height: 40px;
    border-color: rgba(89, 62, 37, 0.34);
    background: rgba(255, 244, 214, 0.54);
    color: #2e2116;
    box-shadow: inset 0 1px 4px rgba(58, 34, 14, 0.16);
}

.user-create-page .form-fieldset {
    border-color: rgba(89, 62, 37, 0.32);
    background: rgba(255, 244, 214, 0.18);
    padding: 12px;
}

.user-create-page .form-fieldset .checkbox-grid {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 6px;
}

.user-create-page .field-help {
    margin-bottom: 8px;
    color: #4d3928;
    font-size: 0.78rem;
}

.user-create-page .checkbox-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.user-create-page .checkbox-card {
    border-color: rgba(89, 62, 37, 0.28);
    background: rgba(255, 244, 214, 0.34);
    min-height: 92px;
    padding: 12px;
}

.user-create-page .checkbox-card span {
    gap: 6px;
}

.user-create-page .checkbox-card select {
    width: 100%;
    min-height: 36px;
}

.user-create-page .checkbox-card strong,
.user-create-page .checkbox-card small {
    color: #2e2116;
}

.user-create-page .form-panel .button,
.user-create-page .topbar .button {
    min-height: 44px;
    border: 0;
    background: transparent url("../images/ui/Banner parchment transparent.png") center / 100% 100% no-repeat;
    color: #3f2b1a;
    box-shadow: none;
    text-shadow: 0 1px 0 rgba(255, 244, 205, 0.45);
}

.user-create-page .form-panel .button {
    min-width: 190px;
    min-height: 54px;
    padding: 15px 28px;
}

.user-create-page .topbar .button {
    padding: 11px 24px;
}

.user-create-page .form-panel .button:hover,
.user-create-page .topbar .button:hover {
    color: #2f6f73;
}

.campaign-ambient-gothic-horror {
    --bg: #050505;
    --panel: #181818;
    --ink: #f7f2ea;
    --muted: #c8beb6;
    --line: #4a2c2f;
    --accent: #8b000d;
    --accent-strong: #d13a42;
    --danger-bg: #2a070b;
    --danger-text: #ffd9dc;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
}

.campaign-ambient-victorian-cosmic-horror {
    --bg: #170d25;
    --panel: #231336;
    --ink: #d7f2bf;
    --muted: #a8c88e;
    --line: #4a315f;
    --accent: #3f8f57;
    --accent-strong: #226036;
    --danger-bg: #32162c;
    --danger-text: #f5c9dc;
    --shadow: 0 18px 48px rgba(8, 2, 18, 0.42);
}

.campaign-ambient-high-fantasy {
    --bg: #552016;
    --panel: #f7ead0;
    --ink: #3a0705;
    --muted: #64331f;
    --line: #8a311b;
    --accent: #c7a24a;
    --accent-strong: #c6c8cd;
    --danger-bg: #ead5a2;
    --danger-text: #64140f;
    --shadow: 0 18px 45px rgba(58, 7, 5, 0.2);
}

.campaign-ambient-gothic-horror,
.campaign-ambient-victorian-cosmic-horror,
.campaign-ambient-high-fantasy {
    background: var(--bg);
}

.campaign-ambient-gothic-horror h1,
.campaign-ambient-gothic-horror h2,
.campaign-ambient-gothic-horror .campaign-toolbar a,
.campaign-ambient-gothic-horror .subsection-toolbar a {
    font-family: "MedievalSharp", Georgia, "Times New Roman", serif;
    letter-spacing: 0;
}

.campaign-ambient-gothic-horror .button,
.campaign-ambient-gothic-horror label,
.campaign-ambient-gothic-horror .eyebrow,
.campaign-ambient-gothic-horror .topbar strong,
.campaign-ambient-gothic-horror .relations-group h3 {
    font-family: "MedievalSharp", Georgia, "Times New Roman", serif;
}

.campaign-ambient-gothic-horror .relations-group h3 {
    text-transform: none;
}

.campaign-ambient-victorian-cosmic-horror h1,
.campaign-ambient-victorian-cosmic-horror h2,
.campaign-ambient-victorian-cosmic-horror .campaign-toolbar a,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar a {
    font-family: "Amarante", "Goudy Old Style", Georgia, "Times New Roman", serif;
    letter-spacing: 0;
}

.campaign-ambient-victorian-cosmic-horror .button,
.campaign-ambient-victorian-cosmic-horror label,
.campaign-ambient-victorian-cosmic-horror .eyebrow,
.campaign-ambient-victorian-cosmic-horror .topbar strong {
    font-family: "Amarante", "Goudy Old Style", Georgia, "Times New Roman", serif;
}

.campaign-ambient-high-fantasy h1,
.campaign-ambient-high-fantasy h2,
.campaign-ambient-high-fantasy .campaign-toolbar a,
.campaign-ambient-high-fantasy .subsection-toolbar a {
    font-family: "Metamorphous", "Palatino Linotype", Palatino, Georgia, serif;
}

.campaign-ambient-high-fantasy .button,
.campaign-ambient-high-fantasy label,
.campaign-ambient-high-fantasy .eyebrow,
.campaign-ambient-high-fantasy .topbar strong,
.campaign-ambient-high-fantasy .relations-group h3 {
    font-family: "Metamorphous", "Palatino Linotype", Palatino, Georgia, serif;
}

.campaign-ambient-gothic-horror .topbar,
.campaign-ambient-victorian-cosmic-horror .topbar,
.campaign-ambient-high-fantasy .topbar,
.campaign-ambient-gothic-horror .campaign-toolbar,
.campaign-ambient-victorian-cosmic-horror .campaign-toolbar,
.campaign-ambient-high-fantasy .campaign-toolbar,
.campaign-ambient-gothic-horror .subsection-toolbar,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar,
.campaign-ambient-high-fantasy .subsection-toolbar {
    background: var(--panel);
}

.campaign-ambient-gothic-horror .button.primary,
.campaign-ambient-gothic-horror .campaign-toolbar a.active,
.campaign-ambient-gothic-horror .subsection-toolbar a.active {
    background:
        radial-gradient(ellipse at 32% 22%, rgba(255, 224, 198, 0.25), transparent 16%),
        radial-gradient(ellipse at 67% 72%, rgba(46, 0, 7, 0.62), transparent 36%),
        radial-gradient(ellipse at 50% 50%, #960716 0%, #65040e 58%, #2b0207 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow:
        inset 0 5px 10px rgba(255, 214, 183, 0.18),
        inset 0 -9px 14px rgba(26, 0, 4, 0.84),
        0 7px 15px rgba(0, 0, 0, 0.42);
    text-shadow:
        0 1px 0 rgba(255, 225, 205, 0.36),
        0 -2px 1px rgba(36, 0, 5, 0.92),
        2px 2px 2px rgba(28, 0, 4, 0.78);
}

.campaign-ambient-gothic-horror .button.ghost,
.campaign-ambient-gothic-horror .campaign-toolbar a,
.campaign-ambient-gothic-horror .subsection-toolbar a {
    position: relative;
    isolation: isolate;
    justify-content: flex-start;
    align-items: center;
    min-height: 52px;
    overflow: hidden;
    border-color: transparent;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 214, 190, 0.2), transparent 34%),
        radial-gradient(ellipse at 22% 12%, rgba(255, 230, 210, 0.32), transparent 17%),
        radial-gradient(ellipse at 65% 95%, rgba(43, 0, 6, 0.58), transparent 42%),
        linear-gradient(180deg, #b70b19 0%, #7e050f 58%, #3a0208 100%);
    color: #ffffff;
    padding: 10px 18px;
    font-size: 1rem;
    box-shadow:
        inset 0 2px 0 rgba(255, 220, 198, 0.25),
        inset 0 0 0 2px rgba(135, 8, 18, 0.85),
        inset 0 -7px 12px rgba(31, 0, 5, 0.7),
        0 2px 7px rgba(0, 0, 0, 0.38);
    text-shadow:
        0 1px 0 rgba(255, 230, 210, 0.4),
        0 -2px 1px rgba(42, 0, 5, 0.94),
        2px 2px 2px rgba(28, 0, 4, 0.76);
}

.campaign-ambient-gothic-horror .button.ghost::before,
.campaign-ambient-gothic-horror .campaign-toolbar a::before,
.campaign-ambient-gothic-horror .subsection-toolbar a::before {
    content: "";
    position: absolute;
    inset: 4px 5px;
    z-index: -1;
    border-radius: 6px;
    background:
        radial-gradient(ellipse at 28% 18%, rgba(255, 225, 204, 0.24), transparent 20%),
        radial-gradient(ellipse at 50% 60%, rgba(55, 0, 8, 0.18), transparent 58%);
    box-shadow:
        inset 0 1px 3px rgba(255, 204, 174, 0.24),
        inset 0 -3px 7px rgba(31, 0, 5, 0.72),
        0 0 0 1px rgba(62, 0, 8, 0.5);
}

.campaign-ambient-gothic-horror .button.ghost::after,
.campaign-ambient-gothic-horror .campaign-toolbar a::after,
.campaign-ambient-gothic-horror .subsection-toolbar a::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: -1;
    width: 42%;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 232, 214, 0.24);
    filter: blur(4px);
}

.campaign-ambient-gothic-horror .campaign-toolbar a span,
.campaign-ambient-gothic-horror .subsection-toolbar a span {
    position: relative;
    z-index: 1;
    width: auto;
    text-align: left;
}

.campaign-ambient-gothic-horror .campaign-toolbar a .toolbar-icon,
.campaign-ambient-gothic-horror .subsection-toolbar a .toolbar-icon {
    display: block;
    position: relative;
    z-index: 1;
}

.campaign-ambient-gothic-horror .module-card,
.campaign-ambient-gothic-horror .detail-panel,
.campaign-ambient-gothic-horror .form-panel,
.campaign-ambient-gothic-horror .form-card,
.campaign-ambient-gothic-horror .note-card,
.campaign-ambient-gothic-horror .loot-card,
.campaign-ambient-gothic-horror .foc-panel,
.campaign-ambient-gothic-horror .coin-card,
.campaign-ambient-gothic-horror .foc-row,
.campaign-ambient-gothic-horror .encounter-item-row,
.campaign-ambient-gothic-horror .relations-sidebar,
.campaign-ambient-gothic-horror .empty-state,
.campaign-ambient-gothic-horror .table-panel {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px),
        linear-gradient(45deg, rgba(255, 255, 255, 0.025), transparent 32% 68%, rgba(0, 0, 0, 0.18)),
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.05), transparent 22%),
        radial-gradient(circle at 78% 70%, rgba(139, 0, 13, 0.12), transparent 28%),
        #181818;
    border-color: #4a2c2f;
    color: #f7f2ea;
}

.campaign-ambient-gothic-horror .module-card p,
.campaign-ambient-gothic-horror .detail-panel p,
.campaign-ambient-gothic-horror .form-panel p,
.campaign-ambient-gothic-horror .form-card p,
.campaign-ambient-gothic-horror .loot-card,
.campaign-ambient-gothic-horror .foc-panel,
.campaign-ambient-gothic-horror .coin-card,
.campaign-ambient-gothic-horror .foc-row,
.campaign-ambient-gothic-horror .empty-state p {
    color: #efe6d8;
}

.campaign-ambient-gothic-horror .relations-sidebar {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 15px),
        linear-gradient(45deg, rgba(255, 255, 255, 0.025), transparent 34% 64%, rgba(0, 0, 0, 0.22)),
        radial-gradient(circle at 22% 18%, rgba(202, 218, 218, 0.09), transparent 20%),
        radial-gradient(circle at 76% 72%, rgba(0, 0, 0, 0.3), transparent 26%),
        linear-gradient(180deg, #242a2b, #151819);
    border-color: #455052;
    box-shadow:
        inset 0 0 24px rgba(255, 255, 255, 0.025),
        inset 0 0 48px rgba(0, 0, 0, 0.48),
        0 18px 40px rgba(0, 0, 0, 0.34);
}

.campaign-ambient-gothic-horror .relations-group {
    border-bottom-color: #3d4647;
}

.campaign-ambient-gothic-horror .relation-row {
    border-color: #566061;
    background:
        linear-gradient(12deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 14px),
        linear-gradient(96deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 22px),
        radial-gradient(ellipse at 16% 20%, rgba(213, 229, 226, 0.13), transparent 22%),
        radial-gradient(ellipse at 86% 78%, rgba(0, 0, 0, 0.36), transparent 30%),
        linear-gradient(155deg, #3b4344 0%, #252b2c 46%, #15191a 100%);
    background-size: 18px 18px, 28px 100%, auto, auto, auto;
    color: #f4efe6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -12px 22px rgba(0, 0, 0, 0.28),
        0 6px 14px rgba(0, 0, 0, 0.28);
}

.campaign-ambient-gothic-horror .compact-relation-row .inline-meta,
.campaign-ambient-gothic-horror .relation-row .inline-meta,
.campaign-ambient-gothic-horror .empty-inline {
    color: #d3c8bc;
}

.campaign-ambient-gothic-horror .tag-pill {
    border-color: #697475;
    background: rgba(8, 10, 11, 0.42);
    color: #eee6d8;
}

.campaign-ambient-gothic-horror .warning-pill {
    border-color: #8c6a36;
    background: rgba(74, 49, 18, 0.55);
    color: #f4d596;
}

.campaign-ambient-gothic-horror .sidebar-relation-form,
.campaign-ambient-gothic-horror .relation-suggestions {
    border-top-color: #3d4647;
}

.campaign-ambient-gothic-horror .relation-remove-button {
    border-color: #687273;
    background: #111516;
    color: #f4efe6;
}

.campaign-ambient-gothic-horror input,
.campaign-ambient-gothic-horror select,
.campaign-ambient-gothic-horror textarea {
    background: #070707;
    border-color: #5a3237;
    color: #fff8ed;
}

.campaign-ambient-gothic-horror input::placeholder,
.campaign-ambient-gothic-horror textarea::placeholder {
    color: #b9aaa2;
}

.campaign-ambient-gothic-horror .note-format-toolbar {
    border-color: #4a2c2f;
    background: linear-gradient(180deg, rgba(44, 4, 9, 0.88), rgba(7, 7, 7, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 218, 190, 0.08), 0 8px 18px rgba(0, 0, 0, 0.28);
}

.campaign-ambient-gothic-horror .note-format-button {
    color: #f7f2ea;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.campaign-ambient-gothic-horror .note-format-button:hover,
.campaign-ambient-gothic-horror .note-format-button:focus {
    border-color: #8b000d;
    background: radial-gradient(ellipse at 50% 45%, #8b000d, #2b0207);
    color: #ffffff;
}

.campaign-ambient-victorian-cosmic-horror .button.primary,
.campaign-ambient-victorian-cosmic-horror .campaign-toolbar a.active,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar a.active {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: transparent;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(221, 255, 206, 0.3), transparent 17%),
        radial-gradient(ellipse at 72% 74%, rgba(25, 3, 43, 0.62), transparent 39%),
        radial-gradient(ellipse at 50% 50%, #48a862 0%, #2f7044 56%, #16341f 100%);
    color: #f4ffe9;
    box-shadow:
        inset 0 5px 10px rgba(219, 255, 197, 0.2),
        inset 0 -9px 14px rgba(11, 2, 19, 0.78),
        0 7px 15px rgba(8, 2, 18, 0.46);
    text-shadow:
        0 1px 0 rgba(225, 255, 209, 0.34),
        0 -2px 1px rgba(10, 2, 18, 0.9),
        2px 2px 2px rgba(11, 2, 20, 0.74);
}

.campaign-ambient-victorian-cosmic-horror .button.ghost,
.campaign-ambient-victorian-cosmic-horror .campaign-toolbar a,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar a {
    position: relative;
    isolation: isolate;
    justify-content: flex-start;
    align-items: center;
    min-height: 52px;
    overflow: hidden;
    border-color: transparent;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(222, 255, 205, 0.22), transparent 34%),
        radial-gradient(ellipse at 22% 12%, rgba(234, 255, 214, 0.35), transparent 17%),
        radial-gradient(ellipse at 67% 92%, rgba(34, 8, 53, 0.65), transparent 43%),
        linear-gradient(180deg, #4cae66 0%, #2f7044 56%, #172f22 100%);
    color: #f1ffe7;
    padding: 10px 18px;
    font-size: 1rem;
    box-shadow:
        inset 0 2px 0 rgba(226, 255, 208, 0.28),
        inset 0 0 0 2px rgba(74, 151, 91, 0.78),
        inset 0 -7px 12px rgba(12, 4, 23, 0.7),
        0 2px 8px rgba(8, 2, 18, 0.4);
    text-shadow:
        0 1px 0 rgba(232, 255, 216, 0.38),
        0 -2px 1px rgba(11, 2, 19, 0.9),
        2px 2px 2px rgba(12, 2, 22, 0.72);
}

.campaign-ambient-victorian-cosmic-horror .button.primary::before,
.campaign-ambient-victorian-cosmic-horror .button.ghost::before,
.campaign-ambient-victorian-cosmic-horror .campaign-toolbar a::before,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar a::before {
    content: "";
    position: absolute;
    inset: 4px 5px;
    z-index: -1;
    border-radius: 6px;
    background:
        radial-gradient(ellipse at 28% 18%, rgba(233, 255, 217, 0.26), transparent 21%),
        radial-gradient(ellipse at 50% 62%, rgba(40, 11, 58, 0.24), transparent 58%);
    box-shadow:
        inset 0 1px 3px rgba(226, 255, 207, 0.26),
        inset 0 -3px 7px rgba(13, 3, 22, 0.68),
        0 0 0 1px rgba(50, 19, 70, 0.5);
}

.campaign-ambient-victorian-cosmic-horror .button.primary::after,
.campaign-ambient-victorian-cosmic-horror .button.ghost::after,
.campaign-ambient-victorian-cosmic-horror .campaign-toolbar a::after,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar a::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: -1;
    width: 42%;
    height: 9px;
    border-radius: 999px;
    background: rgba(236, 255, 224, 0.28);
    filter: blur(4px);
}

.campaign-ambient-victorian-cosmic-horror .campaign-toolbar a span,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar a span,
.campaign-ambient-victorian-cosmic-horror .campaign-toolbar a .toolbar-icon,
.campaign-ambient-victorian-cosmic-horror .subsection-toolbar a .toolbar-icon {
    position: relative;
    z-index: 1;
}

.campaign-ambient-victorian-cosmic-horror .note-format-toolbar {
    border-color: #4a315f;
    background: linear-gradient(180deg, rgba(35, 19, 54, 0.9), rgba(23, 13, 37, 0.92));
    box-shadow: inset 0 1px 0 rgba(215, 242, 191, 0.08), 0 8px 18px rgba(8, 2, 18, 0.3);
}

.campaign-ambient-victorian-cosmic-horror .note-format-button {
    color: #d7f2bf;
}

.campaign-ambient-victorian-cosmic-horror .note-format-button:hover,
.campaign-ambient-victorian-cosmic-horror .note-format-button:focus {
    border-color: #5fa96f;
    background: #1f5433;
    color: #ffffff;
}

.campaign-ambient-high-fantasy .button.primary,
.campaign-ambient-high-fantasy .campaign-toolbar a.active,
.campaign-ambient-high-fantasy .subsection-toolbar a.active {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: transparent;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 33%),
        radial-gradient(ellipse at 22% 12%, rgba(255, 255, 255, 0.68), transparent 18%),
        radial-gradient(ellipse at 72% 94%, rgba(94, 97, 105, 0.46), transparent 44%),
        linear-gradient(180deg, #f2f0e7 0%, #c8cbd1 52%, #7d838c 100%);
    color: #2d1503;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.68),
        inset 0 0 0 2px rgba(151, 155, 164, 0.72),
        inset 0 -8px 14px rgba(78, 83, 92, 0.5),
        0 4px 12px rgba(55, 22, 5, 0.35);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.68),
        0 -1px 1px rgba(81, 86, 94, 0.36);
}

.campaign-ambient-high-fantasy .button.ghost,
.campaign-ambient-high-fantasy .campaign-toolbar a,
.campaign-ambient-high-fantasy .subsection-toolbar a {
    position: relative;
    isolation: isolate;
    justify-content: flex-start;
    align-items: center;
    min-height: 52px;
    overflow: hidden;
    border-color: transparent;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 247, 201, 0.45), transparent 34%),
        radial-gradient(ellipse at 28% 16%, rgba(255, 255, 236, 0.55), transparent 18%),
        radial-gradient(ellipse at 70% 92%, rgba(103, 59, 7, 0.55), transparent 44%),
        linear-gradient(180deg, #f3d36a 0%, #c69831 52%, #76501b 100%);
    color: #2d1503;
    padding: 10px 18px;
    font-size: 1rem;
    box-shadow:
        inset 0 2px 0 rgba(255, 253, 219, 0.46),
        inset 0 0 0 2px rgba(170, 119, 28, 0.7),
        inset 0 -7px 12px rgba(79, 43, 6, 0.62),
        0 2px 8px rgba(55, 22, 5, 0.3);
    text-shadow:
        0 1px 0 rgba(255, 249, 215, 0.65),
        0 -1px 1px rgba(98, 52, 8, 0.48);
}

.campaign-ambient-high-fantasy .button.primary::before,
.campaign-ambient-high-fantasy .button.ghost::before,
.campaign-ambient-high-fantasy .campaign-toolbar a::before,
.campaign-ambient-high-fantasy .subsection-toolbar a::before {
    content: "";
    position: absolute;
    inset: 4px 5px;
    z-index: -1;
    border-radius: 6px;
    background:
        radial-gradient(ellipse at 28% 18%, rgba(255, 255, 235, 0.34), transparent 22%),
        radial-gradient(ellipse at 50% 68%, rgba(91, 55, 8, 0.14), transparent 58%);
    box-shadow:
        inset 0 1px 3px rgba(255, 251, 220, 0.34),
        inset 0 -3px 7px rgba(80, 50, 10, 0.36),
        0 0 0 1px rgba(112, 84, 37, 0.32);
}

.campaign-ambient-high-fantasy .button.primary::after,
.campaign-ambient-high-fantasy .button.ghost::after,
.campaign-ambient-high-fantasy .campaign-toolbar a::after,
.campaign-ambient-high-fantasy .subsection-toolbar a::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: -1;
    width: 42%;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 239, 0.48);
    filter: blur(4px);
}

.campaign-ambient-high-fantasy .campaign-toolbar a span,
.campaign-ambient-high-fantasy .subsection-toolbar a span,
.campaign-ambient-high-fantasy .campaign-toolbar a .toolbar-icon,
.campaign-ambient-high-fantasy .subsection-toolbar a .toolbar-icon {
    position: relative;
    z-index: 1;
}

.campaign-ambient-high-fantasy .relations-group h3 {
    color: #7a5f54;
}

.campaign-ambient-high-fantasy .content > .page-header,
.campaign-ambient-high-fantasy .content > .page-header h1,
.campaign-ambient-high-fantasy .content > .page-header h2,
.campaign-ambient-high-fantasy .content > .page-header p,
.campaign-ambient-high-fantasy .content > .page-header .eyebrow,
.campaign-ambient-high-fantasy .content > .section-heading,
.campaign-ambient-high-fantasy .content > .section-heading h2,
.campaign-ambient-high-fantasy .content > .section-heading p,
.campaign-ambient-high-fantasy .content > .journal-workspace > .journal-entries-column > .section-heading,
.campaign-ambient-high-fantasy .content > .journal-workspace > .journal-entries-column > .section-heading h2,
.campaign-ambient-high-fantasy .content > .journal-workspace > .journal-entries-column > .section-heading span {
    color: #f7ead0;
    text-shadow: 0 2px 5px rgba(38, 8, 4, 0.38);
}

.campaign-ambient-high-fantasy .note-format-toolbar {
    border-color: #8a311b;
    background: linear-gradient(180deg, rgba(247, 234, 208, 0.9), rgba(219, 185, 109, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 253, 219, 0.5), 0 8px 18px rgba(55, 22, 5, 0.2);
}

.campaign-ambient-high-fantasy .note-format-button {
    color: #3a0705;
}

.campaign-ambient-high-fantasy .note-format-button:hover,
.campaign-ambient-high-fantasy .note-format-button:focus {
    border-color: #8a311b;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 34%),
        linear-gradient(180deg, #f2f0e7 0%, #c8cbd1 58%, #7d838c 100%);
    color: #2d1503;
}

.campaign-ambient-gothic-horror input,
.campaign-ambient-gothic-horror select,
.campaign-ambient-gothic-horror textarea,
.campaign-ambient-victorian-cosmic-horror input,
.campaign-ambient-victorian-cosmic-horror select,
.campaign-ambient-victorian-cosmic-horror textarea,
.campaign-ambient-high-fantasy input,
.campaign-ambient-high-fantasy select,
.campaign-ambient-high-fantasy textarea {
    background: var(--panel);
    color: var(--ink);
}

.campaign-ambient-gothic-horror input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1) drop-shadow(0 0 3px rgba(209, 58, 66, 0.88));
    opacity: 0.95;
}

.campaign-ambient-victorian-cosmic-horror input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1) drop-shadow(0 0 3px rgba(215, 242, 191, 0.82));
    opacity: 0.95;
}

.campaign-ambient-gothic-horror .note-card p,
.campaign-ambient-gothic-horror .detail-panel p,
.campaign-ambient-gothic-horror textarea {
    font-family: "Times New Roman", Times, serif;
}

.campaign-ambient-victorian-cosmic-horror .note-card p,
.campaign-ambient-victorian-cosmic-horror .detail-panel p,
.campaign-ambient-victorian-cosmic-horror textarea {
    font-family: "Goudy Old Style", Georgia, "Times New Roman", serif;
}

.campaign-ambient-high-fantasy .note-card p,
.campaign-ambient-high-fantasy .detail-panel p,
.campaign-ambient-high-fantasy textarea {
    font-family: Georgia, "Times New Roman", serif;
}

.app-shell {
    min-height: 100vh;
}

.main-column {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.72);
    padding: 16px 28px;
}

.topbar-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.topbar-character-portrait {
    width: 58px;
    height: 68px;
    flex: 0 0 58px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    object-fit: cover;
    object-position: center top;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.topbar-user-name {
    display: block;
    font-size: 2rem;
    line-height: 1.1;
}

.topbar-campaign-crest {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: min(54vw, 860px);
    transform: translateX(-50%);
}

.topbar-campaign-name {
    display: block;
    min-width: 0;
    color: var(--ink);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgba(255, 250, 229, 0.58);
}

.campaign-mark {
    display: block;
    width: auto;
    max-width: 170px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.34));
}

.campaign-mark-realm {
    max-width: 190px;
}

.campaign-mark-system[src$="Call_of_Cthulhu_Logo.png"] {
    border-radius: 5px;
}

.campaign-ambient-gothic-horror .content > .page-header > .eyebrow,
.campaign-ambient-victorian-cosmic-horror .content > .page-header > .eyebrow,
.campaign-ambient-high-fantasy .content > .page-header > .eyebrow {
    display: none;
}

.campaign-toolbar {
    position: sticky;
    top: 72px;
    z-index: 35;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    padding: 12px 28px;
}

.campaign-toolbar a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    min-height: 44px;
    padding: 9px 13px;
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
}

.toolbar-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.campaign-toolbar a:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.campaign-toolbar a.active {
    border-color: var(--accent);
    background: #e8efe9;
    color: var(--accent-strong);
}

.campaign-toolbar a.is-disabled {
    color: var(--muted);
    opacity: 0.55;
    pointer-events: none;
}

.subsection-toolbar {
    position: sticky;
    top: 141px;
    z-index: 30;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: #faf8f3;
    padding: 8px 28px;
}

.subsection-toolbar a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    padding: 7px 10px;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.subsection-toolbar a.active,
.subsection-toolbar a:hover {
    border-color: var(--accent);
    background: #ffffff;
    color: var(--accent-strong);
}

.content {
    padding: 30px;
}

.content:has(.note-edit-panel) {
    padding-inline: clamp(16px, 1.6vw, 30px);
}

.content:has(.note-edit-panel):has(> .relations-sidebar) {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.page-header {
    max-width: 760px;
    margin-bottom: 28px;
}

.split-header {
    max-width: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.compact-actions {
    margin-top: 0;
}

.section-heading {
    margin: 28px 0 12px;
}

.compact-heading {
    margin-top: 0;
}

.list-sort-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin: -8px 0 18px;
}

.list-sort-form label {
    min-width: 220px;
}

.list-sort-form select {
    min-height: 42px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.character-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 520px));
    justify-content: start;
}

.compact-entity-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 520px));
    justify-content: start;
}

.module-card {
    min-height: 150px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 18px;
}

.compact-card {
    min-height: 120px;
}

.campaign-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.admin-users-card {
    margin-top: 28px;
}

.admin-users-card summary {
    display: flex;
    width: min(100%, 440px);
    align-items: center;
    gap: 12px;
    min-height: 86px;
    border: 0;
    background: transparent url("../images/ui/Banner parchment transparent.png") center / 100% 100% no-repeat;
    color: #3f2b1a;
    cursor: pointer;
    list-style: none;
    padding: 24px 40px;
    font-weight: 800;
}

.admin-users-card summary::-webkit-details-marker {
    display: none;
}

.admin-users-card summary::before {
    content: "+";
    display: grid;
    width: 22px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
}

.admin-users-card[open] summary::before {
    content: "-";
}

.admin-users-card summary span:last-child {
    color: #5f4a36;
    font-size: 0.86rem;
    font-weight: 700;
}

.admin-users-card .table-panel {
    margin-top: 14px;
}

.compact-entity-card,
.character-list-card {
    position: relative;
    min-height: 116px;
    padding: 14px;
}

.compact-entity-card h2 {
    margin: 0 0 6px;
    font-size: 1.08rem;
}

.compact-entity-card p {
    margin: 0;
}

.entity-card-actions {
    display: grid;
    order: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
}

.entity-card-actions form {
    margin: 0;
}

.entity-card-actions .button {
    display: inline-flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    font-size: 0.86rem;
    line-height: 1.1;
    text-align: center;
}

.entity-card-actions .danger-button {
    color: var(--danger-text);
}

.campaign-ambient-gothic-horror .entity-card-actions .button.ghost {
    min-height: 34px;
    justify-content: center;
    padding: 6px 10px;
    font-size: 0.88rem;
}

.chapter-card-content {
    display: grid;
    gap: 7px;
}

.chapter-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.chapter-number-token {
    display: grid;
    width: 54px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #efe3c8;
    color: var(--accent-strong);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
}

.campaign-ambient-gothic-horror .chapter-number-token {
    width: 68px;
    border: 0;
    border-radius: 0;
    background: transparent url("../images/ui/wax-seal.webp") center / contain no-repeat;
    color: #ffffff;
    font-family: "MedievalSharp", Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: 900;
    text-shadow:
        0 2px 2px rgba(31, 0, 5, 0.9),
        0 0 8px rgba(255, 232, 214, 0.32);
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.42));
}

.campaign-ambient-victorian-cosmic-horror .chapter-number-token {
    width: 72px;
    border: 0;
    border-radius: 0;
    background: transparent url("../images/logos/Eldrich Plaque transparent.png") center / contain no-repeat;
    color: #b8ff2c;
    font-family: "Amarante", "Goudy Old Style", Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    font-weight: 900;
    text-shadow:
        0 2px 2px rgba(9, 2, 18, 0.92),
        0 0 7px rgba(184, 255, 44, 0.62);
    filter: drop-shadow(0 5px 8px rgba(8, 2, 18, 0.48));
}

.campaign-ambient-high-fantasy .chapter-number-token {
    width: 72px;
    border: 0;
    border-radius: 0;
    background: transparent url("../images/logos/Metal plaque transparent.png") center / contain no-repeat;
    color: #e7edf2;
    font-family: "Metamorphous", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 1.78rem;
    font-weight: 900;
    text-shadow:
        0 2px 2px rgba(50, 19, 4, 0.9),
        0 0 7px rgba(255, 255, 255, 0.42);
    filter: drop-shadow(0 5px 8px rgba(55, 22, 5, 0.38));
}

.quest-list-card {
    min-height: 108px;
}

.quest-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.quest-visual-token {
    display: grid;
    width: 64px;
    aspect-ratio: 1;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.quest-visual-token .toolbar-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.place-list-card {
    min-height: 108px;
}

.place-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.place-visual-token {
    display: grid;
    width: 64px;
    aspect-ratio: 1;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.place-visual-token .toolbar-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.entity-type-icon {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}

.entity-type-icon.large {
    width: 96px;
    height: 96px;
}

.entity-type-icon-frame {
    display: grid;
    place-items: center;
}

.entity-profile-identity .entity-type-icon-frame {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.entity-profile-identity .entity-type-icon-frame .entity-type-icon.large {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.organization-list-card {
    min-height: 108px;
}

.organization-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.organization-visual-token {
    display: grid;
    width: 64px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ece7f0;
}

.organization-visual-token .toolbar-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.organization-visual-token.large-token {
    width: 112px;
}

.organization-visual-token.large-token .toolbar-icon {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
}

.organization-symbol-thumb,
.organization-symbol-large {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
}

.organization-symbol-thumb {
    width: 64px;
}

.organization-symbol-large {
    width: 112px;
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 0.86rem;
}

.inline-meta {
    margin-bottom: 8px;
    color: var(--accent-strong);
    font-size: 0.9rem;
    font-weight: 800;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.field-grid div {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
}

.field-grid span {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.entity-profile-panel {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: none;
    margin-bottom: 22px;
}

.entity-profile-identity {
    display: grid;
    gap: 9px;
    align-content: start;
}

.entity-profile-identity .character-portrait-large,
.entity-profile-identity .organization-symbol-large,
.entity-profile-identity .portrait-placeholder.large,
.entity-profile-identity .organization-visual-token.large-token {
    width: min(100%, 190px);
}

.entity-profile-identity .portrait-placeholder.large .toolbar-icon,
.entity-profile-identity .organization-visual-token.large-token .toolbar-icon {
    width: 108px;
    height: 108px;
    flex-basis: 108px;
}

.entity-profile-identity .eyebrow {
    margin-top: 5px;
}

.entity-profile-identity h1 {
    margin: 0;
    font-size: 2.35rem;
    line-height: 1.05;
}

.entity-profile-identity p {
    margin: 0;
}

.entity-profile-main {
    display: grid;
    grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
}

.entity-profile-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 18px;
}

.entity-profile-card h2 {
    margin-top: 0;
}

.entity-profile-details-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 14px;
}

.entity-profile-details-header h2 {
    margin: 0;
}

.entity-profile-description {
    align-self: stretch;
}

.entity-profile-description p {
    margin-bottom: 0;
}

.entity-profile-actions {
    justify-content: flex-start;
    margin-bottom: 0;
}

.entity-detail-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
}

.entity-detail-list div {
    display: flex;
    gap: 7px;
    align-items: baseline;
    min-width: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}

.entity-detail-list dt {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 0;
    white-space: nowrap;
}

.entity-detail-list dt::after {
    content: " -";
}

.entity-detail-list dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.character-card-head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
}

.character-list-card .character-card-head {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
}

.character-list-card .portrait-placeholder {
    width: 82px;
    font-size: 1.15rem;
}

.character-portrait-thumb,
.character-portrait-large {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #211f1b;
    object-fit: cover;
    object-position: center top;
}

.character-portrait-thumb {
    width: 82px;
}

.character-portrait-large {
    width: 112px;
}

.character-list-card h2 {
    margin: 0 0 5px;
    font-size: 1.05rem;
}

.character-list-card p {
    margin: 0;
}

.character-allegiance {
    margin-top: 8px;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.campaign-ambient-high-fantasy .compact-entity-card .inline-meta,
.campaign-ambient-high-fantasy .character-list-card .character-allegiance {
    color: #3a0705;
}

.portrait-placeholder {
    display: grid;
    width: 64px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #e8efe9;
    color: var(--accent-strong);
    font-weight: 900;
}

.portrait-placeholder.insignia {
    background: #ece7f0;
    color: #5c4668;
}

.portrait-placeholder.large {
    width: 112px;
    font-size: 1.6rem;
}

.portrait-placeholder .toolbar-icon {
    width: 58%;
    height: 58%;
    flex-basis: 58%;
}

.portrait-placeholder.large .toolbar-icon {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
}

.meta-row span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 9px;
}

.empty-state,
.form-panel,
.detail-panel {
    max-width: 720px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 24px;
}

.table-panel,
.note-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 16px;
}

.selected-note-card {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(139, 93, 31, 0.18);
}

.status-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.86rem;
    font-weight: 700;
}

.table-action {
    min-height: 34px;
    padding: 6px 11px;
}

.detail-panel {
    margin-bottom: 22px;
}

.spaced-panel {
    margin-top: 28px;
}

.note-list {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin-bottom: 24px;
}

.note-sort-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.note-sort-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.note-sort-actions span {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.note-card p {
    color: var(--ink);
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.62;
}

.note-card-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    line-height: 1.25;
}

textarea[name="note_content"],
textarea[name="entry_content"],
textarea[name="journal_content"],
textarea[name="quest_notes"] {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.6;
}

.note-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.note-card-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.journal-panel {
    max-width: 900px;
}

.note-edit-panel {
    width: 100%;
    max-width: none;
}

.note-edit-panel textarea[name="note_content"],
.note-edit-panel textarea[name="entry_content"],
.note-edit-panel textarea[name="journal_content"],
.note-edit-panel textarea[name="quest_notes"] {
    min-height: clamp(420px, 58vh, 680px);
    overflow: auto;
    resize: vertical;
}

.content:has(.journal-page-workspace) {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 142px);
    overflow: hidden;
}

.journal-workspace {
    display: grid;
    grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    flex: 1 1 auto;
    min-height: 0;
}

.notes-only-workspace {
    grid-template-columns: minmax(0, 1fr);
}

.journal-workspace .journal-panel {
    max-width: none;
}

.journal-entries-column {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.journal-entry-fields {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
}

.journal-list {
    max-width: 900px;
}

.journal-workspace .journal-list,
.journal-workspace .empty-state {
    max-width: none;
}

.journal-page-workspace .journal-list {
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
}

.notes-only-workspace .journal-list {
    max-width: none;
}

.notes-only-workspace .journal-entries-column {
    max-height: none;
    overflow: visible;
}

.notes-only-workspace .journal-list {
    overflow: visible;
}

.journal-page-workspace.notes-only-workspace .journal-entries-column {
    max-height: 100%;
    overflow: hidden;
}

.journal-page-workspace.notes-only-workspace .journal-list {
    min-height: 0;
    overflow-y: auto;
}

.journal-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.journal-entry-header span {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 800;
}

.footer-actions {
    margin-top: 24px;
}

.notice {
    margin-bottom: 18px;
    border-radius: 6px;
    padding: 12px 14px;
    font-weight: 700;
}

.notice.success {
    background: #dfeee7;
    color: #255b3e;
}

.foc-panel {
    max-width: none;
}

.foc-panel:has(.coinage-form) {
    padding: 16px 20px;
}

.coinage-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(176px, 1fr));
    gap: 8px;
}

.coin-card {
    display: grid;
    grid-template-columns: 34px repeat(3, minmax(44px, 1fr));
    gap: 4px 6px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #faf8f3;
    padding: 8px;
}

.coin-icon {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(39, 35, 29, 0.24);
    background: linear-gradient(145deg, var(--coin-light), var(--coin-mid) 52%, var(--coin-dark));
    box-shadow: inset 3px 3px 4px rgba(255, 255, 255, 0.55), inset -3px -3px 4px rgba(39, 35, 29, 0.2);
}

.coin-icon::before,
.coin-icon::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.coin-icon::before {
    inset: 5px;
    border: 1px solid rgba(39, 35, 29, 0.22);
    clip-path: inherit;
}

.coin-icon::after {
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(39, 35, 29, 0.35);
    border-radius: 999px;
    background: #faf8f3;
    box-shadow: inset 1px 1px 2px rgba(39, 35, 29, 0.2);
    transform: translate(-50%, -50%);
}

.coin-card-pp .coin-icon {
    clip-path: polygon(50% 0, 84% 16%, 100% 50%, 84% 84%, 50% 100%, 16% 84%, 0 50%, 16% 16%);
}

.coin-card-pp .coin-icon::before {
    background:
        linear-gradient(45deg, transparent 42%, rgba(39, 35, 29, 0.22) 44%, transparent 48%),
        linear-gradient(-45deg, transparent 42%, rgba(39, 35, 29, 0.18) 44%, transparent 48%);
}

.coin-card-gp .coin-icon {
    clip-path: polygon(0 16%, 100% 16%, 88% 32%, 88% 68%, 100% 84%, 0 84%, 12% 68%, 12% 32%);
}

.coin-card-gp .coin-icon::before {
    inset: 4px 6px;
    background:
        radial-gradient(circle at 24% 50%, rgba(39, 35, 29, 0.18) 0 8%, transparent 9%),
        radial-gradient(circle at 76% 50%, rgba(39, 35, 29, 0.18) 0 8%, transparent 9%);
}

.coin-card-ep .coin-icon {
    clip-path: polygon(50% 2%, 98% 94%, 2% 94%);
}

.coin-card-ep .coin-icon::before {
    inset: 6px 7px;
    background:
        linear-gradient(60deg, transparent 43%, rgba(39, 35, 29, 0.2) 45%, transparent 48%),
        linear-gradient(-60deg, transparent 43%, rgba(39, 35, 29, 0.18) 45%, transparent 48%);
}

.coin-card-sp .coin-icon {
    clip-path: polygon(16% 0, 84% 0, 100% 22%, 100% 78%, 84% 100%, 16% 100%, 0 78%, 0 22%);
}

.coin-card-sp .coin-icon::before {
    background:
        linear-gradient(90deg, transparent 47%, rgba(39, 35, 29, 0.2) 49%, transparent 52%),
        linear-gradient(25deg, transparent 42%, rgba(39, 35, 29, 0.16) 44%, transparent 48%);
}

.coin-card-cp .coin-icon {
    clip-path: polygon(50% 0, 95% 28%, 82% 100%, 18% 100%, 5% 28%);
}

.coin-card-cp .coin-icon::before {
    background:
        linear-gradient(0deg, transparent 45%, rgba(39, 35, 29, 0.18) 47%, transparent 50%),
        linear-gradient(90deg, transparent 45%, rgba(39, 35, 29, 0.16) 47%, transparent 50%);
}

.coin-card-pp {
    --coin-light: #d8f2ff;
    --coin-mid: #6aa9cf;
    --coin-dark: #2f607b;
}

.coin-card-gp {
    --coin-light: #fff2a8;
    --coin-mid: #d9a72c;
    --coin-dark: #8a6218;
}

.coin-card-ep {
    --coin-light: #d5f2dc;
    --coin-mid: #70aa74;
    --coin-dark: #37643c;
}

.coin-card-sp {
    --coin-light: #f8fafb;
    --coin-mid: #b8c1c6;
    --coin-dark: #737c83;
}

.coin-card-cp {
    --coin-light: #ffd2a8;
    --coin-mid: #c17037;
    --coin-dark: #76421f;
}

.coin-label,
.coin-field-label {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
}

.coin-label {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    color: var(--ink);
    font-size: 0.82rem;
}

.add-label {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
}

.subtract-label {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
}

.coinage-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.coinage-form .action-row {
    margin-top: 0;
}

.coin-card input {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 0.95rem;
    font-weight: 800;
}

.coin-card input:nth-of-type(1) {
    grid-column: 2;
    grid-row: 2;
}

.coin-card input:nth-of-type(2) {
    grid-column: 3;
    grid-row: 2;
}

.coin-card input:nth-of-type(3) {
    grid-column: 4;
    grid-row: 2;
}

.encounter-form {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.encounter-source {
    max-width: 570px;
}

.encounter-items {
    display: grid;
    gap: 10px;
}

.encounter-item-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.6fr) 90px auto auto 44px;
    gap: 12px;
    align-items: end;
}

.checkbox-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
}

.checkbox-label input {
    width: 18px;
    min-height: 18px;
}

.foc-item-list,
.foc-encounter-list {
    display: grid;
    gap: 10px;
}

.foc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #faf8f3;
    padding: 8px;
}

.foc-row-portrait {
    flex: 0 0 auto;
    width: 54px;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 6px;
    object-fit: cover;
    object-position: center top;
}

.foc-row-icon-token {
    display: grid;
    flex: 0 0 auto;
    width: 54px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #efe3c8;
}

.foc-row-icon-token .toolbar-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.foc-row > div,
.foc-row-primary,
.foc-row-secondary,
.foc-row-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.foc-row-content {
    display: grid;
    flex: 1 1 auto;
    gap: 5px;
    min-width: 0;
}

.foc-row-primary,
.foc-row-secondary,
.foc-row-context {
    gap: 5px;
}

.foc-row strong {
    margin-right: 4px;
}

.foc-row span {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 7px;
}

.foc-row form {
    flex: 0 0 auto;
}

.foc-row-actions {
    justify-content: flex-end;
}

.foc-row-actions select {
    width: 170px;
    min-height: 42px;
}

.foc-quantity-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.foc-quantity-form input {
    width: 58px;
    min-height: 36px;
    padding: 6px 8px;
}

.foc-row-actions .button {
    min-height: 36px;
    padding: 7px 10px;
}

.quest-item-portrait-preview img {
    width: 160px;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
}

.quest-item-detail {
    display: grid;
    gap: 18px;
}

.quest-item-detail-portrait {
    width: min(220px, 100%);
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
}

.stacked-copy {
    display: grid;
    gap: 8px;
}

.stacked-copy h2 {
    margin: 0;
    font-size: 1rem;
}

.stacked-copy p {
    margin: 0;
}

.portrait-paste-target {
    display: grid;
    min-height: 86px;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: #faf8f3;
    color: var(--muted);
    font-weight: 800;
}

.portrait-paste-target:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(47, 111, 115, 0.16);
}

.loot-grid,
.magic-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 22px;
}

.loot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.mundane-loot-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.magic-loot-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.quest-loot-grid {
    grid-template-columns: minmax(0, 1fr);
}

.general-loot-grid {
    grid-template-columns: minmax(0, 1fr);
}

.loot-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.mundane-loot-grid .loot-card,
.magic-loot-grid .loot-card,
.general-loot-grid .loot-card {
    min-height: 132px;
    padding: 12px 14px;
}

.mundane-loot-grid .loot-card-other {
    grid-column: 1 / -1;
}

.mundane-loot-grid .loot-card-other .foc-item-list {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.mundane-loot-grid .loot-card h2,
.magic-loot-grid .loot-card h2,
.general-loot-grid .loot-card h2 {
    margin-bottom: 6px;
    font-size: 0.98rem;
}

.mundane-loot-grid .loot-card p,
.magic-loot-grid .loot-card p,
.general-loot-grid .loot-card p {
    margin-bottom: 0;
    font-size: 0.84rem;
    line-height: 1.3;
}

.mundane-loot-grid .foc-item-list,
.magic-loot-grid .foc-item-list,
.general-loot-grid .foc-item-list {
    gap: 8px;
}

.mundane-loot-grid .foc-row,
.magic-loot-grid .foc-row,
.general-loot-grid .foc-row {
    padding: 7px 8px;
}

.mundane-loot-grid .foc-row > div:first-of-type,
.magic-loot-grid .foc-row > div:first-of-type,
.general-loot-grid .foc-row > div:first-of-type {
    gap: 5px;
}

.mundane-loot-grid .foc-row span,
.magic-loot-grid .foc-row span,
.general-loot-grid .foc-row span {
    padding: 3px 6px;
}

.mundane-loot-grid .foc-row-actions,
.magic-loot-grid .foc-row-actions,
.general-loot-grid .foc-row-actions {
    gap: 6px;
}

.mundane-loot-grid .foc-quantity-form input,
.magic-loot-grid .foc-quantity-form input,
.general-loot-grid .foc-quantity-form input {
    width: 50px;
    min-height: 34px;
}

.mundane-loot-grid .foc-row-actions .button,
.magic-loot-grid .foc-row-actions .button,
.general-loot-grid .foc-row-actions .button {
    min-height: 34px;
    padding: 6px 9px;
}

.general-loot-grid .foc-item-list {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.quest-loot-grid .loot-card {
    padding: 16px;
}

.quest-loot-grid .foc-item-list {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 12px;
}

.quest-loot-grid .foc-row {
    align-items: flex-start;
    min-height: 124px;
    padding: 12px;
}

.quest-loot-grid .foc-row-portrait,
.quest-loot-grid .foc-row-icon-token {
    width: 96px;
    border-radius: 8px;
}

.quest-loot-grid .foc-row-icon-token .toolbar-icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
}

.quest-loot-grid .foc-row-content {
    align-items: flex-start;
    padding-top: 2px;
}

.quest-loot-grid .foc-row-actions {
    align-self: flex-start;
}

.empty-inline {
    color: var(--muted);
    font-weight: 800;
}

.files-empty-state {
    max-width: none;
}

.file-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 440px));
    justify-content: start;
}

.file-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-height: 0;
}

.file-preview {
    display: block;
    overflow: hidden;
    width: 128px;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
}

.file-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.file-card-body {
    min-width: 0;
}

.file-card .action-row {
    grid-column: 1 / -1;
}

.file-detail-panel {
    display: grid;
    gap: 18px;
}

.file-detail-image {
    display: block;
    width: min(100%, 980px);
    max-height: 70vh;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
}

.letter-card {
    min-height: 210px;
}

.letter-reader {
    display: grid;
    justify-items: center;
    gap: 28px;
}

.letter-paper {
    --letter-font-scale: 1;
    position: relative;
    box-sizing: border-box;
    width: min(880px, 100%);
    padding: 46px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    box-shadow: var(--shadow);
    color: #2d261c;
    background-blend-mode: multiply;
}

.letter-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 128px 64px;
}

.letter-page-portrait {
    width: min(980px, 100%);
    height: 1388px;
}

.letter-page-landscape {
    width: min(1400px, 100%);
    height: 930px;
    padding: 118px 54px 108px;
}

.letter-page-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 82%;
    margin-right: auto;
    margin-left: auto;
    min-height: 0;
    position: relative;
    z-index: 2;
}

.letter-document-header {
    margin: 0 0 28px auto;
    max-width: 52%;
    text-align: right;
    font-family: "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 1rem;
    line-height: 1.35;
    color: rgba(45, 38, 28, 0.75);
}

.letter-body {
    font-size: 1.05rem;
    line-height: 1.75;
    white-space: normal;
}

.letter-page .letter-body {
    box-sizing: border-box;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding-right: 12px;
    padding-left: 12px;
}

.letter-signature {
    margin-top: 42px;
    margin-right: 10%;
    margin-left: auto;
    width: min(410px, 82%);
    text-align: center;
    font-size: 2.1rem;
    font-weight: 700;
}

.letter-signature strong,
.letter-signature span {
    display: block;
}

.letter-signature span {
    font-size: 0.72em;
    font-weight: 600;
}

.letter-signature::before {
    content: "";
    display: block;
    margin-bottom: 8px;
    border-top: 1px solid rgba(39, 35, 29, 0.35);
}

.letter-page-number {
    position: absolute;
    right: 34px;
    bottom: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    color: rgba(45, 38, 28, 0.45);
}

.letter-embedded-element {
    position: absolute;
    z-index: 3;
    width: var(--letter-element-size);
    height: var(--letter-element-size);
    object-fit: contain;
    pointer-events: none;
}

.letter-embedded-element-small,
.letter-element-flow-small,
.letter-page-with-element-small {
    --letter-element-size: 156px;
}

.letter-embedded-element-medium,
.letter-element-flow-medium,
.letter-page-with-element-medium {
    --letter-element-size: 218px;
}

.letter-embedded-element-large,
.letter-element-flow-large,
.letter-page-with-element-large {
    --letter-element-size: 265px;
}

.letter-embedded-element-top_right {
    top: 15%;
    right: 14%;
}

.letter-embedded-element-top_left {
    top: 15%;
    left: 14%;
}

.letter-embedded-element-bottom_right {
    right: 4%;
    bottom: 1%;
}

.letter-embedded-element-bottom_left {
    bottom: 1%;
    left: 4%;
}

.letter-embedded-element-bottom_right,
.letter-embedded-element-bottom_left {
    opacity: 0.92;
    z-index: 3;
}

.letter-body-with-element {
    overflow: hidden;
}

.letter-element-flow {
    display: block;
    width: var(--letter-element-size, 156px);
    height: var(--letter-element-size, 156px);
    shape-outside: inset(0);
}

.letter-element-flow-top_right,
.letter-element-flow-bottom_right {
    float: right;
    margin-left: 22px;
}

.letter-element-flow-top_left,
.letter-element-flow-bottom_left {
    float: left;
    margin-right: 22px;
}

.letter-element-flow-top_right,
.letter-element-flow-top_left {
    margin-top: 0;
}

.letter-element-flow-bottom_right,
.letter-element-flow-bottom_left {
    display: none;
}

.letter-page-editor {
    display: grid;
    gap: 14px;
}

.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.section-heading-row h2 {
    margin: 0;
    font-size: 1.1rem;
}

.letter-page-field {
    display: grid;
    gap: 8px;
}

.letter-page-field textarea {
    min-height: 260px;
}

.letter-element-editor {
    display: grid;
    gap: 14px;
}

.letter-element-editor h2 {
    margin: 0;
    font-size: 1.1rem;
}

.letter-element-preview img {
    display: block;
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
}

@font-face {
    font-family: "Letter Fleur De Leah";
    src: url("../fonts/letters/fleur-de-leah-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Lovers Quarrel";
    src: url("../fonts/letters/lovers-quarrel-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Beau Rivage";
    src: url("../fonts/letters/beau-rivage-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Almendra";
    src: url("../fonts/letters/almendra-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Tangerine";
    src: url("../fonts/letters/tangerine-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Tangerine";
    src: url("../fonts/letters/tangerine-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Letter Jim Nightshade";
    src: url("../fonts/letters/jim-nightshade-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Schoolbell";
    src: url("../fonts/letters/schoolbell-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Mynerve";
    src: url("../fonts/letters/mynerve-400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Letter Lacquer";
    src: url("../fonts/letters/lacquer-400.woff2") format("woff2");
    font-display: swap;
}

.letter-font-noble_fleur_de_leah .letter-body,
.letter-font-noble_fleur_de_leah .letter-signature {
    font-family: "Letter Fleur De Leah", "Edwardian Script ITC", "Palatino Linotype", cursive;
}

.letter-font-noble_fleur_de_leah .letter-body {
    font-size: calc(1.55rem * var(--letter-font-scale));
    line-height: 1.7;
}

.letter-font-noble_lovers_quarrel .letter-body,
.letter-font-noble_lovers_quarrel .letter-signature {
    font-family: "Letter Lovers Quarrel", "Edwardian Script ITC", "Palatino Linotype", cursive;
}

.letter-font-noble_lovers_quarrel .letter-body {
    font-size: calc(1.62rem * var(--letter-font-scale));
    line-height: 1.55;
}

.letter-font-fine_beau_rivage .letter-body,
.letter-font-fine_beau_rivage .letter-signature {
    font-family: "Letter Beau Rivage", "Freestyle Script", "Palatino Linotype", cursive;
}

.letter-font-fine_beau_rivage .letter-body {
    font-size: calc(1.42rem * var(--letter-font-scale));
    line-height: 1.65;
}

.letter-font-fine_almendra .letter-body,
.letter-font-fine_almendra .letter-signature {
    font-family: "Letter Almendra", "Palatino Linotype", Georgia, serif;
}

.letter-font-fine_almendra .letter-body {
    font-size: calc(1.1rem * var(--letter-font-scale));
    line-height: 1.72;
}

.letter-font-old_tangerine .letter-body,
.letter-font-old_tangerine .letter-signature {
    font-family: "Letter Tangerine", "Blackadder ITC", "Palatino Linotype", cursive;
}

.letter-font-old_tangerine .letter-body {
    font-size: calc(1.65rem * var(--letter-font-scale));
    line-height: 1.35;
}

.letter-font-old_jim_nightshade .letter-body,
.letter-font-old_jim_nightshade .letter-signature {
    font-family: "Letter Jim Nightshade", "Blackadder ITC", "Palatino Linotype", cursive;
}

.letter-font-old_jim_nightshade .letter-body {
    font-size: calc(1.22rem * var(--letter-font-scale));
    line-height: 1.66;
}

.letter-font-commoner_schoolbell .letter-body,
.letter-font-commoner_schoolbell .letter-signature {
    font-family: "Letter Schoolbell", "Segoe Print", cursive;
}

.letter-font-commoner_schoolbell .letter-body {
    font-size: calc(1.08rem * var(--letter-font-scale));
    line-height: 1.72;
}

.letter-font-commoner_mynerve .letter-body,
.letter-font-commoner_mynerve .letter-signature {
    font-family: "Letter Mynerve", "Segoe Print", cursive;
}

.letter-font-commoner_mynerve .letter-body {
    font-size: calc(1.12rem * var(--letter-font-scale));
    line-height: 1.7;
}

.letter-font-commoner_lacquer .letter-body,
.letter-font-commoner_lacquer .letter-signature,
.letter-font-cultist_lacquer .letter-body,
.letter-font-cultist_lacquer .letter-signature {
    font-family: "Letter Lacquer", "Segoe Print", fantasy;
}

.letter-font-commoner_lacquer .letter-body,
.letter-font-cultist_lacquer .letter-body {
    font-size: calc(1.12rem * var(--letter-font-scale));
    line-height: 1.62;
}

.letter-font-fine_calligraphy .letter-signature {
    font-family: "Monotype Corsiva", "Segoe Script", "Lucida Handwriting", cursive;
}

.letter-font-fine_calligraphy .letter-body {
    font-family: "Palatino Linotype", Palatino, Georgia, serif;
    font-size: calc(1.05rem * var(--letter-font-scale));
}

.letter-font-gothic_calligraphy .letter-signature {
    font-family: "Old English Text MT", "Blackletter", "UnifrakturCook", Georgia, serif;
    font-weight: 700;
}

.letter-font-gothic_calligraphy .letter-body {
    font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: calc(1.08rem * var(--letter-font-scale));
}

.letter-font-newspaper_press .letter-body,
.letter-font-newspaper_press .letter-signature {
    font-family: Georgia, "Times New Roman", Times, serif;
}

.letter-font-newspaper_press .letter-body {
    font-size: calc(0.98rem * var(--letter-font-scale));
    line-height: 1.58;
}

.letter-font-victorian_calligraphy .letter-signature {
    font-family: "Goudy Old Style", "Bookman Old Style", Georgia, serif;
    font-weight: 700;
}

.letter-font-victorian_calligraphy .letter-body {
    font-family: "Bookman Old Style", "Goudy Old Style", Georgia, serif;
    font-size: calc(1.04rem * var(--letter-font-scale));
}

.letter-font-common_hand .letter-body,
.letter-font-common_hand .letter-signature {
    font-family: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", cursive;
}

.letter-font-common_hand .letter-body {
    font-size: calc(1rem * var(--letter-font-scale));
    line-height: 1.68;
}

.letter-style-fine_parchment,
.letter-style-parchment {
    border-color: #d7bd86;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55), transparent 20%),
        radial-gradient(circle at 82% 14%, rgba(144, 102, 42, 0.12), transparent 24%),
        linear-gradient(90deg, rgba(126, 91, 38, 0.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, #fff1c9, #f7dc9e 58%, #eed08f);
    background-size: auto, auto, 18px 100%, auto;
}

.letter-style-old_parchment {
    border-color: #a98249;
    background:
        radial-gradient(circle at 16% 18%, rgba(92, 55, 21, 0.18), transparent 16%),
        radial-gradient(circle at 72% 68%, rgba(110, 67, 24, 0.16), transparent 18%),
        radial-gradient(circle at 42% 42%, rgba(255, 255, 255, 0.2), transparent 22%),
        linear-gradient(135deg, #d7af69, #ead08d 42%, #c89450);
    box-shadow: inset 0 0 42px rgba(75, 43, 15, 0.18), var(--shadow);
}

.letter-style-crumpled_parchment,
.letter-style-rough {
    border-color: #b09362;
    background:
        linear-gradient(128deg, transparent 0 22%, rgba(111, 79, 38, 0.16) 23%, transparent 24% 100%),
        linear-gradient(48deg, transparent 0 36%, rgba(255, 255, 255, 0.35) 37%, transparent 38% 100%),
        linear-gradient(168deg, transparent 0 58%, rgba(104, 71, 34, 0.15) 59%, transparent 60% 100%),
        radial-gradient(circle at 34% 24%, rgba(89, 58, 25, 0.12), transparent 18%),
        linear-gradient(180deg, #ead5a2, #d8b778);
    box-shadow: inset 0 0 34px rgba(79, 51, 21, 0.13), var(--shadow);
}

.letter-style-burnt_parchment {
    border-color: #4d2c17;
    background:
        radial-gradient(circle at 0 0, rgba(54, 27, 10, 0.74), transparent 20%),
        radial-gradient(circle at 100% 6%, rgba(36, 19, 9, 0.7), transparent 18%),
        radial-gradient(circle at 6% 100%, rgba(68, 33, 10, 0.62), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(42, 21, 9, 0.66), transparent 20%),
        linear-gradient(90deg, rgba(51, 25, 9, 0.32), transparent 8% 92%, rgba(51, 25, 9, 0.32)),
        linear-gradient(180deg, rgba(51, 25, 9, 0.35), transparent 9% 91%, rgba(51, 25, 9, 0.35)),
        linear-gradient(180deg, #eed193, #d5a75d 70%, #c28b45);
    box-shadow: inset 0 0 46px rgba(45, 21, 6, 0.38), var(--shadow);
}

.letter-style-fine_stationery,
.letter-style-formal {
    border: 2px solid #9a8d75;
    background:
        linear-gradient(90deg, transparent 0 9%, rgba(174, 42, 54, 0.22) 9.2%, transparent 9.4% 100%),
        linear-gradient(180deg, rgba(70, 91, 128, 0.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, #fffdf8, #f5f1e7);
    background-size: auto, 100% 32px, auto;
}

.letter-style-newspaper_clipping {
    border-color: #b9b2a3;
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(39, 35, 29, 0.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(39, 35, 29, 0.05) 0 1px, transparent 1px 100%),
        #eee8d8;
    background-size: 6px 100%, 100% 22px, auto;
    box-shadow: 0 12px 24px rgba(35, 31, 25, 0.12);
    color: #202020;
}

.letter-style-newspaper_clipping .letter-body {
    column-count: 2;
    column-gap: 32px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.98rem;
    line-height: 1.55;
}

.letter-page {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-blend-mode: normal;
}

.letter-page:not(.letter-style-plain) {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.letter-style-fine_parchment.letter-page-portrait {
    background-image: url("../images/letters/papers/fine_parchment_tall.webp");
}

.letter-style-fine_parchment.letter-page-landscape {
    background-image: url("../images/letters/papers/fine_parchment_wide.webp");
}

.letter-style-regular_parchment.letter-page-portrait,
.letter-style-parchment.letter-page-portrait {
    background-image: url("../images/letters/papers/regular_parchment_tall.webp");
}

.letter-style-regular_parchment.letter-page-landscape,
.letter-style-parchment.letter-page-landscape {
    background-image: url("../images/letters/papers/regular_parchment_wide.webp");
}

.letter-style-old_parchment.letter-page-portrait {
    background-image: url("../images/letters/papers/old_parchment_tall.webp");
}

.letter-style-old_parchment.letter-page-landscape {
    background-image: url("../images/letters/papers/old_parchment_wide.webp");
}

.letter-style-really_old_paper.letter-page-portrait {
    background-image: url("../images/letters/papers/really_old_paper_tall.webp");
}

.letter-style-really_old_paper.letter-page-landscape {
    background-image: url("../images/letters/papers/really_old_paper_wide.webp");
}

.letter-style-rolled_old_parchment.letter-page-portrait {
    background-image: url("../images/letters/papers/rolled_old_parchment_tall.webp");
    padding: 150px 92px 150px;
}

.letter-style-rolled_old_parchment.letter-page-landscape {
    background-image: url("../images/letters/papers/rolled_old_parchment_wide.webp");
    padding: 105px 180px 130px;
}

.letter-style-crumpled_parchment.letter-page-portrait,
.letter-style-rough.letter-page-portrait {
    background-image: url("../images/letters/papers/crumpled_parchment_tall.webp");
}

.letter-style-crumpled_parchment.letter-page-landscape,
.letter-style-rough.letter-page-landscape {
    background-image: url("../images/letters/papers/crumpled_parchment_wide.webp");
}

.letter-style-burnt_parchment.letter-page-portrait {
    background-image: url("../images/letters/papers/burnt_paper_tall.webp");
    padding: 112px 72px 108px;
}

.letter-style-burnt_parchment.letter-page-landscape {
    background-image: url("../images/letters/papers/burnt_paper_wide.webp");
    padding: 98px 58px 76px;
}

.letter-style-burnt_parchment .letter-page-content {
    width: 84%;
    margin-right: auto;
    margin-left: auto;
}

.letter-style-fine_stationery.letter-page-portrait,
.letter-style-formal.letter-page-portrait {
    background-image: url("../images/letters/papers/invitation_tall.webp");
}

.letter-style-fine_stationery.letter-page-landscape,
.letter-style-formal.letter-page-landscape {
    background-image: url("../images/letters/papers/invitation_wide.webp");
}

.letter-style-notebook_paper.letter-page-portrait {
    background-image: url("../images/letters/papers/notebook_tall.webp");
}

.letter-style-notebook_paper.letter-page-landscape {
    background-image: url("../images/letters/papers/notebook_wide.webp");
}

.letter-style-newspaper_clipping.letter-page-portrait {
    background-image: url("../images/letters/papers/newspaper_tall.webp");
}

.letter-style-newspaper_clipping.letter-page-landscape {
    background-image: url("../images/letters/papers/newspaper_wide.webp");
}

.relations-panel {
    display: grid;
    gap: 18px;
}

.content:has(> .relations-sidebar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.content:has(> .relations-sidebar) > :not(.relations-sidebar) {
    grid-column: 1;
}

.content:has(> .relations-sidebar) .detail-panel,
.content:has(> .relations-sidebar) .note-list,
.content:has(> .relations-sidebar) .page-header {
    max-width: none;
}

.relations-sidebar {
    position: sticky;
    top: 16px;
    grid-column: 2;
    grid-row: 1 / span 80;
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 16px;
}

.relations-sidebar-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.relations-group-list {
    display: grid;
    gap: 12px;
}

.relations-group {
    display: grid;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.relations-group h3 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.compact-relation-list {
    gap: 6px;
}

.compact-relation-row {
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
}

.compact-relation-row .inline-meta {
    display: block;
    margin-top: 2px;
}

.private-journal-backlink .relation-context {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.relation-remove-button {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
}

.relation-list {
    display: grid;
    gap: 10px;
}

.relation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.warning-pill {
    border-color: #d5a03c;
    background: #fff4cf;
    color: #725018;
}

.relation-form {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.sidebar-relation-form {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.relation-suggestions {
    display: grid;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.relation-suggestions h3 {
    margin: 0;
    font-size: 1rem;
}

.relation-suggestion-form {
    display: grid;
    gap: 10px;
}

.relation-suggestion-choice {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    cursor: pointer;
}

.relation-suggestion-choice input {
    width: 18px;
    min-height: 18px;
    margin: 2px 0 0;
}

.relation-suggestion-choice > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.relation-suggestion-choice strong {
    overflow-wrap: anywhere;
}

.relation-text-link {
    color: var(--accent-strong);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.campaign-ambient-high-fantasy .relation-text-link {
    color: #5a170d;
}

.relation-preview-card {
    position: fixed;
    z-index: 1000;
    width: min(260px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.relation-preview-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.relation-preview-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
    background: #141414;
}

.relation-preview-card.no-image img {
    display: none;
}

.relation-preview-body {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.relation-preview-type {
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.relation-preview-title {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
}

.campaign-ambient-gothic-horror .relation-preview-card {
    border-color: #596365;
    background:
        linear-gradient(12deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 14px),
        radial-gradient(ellipse at 16% 20%, rgba(213, 229, 226, 0.13), transparent 22%),
        radial-gradient(ellipse at 86% 78%, rgba(0, 0, 0, 0.36), transparent 30%),
        linear-gradient(155deg, #3b4344 0%, #252b2c 46%, #15191a 100%);
    color: #f4efe6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -14px 24px rgba(0, 0, 0, 0.26),
        0 18px 42px rgba(0, 0, 0, 0.45);
}

.campaign-ambient-gothic-horror .relation-preview-type {
    color: #d64545;
}

.campaign-ambient-gothic-horror .relation-preview-title {
    color: #f4efe6;
}

@media (max-width: 1180px) {
    .dashboard-landing-page .dashboard-board.has-admin-panel {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .dashboard-landing-page .dashboard-campaign-list {
        max-width: none;
    }

    .dashboard-admin-column {
        max-width: 520px;
    }

    .campaign-create-page .content {
        grid-template-columns: 1fr;
        justify-content: start;
        padding-left: 30px;
        padding-right: 30px;
    }

    .user-create-page .content {
        grid-template-columns: 1fr;
        justify-content: start;
        padding-left: 30px;
        padding-right: 30px;
    }

    .campaign-create-page .form-panel {
        max-width: 620px;
    }

    .user-create-page .form-panel {
        max-width: 600px;
    }
}

  @media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .entity-profile-panel {
        grid-template-columns: 1fr;
    }

    .entity-profile-main {
        grid-template-columns: 1fr;
    }

    .entity-profile-identity {
        max-width: 240px;
    }

    .entity-profile-actions {
        justify-content: flex-start;
    }

    .entity-profile-identity h1 {
        font-size: 1.9rem;
    }

    .journal-entry-fields {
        grid-template-columns: 1fr;
    }

    .coinage-grid,
    .magic-grid,
    .magic-loot-grid,
    .mundane-loot-grid,
    .mundane-loot-grid .loot-card-other .foc-item-list,
    .general-loot-grid .foc-item-list,
    .quest-loot-grid .foc-item-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coinage-form {
        grid-template-columns: 1fr;
    }

    .encounter-item-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portrait-placeholder.large {
        width: 84px;
        font-size: 1.25rem;
    }

      .letter-page,
      .letter-page-landscape {
          padding: 92px 42px;
      }

      .letter-page-content {
          width: 84%;
      }

      .letter-style-burnt_parchment.letter-page-portrait {
          padding: 84px 40px 82px;
      }

      .letter-style-burnt_parchment.letter-page-landscape {
          padding: 72px 34px 60px;
      }

      .letter-style-burnt_parchment .letter-page-content {
          width: 86%;
      }

      .letter-style-rolled_old_parchment.letter-page-portrait {
          padding: 98px 64px 104px;
      }

      .letter-style-rolled_old_parchment.letter-page-landscape {
          padding: 78px 108px 94px;
      }

      .content:has(> .relations-sidebar) {
          grid-template-columns: 1fr;
      }

      .relations-sidebar {
          position: static;
          grid-column: 1;
          grid-row: auto;
          max-height: none;
      }
  
      .relation-row,
      .relation-form {
        grid-template-columns: 1fr;
    }

    .journal-workspace {
        grid-template-columns: 1fr;
    }

    .content:has(.journal-workspace) {
        display: block;
        height: auto;
        overflow: visible;
    }

    .journal-entries-column {
        max-height: none;
        overflow: visible;
    }

    .journal-workspace .journal-list {
        overflow: visible;
        padding-right: 0;
    }

    .relation-row {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .auth-shell {
        justify-self: center;
        margin-left: 0;
    }

    .login-panel {
        min-height: 620px;
        padding: 82px 58px 92px;
    }

    .content {
        padding: 22px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar-actions {
        flex-wrap: wrap;
    }

    .campaign-mark {
        max-width: 126px;
        height: 34px;
    }

    .campaign-mark-realm {
        max-width: 146px;
    }

    .topbar-campaign-crest {
        position: static;
        justify-content: flex-start;
        max-width: 100%;
        transform: none;
    }
    
    .topbar-campaign-name {
        font-size: 1.45rem;
    }

    .campaign-toolbar {
        top: 152px;
    }

    .subsection-toolbar {
        top: 221px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-landing-page .campaign-card {
        min-height: 240px;
        padding: 46px 34px 42px;
    }

    .dashboard-landing-page .dashboard-campaign-card-body {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dashboard-landing-page .dashboard-campaign-marks {
        grid-template-columns: repeat(2, 76px);
    }

    .dashboard-landing-page .dashboard-campaign-marks img {
        width: 76px;
        max-height: 56px;
    }

    .dashboard-landing-page .dashboard-campaign-list {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    .admin-users-card summary {
        width: 100%;
        min-height: 76px;
        padding: 22px 34px;
    }

    .dashboard-landing-page .admin-users-card .table-panel {
        min-height: 560px;
        padding: 88px 42px 86px;
    }

    .admin-user-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
    }

    .admin-user-row span:nth-child(2),
    .admin-user-row span:nth-child(3) {
        font-size: 0.68rem;
    }

    .admin-user-heading {
        display: none;
    }

    .campaign-create-page .content {
        min-height: auto;
    }

    .campaign-create-page .form-panel {
        padding: 28px 0;
    }

    .user-create-page .content {
        min-height: auto;
    }

    .user-create-page .form-panel {
        max-height: none;
        padding: 28px 0;
        transform: none;
    }

    .campaign-create-page .form-panel .button {
        width: 100%;
    }

    .user-create-page .form-panel .button {
        width: 100%;
    }

    .file-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .file-preview {
        width: 96px;
    }

    .letter-page,
    .letter-page-landscape {
        padding: 68px 28px 70px;
    }

    .letter-page-content {
        width: 86%;
    }

    .letter-style-burnt_parchment.letter-page-portrait {
        padding: 62px 26px 64px;
    }

    .letter-style-burnt_parchment.letter-page-landscape {
        padding: 52px 20px 48px;
    }

    .letter-style-burnt_parchment .letter-page-content {
        width: 88%;
    }

    .letter-style-rolled_old_parchment.letter-page-portrait {
        padding: 68px 38px 78px;
    }

    .letter-style-rolled_old_parchment.letter-page-landscape {
        padding: 54px 58px 70px;
    }

    .coinage-grid,
    .loot-grid,
    .magic-grid,
    .mundane-loot-grid .loot-card-other .foc-item-list,
    .general-loot-grid .foc-item-list,
    .quest-loot-grid .foc-item-list {
        grid-template-columns: 1fr;
    }

    .encounter-item-row {
        grid-template-columns: 1fr;
    }

    .foc-row {
        align-items: stretch;
        flex-direction: column;
    }

    .foc-row-actions {
        width: 100%;
    }

    .foc-row-actions select {
        flex: 1 1 auto;
        width: auto;
    }

    .split-header {
        display: block;
    }
}