:root{ /* ---- Mintpay dark brand (matched to marketing landing) ---- */ --bg:#07130f; /* page background */ --bg-deep:#050f0a; /* deepest background (gradient floor / sidebar) */ --panel:#0c1f17; /* cards / panels */ --modal-surface:#0c1f17; /* deliberately opaque: modal content must not blend with page headings */ --panel-2:#08160f; /* recessed surfaces */ --elevated:#10271d; /* hovered / elevated surfaces */ --line:rgba(255,255,255,.08); --line-2:#1f3a2b; /* stronger green border */ /* brand green */ --mint:#56d97e; /* primary accent */ --mint-hi:#6fe391; /* hover */ --mint-soft:#bdf38f; /* gradient start */ --mint-deep:#22c06a; /* gradient end */ --grad:linear-gradient(135deg,#bdf38f 0%,#56d97e 52%,#22c06a 100%); /* text */ --ink:#f3f9f5; /* primary text */ --ink-2:#9db3a6; /* secondary text */ --muted:#5f7770; /* muted text */ /* status */ --ok:#56d97e; --danger:#ff6b6b; --pend:#d7ad45; /* previously fallback-only tokens — defined so inline var() usage never relies on hardcoded fallbacks */ --pos:#56d97e; --warn:#e3b341; --surface-2:rgba(255,255,255,.05); --brand:#3fd58a; --mint-ink:#7ee49a; /* ---- semantic status palette (tuned for the dark brand) ---- Each token = a clear coloured ink + a subtle tinted fill + a defined border. st-ok → success st-bad → negative st-warn → in-progress st-info → informational st-mut → inactive / neutral */ --st-ok-ink:#7ee49a; --st-ok-bg:rgba(86,217,126,.12); --st-ok-bd:rgba(86,217,126,.34); --st-bad-ink:#ff8e8e; --st-bad-bg:rgba(255,107,107,.12); --st-bad-bd:rgba(255,107,107,.34); --st-warn-ink:#e6c468; --st-warn-bg:rgba(215,173,69,.13); --st-warn-bd:rgba(215,173,69,.34); --st-info-ink:#86c4f5; --st-info-bg:rgba(86,160,217,.13); --st-info-bd:rgba(86,160,217,.34); --st-mut-ink:#9db3a6; --st-mut-bg:rgba(255,255,255,.06); --st-mut-bd:rgba(255,255,255,.12); /* legacy aliases (kept so any older selectors resolve to the dark theme) */ --paper:var(--bg); --pine:var(--mint); --pine-2:var(--mint-hi); --gold:var(--pend); /* generic card surface (was referenced but never defined → compliance KPI cards had no bg) */ --card:var(--panel); /* ---- design-token scales (added 2026-07-07 overhaul) ---- */ /* type scale */ --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-26:26px; --fs-34:34px; --fs-48:48px; /* spacing scale (4-pt) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; /* radius + elevation */ --radius:16px; --radius-sm:11px; --radius-lg:20px; --radius-pill:999px; --shadow:0 1px 0 rgba(255,255,255,.03),0 22px 50px rgba(0,0,0,.45); --shadow-sm:0 10px 26px rgba(0,0,0,.35); --shadow-lg:0 2px 0 rgba(255,255,255,.03),0 32px 72px rgba(0,0,0,.55); --glow:0 8px 24px rgba(34,192,106,.28); /* indigo compliance accent (dark) */ --accent-indigo:#7c86ff; --accent-indigo-bg:rgba(124,134,255,.12); --accent-indigo-bd:rgba(124,134,255,.40); } /* ============================================================================ LIGHT THEME — activated by . Overrides every colour token so the whole app (cards, charts via var(), status badges) flips. Chart SVGs reference var(--mint)/var(--ink)/var(--line) so they re-theme for free. ============================================================================ */ :root[data-theme="light"]{ --bg:#f4f7f5; --bg-deep:#eef2f0; --panel:#ffffff; --modal-surface:#ffffff; --panel-2:#f6faf8; --elevated:#eef3f0; --line:rgba(16,40,29,.10); --line-2:#cfe3d6; --mint:#1f9d54; --mint-hi:#17813f; --mint-soft:#bdf38f; --mint-deep:#138a45; /* keep the green button gradient — dark ink on green reads well on light too */ --ink:#0e1b14; --ink-2:#566b60; --muted:#82988c; --ok:#1f9d54; --danger:#d64545; --pend:#b07d0a; --pos:#0a7d4f; --warn:#b7791f; --surface-2:#f3f5f4; --brand:#2fae6a; --mint-ink:#137a3f; --st-ok-ink:#137a3f; --st-ok-bg:rgba(31,157,84,.12); --st-ok-bd:rgba(31,157,84,.30); --st-bad-ink:#c0392b; --st-bad-bg:rgba(214,69,69,.10); --st-bad-bd:rgba(214,69,69,.30); --st-warn-ink:#9a7a14; --st-warn-bg:rgba(184,134,11,.13);--st-warn-bd:rgba(184,134,11,.30); --st-info-ink:#2563eb; --st-info-bg:rgba(37,99,235,.10); --st-info-bd:rgba(37,99,235,.28); --st-mut-ink:#566b60; --st-mut-bg:rgba(16,40,29,.06); --st-mut-bd:rgba(16,40,29,.14); --shadow:0 1px 0 rgba(16,40,29,.02),0 18px 40px rgba(16,40,29,.10); --shadow-sm:0 8px 22px rgba(16,40,29,.08); --shadow-lg:0 2px 0 rgba(16,40,29,.02),0 28px 60px rgba(16,40,29,.14); --glow:0 8px 24px rgba(31,157,84,.18); /* indigo compliance accent (light — darkened for contrast on white) */ --accent-indigo:#4f46e5; --accent-indigo-bg:rgba(79,70,229,.10); --accent-indigo-bd:rgba(79,70,229,.30); } /* Light overrides for the few hardcoded-dark spots (var() can't reach these). */ :root[data-theme="light"] body{ background: radial-gradient(1200px 700px at 78% -8%,rgba(31,157,84,.08),transparent 60%), radial-gradient(900px 600px at -6% 12%,rgba(34,192,106,.05),transparent 55%), linear-gradient(180deg,#f4f7f5 0,#eef2f0 100%); } :root[data-theme="light"] .side{background:linear-gradient(180deg,#ffffff 0,#f4f7f5 100%)} :root[data-theme="light"] .side .brand .wordmark{color:#0e1b14} :root[data-theme="light"] .btn.ghost,:root[data-theme="light"] .btn.gh{background:rgba(16,40,29,.04)} :root[data-theme="light"] .btn.ghost:hover,:root[data-theme="light"] .btn.gh:hover{background:rgba(31,157,84,.10)} :root[data-theme="light"] .nav:hover{background:rgba(16,40,29,.05)} :root[data-theme="light"] .admin-table tr[data-user-select]:hover td{background:rgba(16,40,29,.035)} :root[data-theme="light"] .admin-table tr.selected td{background:rgba(31,157,84,.10)} :root[data-theme="light"] .c-card.clickable:hover{box-shadow:0 8px 20px rgba(31,157,84,.14)} :root[data-theme="light"] .hero{background:linear-gradient(140deg,#eaf7ee 0,#e3f3e9 60%,#edf9f0 100%);border-color:var(--line-2);color:var(--ink)} :root[data-theme="light"] .hero::after{background:radial-gradient(420px 220px at 88% -30%,rgba(31,157,84,.14),transparent 70%)} :root[data-theme="light"] .wallet{background:rgba(16,40,29,.035)} /* The select chevron is a baked data-URI (can't use currentColor); give light theme a darker one. */ :root[data-theme="light"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23566b60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} /* Baked dark-green gradient panels → light mint gradient in light theme (no "dark islands"). */ :root[data-theme="light"] .svc-aside, :root[data-theme="light"] .fx-panel, :root[data-theme="light"] .quote-card{background:linear-gradient(150deg,#eaf7ee 0,#e3f3e9 60%,#edf9f0 100%);border-color:var(--line-2);color:var(--ink)} /* Every ico() glyph is a stroke outline: force stroke:currentColor;fill:none so icons inherit their container's text colour and never fall back to SVG's default black fill (the dark-mode "black blob" bug on the theme toggle, KPI icons, etc.). Chart SVGs and the brand LOGO are separate (not .svgic). */ .svgic{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Keyboard skip link — first focusable, jumps past the nav to the main view. */ .skip-link{position:fixed;top:-64px;left:12px;z-index:10000;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:700;transition:top .15s ease} .skip-link:focus{top:12px;outline:2px solid var(--mint);outline-offset:2px} /* Boot splash — shown until app.js renders into #app (no more blank-screen flash). */ .boot-splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:linear-gradient(180deg,var(--bg) 0,var(--bg-deep) 100%);z-index:9998} .boot-mark{width:58px;height:58px;border-radius:15px;box-shadow:var(--shadow-sm)} .boot-ring{width:28px;height:28px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--mint);animation:boot-spin .8s linear infinite} @keyframes boot-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.boot-ring{animation-duration:2.4s}} /* Skeleton loading placeholder (shimmer) — replaces plain "Loading…" text while a view fetches. */ .skel{display:flex;flex-direction:column;gap:14px;padding:6px 0;max-width:640px} .skel-line{height:16px;border-radius:8px;background:linear-gradient(90deg,var(--panel-2) 25%,var(--elevated) 50%,var(--panel-2) 75%);background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite} .skel-line:nth-child(1){width:42%;height:26px} .skel-line:nth-child(3){width:82%} .skel-line:nth-child(4){width:60%} @keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* Subtle content fade-in on every view render — makes navigation feel smooth/premium. */ @keyframes view-fade{from{opacity:0}to{opacity:1}} #view>*{animation:view-fade .26s ease both} @media (prefers-reduced-motion:reduce){.skel-line{animation:none}#view>*{animation:none}} *{box-sizing:border-box;margin:0;padding:0} html,body{max-width:100%;overflow-x:hidden} body{ font-family:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: radial-gradient(1200px 700px at 78% -8%,rgba(86,217,126,.10),transparent 60%), radial-gradient(900px 600px at -6% 12%,rgba(34,192,106,.07),transparent 55%), linear-gradient(180deg,var(--bg) 0,var(--bg-deep) 100%); background-attachment:fixed; color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; } h1,h2,h3,.brandfont{font-family:'Bricolage Grotesque','Schibsted Grotesk',sans-serif;letter-spacing:-.02em;font-weight:800;color:var(--ink)} a{color:var(--mint);text-decoration:none}a:hover{color:var(--mint-hi)} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace} ::selection{background:rgba(86,217,126,.28);color:#fff} .hidden{display:none!important}.muted{color:var(--muted)}.tnum{font-variant-numeric:tabular-nums} ::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1d3329;border-radius:9px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#2a4a39;background-clip:padding-box} /* =================== controls =================== */ .btn{border:none;border-radius:11px;padding:11px 17px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:transform .16s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,filter .18s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;white-space:normal;line-height:1.2} .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} /* primary — brand gradient */ .btn.pri{background:var(--grad);color:#06130d;box-shadow:0 8px 22px rgba(34,192,106,.28)} .btn.pri:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 30px rgba(34,192,106,.4)} .btn.pri:active{transform:translateY(0)} /* mint — solid accent */ .btn.mint{background:var(--mint);color:#06130d;box-shadow:0 8px 20px rgba(86,217,126,.24)} .btn.mint:hover{background:var(--mint-hi);transform:translateY(-1px);box-shadow:0 12px 28px rgba(86,217,126,.36)} .btn.mint:active{transform:translateY(0)} /* ghost — outlined on dark */ .btn.ghost,.btn.gh{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover,.btn.gh:hover{border-color:var(--mint);background:rgba(86,217,126,.10);color:var(--ink)} /* danger — destructive ops (deactivate/delete) */ .btn.danger{border:1px solid var(--st-bad-bd);color:var(--st-bad-ink);background:var(--st-bad-bg)} .btn.danger:hover{border-color:var(--danger);background:var(--st-bad-bg);filter:brightness(1.06)} .btn.action-info{border-color:var(--st-info-bd);color:var(--st-info-ink);background:var(--st-info-bg)} .btn.action-mint{border-color:var(--st-ok-bd);color:var(--st-ok-ink);background:var(--st-ok-bg)} .btn.action-warn{border-color:var(--st-warn-bd);color:var(--st-warn-ink);background:var(--st-warn-bg)} .btn.sm{padding:7px 12px;font-size:12.5px;min-height:33px;border-radius:9px} .btn.lg{padding:14px 22px;font-size:15px;min-height:48px;border-radius:13px} .btn.full{width:100%} .btn:focus-visible,.linklike:focus-visible,.nav:focus-visible{outline:2px solid var(--mint);outline-offset:2px} .nav-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:6px 11px;cursor:pointer;font-size:17px;line-height:1;font-family:inherit} .nav-toggle:focus-visible{outline:2px solid var(--mint);outline-offset:2px} .btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;filter:none} input,select,textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14.5px;font-family:inherit;background-color:var(--panel-2);color:var(--ink);margin-bottom:12px;min-height:44px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease} textarea{min-height:96px;resize:vertical;line-height:1.5} input::placeholder,textarea::placeholder{color:var(--muted)} input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.16)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(86,217,126,.18);background-color:var(--panel)} select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239db3a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px} label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:6px;letter-spacing:.01em} .row{display:flex;gap:10px}.row>*{flex:1} /* =================== identity =================== */ .brand{display:flex;align-items:center;gap:10px} .logo{width:36px;height:36px;border-radius:10px;overflow:hidden;flex:none;box-shadow:0 8px 22px rgba(0,0,0,.4)} .logo svg{display:block;width:100%;height:100%} .wordmark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)} .wordmark span{color:var(--mint)} /* =================== app shell =================== */ .shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh} .side{background:linear-gradient(180deg,#08160f 0,#050f0a 100%);padding:18px 13px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;border-right:1px solid var(--line);overflow-y:auto} .side .brand{padding:8px 8px 20px} .side .brand .wordmark{color:#fff}.side .brand .wordmark span{color:var(--mint)} .nav{border:none;background:transparent;color:var(--ink-2);text-align:left;padding:10px 12px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:12px;font-family:inherit;min-height:40px;transition:background .15s ease,color .15s ease} .nav:hover{background:rgba(255,255,255,.05);color:var(--ink)} .nav.on{background:var(--grad);color:#06130d;font-weight:750;box-shadow:0 8px 20px rgba(34,192,106,.25)} .nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none} .side .spacer{flex:1;min-height:14px} .side #logout{color:var(--ink-2)}.side #logout:hover{background:var(--st-bad-bg);color:var(--st-bad-ink)} .main{padding:30px 40px 56px;max-width:1220px;width:100%} /* top bar */ .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px;flex-wrap:wrap;position:relative;z-index:60} .top h1{font-size:31px;line-height:1.08} .top .sub{color:var(--ink-2);font-size:14px;margin-top:6px;max-width:680px;line-height:1.5} .top>div:last-child{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* account dropdown (top-bar user menu) */ .acct{position:relative} .acct-btn{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:6px 12px 6px 7px;font:inherit;font-size:13px;font-weight:650;cursor:pointer;min-height:42px;transition:border-color .15s ease,background .15s ease} /* Notifications bell (topbar) */ .notif{position:relative;display:inline-block;margin-right:8px;vertical-align:middle} .notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;min-height:42px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);border-radius:12px;cursor:pointer;transition:border-color .15s ease,background .15s ease} .notif-btn:hover{border-color:var(--line-2)} .notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--st-bad-ink);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center} .notif-menu{position:absolute;right:0;top:calc(100% + 9px);width:min(340px,calc(100vw - 24px));max-height:min(62vh,480px);overflow-y:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.55);padding:7px;z-index:200;display:none;animation:popin .14s ease} .notif-menu.open{display:block} .notif-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)} .notif-item{padding:9px 10px;border-radius:10px;cursor:pointer;font-size:12.5px} .notif-item:hover{background:rgba(255,255,255,.05)} .notif-item.unread{background:var(--accent-indigo-bg);border-left:3px solid var(--accent-indigo)} .notif-item.unread:hover{filter:brightness(1.06)} .notif-title{font-weight:650} .notif-body{margin-top:2px;font-size:12px} .notif-when{margin-top:3px;font-size:11px} .notif-empty{padding:16px 10px;text-align:center;font-size:12.5px} .acct-btn:hover{border-color:var(--mint);background:rgba(86,217,126,.08)} .acct-av{width:30px;height:30px;border-radius:9px;background:var(--grad);color:#06130d;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;font-family:'Bricolage Grotesque',sans-serif} .acct-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acct-car{width:14px;height:14px;stroke:var(--ink-2);fill:none;stroke-width:2.2;transition:transform .18s ease} .acct.open .acct-car{transform:rotate(180deg)} .acct-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:248px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.55);padding:7px;z-index:200;display:none;animation:popin .14s ease} .acct.open .acct-menu{display:block} @keyframes popin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .acct-head{padding:11px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .acct-head b{display:block;font-size:14px;color:var(--ink);font-weight:750} .acct-head small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px;overflow-wrap:anywhere} .acct-ref{display:inline-flex;align-items:center;gap:6px;margin-top:9px;background:rgba(86,217,126,.10);border:1px solid var(--line-2);color:var(--mint);font-size:11.5px;font-weight:750;padding:4px 9px;border-radius:999px;font-variant-numeric:tabular-nums} .acct-item{display:flex;align-items:center;gap:11px;width:100%;border:none;background:transparent;color:var(--ink);text-align:left;font:inherit;font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .14s ease,color .14s ease} .acct-item:hover{background:rgba(255,255,255,.05)} .acct-item svg{width:16px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:2;flex:none} .acct-item:hover svg{stroke:var(--mint)} .acct-sep{height:1px;background:var(--line);margin:6px 4px} .acct-item.danger{color:var(--st-bad-ink)}.acct-item.danger:hover{background:var(--st-bad-bg)}.acct-item.danger svg{stroke:var(--st-bad-ink)} /* =================== surfaces =================== */ .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)} .cards{display:grid;gap:14px} .hero{background:linear-gradient(140deg,#0e2a1f 0,#0a1c14 60%,#0c2218 100%);color:var(--ink);border-radius:18px;padding:26px;border:1px solid var(--line-2);box-shadow:var(--shadow);position:relative;overflow:hidden} .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 88% -30%,rgba(86,217,126,.22),transparent 70%);pointer-events:none} .hero .lbl{color:var(--ink-2);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em} .hero .big{font-size:44px;font-weight:800;margin-top:7px;font-family:'Bricolage Grotesque';letter-spacing:-.025em;line-height:1.02} .wallets{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:11px;margin-top:18px;position:relative} .wallet{background:rgba(255,255,255,.035);color:var(--ink);border:1px solid var(--line);border-radius:13px;padding:15px;transition:border-color .15s ease,transform .15s ease} .wallet:hover{border-color:var(--line-2);transform:translateY(-2px)} .wallet .c{color:var(--ink-2);font-size:12px;font-weight:750;letter-spacing:.02em} .wallet .b{font-size:23px;font-weight:800;margin-top:6px;font-family:'Bricolage Grotesque';letter-spacing:-.02em} .wallet .r{font-size:11.5px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere} .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:13px} .tile{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:18px;cursor:pointer;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;display:flex;flex-direction:column;gap:10px;min-height:134px} .tile:hover{border-color:var(--mint);transform:translateY(-3px);box-shadow:var(--shadow)} .tile.static{cursor:default}.tile.static:hover{transform:none;border-color:var(--line);box-shadow:none} .tile .ic{width:42px;height:42px;border-radius:11px;background:rgba(86,217,126,.12);display:grid;place-items:center;color:var(--mint);border:1px solid var(--line-2)} .tile .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2} .tile .t{font-weight:750;font-size:15px;font-family:'Bricolage Grotesque'} .tile .d{font-size:12.5px;line-height:1.5;color:var(--ink-2)} .sec{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);margin:26px 0 11px;display:flex;align-items:center;gap:10px} .sec:first-child{margin-top:4px} .sec::after{content:"";flex:1;height:1px;background:var(--line)} /* =================== lists =================== */ .row-item{display:flex;align-items:center;gap:14px;padding:14px 7px;border-bottom:1px solid var(--line);min-height:64px} .row-item:last-child{border-bottom:none} .row-item.clickable{cursor:pointer;border-radius:10px;transition:background .12s ease} .row-item.clickable:hover{background:var(--panel-2)} .tic{width:40px;height:40px;border-radius:11px;background:rgba(86,217,126,.10);color:var(--mint);display:grid;place-items:center;flex:none;border:1px solid var(--line-2)} .tic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} .row-item .nm{font-weight:750;font-size:14.5px;color:var(--ink)} .row-item .mt{font-size:12.4px;color:var(--ink-2);line-height:1.5;margin-top:1px} .row-item .amt{margin-left:auto;text-align:right;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink);display:flex;flex-direction:column;align-items:flex-end;gap:4px} .row-item .amt .btn{margin-left:6px} /* base pill — semantic colour applied via .st-* (or legacy .b-* aliases) */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;line-height:1;padding:4px 9px;border-radius:999px;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap; background:var(--st-mut-bg);color:var(--st-mut-ink);border:1px solid var(--st-mut-bd);transition:background .14s ease,border-color .14s ease} /* a small leading dot reinforces the colour for accessibility (not colour-alone); only on semantic tokens, never on plain count/code pills */ .st-ok::before,.st-bad::before,.st-warn::before,.st-info::before,.st-mut::before, .b-ok::before,.b-pend::before,.b-bad::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.9} /* semantic tokens */ .st-ok{background:var(--st-ok-bg);color:var(--st-ok-ink);border-color:var(--st-ok-bd)} .st-bad{background:var(--st-bad-bg);color:var(--st-bad-ink);border-color:var(--st-bad-bd)} .st-warn{background:var(--st-warn-bg);color:var(--st-warn-ink);border-color:var(--st-warn-bd)} .st-info{background:var(--st-info-bg);color:var(--st-info-ink);border-color:var(--st-info-bd)} .st-mut{background:var(--st-mut-bg);color:var(--st-mut-ink);border-color:var(--st-mut-bd)} /* legacy aliases — keep older markup resolving to the same semantic tokens */ .b-ok{background:var(--st-ok-bg);color:var(--st-ok-ink);border-color:var(--st-ok-bd)} .b-pend{background:var(--st-warn-bg);color:var(--st-warn-ink);border-color:var(--st-warn-bd)} .b-bad{background:var(--st-bad-bg);color:var(--st-bad-ink);border-color:var(--st-bad-bd)} .in{color:var(--st-ok-ink)} /* full-width status banner (e.g. checkout success) — semantic colour, no pill/uppercase */ .banner{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;padding:13px 16px;border-radius:var(--radius-sm);font-weight:750;font-size:14px;letter-spacing:.005em} .banner::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .banner.st-ok{background:var(--st-ok-bg);color:var(--st-ok-ink);border:1px solid var(--st-ok-bd)} .banner.st-bad{background:var(--st-bad-bg);color:var(--st-bad-ink);border:1px solid var(--st-bad-bd)} .banner.st-warn{background:var(--st-warn-bg);color:var(--st-warn-ink);border:1px solid var(--st-warn-bd)} .kv{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px} .kv:first-child{padding-top:0}.kv:last-child{border:none;padding-bottom:0} .kv .k{color:var(--ink-2);flex:none}.kv .v{font-weight:750;text-align:right;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums} /* Copyable receiving-details list (account details modal) — label on top, value + Copy in a row below, so long IBANs never squeeze into a per-character column on narrow screens. */ .kv-list{display:flex;flex-direction:column;gap:8px;margin-top:8px} .kv-list .kv{flex-direction:column;align-items:stretch;gap:5px;border-bottom:none;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px} .kv-list .kv .k{min-width:0;font-size:11px;text-transform:uppercase;letter-spacing:.04em} .kv-list .kv .v-row{display:flex;align-items:center;gap:8px} .kv-list .kv .v-row .v{flex:1;text-align:left;overflow-wrap:anywhere;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums} .kv-list .kv .v-row .btn{flex:none} .rail-block{margin-top:14px} .rail-block:first-child{margin-top:8px} .rail-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--brand,#2fae6a);margin-bottom:6px} .note{background:rgba(86,217,126,.07);border:1px solid var(--line-2);color:var(--ink-2);padding:13px 15px;border-radius:13px;font-size:13px;margin-bottom:15px;line-height:1.55} .note b{color:var(--ink)} .linklike{background:none;border:none;color:var(--mint);font:inherit;font-size:13px;cursor:pointer;padding:0;font-weight:600;transition:color .15s ease} .linklike:hover{color:var(--mint-hi)} /* =================== business onboarding =================== */ .onb-card{margin-bottom:14px;padding:18px 20px} .onb-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .onb-title{font-weight:750;font-size:15px;color:var(--ink);flex:1 1 auto;min-width:0;line-height:1.35} .onb-head .badge{flex:none} .onb-desc{font-size:12.8px;color:var(--ink-2);line-height:1.55;margin-top:7px} .onb-control{margin-top:13px;display:flex;flex-direction:column;gap:9px;align-items:flex-start} .onb-upload{cursor:pointer;display:inline-flex;align-items:center} .onb-upload svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;margin-right:6px} .onb-file{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;background:var(--panel-2,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--radius-sm,11px)} .onb-file-meta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto} .onb-file-name{font-weight:700;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .onb-file-sub{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2)} .onb-file-actions{display:flex;align-items:center;gap:7px;flex:none;flex-wrap:wrap;justify-content:flex-end} .onb-ubo-row{padding-top:13px;border-top:1px solid var(--line)} .onb-ubo-row:first-of-type{border-top:none;padding-top:0} .onb-ubo-label{margin-top:0;font-weight:700;color:var(--ink)} @media (max-width:560px){ .onb-file{flex-direction:column;align-items:stretch} .onb-file-actions{justify-content:flex-start} } /* =================== side-nav section groups =================== */ .nav-group{display:flex;flex-direction:column;gap:3px;margin-top:14px} .nav-group:first-of-type{margin-top:2px} .nav-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:4px 12px 6px} /* =================== focused service pages (Banking · FX · Manual FX) =================== */ /* Big hero variant used by the three full-page services. */ .svc-hero{padding:30px 32px} .svc-hero .big{font-size:50px} .hero .r{font-size:13px;color:var(--ink-2);margin-top:12px;line-height:1.55;position:relative} .hero .r b{color:var(--mint);font-variant-numeric:tabular-nums} .hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px;position:relative} .ref-hero .big{font-size:46px;letter-spacing:.01em} .card-foot{padding:13px 4px 2px;border-top:1px solid var(--line);margin-top:6px} /* Two-column service layout: a generous form + a contextual side panel. */ .svc-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:18px;align-items:start;margin-top:4px} .svc-form{padding:26px 28px} .svc-form-head{margin-bottom:20px} .svc-step{display:block;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--mint);margin-bottom:7px} .svc-form-head h2{font-size:24px;line-height:1.12;color:var(--ink)} .svc-aside{padding:22px 24px;background:linear-gradient(150deg,#0e2a1f,#0a1c14);border-color:var(--line-2);position:sticky;top:22px} .svc-aside-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px} .svc-aside-head .nm{font-weight:750;font-size:15px;color:var(--ink)} .svc-aside-head .mt{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:3px} .svc-aside-foot{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} /* beneficiary mini-list inside the Manual FX side panel */ .ben-list{display:flex;flex-direction:column;margin:4px 0 14px} .ben-item{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)} .ben-item:last-child{border-bottom:none} .ben-meta{min-width:0;flex:1} .ben-meta .nm{font-weight:700;font-size:13.5px;color:var(--ink)} .ben-meta .mt{font-size:11.8px;color:var(--ink-2);line-height:1.45;margin-top:2px;overflow-wrap:anywhere} /* =================== FX conversion centrepiece =================== */ .fx-stage{display:flex;justify-content:center;margin-top:6px} .fx-panel{width:100%;max-width:560px;background:linear-gradient(155deg,#0e2a1f 0,#0a1c14 62%,#0c2218 100%);border:1px solid var(--line-2);border-radius:22px;padding:26px 26px 24px;box-shadow:var(--shadow);position:relative} .fx-leg{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px} .fx-leg-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:8px} .fx-bal{color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums} .fx-amount-row{display:flex;align-items:center;gap:12px} .fx-amount{flex:1;border:none;background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--ink);padding:0;margin:0;min-height:auto;font-variant-numeric:tabular-nums} .fx-amount:focus,.fx-amount:hover{border:none;box-shadow:none;background:transparent} .fx-amount::placeholder{color:var(--muted)} .fx-cur{width:auto;flex:none;min-width:96px;background-color:var(--panel);border:1px solid var(--line-2);color:var(--ink);font-weight:800;font-size:15px;border-radius:11px;padding:11px 34px 11px 14px;margin:0;min-height:46px} .fx-swap{display:block;margin:-13px auto;position:relative;z-index:2;width:42px;height:42px;border-radius:12px;background:var(--grad);color:#06130d;border:3px solid var(--bg);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(34,192,106,.3);transition:transform .16s ease} .fx-swap:hover{transform:rotate(180deg) scale(1.05)} .fx-swap svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4} .fx-rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:16px 0;font-size:13px;color:var(--ink-2)} .fx-rate b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums} .fx-rate .fx-fee{margin-left:auto;color:var(--mint);font-weight:700} /* ---- swap widget: quick-amount chips, live-rate states, big swap button ---- */ .fx-chips{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap} .fx-chip{flex:1;min-width:60px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink-2);font:inherit;font-weight:750;font-size:12.5px;padding:8px 6px;border-radius:10px;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease} .fx-chip:hover{border-color:var(--mint);color:var(--ink);background:rgba(86,217,126,.08)} .fx-chip.on{border-color:var(--mint);background:rgba(86,217,126,.16);color:var(--mint)} .swap-card{max-width:560px;width:100%;margin:6px auto 0} .fx-leg-to{background:linear-gradient(150deg,rgba(86,217,126,.07),rgba(86,217,126,.02))} .fx-rate{transition:border-color .18s ease,background .18s ease} .fx-rate.is-loading{opacity:.6} .fx-rate.is-live{border-color:var(--line-2);background:rgba(86,217,126,.06)} .fx-rate.is-bad{border-color:var(--st-bad-bd);background:var(--st-bad-bg);color:var(--st-bad-ink)} .fx-rate .fx-rate-line{display:inline-flex;align-items:center;gap:7px} .fx-rate .fx-get-line{width:100%;display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;padding-top:11px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-2)} .fx-rate .fx-get-line b{font-family:'Bricolage Grotesque';font-size:19px;color:var(--mint);letter-spacing:-.01em} .swap-go{margin-top:4px;font-family:'Bricolage Grotesque';letter-spacing:-.01em;font-size:16px} /* =================== Manual USD: pick-and-tap settlement =================== */ .ref-badge{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(86,217,126,.12),rgba(34,192,106,.05));border:1px solid var(--line-2);border-radius:16px;padding:15px 18px;margin-bottom:16px} .ref-badge-ic{width:42px;height:42px;flex:none;border-radius:11px;background:rgba(86,217,126,.16);display:grid;place-items:center;color:var(--mint);border:1px solid var(--line-2)} .ref-badge-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2} .ref-badge-body{min-width:0} .ref-badge-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)} .ref-badge-val{font-family:'Bricolage Grotesque';font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:2px} .ref-badge-note{margin-left:auto;font-size:12.5px;color:var(--ink-2);max-width:300px;line-height:1.45;text-align:right} .mu-card{display:flex;flex-direction:column;gap:20px;max-width:620px} .mu-locked{opacity:.55;pointer-events:none;filter:saturate(.6)} .mu-block{display:flex;flex-direction:column} .mu-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:10px} .mu-label-opt{text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted);margin-left:4px} .mu-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mu-toggle-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:15px 16px;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s ease,background .15s ease,transform .15s ease} .mu-toggle-btn:hover{border-color:var(--mint);transform:translateY(-1px)} .mu-toggle-btn.on{border-color:var(--mint);background:rgba(86,217,126,.12);box-shadow:0 0 0 3px rgba(86,217,126,.12)} .mu-toggle-ic{width:34px;height:34px;border-radius:10px;background:rgba(86,217,126,.12);display:grid;place-items:center;color:var(--mint);border:1px solid var(--line-2)} .mu-toggle-btn.on .mu-toggle-ic{background:var(--grad);color:#06130d;border-color:transparent} .mu-toggle-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2} .mu-toggle-t{font-family:'Bricolage Grotesque';font-weight:750;font-size:16px;color:var(--ink)} .mu-toggle-s{font-size:12px;color:var(--ink-2);margin-top:-4px} .ben-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px} .ben-pick{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:13px;padding:13px 14px;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s ease,background .15s ease,transform .15s ease;position:relative} .ben-pick:hover{border-color:var(--mint);transform:translateY(-1px)} .ben-pick.on{border-color:var(--mint);background:rgba(86,217,126,.1);box-shadow:0 0 0 3px rgba(86,217,126,.12)} .ben-pick-tic{width:36px;height:36px;flex:none;border-radius:10px;background:rgba(86,217,126,.1);display:grid;place-items:center;color:var(--mint);border:1px solid var(--line-2)} .ben-pick-tic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2} .ben-pick-tic.add{background:rgba(255,255,255,.04)} .ben-pick-meta{min-width:0;flex:1} .ben-pick-meta .nm{font-weight:750;font-size:13.5px;color:var(--ink)} .ben-pick-meta .mt{font-size:11.6px;color:var(--ink-2);line-height:1.4;margin-top:2px;overflow-wrap:anywhere} .ben-pick-check{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:transparent;transition:background .15s ease,color .15s ease,border-color .15s ease} .ben-pick-check svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6} .ben-pick.on .ben-pick-check{background:var(--grad);color:#06130d;border-color:transparent} .ben-pick-add{border-style:dashed} .ben-pick-add .ben-pick-meta .nm{color:var(--ink-2)} .mu-amount-wrap{display:flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:6px 18px;transition:border-color .15s ease,box-shadow .15s ease} .mu-amount-wrap:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px rgba(86,217,126,.18)} .mu-amount-sym{font-family:'Bricolage Grotesque';font-size:34px;font-weight:800;color:var(--muted)} .mu-amount{flex:1;border:none;background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--ink);padding:0;margin:0;min-height:auto;font-variant-numeric:tabular-nums} .mu-amount:focus,.mu-amount:hover{border:none;box-shadow:none;background:transparent} .mu-amount::placeholder{color:var(--muted)} /* =================== docs =================== */ .docs-page{min-height:100vh} .docs-shell{max-width:1180px;margin:0 auto;padding:40px 30px} .docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:15px} .doc-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)} .doc-title{font-weight:800;margin-bottom:11px;font-size:15.5px;font-family:'Bricolage Grotesque';color:var(--ink)} .endpoint{display:grid;grid-template-columns:58px 1fr;gap:8px 11px;padding:12px 0;border-top:1px solid var(--line)} .endpoint:first-of-type{border-top:none} .endpoint code{font-size:12.5px;word-break:break-word;color:var(--ink)} .endpoint p{grid-column:2;font-size:12.4px;color:var(--ink-2);line-height:1.5} .method{display:inline-flex;align-items:center;justify-content:center;height:22px;border-radius:7px;font-size:10.5px;font-weight:800;letter-spacing:.02em} .method.get{background:var(--st-info-bg);color:var(--st-info-ink)} .method.post{background:var(--st-ok-bg);color:var(--st-ok-ink)} .method.delete{background:var(--st-bad-bg);color:var(--st-bad-ink)} /* =================== modal / toast =================== */ .overlay{position:fixed;inset:0;background:rgba(3,9,7,.9);display:grid;place-items:center;padding:18px;z-index:1000;animation:fade .16s ease} @keyframes fade{from{opacity:0}to{opacity:1}} .sheet{position:relative;isolation:isolate;background:var(--modal-surface);border:1px solid var(--line-2);border-radius:18px;padding:24px;width:100%;max-width:470px;box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:92vh;overflow:auto;animation:rise .2s cubic-bezier(.2,.7,.3,1)} .sheet.wide{max-width:780px} /* Opt-in operator workspace: ordinary compact modals remain unchanged. */ .workspace-overlay{padding:22px;place-items:center} .sheet.wide.workspace-sheet{display:flex;flex-direction:column;width:min(1180px,96vw);max-width:1180px;height:min(900px,92vh);max-height:92vh;padding:0;overflow:hidden;border-radius:16px} .workspace-sheet.is-maximized{position:fixed;inset:0;width:100vw!important;height:100vh;max-width:none!important;max-height:none;border:0;border-radius:0} .workspace-window-actions{position:absolute;z-index:8;top:15px;right:56px;display:flex;gap:5px} .workspace-window-actions button{width:34px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--ink-2);cursor:pointer;font-size:15px} .workspace-window-actions button:hover{border-color:var(--mint);color:var(--ink);background:var(--elevated)} .workspace-dock{display:none;pointer-events:auto;position:fixed;right:22px;bottom:20px;align-items:center;gap:9px;max-width:min(420px,calc(100vw - 28px));padding:12px 15px;border:1px solid rgba(86,217,126,.45);border-radius:12px;background:var(--elevated);color:var(--ink);box-shadow:0 20px 48px rgba(0,0,0,.48);cursor:pointer;font:inherit;text-align:left} .workspace-dock span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-dock b{margin-left:auto;color:var(--mint);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.workspace-dock-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(86,217,126,.12)} .workspace-overlay.is-minimized{pointer-events:none;background:transparent}.workspace-overlay.is-minimized .workspace-sheet{display:none}.workspace-overlay.is-minimized .workspace-dock{display:flex} /* Document review rows (wide review modals) — name wraps, buttons never overflow */ .doc-row{gap:12px} .doc-info{min-width:0;flex:1;border:0;background:transparent;color:inherit;text-align:left;font:inherit;padding:5px 7px;margin:-5px -7px;border-radius:8px;cursor:pointer} .doc-info:hover,.doc-info:focus-visible{background:rgba(86,217,126,.08);outline:1px solid rgba(86,217,126,.38)} .doc-info .nm{overflow-wrap:anywhere} .doc-acts{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end} /* Full-screen media viewer (images / PDFs) */ .mv-overlay{position:fixed;inset:4vh 5vw;z-index:1010;background:rgba(3,9,7,.97);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.13);border-radius:15px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.72);animation:fade .15s ease} .mv-overlay.is-maximized{inset:0;border:0;border-radius:0} .mv-overlay.is-minimized{inset:auto 20px 20px auto;width:min(430px,calc(100vw - 28px));height:auto;border-radius:12px;background:transparent;border:0;overflow:visible;box-shadow:none}.mv-overlay.is-minimized .mv-bar,.mv-overlay.is-minimized .mv-stage{display:none} .mv-loading{position:fixed;z-index:1011;left:50%;top:50%;transform:translate(-50%,-50%);padding:13px 18px;border:1px solid rgba(86,217,126,.45);border-radius:12px;background:#10241a;color:#f3f9f5;box-shadow:0 20px 54px rgba(0,0,0,.7);font-size:13px;font-weight:700} .mv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;color:#f3f9f5;border-bottom:1px solid rgba(255,255,255,.1);flex:none} .mv-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mv-actions{display:flex;gap:8px;flex:none} .mv-btn{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f3f9f5;display:grid;place-items:center;cursor:pointer;font-size:18px;text-decoration:none;transition:background .14s ease} .mv-btn:hover{background:rgba(255,255,255,.15)} .mv-review{min-height:38px;padding:0 13px;border-radius:9px;border:1px solid rgba(255,255,255,.18);font:inherit;font-size:12px;font-weight:750;cursor:pointer}.mv-review.accept{background:#1f9d54;color:#fff;border-color:#36bd70}.mv-review.reject{background:rgba(207,77,77,.18);color:#ffc5c5;border-color:rgba(255,135,135,.34)} .mv-stage{flex:1;display:grid;place-items:center;padding:20px;overflow:auto;min-height:0} .mv-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 12px 44px rgba(0,0,0,.55)} .mv-frame{width:100%;height:100%;min-height:70vh;border:none;border-radius:8px;background:#fff} .mv-other{color:#f3f9f5;text-align:center;font-size:14px} .mv-dock{display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid rgba(86,217,126,.45);border-radius:12px;background:#10241a;color:#f3f9f5;box-shadow:0 20px 48px rgba(0,0,0,.6);cursor:pointer;font:inherit;text-align:left}.mv-dock span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-dock b{color:#56d97e;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.mv-overlay.is-minimized .mv-dock{display:flex} @keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .sheet h3{font-size:22px;margin-bottom:6px;color:var(--ink)} .sheet .sub{color:var(--ink-2);font-size:13.5px;margin-bottom:18px;line-height:1.5} .close{float:right;border:none;background:rgba(255,255,255,.06);width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:17px;color:var(--ink-2);transition:background .14s ease,color .14s ease;display:grid;place-items:center} .close:hover{background:var(--st-bad-bg);color:var(--st-bad-ink)} .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--elevated);color:var(--ink);padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;z-index:1100;box-shadow:0 18px 44px rgba(0,0,0,.5);border:1px solid var(--line-2);animation:rise .22s ease} /* =================== tables =================== */ table{width:100%;border-collapse:collapse;font-size:13.2px;color:var(--ink)} th,td{text-align:left;padding:11px 9px;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--ink-2);font-weight:750;font-size:11px;text-transform:uppercase;letter-spacing:.06em} td b{color:var(--ink)} .crow{display:flex;gap:6px;margin-top:11px} .crow .btn{flex:1;padding:7px 6px;font-size:12px;background:rgba(86,217,126,.10);color:var(--mint);border:1px solid var(--line-2);min-width:0} .crow .btn:hover{background:rgba(86,217,126,.18)}.crow .btn svg{width:13px;height:13px} .addrbox{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:14px;font-family:ui-monospace,monospace;font-size:13px;word-break:break-all;margin-bottom:14px;color:var(--ink-2)} pre{color:var(--ink-2)} /* =================== auth =================== */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background: radial-gradient(900px 600px at 50% -10%,rgba(86,217,126,.14),transparent 60%), linear-gradient(180deg,var(--bg) 0,var(--bg-deep) 100%)} .auth-card{background:var(--panel);border:1px solid var(--line-2);border-radius:20px;box-shadow:0 32px 80px rgba(0,0,0,.55);width:100%;max-width:436px;padding:30px} .auth-card .brand{margin-bottom:22px} .tabs{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:20px} .tabs button{flex:1;border:none;background:transparent;padding:10px;border-radius:9px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink-2);font-size:13.5px;transition:background .15s ease,color .15s ease} .tabs button.on{background:var(--grad);color:#06130d;box-shadow:0 6px 16px rgba(34,192,106,.25)} .tabs button:not(.on):hover{color:var(--ink)} .err{background:var(--st-bad-bg);color:var(--st-bad-ink);padding:11px 13px;border:1px solid var(--st-bad-bd);border-radius:11px;font-size:13px;margin-bottom:13px} .hint{font-size:12.5px;color:var(--muted);margin-top:11px;text-align:center;line-height:1.55} /* =================== advanced admin console =================== */ .admin-console{display:grid;gap:15px} /* Clickable customer identity — opens Customer 360 from any ops surface. */ .cust-chip{cursor:pointer;display:inline-block;border-radius:8px;padding:2px 6px;margin:-2px -6px;transition:background .12s ease} .cust-chip:hover{background:rgba(43,158,104,.10)} .cust-chip b{color:var(--mint-ink,var(--ink));text-decoration:underline;text-decoration-color:rgba(43,158,104,.45);text-underline-offset:3px} .admin-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px} .admin-metric{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);min-width:0} .admin-metric.warn{border-color:rgba(215,173,69,.4);background:rgba(215,173,69,.07)} .admin-metric span{display:block;color:var(--ink-2);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .admin-metric strong{display:block;font-family:'Bricolage Grotesque';font-size:25px;line-height:1.1;margin:8px 0 4px;overflow-wrap:anywhere;color:var(--ink);letter-spacing:-.02em} .admin-metric em{display:block;color:var(--ink-2);font-style:normal;font-size:12px;line-height:1.4} .admin-balance-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden} .admin-balance-strip div{background:var(--panel);padding:13px 15px} .admin-balance-strip span{display:block;font-size:11px;font-weight:800;color:var(--mint);letter-spacing:.05em} .admin-balance-strip strong{font-size:19px;font-family:'Bricolage Grotesque';color:var(--ink)} .admin-tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:6px} .admin-tabs button{border:none;background:transparent;color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:750;padding:9px 14px;border-radius:9px;cursor:pointer;transition:background .14s ease,color .14s ease} .admin-tabs button.on{background:var(--grad);color:#06130d} .admin-tabs button:hover:not(.on){background:rgba(255,255,255,.05);color:var(--ink)} .admin-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:15px;align-items:start} .admin-split.two-even{grid-template-columns:repeat(2,minmax(0,1fr))} .admin-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;min-width:0} .admin-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:13px;flex-wrap:wrap} .admin-panel-head h2,.detail-head h2{font-size:20px;line-height:1.12;color:var(--ink)} .admin-panel-head p,.detail-head p{color:var(--ink-2);font-size:12.5px;line-height:1.5;margin-top:5px} .admin-filterbar{display:grid;grid-template-columns:minmax(220px,1fr) repeat(4,minmax(126px,150px));gap:9px;margin-bottom:11px} .admin-filterbar input,.admin-filterbar select,.admin-controls select{margin-bottom:0} .admin-bulkbar{position:sticky;top:8px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin:0 0 11px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(12px)} .admin-bulkbar>div:first-child{display:flex;align-items:center;gap:8px;min-width:190px;color:var(--ink-2);font-size:12px}.admin-bulkbar>div:first-child b{font-family:'Bricolage Grotesque';font-size:21px;color:var(--mint)}.admin-bulkbar>div:first-child span{max-width:360px;line-height:1.35}.admin-bulk-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap} .admin-table .check-col{width:42px;min-width:42px;text-align:center}.admin-table .check-col input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--mint)} .admin-table-wrap{overflow:auto;max-width:100%} .admin-table th{white-space:nowrap} .admin-table td{font-size:12.7px} .admin-table tr[data-user-select]{cursor:pointer} .admin-table tr[data-user-select]:hover td{background:rgba(255,255,255,.035)} .admin-table tr.selected td{background:rgba(86,217,126,.10)} .admin-table td b{display:block;font-size:13px} .admin-table td small{display:block;color:var(--ink-2);font-size:11.5px;margin-top:3px} .admin-table .actions{white-space:nowrap;min-width:150px} .detail-panel{position:sticky;top:22px} .detail-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:13px} .detail-head span{display:block;text-transform:uppercase;color:var(--mint);font-size:11px;font-weight:800;letter-spacing:.08em} .detail-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} .action-preview-head{display:flex;align-items:flex-start;gap:12px;margin:0 28px 14px 0}.action-preview-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:var(--st-ok-bg);border:1px solid var(--st-ok-bd);color:var(--st-ok-ink);font-size:18px;font-weight:900}.action-preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.action-preview-stats div{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.action-preview-stats b,.action-preview-stats span{display:block}.action-preview-stats b{font-size:20px;color:var(--ink)}.action-preview-stats span{font-size:10.5px;color:var(--ink-2);text-transform:uppercase;font-weight:750}.action-preview-stats .ok b{color:var(--st-ok-ink)}.action-preview-stats .warn b{color:var(--st-warn-ink)}.action-preview-list{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:11px;margin-bottom:12px}.action-preview-list>div{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(180px,1.4fr) auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel-2)}.action-preview-list>div:last-child{border-bottom:0}.action-preview-list b,.action-preview-list span{font-size:12px}.action-preview-list span{color:var(--ink-2)}.action-preview-list em{font-style:normal} .detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px} .detail-grid .admin-metric{box-shadow:none;background:var(--panel-2)} .admin-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px} .lim-input-row{display:flex;align-items:center;gap:6px} .lim-input-row input{flex:1;min-width:0} .lim-cur{color:var(--muted);font-weight:800;font-size:13px} .mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px} .mini-card{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:13px;min-width:0} .mini-card span{display:block;color:var(--mint);font-size:11px;font-weight:800} .mini-card strong{display:block;font-family:'Bricolage Grotesque';font-size:20px;margin:5px 0;color:var(--ink)} .mini-card small{display:block;color:var(--ink-2);font-size:11.5px;word-break:break-word;line-height:1.4} .compact-list{border:1px solid var(--line);border-radius:12px;overflow:hidden} .compact-list div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);background:var(--panel-2)} .compact-list div:last-child{border-bottom:none} .compact-list b{font-size:12.5px;color:var(--ink)} .compact-list span{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere} .compact-list em{grid-column:2;color:var(--muted);font-size:11.5px;font-style:normal;line-height:1.45} .grid3 .card,.card .card{background:var(--panel-2)} /* =================== public marketing front (dev fallback) =================== */ .land{min-height:100vh;overflow-x:hidden;background:linear-gradient(180deg,var(--bg) 0,var(--bg-deep) 100%)} .land-nav{display:flex;justify-content:space-between;align-items:center;padding:18px 30px;max-width:1240px;margin:0 auto} .land-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .land-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(86,217,126,.10);color:var(--mint);font-size:12px;font-weight:800;padding:7px 13px;border:1px solid var(--line-2);border-radius:999px;margin-bottom:18px;max-width:100%;white-space:normal} .land-sub{font-size:18px;line-height:1.62;color:var(--ink-2);margin:18px 0 26px;max-width:690px;overflow-wrap:break-word} .land-actions{display:flex;gap:12px;flex-wrap:wrap} .trust-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .trust-strip span{font-size:12px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:7px 12px} .section-head{margin-bottom:18px} .section-head span{display:block;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--mint)} .section-head h2,.section-head h1{font-size:34px;max-width:760px;margin-top:7px;color:var(--ink);letter-spacing:-.025em} .section-head p{color:var(--ink-2);line-height:1.6;margin-top:11px;max-width:850px} .land-foot{text-align:center;color:var(--muted);font-size:12px;padding:36px 24px;border-top:1px solid var(--line);margin-top:42px} .land-foot code{color:var(--ink-2)} .mkt{background:transparent;color:var(--ink)} .mkt-nav{position:sticky;top:0;z-index:30;background:rgba(7,19,15,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} .mkt-nav-inner{max-width:1240px;margin:0 auto;padding:13px 28px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px} .mkt-menu-toggle{display:none;border:1px solid var(--line);background:var(--panel);border-radius:10px;width:42px;height:42px;color:var(--ink)} .mkt-menu-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} .mkt-links{display:flex;gap:4px;align-items:center} .mkt-nav-item{border:none;background:transparent;border-radius:9px;padding:10px 13px;font:inherit;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:background .14s ease,color .14s ease} .mkt-nav-item:hover,.mkt-nav-item:focus{background:rgba(86,217,126,.10);color:var(--mint);outline:none} .mkt-actions{display:flex;gap:12px;align-items:center} .mkt-mega{max-width:1240px;margin:0 auto;display:none;padding:0 28px 12px}.mkt-mega.open{display:block} .mkt-mega-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink);border-radius:14px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)} .mkt-mega-card .linklike{color:var(--ink-2);text-align:left;padding:10px;border-radius:9px} .mkt-mega-card .linklike:hover{background:rgba(255,255,255,.05);color:var(--ink)} .mkt-hero{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:38px;align-items:center;padding:54px 28px 34px} .mkt-hero-copy h1{font-size:60px;line-height:1.0;max-width:760px;color:var(--ink);letter-spacing:-.03em} .quote-card{background:linear-gradient(150deg,#0e2a1f,#0a1c14);color:var(--ink);border:1px solid var(--line-2);border-radius:20px;padding:20px;box-shadow:0 32px 90px rgba(0,0,0,.5)} .quote-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:rgba(255,255,255,.05);border-radius:11px;padding:5px;margin-bottom:16px} .quote-tabs button,.coverage-tabs button{border:none;border-radius:9px;background:transparent;color:var(--ink-2);font:inherit;font-size:12px;font-weight:750;padding:9px;cursor:pointer;transition:background .14s ease,color .14s ease} .quote-tabs button.on{background:var(--grad);color:#06130d} .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .quote-card label{color:var(--ink-2)} .quote-card input,.quote-card select{background-color:var(--panel-2);color:var(--ink);border-color:var(--line);margin-top:5px} .quote-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:13px 0;background:var(--line);border-radius:11px;overflow:hidden} .quote-breakdown div{background:var(--panel-2);padding:13px} .quote-breakdown span{display:block;font-size:11px;color:var(--ink-2);font-weight:750;text-transform:uppercase} .quote-breakdown strong{display:block;font-size:13px;margin-top:5px;color:var(--ink)} .quote-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} .quote-note{color:var(--muted);font-size:12px;line-height:1.5;margin-top:13px} .mkt-strip{max-width:1240px;margin:0 auto;padding:10px 28px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:13px} .mkt-strip article,.mkt-product-card,.price-table,.developer-rail article,.phone-mock{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow-sm)} .mkt-strip article{padding:17px}.mkt-strip b{display:block;font-size:15px;color:var(--ink)} .mkt-strip span{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.5;margin-top:7px} .mkt-section{max-width:1240px;margin:0 auto;padding:58px 28px} .price-table{overflow:auto;padding:4px}.price-table table{min-width:720px} .price-table th{background:rgba(86,217,126,.08);color:var(--mint)} .price-table td:first-child{font-weight:750;color:var(--ink)} .mkt-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px} .mkt-product-card{padding:19px;min-height:190px;display:flex;flex-direction:column;gap:11px} .mkt-product-card .ic{width:44px;height:44px;border-radius:11px;background:rgba(86,217,126,.12);color:var(--mint);display:grid;place-items:center;border:1px solid var(--line-2)} .mkt-product-card .ic svg,.business-band svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2} .mkt-product-card h3{font-size:20px;color:var(--ink)} .mkt-product-card p{color:var(--ink-2);font-size:13.5px;line-height:1.55;flex:1} .compliance-band{display:grid;grid-template-columns:.8fr 1fr;gap:24px;background:linear-gradient(140deg,#0e2a1f,#081610);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);max-width:none;padding-left:calc((100vw - 1240px)/2 + 28px);padding-right:calc((100vw - 1240px)/2 + 28px)} .compliance-band p{color:var(--ink-2);line-height:1.6} .compliance-band span{color:var(--mint);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .compliance-band ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;list-style:none} .compliance-band li{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;padding:13px} .compliance-band li svg{width:17px;height:17px;stroke:var(--mint);fill:none;stroke-width:2;flex:none} .compliance-band li span{color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600} .business-band{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none;padding-left:calc((100vw - 1240px)/2 + 28px);padding-right:calc((100vw - 1240px)/2 + 28px)} .mkt-use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:18px 0} .mkt-use-grid div{display:flex;gap:11px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px;color:var(--ink)} .mkt-use-grid div svg{stroke:var(--mint);flex:none}.mkt-use-grid b{font-size:14px} .api-band{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none;padding-left:calc((100vw - 1240px)/2 + 28px);padding-right:calc((100vw - 1240px)/2 + 28px)} .developer-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:11px} .developer-rail article{padding:16px} .developer-rail code{display:block;font-size:13px;font-weight:800;color:var(--mint);margin-bottom:9px} .developer-rail p{font-size:12.5px;color:var(--ink-2);line-height:1.5} .webdash{display:grid;grid-template-columns:minmax(0,1fr) 260px auto;gap:20px;align-items:center;background:linear-gradient(140deg,#0e2a1f,#081610);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);max-width:none;padding-left:calc((100vw - 1240px)/2 + 28px);padding-right:calc((100vw - 1240px)/2 + 28px)} .webdash span{color:var(--mint);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .webdash p{color:var(--ink-2)} .phone-mock{background:var(--panel);color:var(--ink);padding:19px;display:grid;gap:8px;border-radius:18px} .phone-mock b{font-size:18px}.phone-mock span{color:var(--mint);letter-spacing:0;font-weight:700} .phone-mock strong{font-size:30px;font-family:'Bricolage Grotesque';color:var(--ink)} .coverage-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px} .coverage-tabs button{background:rgba(255,255,255,.05);color:var(--ink-2)} .coverage-tabs button.on{background:var(--grad);color:#06130d} .coverage-panel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .coverage-panel span{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:13px;font-weight:650;color:var(--ink)} .mkt-footer{background:var(--bg-deep);border-top:1px solid var(--line);color:var(--ink-2);padding:46px 28px} .mkt-footer-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .mkt-footer h3{font-size:16px;margin-bottom:11px;color:var(--ink)} .mkt-footer .linklike{display:block;color:var(--ink-2);text-align:left;margin:9px 0;font-weight:500} .mkt-footer .linklike:hover{color:var(--mint)} .footer-disclosure{max-width:1240px;margin:24px auto 0;color:var(--muted);font-size:12px;line-height:1.6} /* =================== responsive =================== */ @media(max-width:1180px){ .admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .admin-split,.admin-split.two-even{grid-template-columns:1fr} .svc-split{grid-template-columns:1fr}.svc-aside{position:static} .detail-panel{position:static} .mkt-hero{grid-template-columns:1fr}.quote-card{max-width:720px} .mkt-card-grid,.mkt-strip,.mkt-use-grid{grid-template-columns:repeat(2,1fr)} .developer-rail{grid-template-columns:repeat(3,1fr)}.webdash{grid-template-columns:1fr 260px} } @media(max-width:980px){ .land-hero h1,.mkt-hero-copy h1{font-size:42px} .shell{grid-template-columns:minmax(0,1fr)} .main{min-width:0;max-width:100%} .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:4px;padding:14px} .side .brand{width:100%;display:flex;align-items:center;gap:8px;padding:4px 4px} .side .spacer{display:none} .nav-group{flex-direction:row;flex-wrap:wrap;gap:4px;margin-top:0;align-items:center} .nav-label{display:none} /* R7: content-first on mobile — nav collapses behind a toggle, reopens per tap then auto-closes on navigate (shell re-renders). */ .nav-toggle{display:inline-flex;align-items:center;margin-left:auto} .side>.nav-group,.side>#logout{display:none;width:100%} .shell.nav-open .side>.nav-group{display:flex} .shell.nav-open .side>#logout{display:flex} .main{padding:22px} .mkt-menu-toggle{display:grid;place-items:center} .mkt-nav-inner{grid-template-columns:auto 1fr auto} .mkt-links{display:none;grid-column:1/-1;grid-template-columns:1fr;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px} .mkt-links.open{display:grid}.mkt-nav-item{text-align:left}.mkt-mega{padding-left:18px;padding-right:18px} .compliance-band,.business-band,.webdash,.api-band{padding-left:28px;padding-right:28px} .compliance-band{grid-template-columns:1fr}.mkt-footer-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .land,.mkt,.mkt main,.mkt-nav,#app{width:100%;max-width:100vw;overflow-x:clip} .land-nav{padding:14px 18px;align-items:flex-start;flex-wrap:wrap;gap:12px} .land-r{width:100%;display:grid;grid-template-columns:1fr;gap:8px}.land-r .btn{width:100%} .mkt-hero{display:block;width:100%;padding:34px 18px;max-width:100vw;overflow-x:clip} .mkt-hero>*{min-width:0} .mkt-hero-copy{width:calc(100vw - 36px);min-width:0;max-width:calc(100vw - 36px);overflow:hidden} .land-hero h1,.mkt-hero-copy h1{display:block;width:100%;font-size:30px;line-height:1.12;max-width:100%;white-space:normal;overflow-wrap:anywhere} .land-sub{width:100%;font-size:15.5px;max-width:100%;overflow-wrap:anywhere} .land-actions{width:100%;max-width:calc(100vw - 36px)}.land-actions .btn{width:100%} .trust-strip{width:100%;max-width:calc(100vw - 36px)}.trust-strip span{max-width:100%;overflow-wrap:anywhere} .quote-card{width:calc(100vw - 36px);max-width:calc(100vw - 36px);min-width:0;padding:14px;margin-top:28px;overflow:hidden} .quote-grid,.quote-breakdown,.quote-actions,.mkt-card-grid,.mkt-strip,.mkt-use-grid,.developer-rail,.webdash,.mkt-footer-grid{grid-template-columns:1fr} .docs-shell,.mkt-section{padding-left:18px;padding-right:18px;max-width:100vw;overflow:hidden} .row{flex-direction:column} .row-item{align-items:flex-start}.row-item .amt{margin-left:0;text-align:left;align-items:flex-start} .top h1{font-size:25px}.main{padding:18px}.hero .big{font-size:33px} .svc-hero,.svc-form,.fx-panel{padding:18px}.svc-hero .big{font-size:34px}.ref-hero .big{font-size:30px} .fx-amount{font-size:30px}.svc-form-head h2{font-size:20px}.hero-cta .btn{width:100%} .ref-badge-note{margin-left:0;text-align:left;max-width:100%}.ref-badge-val{font-size:21px} .mu-card{padding:18px;gap:16px}.mu-amount{font-size:30px}.mu-amount-sym{font-size:28px} .ben-pick-grid{grid-template-columns:1fr}.fx-chip{min-width:0} .endpoint{grid-template-columns:1fr}.endpoint p{grid-column:1} .admin-metrics,.detail-grid,.admin-controls,.admin-filterbar,.action-preview-stats{grid-template-columns:1fr} .admin-bulkbar{position:static;align-items:stretch;flex-direction:column}.admin-bulk-actions{display:grid;grid-template-columns:1fr}.admin-bulk-actions .btn{width:100%}.action-preview-list>div{grid-template-columns:1fr} .compact-list div{grid-template-columns:1fr}.compact-list em{grid-column:1}.admin-panel{padding:13px} .mkt-nav-inner{padding:12px 16px;gap:10px;grid-template-columns:auto minmax(0,1fr) auto} .mkt-actions{gap:8px}.mkt-actions .btn{display:none}.mkt-actions .linklike{font-size:12.5px;white-space:nowrap} .quote-tabs{grid-template-columns:1fr}.quote-tabs button{white-space:normal;overflow-wrap:anywhere} .compliance-band ul{grid-template-columns:1fr}.mkt-section{padding-top:40px;padding-bottom:40px} .mkt-footer{padding-left:18px;padding-right:18px} .acct-menu{min-width:220px} } /* =================== branded cursor =================== */ html, body { cursor: url("/media/cursor.png") 3 2, auto; } a, button, [role="button"], input[type="submit"], input[type="button"], label, summary, select, .clickable { cursor: pointer; } /* =================== Connect Telegram card (P2) =================== */ .tg-card .note{padding:0 0 4px} .tg-code{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-weight:800;font-size:30px;letter-spacing:.16em;text-align:center;color:var(--mint);background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0;user-select:all} .tg-cmd{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center} .tg-cmd code{color:var(--ink);font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;user-select:all} /* ===================== Onboarding wizard (Monzo-style) ===================== */ .onb-wizard{max-width:760px;margin:0 auto} .onb-steps{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none} .onb-steps::-webkit-scrollbar{display:none} .onb-step{flex:0 0 auto;display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px;color:var(--ink-2);font-size:12.5px;font-weight:650;white-space:nowrap;transition:border-color .15s,color .15s,background .15s} .onb-step:hover{border-color:var(--line-2);color:var(--ink)} .onb-step-dot{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)} .onb-step.on{border-color:var(--mint);color:var(--ink);background:rgba(86,217,126,.10)} .onb-step.on .onb-step-dot{background:var(--mint);border-color:var(--mint);color:#04130b} .onb-step.done{color:var(--ink)} .onb-step.done .onb-step-dot{background:rgba(86,217,126,.16);border-color:var(--line-2);color:var(--mint)} .onb-bar{height:5px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;margin-bottom:18px} .onb-bar-fill{height:100%;background:linear-gradient(90deg,var(--mint-soft),var(--mint-deep));transition:width .35s ease} .onb-panel{animation:onbfade .25s ease} @keyframes onbfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .onb-section-head{margin-bottom:16px} .onb-section-head h2{font-family:'Bricolage Grotesque',inherit;font-size:23px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px} .onb-section-head p{margin:0;font-size:13.5px;line-height:1.5} .onb-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px} .onb-f{display:flex;flex-direction:column} .onb-f:has(textarea),.onb-f-check{grid-column:1 / -1} .onb-req{color:var(--mint)} .onb-help{font-size:11.5px;color:var(--ink-2);margin:-6px 0 12px} .onb-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:14px;cursor:pointer} .onb-check input{width:18px;height:18px;min-height:0;margin:1px 0 0;flex:none;accent-color:var(--mint)} .onb-doclink{margin:2px 0 10px} .onb-doclink a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mint);text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(86,217,126,.06)} .onb-doclink a:hover{border-color:var(--mint);background:rgba(86,217,126,.12)} .onb-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .onb-hero{text-align:center;padding:14px 6px 6px} .onb-hero-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:rgba(86,217,126,.12);border:1px solid var(--line-2)} .onb-hero-ic svg{width:30px;height:30px;stroke:var(--mint);fill:none;stroke-width:2} .onb-hero h2{font-family:'Bricolage Grotesque',inherit;font-size:26px;font-weight:800;margin:0 0 8px} .onb-hero p{max-width:520px;margin:0 auto 18px;color:var(--ink-2);font-size:14px;line-height:1.6} .onb-hero-list{list-style:none;padding:0;margin:0 auto;max-width:380px;text-align:left;display:grid;gap:10px} .onb-hero-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);font-weight:600} .onb-hero-list svg{width:18px;height:18px;flex:none;stroke:var(--mint);fill:none;stroke-width:2} .onb-ubo-card{margin-bottom:14px} .onb-review-sec{border-top:1px solid var(--line);padding:14px 0} .onb-review-sec:first-of-type{border-top:none} .onb-review-sec h3{font-size:15px;font-weight:750;margin:0 0 8px;display:flex;align-items:center;gap:8px} .onb-ok{color:var(--mint);font-size:13px} .onb-warn{color:var(--pend);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .onb-review-dl{display:grid;grid-template-columns:minmax(160px,40%) 1fr;gap:6px 16px;margin:0;font-size:13px} .onb-review-dl dt{color:var(--ink-2)} .onb-review-dl dd{margin:0;color:var(--ink);word-break:break-word} .onb-review-ubo{padding:10px 0;border-top:1px dashed var(--line)} .onb-review-ubo b{display:block;margin-bottom:6px;color:var(--mint)} .onb-adm-q{margin:8px 0} .onb-adm-sec{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:6px 0;background:var(--panel-2)} .onb-adm-sec summary{font-weight:700;font-size:13px;color:var(--ink);cursor:pointer} .onb-adm-sec[open] summary{margin-bottom:8px;color:var(--mint)} .onb-workspace-head{position:sticky;z-index:6;top:0;padding:18px 24px 13px;border-bottom:1px solid var(--line);background:var(--modal-surface)} .onb-workspace-head .close{margin-left:10px}.onb-workspace-head h3{margin:2px 150px 3px 0}.onb-workspace-head .sub{margin:0}.onb-eyebrow{display:block;color:var(--mint);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em} .onb-workspace-body{flex:1;min-height:0;overflow:auto;padding:5px 24px 22px;scrollbar-gutter:stable} .onb-workspace-foot{position:sticky;z-index:6;bottom:0;padding:12px 24px;border-top:1px solid var(--line);background:var(--modal-surface)} .onb-workspace-foot .onb-decision-actions{margin:0}.onb-workspace-foot .note{margin:0} .onb-question-list{display:grid;gap:6px} .onb-question-row{position:relative;display:grid;grid-template-columns:minmax(220px,40%) 1fr auto auto;gap:10px;align-items:start;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)} .onb-question-row[role="button"]{cursor:pointer;transition:border-color .14s ease,background .14s ease,box-shadow .14s ease}.onb-question-row[role="button"]:hover,.onb-question-row[role="button"]:focus-visible{border-color:rgba(86,217,126,.55);box-shadow:0 0 0 2px rgba(86,217,126,.08);outline:none}.onb-question-row.is-editing{cursor:default;border-color:var(--mint);background:var(--panel)} .onb-question-row.missing{border-color:#e8c777;background:#fffaf0}.onb-question-row.na{opacity:.72;background:var(--panel-2)} .onb-question-label{font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.35}.onb-question-answer{font-size:12.5px;color:var(--ink-2);white-space:pre-wrap;word-break:break-word} .onb-answer-state{font-size:10.5px;font-weight:750;white-space:nowrap;border-radius:999px;padding:3px 7px;background:var(--panel-2);color:var(--ink-2)} .onb-row-edit{font-size:10px;font-weight:800;color:var(--mint);text-transform:uppercase;letter-spacing:.06em;padding:3px 2px} .onb-inline-editor{grid-column:1/-1;display:grid;gap:7px;margin:5px -2px -2px;padding:13px;border:1px solid rgba(86,217,126,.34);border-radius:10px;background:var(--panel-2);cursor:default}.onb-inline-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.onb-inline-title b{font-size:13px;color:var(--ink)}.onb-inline-title span{font-size:10px;font-weight:750;color:var(--mint);text-transform:uppercase;letter-spacing:.06em}.onb-inline-editor>label,.onb-inline-evidence label{font-size:11.5px;font-weight:700;color:var(--ink-2)}.onb-inline-editor input,.onb-inline-editor select,.onb-inline-editor textarea{margin-top:4px;background:var(--panel)} .onb-inline-evidence{display:grid;grid-template-columns:1fr 1fr;gap:9px}.onb-inline-actions{display:flex;justify-content:flex-end;gap:7px}.onb-inline-message{min-height:16px;font-size:11.5px;color:var(--ink-2)}.onb-inline-message.error{color:var(--st-bad-ink)} .onb-question-row.answered .onb-answer-state{background:#e8f7ed;color:#18723a}.onb-question-row.missing .onb-answer-state{background:#fff0cc;color:#8a5b00} .req-mark{display:inline-block;margin-left:5px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#8a5b00} .onb-sec-actions{display:flex;justify-content:flex-end;margin-top:9px}.onb-empty-required{padding:10px;border:1px dashed #d5a83c;border-radius:8px;background:#fffaf0;color:#7b5810;font-size:12.5px} .onb-edit-evidence{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)} .onb-edit-evidence label{grid-row:auto}.onb-doc-link{display:inline-block;margin-top:5px;font-size:11px}.onb-ai-draft{margin-top:5px}.onb-ubo-edit-card{border:1px solid var(--line);border-radius:10px;padding:10px;margin:9px 0;background:var(--panel-2)} .onb-decision-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.onb-decision-actions .muted{flex-basis:100%;font-size:11.5px;color:#8a5b00} .dash-coverage{margin:0 0 10px;padding:8px 10px;border:1px solid #bfe4ca;border-radius:8px;background:#effaf2;color:#28613a;font-size:11.5px}.fee-native-strip{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.fee-native-strip span{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);font-size:11.5px} /* Onboarding progress panel (admin review detail) */ .onb-prog{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;background:var(--panel-2)} .onb-prog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px} .onb-prog-pct{margin-left:10px;font-weight:750;font-size:14px;color:var(--ink)} .onb-prog-ready{font-size:12.5px} .onb-prog-bar{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden;margin-bottom:12px} .onb-prog-bar>span{display:block;height:100%;background:var(--mint);border-radius:999px;transition:width .3s ease} .onb-prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px} .onb-prog-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)} .onb-prog-chip.ok{border-color:rgba(31,157,84,.4)} .onb-prog-chip>span{font-size:15px} .onb-prog-chip.ok>span{color:var(--mint)}.onb-prog-chip.wait>span{color:var(--muted)} .onb-prog-k{font-size:12px;font-weight:700;color:var(--ink)} .onb-prog-v{font-size:11.5px;color:var(--ink-2)} .onb-prog-left{margin-top:12px;font-size:12.5px;color:var(--ink-2)} .onb-row-bar{height:5px;border-radius:999px;background:var(--line-2);overflow:hidden;margin-top:7px;max-width:320px} .onb-row-bar>span{display:block;height:100%;background:var(--mint);border-radius:999px} @media(max-width:640px){.workspace-overlay{padding:0}.sheet.wide.workspace-sheet{width:100vw;height:100vh;max-height:none;border-radius:0}.workspace-window-actions{top:12px;right:48px}.onb-workspace-head{padding:15px 16px 12px}.onb-workspace-head h3{margin-right:100px;font-size:18px}.onb-workspace-body{padding:4px 14px 18px}.onb-workspace-foot{padding:10px 14px}.onb-grid{grid-template-columns:1fr}.onb-review-dl{grid-template-columns:1fr;gap:2px 0}.onb-review-dl dd{margin-bottom:8px}.onb-question-row{grid-template-columns:1fr}.onb-answer-state{justify-self:start}.onb-row-edit{position:absolute;right:10px;bottom:9px}.onb-inline-evidence,.onb-edit-evidence{grid-template-columns:1fr}.mv-overlay{inset:0;border:0;border-radius:0}.mv-bar{padding:9px;align-items:flex-start}.mv-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}.mv-review{min-height:34px;padding:0 8px}.mv-btn{width:34px;height:34px}.mv-stage{padding:8px}} /* ===================== Mobile (signed-in app + onboarding) ===================== */ @media(max-width:560px){ /* shell + chrome */ #app{max-width:100vw;overflow-x:clip} .main{padding:16px 14px 40px;min-width:0;max-width:100%} .side{padding:12px 12px 8px} .side .brand{padding:4px 6px 12px} .top{margin-bottom:16px;gap:10px} .top h1{font-size:21px;line-height:1.14} .top .sub{font-size:12.5px} .top>div:last-child{gap:8px} .acct-name{max-width:88px} .acct-btn{min-height:38px;padding:5px 10px 5px 6px} .acct-menu{min-width:min(260px,86vw)} .note{font-size:13px;padding:12px 14px} /* hero + dashboard */ .hero,.svc-hero{padding:18px 16px} .hero .big,.svc-hero .big{font-size:30px} .ref-hero .big{font-size:27px} .wallets{grid-template-columns:1fr;gap:9px} .grid3{grid-template-columns:1fr} .hero-cta{gap:8px}.hero-cta .btn{flex:1 1 100%;justify-content:center} .card{padding:16px} /* generic forms + buttons get comfortable touch targets */ input,select,textarea{font-size:16px} /* 16px stops iOS auto-zoom on focus */ .btn.full,.btn.lg{width:100%;justify-content:center} /* data tables scroll horizontally instead of cutting off */ .card>table,.tbl-wrap{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* onboarding wizard */ .onb-wizard{max-width:100%} .onb-section-head h2{font-size:20px} .onb-section-head p{font-size:13px} .onb-hero{padding:8px 4px 4px} .onb-hero h2{font-size:22px}.onb-hero p{font-size:13.5px} .onb-hero-list{max-width:100%} /* compact stepper: dots only, label shown for the active step */ .onb-step .onb-step-lbl{display:none} .onb-step.on .onb-step-lbl{display:inline} .onb-step{padding:5px;gap:0} .onb-step.on{padding:5px 12px 5px 5px;gap:7px} .onb-nav{gap:8px}.onb-nav .btn{flex:1;justify-content:center;padding:13px 10px} .onb-card{padding:16px} .onb-review-sec h3{font-size:14px} } /* ---- Compliance Officer workspace (Phase B) — distinct indigo accent vs mint admin/customer ---- */ .ws-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-indigo-bg);color:var(--accent-indigo);border:1px solid var(--accent-indigo-bd)} .ws-tag-ops{background:var(--st-ok-bg);color:var(--mint);border-color:var(--st-ok-bd)} .ws-compliance .side{border-right-color:var(--accent-indigo-bd)} .ws-compliance .nav.on{background:var(--accent-indigo-bg);color:var(--accent-indigo)} .ws-compliance .nav-label{color:var(--accent-indigo)} /* Admin/operations workspace — same quiet enterprise treatment as compliance, mint accent. */ .ws-ops .side{border-right-color:var(--st-ok-bd)} .ws-ops .nav.on{background:var(--st-ok-bg);color:var(--mint);font-weight:700;box-shadow:none} .ws-ops .nav-label{color:var(--mint)} .c-hello{margin:4px 0 16px;color:var(--ink-2);font-size:14px} .c-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px} .c-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px} .c-num{font-size:30px;font-weight:800;color:var(--ink);font-family:"Bricolage Grotesque",sans-serif} .c-lab{font-size:12.5px;color:var(--ink-2);margin-top:2px} .c-card.clickable{cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease} .c-card.clickable:hover{transform:translateY(-2px);border-color:var(--mint);box-shadow:0 8px 20px rgba(34,192,106,.12)} .c-card .c-go{font-size:11px;color:var(--mint);margin-top:6px;font-weight:700} .cz-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0} @media(max-width:820px){.cz-cols{grid-template-columns:1fr}} .pq-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:color .12s ease} .pq-row:last-child{border-bottom:none}.pq-row:hover{color:var(--mint)} .pq-n{font-weight:800;font-size:15px} .cd-actionbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:sticky;top:0;z-index:4;background:var(--card);padding-top:4px} /* ---- KPI stat cards + charts (visual dashboards) ---- */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;margin-bottom:18px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 17px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;min-width:0} .kpi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .kpi-lab{font-size:12.5px;color:var(--ink-2);font-weight:600} .kpi-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--st-mut-bg);color:var(--mint);flex:none} .kpi-ic svg{width:18px;height:18px} .kpi-val{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;color:var(--ink);line-height:1.05;letter-spacing:-.01em;word-break:break-word} .kpi-sub{font-size:11.5px;color:var(--muted)} .kpi-delta{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px} .kpi-delta.up{color:var(--ok)}.kpi-delta.down{color:var(--danger)}.kpi-delta.flat{color:var(--muted)} .charts-row{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px} @media(max-width:900px){.charts-row{grid-template-columns:1fr}} .chart-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);min-width:0} .chart-card h3{font-size:15.5px;margin-bottom:3px} .chart-card .chart-sub{font-size:12px;color:var(--ink-2);margin-bottom:12px} .chart-svg{width:100%;height:auto;display:block;overflow:visible} .chart-empty{color:var(--muted);font-size:13px;padding:34px 0;text-align:center} .chart-legend{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:14px} .chart-legend .lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)} .chart-legend .dot{width:10px;height:10px;border-radius:3px;flex:none} .chart-legend b{color:var(--ink);font-weight:700} .donut-wrap{display:flex;align-items:center;justify-content:center;padding:6px 0} .theme-toggle{background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:10px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;flex:none;transition:color .15s ease,border-color .15s ease} .theme-toggle:hover{color:var(--mint);border-color:var(--mint)} .theme-toggle svg{width:18px;height:18px} .gl-banner{border-radius:16px;padding:20px 22px;border:1px solid var(--line);margin-bottom:16px} .gl-banner.off{background:var(--st-warn-bg);border-color:var(--st-warn-bd)} .gl-banner.on{background:var(--st-ok-bg);border-color:var(--st-ok-bd)} .gl-banner.warn{background:var(--st-warn-bg);border-color:var(--st-warn-bd)} .gl-state{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.01em;color:var(--ink)} .gl-desc{font-size:13px;color:var(--ink-2);margin-top:4px} .conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-bottom:14px} .conn-card{display:flex;flex-direction:column;gap:9px;min-width:0;min-height:188px} .conn-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .conn-name{font-size:15.5px;line-height:1.22;color:var(--ink);word-break:break-word;margin:2px 0} .conn-detail{font-size:12px;line-height:1.45} .conn-flags{margin-top:auto;margin-bottom:0} .pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:12px} .pager button[disabled]{opacity:.4;cursor:not-allowed} .c-table{width:100%;border-collapse:collapse;font-size:13px} .c-table th{text-align:left;color:var(--ink-2);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)} .c-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top} .c-table code{font-size:11.5px;color:var(--ink);word-break:break-word} /* Unified data-table header treatment across admin + compliance tables (one enterprise look). */ .admin-table th,.c-table th{color:var(--ink-2);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase} code{overflow-wrap:anywhere} .cs-card{margin-bottom:14px} .cs-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .cs-vals{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .cs-kv{background:var(--st-mut-bg);border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:12.5px} .cs-kv b{color:var(--ink-2);font-weight:600;margin-right:5px} .cs-kv em{font-style:normal;color:var(--muted);font-size:11px;margin-left:2px} .cs-def{font-size:11.5px;margin-bottom:10px} /* Explanatory copy on each settings card + in the edit modal */ .cs-about{font-size:12.5px;color:var(--muted);line-height:1.5;margin:2px 0 12px;max-width:70ch} .cs-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:10px 0} .cs-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2);font-weight:600} .cs-field-wide{grid-column:1/-1;margin-top:6px} .cs-flabel{font-weight:650;color:var(--ink-2)} .cs-fhelp{font-weight:400;font-size:11.5px;color:var(--muted);line-height:1.45} .cs-inwrap{position:relative;display:flex;align-items:center} .cs-inwrap.has-unit input{padding-right:44px} .cs-unit{position:absolute;right:11px;font-size:11px;font-weight:600;color:var(--muted);pointer-events:none} .cs-group{margin:2px 0 6px} .cs-group-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:12px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)} .cs-editbody{max-height:56vh;overflow:auto;margin:0 -4px;padding:0 4px} .cs-field input,.cs-field select{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background-color:var(--panel-2);color:var(--ink);width:100%} .c-select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background-color:var(--panel-2);color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:600} .cs-hist{max-height:55vh;overflow:auto} .cr-wrap{overflow:auto} .cr-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .cr-matrix th,.cr-matrix td{white-space:nowrap;text-align:center} .cr-matrix .cr-perm{text-align:left;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink)} .cr-matrix .me{background:var(--accent-indigo-bg)} .cr-matrix .cr-cell{font-weight:700;color:var(--mint)} .rs-card{margin-bottom:12px} .rs-cond{display:grid;grid-template-columns:minmax(120px,2fr) minmax(70px,1fr) minmax(120px,2fr) auto;gap:8px;margin-bottom:8px;align-items:center} .rs-cond select,.rs-cond input{padding:8px 9px;border:1px solid var(--line);border-radius:8px;background-color:var(--panel-2);color:var(--ink);font-size:12.5px} .cz-filters{display:flex;gap:10px;margin:6px 0 14px;flex-wrap:wrap} .cz-filters select,.cz-filters input{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background-color:var(--panel-2);color:var(--ink);font-size:13px} .cz-filters input{flex:1;min-width:160px} .cz-list{display:flex;flex-direction:column;gap:8px} .cz-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:14px 16px} .cz-row:hover{border-color:var(--accent-indigo-bd)} .cd-tl{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)} .cd-tl:last-child{border-bottom:0} .cd-tl-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:var(--accent-indigo)} .cd-tl-dot.created{background:var(--mint)}.cd-tl-dot.status{background:var(--pend)}.cd-tl-dot.assignment{background:var(--st-info-ink)}.cd-tl-dot.escalation{background:var(--danger)} .rep-pre{max-height:50vh;overflow:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:12px;font-size:11.5px;color:var(--ink);white-space:pre-wrap;word-break:break-word} .kyc-dl{display:grid;grid-template-columns:minmax(140px,40%) 1fr;gap:4px 12px;margin:6px 0 10px;font-size:13px} .kyc-dl dt{color:var(--ink-2);font-weight:600} .kyc-dl dd{margin:0;color:var(--ink);word-break:break-word} /* Compliance Customer 360 — the same dense, evidence-first language as Operations, with the indigo workspace accent and no editable master-data surfaces. */ .cc-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 24px;margin-bottom:14px;border-color:var(--accent-indigo-bd);background:linear-gradient(135deg,var(--panel),var(--accent-indigo-bg))} .cc-hero>div:first-child>span{display:block;color:var(--accent-indigo);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px} .cc-hero h2{font-size:25px;margin:0 0 4px}.cc-hero p{color:var(--ink-2);font-size:13px;margin:0} .cc-hero-status{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap} .cc-tabs{margin-bottom:16px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}.cc-tabs button{white-space:nowrap;flex:none} .cc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0}.cc-two>.card{margin:0} .cc-toolbar,.cc-actionbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 16px} .cc-actionbar{position:sticky;top:0;z-index:4;padding:10px;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(12px)} .cc-fresh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin:0 0 14px;border:1px solid var(--st-ok-bd);border-radius:11px;background:var(--st-ok-bg);font-size:12px;color:var(--ink-2)} .cc-fresh b{color:var(--st-ok-ink)}.cc-fresh.stale{background:var(--st-warn-bg);border-color:var(--st-warn-bd)}.cc-fresh.stale b{color:var(--st-warn-ink)} .cc-fresh-dot{width:7px;height:7px;border-radius:50%;background:var(--st-ok-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-ok-ink) 15%,transparent)}.cc-fresh.stale .cc-fresh-dot{background:var(--st-warn-ink)} .cc-question-section{padding:0;margin-bottom:14px;overflow:hidden}.cc-section-head{padding:17px 19px;border-bottom:1px solid var(--line);background:var(--panel-2)} .cc-section-head span{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-indigo)}.cc-section-head h3{margin:3px 0 0;font-size:16px} .cc-question-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.cc-question{min-width:0;padding:15px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .cc-question:nth-child(2n){border-right:0}.cc-question-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:7px}.cc-question-top b{font-size:12.5px;line-height:1.42;color:var(--ink)} .cc-answer{font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}.cc-answer.empty{font-style:italic;color:var(--muted)} .cc-provenance{font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)} .cc-history{margin-top:8px;font-size:11px;color:var(--ink-2)}.cc-history summary{cursor:pointer;color:var(--accent-indigo);font-weight:700}.cc-history ol{list-style:none;margin:8px 0 0;padding:0;border-left:2px solid var(--accent-indigo-bd)} .cc-history li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:6px 0 6px 10px}.cc-history li span{overflow-wrap:anywhere}.cc-history time{color:var(--muted);white-space:nowrap} .cc-doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.cc-doc-grid section{min-width:0} .c-customer-row{cursor:pointer;transition:background .12s ease}.c-customer-row:hover,.c-customer-row:focus-visible{background:var(--accent-indigo-bg);outline:1px solid var(--accent-indigo-bd);outline-offset:-1px} .c-customer-row.is-disabled{cursor:default}.c-customer-row.is-disabled:hover{background:transparent;outline:0} .c-customer-row td:last-child{text-align:right}.c-customer-table td{vertical-align:middle} /* Compliance-desk grids restack on phones so nothing overflows off-screen (audit responsive gap). */ @media (max-width:640px){ .rs-cond{grid-template-columns:1fr;gap:6px} .cs-form{grid-template-columns:1fr} .kyc-dl{grid-template-columns:1fr;gap:2px} .kyc-dl dt{margin-top:8px} .c-cards{grid-template-columns:1fr 1fr} .cc-hero{padding:18px;flex-direction:column;gap:12px}.cc-hero-status{justify-content:flex-start} .cc-two,.cc-doc-grid,.cc-question-list{grid-template-columns:1fr} .cc-question{border-right:0}.cc-actionbar{position:static}.cc-tabs{margin-left:-2px;margin-right:-2px} } @media (min-width:641px) and (max-width:980px){.cc-question-list{grid-template-columns:1fr}.cc-question{border-right:0}.cc-two,.cc-doc-grid{grid-template-columns:1fr}} /* Onboarding enrichment controls (Companies House / address validation / AI suggest) */ .onb-enrich{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} .onb-enrich-msg{font-size:12px;color:var(--muted)} /* "live" marker on admin balances sourced from the banking provider (not the local ledger) */ .bal-live{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mint);background:var(--st-ok-bg);border:1px solid var(--st-ok-bd);border-radius:5px;padding:1px 5px;vertical-align:middle} .prov-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--accent-indigo);background:var(--accent-indigo-bg);border:1px solid var(--accent-indigo-bd);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle} /* "Company — Director" label: the director half is muted so the company stays primary */ .dir-name{color:var(--muted);font-weight:500} /* Capability-gated nav entries: visibly disabled with the reason as the tooltip. */ .nav.nav-disabled{opacity:.45;cursor:not-allowed} .nav.nav-disabled:hover{background:transparent} /* ============================================================================ RELM PROVIDER VISIBILITY — evidence-led, read-only workspace A quiet cyan/steel accent distinguishes the external provider surface from Mint Pay's green operations and indigo compliance desks. ============================================================================ */ .ws-provider{ --provider:#63c7d8; --provider-soft:rgba(99,199,216,.11); --provider-line:rgba(99,199,216,.32); } .ws-provider .side{border-right-color:var(--provider-line);background:linear-gradient(180deg,#07161a 0,#050f11 100%)} .ws-provider .nav.on{background:var(--provider-soft);border:1px solid var(--provider-line);color:var(--provider);font-weight:750;box-shadow:none} .ws-provider .nav-label{color:var(--provider)} .ws-provider .main{max-width:1320px} .ws-tag-provider{color:#63c7d8;background:rgba(99,199,216,.11);border-color:rgba(99,199,216,.32)} :root[data-theme="light"] .ws-provider{ --provider:#17788a; --provider-soft:rgba(23,120,138,.09); --provider-line:rgba(23,120,138,.25); } :root[data-theme="light"] .ws-provider .side{background:linear-gradient(180deg,#f4fbfc 0,#edf5f6 100%)} :root[data-theme="light"] .ws-provider .side .brand .wordmark{color:#0e1b14} :root[data-theme="light"] .ws-tag-provider{color:#17788a;background:rgba(23,120,138,.09);border-color:rgba(23,120,138,.25)} .provider-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--provider);margin-bottom:7px} .provider-top>div:last-child{align-self:center} .provider-readonly{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--provider-line);border-radius:10px;background:var(--provider-soft);color:var(--provider);font-size:11px;font-weight:800;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap} .provider-readonly svg{width:15px;height:15px} .provider-access-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:17px;padding:11px 13px;border:1px solid var(--provider-line);border-radius:12px;background:linear-gradient(100deg,var(--provider-soft),transparent);font-size:12px} .provider-access-banner.is-stale{border-color:var(--st-warn-bd);background:var(--st-warn-bg)} .provider-live-dot{width:8px;height:8px;border-radius:50%;background:var(--provider);box-shadow:0 0 0 5px var(--provider-soft)} .provider-access-banner.is-stale .provider-live-dot{background:var(--st-warn-ink);box-shadow:0 0 0 5px var(--st-warn-bg)} .provider-access-banner b{display:block;color:var(--ink);font-size:12.5px} .provider-access-banner div span{display:block;color:var(--ink-2);margin-top:1px} .provider-scope{color:var(--provider);font-weight:700;text-align:right} .provider-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(170px,.5fr);align-items:end;gap:28px;padding:30px 32px;margin-bottom:16px;border:1px solid var(--provider-line);border-radius:18px;background:radial-gradient(500px 240px at 90% -20%,var(--provider-soft),transparent 70%),linear-gradient(145deg,var(--panel),var(--panel-2));box-shadow:var(--shadow)} .provider-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--provider)} .provider-hero>div:first-child>span,.provider-focus>div>span{display:block;color:var(--provider);font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px} .provider-hero h2{font-size:28px;line-height:1.08;margin-bottom:9px;max-width:660px} .provider-hero p{max-width:760px;color:var(--ink-2);font-size:13.5px;line-height:1.65} .provider-hero-mark{justify-self:end;font-family:'Bricolage Grotesque',sans-serif;color:var(--provider);font-size:34px;font-weight:800;letter-spacing:.12em;text-align:right;opacity:.85} .provider-hero-mark small{display:block;color:var(--muted);font-family:'Schibsted Grotesk',sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase} .provider-kpis{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;margin-bottom:16px} .provider-kpi{min-width:0;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--shadow-sm)} .provider-kpi span{display:block;color:var(--ink-2);font-size:11px;font-weight:650} .provider-kpi b{display:block;margin:5px 0 3px;font-family:'Bricolage Grotesque',sans-serif;font-size:25px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums} .provider-kpi small{display:block;color:var(--muted);font-size:9.5px;line-height:1.35} .provider-panel{margin-bottom:15px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:var(--shadow-sm);overflow:hidden} .provider-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--provider-soft),transparent 55%)} .provider-panel>header span{display:block;color:var(--provider);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .provider-panel>header h2{font-size:16px;margin-top:2px} .provider-panel>.provider-panel{box-shadow:none;border:0;border-radius:0;margin:0} .provider-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;padding:28px;text-align:center;color:var(--muted)} .provider-empty>span{display:grid;place-items:center;width:37px;height:37px;margin-bottom:9px;border-radius:10px;background:var(--provider-soft);color:var(--provider)} .provider-empty svg{width:18px;height:18px} .provider-empty b{color:var(--ink);font-size:13px} .provider-empty p{max-width:440px;margin-top:3px;font-size:11.5px} .provider-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0} .provider-kv>div{min-width:0;padding:13px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .provider-kv>div:nth-child(3n){border-right:0} .provider-kv dt{color:var(--ink-2);font-size:10.5px;font-weight:650} .provider-kv dd{margin-top:4px;color:var(--ink);font-size:13px;overflow-wrap:anywhere} .provider-kv dd>small{display:block;margin-top:6px} .provider-not-recorded{color:var(--muted);font-style:italic} .provider-control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;padding:15px} .provider-control{padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)} .provider-control span{display:block;color:var(--ink-2);font-size:11px;line-height:1.35} .provider-control b{display:block;margin:5px 0 2px;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-size:20px} .provider-control small{color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em} .provider-rule-list,.provider-document-list,.provider-activity-list,.provider-event-list,.provider-access-log{display:flex;flex-direction:column} .provider-rule-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:14px 17px;border-bottom:1px solid var(--line)} .provider-rule-list article:last-child{border-bottom:0} .provider-rule-list p{color:var(--ink-2);font-size:12px;margin-top:3px} .provider-rule-list article>div:last-child{text-align:right}.provider-rule-list .badge{margin-left:5px} .provider-rule-list small{display:block;color:var(--muted);font-size:10px;margin-top:6px} .provider-timeline{padding:7px 17px 10px} .provider-timeline article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line)} .provider-timeline article:last-child{border-bottom:0} .provider-timeline article>span{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--provider);box-shadow:0 0 0 4px var(--provider-soft)} .provider-timeline b{font-size:12.5px}.provider-timeline p{color:var(--ink-2);font-size:11.5px;margin-top:2px} .provider-timeline time{color:var(--muted);font-size:10.5px;text-align:right}.provider-timeline time small{display:block} .provider-search{margin-bottom:14px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--panel)} .provider-search label{margin-bottom:5px;color:var(--provider);font-size:10px;text-transform:uppercase;letter-spacing:.08em} .provider-search>div{display:flex;align-items:center;gap:12px}.provider-search input{margin:0}.provider-search>div>span{flex:none;color:var(--muted);font-size:11px} .provider-customer-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:var(--shadow-sm);overflow:hidden} .provider-customer-row{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto;align-items:center;gap:13px;width:100%;min-height:72px;padding:12px 15px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .14s ease} .provider-customer-row:last-child{border-bottom:0}.provider-customer-row:hover,.provider-customer-row:focus-visible{background:var(--provider-soft);outline:0} .provider-customer-monogram{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--provider-line);border-radius:10px;background:var(--provider-soft);color:var(--provider);font-family:'Bricolage Grotesque',sans-serif;font-weight:800} .provider-customer-main b,.provider-customer-main small{display:block}.provider-customer-main b{font-size:13.5px}.provider-customer-main small{color:var(--ink-2);font-size:11px;margin-top:2px} .provider-customer-state{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.provider-customer-state em{color:var(--provider);font-size:10.5px;font-style:normal;font-weight:750} .provider-open{color:var(--provider);font-size:11.5px;font-weight:750} .provider-back{margin-bottom:10px;border:0;background:transparent;color:var(--provider);font:inherit;font-size:12px;font-weight:700;cursor:pointer} .provider-customer-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px;padding:20px 22px;border:1px solid var(--provider-line);border-radius:15px;background:linear-gradient(125deg,var(--panel),var(--provider-soft))} .provider-customer-hero>div:first-child>span{color:var(--provider);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .provider-customer-hero h2{font-size:23px;margin:3px 0}.provider-customer-hero p{color:var(--ink-2);font-size:12px} .provider-customer-hero>div:last-child{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .provider-tabs{display:flex;gap:5px;margin-bottom:13px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow-x:auto} .provider-tabs button{flex:1;min-width:max-content;padding:9px 13px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:inherit;font-size:12px;font-weight:700;cursor:pointer} .provider-tabs button.on{background:var(--provider-soft);color:var(--provider)} .provider-questionnaire{display:flex;flex-direction:column;gap:11px;padding:14px} .provider-questionnaire>section{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)} .provider-questionnaire>section>header{padding:12px 14px;border-bottom:1px solid var(--line)} .provider-questionnaire>section>header span{color:var(--provider);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.provider-questionnaire h3{font-size:14px;margin-top:2px} .provider-questionnaire>section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .provider-questionnaire article{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .provider-questionnaire article:nth-child(2n){border-right:0}.provider-questionnaire article b{font-size:11.5px;line-height:1.35}.provider-questionnaire article small{display:block;color:var(--muted);font-size:9.5px;margin-top:4px} .provider-questionnaire article p{font-size:12px;overflow-wrap:anywhere}.provider-answer-state{display:block;margin-top:6px} .provider-ubo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}.provider-ubo-grid>article{overflow:hidden;border:1px solid var(--line);border-radius:12px}.provider-ubo-grid>article>span{display:block;padding:9px 13px;border-bottom:1px solid var(--line);color:var(--provider);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.provider-ubo-grid .provider-kv{grid-template-columns:repeat(2,minmax(0,1fr))}.provider-ubo-grid .provider-kv>div:nth-child(3n){border-right:1px solid var(--line)}.provider-ubo-grid .provider-kv>div:nth-child(2n){border-right:0} .provider-account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;padding:14px}.provider-account-grid article{padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.provider-account-grid article>span{color:var(--provider);font-size:10px;font-weight:800;text-transform:uppercase}.provider-account-grid article>b{display:block;margin:6px 0 3px;font-family:'Bricolage Grotesque',sans-serif;font-size:20px}.provider-account-grid article p{color:var(--ink-2);font-family:ui-monospace,monospace;font-size:11px}.provider-account-grid article small{display:block;margin-top:9px} .provider-document-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line)}.provider-document-list article:last-child{border-bottom:0}.provider-document-list article>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--provider-soft);color:var(--provider)}.provider-document-list svg{width:16px;height:16px}.provider-document-list b{font-size:12.5px}.provider-document-list p{color:var(--ink-2);font-size:11px}.provider-document-list small{color:var(--muted);font-size:9.5px} .provider-activity-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 15px;border-bottom:1px solid var(--line)}.provider-activity-list article:last-child{border-bottom:0}.provider-activity-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--provider-soft);color:var(--provider)}.provider-activity-icon svg{width:16px;height:16px}.provider-activity-list b{font-size:12.5px}.provider-activity-list p{color:var(--ink-2);font-size:11px;margin-top:2px}.provider-activity-list small{color:var(--muted);font-size:9.5px}.provider-activity-list article>div:last-child{text-align:right}.provider-activity-list article>div:last-child>.badge{display:flex;width:max-content;margin:5px 0 0 auto} .provider-event-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:start;padding:13px 15px;border-bottom:1px solid var(--line)}.provider-event-list article:last-child{border-bottom:0}.provider-event-list b{font-size:12.5px}.provider-event-list p{color:var(--ink-2);font-size:11.5px;margin:2px 0}.provider-event-list small,.provider-event-list time{color:var(--muted);font-size:9.5px}.provider-event-list time{text-align:right;white-space:nowrap} .provider-focus{display:grid;grid-template-columns:minmax(190px,.45fr) minmax(0,1fr);align-items:center;gap:24px;margin-bottom:14px;padding:20px 22px;border:1px solid var(--provider-line);border-radius:15px;background:linear-gradient(110deg,var(--provider-soft),var(--panel))}.provider-focus>div>b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:35px;line-height:1}.provider-focus>div>p{color:var(--ink-2);font-size:11px}.provider-focus>p{max-width:660px;color:var(--ink-2);font-size:13px;line-height:1.55} .provider-access-summary{display:flex;align-items:center;gap:14px;margin-bottom:15px;padding:18px;border:1px solid var(--provider-line);border-radius:15px;background:var(--provider-soft)}.provider-access-summary>div:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--panel);color:var(--provider)}.provider-access-summary svg{width:20px;height:20px}.provider-access-summary span{display:block;color:var(--provider);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.provider-access-summary b{display:block;margin:2px 0;font-size:14px}.provider-access-summary p{color:var(--ink-2);font-size:11px} .provider-access-log article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)}.provider-access-log article:last-child{border-bottom:0}.provider-access-log b{font-size:12.5px}.provider-access-log p{color:var(--ink-2);font-size:11px}.provider-access-log article>span{text-align:right}.provider-access-log time{display:block;color:var(--muted);font-size:9.5px;margin-top:4px} @media(max-width:1080px){.provider-kpis{grid-template-columns:repeat(3,minmax(130px,1fr))}.provider-kv{grid-template-columns:repeat(2,minmax(0,1fr))}.provider-kv>div:nth-child(3n){border-right:1px solid var(--line)}.provider-kv>div:nth-child(2n){border-right:0}} @media(max-width:720px){ .provider-access-banner{grid-template-columns:auto minmax(0,1fr)}.provider-scope{grid-column:2;text-align:left} .provider-hero{grid-template-columns:1fr;padding:22px}.provider-hero-mark{display:none}.provider-hero h2{font-size:23px} .provider-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .provider-customer-row{grid-template-columns:auto minmax(0,1fr) auto}.provider-customer-state{grid-column:2;justify-content:flex-start}.provider-open{grid-column:3;grid-row:1/3} .provider-questionnaire>section>div,.provider-ubo-grid{grid-template-columns:1fr}.provider-questionnaire article{grid-template-columns:1fr;border-right:0}.provider-kv{grid-template-columns:1fr}.provider-kv>div,.provider-kv>div:nth-child(2n),.provider-kv>div:nth-child(3n){border-right:0} .provider-customer-hero{flex-direction:column}.provider-customer-hero>div:last-child{justify-content:flex-start} .provider-focus{grid-template-columns:1fr}.provider-rule-list article,.provider-event-list article{grid-template-columns:1fr}.provider-rule-list article>div:last-child,.provider-event-list time{text-align:left} } @media(max-width:480px){.provider-top .provider-readonly{display:none}.provider-kpis{grid-template-columns:1fr 1fr}.provider-search>div{align-items:stretch;flex-direction:column}.provider-search>div>span{align-self:flex-end}.provider-customer-row{grid-template-columns:auto minmax(0,1fr)}.provider-open{display:none}.provider-customer-state{grid-column:1/-1}.provider-activity-list article{grid-template-columns:auto minmax(0,1fr)}.provider-activity-list article>div:last-child{grid-column:2;text-align:left}.provider-activity-list article>div:last-child>.badge{margin-left:0}.provider-document-list article{grid-template-columns:auto minmax(0,1fr)}.provider-document-list article>.badge{grid-column:2;width:max-content}}