@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@500&display=swap");

:root { --brand:#ee0b00; --brand-dark:#a90800; --brand-soft:#fff0ef; --canvas:#f9f9fb; --surface:#fff; --ink:#020019; --muted:#81819b; --border:#e8e8ef; --danger:#d9264d; --success:#16805e; --radius-control:4px; --radius-button:8px; --radius-card:12px; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; background:var(--canvas); color:var(--ink); font-family:"Manrope", sans-serif; font-size:15px; line-height:1.45; }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
button,input,textarea { font:inherit; }
.site-header { height:56px; background:var(--surface); border-bottom:1px solid var(--border); }
.header-inner,.page-shell { width:min(1160px, calc(100% - 32px)); margin:0 auto; }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:18px; font-weight:800; text-decoration:none; }
.brand-logo { display:block; width:auto; height:27px; }
nav { display:flex; align-items:center; gap:18px; font-size:14px; font-weight:600; } nav form { margin:0; }.link-button { padding:0; border:0; background:none; color:var(--muted); cursor:pointer; }
.page-shell { padding:42px 0 72px; }.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); }.eyebrow { margin:0 0 8px; color:var(--muted); font-family:"Roboto Mono", monospace; font-size:11px; letter-spacing:0; }.muted { color:var(--muted); }.notice { margin:0 0 16px; padding:11px 14px; border:1px solid #d9d2ff; border-radius:var(--radius-button); background:#f5f2ff; color:var(--brand-dark); }.button { display:inline-flex; min-height:40px; padding:0 15px; align-items:center; justify-content:center; border:1px solid var(--brand); border-radius:var(--radius-button); background:var(--brand); color:#fff; cursor:pointer; font-weight:700; text-decoration:none; }.button:hover { background:var(--brand-dark); border-color:var(--brand-dark); text-decoration:none; }.button-secondary { background:#fff; color:var(--brand); }.button-secondary:hover { color:#fff; }
.auth-layout { display:grid; grid-template-columns:1fr 405px; gap:86px; max-width:920px; margin:46px auto; align-items:center; }.auth-copy h1,.dashboard-head h1,.flag-panel h1 { margin:0; font-size:36px; line-height:1.15; letter-spacing:0; }.auth-copy > p:last-child { max-width:470px; color:var(--muted); font-size:17px; }.form-panel { padding:25px; }.form-panel h2,.panel h2 { margin:0; font-size:19px; }.form-panel label { display:grid; gap:6px; margin-top:16px; font-size:13px; font-weight:700; } input,textarea { width:100%; padding:10px 11px; border:1px solid #d7d7e1; border-radius:var(--radius-control); outline:none; color:var(--ink); } input:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgb(74 0 239 / 12%); }textarea { resize:vertical; }.form-panel .button { width:100%; margin-top:22px; }.form-foot { margin:16px 0 0; color:var(--muted); font-size:13px; }.field-help { margin:10px 0 0; color:var(--muted); font-size:12px; }
.dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }.dashboard-head h1 { font-size:28px; }.dashboard-head .muted { margin:5px 0 0; }.account-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:12px; margin-bottom:12px; }.balance-card,.support-card { min-height:166px; padding:22px; }.balance-card p,.support-card p { margin:0; font-weight:700; }.balance-card span,.support-card > span { display:block; margin-top:14px; color:var(--muted); font-size:13px; }.balance-card strong { display:block; margin-top:2px; font-size:36px; line-height:1.1; }.support-card .button { margin-top:17px; }.status { display:inline-block; margin:14px 0 0; padding:4px 8px; border-radius:4px; background:#edf8f4; color:var(--success); font-size:12px; font-weight:700; }.form-message { font-size:13px; }.success { color:var(--success); }.content-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }.content-grid .panel { padding:22px; }.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:12px; }.section-heading h2 { font-size:18px; }.section-heading span { color:var(--muted); font-size:12px; }.catalog { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }.product,.transactions > div { display:flex; min-height:58px; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--border); }.product div:first-child,.transactions span { display:grid; gap:2px; }.product span { color:var(--muted); font-size:12px; }.product b { font-size:13px; }.product div:last-child { display:flex; align-items:center; gap:8px; }.product strong,.transactions strong { white-space:nowrap; font-size:13px; }.icon-button { display:grid; width:27px; height:27px; place-items:center; border:1px solid #d8cdfb; border-radius:50%; background:#fff; color:var(--brand); cursor:pointer; font-size:20px; line-height:1; }.icon-button:hover { background:var(--brand); color:#fff; }.expense { color:var(--ink); }.income { color:var(--success); }
.profile-grid,.support-user-grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(300px, .8fr); gap:12px; align-items:start; }.profile-preview,.support-user-grid .panel { padding:24px; }.profile-preview h2 { margin:0; font-size:25px; }.profile-preview hr,.support-user-grid hr { margin:22px 0; border:0; border-top:1px solid var(--border); }.description { overflow-wrap:anywhere; }.description p:first-child { margin-top:0; }.description img { max-width:100%; }.facts { display:grid; gap:16px; margin:0; }.facts div { display:flex; justify-content:space-between; gap:16px; }.facts dt { color:var(--muted); }.facts dd { margin:0; font-weight:700; text-align:right; }.review-list { display:grid; }.review-row { display:flex; min-height:67px; padding:0 21px; align-items:center; justify-content:space-between; border-top:1px solid var(--border); color:var(--ink); text-decoration:none; }.review-row:first-child { border-top:0; }.review-row div { display:grid; gap:2px; }.review-row span:not(.status) { color:var(--muted); font-size:12px; }.flag-panel { max-width:620px; margin:48px auto; padding:35px; }.flag-panel > p:not(.eyebrow) { color:var(--muted); }.flag-panel code { display:block; margin-top:18px; padding:15px; overflow-wrap:anywhere; border:1px solid #d8cdfb; border-radius:var(--radius-control); background:#f6f3ff; color:var(--brand-dark); font-family:"Roboto Mono", monospace; }
@media (max-width:760px) { .header-inner,.page-shell { width:min(100% - 24px, 1160px); }.page-shell { padding-top:28px; }.auth-layout,.account-grid,.content-grid,.profile-grid,.support-user-grid { grid-template-columns:1fr; gap:12px; }.auth-layout { margin:18px 0; }.auth-copy h1,.dashboard-head h1,.flag-panel h1 { font-size:29px; }.dashboard-head { align-items:flex-start; flex-direction:column; }.catalog { grid-template-columns:1fr; }.site-header { height:auto; min-height:56px; }.header-inner { padding:9px 0; gap:12px; } nav { gap:10px; font-size:12px; }.review-row { padding:0 14px; } }

input:focus,
textarea:focus {
	box-shadow: 0 0 0 3px rgb(238 11 0 / 12%);
}

.notice {
	border-color: var(--border);
	background: var(--surface);
	color: var(--ink);
}

.icon-button {
	border-color: #ffc9c5;
}

.flag-panel code {
	border-color: #ffc9c5;
	background: var(--brand-soft);
	color: var(--brand-dark);
}

.status-failed {
	background: #fff0ef;
	color: var(--brand-dark);
}