/* Theme system: four selectable themes (Settings -> General sets the site
default; My Account lets any user override it for themselves). Applied
via a `data-theme` attribute on , set from JS as early as possible
after the effective theme is known (see applyTheme() in each page's
script) - everything below just redefines these same custom properties,
so no component CSS needs theme-specific overrides except where a theme
changes the overall page treatment (glass, hacker). */
:root,
:root[data-theme="dark"] {
--bg: #0d1117;
--panel: #161b22;
--border: #30363d;
--text: #c9d1d9;
--muted: #8b949e;
--accent: #ff865a;
--accent-rgb: 255, 134, 90;
--green: #3fb950;
--red: #f85149;
}
:root[data-theme="light"] {
--bg: #f6f8fa;
--panel: #ffffff;
--border: #d0d7de;
--text: #1f2328;
--muted: #57606a;
--accent: #e8663a;
--accent-rgb: 232, 102, 58;
--green: #1a7f37;
--red: #cf222e;
}
:root[data-theme="glass"] {
--bg: #dfe9f5;
--panel: rgba(255, 255, 255, 0.55);
--border: rgba(255, 255, 255, 0.4);
--text: #1f2328;
--muted: #50607a;
--accent: #ff865a;
--accent-rgb: 255, 134, 90;
--green: #1a7f37;
--red: #cf222e;
}
/* :root IS the element, so it's targeted directly here rather than
with a (never-matching, since html can't descend from itself) "html"
descendant selector. */
:root[data-theme="glass"],
:root[data-theme="glass"] body {
background: linear-gradient(135deg, #a8c0ff 0%, #ffb6c9 50%, #ffe29a 100%);
background-attachment: fixed;
}
:root[data-theme="glass"] .login-card,
:root[data-theme="glass"] .tool-card,
:root[data-theme="glass"] .settings-card,
:root[data-theme="glass"] .modal-box,
:root[data-theme="glass"] .dropdown-menu,
:root[data-theme="glass"] .run-panel,
:root[data-theme="glass"] .sidebar,
:root[data-theme="glass"] .sessions-dock,
:root[data-theme="glass"] .topbar {
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
:root[data-theme="glass"] .topbar,
:root[data-theme="glass"] .sidebar,
:root[data-theme="glass"] .sessions-dock {
background: var(--panel);
}
/* backdrop-filter makes an element establish its own stacking context. Without
an explicit z-index, a stacking-context root with no offset just competes
with its siblings by DOM order - so .topbar (which comes before .layout in
markup) would paint BELOW .layout's tool grid once it gets backdrop-filter,
trapping the avatar dropdown menu (z-index:60, but scoped inside .topbar's
new context) behind the tool cards and making it unclickable. Pin .topbar
above .layout explicitly so its dropdown always wins. */
:root[data-theme="glass"] .topbar {
position: relative;
z-index: 70;
}
/* A floating menu over busy content (the tool grid) needs more opacity
than a large panel does to stay legible - the general --panel alpha is
too see-through here. */
:root[data-theme="glass"] .dropdown-menu {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* The menu's
separators use --border, a semi-transparent WHITE in this
theme, which all but disappears against the near-opaque white background
above - use a dark, low-opacity line instead so it actually reads as a
divider. */
:root[data-theme="glass"] .dropdown-menu hr {
border-top-color: rgba(31, 35, 40, 0.15);
}
:root[data-theme="hacker"] {
--bg: #000000;
--panel: #050a05;
--border: #1a3a1a;
--text: #39ff14;
--muted: #2e8b2e;
--accent: #39ff14;
--accent-rgb: 57, 255, 20;
--green: #39ff14;
--red: #ff3131;
}
:root[data-theme="hacker"] body { font-family: 'Fira Code', Consolas, 'Courier New', monospace; }
:root[data-theme="hacker"] h1,
:root[data-theme="hacker"] h2,
:root[data-theme="hacker"] h3 { text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.65); }
:root[data-theme="hacker"] .login-card,
:root[data-theme="hacker"] .tool-card,
:root[data-theme="hacker"] .settings-card,
:root[data-theme="hacker"] .modal-box { box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.15); }
* { box-sizing: border-box; }
/* Without this, has no background of its own, so the area a browser
reveals behind the page - Safari/iOS's overscroll rubber-band bounce past
the top/bottom, or a momentary gap before body's own background paints -
falls back to the browser's default canvas color, which reads as black in
dark mode regardless of the site's actual theme. */
html { background: var(--bg); }
body {
margin: 0;
font-family: 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
transition: background-color 0.15s, color 0.15s;
}
.login-body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 1.5rem;
background:
radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb), 0.16), transparent 45%),
radial-gradient(circle at 85% 90%, rgba(var(--accent-rgb), 0.1), transparent 45%),
var(--bg);
}
.login-card {
background: var(--panel);
border: 1px solid var(--border);
border-top: 3px solid var(--accent);
padding: 2.25rem 2rem;
border-radius: 12px;
width: 360px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 0.9rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.login-card h1 { margin: 0; font-size: 1.45rem; letter-spacing: -0.01em; }
.title-row { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem; }
.auth-warning {
display: flex;
align-items: flex-start;
gap: 0.6rem;
background: rgba(var(--accent-rgb), 0.1);
border: 1px solid rgba(var(--accent-rgb), 0.4);
border-radius: 8px;
padding: 0.7rem 0.85rem;
margin: 0 0 0.4rem;
}
.auth-warning-icon { font-size: 1.1rem; line-height: 1.3; }
.auth-warning-text { font-size: 0.76rem; line-height: 1.45; color: var(--text); }
.auth-warning-text strong { color: var(--accent); }
.byline { color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.topbar h1 .byline { font-size: 0.7rem; font-weight: 400; }
.subtitle { margin: 0 0 1rem; color: var(--muted); font-size: 0.85rem; text-align: center; }
.login-card label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
#login-form, #reset-form { display: flex; flex-direction: column; gap: 0.9rem; }
.login-card input,
.run-form input,
.run-form select {
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
padding: 0.5rem;
border-radius: 4px;
font-size: 0.9rem;
}
.login-card button,
.run-actions button,
.topbar button {
background: var(--accent);
border: none;
color: #0d1117;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}
.error { color: var(--red); min-height: 1.2em; font-size: 0.85rem; }
.success { color: var(--green); min-height: 1.2em; font-size: 0.85rem; }
.oidc-buttons { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.oidc-btn {
display: block;
text-align: center;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 0.5rem;
border-radius: 4px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
}
.oidc-btn:hover { border-color: var(--accent); color: var(--accent); }
.divider { display: flex; align-items: center; color: var(--muted); font-size: 0.75rem; margin: 0.25rem 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); }
.divider span { padding: 0 0.5rem; }
.login-actions-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1rem; }
.login-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; font-size: 0.78rem; }
.login-links a, .footnote a { color: var(--accent); text-decoration: none; }
.login-links a:hover, .footnote a:hover { text-decoration: underline; }
.footnote { margin: 0; color: var(--muted); font-size: 0.8rem; text-align: center; }
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 1.1rem; margin: 0; }
.brand-link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.4rem; }
.brand-link:hover .byline { color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
.topbar button { background: transparent; border: 1px solid var(--border); color: var(--text); }
/* Specificity note: `.topbar-right .avatar-btn` (two classes) is used
instead of plain `.avatar-btn` so this reliably beats the generic
`.topbar button` reset above (one class + one type selector) - without
it, that rule's padding/border-radius/border silently win and squash
this button's content box down to a few pixels, which is invisible
with text initials (unconstrained text just overflows into the padding)
but breaks an uploaded photo (an explicitly-sized ![]()
actually gets
squeezed into that tiny box). */
.topbar-right .avatar-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--border);
background: rgba(var(--accent-rgb), 0.18);
color: var(--accent);
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0;
flex-shrink: 0;
}
.topbar-right .avatar-btn:hover { border-color: var(--accent); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-preview {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid var(--border);
background: rgba(var(--accent-rgb), 0.18);
color: var(--accent);
font-weight: 700;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.avatar-row-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.dropdown { position: relative; }
.dropdown-menu {
position: absolute;
top: calc(100% + 0.4rem);
right: 0;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
min-width: 180px;
padding: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 60;
}
.dropdown-menu a,
.dropdown-menu button {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: none;
color: var(--text);
padding: 0.45rem 0.6rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.dropdown-menu a:hover,
.dropdown-menu button:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.dropdown-menu hr { border: none; border-top: 1px solid var(--border); margin: 0.3rem 0; }
.layout { display: flex; min-height: calc(100vh - 110px); }
.sidebar {
width: 200px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
border-right: 1px solid var(--border);
}
.cat-btn {
background: transparent;
border: none;
color: var(--text);
text-align: left;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
}
.cat-btn.active, .cat-btn:hover { background: var(--panel); }
.kali-version-badge {
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
font-size: 0.7rem;
line-height: 1.5;
color: var(--muted);
}
.content { flex: 1; padding: 1.5rem; position: relative; }
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
.tool-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
cursor: pointer;
transition: border-color 0.15s;
}
.tool-card:hover { border-color: var(--accent); }
.tool-card-header { display: flex; align-items: center; gap: 0.5rem; }
.tool-card h3 { margin: 0; font-size: 1rem; }
.tool-card p { color: var(--muted); font-size: 0.85rem; }
.category-tag { font-size: 0.7rem; color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-ok { background: var(--green); }
.dot-missing { background: var(--red); }
.run-panel {
position: fixed;
top: 0;
right: 0;
width: min(560px, 100%);
height: 100vh;
background: var(--panel);
border-left: 1px solid var(--border);
padding: 1.5rem;
overflow-y: auto;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
padding-bottom: 4.5rem;
z-index: 20;
}
.run-panel.hidden { display: none; }
.run-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.run-panel-header h2 { font-size: 1.1rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-panel-header-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.run-panel-header button { background: transparent; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 0.25rem; }
.run-panel-header .minimize-btn { font-size: 1.1rem; }
.tool-details {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.75rem;
margin: 0.75rem 0 0;
font-size: 0.8rem;
color: var(--muted);
line-height: 1.5;
}
.run-form { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.run-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.run-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.run-actions .stop-btn { background: var(--red); color: white; }
.run-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.output-wrap { position: relative; }
.copy-output-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: var(--panel);
border: 1px solid var(--border);
color: var(--text);
padding: 0.25rem 0.6rem;
border-radius: 4px;
font-size: 0.72rem;
cursor: pointer;
z-index: 1;
}
.copy-output-btn:hover { border-color: var(--accent); color: var(--accent); }
.output {
background: #010409;
/* Always a dark terminal regardless of site theme, so its text color is
fixed too rather than inheriting --text (which is dark in Light/Glass
and would be invisible against this background). */
color: #c9d1d9;
border: 1px solid var(--border);
border-radius: 4px;
padding: 1rem;
height: 45vh;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
font-family: 'Fira Code', Consolas, monospace;
font-size: 0.8rem;
}
.sessions-dock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
background: var(--panel);
border-top: 1px solid var(--border);
z-index: 25;
}
.sessions-dock.hidden { display: none; }
.sessions-dock-chips { display: flex; gap: 0.5rem; overflow-x: auto; flex: 1; min-width: 0; }
.close-all-btn {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.78rem;
cursor: pointer;
}
.close-all-btn:hover { border-color: var(--red); color: var(--red); }
.session-chip {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.35rem 0.5rem 0.35rem 0.75rem;
font-size: 0.8rem;
cursor: pointer;
flex-shrink: 0;
max-width: 220px;
}
.session-chip:hover, .session-chip.active { border-color: var(--accent); }
.session-chip .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-chip .chip-close-btn {
background: transparent;
border: none;
color: var(--muted);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 0 0.2rem;
flex-shrink: 0;
}
.session-chip .chip-close-btn:hover { color: var(--red); }
.session-chip .dot-running { background: var(--accent); }
.pipeline-report {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1rem;
margin-top: 1rem;
}
.pipeline-report.hidden { display: none; }
.report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.report-header h3 { margin: 0; font-size: 0.95rem; }
.report-header button { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 0.35rem 0.75rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }
.report-list li { display: flex; align-items: baseline; gap: 0.5rem; }
.status-icon { width: 1.2em; flex-shrink: 0; text-align: center; }
.report-list .status-ok .status-icon { color: var(--green); }
.report-list .status-error .status-icon { color: var(--red); }
.report-list .status-skipped .status-icon,
.report-list .status-stopped .status-icon { color: var(--muted); }
.hidden { display: none !important; }
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(1, 4, 9, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
}
.modal-box {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
width: min(480px, 92vw);
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-header button { background: transparent; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }
.modal-subtitle { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 0 0 0.75rem; }
.modal-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.modal-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.modal-form input,
.modal-form select {
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
padding: 0.5rem;
border-radius: 4px;
font-size: 0.9rem;
}
.modal-form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.users-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; }
.users-table th, .users-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); }
.users-table th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.user-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.user-actions button {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.75rem;
}
.user-actions .delete-user-btn,
.user-actions .confirm-delete-btn { color: var(--red); border-color: var(--red); }
.user-actions .confirm-text { font-size: 0.8rem; color: var(--text); }
.auth-tag, .you-tag { color: var(--muted); font-size: 0.75rem; }
.inline-pw { width: 130px; }
.role-pill {
display: inline-block;
padding: 0.1rem 0.55rem;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.role-pill-admin { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.role-pill-user { background: rgba(139, 148, 158, 0.15); color: var(--muted); }
/* Same padding/font-size/radius/weight as .primary-btn (below) so any pair
of primary+secondary buttons sit at an identical size, whether they're
side by side in a .modal-form-actions row or standalone. */
.secondary-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
align-self: flex-start;
}
.secondary-btn:hover { border-color: var(--accent); color: var(--accent); }
.users-table + .secondary-btn { margin-top: 0.75rem; }
.sidebar-heading {
color: var(--muted);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.5rem 0.5rem 0.25rem;
}
.settings-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
max-width: 680px;
}
.settings-card h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.settings-card h3 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
/* align-self: flex-start keeps this content-sized rather than stretching to
fill a flex-column .modal-form when it's the form's only/last child (a
plain .modal-form, unlike .modal-form-actions, doesn't lay its children
out in a row) - without it, a lone submit button like "Send Test Email"
ends up much wider than an identically-classed button that happens to sit
in a .modal-form-actions row next to others. */
.primary-btn {
background: var(--accent);
border: none;
color: #0d1117;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
align-self: flex-start;
}
.checkbox-label { display: flex; flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
.checkbox-label input[type="checkbox"] { width: auto; }
.toggle-row {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.6rem 0.75rem;
margin: 0.75rem 0;
font-size: 0.85rem;
}
.category-row { margin: 0 0 0.4rem; padding: 0.4rem 0.6rem; }
.access-category { margin: 0 0 1rem; }
.access-tools { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.4rem 0 0 1.75rem; }
.access-override-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
}
.access-override-row select { font-size: 0.78rem; padding: 0.25rem 0.4rem; }
.tool-row { padding: 0.3rem 0.6rem; font-size: 0.8rem; margin: 0; }
.field-hint { color: var(--muted); font-size: 0.75rem; margin: -0.4rem 0 0; }
.field-hint-spaced { margin-top: 1.25rem; }
.settings-subcard {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem 1.25rem;
margin: 1.5rem 0;
}
.settings-subcard h3 { margin-top: 0; }
.email-required-notice {
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.3);
border-radius: 6px;
padding: 0.6rem 0.75rem;
font-size: 0.82rem;
margin: 0 0 0.75rem;
}
.email-required-notice a { color: var(--accent); }
.redirect-callout {
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: 6px;
padding: 0.75rem;
}
.manual-endpoints {
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.6rem 0.75rem;
}
.manual-endpoints summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.manual-endpoints[open] summary { margin-bottom: 0.6rem; color: var(--text); }
.manual-endpoints label { margin-top: 0.6rem; }
.manual-endpoints code { color: var(--accent); font-size: 0.75rem; }
.redirect-callout-label {
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 0.5rem;
}
.redirect-callout-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.redirect-callout-row code {
flex: 1;
min-width: 0;
word-break: break-all;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.4rem 0.6rem;
font-family: 'Fira Code', Consolas, monospace;
font-size: 0.8rem;
color: var(--accent);
}
.footer {
text-align: center;
padding: 0.75rem;
color: var(--muted);
font-size: 0.75rem;
border-top: 1px solid var(--border);
}
/* Toast notifications - shared across every page (see toast.js). Fixed to
the viewport (not any particular layout container) and given a z-index
above the modal overlay (50) and the glass theme's topbar (70) so a toast
is never hidden behind either. */
#toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: min(360px, calc(100vw - 2rem));
}
.toast {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid var(--muted);
color: var(--text);
padding: 0.7rem 1rem;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
font-size: 0.85rem;
line-height: 1.4;
cursor: pointer;
opacity: 0;
transform: translateX(24px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-visible { opacity: 1; transform: translateX(0); }
.toast-success { border-left-color: var(--green); }
.toast-error { border-left-color: var(--red); }
.toast a { color: var(--accent); }