.ccst-portal{
--ccst-bg:#07111f;
--ccst-card:#0d1b31;
--ccst-card-2:#12233d;
--ccst-text:#eef4ff;
--ccst-muted:#9baecc;
--ccst-line:rgba(255,255,255,.10);
--ccst-accent:#8dc8ff;
--ccst-accent-2:#7ff0d7;
--ccst-shadow:0 28px 70px rgba(2,8,20,.28);
color:var(--ccst-text);
font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.ccst-portal *,.ccst-portal *::before,.ccst-portal *::after{
box-sizing:border-box;
}
.ccst-hero,
.ccst-card{
border:1px solid var(--ccst-line);
border-radius:28px;
background:linear-gradient(180deg,rgba(13,27,49,.96),rgba(8,16,29,.96));
box-shadow:var(--ccst-shadow);
}
.ccst-hero{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
gap:18px;
padding:26px;
}
.ccst-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;
}
.ccst-kicker::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,var(--ccst-accent),var(--ccst-accent-2));
}
.ccst-hero h2,
.ccst-card h3,
.ccst-card h4{
margin:0;
color:#fff;
letter-spacing:-.03em;
}
.ccst-hero p,
.ccst-card p,
.ccst-muted{
color:var(--ccst-muted);
}
.ccst-hero__meta{
display:grid;
gap:12px;
}
.ccst-stat{
padding:18px;
border:1px solid var(--ccst-line);
border-radius:20px;
background:rgba(255,255,255,.04);
}
.ccst-stat strong{
display:block;
color:#fff;
font-size:1.35rem;
}
.ccst-stat span{
display:block;
margin-top:6px;
color:var(--ccst-muted);
}
.ccst-card{
padding:22px;
}
.ccst-card--connection{
margin-top:18px;
}
.ccst-card__head{
margin-bottom:18px;
}
.ccst-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:18px 0;
}
.ccst-tab{
min-height:42px;
padding:0 14px;
border-radius:999px;
border:1px solid var(--ccst-line);
background:rgba(255,255,255,.04);
color:#eef4ff;
font-weight:800;
cursor:pointer;
}
.ccst-tab.is-active{
background:linear-gradient(135deg,var(--ccst-accent),var(--ccst-accent-2));
color:#07111f;
border-color:transparent;
}
.ccst-panel{
display:none;
}
.ccst-panel.is-active{
display:block;
}
.ccst-form{
display:grid;
gap:14px;
}
.ccst-form--inline + .ccst-form--inline{
margin-top:12px;
}
.ccst-grid{
display:grid;
gap:14px;
}
.ccst-grid--1{
grid-template-columns:1fr;
}
.ccst-grid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ccst-grid--3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.ccst-grid--4{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.ccst-form label{
display:grid;
gap:8px;
color:#fff;
font-weight:800;
}
.ccst-form input,
.ccst-form select{
width:100%;
min-height:52px;
padding:0 14px;
border-radius:16px;
border:1px solid var(--ccst-line);
background:rgba(255,255,255,.05);
color:#eef4ff;
box-shadow:none;
}
.ccst-form select{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23cfe0ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 16px center;
background-size:14px;
padding-right:42px;
}
.ccst-form select option{
color:#07111f;
}
.ccst-form__hint{
margin:-2px 0 0;
color:var(--ccst-muted);
font-size:.92rem;
}
.ccst-inline-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.ccst-button{
width:fit-content;
min-height:50px;
padding:0 18px;
border:0;
border-radius:999px;
background:linear-gradient(135deg,var(--ccst-accent),var(--ccst-accent-2));
color:#07111f;
font-weight:900;
cursor:pointer;
}
.ccst-button--ghost{
background:rgba(255,255,255,.05);
color:#eef4ff;
border:1px solid var(--ccst-line);
}
.ccst-alert{
margin:18px 0 0;
padding:14px 16px;
border-radius:18px;
}
.ccst-alert--error{
background:rgba(255,120,120,.12);
border:1px solid rgba(255,120,120,.22);
color:#ffe7e7;
}
.ccst-alert--success{
background:rgba(127,240,215,.12);
border:1px solid rgba(127,240,215,.22);
color:#eafff7;
}
.ccst-lock{
padding:18px;
border-radius:18px;
border:1px solid var(--ccst-line);
background:rgba(255,255,255,.04);
}
.ccst-lock strong{
display:block;
color:#fff;
}
.ccst-lock p{
margin:10px 0 0;
}
.ccst-connection{
display:grid;
gap:16px;
}
.ccst-connection__meta{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.ccst-connection__item{
padding:16px;
border:1px solid var(--ccst-line);
border-radius:18px;
background:rgba(255,255,255,.04);
}
.ccst-connection__item span{
display:block;
color:var(--ccst-muted);
font-size:.88rem;
}
.ccst-connection__item strong{
display:block;
margin-top:8px;
color:#fff;
line-height:1.5;
word-break:break-word;
}
.ccst-result{
margin-top:18px;
display:grid;
gap:18px;
}
.ccst-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.ccst-badge{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 12px;
border-radius:999px;
background:rgba(141,200,255,.10);
border:1px solid rgba(141,200,255,.18);
}
.ccst-table{
width:100%;
border-collapse:collapse;
overflow:hidden;
border-radius:18px;
}
.ccst-table th,
.ccst-table td{
padding:12px 14px;
border-bottom:1px solid var(--ccst-line);
text-align:left;
vertical-align:top;
}
.ccst-table th{
color:#fff;
background:rgba(255,255,255,.06);
}
.ccst-table td{
color:var(--ccst-muted);
background:rgba(255,255,255,.03);
}
.ccst-table a{
color:#eef4ff;
}
.ccst-issue{
display:grid;
gap:12px;
padding:16px;
border:1px solid var(--ccst-line);
border-radius:20px;
background:rgba(255,255,255,.03);
}
@media (max-width:980px){
.ccst-hero,
.ccst-grid--2,
.ccst-grid--3,
.ccst-grid--4,
.ccst-connection__meta{
grid-template-columns:1fr;
}
.ccst-button{
width:100%;
}
}