/* ============================================================ ADMIN PROTO — PbpEcho dense pro-tool skin Scoped to [data-admin-view] on . Targets the actual admin.js DOM classes. ============================================================ */ [data-admin-view] { --bone: #D9CBB2; --bone-dim: #8F8570; --bone-ink: #261F13; --hair: #1E2228; --hair-hi: #2B3038; --hair-bone: rgba(217,203,178,0.22); --adm-red: #E4564B; --adm-00: #0A0B0D; --adm-05: #0E1013; --adm-10: #121418; --adm-15: #171A1F; --adm-20: #1C2027; --adm-40: #3D434D; --adm-50: #515864; --adm-60: #6B7380; --adm-70: #8A92A0; --adm-80: #A8AEB8; --adm-90: #C8CCD2; --adm-95: #E0E3E7; --font-adm-mono: 'IBM Plex Mono', monospace; --font-adm-disp: 'Cinzel', serif; } /* ---- Base ---- */ [data-admin-view] #main { background: var(--adm-00); color: var(--adm-95); font-size: 13px; } [data-admin-view] .page { padding: 0; max-width: none; background: var(--adm-00); } /* ---- Page header ---- */ [data-admin-view] .page-header { height: 40px; padding: 0 20px; border-bottom: 1px solid var(--hair); background: var(--adm-00); margin-bottom: 0; display: flex; align-items: center; } [data-admin-view] .page-title { font-family: var(--font-adm-disp); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); } [data-admin-view] .page-subtitle { font-family: var(--font-adm-mono); font-size: 10px; color: var(--adm-60); letter-spacing: 0.06em; margin-top: 0; } /* ---- Stat cards → KPI strip ---- */ [data-admin-view] .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin-bottom: 0 !important; border-bottom: 1px solid var(--hair); } [data-admin-view] .stat-card { padding: 16px 20px; border-right: 1px solid var(--hair); border-radius: 0; background: var(--adm-00); box-shadow: none; display: flex; flex-direction: column; gap: 0; } [data-admin-view] .stat-card:last-child { border-right: none; } [data-admin-view] .stat-card > div:first-child { /* hide emoji icon */ display: none; } [data-admin-view] .stat-card-value { font-family: var(--font-adm-disp); font-size: 28px; letter-spacing: 0.02em; color: var(--adm-95); line-height: 1; margin-bottom: 6px; } [data-admin-view] .stat-card-label { font-family: var(--font-adm-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--adm-60); } /* ---- Tabs ---- */ [data-admin-view] .tabs { display: flex; border-bottom: 1px solid var(--hair-hi); background: var(--adm-05); padding: 0; gap: 0; } [data-admin-view] .tab-item { height: 32px; padding: 0 16px; font-family: var(--font-adm-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--adm-60); border-bottom: 2px solid transparent; border-radius: 0; background: transparent; transition: color 90ms ease, border-color 90ms ease; white-space: nowrap; } [data-admin-view] .tab-item:hover { color: var(--adm-90); } [data-admin-view] .tab-item.active { color: var(--bone); border-bottom-color: var(--bone); } /* ---- Tab panels ---- */ [data-admin-view] .tab-panel { padding: 0; } /* ---- Feed posts ---- */ [data-admin-view] .feed-post { display: grid !important; grid-template-columns: 110px 1fr !important; border-bottom: 1px solid var(--hair) !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; background: var(--adm-00) !important; box-shadow: none !important; cursor: pointer; transition: background 90ms ease; padding: 0 !important; } [data-admin-view] .feed-post:hover { background: var(--adm-10) !important; } /* Restyle the feed post interior via child divs */ [data-admin-view] .feed-post > div:first-child { padding: 10px 12px; border-right: 1px solid var(--hair); background: var(--adm-05); font-family: var(--font-adm-mono); font-size: 10px; color: var(--adm-60); } [data-admin-view] .feed-post > div:last-child { padding: 10px 14px; font-size: 12px; line-height: 1.6; color: var(--adm-80); } /* ---- Activity log ---- */ [data-admin-view] .activity-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 7px 16px; border-bottom: 1px solid var(--hair); } [data-admin-view] .activity-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bone); opacity: 0.45; justify-self: center; } [data-admin-view] .activity-text { color: var(--adm-80); font-size: 12px; } [data-admin-view] .activity-user { color: var(--bone); font-family: var(--font-adm-disp); letter-spacing: 0.04em; font-size: 12px; } [data-admin-view] .activity-time { font-family: var(--font-adm-mono); font-size: 10px; color: var(--adm-50); white-space: nowrap; } /* ---- Buttons ---- */ [data-admin-view] .btn { height: 26px; padding: 0 10px; border: 1px solid var(--hair-hi); border-radius: 3px; font-size: 11px; font-weight: 500; color: var(--adm-80); background: var(--adm-10); letter-spacing: 0; text-transform: none; transition: background 90ms ease, color 90ms ease, border-color 90ms ease; } [data-admin-view] .btn:hover { background: var(--adm-20); color: var(--adm-95); border-color: var(--adm-40); } [data-admin-view] .btn-primary { background: var(--bone); color: var(--bone-ink); border-color: var(--bone); } [data-admin-view] .btn-primary:hover { background: #EFE2C7; border-color: #EFE2C7; color: var(--bone-ink); } [data-admin-view] .btn-secondary { background: var(--adm-10); color: var(--adm-80); border-color: var(--hair-hi); } [data-admin-view] .btn-ghost { background: transparent; border-color: transparent; color: var(--adm-60); } [data-admin-view] .btn-ghost:hover { background: var(--adm-15); border-color: var(--hair-hi); color: var(--adm-90); } [data-admin-view] .btn-sm { height: 22px; padding: 0 8px; font-size: 11px; } /* ---- Inputs ---- */ [data-admin-view] input[type="text"], [data-admin-view] input[type="email"], [data-admin-view] input[type="search"], [data-admin-view] input[type="password"], [data-admin-view] select, [data-admin-view] textarea { background: var(--adm-10); border: 1px solid var(--hair); border-radius: 3px; color: var(--adm-90); font-size: 12px; padding: 4px 8px; box-shadow: none; transition: border-color 90ms ease; } [data-admin-view] input:focus, [data-admin-view] select:focus, [data-admin-view] textarea:focus { border-color: var(--bone); outline: none; box-shadow: none; } [data-admin-view] .search-input { height: 28px; padding: 0 10px; background: var(--adm-10); border: 1px solid var(--hair); border-radius: 3px; font-size: 12px; color: var(--adm-90); } /* ---- Badges ---- */ [data-admin-view] .badge { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border: 1px solid var(--hair-hi); border-radius: 2px; font-family: var(--font-adm-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--adm-10); color: var(--adm-70); } [data-admin-view] .badge-admin { color: var(--bone); border-color: var(--hair-bone); } [data-admin-view] .badge-dm { color: var(--adm-80); } [data-admin-view] .badge-player { color: var(--adm-60); } /* ---- User/table rows ---- */ [data-admin-view] table { width: 100%; border-collapse: collapse; font-size: 12px; } [data-admin-view] th { font-family: var(--font-adm-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--adm-60); padding: 6px 12px; border-bottom: 1px solid var(--hair-hi); background: var(--adm-05); font-weight: 400; text-align: left; } [data-admin-view] td { padding: 7px 12px; border-bottom: 1px solid var(--hair); color: var(--adm-80); vertical-align: middle; } [data-admin-view] tr:hover td { background: var(--adm-10); } /* ---- Cards (settings, media panels) ---- */ [data-admin-view] [style*="background:var(--bg-card)"], [data-admin-view] [style*="background: var(--bg-card)"] { background: var(--adm-10) !important; border-color: var(--hair-hi) !important; border-radius: 2px !important; } /* ---- Alerts ---- */ [data-admin-view] .alert-error { background: rgba(228,86,75,0.08); border: 1px solid rgba(228,86,75,0.25); color: var(--adm-red); border-radius: 2px; font-size: 12px; } /* ---- Spinner ---- */ [data-admin-view] .spinner { border-color: var(--hair-hi); border-top-color: var(--bone); } /* ---- Scrollbars ---- */ [data-admin-view] ::-webkit-scrollbar { width: 8px; } [data-admin-view] ::-webkit-scrollbar-track { background: transparent; } [data-admin-view] ::-webkit-scrollbar-thumb { background: var(--hair-hi); border: 2px solid var(--adm-00); border-radius: 10px; } [data-admin-view] ::-webkit-scrollbar-thumb:hover { background: var(--adm-40); }