/* =========================================================
   Guides site — layered on top of style.css
   ========================================================= */

.guides-body {
    background: var(--bg-secondary, #f7f7f8);
    color: var(--text-primary, #1d1d1f);
}

.guides-hero h1 {
    color: var(--text-primary, #1d1d1f);
}

.guides-nav .logo-icon {
    font-size: 1.4em;
}

.guides-hero {
    max-width: 900px;
    margin: 40px auto 24px;
    padding: 0 24px;
    text-align: center;
}

.guides-hero h1 {
    font-size: 2.4rem;
    margin-bottom: 8px;
}

.guides-hero-sub {
    color: var(--text-secondary, #555);
    font-size: 1.05rem;
}

.guides-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.guide-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 12px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    display: flex;
    gap: 14px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: var(--primary-color, #0a84ff);
}

.guide-card.sens-3 { border-left: 4px solid #e4494a; }
.guide-card.sens-2 { border-left: 4px solid #f5a623; }
.guide-card.sens-1 { border-left: 4px solid #57b84d; }

.guide-card-icon {
    font-size: 2rem;
}

.guide-card-body h3 { margin: 0 0 4px; font-size: 1.1rem; }
.guide-card-body p  { margin: 0 0 10px; color: var(--text-secondary, #666); font-size: 0.9rem; }
.guide-card-meta { display: flex; gap: 10px; font-size: 0.8rem; color: var(--text-secondary, #777); }

/* ---- Toolbar (search bar) --------------------------------------------- */
.guides-toolbar {
    max-width: 900px;
    margin: 0 auto 4px;
    padding: 8px 24px 0;
}

.guides-search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 12px;
    padding: 2px 12px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.guides-search:focus-within {
    border-color: var(--primary-color, #0a84ff);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.guides-search-icon {
    font-size: 1rem;
    opacity: 0.6;
    margin-right: 8px;
}

.guides-search input[type="search"] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary, #1d1d1f);
    font-size: 1rem;
    padding: 12px 4px;
    font-family: inherit;
}

.guides-search input[type="search"]::placeholder {
    color: var(--text-secondary, #888);
}

/* Chrome/Safari render a default cancel 'x' on type=search; we replace
   it with our own clear link only when there's an active query. */
.guides-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.guides-search-clear {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-secondary, #888);
    text-decoration: none;
    padding: 0 8px;
    border-radius: 8px;
}

.guides-search-clear:hover {
    color: var(--text-primary, #1d1d1f);
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .guides-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
}

.guides-search-meta {
    margin: 10px 2px 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

/* ---- Chronological list of messages ----------------------------------- */
.guides-list {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-row {
    display: flex;
    gap: 14px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.message-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-color, #0a84ff);
}

.message-row.sens-3 { border-left: 4px solid #e4494a; }
.message-row.sens-2 { border-left: 4px solid #f5a623; }
.message-row.sens-1 { border-left: 4px solid #57b84d; }

.message-row-icon {
    font-size: 1.6rem;
    line-height: 1.2;
    flex: 0 0 auto;
}

.message-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.message-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.message-row-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-row-date {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--text-secondary, #888);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.message-row-desc {
    margin: 0 0 8px;
    color: var(--text-secondary, #666);
    font-size: 0.9rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.message-row-meta {
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
}

@media (max-width: 560px) {
    .message-row-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .message-row-head h3 { white-space: normal; }
}

/* ---- Sidebar date on view page ---------------------------------------- */
.sidebar-date {
    margin: -4px 0 10px;
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
    font-variant-numeric: tabular-nums;
}

/* ---- Lockout screen --------------------------------------------------- */
.lockout-screen {
    max-width: 640px;
    margin: 60px auto 40px;
    padding: 0 24px;
}

.lockout-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e5e9);
    border-left: 4px solid #e4494a;
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.lockout-icon {
    font-size: 2.6rem;
    margin-bottom: 8px;
}

.lockout-card h1 {
    margin: 0 0 12px;
    font-size: 1.6rem;
    color: var(--text-primary, #1d1d1f);
}

.lockout-lead {
    color: var(--text-secondary, #555);
    font-size: 1rem;
    margin: 0 0 22px;
    line-height: 1.5;
}

.lockout-meta {
    background: var(--bg-secondary, #f7f7f8);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 18px auto;
    text-align: left;
    font-size: 0.9rem;
}

.lockout-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-color, #e5e5e9);
}

.lockout-meta-row:last-child { border-bottom: 0; }

.lockout-meta-key {
    color: var(--text-secondary, #888);
    font-weight: 500;
}

.lockout-meta-val code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.85rem;
}

[data-theme="dark"] .lockout-meta-val code {
    background: rgba(255, 255, 255, 0.08);
}

.lockout-sev {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.75rem;
    color: #e4494a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.lockout-hint {
    margin: 16px 0 22px;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

.lockout-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.lockout-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid var(--border-color, #e5e5e9);
    color: var(--text-primary, #1d1d1f);
    background: var(--bg-primary, #fff);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.lockout-btn:hover {
    border-color: var(--primary-color, #0a84ff);
}

.lockout-btn-primary {
    background: var(--primary-color, #0a84ff);
    color: #fff;
    border-color: var(--primary-color, #0a84ff);
}

.lockout-btn-primary:hover {
    filter: brightness(0.95);
}

.sens-badge {
    background: rgba(0,0,0,0.06);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

[data-theme="dark"] .sens-badge {
    background: rgba(255,255,255,0.08);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, #666);
}

/* ------- reading layout ------- */
.guide-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 24px;
}

.guide-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 12px;
    padding: 16px;
    max-height: calc(100vh - 100px);
    overflow: auto;
}

.back-link { color: var(--text-secondary, #666); font-size: 0.85rem; text-decoration: none; }
.back-link:hover { color: var(--primary-color, #0a84ff); }

.sidebar-title { margin: 10px 0 4px; font-size: 1.1rem; }
.sidebar-desc  { color: var(--text-secondary, #666); font-size: 0.85rem; margin-bottom: 12px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    font-size: 0.92rem;
    line-height: 1.3;
}
.sidebar-link:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.06); }
.sidebar-link.active {
    background: var(--primary-color, #0a84ff);
    color: #fff;
}
.sidebar-link .lock { float: right; opacity: 0.7; }

.guide-article {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 12px;
    padding: 28px 36px;
    min-height: 400px;
}

.guide-article.sensitive .article-content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* iOS / Android: kill the native long-press callout (copy, share,
       look up, translate, save image, etc). These are the primary mobile
       leak paths. */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.guide-article.sensitive .article-content img {
    /* Block iOS "Save to Photos" / Android "Download image" long-press. */
    -webkit-touch-callout: none;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.article-header h1 { margin-top: 0; }

.sensitive-banner {
    background: #fff4e0;
    color: #8a4b00;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin: 8px 0 20px;
    border: 1px solid #f5d9a8;
}

[data-theme="dark"] .sensitive-banner {
    background: #3a2b10;
    color: #ffc98a;
    border-color: #5b4420;
}

.article-content {
    line-height: 1.65;
    font-size: 1.02rem;
}

.article-content img {
    max-width: 100%;
    border-radius: 8px;
    pointer-events: none;
    -webkit-user-drag: none;
}

.article-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    gap: 12px;
}

.nav-btn {
    text-decoration: none;
    color: inherit;
    padding: 10px 14px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    font-size: 0.9rem;
    max-width: 45%;
}
.nav-btn:hover { background: rgba(10,132,255,0.1); color: var(--primary-color, #0a84ff); }
[data-theme="dark"] .nav-btn { background: rgba(255,255,255,0.06); }

/* ------- silent watermark -------
   The overlay is present in the DOM (and therefore captured in screenshots)
   but is rendered with very low opacity so on-screen viewers don't realize
   their session is uniquely tagged. #}
*/
/* Tile a near-invisible fingerprint across the whole viewport. Opacity is
   tuned just high enough to survive H.264/VP9 video compression (below
   ~3% alpha it gets quantized away by the encoder), but low enough to
   remain visually unobtrusive. JS populates this overlay with a grid of
   labels on load and refreshes the timestamp each second. */
.wm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    mix-blend-mode: multiply;
}

.wm-overlay .wm-tile {
    position: absolute;
    white-space: nowrap;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgba(0, 0, 0, 0.035);
    transform: rotate(-28deg);
    letter-spacing: 0.03em;
    font-weight: 500;
}

[data-theme="dark"] .wm-overlay {
    mix-blend-mode: screen;
}
[data-theme="dark"] .wm-overlay .wm-tile {
    color: rgba(255, 255, 255, 0.05);
}
/* When .active is toggled (e.g. during print) we don't amplify the overlay
   — amplifying would tip the user off. Visual masking is handled by
   .wm-blur / .wm-curtain instead. */

/* Instant blur — no transition — sensitive content becomes unreadable the
   moment a screenshot-likely event fires. The blur is intentionally strong
   enough that no OCR or de-blur attack can recover text, AND we also hide
   the text via transparent color so the rendered pixels contain no glyphs
   to recover from. Backgrounds remain so the page doesn't collapse. */
body.wm-blur .article-content,
body.wm-blur .sidebar-link,
body.wm-blur .sidebar-desc,
body.wm-blur .article-header h1,
body.wm-blur .article-header h2,
body.wm-blur .sensitive-banner {
    filter: blur(30px) !important;
    transition: none !important;
    color: transparent !important;
    text-shadow: none !important;
}

body.wm-blur .article-content * {
    color: transparent !important;
    text-shadow: none !important;
}

/* A soft "click to continue" hint appears when the mask is engaged.
   This doubles as UX — Snipping Tool can't generate a real click, but the
   user can. */
body.wm-blur::after {
    content: "Click anywhere to continue";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    pointer-events: none;
}

/* When DevTools is open there is no "click to continue" escape — the page
   simply stays black until DevTools is closed. */
body.wm-devtools::after {
    content: none !important;
    display: none !important;
}

/* A full black curtain for the hardest events (PrintScreen, print). It
   sits above the content and behind the watermark overlay. */
body.wm-curtain::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: #000;
    pointer-events: none;
}

body.wm-curtain .article-content,
body.wm-curtain .guide-article {
    visibility: hidden;
}

/* Printed pages get nothing useful. */
@media print {
    .guide-article,
    .article-content,
    .guide-sidebar { display: none !important; }
    body::after {
        content: "Content unavailable for print.";
        display: block;
        font-size: 20px;
        padding: 40px;
        font-family: ui-monospace, monospace;
    }
}

/* ------- admin ------- */

.admin-shell { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 70px); }
.admin-sidebar {
    background: var(--bg-primary, #fff);
    border-right: 1px solid var(--border-color, #e5e5e9);
    padding: 20px 16px;
}
.admin-brand { font-weight: 700; margin-bottom: 16px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav-link {
    display: block; padding: 8px 10px; border-radius: 8px;
    text-decoration: none; color: inherit; font-size: 0.92rem;
}
.admin-nav-link:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .admin-nav-link:hover { background: rgba(255,255,255,0.06); }
.admin-nav-link.muted { color: var(--text-secondary, #888); margin-top: 16px; font-size: 0.85rem; }

.admin-main { padding: 24px 32px; max-width: 1200px; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 28px; }
.stat-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 10px;
    padding: 14px 18px;
}
.stat-card .stat-num { font-size: 1.8rem; font-weight: 700; }
.stat-card .stat-label { color: var(--text-secondary, #666); font-size: 0.85rem; }
.stat-card.danger { border-left: 4px solid #e4494a; }

.admin-section { margin-bottom: 36px; }
.admin-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; gap: 10px;
}

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th, .admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #eee);
    text-align: left;
    vertical-align: top;
}
.admin-table.dense th, .admin-table.dense td { padding: 6px 8px; font-size: 0.85rem; }
.admin-table tr.sev-2 { background: rgba(245, 166, 35, 0.08); }
.admin-table tr.sev-3 { background: rgba(228, 73, 74, 0.10); }
.admin-table td.danger { color: #e4494a; font-weight: 600; }
.log-details { max-width: 300px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.ua-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-form { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 0.9rem; }
.admin-form label.checkbox { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.admin-form input[type=text], .admin-form input[type=number], .admin-form textarea, .admin-form select {
    padding: 9px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg-primary, #fff);
    color: inherit;
}
.admin-form textarea.content-editor { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.88rem; }

.form-actions { display: flex; gap: 8px; margin-top: 8px; }

.btn-primary, .btn-secondary, .btn-danger, .btn-small {
    padding: 9px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
}
.btn-primary { background: var(--primary-color, #0a84ff); color: #fff; }
.btn-secondary { background: rgba(0,0,0,0.06); color: inherit; }
.btn-danger { background: #e4494a; color: #fff; }
.btn-small { padding: 5px 10px; font-size: 0.8rem; background: rgba(0,0,0,0.06); color: inherit; }
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-small { background: rgba(255,255,255,0.08); }

.admin-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-split-left, .admin-split-right { min-width: 0; }

.section-list { list-style: none; padding: 0; margin: 0; }
.section-list li {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #eee);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--bg-primary, #fff);
}

.pager { margin: 20px 0; display: flex; gap: 12px; align-items: center; }

.filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
    margin-bottom: 16px;
    background: var(--bg-primary, #fff);
    padding: 12px;
    border: 1px solid var(--border-color, #eee);
    border-radius: 10px;
}
.filter-bar label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 2px; }
.filter-bar input, .filter-bar select {
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--border-color, #ddd);
    background: var(--bg-primary, #fff);
    color: inherit;
}

.forensic-result {
    margin-top: 20px;
    padding: 18px;
    border-radius: 10px;
    background: #eaf5ff;
    border: 1px solid #b9dbff;
}
.forensic-result.danger { background: #fde8e8; border-color: #f3bcbc; }
[data-theme="dark"] .forensic-result { background: #15263a; border-color: #2b4a74; color: var(--text-primary, #fff); }
[data-theme="dark"] .forensic-result.danger { background: #3a1a1a; border-color: #6b2e2e; }
.big-code { display: block; padding: 10px 14px; background: #0b1220; color: #a8e2ff; border-radius: 8px; font-size: 0.95rem; word-break: break-all; margin: 10px 0; }

.muted { color: var(--text-secondary, #888); }

/* ------- admin: lockout panel ------- */
.lockout-admin-panel {
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 18px 0 24px;
    background: var(--bg-primary, #fff);
}

.lockout-admin-panel-active {
    border-left: 4px solid #e4494a;
    background: rgba(228, 73, 74, 0.04);
}

.lockout-admin-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.lockout-admin-head h2 { margin: 0; font-size: 1.15rem; }

.lockout-admin-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #fff;
    background: #e4494a;
    border-radius: 999px;
}

.muted-heading { margin: 0 0 6px; font-size: 1.05rem; color: var(--text-secondary, #888); }

.lockout-admin-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    font-size: 0.88rem;
    margin: 8px 0 14px;
}

.lockout-admin-meta .k {
    display: inline-block;
    min-width: 80px;
    color: var(--text-secondary, #888);
    font-weight: 500;
}

.lockout-admin-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.lockout-admin-form input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1d1d1f);
    font-size: 0.9rem;
}

.btn-unlock {
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: #e4494a;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.12s ease;
}
.btn-unlock:hover { filter: brightness(0.95); }

.lockout-admin-history { margin-top: 14px; }
.lockout-admin-history summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    padding: 4px 0;
}

/* ------- admin: users list lockout pill ------- */
.lockout-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    background: #e4494a;
    border-radius: 999px;
}
.row-locked { background: rgba(228, 73, 74, 0.06); }

@media (max-width: 640px) {
    .lockout-admin-meta { grid-template-columns: 1fr; }
    .lockout-admin-form { flex-direction: column; align-items: stretch; }
}
.nav-link { color: inherit; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 0.9rem; }
.nav-link:hover { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .nav-link:hover { background: rgba(255,255,255,0.06); }

/* ------- consent modal ------- */
.tnc-consent {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tnc-consent-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tnc-consent-card {
    position: relative;
    max-width: 520px;
    width: 100%;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1d1d1f);
    border: 1px solid var(--border-color, #e5e5e9);
    border-radius: 14px;
    padding: 28px 28px 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    font-family: var(--font-family, inherit);
}

.tnc-consent-card h2 {
    margin: 0 0 12px;
    font-size: 1.35rem;
    font-weight: 600;
}

.tnc-consent-body {
    margin: 0 0 22px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-secondary, #4a4a4f);
}

.tnc-consent-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.tnc-consent-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s ease, transform 0.08s ease;
}
.tnc-consent-btn:hover { filter: brightness(1.05); }
.tnc-consent-btn:active { transform: translateY(1px); }
.tnc-consent-btn:disabled { opacity: 0.6; cursor: wait; }

.tnc-consent-btn-primary {
    background: var(--primary-color, #0a84ff);
    color: #fff;
}
.tnc-consent-btn-secondary {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary, #1d1d1f);
}
[data-theme="dark"] .tnc-consent-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
}

.tnc-consent-version {
    margin: 16px 0 0;
    font-size: 0.72rem;
    color: var(--text-tertiary, #888);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: right;
}

@media (max-width: 960px) {
    .guide-layout { grid-template-columns: 1fr; }
    .guide-sidebar { position: static; max-height: none; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { border-right: none; border-bottom: 1px solid var(--border-color, #eee); }
    .admin-split { grid-template-columns: 1fr; }
}