:root {
    --bg: #008080;
    --win-bg: #c0c0c0;
    --win-light: #dfdfdf;
    --win-dark: #808080;
    --win-border: #000;
    --title-bar: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    --title-inactive: linear-gradient(90deg, #808080 0%, #a0a0a0 100%);
    --title-text: #fff;
    --text: #000;
    --accent-green: #008000;
    --accent-red: #800000;
    --accent-blue: #000080;
    --font-ui: "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%; width: 100%; overflow: hidden;
    font-family: var(--font-ui); font-size: 12px;
    background: var(--bg); color: var(--text);
    user-select: none;
}
.desktop {
    position: fixed; inset: 32px 0 36px 0;
    background:
        repeating-linear-gradient(45deg, transparent 0, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
        var(--bg);
    overflow: hidden;
}

/* v0.4.6: Meilenstein-Modal */
.milestone-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    animation: msfade 0.3s ease-out;
}
.milestone-modal.hidden { display: none; }
@keyframes msfade { from { opacity: 0; } to { opacity: 1; } }
.milestone-card {
    background: #fff;
    border: 3px solid #000;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.4);
    max-width: 560px;
    width: 92vw;
    max-height: 92vh;
    overflow-y: auto;
    display: flex; flex-direction: column;
    animation: mspop 0.4s ease-out;
}
@keyframes mspop {
    0% { transform: scale(0.8) translateY(30px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.milestone-card .ms-headline {
    background: var(--title-bg);
    color: #fff;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.4px;
}
.milestone-card .ms-image {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: #222;
    border-bottom: 1px solid #000;
}
.milestone-card .ms-content {
    padding: 16px 20px;
}
.milestone-card .ms-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #222;
    line-height: 1.2;
    font-family: Georgia, 'Times New Roman', serif;
}
.milestone-card .ms-body {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 14px;
    font-family: Georgia, 'Times New Roman', serif;
}
.milestone-card .ms-source {
    font-size: 10px;
    color: #777;
    font-style: italic;
    border-top: 1px solid #ddd;
    padding-top: 6px;
    margin-bottom: 12px;
}
/* v0.7.7: Event-Modal Consequence Line */
.milestone-card .ms-consequence {
    font-size: 13px;
    font-weight: bold;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-left: 4px solid #888;
    background: #f4f4f4;
    color: #333;
}
.milestone-card .ms-consequence[data-type="positive"] {
    border-left-color: #2a8b2a;
    background: #eaf7ea;
    color: #1b5e1b;
}
.milestone-card .ms-consequence[data-type="negative"] {
    border-left-color: #b22222;
    background: #fbecec;
    color: #7a1a1a;
}
.milestone-card .ms-close {
    align-self: flex-end;
    margin: 0 20px 16px 0;
}

/* v0.4.3: Topbar mit Kennzahlen */
.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 32px;
    background: var(--win-bg);
    border-bottom: 2px solid;
    border-color: var(--win-light) transparent var(--win-border) transparent;
    display: flex; align-items: stretch;
    padding: 0; gap: 0; z-index: 100;
    font-size: 11px;
    user-select: none;
}
.topbar-cell {
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px;
    border-right: 1px solid var(--win-border);
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.topbar-cell:last-child { border-right: none; }
.topbar-cell .label {
    color: #555; font-size: 10px;
    overflow: hidden; text-overflow: ellipsis;
}
.topbar-cell .val {
    font-weight: bold; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis;
}
.topbar-cell .val.pos { color: #007000; }
.topbar-cell .val.neg { color: #a00000; }
.topbar-cell .icon { font-size: 14px; flex: 0 0 auto; }

/* v0.9.12.12: Status-Effekte-Spalte (Topbar links) */
.topbar-cell.topbar-status-cell {
    flex: 0 0 auto;
    min-width: 110px;
    max-width: 220px;
    padding: 0 8px;
    background: linear-gradient(to right, #f4ecd0 0%, transparent 100%);
}
.topbar-cell.topbar-status-cell .val {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: normal;
    font-size: 13px;
    overflow: visible;
}
.tb-status-empty {
    color: #888;
    font-size: 11px;
    font-style: italic;
}
.tb-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    font-size: 13px;
    border: 1px solid #888;
    background: #fff;
    cursor: pointer;
    line-height: 1;
    border-radius: 2px;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.tb-status-icon:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 1px #333, 0 1px 3px rgba(0,0,0,0.3);
    z-index: 2;
    position: relative;
}
.tb-status-icon.tb-pol-positive { background: #e6f4e0; border-color: #4a8a3a; }
.tb-status-icon.tb-pol-negative { background: #f7dede; border-color: #aa3333; }
.tb-status-icon.tb-pol-neutral  { background: #e8edf4; border-color: #5566aa; }
.tb-status-icon.tb-tier-catastrophic { box-shadow: inset 0 0 0 1px #aa0000; }
.tb-status-icon.tb-tier-major { box-shadow: inset 0 0 0 1px #0066aa; }
.tb-status-icon.tb-tier-boom  { box-shadow: inset 0 0 0 1px #007000; }
/* v0.9.12.14: Source-Differenzierung. Skaleneffekte/Buffs/Debuffs subtiler als Markt-Events. */
.tb-status-icon.tb-src-scale,
.tb-status-icon.tb-src-buff,
.tb-status-icon.tb-src-debuff {
    filter: saturate(0.92);
    opacity: 0.95;
}
.tb-status-icon.tb-src-buff   { border-style: dashed; }
.tb-status-icon.tb-src-debuff { border-style: dashed; }
@keyframes tbStatusPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(170,51,51,0.0); }
    50%      { box-shadow: 0 0 0 3px rgba(170,51,51,0.25); }
}
.tb-status-icon.tb-tier-catastrophic.tb-pulse {
    animation: tbStatusPulse 1.6s ease-in-out infinite;
}

/* Windows (floating & tiled) */
.window {
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--win-light) var(--win-border) var(--win-border) var(--win-light);
    box-shadow: 2px 2px 0 var(--win-border);
    display: flex; flex-direction: column;
}
.window.floating {
    position: absolute;
    min-width: 280px; min-height: 120px;
}
.window.focused .title-bar {
    background: var(--title-bar);
}
.window:not(.focused) .title-bar {
    background: var(--title-inactive);
}
.window.hidden { display: none !important; }
.window.maximized {
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
}

.title-bar {
    background: var(--title-inactive);
    color: var(--title-text);
    padding: 3px 4px 3px 6px;
    font-size: 11px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: move; flex-shrink: 0;
}
.title-bar .title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.title-bar .controls { display: flex; gap: 2px; flex-shrink: 0; margin-left: 6px; }
.title-bar .controls button {
    width: 18px; height: 16px;
    background: var(--win-bg);
    border: 1px solid;
    border-color: var(--win-light) var(--win-border) var(--win-border) var(--win-light);
    font-size: 10px; font-family: var(--font-ui); font-weight: bold;
    cursor: pointer; line-height: 1; padding: 0; color: #000;
    display: flex; align-items: center; justify-content: center;
}
.title-bar .controls button:active {
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
}
.title-bar .controls button:hover { background: #d0d0d0; }

.menu-bar {
    background: var(--win-bg);
    border-bottom: 1px solid var(--win-dark);
    padding: 2px 4px;
    display: flex; gap: 0;
    font-size: 11px; flex-shrink: 0;
}
.menu-bar span { padding: 2px 8px; cursor: pointer; }
.menu-bar span:hover { background: var(--accent-blue); color: #fff; }
.menu-bar span u { text-decoration: underline; }

.window-body {
    padding: 12px;
    overflow: auto;
    flex: 1;
}

/* Resize handle */
.resize-handle {
    position: absolute;
    right: 0; bottom: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 0 50%, var(--win-dark) 50% 55%, transparent 55% 62%, var(--win-dark) 62% 67%, transparent 67% 74%, var(--win-dark) 74% 79%, transparent 79%);
}

/* Buttons */
button.w95 {
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--win-light) var(--win-border) var(--win-border) var(--win-light);
    padding: 4px 16px;
    font-family: var(--font-ui); font-size: 11px;
    cursor: pointer; min-width: 75px; color: #000;
}
button.w95:active:not(:disabled) {
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
    padding: 5px 15px 3px 17px;
}
button.w95:disabled {
    color: var(--win-dark); cursor: not-allowed;
    text-shadow: 1px 1px 0 var(--win-light);
}
button.w95.primary { font-weight: bold; }
button.w95.speed {
    min-width: 34px; padding: 4px 6px;
}
button.w95.speed.active {
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
    background: linear-gradient(135deg, #a0a0a0, #d0d0d0);
    font-weight: bold;
}

input[type="text"], input[type="number"], select {
    background: #fff;
    border: 2px solid;
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
    padding: 3px 4px;
    font-family: var(--font-ui); font-size: 11px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}
/* v0.9.11.20: Focus ohne Layout-Shift — gleiche Border-Breite, nur Inset-Shadow als Highlight */
input[type="text"]:focus, input[type="number"]:focus, select:focus {
    outline: none;
    border-color: #0040a0 #0066cc #0066cc #0040a0;
}
/* v0.8.30: Range-Slider im Windows-95 Grau (statt Browser-Default Grün) */
input[type="range"] {
    width: 100%;
    accent-color: var(--win-dark);
}

fieldset { border: 1px solid var(--win-dark); padding: 8px; margin-bottom: 8px; }
fieldset legend { padding: 0 4px; font-weight: bold; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.stat-row {
    display: flex; justify-content: space-between;
    padding: 2px 4px;
    border-bottom: 1px dotted #888;
}
.stat-row span:first-child { color: #333; }
.stat-row span:last-child { font-weight: bold; }
.money-pos { color: var(--accent-green); }
.money-neg { color: var(--accent-red); }

/* v0.6.1: Floating Numbers (dezentes Feedback) */
.float-num { will-change: transform, opacity; letter-spacing: 0.2px; }
.float-pos { color: #0a6b0a; }
.float-neg { color: #a00; }
.float-info { color: #26486b; }

/* v0.6.1: Sound/Feedback-Toggle in Topbar */
.fx-toggle { background: transparent; border: 1px solid var(--win-dark); font-size: 12px; cursor: pointer; padding: 1px 4px; margin-left: 2px; line-height: 1; }
.fx-toggle:hover { background: #f0f0f0; }

/* v0.6.1: Qualitaets-Pill im Projekte-Fenster */
/* v0.9.11.7: padding & line-height an Tier/Sat/Setup-Badges angeglichen (gleiche Hoehe). */
.quality-pill { display: inline-block; font-size: 9px; line-height: 1.4; padding: 1px 5px; border: 1px solid currentColor; margin-left: 4px; border-radius: 2px; vertical-align: middle; }

.progress {
    background: #fff;
    border: 2px solid;
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
    height: 16px; position: relative; overflow: hidden;
}
.progress-fill {
    background: repeating-linear-gradient(90deg, #000080 0, #000080 10px, #1084d0 10px, #1084d0 12px);
    height: 100%; transition: width 0.3s;
}
.progress-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: bold; color: #fff;
    text-shadow: 1px 1px 0 #000;
}

/* Taskbar */
.taskbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 36px;
    background: var(--win-bg);
    border-top: 2px solid;
    border-color: var(--win-light) transparent transparent transparent;
    display: flex; align-items: center;
    padding: 3px 4px; gap: 4px; z-index: 100;
}
.start-btn {
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--win-light) var(--win-border) var(--win-border) var(--win-light);
    padding: 2px 12px; font-weight: bold;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; height: 26px;
}
.start-btn.active {
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
}
.start-icon {
    display: inline-block; width: 16px; height: 16px;
    background: linear-gradient(135deg, #ff0000, #ffff00, #00ff00, #0000ff);
    border: 1px solid #000;
}
.taskbar-windows {
    display: flex; gap: 2px; flex: 1; overflow-x: auto;
}
.taskbar-btn {
    display: flex; align-items: center; gap: 4px;
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--win-light) var(--win-border) var(--win-border) var(--win-light);
    padding: 2px 10px; height: 26px;
    cursor: pointer;
    font-size: 11px;
    min-width: 120px; max-width: 180px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.taskbar-btn.active {
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
    background: linear-gradient(135deg, #b0b0b0, #d8d8d8);
    font-weight: bold;
}
.taskbar-btn:hover:not(.active) { background: #d5d5d5; }
.taskbar-btn .icon { font-size: 14px; }

.tray {
    border: 1px solid;
    border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
    padding: 4px 10px;
    display: flex; gap: 8px; align-items: center;
    font-size: 11px;
    flex-shrink: 0;
}
.tray .clock { font-family: var(--font-ui); min-width: 120px; text-align: center; }
.speed-controls {
    display: flex; gap: 2px;
    border: 1px solid;
    border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
    padding: 3px; background: var(--win-bg);
}

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    z-index: 500;
}
.modal-overlay.hidden { display: none; }
.modal { min-width: 480px; max-width: 640px; }

/* Start menu */
.start-menu {
    position: fixed;
    left: 4px; bottom: 36px;
    width: 220px;
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--win-light) var(--win-border) var(--win-border) var(--win-light);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    z-index: 400;
    display: flex;
}
.start-menu.hidden { display: none; }
.start-menu-stripe {
    width: 26px;
    background: linear-gradient(180deg, #000080, #1084d0);
    color: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    padding: 8px 0;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
}
.start-menu-items {
    flex: 1; padding: 4px 0;
}
.start-menu-item {
    padding: 6px 12px 6px 32px;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    position: relative;
}
.start-menu-item:hover {
    background: var(--accent-blue); color: #fff;
}
.start-menu-item .icon { font-size: 16px; }
.start-menu-item.separator {
    border-top: 1px solid var(--win-dark);
    border-bottom: 1px solid var(--win-light);
    padding: 0; margin: 4px 0; cursor: default;
}
.start-menu-item.separator:hover { background: transparent; }

/* Event log */
.event-log {
    font-family: "Courier New", monospace;
    font-size: 11px;
    max-height: 100%;
    overflow-y: auto;
    background: #000; color: #0f0;
    padding: 6px 8px;
    border: 2px solid;
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
    min-height: 140px;
}
.event-log .entry { margin-bottom: 2px; white-space: pre-wrap; }
.event-log .entry.success { color: #0ff; }
.event-log .entry.warn { color: #ff0; }
.event-log .entry.error { color: #f88; }

h3, h4 { margin: 4px 0 6px; font-size: 12px; }
.slider-row { display: flex; align-items: center; gap: 8px; }

/* Screens */
.screen { display: none; width: 100%; height: 100%; }
.screen.active { display: block; }

/* Main Menu (v0.5.9) */
.main-menu-container {
    max-width: 520px;
    margin: 60px auto 30px auto;
    padding: 0 20px;
}
.main-menu-container .window {
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}
.main-menu-btn {
    font-size: 13px;
    padding: 8px 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}
.main-menu-btn .icon {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

/* Character creation */
.char-create-container {
    max-width: 960px;
    margin: 30px auto;
    padding: 0 20px;
}
.char-create-container .window {
    position: relative;
    /* draggable via JS; we mark it */
}
/* v0.9.17.7: Compact mode for short laptop viewports (15" / 1366×768).
   Spart vertikalen Platz, damit Step-2-Buttons («Zurück / Spiel starten»)
   im Viewport sichtbar bleiben. Trigger ab Viewport-Höhe < 850px. */
@media (max-height: 850px) {
    .char-create-container { margin: 8px auto; padding: 0 12px; }
    .char-create-container .logo-title { font-size: 20px; margin-bottom: 6px; letter-spacing: 1px; }
    .char-create-container .window-body { padding: 8px 10px; }
    .char-create-container fieldset { padding: 6px 10px; margin-bottom: 6px; }
    .char-create-container fieldset + fieldset { margin-top: 4px; }
    .char-create-container .trait-option.trait-card { padding: 6px 10px 5px; }
    .char-create-container .trait-card-head { margin-bottom: 0; }
    .char-create-container .trait-icon { font-size: 18px; }
    .char-create-container .trait-title { font-size: 11px; }
    .char-create-container .trait-card-body { font-size: 9.5px; line-height: 1.25; }
    .char-create-container .skill-point-row { padding: 1px 0; }
    .char-create-container .skill-progress { height: 10px !important; }
    .char-create-container #skill-points + div { margin-top: 4px !important; }
    .char-create-container .create-page > div:last-child { margin-top: 6px !important; }
    .char-create-container .avatar-grid { gap: 4px; }
    .char-create-container .difficulty-grid { gap: 4px; }
    .char-create-container .trait-grid { gap: 6px; margin-top: 4px; }
}
@media (max-height: 720px) {
    .char-create-container { margin: 4px auto; }
    .char-create-container .logo-title { font-size: 16px; margin-bottom: 4px; }
    .char-create-container fieldset { padding: 4px 8px; margin-bottom: 4px; }
    .char-create-container .trait-option.trait-card { padding: 4px 8px 4px; }
    .char-create-container .trait-card-body { font-size: 9px; }
}
.trait-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}
@media (max-width: 760px) {
    .trait-grid { grid-template-columns: repeat(2, 1fr); }
    .char-create-container { max-width: 100%; }
}
.char-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 6px;
}
.char-field { display: flex; flex-direction: column; gap: 3px; }
.char-field label { font-size: 11px; color: #333; font-weight: bold; }
.trait-option {
    padding: 6px 8px;
    border: 1px solid var(--win-dark);
    cursor: pointer; background: var(--win-bg);
}
.trait-option:hover { background: #d0d0d0; }
.trait-option.selected {
    background: var(--accent-blue); color: #fff; border-color: #000;
}
.trait-option.selected small { color: #bcf; }
.trait-option small { display: block; color: #555; margin-top: 2px; font-size: 10px; }
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 4px;
}
.avatar-option {
    border: 2px solid var(--win-dark);
    background: #fff;
    padding: 2px;
    cursor: pointer;
    transition: background 0.1s;
    /* v0.5.2: nur Bild, kein Text */
}
.avatar-option img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.avatar-option:hover { background: #e0e0e0; }
.avatar-option.selected {
    background: #d4e7ff;
    border-color: #0040a0;
    outline: 1px solid #0040a0;
}

/* v0.5.2: Mehrstufige Charaktererstellung */
.create-page { display: none; }
.create-page.active { display: block; }
.page-badge {
    float: right;
    font-size: 10px;
    font-weight: normal;
    color: #555;
    background: #ffff99;
    padding: 1px 6px;
    border: 1px solid #aaa;
}

.skill-point-row {
    display: grid; grid-template-columns: 100px 1fr 40px auto;
    gap: 8px; align-items: center; padding: 4px 0;
}
.skill-btn { width: 24px; height: 20px; font-family: var(--font-ui); padding: 0; min-width: 0; }
.points-left-badge {
    font-weight: bold; font-size: 13px;
    padding: 4px 10px; background: #ffff00;
    border: 1px solid #000; display: inline-block;
}
.logo-title {
    font-family: "Impact", "Arial Black", sans-serif;
    font-size: 28px; text-align: center;
    color: var(--accent-blue);
    text-shadow: 2px 2px 0 #fff, 4px 4px 0 var(--win-dark);
    letter-spacing: 2px; margin-bottom: 16px;
}
kbd {
    background: #eee; border: 1px solid #999;
    border-radius: 2px; padding: 0 4px;
    font-family: monospace; font-size: 10px;
}
.chance-bar {
    height: 14px; background: #fff;
    border: 2px solid;
    border-color: var(--win-border) var(--win-light) var(--win-light) var(--win-border);
    position: relative; overflow: hidden;
}
.chance-fill { height: 100%; transition: width 0.2s, background 0.2s; }
.chance-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: bold; color: #000;
}

/* Pause overlay banner */
.pause-banner {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: rgba(0, 0, 128, 0.9);
    color: #fff;
    padding: 12px 6px;
    font-weight: bold; font-size: 12px;
    border: 2px solid #fff;
    border-right: none;
    border-radius: 4px 0 0 4px;
    z-index: 300;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
}
.pause-banner.hidden { display: none; }
/* ========================================================= */
/* v0.5.9: Main Menu — Atmospheric Collage Background        */
/* ========================================================= */
#screen-main-menu .desktop {
    background:
        linear-gradient(180deg, rgba(12,18,32,0.55) 0%, rgba(12,18,32,0.35) 45%, rgba(12,18,32,0.70) 100%),
        url('../images/menu/mainmenu-collage.jpg') center center / cover no-repeat,
        var(--bg);
    animation: mm-bg-pan 60s ease-in-out infinite alternate;
}
@keyframes mm-bg-pan {
    0%   { background-position: 0% 50%, 48% 50%, 0 0; }
    100% { background-position: 0% 50%, 52% 50%, 0 0; }
}
/* Menu-Fenster bekommt leichten Glass-Hauch (ohne Win95-Bruch) */
#screen-main-menu .main-menu-container {
    margin-top: 90px;
}
#screen-main-menu .main-menu-container .window {
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 4px 4px 0 rgba(0,0,0,0.35);
    backdrop-filter: saturate(1.05);
}
/* Tagline mit mehr Gewicht */
#screen-main-menu .logo-title + p {
    color: #4a4a4a !important;
}

/* Main-Menu Clean View — Topbar + Taskbar ausblenden solange Main-Menu aktiv */
body.main-menu-active #topbar,
body.main-menu-active .taskbar {
    display: none !important;
}
/* Desktop darf im Main-Menu die volle Höhe nutzen (kein Teal-Rand unten) */
body.main-menu-active #screen-main-menu,
body.main-menu-active #screen-main-menu .desktop {
    inset: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}
/* html UND body dunkel im Main-Menu (keine Teal-Pixel an Scrollbars/Rändern) */
html.main-menu-active,
body.main-menu-active {
    background: #0c1220 !important;
}
/* Sicherheitsnetz: Keine der Main-Menu-Screen-Kinder darf teal sein */
body.main-menu-active #screen-main-menu .main-menu-container {
    background: transparent !important;
}
/* Entferne den inline bottom:0 Fallback vom Desktop-div (wir setzen explizit) */
body.main-menu-active #screen-main-menu > .desktop {
    margin: 0 !important;
    padding: 0 !important;
}
#load-modal.hidden, #monthly-leads-modal.hidden { display: none !important; }

/* v0.7.9: Finanz-Fenster Tabs */
.fin-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--win-dark);
    margin-bottom: 8px;
    padding: 0 2px;
}
.fin-tab-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 4px 14px;
    cursor: pointer;
    background: var(--win-bg);
    border: 2px outset #fff;
    border-bottom: none;
    color: #000;
    position: relative;
    top: 1px;
}
.fin-tab-btn:hover { background: #d8d8d8; }
.fin-tab-btn.active {
    background: #fff;
    font-weight: bold;
    border-style: outset;
    top: 0;
}
.fin-tab-panel { padding: 2px 0; }

/* v0.8.1.8: BWA-Tabelle — skaliert mit Modal, Summenspalte rechts, lesbarere Schrift */
.bwa-wrap {
    overflow: auto;
    width: 100%;
    padding-bottom: 4px;
}
.bwa-table {
    border-collapse: collapse;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    width: 100%;
}
.bwa-table th,
.bwa-table td {
    padding: 4px 8px;
    border: 1px solid #bbb;
    text-align: right;
}
.bwa-table th {
    background: var(--win-bg);
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.bwa-table th.label { text-align: left; min-width: 170px; }
.bwa-table td:first-child { text-align: left; font-family: inherit; }
.bwa-table tr.bwa-section td {
    background: #e6e6e6;
    font-weight: bold;
    text-align: left;
    color: #444;
    font-size: 12px;
    padding: 4px 8px;
    font-family: inherit;
}
.bwa-table tr.bwa-subtotal td {
    background: #f6f6f6;
    border-top: 2px solid #888;
}
.bwa-table tr.bwa-result td {
    background: #fff8d6;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    font-size: 14px;
}
/* v0.8.1.8: Summenspalte rechts hervorgehoben */
.bwa-table th.bwa-sum-col,
.bwa-table td.bwa-sum-col {
    background: #eef3f8;
    border-left: 2px solid #7a9bc2;
    font-weight: bold;
    min-width: 90px;
}
.bwa-table tr.bwa-section td + td.bwa-sum-col,
.bwa-table tr.bwa-result td.bwa-sum-col {
    background: #d9e5f1;
}

/* ============================================================
   v0.8.1.0 — Mail-System (Outlook-ähnlich, Ära-abhängig)
   ============================================================ */

/* Basis-Layout (alle Ären) */
.mail-app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", "Tahoma", sans-serif;
    font-size: 11px;
    color: #222;
    overflow: hidden;
}
/* Dezenter Ära-Indikator unten in der Sidebar */
.mail-era-label {
    margin-top: auto;
    padding: 6px 8px;
    border-top: 1px solid #ccc;
    font-size: 9px;
    color: #888;
    font-style: italic;
    text-align: center;
}

/* v0.9.3.2: Mail-Layout verschlankt. Sidebar schmaler, List via CSS-Variable
   --mail-list-width resizable (Default 240px, Drag-Handle zwischen List und Detail). */
.mail-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 130px var(--mail-list-width, 240px) 6px 1fr;
    overflow: hidden;
    min-height: 0;
}

/* Drag-Handle zwischen Mail-Liste und Detail-Pane */
.mail-resizer {
    background: transparent;
    cursor: col-resize;
    border-left: 1px solid #aaa;
    border-right: 1px solid #e8e8e8;
    position: relative;
    transition: background 0.15s ease;
}
.mail-resizer:hover,
.mail-resizer.dragging { background: rgba(44, 96, 156, 0.25); }
.mail-resizer::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 24px;
    background: rgba(0,0,0,0.18);
    border-radius: 1px;
}
.mail-resizer:hover::after { background: rgba(0,0,0,0.35); }

/* Folders (linke Spalte) */
.mail-sidebar {
    background: #f4f4f4;
    border-right: 1px solid #aaa;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mail-folder {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
}
.mail-folder:hover { background: #e0e8f0; }
.mail-folder.active { background: #2c609c; color: #fff; font-weight: bold; }
.mail-folder.active .mail-folder-icon, .mail-folder.active .mail-folder-name { color: #fff; }
.mail-folder-icon { width: 16px; text-align: center; }
.mail-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-folder-count { font-size: 10px; color: #888; margin-left: 4px; }
.mail-folder.active .mail-folder-count { color: #cfd8e5; }
.mail-unread-badge {
    display: inline-block;
    background: #c00;
    color: #fff;
    font-size: 9px;
    border-radius: 8px;
    padding: 0 5px;
    margin-left: 2px;
    min-width: 14px;
    text-align: center;
    font-weight: bold;
}
.mail-folder-tools {
    margin-top: 8px;
    padding: 6px 8px;
    border-top: 1px solid #ccc;
}

/* Mail-Liste (mittlere Spalte) */
.mail-list {
    background: #fff;
    border-right: 1px solid #aaa;
    overflow-y: auto;
    min-height: 0;
}
.mail-list-item {
    display: flex;
    gap: 5px;
    padding: 5px 7px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 11px;
}
.mail-list-item:hover { background: #f0f6ff; }
.mail-list-item.active { background: #d7e6fa; border-left: 3px solid #2c609c; padding-left: 5px; }
.mail-list-item.mail-unread { font-weight: bold; background: #fefee9; }
.mail-list-item.mail-unread.active { background: #d7e6fa; }
.mail-row-icon { font-size: 16px; flex: 0 0 24px; }
.mail-row-body { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.mail-row-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.mail-row-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; font-size: 10px; }
.mail-row-time { font-size: 9px; color: #888; margin-top: 2px; }
.mail-empty { padding: 20px; color: #888; text-align: center; font-size: 11px; }

/* Detail (rechte Spalte) */
.mail-detail { background: #fff; overflow-y: auto; min-height: 0; }
.mail-preview {
    padding: 10px 14px 20px 14px;
    font-size: 12px;
    line-height: 1.55;
}
.mail-preview-empty { height: 100%; display: flex; align-items: center; justify-content: center; }
.mail-preview-toolbar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}
.mail-preview-toolbar button { min-width: 0; padding: 3px 8px; font-size: 11px; }
.mail-preview-toolbar button.mail-fav-active { background: #fff7c0; font-weight: bold; }
.mail-preview-header {
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.mail-preview-subject { font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.mail-preview-meta { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: #666; }
/* v0.8.1.4: Kleineres Portrait — 120×120 linksbündig, nicht mehr zentriert und 260px hoch. */
.mail-preview-image {
    margin: 10px 0 10px 0;
    display: inline-block;
}
.mail-preview-image img { width: 120px; height: 120px; object-fit: cover; border: 1px solid #ccc; border-radius: 2px; background:#f0f0f0; }

/* v0.8.9: Bild floatet links, Text umflüsst es (mit Abstand). */
.mail-preview-image-float {
    float: left;
    margin: 2px 14px 8px 0;
    shape-outside: margin-box;
}
.mail-preview-image-float img {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #f0f0f0;
}

.mail-preview-body { font-size: 12px; color: #222; line-height: 1.5; }
.mail-preview-body > :first-child { margin-top: 0; }
.mail-preview-body p { margin: 0 0 8px 0; }

/* v0.8.9: Listen bündig — Bullets knapp vor der Textspalte, nicht weit links davon. */
.mail-preview-body ul,
.mail-preview-body ol {
    margin: 6px 0 10px 0;
    padding-left: 20px;
}
.mail-preview-body ul li,
.mail-preview-body ol li {
    margin: 2px 0;
    padding-left: 2px;
}
.mail-preview-body ul ul,
.mail-preview-body ol ol,
.mail-preview-body ul ol,
.mail-preview-body ol ul {
    margin: 2px 0 4px 0;
    padding-left: 18px;
}
.mail-preview-consequence {
    margin-top: 12px;
    padding: 8px 10px;
    border-left: 4px solid #888;
    font-size: 11px;
    font-weight: bold;
    background: #f6f6f6;
}
.mail-cons-positive { border-left-color: #2aa84a; background: #e8f7ea; color: #0a5a20; }
.mail-cons-negative { border-left-color: #d63c3c; background: #fde8e8; color: #7a1414; }
.mail-cons-neutral  { border-left-color: #888; background: #f2f2f2; color: #444; }

/* --- Era-Variationen --- */

/* e95 — Outlook 97/95: graue Chrome-Farben, 3D-Inset-Buttons, Tahoma */
.mail-e95 { font-family: "MS Sans Serif", "Tahoma", sans-serif; background: #c0c0c0; }
/* Outlook 97 Ära-Label */
.mail-e95 .mail-era-label { background: #c0c0c0; border-top: 2px solid #808080; color: #555; }
.mail-e95 .mail-sidebar { background: #c0c0c0; border-right: 2px solid #808080; }
.mail-e95 .mail-folder.active { background: #000080; color: #fff; }
.mail-e95 .mail-list { background: #fff; border-right: 2px solid #808080; }
.mail-e95 .mail-list-item.active { background: #000080; color: #fff; border-left-color: #0057a8; }
.mail-e95 .mail-list-item.active .mail-row-subject,
.mail-e95 .mail-list-item.active .mail-row-time { color: #cfd8e5; }
.mail-e95 .mail-preview-toolbar { background: #c0c0c0; padding: 4px; }

/* e2000 — Outlook 2000: etwas weicher, Blauton */
.mail-e2000 { font-family: "Tahoma", sans-serif; }
/* Outlook 2000 Ära-Label */
.mail-e2000 .mail-era-label { color: #4e6fa6; }
.mail-e2000 .mail-sidebar { background: #e4ebf3; }
.mail-e2000 .mail-folder.active { background: #4e6fa6; color: #fff; }

/* e2007 — Outlook 2007 Ribbon: Aqua/hellblau */
.mail-e2007 { font-family: "Segoe UI", "Tahoma", sans-serif; }
/* Outlook 2007 Ära-Label */
.mail-e2007 .mail-era-label { color: #3a6ea5; }
.mail-e2007 .mail-sidebar { background: #eaf2fb; border-right: 1px solid #a8c0dd; }
.mail-e2007 .mail-folder.active { background: #3a6ea5; color: #fff; }
.mail-e2007 .mail-list-item.active { background: #cfe0f5; color: #1a3b66; border-left-color: #3a6ea5; }

/* e2013 — Outlook 2013: Flat, keine Schatten, hellgrau/weiß */
.mail-e2013 { font-family: "Segoe UI", sans-serif; background: #fff; }
/* Outlook 2013 Ära-Label */
.mail-e2013 .mail-era-label { color: #2b579a; }
.mail-e2013 .mail-sidebar { background: #f3f3f3; border-right: 1px solid #e0e0e0; }
.mail-e2013 .mail-folder { padding: 6px 10px; }
.mail-e2013 .mail-folder.active { background: #e3edf8; color: #2b579a; font-weight: bold; border-left: 3px solid #2b579a; padding-left: 7px; }
.mail-e2013 .mail-folder.active .mail-folder-icon,
.mail-e2013 .mail-folder.active .mail-folder-name { color: #2b579a; }
.mail-e2013 .mail-list-item.active { background: #deebf7; color: #1b3e73; border-left-color: #2b579a; }

/* emodern — Outlook 2020+: Modern UI, Akzentfarbe */
.mail-emodern { font-family: "Segoe UI", "Segoe UI Variable", sans-serif; background: #fafafa; }
/* Outlook 2021 Ära-Label */
.mail-emodern .mail-era-label { color: #0078d4; }
.mail-emodern .mail-sidebar { background: #faf9f8; border-right: 1px solid #e1dfdd; }
.mail-emodern .mail-folder { padding: 7px 12px; border-radius: 4px; margin: 1px 6px; }
.mail-emodern .mail-folder:hover { background: #f3f2f1; }
.mail-emodern .mail-folder.active { background: #dde6f3; color: #0078d4; border-left: none; }
.mail-emodern .mail-folder.active .mail-folder-icon,
.mail-emodern .mail-folder.active .mail-folder-name { color: #0078d4; }
.mail-emodern .mail-list-item.active { background: #edebe9; color: #0078d4; border-left: 3px solid #0078d4; padding-left: 5px; }
.mail-emodern .mail-preview-toolbar button { border-radius: 3px; }

/* Topbar Mail-Badge */
#tb-mail-badge {
    display: none;
    background: #c00;
    color: #fff;
    font-size: 9px;
    border-radius: 8px;
    padding: 0 5px;
    margin-left: 4px;
    min-width: 14px;
    text-align: center;
    font-weight: bold;
}

/* ============================================================ */
/* v0.8.3 BANK-TAB                                                 */
/* ============================================================ */
.bank-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.bank-header-item {
    background: #fff;
    border: 1px solid var(--win-dark);
    padding: 6px;
    text-align: center;
    min-width: 0;
}
.bank-header-label {
    font-size: 10px;
    color: #555;
    margin-bottom: 4px;
}
.bank-header-value {
    font-size: 14px;
    font-weight: bold;
}
.bank-credit-form {
    padding: 6px;
    background: #f8f8f0;
    border: 1px solid #d0d0b8;
}
.bank-credit-field {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
}
.bank-credit-field span {
    display: inline-block;
    min-width: 140px;
}
.bank-credit-field input[type="number"] {
    width: 140px;
    padding: 3px;
    font-family: inherit;
    font-size: 11px;
}
.bank-credit-field input[type="range"] {
    width: 200px;
    vertical-align: middle;
}
.bank-credit-preview {
    background: #fff;
    border: 1px dashed #888;
    padding: 6px 8px;
    margin-top: 6px;
    font-size: 11px;
}
.bank-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}
.bank-ledger-wrap {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--win-dark);
    background: #fff;
}
.bank-ledger-table,
.bank-credits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: 'Courier New', monospace;
}
.bank-ledger-table th,
.bank-ledger-table td,
.bank-credits-table th,
.bank-credits-table td {
    padding: 3px 6px;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
}
.bank-ledger-table th,
.bank-credits-table th {
    background: #e0e0d8;
    position: sticky;
    top: 0;
    font-size: 10px;
    font-weight: bold;
}
.bank-ledger-table tr:nth-child(even) td {
    background: #f8f8f0;
}

/* ==================================================
 * v0.9.2.3 — Einstellungs-Modal
 * ================================================== */

.settings-modal {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.settings-modal.hidden { display: none; }

.settings-window {
    background: #c0c0c0;
    border: 2px outset #c0c0c0;
    min-width: 600px; max-width: 720px;
    max-height: 85vh;
    display: flex; flex-direction: column;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
}
.settings-titlebar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff; padding: 4px 8px;
    display: flex; align-items: center; font-weight: bold;
}
.settings-titlebar .title { flex: 1; }
.settings-close {
    background: #c0c0c0; border: 1px outset #c0c0c0;
    width: 20px; height: 18px; cursor: pointer;
    font-family: inherit; font-size: 10px;
}
.settings-close:active { border-style: inset; }

.settings-tabs {
    display: flex;
    border-bottom: 1px solid #808080;
    background: #c0c0c0;
    padding: 4px 4px 0 4px;
    gap: 2px;
}
.settings-tab-btn {
    background: #c0c0c0;
    border: 1px outset #c0c0c0;
    border-bottom: none;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit; font-size: 11px;
}
.settings-tab-btn.active {
    background: #e8e8e8;
    border-color: #dfdfdf #808080 #c0c0c0 #dfdfdf;
    font-weight: bold;
}

.settings-body {
    padding: 14px;
    overflow-y: auto;
    flex: 1;
    background: #dfdfdf;
}
.settings-section { display: block; }

.settings-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
    min-height: 22px;
}
.settings-row label {
    flex: 0 0 240px;
    font-size: 11px;
    color: #222;
}
.settings-row input[type="range"] { flex: 1; max-width: 240px; }
.settings-row input[type="checkbox"] { margin-right: 4px; }
.settings-row select {
    padding: 2px 4px;
    border: 1px inset #808080;
    font-family: inherit; font-size: 11px;
    background: #fff;
}
.settings-row button.btn {
    padding: 3px 10px;
    background: #c0c0c0;
    border: 1px outset #c0c0c0;
    cursor: pointer;
    font-family: inherit; font-size: 11px;
    min-width: 110px; text-align: center;
}
.settings-row button.btn:active { border-style: inset; }
.settings-row code {
    background: #fffbe0; padding: 1px 5px;
    border: 1px solid #bba;
    font-family: 'Courier New', monospace; font-size: 10px;
}
.settings-val {
    min-width: 56px;
    text-align: right;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #333;
}

.settings-subheader {
    margin-top: 14px; margin-bottom: 8px;
    padding: 4px 6px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    font-weight: bold; font-size: 11px;
}

.settings-hint {
    margin-top: 10px;
    padding: 8px;
    background: #fffbe0;
    border: 1px solid #dcc98a;
    font-size: 10px;
    line-height: 1.5;
}

.settings-warning {
    padding: 8px 10px;
    background: #fff0cc;
    border: 2px inset #c8a65a;
    margin-bottom: 10px;
    font-size: 11px;
    color: #663300;
}

.settings-footer {
    padding: 8px 14px;
    background: #c0c0c0;
    border-top: 1px solid #808080;
    display: flex; gap: 6px;
    align-items: center;
}
.settings-footer .btn {
    padding: 4px 14px;
    background: #c0c0c0; border: 1px outset #c0c0c0;
    font-family: inherit; font-size: 11px;
    cursor: pointer;
    min-width: 90px;
}
.settings-footer .btn-primary {
    font-weight: bold;
}
.settings-footer .btn:active { border-style: inset; }

.sandbox-mul-row label {
    font-size: 10px;
}

/* Sandbox-Badge in Topbar */
.sandbox-badge {
    position: fixed;
    top: 4px; right: 120px;
    z-index: 9999;
    padding: 3px 10px;
    background: linear-gradient(135deg, #ff9500, #ff5a00);
    color: #fff;
    font-family: 'MS Sans Serif', sans-serif;
    font-weight: bold;
    font-size: 10px;
    border: 1px solid #aa3300;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
}
.sandbox-badge:hover { background: linear-gradient(135deg, #ffa500, #ff6a00); }

/* ============================================================
   v0.9.2.9 — UI Polish: Hover + Click Animation
   Era-aware via body.era-X classes. Default = modern (soft).
   ============================================================ */

/* Default hover (era3/era4/menu) — subtle scale + brightness */
button.w95:not(:disabled) {
    transition: transform 120ms ease-out, filter 120ms ease-out, background-color 120ms ease-out;
}
button.w95:not(:disabled):hover {
    filter: brightness(1.06);
    transform: translateY(-0.5px);
}
button.w95:not(:disabled):active {
    transform: translateY(0.5px);
    transition-duration: 40ms;
}

/* Era-1 (1995-1999): schnell, hart, kein Transition — echte Win95-Geste */
body.era-1 button.w95:not(:disabled) {
    transition: none;
}
body.era-1 button.w95:not(:disabled):hover {
    filter: brightness(1.04);
    transform: none;
}

/* Era-2 (2000-2009): leicht weicher, noch flach */
body.era-2 button.w95:not(:disabled) {
    transition: transform 90ms ease-out, filter 90ms ease-out;
}
body.era-2 button.w95:not(:disabled):hover {
    filter: brightness(1.05);
}

/* Era-4 (2020+): iOS/Material, weicher längerer Transition */
body.era-4 button.w95:not(:disabled) {
    transition: transform 180ms cubic-bezier(0.2,0.9,0.3,1.1),
                filter 180ms cubic-bezier(0.2,0.9,0.3,1.1),
                box-shadow 180ms ease-out;
}
body.era-4 button.w95:not(:disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
body.era-4 button.w95:not(:disabled):active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* Cursor-Hover auf Main-Menu-Buttons + Avatar/Trait-Options */
.main-menu-btn {
    transition: transform 150ms ease-out, filter 150ms ease-out;
}
.main-menu-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateX(2px);
}
.avatar-option, .trait-option {
    transition: transform 140ms ease-out, filter 140ms ease-out, box-shadow 140ms ease-out;
}
.avatar-option:hover, .trait-option:hover {
    filter: brightness(1.06);
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.avatar-option.selected, .trait-option.selected {
    transform: scale(1.02);
}

/* Counter-Tween Ziel-Elemente: hellere Aufblende wenn sich Wert ändert.
   Wird per JS durch .count-bump Klasse getriggert, auto-removed nach 360ms. */
.count-bump {
    animation: countBumpAnim 360ms ease-out;
}
@keyframes countBumpAnim {
    0%   { transform: scale(1);    filter: brightness(1); }
    40%  { transform: scale(1.08); filter: brightness(1.15); }
    100% { transform: scale(1);    filter: brightness(1); }
}
.count-bump-neg {
    animation: countBumpNegAnim 360ms ease-out;
}
@keyframes countBumpNegAnim {
    0%   { transform: scale(1);    filter: brightness(1); }
    40%  { transform: scale(0.95); filter: brightness(0.92); color: #a33; }
    100% { transform: scale(1);    filter: brightness(1); }
}
/* ============================================================ */

/* ============================================================ */
/* v0.9.4: Teams Feature                                         */
/* ============================================================ */
/* Golden Mail-Frame für Legendary-Kunden-Mails */
.mail-list-item.mail-golden {
    background: linear-gradient(90deg, #fff9dc 0%, #fff0a8 50%, #fff9dc 100%);
    border-left: 4px solid #e0b400;
    animation: gold-pulse 2.4s ease-in-out infinite;
}
.mail-list-item.mail-golden .mail-row-from {
    color: #8a6200;
    font-weight: bold;
}
.mail-list-item.mail-golden .mail-row-subject {
    color: #a47400;
}
.mail-list-item.mail-golden.active {
    background: linear-gradient(90deg, #ffe680 0%, #ffd54f 50%, #ffe680 100%);
}
@keyframes gold-pulse {
    0%, 100% { box-shadow: inset 0 0 12px rgba(224, 180, 0, 0.15); }
    50% { box-shadow: inset 0 0 24px rgba(224, 180, 0, 0.35); }
}
.mail-preview.mail-preview-golden {
    background: linear-gradient(135deg, #fffdf2 0%, #fff6d4 100%);
    border: 3px solid #d4a600;
    box-shadow: 0 0 30px rgba(212, 166, 0, 0.4), inset 0 0 40px rgba(255, 235, 170, 0.5);
    position: relative;
}
.mail-preview.mail-preview-golden::before {
    content: '⭐ VIP';
    position: absolute;
    top: 8px; right: 12px;
    font-size: 12px;
    font-weight: bold;
    color: #a47400;
    background: #fff;
    padding: 2px 8px;
    border: 1px solid #d4a600;
    border-radius: 2px;
    letter-spacing: 0.5px;
}
.mail-preview.mail-preview-golden .mail-preview-subject {
    color: #5a3f00;
    font-size: 14px;
    text-shadow: 0 1px 0 #fff3b8;
}

/* Team-Row Hover-Highlight */
.teams-table tr.team-row:hover {
    background: #e7f0fa;
}

/* v0.9.3.2: Mail-Fenster padding reset damit Mail-Layout bündig am Rand sitzt */
#win-mail > .window-body {
    padding: 0;
}

/* ============================================================
   v0.9.4.12 — Era-aware Custom Tooltips
   ============================================================
   Styles fuer #era-tooltip, erzeugt durch era-tooltip.js.
   Per body.era-N Klassen nimmt der Tooltip Charakteristika
   der jeweiligen Aera an (hart/flat/weich). Er lehnt sich
   ans .window-Design an damit er wie ein Modal-Child wirkt.
*/

.era-tooltip {
    position: fixed;
    z-index: 9000;
    min-width: 180px;
    max-width: 340px;
    padding: 6px 8px;
    background: var(--win-bg);
    color: var(--text);
    border: 2px solid;
    border-color: var(--win-light) var(--win-border) var(--win-border) var(--win-light);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
    font-family: var(--font-ui);
    font-size: 11px;
    line-height: 1.35;
    pointer-events: none;
    user-select: none;
}

.era-tooltip.hidden { display: none; }

.era-tooltip .ett-title {
    display: block;
    margin: -6px -8px 6px -8px;
    padding: 3px 8px;
    background: var(--title-bar);
    color: var(--title-text);
    font-size: 11px;
    font-weight: bold;
}

.era-tooltip table {
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
}
.era-tooltip td {
    padding: 1px 4px;
    vertical-align: top;
}
.era-tooltip td:first-child { color: #555; }
.era-tooltip td:nth-child(2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.era-tooltip .ett-pos { color: #0a6b0a; }
.era-tooltip .ett-neg { color: #a00; }
.era-tooltip .ett-muted { color: #888; font-size: 9px; }
.era-tooltip .ett-empty { color: #888; font-style: italic; padding: 4px 2px; }

/* Era-1 (1995-1999): Win95 — harte Kante, kein Shadow-Blur */
body.era-1 .era-tooltip {
    border-radius: 0;
    box-shadow: 2px 2px 0 #000;
}

/* Era-2 (2000-2009): XP Luna — leicht abgerundet, weicher Shadow */
body.era-2 .era-tooltip {
    border-radius: 2px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
body.era-2 .era-tooltip .ett-title {
    background: linear-gradient(180deg, #3a6ea5 0%, #2b579a 100%);
}

/* Era-3 (2010-2019): Material Flat */
body.era-3 .era-tooltip {
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    background: #fff;
}
body.era-3 .era-tooltip .ett-title {
    background: #2b579a;
    margin: -6px -8px 6px -8px;
    border-radius: 3px 3px 0 0;
    font-weight: 600;
}

/* Era-4 (2020+): iOS / Glassmorphism */
body.era-4 .era-tooltip {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.era-4 .era-tooltip .ett-title {
    background: linear-gradient(180deg, #0078d4 0%, #106ebe 100%);
    border-radius: 7px 7px 0 0;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Main-Menu: neutrale Stil-Variante (etwas dunkler, ohne Title-Bar) */
body.era-menu .era-tooltip {
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Cursor-Hinweis fuer Tooltip-fuehrende Elemente */
[data-era-tt], [data-era-tt-html] { cursor: help; }
button[data-era-tt], button[data-era-tt-html] { cursor: pointer; }

/* ============================================================
   v0.9.4.14 — Taskbar Status-Badges + Pulse
   ============================================================ */
.taskbar-btn {
    position: relative; /* Badge-Anchor */
}

.taskbar-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    background: #c03030;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 7px;
    font-size: 9px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    pointer-events: none;
    white-space: nowrap;
}

.taskbar-badge-pulse {
    animation: taskbarBadgePulse 2.4s ease-in-out infinite;
}

@keyframes taskbarBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,48,48,0.65), 0 1px 2px rgba(0,0,0,0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(192,48,48,0.0), 0 1px 2px rgba(0,0,0,0.3); }
}

/* Pulsender Taskbar-Button selbst (dezenter Glow-Ring) */
.taskbar-btn.taskbar-pulse {
    animation: taskbarBtnPulse 2.4s ease-in-out infinite;
}

@keyframes taskbarBtnPulse {
    0%, 100% {
        box-shadow: inset 0 0 0 1px rgba(255,200,80,0.0);
        background-color: transparent;
    }
    50% {
        box-shadow: inset 0 0 0 1px rgba(255,200,80,0.65);
        background-color: rgba(255,200,80,0.18);
    }
}

/* Era-spezifische Anpassungen fuer die Pulse-Farbe (harmoniert mit Era-Styling) */
body.era-1 .taskbar-btn.taskbar-pulse,
body.era-2 .taskbar-btn.taskbar-pulse {
    animation: taskbarBtnPulseWin 2.4s ease-in-out infinite;
}
@keyframes taskbarBtnPulseWin {
    0%, 100% { background-color: transparent; }
    50%      { background-color: rgba(255,220,100,0.35); }
}

/* ============================================================
   v0.9.4.17 — Desktop-Shortcuts (Era-aware)
   ============================================================ */
.desktop-shortcuts {
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    grid-template-columns: repeat(2, 72px);
    grid-auto-rows: 80px;
    gap: 4px;
    z-index: 1;  /* unter Windows, aber oberhalb des Desktop-Bodys */
    pointer-events: none; /* Clicks nur auf die Shortcuts selbst */
}

.desktop-shortcut {
    pointer-events: auto;
    width: 72px;
    min-height: 74px;
    padding: 6px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border-radius: 4px;
    transition: background-color 120ms ease-out, transform 120ms ease-out;
}

.desktop-shortcut:hover {
    background: rgba(255,255,255,0.18);
}

.desktop-shortcut:active {
    transform: scale(0.96);
}

.desktop-shortcut-icon {
    font-size: 30px;
    line-height: 1;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.35));
}

/* v0.9.6.6: Podium-Icon (Konkurrenz) skaliert per Kontext.
   Bottom-Bar (taskbar-btn .icon) bleibt klein (14px), Desktop-Shortcut gross (30px). */
.desktop-shortcut-icon .podium-icon { width: 30px; height: 24px; }
.start-menu-item .icon .podium-icon { width: 14px; height: 11px; }
.taskbar-btn .icon .podium-icon { width: 14px; height: 11px; }
/* v0.9.7.0: Fenster-Titlebar-Icon — SVG brauchte explizite Groesse, sonst streckte
   es sich auf 100% Container-Breite und ueberdeckte den "Konkurrenz"-Text. */
.title-bar .title .icon .podium-icon { width: 16px; height: 13px; vertical-align: middle; }
.title-bar .title .icon { display: inline-flex; align-items: center; flex: 0 0 auto; }

.desktop-shortcut-label {
    font-size: 10px;
    color: #fff;
    text-shadow: 1px 1px 2px #000, 0 0 2px #000;
    line-height: 1.1;
    word-break: break-word;
    padding: 1px 3px;
}

/* === Era-Varianten === */

/* Era-1 (1995-1999): Win95-Desktop. Scharfe Label-Box bei Selection, kein Radius. */
body.era-1 .desktop-shortcut { border-radius: 0; }
body.era-1 .desktop-shortcut:hover {
    background: transparent;
}
body.era-1 .desktop-shortcut:hover .desktop-shortcut-label {
    background: #000080;
    color: #fff;
    text-shadow: none;
    outline: 1px dotted #fff;
}

/* Era-2 (2000-2009): XP-Luna-Stil. Leichter Glow bei Hover. */
body.era-2 .desktop-shortcut { border-radius: 3px; }
body.era-2 .desktop-shortcut:hover {
    background: rgba(120, 180, 240, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* Era-3 (2010-2019): Flat-Material. Groessere Gaps, weichere Hovers. */
body.era-3 .desktop-shortcuts { gap: 8px; }
body.era-3 .desktop-shortcut {
    border-radius: 6px;
}
body.era-3 .desktop-shortcut:hover {
    background: rgba(255,255,255,0.22);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* Era-4 (2020+): iOS/Glas. Mehr Padding, Rounded. */
body.era-4 .desktop-shortcuts { gap: 10px; grid-template-columns: repeat(2, 78px); }
body.era-4 .desktop-shortcut {
    border-radius: 12px;
    padding: 8px 4px 6px 4px;
}
body.era-4 .desktop-shortcut:hover {
    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.era-4 .desktop-shortcut-icon {
    font-size: 32px;
}

/* Responsiv: wenn das Window-Container schmaler als ~180px ist, nur 1 Spalte (Notbetrieb). */
@media (max-width: 200px) {
    .desktop-shortcuts { grid-template-columns: 72px; }
}

/* v0.9.4.20 — Era-Tooltip Debug-Mode (Shift hold + Click-to-Copy) */
.era-tooltip.era-tooltip-debug {
    white-space: pre-wrap;
    max-width: 480px;
    font-family: "SF Mono", "Consolas", Menlo, monospace;
    font-size: 10.5px;
    background: #fff8d2;
    border-color: #f0c000 #806000 #806000 #f0c000;
    color: #333;
}

/* v0.9.5.19: Animierter Stripe-Fill für stagnierende Kategorie-Balken (cat-bar-stalled) */
.cat-bar-stripes {
    background-image: repeating-linear-gradient(45deg, #c44 0 8px, #a22 8px 16px);
    background-size: 22.627px 22.627px; /* sqrt(16^2 * 2) = ein voller Stripe-Zyklus bei 45° */
    animation: cat-bar-stripe-move 1.6s linear infinite;
}
/* v0.9.5.20: Animierter Stripe-Fill für langsame Kategorie-Balken (cat-bar-slow) — amber */
.cat-bar-stripes-slow {
    background-image: repeating-linear-gradient(45deg, #e0a800 0 8px, #b37700 8px 16px);
    background-size: 22.627px 22.627px;
    animation: cat-bar-stripe-move 2.4s linear infinite;
}
@keyframes cat-bar-stripe-move {
    from { background-position: 0 0; }
    to   { background-position: 22.627px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-bar-stripes,
    .cat-bar-stripes-slow { animation: none; }
}

/* v0.9.7.3: Goldener Rahmen fuer Reputation-Milestone-Events.
   Aktiviert via .milestone-card.milestone-rep (gesetzt aus events.js). */
.milestone-card.milestone-rep {
    border: 4px solid #d4a017;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 6px #d4a017,
        0 0 28px 4px rgba(212, 160, 23, 0.55),
        10px 10px 0 rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #fffdf3 0%, #fff 60%);
}
.milestone-card.milestone-rep .ms-image {
    border-bottom: 3px solid #d4a017;
}
.milestone-card.milestone-rep .ms-title {
    color: #6b4a00;
    text-shadow: 0 1px 0 #fff;
}
.milestone-card.milestone-rep .ms-source {
    color: #9a7a1a;
    font-style: italic;
}
.milestone-card.milestone-rep .ms-close {
    background: linear-gradient(180deg, #f6d97a 0%, #d4a017 100%);
    color: #3a2a00;
    border: 2px solid #b8860b;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.milestone-card.milestone-rep .ms-close:hover {
    background: linear-gradient(180deg, #ffe48a 0%, #e7b020 100%);
}

/* v0.9.11.36 — Time-Allocation Number-Input: Spinner-Pfeile ausblenden, Scroll bleibt erhalten.
   Master Chief 2026-04-29: "Scrollen zum Umstellen ... weiterhin möglich, nur nicht die Pfeile anzeigen." */
input[id^="ta-"][id$="-num"]::-webkit-outer-spin-button,
input[id^="ta-"][id$="-num"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[id^="ta-"][id$="-num"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* ============================================================
 * v0.9.11.47 — Schulen-Liste neu (Master Chief 2026-04-29)
 *
 * Ziele:
 *   - Pop-up beim Klick auf "Schulen" weg → quickStartTraining direkt
 *   - Klare Spalten: Name | Bar | Lvl | Kosten | Dauer | Button
 *   - Aktive Schulung als richtiges Card-Element, kein Float-Hack
 *   - Bei aktiver Schulung verrutscht NICHTS mehr (Grid hält Spalten)
 * ============================================================ */

.train-trainee {
    background: #fff;
    border: 1px solid var(--win-dark, #808080);
    padding: 3px 5px;
    margin-top: 3px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #c0c0c0;
}

.train-trainee-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ddd;
}
.train-trainee-icon { font-size: 14px; }
.train-trainee-name { font-size: 11px; }
.train-trainee-sub { font-size: 9px; color: #666; }

/* === aktive Schulung (Card mit Progress-Bar) === */
.train-active-card {
    background: linear-gradient(180deg, #fff8d6 0%, #fff1b0 100%);
    border: 1px solid #c8a800;
    border-radius: 2px;
    padding: 3px 6px;
    margin-bottom: 3px;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.6);
}
.train-active-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    margin-bottom: 2px;
}
.train-active-icon { font-size: 11px; }
.train-active-label { flex: 1; color: #5a4500; }
.train-active-cancel {
    font-size: 9px !important;
    padding: 0 4px !important;
    min-height: 14px !important;
    line-height: 1 !important;
}
.train-active-bar {
    height: 5px;
    background: #f0e0a0;
    border: 1px solid #b89000;
    border-radius: 1px;
    overflow: hidden;
    margin-bottom: 2px;
}
.train-active-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4a017 0%, #f0c040 100%);
    transition: width 0.3s ease-out;
}
.train-active-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #6a5000;
}

/* === Skill-Liste (Grid) === */
.train-skill-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* v0.9.11.48: 5-Spalten (Lvl-Spalte entfernt, Stufe nur noch im Tooltip am Bar). */
/* Header-Zeile */
.train-skill-head {
    display: grid;
    grid-template-columns: 80px 1fr 64px 52px 56px;
    gap: 4px;
    align-items: center;
    font-size: 8px;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 3px;
    border-bottom: 1px solid #c8c8c8;
    margin-bottom: 1px;
}
.train-skill-head .train-skill-name { text-align: left; }
.train-skill-head .train-skill-bar {
    text-align: left;
    padding-left: 2px;
    /* Header braucht keinen Höhen-/Border-Look der echten Bar */
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
.train-skill-head .train-skill-cost { text-align: right; }
.train-skill-head .train-skill-dur { text-align: right; }

/* Skill-Row Grid */
.train-skill-row {
    display: grid;
    grid-template-columns: 80px 1fr 64px 52px 56px;
    gap: 4px;
    align-items: center;
    font-size: 9px;
    line-height: 1.15;
    padding: 1px 3px;
    border-radius: 2px;
    transition: background 0.12s;
}
.train-skill-row:hover {
    background: rgba(0, 60, 200, 0.05);
}
.train-skill-row.is-locked {
    opacity: 0.55;
}
.train-skill-row.is-maxed {
    opacity: 0.8;
    background: rgba(80, 160, 80, 0.06);
}

.train-skill-row .train-skill-name {
    font-weight: 500;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.train-skill-row .train-skill-bar {
    height: 5px;
    background: #e0e0e0;
    border: 1px solid #999;
    border-radius: 1px;
    overflow: hidden;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
    cursor: help;
}
.train-skill-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a8eff 0%, #2864c8 100%);
    transition: width 0.3s ease-out;
}
.is-maxed .train-skill-fill {
    background: linear-gradient(90deg, #46a346 0%, #2c802c 100%);
}

.train-skill-val {
    text-align: right;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: bold;
    color: #333;
}

.train-skill-cost {
    text-align: right;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #555;
    font-size: 9px;
}
.train-skill-cost.is-poor { color: #c00; }

.train-skill-dur {
    text-align: right;
    color: #777;
    font-size: 9px;
}

.train-skill-btn {
    font-size: 9px !important;
    min-height: 15px !important;
    padding: 0 4px !important;
    line-height: 1 !important;
}
.train-skill-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Era-spezifisch — Era 3 (smooth) */
body.era-e3 .train-trainee {
    background: #fafafa;
    border-color: #d0d0d8;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body.era-e3 .train-skill-row { border-radius: 4px; }
body.era-e3 .train-skill-fill {
    background: linear-gradient(90deg, #5b9eff 0%, #3a7ce0 100%);
}
body.era-e3 .train-active-card {
    background: linear-gradient(180deg, #fff8d6 0%, #fef0a8 100%);
    border-radius: 6px;
}

/* Era-spezifisch — Era 4 (dark glass) */
body.era-e4 .train-trainee {
    background: rgba(20, 20, 30, 0.7);
    border-color: rgba(120, 130, 160, 0.4);
    color: #d8dde8;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
body.era-e4 .train-trainee-head { border-bottom-color: rgba(120, 130, 160, 0.3); }
body.era-e4 .train-trainee-name { color: #f0f3f8; }
body.era-e4 .train-trainee-sub { color: #aab; }
body.era-e4 .train-skill-head { color: #99a; border-bottom-color: rgba(120, 130, 160, 0.3); }
body.era-e4 .train-skill-row { color: #d8dde8; }
body.era-e4 .train-skill-row:hover { background: rgba(120, 160, 255, 0.08); }
body.era-e4 .train-skill-row .train-skill-name { color: #e8ecf4; }
body.era-e4 .train-skill-bar { background: rgba(40, 50, 70, 0.6); border-color: rgba(100, 120, 160, 0.5); }
body.era-e4 .train-skill-fill { background: linear-gradient(90deg, #7aaaff 0%, #4d7fdc 100%); }
body.era-e4 .train-skill-val { color: #f0f3f8; }
body.era-e4 .train-skill-cost { color: #aab; }
body.era-e4 .train-skill-dur { color: #99a; }
body.era-e4 .train-active-card {
    background: linear-gradient(180deg, rgba(80, 65, 25, 0.9) 0%, rgba(60, 50, 20, 0.85) 100%);
    border-color: rgba(200, 168, 0, 0.5);
}
body.era-e4 .train-active-label { color: #ffe9a0; }
body.era-e4 .train-active-meta { color: #d8c884; }
body.era-e4 .train-active-bar { background: rgba(60, 50, 20, 0.7); border-color: rgba(184, 144, 0, 0.5); }


/* v0.9.11.70: Desktop-Shortcuts free positioning + drag feedback */
#desktop-shortcuts {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
#desktop-shortcuts .desktop-shortcut {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow 0.1s;
}
#desktop-shortcuts .desktop-shortcut.shortcut-dragging {
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    cursor: grabbing;
    transition: none;
}

/* ============================================================ */
/* v0.9.17.6: Character Creation Step 2 — Trailer-Polish        */
/*   - Trait-Cards: Icon + Title head, Bonus/Cost as colored    */
/*     <ul> blocks, hover lift + selected glow.                 */
/*   - Skill-bars: per-skill brand color, smooth width tween.   */
/*   - Era-agnostic; Era 3/4 inherit base via existing rules.   */
/* ============================================================ */

/* --- Trait Cards (era-agnostic base, classic Win95 vibe) --- */
.trait-grid { gap: 10px; }

.trait-option.trait-card {
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.12s ease, border-color 0.12s ease;
    position: relative;
    overflow: hidden;
}
.trait-option.trait-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.trait-option.trait-card.selected {
    box-shadow: 0 0 0 2px rgba(0, 64, 192, 0.55), 0 6px 18px rgba(0, 64, 192, 0.32);
    transform: translateY(-1px);
}

/* Subtile diagonal sheen on selected card (trailer-pop) */
.trait-option.trait-card.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}

.trait-card-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 2px;
}
.trait-icon {
    font-size: 22px; line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
    flex: 0 0 auto;
}
.trait-title {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.2px;
}

.trait-card-body {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 10px; line-height: 1.35;
}

ul.trait-bonus, ul.trait-cost {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
ul.trait-bonus li, ul.trait-cost li {
    position: relative;
    padding-left: 14px;
}
ul.trait-bonus li::before {
    content: '+';
    position: absolute; left: 0; top: 0;
    font-weight: 800; color: #1d8a3a;
}
ul.trait-cost li::before {
    content: '−';
    position: absolute; left: 0; top: 0;
    font-weight: 800; color: #b32a2a;
}
/* Selected state: keep semantic colors readable on accent bg */
.trait-option.trait-card.selected ul.trait-bonus li,
.trait-option.trait-card.selected ul.trait-cost li {
    color: #fff;
}
.trait-option.trait-card.selected ul.trait-bonus li::before { color: #b9ffce; }
.trait-option.trait-card.selected ul.trait-cost  li::before { color: #ffc9c9; }

/* --- Skill bars: per-skill colors (override generic .progress-fill) --- */
.skill-progress { background: #d8d8d8; border: 1px inset #fff; }
.progress-fill.skill-bar { transition: width 0.25s cubic-bezier(.4,.0,.2,1); height: 100%; background-image: none; }
.progress-fill.skill-bar--design     { background: linear-gradient(90deg, #ff6fa8, #ff3d80) !important; }
.progress-fill.skill-bar--dev        { background: linear-gradient(90deg, #4dd0e1, #00bcd4) !important; }
.progress-fill.skill-bar--marketing  { background: linear-gradient(90deg, #ffb347, #ff8a00) !important; }
.progress-fill.skill-bar--sales      { background: linear-gradient(90deg, #66cc66, #2ea043) !important; }
.progress-fill.skill-bar--admin      { background: linear-gradient(90deg, #b8b8b8, #7f8a99) !important; }
.progress-fill.skill-bar--leadership { background: linear-gradient(90deg, #b388ff, #7e57c2) !important; }

.skill-point-row { transition: background 0.12s ease; }
.skill-point-row:hover { background: rgba(0,0,0,0.04); }
.skill-row-label { font-weight: 600; }

/* --- Era 3 (XP) overrides: keep card pop, soften shadows --- */
body.era-e3 .trait-option.trait-card {
    border-radius: 6px;
}
body.era-e3 .trait-option.trait-card.selected {
    box-shadow: 0 0 0 2px rgba(0, 96, 220, 0.55), 0 6px 18px rgba(0, 96, 220, 0.30);
}

/* --- Era 4 (Aurora/Dark) overrides: subtle glow on dark bg --- */
body.era-e4 .trait-option.trait-card {
    background: rgba(28, 32, 50, 0.78);
    border: 1px solid rgba(120, 140, 200, 0.35);
    color: #d8def0;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
body.era-e4 .trait-option.trait-card:hover {
    background: rgba(38, 44, 70, 0.85);
    border-color: rgba(160, 180, 240, 0.55);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
body.era-e4 .trait-option.trait-card.selected {
    background: linear-gradient(180deg, rgba(60, 90, 180, 0.55), rgba(40, 60, 130, 0.55));
    border-color: rgba(180, 200, 255, 0.75);
    box-shadow: 0 0 0 2px rgba(180, 200, 255, 0.6), 0 8px 24px rgba(80, 110, 220, 0.45);
}
body.era-e4 .trait-icon { filter: drop-shadow(0 0 6px rgba(180, 200, 255, 0.45)); }
body.era-e4 ul.trait-bonus li::before { color: #6cf09b; }
body.era-e4 ul.trait-cost li::before  { color: #ff8a8a; }
body.era-e4 .skill-progress { background: rgba(20, 24, 38, 0.7); border-color: rgba(120, 140, 200, 0.4); }
body.era-e4 .skill-point-row:hover { background: rgba(120, 140, 200, 0.08); }
body.era-e4 .skill-row-label { color: #d8def0; border-bottom-color: rgba(180, 200, 255, 0.4) !important; }