/* Shupa Helper Hub — operator console theme. Dense, professional monitoring aesthetic. Inter + tabular numerics. Supports dark (default) and light themes via [data-theme] on . */ :root, :root[data-theme="dark"] { --bg: #0a0b0f; --bg-elev: #111219; --panel: #14161f; --panel-2: #181b26; --border: #232634; --border-soft: #1c1f2b; --border-strong: #2e3344; --text: #e6e8ef; --text-dim: #9aa3b2; --text-mute: #646b7d; --accent: #6366f1; --accent-2: #8b5cf6; --accent-soft: rgba(99, 102, 241, 0.14); --accent-hover: #5457e0; --green: #34d399; --green-soft: rgba(52, 211, 153, 0.14); --amber: #fbbf24; --amber-soft: rgba(251, 191, 36, 0.14); --red: #f87171; --red-soft: rgba(248, 113, 113, 0.14); --blue: #60a5fa; --blue-soft: rgba(96, 165, 250, 0.14); --cyan: #22d3ee; --pink: #f472b6; --scrollbar: #262a38; --scrollbar-hover: #303548; --topbar-bg: rgba(10, 11, 15, 0.85); --code-bg: #0d0e14; --skeleton-mid: #1e2230; --on-accent: #fff; --on-accent-soft: #fff; --overlay-bg: rgba(0, 0, 0, 0.55); --sidebar-w: 248px; --topbar-h: 56px; --radius: 14px; --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', monospace; } :root[data-theme="light"] { --bg: #f5f6f9; --bg-elev: #ffffff; --panel: #ffffff; --panel-2: #f1f3f7; --border: #e3e6ee; --border-soft: #edeff4; --border-strong: #cdd3e0; --text: #161922; --text-dim: #4b5566; --text-mute: #8a92a3; --accent: #5b5ef0; --accent-2: #7c3aed; --accent-soft: rgba(91, 94, 240, 0.12); --accent-hover: #4f51e0; --green: #059669; --green-soft: rgba(5, 150, 105, 0.12); --amber: #d97706; --amber-soft: rgba(217, 119, 6, 0.13); --red: #dc2626; --red-soft: rgba(220, 38, 38, 0.11); --blue: #2563eb; --blue-soft: rgba(37, 99, 235, 0.11); --cyan: #0891b2; --pink: #db2777; --scrollbar: #c7cdda; --scrollbar-hover: #b3bbcc; --topbar-bg: rgba(255, 255, 255, 0.85); --code-bg: #f3f5f9; --skeleton-mid: #e6e9f0; --on-accent: #fff; --on-accent-soft: var(--accent); --overlay-bg: rgba(17, 20, 28, 0.32); --shadow: 0 12px 40px rgba(20, 24, 40, 0.12); } html { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } /* theme toggle — shows the icon for the theme you'd switch TO */ .theme-toggle .moon { display: none; } .theme-toggle .sun { display: block; } :root[data-theme="light"] .theme-toggle .moon { display: block; } :root[data-theme="light"] .theme-toggle .sun { display: none; } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } .tnum { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); overflow-wrap: anywhere; word-break: break-word; } /* ── Layout ──────────────────────────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-elev); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--border-soft); } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: #fff; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4); } .brand-text b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .brand-text span { display: block; font-size: 11px; color: var(--text-mute); } .nav { padding: 12px 10px; flex: 1; } .nav-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-mute); padding: 14px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--text-dim); font-weight: 500; cursor: pointer; transition: all 0.13s ease; margin-bottom: 2px; } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } .nav-item:hover { background: var(--panel); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--on-accent-soft); box-shadow: inset 2px 0 0 var(--accent); } .nav-item.active svg { color: var(--accent); } .sidebar-foot { padding: 12px 16px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--text-mute); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 12px; padding: 0 22px; padding-top: env(safe-area-inset-top, 0); position: sticky; top: 0; z-index: 50; } .topbar h1 { font-size: 16px; font-weight: 650; margin: 0; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-spacer { flex: 1; min-width: 4px; } .icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim); transition: all 0.13s; flex-shrink: 0; padding: 0; font-family: inherit; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } .icon-btn svg { width: 17px; height: 17px; } .icon-btn.spinning svg { animation: spin 0.8s linear infinite; } /* Hamburger / nav close — desktop hides toggle; close only used in drawer */ .nav-toggle { display: none; } .nav-close { display: none; margin-left: auto; } .nav-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: var(--overlay-bg); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.2s; } body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; } /* admin unlock chrome */ .admin-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-family: inherit; white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; } .admin-btn:hover { color: var(--text); border-color: var(--border-strong); } .admin-btn.admin-active { color: var(--amber); background: var(--amber-soft); border-color: transparent; cursor: default; } .admin-label-short, .admin-lock-short { display: none; } .admin-lock { padding: 6px 10px; border-radius: 9px; font-size: 12px; font-weight: 550; background: var(--panel); border: 1px solid var(--border); color: var(--text-mute); cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; } .admin-lock:hover { color: var(--text); border-color: var(--border-strong); } /* Locked write controls stay visible but muted */ body.admin-off [data-admin-action], [data-admin-action]:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .content { padding: 24px 28px 60px; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); max-width: 1400px; width: 100%; margin: 0 auto; min-width: 0; } /* ── Cards / panels ──────────────────────────────────────────────────── */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; } .panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); min-width: 0; } .panel-head h2 { font-size: 14px; font-weight: 650; margin: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-head .sub { font-size: 12px; color: var(--text-mute); min-width: 0; flex: 0 1 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-body { padding: 16px 18px; min-width: 0; } .panel-body--flush { padding: 0; } .grid { display: grid; gap: 16px; } .grid > * { min-width: 0; } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; } } /* KPI tiles (standalone — used on analytics/economy) */ .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; } .kpi::after { content: ''; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--accent-soft); filter: blur(8px); opacity: 0.5; } .kpi .label { font-size: 12px; color: var(--text-mute); font-weight: 600; display: flex; align-items: center; gap: 7px; } .kpi .label svg { width: 15px; height: 15px; } .kpi .value { font-size: 30px; font-weight: 750; margin-top: 8px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi .meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; } /* Combined KPI board — one panel, dense multi-stat grid (gap = hairline dividers) */ .kpi-board { --kpi-cols: 4; display: grid; grid-template-columns: repeat(var(--kpi-cols), minmax(0, 1fr)); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; } .kpi-board--2 { --kpi-cols: 2; } .kpi-board--3 { --kpi-cols: 3; } .kpi-board--4 { --kpi-cols: 4; } .kpi-cell { position: relative; padding: 16px 18px; min-width: 0; background: var(--panel); } .kpi-cell .label { font-size: 12px; color: var(--text-mute); font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; } .kpi-cell .label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .kpi-cell .label svg { width: 15px; height: 15px; flex-shrink: 0; } .kpi-cell .value { font-size: 26px; font-weight: 750; margin-top: 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kpi-cell .meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; /* Prefer wrap over clipping on dense boards */ white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ── Tables ──────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; } /* Faint edge fade hints horizontal scroll on narrow viewports */ .table-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(to right, transparent, var(--panel)); opacity: 0; transition: opacity 0.15s; } @media (max-width: 899px) { .table-wrap::after { opacity: 0.85; } } table.data { width: 100%; border-collapse: collapse; min-width: 0; } table.data th { text-align: left; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); padding: 11px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); white-space: nowrap; z-index: 2; } table.data th[data-sort]:hover { color: var(--text); } table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } table.data tr { transition: background 0.1s; } table.data tbody tr:hover { background: var(--panel-2); cursor: pointer; } table.data tbody tr.is-selected, table.data tbody tr.is-selected td:first-child { background: var(--accent-soft); } table.data tr:last-child td { border-bottom: none; } /* Sticky first column — identity / thumb stays visible while scrolling */ table.data th:first-child, table.data td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 4px 0 10px -6px rgba(0, 0, 0, 0.35); } table.data th:first-child { z-index: 3; } table.data tbody tr:hover td:first-child { background: var(--panel-2); } td .muted { color: var(--text-mute); } .page-size-short { display: none; } /* ── Bits ────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; } .badge.green { color: var(--green); background: var(--green-soft); border-color: transparent; } .badge.amber { color: var(--amber); background: var(--amber-soft); border-color: transparent; } .badge.red { color: var(--red); background: var(--red-soft); border-color: transparent; } .badge.blue { color: var(--blue); background: var(--blue-soft); border-color: transparent; } .badge.purple { color: var(--accent-2); background: var(--accent-soft); border-color: transparent; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--panel-2); border: 1px solid var(--border); flex-shrink: 0; } .avatar.lg { width: 64px; height: 64px; } .avatar.fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent-2); font-size: 13px; } .user-cell { display: flex; align-items: center; gap: 11px; min-width: 0; } .user-cell .uc-text { min-width: 0; overflow: hidden; } .user-cell .uc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-cell .uc-sub { font-size: 12px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; } .verified-tick { color: var(--blue); } /* thumbnails */ .thumb { width: 52px; height: 70px; border-radius: 8px; object-fit: cover; background: var(--panel-2); border: 1px solid var(--border); flex-shrink: 0; } .thumb.sm { width: 40px; height: 54px; } /* ── Toolbar (search/filter) ─────────────────────────────────────────── */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; min-width: 0; max-width: 100%; } .toolbar .seg { min-width: 0; max-width: 100%; } .search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; } .search:focus-within { border-color: var(--accent); } .search svg { width: 16px; height: 16px; color: var(--text-mute); } .search input { background: none; border: none; outline: none; color: var(--text); width: 100%; font-size: 13.5px; } .select, .btn, .input { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 9px 13px; font-size: 13px; cursor: pointer; font-family: inherit; } .drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .coin-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; } .coin-form .input { min-height: 40px; } .coin-form #coin-amount { width: 110px; } .coin-form #coin-reason { flex: 1; min-width: 160px; } .video-player { border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 16px; aspect-ratio: 9 / 16; max-height: min(70vh, 420px); display: flex; align-items: center; justify-content: center; } .video-player video { width: 100%; height: 100%; object-fit: contain; } .btn-block { display: inline-flex; } .select:hover, .btn:hover { border-color: var(--border-strong); } .input { cursor: text; } .input:focus { outline: none; border-color: var(--accent); } .input::placeholder { color: var(--text-mute); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .btn.primary:hover { background: var(--accent-hover); } .btn.danger { color: var(--red); border-color: var(--red-soft); } .btn.danger:hover { background: var(--red-soft); } .btn.sm { padding: 6px 10px; font-size: 12px; } .seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 3px; max-width: 100%; min-width: 0; } .seg button { background: none; border: none; color: var(--text-dim); padding: 6px 13px; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-family: inherit; font-weight: 550; flex-shrink: 0; white-space: nowrap; } .seg button.active { background: var(--accent-soft); color: var(--on-accent-soft); } .toolbar-badges { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; } /* ── Pagination ──────────────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px 0; flex-wrap: wrap; } .pagination .info { font-size: 12.5px; color: var(--text-mute); } .pagination .pages { display: flex; gap: 5px; align-items: center; } .page-btn { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-family: inherit; } .page-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); } .page-btn.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .pagination .pager-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pagination .page-size { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-mute); white-space: nowrap; } .select.sm { padding: 6px 9px; font-size: 12.5px; border-radius: 8px; } /* ── Loading / states ────────────────────────────────────────────────── */ .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } .spinner.sm { width: 18px; height: 18px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-state, .empty-state, .error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 20px; color: var(--text-mute); text-align: center; } .empty-state svg, .error-state svg { width: 34px; height: 34px; opacity: 0.5; } .error-state { color: var(--red); } .skeleton { background: linear-gradient(90deg, var(--panel-2) 25%, var(--skeleton-mid) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; } @keyframes shimmer { to { background-position: -200% 0; } } /* ── Drawer / modal ──────────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .overlay.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 560px; max-width: 94vw; background: var(--bg-elev); border-left: 1px solid var(--border); z-index: 201; transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: var(--shadow); } .drawer.open { transform: translateX(0); } .drawer.drawer--left { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--border); transform: translateX(-100%); } .drawer.drawer--left.open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); } .drawer-head h3 { margin: 0; font-size: 16px; font-weight: 650; } .drawer-body { padding: 22px; overflow-y: auto; flex: 1; } .drawer-close { margin-left: auto; cursor: pointer; color: var(--text-mute); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .drawer-close:hover { background: var(--panel); color: var(--text); } /* Confirm modal (centered; separate from side drawer) */ .confirm-overlay { z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; } .confirm-modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; width: min(420px, 100%); box-shadow: var(--shadow); transform: translateY(8px); transition: transform 0.2s ease; } .confirm-overlay.open .confirm-modal { transform: translateY(0); } .confirm-modal h3 { margin: 0 0 8px; font-size: 16px; font-weight: 650; } .confirm-modal p { margin: 0 0 18px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; } .confirm-actions { display: flex; justify-content: flex-end; gap: 8px; } .confirm-actions .btn { text-decoration: none; display: inline-flex; align-items: center; } .peek-modal { position: relative; width: min(400px, 100%); padding: 20px 22px 18px; } .peek-modal h3 { padding-right: 28px; } .peek-close { position: absolute; top: 12px; right: 12px; margin: 0; } .peek-body { margin: 12px 0 18px; } .peek-user { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .peek-user .uc-name { font-size: 16px; } .peek-user .uc-sub { font-size: 13px; color: var(--text-mute); } .peek-video { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; } .peek-video .thumb { width: 64px; height: 86px; } .peek-video .peek-title { font-weight: 650; font-size: 15px; line-height: 1.3; } .peek-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--text-mute); } .kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 13px; } .kv dt { color: var(--text-mute); } .kv dd { margin: 0; word-break: break-word; } .gift-detail-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .gift-detail-emoji { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); font-size: 30px; } .gift-picker-thumbnail { width: 100%; min-height: 230px; display: grid; place-items: center; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(circle at 50% 45%, var(--panel-2), var(--panel)); } .gift-picker-thumbnail img { width: min(220px, 70%); height: 220px; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .5)); } .gift-picker-thumbnail--fallback { font-size: 52px; } .gift-detail-hero h4 { margin: 0 0 4px; font-size: 19px; } .gift-detail-price { color: var(--amber); font-weight: 650; font-variant-numeric: tabular-nums; } .gift-preview { position: relative; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 14px; aspect-ratio: 16 / 10; background: #050507; display: flex; align-items: center; justify-content: center; } .gift-preview video { width: 100%; height: 100%; object-fit: contain; } .gift-preview-empty { padding: 28px; text-align: center; color: var(--text-mute); font-size: 13px; line-height: 1.5; } .gift-detail-section { margin: 18px 0 10px; color: var(--text-mute); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .gift-catalog-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .stat-row { display: flex; gap: 22px; margin: 16px 0; } .stat-row .s b { display: block; font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; } .stat-row .s span { font-size: 11.5px; color: var(--text-mute); } /* ── Toast ───────────────────────────────────────────────────────────── */ .toasts { position: fixed; bottom: 22px; right: 22px; z-index: 400; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 16px; min-width: 240px; box-shadow: var(--shadow); font-size: 13px; animation: slideIn 0.2s ease; } .toast.ok { border-left-color: var(--green); } .toast.err { border-left-color: var(--red); } @keyframes slideIn { from { transform: translateX(20px); opacity: 0; } } /* ── Misc charts ─────────────────────────────────────────────────────── */ .chart-box { position: relative; height: 260px; } .chart-box.sm { height: 180px; } .bar-list { display: flex; flex-direction: column; gap: 11px; min-width: 0; width: 100%; } .bar-row { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; min-width: 0; width: 100%; color: inherit; text-decoration: none; cursor: pointer; border: 0; background: none; font-family: inherit; text-align: left; border-radius: 10px; padding: 6px 8px; margin: 0 -8px; } .bar-row:hover { background: var(--panel-2); } .bar-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .bar-track { height: 8px; background: var(--panel-2); border-radius: 8px; overflow: hidden; min-width: 0; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 8px; } .bar-val { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px; margin: 0 6px 8px 0; } .tag-chip b { color: var(--accent-2); } .section-title { font-size: 13px; font-weight: 650; color: var(--text-dim); margin: 6px 0 12px; } .code-block { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); line-height: 1.6; } .mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .media-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.13s; } .media-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .media-card .thumbarea { height: 130px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .media-card .thumbarea img, .media-card .thumbarea video { width: 100%; height: 100%; object-fit: cover; } .media-card .meta { padding: 9px 11px; } .media-card .meta .nm { font-size: 12px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .media-card .meta .sz { font-size: 11px; color: var(--text-mute); } .crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; } .crumbs a { color: var(--accent); cursor: pointer; } .crumbs span { color: var(--text-mute); } .folder-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); cursor: pointer; margin: 0 8px 8px 0; } .folder-pill:hover { border-color: var(--border-strong); } .folder-pill svg { width: 16px; height: 16px; color: var(--amber); } /* ── Live monitoring (AI content moderation) ─────────────────────────── */ /* Wall of everyone currently on air, one card per publisher, showing the frame the classifier last looked at. Cards are portrait (9:16) because that is what a phone camera publishes. */ .monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .monitor-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-width: 0; transition: border-color 0.13s; } .monitor-card:hover { border-color: var(--border-strong); } .monitor-card.flagged { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-soft); } .monitor-card.warned { border-color: var(--amber); } .monitor-card .frame { position: relative; aspect-ratio: 9 / 16; max-height: 300px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; } .monitor-card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .monitor-card .frame .no-frame { font-size: 11.5px; color: var(--text-mute); text-align: center; padding: 0 10px; } .monitor-card .frame .corner { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap; } .monitor-card .frame .age { position: absolute; bottom: 8px; right: 8px; font-size: 10.5px; font-variant-numeric: tabular-nums; background: var(--overlay-bg); color: #fff; border-radius: 20px; padding: 2px 7px; } .monitor-card .body { padding: 10px 11px 11px; min-width: 0; } .monitor-card .who { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monitor-card .sub { font-size: 11px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monitor-card .verdict-line { font-size: 11.5px; margin-top: 7px; color: var(--text-dim); line-height: 1.4; } .monitor-card .counters { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; } .monitor-card .card-actions { display: flex; gap: 6px; margin-top: 10px; } .monitor-card .card-actions .btn { flex: 1; justify-content: center; text-align: center; } /* Settings form — label above control, wraps into as many columns as fit. */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field label { font-size: 11.5px; font-weight: 600; color: var(--text-mute); } .field .hint { font-size: 11px; color: var(--text-mute); line-height: 1.35; } .field .input, .field .select { width: 100%; } /* A setting that is shown but not editable. Deliberately not a disabled input: a greyed-out box still reads as "something you could switch on", while text under a rule reads as a fact. */ .field .fixed { font-size: 13.5px; font-weight: 600; color: var(--text); padding: 8px 0 9px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .check-row { display: flex; flex-wrap: wrap; gap: 8px 18px; } .check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; color: var(--text-dim); } .check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .settings-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .settings-foot .spacer { flex: 1 1 auto; } /* Donation-tier editor — labeled inputs so every value stays readable. */ .tier-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .tier-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; } .tier-order { font-size: 13px; font-weight: 700; color: var(--text-mute); padding-top: 28px; text-align: center; font-variant-numeric: tabular-nums; } .tier-fields { display: grid; grid-template-columns: minmax(160px, 1.5fr) minmax(120px, 0.8fr) minmax(150px, 1fr) minmax(140px, 0.9fr); gap: 10px 12px; min-width: 0; } .tier-color { display: flex; gap: 8px; align-items: center; min-width: 0; } .tier-color input[type="color"] { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; flex-shrink: 0; } .tier-color .input { flex: 1; min-width: 0; font-family: var(--mono); } .tier-actions { display: flex; gap: 6px; padding-top: 24px; flex-shrink: 0; } @media (max-width: 820px) { .tier-row { grid-template-columns: 28px minmax(0, 1fr); } .tier-actions { grid-column: 2; padding-top: 0; } .tier-fields { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .tier-fields { grid-template-columns: 1fr; } .tier-order { padding-top: 10px; } } /* Review queue / flag feed rows with an evidence thumbnail. */ .evidence-thumb { width: 46px; height: 62px; border-radius: 8px; object-fit: cover; cursor: zoom-in; background: var(--panel-2); border: 1px solid var(--border); display: block; } .evidence-full { max-width: 100%; border-radius: 12px; display: block; margin: 0 auto; } .notice { display: flex; gap: 10px; align-items: flex-start; background: var(--amber-soft); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; } .notice.red { background: var(--red-soft); } .notice.blue { background: var(--blue-soft); } .notice svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } /* ── Mobile shell (≤899px) ─────────────────────────────────────────── */ @media (max-width: 899px) { /* Scroll lock while nav drawer is open */ body.nav-open { position: fixed; width: 100%; overflow: hidden; } .nav-toggle { display: flex; } .nav-close { display: flex; } .nav-overlay { display: block; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--sidebar-w), 86vw); height: 100%; height: 100dvh; z-index: 100; transform: translateX(-105%); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); border-right: 1px solid var(--border); box-shadow: var(--shadow); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); } body.nav-open .sidebar { transform: translateX(0); } .brand { padding-top: 14px; padding-right: 12px; } .nav-item { min-height: 44px; padding: 11px 12px; } .topbar { height: auto; min-height: var(--topbar-h); padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); gap: 8px; } .topbar h1 { font-size: 15px; } .icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 11px; } .admin-label-full, .admin-lock-full { display: none; } .admin-label-short, .admin-lock-short { display: inline; } .admin-btn, .admin-lock { min-height: 44px; padding: 8px 12px; font-size: 12.5px; } .content { padding: 16px; padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); } /* Toolbars / filters */ .toolbar { gap: 8px; } .toolbar .search { flex: 1 1 100%; min-width: 0; } .toolbar .select { width: 100%; min-height: 44px; } .toolbar .seg, .toolbar > .seg { flex: 1 1 100%; width: 100%; max-width: 100%; } .toolbar-badges { flex: 1 1 100%; } .search { min-height: 44px; padding: 10px 13px; } .search input { font-size: 16px; } /* avoid iOS zoom */ .select, .btn, .input { min-height: 44px; font-size: 16px; } .btn.sm { min-height: 44px; padding: 10px 14px; font-size: 13.5px; } .input { font-size: 16px; } /* Segmented controls: scroll, don't wrap-clip */ .seg { display: flex; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: thin; overscroll-behavior-x: contain; } .seg::-webkit-scrollbar { height: 4px; } .seg button { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; white-space: nowrap; } /* Pagination */ .page-size-full { display: none; } .page-size-short { display: inline; } .page-btn { min-width: 40px; height: 40px; min-height: 40px; } /* Detail drawer → full-height sheet */ .drawer { width: 100%; max-width: none; left: 0; right: 0; height: 100%; height: 100dvh; border-left: none; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .drawer-head { padding: 14px 16px; } .drawer-body { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .drawer-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .drawer-actions .btn, .drawer-actions .btn.sm, .btn-block { display: flex; width: 100%; justify-content: center; } .coin-form { flex-direction: column; align-items: stretch; } .coin-form .input, .coin-form .btn, .coin-form #coin-amount, .coin-form #coin-reason { width: 100%; min-width: 0; } /* Confirm modal: stacked full-width actions */ .confirm-actions { flex-direction: column-reverse; align-items: stretch; } .confirm-actions .btn { width: 100%; justify-content: center; min-height: 44px; } /* Toasts: bottom inset full width */ .toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .toast { min-width: 0; width: 100%; } /* KPIs / charts / lists */ .kpi-board { --kpi-cols: 2; } /* Keep 3-up boards dense on phone (values are short; metas wrap) */ .kpi-board--3 { --kpi-cols: 3; } .kpi-cell { padding: 10px 12px; } .kpi-cell .value { font-size: 18px; margin-top: 4px; } .kpi-cell .label { font-size: 11px; gap: 5px; } .kpi-cell .label svg { width: 13px; height: 13px; } .kpi-cell .meta { font-size: 10.5px; } /* Panel heads: stack title + sub on very narrow */ .panel-head { flex-wrap: wrap; gap: 4px 10px; } .panel-head .sub { max-width: 100%; flex: 1 1 100%; } .chart-box { height: 200px; } .chart-box.sm { height: 150px; } .bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "user val" "bar bar"; gap: 6px 10px; font-size: 12px; } .bar-row .user-cell { grid-area: user; } .bar-row .bar-val { grid-area: val; align-self: center; } .bar-row .bar-track { grid-area: bar; } .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 8px; } .kv dt:first-child { margin-top: 0; } .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; } .mediagrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } /* Media page chrome */ .panel-body .seg { max-width: 100%; width: auto; flex: 1 1 auto; } /* Confirm modal width on phone */ .confirm-modal { width: 100%; max-width: min(400px, calc(100vw - 32px)); } /* Long table cells: keep sticky col readable; let content set width */ table.data { min-width: 100%; } table.data td .cell-clip, table.data td.cell-clip { max-width: min(200px, 48vw); } table.data th:first-child, table.data td:first-child { max-width: min(148px, 40vw); } /* Multi-col tables still scroll inside .table-wrap when content is wide */ .table-wrap { overscroll-behavior-x: contain; } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none !important; } .drawer { transition: none !important; } .nav-overlay { transition: none !important; } } /* Circular theme reveal from the sun/moon toggle (View Transitions API) */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; animation: theme-circle-reveal 0.45s ease-out; clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 50%)); } @keyframes theme-circle-reveal { from { clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 50%)); } to { clip-path: circle(var(--theme-r, 150vmax) at var(--theme-x, 50%) var(--theme-y, 50%)); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; clip-path: none !important; } html, body { transition: none; } } /* ── Live gift-picker preview (1:1 with GiftPicker.tsx, always dark) ── */ .gp-root { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; } .gp-root[hidden] { display: none !important; } .gp-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); } .gp-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; max-width: 100%; max-height: 100%; } .gp-hint { margin: 0; color: rgba(255, 255, 255, .72); font-size: 12.5px; font-weight: 550; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } .gp-phone { width: min(390px, calc(100vw - 32px)); height: min(844px, calc(100dvh - 72px)); background: #0a0a0f; border: 8px solid #1c1c22; border-radius: 36px; overflow: hidden; position: relative; box-shadow: 0 28px 80px rgba(0, 0, 0, .55); display: flex; flex-direction: column; } .gp-live { flex: 1; min-height: 0; background: radial-gradient(ellipse at 50% 20%, rgba(255, 46, 99, .18), transparent 55%), linear-gradient(180deg, #1a1220 0%, #0a0a0f 70%); } .gp-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; display: flex; flex-direction: column; border-radius: 16px 16px 0 0; background: rgba(18, 18, 18, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #f5f5f7; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .gp-handle { width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); margin: 8px auto 8px; flex-shrink: 0; } .gp-header { flex-shrink: 0; padding-bottom: 12px; } .gp-header-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 16px; gap: 8px; } .gp-title { font-size: 16px; font-weight: 700; line-height: 1.2; } .gp-recipient { display: flex; align-items: center; gap: 4px; margin-top: 2px; min-width: 0; } .gp-recipient-names { min-width: 0; } .gp-recipient-name { font-size: 12px; font-weight: 800; line-height: 1.15; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-recipient-user { font-size: 12px; font-weight: 600; line-height: 1.15; color: rgba(245, 245, 247, .62); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-verified { width: 13px; height: 13px; color: #ff5a85; flex-shrink: 0; } .gp-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .gp-balance { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px 0 8px; border: 0; border-radius: 16px; background: rgba(255, 213, 74, .12); color: #fff; font: 800 13px/1 Inter, sans-serif; cursor: default; } .gp-balance svg { width: 18px; height: 18px; color: #ffd54a; } .gp-balance-add { width: 18px; height: 18px; color: #ffd54a; } .gp-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: rgba(245, 245, 247, .62); cursor: pointer; display: grid; place-items: center; } .gp-close:hover { color: #fff; } .gp-close svg { width: 20px; height: 20px; } .gp-progress { margin: 4px 16px 0; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); display: flex; align-items: center; gap: 10px; } .gp-progress-avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px; } .gp-progress-avatar > span { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #94A3B8; display: grid; place-items: center; background: #21212a; font-size: 14px; font-weight: 800; color: #e2e8f0; } .gp-progress-chip { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px 5px; max-width: 56px; border-radius: 3px; background: #212121; border: 1px solid #94A3B8; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .2px; text-transform: uppercase; color: #94A3B8; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-tracks { flex: 1; min-width: 0; padding-top: 2px; display: flex; flex-direction: column; gap: 1px; } .gp-track { width: 100%; padding: 3px 0; } .gp-track-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; } .gp-track-left { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .gp-track-label { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: rgba(245, 245, 247, .62); flex-shrink: 0; } .gp-track-detail { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-track-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .gp-track-caption { font-size: 11px; font-weight: 700; } .gp-track-caption.level { color: #94A3B8; } .gp-track-caption.live { color: #ffd54a; } .gp-track-chevron { width: 14px; height: 14px; color: rgba(245, 245, 247, .38); } .gp-rail { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; width: 100%; } .gp-rail > i { display: block; height: 100%; border-radius: 999px; } .gp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 8px 12px 16px; } .gp-body::-webkit-scrollbar { display: none; } .gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; gap: 8px; color: rgba(245, 245, 247, .62); } .gp-empty svg { width: 40px; height: 40px; opacity: .5; } .gp-empty b { font-size: 14px; font-weight: 700; color: rgba(245, 245, 247, .62); } .gp-empty span { font-size: 12px; color: rgba(245, 245, 247, .38); } .gp-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; max-width: 100%; overflow: hidden; padding: 10px 4px; border-radius: 35px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; color: inherit; font: inherit; user-select: none; transition: box-shadow 140ms ease, border-color 140ms ease; } .gp-card:active { transform: scale(.95); } .gp-card:focus-visible { outline: 2px solid #c7c7d1; outline-offset: 2px; } .gp-card.is-active { border-color: #c7c7d1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); } .gp-icon { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gp-icon img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); } .gp-emoji { font-size: 28px; line-height: 1; } .gp-combo { position: absolute; top: -4px; right: -6px; padding: .4px 4.4px; border-radius: 999px; font-weight: 900; font-size: 11px; line-height: 1.3; color: #1a1205; background: #ffd54a; animation: gpComboPop 260ms ease; } @keyframes gpComboPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .gp-ring { position: absolute; inset: 0; pointer-events: none; transform: rotate(-90deg); } .gp-ring .ring-progress { animation: gpDrain var(--gp-dur, 2000ms) linear forwards; } @keyframes gpDrain { from { stroke-dashoffset: var(--gp-start, 0); } to { stroke-dashoffset: 141.3717; } } .gp-footer { position: relative; width: 100%; height: 44px; flex-shrink: 0; } .gp-footer-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: opacity 150ms ease; } .gp-footer-idle.is-hidden { opacity: 0; pointer-events: none; } .gp-name { font-size: 12px; font-weight: 700; width: 100%; height: 20px; line-height: 20px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-price { display: flex; align-items: center; justify-content: center; gap: 2px; height: 22px; font-size: 12px; font-weight: 800; color: #ffd54a; } .gp-price svg { width: 13px; height: 13px; color: #ffd54a; } .gp-send { width: 64px; height: 22px; padding: 0 10px; border: 0; border-radius: 999px; font-weight: 800; font-size: 11px; line-height: 1.2; color: #1a1205; background: #ffd54a; cursor: pointer; font-family: inherit; } .gp-send:hover { background: #ffdf73; } .gp-cancel { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; min-width: 0; padding: 0 10px; width: 64px; height: 22px; opacity: 0; pointer-events: none; border-radius: 999px; font-weight: 800; font-size: 11px; line-height: 1.2; font-family: inherit; cursor: pointer; color: rgba(245, 245, 247, .62); border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); box-shadow: none; transition: width 220ms cubic-bezier(.2, .8, .2, 1), height 220ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease; } .gp-cancel.is-pending { width: 100%; height: 44px; opacity: 1; pointer-events: auto; } .gp-cancel:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); } @media (max-width: 480px) { .gp-phone { border-width: 0; border-radius: 0; width: 100vw; height: 100dvh; } .gp-hint { display: none; } } /* ── System Health ───────────────────────────────────────────────────── */ .health-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } .health-banner.ok { background: var(--green-soft); border-color: transparent; } .health-banner.degraded { background: var(--amber-soft); border-color: transparent; } .health-banner.down { background: var(--red-soft); border-color: transparent; } .health-banner .hb-status { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; } .health-banner.ok .hb-status { color: var(--green); } .health-banner.degraded .hb-status { color: var(--amber); } .health-banner.down .hb-status { color: var(--red); } .health-banner .hb-summary { font-size: 13px; color: var(--text-dim); margin-top: 3px; } .health-banner .hb-copy { flex: 1; min-width: 180px; } .health-banner .hb-meta { font-size: 12px; color: var(--text-mute); margin-left: auto; } .health-probe-list { display: flex; flex-direction: column; gap: 6px; } .health-probe { display: flex; align-items: center; gap: 10px; padding: 8px 4px; min-width: 0; } .health-probe-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-mute); } .health-probe.ok .health-probe-dot { background: var(--green); } .health-probe.fail .health-probe-dot { background: var(--red); } .health-probe-body { min-width: 0; flex: 1; } .health-probe-label { font-size: 13px; font-weight: 600; } .health-probe-meta { font-size: 11.5px; color: var(--text-mute); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); } .health-probe.fail .health-probe-meta { color: var(--red); font-family: inherit; } .health-probe-ms { font-size: 11.5px; color: var(--text-mute); flex-shrink: 0; } .health-dash-hint { font-size: 12.5px; color: var(--text-mute); line-height: 1.45; margin: 16px 0 0; } .health-alarm-title { font-weight: 600; } .health-alarm-desc { font-size: 12px; color: var(--text-mute); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } table.health-alarms tbody tr { cursor: default; } table.health-alarms tbody tr.is-alarm td { background: var(--red-soft); } table.health-alarms tbody tr.is-alarm td:first-child { background: var(--red-soft); } .panel-head .btn.sm { margin-left: auto; flex-shrink: 0; text-decoration: none; }