/* ══════════════════════════════════════════════════════════ SendGlobe Design System — v2 Reference: Mercury, Linear, Stripe, Apple HIG Mobile-first. 8px grid. Inter font. ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Brand — blue, matching landing ── */ --brand: #3b82f6; --brand-dark: #2563eb; --brand-light: rgba(59, 130, 246, 0.14); --brand-mid: #60a5fa; /* ── Page backgrounds — aligned with global design system ── */ --bg-page: var(--bg, #000000); --bg-card: #222222; --bg-subtle: var(--bg, #000000); /* ── Text hierarchy ── */ --text: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8; --text-4: #64748b; /* ── Borders ── */ --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); /* ── Semantic ── */ --green: #10b981; --green-bg: rgba(16, 185, 129, 0.12); --green-text: #6ee7b7; --red: #ef4444; --red-bg: rgba(239, 68, 68, 0.12); --red-text: #fca5a5; --amber: #f59e0b; --amber-bg: rgba(245, 158, 11, 0.12); --amber-text: #fcd34d; --blue: #3b82f6; --blue-bg: rgba(59, 130, 246, 0.12); --blue-text: #93c5fd; --purple: #8b5cf6; --purple-bg: rgba(139, 92, 246, 0.12); --purple-text: #c4b5fd; --cyan-bg: rgba(6, 182, 212, 0.12); --cyan-text: #67e8f9; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.7), 0 6px 16px rgba(0, 0, 0, 0.5); /* ── Radii ── */ --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 20px; --r-full: 9999px; /* ── Layout ── */ --sidebar-w: 240px; --nav-h: 60px; /* bottom tab bar height on mobile */ --page-max: 900px; --topbar-h: 56px; /* ── Typography ── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Mono', monospace; } /* ── Light theme — applied when ── */ [data-theme="light"] { --bg-page: #ffffff; --bg-card: #f1f5f9; --bg-subtle: #f8fafc; --text: #0f172a; --text-2: #334155; --text-3: #64748b; --text-4: #94a3b8; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --green-bg: rgba(16, 185, 129, 0.10); --green-text: #059669; --red-bg: rgba(239, 68, 68, 0.10); --red-text: #dc2626; --amber-bg: rgba(245, 158, 11, 0.10); --amber-text: #d97706; --blue-bg: rgba(59, 130, 246, 0.10); --blue-text: #2563eb; --purple-bg: rgba(139, 92, 246, 0.10); --purple-text: #7c3aed; --cyan-bg: rgba(6, 182, 212, 0.10); --cyan-text: #0891b2; --brand-light: rgba(59, 130, 246, 0.10); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.07); } /* ── Light theme — component overrides for hardcoded dark values ── */ [data-theme="light"] body { background: #f8fafc; color: #0f172a; } /* Logo — match landing site (Logo.astro): white wordmark in dark, deep blue in light */ .sg-logo-wordmark { fill: #ffffff; } .sg-logo-sublabel { fill: #94a3b8; } [data-theme="light"] .sg-logo-wordmark { fill: #1e40af; } [data-theme="light"] .sg-logo-sublabel { fill: #0f172a; } /* Sidebar uses a hardcoded dark gradient — replace with flat card bg */ [data-theme="light"] .sidebar { background: #ffffff; border-right-color: rgba(0, 0, 0, 0.08); } /* Sidebar nav item active/hover */ [data-theme="light"] .nav-item.active { background: var(--bg-subtle); } [data-theme="light"] .nav-item:hover { background: var(--bg-subtle); } /* Sidebar user row */ [data-theme="light"] .sidebar-user:hover { background: var(--bg-subtle); } /* Mobile top bar uses hardcoded dark rgba */ [data-theme="light"] .mobile-topbar { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(0, 0, 0, 0.08); } /* Bottom nav */ [data-theme="light"] .bottom-nav { background: #ffffff; border-top-color: rgba(0, 0, 0, 0.08); } /* Bottom nav active */ [data-theme="light"] .bottom-nav-item.active { color: var(--brand); } /* Wizard/stepper active dot — hardcoded #111827 */ [data-theme="light"] .step.active .step-dot { background: #ffffff; } /* Cards & panels */ [data-theme="light"] .card, [data-theme="light"] .detail-card, [data-theme="light"] .panel { border-color: rgba(0, 0, 0, 0.08); } /* Table rows */ [data-theme="light"] .table-row:hover, [data-theme="light"] .release-row:hover { background: var(--bg-subtle); } /* Input fields */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: var(--brand); } /* Confirm modal overlay and card shadow */ [data-theme="light"] .confirm-overlay { background: rgba(0, 0, 0, 0.25); } [data-theme="light"] .confirm-card { box-shadow: var(--shadow-lg); } /* Email gate */ [data-theme="light"] .email-gate-card { box-shadow: var(--shadow-lg); } /* Ghost buttons */ [data-theme="light"] .btn-ghost:hover { background: var(--bg-subtle); } /* Mobile topbar buttons */ [data-theme="light"] .topbar-logout-btn:hover { background: var(--bg-subtle); } /* Spinner on light bg */ [data-theme="light"] .spinner { border-color: rgba(0, 0, 0, 0.1); border-top-color: var(--brand); } /* Input autofill — ensure light bg fills the autocomplete box */ [data-theme="light"] input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #f1f5f9 inset; -webkit-text-fill-color: #0f172a; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg-page); transition: background 0.2s ease, color 0.2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { display: block; } button { font-family: var(--font); cursor: pointer; } /* ────────────────────────────────────────────────────────── LAYOUT — sidebar + main, collapses to bottom-nav on mobile ────────────────────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; } /* ── Sidebar (desktop ≥768px) ── */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; background: var(--bg-page); border-right: 1px solid var(--border); z-index: 200; overflow-y: auto; } .sidebar-brand { padding: 18px 16px 14px; display: flex; align-items: center; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-logo-mark { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-name { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; } .sidebar-nav { flex: 1; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); color: var(--text-3); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.1s, color 0.1s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .nav-item:hover { background: var(--bg-page); color: var(--text-2); text-decoration: none; } .nav-item.active { background: var(--brand-light); color: var(--brand); } .nav-item.active svg { color: var(--brand); } .nav-item svg { flex-shrink: 0; color: var(--text-4); } .nav-item.active svg { color: var(--brand); } .nav-item span { flex: 1; } .sidebar-footer { padding: 12px 12px; border-top: 1px solid var(--border); flex-shrink: 0; } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: var(--r); cursor: pointer; transition: background 0.1s; } .sidebar-user:hover { background: var(--bg-page); } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-bal { font-size: 12px; color: var(--text-4); margin-top: 1px; } .sidebar-sign-out { color: var(--text-4); flex-shrink: 0; } .sidebar-sign-out:hover { color: var(--red); } .theme-toggle-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: var(--r); border: none; background: none; color: var(--text-4); font-size: 12px; font-weight: 500; font-family: var(--font); cursor: pointer; transition: background 0.1s, color 0.1s; margin-bottom: 4px; } .theme-toggle-btn:hover { background: var(--bg-page); color: var(--text-2); } [data-theme="light"] .theme-toggle-btn:hover { background: var(--bg-subtle); } /* ── Main area ── */ .main-area { flex: 1; margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } /* ── Page container ── */ .page { flex: 1; padding: 28px 32px; width: 100%; max-width: var(--page-max); } /* ── Page header ── */ .page-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page-hd h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); } .page-hd-right { display: flex; align-items: center; gap: 8px; } /* ── Section label ── */ .section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-4); margin-bottom: 12px; } /* ── Mobile header (hidden on desktop) ── */ .mobile-topbar { display: none; align-items: center; justify-content: space-between; padding: 0 16px; height: var(--topbar-h); background: rgba(13, 19, 32, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; flex-shrink: 0; } .mobile-topbar-logo { display: flex; align-items: center; gap: 9px; } .mobile-topbar-logo span { font-size: 17px; font-weight: 700; color: var(--text); } .mobile-topbar-right { display: flex; align-items: center; gap: 10px; } .topbar-logout-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-4); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .topbar-logout-btn:hover { color: var(--red); background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); } /* ── Bottom navigation (mobile only) ── */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-h); background: var(--bg-card); border-top: 1px solid var(--border); z-index: 200; align-items: stretch; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-4); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; border: none; background: none; font-family: var(--font); transition: color 0.1s; cursor: pointer; padding: 6px 0; } .bottom-nav-item svg { color: var(--text-4); transition: color 0.1s; } .bottom-nav-item.active, .bottom-nav-item.active svg { color: var(--brand); } /* ────────────────────────────────────────────────────────── CARDS ────────────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .card+.card { margin-top: 0; } .card-body { padding: 20px 24px; } .card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); } .card-hd h3 { font-size: 14px; font-weight: 600; color: var(--text); } .card-hd .card-hd-action { font-size: 13px; color: var(--brand); font-weight: 500; cursor: pointer; } .card-hd .card-hd-action:hover { text-decoration: underline; } .card-ft { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--bg-subtle); border-radius: 0 0 var(--r-md) var(--r-md); } /* Stat / gradient card */ .stat-card { background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 45%, #2563eb 100%); border-radius: var(--r-md); padding: 24px 28px; color: white; box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35), 0 2px 8px rgba(37, 99, 235, 0.2); border: 1px solid rgba(59, 130, 246, 0.25); } .stat-card .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin-bottom: 8px; } .stat-card .stat-amount { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; } .stat-card .stat-sub { font-size: 13px; opacity: 0.65; margin-top: 8px; } /* Stats grid tiles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; } .stats-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-xs); } .stats-tile .st-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); margin-bottom: 6px; } .stats-tile .st-value { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); } .stats-tile .st-sub { font-size: 12px; color: var(--text-4); margin-top: 3px; } /* ────────────────────────────────────────────────────────── BUTTONS ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: var(--r); font-family: var(--font); font-weight: 500; font-size: 14px; padding: 9px 18px; white-space: nowrap; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.08s; text-decoration: none; line-height: 1.4; } .btn:active { transform: scale(0.98); } .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35); } .btn-primary:hover:not(:disabled) { background: var(--brand-dark); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.45); transform: translateY(-1px); } .btn-primary:active:not(:disabled) { transform: scale(0.98); box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3); } .btn-secondary { background: var(--bg-card); color: var(--text-2); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--bg-page); color: var(--text); } .btn-ghost { background: transparent; color: var(--text-3); padding: 7px 12px; } .btn-ghost:hover:not(:disabled) { background: var(--bg-page); color: var(--text-2); } .btn-danger { background: var(--red); color: white; } .btn-danger:hover:not(:disabled) { background: #B91C1C; } .btn-success { background: var(--green); color: white; } .btn-success:hover:not(:disabled) { background: #047857; } .btn-sm { font-size: 13px; padding: 6px 13px; border-radius: var(--r-sm); } .btn-lg { font-size: 16px; padding: 13px 28px; border-radius: var(--r-md); } .btn-full { width: 100%; } .btn-icon { padding: 7px; border-radius: var(--r); } /* ────────────────────────────────────────────────────────── FORM ELEMENTS ────────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 5px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-label { font-size: 13px; font-weight: 500; color: var(--text-2); } .form-hint { font-size: 12px; color: var(--text-4); line-height: 1.4; } .form-error { font-size: 12px; color: var(--red); } input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea { font-family: var(--font); font-size: 15px; color: var(--text); background: var(--bg-subtle); border: 1.5px solid var(--border-strong); border-radius: var(--r); padding: 10px 14px; width: 100%; outline: none; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; line-height: 1.5; } input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } input::placeholder, textarea::placeholder { color: var(--text-4); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--bg-subtle) inset; -webkit-text-fill-color: var(--text); } textarea { min-height: 90px; resize: vertical; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .input-wrap { position: relative; } .input-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 15px; font-weight: 500; pointer-events: none; } .input-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-4); font-size: 13px; font-weight: 500; pointer-events: none; } .input-wrap input.with-prefix { padding-left: 40px; } .input-wrap input.with-suffix { padding-right: 64px; } /* ────────────────────────────────────────────────────────── BADGES ────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex-shrink: 0; } .badge-proposed { background: var(--bg-page); color: var(--text-3); border: 1px solid var(--border); } .badge-proposed::before { background: var(--text-4); } .badge-handshaking { background: var(--cyan-bg); color: var(--cyan-text); } .badge-handshaking::before { background: var(--cyan-text); } .badge-committed { background: var(--blue-bg); color: var(--blue-text); } .badge-verifying { background: var(--amber-bg); color: var(--amber-text); } .badge-eligible { background: var(--purple-bg); color: var(--purple-text); } .badge-executing { background: var(--brand-light); color: var(--brand); } .badge-executed { background: var(--green-bg); color: var(--green-text); } .badge-completed { background: var(--green-bg); color: var(--green-text); } .badge-blocked { background: var(--amber-bg); color: var(--amber-text); } .badge-failed { background: var(--red-bg); color: var(--red-text); } .badge-cancelled { background: var(--bg-subtle); color: var(--text-3); } .badge-pass { background: var(--green-bg); color: var(--green-text); } .badge-fail { background: var(--red-bg); color: var(--red-text); } .badge-missing { background: var(--bg-page); color: var(--text-4); border: 1px solid var(--border); } .badge-missing::before { background: var(--text-4); } .badge-pending { background: var(--blue-bg); color: var(--blue-text); } .badge-accepted { background: var(--green-bg); color: var(--green-text); } .badge-invited { background: var(--amber-bg); color: var(--amber-text); } /* ────────────────────────────────────────────────────────── ALERTS ────────────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r); font-size: 14px; line-height: 1.55; } .alert-success { background: var(--green-bg); color: var(--green-text); } .alert-error { background: var(--red-bg); color: var(--red-text); } .alert-warn { background: var(--amber-bg); color: var(--amber-text); } .alert-info { background: var(--blue-bg); color: var(--blue-text); } /* ────────────────────────────────────────────────────────── LIST ROWS (transaction / agreement list style) ────────────────────────────────────────────────────────── */ .list-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; cursor: pointer; transition: background 0.08s; border-bottom: 1px solid var(--border); } .list-row:last-child { border-bottom: none; } .list-row:hover { background: var(--bg-subtle); } .list-icon { width: 40px; height: 40px; border-radius: var(--r); background: var(--bg-page); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-3); } .list-body { flex: 1; min-width: 0; } .list-title { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-sub { font-size: 12px; color: var(--text-4); margin-top: 2px; } .list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; } .list-amount { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .list-chev { color: var(--text-4); display: flex; align-items: center; } /* ────────────────────────────────────────────────────────── AVATAR ────────────────────────────────────────────────────────── */ .avatar { display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); font-weight: 700; flex-shrink: 0; user-select: none; background: var(--brand-light); color: var(--brand); font-size: 14px; width: 36px; height: 36px; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .avatar-lg { width: 48px; height: 48px; font-size: 18px; } .avatar-xl { width: 64px; height: 64px; font-size: 24px; } /* ────────────────────────────────────────────────────────── STEPPER — agreement progress ────────────────────────────────────────────────────────── */ .stepper { display: flex; align-items: flex-start; padding: 20px 24px 16px; gap: 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .stepper::-webkit-scrollbar { display: none; } .step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; } .step:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: var(--border); z-index: 0; } .step.done:not(:last-child)::after { background: var(--brand); } .step.active:not(:last-child)::after { background: var(--border); } .step-dot { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--bg-page); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-4); position: relative; z-index: 1; flex-shrink: 0; transition: all 0.2s; } .step.done .step-dot { background: var(--brand); border-color: var(--brand); color: white; } .step.active .step-dot { background: var(--bg-page); border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); } .step-lbl { font-size: 12px; font-weight: 500; color: var(--text-4); margin-top: 7px; line-height: 1.3; max-width: 70px; text-align: center; } .step.done .step-lbl { color: var(--text-3); } .step.active .step-lbl { color: var(--brand); font-weight: 600; } /* ────────────────────────────────────────────────────────── ACTION CARD — prominent next step ────────────────────────────────────────────────────────── */ .action-card { background: var(--brand-light); border: 1.5px solid rgba(59, 130, 246, 0.3); border-radius: var(--r-md); padding: 20px 24px; } .action-card.action-success { background: var(--green-bg); border-color: rgba(16, 185, 129, 0.35); } .action-card .ac-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); margin-bottom: 6px; } .action-card.action-success .ac-eyebrow { color: var(--green); } .action-card .ac-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .action-card .ac-desc { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 14px; } /* Wallet selection in action card */ .wallet-select-panel { margin-bottom: 16px; } .wallet-select-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 8px; } .wallet-select-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wallet-select-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--r); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; } .wallet-select-opt:hover { border-color: var(--brand); } .wallet-select-opt.selected { border-color: var(--brand); background: var(--brand-light); } .wso-title { font-size: 13px; font-weight: 600; color: var(--text); } .wso-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; } @media (max-width: 480px) { .wallet-select-options { grid-template-columns: 1fr; } } /* ────────────────────────────────────────────────────────── CANCEL / REFUND ────────────────────────────────────────────────────────── */ .cancel-card { background: #fef2f2; border: 1.5px solid rgba(239, 68, 68, 0.3); border-radius: var(--r-md); padding: 20px 24px; margin-bottom: 12px; } .cancel-card-hd { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #dc2626; margin-bottom: 6px; } .cancel-card-desc { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 14px; } .cancel-card-actions { display: flex; gap: 10px; } .cancel-request-row { display: flex; justify-content: flex-end; margin-bottom: 12px; } .cancel-request-btn { color: #dc2626 !important; border-color: rgba(239, 68, 68, 0.3) !important; } .cancel-request-btn:hover { background: #fef2f2 !important; } .btn-error { background: #dc2626; color: #fff; border: none; border-radius: var(--r-sm); padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-error:hover { background: #b91c1c; } .btn-error:disabled { opacity: 0.5; cursor: not-allowed; } @media (prefers-color-scheme: dark) { .cancel-card { background: rgba(239, 68, 68, 0.08); } .cancel-request-btn:hover { background: rgba(239, 68, 68, 0.1) !important; } } /* ────────────────────────────────────────────────────────── CONDITIONS ────────────────────────────────────────────────────────── */ .condition-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); } .condition-row:last-child { border-bottom: none; } .condition-body { flex: 1; min-width: 0; } .condition-key { font-size: 14px; font-weight: 500; color: var(--text); } .condition-hint { font-size: 12px; color: var(--text-4); margin-top: 2px; } .condition-proof { margin-top: 10px; display: flex; gap: 8px; align-items: center; } .condition-proof input { flex: 1; } .evidence-note { margin: 0 20px 12px; padding: 9px 12px; background: color-mix(in srgb, var(--warning, #f59e0b) 8%, transparent); border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent); border-radius: 8px; font-size: 12px; color: var(--text-3, #94a3b8); line-height: 1.5; } /* ────────────────────────────────────────────────────────── AUDIT LOG ────────────────────────────────────────────────────────── */ .audit-entry { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; } .audit-entry:last-child { border-bottom: none; } .audit-action { font-size: 13px; font-weight: 500; color: var(--text); } .audit-time { font-size: 12px; color: var(--text-4); } /* ────────────────────────────────────────────────────────── DETAIL KV grid ────────────────────────────────────────────────────────── */ .kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .kv { padding: 12px 20px; border-bottom: 1px solid var(--border); } .kv:nth-child(odd) { border-right: 1px solid var(--border); } .kv:last-child, .kv:nth-last-child(2):nth-child(odd) { border-bottom: none; } .kv-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); margin-bottom: 4px; } .kv-value { font-size: 14px; font-weight: 500; color: var(--text); word-break: break-all; } /* ────────────────────────────────────────────────────────── COPY FIELD ────────────────────────────────────────────────────────── */ .copy-field { display: flex; border: 1.5px solid var(--border-strong); border-radius: var(--r); overflow: hidden; } .copy-field input { border: none; border-radius: 0; background: var(--bg-page); font-family: var(--font-mono); font-size: 13px; color: var(--text-3); flex: 1; } .copy-field input:focus { box-shadow: none; border: none; } .copy-field .copy-btn { flex-shrink: 0; background: var(--bg-card); border: none; border-left: 1px solid var(--border); padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; transition: background 0.1s; font-family: var(--font); } .copy-field .copy-btn:hover { background: var(--brand-light); } /* ────────────────────────────────────────────────────────── TYPE CARDS (agreement type selector) ────────────────────────────────────────────────────────── */ .type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .type-card { border: 1.5px solid var(--border); border-radius: var(--r); padding: 14px 16px; cursor: pointer; transition: border-color 0.12s, background 0.12s; background: var(--bg-card); text-align: left; width: 100%; font-family: var(--font); } .type-card:hover:not(.selected) { border-color: var(--border-strong); background: var(--bg-subtle); } .type-card.selected { border-color: var(--brand); background: var(--brand-light); } .type-card-name { font-size: 14px; font-weight: 600; color: var(--text); } .type-card-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.4; } .type-card.selected .type-card-name { color: var(--brand); } /* ────────────────────────────────────────────────────────── AMOUNT PILLS ────────────────────────────────────────────────────────── */ .amount-pills { display: flex; gap: 8px; flex-wrap: wrap; } .amount-pill { border: 1.5px solid var(--border); border-radius: var(--r); padding: 7px 16px; font-size: 14px; font-weight: 500; cursor: pointer; background: var(--bg-card); transition: border-color 0.12s, background 0.12s, color 0.12s; color: var(--text-2); font-family: var(--font); } .amount-pill:hover:not(.selected) { border-color: var(--brand); color: var(--brand); } .amount-pill.selected { background: var(--brand-light); border-color: var(--brand); color: var(--brand); } /* ────────────────────────────────────────────────────────── QUICK ACTIONS (wallet) ────────────────────────────────────────────────────────── */ .quick-actions { display: flex; gap: 10px; flex-wrap: wrap; } .qa-btn { flex: 1; min-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--r-md); font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; } .qa-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); } .qa-btn svg { color: var(--text-4); } .qa-btn:hover svg { color: var(--brand); } .qa-btn span { font-size: 12px; } /* ────────────────────────────────────────────────────────── QR CODE WRAPPER ────────────────────────────────────────────────────────── */ .qr-wrap { display: flex; justify-content: center; padding: 20px; background: white; border-radius: var(--r); border: 1px solid var(--border); } /* ────────────────────────────────────────────────────────── EMPTY STATE ────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; } .empty-icon { width: 52px; height: 52px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--text-4); margin-bottom: 16px; } .empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .empty-state p { font-size: 14px; color: var(--text-3); line-height: 1.6; max-width: 300px; margin-bottom: 20px; } /* ────────────────────────────────────────────────────────── SPINNER ────────────────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 20px; height: 20px; border: 2.5px solid var(--border); border-top-color: var(--brand); border-radius: var(--r-full); animation: spin 0.6s linear infinite; display: inline-block; flex-shrink: 0; } .spinner-sm { width: 16px; height: 16px; border-width: 2px; } .loading-full { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg-page); } .loading-full p { font-size: 13px; color: var(--text-4); } /* Email gate overlay */ .email-gate-overlay { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-page); padding: 20px; } .email-gate-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 40px 36px; max-width: 420px; width: 100%; text-align: center; } .email-gate-logo { margin-bottom: 20px; } .email-gate-card h2 { font-size: 22px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.02em; } .email-gate-card p { font-size: 14px; color: var(--text-3); line-height: 1.6; margin: 0 0 24px; } .email-gate-card form { display: flex; flex-direction: column; gap: 12px; } .email-gate-card input { text-align: center; font-size: 15px; padding: 12px 16px; } .email-gate-err { color: var(--red); font-size: 12px; } .email-gate-card .btn { width: 100%; justify-content: center; } .email-gate-signout { margin-top: 8px; color: var(--text-4); width: 100%; justify-content: center; } /* ────────────────────────────────────────────────────────── LANDING PAGE (dark theme, full marketing site) All classes prefixed with l- to avoid collision. ────────────────────────────────────────────────────────── */ /* ── Colour tokens (landing only — dark palette) ── */ :root { --ld-bg: #080c14; --ld-surface: #0d1320; --ld-card: #111827; --ld-card-hv: #161e30; --ld-border: rgba(255, 255, 255, 0.07); --ld-border-glow: rgba(99, 179, 237, 0.25); --ld-blue: #3b82f6; --ld-cyan: #06b6d4; --ld-purple: #8b5cf6; --ld-green: #10b981; --ld-amber: #f59e0b; --ld-rose: #f43f5e; --ld-txt1: #f1f5f9; --ld-txt2: #cbd5e1; /* bumped: #94a3b8 → #cbd5e1 for better contrast */ --ld-txt3: #94a3b8; /* fixed: was #475569 (~2:1 contrast), now ~6.7:1 */ --ld-txt4: #64748b; } /* ── Reset for landing ── */ .l-page { min-height: 100vh; font-family: var(--font); background: var(--ld-bg); color: var(--ld-txt1); overflow-x: hidden; -webkit-font-smoothing: antialiased; } .l-page *, .l-page *::before, .l-page *::after { box-sizing: border-box; } .l-page a { text-decoration: none; } /* ── Container ── */ .l-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ── Logo ── */ .l-logo { display: flex; align-items: center; gap: 10px; } .l-logo-name { font-size: 18px; font-weight: 700; color: var(--ld-txt1); letter-spacing: -0.3px; } .l-logo-os { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--ld-txt3); text-transform: uppercase; margin-left: 2px; } /* ── Navigation ── */ .l-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 68px; background: rgba(8, 12, 20, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--ld-border); } .l-nav-inner { display: flex; align-items: center; gap: 32px; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .l-nav-logo-link { display: flex; align-items: center; flex-shrink: 0; } .l-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; } .l-nav-links a { color: var(--ld-txt2); font-size: 14px; font-weight: 500; padding: 7px 13px; border-radius: 8px; transition: all 0.15s; } .l-nav-links a:hover { color: var(--ld-txt1); background: rgba(255, 255, 255, 0.05); } .l-nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } /* ── Buttons ── */ .l-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; font-family: var(--font); transition: all 0.18s ease; text-decoration: none; } .l-btn-sm { padding: 9px 18px; font-size: 13px; } .l-btn-lg { padding: 14px 30px; font-size: 15px; } .l-btn-primary { background: var(--ld-blue); color: #fff; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35); } .l-btn-primary:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(59, 130, 246, 0.45); } .l-btn-primary:active { transform: scale(0.98); } .l-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .l-btn-ghost { background: transparent; color: var(--ld-txt1); border: 1px solid var(--ld-border); } .l-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); } /* ── Tags / Pills ── */ .l-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; background: rgba(59, 130, 246, 0.1); color: var(--ld-blue); border: 1px solid rgba(59, 130, 246, 0.2); } .l-tag--green { background: rgba(16, 185, 129, 0.1); color: var(--ld-green); border-color: rgba(16, 185, 129, 0.2); } .l-tag--purple { background: rgba(139, 92, 246, 0.1); color: var(--ld-purple); border-color: rgba(139, 92, 246, 0.2); } .l-tag--cyan { background: rgba(6, 182, 212, 0.1); color: var(--ld-cyan); border-color: rgba(6, 182, 212, 0.2); } .l-tag--amber { background: rgba(245, 158, 11, 0.1); color: var(--ld-amber); border-color: rgba(245, 158, 11, 0.2); } /* ── Section scaffolding ── */ .l-section { padding: 96px 0; } .l-section--surface { background: var(--ld-surface); } .l-section-head { text-align: center; margin-bottom: 56px; } .l-section-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ld-blue); margin-bottom: 12px; } .l-section-title { font-size: clamp(26px, 4vw, 42px); font-weight: 700; line-height: 1.15; color: var(--ld-txt1); margin-bottom: 16px; } .l-section-sub { font-size: 17px; color: var(--ld-txt2); line-height: 1.7; max-width: 600px; margin: 0 auto; } /* ── Hero ── */ .l-hero { position: relative; padding: 156px 0 96px; background: var(--ld-bg); overflow: hidden; } .l-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: transparent; } .l-hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 0%, transparent 100%); } .l-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .l-hero-orb--a { width: 580px; height: 580px; background: rgba(59, 130, 246, 0.07); top: -180px; left: -80px; } .l-hero-orb--b { width: 380px; height: 380px; background: rgba(139, 92, 246, 0.07); top: -80px; right: -80px; } .l-hero-content { position: relative; z-index: 1; text-align: center; max-width: 860px; margin: 0 auto; } .l-invite-banner { display: inline-flex; align-items: center; gap: 8px; background: rgba(79, 143, 255, 0.12); border: 1px solid rgba(79, 143, 255, 0.25); color: #a0c4ff; font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 10px; margin-bottom: 24px; } .l-hero-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .l-hero-h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: var(--ld-txt1); margin-bottom: 24px; } .l-gr-text { background: linear-gradient(90deg, #60a5fa, #a78bfa, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .l-hero-desc { font-size: clamp(16px, 2vw, 19px); color: var(--ld-txt2); max-width: 640px; margin: 0 auto 40px; line-height: 1.7; } .l-hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; } .l-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 16px; padding: 8px; max-width: 700px; margin: 0 auto; } .l-stat { flex: 1; min-width: 140px; padding: 18px 22px; text-align: center; } .l-stat+.l-stat { border-left: 1px solid var(--ld-border); } .l-stat-val { font-size: 24px; font-weight: 700; color: var(--ld-txt1); margin-bottom: 3px; } .l-stat-lbl { font-size: 12px; color: var(--ld-txt3); text-transform: uppercase; letter-spacing: 0.06em; } /* ── Trust bar ── */ .l-trust-bar { background: var(--ld-surface); border-top: 1px solid var(--ld-border); border-bottom: 1px solid var(--ld-border); padding: 16px 0; } .l-trust-inner { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .l-trust-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ld-txt2); font-weight: 500; } /* ── Infrastructure ── */ .l-infra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .l-infra-card { position: relative; overflow: hidden; background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 18px; padding: 32px 26px 24px; display: flex; flex-direction: column; transition: all 0.28s ease; } .l-infra-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 18px 18px 0 0; } .l-infra-card--circle::before { background: linear-gradient(90deg, #2775CA, #5B9BD5); } .l-infra-card--icp::before { background: linear-gradient(90deg, #3B00B9, #ED1E79); } .l-infra-card--transak::before { background: linear-gradient(90deg, #0AE448, #00BFA5); } .l-infra-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } .l-infra-card--circle:hover { border-color: rgba(39, 117, 202, 0.35); } .l-infra-card--icp:hover { border-color: rgba(237, 30, 121, 0.25); } .l-infra-card--transak:hover { border-color: rgba(10, 228, 72, 0.2); } .l-infra-wordmark { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .l-infra-logo-mark { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .l-infra-logo-mark--circle { background: rgba(39, 117, 202, 0.12); } .l-infra-logo-mark--icp { background: rgba(59, 0, 185, 0.12); } .l-infra-logo-mark--transak { background: rgba(10, 228, 72, 0.1); } .l-infra-name { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; } .infra-name--circle { color: #4a9fd4; } .infra-name--icp { background: linear-gradient(90deg, #7B61FF, #ED1E79); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .infra-name--transak { color: #33d860; } .l-infra-badge { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ld-txt3); margin-top: 3px; } .l-infra-card-title { font-size: 15px; font-weight: 600; color: var(--ld-txt1); margin-bottom: 10px; } .l-infra-card-desc { font-size: 13px; color: var(--ld-txt2); line-height: 1.7; flex: 1; margin-bottom: 18px; } .l-infra-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .l-infra-pill { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; } .l-infra-pill--circle { background: rgba(39, 117, 202, 0.1); color: #4a9fd4; border: 1px solid rgba(39, 117, 202, 0.2); } .l-infra-pill--icp { background: rgba(123, 97, 255, 0.1); color: #a78bfa; border: 1px solid rgba(123, 97, 255, 0.2); } .l-infra-pill--transak { background: rgba(10, 228, 72, 0.08); color: #4ade80; border: 1px solid rgba(10, 228, 72, 0.18); } .l-infra-stats { display: flex; gap: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .l-infra-stat { flex: 1; padding-right: 10px; } .l-infra-stat+.l-infra-stat { padding-left: 10px; padding-right: 0; border-left: 1px solid rgba(255, 255, 255, 0.05); } .l-infra-stat-val { font-size: 17px; font-weight: 700; margin-bottom: 2px; } .l-infra-stat-val--circle { color: #4a9fd4; } .l-infra-stat-val--icp { color: #a78bfa; } .l-infra-stat-val--transak { color: #4ade80; } .l-infra-stat-lbl { font-size: 12px; color: var(--ld-txt3); line-height: 1.3; } .l-infra-disclaimer { text-align: center; font-size: 11px; color: var(--ld-txt3); max-width: 700px; margin: 32px auto 0; line-height: 1.8; } /* ── Capabilities ── */ .l-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; } .l-cap-card { background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 14px; padding: 26px; transition: all 0.22s ease; } .l-cap-card:hover { border-color: var(--ld-border-glow); background: var(--ld-card-hv); transform: translateY(-2px); box-shadow: 0 0 36px rgba(59, 130, 246, 0.1); } .l-cap-icon { font-size: 28px; margin-bottom: 14px; } .l-cap-title { font-size: 16px; font-weight: 600; color: var(--ld-txt1); margin-bottom: 8px; } .l-cap-desc { font-size: 13px; color: var(--ld-txt2); line-height: 1.65; } /* ── Compliance pillars ── */ .l-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 40px; } .l-pillar-card { background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 14px; padding: 22px; transition: all 0.18s; } .l-pillar-card:hover { border-color: rgba(16, 185, 129, 0.3); background: var(--ld-card-hv); } .l-pillar-num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ld-green); margin-bottom: 8px; } .l-pillar-title { font-size: 14px; font-weight: 600; color: var(--ld-txt1); margin-bottom: 6px; } .l-pillar-desc { font-size: 12px; color: var(--ld-txt2); line-height: 1.6; } /* ── Pipeline ── */ .l-pipeline-wrap { background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 14px; padding: 28px; } .l-pipeline-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; } .l-pipeline-header h3 { font-size: 18px; font-weight: 600; color: var(--ld-txt1); } .l-pipeline-note { font-size: 12px; color: var(--ld-txt3); margin-left: auto; max-width: 280px; line-height: 1.5; } .l-pipeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; } .l-pipeline-stage { border-radius: 10px; padding: 16px 14px; border: 1px solid rgba(255, 255, 255, 0.06); border-top-width: 2px; background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 5px; position: relative; } .l-ps--blue { border-top-color: rgba(59, 130, 246, 0.5); } .l-ps--green { border-top-color: rgba(16, 185, 129, 0.5); } .l-ps--amber { border-top-color: rgba(245, 158, 11, 0.5); } .l-ps--purple { border-top-color: rgba(139, 92, 246, 0.5); } .l-ps--cyan { border-top-color: rgba(6, 182, 212, 0.5); } .l-ps-num { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.5; } .l-ps-emoji { font-size: 18px; } .l-ps-name { font-size: 13px; font-weight: 600; color: var(--ld-txt1); line-height: 1.3; } .l-ps-desc { font-size: 12px; color: var(--ld-txt3); line-height: 1.5; flex: 1; } .l-ps-arr { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--ld-txt3); font-size: 14px; z-index: 2; display: none; /* shown via row connector below */ } /* ── Use cases ── */ .l-uc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .l-uc-card { background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 14px; padding: 28px; transition: all 0.2s; } .l-uc-card:hover { border-color: var(--ld-border-glow); background: var(--ld-card-hv); } .l-uc-emoji { font-size: 32px; margin-bottom: 12px; } .l-uc-card h3 { font-size: 17px; font-weight: 600; color: var(--ld-txt1); margin-bottom: 8px; } .l-uc-card p { font-size: 14px; color: var(--ld-txt2); line-height: 1.7; } /* ── Security ── */ .l-security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .l-security-item { display: flex; gap: 16px; align-items: flex-start; background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 14px; padding: 22px; transition: 0.18s; } .l-security-item:hover { border-color: rgba(16, 185, 129, 0.2); } .l-security-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; } .l-security-title { font-size: 14px; font-weight: 600; color: var(--ld-txt1); margin-bottom: 5px; } .l-security-desc { font-size: 13px; color: var(--ld-txt2); line-height: 1.6; } /* ── White Label & API ── */ .l-wl-box { background: var(--bg-page); border: 1px solid rgba(139, 92, 246, 0.15); border-radius: 24px; padding: 56px 48px; position: relative; overflow: hidden; } .l-wl-box::before { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: transparent; pointer-events: none; } .l-wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .l-wl-col {} .l-wl-title { font-size: 24px; font-weight: 700; color: var(--ld-txt1); margin-bottom: 14px; line-height: 1.25; } .l-wl-desc { font-size: 14px; color: var(--ld-txt2); line-height: 1.7; margin-bottom: 24px; } .l-wl-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .l-wl-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ld-txt2); } .l-api-block { background: rgba(8, 12, 20, 0.8); border: 1px solid var(--ld-border); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .l-api-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 12px; } .l-api-row:last-child { border-bottom: none; } .l-api-method { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono); flex-shrink: 0; text-transform: uppercase; } .l-api-method--post { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .l-api-method--get { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .l-api-path { color: var(--ld-txt2); font-family: var(--font-mono); font-size: 12px; flex: 1; } .l-api-label { color: var(--ld-txt3); font-size: 12px; } .l-api-tags { display: flex; flex-wrap: wrap; gap: 8px; } /* ── CTA section ── */ .l-cta-section { padding: 96px 0; background: var(--ld-bg); text-align: center; position: relative; overflow: hidden; } .l-cta-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: transparent; } .l-cta-title { font-size: clamp(28px, 5vw, 50px); font-weight: 800; line-height: 1.15; margin-bottom: 18px; position: relative; } .l-cta-sub { font-size: 17px; color: var(--ld-txt2); margin-bottom: 36px; position: relative; } .l-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; position: relative; } /* ── Contact ── */ .l-contact-section { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--ld-border); } .l-contact-title { font-size: 24px; font-weight: 700; color: var(--ld-txt1); margin-bottom: 6px; } .l-contact-sub { font-size: 14px; color: var(--ld-txt2); margin-bottom: 0; } .l-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 28px; } .l-contact-card { background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 4px; transition: all 0.18s; text-decoration: none; } .l-contact-card:hover { border-color: rgba(59, 130, 246, 0.3); background: var(--ld-card-hv); transform: translateY(-1px); } .l-contact-emoji { font-size: 20px; margin-bottom: 2px; } .l-contact-dept { font-size: 13px; font-weight: 600; color: var(--ld-txt1); } .l-contact-desc { font-size: 12px; color: var(--ld-txt3); line-height: 1.4; } .l-contact-email { font-size: 12px; color: var(--ld-blue); font-weight: 500; margin-top: 5px; word-break: break-all; } /* ── Footer ── */ .l-footer { background: var(--ld-surface); border-top: 1px solid var(--ld-border); padding: 52px 0 28px; } .l-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .l-footer-logo { margin-bottom: 14px; display: flex; } .l-footer-brand-desc { font-size: 13px; color: var(--ld-txt3); line-height: 1.65; max-width: 280px; } .l-footer-col {} .l-footer-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ld-txt3); margin-bottom: 12px; } .l-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .l-footer-col ul a { font-size: 13px; color: var(--ld-txt2); transition: color 0.15s; } .l-footer-col ul a:hover { color: var(--ld-txt1); } .l-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid var(--ld-border); } .l-footer-copy { font-size: 12px; color: var(--ld-txt3); } .l-footer-badges { display: flex; gap: 8px; flex-wrap: wrap; } .l-footer-badge { font-size: 12px; color: var(--ld-txt3); padding: 4px 10px; border: 1px solid var(--ld-border); border-radius: 6px; } /* ── Footer protocol row ── */ .l-footer-proto-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--ld-border); } .l-footer-proto-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ld-txt4); margin-left: 4px; } .l-footer-nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .l-footer-nav-link { font-size: 13px; color: var(--ld-txt3); padding: 5px 10px; border-radius: 6px; transition: color 0.14s, background 0.14s; } .l-footer-nav-link:hover { color: var(--ld-txt1); background: rgba(255, 255, 255, 0.05); } /* ── Hero eyebrow ── */ .l-hero-eyebrow { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ld-blue); margin-bottom: 20px; padding: 5px 14px; border-radius: 20px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); } /* ── Comparison table ── */ .l-compare-wrap { max-width: 820px; margin: 0 auto; } .l-compare-table-scroll { overflow-x: auto; margin-bottom: 16px; border-radius: 16px; } .l-compare-table { width: 100%; min-width: 500px; border-collapse: separate; border-spacing: 0; background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 16px; overflow: hidden; } .l-compare-th { padding: 16px 24px; text-align: left; background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid var(--ld-border); font-size: 13px; font-weight: 600; color: var(--ld-txt3); } .l-compare-th--label { width: 130px; } .l-compare-rail-badge { display: inline-flex; padding: 5px 13px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; } .l-compare-rail-badge--red { background: rgba(244, 63, 94, 0.1); color: #f87171; border: 1px solid rgba(244, 63, 94, 0.2); } .l-compare-row:nth-child(even) td { background: rgba(255, 255, 255, 0.016); } .l-compare-td { padding: 14px 24px; font-size: 14px; color: var(--ld-txt2); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .l-compare-td--label { font-weight: 600; color: var(--ld-txt3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; } .l-compare-row:last-child .l-compare-td { border-bottom: none; } .l-compare-verdict { display: flex; align-items: flex-start; gap: 14px; background: rgba(16, 185, 129, 0.07); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 12px; padding: 18px 22px; } .l-compare-verdict-icon { font-size: 20px; flex-shrink: 0; line-height: 1.6; } .l-compare-verdict p { font-size: 14px; color: var(--ld-txt2); line-height: 1.75; margin: 0; } .l-compare-verdict strong { color: var(--ld-txt1); } /* ── Steps (How a Release Works) ── */ .l-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1040px; margin: 0 auto; } .l-step-card { background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 20px; padding: 34px 28px; position: relative; overflow: hidden; transition: all 0.22s ease; } .l-step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 20px 20px 0 0; } .l-step-card--blue::before { background: linear-gradient(90deg, #3b82f6, #06b6d4); } .l-step-card--cyan::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); } .l-step-card--green::before { background: linear-gradient(90deg, #06b6d4, #10b981); } .l-step-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); border-color: var(--ld-border-glow); } .l-step-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; font-size: 17px; font-weight: 800; margin-bottom: 22px; font-family: var(--font-mono); } .l-step-num--blue { background: rgba(59, 130, 246, 0.12); color: #60a5fa; } .l-step-num--cyan { background: rgba(6, 182, 212, 0.12); color: #22d3ee; } .l-step-num--green { background: rgba(16, 185, 129, 0.12); color: #34d399; } .l-step-title { font-size: 20px; font-weight: 700; color: var(--ld-txt1); margin-bottom: 12px; } .l-step-desc { font-size: 14px; color: var(--ld-txt2); line-height: 1.75; } /* ── Architecture grid ── */ .l-arch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 20px; } .l-arch-card { display: flex; align-items: flex-start; gap: 18px; background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 16px; padding: 26px; transition: all 0.22s; } .l-arch-card:hover { border-color: var(--ld-border-glow); background: var(--ld-card-hv); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } .l-arch-icon { font-size: 26px; flex-shrink: 0; margin-top: 1px; } .l-arch-title { font-size: 15px; font-weight: 700; color: var(--ld-txt1); margin-bottom: 8px; } .l-arch-desc { font-size: 13px; color: var(--ld-txt2); line-height: 1.72; } /* ── Audit trail state machine ── */ .l-audit-trail { background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 16px; padding: 28px 32px; margin-top: 18px; } .l-audit-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .l-audit-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; } .l-audit-title { font-size: 15px; font-weight: 700; color: var(--ld-txt1); margin-bottom: 4px; } .l-audit-sub { font-size: 13px; color: var(--ld-txt3); } .l-audit-states { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .l-audit-state-wrap { display: flex; align-items: center; gap: 6px; } .l-audit-state { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 6px 13px; border-radius: 8px; white-space: nowrap; background: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); } .l-audit-state--final { background: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.25); } .l-audit-arrow { color: var(--ld-txt4); font-size: 14px; user-select: none; } /* ── Use cases 3-col override ── */ .l-uc-grid--3 { grid-template-columns: repeat(3, 1fr); } /* ── Pricing ── */ .l-pricing-card { max-width: 860px; margin: 0 auto; background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 24px; padding: 52px; } .l-pricing-rate { display: flex; align-items: baseline; gap: 18px; margin-bottom: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--ld-border); } .l-pricing-pct { font-size: clamp(60px, 9vw, 100px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .l-pricing-per { font-size: 18px; color: var(--ld-txt2); font-weight: 500; } .l-pricing-body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .l-pricing-elim-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ld-txt3); margin-bottom: 18px; } .l-pricing-elim-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; } .l-pricing-elim-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ld-txt2); line-height: 1.5; } .l-pricing-elim-list li::before { content: '✕'; color: #f87171; font-size: 11px; font-weight: 800; flex-shrink: 0; } .l-pricing-ex-label { font-size: 12px; font-weight: 700; color: var(--ld-txt3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px; } .l-pricing-ex-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 14px; color: var(--ld-txt2); } .l-pricing-ex-val { font-weight: 700; color: var(--ld-txt1); } .l-pricing-ex-val--green { color: #34d399; } .l-pricing-ex-saving { margin-top: 16px; font-size: 13px; color: var(--ld-txt3); font-style: italic; } /* ── Trust grid ── */ .l-trust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .l-trust-card { display: flex; align-items: flex-start; gap: 16px; background: var(--ld-card); border: 1px solid var(--ld-border); border-radius: 14px; padding: 24px; transition: all 0.18s; } .l-trust-card:hover { border-color: rgba(59, 130, 246, 0.25); background: var(--ld-card-hv); } .l-trust-card-icon { font-size: 24px; flex-shrink: 0; margin-top: 1px; } .l-trust-card-title { font-size: 14px; font-weight: 700; color: var(--ld-txt1); margin-bottom: 5px; } .l-trust-card-desc { font-size: 13px; color: var(--ld-txt2); line-height: 1.65; } /* ── Final CTA pre-text ── */ .l-cta-pre { font-size: 16px; color: var(--ld-txt3); margin-bottom: 12px; position: relative; font-style: italic; } /* ────────────────────────────────────────────────────────── DETAIL PAGE GRID (2-col: main + sidebar) ────────────────────────────────────────────────────────── */ .detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; } .detail-main { display: flex; flex-direction: column; gap: 12px; } .detail-aside { display: flex; flex-direction: column; gap: 12px; } /* Form page with optional info sidebar (collapses on mobile) */ .form-aside-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; } /* ────────────────────────────────────────────────────────── POLICY CARDS (agreement type selector — icon-first grid) ────────────────────────────────────────────────────────── */ .policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .policy-card { border: 1.5px solid var(--border-strong); border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: border-color 0.12s, background 0.12s; background: var(--bg-subtle); text-align: left; width: 100%; font-family: var(--font); } .policy-card:hover:not(.selected) { border-color: var(--brand); background: var(--brand-light); } .policy-card.selected { border-color: var(--brand); background: var(--brand-light); } .pc-emoji { font-size: 22px; margin-bottom: 8px; } .pc-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .pc-desc { font-size: 11px; color: var(--text-4); line-height: 1.45; } .policy-card.selected .pc-name { color: var(--brand-mid); } /* ────────────────────────────────────────────────────────── CONTACT PICKER ────────────────────────────────────────────────────────── */ .contact-picker { display: flex; flex-direction: column; gap: 6px; } .contact-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--r); background: var(--bg-subtle); cursor: pointer; text-align: left; width: 100%; font-family: var(--font); transition: border-color 0.12s, background 0.12s; } .contact-option:hover:not(.selected) { border-color: var(--brand); background: var(--brand-light); } .contact-option.selected { border-color: var(--brand); background: var(--brand-light); } .co-avatar { width: 34px; height: 34px; border-radius: var(--r-full); background: var(--brand-light); color: var(--brand-mid); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .co-info { flex: 1; min-width: 0; } .co-name { font-size: 14px; font-weight: 500; color: var(--text); } .co-email { font-size: 12px; color: var(--text-4); margin-top: 1px; } .contact-option.selected .co-name { color: var(--brand-mid); } .amount-presets { display: flex; gap: 8px; flex-wrap: wrap; } /* ────────────────────────────────────────────────────────── HELPERS / UTILITIES ────────────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--border); } .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g20 { gap: 20px; } .g24 { gap: 24px; } .flex1 { flex: 1; } .min0 { min-width: 0; } .sb { justify-content: space-between; } .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .center { text-align: center; } .bold { font-weight: 700; } .semi { font-weight: 600; } .muted { color: var(--text-3); } .dim { color: var(--text-4); } .brand { color: var(--brand); } .xs { font-size: 12px; } .sm { font-size: 13px; } .md { font-size: 15px; } .lg { font-size: 18px; } .mono { font-family: var(--font-mono); font-size: 13px; } .mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; } .mb4 { margin-bottom: 4px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; } .mb20 { margin-bottom: 20px; } .mb24 { margin-bottom: 24px; } .ml-auto { margin-left: auto; } .p16 { padding: 16px; } .p20 { padding: 20px; } .p24 { padding: 24px; } /* ────────────────────────────────────────────────────────── RESPONSIVE ────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --sidebar-w: 220px; } .page { padding: 24px; } .l-infra-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .l-wl-grid { grid-template-columns: 1fr; } .l-wl-box { padding: 36px 24px; } .l-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { /* Sidebar → bottom nav */ .sidebar { display: none; } .main-area { margin-left: 0; overflow-x: hidden; } .mobile-topbar { display: flex; } .bottom-nav { display: flex; } /* Page padding includes bottom nav height */ .page { padding: 16px 16px calc(var(--nav-h) + 8px); } /* Prevent iOS auto-zoom on input focus (inputs < 16px cause zoom) */ input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea { font-size: 16px; } /* Detail + form 2-col → 1-col */ .detail-layout { grid-template-columns: 1fr; } .form-aside-layout { grid-template-columns: 1fr; } .kv-grid { grid-template-columns: 1fr; } .kv:nth-child(odd) { border-right: none; } /* Type card grid */ .type-cards { grid-template-columns: 1fr; } /* Stats grid */ .stats-grid { grid-template-columns: 1fr 1fr; } /* Page header */ .page-hd h1 { font-size: 20px; } /* Landing l-* */ .l-nav-links { display: none; } .l-nav-cta .l-btn-ghost { display: none; } .l-hero { padding: 120px 0 72px; } .l-hero-h1 { letter-spacing: -0.015em; } .l-hero-stats { margin: 0 16px; } .l-stat+.l-stat { border-left: none; border-top: 1px solid var(--ld-border); } .l-pillars-grid { grid-template-columns: repeat(2, 1fr); } .l-pipeline-grid { grid-template-columns: repeat(2, 1fr); } .l-uc-grid { grid-template-columns: 1fr; } .l-uc-grid--3 { grid-template-columns: 1fr; } .l-security-grid { grid-template-columns: 1fr; } .l-footer-grid { grid-template-columns: 1fr; } .l-steps-grid { grid-template-columns: 1fr; } .l-arch-grid { grid-template-columns: 1fr; } .l-pricing-body { grid-template-columns: 1fr; gap: 32px; } .l-pricing-card { padding: 32px 24px; } .l-footer-proto-row { flex-direction: column; align-items: flex-start; } .l-footer-nav-links { gap: 0; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr 1fr; } .stats-tile { padding: 14px 14px; } .stats-tile .st-value { font-size: 22px; } .quick-actions { flex-direction: column; } .qa-btn { flex-direction: row; justify-content: flex-start; padding: 14px 16px; } .stat-card .stat-amount { font-size: 28px; } /* App: policy & type card grids → single column */ .policy-grid { grid-template-columns: 1fr; } .type-cards { grid-template-columns: 1fr; } /* Landing */ .l-hero-actions { flex-direction: column; } .l-btn-lg { width: 100%; justify-content: center; } .l-pillars-grid { grid-template-columns: 1fr; } .l-pipeline-grid { grid-template-columns: 1fr; } .l-trust-inner { gap: 14px; } .l-wl-features { grid-template-columns: 1fr; } .l-hero-stats { flex-direction: column; } } /* ================================================================ Wallet rows (Account page) ================================================================ */ .wallet-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--border); } .wallet-row:first-of-type { border-top: none; } .wallet-row--add { cursor: pointer; transition: background .15s; } .wallet-row--add:hover { background: var(--bg-subtle); } .wallet-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wallet-icon--default { background: linear-gradient(135deg, #3b82f620, #06b6d420); color: var(--brand); } .wallet-icon--circle { background: linear-gradient(135deg, #8b5cf620, #ec489920); color: #a78bfa; } .wallet-icon--add { background: var(--bg-subtle); color: var(--text-3); border: 1px dashed var(--border); } .wallet-body { flex: 1; min-width: 0; } .wallet-name { font-size: 13px; font-weight: 600; color: var(--text-1); } .wallet-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.5; } .wallet-hint.mono { font-family: 'SF Mono', 'Fira Code', monospace; word-break: break-all; font-size: 12px; } .wallet-balance { font-size: 12px; font-weight: 600; color: var(--green); margin-top: 3px; } /* ── Circle wallet panel ── */ .circle-panel { border-top: 1px solid var(--border); background: var(--bg-subtle); } .circle-tabs { display: flex; border-bottom: 1px solid var(--border); } .circle-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; font-size: 12px; font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; transition: color .15s, box-shadow .15s; } .circle-tab:hover { color: var(--text-1); } .circle-tab.active { color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); } .circle-panel-body { padding: 16px 20px; } /* ================================================================ People page ================================================================ */ /* Invite panel (shown when code is generated) */ .ppl-invite-panel { display: flex; gap: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 24px; box-shadow: var(--shadow-sm); } .ppl-invite-left { flex: 1; min-width: 0; } .ppl-invite-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .ppl-invite-qr canvas { border-radius: 8px; background: var(--bg-subtle); } .ppl-email-row { display: flex; gap: 8px; align-items: center; } .ppl-email-row input { flex: 1; } /* Share dropdown */ .ppl-share-wrap { position: relative; } .ppl-share-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); min-width: 180px; padding: 6px 0; animation: ppl-share-in .12s ease-out; } @keyframes ppl-share-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ppl-share-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: none; background: none; color: var(--text); font-size: 13px; cursor: pointer; transition: background .1s; } .ppl-share-opt:hover { background: var(--bg-subtle); } .ppl-share-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; color: #fff; } .ppl-share-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; } @media (max-width: 540px) { .ppl-invite-panel { flex-direction: column; } .ppl-invite-qr { align-items: flex-start; } } /* Section tabs */ .ppl-section-bar { display: flex; align-items: center; gap: 8px; } .ppl-tabs { display: flex; gap: 4px; background: var(--bg-subtle); border-radius: var(--r); padding: 3px; border: 1px solid var(--border); } .ppl-tab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text-3); background: transparent; border: none; border-radius: calc(var(--r) - 2px); cursor: pointer; transition: background 0.12s, color 0.12s; font-family: var(--font); } .ppl-tab:hover { color: var(--text); background: var(--bg-card); } .ppl-tab.active { color: var(--text); background: var(--bg-card); box-shadow: var(--shadow-sm); font-weight: 600; } .ppl-tab-count { font-size: 10px; font-weight: 700; background: var(--bg-subtle); padding: 1px 6px; border-radius: 10px; color: var(--text-3); } .ppl-tab.active .ppl-tab-count { background: var(--brand-light); color: var(--brand); } /* Filter bar */ .ppl-filter-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .ppl-search { flex: 1; border: 1px solid var(--border); border-radius: var(--r); padding: 7px 12px; font-size: 13px; background: var(--bg); color: var(--text); font-family: var(--font); min-width: 0; } .ppl-search:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--ring); } .ppl-filter-pills { display: flex; gap: 4px; flex-shrink: 0; } .ppl-fpill { padding: 5px 11px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); color: var(--text-3); cursor: pointer; transition: all 0.12s; font-family: var(--font); } .ppl-fpill:hover { border-color: var(--brand); color: var(--brand); } .ppl-fpill.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand); font-weight: 600; } @media (max-width: 540px) { .ppl-filter-bar { flex-direction: column; align-items: stretch; } } /* Contact row */ .ppl-contact-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); transition: background 0.12s; } .ppl-contact-row:last-child { border-bottom: none; } .ppl-contact-row:hover { background: var(--bg-subtle); } .ppl-contact-row--blocked { opacity: 0.55; } .ppl-contact-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; } .ppl-contact-avatar--accepted { background: linear-gradient(135deg, #22c55e, #10b981); } .ppl-contact-avatar--pending { background: linear-gradient(135deg, #f59e0b, #eab308); } .ppl-contact-avatar--blocked { background: linear-gradient(135deg, #94a3b8, #64748b); } .ppl-contact-body { flex: 1; min-width: 0; overflow: hidden; } .ppl-contact-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppl-contact-meta { font-size: 12px; color: var(--text-4); margin-top: 2px; } .ppl-contact-status { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } .ppl-contact-actions { display: flex; gap: 2px; flex-shrink: 0; } /* Status dot — shown inside meta line on mobile, hidden on desktop */ .ppl-status-dot { display: none; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } @media (max-width: 540px) { /* Show dot in meta, hide verbose label */ .ppl-status-dot { display: inline-block; } .ppl-contact-status { display: none; } /* Tighter row padding */ .ppl-contact-row { padding: 10px 14px; gap: 10px; } /* Shrink action buttons */ .ppl-contact-actions .btn-sm { padding: 5px 7px; } } /* Invite stats mini row */ .ppl-invite-stats { display: flex; gap: 0; border-bottom: 1px solid var(--border); } .ppl-is-item { flex: 1; text-align: center; padding: 14px 8px; border-right: 1px solid var(--border); } .ppl-is-item:last-child { border-right: none; } .ppl-is-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .ppl-is-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); margin-top: 2px; } /* Invite row */ .ppl-invite-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .ppl-invite-row:last-child { border-bottom: none; } .ppl-invite-row--expired { opacity: 0.45; } .ppl-invite-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); color: var(--text-4); flex-shrink: 0; } .ppl-invite-icon--used { background: rgba(34, 197, 94, 0.12); color: var(--green); } .ppl-invite-icon--active { background: var(--brand-light); color: var(--brand); } .ppl-invite-body { flex: 1; min-width: 0; } .ppl-invite-code { font-size: 13px; font-weight: 600; color: var(--text); } .ppl-invite-meta { font-size: 12px; color: var(--text-4); margin-top: 2px; } .ppl-invite-status { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } /* Admin: All Users view */ .ppl-admin-user-group { border-bottom: 1px solid var(--border); padding: 14px 16px; } .ppl-admin-user-group:last-child { border-bottom: none; } .ppl-admin-user-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ppl-admin-contacts-list { margin-left: 38px; border-left: 2px solid var(--border); padding-left: 12px; } .ppl-contact-row--compact { padding: 6px 0; border-bottom: none; } .ppl-contact-row--compact:hover { background: none; } /* ── All Users: card grid ── */ .ppl-admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 16px; } .ppl-admin-card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .ppl-admin-card-top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; } .ppl-admin-card-info { flex: 1; min-width: 0; } .ppl-admin-card-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppl-admin-card-pid { font-size: 10px; font-family: var(--font-mono); color: var(--text-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppl-admin-card-footer { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; } .ppl-admin-card-stat { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.04em; } .ppl-admin-card-contacts { border-top: 1px solid var(--border); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; } .ppl-admin-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; overflow: hidden; } .ppl-admin-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ppl-admin-chip-dot--accepted { background: var(--green, #22c55e); } .ppl-admin-chip-dot--pending { background: var(--yellow, #f59e0b); } .ppl-admin-chip-dot--blocked { background: var(--red, #ef4444); } .ppl-admin-chip-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); } .ppl-admin-chip-status { font-size: 11px; font-weight: 600; flex-shrink: 0; } /* ── Counterparties card grid ── */ .cp-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .cp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s; } .cp-card:hover { border-color: var(--border-strong); } .cp-card--blocked { opacity: 0.55; } .cp-card-top { display: flex; align-items: center; gap: 12px; } .cp-card-identity { flex: 1; min-width: 0; } .cp-card-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .cp-card-pid code { font-size: 10px; color: var(--text-4); font-family: var(--font-mono, monospace); } .cp-status-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; letter-spacing: 0.03em; text-transform: uppercase; } .cp-status-badge--connected { background: rgba(16, 185, 129, 0.12); color: var(--green); } .cp-status-badge--pending { background: rgba(245, 158, 11, 0.12); color: #f59e0b; } .cp-status-badge--blocked { background: var(--bg-subtle); color: var(--text-4); } .cp-card-time { font-size: 11px; color: var(--text-4); } .cp-card-footer { display: flex; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; } @media (max-width: 600px) { .cp-grid { grid-template-columns: 1fr; } .cp-toolbar { flex-direction: column; align-items: stretch; } } /* ================================================================ Admin Dashboard ================================================================ */ /* Tab navigation */ .admin-tabs { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; overflow-x: auto; } .admin-tab { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; color: var(--text-3); background: transparent; border: none; cursor: pointer; white-space: nowrap; transition: all .15s; } .admin-tab:hover { color: var(--text-1); background: var(--bg-subtle); } .admin-tab.active { color: var(--text); background: var(--bg-subtle); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } /* Two-column layout */ .admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 768px) { .admin-two-col { grid-template-columns: 1fr; } } /* Pipeline bar chart */ .pipeline-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .pb-label { width: 100px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .pb-name { font-size: 12px; color: var(--text-2); } .pb-count { font-size: 12px; font-weight: 700; color: var(--text); min-width: 20px; text-align: right; } .pb-track { flex: 1; height: 8px; background: var(--bg-subtle); border-radius: 4px; overflow: hidden; } .pb-fill { height: 100%; background: linear-gradient(90deg, var(--brand), #06b6d4); border-radius: 4px; transition: width .4s ease; } .pb-fill--blocked { background: var(--yellow); } .pb-fill--failed { background: var(--red); } .pb-pct { font-size: 12px; color: var(--text-4); width: 32px; text-align: right; } /* Category row */ .cat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); } .cat-row:last-child { border-bottom: none; } .cat-name { font-size: 13px; font-weight: 500; color: var(--text-1); } .cat-stats { display: flex; gap: 16px; align-items: center; } .cat-count { font-size: 12px; font-weight: 700; color: var(--text); background: var(--bg-subtle); padding: 2px 8px; border-radius: 10px; } .cat-vol { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* KPI items */ .kpi-rows { display: flex; flex-direction: column; gap: 0; } .kpi-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); } .kpi-item:last-child { border-bottom: none; } .kpi-label { font-size: 12px; color: var(--text-3); } .kpi-val { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* Filter bar */ .admin-filter-bar { display: flex; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .admin-select { padding: 6px 12px; font-size: 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); cursor: pointer; } .admin-search { flex: 1; min-width: 180px; padding: 6px 12px; font-size: 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); } .admin-search::placeholder { color: var(--text-4); } /* User meta stats */ .user-meta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .um-stat { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Audit log rows */ .audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .audit-row:last-child { border-bottom: none; } .ar-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-subtle); color: var(--text-3); flex-shrink: 0; } .ar-body { flex: 1; min-width: 0; } .ar-event { font-size: 12px; font-weight: 600; color: var(--text-1); text-transform: capitalize; } .ar-meta { font-size: 12px; color: var(--text-4); margin-top: 2px; } .ar-time { font-size: 12px; color: var(--text-4); white-space: nowrap; flex-shrink: 0; } /* Control rows */ .ctl-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); } .ctl-row:last-child { border-bottom: none; } .ctl-info { flex: 1; } /* Admin override form */ .admin-override-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .admin-override-form .form-group { flex: 1; min-width: 120px; } @media (max-width: 600px) { .admin-tabs { gap: 2px; } .admin-tab { padding: 6px 10px; font-size: 11px; } .admin-override-form { flex-direction: column; } .admin-override-form .form-group { min-width: auto; } .pipeline-bar-row { gap: 6px; } .pb-label { width: 80px; } .user-meta { display: none; } } /* Canister health rows */ .ch-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .ch-row:last-child { border-bottom: none; } .ch-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ch-body { flex: 1; min-width: 0; } .ch-name { font-size: 13px; font-weight: 600; color: var(--text-1); } .ch-id { font-size: 12px; color: var(--text-4); margin-top: 1px; } .ch-right { text-align: right; flex-shrink: 0; } .ch-balance { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .ch-health { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Badge variant: warn (amber) */ .badge-warn { background: rgba(245, 158, 11, 0.12); color: #b45309; } /* ═══════════════════════════════════════════════ ACCOUNT PAGE ═══════════════════════════════════════════════ */ /* Profile card */ .acct-profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .acct-profile-top { display: flex; align-items: center; gap: 16px; padding: 20px 24px; } .acct-avatar { width: 80px; height: 80px; border-radius: 18px; background: linear-gradient(135deg, var(--brand), #6366f1); color: white; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; } .acct-profile-info { flex: 1; min-width: 0; } .acct-name { font-size: 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; } .acct-email { font-size: 12px; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 5px; } .acct-pid-inline { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .acct-since { font-size: 11px; color: var(--text-4); margin-top: 2px; } .acct-profile-edit { display: flex; align-items: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-subtle); } .acct-profile-edit .form-group { flex: 1; margin-bottom: 0; } .acct-pid-row { display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-top: 1px solid var(--border); background: var(--bg-subtle); } .acct-pid-code { font-family: var(--mono, 'SF Mono', 'Menlo', monospace); font-size: 11px; color: var(--text-3); background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; user-select: all; } .btn-xs { padding: 2px 6px; font-size: 11px; min-height: 0; } /* Stats row */ .acct-stats-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; } @media (max-width: 640px) { .acct-stats-row { grid-template-columns: 1fr; } } /* Account top row — Balance card + Add funds card side-by-side on large screens */ .acct-top-row { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 16px; align-items: stretch; } .acct-top-row>.acct-balance-card { display: flex; flex-direction: column; justify-content: center; } @media (max-width: 960px) { .acct-top-row { grid-template-columns: 1fr; } } /* ──────────────────────────────────────── Add funds — modern compact (Apple Simple) ──────────────────────────────────────── */ .acct-addfunds { display: flex; flex-direction: column; } .acct-addfunds-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; } .acct-af-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .acct-af-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } /* Segmented control (iOS-style) */ .seg { display: inline-flex; background: var(--bg-3, rgba(120, 120, 128, 0.16)); border-radius: 9px; padding: 2px; gap: 2px; } .seg-btn { position: relative; appearance: none; border: 0; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .seg-btn:hover { color: var(--text-1); } .seg-btn-active { background: var(--accent, #2563eb); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } .seg-btn-active:hover { color: #fff; } .seg-btn-tag { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: rgba(245, 158, 11, 0.18); color: #f59e0b; } /* Amount picker */ .acct-af-amount-row { display: flex; gap: 6px; flex-wrap: wrap; } .acct-af-pill { flex: 1 1 64px; min-width: 64px; appearance: none; border: 1px solid var(--border-1, rgba(120, 120, 128, 0.20)); background: transparent; color: var(--text-1); font-size: 13px; font-weight: 500; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; text-align: center; } .acct-af-pill:hover { border-color: var(--border-2, rgba(120, 120, 128, 0.36)); } .acct-af-pill-active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; } .acct-af-pill-input-wrap { display: flex; align-items: center; padding: 0 8px; gap: 2px; background: var(--bg-2, rgba(120, 120, 128, 0.08)); } .acct-af-pill-prefix { font-size: 13px; font-weight: 500; color: var(--text-3); } .acct-af-pill-input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--text-1); font-size: 13px; font-weight: 500; padding: 9px 0; font-variant-numeric: tabular-nums; outline: none; /* hide number spinners */ -moz-appearance: textfield; } .acct-af-pill-input::-webkit-outer-spin-button, .acct-af-pill-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .acct-af-pill-input-wrap:focus-within { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); } .acct-af-amount-fixed { display: flex; align-items: baseline; gap: 10px; padding: 10px 0 2px; } .acct-af-amount-display { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text-1); } .acct-af-amount-note { font-size: 12px; color: var(--text-3); } .acct-af-rail { display: flex; flex-direction: column; } .acct-af-foot { margin: 0; font-size: 11.5px; color: var(--text-3); text-align: center; } .acct-balance-card { padding: 20px 24px; background: linear-gradient(135deg, #1e3a5f, #1e40af); border-radius: var(--r-md); } .acct-balance-card .stat-amount { font-size: 28px; } /* Per-rail balance rows inside the Available-to-send card */ .acct-rail-row { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0; color: #fff; } .acct-rail-row+.acct-rail-row { border-top: 1px solid rgba(255, 255, 255, 0.12); } .acct-rail-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); } .acct-rail-value { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.01em; } .acct-quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); } .acct-qs-item { background: var(--bg-card); padding: 14px 16px; text-align: center; } .acct-qs-value { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .acct-qs-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-4); margin-top: 3px; } /* Flow row (sent / received) */ .acct-flow-row { display: flex; align-items: center; gap: 0; } .acct-flow-item { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg-subtle); border-radius: var(--r); } .acct-flow-item:first-child { border-radius: var(--r) 0 0 var(--r); } .acct-flow-item:last-child { border-radius: 0 var(--r) var(--r) 0; } .acct-flow-divider { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; } /* Pipeline bar (mini) */ .acct-pipeline-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; } .acct-pb-seg { border-radius: 2px; transition: width 0.3s; } .acct-pipeline-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; } .acct-pl-item { display: flex; align-items: center; gap: 5px; } .acct-pl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Pipeline progress bar rows */ .acct-pipeline-rows { display: flex; flex-direction: column; gap: 10px; } .acct-pipeline-row { display: flex; align-items: center; gap: 12px; } .acct-pr-label { width: 80px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); flex-shrink: 0; } .acct-pr-bar-wrap { flex: 1; height: 6px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; } .acct-pr-bar { height: 100%; border-radius: 3px; transition: width 0.3s; min-width: 4px; } .acct-pr-count { width: 28px; text-align: right; font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; } /* Recent releases list */ .acct-recent { border-top: 1px solid var(--border); } .acct-recent-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background 0.12s; } .acct-recent-row:last-child { border-bottom: none; } .acct-recent-row:hover { background: var(--bg-subtle); } .acct-rr-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); flex-shrink: 0; } .acct-rr-body { flex: 1; min-width: 0; } /* Contact chips grid */ .acct-contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .acct-contact-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-subtle); border-radius: var(--r); border: 1px solid var(--border); } .acct-cc-avatar { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; } .acct-cc-avatar--accepted { background: var(--green); } .acct-cc-avatar--pending { background: var(--yellow); color: #78350f; } .acct-cc-avatar--blocked { background: var(--red); } .acct-cc-body { min-width: 0; } .acct-cc-body .xs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Trust grid */ .acct-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .acct-trust-item { display: flex; align-items: flex-start; gap: 10px; } @media (max-width: 640px) { .acct-trust-grid { grid-template-columns: 1fr; } .acct-profile-edit { flex-direction: column; align-items: stretch; } } /* Small empty state */ .empty-state-sm { display: flex; align-items: center; gap: 10px; padding: 16px 0; } /* Extra tiny text utility */ .xxs { font-size: 10px; } /* ─── NewRelease page ────────────────────────────── */ .nr-step { margin: 0 auto; } .nr-step-hd { margin-bottom: 20px; } .nr-step-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .nr-step-hint { font-size: 13px; color: var(--text-4); } /* Condition selector list */ .cond-list { display: flex; flex-direction: column; gap: 4px; } .cond-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .cond-item:hover { border-color: var(--brand); } .cond-item.on { border-color: var(--brand); background: var(--brand-light); } .cond-item.locked { opacity: 0.65; cursor: default; } .cond-item.locked:hover { border-color: var(--border); } .cond-check { flex-shrink: 0; } .cond-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; } .cond-check input[type="checkbox"]:disabled { cursor: default; } .cond-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border-radius: 7px; color: var(--text-3); flex-shrink: 0; } .cond-item.on .cond-icon { color: var(--brand); } .cond-body { flex: 1; min-width: 0; } .cond-title { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; } .cond-desc { font-size: 12px; color: var(--text-4); margin-top: 2px; } .cond-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-4); background: var(--bg-subtle); padding: 3px 8px; border-radius: 4px; flex-shrink: 0; } .cond-rec { font-size: 11px; font-weight: 600; color: var(--brand); background: rgba(59, 130, 246, 0.1); padding: 2px 6px; border-radius: 3px; } .cond-opt { font-size: 11px; font-weight: 600; color: var(--text-4); background: var(--bg-subtle); padding: 2px 6px; border-radius: 3px; } @media (max-width: 480px) { .cond-cat { display: none; } } .nr-step-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } .nr-ref-optional { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: var(--bg-subtle); border-radius: 4px; padding: 1px 6px; vertical-align: middle; } /* Policy card icon (replaces emoji) */ .pc-icon-wrap { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-subtle); color: var(--brand); margin-bottom: 10px; } .policy-card.selected .pc-icon-wrap { background: var(--brand); color: white; } .pc-meta { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--text-4); text-transform: uppercase; letter-spacing: .4px; } /* Contact co-email in picker */ .co-email { font-size: 12px; color: var(--text-4); margin-top: 1px; } /* Amount balance warning */ .nr-warn { color: var(--red); font-weight: 500; } /* Review card */ .nr-review-card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px 20px; text-align: center; } .nr-review-amount { font-size: 32px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; } .nr-review-label { font-size: 12px; color: var(--text-4); margin-top: 2px; text-transform: uppercase; letter-spacing: .6px; } .nr-fee-breakdown { margin-top: 16px; text-align: left; background: var(--bg-subtle); border-radius: var(--r); padding: 12px 16px; } .nr-fee-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; } .nr-fee-row+.nr-fee-row { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; } .nr-fee-label { font-size: 12px; color: var(--text-3); } .nr-fee-value { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .nr-fee-row--net .nr-fee-value { color: var(--green); font-size: 13px; } .nr-review-divider { height: 1px; background: var(--border); margin: 18px 0; } .nr-review-rows { text-align: left; } .nr-rr { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; } .nr-rr+.nr-rr { border-top: 1px solid var(--border-light, rgba(0, 0, 0, .04)); } .nr-rr-label { font-size: 13px; color: var(--text-4); } .nr-rr-value { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; } .nr-review-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: var(--brand-light); color: var(--brand-mid); font-size: 12px; line-height: 1.5; } .nr-review-note svg { flex-shrink: 0; margin-top: 2px; } /* ─── Releases page ──────────────────────────────── */ /* Pipeline bar */ .rl-pipe { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--bg-subtle); } .rl-pipe-seg { min-width: 4px; transition: width .3s; } .rl-pipe-active { background: var(--brand); } .rl-pipe-done { background: var(--green, #22c55e); } .rl-pipe-hold { background: var(--amber, #f59e0b); } /* Toolbar — filters + search */ .rl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rl-filters { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .rl-filters::-webkit-scrollbar { display: none; } .rl-pill { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-4); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .15s; } .rl-pill:hover { border-color: var(--brand); color: var(--brand); } .rl-pill.active { border-color: var(--brand); background: var(--brand-light); color: var(--brand); font-weight: 600; } .rl-pill-count { font-size: 11px; background: var(--bg-subtle); padding: 1px 6px; border-radius: 10px; font-weight: 600; } .rl-pill.active .rl-pill-count { background: var(--brand); color: white; } /* Search */ .rl-search { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); color: var(--text-4); min-width: 160px; } .rl-search input { border: none; background: transparent; outline: none; font-size: 12px; color: var(--text); width: 100%; } .rl-search input::placeholder { color: var(--text-5); } .rl-search:focus-within { border-color: var(--brand); } /* Row icon — colored by status */ .rl-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--brand-light); color: var(--brand); } .rl-icon-executed { background: rgba(34, 197, 94, .12); color: var(--green, #22c55e); } .rl-icon-blocked, .rl-icon-failed { background: rgba(245, 158, 11, .12); color: var(--amber, #f59e0b); } /* Release ID tag */ .rl-id { font-size: 12px; color: var(--text-4); font-weight: 400; margin-left: 6px; } /* ══════════════════════════════════════════════════════════════════════════ ERROR BOUNDARY ══════════════════════════════════════════════════════════════════════════ */ .eb-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 9999; padding: 24px; } .eb-card { max-width: 440px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .eb-card h2 { font-size: 22px; font-weight: 700; } .eb-card p { color: var(--text-3); font-size: 14px; line-height: 1.6; } .eb-detail { width: 100%; padding: 12px 16px; border-radius: 8px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 12px; color: var(--red); white-space: pre-wrap; word-break: break-word; text-align: left; max-height: 120px; overflow-y: auto; } /* ══════════════════════════════════════════════════════════════════════════ CONFIRM DIALOG ══════════════════════════════════════════════════════════════════════════ */ .confirm-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); z-index: 9990; padding: 24px; animation: fadeIn .15s ease; } .confirm-card { max-width: 380px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px 20px; animation: slideUp .2s ease; } .confirm-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .confirm-msg { font-size: 13px; color: var(--text-3); line-height: 1.6; margin-bottom: 20px; } .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ══════════════════════════════════════════════════════════════════════════ BTN VARIANTS (additions) ══════════════════════════════════════════════════════════════════════════ */ .btn-success { background: var(--green, #22c55e); color: #fff; border-color: transparent; } .btn-success:hover { background: #16a34a; } /* ══════════════════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ══════════════════════════════════════════════════════════════════════════ */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 1.4; min-width: 280px; max-width: min(480px, calc(100vw - 48px)); box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); animation: toast-in .25s ease-out; pointer-events: auto; } .toast-success { background: #1a3a2a; border: 1px solid #2d5a3e; color: #a3e4b8; } .toast-error { background: #3a1a1a; border: 1px solid #5a2d2d; color: #f0a0a0; } .toast-text { flex: 1; } .toast-close { background: none; border: none; color: inherit; opacity: .5; cursor: pointer; font-size: 14px; padding: 2px 6px; line-height: 1; flex-shrink: 0; } .toast-close:hover { opacity: 1; } @keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ── OFAC sync progress bar ── */ .ofac-progress { padding: 12px 14px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; } .ofac-progress-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ofac-progress-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .ofac-progress-fill { height: 100%; background: var(--accent, #3b82f6); border-radius: 2px; width: 0%; transition: width 0.25s ease; } .ofac-progress-fill.indeterminate { width: 40%; animation: ofac-indeterminate 1.4s ease-in-out infinite; } @keyframes ofac-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } /* ── ONRAMP PAGE ── */ .staging-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; background: #f59e0b22; color: #f59e0b; border: 1px solid #f59e0b55; border-radius: 99px; } /* Rail selector */ .rail-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rail-btn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-subtle); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; color: var(--fg); } .rail-btn:hover:not(:disabled) { border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 8%, var(--bg-subtle)); } .rail-btn-active { border-color: var(--accent, #3b82f6) !important; background: color-mix(in srgb, var(--accent, #3b82f6) 12%, var(--bg-subtle)) !important; } .rail-btn:disabled { opacity: .5; cursor: not-allowed; } .rail-icon { font-size: 20px; flex-shrink: 0; } .rail-title { font-weight: 600; font-size: 14px; } .rail-desc { font-size: 12px; color: var(--fg-muted); margin-top: 2px; } /* Balance row (legacy) */ .balance-row { display: flex; justify-content: space-between; align-items: center; } .bal-label { font-size: 13px; color: var(--fg-muted); } .bal-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ── Wallet page: dual balance cards ── */ .wallet-balances-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wallet-bal-card { padding: 20px 18px; border-radius: 14px; border: 1.5px solid transparent; display: flex; flex-direction: column; gap: 4px; } .wallet-bal-card--usdc { background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0.07) 100%); border-color: rgba(59, 130, 246, 0.3); } .wallet-bal-card--circle { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.06) 100%); border-color: rgba(245, 158, 11, 0.28); } .wallet-bal-card--inactive { background: var(--bg-subtle); border-color: var(--border); opacity: 0.7; } .wallet-bal-label { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0.03em; text-transform: uppercase; } .wallet-bal-amount { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.2; margin-top: 2px; } .wallet-bal-amount--muted { color: var(--text-4); } .wallet-bal-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; } @media (max-width: 480px) { .wallet-balances-row { grid-template-columns: 1fr; } .wallet-bal-amount { font-size: 20px; } } /* ── Add Funds: destination selector ── */ .dest-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dest-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-subtle); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; color: var(--fg); } .dest-btn:hover { border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 6%, var(--bg-subtle)); } .dest-btn-active { border-color: var(--accent, #3b82f6) !important; background: color-mix(in srgb, var(--accent, #3b82f6) 10%, var(--bg-subtle)) !important; } .dest-btn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dest-btn-dot--usdc { background: #3b82f6; } .dest-btn-dot--circle { background: #f59e0b; } .dest-btn-title { font-size: 13px; font-weight: 600; line-height: 1.3; } .dest-btn-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; } @media (max-width: 480px) { .dest-selector { grid-template-columns: 1fr; gap: 8px; } } /* ── Add Funds: manual claim toggle ── */ .add-funds-manual-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 8px 0; cursor: pointer; font-size: 13px; color: var(--text-3); gap: 8px; } .add-funds-manual-toggle:hover { color: var(--fg); } .add-funds-manual-body { padding: 0; } /* ── Add Funds: no-circle notice ── */ .add-funds-no-circle { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--bg-subtle); border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; } /* ── Wallet floating toast ── */ .wallet-toast { position: fixed; right: 18px; bottom: 18px; z-index: 1200; width: min(560px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid; backdrop-filter: blur(8px); box-shadow: 0 14px 32px rgba(2, 6, 23, 0.45); animation: walletToastIn .24s ease-out; } .wallet-toast-success { background: rgba(6, 78, 59, 0.9); border-color: rgba(16, 185, 129, 0.45); color: #d1fae5; } .wallet-toast-error { background: rgba(69, 10, 10, 0.92); border-color: rgba(239, 68, 68, 0.45); color: #fecaca; } .wallet-toast-info { background: rgba(15, 30, 60, 0.92); border-color: rgba(59, 130, 246, 0.45); color: #bfdbfe; } .wallet-toast-text { flex: 1; line-height: 1.45; font-size: 13px; } .wallet-toast-close { border: none; background: transparent; color: inherit; opacity: 0.9; cursor: pointer; padding: 2px; display: inline-flex; align-items: center; justify-content: center; } .wallet-toast-close:hover { opacity: 1; } @keyframes walletToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 640px) { .wallet-toast { right: 10px; left: 10px; bottom: 10px; width: auto; } } /* ── Profile page: standalone stats grid ── */ .acct-quick-stats--standalone { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .acct-quick-stats--standalone .acct-qs-item { padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; text-align: center; } .acct-quick-stats--standalone .acct-qs-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); } .acct-quick-stats--standalone .acct-qs-label { font-size: 12px; color: var(--text-3); margin-top: 4px; } @media (max-width: 600px) { .acct-quick-stats--standalone { grid-template-columns: repeat(2, 1fr); } } /* Amount chips */ .amount-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chip { padding: 6px 16px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--bg-subtle); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--fg); transition: border-color .15s; } .chip:hover { border-color: var(--accent, #3b82f6); } .chip-active { border-color: var(--accent, #3b82f6) !important; background: color-mix(in srgb, var(--accent, #3b82f6) 12%, var(--bg-subtle)) !important; color: var(--accent, #3b82f6); } .amount-custom-input { width: 100px; flex-shrink: 0; } /* Staging-mode fixed amount + banner (see Wallet.jsx) Backend faucet drips a fixed 20 USDC per request; clamp the user-facing amount to match. See sendglobe/issues-v3/STAGING-RAMP-PARITY.md. */ .staging-amount-fixed { display: flex; align-items: center; gap: 12px; } .staging-amount-hint { font-size: 12px; color: var(--text-3, var(--fg-muted)); } .staging-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #f59e0b55; background: #f59e0b14; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--fg); } .staging-banner-text { flex: 1; } .staging-banner-text strong { font-weight: 700; color: #b45309; margin-right: 4px; } /* Live Transak quote preview (see QuotePreview in Wallet.jsx). Fetched from canister `transak_get_quote` → Transak public quotes endpoint. Verified: docs.transak.com partner pricing API + open-source integrations. */ .quote-preview { border: 1px solid var(--border); background: var(--bg-subtle); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; color: var(--text-2); } .quote-preview-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; color: var(--text-3); } .quote-preview-row--receive, .quote-preview-row--total { color: var(--text); } .quote-preview-row--total strong { font-size: 16px; font-weight: 700; color: var(--text); } .quote-preview-row--receive strong { font-weight: 600; color: var(--text); } .quote-preview-divider { height: 1px; background: var(--border); margin: 6px 0; } .quote-preview-hint { margin-top: 6px; font-size: 11px; color: var(--text-3); } .quote-preview-loading, .quote-preview-error { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12px; } .quote-preview-error { color: var(--amber-text); border-color: var(--amber); background: var(--amber-bg); } /* Direct deposit address panel (see DepositAddress in Wallet.jsx) — lets users top up by sending USDC from any 3rd-party exchange instead of paying Transak's card-processing fee. Rendered inside the Circle Account rail. */ .deposit-address { display: block; } .deposit-address-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); } .deposit-address-divider::before, .deposit-address-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .deposit-address-card { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-subtle); padding: 14px; } .deposit-address-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .deposit-address-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text); } .deposit-address-network { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: var(--r-full); background: var(--brand-light); color: var(--brand); } .deposit-address-body { display: flex; gap: 14px; align-items: stretch; } .deposit-address-qr { width: 140px; height: 140px; flex-shrink: 0; border-radius: var(--r-sm); background: #fff; padding: 6px; border: 1px solid var(--border); } .deposit-address-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .deposit-address-addr { font-family: var(--font-mono); font-size: 12px; word-break: break-all; line-height: 1.5; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; user-select: all; } .deposit-address-actions { display: flex; gap: 8px; flex-wrap: wrap; } .deposit-address-warning { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--amber-bg); color: var(--amber-text); border: 1px solid var(--amber); font-size: 12px; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; } .deposit-address-warning svg { flex-shrink: 0; margin-top: 2px; } /* ICP rail "deposits not supported" inline notice — softer than the amber warning since it's informational, not a security risk. */ .deposit-address-not-supported { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: var(--bg-subtle); color: var(--text-3); font-size: 12px; line-height: 1.5; } .deposit-address-not-supported svg { flex-shrink: 0; margin-top: 2px; color: var(--text-3); } .deposit-address-not-supported strong { color: var(--text-2); } @media (max-width: 520px) { .deposit-address-body { flex-direction: column; align-items: center; } .deposit-address-right { width: 100%; } } .btn-full { width: 100%; justify-content: center; } /* Add Funds card header eye toggle. Balances are read on demand to avoid constant background polling against the public Polygon RPC and the ICRC ledger. State machine: hidden -> loading -> shown -> hidden. */ .add-funds-hd { display: flex; align-items: center; justify-content: space-between; } .balance-eye-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; height: 30px; } .balance-eye-btn .balance-eye-label { font-size: 12px; font-weight: 500; } .balance-eye-btn .spinner-sm { width: 14px; height: 14px; } .balance-masked { letter-spacing: 0.15em; color: var(--text-3); user-select: none; } /* Principal ID disclosure inside the ICP Add Funds card. Shown collapsed by default; the primary deposit address is the 64-hex Account Identifier. This row is for users with IC-native wallets (NNS, Plug, OISY) that accept ICRC-1 transfers directly to a Principal. */ .icp-principal-row { display: flex; flex-direction: column; gap: 10px; } .icp-principal-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; } .icp-principal-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; background: var(--bg-subtle); display: flex; flex-direction: column; gap: 8px; } .icp-principal-label { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; } .icp-principal-addr { font-family: var(--font-mono); font-size: 13px; color: var(--text); word-break: break-all; background: var(--bg-card); padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); } .icp-principal-actions { display: flex; gap: 8px; } .icp-principal-help { font-size: 12px; color: var(--text-3); line-height: 1.5; } /* Test credentials panel */ .test-creds .card-hd { cursor: pointer; user-select: none; } .test-creds-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; color: var(--fg); font-size: 14px; font-weight: 600; padding: 12px 16px; } .test-creds-badge { font-size: 9px; font-weight: 800; letter-spacing: .12em; padding: 2px 7px; background: #e11d4822; color: #e11d48; border: 1px solid #e11d4855; border-radius: 99px; } .test-creds-body { display: flex; flex-direction: column; gap: 16px; } .test-creds-section { display: flex; flex-direction: column; gap: 8px; } .test-creds-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); } .test-creds-grid { display: grid; grid-template-columns: 110px 1fr; gap: 6px 8px; align-items: center; } .tc-key { font-size: 12px; color: var(--fg-muted); } .tc-val { font-size: 13px; display: flex; align-items: center; gap: 4px; } .tc-mono { font-family: 'SF Mono', 'Menlo', monospace; letter-spacing: .06em; } .test-creds-note { font-size: 12px; color: var(--fg-muted); margin: 0; } .copy-btn { padding: 2px 4px !important; height: auto !important; min-height: unset !important; } /* Order status */ .order-status-body { display: flex; flex-direction: column; gap: 10px; } .order-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .order-key { color: var(--fg-muted); } .order-id-text { font-family: monospace; font-size: 12px; word-break: break-all; text-align: right; max-width: 240px; } .status-chip { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; } /* On-Ramp widget */ .onramp-widget-hd { display: flex; justify-content: space-between; align-items: center; } .onramp-iframe-container { width: 100%; overflow: hidden; border-radius: 0 0 12px 12px; } /* ═══════════════════════════════════════════════════════ SIGN-IN PAGE ═══════════════════════════════════════════════════════ */ .signin-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-page); padding: 24px 16px 80px; position: relative; overflow: hidden; } /* Ambient background orbs */ .signin-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .signin-orb--a { width: 480px; height: 480px; top: -120px; left: -120px; background: transparent; } .signin-orb--b { width: 360px; height: 360px; bottom: 60px; right: -80px; background: transparent; } .signin-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 40px 36px 32px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 0; } @media (max-width: 480px) { .signin-card { padding: 32px 24px 28px; border-radius: var(--r-md); } } .signin-logo { margin-bottom: 28px; } .signin-invite { background: var(--brand-light); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--brand-mid); margin-bottom: 20px; line-height: 1.5; } .signin-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; margin-bottom: 8px; } .signin-sub { font-size: 14px; color: var(--text-3); line-height: 1.6; margin-bottom: 28px; } .signin-btn { width: 100%; justify-content: center; height: 48px; font-size: 15px; font-weight: 700; gap: 10px; } .signin-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .signin-pill { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-4); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 99px; padding: 4px 10px; } /* "What happens next" steps */ .signin-next { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } .signin-next-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-4); margin-bottom: 4px; } .signin-next-step { display: flex; align-items: center; gap: 12px; } .signin-next-step>span { flex: 0 0 28px; height: 28px; width: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .signin-next-step>p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.4; } .signin-footer-link { position: relative; z-index: 1; margin-top: 24px; font-size: 13px; color: var(--text-4); text-decoration: none; transition: color 0.15s; } .signin-footer-link:hover { color: var(--brand); text-decoration: none; } .signin-status { font-size: 13px; color: var(--text-3); text-align: center; margin-top: 12px; animation: pulse-opacity 1.8s ease-in-out infinite; } @keyframes pulse-opacity { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .signin-error { font-size: 13px; color: var(--red); background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: var(--r); padding: 10px 14px; margin-bottom: 16px; line-height: 1.5; } /* ═══════════════════════════════════════════════════════ NEW RELEASE — PROGRESS BAR STEPPER ═══════════════════════════════════════════════════════ */ .nr-progress-wrap { margin-bottom: 20px; } .nr-progress-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .nr-progress-step { font-size: 12px; font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.07em; } .nr-progress-title { font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.07em; } .nr-progress-bar { height: 4px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; max-width: 600px; } .nr-progress-fill { height: 100%; background: var(--brand); border-radius: 99px; transition: width 0.35s ease; } /* Amount preview block */ .nr-amount-preview { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 0; } .nr-ap-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; color: var(--text-3); } .nr-ap-fee { color: var(--text-4); font-size: 12px; } .nr-ap-net { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); font-weight: 700; color: var(--green); } /* Protect step summary */ .nr-protect-summary { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; } .nr-ps-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand); border-radius: var(--r); flex-shrink: 0; } .nr-ps-body { flex: 1; min-width: 0; } .nr-ps-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .nr-ps-tags { display: flex; flex-wrap: wrap; gap: 5px; } .nr-ps-tag { font-size: 11px; font-weight: 600; color: var(--brand-mid); background: var(--brand-light); border: 1px solid rgba(59, 130, 246, 0.2); padding: 3px 8px; border-radius: 99px; } .nr-ps-customize { flex-shrink: 0; align-self: center; } /* Sticky step footer on mobile */ .nr-step-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } @media (max-width: 768px) { .nr-step-footer { position: sticky; bottom: calc(var(--nav-h) + 8px); background: var(--bg-page); padding: 12px 16px calc(var(--nav-h) + 8px); margin: 0 -16px; border-top: 1px solid var(--border); z-index: 50; } } /* Policy grid — single column on small screens */ @media (max-width: 480px) { .policy-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ RELEASE DETAIL — JOURNEY BAR ═══════════════════════════════════════════════════════ */ .journey-bar { display: flex; align-items: flex-start; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 16px; gap: 0; } .journey-bar::-webkit-scrollbar { display: none; } .journey-step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; min-width: 60px; } .journey-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--bg-subtle); color: var(--text-4); border: 2px solid var(--border); z-index: 1; flex-shrink: 0; transition: background 0.2s, border-color 0.2s, color 0.2s; } .journey-step.done .journey-dot { background: var(--green-bg); border-color: var(--green); color: var(--green); } .journey-step.active .journey-dot { background: var(--brand-light); border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); } .journey-label { font-size: 11px; font-weight: 600; color: var(--text-4); text-align: center; margin-top: 6px; white-space: nowrap; } .journey-step.done .journey-label { color: var(--green-text); } .journey-step.active .journey-label { color: var(--brand); } .journey-line { position: absolute; top: 14px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--border); z-index: 0; } .journey-step.done .journey-line { background: var(--green); } /* ═══════════════════════════════════════════════════════ RELEASE DETAIL — ACTION CARD ═══════════════════════════════════════════════════════ */ .rd-action-card { background: var(--bg-card); border: 1.5px solid var(--brand); border-radius: var(--r-md); padding: 20px 24px; margin-bottom: 12px; } .rd-action--waiting { border-color: var(--border); } .rd-action--success { border-color: var(--green); } .rd-action--done { border-color: var(--green); background: var(--green-bg); } .rd-ac-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); margin-bottom: 4px; } .rd-action--waiting .rd-ac-eyebrow { color: var(--text-4); } .rd-action--success .rd-ac-eyebrow { color: var(--green); } .rd-action--done .rd-ac-eyebrow { color: var(--green); } .rd-ac-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .rd-ac-desc { font-size: 13px; color: var(--text-3); line-height: 1.55; } /* Condition progress within action card */ .rd-cond-progress { margin-top: 12px; display: flex; align-items: center; gap: 10px; } .rd-cp-bar { flex: 1; height: 5px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; } .rd-cp-fill { height: 100%; background: var(--brand); border-radius: 99px; transition: width 0.35s; } .rd-cp-label { font-size: 12px; font-weight: 600; color: var(--text-4); white-space: nowrap; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════ RELEASE DETAIL — DISCLOSURE SECTIONS ═══════════════════════════════════════════════════════ */ .rd-disclosures { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .disclosure { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .disclosure-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; background: none; border: none; cursor: pointer; text-align: left; gap: 8px; } .disclosure-trigger:hover { background: var(--bg-subtle); } .disclosure-trigger-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .disclosure-title { font-size: 14px; font-weight: 700; color: var(--text); } .disclosure-badge { font-size: 11px; font-weight: 600; color: var(--text-4); background: var(--bg-subtle); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); } .disclosure-body { border-top: 1px solid var(--border); padding: 0; } /* ═══════════════════════════════════════════════════════════════ GLOBAL MOBILE RESPONSIVE FIXES (appended) ═══════════════════════════════════════════════════════════════ */ /* ── Bottom nav: never wrap labels, anchor icon size ── */ .bottom-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Icon-only bottom nav at very small screens */ @media (max-width: 360px) { :root { --nav-h: 52px; } .bottom-nav-item span { display: none; } .bottom-nav { height: 52px; } } /* ── Card body / header padding: reduce on mobile ── */ @media (max-width: 768px) { .card-body { padding: 16px 18px; } .card-hd { padding: 12px 16px; } } @media (max-width: 480px) { .card-body { padding: 14px 14px; } .card-hd { padding: 10px 14px; } } /* ── Page header: tighten on small screens ── */ @media (max-width: 480px) { .page-hd { padding-bottom: 12px; gap: 8px; } .page-hd h1 { font-size: 18px; } .page-hd-right { gap: 6px; } } /* ── Admin tabs: hide scrollbar ── */ .admin-tabs { scrollbar-width: none; -ms-overflow-style: none; } .admin-tabs::-webkit-scrollbar { display: none; } /* ── Admin tabs: wrap to 2 rows on very small screens ── */ @media (max-width: 480px) { .admin-tabs { flex-wrap: wrap; } .admin-tab { padding: 7px 10px; font-size: 11px; } } /* ── Profile: avatar section wraps on tiny screens ── */ @media (max-width: 420px) { .acct-profile-top { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px; } .acct-avatar { width: 60px; height: 60px; font-size: 20px; border-radius: 14px; } .acct-name { font-size: 15px; } } /* ── Principal ID code: never overflow container ── */ .acct-pid-code { max-width: min(260px, 52vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } /* ── People: email invite row stacks on narrow screens ── */ @media (max-width: 500px) { .ppl-email-row { flex-direction: column; align-items: stretch; } .ppl-email-row input { width: 100%; } .ppl-email-row .btn { width: 100%; justify-content: center; } } /* ── Releases: toolbar + search stack on mobile ── */ @media (max-width: 500px) { .rl-toolbar { flex-direction: column; align-items: stretch; } .rl-filters { flex: none; } .rl-search { min-width: auto; } } /* ── List rows: sub-text truncates cleanly ── */ .list-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Journey bar: compact on very small screens ── */ @media (max-width: 420px) { .jb-step span.xs { font-size: 9px; letter-spacing: 0; } .jb-connector { min-width: 12px; } } /* ── Wallet: balance amount smaller on phones ── */ @media (max-width: 480px) { .wallet-bal-amount { font-size: 18px; } } /* ── People: hide QR canvas on very narrow screens to save space ── */ @media (max-width: 400px) { .ppl-invite-qr { display: none; } } /* ── Admin user rows: principal text wraps gracefully ── */ .um-pid, .um-email { word-break: break-all; font-size: 11px; } /* ── General: page-level forms don't overflow on phones ── */ @media (max-width: 480px) { .form-group input, .form-group select, .form-group textarea { font-size: 16px; /* prevent iOS auto-zoom (already set above — reinforced) */ } .nr-step { width: 100%; } } /* ── Admin override / finance forms: collapse sooner ── */ @media (max-width: 600px) { .admin-override-form { flex-direction: column; } .admin-override-form .form-group { min-width: auto; } } /* ── Release detail: action card on mobile ── */ @media (max-width: 480px) { .action-card .card-body { padding: 14px 14px; } .ac-banner { font-size: 12px; padding: 8px 14px; } } /* ═══════════════════════════════════════════════════════════ PEOPLE PAGE — 360px / narrow-phone targeted fixes ═══════════════════════════════════════════════════════════ */ /* Tabs: scrollable horizontally (needed for 3-tab SuperAdmin view at 360px) */ .ppl-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; } .ppl-tabs::-webkit-scrollbar { display: none; } /* Section bar must clip overflow so tabs scroll inside it */ .ppl-section-bar { overflow: hidden; min-width: 0; } /* Contact meta and invite code: truncate instead of wrapping */ .ppl-contact-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppl-invite-code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* copy-field input: must be >= 16px on mobile to prevent iOS auto-zoom (override the component-level 13px declaration) */ @media (max-width: 768px) { .copy-field input { font-size: 16px; } } /* Filter pills: allow wrapping so they never overflow on tiny screens */ .ppl-filter-pills { flex-wrap: wrap; } /* Tighten padding on invite panel, contact/invite rows and filter bar at 400px */ @media (max-width: 400px) { .ppl-invite-panel { padding: 14px 16px; gap: 16px; } .ppl-contact-row { padding: 10px 14px; gap: 10px; } .ppl-invite-row { padding: 10px 14px; gap: 10px; } .ppl-filter-bar { padding: 10px 14px; gap: 8px; } .ppl-tab { padding: 6px 10px; font-size: 12px; gap: 4px; } } /* ════════════════════════════════════════════════════════ ADMIN PANEL — Rebuilt with grouped sidebar nav ════════════════════════════════════════════════════════ */ /* ── Two-panel layout ── */ .adm-layout { display: flex; align-items: flex-start; gap: 0; } .adm-sidebar { width: 210px; flex-shrink: 0; padding: 0 8px 40px; position: sticky; top: 68px; max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: none; } .adm-sidebar::-webkit-scrollbar { display: none; } .adm-nav-group { margin-bottom: 22px; } .adm-nav-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); padding: 0 10px 5px; } .adm-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; border: none; background: none; text-align: left; transition: background 0.12s, color 0.12s; white-space: nowrap; } .adm-nav-item:hover { background: var(--bg-subtle); color: var(--text-1); } .adm-nav-item.active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 600; } .adm-nav-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; line-height: 14px; flex-shrink: 0; } .adm-content { flex: 1; min-width: 0; padding-left: 24px; border-left: 1px solid var(--border); } /* ── System status pill ── */ .adm-system-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .adm-system-pill--ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .adm-system-pill--locked { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .adm-system-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ── KPI tiles ── */ .adm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .adm-kpi-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .adm-kpi-label { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .adm-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-1); letter-spacing: -0.5px; line-height: 1; } /* ── Stat pills ── */ .adm-stat-pill { background: var(--bg-subtle); border-radius: 10px; padding: 14px 16px; } .adm-stat-pill-val { font-size: 22px; font-weight: 700; color: var(--text-1); letter-spacing: -0.5px; line-height: 1.1; } .adm-stat-pill-label { font-size: 11px; color: var(--text-dim); margin-top: 5px; line-height: 1.4; } /* ── Settings rows (API keys) ── */ .settings-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .settings-row:last-child { border-bottom: none; } .settings-row--editing { flex-direction: column; align-items: stretch; gap: 0; padding: 16px 20px; } .settings-row-info { flex: 1; min-width: 0; } .settings-row-label { font-size: 14px; font-weight: 500; color: var(--text-1); } .settings-row-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; } .settings-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } /* ── Canister rows ── */ .adm-can-list {} .can-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } .can-row:last-child { border-bottom: none; } .can-indicator { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .can-body { flex: 1; min-width: 0; } .can-name { font-size: 14px; font-weight: 600; color: var(--text-1); } .can-id { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .can-bal { font-size: 18px; font-weight: 700; color: var(--text-1); line-height: 1.1; } .can-health { font-size: 11px; font-weight: 600; margin-top: 2px; } /* ── Info / warning / example boxes ── */ .adm-info-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: color-mix(in srgb, var(--brand) 6%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border)); border-radius: 10px; } .adm-warning-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: color-mix(in srgb, var(--yellow) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--yellow) 25%, var(--border)); border-radius: 10px; } .adm-example-box { padding: 10px 14px; background: var(--bg-subtle); border-radius: 8px; font-size: 13px; color: var(--text-2); line-height: 1.5; } .adm-danger-card { border-color: var(--red); background: color-mix(in srgb, var(--red) 4%, var(--bg-card)); } /* ── Subsection ── */ .adm-subsection { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .adm-subsection-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } /* ── User card grid (unified Users page) ── */ .usr-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .usr-count { font-size: 12px; color: var(--text-4); flex-shrink: 0; white-space: nowrap; } .usr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .usr-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.15s; } .usr-card:hover { border-color: var(--border-strong); } .usr-card-top { display: flex; align-items: center; gap: 12px; } .usr-card-avatar { width: 40px; height: 40px; font-size: 14px; flex-shrink: 0; } .usr-card-identity { flex: 1; min-width: 0; } .usr-card-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .usr-card-pid { display: flex; align-items: center; gap: 4px; } .usr-card-pid code { font-size: 10px; color: var(--text-4); font-family: var(--font-mono, monospace); } .usr-card-wallet { flex: 1; } .usr-addr-ucw { display: flex; align-items: center; gap: 8px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; padding: 9px 12px; } .usr-addr-badge { font-size: 10px; font-weight: 700; background: rgba(16, 185, 129, 0.18); color: #059669; border-radius: 5px; padding: 2px 7px; flex-shrink: 0; white-space: nowrap; } .usr-addr-code { font-size: 10px; color: var(--text-3); font-family: var(--font-mono, monospace); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usr-scan-link { color: var(--text-4); flex-shrink: 0; line-height: 1; text-decoration: none; } .usr-scan-link:hover { color: var(--text-2); } .usr-no-wallet { font-size: 12px; color: var(--text-4); font-style: italic; padding: 9px 12px; background: var(--bg-subtle); border-radius: 10px; } .usr-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); gap: 8px; margin-top: auto; } .usr-card-stats { display: flex; align-items: center; gap: 8px; min-width: 0; } .usr-stat { font-size: 12px; color: var(--text-3); white-space: nowrap; } .usr-stat-vol { font-size: 12px; color: var(--text-2); font-weight: 600; white-space: nowrap; } .usr-card-actions { display: flex; gap: 4px; flex-shrink: 0; } @media (max-width: 960px) { .usr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .usr-grid { grid-template-columns: 1fr; } } /* ── Mobile: sidebar → horizontal scroll ── */ @media (max-width: 768px) { .adm-layout { flex-direction: column; } .adm-sidebar { width: 100%; position: static; padding: 0 0 10px; max-height: none; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; overflow-y: visible; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .adm-nav-group { display: flex; flex-direction: row; align-items: center; gap: 2px; margin: 0; white-space: nowrap; flex-shrink: 0; } .adm-nav-group+.adm-nav-group { padding-left: 6px; border-left: 1px solid var(--border); margin-left: 4px; } .adm-nav-group-label { display: none; } .adm-nav-item { padding: 6px 9px; font-size: 12px; gap: 5px; border-radius: 6px; } .adm-content { padding-left: 0; border-left: none; } .adm-kpi-grid { grid-template-columns: repeat(2, 1fr); } .adm-kpi-value { font-size: 20px; } .can-id { display: none; } } @media (max-width: 480px) { .adm-nav-item span { display: none; } .adm-nav-item { padding: 7px; } } /* ── Account page: two-column layout ─────────────────────────────── */ .acct-row { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; } @media (min-width: 760px) { .acct-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 16px; } .acct-row>.card { margin-bottom: 0; } } /* ── RailToggle ───────────────────────────────────────────────────── */ .rail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 16px; } .rail-row-label { font-size: 13px; color: var(--text-3); white-space: nowrap; } .rail-row-right { display: flex; align-items: center; gap: 8px; } .rail-label { font-size: 13px; color: var(--text-4); transition: color 0.15s; } .rail-label--active { font-weight: 600; color: var(--text); } /* iOS-style switch */ .rail-switch { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--text-4); border: none; cursor: pointer; padding: 0; transition: background 0.2s; flex-shrink: 0; } .rail-switch--on { background: var(--brand, #3b82f6); } .rail-switch:disabled { opacity: 0.5; cursor: default; } .rail-switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; pointer-events: none; } .rail-switch--on .rail-switch-thumb { transform: translateX(18px); } /* ── HandshakePanel — ported from /release-engine demo ───────────── */ /* Outer shell — matches te-main */ .hs-panel { border-radius: 24px; border: 1px solid var(--border); background: var(--bg-card); padding: 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; margin-bottom: 12px; } /* Faint glow — te-main__glow */ .hs-panel::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: var(--blue-bg); filter: blur(80px); border-radius: 50%; transform: translate(50%, -50%); pointer-events: none; opacity: 0.6; } /* ── Section header — te-section-header ── */ .hs-section-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 24px; } .hs-section-labels { display: flex; align-items: center; gap: 10px; } .hs-section-label { font-size: 10px; font-weight: 900; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4em; } .hs-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border); flex-shrink: 0; } .hs-section-ref { font-size: 10px; font-family: var(--font-mono, monospace); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; font-style: italic; } .hs-section-title { margin-top: 8px; font-size: clamp(24px, 4vw, 32px); font-weight: 900; color: var(--text); font-style: italic; letter-spacing: -0.05em; text-transform: uppercase; line-height: 1; } /* ── Status pill — te-status-pill ── */ .hs-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; border: 1px solid; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; align-self: flex-start; } .hs-status-dot { width: 4px; height: 4px; border-radius: 50%; } .hs-status-pill--awaiting { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.2); color: #f59e0b; } .hs-status-pill--awaiting .hs-status-dot { background: #f59e0b; animation: hs-pulse 2s infinite; } @keyframes hs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ── Cards grid — te-cards ── */ .hs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } @media (max-width: 600px) { .hs-cards { grid-template-columns: 1fr; } } /* ── Party card — te-party-card ── */ .hs-party-card { position: relative; overflow: hidden; background: var(--bg-page); border: 1px solid var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; min-height: 240px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); transition: border-color 0.2s; } .hs-party-card--buyer { justify-content: center; align-items: center; text-align: center; } /* ── Party head — te-party-head ── */ .hs-party-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .hs-party-head--abs { position: absolute; top: 24px; left: 24px; margin-bottom: 0; } /* ── Party icon — te-party-icon ── */ .hs-party-icon { display: inline-flex; padding: 10px; border-radius: 12px; background: var(--bg-subtle); color: var(--text-3); flex-shrink: 0; } /* ── Party labels ── */ .hs-party-label { font-size: 10px; font-weight: 900; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; } .hs-party-sublabel { font-size: 8px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; font-style: italic; opacity: 0.7; } /* ── Party body — te-party-body ── */ .hs-party-body { position: relative; flex: 1; } /* ── Lock overlay — te-lock-overlay ── */ .hs-lock-overlay { position: absolute; inset: -12px; z-index: 20; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(0, 0, 0, 0.35); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.05); } .hs-lock-overlay svg { color: rgba(255, 255, 255, 0.2); margin-bottom: 12px; } .hs-lock-overlay p { font-size: 9px; font-weight: 900; color: rgba(255, 255, 255, 0.3); text-transform: uppercase; letter-spacing: 0.3em; text-align: center; padding: 0 24px; line-height: 1.6; } /* Light mode: lighter overlay */ [data-theme="light"] .hs-lock-overlay, .light .hs-lock-overlay { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); } [data-theme="light"] .hs-lock-overlay svg, .light .hs-lock-overlay svg { color: rgba(0, 0, 0, 0.2); } [data-theme="light"] .hs-lock-overlay p, .light .hs-lock-overlay p { color: rgba(0, 0, 0, 0.35); } /* ── Serial fields — te-serial-group ── */ .hs-serial-group { display: flex; flex-direction: column; gap: 20px; } .hs-serial-label { font-size: 9px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; font-style: italic; line-height: 1; } .hs-serial-value { font-size: 16px; font-family: var(--font-mono, monospace); color: var(--text); letter-spacing: -0.02em; margin-top: 4px; } .hs-verify-status { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin-top: 4px; } /* ── Big icon — te-big-icon ── */ .hs-big-icon { height: 80px; width: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 1px solid transparent; background: var(--bg-subtle); color: var(--text-3); transition: all 0.6s; } .hs-big-icon--low { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.2); } /* ── Buyer status text — te-buyer-status ── */ .hs-buyer-status { margin-bottom: 16px; } .hs-big-bal { font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: -0.04em; text-transform: uppercase; color: var(--text); line-height: 1.1; } .hs-big-warn { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: #f59e0b; margin-top: 4px; } .hs-big-sub { font-size: 9px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 6px; } /* ── Skeleton ── */ .hs-bal-skeleton { display: inline-block; border-radius: 6px; background: var(--bg-subtle); animation: hs-shimmer 1.4s ease-in-out infinite; } @keyframes hs-shimmer { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } /* ── Balance header row (wallet icon + eye button) ── */ .hs-bal-header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 6px; } /* ── Eye button (balance reveal) ── */ .hs-eye-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-4); border-radius: 4px; transition: color 0.15s; line-height: 0; } .hs-eye-btn:hover { color: var(--text); } .hs-eye-btn:disabled { opacity: 0.4; cursor: default; } /* ── Error and retry states in balance area ── */ .hs-bal-error { font-size: 11px; color: var(--text-4); display: inline-flex; align-items: center; gap: 6px; } .hs-bal-retry { background: none; border: none; padding: 0; font-size: 11px; color: var(--blue); cursor: pointer; text-decoration: underline; } .hs-bal-retry:hover { opacity: 0.8; } .hs-toggle-row { display: flex; align-items: center; gap: 10px; } .hs-tgl-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-4); transition: color 0.15s; min-width: 48px; text-align: center; } .hs-tgl-label--on { color: var(--text); } /* ── Action zone — te-action-zone ── */ .hs-action-wrap { max-width: 280px; margin: 0 auto; } .hs-action-btn { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 24px; border-radius: 14px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.25em; cursor: pointer; border: none; background: var(--blue); color: #fff; box-shadow: 0 16px 32px rgba(59, 130, 246, 0.18); transition: all 0.2s; overflow: hidden; } .hs-action-btn:hover:not(:disabled) { background: #4d6fff; transform: translateY(-1px); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25); } .hs-action-btn:active:not(:disabled) { transform: scale(0.97); } .hs-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Seller active card (Proof of Product \u2014 visible/unlocked) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */ .hs-party-card--seller-active { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.03); } .hs-party-icon--green { background: rgba(16, 185, 129, 0.1); color: var(--green); } .hs-verify-status--green { color: var(--green); } /* ── Waiting note below cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */ .hs-waiting-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 12px; color: var(--text-3); line-height: 1.55; } /* ── Party card modifiers (action/vault/complete) ── */ .hs-party-card--action { border-color: rgba(59, 130, 246, 0.25); background: rgba(59, 130, 246, 0.03); } .hs-party-card--vault { border-color: rgba(59, 130, 246, 0.18); background: rgba(59, 130, 246, 0.02); } .hs-party-card--complete { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.03); } /* ── Party icon blue modifier ── */ .hs-party-icon--blue { background: var(--blue-bg); color: var(--blue); } /* ── Status pill: your-turn, in-progress, complete ── */ .hs-status-pill--your-turn { background: var(--blue-bg); border-color: rgba(59, 130, 246, 0.25); color: var(--blue); } .hs-status-pill--your-turn .hs-status-dot { background: var(--blue); box-shadow: 0 0 6px rgba(59, 130, 246, 0.5); animation: hs-pulse 1.5s infinite; } .hs-status-pill--in-progress { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.2); color: var(--blue); } .hs-status-pill--in-progress .hs-status-dot { background: var(--blue); animation: hs-pulse 1.2s infinite; } .hs-status-pill--complete { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); color: var(--green); } .hs-status-pill--complete .hs-status-dot { background: var(--green); box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); } /* ── Big icon blue variant ── */ .hs-big-icon--blue { background: var(--blue-bg); color: var(--blue); border-color: rgba(59, 130, 246, 0.2); } /* ── Progress bar (left card, Verifying/Eligible) ── */ .hs-prog-wrap { padding-top: 8px; } .hs-prog-bar { height: 6px; border-radius: 99px; background: var(--bg-subtle); overflow: hidden; margin-bottom: 8px; } .hs-prog-fill { height: 100%; border-radius: 99px; background: var(--green); transition: width 0.6s ease; } .hs-prog-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); } /* ── Evidence editor (Verifying, seller footer) ── */ .hs-evidence-zone { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 4px; } .hs-ev-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .hs-ev-title { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3em; color: var(--text-3); } .hs-ev-count { font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: 0.05em; } .hs-ev-list { display: flex; flex-direction: column; gap: 10px; } .hs-ev-item { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-page); transition: border-color 0.2s; } .hs-ev-item--done { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.03); } .hs-ev-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .hs-ev-item--done .hs-ev-item-head { margin-bottom: 0; } .hs-ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; } .hs-ev-dot--pass { background: var(--green); box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); } .hs-ev-name { font-size: 12px; font-weight: 700; color: var(--text); flex: 1; } .hs-ev-badge { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: var(--green); background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 99px; } .hs-ev-input-row { display: flex; gap: 8px; } .hs-ev-input { flex: 1; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--text); outline: none; transition: border-color 0.15s; } .hs-ev-input:focus { border-color: var(--blue); } .hs-ev-input::placeholder { color: var(--text-4); } .hs-ev-submit { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--blue); color: #fff; cursor: pointer; flex-shrink: 0; transition: all 0.15s; } .hs-ev-submit:hover:not(:disabled) { background: #4d6fff; } .hs-ev-submit:disabled { opacity: 0.4; cursor: not-allowed; } .hs-ev-ref { margin-top: 6px; font-size: 10px; font-family: var(--font-mono, monospace); color: var(--text-3); word-break: break-all; } /* ── Action zone (secure funds — consent + CTA) ── */ .hs-action-zone { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; } .hs-ref-reveal { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); margin-bottom: 12px; gap: 12px; flex-wrap: wrap; } .hs-ref-label { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; color: var(--green); flex-shrink: 0; } .hs-ref-val { font-size: 13px; font-family: var(--font-mono, monospace); color: var(--text); font-weight: 700; word-break: break-all; } .hs-consent { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--border); cursor: pointer; font-size: 12px; color: var(--text-3); line-height: 1.55; } .hs-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--blue); } /* ── Green CTA (release payment) ── */ .hs-action-btn--green { background: var(--green) !important; border-color: var(--green) !important; box-shadow: 0 16px 32px rgba(16, 185, 129, 0.18) !important; } .hs-action-btn--green:hover:not(:disabled) { background: #0fa878 !important; transform: translateY(-1px); box-shadow: 0 20px 40px rgba(16, 185, 129, 0.28) !important; } /* ── Complete note ── */ .hs-complete-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.55; }