:root { --ink:#10213e; --muted:#64748b; --line:#dce5f0; --navy:#0b1f3a; --blue:#2563eb; --blue-dark:#1d4ed8; --canvas:#f5f8fc; --success:#087b5d; --success-bg:#e8f8f1; --danger:#bd3345; --danger-bg:#fff0f2; --amber:#a05a00; --amber-bg:#fff6df; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:"DM Sans",Arial,sans-serif; line-height:1.5; } h1,h2,p { margin:0; } h1,h2 { font-family:Manrope,sans-serif; letter-spacing:-.035em; } a { color:inherit; }.site-shell { min-height:100vh; }
.auth-layout { display:grid; grid-template-columns:minmax(360px,45%) 1fr; min-height:100vh; }.brand-panel { color:#f8fbff; padding:44px clamp(44px,7vw,112px); background:radial-gradient(circle at 76% 18%,#1c5bb7 0,transparent 31%),radial-gradient(circle at 21% 93%,#123d78 0,transparent 33%),var(--navy); display:flex; flex-direction:column; }.brand { display:inline-flex; width:max-content; align-items:center; gap:10px; text-decoration:none; font:700 18px Manrope,sans-serif; letter-spacing:-.04em; }.brand-mark { display:inline-grid; place-items:center; width:31px; height:31px; border-radius:9px; background:#fff; color:#1353aa; font:800 17px Manrope,sans-serif; }.brand-copy { margin:auto 0; max-width:445px; }.brand-copy h1 { font-size:clamp(38px,4vw,60px); line-height:1.08; margin:14px 0 18px; }.brand-copy>p:last-child { max-width:380px; color:#c8dcf8; font-size:17px; }.brand-footer { color:#9fc2eb; font-size:13px; }.eyebrow { color:var(--blue); font-size:11px; line-height:1.2; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.brand-panel .eyebrow { color:#91c0ff; }
.auth-panel { display:grid; place-items:center; padding:48px 32px; background:#fff; }.auth-card { width:min(100%,430px); }.mobile-brand { display:none; font:700 18px Manrope,sans-serif; align-items:center; gap:10px; margin-bottom:45px; }.auth-card h2 { font-size:31px; line-height:1.2; margin:10px 0 8px; }.intro { color:var(--muted); font-size:15px; margin-bottom:30px; }.form-stack { display:grid; gap:8px; }.form-stack label { color:#34445e; margin-top:8px; font-size:13px; font-weight:700; }.form-stack input { min-width:0; height:48px; padding:0 14px; border:1px solid #cad5e4; border-radius:9px; background:#fff; color:var(--ink); font:15px inherit; transition:border .2s,box-shadow .2s; }.form-stack input::placeholder { color:#93a3b8; }.form-stack input:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 4px #2563eb1a; }
button,.button-link { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:49px; margin-top:18px; border:0; border-radius:9px; background:var(--blue); color:#fff; cursor:pointer; font:700 15px "DM Sans",sans-serif; text-decoration:none; transition:background .2s,transform .2s; } button:hover,.button-link:hover { background:var(--blue-dark); transform:translateY(-1px); }.auth-switch { margin-top:25px; color:var(--muted); text-align:center; font-size:14px; }.auth-switch a { color:var(--blue); font-weight:700; text-decoration:none; }.auth-switch a:hover { text-decoration:underline; }.alert { margin:0 0 20px; border:1px solid; border-radius:9px; padding:11px 13px; font-size:13px; }.alert ul { margin:0; padding-left:17px; }.alert-error { color:var(--danger); border-color:#facbd1; background:var(--danger-bg); }.alert-success { color:var(--success); border-color:#bcebd9; background:var(--success-bg); }
.resend-form { margin-top:10px; }.resend-form .secondary-button { width:100%; min-height:42px; margin-top:0; border:1px solid #b9c9df; background:#fff; color:#2455a6; }.resend-form .secondary-button:hover { border-color:#7c9ed1; background:#f4f8ff; }
.dashboard-shell { width:min(1180px,calc(100% - 48px)); margin:auto; padding:24px 0 56px; }.topbar { min-height:58px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.topbar .brand { color:var(--ink); }.topbar .brand-mark { background:#1353aa; color:#fff; }.account-menu { display:flex; align-items:center; gap:10px; color:#33455f; font-size:14px; font-weight:600; }.account-menu a { margin-left:10px; color:var(--blue); text-decoration:none; font-weight:700; }.account-menu .panel-link { margin-left:12px; padding:7px 10px; border:1px solid #bfd0e8; border-radius:7px; color:#2455a6; font-size:13px; }.account-menu .panel-link:hover { background:#f2f7ff; }.avatar { display:inline-grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:#dbeafe; color:#1e4a9d; font-size:12px; font-weight:700; }.avatar.small { width:30px; height:30px; }.dashboard-header { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:60px 0 34px; }.dashboard-header h1 { margin:9px 0 8px; font-size:34px; line-height:1.15; }.dashboard-header>div>p:last-child { color:var(--muted); }.live-status { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color:var(--success); background:var(--success-bg); border-radius:99px; padding:8px 12px; font-size:13px; font-weight:700; }.live-status i { width:7px; height:7px; border-radius:50%; background:#16a374; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.stat-card,.content-card { border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 4px 18px #1f3b6508; }.stat-card { min-height:152px; padding:23px; display:flex; flex-direction:column; }.stat-label,.stat-detail { color:var(--muted); font-size:13px; }.stat-card strong { margin:9px 0 auto; font:800 34px Manrope,sans-serif; letter-spacing:-.05em; }.content-card { margin-top:26px; overflow:hidden; }.section-heading { padding:24px 24px 19px; display:flex; justify-content:space-between; align-items:center; }.section-heading h2 { margin-top:7px; font-size:20px; }.record-count { color:var(--muted); font-size:13px; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:680px; } th { padding:13px 24px; background:#f8fafc; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#6a7b92; text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; } td { padding:16px 24px; border-bottom:1px solid #e8eef5; color:#55677f; font-size:14px; } tr:last-child td { border-bottom:0; }.member { display:flex; align-items:center; gap:10px; }.member strong,.member span { display:block; }.member strong { color:var(--ink); font-size:14px; }.member span { margin-top:1px; color:var(--muted); font-size:12px; }.status { display:inline-block; padding:4px 9px; border-radius:99px; font-size:11px; font-weight:700; }.status-success { color:var(--success); background:var(--success-bg); }.status-pending { color:var(--amber); background:var(--amber-bg); }.empty-state { text-align:center; padding:35px; }
.message-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 15% 15%,#d8e9ff 0,transparent 26%),var(--canvas); }.message-card { width:min(100%,490px); padding:48px; border:1px solid var(--line); border-radius:16px; background:#fff; text-align:center; box-shadow:0 20px 55px #183c7015; }.message-card h1 { margin:12px 0; font-size:32px; }.message-card>p:not(.eyebrow) { color:var(--muted); }.success-icon,.error-icon { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 23px; border-radius:50%; font-size:25px; font-weight:700; }.success-icon { color:var(--success); background:var(--success-bg); }.error-icon { color:var(--danger); background:var(--danger-bg); }.message-card .button-link { width:100%; margin-top:29px; }
.store-hero { display:flex; justify-content:space-between; align-items:end; gap:32px; padding:60px 0 37px; }.store-hero h1 { max-width:640px; margin:9px 0 12px; font-size:39px; line-height:1.13; }.store-hero>div>p:last-child { max-width:610px; color:var(--muted); font-size:16px; }.launch-link { min-width:145px; margin:0; white-space:nowrap; }.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }.product-card { position:relative; display:flex; flex-direction:column; padding:26px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 4px 18px #1f3b6508; }.product-card.featured { border:2px solid var(--blue); padding:25px; box-shadow:0 14px 35px #2563eb18; }.popular-label { position:absolute; top:-13px; right:20px; border-radius:99px; padding:4px 9px; background:var(--blue); color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.product-card h2 { margin:8px 0 10px; font-size:24px; }.product-description { min-height:48px; color:var(--muted); font-size:14px; }.product-price { margin:22px 0 17px; font:800 33px Manrope,sans-serif; letter-spacing:-.05em; }.product-price span { color:var(--muted); font:500 12px "DM Sans",sans-serif; letter-spacing:0; }.product-card ul { flex:1; margin:0 0 19px; padding:0; list-style:none; }.product-card li { padding:7px 0; color:#435671; font-size:13px; }.product-card li::before { content:'✓'; margin-right:8px; color:var(--success); font-weight:800; }.product-card form button,.product-card button { width:100%; }.product-card .unavailable { cursor:not-allowed; background:#e7edf5; color:#7c8ca0; }.product-card .unavailable:hover { background:#e7edf5; transform:none; }.licenses-section { margin-top:42px; }.licenses-section .section-heading { padding:0 0 16px; }.licenses-section .section-heading>a { color:var(--blue); font-size:14px; font-weight:700; text-decoration:none; }.license-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:15px; }.license-card { padding:20px; border:1px solid var(--line); border-radius:12px; background:#fff; }.license-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }.license-product { color:var(--muted); font-size:13px; font-weight:700; }.license-card code { display:block; overflow:hidden; padding:10px; border-radius:7px; background:#f5f8fc; color:#254f91; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.license-card p,.license-card small { display:block; color:var(--muted); font-size:12px; }.license-card p { margin:13px 0 7px; }.empty-licenses { display:flex; align-items:center; gap:14px; padding:24px; border:1px dashed #b9c9dc; border-radius:12px; background:#fff; }.empty-licenses>span { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:#e7f0ff; color:#2860ba; font-size:24px; }.empty-licenses strong { font-size:14px; }.empty-licenses p { margin-top:2px; color:var(--muted); font-size:13px; }
.member-hero { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:60px 0 34px; }.member-hero h1 { margin:9px 0 8px; font-size:34px; line-height:1.15; }.member-hero>div>p:last-child { color:var(--muted); }.profile-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:20px; }.profile-card,.next-card { padding:28px; }.profile-heading { display:flex; align-items:center; gap:14px; margin:19px 0 24px; }.profile-heading h2,.next-card h2 { font-size:22px; }.profile-heading p,.next-card>p:last-of-type { color:var(--muted); font-size:14px; }.profile-avatar { width:48px; height:48px; font-size:17px; }.account-details { margin:0; }.account-details div { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:14px 0; border-top:1px solid #e8eef5; }.account-details dt { color:var(--muted); font-size:13px; }.account-details dd { margin:0; color:#34455d; font-size:13px; font-weight:600; text-align:right; }.next-card>p:last-of-type { margin:13px 0 25px; max-width:340px; }.readiness { display:flex; align-items:center; gap:11px; padding:14px; border-radius:10px; background:var(--success-bg); color:var(--success); }.readiness>span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#c7efdf; font-weight:800; }.readiness strong,.readiness small { display:block; }.readiness strong { font-size:13px; }.readiness small { margin-top:1px; font-size:12px; }
@media (max-width:900px) { .product-grid { grid-template-columns:1fr; max-width:520px; }.product-description { min-height:0; } }
@media (max-width:760px) { .auth-layout { display:block; }.brand-panel { display:none; }.auth-panel { min-height:100vh; padding:36px 24px; }.mobile-brand { display:flex; }.stats-grid,.profile-grid { grid-template-columns:1fr; }.dashboard-shell { width:min(100% - 32px,1180px); }.dashboard-header,.member-hero,.store-hero { padding:38px 0 26px; align-items:start; flex-direction:column; }.dashboard-header h1,.member-hero h1,.store-hero h1 { font-size:29px; }.account-menu>span:not(.avatar) { display:none; }.account-menu a { margin-left:2px; }.section-heading { padding:20px; }.message-card { padding:36px 25px; } }