:root {
    --bg-main:      #1a1410;
    --border-plate: #4a3020;
    --border-steel: #332820;
    --text-main:    #c8c0b4;
    --text-bright:  #ece4d8;
    --text-muted:   #6a5840;
    --blood-red:    #aa1010;
    --deep-red:     #cc2020;
    --rust:         #8b4a18;
    --rust-light:   #b06030;
    --radius:       2px;
    --shadow:       0 8px 32px rgba(0,0,0,0.8), inset 0 1px 0 rgba(100,60,30,0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Consolas', 'Courier New', monospace;
    background-color: var(--bg-main);
    background-image:
        repeating-linear-gradient( 45deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 13px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 13px);
    background-size: 13px 13px;
    color: var(--text-main);
    line-height: 1.5;
    padding: 2rem 1rem;
}

.app-container { max-width: 1240px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────────── */

.app-header {
    background: linear-gradient(180deg, #2e2218, #1e1610);
    border: 2px solid var(--border-plate);
    border-top: 3px solid var(--rust);
    border-bottom: 4px solid #0a0806;
    padding: 1.5rem 1.8rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.app-header::before,
.app-header::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: radial-gradient(circle at 35% 35%, #7a5030, #1e1208);
    border-radius: 50%;
    border: 1px solid #0f0805;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.8);
    top: 9px;
}
.app-header::before { left: 9px; }
.app-header::after  { right: 9px; }

.brand h1 {
    font-family: Impact, 'Arial Narrow', Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow:
        2px 2px 0 #0a0404,
        0 0 24px rgba(170,16,16,0.5),
        0 3px 8px rgba(0,0,0,0.8);
}

.subtitle {
    font-size: 0.73rem;
    color: #8a6840;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

kbd {
    background: #100c08;
    color: #cc4422;
    padding: 1px 6px;
    border: 1px solid #4a2a14;
    border-bottom: 2px solid #060402;
    border-radius: 2px;
    font-size: 0.73rem;
    font-family: inherit;
}

/* ── Controls ────────────────────────────────────────── */

.controls-card {
    background: #16120e;
    border: 1px solid var(--border-plate);
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

.input-group { display: flex; align-items: center; gap: 0.75rem; }

.input-group label {
    font-weight: bold;
    font-size: 0.78rem;
    color: #8a7258;
    text-transform: uppercase;
    letter-spacing: 1px;
}

select {
    padding: 0.45rem 1.4rem 0.45rem 0.7rem;
    border: 1px solid #1e1410;
    border-top: 1px solid #4a3020;
    border-radius: var(--radius);
    background: linear-gradient(to bottom, #241c14, #161008);
    color: var(--text-bright);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

select:focus {
    border-color: var(--blood-red);
    box-shadow: 0 0 10px rgba(170,16,16,0.4);
}

select option { background-color: #181210; color: var(--text-bright); }

.btn {
    padding: 0.48rem 1.3rem;
    border-radius: var(--radius);
    font-weight: bold;
    font-size: 0.78rem;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border: 1px solid #0c0806;
    border-top: 1px solid #503824;
    transition: all 0.08s ease;
    box-shadow: 0 3px 0 #060402, 0 4px 8px rgba(0,0,0,0.6);
}

.btn-primary {
    background: linear-gradient(to bottom, #342418, #1c1410);
    color: var(--text-main);
}

.btn-primary:hover {
    background: linear-gradient(to bottom, #5a2018, #281410);
    color: #dd3018;
    border-top-color: #7a1810;
}

.btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #000, inset 0 2px 4px rgba(0,0,0,0.8);
}

/* ── Status bar ──────────────────────────────────────── */

.status-bar {
    padding: 0.75rem 1.2rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    margin-bottom: 1.5rem;
    border: 1px solid #0a0806;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
}

.status-info    { background: #141820; color: #7a90a0; border-left: 4px solid #3a5060; }
.status-success { background: #121a10; color: #5a9040; border-left: 4px solid #2a5820; }
.status-error   { background: #1e1010; color: #cc2020; border-left: 4px solid var(--blood-red); }
.hidden { display: none; }

/* ── Data wrapper ────────────────────────────────────── */

.data-wrapper {
    background: linear-gradient(150deg, #1e1812, #16120c);
    border: 2px solid var(--border-plate);
    border-top: 3px solid #50301a;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 3px;
}

.table-responsive {
    overflow-x: auto;
    border: 1px solid #100c08;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
    background: #1a1410;
}

.modern-table th {
    background: linear-gradient(to bottom, #2a2018, #1e1812);
    padding: 0.85rem 1rem;
    font-weight: 900;
    color: #d0c0a8;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.73rem;
    border-bottom: 3px solid var(--blood-red);
    border-right: 1px solid #281e14;
}

.modern-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #201a14;
    border-right: 1px solid #1c1810;
    color: var(--text-main);
}

.modern-table tbody tr:nth-child(even) { background: #1e1814; }

.modern-table tbody tr:hover td { background: #2a1c14 !important; }

.interactive-cell { cursor: pointer; }

.interactive-cell:hover {
    background-color: #2a1c14 !important;
    color: var(--text-bright);
}

.placeholder-text {
    color: var(--text-muted);
    padding: 4rem !important;
    text-align: center;
    font-style: italic;
    background: #161210;
}

.row-modified {
    background-color: #281c10 !important;
    border-left: 3px solid var(--rust-light);
}

/* ── Inline editor ───────────────────────────────────── */

.table-inline-input {
    width: 100%;
    padding: 0.28rem 0.5rem;
    background: #100c08;
    border: 1px solid var(--blood-red);
    border-radius: 1px;
    color: #dd4020;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.7), 0 0 6px rgba(170,16,16,0.3);
}

/* ── Action buttons ──────────────────────────────────── */

.action-cell {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.btn-action {
    width: 26px;
    height: 26px;
    border-radius: 2px;
    border: 1px solid #100c08;
    border-top: 1px solid #4a3020;
    font-weight: bold;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #281e14, #18120e);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    transition: transform 0.05s ease;
}

.btn-action:active { transform: scale(0.91); }

.btn-save { color: #4a7830; }
.btn-save:hover:not([disabled]) {
    background: #1e4010;
    color: #68c040;
    box-shadow: 0 0 10px rgba(70,150,30,0.5);
    border-top-color: #386020;
}
.btn-save[disabled] { opacity: 0.15; cursor: not-allowed; }

.btn-delete { color: #882020; }
.btn-delete:hover {
    background: #3a1010;
    color: #ee2020;
    box-shadow: 0 0 12px rgba(170,16,16,0.6);
    border-top-color: var(--blood-red);
}

.btn-clone { color: #6a5840; }
.btn-clone:hover {
    background: #2e2418;
    color: #a89878;
    border-top-color: #6a5030;
}

.text-center { text-align: center; }
.text-danger  { color: #bb1818; }