@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { color-scheme:dark; --v-bg:#090909; --v-panel:#121212; --v-line:#ffffff12; --v-text:#f5f5f7; --v-muted:#949494; --v-accent:#ef3340; --v-display:'Space Grotesk',sans-serif; --v-body:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.site-v2 { margin:0; background:var(--v-bg); color:var(--v-text); font:15px/1.6 var(--v-body); }
.site-v2 a { color:inherit; text-decoration:none; }
.site-v2 button,.site-v2 input { font:inherit; }
.site-v2 :focus-visible { outline:2px solid var(--v-accent); outline-offset:5px; }
.shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.site-nav { display:flex; align-items:center; justify-content:space-between; height:92px; gap:24px; border-bottom:1px solid var(--v-line); }
.wordmark { display:flex; align-items:center; gap:10px; font:700 24px var(--v-display); letter-spacing:-1px; }
.wordmark b { color:var(--v-accent); font-size:30px; }
.nav-links { display:flex; gap:32px; color:#a5a5a5; font-size:13px; }
.nav-links a:hover { color:#fff; }
.nav-actions { display:flex; align-items:center; gap:24px; font-size:13px; }
.v-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:13px 22px; background:var(--v-accent); color:#ffffff!important; border:1px solid var(--v-accent); border-radius:9px; font-weight:700; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.v-button:hover { transform:translateY(-2px); box-shadow:0 8px 28px #ef334020; }
.v-button.secondary { background:#ffffff06; color:#e7e7ed!important; border-color:#ffffff1b; }
.eyebrow { font:500 11px var(--v-body); text-transform:uppercase; letter-spacing:2px; color:var(--v-accent); display:flex; align-items:center; gap:8px; }
.eyebrow::before { content:''; width:6px; height:6px; background:var(--v-accent); border-radius:50%; box-shadow:0 0 12px #ef334060; }
.home-hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:60px; padding:95px 0 85px; }
.home-hero h1 { font:500 clamp(52px,5.4vw,78px)/1.04 var(--v-display); letter-spacing:-5px; margin:26px 0; }
.home-hero h1 em { font-style:normal; color:var(--v-accent); }
.home-hero p { color:var(--v-muted); max-width:390px; font-size:15px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-note { display:flex; gap:9px; margin-top:20px; color:#767676; font-size:11px; }
.hero-note i { color:var(--v-accent); }
.profile-stage { position:relative; min-height:470px; display:grid; place-items:center; border:1px solid #ffffff0c; border-radius:24px; background:radial-gradient(ellipse at 50% 60%,#5b22272e,transparent 70%),linear-gradient(135deg,#181818,#0d0d0d); overflow:visible; }
.stage-grid { position:absolute; inset:0; border-radius:24px; overflow:hidden; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(transparent,#000,transparent); }
.demo-profile { position:relative; width:300px; padding:32px 24px 20px; text-align:center; border:1px solid #ffffff20; border-radius:20px; background:linear-gradient(160deg,#252525bd,#151515ed); box-shadow:0 30px 70px #0008; backdrop-filter:blur(20px); transform:rotate(-5deg); transition:transform .4s; }
.profile-stage:hover .demo-profile { transform:rotate(0); }
.demo-avatar { width:76px; height:76px; margin:0 auto 15px; border-radius:50%; background:radial-gradient(circle at 35% 20%,#eeeeee,#818181 30%,#292929 70%); display:grid; place-items:center; color:#ffffff; font-size:45px; border:4px solid #bbbbbb20; box-shadow:0 0 35px #ef334018; }
.demo-profile h2 { margin:0; font:600 25px var(--v-display); letter-spacing:-1px; }
.demo-profile h2 i { font-size:16px; color:var(--v-accent); }
.demo-profile p { font-size:11px; margin:8px auto 16px; }
.demo-badges,.badge-preview-rail { display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; margin:12px auto; padding:6px 11px; border:1px solid #ffffff24; border-radius:30px; background:#ffffff08; box-shadow:0 0 16px #ffffff0a; }
.demo-badges i,.badge-preview-rail i { font-size:16px; color:#fff; filter:drop-shadow(0 0 3px #fff8); }
.demo-links { display:flex; justify-content:center; gap:20px; font-size:22px; color:#c9cec7; margin:22px 0; }
.demo-meta { display:flex; justify-content:space-between; border-top:1px solid #ffffff0d; padding-top:14px; font-size:10px; color:#898989; }
.float-label { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #ffffff15; border-radius:12px; background:#1a1a1aef; box-shadow:0 10px 30px #0006; font-size:11px; }
.float-label i { color:var(--v-accent); font-size:20px; }.float-label small { display:block; color:#858585; font-size:9px; }
.float-label.one { top:45px; right:-18px; transform:rotate(5deg); }.float-label.two { bottom:44px; left:-26px; transform:rotate(3deg); }
.stage-tag { position:absolute; bottom:15px; right:18px; color:#656565; font:10px var(--v-body); letter-spacing:2px; }
.stats-strip { display:grid; grid-template-columns:1.3fr repeat(3,1fr); padding:28px 0; border-top:1px solid var(--v-line); border-bottom:1px solid var(--v-line); align-items:center; }
.stats-strip>p { color:var(--v-muted); font-size:12px; max-width:150px; }.stat-item { border-left:1px solid var(--v-line); padding-left:40px; }.stat-item strong { font:500 28px var(--v-display); }.stat-item span { display:block; font-size:11px; color:var(--v-muted); margin-top:3px; }
.home-section { padding:88px 0; }.section-heading-v2 { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }.section-heading-v2 h2 { font:500 clamp(30px,3vw,42px)/1.15 var(--v-display); letter-spacing:-1.8px; margin:14px 0 0; }.section-heading-v2>p { max-width:290px; font-size:13px; color:var(--v-muted); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.feature-card { border:1px solid var(--v-line); border-radius:16px; padding:27px; background:linear-gradient(145deg,#161616,#0f0f0f); transition:border-color .2s,transform .2s; }.feature-card:hover { border-color:#ef334040; transform:translateY(-3px); }.feature-card>i { display:grid; place-items:center; width:38px; height:38px; border:1px solid #ef334020; background:#ef334009; border-radius:10px; color:var(--v-accent); font-size:20px; }.feature-card h3 { font:500 17px var(--v-display); margin:23px 0 9px; }.feature-card p { font-size:12px; color:var(--v-muted); line-height:1.8; margin:0; }.feature-card .mini-art { height:65px; display:flex; align-items:center; gap:8px; margin-top:24px; padding:12px; border-radius:8px; background:#ffffff03; border:1px solid #ffffff08; }
.color-dot { width:21px; height:21px; border-radius:50%; background:var(--dot); }.mini-bar { height:5px; width:var(--bar,30%); border-radius:20px; background:#ef334050; }.music-art { display:flex; gap:4px; align-items:center; height:34px; }.music-art b { width:4px; height:var(--height); background:var(--v-accent); border-radius:5px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; border-top:1px solid var(--v-line); padding-top:25px; }.step-num { color:#9d6268; font:500 12px var(--v-display); }.steps h3 { font:500 19px var(--v-display); }.steps p { color:var(--v-muted); font-size:13px; max-width:280px; }
.faq-wrap { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; }.faq-wrap h2 { font:500 40px/1.15 var(--v-display); letter-spacing:-2px; }.faq-list details { border-bottom:1px solid var(--v-line); padding:20px 0; }.faq-list summary { cursor:pointer; font-size:14px; list-style:none; display:flex; justify-content:space-between; gap:12px; }.faq-list summary::after { content:'+'; color:var(--v-accent); }.faq-list details[open] summary::after { content:'−'; }.faq-list p { font-size:13px; color:var(--v-muted); max-width:480px; }
.final-cta { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:50px; margin:20px 0 70px; border:1px solid #ef334020; background:radial-gradient(ellipse at 100% 50%,#ef334012,transparent 70%),#141414; border-radius:18px; }.final-cta h2 { margin:0 0 8px; font:500 35px var(--v-display); letter-spacing:-1.5px; }.final-cta p { color:var(--v-muted); font-size:13px; margin:0; }.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px 0; border-top:1px solid var(--v-line); }.site-footer small { color:#6b6b6b; font-size:11px; }.site-footer .wordmark { font-size:18px; }
/* A shared visual language for every existing application surface. */
body.cs-body,body.coldshot-auth-page,body.coldshot-studio,body.coldshot-admin,body.badge-shop { --display:var(--v-display); --body:var(--v-body); --ember:#ef3340; --ember-hi:#ff747d; --red:#ef3340; --red-hi:#ff747d; --accent-primary:#ef3340; --accent-secondary:#c92230; background:radial-gradient(ellipse at 10% 0%,#ef334007,transparent 55%),#090909!important; }
.cs-body h1,.cs-body h2,.badge-shop h1,.badge-shop h2 { font-family:var(--v-display); }
.cs-body .cs-panel,.badge-shop .panel,.coldshot-studio .panel,.coldshot-admin .glass-card { background:linear-gradient(140deg,#171717,#111111)!important; border:1px solid #ffffff12!important; box-shadow:0 12px 40px #0002!important; border-radius:18px; }
.cs-body .cs-brand-mark,.cs-body .cs-edit,.cs-body .cs-cta,.badge-shop .pill.red,.badge-shop .button,.coldshot-studio .save-button,.coldshot-studio .brand b,.coldshot-auth-page button { background:#ef3340!important; color:#ffffff!important; box-shadow:0 4px 20px #ef334015!important; }
.cs-body .cs-top { background:#0d0d0ded; border-bottom:1px solid #ffffff10; }
.cs-body .cs-link:hover { border-color:#ef334050; }.cs-body .cs-hero h1 { letter-spacing:-2px; }.cs-body .cs-share { border-color:#ffffff17; background:#ffffff03; }
.coldshot-auth-page h1 { background:none; -webkit-text-fill-color:#f5f5f7; color:#f5f5f7; font-family:var(--v-display); letter-spacing:-1px; }.coldshot-auth-page .card { border-radius:22px; background:linear-gradient(140deg,#1a1a1a,#121212); box-shadow:0 30px 100px #0007; }.coldshot-auth-page a { color:#ef3340; }
.coldshot-studio .section-icon { color:#ef3340; border-color:#ef334030; background:#ef33400a; }.coldshot-studio input:checked { background:#ef3340!important; }.coldshot-studio .control:focus { border-color:#ef334070; box-shadow:0 0 0 4px #ef33400b; }
.badge-shop .method input:checked+span.card { border-color:#ef334070; background:#ef334009; box-shadow:0 0 0 3px #ef334009; }.badge-shop .method input:checked+span.card i { color:#ef3340; background:#ef334010; }.badge-shop .stage { background:radial-gradient(ellipse at 50% 0,#ef334010,transparent 70%),#0e0e0e; }.badge-shop .hero { margin-top:45px; }
.image-drop { display:grid!important; gap:6px; padding:22px; border:1px dashed #ffffff30; border-radius:16px; text-align:center; background:#ffffff03; cursor:pointer; }.image-drop>i { color:var(--v-accent); font-size:27px; }.image-drop span,.image-drop small { font-size:11px; color:#949494; }.image-drop input { width:100%; margin:10px 0; font-size:12px; }.image-drop:focus-within { outline:2px solid #ef3340; }
.badge-art { width:24px; height:24px; object-fit:contain; flex-shrink:0; }.badge-shop .badge,.coldshot-admin .badge { gap:7px; }.badge-preview-rail img { width:24px; height:24px; object-fit:contain; }.badge-preview-rail img[hidden] { display:none; }
.coldshot-profile .pf-roles { box-shadow:0 0 13px #ffffff20,inset 0 0 9px #ffffff08; backdrop-filter:blur(8px); }.coldshot-profile .pf-role.is-img img.badge-art { width:20px; height:20px; object-fit:contain; filter:drop-shadow(0 0 3px #ffffff50); }
.quick-launch { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 22px; }.quick-launch a { display:flex; gap:13px; align-items:center; border:1px solid #ffffff12; border-radius:13px; padding:17px; background:#ffffff02; transition:background .2s; }.quick-launch a:hover { background:#ef334008; border-color:#ef334040; }.quick-launch i { color:#ef3340; font-size:23px; }.quick-launch strong { display:block; font-size:12px; }.quick-launch small { display:block; color:#898989; font-size:11px; }
.profile-health { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:15px 18px; margin:0 0 20px; border:1px solid #ef334020; border-radius:13px; background:#ef334005; font-size:12px; }.health-meter { width:110px; height:5px; border-radius:10px; background:#ffffff10; overflow:hidden; }.health-meter span { display:block; height:100%; background:#ef3340; }.profile-health a { margin-left:auto; color:#ef3340; }
@media(max-width:900px) { .home-hero { gap:35px; padding-top:65px; }.home-hero h1 { letter-spacing:-3px; }.float-label.one { right:-8px; }.float-label.two { left:-8px; }.nav-links { display:none; }.faq-wrap { gap:35px; } }
@media(max-width:680px) { .shell { width:calc(100% - 32px); }.site-nav { height:76px; }.nav-actions { gap:12px; }.nav-actions .v-button { padding:9px 13px; }.home-hero { grid-template-columns:1fr; padding:45px 0; gap:35px; }.home-hero h1 { font-size:58px; }.profile-stage { min-height:410px; margin:0 6px; }.stats-strip { grid-template-columns:repeat(3,1fr); }.stats-strip>p { display:none; }.stat-item { padding-left:17px; }.stat-item:first-of-type { border:0; }.stat-item strong { font-size:24px; }.feature-grid,.steps,.faq-wrap { grid-template-columns:1fr; }.home-section { padding:55px 0; }.section-heading-v2 { align-items:start; flex-direction:column; gap:6px; }.feature-card .mini-art { height:45px; }.steps { gap:22px; }.steps h3 { margin:8px 0; }.faq-wrap { gap:0; }.final-cta { padding:28px; align-items:start; flex-direction:column; }.site-footer { flex-wrap:wrap; }.quick-launch { grid-template-columns:1fr; }.quick-launch a { padding:12px 16px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
/* Refine the admin shell and shared status treatments. */
body.coldshot-admin { --cs-ember:#ef3340;--cs-red:#d92332;--cs-ember-soft:#ef334010; }
.coldshot-admin .sidebar { background:#121212;box-shadow:none; }
.coldshot-admin .header-title { background:none;-webkit-text-fill-color:#f4f5f6;font-family:var(--v-display);letter-spacing:-1.5px; }
.coldshot-admin .sidebar .nav-link.active,.coldshot-admin .sidebar .nav-link:hover { background:#ef334010;color:#ef3340;box-shadow:none; }
.cs-body .cs-tag.is-role { border-color:#ef334030;background:#ef334008; }
.cs-body .cs-ring::before { background:radial-gradient(circle,#ef334018,transparent 65%); }