:root{--xb247-yellow:#fcd500;--xb247-orange:#f28c38;--xb247-gray:#f7f7f7;--xb247-dark:#111;--xb247-card:#ffffff}
html[data-theme='dark']{--xb247-dark:#eaeaea;--xb247-card:#121212;--xb247-gray:#0d0d0d}
body{background:var(--xb247-gray);color:var(--xb247-dark);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.xb247-shell{max-width:1100px;margin:0 auto;padding:12px}
.xb247-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:980px){.xb247-grid{grid-template-columns:260px 1fr}}
.xb247-card{background:var(--xb247-card);border:1px solid rgba(0,0,0,.05);border-radius:18px;padding:18px;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.xb247-nav .item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;margin-bottom:8px;font-weight:600;text-decoration:none;color:var(--xb247-dark);border:1px solid rgba(0,0,0,.06);transition:transform .15s ease}
.xb247-nav .item:hover{transform:translateX(2px)}
.xb247-nav .item.active{background:linear-gradient(90deg,var(--xb247-yellow),#fff4a6);border-color:var(--xb247-yellow)}
.xb247-btn{display:inline-block;background:var(--xb247-orange);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700;text-decoration:none;transition:transform .15s ease}
.xb247-btn:hover{transform:translateY(-1px)}
.xb247-list{display:grid;grid-template-columns:1fr;gap:12px}
.xb247-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(0,0,0,.08)}
.small{font-size:12px;color:#777}
.xb247-hero{background:linear-gradient(135deg,var(--xb247-yellow),#ffe680);border-radius:18px;padding:18px;margin-bottom:12px;display:flex;align-items:center;gap:14px}
.xb247-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.1)}
/* Bottom mobile nav */
.xb247-bottom{position:fixed;left:0;right:0;bottom:10px;margin:auto;max-width:560px;background:var(--xb247-card);border:1px solid rgba(0,0,0,.06);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.12);display:flex;justify-content:space-around;padding:10px 8px;z-index:999}
.xb247-bottom a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--xb247-dark);font-size:12px;padding:6px 10px;border-radius:10px;transition:background .2s, transform .15s}
.xb247-bottom a.active{background:linear-gradient(90deg,var(--xb247-yellow),#fff4a6)}
.xb247-toggle{margin-left:auto}
/* Alerts */
.xb247-alert{border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:12px;margin:8px 0}
.xb247-status-safe{background:#f4fff6;border-color:#ccefd7}
.xb247-status-warn{background:#fffbea;border-color:#ffe08a}
.xb247-status-crit{background:#fff5f5;border-color:#ffb3b3}