:root {
    --brand-dark: #0F1A22;
    --brand-accent: #5BC8B8;
    --surface: #ffffff;
    --page: #f3f6f8;
    --border: #e1e7eb;
}

body { background: var(--page); color: #1b2a33; }
a { color: #1b8f80; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 240px; flex-shrink: 0; background: var(--brand-dark); color: #fff;
    padding: 1.25rem 1rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .nav-link { color: #b9c6ce; border-radius: .5rem; padding: .55rem .8rem; margin-bottom: .15rem; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .nav-link.active { background: var(--brand-accent); color: var(--brand-dark); font-weight: 600; }
.sidebar .logout { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.content { flex: 1; min-width: 0; padding: 2rem; max-width: 1200px; }

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; margin-bottom: 1.5rem; }
.brand small { font-weight: 400; opacity: .7; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border-radius: 50%; background: var(--brand-accent); color: var(--brand-dark); font-weight: 800;
}
body.bare .brand { color: var(--brand-dark); margin-bottom: 0; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem; }
.panel-title { text-transform: uppercase; letter-spacing: .04em; color: #5b6b75; margin-bottom: .9rem; }
.panel .table { --bs-table-bg: transparent; }
.panel .table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #5b6b75; border-bottom-color: var(--border); }
.danger-panel { border-color: #f1c4c4; }

.stat { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem 1.25rem; }
.stat-num { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: #5b6b75; font-size: .85rem; }

.log-list li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.log-list li:last-child { border-bottom: 0; }

.user-actions { text-align: left; }
.user-actions > summary { list-style: none; cursor: pointer; display: inline-block; }
.user-actions > summary::-webkit-details-marker { display: none; }
.user-actions-body {
    margin-top: .6rem; padding: .9rem; background: #f8fafb; border: 1px solid var(--border);
    border-radius: .5rem; min-width: 280px; max-width: 360px; margin-left: auto;
}
.danger-zone { border-top: 1px dashed #e7b4b4; padding-top: .75rem; }

.bare { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.bare-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; }
.code-input { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.qr-box { width: 200px; margin: 0 auto 1rem; }
.qr-box svg { width: 100%; height: auto; display: block; }
.secret-key { font-size: .95rem; word-break: break-all; }

.btn-primary { --bs-btn-bg: #1b8f80; --bs-btn-border-color: #1b8f80; --bs-btn-hover-bg: #157568; --bs-btn-hover-border-color: #157568; --bs-btn-active-bg: #157568; --bs-btn-active-border-color: #157568; }

@media (max-width: 860px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; }
    .sidebar .brand { margin: 0 1rem 0 0; }
    .sidebar .nav { flex-direction: row !important; flex-wrap: wrap; }
    .sidebar .logout { margin: 0 0 0 auto; padding: 0; border: 0; }
    .sidebar .logout .small { display: none; }
    .content { padding: 1rem; }
    .user-actions-body { min-width: 0; max-width: none; }
}