.ccpst-app{
--ccpst-card:#0d1b31;
--ccpst-card-2:#12233d;
--ccpst-text:#eef4ff;
--ccpst-muted:#9baecc;
--ccpst-line:rgba(255,255,255,.10);
--ccpst-line-strong:rgba(255,255,255,.18);
--ccpst-accent:#8dc8ff;
--ccpst-accent-2:#7ff0d7;
--ccpst-accent-3:#ffbe78;
--ccpst-danger:#ff8d8d;
--ccpst-shadow:0 30px 80px rgba(2,8,20,.34);
color:var(--ccpst-text);
font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.ccpst-app *,.ccpst-app *::before,.ccpst-app *::after{
box-sizing:border-box;
}
.ccpst-hero,
.ccpst-workbench,
.ccpst-summary,
.ccpst-card,
.ccpst-history-card,
.ccpst-final-card,
.ccpst-empty-state{
position:relative;
border:1px solid var(--ccpst-line);
border-radius:30px;
background:
radial-gradient(circle at top right, rgba(141,200,255,.08), transparent 26%),
linear-gradient(180deg,rgba(13,27,49,.96),rgba(8,16,29,.96));
box-shadow:var(--ccpst-shadow);
overflow:hidden;
}
.ccpst-hero{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
gap:18px;
padding:28px;
}
.ccpst-kicker{
display:inline-flex;
align-items:center;
gap:10px;
margin:0 0 14px;
color:#dcecff;
font-size:12px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.ccpst-kicker::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,var(--ccpst-accent),var(--ccpst-accent-2));
box-shadow:0 0 0 6px rgba(141,200,255,.10);
}
.ccpst-hero__copy h2,
.ccpst-form-card__head h3,
.ccpst-card h3,
.ccpst-history-card h3,
.ccpst-summary__copy h3,
.ccpst-final-card h3{
margin:0;
color:#fff;
letter-spacing:-.03em;
line-height:1.06;
}
.ccpst-hero__copy h2{
font-size:clamp(2rem,4vw,3.7rem);
max-width:12ch;
}
.ccpst-hero__copy p,
.ccpst-form-card__head p,
.ccpst-card p,
.ccpst-history-card p,
.ccpst-summary__copy p,
.ccpst-final-card p,
.ccpst-empty-copy{
color:var(--ccpst-muted);
}
.ccpst-hero__actions,
.ccpst-final-card__actions,
.ccpst-empty-state__actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:22px;
}
.ccpst-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:0 18px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
font-weight:900;
text-decoration:none;
cursor:pointer;
transition:transform .22s ease,background-color .22s ease,border-color .22s ease;
}
.ccpst-button:hover{
transform:translateY(-2px);
}
.ccpst-button--primary{
background:linear-gradient(135deg,var(--ccpst-accent),var(--ccpst-accent-2));
border-color:transparent;
color:#07111f !important;
}
.ccpst-button--ghost{
background:rgba(255,255,255,.04);
color:#fff !important;
}
.ccpst-hero__stats{
display:grid;
gap:12px;
}
.ccpst-stat-card,
.ccpst-metric-box,
.ccpst-check-item,
.ccpst-issue,
.ccpst-win,
.ccpst-line-check,
.ccpst-signal-chip,
.ccpst-status-row,
.ccpst-history-item,
.ccpst-bar-metric,
.ccpst-share-box{
padding:18px;
border:1px solid var(--ccpst-line);
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.ccpst-stat-card strong,
.ccpst-metric-box strong{
display:block;
color:#fff;
}
.ccpst-stat-card span,
.ccpst-metric-box p{
display:block;
margin-top:8px;
color:var(--ccpst-muted);
}
.ccpst-workbench{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
gap:18px;
margin-top:18px;
padding:22px;
}
.ccpst-form-card,
.ccpst-history-card{
display:grid;
gap:16px;
}
.ccpst-form{
display:grid;
gap:14px;
}
.ccpst-grid{
display:grid;
gap:16px;
}
.ccpst-grid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ccpst-grid--3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.ccpst-grid--4{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.ccpst-form label{
display:grid;
gap:8px;
color:#fff;
font-weight:800;
}
.ccpst-form input{
width:100%;
min-height:54px;
padding:0 16px;
border-radius:16px;
border:1px solid var(--ccpst-line);
background:rgba(255,255,255,.05);
color:#eef4ff;
box-shadow:none;
}
.ccpst-inline-note{
padding:14px 16px;
border-radius:18px;
border:1px solid var(--ccpst-line);
background:rgba(255,255,255,.035);
color:var(--ccpst-muted);
font-size:.94rem;
}
.ccpst-alert{
margin-top:18px;
padding:14px 16px;
border-radius:18px;
}
.ccpst-alert--error{
border:1px solid rgba(255,141,141,.22);
background:rgba(255,141,141,.10);
color:#ffe4e4;
}
.ccpst-alert--success{
border:1px solid rgba(127,240,215,.22);
background:rgba(127,240,215,.10);
color:#e7fff7;
}
.ccpst-history-list{
display:grid;
gap:10px;
}
.ccpst-history-item{
display:grid;
grid-template-columns:64px minmax(0,1fr);
gap:12px;
align-items:center;
text-decoration:none;
}
.ccpst-history-item__score{
width:64px;
height:64px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
font-weight:900;
color:#fff;
border:1px solid var(--ccpst-line);
background:rgba(255,255,255,.04);
}
.ccpst-history-item__score--strong{box-shadow:inset 0 0 0 1px rgba(127,240,215,.28)}
.ccpst-history-item__score--good{box-shadow:inset 0 0 0 1px rgba(141,200,255,.28)}
.ccpst-history-item__score--mixed{box-shadow:inset 0 0 0 1px rgba(255,190,120,.28)}
.ccpst-history-item__score--weak{box-shadow:inset 0 0 0 1px rgba(255,141,141,.28)}
.ccpst-history-item__body strong,
.ccpst-history-item__body span{
display:block;
}
.ccpst-history-item__body strong{
color:#fff;
line-height:1.35;
word-break:break-word;
}
.ccpst-history-item__body span{
margin-top:4px;
color:var(--ccpst-muted);
font-size:.94rem;
word-break:break-word;
}
.ccpst-summary{
display:grid;
gap:18px;
margin-top:18px;
padding:22px;
}
.ccpst-summary__main{
display:grid;
grid-template-columns:240px minmax(0,1fr);
gap:20px;
align-items:center;
}
.ccpst-score-ring{
--ccpst-ring-color:var(--ccpst-accent);
position:relative;
width:220px;
height:220px;
border-radius:50%;
background:
radial-gradient(circle at center, rgba(7,17,31,.96) 0, rgba(7,17,31,.96) 58%, transparent 59%),
conic-gradient(var(--ccpst-ring-color) calc(var(--ccpst-score) * 1%), rgba(255,255,255,.08) 0);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.ccpst-score-ring--strong{--ccpst-ring-color:var(--ccpst-accent-2)}
.ccpst-score-ring--good{--ccpst-ring-color:var(--ccpst-accent)}
.ccpst-score-ring--mixed{--ccpst-ring-color:var(--ccpst-accent-3)}
.ccpst-score-ring--weak{--ccpst-ring-color:var(--ccpst-danger)}
.ccpst-score-ring__inner{
position:absolute;
inset:22px;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:linear-gradient(180deg,rgba(13,27,49,.94),rgba(8,16,29,.94));
border:1px solid var(--ccpst-line);
text-align:center;
}
.ccpst-score-ring__inner span{
display:block;
color:#cfe0ff;
font-size:.82rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.ccpst-score-ring__inner strong{
display:block;
margin-top:10px;
color:#fff;
font-size:4rem;
line-height:1;
}
.ccpst-score-ring__inner small{
display:block;
margin-top:6px;
color:var(--ccpst-muted);
font-size:1rem;
font-weight:700;
}
.ccpst-summary__copy{
display:grid;
gap:14px;
}
.ccpst-summary__copy p{
margin:0;
max-width:58ch;
}
.ccpst-summary__meta{
display:grid;
gap:14px;
}
.ccpst-summary__url{
padding:18px;
border:1px solid var(--ccpst-line);
border-radius:22px;
background:rgba(255,255,255,.04);
}
.ccpst-summary__url span{
display:block;
color:#cfe0ff;
font-size:.82rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.ccpst-summary__url strong{
display:block;
margin-top:8px;
color:#fff;
line-height:1.45;
word-break:break-word;
}
.ccpst-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.ccpst-chip{
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 12px;
border-radius:999px;
border:1px solid var(--ccpst-line);
background:rgba(255,255,255,.04);
color:#eef4ff;
font-size:.92rem;
font-weight:700;
}
.ccpst-chip--accent{
background:rgba(141,200,255,.10);
border-color:rgba(141,200,255,.20);
}
.ccpst-share-box{
display:grid;
gap:6px;
}
.ccpst-share-box span{
color:#cfe0ff;
font-size:.82rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.ccpst-share-box a{
color:#fff;
word-break:break-all;
text-decoration:underline;
text-decoration-color:rgba(127,240,215,.45);
}
.ccpst-category-bars{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.ccpst-bar-metric__top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.ccpst-bar-metric__top span{
color:#cfe0ff;
font-size:.82rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.ccpst-bar-metric__top strong{
color:#fff;
}
.ccpst-bar{
height:10px;
margin-top:14px;
border-radius:999px;
overflow:hidden;
background:rgba(255,255,255,.06);
}
.ccpst-bar span{
display:block;
height:100%;
border-radius:999px;
}
.ccpst-bar-metric--strong .ccpst-bar span{background:linear-gradient(135deg,var(--ccpst-accent-2),#c2ffea)}
.ccpst-bar-metric--good .ccpst-bar span{background:linear-gradient(135deg,var(--ccpst-accent),#b6e1ff)}
.ccpst-bar-metric--mixed .ccpst-bar span{background:linear-gradient(135deg,var(--ccpst-accent-3),#ffe1bf)}
.ccpst-bar-metric--weak .ccpst-bar span{background:linear-gradient(135deg,var(--ccpst-danger),#ffc1c1)}
.ccpst-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:18px 0;
}
.ccpst-tab{
min-height:44px;
padding:0 16px;
border-radius:999px;
border:1px solid var(--ccpst-line);
background:rgba(255,255,255,.04);
color:#eef4ff;
font-weight:800;
cursor:pointer;
}
.ccpst-tab.is-active{
border-color:transparent;
background:linear-gradient(135deg,var(--ccpst-accent),var(--ccpst-accent-2));
color:#07111f;
}
.ccpst-panels{
display:grid;
gap:18px;
}
.ccpst-panel{
display:none;
}
.ccpst-panel.is-active{
display:grid;
gap:18px;
}
.ccpst-card,
.ccpst-history-card{
display:grid;
gap:16px;
padding:22px;
}
.ccpst-card__head p,
.ccpst-history-card__head p{
margin:10px 0 0;
}
.ccpst-check-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.ccpst-check-item__top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.ccpst-check-item__top strong{
color:#fff;
line-height:1.3;
}
.ccpst-check-item__top span{
color:#cfe0ff;
font-size:.8rem;
font-weight:800;
}
.ccpst-check-item p{
margin:10px 0 0;
color:var(--ccpst-muted);
}
.ccpst-check-item.is-pass{border-color:rgba(127,240,215,.18)}
.ccpst-check-item.is-fail{border-color:rgba(255,141,141,.18)}
.ccpst-issue-stack,
.ccpst-win-stack,
.ccpst-check-stack{
display:grid;
gap:12px;
}
.ccpst-issue__top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.ccpst-issue__top strong,
.ccpst-win strong,
.ccpst-line-check strong{
color:#fff;
}
.ccpst-issue__top span{
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
font-size:.76rem;
font-weight:900;
letter-spacing:.06em;
}
.ccpst-issue p,
.ccpst-win p,
.ccpst-line-check p{
margin:10px 0 0;
}
.ccpst-issue small{
display:block;
margin-top:8px;
color:#d9e5fb;
}
.ccpst-issue--high{
border-color:rgba(255,141,141,.22);
background:linear-gradient(180deg,rgba(255,141,141,.09),rgba(255,255,255,.03));
}
.ccpst-issue--high .ccpst-issue__top span{
background:rgba(255,141,141,.16);
color:#ffdede;
}
.ccpst-issue--medium{
border-color:rgba(255,190,120,.22);
background:linear-gradient(180deg,rgba(255,190,120,.09),rgba(255,255,255,.03));
}
.ccpst-issue--medium .ccpst-issue__top span{
background:rgba(255,190,120,.16);
color:#ffeacd;
}
.ccpst-issue--low .ccpst-issue__top span{
background:rgba(141,200,255,.14);
color:#dff0ff;
}
.ccpst-serp-preview{
padding:18px;
border-radius:22px;
border:1px solid var(--ccpst-line);
background:#fff;
box-shadow:0 18px 38px rgba(2,8,20,.18);
}
.ccpst-serp-preview__url{
display:block;
color:#1f5d27;
font-size:.92rem;
}
.ccpst-serp-preview strong{
display:block;
margin-top:8px;
color:#1a0dab;
font-size:1.3rem;
line-height:1.3;
}
.ccpst-serp-preview p{
margin:8px 0 0;
color:#474747;
}
.ccpst-line-check.is-pass{border-color:rgba(127,240,215,.18)}
.ccpst-line-check.is-fail{border-color:rgba(255,141,141,.18)}
.ccpst-heading-block{
display:grid;
gap:10px;
}
.ccpst-heading-block + .ccpst-heading-block{
margin-top:4px;
}
.ccpst-heading-block > span,
.ccpst-quote > span{
color:#cfe0ff;
font-size:.82rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.ccpst-text-list,
.ccpst-link-list{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:10px;
}
.ccpst-text-list li,
.ccpst-link-list li{
position:relative;
padding-left:18px;
color:var(--ccpst-muted);
}
.ccpst-text-list li::before,
.ccpst-link-list li::before{
content:"";
position:absolute;
left:0;
top:.7em;
width:8px;
height:8px;
border-radius:999px;
background:linear-gradient(135deg,var(--ccpst-accent-3),var(--ccpst-accent));
}
.ccpst-link-list strong,
.ccpst-link-list span{
display:block;
}
.ccpst-link-list strong{
color:#fff;
}
.ccpst-link-list span{
margin-top:4px;
color:var(--ccpst-muted);
word-break:break-word;
}
.ccpst-keyword-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.ccpst-signal-chip{
display:grid;
gap:6px;
}
.ccpst-signal-chip span{
color:#cfe0ff;
font-size:.82rem;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
}
.ccpst-signal-chip strong{
color:#fff;
font-size:1rem;
}
.ccpst-signal-chip.is-pass{border-color:rgba(127,240,215,.18)}
.ccpst-signal-chip.is-fail{border-color:rgba(255,141,141,.18)}
.ccpst-signal-chip--count{border-color:rgba(141,200,255,.18)}
.ccpst-quote{
margin-top:4px;
padding:18px;
border-radius:22px;
border:1px solid var(--ccpst-line);
background:rgba(255,255,255,.035);
}
.ccpst-quote p{
margin:10px 0 0;
}
.ccpst-status-list{
display:grid;
gap:12px;
}
.ccpst-status-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}
.ccpst-status-row strong{
color:#fff;
}
.ccpst-status-row span{
color:var(--ccpst-muted);
text-align:right;
word-break:break-word;
}
.ccpst-status-row.is-pass{border-color:rgba(127,240,215,.18)}
.ccpst-status-row.is-fail{border-color:rgba(255,141,141,.18)}
.ccpst-empty-state{
display:grid;
gap:18px;
margin-top:18px;
padding:22px;
}
.ccpst-final-card{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
margin-top:18px;
padding:22px;
}
.ccpst-final-card a{
color:#fff;
text-decoration:underline;
text-decoration-color:rgba(127,240,215,.45);
}
@media (max-width:1150px){
.ccpst-hero,
.ccpst-workbench,
.ccpst-summary__main,
.ccpst-final-card{
grid-template-columns:1fr;
}
.ccpst-category-bars,
.ccpst-check-grid{
grid-template-columns:1fr 1fr;
}
.ccpst-score-ring{
margin:0 auto;
}
}
@media (max-width:920px){
.ccpst-grid--2,
.ccpst-grid--3,
.ccpst-grid--4,
.ccpst-category-bars,
.ccpst-keyword-grid,
.ccpst-check-grid{
grid-template-columns:1fr;
}
.ccpst-status-row{
display:grid;
}
.ccpst-status-row span{
text-align:left;
}
}
@media (max-width:700px){
.ccpst-hero,
.ccpst-workbench,
.ccpst-summary,
.ccpst-card,
.ccpst-history-card,
.ccpst-empty-state,
.ccpst-final-card{
padding:18px;
}
.ccpst-hero__actions,
.ccpst-empty-state__actions,
.ccpst-final-card__actions{
flex-direction:column;
}
.ccpst-button{
width:100%;
}
.ccpst-tabs{
display:grid;
grid-template-columns:1fr 1fr;
}
.ccpst-history-item{
grid-template-columns:56px minmax(0,1fr);
}
.ccpst-history-item__score{
width:56px;
height:56px;
border-radius:16px;
}
}