/* ========== Base (Shared) ========== */
* { box-sizing: border-box; }

:root {
    --bg:#0e0f12; --panel:#141618; --panel-2:#1a1d21; --border:#2a2d31;
    --muted:#a7b0b8; --text:#eceff1; --accent:#2f6fed; --danger:#842029;
    --chip-bg:#1d2024; --chip-border:#343a40;
}

html, body { height: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Flash messages used by layout.html */
.flash-container { padding: 8px 16px; }
.flash {
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--border);
}

/* ========== Layout Shell Only ========== */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content { flex: 1 0 auto; padding: 16px; }

.topbar {
    position: sticky; top: 0;
    display: flex; gap: 12px; align-items: center;
    padding: 10px 16px;
    background: #131517;
    border-bottom: 1px solid var(--border);
    z-index: 5;
}

.topbar img { height: 32px; width: auto; }

.brand { font-weight: 700; }

.footer {
    /*background: var(--panel);
    border-top: 1px solid var(--border);*/
    padding: 5px;
    text-align: center;
    color: var(--muted);
}

/* Ghost button (used across pages) */
.ghost-btn {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.9em;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.ghost-btn:hover {
    color: var(--text);
    border-color: var(--text);
}