:root {
    --bp-bg: #0d1117;
    --bp-bg-soft: #161b22;
    --bp-border: #232a34;
    --bp-text: #e6edf3;
    --bp-text-dim: #8b949e;
    --bp-accent: #5865F2;
    --bp-accent-hover: #4752c4;
    --bp-danger: #e74c3c;
    --bp-danger-hover: #c0392b;
    --bp-radius: 10px;
}

* { box-sizing: border-box; }

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

a { color: inherit; text-decoration: none; }

/* ---------- Landing ---------- */
.bp-landing { min-height: 100vh; display: flex; flex-direction: column; }
.bp-nav { padding: 24px 40px; }
.bp-brand { font-size: 22px; font-weight: 700; }
.bp-brand span { color: var(--bp-accent); }
.bp-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.bp-hero h1 { font-size: clamp(28px, 4vw, 44px); max-width: 800px; line-height: 1.25; margin-bottom: 16px; }
.bp-sub { max-width: 620px; color: var(--bp-text-dim); font-size: 17px; line-height: 1.6; margin-bottom: 32px; }
.bp-btn-discord {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--bp-accent); color: #fff; font-weight: 600;
    padding: 14px 28px; border-radius: 999px; font-size: 16px;
    transition: background .15s ease;
}
.bp-btn-discord:hover { background: var(--bp-accent-hover); }
.bp-features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; max-width: 1000px; margin: 40px auto 60px; padding: 0 20px;
}
.bp-feature { background: var(--bp-bg-soft); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); padding: 22px; }
.bp-feature h3 { margin: 0 0 8px; font-size: 16px; }
.bp-feature p { margin: 0; color: var(--bp-text-dim); font-size: 14px; line-height: 1.5; }
.bp-footer { text-align: center; padding: 20px; color: var(--bp-text-dim); font-size: 13px; }

.bp-alert { max-width: 480px; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.bp-alert-error { background: rgba(231,76,60,.12); color: #ff6b5e; border: 1px solid rgba(231,76,60,.3); }

/* ---------- App shell ---------- */
.bp-app { min-height: 100vh; }
.bp-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; border-bottom: 1px solid var(--bp-border);
    background: var(--bp-bg-soft);
}
.bp-admin-tag { font-size: 11px; background: var(--bp-danger); color: #fff; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.bp-user { display: flex; align-items: center; gap: 10px; }
.bp-user img { width: 28px; height: 28px; border-radius: 50%; }
.bp-pill { background: #21262d; padding: 6px 14px; border-radius: 999px; font-size: 13px; }
.bp-pill-out { background: rgba(231,76,60,.15); color: #ff6b5e; }

.bp-main { max-width: 1000px; margin: 0 auto; padding: 32px 20px 80px; }
.bp-main-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; flex-wrap: wrap; gap: 12px; }
.bp-main-head h1 { margin: 0; font-size: 26px; }
.bp-hint { color: var(--bp-text-dim); font-size: 13px; margin: 6px 0 20px; }
.bp-back { display: inline-block; color: var(--bp-text-dim); margin-bottom: 16px; font-size: 14px; }

.bp-btn-primary, .bp-btn-secondary, .bp-btn-danger {
    border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bp-btn-primary { background: var(--bp-accent); color: #fff; }
.bp-btn-primary:hover { background: var(--bp-accent-hover); }
.bp-btn-primary:disabled { background: #333c4a; color: #777; cursor: not-allowed; }
.bp-btn-secondary { background: #21262d; color: var(--bp-text); }
.bp-btn-secondary:hover { background: #2d333b; }
.bp-btn-danger { background: rgba(231,76,60,.15); color: #ff6b5e; }
.bp-btn-danger:hover { background: rgba(231,76,60,.28); }

.bp-bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.bp-bot-card {
    display: block; background: var(--bp-bg-soft); border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius); padding: 18px; transition: border-color .15s;
}
.bp-bot-card:hover { border-color: var(--bp-accent); }
.bp-bot-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.bp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.bp-bot-card-estado { font-size: 13px; color: var(--bp-text-dim); margin-bottom: 6px; }
.bp-bot-card-token, .bp-bot-card-username { font-size: 12px; color: var(--bp-text-dim); font-family: monospace; }
.bp-empty { color: var(--bp-text-dim); padding: 40px 0; grid-column: 1/-1; text-align: center; }

.bp-badge { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #10151c; }

.bp-panel-block { background: var(--bp-bg-soft); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); padding: 22px; margin-top: 20px; }
.bp-panel-block-muted { opacity: .7; }
.bp-panel-block h2 { margin: 0 0 6px; font-size: 17px; }
.bp-controls { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.bp-panel-block form label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--bp-text-dim); }
.bp-panel-block form input[type=text], .bp-panel-block form input[type=password], .bp-panel-block form textarea {
    width: 100%; background: #0d1117; border: 1px solid var(--bp-border); border-radius: 8px;
    padding: 10px 12px; color: var(--bp-text); font-size: 14px; font-family: inherit;
}
.bp-panel-block form input[type=color] { width: 60px; height: 36px; border: 1px solid var(--bp-border); border-radius: 8px; background: none; padding: 2px; }
.bp-check { display: flex !important; align-items: center; gap: 8px; }
.bp-check input { width: auto !important; }

/* ---------- Modal ---------- */
.bp-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6);
    align-items: center; justify-content: center; z-index: 50;
}
.bp-modal-overlay.bp-modal-open { display: flex; }
.bp-modal { background: var(--bp-bg-soft); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); padding: 26px; width: 420px; max-width: 92vw; }
.bp-modal h2 { margin-top: 0; }
.bp-modal form label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--bp-text-dim); }
.bp-modal form input { width: 100%; background: #0d1117; border: 1px solid var(--bp-border); border-radius: 8px; padding: 10px 12px; color: var(--bp-text); font-size: 14px; }
.bp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.bp-modal-error { color: #ff6b5e; font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---------- Admin table ---------- */
.bp-admin-user-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.bp-admin-user-head > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-admin-actions { display: flex; gap: 8px; }
.bp-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bp-admin-table th, .bp-admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bp-border); }
.bp-admin-table th { color: var(--bp-text-dim); font-weight: 500; }
.bp-admin-btn { font-size: 12px; padding: 6px 10px; margin-right: 6px; }