@import "./tokens.css"; * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "ss02", "cv11"; /* Must clip on , not just . In RTL the document's * default scroll origin is the right edge, so a position:fixed * sidebar parked off-screen via translateX(100%) is *visible* * unless the root element itself suppresses horizontal scroll. */ overflow-x: clip; } html[lang="fa"] { font-family: var(--font-fa); } html[lang="fa"] *, html[lang="fa"] .h-display, html[lang="fa"] .login-quote, html[lang="fa"] .mono, html[lang="fa"] .code, html[lang="fa"] .copy-field, html[lang="fa"] .term { font-family: var(--font-fa) !important; } body { min-height: 100vh; overflow-x: clip; } a { color: inherit; text-decoration: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; color: inherit; background: none; border: none; } input, textarea, select { font-family: inherit; font-size: inherit; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ---------- Type scale ---------- */ .h-display { font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.03em; } .h-display em { font-style: italic; color: var(--brand-400); } .h-1 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .h-2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .h-3 { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; } .body { font-size: 15px; line-height: 1.55; color: var(--text); } .body-sm { font-size: 13px; line-height: 1.5; color: var(--text); } .caption { font-size: 12px; line-height: 1.4; color: var(--text-muted); letter-spacing: 0.01em; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); } .mono { font-family: var(--font-mono); font-size: 12.5px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: calc(9px * var(--density)) calc(14px * var(--density)); border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; border: 1px solid transparent; transition: all 120ms ease; white-space: nowrap; line-height: 1; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--brand-500); color: oklch(0.12 0.01 250); border-color: oklch(1 0 0 / 0.1); box-shadow: var(--shadow-1), 0 0 0 0 var(--brand-glow); } .btn-primary:hover:not(:disabled) { background: var(--brand-400); box-shadow: var(--shadow-1), 0 0 0 4px var(--brand-glow); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover:not(:disabled) { background: var(--surface); color: var(--text); } .btn-danger { background: oklch(0.30 0.10 25); color: oklch(0.95 0.03 25); border-color: oklch(0.40 0.12 25); } .btn-danger:hover:not(:disabled) { background: oklch(0.35 0.12 25); } .btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: var(--r-sm); } .btn-lg { padding: 12px 18px; font-size: 14.5px; } /* ---------- Inputs ---------- */ .input { display: block; width: 100%; padding: calc(9px * var(--density)) 12px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); transition: border-color 120ms, box-shadow 120ms; font-size: 14px; } .input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-glow); } .input::placeholder { color: var(--text-subtle); } .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* ---------- Cards ---------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .card-pad { padding: calc(20px * var(--density)); } .card-head { padding: calc(16px * var(--density)) calc(20px * var(--density)); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .card-body { padding: calc(20px * var(--density)); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 11.5px; font-weight: 500; border-radius: 100px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); line-height: 1.3; white-space: nowrap; } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; } .badge-fixed { min-width: 86px; justify-content: center; } .badge-success { color: oklch(0.40 0.12 155); background: oklch(0.95 0.05 155); border-color: oklch(0.82 0.10 155); } .badge-warning { color: oklch(0.42 0.12 60); background: oklch(0.96 0.06 85); border-color: oklch(0.85 0.10 85); } .badge-danger { color: oklch(0.42 0.15 25); background: oklch(0.96 0.04 25); border-color: oklch(0.85 0.10 25); } .badge-info { color: oklch(0.38 0.12 235); background: oklch(0.95 0.04 235); border-color: oklch(0.82 0.09 235); } .badge-brand { color: var(--brand-700); background: oklch(from var(--brand-500) l c h / 0.12); border-color: oklch(from var(--brand-500) l c h / 0.25); } html[data-theme="dark"] .badge-success { color: oklch(0.85 0.14 155); background: oklch(0.28 0.10 155 / 0.35); border-color: oklch(0.50 0.14 155 / 0.5); } html[data-theme="dark"] .badge-warning { color: oklch(0.88 0.14 85); background: oklch(0.32 0.10 75 / 0.35); border-color: oklch(0.55 0.14 80 / 0.5); } html[data-theme="dark"] .badge-danger { color: oklch(0.82 0.14 25); background: oklch(0.30 0.12 25 / 0.4); border-color: oklch(0.55 0.16 25 / 0.55); } html[data-theme="dark"] .badge-info { color: oklch(0.85 0.12 235); background: oklch(0.30 0.10 235 / 0.35); border-color: oklch(0.55 0.13 235 / 0.5); } html[data-theme="dark"] .badge-brand { color: var(--brand-300); background: oklch(from var(--brand-500) l c h / 0.2); border-color: oklch(from var(--brand-500) l c h / 0.45); } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 10px 16px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--bg-sunken); } html[dir="rtl"] .table th { text-align: right; } .table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: oklch(from var(--surface) l c h / 0.4); } .sites-list-card { overflow-x: auto; } .sites-list-card .table { min-width: 860px; } .sites-url-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Focus ring ---------- */ :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; } /* ---------- Patterns ---------- */ .grid-pattern { background-image: linear-gradient(var(--dot) 1px, transparent 1px), linear-gradient(90deg, var(--dot) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; } .dot-pattern { background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 18px 18px; } .gradient-text { background: linear-gradient(135deg, var(--brand-400), var(--accent-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font-family: var(--font-mono); font-size: 11px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; line-height: 1; } /* ---------- Animations ---------- */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.8s infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 oklch(from currentColor l c h / 0.6); } 50% { box-shadow: 0 0 0 6px oklch(from currentColor l c h / 0); } } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.8s infinite; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -20px); } } @keyframes spin { to { transform: rotate(360deg); } } .stack { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; } .center { display: flex; align-items: center; justify-content: center; } .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---------- Logo ---------- */ .logo-wrap { display: inline-flex; align-items: center; gap: 10px; color: var(--text) !important; --logo-size: 28px; } .logo-wrap svg { width: var(--logo-size); height: var(--logo-size); } .logo-wrap .logo-text { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 600; letter-spacing: -0.015em; font-size: 17px; color: var(--text) !important; line-height: 1; } .logo-wrap .logo-text-primary { color: var(--text); font-weight: 700; } .logo-wrap .logo-text-secondary { color: var(--text-muted) !important; font-weight: 500; letter-spacing: -0.005em; } html[data-theme="dark"] .logo-wrap, html[data-theme="dark"] .logo-wrap .logo-text { color: oklch(0.97 0.005 250) !important; } html[data-theme="dark"] .logo-wrap .logo-text-secondary { color: oklch(0.72 0.012 250) !important; } .logo-link { display: flex; align-items: center; } .logo-link:hover { opacity: 0.85; } /* ---------- Aside nav ---------- */ .nav-group { margin-bottom: 16px; } .nav-group-label { padding: 6px 10px; margin-bottom: 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--text-muted); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 120ms ease; border: 1px solid transparent; width: 100%; text-align: start; background: transparent; } .nav-item:hover { background: var(--surface); color: var(--text); } .nav-item.is-active { background: oklch(from var(--brand-500) l c h / 0.12); color: var(--brand-700); border-color: oklch(from var(--brand-500) l c h / 0.25); } .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; } .nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item .count { margin-inline-start: auto; font-size: 11px; padding: 1px 6px; border-radius: 100px; background: var(--surface-2); color: var(--text-muted); } .nav-item.is-active .count { background: oklch(from var(--brand-500) l c h / 0.2); color: var(--brand-700); } html[data-theme="dark"] .nav-item.is-active { color: var(--brand-300); } html[data-theme="dark"] .nav-item.is-active .count { color: var(--brand-300); } /* Sidebar jump-to & footer */ .jumpto { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; color: var(--text-subtle); font-size: 13px; } .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .sidebar-support-link { color: var(--text-subtle); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border); } .sidebar-user-meta { flex: 1; min-width: 0; } .sidebar-user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Collapsed sidebar — icons only */ aside[data-collapsed="true"] .nav-item { justify-content: center; padding: 10px; } aside[data-collapsed="true"] .jumpto { display: none; } aside[data-collapsed="true"] .sidebar-user { justify-content: center; padding: 6px; } /* ---------- Segmented ---------- */ .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-md); } .seg button { padding: 5px 10px; border-radius: calc(var(--r-md) - 3px); background: transparent; border: none; color: var(--text-muted); font-size: 12.5px; font-weight: 500; } .seg button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } /* ---------- Alerts ---------- */ .alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; border: 1px solid var(--border); background: var(--surface); } .alert-info { border-color: oklch(from var(--info) l c h / 0.3); background: oklch(from var(--info) l c h / 0.08); color: var(--info); } .alert-success { border-color: oklch(from var(--success) l c h / 0.3); background: oklch(from var(--success) l c h / 0.08); color: var(--success); } .alert-warning { border-color: oklch(from var(--warning) l c h / 0.3); background: oklch(from var(--warning) l c h / 0.08); color: var(--warning); } .alert-danger { border-color: oklch(from var(--danger) l c h / 0.3); background: oklch(from var(--danger) l c h / 0.08); color: var(--danger); } .glass { background: oklch(from var(--bg-elevated) l c h / 0.72); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--border); } /* ---------- Tile ---------- */ .tile { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; transition: all 150ms ease; cursor: pointer; text-align: left; width: 100%; } html[dir="rtl"] .tile { text-align: right; } .tile:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-2); } .tile.is-active { border-color: var(--brand-500); background: oklch(from var(--brand-500) l c h / 0.08); color: var(--text); } html[data-theme="light"] .tile.is-active { background: oklch(from var(--brand-500) l c h / 0.1); } /* ---------- Code ---------- */ .code { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; color: var(--text); white-space: pre; overflow-x: auto; line-height: 1.6; } .code .kw { color: oklch(0.78 0.14 300); } .code .str { color: oklch(0.82 0.13 155); } .code .num { color: var(--accent-500); } .code .com { color: var(--text-subtle); font-style: italic; } .code .fn { color: var(--brand-400); } /* ---------- Progress ---------- */ .progress { height: 6px; background: var(--surface-2); border-radius: 100px; overflow: hidden; } .progress > div { height: 100%; background: var(--brand-500); border-radius: inherit; } /* ---------- Switch ---------- */ .switch { position: relative; display: inline-block; width: 32px; height: 18px; background: var(--surface-2); border-radius: 100px; border: 1px solid var(--border); cursor: pointer; transition: all 120ms; flex-shrink: 0; } .switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; background: var(--text-muted); border-radius: 50%; transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1); } .switch.on { background: var(--brand-500); border-color: var(--brand-500); } .switch.on::after { left: 15px; background: oklch(0.14 0.012 250); } .chev { transition: transform 180ms ease; } .chev.open { transform: rotate(180deg); } /* ---------- Shell ---------- */ /* Layout strategy: a single explicit row + two columns. We do NOT override * grid-template-columns or grid-column in RTL — the inherited `direction: * rtl` from automatically reverses physical track positions, so * `grid-column: 1` lands the sidebar on the LEFT in LTR and on the RIGHT * in RTL with the same rule. Earlier we double-overrode (swapping both * the template and the column index), which cancelled and put the * sidebar in the wrong place. We also need `grid-row: 1` on both * children because sparse auto-placement was advancing the cursor past * row 1 in RTL and shoving `main` onto a second row — the source of the * "content goes to the bottom of the page" report. */ .shell { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: minmax(100vh, auto); min-height: 100vh; } .shell.is-collapsed { grid-template-columns: 64px 1fr; } .shell > aside { grid-column: 1; grid-row: 1; background: var(--bg-sunken); border-inline-end: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: padding 200ms ease; } aside[data-collapsed="true"] { padding: 18px 8px; } .shell > main { grid-column: 2; grid-row: 1; min-width: 0; } .topbar { height: 56px; border-bottom: 1px solid var(--border); background: oklch(from var(--bg) l c h / 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 40; display: flex; align-items: center; padding: 0 24px; gap: 16px; } /* Topbar children — desktop defaults declared BEFORE the @media * overrides below so source order doesn't reinstate `display: flex` * over the mobile `display: none`. */ .topbar-menu-btn { margin-inline-end: 4px; } .topbar-crumbs { display: flex; gap: 10px; align-items: center; font-size: 13px; min-width: 0; } .topbar-actions { display: flex; gap: 8px; align-items: center; } .topbar-controls { display: flex; gap: 4px; align-items: center; } .lang-menu-wrap { position: relative; display: inline-flex; } .lang-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 80; min-width: 148px; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); } .lang-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text-muted); font-size: 13px; text-align: start; } .lang-menu button:hover, .lang-menu button.is-active { background: var(--surface); color: var(--text); } .page-pad { padding: 28px 32px; } .page-head { margin-bottom: 24px; } .page-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .page-head-text { min-width: 0; flex: 1 1 320px; } .page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Stat-card grid auto-fits to the available width; on narrow screens it stacks to two-up at the 320px breakpoint and finally single-column. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } /* Health page — responsive metrics columns */ .health-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 20px; } .health-stat-grid { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } /* Health top "all-systems" card layout. Desktop: donut + status text + stats in one row. Mobile: donut + title stack, stats wrap to a new row. */ .health-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 24px; } .health-overview-text { min-width: 0; } .health-overview-title { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .health-overview-stats { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; } .public-controls { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; } .spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; } .spark span { width: 3px; background: var(--brand-500); border-radius: 1px; opacity: 0.8; } /* ---------- Stepper ---------- */ .stepper { display: flex; align-items: center; gap: 0; width: 100%; } .step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); background: var(--bg-elevated); position: relative; } .step:first-child { border-radius: var(--r-md) 0 0 var(--r-md); } .step:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; } .step:not(:last-child) { border-right: none; } .step.is-active { background: oklch(from var(--brand-500) l c h / 0.08); border-color: oklch(from var(--brand-500) l c h / 0.3); color: var(--brand-700); } html[data-theme="dark"] .step.is-active { color: var(--brand-300); } .step.is-done { color: var(--success); } .step .n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); } .step.is-active .n { background: var(--brand-500); color: #000; border-color: var(--brand-500); } .step.is-done .n { background: var(--success); color: #000; border-color: var(--success); } /* ---------- Copy field ---------- */ .copy-field { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-sunken); font-family: var(--font-mono); font-size: 12.5px; overflow: hidden; } .copy-field > span { flex: 1; min-width: 0; padding: 10px 12px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); } .copy-field > button { border: none; background: var(--surface); color: var(--text-muted); padding: 0 14px; border-left: 1px solid var(--border); font-family: var(--font-sans); font-size: 12.5px; } .copy-field > button:hover { color: var(--text); background: var(--surface-2); } /* ---------- Donut ---------- */ .donut { transform: rotate(-90deg); } .donut circle { fill: none; stroke-width: 8; } /* ---------- Terminal ---------- */ .term { background: oklch(0.11 0.012 250); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; font-family: var(--font-mono); font-size: 12.5px; } .term .term-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid oklch(0.20 0.014 250); background: oklch(0.14 0.012 250); } .term .term-head .dot { width: 10px; height: 10px; border-radius: 50%; } .term .term-body { padding: 14px 16px; color: oklch(0.9 0.005 250); line-height: 1.65; } .connect-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; } .connect-grid > * { min-width: 0; } /* Settings: tabs left, content right. On mobile the sidebar collapses to a horizontal scroll strip of pills so all five tabs stay reachable without eating vertical space. */ .settings-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; } .settings-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .connect-list .tile { padding: 14px; display: flex; gap: 12px; align-items: center; min-width: 0; } .connect-list .tile > div { min-width: 0; } .connect-list .caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connect-site-select { min-width: 180px; max-width: 260px; flex-shrink: 0; } .connect-site-select > span { font-size: 11px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.04em; } .connect-site-select .input { padding: 6px 10px; } /* ---------- Onboarding page ---------- */ .onboarding-topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; border-bottom: 1px solid var(--border); gap: 16px; flex-wrap: wrap; } .onboarding-body { max-width: 760px; margin: 40px auto; padding: 0 24px; } .onboarding-stepper { margin-bottom: 28px; } .onboarding-oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .onboarding-actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 720px) { .onboarding-topbar { padding: 16px 18px; } .onboarding-body { padding: 0 14px; margin: 24px auto; } /* On phones the horizontal stepper stacks vertically — each step is its own box. */ .onboarding-stepper { flex-direction: column; gap: 8px; } .onboarding-stepper .step { width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); border-right: 1px solid var(--border); } .onboarding-stepper .step:first-child { border-radius: var(--r-md); } .onboarding-stepper .step:last-child { border-radius: var(--r-md); } .onboarding-stepper .step:not(:last-child) { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .onboarding-oauth { grid-template-columns: 1fr; } } @media (max-width: 720px) { .container, .container-narrow { padding-inline: 16px; } .landing-nav-inner { min-height: auto !important; padding-block: 12px; gap: 10px !important; flex-wrap: wrap; } .landing-nav-inner .logo-wrap { flex: 1 1 auto; } .landing-nav-links { display: none !important; } .landing-nav-inner .public-controls { order: 2; } .landing-nav-inner > .btn { order: 3; flex: 1 1 calc(50% - 6px); min-width: 0; } .landing-hero { padding-top: 42px !important; padding-bottom: 56px !important; } .landing-hero .h-display { font-size: 42px; line-height: 1.05; } .landing-hero p { font-size: 16px !important; } .landing-hero-actions { flex-direction: column; } .landing-hero-actions .btn { width: 100%; } .landing-integrations-grid, .landing-features-grid { grid-template-columns: 1fr !important; } .landing-page section { padding-block: 48px !important; } } /* ---------- Login page ---------- */ .login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .login-form-pane { display: flex; flex-direction: column; padding: 40px 60px; min-width: 0; } .login-form-inner { max-width: 380px; margin: auto 0; width: 100%; } .login-divider { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--text-subtle); font-size: 13px; } .login-divider-line { height: 1px; flex: 1; background: var(--border); } .login-footer { margin-top: auto; } .login-testimonial-pane { position: relative; background: var(--bg-sunken); border-inline-start: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; min-width: 0; } .login-testimonial-inner { position: relative; z-index: 1; padding: 40px; max-width: 440px; } .login-quote { margin: 0; font-family: var(--font-serif); font-size: 30px; line-height: 1.25; letter-spacing: -0.01em; font-style: italic; } /* Below the lg breakpoint the two-column login shell becomes claustrophobic; stack the testimonial below the form. Below mobile it collapses entirely so the form fills the viewport and the marketing testimonial steps aside. */ @media (max-width: 1024px) { .login-shell { grid-template-columns: minmax(0, 1fr); } .login-form-pane { padding: 32px 28px; min-height: auto; } .login-testimonial-pane { display: none; } } /* ---------- Sidebar backdrop (mobile drawer) ---------- */ .sidebar-backdrop { position: fixed; inset: 0; background: oklch(0.10 0.012 250 / 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 49; border: none; padding: 0; cursor: pointer; display: none; opacity: 0; transition: opacity 200ms ease; } .shell.is-mobile-open .sidebar-backdrop { opacity: 1; } /* ---------- Responsive: phones & narrow tablets ---------- */ @media (max-width: 900px) { /* Collapse to a single column on mobile; the sidebar overlays it. */ .shell, .shell.is-collapsed, html[dir="rtl"] .shell, html[dir="rtl"] .shell.is-collapsed { grid-template-columns: 1fr; } .shell > main, html[dir="rtl"] .shell > main { grid-column: 1; } /* Sidebar becomes a slide-in drawer pinned to the inline-start edge. `inset-inline-start: 0` lets the same rule serve LTR and RTL — the browser computes the right physical edge from ``. */ .shell > aside, html[dir="rtl"] .shell > aside { position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: min(86vw, 320px); height: 100dvh; z-index: 50; grid-column: auto; border-inline-end: 1px solid var(--border); box-shadow: 0 24px 60px oklch(0 0 0 / 0.35); transform: translateX(-100%); transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[dir="rtl"] .shell > aside { transform: translateX(100%); } .shell.is-mobile-open > aside, html[dir="rtl"] .shell.is-mobile-open > aside { transform: translateX(0); } .shell.is-mobile-open .sidebar-backdrop { display: block; } /* Always show labels on mobile (drawer is full-width, no need to shrink) */ aside[data-collapsed="true"] .nav-item { justify-content: flex-start; padding: 8px 10px; } /* Topbar gets a touch more breathing room and hides the notifications bell to keep the right cluster short on phones. The breadcrumbs are redundant with the H1 just below — hide them entirely so the topbar can fit the menu button + actions + lang/theme cluster on 375px. */ .topbar { padding: 0 12px; gap: 8px; } .topbar-crumbs { display: none; } .topbar-notifs { display: none; } /* Don't let action labels push the topbar wider than the viewport. */ .topbar-actions { flex-wrap: wrap; gap: 6px; } .topbar-actions .btn { padding: 6px 8px; font-size: 12px; } .page-pad { padding: 20px 16px; } .page-head-actions { width: 100%; } /* `minmax(0, 1fr)` so the grid column actually shrinks to viewport width instead of growing to fit its longest inline child (caption text). */ .connect-grid { grid-template-columns: minmax(0, 1fr); } .connect-list .tile { min-width: 0; } .connect-list .tile > div { min-width: 0; } /* Settings: tabs become a horizontal pill strip above the content. */ .settings-grid { grid-template-columns: 1fr; gap: 16px; } .settings-tabs { flex-direction: row !important; overflow-x: auto; gap: 6px !important; padding-bottom: 4px; flex-wrap: nowrap; } .settings-tabs .nav-item { flex-shrink: 0; padding: 8px 12px !important; } /* Profile read-only field grid: single column on phones. */ .settings-profile-grid { grid-template-columns: 1fr; } /* Heading hierarchy shrinks gracefully on phones. */ .h-1 { font-size: 26px; } .h-2 { font-size: 19px; } /* Stat-card grid is already auto-fit; force single column under 480 so the four cards don't try to wedge 2-up at 375. */ .stat-grid { grid-template-columns: 1fr; } .health-metrics-grid { grid-template-columns: 1fr; } .health-stat-grid { grid-template-columns: repeat(2, 1fr); } /* Health top card: donut + text side-by-side, stats wrap onto a new row. */ .health-overview { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 16px; } .health-overview-stats { grid-column: 1 / -1; gap: 16px; justify-content: space-between; } /* Cards that wrap a `` should scroll horizontally instead of expanding the page. Apply at the `.card` level so the table header sticks to the same scroll region. */ .card { overflow-x: auto; } .table { min-width: 560px; } /* Tables marked `mobile-stack` collapse to a card-list — each `` becomes a small card with a label/value pair per `

`. The label comes from `data-label` on the td. Tables without this class still scroll horizontally. Use for tables that are read-heavy and benefit from the column-label being visible next to each cell on phones. */ .table.mobile-stack { min-width: 0; display: block; } .table.mobile-stack thead { display: none; } .table.mobile-stack tbody { display: block; } .table.mobile-stack tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); } .table.mobile-stack tr:last-child { border-bottom: none; } .table.mobile-stack tr:hover td { background: transparent; } .table.mobile-stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: none; min-width: 0; } .table.mobile-stack td[data-label]::before { content: attr(data-label); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); flex-shrink: 0; } /* The first cell typically holds the row identifier — give it a slightly larger feel by emitting on its own line above the rest. */ .table.mobile-stack td.row-head { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 8px; } .table.mobile-stack td.row-head::before { font-size: 10.5px; } /* Right-aligned cells (actions, numbers) stay right-aligned. */ .table.mobile-stack td > * { min-width: 0; } .table.mobile-stack td.cell-actions { justify-content: flex-end; margin-top: 6px; } .table.mobile-stack td.cell-actions > div { flex-wrap: wrap; justify-content: flex-end; } .table.mobile-stack td.cell-actions::before { display: none; } /* When stacked, the card no longer needs horizontal scroll. */ .card:has(> .table.mobile-stack), .card:has(> div > .table.mobile-stack) { overflow-x: visible; } /* Onboarding-style stepper crashes at narrow widths too. */ .stepper { flex-direction: column; gap: 8px; } .step { border-radius: var(--r-md); border-right: 1px solid var(--border) !important; } .step:not(:last-child) { border-right: 1px solid var(--border) !important; } /* Dialogs/modals go full-screen so wide forms (Create OAuth client, Create API key) stop being unreachable. Targets the dialog primitive used across pages. */ .dialog-backdrop { padding: 0 !important; } .dialog { width: 100% !important; max-width: 100% !important; min-height: 100dvh; border-radius: 0 !important; margin: 0 !important; } /* Settings page tabs + rows */ .setting-row { flex-direction: column; align-items: stretch !important; gap: 10px; } .setting-row > * { width: 100%; } /* Audit logs filter row — wide inputs should fill the row */ .audit-filter input, .audit-filter .input, .audit-filter .seg { width: 100% !important; min-width: 0 !important; } } /* (Desktop topbar defaults moved up next to `.topbar` so source order * doesn't reinstate `display: flex` over the mobile `display: none`.) */