/* ============================================================ Grimlin Platform Admin - standalone stylesheet (GK-045) Deliberately self-contained: this used to reuse app/css/main.css for its variables/base classes, but that meant this page depended on the main app's stylesheet - including a @media(min-width:900px) rule that turns into a grid built for the game app's nav/hud/main shell, which once broke this page's whole layout (the single #admin-viewport div got auto-placed into a leftover 240px grid column). Now that the admin panel is its own deployment (admin.grimlin.io) with zero shared files with the customer app, there's no main.css to accidentally collide with in the first place. Keep it that way - don't reach back into app/css/main.css from here. ============================================================ */ :root { --bg: #0B0C0F; --panel: #14161A; --panel-strong: #181A1F; --border: rgba(255, 255, 255, 0.08); --text: #EAECEF; --dim: #8E959F; --hp-color: #D3655A; --mana-color: #3EA57F; --accent: #D9A23C; --accent-strong: #E4B55E; --font-ui: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-ui); } body { background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } svg.ic { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.16em; flex-shrink: 0; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); } .action-btn { flex: 1; padding: 13px; border-radius: 8px; font-weight: 600; font-size: 13.5px; letter-spacing: 0.1px; text-align: center; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; } .action-btn.primary { background: var(--accent); border-color: var(--accent); color: #1A1305; } .action-btn.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); } .action-btn.primary:disabled { background: var(--panel-strong); color: var(--dim); border-color: var(--border); cursor: not-allowed; } .action-btn.secondary { background: transparent; border-color: var(--border); color: var(--text); } .action-btn.secondary:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--dim); } .action-btn.danger { background: transparent; border-color: rgba(211, 101, 90, 0.4); color: var(--hp-color); } .action-btn.danger:hover { background: rgba(211, 101, 90, 0.1); border-color: var(--hp-color); } .admin-shell { max-width: 1080px; width: 100%; margin: 0 auto; padding: 0 20px 60px; } .admin-topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; background: rgba(11, 12, 15, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 12px 20px; margin: 0 -20px 24px; } .admin-brand { display: flex; align-items: center; gap: 10px; } .admin-brand-marks { display: flex; flex-direction: column; line-height: 1.25; } .admin-brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0.4px; color: var(--text); } .admin-brand-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .admin-whoami { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dim); } .admin-whoami-divider { width: 1px; height: 16px; background: var(--border); } .admin-nav { display: flex; align-items: center; gap: 4px; } .admin-nav-link { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--dim); border: 1px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .admin-nav-link:hover { color: var(--text); background: rgba(255,255,255,0.04); text-decoration: none; } .admin-nav-link.active { color: var(--accent); border-color: var(--border); background: rgba(217, 162, 60, 0.08); } .admin-nav-link svg.ic { width: 14px; height: 14px; } .admin-page-title { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; } .admin-page-title h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; } .admin-page-title svg.ic { color: var(--accent); width: 20px; height: 20px; } .admin-banner { border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 12.5px; border: 1px solid var(--hp-color); background: rgba(211, 101, 90, 0.08); color: #E08A81; display: flex; gap: 8px; align-items: flex-start; } .admin-banner svg.ic { flex: none; margin-top: 1px; } .admin-busy { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* ---- App layout (GK-094): left sidebar + main content, replaces the old horizontal topbar for the authenticated/staff view. The centered .admin-shell/.admin-topbar/.admin-brand classes above are still used as-is for the login and not-authorized screens, which have no sidebar. ---- */ .admin-app { display: flex; min-height: 100vh; align-items: stretch; } .admin-sidebar { flex: none; width: 220px; display: flex; flex-direction: column; background: #0D0E11; border-right: 1px solid var(--border); padding: 18px 14px; gap: 4px; } .admin-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; } .admin-sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .admin-sidebar-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--dim); cursor: pointer; transition: background 0.15s, color 0.15s; } .admin-sidebar-link:hover { color: var(--text); background: rgba(255,255,255,0.03); text-decoration: none; } .admin-sidebar-link.active { color: var(--accent-strong); background: rgba(217, 162, 60, 0.09); font-weight: 600; } .admin-sidebar-link svg.ic { width: 15px; height: 15px; flex: none; } .admin-sidebar-foot { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; font-size: 11.5px; color: var(--dim); } .admin-sidebar-foot .who-email { display: block; color: var(--text); font-weight: 600; margin-bottom: 6px; word-break: break-all; } .admin-main { flex: 1; min-width: 0; padding: 22px 28px 60px; } .admin-main-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .admin-search-trigger { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--dim); font-size: 12.5px; cursor: pointer; min-width: 220px; transition: border-color 0.15s; } .admin-search-trigger:hover { border-color: var(--dim); } .admin-search-trigger .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } /* ---- Command palette (Ctrl+K) ---- */ .admin-palette-backdrop { position: fixed; inset: 0; background: rgba(5,5,7,0.6); backdrop-filter: blur(2px); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .admin-palette { width: 90%; max-width: 560px; background: var(--panel); border: 1px solid var(--border-strong, var(--border)); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); overflow: hidden; } .admin-palette-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .admin-palette-input-row svg.ic { color: var(--dim); flex: none; } .admin-palette-input { flex: 1; background: none; border: none; color: var(--text); font-size: 14px; outline: none; } .admin-palette-results { max-height: 360px; overflow-y: auto; padding: 8px; } .admin-palette-section-label { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dim); font-weight: 600; padding: 8px 10px 4px; } .admin-palette-result { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; } .admin-palette-result:hover, .admin-palette-result.selected { background: rgba(217, 162, 60, 0.09); } .admin-palette-result svg.ic { color: var(--dim); flex: none; width: 14px; height: 14px; } .admin-palette-result .r-sub { color: var(--dim); font-size: 11.5px; margin-left: auto; } .admin-palette-empty { padding: 20px; text-align: center; color: var(--dim); font-size: 12.5px; } /* ---- Filter bar ---- */ .admin-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .admin-filter-bar select.admin-input { width: auto; padding: 7px 10px; font-size: 12.5px; } .admin-filter-clear { font-size: 12px; color: var(--dim); cursor: pointer; } .admin-filter-clear:hover { color: var(--text); } /* Account list */ .admin-table-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .admin-table-scroll { overflow-x: auto; } table.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.admin-table th { text-align: left; padding: 12px 16px; color: var(--dim); font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } table.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } table.admin-table tr:last-child td { border-bottom: none; } table.admin-table tr.admin-row:hover td { background: rgba(255,255,255,0.025); cursor: pointer; } .admin-cell-identity { display: flex; align-items: center; gap: 10px; } .admin-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 800; font-size: 13px; color: #1A1305; background: var(--accent); } .admin-cell-name { display: flex; flex-direction: column; gap: 1px; } .admin-cell-name .n { font-weight: 600; color: var(--text); } .admin-cell-name .e { font-size: 11.5px; color: var(--dim); } .admin-mono { font-family: var(--font-mono); font-size: 12px; color: var(--dim); } .admin-muted { color: var(--dim); } .admin-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; } .admin-pill.owner { color: var(--accent); background: rgba(217, 162, 60, 0.12); border: 1px solid rgba(217, 162, 60, 0.3); } .admin-pill.support { color: var(--dim); background: rgba(255,255,255,0.05); border: 1px solid var(--border); } .admin-pill.suspended { color: var(--hp-color); background: rgba(211, 101, 90, 0.12); border: 1px solid rgba(211, 101, 90, 0.3); } .admin-pill.active { color: var(--mana-color); background: rgba(62, 165, 127, 0.12); border: 1px solid rgba(62, 165, 127, 0.3); } .admin-pill.org { color: var(--dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); text-transform: none; font-weight: 600; } /* Cards */ .admin-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 18px; } .admin-card h2 { margin-bottom: 4px; font-size: 15px; display: flex; align-items: center; gap: 8px; } .admin-card h2 svg.ic { color: var(--accent); } .admin-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); margin-bottom: 16px; cursor: pointer; } .admin-back:hover { color: var(--text); text-decoration: none; } .admin-back svg.ic { width: 13px; height: 13px; } .admin-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .admin-detail-avatar { width: 48px; height: 48px; font-size: 18px; } .admin-detail-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .admin-detail-email { font-size: 12.5px; color: var(--dim); margin-top: 2px; } .admin-metrics { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); margin-bottom: 18px; } .admin-metric { background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; } .admin-metric-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text); } .admin-metric-label { font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--dim); margin-top: 3px; font-weight: 600; } .admin-field-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 12.5px; border-bottom: 1px dashed rgba(255,255,255,0.06); } .admin-field-row:last-child { border-bottom: none; } .admin-field-row .k { color: var(--dim); flex: none; } .admin-field-row .v { text-align: right; } .admin-action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .admin-action-row .action-btn { flex: none; padding: 10px 16px; } .admin-run-row, .admin-note { border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; margin-bottom: 8px; font-size: 12.5px; background: rgba(255,255,255,0.015); } .admin-run-row { display: flex; justify-content: space-between; align-items: center; } .admin-note .meta { color: var(--dim); font-size: 11px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .admin-empty { color: var(--dim); font-size: 12.5px; padding: 10px 2px; } textarea.admin-input, input.admin-input, select.admin-input { width: 100%; background: var(--panel-strong); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 10px 12px; font-family: inherit; font-size: 13px; box-sizing: border-box; } textarea.admin-input:focus, input.admin-input:focus, select.admin-input:focus { outline: none; border-color: var(--accent); } .admin-input-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; } .admin-login-card { max-width: 380px; margin: 60px auto 0; }