/* Creator Lab Opportunity Radar V1.3 — Premium readable UI */
[hidden]{display:none!important}

.radar-hero{
  padding:52px 0 34px;
  text-align:center;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 50% -18%,rgba(33,207,255,.18),transparent 40%),
    radial-gradient(circle at 85% 10%,rgba(20,88,125,.13),transparent 24%),
    linear-gradient(180deg,rgba(10,35,53,.82),rgba(7,21,34,.12));
}
.radar-hero>.container,
.radar-shell>.container{max-width:1180px!important}
.back-link{
  display:inline-block;color:#86cde3;font-size:13px;margin-bottom:16px;
  text-decoration:none
}
.live-badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;
  border:1px solid rgba(112,226,255,.18);border-radius:999px;
  background:rgba(33,207,255,.055);color:#9ae5f7;
  font-size:10px;font-weight:800;letter-spacing:.11em
}
.live-badge span{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.api-status{
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 0 0 7px;padding:7px 10px;border-radius:999px;
  font-size:10px;letter-spacing:.02em;border:1px solid rgba(112,226,255,.11)
}
.api-status.checking{color:#7892a3;background:rgba(255,255,255,.018)}
.api-status.ok{color:#81edbd;border-color:rgba(95,230,170,.2);background:rgba(70,220,150,.06)}
.api-status.bad{color:#ff9198;border-color:rgba(255,100,110,.22);background:rgba(255,85,95,.055)}

.radar-hero h1{
  font-size:61px;line-height:.95;letter-spacing:-.055em;
  margin:18px 0 9px
}
.radar-hero h1 span{color:var(--cyan)}
.radar-hero>div>p{
  max-width:760px;margin:0 auto;color:#9aafbd;
  font-size:15px;line-height:1.55
}

.radar-search{max-width:980px;margin:25px auto 0}
.search-main{
  display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;
  border:1px solid rgba(112,226,255,.22);
  background:rgba(4,21,32,.8);
  padding:7px;border-radius:16px;
  box-shadow:0 18px 70px rgba(0,0,0,.17)
}
.search-icon{font-size:24px;color:var(--cyan);text-align:center}
.search-main input{
  height:50px;background:none;border:0;outline:0;color:#eef7fb;
  font:inherit;font-size:15px;font-weight:600;min-width:0
}
.search-main input::placeholder{color:#5f798a;font-weight:500}
.search-main .btn{height:50px;border:0;font-size:12px;padding:0 21px}
.search-options{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px
}
.filter-control{
  position:relative;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-height:50px;
  border:1px solid rgba(112,226,255,.18)!important;
  background:
    linear-gradient(180deg,rgba(17,45,64,.78),rgba(8,28,42,.84))!important;
  border-radius:13px!important;
  padding:8px 10px 8px 13px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 24px rgba(0,0,0,.07);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease
}
.filter-control:hover{
  border-color:rgba(33,207,255,.42)!important;
  background:
    linear-gradient(180deg,rgba(18,50,71,.92),rgba(8,31,46,.94))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 3px rgba(33,207,255,.025),
    0 10px 28px rgba(0,0,0,.09)
}
.filter-control:focus-within{
  border-color:rgba(33,207,255,.72)!important;
  box-shadow:
    0 0 0 3px rgba(33,207,255,.08),
    0 14px 32px rgba(0,0,0,.12)
}
.filter-label{
  display:block;
  font-size:9px!important;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:800;
  color:#7f9daf!important;
  white-space:nowrap
}
.filter-select-wrap{
  position:relative;
  display:block!important;
  min-width:0;
  padding-right:28px
}
.filter-select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  height:34px;
  padding:0 3px 0 0;
  background:transparent;
  border:0;
  outline:0;
  color:#f2f7fa;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-align:right;
  text-align-last:right
}
.filter-select-wrap select option{
  background:#0b2232;
  color:#f4f8fb
}
.filter-chevron{
  position:absolute;
  top:50%;right:2px;
  transform:translateY(-53%);
  color:var(--cyan)!important;
  font-size:18px!important;
  line-height:1;
  pointer-events:none;
  opacity:.95;
  transition:transform .18s ease
}
.filter-control:hover .filter-chevron{transform:translateY(-53%) translateY(1px)}
.method-strip{
  display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;color:#6f8798;font-size:9px;text-transform:uppercase;letter-spacing:.08em
}
.method-strip i{width:3px;height:3px;border-radius:50%;background:#2c566d}

.radar-shell{padding:20px 0 72px}
.initial-state{display:none!important}

/* Compact loading — no giant empty screen */
.loading-state{padding:12px 0 0}
.loading-card{
  min-height:94px;border:1px solid rgba(33,207,255,.16);border-radius:18px;
  background:linear-gradient(135deg,rgba(12,38,57,.94),rgba(7,25,39,.9));
  padding:18px 21px;display:grid;grid-template-columns:48px 1fr auto;
  gap:16px;align-items:center;box-shadow:0 14px 45px rgba(0,0,0,.12)
}
.mini-scanner{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(33,207,255,.2);position:relative;overflow:hidden;
  background:radial-gradient(circle,rgba(33,207,255,.08),transparent 67%)
}
.mini-scanner::before,.mini-scanner::after{content:"";position:absolute;background:rgba(33,207,255,.10)}
.mini-scanner::before{width:1px;height:100%;left:50%}.mini-scanner::after{height:1px;width:100%;top:50%}
.scanner-line{
  position:absolute;left:50%;top:50%;width:50%;height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transform-origin:left center;animation:scan 1.05s linear infinite
}
@keyframes scan{to{transform:rotate(360deg)}}
.loading-copy h2{font-size:18px;margin:0 0 4px;letter-spacing:-.02em}
.loading-copy p{font-size:12px;color:#849aaa;margin:0}
.loading-steps{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.loading-steps span{
  font-size:9px;padding:6px 8px;border:1px solid rgba(112,226,255,.09);
  border-radius:8px;color:#607a8c;background:rgba(255,255,255,.012)
}
.loading-steps .active{color:var(--cyan);border-color:rgba(33,207,255,.25);background:rgba(33,207,255,.045)}

/* Compact error. It only exists when a real request failed. */
.error-state{padding:12px 0 0}
.error-card{
  border:1px solid rgba(255,105,115,.18);border-radius:17px;
  background:rgba(80,25,31,.12);padding:17px 19px;
  display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center
}
.error-icon{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,95,105,.28);color:#ff7880;
  background:rgba(255,80,90,.055);font-weight:800
}
.error-copy h2{font-size:17px;margin:0 0 4px}
.error-copy>p{font-size:12px;color:#9c858c;margin:0;line-height:1.5}
.setup-box{margin-top:9px;border-top:1px solid rgba(255,105,115,.11);padding-top:8px}
.setup-box strong{font-size:11px}.setup-box p{font-size:10px;color:#8e7980;margin:3px 0 0}
.error-card .btn{font-size:10px;padding:10px 14px}

/* Results */
#results{padding-top:12px}
.result-heading{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:25px;margin-bottom:16px
}
.result-heading .eyebrow{margin-bottom:7px;font-size:10px}
.result-heading h2{font-size:38px;margin:0;letter-spacing:-.045em}
.result-heading p{font-size:11px;color:#7f96a6;margin:6px 0 0}
.result-heading .btn{font-size:11px}

.score-hero{
  border:1px solid rgba(33,207,255,.20);border-radius:24px;
  background:
    radial-gradient(circle at 92% 0%,rgba(33,207,255,.075),transparent 32%),
    linear-gradient(145deg,rgba(13,42,62,.97),rgba(6,24,38,.98));
  padding:28px 32px;display:grid;grid-template-columns:205px 1fr;
  gap:34px;align-items:center;position:relative;overflow:hidden
}
.score-ring-wrap{display:flex;justify-content:center}
.score-ring{
  --score:0;width:168px;height:168px;border-radius:50%;display:grid;place-items:center;
  position:relative;background:conic-gradient(var(--cyan) calc(var(--score)*1%),rgba(33,207,255,.08) 0)
}
.score-ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#0a2233}
.score-ring>div{position:relative;z-index:2;text-align:center}
.score-ring strong{font-size:57px;line-height:.9}.score-ring small{font-size:11px;color:#7890a2}
.verdict{
  display:inline-flex;padding:6px 9px;border-radius:999px;
  background:rgba(33,207,255,.08);color:var(--cyan);
  font-size:9px;font-weight:800;letter-spacing:.1em
}
.score-copy h3{font-size:34px;letter-spacing:-.04em;margin:10px 0 8px}
.score-copy>p{font-size:13px;color:#a0b0bb;line-height:1.58;max-width:760px;margin:0}
.score-components{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:19px}
.score-components div{
  border:1px solid rgba(112,226,255,.1);border-radius:12px;padding:12px;
  background:rgba(255,255,255,.014)
}
.score-components span{
  display:block;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#718b9d
}
.score-components b{display:block;font-size:20px;margin-top:5px;color:#f0f6f9}

.score-guide{
  margin-top:10px;border:1px solid rgba(112,226,255,.09);border-radius:14px;
  background:rgba(255,255,255,.012);overflow:hidden
}
.score-guide summary{
  list-style:none;cursor:pointer;padding:12px 15px;color:#91a6b4;
  font-size:11px;font-weight:700
}
.score-guide summary::-webkit-details-marker{display:none}
.score-guide summary::after{content:"+";float:right;color:var(--cyan);font-size:15px}
.score-guide[open] summary::after{content:"–"}
.guide-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:0 14px 14px
}
.guide-grid div{border-top:1px solid rgba(112,226,255,.07);padding-top:10px}
.guide-grid b{display:block;font-size:11px;margin-bottom:4px}
.guide-grid span{font-size:10px;color:#748d9e;line-height:1.45}

.metrics-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:10px}
.metric-card{
  border:1px solid var(--line);border-radius:15px;background:rgba(11,33,50,.74);
  padding:15px;min-width:0
}
.metric-card span{display:block;font-size:9px;letter-spacing:.08em;color:#7891a2}
.metric-card strong{
  display:block;font-size:24px;margin-top:6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis
}
.metric-card small{display:block;font-size:10px;color:#657f91;margin-top:4px;line-height:1.3}

.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.analysis-card{
  border:1px solid var(--line);border-radius:18px;background:rgba(10,31,47,.74);
  padding:22px
}
.card-head{display:flex;justify-content:space-between;gap:20px;align-items:start}
.card-head h3,.section-head h3{font-size:20px;margin:5px 0 0;letter-spacing:-.025em}
.card-head>strong{font-size:32px;color:var(--cyan)}
.card-kicker{font-size:9px;letter-spacing:.12em;color:#6a8ba0;font-weight:800}
.bar-track{height:7px;background:rgba(255,255,255,.055);border-radius:99px;overflow:hidden;margin:16px 0 11px}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#75e8ff);border-radius:99px;transition:width .4s ease}
.analysis-card>p{font-size:12px;color:#8fa3b1;line-height:1.55;min-height:38px}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.mini-stats div{border-top:1px solid rgba(112,226,255,.08);padding-top:10px}
.mini-stats span{display:block;font-size:9px;color:#6c8495}
.mini-stats b{display:block;font-size:13px;margin-top:4px}
.example-list{display:grid;gap:7px;margin-top:12px}
.example-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  border-top:1px solid rgba(112,226,255,.07);padding-top:8px
}
.example-item span{font-size:10.5px;color:#a0b1bd;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.example-item b{font-size:10px;color:var(--cyan);white-space:nowrap}

.content-section{
  margin-top:14px;border:1px solid var(--line);border-radius:19px;
  background:rgba(10,31,47,.57);padding:22px
}
.section-head{
  display:flex;justify-content:space-between;gap:20px;align-items:end;
  padding-bottom:13px;border-bottom:1px solid rgba(112,226,255,.08)
}
.section-note{font-size:9px;color:#657f91;text-transform:uppercase;letter-spacing:.07em}

.video-list{display:grid;gap:8px;margin-top:12px}
.video-card{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;
  border:1px solid rgba(112,226,255,.08);border-radius:12px;
  padding:11px 12px;background:rgba(255,255,255,.012)
}
.video-rank{font-size:10px;color:#6f899a;font-weight:800}
.video-copy{min-width:0}
.video-copy a{
  display:block;color:#edf5f9;text-decoration:none;font-size:12px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.video-copy a:hover{color:var(--cyan)}
.video-copy small{display:block;color:#71899a;font-size:10px;margin-top:4px}
.ratio{
  padding:7px 9px;border-radius:8px;background:rgba(33,207,255,.075);
  color:var(--cyan);font-size:11px;font-weight:800;white-space:nowrap
}
.empty-list{padding:17px;text-align:center;color:#748d9d;font-size:11px}

.subniche-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.sub-card{
  border:1px solid rgba(112,226,255,.09);border-radius:12px;padding:13px;
  background:rgba(255,255,255,.013)
}
.sub-card b{display:block;font-size:12px;line-height:1.3}
.sub-card small{font-size:9.5px;color:#6f8899;display:block;margin-top:4px}
.sub-card span{display:block;font-size:20px;color:var(--cyan);font-weight:800;margin-top:10px}

.sample-table{margin-top:10px}
.sample-row{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) 95px 95px 75px;
  gap:12px;align-items:center;padding:11px 8px;
  border-bottom:1px solid rgba(112,226,255,.06);font-size:10.5px
}
.sample-row.header{
  color:#6d8798;font-size:8.5px;text-transform:uppercase;letter-spacing:.07em
}
.sample-row a{
  color:#dfeaf0;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sample-row a:hover{color:var(--cyan)}
.sample-row span{color:#879cab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sample-row b{font-size:10.5px;color:#eef5f8}

.methodology-note{
  margin-top:14px;border:1px solid rgba(112,226,255,.09);border-radius:14px;
  padding:15px 16px;background:rgba(255,255,255,.012)
}
.methodology-note strong{font-size:11px}
.methodology-note p{font-size:10.5px;color:#70899a;line-height:1.55;margin:5px 0 0}

.next-version{
  margin-top:14px;border:1px solid rgba(33,207,255,.17);border-radius:18px;
  padding:19px 20px;background:linear-gradient(135deg,rgba(33,207,255,.055),rgba(8,26,41,.45));
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.next-version span{font-size:9px;color:var(--cyan);letter-spacing:.12em;font-weight:800}
.next-version h3{font-size:23px;margin:5px 0}
.next-version p{font-size:11px;color:#849aaa;margin:0;max-width:730px;line-height:1.5}

/* keep content readable on large monitors */
@media(min-width:1500px){
  .radar-hero>.container,.radar-shell>.container{max-width:1240px!important}
  .score-copy>p{font-size:13.5px}
}
@media(max-width:1020px){
  .metrics-grid{grid-template-columns:repeat(3,1fr)}
  .score-components{grid-template-columns:repeat(2,1fr)}
  .subniche-grid{grid-template-columns:repeat(2,1fr)}
  .guide-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .radar-hero{padding:44px 0 28px}.radar-hero h1{font-size:49px}
  .search-main{grid-template-columns:34px 1fr}.search-main .btn{grid-column:1/-1;width:100%}
  .search-options{grid-template-columns:1fr}
  .api-status{margin:8px 0 0}
  .loading-card,.error-card{grid-template-columns:42px 1fr}.loading-steps,.error-card>.btn{grid-column:1/-1;justify-content:flex-start}
  .score-hero{grid-template-columns:1fr;text-align:center}.score-copy>p{margin:auto}
  .analysis-grid{grid-template-columns:1fr}
  .sample-row{grid-template-columns:minmax(0,1fr) 78px 70px}
  .sample-row>*:nth-child(2),.sample-row>*:nth-child(5){display:none}
  .next-version{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .radar-hero h1{font-size:40px}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .subniche-grid,.guide-grid{grid-template-columns:1fr}
  .score-components{grid-template-columns:1fr 1fr}
  .result-heading{align-items:flex-start;flex-direction:column}
  .video-card{grid-template-columns:28px minmax(0,1fr)}.ratio{grid-column:2;justify-self:start}
}


/* V1.4 — Premium search controls */
.radar-submit{
  position:relative;
  isolation:isolate;
  min-width:214px;
  height:52px!important;
  padding:0 8px 0 20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px;
  border:1px solid rgba(128,235,255,.42)!important;
  border-radius:14px!important;
  overflow:hidden;
  background:
    linear-gradient(135deg,#65ddfb 0%,#28cfff 52%,#14bfe9 100%)!important;
  color:#03141f!important;
  font-weight:800!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(0,45,65,.14),
    0 12px 28px rgba(33,207,255,.16),
    0 0 0 1px rgba(33,207,255,.05);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease
}
.radar-submit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 16%,rgba(255,255,255,.34) 42%,transparent 68%);
  transform:translateX(-125%);
  transition:transform .55s ease
}
.radar-submit:hover{
  transform:translateY(-1px);
  filter:saturate(1.05) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(0,45,65,.14),
    0 16px 36px rgba(33,207,255,.24),
    0 0 0 4px rgba(33,207,255,.055)
}
.radar-submit:hover::before{transform:translateX(125%)}
.radar-submit:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 7px 18px rgba(33,207,255,.14)
}
.radar-submit-label{
  font-size:12px;
  letter-spacing:-.01em;
  white-space:nowrap
}
.radar-submit-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:10px;
  display:grid!important;
  place-items:center;
  background:rgba(2,25,36,.12);
  border:1px solid rgba(2,35,48,.09);
  font-size:17px;
  line-height:1;
  transition:transform .18s ease,background .18s ease
}
.radar-submit:hover .radar-submit-icon{
  transform:translateX(2px);
  background:rgba(2,25,36,.16)
}

@media(max-width:760px){
  .filter-control{
    grid-template-columns:1fr auto;
  }
  .filter-select-wrap select{
    font-size:12px;
  }
  .radar-submit{
    width:100%;
    min-width:0;
  }
}

.beta-usage{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;max-width:920px;margin:18px auto 14px;padding:13px 15px;border:1px solid rgba(112,226,255,.12);border-radius:13px;background:rgba(33,207,255,.03)}.beta-usage span{display:block;font-size:7.5px;color:#21cfff;font-weight:900;letter-spacing:.12em}.beta-usage b{display:block;font-size:10px;color:#d8ebf2;margin-top:2px}.beta-usage p{font-size:8.5px;line-height:1.5;color:#6c8797;margin:0}
@media(max-width:700px){.beta-usage{grid-template-columns:1fr;gap:5px}}