/* ── Hive Admin — The Golden Hive Theme ─────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Amber Archive Palette ── */ --bg: #18120e; --deep: #130d09; --surface-low: #1c1511; --surface: #251e1a; --surface2: #2e2420; --surface3: #3b332f; /* Primary amber */ --primary: #ffd79b; --primary-hover: #ffe4b5; --primary-dim: rgba(255,215,155,0.14); --primary-glow: rgba(255,215,155,0.08); --primary-container:#5c3d1e; /* Text */ --text: #ede0d9; --muted: #d6c4ac; --faint: #7a6a5e; /* Ghost borders — felt, not seen */ --border: rgba(214,196,172,0.12); --border2: rgba(255,215,155,0.22); /* Legacy aliases so JS-set inline vars still resolve */ --accent: var(--primary); --accent-hover: var(--primary-hover); --accent-dim: var(--primary-container); /* Status colors */ --green: #4ade80; --red: #f87171; --yellow: #fbbf24; --cyan: #22d3ee; --blue: #60a5fa; --purple: #c4b5fd; --orange: #fb923c; /* Shape */ --radius: 0.25rem; /* sm — inputs, technical */ --radius-md: 0.5rem; --radius-lg: 1rem; /* lg — buttons, cards */ /* Typography */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', 'Fira Code', monospace; /* Dashboard cards */ --card-radius: 0.375rem; /* corner radius for metric & total cards */ --card-gap: 6px; /* gap between metric & total cards */ /* Derived / static surface overlays */ --on-primary: #281900; /* text on primary-colored backgrounds */ --modal-surface: rgba(59,51,47,0.72); /* glass modal bg */ --toast-surface: rgba(59,51,47,0.88); /* glass toast bg */ --backdrop: rgba(19,13,9,0.80); /* modal backdrop */ --status-h: 36px; --tab-h: 38px; } /* ───────────────────────────────────────────────────────────────────────────── COLOUR THEMES (override :root vars; dark is the default ↑) Set data-theme on to switch, e.g. document.documentElement.dataset.theme='light' ───────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"] :root { --bg: rgb(255,248,243); --deep: rgb(255,255,255); --surface-low: rgb(255,241,233); --surface: rgb(251,235,225); --surface2: rgb(246,229,220); --surface3: rgb(240,223,214); --primary: rgb(125,87,13); --primary-hover: rgb(255,222,172); --primary-dim: rgba(125,87,13,0.12); --primary-glow: rgba(125,87,13,0.09); --primary-container:rgb(255,222,172); --text: rgb(34,26,21); --muted: rgb(82,68,60); --faint: rgb(132,116,106); --border: rgba(82,68,60,0.15); --border2: rgba(125,87,13,0.28); --on-primary: rgb(255,255,255); --modal-surface: rgba(251,235,225,0.88); --toast-surface: rgba(251,235,225,0.95); --backdrop: rgba(32,27,19,0.55); } html[data-theme="light-mc"] :root { --bg: rgb(255,248,243); --deep: rgb(255,255,255); --surface-low: rgb(255,241,233); --surface: rgb(246,229,220); --surface2: rgb(234,218,209); --surface3: rgb(222,207,198); --primary: rgb(74,49,0); --primary-hover: rgb(141,102,29); --primary-dim: rgba(74,49,0,0.12); --primary-glow: rgba(74,49,0,0.09); --primary-container:rgb(141,102,29); --text: rgb(23,16,11); --muted: rgb(64,51,44); --faint: rgb(94,79,71); --border: rgba(94,79,71,0.18); --border2: rgba(74,49,0,0.32); --on-primary: rgb(255,255,255); --modal-surface: rgba(246,229,220,0.88); --toast-surface: rgba(246,229,220,0.95); --backdrop: rgba(23,16,11,0.55); } html[data-theme="light-hc"] :root { --bg: rgb(255,248,243); --deep: rgb(255,255,255); --surface-low: rgb(254,238,228); --surface: rgb(240,223,214); --surface2: rgb(225,209,200); --surface3: rgb(211,196,187); --primary: rgb(61,40,0); --primary-hover: rgb(99,67,0); --primary-dim: rgba(61,40,0,0.12); --primary-glow: rgba(61,40,0,0.09); --primary-container:rgb(99,67,0); --text: rgb(0,0,0); --muted: rgb(0,0,0); --faint: rgb(54,42,34); --border: rgba(54,42,34,0.22); --border2: rgba(61,40,0,0.40); --on-primary: rgb(255,255,255); --modal-surface: rgba(240,223,214,0.90); --toast-surface: rgba(240,223,214,0.96); --backdrop: rgba(0,0,0,0.55); } html[data-theme="dark-mc"] :root { --bg: rgb(23,19,11); --deep: rgb(12,6,3); --surface-low: rgb(36,28,22); --surface: rgb(47,38,32); --surface2: rgb(58,49,43); --surface3: rgb(70,60,53); --primary: rgb(255,214,151); --primary-hover: rgb(255,222,172); --primary-dim: rgba(255,214,151,0.14); --primary-glow: rgba(255,214,151,0.09); --primary-container:rgb(181,137,62); --text: rgb(255,255,255); --muted: rgb(237,216,205); --faint: rgb(194,174,164); --border: rgba(194,174,164,0.18); --border2: rgba(255,214,151,0.28); --on-primary: rgb(53,34,0); } html[data-theme="dark-hc"] :root { --bg: rgb(23,19,11); --deep: rgb(0,0,0); --surface-low: rgb(38,30,24); --surface: rgb(56,47,41); --surface2: rgb(67,57,51); --surface3: rgb(79,69,62); --primary: rgb(255,237,215); --primary-hover: rgb(255,222,172); --primary-dim: rgba(255,237,215,0.16); --primary-glow: rgba(255,237,215,0.10); --primary-container:rgb(96,65,0); --text: rgb(255,255,255); --muted: rgb(255,255,255); --faint: rgb(255,236,227); --border: rgba(255,236,227,0.20); --border2: rgba(255,237,215,0.42); --on-primary: rgb(0,0,0); } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 13px; line-height: 1.5; } @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.3 } } @keyframes blink-dot { 0%,100% { opacity:1 } 50% { opacity:0.2 } } @keyframes toast-in { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } } @keyframes fade-in { from { opacity:0 } to { opacity:1 } } /* ── Status bar ── */ #status-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--status-h); background: var(--deep); border-bottom: 1px solid var(--border); display: flex; align-items: center; z-index: 200; padding: 0 14px; user-select: none; } .sb-left { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } #status-bar.connecting .status-dot { background: var(--yellow); animation: pulse 1s infinite; } #status-bar.connected .status-dot { background: var(--green); } #status-bar.error .status-dot { background: var(--red); } #status-bar.offline .status-dot { background: var(--faint); } #status-bar.connecting #sb-url { color: var(--yellow); } #status-bar.connected #sb-url { color: var(--green); } #status-bar.error #sb-url { color: var(--red); } #sb-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sb-latency { color: var(--green); flex-shrink: 0; } .sb-center { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); display: flex; align-items: center; gap: 6px; pointer-events: none; white-space: nowrap; } .sb-right { flex: 1; display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 12px; color: var(--muted); } .sb-right .sb-username { color: var(--text); font-weight: 500; } .sb-btn { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 12px; padding: 3px 7px; border-radius: var(--radius); transition: color 0.15s, background 0.15s; } .sb-btn:hover { color: var(--text); background: var(--surface2); } /* ── Tab bar ── */ #tab-bar { position: fixed; top: var(--status-h); left: 0; right: 0; height: var(--tab-h); background: var(--surface-low); border-bottom: 1px solid var(--border); display: flex; align-items: stretch; z-index: 190; padding: 0 6px; } .tab { padding: 0 18px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--faint); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; border-radius: 0; } .tab:hover { color: var(--muted); background: transparent; } .tab.active { color: var(--primary); border-bottom-color: var(--primary); } /* ── Content area ── */ #content { position: fixed; top: calc(var(--status-h) + var(--tab-h)); left: 0; right: 0; bottom: 0; overflow: hidden; } .panel { display: none; height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--bg); flex-direction: column; } .panel.active { display: flex; } /* ── Section label ── */ .section-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 10px 16px 4px; flex-shrink: 0; } /* ── System Metrics ── */ .metrics-row { display: flex; gap: var(--card-gap); background: transparent; border-bottom: 1px solid var(--border); padding: var(--card-gap) var(--card-gap) 0; flex-shrink: 0; } .metric-card { flex: 1; min-width: 0; background: var(--surface); padding: 10px 13px 8px; overflow: hidden; border-radius: var(--card-radius); } .metric-card.metric-wide { flex: 1.7; } .metric-label { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; } .metric-label .legend { float: right; font-size: 9px; font-weight: 600; } .metric-value { font-size: 20px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .metric-sub { font-size: 9px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } canvas.sparkline { display: block; width: 100%; height: 38px; margin: 3px 0 1px; } /* ── Server Totals ── */ .totals-row { display: flex; gap: var(--card-gap); background: transparent; border-bottom: 1px solid var(--border); padding: var(--card-gap) var(--card-gap) var(--card-gap); flex-shrink: 0; } .total-card { flex: 1; min-width: 0; background: var(--surface2); padding: 12px 8px 10px; text-align: center; border-radius: var(--card-radius); } .total-icon { font-size: 16px; line-height: 1; margin-bottom: 3px; } .total-value { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } .total-value.small { font-size: 15px; font-weight: 700; } .total-label { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); margin-top: 2px; } .total-delta { font-size: 9px; color: var(--green); margin-top: 2px; } /* ── Live Users header ── */ .live-header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--surface-low); } .live-badge { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink-dot 1.8s ease-in-out infinite; } .live-count { font-size: 9px; background: var(--red); color: #fff; padding: 1px 5px; border-radius: 99px; font-weight: 700; } .live-spacer { flex: 1; } #live-search { background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 10px; color: var(--text); font-size: 11px; width: 160px; outline: none; } #live-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .filter-btns { display: flex; gap: 3px; } .filter-btn { padding: 3px 9px; background: transparent; border: 1px solid var(--border); color: var(--faint); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-lg); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .filter-btn:hover { color: var(--muted); border-color: var(--border2); } .filter-btn.active { background: var(--surface3); color: var(--primary); border-color: var(--border2); } /* ── Tables ── */ .table-wrap { flex: 1; overflow-y: auto; } table { width: 100%; border-collapse: collapse; } thead th { position: sticky; top: 0; background: var(--surface-low); padding: 7px 12px; text-align: left; font-family: var(--font-display); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); border-bottom: 1px solid var(--border); white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--border); transition: background 0.07s; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--surface2); } td { padding: 8px 12px; font-size: 12px; vertical-align: middle; } .empty-row td { text-align: center; color: var(--faint); padding: 48px; font-size: 13px; } /* ── Avatar ── */ .avatar { width: 27px; height: 27px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--on-primary); flex-shrink: 0; text-transform: uppercase; } /* ── Badges ── */ .badge { display: inline-block; padding: 2px 6px; border-radius: 99px; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; } .badge + .badge { margin-left: 3px; } .badge-admin { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); } .badge-user { background: rgba(214,196,172,0.08); color: var(--muted); border: 1px solid var(--border); } .badge-system { background: rgba(59,51,47,0.4); color: var(--faint); border: 1px solid var(--border); } .badge-online { background: rgba(74,222,128,0.12); color: var(--green); border: 1px solid rgba(74,222,128,0.3); } .badge-offline{ background: rgba(107,93,82,0.2); color: var(--faint); border: 1px solid var(--border); } /* ── Activity pills ── */ .activity { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 600; white-space: nowrap; } .activity .dot { width: 5px; height: 5px; border-radius: 50%; } .act-idle { background: rgba(59,51,47,0.4); color: var(--faint); border: 1px solid var(--border); } .act-idle .dot { background: var(--faint); } .act-channel { background: rgba(34,211,238,0.08); color: var(--cyan); border: 1px solid rgba(34,211,238,0.25); } .act-channel .dot { background: var(--cyan); } .act-voice { background: rgba(196,181,253,0.08); color: var(--purple); border: 1px solid rgba(196,181,253,0.25); } .act-voice .dot { background: var(--purple); } .act-task { background: rgba(251,146,60,0.08); color: var(--orange); border: 1px solid rgba(251,146,60,0.25); } .act-task .dot { background: var(--orange); } /* ── Latency ── */ .lat-fast { color: var(--green); font-family: var(--font-mono); } .lat-medium { color: var(--yellow); font-family: var(--font-mono); } .lat-slow { color: var(--red); font-family: var(--font-mono); } .lat-none { color: var(--faint); } /* ── Username coloring ── */ .uname-admin { color: var(--primary); font-weight: 600; } .uname-user { color: var(--text); } .uname-system { color: var(--faint); } /* ── Inline action buttons ── */ .act-btns { display: flex; gap: 4px; } .act-btn { padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid; cursor: pointer; background: transparent; transition: background 0.1s; } .act-msg:hover { background: rgba(96,165,250,0.15); } .act-msg { color: var(--blue); border-color: rgba(96,165,250,0.35); } .act-kick { color: var(--primary); border-color: rgba(255,215,155,0.35); } .act-kick:hover { background: var(--primary-dim); } .act-ban { color: var(--red); border-color: rgba(248,113,113,0.35); } .act-ban:hover { background: rgba(248,113,113,0.12); } .act-pw { color: var(--muted); border-color: var(--border2); } .act-pw:hover { background: var(--surface3); color: var(--text); } .act-del { color: var(--red); border-color: rgba(248,113,113,0.3); } .act-del:hover { background: rgba(248,113,113,0.1); } /* ── Console panel ── */ #panel-console { background: var(--deep); } .console-toolbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface-low); border-bottom: 1px solid var(--border); flex-shrink: 0; } .con-toolbar-title { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .con-toolbar-sep { flex: 1; } #console-output { flex: 1; overflow-y: auto; padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.65; background: var(--deep); } .con-line { white-space: pre-wrap; word-break: break-all; } .con-line.con-cmd { color: var(--muted); } .con-prompt-sym { color: var(--primary); margin-right: 4px; } .con-line.con-out { color: #c4b8ae; } .con-line.con-err { color: var(--red); } .con-line.con-info { color: var(--cyan); } .con-line.con-sys { color: var(--faint); font-style: italic; } .con-tag { font-size: 10px; color: var(--faint); background: var(--surface); padding: 1px 5px; border-radius: 3px; margin-right: 6px; font-family: var(--font-mono); display: inline-block; } .console-bottom { padding: 8px; flex-shrink: 0; background: var(--surface-low); border-top: 1px solid var(--border); } .console-status-line { font-size: 10px; color: var(--faint); font-family: var(--font-mono); padding: 0 2px 4px; min-height: 16px; } .console-input-box { display: flex; align-items: flex-end; background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; } .console-input-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); } .con-prompt-label { color: var(--primary); font-family: var(--font-mono); font-size: 13px; font-weight: 700; flex-shrink: 0; margin-right: 7px; line-height: 1.5; padding-bottom: 1px; } #console-input { flex: 1; background: transparent; border: none; color: var(--text); font-family: var(--font-mono); font-size: 12px; outline: none; resize: none; min-height: 1.5em; max-height: 140px; overflow-y: auto; padding: 0; line-height: 1.5; } /* ── Users / panel toolbar ── */ .panel-toolbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface-low); border-bottom: 1px solid var(--border); flex-shrink: 0; } .toolbar-title { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); } .toolbar-sep { flex: 1; } .search-input { background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 10px; color: var(--text); font-size: 12px; width: 180px; outline: none; } .search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); } /* ── Server panel ── */ .server-section { padding: 20px; border-bottom: 1px solid var(--border); max-width: 780px; } .server-section h3 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .bc-text { width: 100%; min-height: 70px; resize: vertical; background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; color: var(--text); font-size: 13px; outline: none; font-family: inherit; } .bc-text:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); } .danger-zone { margin: 20px; padding: 20px; max-width: 780px; border: 1px solid rgba(248,113,113,0.2); border-radius: var(--radius-lg); background: rgba(248,113,113,0.03); } .danger-zone h3 { font-family: var(--font-display); color: var(--red); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; } .danger-zone p { font-size: 12px; color: var(--faint); margin-bottom: 14px; } /* ── Settings panel ── */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--border); flex: 1; } .settings-group { background: var(--bg); padding: 20px; } .settings-group h3 { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } /* ── Buttons ── */ button, .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface3); color: var(--text); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } button:hover, .btn:hover { background: var(--surface2); border-color: var(--border2); } button:disabled, .btn:disabled { opacity: 0.38; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 58%, black)); border-color: transparent; color: var(--on-primary); font-weight: 700; } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), color-mix(in srgb, var(--primary-hover) 62%, black)); border-color: transparent; } .btn-danger { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); color: var(--red); } .btn-danger:hover { background: rgba(248,113,113,0.15); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: var(--border); } .btn-sm { padding: 4px 10px; font-size: 11px; } .btn-xs { padding: 2px 8px; font-size: 10px; } /* ── Form inputs ── */ input[type="text"], input[type="password"], input[type="url"], input[type="number"], select, textarea { width: 100%; padding: 7px 10px; background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12px; outline: none; font-family: var(--font-body); transition: border-color 0.12s, box-shadow 0.12s; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); } input::placeholder, textarea::placeholder { color: var(--faint); } select option { background: var(--surface); } label { display: block; font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .field { margin-bottom: 12px; } /* ── Modal ── */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 24px; } .modal-backdrop.hidden { display: none; } .modal { background: var(--modal-surface); backdrop-filter: blur(12px); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: 22px; width: 100%; max-width: 400px; animation: fade-in 0.15s ease; box-shadow: 0 0 40px var(--primary-glow); } .modal h3 { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 16px; } .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } /* ── Toast ── */ #toast-container { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 5px; z-index: 500; pointer-events: none; } .toast { padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid; font-size: 12px; background: var(--toast-surface); backdrop-filter: blur(12px); max-width: 280px; animation: toast-in 0.15s ease; transition: opacity 0.3s; pointer-events: auto; box-shadow: 0 0 24px var(--primary-glow); } .toast.success { border-color: rgba(74,222,128,0.4); color: var(--green); } .toast.error { border-color: rgba(248,113,113,0.4); color: var(--red); } .toast.info { border-color: var(--border2); color: var(--text); } /* ── Login page ── */ body.login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: auto; padding: 40px 20px 20px; } .login-card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: 34px 38px; width: 100%; max-width: 380px; animation: fade-in 0.2s ease; box-shadow: 0 0 48px var(--primary-glow); } .login-header { text-align: center; margin-bottom: 26px; } .login-header .logo { font-size: 2.4rem; margin-bottom: 6px; } .login-header h1 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.2px; } .login-header p { color: var(--muted); font-size: 12px; margin-top: 3px; } .server-row { display: flex; gap: 7px; align-items: flex-end; } .server-row .field { flex: 1; margin-bottom: 0; } #server-status { font-size: 11px; margin-top: 5px; min-height: 16px; color: var(--faint); } #server-status.ok { color: var(--green); } #server-status.bad { color: var(--red); } hr.divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; } #login-error { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.25); color: #fca5a5; border-radius: var(--radius); padding: 8px 12px; font-size: 12px; margin-bottom: 12px; display: none; } #login-error.show { display: block; } #btn-login { width: 100%; justify-content: center; padding: 9px; font-size: 13px; } .footer-link { text-align: center; margin-top: 18px; font-size: 11px; color: var(--faint); } .footer-link a { color: var(--muted); text-decoration: none; } .footer-link a:hover { color: var(--text); }