/*
* ION — Free Radicals Design System
* Compiled from art/ion_login_screen.html + art/free-radicals-theme.html
* Extended with full component library for the Ion application.
*/
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@300;400;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
color-scheme: dark;
/* --- Brand palette --- */
--ion-brand-mark: "™"; /* upgrade to "®" when registered; consumed by .ion-brand-tm::after */
--ion-cyan: #00e5ff;
--ion-cyan-mid: #00fff7;
--ion-magenta: #bf00ff;
--ion-violet: #7b00ff;
--ion-violet-mid: #8b5cf6;
/* RGB triplets — lets rgba(var(--ion-cyan-rgb), alpha) work theme-wide.
Every theme that changes --ion-cyan MUST also update --ion-cyan-rgb. */
--ion-cyan-rgb: 0, 229, 255;
--ion-magenta-rgb: 191, 0, 255;
/* --- Semantic colours --- */
--ion-success: #00ff9d;
--ion-warning: #ffb800;
--ion-danger: #ff3860;
--ion-info: var(--ion-cyan);
/* --- Aliases for legacy/alt token names used by Svelte components.
Keep these resolving to theme-aware tokens so light themes don't
fall through to white-on-white fallback hex values. ----------------- */
--ion-error: var(--ion-danger);
--ion-warn: var(--ion-warning);
--ion-green: var(--ion-success);
--ion-red: var(--ion-danger);
--ion-blue: var(--ion-info);
--ion-purple: var(--ion-magenta);
--ion-teal: var(--ion-cyan);
--ion-accent: var(--ion-cyan);
--ion-surface: var(--ion-bg-surface);
--ion-surface-2: var(--ion-bg-surface-2);
--ion-surface-hover: var(--ion-bg-surface-2);
--ion-bg-hover: var(--ion-bg-surface-2);
--ion-bg-selected: var(--ion-bg-surface-3);
--ion-text-secondary: var(--ion-text-muted);
--ion-fg: var(--ion-text);
--ion-muted: var(--ion-text-muted);
--ion-font: var(--ion-font-body);
/* --- Backgrounds --- */
--ion-bg: #0a0a0f;
--ion-bg-darker: #050508;
--ion-bg-surface: rgba(255, 255, 255, 0.04);
--ion-bg-surface-2: rgba(255, 255, 255, 0.07);
--ion-bg-surface-3: rgba(255, 255, 255, 0.10);
/* --- Text --- */
--ion-text: #e8e8f0;
--ion-text-muted: #9ca3af;
--ion-text-dim: rgba(255, 255, 255, 0.30);
--ion-text-faint: rgba(255, 255, 255, 0.12);
/* --- Borders --- */
--ion-border: rgba(255, 255, 255, 0.08);
--ion-border-mid: rgba(255, 255, 255, 0.15);
--ion-border-focus: rgba(var(--ion-cyan-rgb), 0.50);
--ion-border-hover: rgba(var(--ion-cyan-rgb), 0.30);
/* --- Gradients --- */
--ion-gradient: linear-gradient(135deg, var(--ion-cyan) 0%, var(--ion-violet) 50%, var(--ion-magenta) 100%);
--ion-gradient-cm: linear-gradient(135deg, var(--ion-cyan) 0%, var(--ion-magenta) 100%);
--ion-gradient-cw: linear-gradient(135deg, var(--ion-cyan) 0%, var(--ion-violet-mid) 100%);
/* --- Glows --- */
--ion-glow-cyan: 0 0 20px rgba(var(--ion-cyan-rgb), 0.25);
--ion-glow-magenta: 0 0 20px rgba(var(--ion-magenta-rgb), 0.25);
--ion-glow-focus: 0 0 0 3px rgba(var(--ion-cyan-rgb), 0.12), inset 0 0 16px rgba(var(--ion-cyan-rgb), 0.03);
/* --- Typography --- */
--ion-font-display: 'Syne', sans-serif;
--ion-font-mono: 'Space Mono', monospace;
--ion-font-body: 'Work Sans', sans-serif;
/* Arabic / RTL stack — applied via html[lang^="ar"] or html.dir-rtl below.
Falls through to the Latin stack when not in an RTL locale. */
--ion-font-arabic: 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Cairo', 'Tajawal', 'Amiri', 'Segoe UI', system-ui, sans-serif;
/* Document direction. Read by JS via getComputedStyle when it needs to
branch behaviour (e.g. animation directions, drawer dock side). */
--ion-direction: ltr;
/* --- Sizing --- */
--ion-radius: 2px;
--ion-radius-md: 4px;
--ion-radius-lg: 8px;
/* --- Spacing --- */
--ion-sp-1: 4px;
--ion-sp-2: 8px;
--ion-sp-3: 12px;
--ion-sp-4: 16px;
--ion-sp-5: 20px;
--ion-sp-6: 24px;
--ion-sp-8: 32px;
--ion-sp-10: 40px;
/* Aliases used by components added in the file system / workbook sections */
--ion-space-1: 4px;
--ion-space-2: 8px;
--ion-space-3: 12px;
--ion-space-4: 16px;
--ion-space-5: 20px;
--ion-space-6: 24px;
--ion-space-7: 28px;
--ion-space-8: 32px;
--ion-space-10: 40px;
--ion-space-12: 48px;
/* --- Transitions --- */
--ion-t: 0.22s ease;
--ion-t-fast: 0.12s ease;
/* --- Z-index scale --- */
--ion-z-base: 1;
--ion-z-panel: 10;
--ion-z-overlay: 50;
--ion-z-modal: 100;
--ion-z-toast: 200;
/* --- ion-compare (plan 16, commits 1, 5) ---
Layout primitive + diff-mode tokens. Action tokens added in commit 6. */
--ion-compare-gutter: 4px;
--ion-compare-gutter-color: var(--ion-border, #2a2a3a);
--ion-compare-gutter-hover: var(--ion-cyan, #00e5ff);
--ion-diff-unchanged-opacity: 0.5;
--ion-diff-changed: var(--ion-warning, #ffb800);
--ion-diff-added: var(--ion-success, #00ff9d);
--ion-diff-removed: var(--ion-danger, #ff3860);
/* Action affordances (plan 16, commit 6) */
--ion-action-bar-bg: rgba(255, 255, 255, 0.03);
--ion-action-menu-bg: rgba(0, 0, 0, 0.92);
--ion-action-pending-bg: rgba(0, 0, 0, 0.85);
/* Surface tiers — used by kernel picker, tooltips, and overlays.
Named separately from bg-surface-* because they carry explicit
hex fallbacks in older component code. Override per-theme. */
--ion-surface-3: #16161f;
--ion-surface-4: #1a1a28;
/* Popup chrome — floating menus and submenus.
Centralised here so every theme can swap the dark glass in one place. */
--ion-popup-bg: rgba(10, 10, 20, 0.98);
--ion-popup-sub-bg: rgba(0, 0, 0, 0.40);
--ion-popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.60);
--ion-popup-border: var(--ion-border);
}
/* Diff-state helper classes for participants that opt to apply data-diff-state
on rendered elements (ion-graph, future ion-table). Keep the rules generic
so any descendant element with the attribute picks up the right colour. */
[data-diff-state="unchanged"] { opacity: var(--ion-diff-unchanged-opacity); }
[data-diff-state="matched"] { opacity: var(--ion-diff-unchanged-opacity); }
[data-diff-state="changed"] { outline: 2px solid var(--ion-diff-changed); }
[data-diff-state="added"] { outline: 2px solid var(--ion-diff-added); }
[data-diff-state="removed"] { outline: 2px solid var(--ion-diff-removed); }
/* ==========================================================================
2. RESET & BASE
========================================================================== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
-webkit-text-size-adjust: 100%;
background: var(--ion-bg, #0a0a0f);
}
/* ── Resolution-based font scaling ─────────────────────────────────────────
HiDPI screens (4K at 150 %+ Windows scaling = ≥1.25 dppx) keep 14 px;
lower-DPI screens (1080p at 100 % = ~1 dppx) get a 15 px base.
Because most UI text uses literal px values (not rem), we also explicitly
bump the dense mono labels that are hardest to read at low DPI. */
@media (max-resolution: 1.24dppx) {
html { font-size: 15px; }
/* Dense mono labels — bump by ~1 px each tier */
.ion-notif-panel-title,
.ion-notif-clear-btn,
.ion-user-dropdown-role,
.ion-admin-ws-pill { font-size: 10px; }
.ion-user-dropdown-notif-time,
.ion-user-dropdown-notif-desc,
.ion-user-dropdown-notif-details { font-size: 11px; }
.ion-admin-status { font-size: 12px; }
.ion-debug-panel { font-size: 12px; }
.ion-notif-filter-btn { font-size: 11px; }
/* Topbar tabs */
.ion-tab-label { font-size: 12px; }
.ion-tab-icon { font-size: 13px; }
}
/* ── RTL / Arabic locale support ──────────────────────────────────────────
Triggered by either:
- / lang="he" / lang="fa" / lang="ur" (locale-driven)
- / (explicit override)
ion.js applies these automatically when the user picks an RTL locale.
Components should prefer logical CSS properties (inset-inline-start,
margin-inline-end, padding-block-end, etc.) over physical left/right —
the few rules below are the global hooks for things logical properties
can't express on their own. */
html[lang="ar"],
html[lang^="ar-"],
html[lang="he"],
html[lang^="he-"],
html[lang="fa"],
html[lang^="fa-"],
html[lang="ur"],
html[lang^="ur-"],
html[dir="rtl"],
html.dir-rtl {
--ion-direction: rtl;
/* Arabic glyphs sit slightly taller than Latin; bump line-height so
diacritics don't clip and ascenders/descenders breathe. */
--ion-line-height: 1.75;
/* Swap the body/display fonts to the Arabic stack. Mono stays Latin —
code/SQL is overwhelmingly Latin even in Arabic UIs, and Arabic
monospace fonts are rare and inconsistent. */
--ion-font-display: var(--ion-font-arabic);
--ion-font-body: var(--ion-font-arabic);
}
/* When the document is RTL, mirror direction-implying SVG icons
(back/forward arrows, sort glyphs, expand carets pointing inline).
Components opt in by adding the .ion-icon-directional class. */
html[dir="rtl"] .ion-icon-directional,
html.dir-rtl .ion-icon-directional {
transform: scaleX(-1);
}
/* Logical arrow glyphs — wrap an arrow character in
← or →
in any inline template, and the rendered glyph follows the writing
mode. The default content matches LTR; the [dir="rtl"] override flips.
Keeping the original text inside the span is good for screen readers,
so we use ::before/::after to override the visual without removing
the original glyph. */
.ion-arrow-back,
.ion-arrow-fwd {
display: inline-block;
font-style: normal;
speak: never;
}
html[dir="rtl"] .ion-arrow-back,
html.dir-rtl .ion-arrow-back,
html[dir="rtl"] .ion-arrow-fwd,
html.dir-rtl .ion-arrow-fwd {
transform: scaleX(-1);
}
body {
font-family: var(--ion-font-body);
background: var(--ion-bg);
color: var(--ion-text);
line-height: var(--ion-line-height, 1.6);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--ion-cyan);
text-decoration: none;
transition: color var(--ion-t);
}
a:hover { color: #fff; }
/* Animated background grid (optional — add .ion-grid-bg to body) */
.ion-grid-bg::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(var(--ion-cyan-rgb), 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--ion-cyan-rgb), 0.025) 1px, transparent 1px);
background-size: 60px 60px;
animation: ion-grid-scroll 20s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes ion-grid-scroll {
0% { transform: translate(0, 0); }
100% { transform: translate(60px, 60px); }
}
/* ==========================================================================
3. SCROLLBARS
========================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ion-bg-darker); }
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ion-cyan-rgb), 0.35); }
/* ==========================================================================
4. TYPOGRAPHY
========================================================================== */
.ion-display {
font-family: var(--ion-font-display);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
}
.ion-mono {
font-family: var(--ion-font-mono);
font-size: 0.85em;
}
.ion-label-text {
font-family: var(--ion-font-mono);
font-size: 9px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ion-text-dim);
}
.ion-gradient-text {
background: var(--ion-gradient-cm);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: ion-gradient-shift 6s linear infinite;
}
@keyframes ion-gradient-shift {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
/* ==========================================================================
5. LAYOUT
========================================================================== */
.ion-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--ion-sp-10);
}
/* ==========================================================================
6. FORM CONTROLS — SHARED BASE
========================================================================== */
.ion-form-group {
display: flex;
flex-direction: column;
gap: var(--ion-sp-2);
margin-bottom: var(--ion-sp-4);
}
.ion-label {
display: block;
font-family: var(--ion-font-mono);
font-size: 9px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ion-text-dim);
user-select: none;
}
.ion-hint {
font-family: var(--ion-font-mono);
font-size: 10px;
color: var(--ion-text-faint);
margin-top: calc(-1 * var(--ion-sp-1));
}
.ion-error-text {
font-family: var(--ion-font-mono);
font-size: 10px;
color: var(--ion-danger);
margin-top: calc(-1 * var(--ion-sp-1));
}
/* ==========================================================================
7. INPUT — text / email / password / number / url / tel / search
========================================================================== */
.ion-input {
width: 100%;
background: var(--ion-bg-surface);
border: 1px solid var(--ion-border-mid);
border-radius: var(--ion-radius);
padding: 11px 14px;
color: var(--ion-text);
font-family: var(--ion-font-mono);
font-size: 13px;
outline: none;
transition: border-color var(--ion-t), background var(--ion-t), box-shadow var(--ion-t);
appearance: none;
}
.ion-input::placeholder { color: var(--ion-text-faint); }
.ion-input:hover {
border-color: var(--ion-border-hover);
}
.ion-input:focus {
border-color: var(--ion-border-focus);
background: rgba(var(--ion-cyan-rgb), 0.04);
box-shadow: var(--ion-glow-focus);
}
.ion-input--pw:focus {
border-color: rgba(var(--ion-magenta-rgb), 0.50);
background: rgba(var(--ion-magenta-rgb), 0.03);
box-shadow: 0 0 0 3px rgba(var(--ion-magenta-rgb), 0.10), inset 0 0 16px rgba(var(--ion-magenta-rgb), 0.02);
}
.ion-input:disabled,
.ion-input[readonly] {
opacity: 0.45;
cursor: not-allowed;
}
.ion-input--sm { padding: 7px 10px; font-size: 12px; }
.ion-input--lg { padding: 14px 18px; font-size: 15px; }
.ion-input--error {
border-color: var(--ion-danger);
box-shadow: 0 0 0 3px rgba(255, 56, 96, 0.10);
}
/* Input with icon wrapper */
.ion-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.ion-input-wrap .ion-input {
padding-inline-start: 38px;
}
.ion-input-icon {
position: absolute;
inset-inline-start: 12px;
color: var(--ion-text-dim);
pointer-events: none;
display: flex;
align-items: center;
}
/* ==========================================================================
8. TEXTAREA
========================================================================== */
.ion-textarea {
width: 100%;
background: var(--ion-bg-surface);
border: 1px solid var(--ion-border-mid);
border-radius: var(--ion-radius);
padding: 12px 14px;
color: var(--ion-text);
font-family: var(--ion-font-mono);
font-size: 12px;
line-height: 1.7;
outline: none;
resize: vertical;
min-height: 100px;
transition: border-color var(--ion-t), background var(--ion-t), box-shadow var(--ion-t);
}
.ion-textarea::placeholder { color: var(--ion-text-faint); }
.ion-textarea:hover { border-color: var(--ion-border-hover); }
.ion-textarea:focus {
border-color: var(--ion-border-focus);
background: rgba(var(--ion-cyan-rgb), 0.04);
box-shadow: var(--ion-glow-focus);
}
/* Code textarea — no resize, fixed-height */
.ion-textarea--code {
resize: none;
font-size: 13px;
tab-size: 2;
line-height: 1.5;
}
/* ==========================================================================
9. SELECT
========================================================================== */
.ion-select {
width: 100%;
background: var(--ion-bg-surface);
border: 1px solid var(--ion-border-mid);
border-radius: var(--ion-radius);
padding: 11px 36px 11px 14px;
color: var(--ion-text);
font-family: var(--ion-font-mono);
font-size: 13px;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color var(--ion-t), background-color var(--ion-t), box-shadow var(--ion-t);
}
.ion-select option {
background: #111118;
color: var(--ion-text);
}
.ion-select:hover { border-color: var(--ion-border-hover); }
.ion-select:focus {
border-color: var(--ion-border-focus);
box-shadow: var(--ion-glow-focus);
}
/* ==========================================================================
10. CHECKBOX
========================================================================== */
.ion-checkbox-wrap {
display: inline-flex;
align-items: center;
gap: var(--ion-sp-2);
cursor: pointer;
user-select: none;
}
.ion-checkbox {
width: 16px;
height: 16px;
background: var(--ion-bg-surface);
border: 1px solid var(--ion-border-mid);
border-radius: var(--ion-radius);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
position: relative;
flex-shrink: 0;
transition: background var(--ion-t), border-color var(--ion-t), box-shadow var(--ion-t);
}
.ion-checkbox:hover { border-color: var(--ion-border-hover); }
.ion-checkbox:focus-visible {
outline: none;
box-shadow: var(--ion-glow-focus);
}
.ion-checkbox:checked {
background: var(--ion-gradient-cm);
border-color: transparent;
}
.ion-checkbox:checked::after {
content: '';
position: absolute;
inset-inline-start: 4px;
top: 1.5px;
width: 6px;
height: 9px;
border: 1.5px solid #000;
border-top: none;
border-inline-start: none;
transform: rotate(40deg);
}
.ion-checkbox-label {
font-family: var(--ion-font-mono);
font-size: 11px;
color: var(--ion-text-dim);
letter-spacing: 0.06em;
}
/* ==========================================================================
11. RADIO
========================================================================== */
.ion-radio-wrap {
display: inline-flex;
align-items: center;
gap: var(--ion-sp-2);
cursor: pointer;
user-select: none;
}
.ion-radio {
width: 16px;
height: 16px;
background: var(--ion-bg-surface);
border: 1px solid var(--ion-border-mid);
border-radius: 50%;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
position: relative;
flex-shrink: 0;
transition: border-color var(--ion-t), box-shadow var(--ion-t);
}
.ion-radio:hover { border-color: var(--ion-border-hover); }
.ion-radio:focus-visible {
outline: none;
box-shadow: var(--ion-glow-focus);
}
.ion-radio:checked {
border-color: var(--ion-cyan);
}
.ion-radio:checked::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--ion-gradient-cm);
}
/* ==========================================================================
12. TOGGLE SWITCH
========================================================================== */
.ion-toggle-wrap {
display: inline-flex;
align-items: center;
gap: var(--ion-sp-2);
cursor: pointer;
user-select: none;
}
.ion-toggle {
position: relative;
width: 36px;
height: 20px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background: var(--ion-bg-surface-3);
border: 1px solid var(--ion-border-mid);
border-radius: 10px;
transition: background var(--ion-t), border-color var(--ion-t), box-shadow var(--ion-t);
flex-shrink: 0;
}
.ion-toggle::after {
content: '';
position: absolute;
top: 2px;
inset-inline-start: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--ion-text-dim);
transition: transform var(--ion-t), background var(--ion-t);
}
.ion-toggle:checked {
background: linear-gradient(135deg, var(--ion-cyan), var(--ion-magenta));
border-color: transparent;
box-shadow: 0 0 12px rgba(var(--ion-cyan-rgb), 0.20);
}
.ion-toggle:checked::after {
transform: translateX(16px);
background: #000;
}
.ion-toggle:focus-visible {
outline: none;
box-shadow: var(--ion-glow-focus);
}
/* ==========================================================================
13. RANGE SLIDER
========================================================================== */
.ion-range {
width: 100%;
height: 4px;
appearance: none;
-webkit-appearance: none;
background: var(--ion-bg-surface-3);
border-radius: 2px;
outline: none;
cursor: pointer;
accent-color: var(--ion-cyan);
}
.ion-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ion-gradient-cm);
cursor: pointer;
box-shadow: 0 0 8px rgba(var(--ion-cyan-rgb), 0.40);
transition: box-shadow var(--ion-t);
}
.ion-range::-webkit-slider-thumb:hover {
box-shadow: 0 0 14px rgba(var(--ion-cyan-rgb), 0.60);
}
.ion-range::-moz-range-thumb {
width: 16px;
height: 16px;
border: none;
border-radius: 50%;
background: var(--ion-gradient-cm);
cursor: pointer;
}
/* ==========================================================================
14. FILE DROP ZONE
========================================================================== */
.ion-file-drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ion-sp-2);
padding: var(--ion-sp-8);
background: var(--ion-bg-surface);
border: 1px dashed var(--ion-border-mid);
border-radius: var(--ion-radius-md);
cursor: pointer;
text-align: center;
transition: border-color var(--ion-t), background var(--ion-t);
}
.ion-file-drop:hover,
.ion-file-drop--active {
border-color: var(--ion-border-focus);
background: rgba(var(--ion-cyan-rgb), 0.04);
}
.ion-file-drop input[type="file"] {
display: none;
}
.ion-file-drop-icon {
font-size: 28px;
opacity: 0.5;
}
.ion-file-drop-text {
font-family: var(--ion-font-mono);
font-size: 11px;
color: var(--ion-text-dim);
letter-spacing: 0.08em;
}
/* ==========================================================================
15. BUTTONS
========================================================================== */
.ion-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ion-sp-2);
padding: 11px 24px;
border: none;
border-radius: var(--ion-radius);
font-family: var(--ion-font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: transform var(--ion-t-fast), box-shadow var(--ion-t), background-position var(--ion-t), opacity var(--ion-t);
user-select: none;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.ion-btn:disabled {
opacity: 0.40;
cursor: not-allowed;
pointer-events: none;
}
.ion-btn:active { transform: scale(0.98); }
/* Shimmer overlay on hover */
.ion-btn::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
transition: left 0.45s ease;
}
.ion-btn:hover::before { inset-inline-start: 100%; }
/* Primary */
.ion-btn-primary {
background: var(--ion-gradient);
background-size: 200% 100%;
color: #000;
box-shadow: 0 4px 24px rgba(var(--ion-cyan-rgb), 0.18), 0 4px 40px rgba(var(--ion-magenta-rgb), 0.12);
}
.ion-btn-primary:hover {
background-position: 100% 0;
box-shadow: 0 6px 32px rgba(var(--ion-cyan-rgb), 0.30), 0 6px 56px rgba(var(--ion-magenta-rgb), 0.20);
transform: translateY(-1px);
}
/* Secondary */
.ion-btn-secondary {
background: transparent;
color: var(--ion-cyan);
border: 1px solid var(--ion-cyan);
box-shadow: 0 0 0 0 transparent;
}
.ion-btn-secondary:hover {
background: rgba(var(--ion-cyan-rgb), 0.08);
box-shadow: var(--ion-glow-cyan);
transform: translateY(-1px);
}
/* Ghost */
.ion-btn-ghost {
background: var(--ion-bg-surface);
color: var(--ion-text-muted);
border: 1px solid var(--ion-border);
}
.ion-btn-ghost:hover {
background: var(--ion-bg-surface-2);
color: var(--ion-text);
border-color: var(--ion-border-mid);
}
/* Danger */
.ion-btn-danger {
background: rgba(255, 56, 96, 0.12);
color: var(--ion-danger);
border: 1px solid rgba(255, 56, 96, 0.30);
}
.ion-btn-danger:hover {
background: rgba(255, 56, 96, 0.20);
box-shadow: 0 0 18px rgba(255, 56, 96, 0.25);
}
/* Icon-only */
.ion-btn-icon {
padding: 8px;
width: 36px;
height: 36px;
border-radius: var(--ion-radius);
}
.ion-btn-icon.ion-btn-sm { width: 28px; height: 28px; padding: 5px; }
.ion-btn-icon.ion-btn-lg { width: 44px; height: 44px; padding: 11px; }
/* Sizes */
.ion-btn-sm { padding: 7px 16px; font-size: 10px; }
.ion-btn-lg { padding: 14px 32px; font-size: 14px; }
.ion-btn-full { width: 100%; }
/* Button group */
.ion-btn-group {
display: inline-flex;
gap: 0;
}
.ion-btn-group .ion-btn {
border-radius: 0;
}
.ion-btn-group .ion-btn:first-child { border-radius: var(--ion-radius) 0 0 var(--ion-radius); }
.ion-btn-group .ion-btn:last-child { border-radius: 0 var(--ion-radius) var(--ion-radius) 0; }
/* ==========================================================================
16. CARDS & PANELS
========================================================================== */
.ion-card {
background: var(--ion-bg-surface);
border: 1px solid var(--ion-border);
border-radius: var(--ion-radius-md);
padding: var(--ion-sp-6);
position: relative;
transition: border-color var(--ion-t), box-shadow var(--ion-t);
}
.ion-card:hover {
border-color: var(--ion-border-hover);
box-shadow: var(--ion-glow-cyan);
}
.ion-card-title {
font-family: var(--ion-font-display);
font-size: 16px;
font-weight: 700;
margin-bottom: var(--ion-sp-3);
}
/* Glass card — used for modals, login */
.ion-glass {
background: rgba(0, 0, 0, 0.60);
border: 1px solid var(--ion-border);
border-radius: var(--ion-radius);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 0 0 1px rgba(var(--ion-cyan-rgb), 0.07),
0 32px 80px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Top gradient accent line */
.ion-card-accent::before {
content: '';
position: absolute;
top: 0; inset-inline-start: 0; inset-inline-end: 0;
height: 2px;
background: var(--ion-gradient-cm);
background-size: 200% 100%;
animation: ion-gradient-shift 4s linear infinite;
border-radius: var(--ion-radius) var(--ion-radius) 0 0;
}
/* Panel — full-height sidebar or content panel */
.ion-panel {
background: rgba(0, 0, 0, 0.40);
border-inline-end: 1px solid var(--ion-border);
height: 100%;
overflow-y: auto;
position: relative;
}
/* ==========================================================================
17. TAB BAR
========================================================================== */
.ion-tab-bar {
display: flex;
align-items: stretch;
background: var(--ion-bg-darker);
border-bottom: 1px solid var(--ion-border);
overflow-x: auto;
scrollbar-width: none;
height: 36px;
flex-shrink: 0;
}
.ion-tab-bar::-webkit-scrollbar { display: none; }
.ion-tab {
display: inline-flex;
align-items: center;
gap: var(--ion-sp-2);
padding: 0 var(--ion-sp-4);
min-width: 140px;
max-width: 220px;
border-inline-end: 1px solid var(--ion-border);
font-family: var(--ion-font-mono);
font-size: 11px;
color: var(--ion-text-dim);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: transparent;
transition: background var(--ion-t), color var(--ion-t);
user-select: none;
position: relative;
}
.ion-tab:hover {
background: var(--ion-bg-surface);
color: var(--ion-text);
}
.ion-tab--active {
background: var(--ion-bg);
color: var(--ion-cyan);
border-bottom: 2px solid var(--ion-cyan);
}
/* The title is the flexible element: it shrinks and ellipsises so the
close button (flex-shrink: 0, below) is never pushed past the tab's
max-width into the parent's overflow:hidden clip. min-width:0 is the
load-bearing line — a flex item defaults to min-width:auto, which
refuses to shrink below the intrinsic width of its nowrap text, so a
long tab name would otherwise force the ✕ out of view. */
.ion-tab-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ion-tab-close {
margin-inline-start: auto;
flex-shrink: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: 0;
transition: opacity var(--ion-t), background var(--ion-t);
font-size: 10px;
}
.ion-tab:hover .ion-tab-close { opacity: 0.6; }
.ion-tab-close:hover { opacity: 1 !important; background: rgba(255,255,255,0.1); }
.ion-tab-new {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
flex-shrink: 0;
color: var(--ion-text-dim);
cursor: pointer;
font-size: 18px;
font-weight: 300;
transition: color var(--ion-t), background var(--ion-t);
}
.ion-tab-new:hover { color: var(--ion-cyan); background: var(--ion-bg-surface); }
/* ==========================================================================
18. TOP BAR
========================================================================== */
.ion-top-bar {
display: flex;
align-items: center;
height: 48px;
padding: 0 var(--ion-sp-4);
background: var(--ion-top-bar-bg, rgba(0, 0, 0, 0.60));
border-bottom: 1px solid var(--ion-border);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: var(--ion-z-panel);
flex-shrink: 0;
}
/* Page-level fullscreen — toggled by ion.setFullscreen(token, active) when a
component (workspace, cell-detail drawer, future viewers) takes over the
viewport. We hide every piece of shell chrome that would otherwise bleed
over the fullscreen element's edges; the requesting element supplies its
own opaque background so the underlying page doesn't show through.
ion.css class-based rules don't cascade into shadow DOM, but these targets
all live in the main document so a single rule covers everything.
Restoring the class removes all of these effects in one step — there is no
per-component cleanup beyond `ion.setFullscreen(token, false)`. */
body.ion-fullscreen-active .ion-top-bar,
body.ion-fullscreen-active .ion-ambient-host,
body.ion-fullscreen-active .ion-agent-debug-drawer,
body.ion-fullscreen-active .ion-debug-panel {
display: none !important;
}
body.ion-fullscreen-active .ion-app-main {
padding: 0 !important;
}
.ion-top-bar-brand {
font-family: var(--ion-font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.03em;
background: var(--ion-gradient-cm);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: ion-gradient-shift 6s linear infinite;
line-height: 1;
user-select: none;
}
/* Trademark / registered mark — upgrade ™ → ® by changing --ion-brand-mark in :root. */
.ion-brand-tm::after {
content: var(--ion-brand-mark, "™");
font-size: 0.45em;
vertical-align: super;
font-weight: 400;
letter-spacing: 0;
font-family: var(--ion-font-mono);
color: var(--ion-text-muted, rgba(216, 216, 232, 0.55));
}
.ion-top-bar-spacer { flex: 1; }
.ion-top-bar-actions {
display: flex;
align-items: center;
gap: var(--ion-sp-2);
}
/* ==========================================================================
19. NAVIGATION (sidebar)
========================================================================== */
.ion-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--ion-sp-2);
}
.ion-nav-item {
display: flex;
align-items: center;
gap: var(--ion-sp-2);
padding: var(--ion-sp-2) var(--ion-sp-3);
border-radius: var(--ion-radius);
font-family: var(--ion-font-mono);
font-size: 11px;
color: var(--ion-text-muted);
cursor: pointer;
text-decoration: none;
transition: background var(--ion-t), color var(--ion-t);
user-select: none;
}
.ion-nav-item:hover {
background: var(--ion-bg-surface-2);
color: var(--ion-text);
}
.ion-nav-item--active {
background: rgba(var(--ion-cyan-rgb), 0.08);
color: var(--ion-cyan);
border-inline-start: 2px solid var(--ion-cyan);
padding-inline-start: calc(var(--ion-sp-3) - 2px);
}
.ion-nav-section {
font-family: var(--ion-font-mono);
font-size: 8px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ion-text-faint);
padding: var(--ion-sp-3) var(--ion-sp-3) var(--ion-sp-1);
user-select: none;
}
/* ==========================================================================
20. TABLE
========================================================================== */
.ion-table-wrap {
overflow-x: auto;
border: 1px solid var(--ion-border);
border-radius: var(--ion-radius-md);
}
.ion-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ion-table th {
background: var(--ion-bg-surface-2);
font-family: var(--ion-font-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ion-text-dim);
padding: 10px 14px;
text-align: start;
border-bottom: 1px solid var(--ion-border);
white-space: nowrap;
}
.ion-table td {
padding: 9px 14px;
border-bottom: 1px solid var(--ion-border);
color: var(--ion-text-muted);
font-family: var(--ion-font-mono);
font-size: 12px;
}
.ion-table tbody tr:hover td {
background: var(--ion-bg-surface);
color: var(--ion-text);
}
.ion-table tbody tr:last-child td { border-bottom: none; }
/* Numeric cells right-aligned */
.ion-table td.num,
.ion-table th.num { text-align: end; }
/* ==========================================================================
21. BADGES & TAGS
========================================================================== */
.ion-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 2px;
font-family: var(--ion-font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
}
.ion-badge-cyan { background: rgba(var(--ion-cyan-rgb), 0.12); color: var(--ion-cyan); }
.ion-badge-magenta { background: rgba(var(--ion-magenta-rgb), 0.12); color: var(--ion-magenta); }
.ion-badge-success { background: rgba(0, 255, 157, 0.12); color: var(--ion-success); }
.ion-badge-warning { background: rgba(255, 184, 0, 0.12); color: var(--ion-warning); }
.ion-badge-danger { background: rgba(255, 56, 96, 0.12); color: var(--ion-danger); }
.ion-badge-muted { background: var(--ion-bg-surface-2); color: var(--ion-text-dim); }
.ion-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 99px;
border: 1px solid var(--ion-border-mid);
font-family: var(--ion-font-mono);
font-size: 10px;
color: var(--ion-text-dim);
background: var(--ion-bg-surface);
cursor: default;
transition: border-color var(--ion-t), color var(--ion-t);
}
.ion-tag:hover { border-color: var(--ion-border-focus); color: var(--ion-text); }
/* ==========================================================================
22. PROGRESS BAR
========================================================================== */
.ion-progress {
width: 100%;
height: 4px;
background: var(--ion-bg-surface-3);
border-radius: 2px;
overflow: hidden;
}
.ion-progress-bar {
height: 100%;
background: var(--ion-gradient-cm);
background-size: 200% 100%;
border-radius: 2px;
transition: width 0.4s ease;
animation: ion-gradient-shift 3s linear infinite;
}
.ion-progress--indeterminate .ion-progress-bar {
width: 40% !important;
animation: ion-progress-slide 1.4s ease-in-out infinite, ion-gradient-shift 3s linear infinite;
}
@keyframes ion-progress-slide {
0% { transform: translateX(-150%); }
100% { transform: translateX(350%); }
}
/* ==========================================================================
23. SPINNER
========================================================================== */
.ion-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--ion-border-mid);
border-top-color: var(--ion-cyan);
border-radius: 50%;
animation: ion-spin 0.75s linear infinite;
}
.ion-spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.ion-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes ion-spin {
to { transform: rotate(360deg); }
}
/* ==========================================================================
24. TOAST NOTIFICATIONS
========================================================================== */
.ion-toast-host {
position: fixed;
bottom: var(--ion-sp-6);
inset-inline-end: var(--ion-sp-6);
display: flex;
flex-direction: column;
gap: var(--ion-sp-2);
z-index: var(--ion-z-toast);
pointer-events: none;
}
.ion-toast {
display: flex;
align-items: flex-start;
gap: var(--ion-sp-3);
padding: var(--ion-sp-3) var(--ion-sp-4);
min-width: 280px;
max-width: 380px;
background: rgba(10, 10, 20, 0.95);
border: 1px solid var(--ion-border);
border-radius: var(--ion-radius-md);
backdrop-filter: blur(16px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
pointer-events: all;
animation: ion-toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ion-toast-in {
from { opacity: 0; transform: translateX(32px); }
to { opacity: 1; transform: translateX(0); }
}
.ion-toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ion-toast-body { flex: 1; min-width: 0; }
.ion-toast-title {
font-family: var(--ion-font-mono);
font-size: 11px;
font-weight: 700;
color: var(--ion-text);
margin-bottom: 2px;
}
.ion-toast-message {
font-size: 12px;
color: var(--ion-text-muted);
line-height: 1.5;
}
.ion-toast--info { border-inline-start: 3px solid var(--ion-cyan); }
.ion-toast--success { border-inline-start: 3px solid var(--ion-success); }
.ion-toast--warning { border-inline-start: 3px solid var(--ion-warning); }
.ion-toast--error { border-inline-start: 3px solid var(--ion-danger); }
/* Toast: source badge */
.ion-toast-source {
font-family: var(--ion-font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ion-text-muted);
margin-bottom: 2px;
}
/* Toast: expandable details */
.ion-toast-details {
font-family: var(--ion-font-mono);
font-size: 11px;
color: var(--ion-text-muted);
margin: 4px 0 0;
padding: 4px 6px;
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
white-space: pre-wrap;
word-break: break-word;
max-height: 200px;
overflow-y: auto;
}
.ion-toast-expand {
background: none;
border: none;
color: var(--ion-cyan);
font-family: var(--ion-font-mono);
font-size: 10px;
cursor: pointer;
padding: 2px 0;
margin-top: 2px;
}
.ion-toast-expand:hover { text-decoration: underline; }
/* Global upload progress widget — singleton, fixed bottom-right */
#ion-upload-progress {
position: fixed;
bottom: calc(var(--ion-toast-offset, 80px) + 8px);
inset-inline-end: 16px;
z-index: 9100;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
min-width: 220px;
max-width: 320px;
background: var(--ion-bg-surface-2, #1a1a2e);
border: 1px solid var(--ion-cyan, #00e5ff);
border-radius: var(--ion-radius-md, 8px);
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
font-family: var(--ion-font-mono, monospace);
font-size: 0.78rem;
color: var(--ion-text, #e0e0e0);
}
#ion-upload-progress[hidden] { display: none; }
.ion-up-icon {
font-size: 1rem;
color: var(--ion-cyan, #00e5ff);
flex-shrink: 0;
margin-top: 1px;
}
.ion-up-body { flex: 1; min-width: 0; }
.ion-up-title {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.ion-up-sub {
color: var(--ion-text-muted, #888);
margin-bottom: 6px;
}
.ion-up-bar-wrap {
height: 3px;
background: var(--ion-bg-surface-3, rgba(255,255,255,0.08));
border-radius: 2px;
overflow: hidden;
}
.ion-up-bar-fill {
height: 100%;
width: 0%;
background: var(--ion-gradient-cm, linear-gradient(90deg, #00e5ff, #bf00ff));
border-radius: 2px;
transition: width 0.15s linear;
}
/* ==========================================================================
24c. EXECUTION PROGRESS BAR
========================================================================== */
#ion-exec-progress {
position: fixed;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 2px;
z-index: var(--ion-z-toast);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
#ion-exec-progress.active {
opacity: 1;
}
.ion-exec-progress__fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--ion-cyan), var(--ion-magenta));
transition: width 0.3s ease-out;
border-radius: 0 1px 1px 0;
}
/* ==========================================================================
24b. NOTIFICATION PANEL
========================================================================== */
.ion-notif-bell {
position: relative;
cursor: pointer;
font-size: 16px;
padding: 4px 8px;
color: var(--ion-text-muted);
background: none;
border: none;
}
.ion-notif-bell:hover { color: var(--ion-text); }
.ion-notif-badge {
position: absolute;
top: 0; inset-inline-end: 2px;
/* Default = info/cyan; the worst-unread modifier below overrides it. Red is
no longer the default — it now means an actual error is unread. */
background: var(--ion-info);
color: #fff;
font-size: 9px;
font-weight: 700;
min-width: 14px; height: 14px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
padding: 0 3px;
}
/* Badge colour reflects the worst unread notification severity.
error (red) > warning (orange) > success (green) > info (cyan). */
.ion-notif-badge--info { background: var(--ion-info); }
.ion-notif-badge--success { background: var(--ion-success); color: var(--ion-bg); }
.ion-notif-badge--warning { background: var(--ion-warning); color: var(--ion-bg); }
.ion-notif-badge--error { background: var(--ion-danger); }
.ion-notif-panel {
position: fixed;
top: 40px; inset-inline-end: 16px;
width: 380px;
max-height: 480px;
overflow-y: auto;
background: rgba(10, 10, 20, 0.97);
border: 1px solid var(--ion-border);
border-radius: var(--ion-radius-md);
backdrop-filter: blur(16px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
z-index: var(--ion-z-toast);
padding: 8px 0;
}
.ion-notif-empty {
padding: 24px;
text-align: center;
color: var(--ion-text-muted);
font-size: 12px;
}
.ion-notif-item {
display: flex;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--ion-border);
}
.ion-notif-item:last-child { border-bottom: none; }
.ion-notif-unread { background: rgba(var(--ion-cyan-rgb), 0.04); }
.ion-notif-item-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.ion-notif-item--error .ion-notif-item-icon { color: var(--ion-danger); }
.ion-notif-item--warning .ion-notif-item-icon { color: var(--ion-warning); }
.ion-notif-item--success .ion-notif-item-icon { color: var(--ion-success); }
.ion-notif-item--info .ion-notif-item-icon { color: var(--ion-cyan); }
.ion-notif-item-body { flex: 1; min-width: 0; }
.ion-notif-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
.ion-notif-item-source {
font-family: var(--ion-font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ion-text-muted);
}
.ion-notif-item-time {
font-family: var(--ion-font-mono);
font-size: 9px;
color: var(--ion-text-muted);
}
.ion-notif-item-title {
font-family: var(--ion-font-mono);
font-size: 11px;
font-weight: 700;
color: var(--ion-text);
}
.ion-notif-item-desc {
font-size: 11px;
color: var(--ion-text-muted);
line-height: 1.4;
}
.ion-notif-item-details {
font-family: var(--ion-font-mono);
font-size: 10px;
color: var(--ion-text-muted);
margin-top: 4px;
padding: 4px 6px;
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
white-space: pre-wrap;
word-break: break-word;
max-height: 120px;
overflow-y: auto;
}
/* ==========================================================================
25. MODAL
========================================================================== */
.ion-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.70);
backdrop-filter: blur(4px);
z-index: var(--ion-z-modal);
display: flex;
align-items: center;
justify-content: center;
animation: ion-fade-in 0.2s ease both;
}
@keyframes ion-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.ion-modal {
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
animation: ion-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ion-modal-in {
from { opacity: 0; transform: scale(0.95) translateY(16px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.ion-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ion-sp-5) var(--ion-sp-6);
border-bottom: 1px solid var(--ion-border);
}
.ion-modal-title {
font-family: var(--ion-font-display);
font-size: 16px;
font-weight: 700;
}
.ion-modal-close {
background: none;
border: none;
color: var(--ion-text-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 0 var(--ion-sp-1);
transition: color 0.15s;
}
.ion-modal-close:hover { color: var(--ion-text); }
.ion-modal-body { padding: var(--ion-sp-6); }
.ion-modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--ion-sp-2);
padding: var(--ion-sp-4) var(--ion-sp-6);
border-top: 1px solid var(--ion-border);
}
/* Live MM:SS countdown in the session-expiry warning modal. */
.ion-session-countdown {
margin: var(--ion-sp-3) 0 0;
font-family: var(--ion-font-mono);
font-size: 22px;
font-weight: 700;
color: var(--ion-cyan);
letter-spacing: 0.02em;
}
/* ==========================================================================
26. ALERT BANNERS
========================================================================== */
.ion-alert {
display: flex;
align-items: flex-start;
gap: var(--ion-sp-3);
padding: var(--ion-sp-3) var(--ion-sp-4);
border-radius: var(--ion-radius);
border: 1px solid;
font-size: 13px;
line-height: 1.5;
margin-bottom: var(--ion-sp-4);
}
.ion-alert--info { border-color: rgba(var(--ion-cyan-rgb), 0.25); background: rgba(var(--ion-cyan-rgb), 0.05); color: var(--ion-cyan); }
.ion-alert--success { border-color: rgba(0,255,157,0.25); background: rgba(0,255,157,0.05); color: var(--ion-success); }
.ion-alert--warning { border-color: rgba(255,184,0,0.25); background: rgba(255,184,0,0.05); color: var(--ion-warning); }
.ion-alert--error { border-color: rgba(255,56,96,0.25); background: rgba(255,56,96,0.05); color: var(--ion-danger); }
/* ==========================================================================
27. CODE BLOCK
========================================================================== */
.ion-code {
background: var(--ion-bg-darker);
border: 1px solid var(--ion-border);
border-radius: var(--ion-radius-md);
padding: var(--ion-sp-4);
font-family: var(--ion-font-mono);
font-size: 12px;
line-height: 1.7;
color: var(--ion-text-muted);
overflow-x: auto;
tab-size: 2;
}
.ion-code-inline {
font-family: var(--ion-font-mono);
font-size: 0.88em;
background: var(--ion-bg-surface-2);
border: 1px solid var(--ion-border);
border-radius: var(--ion-radius);
padding: 1px 6px;
color: var(--ion-cyan);
}
/* ==========================================================================
28. DIVIDER
========================================================================== */
.ion-divider {
border: none;
border-top: 1px solid var(--ion-border);
margin: var(--ion-sp-4) 0;
}
.ion-divider-label {
display: flex;
align-items: center;
gap: var(--ion-sp-3);
margin: var(--ion-sp-4) 0;
}
.ion-divider-label::before,
.ion-divider-label::after {
content: '';
flex: 1;
border-top: 1px solid var(--ion-border);
}
.ion-divider-label span {
font-family: var(--ion-font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ion-text-faint);
white-space: nowrap;
}
/* ==========================================================================
29. LOGIN PAGE COMPONENTS
========================================================================== */
.ion-login-root {
width: 100%;
min-height: 100vh;
background: var(--ion-bg-darker);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
font-family: var(--ion-font-display);
}
canvas#ion-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Orbital rings */
.ion-orbital-rings {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.ion-ring {
position: absolute;
border-radius: 50%;
border: 1px solid transparent;
}
.ion-ring-1 {
width: 420px; height: 420px;
border-color: rgba(var(--ion-cyan-rgb), 0.10);
animation: ion-rotate 18s linear infinite;
}
.ion-ring-2 {
width: 320px; height: 320px;
border-color: rgba(var(--ion-magenta-rgb), 0.08);
animation: ion-rotate 12s linear infinite reverse;
}
.ion-ring-3 {
width: 520px; height: 220px;
border-color: rgba(0, 200, 255, 0.05);
animation: ion-rotate-3 20s linear infinite;
transform: rotateX(70deg);
}
.ion-ring-dot {
position: absolute;
width: 5px; height: 5px;
border-radius: 50%;
top: -2.5px; inset-inline-start: calc(50% - 2.5px);
box-shadow: 0 0 8px currentColor;
}
.ion-ring-1 .ion-ring-dot { background: var(--ion-cyan); color: var(--ion-cyan); }
.ion-ring-2 .ion-ring-dot { background: var(--ion-magenta); color: var(--ion-magenta); }
.ion-nucleus {
position: absolute;
width: 14px; height: 14px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, var(--ion-cyan) 50%, var(--ion-magenta) 100%);
box-shadow: 0 0 20px var(--ion-cyan), 0 0 40px var(--ion-magenta), 0 0 60px rgba(var(--ion-cyan-rgb), 0.3);
animation: ion-nucleus-pulse 3s ease-in-out infinite;
z-index: 2;
}
.ion-scan-line {
position: absolute;
inset-inline-start: 0; inset-inline-end: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--ion-cyan-rgb), 0.12), rgba(var(--ion-magenta-rgb), 0.12), transparent);
animation: ion-scan 8s linear infinite;
z-index: 3;
pointer-events: none;
}
/* Login card */
.ion-login-card {
position: relative;
z-index: 10;
width: 380px;
padding: 44px 40px 40px;
animation: ion-card-in 1.2s cubic-bezier(0.16,1,0.3,1) both;
}
.ion-login-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 36px;
}
.ion-login-eyebrow {
font-family: var(--ion-font-mono);
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.28);
margin-bottom: 8px;
}
.ion-login-product {
font-family: var(--ion-font-display);
font-size: 52px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
background: var(--ion-gradient);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: ion-login-product-shift 7s ease-in-out infinite;
}
@keyframes ion-login-product-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.ion-login-tagline {
font-family: var(--ion-font-mono);
font-size: 9px;
letter-spacing: 0.12em;
color: rgba(var(--ion-cyan-rgb), 0.40);
margin-top: 6px;
text-transform: uppercase;
}
.ion-login-footer {
display: flex;
align-items: center;
justify-content: center;
margin-top: var(--ion-sp-6);
gap: 6px;
}
.ion-login-footer-text {
font-family: var(--ion-font-mono);
font-size: 9px;
color: rgba(255,255,255,0.20);
letter-spacing: 0.10em;
text-transform: uppercase;
}
.ion-login-footer-link {
font-family: var(--ion-font-mono);
font-size: 9px;
color: rgba(var(--ion-magenta-rgb), 0.55);
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: color var(--ion-t);
}
.ion-login-footer-link:hover { color: rgba(var(--ion-magenta-rgb), 1); }
.ion-watermark {
position: absolute;
bottom: 20px;
inset-inline-start: 50%;
transform: translateX(-50%);
font-family: var(--ion-font-mono);
font-size: 8px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.07);
z-index: 5;
white-space: nowrap;
}
/* OAuth2 provider buttons */
.ion-oauth-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ion-sp-2);
width: 100%;
padding: 14px 32px;
background: var(--ion-bg-surface);
border: 1px solid var(--ion-border-mid);
border-radius: var(--ion-radius);
color: var(--ion-text-muted);
font-family: var(--ion-font-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
text-decoration: none;
transition: border-color var(--ion-t), background var(--ion-t), color var(--ion-t);
margin-bottom: var(--ion-sp-2);
}
.ion-oauth-btn:hover {
border-color: var(--ion-border-focus);
background: var(--ion-bg-surface-2);
color: var(--ion-text);
}
.ion-oauth-btn-icon {
height: 32px;
}
/* ==========================================================================
30. APPLICATION SHELL
========================================================================== */
.ion-app {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.ion-app-body {
display: flex;
flex: 1;
overflow: hidden;
}
.ion-app-sidebar {
width: 220px;
flex-shrink: 0;
border-inline-end: 1px solid var(--ion-border);
overflow-y: auto;
background: rgba(0, 0, 0, 0.30);
transition: width var(--ion-t);
}
.ion-app-sidebar--collapsed { width: 48px; }
.ion-app-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ion-content-area {
flex: 1;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* Single shared animated backdrop behind all tabs — initialised once in ion.js
and survives tab/file navigations. Replaces the per-tab canvas that used to
live inside new_tab.html and would reset on every navigation. */
.ion-app-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* Per-tab content panels (created dynamically by ion.js) */
.ion-tab-content {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
/* Above the shared .ion-app-bg backdrop. */
z-index: 1;
padding: var(--ion-sp-6);
display: flex;
flex-direction: column;
}
/* HTMX loading indicator */
.ion-content-area.htmx-request::after {
content: '';
position: absolute;
top: 0; inset-inline-start: 0; inset-inline-end: 0;
height: 2px;
background: var(--ion-gradient-cm);
background-size: 200% 100%;
animation: ion-gradient-shift 1s linear infinite, ion-progress-slide 1.2s ease-in-out infinite;
}
/* ==========================================================================
31. HTMX INTEGRATION
========================================================================== */
/* Hide elements while HTMX is swapping */
.htmx-swapping { opacity: 0; transition: opacity 0.15s ease; }
.htmx-settling { opacity: 0; }
.htmx-added { animation: ion-fade-in 0.25s ease both; }
/* Indicator shown on htmx-request parent */
[hx-indicator].htmx-request .ion-spinner,
[data-hx-indicator].htmx-request .ion-spinner { display: inline-block; }
.ion-spinner { display: none; }
/* ==========================================================================
32. KEYFRAMES
========================================================================== */
@keyframes ion-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes ion-rotate-3 {
from { transform: rotateX(70deg) rotateZ(0deg); }
to { transform: rotateX(70deg) rotateZ(360deg); }
}
@keyframes ion-nucleus-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 20px var(--ion-cyan), 0 0 40px var(--ion-magenta);
}
50% {
transform: scale(1.4);
box-shadow: 0 0 30px var(--ion-cyan), 0 0 60px var(--ion-magenta), 0 0 80px rgba(var(--ion-cyan-rgb), 0.4);
}
}
@keyframes ion-scan {
0% { top: -1px; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
@keyframes ion-card-in {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ==========================================================================
33. RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.ion-app-sidebar { display: none; }
.ion-login-card { width: 100%; max-width: 380px; padding: 36px 24px; }
.ion-container { padding: 0 var(--ion-sp-4); }
}
/* ==========================================================================
34. PAGE-LEVEL BODY VARIANTS
Keeps body styles in CSS rather than inline.
========================================================================== */
body.ion-page-login {
margin: 0;
overflow: hidden;
}
body.ion-page-app {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: transparent;
}
/* ==========================================================================
35. TOP BAR — APP VARIANT
Tabs sit flush inside the top bar on the same line as the logo.
Apply .ion-top-bar--app alongside .ion-top-bar.
========================================================================== */
.ion-top-bar--app {
align-items: stretch;
height: 44px;
padding: 0;
}
.ion-top-bar-logo {
display: flex;
align-items: center;
gap: var(--ion-sp-2);
padding: 0 var(--ion-sp-3) 0 14px;
flex-shrink: 0;
border-inline-end: 1px solid var(--ion-border);
}
/* Themeable via --ion-logo-height */
.ion-top-bar-logo img {
height: var(--ion-logo-height, 32px);
width: auto;
}
/* Tab bar fills the remaining width when inside a top bar */
.ion-top-bar--app .ion-tab-bar {
flex: 1;
height: 100%;
border-bottom: none;
background: transparent;
min-width: 0;
}
/* Actions area right-hand side */
.ion-top-bar--app .ion-top-bar-actions {
padding: 0 var(--ion-sp-2);
border-inline-start: 1px solid var(--ion-border);
}
/* ==========================================================================
36. APP MAIN
========================================================================== */
/* position:relative needed for the HTMX progress bar overlay */
.ion-app-main { position: relative; }
/* ==========================================================================
38. LOGIN PAGE ADDITIONAL COMPONENTS
========================================================================== */
/* Themeable via --ion-login-logo-height */
.ion-login-logo {
height: var(--ion-login-logo-height, 300px);
width: auto;
align-self: center;
}
.ion-login-product-name {
margin: 0 auto;
}
.ion-login-form-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ion-sp-6);
}
/* ==========================================================================
39. UTILITIES
========================================================================== */
/* Inline form wrapper (e.g. logout button inside a