:root {
  --bg: #061416;
  --bg-deep: #020b0d;
  --panel: rgba(8, 22, 26, .94);
  --panel-2: rgba(12, 32, 37, .94);
  --line: rgba(123, 223, 219, .14);
  --line-strong: rgba(94, 226, 206, .28);
  --text: #f3fbfb;
  --muted: #99aeb1;
  --accent: #2fe3b2;
  --accent-2: #0fa7ca;
  --warning: #ffcc62;
  --warning-soft: rgba(255, 204, 98, .18);
  --danger: #ff7d7d;
  --sidebar-width: 258px;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
a, button { -webkit-tap-highlight-color: transparent; color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.portal-bg { position: fixed; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 12% 0%, rgba(28, 196, 183, .18), transparent 28%),
  radial-gradient(circle at 88% 10%, rgba(34, 111, 147, .18), transparent 30%),
  linear-gradient(145deg, #041012 0%, #071b1d 48%, #031012 100%);
}
.portal-bg::after { content:''; position:absolute; inset:0; opacity:.22; background-image: radial-gradient(rgba(127, 255, 235, .32) .7px, transparent .9px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }

.portal-shell { position: relative; min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.portal-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px 18px; background: rgba(3, 14, 17, .94); border-right: 1px solid var(--line); backdrop-filter: blur(22px); z-index: 30; }
.portal-brand { display: flex; align-items: center; min-height: 64px; padding: 4px 10px 22px; border-bottom: 1px solid var(--line); text-decoration: none; }
.portal-brand img { width: 176px; max-width: 100%; height: auto; display: block; }
.portal-nav { display: grid; gap: 7px; padding: 20px 0; overflow-y: auto; }
.portal-nav-item, .portal-logout { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 14px; border-radius: 13px; color: #a9b9bb; font-weight: 720; font-size: 15px; text-decoration: none; text-align: left; transition: .2s ease; }
.portal-nav-item:hover, .portal-logout:hover { color: #fff; background: rgba(45, 226, 179, .08); }
.portal-nav-item.is-active { color: #fff; background: linear-gradient(90deg, rgba(47, 227, 178, .18), rgba(24, 120, 139, .12)); box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(51, 219, 190, .09); }
.portal-nav-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; color: currentColor; }
.portal-nav-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-sidebar-bottom { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }

.portal-main-wrap { min-width: 0; }
.portal-topbar { position: sticky; top: 0; z-index: 20; min-height: 82px; display: flex; align-items: center; gap: 18px; padding: 13px clamp(20px, 3vw, 44px); background: rgba(5, 18, 20, .76); border-bottom: 1px solid var(--line); backdrop-filter: blur(22px); }
.portal-menu-button { display: none; width: 43px; height: 43px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); padding: 10px; }
.portal-menu-button span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: #dce8e8; }
.portal-topbar-copy { display: grid; gap: 2px; }
.portal-page-kicker { font-size: 10px; letter-spacing: .18em; color: var(--accent); font-weight: 900; }
.portal-topbar-copy strong { font-size: 18px; }
.portal-user-chip { margin-left: auto; display: flex; align-items: center; gap: 11px; min-width: 0; }
.portal-user-avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), #178fa2); color: #031311; font-weight: 950; box-shadow: 0 10px 26px rgba(22, 201, 163, .2); }
.portal-user-copy { display: grid; min-width: 0; }
.portal-user-copy strong, .portal-user-copy small { max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.portal-user-copy strong { font-size: 14px; }
.portal-user-copy small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.portal-user-balance { margin-left: 8px; border: 1px solid rgba(47, 227, 178, .22); color: var(--accent); background: rgba(47, 227, 178, .08); padding: 9px 12px; border-radius: 11px; font-weight: 900; }

.portal-content { width: min(1440px, 100%); margin: 0 auto; padding: clamp(22px, 3.5vw, 48px); }
.portal-section { animation: sectionIn .26s ease both; }
@keyframes sectionIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.portal-alert { position: sticky; top: 96px; z-index: 25; margin-bottom: 16px; padding: 14px 18px; border-radius: 13px; background: rgba(47, 227, 178, .14); border: 1px solid rgba(47, 227, 178, .32); color: #dffff5; font-weight: 700; box-shadow: 0 18px 55px rgba(0,0,0,.26); }
.portal-alert.is-error { background: rgba(255, 93, 93, .12); border-color: rgba(255, 93, 93, .35); color: #ffd7d7; }
.section-eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; font-weight: 950; color: var(--accent); }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading-row h1, .competition-hero h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.06; letter-spacing: -.04em; }
.section-heading-row p:not(.section-eyebrow), .competition-hero > p:last-child { max-width: 860px; margin: 12px 0 0; color: var(--muted); line-height: 1.7; }
.portal-card, .withdraw-card, .leaderboard-card, .help-card, .profile-details-card, .profile-hero-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(11,32,36,.95), rgba(6,21,25,.95)); border-radius: var(--radius); box-shadow: 0 24px 65px rgba(0,0,0,.18); }
.portal-card, .leaderboard-card { padding: 24px; }
.portal-card-head { display:flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 18px; }
.portal-card-head p { margin: 0 0 5px; font-size: 10px; letter-spacing: .16em; color: var(--accent); font-weight: 900; }
.portal-card-head h2 { margin: 0; font-size: 21px; }

.welcome-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) 320px; gap: 26px; padding: 32px; border-radius: 28px; border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(10, 42, 48, .96), rgba(6, 20, 26, .96)); box-shadow: 0 32px 80px rgba(0,0,0,.25); }
.welcome-card::before { content:''; position:absolute; width: 300px; height: 300px; left:-90px; top:-120px; border-radius:50%; background: radial-gradient(circle, rgba(47,227,178,.13), transparent 70%); }
.welcome-copy { max-width: 740px; position: relative; z-index: 1; }
.welcome-card h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; line-height: 1.1; }
.welcome-card h1 strong { color: var(--accent); }
.welcome-card p:last-child { margin: 14px 0 0; color: #acc1c3; line-height: 1.7; }
.welcome-user-panel { position: relative; z-index: 1; padding: 20px; border-radius: 22px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); align-self: stretch; display: grid; gap: 20px; }
.welcome-user-top { display:flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.welcome-user-badge { display:inline-flex; min-height: 34px; align-items:center; padding: 0 12px; border-radius: 999px; background: rgba(47,227,178,.08); border: 1px solid rgba(47,227,178,.2); color: var(--accent); font-size: 12px; font-weight: 900; }
.welcome-user-top strong { font-size: 46px; color: var(--warning); line-height: 1; }
.welcome-user-body { display:grid; gap: 16px; }
.welcome-user-body div { display:grid; gap: 5px; }
.welcome-user-body span { font-size: 12px; color: var(--muted); }
.welcome-user-body strong { font-size: 28px; }

.summary-grid, .referral-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.summary-card { min-width: 0; display: flex; align-items: center; gap: 15px; min-height: 116px; padding: 19px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(150deg, rgba(14,39,42,.94), rgba(7,25,29,.93)); }
.summary-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: rgba(47, 227, 178, .09); border: 1px solid rgba(47,227,178,.17); }
.summary-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.summary-card div { min-width: 0; display: grid; gap: 5px; }
.summary-card span:not(.summary-icon) { color: var(--muted); font-size: 12px; }
.summary-card strong { font-size: clamp(22px, 2.3vw, 31px); overflow: hidden; text-overflow: ellipsis; }
.home-grid { display:grid; grid-template-columns:1fr; gap: 20px; }

.featured-sites-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.featured-site-card { position: relative; overflow: hidden; padding: 22px; border-radius: 20px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(145deg, rgba(9, 32, 37, .96), rgba(5, 18, 23, .96)); }
.featured-site-card::after { content:''; position:absolute; width: 220px; height: 220px; left:-120px; top:-70px; border-radius:50%; background: radial-gradient(circle, rgba(var(--nebula), .22), transparent 72%); pointer-events:none; }
.featured-site-top { display:flex; align-items:center; gap: 14px; }
.featured-site-top img { width: 58px; height: 58px; border-radius: 16px; object-fit: contain; background: #fff; padding: 5px; }
.featured-site-top h3 { margin: 0; font-size: 24px; }
.featured-site-badge { display:inline-flex; margin-top: 4px; min-height: 30px; align-items:center; padding: 0 12px; border-radius: 999px; background: rgba(47,227,178,.08); border:1px solid rgba(47,227,178,.18); color: var(--accent); font-size: 12px; font-weight: 900; }
.featured-site-score { margin-left: auto; padding: 8px 14px; border-radius: 14px; background: rgba(255, 204, 98, .1); border: 1px solid rgba(255, 204, 98, .18); color: var(--warning); font-size: 18px; }
.featured-site-body { margin-top: 18px; display:grid; gap: 8px; }
.featured-site-body span { color: var(--accent); font-size: 11px; letter-spacing: .13em; font-weight: 900; }
.featured-site-body p { margin: 0; color: #d4e0e0; line-height: 1.7; min-height: 54px; }
.featured-site-button, .portal-site-button, .portal-primary-button, .task-start, .task-complete { display:inline-flex; justify-content:center; align-items:center; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 0; text-decoration:none; font-weight: 900; }
.featured-site-button, .portal-site-button, .portal-primary-button, .task-start, .task-complete { background: linear-gradient(135deg, #d7fff4, #aaf2e8); color: #06211b; box-shadow: 0 12px 28px rgba(14, 56, 52, .35); }
.featured-site-button { margin-top: 20px; }
.portal-primary-button:hover, .featured-site-button:hover, .portal-site-button:hover, .task-start:hover, .task-complete:hover { transform: translateY(-1px); }
.portal-primary-button:disabled, .task-start:disabled, .task-complete:disabled { opacity: .55; cursor: default; transform: none; }

.portal-tabs { display:flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.portal-tab { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: #c7d6d6; min-height: 46px; padding: 0 16px; border-radius: 14px; font-weight: 850; display:inline-flex; align-items:center; gap: 10px; }
.portal-tab.is-active { color: #08201b; background: var(--accent); border-color: var(--accent); }
.tab-count { display:inline-grid; place-items:center; min-width: 24px; height: 24px; border-radius: 999px; background: rgba(0,0,0,.12); font-size: 11px; font-weight: 900; }

.tasks-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.task-card { position: relative; overflow: hidden; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(10, 32, 37, .98), rgba(5, 18, 23, .97)); box-shadow: 0 22px 60px rgba(0,0,0,.18); }
.task-card::after { content:''; position:absolute; width: 180px; height: 180px; border-radius:50%; right:-80px; top:-80px; background: radial-gradient(circle, rgba(47,227,178,.12), transparent 70%); pointer-events:none; }
.task-card-top { display:flex; justify-content:space-between; gap: 14px; align-items:flex-start; }
.task-index { color: #c7d4d6; font-size: 11px; letter-spacing: .14em; font-weight: 900; }
.task-status { display:inline-flex; min-height: 30px; align-items:center; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.04); color: #d5dfdf; font-size: 12px; font-weight: 900; }
.task-status.is-started { background: rgba(47,227,178,.12); color: var(--accent); }
.task-status.is-submitted { background: rgba(255,204,98,.1); color: var(--warning); }
.task-status.is-approved { background: rgba(47,227,178,.12); color: var(--accent); }
.task-status.is-rejected { background: rgba(255,120,120,.12); color: #ffc1c1; }
.task-card h3 { margin: 16px 0 6px; font-size: 22px; line-height: 1.34; }
.task-short { margin: 0; color: var(--muted); line-height: 1.6; min-height: 50px; }
.task-reward-wrap { display:grid; place-items:center; margin: 20px 0 16px; padding: 16px; border-radius: 20px; border: 1px solid rgba(255,204,98,.16); background: linear-gradient(180deg, rgba(255, 204, 98, .09), rgba(255,255,255,.02)); text-align:center; }
.task-reward-label { color: #eed69b; font-size: 11px; letter-spacing: .14em; font-weight: 900; text-transform: uppercase; }
.task-reward { color: var(--warning); font-size: clamp(30px, 4vw, 42px); font-weight: 950; text-shadow: 0 0 22px rgba(255, 204, 98, .24); }
.task-meta { margin: 0; color: #c6d3d4; line-height: 1.7; }
.task-details-toggle { margin-top: 15px; width: 100%; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); color:#dce6e6; min-height: 44px; padding: 0 14px; border-radius: 13px; display:flex; justify-content:space-between; align-items:center; font-weight: 800; }
.task-details-toggle svg { width: 18px; height: 18px; fill:none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.task-details { max-height: 0; overflow:hidden; opacity:0; transition: max-height .24s ease, opacity .22s ease; }
.task-card.is-open .task-details { max-height: 210px; opacity:1; }
.task-card.is-open .task-details-toggle svg { transform: rotate(180deg); }
.task-details p { margin: 14px 0 0; color: #9fb1b3; line-height: 1.75; }
.task-actions { display:flex; gap: 12px; align-items:center; margin-top: 18px; }
.task-actions > * { flex: 1; }
.task-review-message { padding: 14px 16px; border-radius: 15px; border:1px solid rgba(255,204,98,.16); background: rgba(255,204,98,.08); color: #f7e3ac; font-weight: 800; line-height: 1.6; }

.portal-sites-list { display:grid; gap: 20px; }
.portal-site-card { position: relative; overflow:hidden; display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 18px; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(10, 28, 33, .97), rgba(6, 18, 22, .97)); box-shadow: 0 24px 68px rgba(0,0,0,.19); }
.portal-site-card::before { content:''; position:absolute; width: 320px; height: 320px; left: -190px; top: -100px; border-radius:50%; background: radial-gradient(circle, rgba(var(--nebula), .25), transparent 70%); opacity: .55; pointer-events:none; transition: transform .35s ease, opacity .35s ease; }
.portal-site-card:hover::before { transform: translate(20px, 10px) scale(1.08); opacity:.85; }
.portal-site-brand-col { display:grid; align-content:space-between; gap: 18px; min-width:0; }
.portal-site-brand { display:flex; align-items:center; gap: 16px; }
.portal-site-brand img { width: 82px; height: 82px; border-radius: 22px; object-fit: contain; background:#fff; padding: 8px; }
.portal-site-brand strong { display:block; font-size: 30px; margin-bottom: 8px; }
.portal-site-badge { display:inline-flex; min-height: 34px; align-items:center; padding: 0 14px; border-radius: 999px; border:1px solid rgba(47,227,178,.18); background: rgba(47,227,178,.08); color: var(--accent); font-size: 13px; font-weight: 900; }
.portal-site-button { width: 180px; }
.portal-site-box { padding: 18px 20px; border-radius: 18px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); position:relative; }
.portal-site-box-head { display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 14px; }
.portal-site-box-head span { font-size: 11px; letter-spacing: .14em; color: var(--accent); font-weight: 900; }
.portal-site-box-head strong { color: var(--warning); font-size: 24px; }
.portal-site-box ul { margin: 0; padding: 0; list-style: none; display:grid; gap: 12px; }
.portal-site-box li { position:relative; padding-left: 18px; color: #d9e4e5; line-height: 1.65; }
.portal-site-box li::before { content:''; position:absolute; left:0; top: .68em; width: 8px; height: 8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(47,227,178,.1); }
.portal-site-box-head-score strong { font-size: 21px; }

.competition-hero { margin-bottom: 22px; }
.competition-prize-banner { display:grid; grid-template-columns: repeat(4, minmax(0, auto)) 1fr; gap: 12px; align-items: stretch; margin-bottom: 20px; }
.competition-banner-item, .competition-banner-note { border:1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(13,36,40,.96), rgba(6,21,24,.97)); padding: 16px 18px; display:grid; gap: 6px; }
.competition-banner-item span, .competition-banner-note { color: var(--muted); font-size: 12px; }
.competition-banner-item strong { color: var(--warning); font-size: 24px; }
.competition-banner-note { display:grid; place-items:center; color: var(--accent); font-weight: 900; }
.podium { display:grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 16px; align-items:end; margin-bottom: 24px; }
.podium-card { min-height: 190px; display:grid; place-content:center; text-align:center; padding:22px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(145deg, rgba(17,39,42,.97), rgba(7,22,25,.97)); }
.podium-card.position-1 { min-height: 250px; border-color: rgba(255,211,92,.28); background:linear-gradient(145deg, rgba(73,62,26,.75), rgba(10,29,30,.96)); }
.podium-medal { width:58px; height:58px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; background:#879196; color:#111; font-size:24px; font-weight:950; }
.position-1 .podium-medal { width:72px; height:72px; background:#f4ca4c; }
.position-3 .podium-medal { background:#c9835d; }
.podium-card h3 { margin:0 0 6px; font-size:20px; overflow:hidden; text-overflow:ellipsis; }
.podium-card p { margin:0; color:var(--muted); font-size:13px; }
.podium-card strong { display:block; margin-top:9px; color:var(--text); font-size:23px; }
.podium-prize { display:inline-flex; justify-content:center; margin: 14px auto 0; padding: 8px 16px; border-radius: 999px; background: rgba(255,204,98,.12); color: var(--warning); font-weight: 900; }
.leaderboard-head, .leaderboard-row { display:grid; grid-template-columns: 62px minmax(180px, 1fr) 160px 150px 120px; gap: 12px; align-items:center; }
.leaderboard-head { padding: 0 8px 14px; color: var(--muted); font-size: 12px; font-weight: 900; border-bottom: 1px solid rgba(255,255,255,.06); }
.leaderboard-body { display:grid; gap: 10px; padding-top: 16px; }
.leaderboard-row { padding: 14px 8px; border-radius: 15px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.045); }
.leaderboard-rank { font-size: 18px; font-weight: 900; color: var(--warning); }
.leaderboard-user { display:flex; align-items:center; gap: 12px; min-width:0; }
.leaderboard-avatar { width: 40px; height: 40px; border-radius: 50%; display:grid; place-items:center; background: linear-gradient(145deg, rgba(47,227,178,.22), rgba(20,123,143,.22)); color: var(--accent); font-weight: 950; }
.leaderboard-user strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-prize { color: var(--warning); font-weight: 900; }

.profile-layout { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 18px; }
.profile-hero-card { padding: 26px; display:grid; gap: 22px; }
.profile-hero-top { display:flex; align-items:center; gap: 18px; }
.profile-avatar { width: 98px; height: 98px; border-radius: 28px; display:grid; place-items:center; background: linear-gradient(145deg, var(--accent), #178da1); color: #03201a; font-size: 40px; font-weight: 950; box-shadow: 0 20px 50px rgba(29,207,170,.18); }
.profile-hero-copy h2 { margin: 0 0 8px; font-size: 28px; }
.profile-hero-copy p { margin: 0; color: var(--muted); overflow-wrap:anywhere; }
.profile-status-pill { display:inline-flex; margin-top: 14px; min-height: 34px; align-items:center; padding: 0 14px; border-radius: 999px; background: rgba(47,227,178,.08); border:1px solid rgba(47,227,178,.18); color: var(--accent); font-size: 12px; font-weight: 900; }
.profile-highlights { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-highlights div { padding: 18px; border-radius: 18px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); display:grid; gap: 8px; }
.profile-highlights span { color: var(--muted); font-size: 12px; }
.profile-highlights strong { font-size: 28px; }
.profile-details-card { padding: 24px; display:grid; gap: 16px; align-content:start; }
.profile-detail-row { display:grid; gap: 10px; padding: 16px 18px; border-radius: 18px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); }
.profile-detail-row span { color: var(--muted); font-size: 12px; }
.profile-detail-row strong { font-size: 18px; overflow-wrap:anywhere; }
.language-switch { display:inline-flex; flex-wrap: wrap; width:max-content; max-width:100%; padding:5px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.18); }
.language-option { min-height:40px; padding:0 18px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-weight:900; }
.language-option.is-active { color:#03201a; background:var(--accent); }

.balance-badge { flex:0 0 auto; padding:13px 18px; border-radius:14px; border:1px solid rgba(47,227,178,.23); background:rgba(47,227,178,.08); display:grid; gap:2px; }
.balance-badge span { color:var(--muted); font-size:10px; }
.balance-badge strong { color:var(--accent); font-size:23px; }
.withdraw-card, .help-card { padding:25px; }
#withdraw-form { display:grid; gap:19px; }
.portal-field { display:grid; gap:8px; color:#c9d5d5; font-size:12px; font-weight:800; }
.portal-field input, .portal-field textarea { width:100%; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.22); color:#fff; outline:none; padding:14px 15px; transition:border-color .2s ease, box-shadow .2s ease; }
.portal-field input:focus, .portal-field textarea:focus { border-color:rgba(47,227,178,.48); box-shadow:0 0 0 3px rgba(47,227,178,.08); }
.portal-field textarea { min-height:118px; resize:vertical; line-height:1.6; }
.payment-options { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.payment-option { min-height:96px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); color:#cad8d8; display:flex; align-items:center; gap: 14px; padding: 14px; text-align:left; }
.payment-option img { width: 58px; height: 58px; object-fit: contain; border-radius: 14px; background: rgba(255,255,255,.03); padding: 4px; flex: 0 0 auto; }
.payment-option div { display:grid; gap: 5px; min-width:0; }
.payment-option strong { font-size: 16px; }
.payment-option span { color: var(--muted); font-size: 12px; }
.payment-option.is-selected { color:#06221c; background: linear-gradient(135deg, #d7fff4, #aaf2e8); border-color: rgba(255,255,255,0); }
.payment-option.is-selected span { color: rgba(6,34,28,.75); }
.withdraw-success { margin-top:18px; padding:16px; border-radius:13px; color:#cffff1; background:rgba(47,227,178,.1); border:1px solid rgba(47,227,178,.25); font-weight:800; }
.withdrawal-history-card { margin-top:20px; }
.history-list, .referral-list { display:grid; gap:9px; }
.history-row, .referral-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; align-items:center; padding:13px 14px; border:1px solid rgba(255,255,255,.045); border-radius:12px; background:rgba(255,255,255,.018); color:#c2cece; font-size:12px; }
.status-pill { justify-self:start; display:inline-flex; align-items:center; min-height:25px; padding:0 9px; border-radius:20px; background:rgba(255,255,255,.06); font-size:10px; font-weight:900; }
.status-pill.pending, .status-pill.approved { color:#ffe0a2; background:rgba(255,185,64,.09); }
.status-pill.paid, .status-pill.available, .status-pill.started { color:#bcffe7; background:rgba(47,227,178,.09); }
.status-pill.rejected { color:#ffc4c4; background:rgba(255,90,90,.09); }
.referral-link-card { margin:20px 0; }
.copy-field { display:flex; gap:9px; }
.copy-field input { min-width:0; flex:1; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.22); color:#c6d8d8; padding:13px 15px; outline:none; }
.copy-field button { border:0; border-radius:12px; padding:0 20px; background:var(--accent); color:#03201a; font-weight:950; }
.referral-row { grid-template-columns:1.3fr 1.3fr 1fr 1fr; }
.referral-row-head{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.06em;background:rgba(47,227,178,.035)}
.help-card { max-width:900px; }
.help-card form { display:grid; gap:15px; }
.help-rule { margin:0; color:#8ca0a1; font-size:12px; }
.portal-access { min-height:100vh; display:grid; place-items:center; padding:24px; background:#071517; }
.portal-access > div { width:min(520px,100%); padding:36px; text-align:center; border:1px solid var(--line); border-radius:24px; background:var(--panel); }
.portal-access h1 { margin:0 0 10px; }
.portal-access p { color:var(--muted); }
.portal-access a { display:inline-flex; margin-top:10px; padding:12px 17px; border-radius:11px; background:var(--accent); color:#03201a; font-weight:950; text-decoration:none; }

.proof-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(0,8,10,.78); backdrop-filter:blur(10px); }
.proof-modal-dialog { position:relative; width:min(720px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:30px; border-radius:24px; border:1px solid var(--line-strong); background:linear-gradient(145deg,#0d2a2d,#07171b); box-shadow:0 40px 120px rgba(0,0,0,.55); }
.proof-modal-close { position:absolute; right:17px; top:15px; width:37px; height:37px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.04); color:#fff; font-size:24px; }
.proof-modal-dialog h2 { margin:0; font-size:30px; }
.proof-task-name { margin:7px 0 18px; color:var(--accent); font-weight:900; }
.proof-instructions { padding:17px; margin-bottom:19px; border-radius:15px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.055); }
.proof-instructions p { margin:0 0 9px; color:#d6e1e1; line-height:1.6; }
.proof-instructions ul { margin:0; padding-left:20px; color:#9fb0b1; line-height:1.7; font-size:13px; }
#proof-upload-form { display:grid; gap:15px; }
.proof-file-field { display:grid; place-items:center; min-height:130px; padding:20px; border:1px dashed rgba(47,227,178,.35); border-radius:16px; background:rgba(47,227,178,.04); text-align:center; cursor:pointer; }
.proof-file-field input { position:absolute; opacity:0; pointer-events:none; }
.proof-file-field span { color:var(--accent); font-weight:950; }
.proof-file-field small { margin-top:6px; color:var(--muted); }
.proof-error { padding:12px 14px; border-radius:11px; color:#ffd0d0; background:rgba(255,80,80,.09); border:1px solid rgba(255,80,80,.22); font-weight:800; }
.empty-state { padding:26px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px; }

@media (max-width: 1180px) {
  .tasks-grid { grid-template-columns: 1fr; }
  .portal-site-card { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
  .featured-sites-grid { grid-template-columns: 1fr; }
  .competition-prize-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .summary-grid, .referral-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .payment-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .leaderboard-head, .leaderboard-row { grid-template-columns: 54px minmax(145px,1fr) 110px 100px 100px; }
}
@media (max-width: 860px) {
  .portal-shell { grid-template-columns:1fr; }
  .portal-sidebar { position:fixed; left:0; top:0; width:min(300px,88vw); transform:translateX(-105%); transition:transform .24s ease; box-shadow:30px 0 80px rgba(0,0,0,.45); }
  body.sidebar-open .portal-sidebar { transform:none; }
  body.sidebar-open::after { content:''; position:fixed; inset:0; z-index:25; background:rgba(0,0,0,.55); }
  .portal-menu-button { display:block; }
  .portal-user-copy { display:none; }
  .portal-content { padding:22px 16px 38px; }
  .portal-topbar { padding:12px 15px; }
  .welcome-card { grid-template-columns: 1fr; }
  .leaderboard-head, .leaderboard-row { grid-template-columns: 46px minmax(125px,1fr) 80px 88px 80px; gap: 8px; }
  .history-row, .referral-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .portal-user-balance { font-size:12px; }
  .summary-grid, .referral-summary-grid, .payment-options, .profile-highlights { grid-template-columns:1fr; }
  .section-heading-row { align-items:flex-start; flex-direction:column; }
  .portal-tabs { display:grid; grid-template-columns: 1fr 1fr; }
  .task-actions { flex-direction:column; }
  .leaderboard-head { display:none; }
  .leaderboard-row { grid-template-columns: 52px 1fr; }
  .leaderboard-row > span:nth-child(3), .leaderboard-row > span:nth-child(4), .leaderboard-row > span:nth-child(5) { justify-self:start; }
  .competition-prize-banner { grid-template-columns: 1fr; }
  .podium { grid-template-columns:1fr; align-items:stretch; }
  .podium-card.position-1 { order:-1; min-height:190px; }
  .copy-field { flex-direction:column; }
  .copy-field button { min-height:46px; }
  .payment-option { min-height: 84px; }
  .proof-modal-dialog { padding:25px 18px; }
}

/* === v18.5 dashboard refresh === */
.portal-topbar {
  justify-content: space-between;
}
.portal-topbar-copy strong {
  font-size: 22px;
  letter-spacing: -.03em;
}
.portal-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.topbar-select {
  border: 0;
  outline: 0;
  background: transparent;
  color: #ecf7f7;
  font-weight: 800;
  min-width: 92px;
}
.topbar-select option { color: #111; }
.portal-user-avatar-button {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
}
.portal-user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f5d18b, #df8d40 55%, #75451e);
  color: #111;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.08);
}
.portal-user-balance {
  margin-left: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 194, 79, .26);
  color: #ffd176;
  background: linear-gradient(145deg, rgba(255, 194, 79, .14), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.dashboard-hero {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
  margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: 0 24px 56px rgba(0,0,0,.24);
}
.dashboard-hero-icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255, 214, 118, .2), rgba(255, 186, 70, .08));
  color: #ffd76e;
  font-size: 34px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 36px rgba(0,0,0,.2);
}
.dashboard-hero-copy h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.dashboard-hero-copy h1 strong { color: #ff9a42; }
.dashboard-hero-copy p:last-child {
  margin: 10px 0 0;
  max-width: 680px;
  color: #a8b8bb;
  line-height: 1.7;
}
.dashboard-hero-level {
  min-width: 130px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  text-align: right;
}
.dashboard-hero-level span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}
.dashboard-hero-level strong {
  font-size: 28px;
  letter-spacing: -.03em;
}
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.dashboard-metric-card {
  padding: 20px 22px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  display: grid;
  gap: 8px;
}
.dashboard-metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dashboard-metric-card strong {
  font-size: clamp(25px, 2.5vw, 36px);
  letter-spacing: -.04em;
}
.metric-balance strong { color: #ffd176; }
.home-sites-card { padding: 24px; }
.home-sites-stack { gap: 18px; }
.home-sites-card .portal-card-head { margin-bottom: 18px; }

.competition-hero > p:last-child {
  max-width: 980px;
}
.competition-prize-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.competition-banner-item {
  display: inline-grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 194, 79, .22);
  background: rgba(255, 194, 79, .08);
  min-width: 190px;
}
.competition-banner-item span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d8c9a0;
}
.competition-banner-item strong {
  color: #ffd176;
  font-size: 28px;
  letter-spacing: -.03em;
}
.competition-banner-note {
  color: #9aaeb1;
  font-size: 12px;
  font-weight: 700;
}

/* site cards copied to logged-in sites/home area */
.portal-sites-list { display: grid; gap: 18px; }
.site-card {
  --nebula-primary: 54 216 205;
  --nebula-secondary: 102 180 255;
  --nebula-highlight: 233 255 252;
  --nebula-shadow: 3 45 50;
  position: relative;
  display: grid;
  grid-template-columns: minmax(290px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(123, 223, 219, .18);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(8, 34, 39, 0.96), rgba(3, 20, 24, 0.98));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.site-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgb(var(--nebula-secondary) / 0.1), transparent 42%), linear-gradient(90deg, rgb(var(--nebula-shadow) / 0.08), transparent 34%);
  transition: opacity 300ms ease;
  pointer-events: none;
}
.site-card:hover,
.site-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgb(var(--nebula-secondary) / 0.34);
  background: linear-gradient(145deg, rgba(8, 37, 42, 0.97), rgba(3, 21, 25, 0.99));
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.34), 0 0 38px rgb(var(--nebula-primary) / 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  outline: none;
}
.site-card:hover::before,
.site-card:focus-visible::before { opacity: 1; }
.card-nebula {
  position: absolute;
  z-index: 1;
  top: -15%;
  bottom: -15%;
  left: -4%;
  width: 34%;
  opacity: 0;
  transform: translateX(-18%) scale(0.88);
  transform-origin: left center;
  pointer-events: none;
  filter: saturate(1.12) contrast(1.04);
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.72) 76%, transparent 100%);
  transition: opacity 460ms ease, transform 720ms cubic-bezier(0.18, 0.72, 0.2, 1), filter 460ms ease;
}
.card-nebula::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 8% 52%, rgb(var(--nebula-highlight) / 0.34) 0%, transparent 13%), radial-gradient(ellipse at 12% 45%, rgb(var(--nebula-primary) / 0.68) 0%, rgb(var(--nebula-primary) / 0.24) 24%, transparent 51%), radial-gradient(ellipse at 36% 58%, rgb(var(--nebula-secondary) / 0.5) 0%, rgb(var(--nebula-secondary) / 0.13) 29%, transparent 58%), radial-gradient(ellipse at 18% 20%, rgb(var(--nebula-highlight) / 0.24) 0%, transparent 34%), radial-gradient(ellipse at 48% 78%, rgb(var(--nebula-primary) / 0.26) 0%, transparent 46%), linear-gradient(90deg, rgb(var(--nebula-shadow) / 0.44), transparent 88%);
  filter: blur(5px);
  animation: nebula-breathe 5.2s ease-in-out infinite alternate;
}
.card-nebula::after {
  content: "";
  position: absolute;
  inset: 6% 4% 4% 0;
  background-image: radial-gradient(circle at 8% 16%, rgb(var(--nebula-highlight) / 0.96) 0 1px, transparent 1.8px), radial-gradient(circle at 14% 72%, rgb(var(--nebula-highlight) / 0.82) 0 0.9px, transparent 1.6px), radial-gradient(circle at 19% 39%, rgb(var(--nebula-highlight) / 0.92) 0 1.25px, transparent 2px), radial-gradient(circle at 25% 84%, rgb(var(--nebula-secondary) / 0.88) 0 1px, transparent 1.8px), radial-gradient(circle at 31% 24%, rgb(var(--nebula-highlight) / 0.74) 0 0.8px, transparent 1.5px), radial-gradient(circle at 38% 64%, rgb(var(--nebula-highlight) / 0.92) 0 1.2px, transparent 2px), radial-gradient(circle at 44% 43%, rgb(var(--nebula-primary) / 0.88) 0 1px, transparent 1.8px), radial-gradient(circle at 52% 17%, rgb(var(--nebula-highlight) / 0.78) 0 0.9px, transparent 1.6px), radial-gradient(circle at 57% 79%, rgb(var(--nebula-secondary) / 0.86) 0 1.05px, transparent 1.8px), radial-gradient(circle at 65% 50%, rgb(var(--nebula-highlight) / 0.78) 0 0.8px, transparent 1.5px), radial-gradient(circle at 73% 28%, rgb(var(--nebula-highlight) / 0.86) 0 0.95px, transparent 1.7px), radial-gradient(circle at 80% 70%, rgb(var(--nebula-primary) / 0.76) 0 0.9px, transparent 1.6px), radial-gradient(circle at 88% 44%, rgb(var(--nebula-highlight) / 0.7) 0 0.75px, transparent 1.4px);
  filter: drop-shadow(0 0 4px rgb(var(--nebula-highlight) / 0.38));
  animation: star-drift 4.8s ease-in-out infinite alternate;
}
.site-card:hover .card-nebula,
.site-card:focus-visible .card-nebula {
  opacity: 0.88;
  transform: translateX(0) scale(1.04);
  filter: saturate(1.18) contrast(1.06);
}
@keyframes nebula-breathe { from { transform: translate3d(-2%, 1%, 0) scale(0.98); opacity: 0.82; } to { transform: translate3d(4%, -2%, 0) scale(1.05); opacity: 1; } }
@keyframes star-drift { from { transform: translate3d(-4px, 3px, 0); } to { transform: translate3d(12px, -5px, 0); } }
.card-border-animation {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.border-beam {
  fill: none;
  stroke: #c5fbf6;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 150 1400;
  stroke-dashoffset: 0;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(175, 255, 248, 0.94)) drop-shadow(0 0 11px rgba(75, 216, 205, 0.5));
}
.beam-meeting-glow {
  fill: #defffc;
  opacity: 0;
  transform-origin: 500px 239px;
  filter: drop-shadow(0 0 5px rgba(188, 255, 250, 0.95)) drop-shadow(0 0 12px rgba(64, 204, 194, 0.55));
}
.site-card:hover .card-border-animation,
.site-card:focus-visible .card-border-animation { opacity: .96; }
.site-card:hover .border-beam,
.site-card:focus-visible .border-beam { animation: border-beam-travel 2.25s cubic-bezier(0.2, 0.68, 0.25, 1) forwards; }
.site-card:hover .beam-meeting-glow,
.site-card:focus-visible .beam-meeting-glow { animation: beam-meet 2.25s ease forwards; }
@keyframes border-beam-travel { 0% { stroke-dashoffset: 0; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: var(--beam-end, -1050); opacity: 0.96; } }
@keyframes beam-meet { 0%,90% { opacity: 0; transform: scale(0.65); } 100% { opacity: 0.94; transform: scale(1); } }
.site-card-main,
.site-card-info { position: relative; z-index: 3; }
.site-card-main {
  display: flex;
  min-height: 218px;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
}
.site-identity { display: flex; align-items: center; gap: 18px; }
.site-logo-wrap {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(183, 235, 230, 0.23);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 28px rgba(0, 0, 0, 0.19);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.site-card:hover .site-logo-wrap,
.site-card:focus-visible .site-logo-wrap {
  transform: translateY(-1px);
  border-color: rgb(var(--nebula-secondary) / 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 12px 32px rgba(0, 0, 0, 0.22), 0 0 22px rgb(var(--nebula-primary) / 0.12);
}
.site-logo { width: 100%; height: 100%; object-fit: cover; }
.site-name { margin: 0 0 4px; font-size: 1.52rem; letter-spacing: -0.03em; text-shadow: 0 2px 13px rgba(0, 0, 0, 0.38); }
.site-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(142, 226, 191, 0.23);
  border-radius: 999px;
  color: #8ff7d4;
  background: rgba(44, 117, 91, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-size: 0.76rem;
  font-weight: 760;
}
.visit-link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid rgba(221, 255, 252, 0.38);
  border-radius: 13px;
  color: #031819;
  background: linear-gradient(145deg, #dcfffb, #76d9d1);
  box-shadow: 0 10px 24px rgba(32, 141, 135, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-size: 0.87rem;
  font-weight: 830;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}
.visit-link::before {
  content: "";
  position: absolute;
  top: -80%; left: -45%; width: 28%; height: 260%;
  background: rgba(255,255,255,.58);
  transform: rotate(22deg);
  transition: left 520ms ease;
}
.site-card:hover .visit-link,
.site-card:focus-visible .visit-link {
  transform: translateY(-2px);
  filter: brightness(1.045);
  box-shadow: 0 14px 30px rgba(31, 151, 144, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.site-card:hover .visit-link::before,
.site-card:focus-visible .visit-link::before { left: 122%; }
.visit-link svg { width: 16px; height: 16px; }
.site-card-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border-left: 1px solid rgba(123, 223, 219, .12);
  background: rgba(255, 255, 255, 0.016);
}
.info-box {
  min-height: 184px;
  padding: 22px;
  border: 1px solid rgba(148, 205, 204, 0.13);
  border-radius: 18px;
  background: rgba(2, 16, 19, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.site-card:hover .info-box,
.site-card:focus-visible .info-box {
  transform: translateY(-1px);
  border-color: rgba(144, 225, 218, 0.2);
  background: rgba(2, 18, 21, 0.54);
}
.info-box-heading,
.info-box-heading-score { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.info-box-heading-score { justify-content: space-between; flex-wrap: wrap; }
.info-icon {
  display: inline-flex;
  width: 18px; height: 18px;
  border: 1px solid rgba(121, 224, 215, 0.24);
  border-radius: 6px;
  background: rgba(61, 185, 175, 0.08);
}
.info-box-label { font-size: 14px; font-weight: 900; letter-spacing: .04em; color: #d9f3f0; }
.site-rating {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 212, 112, .26);
  color: #ffe092;
  background: rgba(255, 194, 79, .12);
  font-weight: 900;
}
.payment-list,
.feature-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #d6e2e2;
}
.payment-list li,
.feature-list li { position: relative; padding-left: 18px; line-height: 1.6; }
.payment-list li::before,
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #70efbf;
  box-shadow: 0 0 10px rgba(112,239,191,.35);
}
.feature-list li::before { background: #ffd271; box-shadow: 0 0 10px rgba(255,210,113,.35); }
.payment-method-text { display: inline-block; }

/* payment area refinements */
.visual-payment-options { margin-top: 4px; }
.payment-options { gap: 14px; }
.payment-option {
  min-height: 108px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.018));
  color: #eff9f8;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.payment-option:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.12); }
.payment-option-logo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.07);
  flex: 0 0 auto;
}
.payment-option img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.payment-option-copy { display: grid; gap: 6px; min-width: 0; }
.payment-option strong { font-size: 17px; letter-spacing: -.02em; }
.payment-option span { color: var(--muted); font-size: 12px; }
.payment-option.is-selected {
  color: #06221c;
  background: linear-gradient(135deg, #fff3d2, #ffd579 45%, #f2c55c);
  border-color: rgba(255,255,255,0);
  box-shadow: 0 20px 34px rgba(255, 194, 79, .18), inset 0 1px 0 rgba(255,255,255,.5);
}
.payment-option.is-selected span { color: rgba(6,34,28,.7); }

@media (max-width: 1180px) {
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-card { grid-template-columns: 1fr; }
  .site-card-info { border-left: 0; border-top: 1px solid rgba(123, 223, 219, .12); }
}
@media (max-width: 860px) {
  .portal-topbar-right { gap: 8px; }
  .topbar-select-wrap { min-height: 42px; padding: 0 10px; }
  .portal-user-balance { padding: 0 12px; min-height: 42px; }
  .dashboard-hero { grid-template-columns: 1fr; align-items: flex-start; }
  .dashboard-hero-level { text-align: left; min-width: 0; }
}
@media (max-width: 640px) {
  .portal-topbar-copy strong { font-size: 18px; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .site-card-main { padding: 22px; min-height: auto; }
  .site-card-info { grid-template-columns: 1fr; }
  .payment-options { grid-template-columns: 1fr; }
  .payment-option-logo-wrap { width: 64px; height: 64px; }
  .payment-option img { width: 48px; height: 48px; }
}