/* ── VARIABLES ──────────────────────────────────────────────────────────── */
:root {
    --bg-color:     #f4f1ea;
    --ink-color:    #2b2b2b;
    --accent-color: #7b241c;
    --box-bg:       #fffdf9;
    --border-light: #aaa;
    --sidebar-bg:   #1e1e1e;
    --sidebar-text: #ccc;
}

/* ── RESET & BASE ───────────────────────────────────────────────────────── */
body, html { margin: 0; padding: 0; height: 100%; font-family: 'Georgia', serif; background-color: #d1cbc0; color: var(--ink-color); overflow: hidden; }

/* ── SPA VIEWS ──────────────────────────────────────────────────────────── */
.spa-view { display: none; height: 100vh; width: 100vw; box-sizing: border-box; }
.spa-view.active-view { display: flex; flex-direction: column; }
#view-editor.active-view { flex-direction: row; }

/* ── SHARED HOME STYLES (mode-select, gm-home, player-home) ────────────── */
#view-home, #view-gm-home {
    background: radial-gradient(ellipse at 50% 0%, #2a1a14 0%, #0e0a08 60%, #000 100%);
    color: #c8b89a;
    overflow-y: auto;
    align-items: stretch;
    font-family: 'Georgia', serif;
}

.home-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 60px 30px 80px;
    width: 100%;
    box-sizing: border-box;
}

.home-title { text-align: center; margin-bottom: 50px; }
.home-title h1 {
    font-size: 42px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #e8d5b0;
    margin: 0 0 10px;
    text-shadow: 0 2px 20px rgba(123,36,28,0.6);
}
.home-title p { color: #7a6a56; font-style: italic; font-size: 15px; margin: 0; letter-spacing: 1px; }

.home-ctas { display: flex; gap: 15px; justify-content: center; margin-bottom: 50px; flex-wrap: wrap; align-items: center; }
.btn-primary {
    background: var(--accent-color); color: #fff; border: 2px solid #a33228;
    padding: 14px 32px; font-size: 15px; font-family: 'Courier New', monospace;
    font-weight: bold; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: filter 0.2s, transform 0.1s;
}
.btn-primary:hover { filter: brightness(1.2); transform: translateY(-1px); }
.btn-secondary {
    background: #1a1a1a; color: #c8b89a; border: 1px solid #444;
    padding: 14px 24px; font-size: 14px; font-family: 'Courier New', monospace;
    letter-spacing: 1px; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--accent-color); color: #fff; }
.btn-ghost {
    background: transparent; color: #5a4a36; border: 1px solid #2a1e14;
    padding: 8px 16px; font-size: 12px; font-family: 'Courier New', monospace;
    letter-spacing: 1px; cursor: pointer; transition: 0.2s;
}
.btn-ghost:hover { border-color: #5a4a36; color: #c8b89a; }

.home-meta-nav { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 28px 0 0; }
.home-meta-nav a { color: #5a4a36; font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: color 0.2s; }
.home-meta-nav a:hover { color: #c8b89a; }
.home-meta-sep { color: #2a1e14; font-size: 14px; }

.home-section-title { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #5a4a36; border-bottom: 1px solid #2a1e14; padding-bottom: 10px; margin-bottom: 20px; }
#campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; }
.home-empty { color: #5a4a36; font-style: italic; font-size: 14px; }
.campaign-card { background: #120d09; border: 1px solid #2a1e14; padding: 18px 20px; transition: border-color 0.2s, box-shadow 0.2s; }
.campaign-card:hover { border-color: var(--accent-color); box-shadow: 0 4px 16px rgba(123,36,28,0.3); }
.cc-name { font-size: 16px; color: #e8d5b0; font-weight: bold; margin-bottom: 6px; }
.cc-meta { font-size: 12px; color: #5a4a36; font-family: 'Courier New', monospace; margin-bottom: 14px; }
.cc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-actions button { font-size: 11px; font-family: 'Courier New', monospace; padding: 5px 10px; cursor: pointer; border: 1px solid #444; background: #1e1613; color: #c8b89a; transition: 0.15s; }
.cc-actions button:hover { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.cc-secondary { opacity: 0.7; }
.cc-danger { color: #a44 !important; border-color: #500 !important; }
.cc-danger:hover { background: #700 !important; color: #fff !important; }
.home-import-bar { margin-top: 40px; }
.home-import-bar label { display: inline-block; background: #1a1a1a; color: #c8b89a; border: 1px solid #444; padding: 10px 20px; font-family: 'Courier New', monospace; font-size: 13px; cursor: pointer; transition: 0.2s; }
.home-import-bar label:hover { border-color: var(--accent-color); color: #fff; }
.footer-brand { text-align: center; color: #3a2e24; font-size: 11px; font-family: 'Courier New', monospace; letter-spacing: 2px; margin-top: 50px; padding-top: 20px; border-top: 1px solid #1a1008; text-transform: uppercase; opacity: 0.55; line-height: 2; }
.footer-copy { font-size: 10px; letter-spacing: 1px; opacity: 0.75; display: block; }

/* ── MODE SELECT SCREEN ─────────────────────────────────────────────────── */
.mode-select-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 30px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mode-select-cards {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 50px;
}
.mode-card {
    background: #0d0906;
    border: 1px solid #2a1e14;
    padding: 40px 36px;
    width: 280px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
    box-sizing: border-box;
}
.mode-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 6px 30px rgba(123,36,28,0.4);
    transform: translateY(-3px);
}
.mode-card-rule { width: 40px; height: 2px; background: var(--accent-color); margin: 0 auto 22px; }
.mode-card h2 { color: #e8d5b0; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 14px; }
.mode-card p { color: #7a6a56; font-size: 13px; line-height: 1.7; margin: 0; }

/* ── EDITOR CHROME ──────────────────────────────────────────────────────── */
#editor-topbar { display: flex; background: #1a1a1a; align-items: stretch; flex-shrink: 0; }
#home-btn { background: #111; color: #888; border: none; border-right: 1px solid #333; padding: 0 14px; font-size: 13px; cursor: pointer; font-family: 'Courier New', monospace; white-space: nowrap; transition: 0.2s; flex-shrink: 0; }
#home-btn:hover { background: var(--accent-color); color: #fff; }
#editor-campaign-name { color: #888; font-size: 12px; font-family: 'Courier New', monospace; padding: 0 14px; display: flex; align-items: center; border-right: 1px solid #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; flex-shrink: 0; }
#tab-bar { display: flex; background: #222; padding: 8px 10px 0 10px; gap: 5px; overflow-x: auto; flex-grow: 1; min-height: 38px; box-sizing: border-box; border-bottom: 2px solid var(--ink-color); }
.tab { padding: 6px 15px; background: #444; color: #aaa; border-radius: 5px 5px 0 0; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 10px; height: 30px; box-sizing: border-box; border: 1px solid transparent; border-bottom: none; margin-bottom: -2px; z-index: 1; }
.tab:hover { background: #555; }
.tab.active { background: var(--bg-color); color: var(--ink-color); font-weight: bold; border: 1px solid var(--ink-color); border-bottom: 2px solid var(--bg-color); z-index: 10; }
.tab-close { color: #888; background: transparent; border: none; font-size: 14px; cursor: pointer; padding: 0; }
.tab-close:hover { color: red; }

/* ── ASSETS VIEW TOPBAR ─────────────────────────────────────────────────── */
#assets-topbar { background: #1a1a1a; border-bottom: 2px solid var(--accent-color); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-family: 'Courier New', monospace; color: #ccc; font-size: 13px; }
#assets-topbar span { color: var(--accent-color); font-weight: bold; letter-spacing: 1px; }
#assets-back-btn { background: none; border: 1px solid #555; color: #888; padding: 4px 10px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; margin-left: auto; }
#assets-back-btn:hover { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

/* ── PLAYER TOPBAR ──────────────────────────────────────────────────────── */
#player-topbar { background: #111; border-bottom: 2px solid #333; padding: 0; display: flex; align-items: center; flex-shrink: 0; font-family: 'Courier New', monospace; min-height: 40px; }
#player-topbar button { background: #111; color: #888; border: none; border-right: 1px solid #333; padding: 0 16px; font-size: 13px; cursor: pointer; font-family: 'Courier New', monospace; white-space: nowrap; min-height: 40px; transition: 0.2s; }
#player-topbar button:hover { background: var(--accent-color); color: #fff; }

/* ── WORKSPACE TABS ─────────────────────────────────────────────────────── */
#workspace-tabs { display: flex; background: #1a1a1a; border-bottom: 1px solid #333; flex-shrink: 0; gap: 2px; padding: 6px 10px 0; }
.ws-tab { background: #2a2a2a; color: #888; border: 1px solid #333; border-bottom: none; border-radius: 4px 4px 0 0; padding: 6px 18px; font-size: 12px; font-family: 'Courier New', monospace; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; margin-bottom: -1px; }
.ws-tab:hover { background: #3a3a3a; color: #ccc; }
.ws-tab.active { background: #d1cbc0; color: var(--ink-color); font-weight: bold; border-color: #555; }
.ws-tab.ws-badge::after { content: '●'; color: var(--accent-color); font-size: 8px; margin-left: 5px; vertical-align: super; }

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
#sidebar { width: 320px; min-width: 36px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; border-right: 2px solid #000; font-family: 'Courier New', monospace; flex-shrink: 0; overflow: hidden; }
#sidebar.minimized { width: 36px !important; }
#sidebar.minimized .sidebar-header h2, #sidebar.minimized .sidebar-controls, #sidebar.minimized #sidebar-static, #sidebar.minimized #folder-list { display: none; }
.sidebar-header { padding: 10px 12px; background: #111; border-bottom: 2px solid var(--accent-color); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-shrink: 0; }
.sidebar-header h2 { margin: 0; font-size: 15px; color: #fff; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#sidebar-toggle { background: none; border: 1px solid #555; color: #ccc; cursor: pointer; font-size: 11px; padding: 3px 7px; border-radius: 2px; flex-shrink: 0; line-height: 1; }
#sidebar-toggle:hover { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
#sidebar-resize-handle { width: 5px; background: #3a3a3a; cursor: ew-resize; flex-shrink: 0; z-index: 50; transition: background 0.15s; }
#sidebar-resize-handle:hover, #sidebar-resize-handle.active { background: var(--accent-color); }
.sidebar-controls { padding: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #444; }
.sidebar-controls button, .sidebar-controls label { width: 100%; box-sizing: border-box; text-align: center; background: #333; color: #fff; border: 1px solid #555; padding: 6px; cursor: pointer; font-size: 12px; }
.sidebar-controls button:hover, .sidebar-controls label:hover { background: var(--accent-color); }
.sidebar-import-label { display: flex; align-items: center; justify-content: center; }
#sidebar-tab-bar { display: flex; border-bottom: 1px solid #444; background: #161616; flex-shrink: 0; }
.sidebar-tab { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; color: #888; padding: 7px 4px; font-size: 11px; font-family: 'Courier New', monospace; letter-spacing: 0.5px; cursor: pointer; transition: color 0.15s, border-color 0.15s; text-transform: uppercase; }
.sidebar-tab:hover { color: #ccc; }
.sidebar-tab.active { color: #fff; border-bottom-color: var(--accent-color); }
#folder-list { flex-grow: 1; overflow-y: auto; padding: 10px; }

/* ── TREE ELEMENTS ──────────────────────────────────────────────────────── */
.folder-group { margin-bottom: 2px; }
.folder-header { display: flex; justify-content: space-between; align-items: center; background: #2a2a2a; padding: 6px 8px; font-weight: bold; font-size: 13px; border-left: 2px solid transparent; overflow: hidden; }
.folder-header:hover { background: #3a3a3a; border-left: 2px solid var(--accent-color); }
.folder-title { cursor: pointer; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.folder-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-actions { display: flex; gap: 4px; opacity: 0.5; transition: opacity 0.2s; flex-shrink: 0; }
.folder-header:hover .folder-actions { opacity: 1; }
.folder-actions button { background: none; border: none; color: #ccc; cursor: pointer; padding: 2px; font-size: 12px; }
.folder-actions button:hover { color: #fff; background: #555; border-radius: 3px; }
.folder-contents { padding-left: 15px; border-left: 1px dashed #444; margin-left: 7px; display: none; margin-top: 2px; }
.folder-group.open > .folder-contents { display: block; }
.entity-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; margin-bottom: 2px; cursor: pointer; font-size: 12px; background: #222; border-left: 2px solid transparent; }
.entity-item:hover { background: #333; border-left: 2px solid var(--accent-color); }
.entity-item.active-sidebar { background: #444; border-left: 2px solid var(--accent-color); color: #fff; }
.item-label { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-actions { display: flex; gap: 2px; flex-shrink: 0; }
.entity-actions button { background: none; border: none; color: #a00; cursor: pointer; display: none; font-weight: bold; }
.entity-item:hover .entity-actions button { display: inline-block; }
.folder-more-btn { display: none; background: none; border: none; color: #888; cursor: pointer; padding: 2px 7px; font-size: 15px; line-height: 1; flex-shrink: 0; }
.folder-more-btn:hover { color: #fff; background: #555; border-radius: 3px; }
#sidebar.compact .folder-actions { display: none; }
#sidebar.compact .folder-more-btn { display: block; }
.entity-more-btn { display: none; background: none; border: none; color: #888; cursor: pointer; padding: 1px 5px; font-size: 13px; line-height: 1; }
.entity-item:hover .entity-more-btn { display: inline-block; }
#sidebar.compact .entity-actions { display: none !important; }
#sidebar.compact .entity-more-btn { display: inline-block !important; }
.ft-dragging { opacity: 0.4; }
.folder-header.ft-drag-over { background: var(--accent-color); border-left: 2px solid #fff; color: #fff; }
.ft-root-drop-zone { border: 2px dashed #555; border-radius: 3px; padding: 8px; text-align: center; font-size: 11px; color: #555; margin-bottom: 6px; display: none; cursor: default; }
.ft-dragging-active .ft-root-drop-zone { display: block; }
.ft-root-drop-zone.ft-drag-over { border-color: var(--accent-color); color: #aaa; background: rgba(123,36,28,0.12); }
.ft-rubber-band { position: fixed; border: 1px solid var(--accent-color); background: rgba(123,36,28,0.12); pointer-events: none; z-index: 9998; }
.entity-item.ft-selected { background: #3a2020 !important; border-left-color: var(--accent-color) !important; }
.folder-group.ft-selected > .folder-header { background: #3a2020; border-left-color: var(--accent-color); }
.ft-inline-rename { background: #2a2a2a; border: 1px solid var(--accent-color); color: #eee; font-family: 'Courier New', monospace; font-size: 12px; padding: 1px 4px; border-radius: 2px; width: 100%; box-sizing: border-box; outline: none; min-width: 0; }
.cths-btn-danger { background: #7b1c1c; color: #fff; border: none; padding: 7px 18px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 13px; border-radius: 2px; }
.cths-btn-danger:hover { opacity: 0.85; }
.cths-modal-field { margin-bottom: 14px; }
.cths-modal-field-label { display: block; font-size: 12px; color: #aaa; margin-bottom: 5px; }

/* Dropdown */
.action-dropdown { position: fixed; background: #1a1a1a; border: 1px solid #555; border-radius: 4px; z-index: 9999; min-width: 175px; box-shadow: 0 4px 16px rgba(0,0,0,0.7); overflow: hidden; font-family: 'Courier New', monospace; }
.action-dropdown button { display: block; width: 100%; text-align: left; padding: 8px 14px; background: none; border: none; color: #ccc; cursor: pointer; font-size: 12px; white-space: nowrap; }
.action-dropdown button:hover { background: var(--accent-color); color: #fff; }
.action-dropdown hr { border: none; border-top: 1px solid #444; margin: 3px 0; }

/* ── MAIN WORKSPACE ─────────────────────────────────────────────────────── */
#main-area { flex-grow: 1; display: flex; flex-direction: column; background: #d1cbc0; overflow: hidden; position: relative; }
#welcome-screen { flex-grow: 1; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #666; text-transform: uppercase; letter-spacing: 2px; text-align: center; padding: 20px; }
#sheet-wrapper { flex-grow: 1; overflow-y: auto; padding: 20px; display: none; }
#sheet-container { max-width: 1000px; margin: 0 auto; background: var(--bg-color); padding: 40px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border: 1px solid #999; }

/* ── DICE ROLLER ────────────────────────────────────────────────────────── */
#dice-roller { position: absolute; bottom: 20px; right: 20px; width: 300px; background: rgba(30,30,30,0.95); color: #fff; border: 2px solid var(--accent-color); box-shadow: 0 5px 15px rgba(0,0,0,0.5); display: flex; flex-direction: column; font-family: 'Courier New', monospace; border-radius: 5px; z-index: 100; }
#dice-header { padding: 10px; background: var(--accent-color); font-weight: bold; font-size: 14px; border-radius: 3px 3px 0 0; cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
#dice-header:hover { filter: brightness(1.15); }
#dice-input-area { padding: 10px; background: #222; border-bottom: 1px solid #444; display: flex; gap: 5px; }
#dice-log { height: 220px; overflow-y: auto; padding: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 5px; }
.log-entry { background: #333; padding: 6px; border-left: 3px solid #555; transition: border-color 0.3s, background-color 0.3s; }
.log-success  { border-left-color: #4CAF50; }
.log-hard     { border-left-color: #2196F3; }
.log-extreme  { border-left-color: #9C27B0; }
.log-critical { border-left-color: #FFD700; background: #5a4b00; }
.log-fumble   { border-left-color: #F44336; background: #4a0000; }
.log-dn            { border-left-color: #888; }
.dice-log-placeholder { color: #aaa; text-align: center; margin-top: 20px; font-style: italic; }
.rollable { cursor: pointer; color: var(--accent-color); text-decoration: underline dotted; transition: 0.2s; }
.rollable:hover { background: var(--accent-color); color: #fff; }
.btn-push { background: #555; color: #fff; border: 1px solid #777; cursor: pointer; padding: 3px 6px; font-size: 10px; margin-top: 5px; width: 100%; transition: 0.2s; }
.btn-push:hover { background: var(--accent-color); border-color: #fff; }

/* ── CHARACTER SHEET ────────────────────────────────────────────────────── */
.header-banner { text-align: center; border-bottom: 4px double var(--ink-color); margin-bottom: 20px; padding-bottom: 10px; }
.header-banner h1 { margin: 0; font-size: 32px; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-color); }
h2 { text-transform: uppercase; font-size: 18px; border-bottom: 2px solid var(--accent-color); color: var(--accent-color); margin-top: 30px; padding-bottom: 5px; }
.grid { display: grid; gap: 15px; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.form-group { margin-bottom: 10px; }
label { display: block; font-weight: bold; font-size: 12px; text-transform: uppercase; margin-bottom: 2px; color: #555; }
input[type="text"], input[type="number"], select, textarea { width: 100%; padding: 6px; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; font-size: 14px; border: 1px solid var(--border-light); background: var(--box-bg); color: var(--ink-color); }
.stat-box { border: 2px solid var(--ink-color); background: var(--box-bg); text-align: center; position: relative; padding-top: 20px; }
.stat-box label { position: absolute; top: 0; left: 0; right: 0; background: var(--ink-color); color: #fff; font-size: 12px; padding: 2px 0; }
.stat-box input { text-align: center; font-size: 24px; font-weight: bold; border: none; background: transparent; width: 80%; margin: 5px auto; }
.sub-stats { display: flex; justify-content: space-around; border-top: 1px solid var(--border-light); background: #eee; font-size: 12px; padding: 2px 0; font-family: 'Courier New', monospace; }
#skills-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 20px; font-family: Arial, sans-serif; font-size: 13px; }
.skill-row { display: flex; align-items: center; border-bottom: 1px dotted #ccc; padding: 2px 0; }
.skill-name { flex-grow: 1; display: flex; justify-content: space-between; padding-right: 5px; }
.skill-base { color: #888; font-size: 11px; margin-left: 5px; }
.skill-inputs { display: flex; align-items: center; gap: 2px; }
.skill-inputs input { width: 35px; text-align: center; padding: 2px; font-size: 13px; border: 1px solid #aaa; }
.skill-sub { width: 25px; text-align: center; font-size: 11px; background: #eee; border: 1px solid #ddd; padding: 3px 0; }
.skill-copy-id { display: none; background: none; border: 1px solid #bbb; color: #888; cursor: pointer; font-size: 9px; padding: 1px 3px; border-radius: 2px; font-family: 'Courier New', monospace; white-space: nowrap; }
.skill-row:hover .skill-copy-id, .enemy-skill-row:hover .skill-copy-id { display: inline-block; }
.skill-copy-id:hover { background: #555; color: #fff; border-color: #555; }
.hidden { display: none !important; }
.enemy-skill-row { display: flex; gap: 10px; margin-bottom: 5px; align-items: center; }
.enemy-skill-row .es-name { flex: 2; }
.enemy-skill-row .es-val { flex: 1; }
.enemy-skill-row .es-dice { font-size: 16px; }
.enemy-skill-row .skill-sub { width: 30px; line-height: 24px; }
.btn-reset { background: #e2e2e2; border: 1px solid #aaa; font-size: 10px; cursor: pointer; padding: 2px 5px; color: #333; margin-top: 2px; }
.table-list { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table-list th { text-align: left; background: var(--ink-color); color: #fff; padding: 5px; font-size: 12px; }
.table-list td { padding: 2px; }
.table-list input { border: none; border-bottom: 1px solid #ccc; background: transparent; }
.btn-remove { background: #a00; color: white; border: none; cursor: pointer; font-weight: bold; padding: 4px 8px; }
.textarea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.textarea-box textarea { height: 60px; resize: vertical; }
.sheet-controls { margin-bottom: 15px; text-align: right; }
.sheet-controls button { background: var(--ink-color); color: white; border: none; padding: 6px 12px; font-family: 'Courier New', monospace; cursor: pointer; font-weight: bold; }
input[type="file"] { display: none; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── JOURNAL PANEL ──────────────────────────────────────────────────────── */
#journal-panel, #player-panel-journal { flex-grow: 1; overflow: hidden; background: #d1cbc0; }
.journal-shell { display: flex; height: 100%; flex-grow: 1; }
.journal-shell.journal-editor-only { display: block; height: 100%; }
.journal-editor-only .journal-main { width: 100%; height: 100%; }
.journal-editor-only .journal-sidebar,
.journal-editor-only .journal-resize-handle { display: none; }
.journal-sidebar { width: 280px; min-width: 160px; max-width: 520px; background: #1e1e1e; display: flex; flex-direction: column; border-right: none; flex-shrink: 0; font-family: 'Courier New', monospace; }
.journal-resize-handle { width: 5px; background: #444; cursor: col-resize; flex-shrink: 0; transition: background 0.15s; }
.journal-resize-handle:hover, .journal-resize-handle:active { background: var(--accent-color); }
.journal-toolbar { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #333; }
.journal-new-btn { flex-shrink: 0; background: var(--accent-color); color: #fff; border: none; padding: 6px 12px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; }
.journal-new-btn:hover { filter: brightness(1.2); }
.journal-search { flex-grow: 1; background: #2a2a2a; border: 1px solid #444; color: #ccc; padding: 5px 8px; font-family: 'Courier New', monospace; font-size: 12px; }
.journal-filter { margin: 0 10px 8px; background: #2a2a2a; border: 1px solid #333; color: #888; padding: 4px 6px; font-family: 'Courier New', monospace; font-size: 11px; width: calc(100% - 20px); box-sizing: border-box; }
.journal-list { flex-grow: 1; overflow-y: auto; }
.journal-list-item { padding: 10px 12px; border-bottom: 1px solid #2a2a2a; cursor: pointer; transition: background 0.15s; }
.journal-list-item:hover { background: #2a2a2a; }
.journal-list-item.active { background: #333; border-left: 3px solid var(--accent-color); }
.jl-title { color: #ccc; font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jl-meta { color: #555; font-size: 10px; margin-top: 3px; }
.journal-empty-msg { color: #555; font-size: 12px; padding: 20px 12px; font-style: italic; }
.journal-main { flex-grow: 1; display: flex; flex-direction: column; background: var(--bg-color); overflow: hidden; }
.journal-empty-state { flex-grow: 1; display: flex; align-items: center; justify-content: center; color: #999; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; }
.journal-editor { display: flex; flex-direction: column; height: 100%; }
.journal-editor-header { background: #f0ece3; border-bottom: 1px solid #ccc; padding: 14px 20px 10px; flex-shrink: 0; }
.journal-title-input { width: 100%; border: none; border-bottom: 2px solid var(--accent-color); background: transparent; font-family: 'Georgia', serif; font-size: 22px; color: var(--ink-color); padding: 0 0 6px; margin-bottom: 10px; outline: none; box-sizing: border-box; }
.journal-editor-meta-row { display: flex; gap: 10px; }
.journal-cat-select { flex: 0 0 160px; background: #fff; border: 1px solid #ccc; color: #555; padding: 4px 6px; font-family: 'Courier New', monospace; font-size: 11px; }
.journal-tags-input { flex: 1; background: transparent; border: 1px solid #ddd; color: #888; padding: 4px 8px; font-family: 'Courier New', monospace; font-size: 11px; }
.journal-content-area { flex-grow: 1; border: none; padding: 20px; font-family: 'Georgia', serif; font-size: 14px; color: var(--ink-color); line-height: 1.8; resize: none; background: var(--bg-color); outline: none; }
.journal-editor-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; border-top: 1px solid #ddd; background: #f0ece3; flex-shrink: 0; }
.journal-footer-right { display: flex; align-items: center; gap: 8px; }
.journal-local-img-btn { background: none; border: 1px solid #ccc; color: #888; padding: 4px 10px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 11px; transition: 0.15s; }
.journal-local-img-btn:hover { border-color: #aaa; color: #555; }
.journal-local-img-btn.jft-local-active { border-color: var(--accent-color); color: var(--accent-color); }
.journal-save-status { font-size: 11px; color: #888; font-family: 'Courier New', monospace; font-style: italic; }
.journal-delete-btn { background: none; border: 1px solid #c00; color: #c00; padding: 4px 10px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 11px; }
.journal-delete-btn:hover { background: #700; color: #fff; border-color: #700; }
.jl-readonly-mark { color: var(--accent-color); font-size: 10px; vertical-align: middle; }
.journal-readonly { pointer-events: none; }
.journal-title-ro { font-family: 'Georgia', serif; font-size: 22px; color: var(--ink-color); padding: 0 0 6px; border-bottom: 2px solid var(--accent-color); margin-bottom: 10px; }
.journal-cat-ro { font-family: 'Courier New', monospace; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.journal-ro-badge { font-family: 'Courier New', monospace; font-size: 10px; color: var(--accent-color); border: 1px solid var(--accent-color); padding: 1px 6px; margin-left: 8px; text-transform: uppercase; letter-spacing: 1px; }
.journal-content-ro { flex-grow: 1; padding: 20px; font-family: 'Georgia', serif; font-size: 14px; color: var(--ink-color); line-height: 1.8; overflow-y: auto; background: var(--bg-color); }
.journal-content-ro h1 { font-size: 1.6em; margin: 0.5em 0; }
.journal-content-ro h2 { font-size: 1.3em; margin: 0.5em 0; }
.journal-content-ro p  { margin: 0 0 0.6em; }
.journal-content-ro ul, .journal-content-ro ol { padding-left: 1.6em; margin: 0.4em 0; }

/* ── RICH TEXT EDITOR (shared) ───────────────────────────────────────────── */
.rte-field-wrap { border: 1px solid var(--border-light); display: flex; flex-direction: column; }
.rte-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; background: #e8e4db; border-bottom: 1px solid #ccc; flex-wrap: wrap; }
.rte-btn { background: none; border: 1px solid transparent; color: #555; padding: 2px 7px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 11px; border-radius: 2px; transition: background 0.12s, border-color 0.12s; line-height: 1.4; }
.rte-btn:hover { background: #fff; border-color: #bbb; color: #222; }
.rte-btn:active { background: #f0ece3; border-color: var(--accent-color); color: var(--accent-color); }
.rte-sep { width: 1px; height: 14px; background: #ccc; margin: 0 3px; flex-shrink: 0; }
.rte-content { padding: 8px 10px; font-size: 13px; color: var(--ink-color); line-height: 1.6; outline: none; min-height: 80px; overflow-y: auto; }
.rte-content:empty::before { content: attr(data-placeholder); color: #bbb; pointer-events: none; }
.rte-content h1 { font-size: 1.5em; margin: 0.4em 0; }
.rte-content h2 { font-size: 1.2em; margin: 0.4em 0; }
.rte-content p  { margin: 0 0 0.5em; }
.rte-content ul, .rte-content ol { padding-left: 1.5em; margin: 0.3em 0; }
.rte-inline-img { max-width: 100%; max-height: 300px; display: block; margin: 6px auto; border: 1px solid #ccc; cursor: default; }
.rte-field-wrap--sm .rte-content { min-height: 55px; }

/* Journal context overrides — richer styling for the full-panel journal editor */
.journal-rte-wrap { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.journal-rte-wrap .rte-toolbar { flex-shrink: 0; padding: 6px 12px; }
.journal-rte-wrap .rte-content { flex-grow: 1; padding: 20px; font-family: 'Georgia', serif; font-size: 14px; line-height: 1.8; background: var(--bg-color); min-height: 0; }
.journal-rte-wrap .rte-content h1 { font-size: 1.6em; margin: 0.5em 0; font-family: 'Georgia', serif; }
.journal-rte-wrap .rte-content h2 { font-size: 1.3em; margin: 0.5em 0; font-family: 'Georgia', serif; }
.journal-rte-wrap .rte-content p  { margin: 0 0 0.6em; }
.journal-rte-wrap .rte-content ul, .journal-rte-wrap .rte-content ol { padding-left: 1.6em; margin: 0.4em 0; }
.journal-rte-wrap .rte-inline-img { max-height: 400px; }
/* ── COMBAT TRACKER ─────────────────────────────────────────────────────── */
#combat-panel { flex-grow: 1; overflow-y: auto; background: #1a1a1a; font-family: 'Courier New', monospace; }
.combat-inner { max-width: 900px; margin: 0 auto; padding: 20px; }
.combat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.combat-header-left { display: flex; align-items: center; gap: 14px; }
.combat-title { color: #c8b89a; font-size: 18px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.combat-round-badge { background: var(--accent-color); color: #fff; padding: 4px 12px; font-size: 13px; font-weight: bold; border-radius: 2px; }
.combat-header-right { display: flex; gap: 8px; flex-wrap: wrap; }
.combat-btn { background: #2a2a2a; color: #ccc; border: 1px solid #444; padding: 7px 14px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; transition: 0.15s; white-space: nowrap; }
.combat-btn:hover { background: #3a3a3a; color: #fff; border-color: #666; }
.combat-btn-primary { background: var(--accent-color); color: #fff; border-color: #a33228; font-weight: bold; }
.combat-btn-primary:hover { filter: brightness(1.2); }
.combat-add-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.combat-add-btn { background: #222; color: #888; border: 1px dashed #444; padding: 7px 14px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; transition: 0.15s; }
.combat-add-btn:hover { border-color: var(--accent-color); color: #c8b89a; }
.combat-empty { color: #555; text-align: center; padding: 40px; font-style: italic; font-size: 14px; }
.combatant-list { display: flex; flex-direction: column; gap: 4px; }
.combatant-row { display: flex; align-items: center; gap: 10px; background: #252525; border: 1px solid #333; border-left: 4px solid #333; padding: 10px 12px; transition: border-color 0.2s; position: relative; }
.combatant-row:hover { border-color: #555; border-left-color: #555; }
.combatant-row.combatant-active { border-left-color: var(--accent-color); background: #2d1f1c; }
.combatant-row.combatant-dead { opacity: 0.45; }
.cbt-active-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.combatant-active .cbt-active-bar::before { content: '▶'; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); color: var(--accent-color); font-size: 12px; }
.cbt-order { color: #555; font-size: 11px; width: 18px; flex-shrink: 0; text-align: right; }
.cbt-name-col { flex: 1; min-width: 0; }
.cbt-name-input { background: transparent; border: none; border-bottom: 1px solid transparent; color: #c8b89a; font-family: 'Courier New', monospace; font-size: 14px; width: 100%; padding: 2px 0; }
.cbt-name-input:hover, .cbt-name-input:focus { border-bottom-color: #555; outline: none; background: #1a1a1a; padding: 2px 6px; }
.cbt-ini-col { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cbt-ini-label { color: #555; font-size: 10px; text-transform: uppercase; }
.cbt-ini-input { width: 44px; background: #1a1a1a; border: 1px solid #444; color: #888; text-align: center; font-family: 'Courier New', monospace; font-size: 14px; padding: 3px; }
.cbt-hp-col { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; min-width: 120px; }
.cbt-hp-bar-wrap { height: 6px; background: #111; border-radius: 3px; overflow: hidden; }
.cbt-hp-bar { height: 100%; border-radius: 3px; transition: width 0.3s, background-color 0.3s; }
.hp-bar--healthy  { background: #4CAF50; }
.hp-bar--injured  { background: #FF9800; }
.hp-bar--critical { background: #F44336; }
.hp-bar--dead     { background: #555; }
.cbt-hp-text { display: flex; align-items: center; gap: 4px; }
.cbt-hp-adj { background: #1a1a1a; border: 1px solid #444; color: #888; width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; text-align: center; transition: 0.15s; flex-shrink: 0; }
.cbt-hp-adj:hover { background: #333; color: #fff; border-color: #666; }
.cbt-hp-val { color: #ccc; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cbt-hp-val:hover { color: #fff; text-decoration: underline; }
.cbt-actions-col { flex-shrink: 0; }
.cbt-remove-btn { background: none; border: none; color: #555; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; transition: color 0.15s; }
.cbt-remove-btn:hover { color: #c00; }

/* ── PACKAGE BUILDER ────────────────────────────────────────────────────── */
#package-builder-panel { flex-grow: 1; overflow-y: auto; background: #d1cbc0; }
.pkg-builder-inner { max-width: 800px; margin: 0 auto; padding: 30px; }
.pkg-builder-title { font-size: 18px; color: var(--accent-color); margin-bottom: 6px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-color); text-transform: uppercase; letter-spacing: 1px; }
.pkg-builder-desc { color: #666; font-size: 13px; margin-bottom: 24px; font-style: italic; }
.pkg-sections { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.pkg-section { background: var(--box-bg); border: 1px solid #ccc; padding: 16px; }
.pkg-section-title { font-family: 'Courier New', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #888; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.pkg-empty { color: #aaa; font-style: italic; font-size: 13px; }
.pkg-asset-row { margin-bottom: 8px; border: 1px solid #e0ddd6; padding: 10px 12px; background: #faf9f5; }
.pkg-asset-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 13px; color: var(--ink-color); }
.pkg-asset-label input[type="checkbox"] { display: inline; width: auto; flex-shrink: 0; }
.pkg-asset-name { flex-grow: 1; }
.pkg-asset-type-tag { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; padding: 1px 5px; border: 1px solid #ddd; }
.pkg-lock-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd; }
.pkg-lock-toggle { display: flex; align-items: center; gap: 8px; font-family: 'Courier New', monospace; font-size: 12px; color: #666; cursor: pointer; }
.pkg-lock-toggle input[type="checkbox"] { display: inline; width: auto; }
.pkg-ac-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pkg-ac-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 140px; }
.pkg-ac-label { font-family: 'Courier New', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #888; }
.pkg-ac-input { font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #bbb; padding: 6px 8px; background: #fff; letter-spacing: 1px; }
.pkg-hint-input { font-family: 'Courier New', monospace; font-size: 12px; border: 1px solid #ddd; padding: 6px 8px; background: #fff; color: #888; }
.pkg-export-bar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid #ccc; }
.pkg-status { font-family: 'Courier New', monospace; font-size: 12px; color: #888; font-style: italic; }
.pkg-export-btn { background: var(--accent-color); color: #fff; border: none; padding: 10px 24px; font-family: 'Courier New', monospace; font-size: 13px; font-weight: bold; letter-spacing: 1px; cursor: pointer; transition: filter 0.2s; }
.pkg-export-btn:hover { filter: brightness(1.2); }

/* ── PACKAGE IMPORT MODAL ───────────────────────────────────────────────── */
#package-import-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    display: flex; align-items: center; justify-content: center; z-index: 10000;
}
.pkg-modal-inner { background: var(--bg-color); border: 2px solid var(--accent-color); width: 560px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
.pkg-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--ink-color); color: #fff; flex-shrink: 0; }
.pkg-modal-header h2 { margin: 0; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; }
.pkg-modal-close { background: none; border: 1px solid #555; color: #ccc; padding: 3px 9px; cursor: pointer; font-size: 16px; line-height: 1; }
.pkg-modal-close:hover { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.pkg-modal-meta { padding: 12px 20px; background: #f0ece3; font-family: 'Courier New', monospace; font-size: 12px; color: #777; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.pkg-import-body { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pkg-section-label { font-family: 'Courier New', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #999; margin-bottom: 8px; }
.pkg-unlocked-section { border: 1px solid #c8dfc8; background: #f5fbf5; padding: 14px 16px; }
.pkg-unlocked-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-family: 'Courier New', monospace; font-size: 13px; color: var(--ink-color); border-bottom: 1px dotted #ddd; }
.pkg-unlocked-item:last-child { border-bottom: none; }
.pkg-unlocked-dot { width: 6px; height: 6px; background: #4CAF50; border-radius: 50%; flex-shrink: 0; }
.pkg-import-type { font-size: 10px; color: #aaa; text-transform: uppercase; margin-left: auto; }
.pkg-locked-section { border: 1px solid #ddd; background: #faf9f5; padding: 14px 16px; }
.pkg-locked-count { color: #777; font-family: 'Courier New', monospace; font-size: 13px; margin: 0 0 12px; }
.pkg-global-hint { color: #999; font-size: 12px; font-style: italic; font-family: 'Courier New', monospace; margin: 0 0 12px; }
.pkg-ac-unlock-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pkg-import-code-input { flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid #bbb; font-family: 'Courier New', monospace; font-size: 13px; letter-spacing: 1px; background: #fff; }
.pkg-try-btn { background: var(--ink-color); color: #fff; border: none; padding: 7px 16px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; white-space: nowrap; }
.pkg-try-btn:hover { background: var(--accent-color); }
.pkg-try-result { font-family: 'Courier New', monospace; font-size: 11px; font-style: italic; }
.pkg-try-err { color: #c00; }
.pkg-campaign-name-row { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.pkg-campaign-name-label { font-family: 'Courier New', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #888; }
.pkg-campaign-name-input { font-family: 'Georgia', serif; font-size: 16px; border: 1px solid #bbb; padding: 8px 10px; background: #fff; color: var(--ink-color); }
.pkg-modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid #ddd; background: #f0ece3; flex-shrink: 0; }
.pkg-import-summary { font-family: 'Courier New', monospace; font-size: 11px; color: #888; font-style: italic; }
.pkg-import-all-btn { background: var(--accent-color); color: #fff; border: none; padding: 9px 20px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.pkg-import-all-btn:hover { filter: brightness(1.15); }

/* Shake animation for wrong password */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.shake { animation: shake 0.5s ease; }

/* ── PLAYER HOME (campaign grid) ────────────────────────────────────────── */
#view-player-home {
    background: radial-gradient(ellipse at 50% 0%, #2a1a14 0%, #0e0a08 60%, #000 100%);
    overflow-y: auto;
    align-items: stretch;
    font-family: 'Georgia', serif;
}
#player-home-content { width: 100%; flex: 1; display: flex; flex-direction: column; min-height: 0; }
#player-home-content > .home-inner { flex: 1; }
#player-home-content > .player-editor-wrap { flex: 1; height: auto; }

/* Player campaign grid reuses .campaign-card, .cc-* from shared styles */
.player-campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; }

/* Player campaign editor (inside #player-home-content after opening a campaign) */
.player-editor-wrap { display: flex; flex-direction: column; height: 100vh; }
.player-editor-header { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: #0d0906; border-bottom: 1px solid #2a1e14; flex-shrink: 0; }
.player-back-btn { background: none; border: 1px solid #3a2e24; color: #7a6a56; padding: 5px 12px; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; transition: 0.2s; }
.player-back-btn:hover { border-color: var(--accent-color); color: #c8b89a; }
.player-editor-name { color: #c8b89a; font-family: 'Courier New', monospace; font-size: 14px; letter-spacing: 1px; flex: 1; }
.player-update-btn { background: none; border: 1px solid #3a2e24; color: #7a6a56; padding: 5px 12px; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.player-update-btn:hover { border-color: var(--accent-color); color: #c8b89a; }
.player-tab-bar { display: flex; gap: 3px; padding: 0 24px; background: #0a0705; border-bottom: 1px solid #1a1008; flex-shrink: 0; }
.player-tab { background: transparent; color: #5a4a36; border: 1px solid transparent; border-bottom: none; padding: 10px 22px; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; transition: 0.15s; letter-spacing: 1px; }
.player-tab:hover { color: #c8b89a; }
.player-tab.active { background: #120d09; color: #e8d5b0; border-color: #2a1e14; margin-bottom: -1px; }
.player-tab-panel { flex: 1; overflow-y: auto; padding: 24px; min-height: 0; box-sizing: border-box; }
.player-tab-panel[style*="display: flex"], .player-tab-panel[style*="display:flex"] { padding: 0; overflow: hidden; }
.player-sheet-toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.player-sheets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.player-sheet-card { background: #120d09; border: 1px solid #2a1e14; padding: 18px 20px; transition: border-color 0.2s, box-shadow 0.2s; }
.player-sheet-card:hover { border-color: var(--accent-color); box-shadow: 0 4px 16px rgba(123,36,28,0.25); }
.psc-name { font-size: 16px; color: #e8d5b0; font-weight: bold; margin-bottom: 5px; }
.psc-meta { font-size: 12px; color: #5a4a36; font-family: 'Courier New', monospace; margin-bottom: 14px; }
.psc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.psc-actions button { font-size: 11px; font-family: 'Courier New', monospace; padding: 5px 10px; cursor: pointer; border: 1px solid #444; background: #1e1613; color: #c8b89a; transition: 0.15s; }
.psc-actions button:hover { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

/* Player Unlock Tab */
.player-unlock-inner { max-width: 480px; padding-top: 10px; }
.player-unlock-title { color: #e8d5b0; font-size: 18px; letter-spacing: 2px; margin-bottom: 10px; border-bottom: 2px solid var(--accent-color); padding-bottom: 8px; }
.player-unlock-desc { color: #7a6a56; font-size: 13px; margin: 0 0 16px; line-height: 1.6; font-family: 'Courier New', monospace; }
.player-unlock-row { display: flex; gap: 8px; margin-bottom: 12px; }
.player-unlock-input { flex: 1; background: #1a1a1a; border: 1px solid #444; color: #ccc; padding: 8px 12px; font-family: 'Courier New', monospace; font-size: 13px; letter-spacing: 1px; }
.player-unlock-btn { background: var(--accent-color); color: #fff; border: 1px solid #900; padding: 8px 18px; cursor: pointer; font-family: 'Courier New', monospace; font-weight: bold; white-space: nowrap; }
.player-unlock-btn:hover { filter: brightness(1.2); }
.player-unlock-result { font-family: 'Courier New', monospace; font-size: 13px; min-height: 18px; margin-top: 4px; }
.player-unlock-err { color: #c44; font-style: italic; }
.player-unlock-success { color: #c8b89a; line-height: 2; }
.player-unlocked-name { color: #e8d5b0; font-weight: bold; }
.player-unlocked-type { color: #5a4a36; font-size: 11px; margin-left: 4px; }

/* Player Dice Tab */
.player-dice-inner { max-width: 500px; padding: 30px; }
.player-dice-title { color: #e8d5b0; font-size: 20px; letter-spacing: 2px; margin-bottom: 20px; border-bottom: 2px solid var(--accent-color); padding-bottom: 8px; }
.player-dice-input-row { display: flex; gap: 8px; margin-bottom: 16px; }
.player-dn-input { flex: 1; background: #1a1a1a; border: 1px solid #444; color: #ccc; padding: 8px 12px; font-family: 'Courier New', monospace; font-size: 13px; }
.player-dn-roll-btn { background: var(--accent-color); color: #fff; border: 1px solid #900; padding: 8px 16px; cursor: pointer; font-family: 'Courier New', monospace; font-weight: bold; }
.player-dn-roll-btn:hover { filter: brightness(1.2); }
.player-dice-log { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; margin-bottom: 10px; }
.player-dice-clear { background: #1a1a1a; color: #666; border: 1px solid #333; padding: 5px 12px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 11px; }
.player-dice-clear:hover { color: #ccc; }

/* ── IMPORT UI (File + URL tabs) ────────────────────────────────────────── */
.pkg-import-ui-modal { min-width: 420px; max-width: 520px; }
.pkg-import-tabs { display: flex; gap: 2px; padding: 10px 20px 0; background: #f0ece3; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.pkg-import-tab { background: transparent; color: #888; border: 1px solid transparent; border-bottom: none; padding: 7px 18px; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; transition: 0.15s; letter-spacing: 1px; }
.pkg-import-tab:hover { color: var(--ink-color); }
.pkg-import-tab.active { background: var(--bg-color); color: var(--ink-color); border-color: #ccc; margin-bottom: -1px; }
.pkg-import-panel { display: flex; align-items: center; gap: 10px; padding: 20px; flex-wrap: wrap; }
.pkg-file-label { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; }
.pkg-file-btn { background: var(--ink-color); color: #fff; border: none; padding: 8px 16px; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; white-space: nowrap; }
.pkg-file-btn:hover { background: var(--accent-color); }
.pkg-file-name { font-family: 'Courier New', monospace; font-size: 12px; color: #888; font-style: italic; }
.pkg-url-input { flex: 1; min-width: 0; width: 100%; padding: 8px 10px; border: 1px solid #ccc; font-family: 'Courier New', monospace; font-size: 13px; background: #fff; color: var(--ink-color); box-sizing: border-box; }
.pkg-fetch-btn { background: var(--ink-color); color: #fff; border: none; padding: 8px 16px; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.pkg-fetch-btn:hover { background: var(--accent-color); }
.pkg-url-error { width: 100%; font-family: 'Courier New', monospace; font-size: 11px; color: #c00; font-style: italic; min-height: 16px; }

/* ── UPDATE SUMMARY ─────────────────────────────────────────────────────── */
.pkg-update-modal { min-width: 460px; max-width: 560px; }
.pkg-update-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-family: 'Courier New', monospace; font-size: 13px; color: var(--ink-color); border-bottom: 1px dotted #ddd; }
.pkg-update-icon { font-size: 14px; font-weight: bold; width: 18px; text-align: center; flex-shrink: 0; }
.pkg-update-icon-new       { color: #4CAF50; }
.pkg-update-icon-auto      { color: #2196F3; }
.pkg-update-icon-unchanged { color: #aaa; }
.pkg-update-icon-conflict  { color: #FF9800; }
.pkg-conflict-row { border: 1px solid #f0ddc0; background: #fdf8f0; padding: 12px 14px; margin-top: 12px; }
.pkg-conflict-info { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pkg-conflict-name { font-family: 'Courier New', monospace; font-size: 14px; color: var(--ink-color); font-weight: bold; flex: 1; }
.pkg-conflict-desc { font-family: 'Courier New', monospace; font-size: 12px; color: #888; margin: 0 0 10px; font-style: italic; }
.pkg-conflict-choices { display: flex; gap: 8px; }
.pkg-choice-btn { background: #eee; border: 1px solid #ccc; color: var(--ink-color); padding: 6px 14px; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; transition: 0.15s; }
.pkg-choice-btn:hover { border-color: var(--ink-color); }
.pkg-choice-btn.selected { background: var(--ink-color); color: #fff; border-color: var(--ink-color); }

/* ── PLAYER ASSET BROWSER ───────────────────────────────────────────────── */
.player-assets-panel { flex-direction: column; overflow: hidden; }
.player-assets-inner { display: flex; flex-direction: row; height: 100%; overflow: hidden; }
.player-assets-section { display: flex; flex-direction: column; padding: 12px 16px; overflow: hidden; }
.player-assets-section:first-child { flex: 1; min-width: 0; overflow-y: auto; }
.player-assets-journal-section { flex: 0 0 260px; border-left: 1px solid #333; overflow: hidden; }
.player-assets-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: 'Courier New', monospace; font-size: 13px; font-weight: bold; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }
.player-assets-divider { display: none; }
.player-journal-entry-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid #2a2a2a; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; }
.player-journal-entry-row:hover { background: #1a1a1a; }
.pje-title { flex: 1; color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pje-title::before { content: '📝 '; }
.pje-date { color: #666; font-size: 11px; flex-shrink: 0; margin-left: 8px; }
.player-journal-editor-wrap { display: flex; flex-direction: column; height: 100%; }
.player-journal-editor-header { padding: 8px 12px; border-bottom: 1px solid #333; background: #1e1e1e; flex-shrink: 0; }

/* ── JOURNAL SIDEBAR ITEMS ──────────────────────────────────────────────── */
.journal-sidebar-item { border-left: 2px solid transparent; }
.journal-sidebar-item:hover { border-left-color: #6a8fa8; }
.journal-sidebar-item.active-sidebar { border-left-color: #6a8fa8; }

/* ── COMPENDIUM PANEL ───────────────────────────────────────────────────── */
#compendium-panel { flex-direction: column; height: 100%; overflow: hidden; }
.compendium-inner { display: flex; flex-direction: row; height: 100%; overflow: hidden; }
.compendium-sidebar { width: 280px; min-width: 200px; flex-shrink: 0; background: #1e1e1e; display: flex; flex-direction: column; border-right: 1px solid #333; font-family: 'Courier New', monospace; overflow-y: auto; }
.compendium-toolbar { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #333; flex-wrap: wrap; }
.compendium-toolbar button, .compendium-toolbar label { font-size: 12px; }
#comp-tree { flex: 1; overflow-y: auto; padding: 4px 0; }
.compendium-editor { flex: 1; overflow-y: auto; background: var(--bg-color); }
.comp-empty-state { display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Courier New', monospace; }
.comp-item-editor { padding: 20px; font-family: 'Courier New', monospace; }
.comp-item-header { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
.comp-item-name { flex: 1 1 0; min-width: 0; background: transparent; border: none; border-bottom: 2px solid var(--accent-color); font-family: 'Georgia', serif; font-size: 20px; color: var(--ink-color); padding: 0 0 4px; outline: none; }
.comp-item-header select { flex: 0 0 130px; background: #2a2a2a; border: 1px solid #555; color: #ccc; padding: 4px 8px; font-family: 'Courier New', monospace; font-size: 12px; }
.compendium-editor-only { flex: 1; }
.compendium-editor-only .compendium-editor { flex: 1; width: 100%; }
.comp-cat-title { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px; border-bottom: 1px solid #333; padding-bottom: 4px; }
.comp-cat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.comp-cat-span2 { grid-column: span 2; }
.comp-cat-span3 { grid-column: span 3; }
.comp-common-fields { margin-bottom: 10px; }

/* ── INVENTORY SECTION ──────────────────────────────────────────────────── */
#inventory-section { margin-top: 20px; }
#inventory-section h2 { border-bottom: 2px solid var(--accent-color); padding-bottom: 6px; margin-bottom: 12px; }
.inventory-toolbar { margin-top: 8px; }
.inventory-empty { color: #999; font-style: italic; font-size: 13px; margin: 8px 0; }
.inventory-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #f5f2eb; border: 1px solid #ddd; margin-bottom: 4px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 13px; }
.inventory-row:hover { background: #ede9e0; }
.inv-qty { color: #888; min-width: 28px; flex-shrink: 0; }
.inv-name { flex: 1; font-weight: bold; color: var(--ink-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-edit-btn { font-size: 11px; padding: 2px 5px; }
.inv-cat { flex-shrink: 0; font-size: 10px; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; }
.inv-cat-weapon   { background: #3a1a1a; color: #e88; }
.inv-cat-tome     { background: #1a2a3a; color: #8ae; }
.inv-cat-spell    { background: #2a1a3a; color: #c8f; }
.inv-cat-artifact { background: #2a2a1a; color: #ee8; }
.inv-cat-equipment { background: #1a2a1a; color: #8e8; }

/* ── INVENTORY PICKER MODAL ─────────────────────────────────────────────── */
.inv-picker-modal { max-width: 480px; display: flex; flex-direction: column; }
.inv-picker-tabs { display: flex; gap: 0; border-bottom: 1px solid #333; padding: 0 16px; }
.inv-picker-panel { display: flex; }
.inv-picker-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #2a2a2a; cursor: pointer; font-family: 'Courier New', monospace; font-size: 13px; }
.inv-picker-item:hover { background: #2a2a2a; }
.inv-picker-name { color: #ccc; flex: 1; }
.comp-item-editor-modal { max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; }

/* ── COMBAT DANGER BUTTON ───────────────────────────────────────────────── */
.combat-btn-danger { color: #c0392b !important; border-color: #7b241c !important; }
.combat-btn-danger:hover { background: #7b241c !important; color: #fff !important; }

/* ── ENTITY PICKER (combat add from entities) ───────────────────────────── */
.cths-entity-picker { max-width: 400px; }
.cths-entity-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid #333; border-radius: 3px; padding: 4px; }
.cths-entity-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; cursor: pointer; border-radius: 2px; font-family: 'Courier New', monospace; font-size: 13px; color: #ccc; }
.cths-entity-row:hover { background: #2a2a2a; }
.cths-entity-row input[type="checkbox"] { margin: 0; cursor: pointer; }
.cbt-ent-type { font-size: 10px; padding: 1px 5px; border-radius: 2px; font-weight: bold; border: 1px solid; }
.cbt-ent-type-investigator { color: #4a9; border-color: #4a9; }
.cbt-ent-type-enemy { color: #c0392b; border-color: #7b241c; }

/* ── CONFIRM OVERLAY & TOAST ────────────────────────────────────────────── */
.cths-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.cths-confirm-card { background: #1e1e1e; border: 1px solid #555; border-radius: 4px; padding: 24px; min-width: 280px; max-width: 480px; font-family: 'Courier New', monospace; color: #ccc; }
.cths-confirm-msg { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #ddd; }
.cths-confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
.cths-confirm-yes { background: var(--accent-color); color: #fff; border: none; padding: 7px 18px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 13px; border-radius: 2px; }
.cths-confirm-yes:hover { opacity: 0.85; }
.cths-confirm-no { background: #333; color: #aaa; border: 1px solid #555; padding: 7px 18px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 13px; border-radius: 2px; }
.cths-confirm-no:hover { background: #444; color: #ccc; }
.cths-prompt-msg { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #ddd; white-space: pre-wrap; }
.cths-prompt-input { width: 100%; box-sizing: border-box; background: #2a2a2a; border: 1px solid #555; color: #eee; font-family: 'Courier New', monospace; font-size: 13px; padding: 7px 10px; border-radius: 2px; margin-bottom: 14px; outline: none; }
.cths-prompt-input:focus { border-color: var(--accent-color); }
.cths-toast { position: fixed; bottom: 20px; right: 20px; z-index: 10000; padding: 10px 18px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 13px; max-width: 340px; opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.cths-toast.cths-toast-visible { opacity: 1; transform: translateY(0); }
.cths-toast-error { background: #4a1010; color: #f5a0a0; border: 1px solid #7b241c; }
.cths-toast-info  { background: #1a2a3a; color: #90c4e8; border: 1px solid #2a5a8a; }

/* ── INVENTORY-SOURCED WEAPON/SPELL ROWS ────────────────────────────────── */
.weapon-row-inv td { background: rgba(122,91,61,0.08); }
.weapon-row-inv input { background: transparent !important; color: #aaa !important; cursor: default; }
.inv-badge { font-size: 10px; color: #888; border: 1px solid #555; border-radius: 3px; padding: 1px 5px; white-space: nowrap; vertical-align: middle; }
.inv-details-btn { padding: 3px 7px; border: 1px solid #555 !important; color: #aaa !important; font-size: 13px; }
.inv-details-btn:hover { background: #333 !important; color: #fff !important; }

/* ── ITEM DETAILS POPUP ─────────────────────────────────────────────────── */
.item-details-card { min-width: 320px; max-width: 520px; max-height: 80vh; overflow-y: auto; }
.item-details-table { width: 100%; border-collapse: collapse; font-family: 'Courier New', monospace; font-size: 13px; margin-top: 8px; }
.item-det-label { color: #888; padding: 5px 12px 5px 0; white-space: nowrap; width: 35%; vertical-align: top; border-bottom: 1px solid #2a2a2a; }
.item-det-val { color: #ddd; padding: 5px 0; border-bottom: 1px solid #2a2a2a; }

/* ── FIELD VALIDATION ───────────────────────────────────────────────────── */
.field-invalid { border-bottom-color: #c0392b !important; }
.field-error-msg { font-size: 11px; color: #c0392b; display: block; margin-top: 2px; font-family: 'Courier New', monospace; }

/* ── IMAGE WIDGET (inline portrait/image selector) ─────────────────────── */
.img-widget { margin: 0 0 14px; }

.img-widget--empty {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 50px; border: 2px dashed #c8c0b4; cursor: pointer;
    color: #aaa; font-family: 'Courier New', monospace; font-size: 11px;
    letter-spacing: 1.5px; text-transform: uppercase;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.img-widget--empty:hover { border-color: var(--accent-color); color: var(--accent-color); background: #fdf5f3; }
.img-widget__plus { font-size: 18px; line-height: 1; }

.img-widget--filled {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; background: #f9f7f2; border: 1px solid #ddd;
}
.img-widget__thumb {
    width: 68px; height: 68px; object-fit: cover;
    border: 1px solid #ccc; flex-shrink: 0;
}
.img-widget__info { display: flex; flex-direction: column; gap: 5px; }
.img-widget__label {
    font-family: 'Courier New', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 1.5px; color: #999;
}
.img-widget__btns { display: flex; gap: 6px; }
.img-widget__btn {
    font-family: 'Courier New', monospace; font-size: 11px;
    padding: 3px 9px; border: 1px solid #bbb;
    background: #fff; color: var(--ink-color); cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.img-widget__btn:hover { border-color: var(--accent-color); color: var(--accent-color); }
.img-widget__btn--remove { color: #9a2020; }
.img-widget__btn--remove:hover { border-color: #9a2020; background: #fff5f5; color: #9a2020; }

/* ── IMAGE PICKER MODAL ─────────────────────────────────────────────────── */
#img-picker-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.82);
    display: flex; align-items: center; justify-content: center; z-index: 10100;
}
.imgpk-inner {
    background: var(--bg-color); border: 2px solid var(--accent-color);
    width: 540px; max-width: 96vw; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 16px 50px rgba(0,0,0,0.85);
}
.imgpk-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 20px; background: var(--ink-color); color: #fff; flex-shrink: 0;
}
.imgpk-title {
    font-family: 'Courier New', monospace; font-size: 12px;
    text-transform: uppercase; letter-spacing: 3px; color: #fff;
}
.imgpk-close {
    background: none; border: 1px solid #555; color: #bbb;
    padding: 2px 8px; cursor: pointer; font-size: 17px; line-height: 1;
}
.imgpk-close:hover { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

.imgpk-tabs {
    display: flex; gap: 0; background: #ede9e0;
    border-bottom: 1px solid #ccc; flex-shrink: 0;
}
.imgpk-tab {
    background: transparent; border: none; border-bottom: 3px solid transparent;
    padding: 11px 22px; font-family: 'Courier New', monospace;
    font-size: 12px; letter-spacing: 1px; color: #888;
    cursor: pointer; transition: color 0.12s, border-color 0.12s;
}
.imgpk-tab:hover { color: var(--ink-color); }
.imgpk-tab--active {
    color: var(--accent-color); border-bottom-color: var(--accent-color);
    background: var(--bg-color);
}

.imgpk-body {
    flex: 1; overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
}
.imgpk-input-area { display: flex; flex-direction: column; }

.imgpk-drop-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 28px 20px;
    border: 2px dashed #c0bab0; background: #faf8f4;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.imgpk-drop-zone:hover,
.imgpk-drop-zone--over {
    border-color: var(--accent-color); background: #fdf3f0;
}
.imgpk-drop-arrow {
    font-size: 36px; color: #bbb; line-height: 1;
    transition: color 0.15s;
}
.imgpk-drop-zone:hover .imgpk-drop-arrow,
.imgpk-drop-zone--over .imgpk-drop-arrow { color: var(--accent-color); }
.imgpk-drop-text {
    font-family: 'Courier New', monospace; font-size: 13px;
    color: var(--ink-color); letter-spacing: 0.5px;
}
.imgpk-drop-hint {
    font-family: 'Courier New', monospace; font-size: 11px;
    color: #aaa; letter-spacing: 1px;
}

.imgpk-url-area { display: flex; flex-direction: column; gap: 8px; }
.imgpk-url-input {
    width: 100%; padding: 10px 12px; border: 1px solid #ccc;
    font-family: 'Courier New', monospace; font-size: 13px;
    background: #fff; color: var(--ink-color); box-sizing: border-box;
    outline: none;
}
.imgpk-url-input:focus { border-color: var(--accent-color); }
.imgpk-url-hint {
    font-family: 'Courier New', monospace; font-size: 11px;
    color: #aaa; margin: 0; letter-spacing: 0.5px;
}

.imgpk-preview-area { display: flex; flex-direction: column; gap: 6px; }
.imgpk-preview-label {
    font-family: 'Courier New', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 2px; color: #aaa;
}
.imgpk-preview-wrap {
    display: flex; align-items: center; justify-content: center;
    height: 180px; background: #111; border: 1px solid #333; overflow: hidden;
}
.imgpk-preview-img {
    max-width: 100%; max-height: 180px; object-fit: contain;
}
.imgpk-no-preview {
    font-family: 'Courier New', monospace; font-size: 12px;
    color: #555; letter-spacing: 1px; text-transform: uppercase;
}

.imgpk-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; border-top: 1px solid #ccc;
    background: #ede9e0; flex-shrink: 0;
}
.imgpk-remove-btn {
    background: none; border: 1px solid #c0392b; color: #c0392b;
    padding: 7px 14px; font-family: 'Courier New', monospace;
    font-size: 12px; cursor: pointer; letter-spacing: 0.5px;
    transition: background 0.12s, color 0.12s;
}
.imgpk-remove-btn:hover { background: #c0392b; color: #fff; }
.imgpk-footer-btns { display: flex; gap: 8px; align-items: center; }

/* hide image widget in print */
/* ── PRINT ──────────────────────────────────────────────────────────────── */
@media print {
    body, html, #main-area, #sheet-wrapper { height: auto !important; overflow: visible !important; display: block !important; background: #fff !important; }
    #sidebar, #editor-topbar, #assets-topbar, #player-topbar, #workspace-tabs,
    .sheet-controls, #dice-roller, #welcome-screen, .btn-reset, .btn-remove,
    #sidebar-resize-handle, #journal-panel, #combat-panel, #package-builder-panel,
    #compendium-panel, #package-import-modal, #img-picker-modal { display: none !important; }
    #sheet-container { box-shadow: none; border: none; padding: 0; margin: 0; max-width: 100%; background: #fff; }
    input, select, textarea { border: 1px solid #ccc !important; background: transparent !important; }
    .rollable { text-decoration: none !important; color: inherit !important; pointer-events: none; }
}