/* ═══════════════════════════════════════════════════════════════ SBP API Studio — style.css Bootstrap 5.3.3 + custom design system Theme: dark (default) / light via data-bs-theme on ════════════════════════════════════════════════════════════════ */ /* ── Google Fonts are loaded via in HTML ── */ /* ── CSS Custom Properties ──────────────────────────────────── */ :root { --sidebar-w: 260px; --topbar-h: 56px; --mobile-tabs-h: 52px; --radius: 8px; --radius-sm: 5px; --radius-lg: 12px; --transition: all 0.18s ease; --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Dark Theme ──────────────────────────────────────────────── */ [data-bs-theme="dark"] { --sbp-bg: #0d0d1a; --sbp-surface: #13131f; --sbp-surface2: #1a1a2e; --sbp-surface3: #1e1e30; --sbp-border: #252540; --sbp-border2: #2d2d4a; --sbp-accent: #6366f1; --sbp-accent-hover: #818cf8; --sbp-accent-glow: rgba(99,102,241,0.15); --sbp-text: #e2e8f0; --sbp-text2: #94a3b8; --sbp-text3: #64748b; --sbp-green: #4ade80; --sbp-green-bg: rgba(74,222,128,0.12); --sbp-red: #f87171; --sbp-red-bg: rgba(248,113,113,0.12); --sbp-yellow: #fbbf24; --sbp-yellow-bg: rgba(251,191,36,0.12); --sbp-blue: #60a5fa; --sbp-blue-bg: rgba(96,165,250,0.12); --sbp-orange: #fb923c; --sbp-purple: #a78bfa; /* Method colors */ --m-get: #60a5fa; --m-post: #4ade80; --m-put: #fbbf24; --m-delete: #f87171; --m-patch: #fb923c; --m-head: #94a3b8; --m-options: #94a3b8; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); /* Scrollbar */ --scrollbar-thumb: #252540; --scrollbar-thumb-hover: #35354f; } /* ── Light Theme ─────────────────────────────────────────────── */ [data-bs-theme="light"] { --sbp-bg: #f0f2f9; --sbp-surface: #ffffff; --sbp-surface2: #f8f9ff; --sbp-surface3: #eef0f8; --sbp-border: #e2e8f0; --sbp-border2: #cbd5e1; --sbp-accent: #4f46e5; --sbp-accent-hover: #4338ca; --sbp-accent-glow: rgba(79,70,229,0.1); --sbp-text: #1e293b; --sbp-text2: #475569; --sbp-text3: #94a3b8; --sbp-green: #16a34a; --sbp-green-bg: rgba(22,163,74,0.1); --sbp-red: #dc2626; --sbp-red-bg: rgba(220,38,38,0.1); --sbp-yellow: #d97706; --sbp-yellow-bg: rgba(217,119,6,0.1); --sbp-blue: #2563eb; --sbp-blue-bg: rgba(37,99,235,0.1); --sbp-orange: #ea580c; --sbp-purple: #7c3aed; /* Method colors */ --m-get: #2563eb; --m-post: #16a34a; --m-put: #d97706; --m-delete: #dc2626; --m-patch: #ea580c; --m-head: #64748b; --m-options: #64748b; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.15); /* Scrollbar */ --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; } /* ── Base Reset + Font ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; font-family: var(--font-sans); font-size: 13px; background: var(--sbp-bg); color: var(--sbp-text); overflow: hidden; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── Scrollbar ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ── App body layout ─────────────────────────────────────────── */ .app-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ══════════════════════════════════════════════════════════════ TOPBAR ══════════════════════════════════════════════════════════════ */ .app-topbar { height: var(--topbar-h); background: var(--sbp-surface); border-bottom: 1px solid var(--sbp-border); display: flex; align-items: center; padding: 0 16px; gap: 10px; flex-shrink: 0; z-index: 100; box-shadow: var(--shadow-sm); } /* Logo */ .topbar-logo { font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; flex-shrink: 0; } .topbar-logo .logo-sbp { background: linear-gradient(135deg, #6366f1, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .topbar-logo .logo-studio { color: var(--sbp-text2); font-weight: 400; font-size: 13px; margin-left: 2px; } /* Topbar center group */ .topbar-center { display: flex; align-items: center; gap: 8px; flex: 1; overflow: hidden; min-width: 0; } /* Topbar right group */ .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Pill selector (workspace / env) */ .pill-selector { display: flex; align-items: center; gap: 6px; background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: 20px; padding: 4px 12px 4px 8px; min-width: 0; max-width: 180px; cursor: pointer; transition: var(--transition); } .pill-selector:hover { border-color: var(--sbp-accent); background: var(--sbp-accent-glow); } .pill-selector .pill-label { font-size: 10px; font-weight: 600; color: var(--sbp-accent); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .pill-selector select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 2px center; border: none; outline: none; padding-right: 18px; color: var(--sbp-text); font-size: 12px; font-family: var(--font-sans); font-weight: 500; cursor: pointer; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; } .pill-selector select option { background: var(--sbp-surface); color: var(--sbp-text); } /* Topbar separator */ .topbar-sep { width: 1px; height: 20px; background: var(--sbp-border); flex-shrink: 0; } /* User info — now a button */ .topbar-user-btn { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; background: none; border: none; padding: 4px 8px; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; } .topbar-user-btn:hover { background: var(--sbp-surface2); } .topbar-user-btn .u-name { font-size: 12px; font-weight: 600; color: var(--sbp-text); } .topbar-user-btn .u-company { font-size: 10px; color: var(--sbp-text3); } /* Theme toggle */ .btn-theme { background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: var(--transition); flex-shrink: 0; padding: 0; line-height: 1; } .btn-theme:hover { border-color: var(--sbp-accent); background: var(--sbp-accent-glow); transform: rotate(15deg); } /* ── Generic app buttons ─────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--sbp-border); background: var(--sbp-surface2); color: var(--sbp-text); font-size: 12px; font-family: var(--font-sans); font-weight: 500; cursor: pointer; transition: var(--transition); white-space: nowrap; text-decoration: none; line-height: 1; } .btn:hover { background: var(--sbp-surface3); border-color: var(--sbp-accent); color: var(--sbp-accent); } .btn-primary { background: var(--sbp-accent); color: #fff; border-color: var(--sbp-accent); font-weight: 600; } .btn-primary:hover { background: var(--sbp-accent-hover); border-color: var(--sbp-accent-hover); color: #fff; } .btn-danger { color: var(--sbp-red); border-color: var(--sbp-red-bg); background: transparent; } .btn-danger:hover { background: var(--sbp-red-bg); border-color: var(--sbp-red); color: var(--sbp-red); } .btn-sm { padding: 4px 9px; font-size: 11px; } .btn-icon { padding: 5px; aspect-ratio: 1; } /* Send button — gradient pill */ .send-btn { background: linear-gradient(135deg, var(--sbp-accent), #8b5cf6); color: #fff; border: none; border-radius: 20px; padding: 8px 20px; font-size: 13px; font-weight: 700; font-family: var(--font-sans); cursor: pointer; transition: var(--transition); white-space: nowrap; box-shadow: 0 2px 12px rgba(99,102,241,0.35); } .send-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 18px rgba(99,102,241,0.5); transform: translateY(-1px); } .send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .proxy-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; background: rgba(99,102,241,0.18); color: var(--sbp-accent); border: 1px solid rgba(99,102,241,0.35); margin-left: 4px; letter-spacing: 0.04em; text-transform: uppercase; } /* Save button */ .save-btn { padding: 6px 14px; background: var(--sbp-surface2); color: var(--sbp-text2); border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-sans); font-weight: 500; cursor: pointer; transition: var(--transition); } .save-btn:hover { background: var(--sbp-surface3); border-color: var(--sbp-accent); color: var(--sbp-accent); } .save-btn.dirty { border-color: var(--sbp-yellow); color: var(--sbp-yellow); background: var(--sbp-yellow-bg); } /* ══════════════════════════════════════════════════════════════ APP LAYOUT ══════════════════════════════════════════════════════════════ */ .app-layout { display: flex; flex: 1; height: calc(100vh - var(--topbar-h)); overflow: hidden; } /* ══════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════════ */ .app-sidebar { width: var(--sidebar-w); background: var(--sbp-surface); border-right: 1px solid var(--sbp-border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; } /* Search */ .sidebar-search-wrap { padding: 10px; border-bottom: 1px solid var(--sbp-border); flex-shrink: 0; position: relative; } .sidebar-search-wrap .search-icon { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); color: var(--sbp-text3); font-size: 13px; pointer-events: none; } #sidebar-search { width: 100%; background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); padding: 6px 10px 6px 30px; color: var(--sbp-text); font-size: 12px; font-family: var(--font-sans); outline: none; transition: var(--transition); } #sidebar-search:focus { border-color: var(--sbp-accent); background: var(--sbp-surface); box-shadow: 0 0 0 3px var(--sbp-accent-glow); } #sidebar-search::placeholder { color: var(--sbp-text3); } /* Sidebar actions row */ .sidebar-actions { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--sbp-border); flex-shrink: 0; } .sidebar-actions .btn { flex: 1; justify-content: center; font-size: 11.5px; } /* Collections list */ .collections-list { flex: 1; overflow-y: auto; padding: 6px 0; } /* Collection item */ .collection-item {} .collection-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; border-radius: var(--radius-sm); margin: 0 6px; transition: var(--transition); user-select: none; } .collection-header:hover { background: var(--sbp-surface2); } .collection-header .col-toggle { color: var(--sbp-text3); font-size: 9px; transition: transform 0.2s ease; flex-shrink: 0; } .collection-header.open .col-toggle { transform: rotate(90deg); } .collection-header .col-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--sbp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collection-header .col-actions { display: none; gap: 2px; flex-shrink: 0; } .collection-header:hover .col-actions { display: flex; } .col-action-btn { background: none; border: none; color: var(--sbp-text3); cursor: pointer; padding: 3px 5px; border-radius: var(--radius-sm); font-size: 12px; transition: var(--transition); line-height: 1; } .col-action-btn:hover { color: var(--sbp-text); background: var(--sbp-surface3); } .col-action-btn.danger:hover { color: var(--sbp-red); background: var(--sbp-red-bg); } /* Request list inside collection */ .request-list { padding-left: 12px; display: none; } .collection-item.open .request-list { display: block; } /* Request item */ .request-item { display: flex; align-items: center; gap: 7px; padding: 5px 8px; cursor: pointer; border-radius: var(--radius-sm); margin: 1px 6px; transition: var(--transition); } .request-item:hover { background: var(--sbp-surface2); } .request-item.active { background: var(--sbp-accent-glow); border: 1px solid rgba(99,102,241,0.25); } .request-item .req-name { flex: 1; font-size: 12px; color: var(--sbp-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .request-item .req-actions { display: none; gap: 3px; } .request-item:hover .req-actions { display: flex; } /* Method badge (sidebar + response) */ .method-badge { font-size: 9.5px; font-weight: 700; min-width: 38px; text-align: center; padding: 2px 5px; border-radius: 4px; flex-shrink: 0; font-family: var(--font-mono); letter-spacing: 0.3px; } .method-GET { color: var(--m-get); background: var(--sbp-blue-bg); } .method-POST { color: var(--m-post); background: var(--sbp-green-bg); } .method-PUT { color: var(--m-put); background: var(--sbp-yellow-bg); } .method-DELETE { color: var(--m-delete); background: var(--sbp-red-bg); } .method-PATCH { color: var(--m-patch); background: rgba(251,146,60,0.12); } .method-HEAD { color: var(--m-head); background: var(--sbp-surface3); } .method-OPTIONS{ color: var(--m-options); background: var(--sbp-surface3); } /* Empty state */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--sbp-text3); padding: 20px; text-align: center; } .empty-state .big-icon { font-size: 40px; opacity: 0.35; } .empty-state h3 { font-size: 14px; color: var(--sbp-text2); font-weight: 600; margin: 0; } .empty-state p { font-size: 12px; margin: 0; line-height: 1.5; } /* ══════════════════════════════════════════════════════════════ WORKSPACE (request + response panels) ══════════════════════════════════════════════════════════════ */ .app-workspace { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--sbp-bg); min-width: 0; } /* ── Request Panel ────────────────────────────────────────────── */ .request-panel { flex-shrink: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--sbp-border); min-height: 140px; overflow: hidden; } /* Request name bar */ .req-name-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--sbp-surface); border-bottom: 1px solid var(--sbp-border); flex-shrink: 0; } .req-name-input { background: transparent; border: none; border-bottom: 1.5px solid transparent; color: var(--sbp-text2); font-size: 13px; font-family: var(--font-sans); font-weight: 500; font-style: italic; padding: 2px 4px; outline: none; flex: 1; max-width: 320px; transition: var(--transition); } .req-name-input:focus { border-bottom-color: var(--sbp-accent); color: var(--sbp-text); font-style: normal; } .req-name-input::placeholder { color: var(--sbp-text3); } /* URL bar */ .url-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--sbp-surface); border-bottom: 1px solid var(--sbp-border); flex-shrink: 0; } .method-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--sbp-surface2); background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 7px center; padding: 7px 28px 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--sbp-border); color: var(--sbp-text); font-size: 12px; font-weight: 700; font-family: var(--font-mono); cursor: pointer; outline: none; min-width: 90px; transition: var(--transition); } .method-select option { background: var(--sbp-surface); } .method-select:focus { border-color: var(--sbp-accent); box-shadow: 0 0 0 3px var(--sbp-accent-glow); } .url-input { flex: 1; background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); color: var(--sbp-text); font-size: 13px; font-family: var(--font-mono); padding: 7px 12px; outline: none; transition: var(--transition); min-width: 0; } .url-input:focus { border-color: var(--sbp-accent); background: var(--sbp-surface); box-shadow: 0 0 0 3px var(--sbp-accent-glow); } .url-input::placeholder { color: var(--sbp-text3); font-size: 12px; } /* ── Tab system ──────────────────────────────────────────────── */ .tabs-bar { display: flex; align-items: center; background: var(--sbp-surface); border-bottom: 1px solid var(--sbp-border); padding: 0 14px; gap: 0; flex-shrink: 0; } .tab { padding: 9px 14px; font-size: 12px; font-weight: 500; color: var(--sbp-text3); cursor: pointer; border-bottom: 2px solid transparent; transition: var(--transition); display: flex; align-items: center; gap: 6px; white-space: nowrap; user-select: none; } .tab:hover { color: var(--sbp-text2); } .tab.active { color: var(--sbp-accent); border-bottom-color: var(--sbp-accent); } .tab-badge { background: var(--sbp-surface3); color: var(--sbp-text3); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; transition: var(--transition); } .tab.active .tab-badge { background: var(--sbp-accent); color: #fff; } .tab-content { display: none; flex-direction: column; } .tab-content.active { display: flex; } .tab-pane { padding: 10px 14px; overflow-y: auto; max-height: 220px; } /* ── KV table (params / headers) ─────────────────────────────── */ .kv-table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; } .kv-table thead tr { background: var(--sbp-surface2); } .kv-table th { font-size: 10px; font-weight: 700; color: var(--sbp-text3); text-align: left; padding: 7px 10px; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 2px solid var(--sbp-border); } .kv-table tbody tr { transition: background 0.12s ease; } .kv-table tbody tr:nth-child(odd) { background: transparent; } .kv-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); } [data-bs-theme="light"] .kv-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.025); } .kv-table tbody tr:hover { background: var(--sbp-accent-glow) !important; } .kv-table td { padding: 3px 4px; border-bottom: 1px solid var(--sbp-border2); } .kv-table tbody tr:last-child td { border-bottom: none; } .kv-table input[type="text"] { width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--sbp-text); font-size: 12px; font-family: var(--font-mono); padding: 5px 8px; outline: none; transition: var(--transition); } .kv-table input[type="text"]:focus { border-color: var(--sbp-accent); background: var(--sbp-accent-glow); } .kv-table input[type="text"]::placeholder { color: var(--sbp-text3); } .kv-table input[type="checkbox"] { cursor: pointer; accent-color: var(--sbp-accent); width: 14px; height: 14px; } .kv-row-del { background: none; border: none; color: var(--sbp-text3); cursor: pointer; padding: 4px 8px; font-size: 13px; border-radius: var(--radius-sm); transition: var(--transition); line-height: 1; opacity: 0; } .kv-table tbody tr:hover .kv-row-del { opacity: 1; } .kv-row-del:hover { color: var(--sbp-red); background: var(--sbp-red-bg); } .add-row-btn { margin-top: 8px; background: none; border: 1px dashed var(--sbp-border); border-radius: var(--radius-sm); color: var(--sbp-text3); font-size: 12px; font-family: var(--font-sans); padding: 5px 12px; cursor: pointer; width: 100%; text-align: left; transition: var(--transition); } .add-row-btn:hover { border-color: var(--sbp-accent); color: var(--sbp-accent); } /* ── Body type buttons ──────────────────────────────────────── */ .body-type-selector { display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--sbp-border); background: var(--sbp-surface); flex-shrink: 0; } .body-type-btn { font-size: 11px; font-family: var(--font-sans); font-weight: 500; padding: 3px 11px; border-radius: 12px; border: 1px solid var(--sbp-border); background: transparent; color: var(--sbp-text3); cursor: pointer; transition: var(--transition); } .body-type-btn.active { background: var(--sbp-accent); color: #fff; border-color: var(--sbp-accent); font-weight: 600; } .body-type-btn:hover:not(.active) { border-color: var(--sbp-text3); color: var(--sbp-text2); background: var(--sbp-surface2); } /* ── Body textarea ──────────────────────────────────────────── */ .body-editor { flex: 1; width: 100%; min-height: 130px; background: var(--sbp-bg); border: none; color: var(--sbp-text); font-size: 12.5px; font-family: var(--font-mono); padding: 12px 14px; outline: none; resize: none; line-height: 1.6; tab-size: 2; } .body-editor::placeholder { color: var(--sbp-text3); } /* ── Auth panel ──────────────────────────────────────────────── */ .auth-panel { padding: 12px 14px; } .auth-type-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .auth-type-row label { font-size: 12px; font-weight: 600; color: var(--sbp-text2); min-width: 50px; } .auth-fields { display: flex; flex-direction: column; gap: 10px; } .auth-field-row { display: flex; align-items: center; gap: 10px; } .auth-field-row label { font-size: 12px; color: var(--sbp-text2); min-width: 100px; font-weight: 500; } /* ── Dropdown arrow SVG (dark theme) */ :root { --select-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --select-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } [data-bs-theme="dark"] { --select-arrow: var(--select-arrow-dark); } [data-bs-theme="light"] { --select-arrow: var(--select-arrow-light); } /* Form controls (auth + modals) */ .form-select { background-color: var(--sbp-surface2); background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 9px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); color: var(--sbp-text); font-size: 12px; font-family: var(--font-sans); padding: 6px 28px 6px 10px; outline: none; cursor: pointer; transition: var(--transition); } .form-select:focus { border-color: var(--sbp-accent); box-shadow: 0 0 0 3px var(--sbp-accent-glow); } .form-select option { background: var(--sbp-surface); } .form-input { background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); color: var(--sbp-text); font-size: 12px; font-family: var(--font-mono); padding: 6px 10px; outline: none; width: 100%; transition: var(--transition); } .form-input:focus { border-color: var(--sbp-accent); box-shadow: 0 0 0 3px var(--sbp-accent-glow); } .form-input::placeholder { color: var(--sbp-text3); } #env-add-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin-bottom: 16px; } #env-add-row .env-name-wrap { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0; } #env-add-row .env-name-wrap .form-input { width: 100%; } #env-add-row #btn-create-env { flex-shrink: 0; white-space: nowrap; align-self: flex-start; } /* ── Resizer ─────────────────────────────────────────────────── */ .resizer { height: 5px; background: var(--sbp-border); cursor: row-resize; flex-shrink: 0; transition: background 0.15s; position: relative; } .resizer::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 3px; border-radius: 2px; background: var(--sbp-text3); opacity: 0; transition: opacity 0.15s; } .resizer:hover { background: var(--sbp-accent); } .resizer:hover::after { opacity: 0; } /* ── Response Panel ──────────────────────────────────────────── */ .response-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* Response meta bar */ .response-meta { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--sbp-surface); border-bottom: 1px solid var(--sbp-border); flex-shrink: 0; font-size: 12px; } .response-meta .label { color: var(--sbp-text3); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; } /* Status badges */ .status-badge { font-size: 11.5px; font-weight: 700; font-family: var(--font-mono); padding: 3px 10px; border-radius: 12px; display: inline-block; } .status-2xx { background: var(--sbp-green-bg); color: var(--sbp-green); } .status-3xx { background: var(--sbp-blue-bg); color: var(--sbp-blue); } .status-4xx { background: var(--sbp-yellow-bg); color: var(--sbp-yellow); } .status-5xx { background: var(--sbp-red-bg); color: var(--sbp-red); } .status-err { background: var(--sbp-red-bg); color: var(--sbp-red); } /* Response body wrap */ .response-body-wrap { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } /* Response body (pre) */ .response-body { flex: 1; overflow-y: auto; padding: 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; background: var(--sbp-bg); color: var(--sbp-text); margin: 0; } /* Response placeholder */ .response-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--sbp-text3); font-size: 14px; flex-direction: column; gap: 12px; padding: 40px; } .response-placeholder .icon { font-size: 44px; opacity: 0.25; } .response-placeholder span { font-size: 13px; text-align: center; } .response-placeholder strong { color: var(--sbp-text2); } /* Response headers table */ .response-headers-table { padding: 14px 16px; overflow-y: auto; flex: 1; } .response-headers-table table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; } .response-headers-table thead tr { background: var(--sbp-surface2); } .response-headers-table th { font-size: 10px; color: var(--sbp-text3); text-align: left; padding: 7px 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 2px solid var(--sbp-border); } .response-headers-table tbody tr:nth-child(odd) { background: transparent; } .response-headers-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); } [data-bs-theme="light"] .response-headers-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.025); } .response-headers-table tbody tr:hover { background: var(--sbp-accent-glow) !important; } .response-headers-table td { font-size: 12px; padding: 7px 12px; color: var(--sbp-text2); border-bottom: 1px solid var(--sbp-border2); font-family: var(--font-mono); } .response-headers-table tbody tr:last-child td { border-bottom: none; } .response-headers-table td:first-child { color: var(--sbp-accent); font-weight: 500; } /* Members table */ .members-table { font-size: 12px; } .members-table td { vertical-align: middle; } /* Permission label pill */ .perm-label { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 20px; } .perm-read { background: rgba(80,200,120,0.1); color: var(--sbp-green, #50c878); border: 1px solid rgba(80,200,120,0.25); } .perm-write { background: rgba(230,180,60,0.1); color: var(--sbp-yellow, #e6b43c); border: 1px solid rgba(230,180,60,0.25); } .perm-admin { background: rgba(var(--accent-rgb,99,102,241),0.1); color: var(--sbp-accent); border: 1px solid rgba(var(--accent-rgb,99,102,241),0.25); } /* Invitation toolbar */ .inv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .inv-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .inv-count-badge { font-size: 11px; font-weight: 600; color: var(--sbp-text3); background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: 20px; padding: 2px 10px; white-space: nowrap; } /* Invitation filter buttons */ .inv-filter-btn { font-size: 11px; font-weight: 500; padding: 5px 13px; border-radius: 20px; border: 1px solid var(--sbp-border); background: transparent; color: var(--sbp-text3); cursor: pointer; transition: all 0.15s; } .inv-filter-btn:hover { background: var(--sbp-surface2); color: var(--sbp-text); } .inv-filter-btn.active { background: var(--sbp-accent); color: #fff; border-color: var(--sbp-accent); } /* Invitation cards */ .inv-card-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 2px; } .inv-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--sbp-border); background: var(--sbp-surface); transition: border-color 0.15s, background 0.15s; } .inv-card:hover { border-color: var(--sbp-accent); background: var(--sbp-surface2); } .inv-card-left { flex: 1; min-width: 0; } .inv-card-email { font-size: 13px; font-weight: 600; color: var(--sbp-text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inv-card-meta { font-size: 11px; color: var(--sbp-text3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .inv-meta-sep { opacity: 0.4; } .inv-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .inv-card-actions { display: flex; gap: 6px; margin-left: 4px; } /* Status badges */ .badge-status { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 20px; } .badge-status.accepted { background: rgba(80, 200, 120, 0.15); color: var(--green, #50c878); border: 1px solid rgba(80, 200, 120, 0.3); } .badge-status.pending { background: rgba(230, 180, 60, 0.12); color: var(--yellow, #e6b43c); border: 1px solid rgba(230, 180, 60, 0.3); } /* Response tabs */ .response-tabs { background: var(--sbp-surface); border-bottom: 1px solid var(--sbp-border); } /* ══════════════════════════════════════════════════════════════ MODAL OVERLAY SYSTEM (existing openModal/closeModal JS) ══════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1050; padding: 16px; animation: backdropFadeIn 0.2s ease; } .modal-overlay.open { display: flex; } @keyframes backdropFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Override Bootstrap's .modal { display:none } — we use our own overlay system */ .modal-overlay .modal, .modal-overlay.open .modal { display: flex !important; flex-direction: column; } .modal { background: var(--sbp-surface); border: 1px solid var(--sbp-border); border-radius: var(--radius-lg); padding: 24px; width: 520px; max-width: 95vw; max-height: 88vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); animation: modalSlideUp 0.22s ease; } .modal-lg { width: 700px; } .modal-sm { width: 400px; } @keyframes modalSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } .modal-title { font-size: 15px; font-weight: 700; color: var(--sbp-text); margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modal-close { background: none; border: none; color: var(--sbp-text3); font-size: 18px; cursor: pointer; padding: 3px 7px; border-radius: var(--radius-sm); transition: var(--transition); line-height: 1; flex-shrink: 0; } .modal-close:hover { color: var(--sbp-text); background: var(--sbp-surface2); } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } /* Form groups inside modals */ .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 11.5px; font-weight: 600; color: var(--sbp-text2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; } .form-group input, .form-group textarea, .form-group select { width: 100%; background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); color: var(--sbp-text); font-size: 13px; font-family: var(--font-sans); padding: 8px 11px; outline: none; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--sbp-accent); box-shadow: 0 0 0 3px var(--sbp-accent-glow); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--sbp-text3); } .form-group textarea { resize: vertical; min-height: 80px; font-family: var(--font-mono); font-size: 12px; } .form-group select { cursor: pointer; } .form-group select option { background: var(--sbp-surface); } /* Modal section divider */ .modal-divider { border: none; border-top: 1px solid var(--sbp-border); margin: 16px 0; } /* ── Workspace list (inside ws-modal) ────────────────────────── */ .ws-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 300px; overflow-y: auto; } .ws-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); transition: var(--transition); } .ws-list-item:hover { border-color: var(--sbp-border2); } .ws-list-item.editing { align-items: stretch; } .ws-list-item .ws-name { font-size: 13px; font-weight: 600; color: var(--sbp-text); flex: 1; } .ws-list-item .ws-desc { font-size: 11px; color: var(--sbp-text3); } /* ── Import modal tabs ───────────────────────────────────────── */ .import-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--sbp-border); margin-bottom: 16px; } .import-tab { padding: 8px 18px; font-size: 12px; font-weight: 500; color: var(--sbp-text3); cursor: pointer; border-bottom: 2px solid transparent; transition: var(--transition); user-select: none; } .import-tab:hover { color: var(--sbp-text2); } .import-tab.active { color: var(--sbp-accent); border-bottom-color: var(--sbp-accent); } .import-drop-zone { border: 2px dashed var(--sbp-border); border-radius: var(--radius); padding: 28px 20px; text-align: center; cursor: pointer; transition: var(--transition); margin-bottom: 4px; } .import-drop-zone:hover, .import-drop-zone.drag-over { border-color: var(--sbp-accent); background: var(--sbp-accent-glow); } .import-drop-zone.has-file { border-color: var(--sbp-green); background: rgba(34,197,94,.06); } .import-drop-text { font-size: 13px; color: var(--sbp-text2); margin: 0 0 4px; } .import-drop-sub { font-size: 12px; color: var(--sbp-text3); margin: 0; } .import-file-link { color: var(--sbp-accent); cursor: pointer; font-weight: 500; text-decoration: underline; } .import-file-link:hover { opacity: .8; } .import-file-name { font-size: 12px; color: var(--sbp-green); margin: 6px 0 0; font-weight: 500; } .import-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--sbp-text3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .import-or::before, .import-or::after { content: ''; flex: 1; height: 1px; background: var(--sbp-border); } /* ── Env variables editor ────────────────────────────────────── */ .env-var-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .env-var-row .key-input { flex: 0.6; } .env-var-row .val-input { flex: 1; } /* ── Spinner ─────────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 16px; height: 16px; border: 2px solid var(--sbp-border); border-top-color: var(--sbp-accent); border-radius: 50%; animation: spin 0.65s linear infinite; display: inline-block; flex-shrink: 0; } /* ── Toast ───────────────────────────────────────────────────── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { display: block !important; background: var(--sbp-surface); border: 1px solid var(--sbp-border); border-radius: var(--radius); padding: 11px 18px; font-size: 13px; font-weight: 500; color: var(--sbp-text); min-width: 240px; max-width: 360px; box-shadow: var(--shadow); animation: toastSlide 0.22s ease forwards; pointer-events: auto; border-left: 3px solid var(--sbp-border); opacity: 1 !important; } .toast.success { border-left-color: var(--sbp-green); } .toast.error { border-left-color: var(--sbp-red); } .toast.info { border-left-color: var(--sbp-accent); } @keyframes toastSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } /* ── SweetAlert2 overrides ───────────────────────────────────── */ .swal-apidocstop { font-family: var(--font-sans) !important; border-radius: var(--radius) !important; border: 1px solid var(--sbp-border) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important; } .swal-apidocstop .swal2-title { font-size: 16px !important; font-weight: 600 !important; color: inherit !important; } .swal-apidocstop .swal2-html-container, .swal-apidocstop .swal2-content { font-size: 13px !important; color: inherit !important; opacity: 0.75; } .swal-apidocstop .swal2-icon { transform: scale(0.75); margin-bottom: 0 !important; } .swal-btn-confirm, .swal-btn-cancel { font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 6px !important; padding: 7px 18px !important; border: none !important; } .swal-btn-cancel { color: var(--sbp-text) !important; } .swal2-backdrop-show { backdrop-filter: blur(3px) !important; } /* ── Page Spinner ────────────────────────────────────────────── */ .page-spinner { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(2px); pointer-events: none; } .page-spinner.hidden { display: none !important; } .spinner-ring { width: 42px; height: 42px; border: 3px solid rgba(255, 255, 255, 0.12); border-top-color: var(--sbp-accent); border-radius: 50%; animation: spinRing 0.7s linear infinite; } [data-bs-theme="light"] .spinner-ring { border-color: rgba(0, 0, 0, 0.1); border-top-color: var(--sbp-accent); } @keyframes spinRing { to { transform: rotate(360deg); } } /* ── Inline button spinner ───────────────────────────────────── */ .btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spinRing 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } /* ── Modal alert badge ───────────────────────────────────────── */ .modal-alert { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: var(--radius); font-size: 12.5px; font-weight: 500; line-height: 1.4; margin-bottom: 16px; background: rgba(220, 60, 60, 0.1); color: var(--sbp-red, #e05252); border: 1px solid rgba(220, 60, 60, 0.25); animation: toastSlide 0.18s ease forwards; } .modal-alert svg { margin-top: 1px; flex-shrink: 0; } /* ── Form field validation ───────────────────────────────────── */ .is-invalid { border-color: var(--sbp-red) !important; box-shadow: 0 0 0 3px rgba(220, 60, 60, 0.15) !important; } .field-err { display: block; width: 100%; color: var(--sbp-red, #e05252); font-size: 11px; margin-top: 5px; line-height: 1.4; } /* ── JSON syntax highlight ───────────────────────────────────── */ .json-key { color: var(--sbp-accent); } .json-string { color: var(--sbp-green); } .json-number { color: var(--sbp-orange); } .json-bool { color: var(--sbp-purple); } .json-null { color: var(--sbp-text3); } /* ══════════════════════════════════════════════════════════════ UTILITY CLASSES (used by app.js) ══════════════════════════════════════════════════════════════ */ .hidden { display: none !important; } .flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .text-sm { font-size: 11px; } .text-muted { color: var(--sbp-text3); } .text-green { color: var(--sbp-green); } .text-red, .text-danger { color: var(--sbp-red); } .text-yellow { color: var(--sbp-yellow); } .w-full { width: 100%; } .mt-2 { margin-top: 8px; } /* ══════════════════════════════════════════════════════════════ MOBILE WORKSPACE / ENV STRIP (shown inside sidebar on mobile) ══════════════════════════════════════════════════════════════ */ .mob-ws-strip { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--sbp-border); background: var(--sbp-surface2); } .mob-ws-row { display: flex; align-items: center; gap: 6px; } .mob-ws-select { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-size: 13px; border-radius: var(--radius); border: 1px solid var(--sbp-border); background-color: var(--sbp-surface); color: var(--sbp-text1); background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px; padding-right: 24px; appearance: none; -webkit-appearance: none; cursor: pointer; } .mob-ws-select:focus { outline: none; border-color: var(--sbp-accent); } .mob-ws-manage { flex-shrink: 0; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; } /* ══════════════════════════════════════════════════════════════ MOBILE BOTTOM TAB BAR ══════════════════════════════════════════════════════════════ */ .mobile-tabs { position: fixed; bottom: 0; left: 0; right: 0; height: var(--mobile-tabs-h); background: var(--sbp-surface); border-top: 1px solid var(--sbp-border); display: flex; align-items: stretch; z-index: 200; box-shadow: 0 -2px 12px rgba(0,0,0,0.15); } .mobile-tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; color: var(--sbp-text3); font-size: 10px; font-family: var(--font-sans); font-weight: 500; cursor: pointer; transition: var(--transition); padding: 6px 4px; } .mobile-tab-btn .tab-icon { font-size: 18px; line-height: 1; } .mobile-tab-btn.active { color: var(--sbp-accent); } .mobile-tab-btn:hover { color: var(--sbp-text2); } /* ── Mobile layout adjustments ───────────────────────────────── */ @media (max-width: 767.98px) { html, body { overflow: auto; } .app-body { height: 100dvh; overflow: hidden; } .app-topbar { height: var(--topbar-h); padding: 0 12px; gap: 8px; } /* Hide desktop-only topbar elements on mobile */ .topbar-center { display: none; } .topbar-user-btn .u-company { display: none; } .app-layout { height: calc(100dvh - var(--topbar-h) - var(--mobile-tabs-h)); flex-direction: column; position: relative; } .app-sidebar { position: absolute; inset: 0; width: 100%; z-index: 10; display: none; } .app-sidebar.mobile-active { display: flex; } .app-workspace { position: absolute; inset: 0; width: 100%; } /* On mobile: request + response fill the workspace */ .request-panel { flex: 1; display: none; min-height: 0; height: 100% !important; /* override JS resize */ } .request-panel.mobile-active { display: flex; } .resizer { display: none; } .response-panel { flex: 1; display: none; } .response-panel.mobile-active { display: flex; } } /* ══════════════════════════════════════════════════════════════ AUTH PAGES (login, register, accept-invite) ══════════════════════════════════════════════════════════════ */ .auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sbp-bg); padding: 24px 16px; font-family: var(--font-sans); overflow: auto; } /* Subtle dot-grid background */ [data-bs-theme="dark"] .auth-page { background-image: radial-gradient(rgba(99,102,241,0.08) 1px, transparent 1px); background-size: 28px 28px; } [data-bs-theme="light"] .auth-page { background-image: radial-gradient(rgba(79,70,229,0.06) 1px, transparent 1px); background-size: 28px 28px; } .auth-card { background: var(--sbp-surface); border: 1px solid var(--sbp-border); border-radius: var(--radius-lg); padding: 36px 32px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); animation: modalSlideUp 0.3s ease; } .auth-logo { font-size: 20px; font-weight: 700; margin-bottom: 6px; } .auth-logo .logo-sbp { background: linear-gradient(135deg, #6366f1, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-logo .logo-studio { color: var(--sbp-text2); font-weight: 400; font-size: 16px; } .auth-subtitle { color: var(--sbp-text3); font-size: 12.5px; margin-bottom: 28px; line-height: 1.5; } .auth-title { font-size: 18px; font-weight: 700; color: var(--sbp-text); margin-bottom: 22px; } .auth-form-group { margin-bottom: 16px; } .auth-form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--sbp-text3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .auth-form-group input { width: 100%; background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: var(--radius-sm); color: var(--sbp-text); padding: 10px 12px; font-size: 13px; font-family: var(--font-sans); outline: none; transition: var(--transition); } .auth-form-group input:focus { border-color: var(--sbp-accent); box-shadow: 0 0 0 3px var(--sbp-accent-glow); background: var(--sbp-surface); } .auth-form-group input::placeholder { color: var(--sbp-text3); } .auth-form-group input[readonly] { color: var(--sbp-text2); cursor: default; background: var(--sbp-surface3); } .btn-auth { width: 100%; padding: 11px; background: linear-gradient(135deg, var(--sbp-accent), #8b5cf6); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; font-family: var(--font-sans); cursor: pointer; margin-top: 6px; transition: var(--transition); box-shadow: 0 2px 12px rgba(99,102,241,0.3); } .btn-auth:hover { filter: brightness(1.08); box-shadow: 0 4px 20px rgba(99,102,241,0.45); transform: translateY(-1px); } .btn-auth:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .auth-footer { text-align: center; margin-top: 20px; color: var(--sbp-text3); font-size: 12.5px; } .auth-footer a { color: var(--sbp-accent); text-decoration: none; font-weight: 600; } .auth-footer a:hover { text-decoration: underline; } .auth-page .copyright-bar { margin-top: 24px; } .copyright-bar { text-align: center; padding: 6px 0 8px; color: var(--sbp-text3); font-size: 11px; opacity: 0.65; letter-spacing: 0.02em; } .copyright-bar a { color: var(--sbp-text3); text-decoration: none; font-weight: 500; } .copyright-bar a:hover { color: var(--sbp-accent); text-decoration: underline; } .err-msg { color: var(--sbp-red); font-size: 12.5px; margin: 10px 0 4px; min-height: 18px; text-align: center; font-weight: 500; } .form-section-label { font-size: 10.5px; font-weight: 700; color: var(--sbp-text3); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; } /* Invite page */ .invite-box { background: var(--sbp-surface2); border: 1px solid var(--sbp-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px; } .invite-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--sbp-border2); } .invite-row:last-child { border-bottom: none; } .invite-label { font-size: 11px; font-weight: 600; color: var(--sbp-text3); text-transform: uppercase; letter-spacing: 0.4px; } .invite-value { font-size: 13px; color: var(--sbp-text); font-weight: 600; } .perm-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .perm-read { background: var(--sbp-green-bg); color: var(--sbp-green); } .perm-write { background: var(--sbp-yellow-bg); color: var(--sbp-yellow); } .perm-admin { background: var(--sbp-blue-bg); color: var(--sbp-accent); } .section-title { font-size: 13px; font-weight: 700; color: var(--sbp-text); margin-bottom: 16px; } .divider { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: var(--sbp-text3); font-size: 11px; } .divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--sbp-border); } .toggle-link { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--sbp-text3); } .toggle-link a { color: var(--sbp-accent); cursor: pointer; text-decoration: none; font-weight: 600; } .toggle-link a:hover { text-decoration: underline; } .loading { color: var(--sbp-text3); font-size: 13px; text-align: center; padding: 32px 0; } .success-msg { color: var(--sbp-green); font-size: 13px; text-align: center; padding: 12px 0; font-weight: 500; }