@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root { --ink:#172033; --muted:#758096; --line:#e8ebf1; --paper:#f8fafc; --white:#fff; --coral:#ff6b5f; --navy:#1d273b; --blue:#6e9cfb; --green:#41b79a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
button { font:inherit; cursor:pointer; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 6vw; background:var(--white); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; color:white; background:var(--coral); border-radius:10px; font-size:25px; font-weight:700; transform:rotate(-10deg); }
.brand strong,.brand small { display:block; } .brand strong { font-family:"Space Grotesk"; font-size:16px; } .brand small { margin-top:1px; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.topbar-actions { display:flex; align-items:center; gap:23px; color:var(--muted); font-size:12px; } .status-dot { display:flex; align-items:center; gap:7px; } .status-dot i,.live-pill i { width:7px; height:7px; display:inline-block; background:#45be99; border-radius:50%; box-shadow:0 0 0 4px #e6f8f2; }
.avatar { width:34px; height:34px; border:0; color:#fff; background:var(--navy); border-radius:50%; font-size:11px; font-weight:700; }
.shell { max-width:1200px; margin:auto; padding:70px 6vw 90px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:55px; } .eyebrow { margin:0 0 10px; color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; } h1,h2 { font-family:"Space Grotesk"; } h1 { margin:0; max-width:680px; font-size:clamp(42px,5vw,68px); line-height:1.04; letter-spacing:-.055em; } h1 em { color:var(--coral); font-style:normal; } .hero-copy { max-width:500px; margin:21px 0 28px; color:var(--muted); font-size:16px; line-height:1.65; }
.hero-actions { display:flex; gap:12px; } .button { border:0; border-radius:9px; padding:13px 18px; font-size:12px; font-weight:700; } .button-primary { color:#fff; background:var(--coral); box-shadow:0 8px 20px #ff6b5f2e; } .button-primary span { padding-left:17px; font-size:17px; } .button-quiet { color:var(--ink); background:transparent; }
.growth-panel { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:24px; padding:25px 28px; color:#fff; background:linear-gradient(115deg,#18243a,#293b62); border-radius:14px; box-shadow:0 15px 32px #1d273b1c; } .growth-copy { max-width:700px; } .growth-copy .eyebrow { color:#ffb38b; } .growth-copy h2 { margin:0 0 8px; color:#fff; font-size:25px; } .growth-copy p:not(.eyebrow) { margin:0; color:#c8d4e5; font-size:12px; line-height:1.6; } .growth-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; } .growth-badges span { padding:6px 9px; color:#dce7f5; background:#ffffff12; border:1px solid #ffffff1c; border-radius:6px; font-size:10px; } .growth-action { min-width:210px; text-align:center; } .growth-action small { display:block; margin-top:10px; color:#b9c9de; font-size:10px; line-height:1.4; } .button:disabled { cursor:wait; opacity:.7; }
.pulse-card { position:relative; width:245px; height:245px; flex:none; border:1px solid #e1e6f0; border-radius:50%; background:radial-gradient(circle at center,#fff 0 37%,#f0f3f8 38% 39%,transparent 40%),linear-gradient(145deg,#fff,#edf1f7); box-shadow:0 22px 45px #25324a18; } .pulse-orbit { position:absolute; inset:24px; border:1px dashed #cfd7e5; border-radius:50%; } .pulse-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; } .pulse-center span { font-family:"Space Grotesk"; font-size:47px; font-weight:700; letter-spacing:-.07em; } .pulse-center small { color:var(--muted); font-size:10px; line-height:1.4; text-transform:uppercase; letter-spacing:.1em; } .orbit-label { position:absolute; padding:7px 10px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:7px; font-size:10px; box-shadow:0 5px 15px #25324a0d; } .orbit-label strong { display:block; margin-top:2px; color:var(--ink); font-size:13px; } .orbit-label-top { top:15px; right:6px; } .orbit-label-bottom { bottom:14px; left:1px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; } .metric-card { display:flex; align-items:center; gap:14px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:12px; } .metric-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; font-weight:700; } .metric-icon.coral { color:var(--coral); background:#fff0ee; } .metric-icon.blue { color:var(--blue); background:#eef4ff; } .metric-icon.green { color:var(--green); background:#e9faf5; } .metric-card div { flex:1; } .metric-card strong,.metric-card span { display:block; } .metric-card strong { font-family:"Space Grotesk"; font-size:20px; } .metric-card span { margin-top:3px; color:var(--muted); font-size:11px; } .metric-card b { font-size:10px; } .positive { color:var(--green); } .neutral { color:var(--blue); }
.content-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:24px; } .panel { padding:25px; background:#fff; border:1px solid var(--line); border-radius:14px; } .panel-heading { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; } h2 { margin:0; font-size:22px; letter-spacing:-.04em; } .count-pill,.live-pill { padding:6px 9px; color:var(--muted); background:#f4f6fa; border-radius:6px; font-size:10px; } .live-pill { display:flex; align-items:center; gap:7px; color:var(--green); background:#eafaf5; } .article-list,.activity-list { display:grid; gap:10px; } .article-row,.activity-item { display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid #f0f2f5; } .article-row:last-child,.activity-item:last-child { border-bottom:0; } .article-file { display:grid; place-items:center; width:38px; height:38px; color:#cf6d2c; background:#fff4ea; border-radius:9px; font-size:11px; font-weight:700; } .article-row div,.activity-item div { flex:1; } .article-row strong,.activity-item strong { display:block; font-size:12px; } .article-row span,.activity-item span { display:block; margin-top:4px; color:var(--muted); font-size:10px; } .ready { padding:5px 7px; color:var(--green); background:#eafaf5; border-radius:5px; font-size:9px; font-weight:700; } .draft { padding:5px 7px; color:#a16a17; background:#fff6dd; border-radius:5px; font-size:9px; font-weight:700; } .panel-link { display:flex; justify-content:space-between; margin-top:19px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink); font-size:11px; font-weight:700; text-decoration:none; } .platform-icon { display:grid; place-items:center; width:32px; height:32px; color:#fff; border-radius:8px; font-family:"Space Grotesk"; font-weight:700; } .hashnode { background:#2962ff; } .devto { background:#101828; } time { color:#a1aabc; font-size:10px; } .loading { padding:20px 0; color:var(--muted); font-size:12px; } .toast { position:fixed; right:25px; bottom:25px; padding:12px 16px; color:#fff; background:var(--navy); border-radius:8px; box-shadow:0 8px 25px #17203333; opacity:0; transform:translateY(12px); transition:.2s; font-size:12px; } .toast.show { opacity:1; transform:none; }
@media (max-width:760px) { .topbar { padding:0 20px; } .status-dot { display:none; } .shell { padding:42px 20px 60px; } .hero { display:block; } .pulse-card { margin:40px auto 0; } .metrics,.content-grid { grid-template-columns:1fr; } .hero-actions { flex-wrap:wrap; } .growth-panel { display:block; } .growth-action { margin-top:20px; text-align:left; } }