/* DWELL — portal styles (portal.html only). Self-sufficient: base reset, login
split, and the signed-in dashboard all live here, styled entirely through
theme.css tokens. Hard rule: no raw colors and no per-rule family overrides —
form controls take `font: inherit` from the body stack below, and mono runs
use the `font:` shorthand with var(--mono). */
/* ════════════════════════════════════════════════════════════════
BASE
════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.portal-body {
margin: 0;
min-height: 100vh;
font: 400 16px/1.5 var(--sans);
color: var(--ink);
background: var(--bg-cream);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
/* ── Brand mark — the eight-dot clock-sweep chip + wordmark, shared by every view ── */
.brand { display: flex; align-items: center; gap: 9px; }
.logo {
width: 30px; height: 30px; border-radius: var(--radius-sm);
background: var(--card-dark);
color: var(--accent-ink);
font: 700 14px/1 var(--mono);
display: grid; place-items: center;
box-shadow: var(--shadow-logo);
}
.logo img { width: 72%; height: 72%; object-fit: contain; display: block; }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--ink); }
.brand-sub { font: 500 13px/1 var(--mono); color: var(--gray); letter-spacing: .02em; }
/* ════════════════════════════════════════════════════════════════
SPLIT LAYOUT (login / survey / onboarding)
════════════════════════════════════════════════════════════════ */
.portal-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
min-height: 100dvh; /* stable height under iOS Safari's collapsing URL bar */
}
/* `.portal-split { display: grid }` outranks the UA `[hidden]` rule, so the
login page must opt back into display:none when portal.js sets hidden — else
it stays visible on top of the signed-in dashboard. */
#login-page[hidden] { display: none; }
/* First-login onboarding screens: a full-width top nav (like the dashboard)
stacked above the two-column split. */
.portal-onboard { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.portal-onboard > .portal-split { min-height: 0; flex: 1 1 auto; }
.onboard-nav { max-width: none; }
/* `.portal-onboard { display: flex }` (like the split grid) outranks the UA
[hidden] rule, so the onboarding screens must opt back into display:none. */
#onboarding-page[hidden],
#survey-page[hidden] { display: none; }
/* ── First-paint auth gate ──
An inline script adds `auth-pending` to when a session token
(or the sticky ?dev=1 flag) is present, so returning users paint the loading
splash instead of a flash of the login form while portal.js confirms the
session. These rules govern only that first frame; portal.js removes the
class and drives the `hidden` attribute from then on. */
html.auth-pending #login-page { display: none; }
html.auth-pending #portal-loading { display: flex; }
/* Loading splash — centered spinner over the full viewport. */
#portal-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
}
#portal-loading[hidden] { display: none; }
.portal-spinner {
width: 38px;
height: 38px;
border-radius: 50%;
border: 3px solid rgba(var(--accent-rgb), 0.25);
border-top-color: var(--accent);
animation: portal-spin 0.7s linear infinite;
}
@keyframes portal-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.portal-spinner { animation-duration: 1.6s; }
}
/* ── Left column — hero ── */
.portal-left {
display: flex;
flex-direction: column;
background: linear-gradient(135deg, var(--bg-cream) 0%, var(--bg-tint) 55%, var(--card-dark) 100%);
padding: 0 48px 32px;
position: relative;
overflow: hidden;
}
.portal-left::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 20% 30%, rgba(var(--accent-rgb),.14) 0%, transparent 70%),
radial-gradient(ellipse 50% 60% at 80% 70%, rgba(var(--accent-rgb),.09) 0%, transparent 70%);
pointer-events: none;
}
.portal-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 0 0;
position: relative;
z-index: 1;
}
.portal-nav-links { display: flex; gap: 28px; }
.portal-nav-links a {
font-size: 15px;
font-weight: 500;
color: var(--ink-2);
transition: color .15s;
}
.portal-nav-links a:hover { color: var(--ink); }
.portal-hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 32px 0 48px;
position: relative;
z-index: 1;
}
.portal-h1 {
font-size: clamp(28px, 4vw, 52px);
font-weight: 900;
letter-spacing: -.04em;
line-height: 1.06;
color: var(--ink);
margin: 0 0 22px;
}
.portal-footer {
display: flex;
justify-content: space-between;
gap: 16px;
font: 500 12px/1.5 var(--mono);
color: var(--gray-2);
position: relative;
z-index: 1;
}
/* ── Right column ── */
.portal-right {
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tint);
padding: 32px 24px;
}
/* ── Auth card ── */
.auth-card {
width: 100%;
max-width: 400px;
background: var(--card-dark);
border-radius: var(--radius-2xl);
padding: 44px 40px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow:
0 0 0 1px var(--line),
var(--shadow-card);
}
/* ── Provider buttons (Google) ── */
.auth-btn-provider {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 20px;
border-radius: var(--radius-md);
border: 1.5px solid var(--line);
background: var(--card-dark-2);
color: var(--ink);
font-size: 15px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: border-color .15s, background .15s, box-shadow .15s;
letter-spacing: -.01em;
-webkit-appearance: none;
appearance: none;
}
.auth-btn-provider:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-sm);
color: var(--ink);
}
/* Official X brand mark — white glyph on black. Brand-mark color, treated like
the favicon exception in AGENTS.md (third-party logo, not a theme token). The
.provider-icon uses currentColor, so setting color:#fff whitens the glyph. */
#twitter-btn { background: #000; color: #fff; border-color: #000; }
#twitter-btn:hover { background: #000; border-color: #333; color: #fff; }
/* Provider icon — monochrome mark, follows the button's text color */
.provider-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: currentColor;
}
/* ── Email step divider label ── */
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--gray-2);
margin: 6px 0;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
/* ── Inputs ── */
.auth-input {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
font-size: 15px;
color: var(--ink);
background: var(--card-dark-2);
outline: none;
transition: border-color .15s, box-shadow .15s;
-webkit-appearance: none;
}
.auth-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12);
}
.auth-input::placeholder { color: var(--gray-2); }
/* ── Primary action button ── */
.auth-btn-primary {
width: 100%;
padding: 14px 20px;
border-radius: var(--radius-md);
border: none;
background: linear-gradient(180deg, var(--accent-grad-a), var(--accent-grad-b));
color: var(--accent-ink);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: opacity .15s, transform .1s;
letter-spacing: -.01em;
-webkit-appearance: none;
}
.auth-btn-primary:hover { opacity: .9; }
.auth-btn-primary:active { transform: scale(.98); }
.auth-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* ── Secondary button ── */
.auth-btn-secondary {
width: 100%;
padding: 12px 20px;
border-radius: var(--radius-md);
border: 1.5px solid var(--line);
background: var(--card-dark-2);
color: var(--ink);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s, background .15s;
-webkit-appearance: none;
}
.auth-btn-secondary:hover { border-color: var(--border-strong); }
.auth-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
/* ── Link-style button ── */
.auth-link-btn {
background: none;
border: none;
padding: 4px 0;
color: var(--accent);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: color .15s;
}
.auth-link-btn:hover { color: var(--accent-grad-a); }
/* ── Sent confirmation ── */
#auth-step-sent {
display: flex;
flex-direction: column;
gap: 10px;
}
/* display:flex above would otherwise override the hidden attribute */
#auth-step-sent[hidden] { display: none; }
.auth-sent-icon {
font-size: 38px;
text-align: center;
padding: 8px 0 2px;
color: var(--accent);
}
.auth-sent-msg {
font-size: 14px;
color: var(--gray);
text-align: center;
line-height: 1.55;
margin: 0;
}
/* ── Error banner ── */
.auth-error {
font-size: 13px;
color: var(--err-fg);
background: var(--err-bg);
border: 1px solid var(--err-line);
border-radius: var(--radius-sm);
padding: 10px 13px;
margin: 0;
line-height: 1.4;
}
/* ── Applied referral code note ── */
.auth-referral-note {
font-size: 13px;
color: var(--ok-fg);
background: var(--ok-bg);
border: 1px solid var(--ok-line);
border-radius: var(--radius-sm);
padding: 10px 13px;
margin: 0;
line-height: 1.4;
}
/* ── First-login onboarding card ── */
.onboard-title {
font-size: 20px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink);
text-align: center;
margin: 0;
}
#onboard-step-post,
#onboard-step-confirm { display: flex; flex-direction: column; gap: 12px; }
#onboard-step-post[hidden],
#onboard-step-confirm[hidden] { display: none; }
/* Prebuilt post preview — a quoted card the user is about to share.
pre-line preserves the newline in the post text (renders it as an actual line
break, mirroring how X lays the post out) while still wrapping long lines. */
.onboard-tweet-preview {
font-size: 14px;
line-height: 1.5;
color: var(--ink);
background: var(--surface-inset);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin: 0;
white-space: pre-line;
}
/* Official X mark (a third-party brand glyph — the sanctioned color exception,
like the favicon): pure black at the top of the post card, white inside the
red "Post to X" button (which centers its logo + label). */
.onboard-x-icon { color: #000; line-height: 0; }
.onboard-x-icon svg { width: 34px; height: 34px; display: inline-block; }
.onboard-post-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
}
.onboard-x-glyph { width: 16px; height: 16px; flex-shrink: 0; }
/* Delayed-payout warning under the post button. */
.onboard-payout-warn {
font-size: 13px;
color: var(--err-fg);
background: var(--err-bg);
border: 1px solid var(--err-line);
border-radius: var(--radius-sm);
padding: 9px 12px;
margin: 0;
line-height: 1.45;
text-align: center;
}
/* ── First-login survey (models / surfaces) ── */
#survey-step-models,
#survey-step-surfaces { display: flex; flex-direction: column; gap: 14px; }
#survey-step-models[hidden],
#survey-step-surfaces[hidden] { display: none; }
.onboard-step {
font: 700 11px/1.4 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
text-align: center;
}
/* Multi-select option chips — toggle to .sel on click. */
.survey-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.survey-opt {
display: flex;
align-items: center;
width: 100%;
padding: 13px 16px;
border-radius: var(--radius-md);
border: 1.5px solid var(--line);
background: var(--card-dark-2);
color: var(--ink);
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
-webkit-appearance: none;
}
.survey-opt::before {
content: "";
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 12px;
border-radius: var(--radius-xs);
border: 1.5px solid var(--border-strong);
background: var(--surface-inset);
font-size: 12px;
font-weight: 700;
line-height: 1;
transition: border-color .15s, background .15s;
}
.survey-opt:hover { border-color: var(--border-strong); }
.survey-opt.sel {
border-color: var(--accent);
background: rgba(var(--accent-rgb), .1);
box-shadow: 0 0 0 1px var(--accent);
}
/* Check mark drawn as text (no image data-URI, so it stays token-colored). */
.survey-opt.sel::before {
content: "✓";
border-color: var(--accent);
background: var(--accent);
color: var(--accent-ink);
}
/* ════════════════════════════════════════════════════════════════
SIGNED-IN DASHBOARD — header, tabs, cards
════════════════════════════════════════════════════════════════ */
.nav {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 16px 24px;
background: var(--bg-cream);
border-bottom: 1px solid var(--line);
}
.dash-nav { max-width: 820px; margin: 0 auto; width: 100%; }
.nav .logo { width: 38px; height: 38px; border-radius: var(--radius-md); font-size: 16px; }
.nav .brand-name { font-size: 20px; }
/* Account cluster — wallet chip + Home + Sign out, kept quiet so the
segmented tabs below read as the primary navigation. */
.dash-account { display: flex; align-items: center; gap: 6px; }
.dash-account-who {
font-size: 13px; font-weight: 600; color: var(--gray);
padding: 7px 10px; margin-right: 2px; max-width: 260px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.dash-account-link {
font-size: 13.5px; font-weight: 600; color: var(--gray); white-space: nowrap;
padding: 7px 12px; border: none; border-radius: var(--radius-pill); background: transparent;
cursor: pointer; text-decoration: none; transition: color .15s, background .15s;
}
.dash-account-link:hover { color: var(--ink); background: var(--bg-tint); }
.dash-signout:hover { color: var(--err-fg); }
/* Header wallet chip — a mock pill; clicking opens the wallet modal. */
.wallet-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--line);
background: var(--card-dark);
color: var(--ink-2);
font: 600 12px/1 var(--mono);
cursor: pointer;
white-space: nowrap;
transition: border-color .15s, color .15s;
-webkit-appearance: none;
}
.wallet-chip:hover {
border-color: var(--border-strong);
color: var(--ink);
}
.wallet-dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--warn-fg);
box-shadow: 0 0 0 3px var(--warn-bg);
}
/* out-of-inventory notice — informational, not an error: --bg-tint keeps it calm */
.dash-notice {
display: flex; align-items: flex-start; gap: 10px;
width: min(756px, 100% - 28px); margin: 18px auto 0; padding: 13px 16px;
background: var(--bg-tint); border: 1px solid var(--line); border-radius: 14px;
font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
}
/* flex outranks the UA [hidden] rule — same pattern as the auth steps above. */
.dash-notice[hidden] { display: none; }
.dash-notice-ico { flex: none; font-size: 15px; line-height: 1.5; }
/* Section tabs — one segmented control, one active view at a time. */
.dash-tabs {
display: flex; gap: 4px;
width: min(756px, 100% - 28px); margin: 24px auto 0; padding: 5px;
border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--card-dark);
box-shadow: var(--shadow-dark);
}
.dash-tab {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 11px 10px; border: none; border-radius: var(--radius-md); background: transparent;
font-size: 14px; font-weight: 700; color: var(--gray);
cursor: pointer; transition: color .15s, background .15s;
}
.dash-tab:hover { color: var(--ink); background: var(--card-dark-2); }
.dash-tab.active { color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.dash-tab-ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; }
.dash-tab-ico svg { width: 100%; height: 100%; display: block; }
/* ── Main column + cards ── */
.portal-main { max-width: 820px; margin: 0 auto; padding: 26px 32px 0; }
.portal-card {
background: var(--card-dark);
border: 1px solid var(--line);
border-radius: var(--radius-3xl);
padding: 40px 44px;
box-shadow: var(--shadow-card);
margin-bottom: 22px;
}
.portal-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 28px 0 10px; color: var(--ink); }
.portal-copy { font-size: 15.5px; color: var(--gray); line-height: 1.6; margin: 0 0 24px; max-width: 620px; }
.portal-copy strong { color: var(--ink); }
.eyebrow {
display: inline-block;
font: 700 12px/1.4 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
/* ── Balance block — the big mono points number ── */
.balance-row {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 22px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.balance {
font: 900 44px/1 var(--mono);
letter-spacing: -.03em;
color: var(--ink);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.balance-unit { font: 700 17px/1 var(--mono); color: var(--gray); letter-spacing: 0; }
.balance-sub { font-size: 13.5px; color: var(--gray); margin-top: 8px; }
/* ── Earnings stat tiles ── */
.earn-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; color: var(--ink); }
.earn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 26px; }
.earn-stat {
display: flex; flex-direction: column; gap: 6px;
padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-inset);
}
.es-label { font: 500 11px/1.4 var(--mono); color: var(--gray-2); text-transform: uppercase; letter-spacing: .08em; }
.es-num { font: 800 28px/1.1 var(--mono); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.es-sub { font-size: 12.5px; color: var(--gray-2); }
/* ── Chart card ── */
.earn-chart-card { border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; background: var(--surface-inset); }
.ecc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ecc-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.ecc-sub { font-size: 13px; color: var(--gray-2); margin: 4px 0 0; }
.ecc-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.earn-window, .earn-mode { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-dark); }
.ew-btn, .em-btn {
border: none; background: transparent; cursor: pointer;
font: 700 13px/1.2 var(--mono); color: var(--gray); padding: 6px 12px; border-radius: var(--radius-sm);
transition: background .12s, color .12s;
}
.ew-btn:hover, .em-btn:hover { color: var(--ink); }
.ew-btn.active, .em-btn.active { background: var(--card-dark-2); color: var(--accent); box-shadow: var(--shadow-sm); }
.em-btn { padding: 5px 10px; font-size: 12px; }
.earn-chart { width: 100%; height: 220px; }
.ec-svg { width: 100%; height: 100%; display: block; }
.ec-grid { stroke: var(--line); stroke-width: 1; }
.ec-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ec-area { fill: rgba(var(--accent-rgb), .12); stroke: none; }
.ec-dot { fill: var(--accent); }
.ec-xlabel { fill: var(--gray-2); font: 500 11px var(--mono); text-anchor: middle; }
.earn-chart-foot { font: 500 12.5px/1.5 var(--mono); color: var(--gray); margin: 10px 0 0; }
/* ── ACTIVITY LEDGER ── */
.act-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.act-status {
flex-shrink: 0; font: 700 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em;
color: var(--gray-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 12px; background: var(--surface-inset);
}
.act-status.ok { color: var(--ok-fg); border-color: var(--ok-line); background: var(--ok-bg); }
.act-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.act-search {
flex: 1 1 240px; min-width: 0; font-size: 14px;
padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
background: var(--card-dark-2); color: var(--ink);
}
.act-search:focus { outline: none; border-color: var(--accent); }
.act-search:disabled { background: var(--surface-inset); color: var(--gray-2); }
.act-search::placeholder { color: var(--gray-2); }
.act-filter {
font-size: 14px; padding: 11px 14px; border: 1px solid var(--line);
border-radius: var(--radius-md); background: var(--card-dark-2); color: var(--ink); cursor: pointer;
}
.act-filter:disabled { background: var(--surface-inset); color: var(--gray-2); cursor: not-allowed; }
.act-count { font: 500 11.5px/1.4 var(--mono); color: var(--gray-2); white-space: nowrap; }
.act-body { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.act-empty { padding: 30px 20px; text-align: center; }
.act-empty p { font-size: 14px; color: var(--gray); margin: 0 0 16px; }
.act-row {
display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: center;
padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.act-row:last-child { border-bottom: none; }
.act-row-head {
font: 700 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em;
color: var(--gray-2); background: var(--surface-inset);
}
.act-type { font-weight: 700; color: var(--ink); }
.act-type.referral_points_credit { color: var(--ok-fg); }
.act-type.token_claim_debit { color: var(--warn-fg); }
.act-adv { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-when { color: var(--gray-2); }
.act-amt { text-align: right; font: 700 13px/1.4 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-amt.is-debit { color: var(--warn-fg); }
.act-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 20px; }
.act-loading p { font-size: 14px; color: var(--gray); margin: 0; }
.act-loading .portal-spinner { width: 30px; height: 30px; }
.act-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.act-page-info { font: 500 11.5px/1.4 var(--mono); color: var(--gray-2); white-space: nowrap; }
.act-page-btn {
font-size: 13px; font-weight: 600; color: var(--ink);
padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px;
background: var(--card-dark-2); cursor: pointer;
}
.act-page-btn:hover:not(:disabled) { border-color: var(--accent); }
.act-page-btn:disabled { color: var(--gray-2); cursor: not-allowed; opacity: .6; }
/* ── Shared accent button (Copy / Apply / Retry / modal close) ── */
.btn-accent {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
background: linear-gradient(180deg, var(--accent-grad-a), var(--accent-grad-b));
color: var(--accent-ink);
font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: var(--radius-md);
border: none; cursor: pointer; white-space: nowrap;
box-shadow: var(--shadow-accent);
transition: transform .15s, filter .15s;
}
.btn-accent:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-accent:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* ── REFERRALS ── */
.ref-link-row { display: flex; gap: 10px; margin: 4px 0 26px; }
.ref-link-row input {
flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid var(--line);
border-radius: var(--radius-md); font: 500 14px/1.4 var(--mono); color: var(--ink);
background: var(--surface-inset);
}
.ref-invite-h { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.ref-invite-row { display: flex; gap: 10px; margin: 0 0 8px; }
.ref-invite-row .auth-input { flex: 1; min-width: 0; margin: 0; }
.ref-invite-msg { font-size: 13.5px; margin: 0 0 22px; }
.ref-invite-msg.ok { color: var(--ok-fg); }
.ref-invite-msg.err { color: var(--err-fg); }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.ref-stat {
display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-inset);
}
.rs-num { font: 800 26px/1.1 var(--mono); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-label { font: 500 11px/1.4 var(--mono); color: var(--gray-2); text-transform: uppercase; letter-spacing: .06em; }
.ref-empty { font-size: 14.5px; color: var(--gray-2); margin: 0; padding: 20px 16px; }
/* Per-friend table — friend + joined date, their lifetime, your 15% share. */
.fr-table { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 8px; }
.fr-row {
display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: center;
padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.fr-row:last-child { border-bottom: none; }
.fr-head {
font: 700 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em;
color: var(--gray-2); background: var(--surface-inset);
}
.fr-name { display: flex; flex-direction: column; gap: 2px; font-weight: 700; color: var(--ink); min-width: 0; }
.fr-joined { font: 500 11px/1.4 var(--mono); color: var(--gray-2); }
.fr-their { font: 500 13px/1.4 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fr-share { text-align: right; font: 700 13px/1.4 var(--mono); color: var(--ok-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-head .fr-share { color: var(--gray-2); }
/* Partner upgrade lives in its own card, set off with a bigger gap. */
.aff-upgrade-box { margin-top: 40px; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; background: var(--surface-inset); }
.aff-row { display: flex; gap: 10px; margin: 0 0 10px; }
.aff-row .auth-input { margin: 0; flex: 1; min-width: 0; }
.aff-row .aff-followers { flex: 0 0 140px; }
.aff-hint { font-size: 13px; color: var(--gray-2); margin: 2px 0 14px; }
.aff-hint strong { color: var(--ink); }
.aff-status .portal-copy { margin: 4px 0 0; }
.aff-have-code { margin: 0 0 22px; }
/* ════════════════════════════════════════════════════════════════
INSTALL TAB — setup checklist + per-service "active" status. Each
service's brand-mark chip is the colored logo desaturated to grey
(.is-inactive) until the account earns its first DWELL points from
that service (GET /v1/web/sources, see portal.js).
════════════════════════════════════════════════════════════════ */
.logo.is-inactive { filter: grayscale(1) opacity(.5); box-shadow: none; }
/* Aggregate status hero — lit once any service is earning. */
.install-hero {
display: flex; align-items: center; gap: 16px;
padding: 18px 20px; margin-bottom: 26px;
border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-inset);
}
.install-hero-logo {
width: 54px; height: 54px; border-radius: 15px; font-size: 23px; flex: none;
transition: filter .45s ease, box-shadow .45s ease;
}
.install-hero-text .eyebrow { margin-bottom: 4px; }
.install-hero-text .earn-title { margin: 0 0 4px; }
.install-h { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; color: var(--ink); }
/* Rows: the install checklist (left) + per-service active status (right). */
.install-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.install-row { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 14px; }
/* The checkbox reuses the .survey-opt chip; widen it and stack name + sub. It's
read-only — server-driven, never clicked — so kill the pointer + hover afford. */
.install-check { align-items: center; padding: 15px 18px; cursor: default; }
.install-check:hover { border-color: var(--line); }
.install-check.sel:hover { border-color: var(--accent); }
.install-check .ic-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.install-check .ic-link { margin-left: auto; padding-left: 14px; white-space: nowrap; }
.ic-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.ic-sub { font-size: 13px; font-weight: 500; color: var(--gray); }
.ic-sub code { font: 500 12px/1.4 var(--mono); background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0 4px; }
.ic-link { font-size: 12.5px; font-weight: 600; color: var(--accent); }
/* Per-service active status — logo + label. */
.install-active {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
min-width: 128px; padding: 12px 14px; text-align: center;
border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset);
}
.install-active .logo { transition: filter .45s ease, box-shadow .45s ease; }
.ia-label { font: 700 10.5px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--gray-2); }
.install-active.is-live { border-color: var(--ok-line); background: var(--ok-bg); }
.install-active.is-live .ia-label { color: var(--ok-fg); }
/* Earnings tab: per-surface status row — same visuals as the install tiles,
but a 3-up row with the surface name on top. Driven by the same
applyServiceActivation() / GET /v1/web/sources. */
.earn-surfaces-card {
margin-top: 16px; padding: 20px 22px;
border: 1px solid var(--line); border-radius: 18px; background: var(--surface-inset);
}
.ess-title { font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 3px; color: var(--ink); }
.ess-sub { font-size: 13px; font-weight: 500; color: var(--gray); margin: 0 0 16px; }
.earn-surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.earn-surface {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 16px 12px; text-align: center;
border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-dark-2);
}
.es-surface-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.earn-surface .logo { transition: filter .45s ease, box-shadow .45s ease; }
.earn-surface.is-live { border-color: var(--ok-line); background: var(--ok-bg); }
.earn-surface.is-live .ia-label { color: var(--ok-fg); }
/* Surface marks spin like the homepage brand mark: a slow idle rotation while
inactive, speeding up once the surface lights up (its .logo loses
.is-inactive). Applies to the earnings 3-up row, the install tiles, and the
install hero. Parked entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
.earn-surface .logo img,
.install-active .logo img,
.install-hero-logo img {
animation: surface-spin 3.4s linear infinite;
}
.earn-surface .logo:not(.is-inactive) img,
.install-active .logo:not(.is-inactive) img,
.install-hero-logo:not(.is-inactive) img {
animation-duration: 1s;
}
}
@keyframes surface-spin { to { transform: rotate(360deg); } }
/* ════════════════════════════════════════════════════════════════
CASH OUT — the future-flow preview, clearly labeled
════════════════════════════════════════════════════════════════ */
.launch-preview {
margin-top: 18px;
padding: 20px 22px;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-inset);
}
.lp-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.lp-title {
font-size: 15px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink);
margin: 0;
}
.lp-badge {
font: 700 10.5px/1.4 var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--warn-fg);
background: var(--warn-bg);
border: 1px solid var(--warn-line);
border-radius: var(--radius-pill);
padding: 4px 10px;
white-space: nowrap;
}
.lp-steps {
margin: 0;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
color: var(--gray);
line-height: 1.55;
}
.lp-steps strong { color: var(--ink); font-weight: 700; }
.cashout-note {
margin: 16px 0 0;
font-size: 13px;
color: var(--gray-2);
line-height: 1.55;
max-width: 620px;
}
/* ════════════════════════════════════════════════════════════════
WALLET MODAL (mock) — backdrop centers a card; [hidden] wins
════════════════════════════════════════════════════════════════ */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.6);
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
width: 100%;
max-width: 460px;
background: var(--card-dark);
border: 1px solid var(--line);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-card);
padding: 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.modal-title {
font-size: 19px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink);
margin: 0;
}
.modal-body {
font-size: 14px;
color: var(--gray);
line-height: 1.6;
margin: 0;
}
.modal-list {
margin: 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
}
.modal-list strong { color: var(--ink); }
/* ════════════════════════════════════════════════════════════════
RESERVE STRIP + FOOTER + TOAST
════════════════════════════════════════════════════════════════ */
.reserve-strip {
display: flex;
justify-content: center;
padding: 8px 20px 0;
}
.reserve-pill {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
font: 500 12px/1.5 var(--mono);
color: var(--gray);
border: 1px solid var(--line);
background: var(--card-dark);
border-radius: var(--radius-pill);
padding: 7px 16px;
text-align: center;
}
.reserve-pill strong { color: var(--ink); font-weight: 700; }
.footer { max-width: 760px; margin: 40px auto 0; padding: 28px 32px 44px; text-align: center; border-top: 1px solid var(--line); }
.footer p { margin: 0; font-size: 13px; color: var(--gray-2); }
/* Bottom-center toast — replaces inline styles so colors stay tokenized. */
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
background: var(--ink);
color: var(--bg-cream);
padding: 10px 16px;
border-radius: var(--radius-pill);
font-size: 14px;
box-shadow: var(--shadow-dark);
z-index: 9999;
opacity: 0;
transition: opacity .25s;
}
.toast.show { opacity: 1; }
.toast.err { background: var(--err-fg); color: var(--bg-cream); }
/* ════════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.portal-split {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.portal-left { padding: 0 24px 28px; min-height: auto; }
.portal-hero { padding: 24px 0 28px; }
.portal-h1 { font-size: 30px; }
.portal-footer { display: none; }
.portal-right { padding: 28px 16px 40px; align-items: flex-start; }
.portal-nav { padding-top: 20px; }
/* 16px input so iOS Safari doesn't zoom on focus */
.auth-input { font-size: 16px; }
.auth-btn-primary,
.auth-btn-secondary { min-height: 48px; }
}
@media (max-width: 640px) {
.ref-stats { grid-template-columns: 1fr; }
.ref-link-row, .ref-invite-row { flex-direction: column; }
.aff-row { flex-direction: column; }
.aff-row .aff-followers { flex: 1; }
.fr-row { grid-template-columns: 1fr auto; }
.fr-their, .fr-head span:nth-child(2) { display: none; }
}
@media (max-width: 600px) {
.nav { padding: 10px 14px; gap: 8px; }
.nav .logo { width: 32px; height: 32px; font-size: 14px; }
.nav .brand-name { font-size: 15px; letter-spacing: -.03em; }
.brand-sub { display: none; }
.dash-home { display: none; }
.dash-account-who { display: none; }
.dash-account { gap: 2px; }
.wallet-chip { font-size: 11px; padding: 7px 10px; gap: 6px; }
.portal-main { padding: 22px 14px 0; }
.portal-card { padding: 24px 18px; }
.balance { font-size: 34px; }
.balance-unit { font-size: 14px; }
}
@media (max-width: 560px) {
.dash-tab { font-size: 12.5px; padding: 10px 5px; gap: 0; }
.dash-tab-ico { display: none; }
.earn-stats { grid-template-columns: 1fr; }
.act-row { grid-template-columns: 1fr auto; }
.act-adv, .act-when,
.act-row-head span:nth-child(2), .act-row-head span:nth-child(3) { display: none; }
.install-row { grid-template-columns: 1fr; }
.install-active { flex-direction: row; justify-content: space-between; min-width: 0; padding: 10px 14px; }
.earn-surfaces { grid-template-columns: 1fr; }
.earn-surface { flex-direction: row; justify-content: space-between; text-align: left; }
}
/* ════════════════════════════════════════════════════════════════
REDEEM TAB — gift-card grid + cash-payout card. Shares the
launch-preview card language: inset surface, strong borders.
════════════════════════════════════════════════════════════════ */
.redeem-block {
margin-top: 18px;
padding: 20px 22px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-inset);
}
/* Cash-out is disabled pre-launch — mute the whole block behind its
"Coming soon" state. */
.redeem-block.is-disabled { opacity: .6; }
.rb-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.rb-title {
font-size: 15px; font-weight: 800; letter-spacing: -.02em;
color: var(--ink); margin: 0;
}
.rb-badge {
font: 700 10.5px/1.4 var(--mono);
letter-spacing: .07em; text-transform: uppercase;
color: var(--gray); background: var(--bg-tint);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap;
}
/* Gift grid: one row per plan, a cell per term. */
.gift-menu { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 4px; }
.gift-row {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 12px 14px; border: 1px solid var(--border-strong);
border-radius: var(--radius-lg); background: var(--bg-cream);
}
.gift-plan { min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.gp-name { font-weight: 800; font-size: 14.5px; color: var(--ink); letter-spacing: -.01em; }
.gp-tag { font: 500 12px/1.4 var(--mono); color: var(--gray); }
.gift-cells { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.gift-cell {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 12px; min-width: 92px;
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
background: var(--surface-inset); cursor: pointer;
transition: transform .12s, border-color .12s, background .12s;
}
.gift-cell:hover:not([disabled]) { transform: translateY(-1px); border-color: var(--accent); }
.gift-cell.sel {
border-color: var(--accent);
background: rgba(var(--accent-rgb), .07);
box-shadow: 0 0 0 1px var(--accent) inset;
}
.gift-cell[disabled] { opacity: .4; cursor: not-allowed; }
.gc-term { font: 700 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.gc-price { font: 700 13px/1.2 var(--mono); color: var(--ink); }
.redeem-foot {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-strong);
}
.redeem-delivery { display: flex; align-items: center; gap: 8px; }
.rd-text { display: flex; flex-direction: column; gap: 1px; }
.rd-label { font: 700 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.rd-email { font: 600 13px/1.3 var(--mono); color: var(--ink); }
.redeem-summary { margin-left: auto; font-size: 13.5px; color: var(--ink-2); }
.redeem-summary .sum-after { color: var(--gray); }
.redeem-result { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; }
.redeem-result.ok { color: var(--ok-fg, #0a7a3d); }
.redeem-result.err { color: var(--accent); }
/* Payout card states */
.payout-state { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.payout-state p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; max-width: 520px; }
.payout-state .btn-accent { margin-left: auto; }
.payout-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-strong); }
.payout-history h4 {
margin: 0 0 8px; font: 700 10.5px/1.3 var(--mono);
letter-spacing: .06em; text-transform: uppercase; color: var(--gray);
}
.payout-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.payout-history li {
display: flex; align-items: center; gap: 10px;
font: 500 12.5px/1.4 var(--mono); color: var(--ink-2);
}
.po-status {
font: 700 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
border-radius: var(--radius-pill); padding: 2px 8px;
border: 1px solid var(--border-strong); background: var(--bg-tint); color: var(--gray);
}
.po-status.paid { color: var(--ok-fg, #0a7a3d); }
.po-status.failed { color: var(--accent); }
.po-status.rejected { color: var(--accent); }
/* 'requested' + the in-flight 'pending' both read as "awaiting" to the earner. */
.po-status.requested,
.po-status.pending { color: var(--gray); }
@media (max-width: 430px) {
.nav .brand-name { display: none; }
}