/* SecureVault Tools Visual System
   Phase 11A — global readability, colors, tables, links, reports
   Scope: /tools/* shared visual layer only. No DB/API/logic changes. */

:root{
  --sv-vs-bg: #050914;
  --sv-vs-panel: rgba(7,18,38,.78);
  --sv-vs-panel-2: rgba(12,11,31,.78);
  --sv-vs-border: rgba(0,229,255,.16);
  --sv-vs-border-2: rgba(139,92,246,.20);
  --sv-vs-text: rgba(241,247,255,.92);
  --sv-vs-muted: rgba(222,235,255,.72);
  --sv-vs-soft: rgba(222,235,255,.58);
  --sv-vs-cyan: #63efff;
  --sv-vs-cyan-2: #00e5ff;
  --sv-vs-purple: #9b7dff;
  --sv-vs-pink: #ff72d2;
  --sv-vs-green: #69f7bf;
  --sv-vs-amber: #ffd166;
  --sv-vs-red: #ff6b8a;
  --sv-vs-glow-cyan: 0 0 22px rgba(0,229,255,.18);
  --sv-vs-glow-purple: 0 0 22px rgba(139,92,246,.18);
}

/* Better base readability inside all Tools pages */
.sv-tools-pro,
.sv-tool-page,
.lab-page,
.svx-page{
  color: var(--sv-vs-text);
  text-rendering: optimizeLegibility;
}

.sv-tools-pro p,
.sv-tool-page p,
.lab-page p,
.svx-page p,
.sv-tools-pro li,
.sv-tool-page li,
.lab-page li,
.svx-page li{
  color: var(--sv-vs-muted);
  line-height: 1.65;
}

/* Section hierarchy */
.lab-section,
.sx-section,
.sv-section,
.sv7-section,
.sv8-section,
.sv9-section{
  position: relative;
}

.lab-section-title,
.sx-section-title,
.sv-section-title,
.sv7-section-title,
.sv8-section-title,
.sv9-section-title{
  border-left: 3px solid rgba(0,229,255,.55);
  padding-left: 16px;
}

.lab-section-title h2,
.sx-section-title h2,
.sv-section-title h2,
.sv7-section-title h2,
.sv8-section-title h2,
.sv9-section-title h2,
.svx-section-head h2{
  color: #fff !important;
  letter-spacing: -.035em;
  text-shadow: var(--sv-vs-glow-cyan);
}

.lab-section-title p,
.sx-section-title p,
.sv-section-title p,
.sv7-section-title p,
.sv8-section-title p,
.sv9-section-title p,
.svx-section-head p{
  color: rgba(224,238,255,.74) !important;
}

/* Kicker labels */
.lab-kicker,
.sx-kicker,
.sv-kicker,
.sv7-kicker,
.sv8-kicker,
.sv9-kicker,
.svx-kicker,
.svx-kicker-small{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sv-vs-cyan) !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 950;
  text-shadow: var(--sv-vs-glow-cyan);
}

.lab-kicker::before,
.sx-kicker::before,
.sv-kicker::before,
.sv7-kicker::before,
.sv8-kicker::before,
.sv9-kicker::before,
.svx-kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,var(--sv-vs-cyan),var(--sv-vs-purple));
  box-shadow: 0 0 14px rgba(0,229,255,.55);
}

/* Cards and panels */
.lab-card,
.sx-card,
.sv-card,
.sv7-card,
.sv8-card,
.sv9-card,
.sv7-mini,
.sv8-mini,
.sv9-box,
.sv7e-mini,
.sv8d-toolbox,
.sv7f-toolbox,
.sv9-toolbox,
.svx-tool-card,
.svx-manifest,
.svx-feature-strip > div{
  border-color: var(--sv-vs-border) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.lab-card h3,
.sx-card h3,
.sv-card h3,
.sv7-card h3,
.sv8-card h3,
.sv9-card h3,
.sv7-mini h3,
.sv8-mini h3,
.sv9-box h3,
.sv7e-mini h3,
.sv8d-toolbox h2,
.sv7f-toolbox h2,
.sv9-toolbox h2,
.svx-tool-card h3{
  color: #fff !important;
  text-shadow: 0 0 18px rgba(0,229,255,.10);
}

.lab-card small,
.sx-card small,
.sv-card small,
.sv7-card small,
.sv8-card small,
.sv9-card small,
.sv7-mini small,
.sv8-mini small,
.sv9-box small,
.sv7e-mini small,
.svx-card-label{
  color: var(--sv-vs-cyan) !important;
  border-color: rgba(0,229,255,.20) !important;
}

/* Links: more readable, always visibly clickable */
.sv-tools-pro a,
.sv-tool-page a,
.lab-page a,
.svx-page a{
  color: var(--sv-vs-cyan);
  text-decoration-color: rgba(0,229,255,.45);
  text-underline-offset: 3px;
  transition: color .18s ease, text-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.sv-tools-pro a:hover,
.sv-tool-page a:hover,
.lab-page a:hover,
.svx-page a:hover{
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0,229,255,.45);
}

/* CTA buttons */
button,
.sv-btn,
.sv7-btn,
.sv8-btn,
.sv9-btn,
.svx-btn,
.svx-open-link,
.sv7-next a,
.sv8-next-card a,
.sv9-next-card a,
.sx-next a{
  font-weight: 950 !important;
}

.svx-open-link,
.sv7-next a,
.sv8-next-card a,
.sv9-next-card a,
.sx-next a,
a[class*="open"],
a[class*="btn"]{
  border-radius: 999px !important;
}

/* Info / warning / risk / success roles */
.sv-info,
.sv-note,
.lab-note,
.sx-note,
[class*="info"],
[class*="tip"]{
  border-color: rgba(0,229,255,.22) !important;
}

.sv-warning,
.lab-warning,
.sx-warning,
[class*="warning"],
[class*="pozor"]{
  border-color: rgba(255,209,102,.30) !important;
  background:
    radial-gradient(circle at 10% 10%,rgba(255,209,102,.10),transparent 34%),
    rgba(12,10,18,.70) !important;
}

.sv-danger,
.lab-danger,
.sx-danger,
[class*="danger"],
[class*="risk"]{
  border-color: rgba(255,107,138,.30) !important;
}

.sv-success,
.lab-success,
.sx-success,
[class*="success"],
[class*="ok"]{
  border-color: rgba(105,247,191,.28) !important;
}

/* Form controls */
input,
select,
textarea{
  border-color: rgba(118,169,255,.22) !important;
  color: #eef8ff !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color: rgba(0,229,255,.52) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.10), 0 0 22px rgba(0,229,255,.10) !important;
}

/* Checkbox rows */
label:has(input[type="checkbox"]),
.sv7-checks label,
.sv8-checks label,
.sv9-checks label{
  border-color: rgba(0,229,255,.14) !important;
}

label:has(input[type="checkbox"]:checked),
.sv7-checks label:has(input:checked),
.sv8-checks label:has(input:checked),
.sv9-checks label:has(input:checked){
  border-color: rgba(105,247,191,.32) !important;
  background: linear-gradient(135deg,rgba(105,247,191,.075),rgba(0,229,255,.035)) !important;
}

/* Report / code / output boxes */
pre,
code,
.sv-output,
.sv7-output,
.sv8-output,
.sv9-output,
.sv7f-result,
.sv8d-result,
.sv9-result,
[class*="result"],
[class*="report"]{
  border-color: rgba(0,229,255,.18) !important;
  color: #eef8ff !important;
  background:
    linear-gradient(180deg,rgba(3,11,24,.82),rgba(1,7,18,.74)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Tables */
table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(0,229,255,.16) !important;
  border-radius: 18px;
  background: rgba(2,8,19,.62);
}

thead th,
table th{
  color: #ffffff !important;
  background:
    linear-gradient(135deg,rgba(0,229,255,.14),rgba(139,92,246,.12)) !important;
  border-bottom: 1px solid rgba(0,229,255,.18) !important;
  font-weight: 950 !important;
  letter-spacing: .02em;
}

table td,
table th{
  padding: 12px 14px !important;
  border-color: rgba(118,169,255,.10) !important;
}

tbody tr:nth-child(even){
  background: rgba(255,255,255,.025);
}

tbody tr:hover{
  background: rgba(0,229,255,.055);
}

/* Badges / tags / chips */
.svx-tags small,
.sv8-badges span,
.sv9-badges span,
.sv7-badges span,
[class*="badge"],
[class*="chip"]{
  color: rgba(239,248,255,.90) !important;
  border-color: rgba(0,229,255,.18) !important;
  background: rgba(0,229,255,.055) !important;
}

.svx-card-cats small{
  border-color: rgba(155,125,255,.25) !important;
  background: rgba(155,125,255,.075) !important;
  color: #eadfff !important;
}

/* Scores and visual bars */
.sv7-score,
.sv8-score,
.sv9-score,
[class*="score"]{
  border-color: rgba(0,229,255,.18) !important;
}

.sv7-bar span,
.sv8-bar span,
.sv9-bar span,
[class*="bar"] span,
progress::-webkit-progress-value{
  background: linear-gradient(90deg,var(--sv-vs-cyan),var(--sv-vs-purple)) !important;
  box-shadow: 0 0 18px rgba(0,229,255,.20);
}

/* Add subtle visual separators for explanatory content */
.sv7e-script,
.sv8-script,
.sv9-script,
.sv7e-scenario,
.sv8-scenario,
.sv9-scenario{
  border-color: rgba(0,229,255,.16) !important;
}

.sv7e-scenario span,
.sv8-scenario span,
.sv9-scenario span{
  color: var(--sv-vs-cyan) !important;
}

/* Main /tools card grid */
.svx-tool-card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.svx-tool-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,229,255,.32) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.30), 0 0 22px rgba(0,229,255,.10) !important;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid rgba(0,229,255,.72) !important;
  outline-offset: 3px !important;
}

/* Mobile readability */
@media(max-width:760px){
  .lab-section-title,
  .sx-section-title,
  .sv-section-title,
  .sv7-section-title,
  .sv8-section-title,
  .sv9-section-title{
    padding-left: 12px;
  }

  table{
    display:block;
    overflow-x:auto;
  }

  .sv-tools-pro p,
  .sv-tool-page p,
  .lab-page p,
  .svx-page p{
    line-height:1.6;
  }
}


/* PHASE11B_FORCE_VISUAL_SYSTEM_LATE_OVERRIDE_20260604
   Loaded again from /tools/_partials/footer.php so it wins over page-local CSS. */

/* Universal readable text hierarchy */
.sv-tools-pro :is(h1,h2,h3,h4),
.sv-tool-page :is(h1,h2,h3,h4),
.lab-page :is(h1,h2,h3,h4),
.svx-page :is(h1,h2,h3,h4){
  color:#ffffff!important;
}

.sv-tools-pro :is(p,li,dd,td),
.sv-tool-page :is(p,li,dd,td),
.lab-page :is(p,li,dd,td),
.svx-page :is(p,li,dd,td){
  color:rgba(226,239,255,.76)!important;
}

/* Headline accent without changing layout */
.sv-tools-pro :is(h2,h3),
.sv-tool-page :is(h2,h3),
.lab-page :is(h2,h3),
.svx-page :is(h2,h3){
  text-shadow:0 0 18px rgba(0,229,255,.12)!important;
}

.sv-tools-pro :is(h2,h3)::selection,
.sv-tool-page :is(h2,h3)::selection,
.lab-page :is(h2,h3)::selection,
.svx-page :is(h2,h3)::selection{
  background:rgba(0,229,255,.25)!important;
}

/* Strong link visibility */
.sv-tools-pro a:not(.svx-btn):not(.svx-open-link),
.sv-tool-page a:not(.svx-btn):not(.svx-open-link),
.lab-page a:not(.svx-btn):not(.svx-open-link),
.svx-page a:not(.svx-btn):not(.svx-open-link){
  color:#65efff!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,229,255,.42)!important;
  text-underline-offset:4px!important;
}

.sv-tools-pro a:not(.svx-btn):not(.svx-open-link):hover,
.sv-tool-page a:not(.svx-btn):not(.svx-open-link):hover,
.lab-page a:not(.svx-btn):not(.svx-open-link):hover,
.svx-page a:not(.svx-btn):not(.svx-open-link):hover{
  color:#ffffff!important;
  text-shadow:0 0 15px rgba(0,229,255,.55)!important;
}

/* Cards/panels: catch more class patterns */
.sv-tools-pro :is(section,article,div)[class*="card"],
.sv-tools-pro :is(section,article,div)[class*="panel"],
.sv-tools-pro :is(section,article,div)[class*="box"],
.sv-tools-pro :is(section,article,div)[class*="result"],
.sv-tool-page :is(section,article,div)[class*="card"],
.sv-tool-page :is(section,article,div)[class*="panel"],
.sv-tool-page :is(section,article,div)[class*="box"],
.sv-tool-page :is(section,article,div)[class*="result"],
.lab-page :is(section,article,div)[class*="card"],
.lab-page :is(section,article,div)[class*="panel"],
.lab-page :is(section,article,div)[class*="box"],
.lab-page :is(section,article,div)[class*="result"]{
  border-color:rgba(0,229,255,.18)!important;
}

/* Explanation / helper text */
.sv-tools-pro :is(small,.muted,.hint,.desc,.description,[class*="hint"],[class*="desc"],[class*="muted"]),
.sv-tool-page :is(small,.muted,.hint,.desc,.description,[class*="hint"],[class*="desc"],[class*="muted"]),
.lab-page :is(small,.muted,.hint,.desc,.description,[class*="hint"],[class*="desc"],[class*="muted"]){
  color:rgba(218,233,255,.66)!important;
}

/* Labels, pills, badges */
.sv-tools-pro :is(.badge,.tag,.chip,.pill,small,[class*="badge"],[class*="tag"],[class*="chip"],[class*="pill"]),
.sv-tool-page :is(.badge,.tag,.chip,.pill,small,[class*="badge"],[class*="tag"],[class*="chip"],[class*="pill"]),
.lab-page :is(.badge,.tag,.chip,.pill,small,[class*="badge"],[class*="tag"],[class*="chip"],[class*="pill"]){
  border-color:rgba(0,229,255,.20)!important;
}

/* Status colors — generic roles */
[class*="ok"],
[class*="success"],
[class*="safe"],
[data-status="ok"],
[data-status="success"]{
  --sv-status-color:#69f7bf;
}

[class*="warn"],
[class*="warning"],
[class*="medium"],
[data-status="warning"],
[data-status="warn"]{
  --sv-status-color:#ffd166;
}

[class*="risk"],
[class*="danger"],
[class*="error"],
[class*="high"],
[data-status="risk"],
[data-status="danger"],
[data-status="error"]{
  --sv-status-color:#ff6b8a;
}

:is([class*="ok"],[class*="success"],[class*="safe"],[class*="warn"],[class*="warning"],[class*="risk"],[class*="danger"],[class*="error"]){
  border-color:color-mix(in srgb,var(--sv-status-color,#63efff) 35%,transparent)!important;
}

/* Tables: force consistency even if local CSS differs */
.sv-tools-pro table,
.sv-tool-page table,
.lab-page table,
.svx-page table{
  border:1px solid rgba(0,229,255,.18)!important;
  background:rgba(2,8,19,.70)!important;
}

.sv-tools-pro table :is(th,td),
.sv-tool-page table :is(th,td),
.lab-page table :is(th,td),
.svx-page table :is(th,td){
  color:rgba(238,248,255,.84)!important;
}

.sv-tools-pro table th,
.sv-tool-page table th,
.lab-page table th,
.svx-page table th{
  color:#ffffff!important;
  background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(139,92,246,.14))!important;
}

/* Inputs and outputs */
.sv-tools-pro :is(input,select,textarea),
.sv-tool-page :is(input,select,textarea),
.lab-page :is(input,select,textarea){
  background:rgba(1,7,18,.72)!important;
  border-color:rgba(118,169,255,.24)!important;
  color:#eef8ff!important;
}

.sv-tools-pro :is(pre,code,output,textarea,[class*="output"],[class*="report"],[class*="result"]),
.sv-tool-page :is(pre,code,output,textarea,[class*="output"],[class*="report"],[class*="result"]),
.lab-page :is(pre,code,output,textarea,[class*="output"],[class*="report"],[class*="result"]){
  border-color:rgba(0,229,255,.20)!important;
}

/* Progress / score visual fallback */
.sv-tools-pro :is([class*="bar"],[class*="progress"]) span,
.sv-tool-page :is([class*="bar"],[class*="progress"]) span,
.lab-page :is([class*="bar"],[class*="progress"]) span{
  background:linear-gradient(90deg,#63efff,#9b7dff)!important;
}

/* Soft theme accents by page category */
body[class*="phishing"]{--sv-vs-cyan:#ffd166;--sv-vs-purple:#ff6b8a}
body[class*="leak"],
body[class*="incident"]{--sv-vs-cyan:#ffd166;--sv-vs-purple:#ff6b8a}
body[class*="privacy"],
body[class*="identity"],
body[class*="social"]{--sv-vs-cyan:#9b7dff;--sv-vs-purple:#ff72d2}
body[class*="device"],
body[class*="wifi"],
body[class*="browser"]{--sv-vs-cyan:#63efff;--sv-vs-purple:#5b8cff}
body[class*="backup"],
body[class*="cloud"],
body[class*="file"]{--sv-vs-cyan:#69f7bf;--sv-vs-purple:#63efff}

/* Avoid overdoing footer/header */
.site-header *,
.sv-footer *,
footer *{
  text-shadow:none;
}


/* PHASE11C_DOM_ENHANCER_VISUAL_CLASSES_20260604 */

.sv-vs-section{
  scroll-margin-top: 96px;
}

.sv-vs-card{
  border-color: rgba(0,229,255,.20)!important;
  box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.sv-vs-heading{
  color:#ffffff!important;
}

h2.sv-vs-heading,
h3.sv-vs-heading{
  text-shadow:0 0 18px rgba(0,229,255,.15)!important;
}

.sv-vs-text{
  color:rgba(226,239,255,.78)!important;
}

.sv-vs-muted{
  color:rgba(210,228,255,.66)!important;
}

.sv-vs-link{
  color:#65efff!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,229,255,.45)!important;
  text-underline-offset:4px!important;
}

.sv-vs-link:hover{
  color:#ffffff!important;
  text-shadow:0 0 14px rgba(0,229,255,.55)!important;
}

.sv-vs-cta,
.sv-vs-button{
  border-radius:999px!important;
  font-weight:950!important;
}

.sv-vs-table{
  border:1px solid rgba(0,229,255,.22)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:rgba(2,8,19,.72)!important;
}

.sv-vs-table th{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(0,229,255,.18),rgba(139,92,246,.15))!important;
}

.sv-vs-table td{
  color:rgba(238,248,255,.84)!important;
}

.sv-vs-output{
  border-color:rgba(0,229,255,.22)!important;
  background:linear-gradient(180deg,rgba(3,11,24,.84),rgba(1,7,18,.76))!important;
  color:#eef8ff!important;
}

.sv-vs-input{
  border-color:rgba(118,169,255,.26)!important;
  background:rgba(1,7,18,.74)!important;
  color:#eef8ff!important;
}

.sv-vs-chip{
  color:rgba(239,248,255,.90)!important;
  border-color:rgba(0,229,255,.22)!important;
  background:rgba(0,229,255,.060)!important;
}

.sv-vs-checkrow{
  border-color:rgba(0,229,255,.16)!important;
}

.sv-vs-checkrow:has(input:checked){
  border-color:rgba(105,247,191,.35)!important;
  background:linear-gradient(135deg,rgba(105,247,191,.075),rgba(0,229,255,.035))!important;
}

.sv-vs-info{
  border-color:rgba(0,229,255,.24)!important;
}

.sv-vs-warning{
  border-color:rgba(255,209,102,.34)!important;
}

.sv-vs-risk{
  border-color:rgba(255,107,138,.34)!important;
}

.sv-vs-success{
  border-color:rgba(105,247,191,.34)!important;
}

/* stronger boxes for rows that are visually plain */
.sv-vs-info:is(div,article,section),
.sv-vs-warning:is(div,article,section),
.sv-vs-risk:is(div,article,section),
.sv-vs-success:is(div,article,section){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.sv-vs-warning:is(div,article,section){
  background:radial-gradient(circle at 8% 8%,rgba(255,209,102,.08),transparent 34%),rgba(7,18,38,.68)!important;
}

.sv-vs-risk:is(div,article,section){
  background:radial-gradient(circle at 8% 8%,rgba(255,107,138,.08),transparent 34%),rgba(7,18,38,.68)!important;
}

.sv-vs-success:is(div,article,section){
  background:radial-gradient(circle at 8% 8%,rgba(105,247,191,.08),transparent 34%),rgba(7,18,38,.68)!important;
}


/* PHASE11D_DIRECT_HEADING_SECTION_COLORIZER_20260604
   Stronger visual hierarchy: colored headings, underline glow, colored section/card accents. */

/* Gradient headings — visible even on pages that already had bars/boxes */
.sv-tools-pro .sv-vs-gradient-heading,
.sv-tool-page .sv-vs-gradient-heading,
.lab-page .sv-vs-gradient-heading,
.svx-page .sv-vs-gradient-heading,
main .sv-vs-gradient-heading{
  position:relative!important;
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin-bottom:.85rem!important;
  padding-bottom:.42rem!important;
  background:linear-gradient(90deg,#ffffff 0%,#75f4ff 28%,#9b7dff 68%,#ff9ee8 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  text-shadow:0 0 22px rgba(0,229,255,.16)!important;
  letter-spacing:-.035em!important;
}

.sv-tools-pro .sv-vs-gradient-heading::after,
.sv-tool-page .sv-vs-gradient-heading::after,
.lab-page .sv-vs-gradient-heading::after,
.svx-page .sv-vs-gradient-heading::after,
main .sv-vs-gradient-heading::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  width:min(100%,280px)!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(0,229,255,.95),rgba(139,92,246,.65),transparent)!important;
  box-shadow:0 0 18px rgba(0,229,255,.32)!important;
}

/* Colored cards/sections */
.sv-vs-colored-section,
.sv-vs-section-frame,
.sv-vs-colored-card{
  position:relative!important;
}

.sv-vs-colored-card{
  border-color:rgba(0,229,255,.22)!important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 0 1px rgba(139,92,246,.045)!important;
}

.sv-vs-colored-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  border-radius:999px 0 0 999px!important;
  background:linear-gradient(180deg,#00e5ff,#8b5cf6,#ff72d2)!important;
  opacity:.78!important;
  pointer-events:none!important;
  box-shadow:0 0 16px rgba(0,229,255,.22)!important;
}

/* Status color roles */
.sv-vs-status-info{
  border-color:rgba(0,229,255,.30)!important;
}

.sv-vs-status-warning{
  border-color:rgba(255,209,102,.42)!important;
}

.sv-vs-status-risk{
  border-color:rgba(255,107,138,.42)!important;
}

.sv-vs-status-success{
  border-color:rgba(105,247,191,.38)!important;
}

.sv-vs-status-info:is(span,small,b,strong,td,th,li,p,label){
  color:#75f4ff!important;
}

.sv-vs-status-warning:is(span,small,b,strong,td,th,li,p,label){
  color:#ffd166!important;
}

.sv-vs-status-risk:is(span,small,b,strong,td,th,li,p,label){
  color:#ff7e99!important;
}

.sv-vs-status-success:is(span,small,b,strong,td,th,li,p,label){
  color:#7df7c6!important;
}

/* Tables stronger */
.sv-vs-color-table{
  border:1px solid rgba(0,229,255,.24)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.sv-vs-color-table th,
.sv-vs-table-head-cell{
  background:linear-gradient(135deg,rgba(0,229,255,.22),rgba(139,92,246,.18))!important;
  color:#ffffff!important;
  text-shadow:0 0 14px rgba(0,229,255,.18)!important;
}

.sv-vs-color-table tr:nth-child(even) td{
  background:rgba(0,229,255,.035)!important;
}

.sv-vs-color-table tr:hover td{
  background:rgba(139,92,246,.060)!important;
}

/* Links stronger */
.sv-vs-readable-link{
  color:#6af1ff!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,229,255,.55)!important;
  text-underline-offset:4px!important;
}

.sv-vs-readable-link:hover{
  color:#ffffff!important;
  text-shadow:0 0 16px rgba(0,229,255,.55)!important;
}

/* Outputs/report boxes */
.sv-vs-colored-output{
  border-color:rgba(0,229,255,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px rgba(139,92,246,.05)!important;
}

/* Checkbox/radio rows */
.sv-vs-colored-check{
  border-color:rgba(0,229,255,.18)!important;
}

.sv-vs-colored-check:has(input:checked){
  border-color:rgba(105,247,191,.42)!important;
  background:linear-gradient(135deg,rgba(105,247,191,.09),rgba(0,229,255,.045))!important;
}

/* Prevent visual layer from affecting global footer/header */
header .sv-vs-gradient-heading,
footer .sv-vs-gradient-heading,
nav .sv-vs-gradient-heading{
  background:none!important;
  -webkit-text-fill-color:inherit!important;
  color:inherit!important;
  text-shadow:none!important;
}

header .sv-vs-gradient-heading::after,
footer .sv-vs-gradient-heading::after,
nav .sv-vs-gradient-heading::after,
header .sv-vs-colored-card::before,
footer .sv-vs-colored-card::before,
nav .sv-vs-colored-card::before{
  display:none!important;
}

@media(max-width:760px){
  .sv-tools-pro .sv-vs-gradient-heading,
  .sv-tool-page .sv-vs-gradient-heading,
  .lab-page .sv-vs-gradient-heading,
  .svx-page .sv-vs-gradient-heading,
  main .sv-vs-gradient-heading{
    width:100%!important;
  }
}


/* PHASE11E_CLEAN_PRO_COLOR_SYSTEM_20260605 */

/* Kill old rainbow heading effect from Phase 11D */
.sv-tools-pro .sv-vs-gradient-heading,
.sv-tool-page .sv-vs-gradient-heading,
.lab-page .sv-vs-gradient-heading,
.svx-page .sv-vs-gradient-heading,
main .sv-vs-gradient-heading,
.sv-tools-pro .sv-vs-solid-heading,
.sv-tool-page .sv-vs-solid-heading,
.lab-page .sv-vs-solid-heading,
.svx-page .sv-vs-solid-heading,
main .sv-vs-solid-heading{
  -webkit-text-fill-color:initial!important;
  background:none!important;
  color:#ffffff!important;
  text-shadow:0 0 18px rgba(0,229,255,.14)!important;
}

/* Main section headings: readable rounded bubble */
.sv-tools-pro .sv-vs-pro-section-title,
.sv-tool-page .sv-vs-pro-section-title,
.lab-page .sv-vs-pro-section-title,
.svx-page .sv-vs-pro-section-title,
main .sv-vs-pro-section-title{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 0 1rem!important;
  padding:10px 16px 11px!important;
  border:1px solid rgba(0,229,255,.22)!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(0,229,255,.14),transparent 42%),
    linear-gradient(135deg,rgba(7,18,38,.92),rgba(16,12,38,.88))!important;
  color:#ffffff!important;
  font-weight:950!important;
  letter-spacing:-.028em!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055)!important;
}

.sv-vs-pro-section-title::before{
  content:""!important;
  width:9px!important;
  height:9px!important;
  flex:0 0 9px!important;
  border-radius:999px!important;
  background:#63efff!important;
  box-shadow:0 0 14px rgba(0,229,255,.65)!important;
}

.sv-tools-pro .sv-vs-pro-section-title::after,
.sv-tool-page .sv-vs-pro-section-title::after,
.lab-page .sv-vs-pro-section-title::after,
.svx-page .sv-vs-pro-section-title::after,
main .sv-vs-pro-section-title::after{
  content:""!important;
  position:absolute!important;
  left:16px!important;
  bottom:-7px!important;
  width:calc(100% - 32px)!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(0,229,255,.85),rgba(139,92,246,.42),transparent)!important;
  box-shadow:0 0 16px rgba(0,229,255,.24)!important;
}

/* Card/box headings: fixed readable color */
.sv-tools-pro .sv-vs-pro-card-title,
.sv-tool-page .sv-vs-pro-card-title,
.lab-page .sv-vs-pro-card-title,
.svx-page .sv-vs-pro-card-title,
main .sv-vs-pro-card-title{
  width:auto!important;
  display:block!important;
  padding-bottom:.36rem!important;
  margin-bottom:.72rem!important;
  color:#f7fbff!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
  text-shadow:0 0 12px rgba(0,229,255,.10)!important;
}

.sv-tools-pro .sv-vs-pro-card-title::after,
.sv-tool-page .sv-vs-pro-card-title::after,
.lab-page .sv-vs-pro-card-title::after,
.svx-page .sv-vs-pro-card-title::after,
main .sv-vs-pro-card-title::after{
  content:""!important;
  display:block!important;
  margin-top:.42rem!important;
  width:110px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(0,229,255,.82),rgba(139,92,246,.44),transparent)!important;
  box-shadow:0 0 14px rgba(0,229,255,.24)!important;
}

/* Cards: preserve side line */
.sv-vs-colored-card::before{
  width:3px!important;
  background:linear-gradient(180deg,#00e5ff,#8b5cf6)!important;
  opacity:.82!important;
}

/* Solid buttons with strong contrast */
.sv-vs-pro-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:10px 18px!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  text-decoration:none!important;
  line-height:1.1!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.20)!important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease!important;
}

.sv-vs-pro-button:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.08) brightness(1.06)!important;
  text-shadow:none!important;
}

.sv-vs-btn-cyan{
  background:linear-gradient(135deg,#66f3ff,#6e8cff)!important;
  color:#04111b!important;
  border-color:rgba(255,255,255,.24)!important;
}

.sv-vs-btn-purple{
  background:linear-gradient(135deg,#9b7dff,#d48cff)!important;
  color:#080615!important;
  border-color:rgba(255,255,255,.24)!important;
}

.sv-vs-btn-green{
  background:linear-gradient(135deg,#69f7bf,#63efff)!important;
  color:#03130e!important;
  border-color:rgba(255,255,255,.24)!important;
}

.sv-vs-btn-amber{
  background:linear-gradient(135deg,#ffd166,#ff9f5a)!important;
  color:#180d02!important;
  border-color:rgba(255,255,255,.24)!important;
}

.sv-vs-btn-red{
  background:linear-gradient(135deg,#ff7e99,#d76dff)!important;
  color:#16020a!important;
  border-color:rgba(255,255,255,.24)!important;
}

/* Force button text readable even if old link CSS says cyan */
.sv-vs-pro-button,
.sv-vs-pro-button *,
.sv-vs-pro-button span,
.sv-vs-pro-button strong,
.sv-vs-pro-button b{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}

/* Normal links should stay cyan, not button-like */
.sv-vs-readable-link:not(.sv-vs-pro-button){
  color:#70f3ff!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,229,255,.52)!important;
  text-underline-offset:4px!important;
}

/* Better text colors: meaning over decoration */
.sv-vs-status-info:is(span,small,b,strong,td,th,li,p,label){color:#72efff!important;}
.sv-vs-status-warning:is(span,small,b,strong,td,th,li,p,label){color:#ffd166!important;}
.sv-vs-status-risk:is(span,small,b,strong,td,th,li,p,label){color:#ff7f9d!important;}
.sv-vs-status-success:is(span,small,b,strong,td,th,li,p,label){color:#7af6c8!important;}

/* Tables cleaner, less rainbow */
.sv-vs-color-table th,
.sv-vs-table-head-cell{
  background:linear-gradient(135deg,rgba(0,229,255,.18),rgba(8,18,42,.94))!important;
  color:#ffffff!important;
}

/* Keep header/footer safe */
header .sv-vs-pro-section-title,
footer .sv-vs-pro-section-title,
nav .sv-vs-pro-section-title,
header .sv-vs-pro-card-title,
footer .sv-vs-pro-card-title,
nav .sv-vs-pro-card-title{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  color:inherit!important;
}

header .sv-vs-pro-section-title::before,
footer .sv-vs-pro-section-title::before,
nav .sv-vs-pro-section-title::before,
header .sv-vs-pro-section-title::after,
footer .sv-vs-pro-section-title::after,
nav .sv-vs-pro-section-title::after,
header .sv-vs-pro-card-title::after,
footer .sv-vs-pro-card-title::after,
nav .sv-vs-pro-card-title::after{
  display:none!important;
}

@media(max-width:760px){
  .sv-tools-pro .sv-vs-pro-section-title,
  .sv-tool-page .sv-vs-pro-section-title,
  .lab-page .sv-vs-pro-section-title,
  .svx-page .sv-vs-pro-section-title,
  main .sv-vs-pro-section-title{
    width:100%!important;
    border-radius:18px!important;
  }
  .sv-vs-pro-button{
    width:100%!important;
  }
}


/* PHASE11F_MOCKUP_STYLE_GLOBAL_UI_20260605
   Applies the approved mockup direction:
   - small labels remain above titles
   - main titles use dark readable bubble/panel
   - card titles are fixed white/cyan, no rainbow
   - buttons are premium solid CTA pills with readable text
*/

/* Remove older rainbow/too-bright bubble behavior */
.sv-tools-pro .sv-vs-gradient-heading,
.sv-tool-page .sv-vs-gradient-heading,
.lab-page .sv-vs-gradient-heading,
.svx-page .sv-vs-gradient-heading,
main .sv-vs-gradient-heading,
.sv-tools-pro .sv-vs-solid-heading,
.sv-tool-page .sv-vs-solid-heading,
.lab-page .sv-vs-solid-heading,
.svx-page .sv-vs-solid-heading,
main .sv-vs-solid-heading{
  -webkit-text-fill-color:initial!important;
  background:none!important;
  color:#ffffff!important;
}

/* Tiny labels/kickers stay separate and above the heading */
.sv-tools-pro :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small),
.sv-tool-page :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small),
.lab-page :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small),
.svx-page :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small){
  display:inline-flex!important;
  margin:0 0 .7rem!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  color:#67f3ff!important;
  letter-spacing:.16em!important;
  font-size:.78rem!important;
  text-shadow:0 0 15px rgba(0,229,255,.28)!important;
}

/* Main section headings — dark bubble, white readable text */
.sv-tools-pro .sv-vs-mockup-section-title,
.sv-tool-page .sv-vs-mockup-section-title,
.lab-page .sv-vs-mockup-section-title,
.svx-page .sv-vs-mockup-section-title,
main .sv-vs-mockup-section-title{
  position:relative!important;
  display:inline-block!important;
  width:auto!important;
  max-width:100%!important;
  margin:.05rem 0 1rem!important;
  padding:11px 24px 12px!important;
  border:1px solid rgba(116,238,255,.18)!important;
  border-radius:999px!important;
  background:
    linear-gradient(180deg,rgba(9,20,40,.96),rgba(4,10,24,.94))!important;
  color:#f7fbff!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  line-height:1.08!important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 1px rgba(139,92,246,.06)!important;
  text-shadow:0 0 14px rgba(0,229,255,.10)!important;
}

.sv-tools-pro .sv-vs-mockup-section-title::before,
.sv-tool-page .sv-vs-mockup-section-title::before,
.lab-page .sv-vs-mockup-section-title::before,
.svx-page .sv-vs-mockup-section-title::before,
main .sv-vs-mockup-section-title::before{
  display:none!important;
}

.sv-tools-pro .sv-vs-mockup-section-title::after,
.sv-tool-page .sv-vs-mockup-section-title::after,
.lab-page .sv-vs-mockup-section-title::after,
.svx-page .sv-vs-mockup-section-title::after,
main .sv-vs-mockup-section-title::after{
  content:""!important;
  position:absolute!important;
  left:22px!important;
  bottom:-12px!important;
  width:92px!important;
  height:3px!important;
  border-radius:999px!important;
  background:#00e5ff!important;
  box-shadow:0 0 16px rgba(0,229,255,.55)!important;
}

/* Card titles — clean solid text, no rainbow */
.sv-tools-pro .sv-vs-mockup-card-title,
.sv-tool-page .sv-vs-mockup-card-title,
.lab-page .sv-vs-mockup-card-title,
.svx-page .sv-vs-mockup-card-title,
main .sv-vs-mockup-card-title{
  position:relative!important;
  display:block!important;
  width:auto!important;
  margin:.1rem 0 .78rem!important;
  padding:0 0 .52rem!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:#f8fbff!important;
  font-weight:950!important;
  letter-spacing:-.026em!important;
  line-height:1.15!important;
  text-shadow:0 0 12px rgba(0,229,255,.10)!important;
}

.sv-tools-pro .sv-vs-mockup-card-title::after,
.sv-tool-page .sv-vs-mockup-card-title::after,
.lab-page .sv-vs-mockup-card-title::after,
.svx-page .sv-vs-mockup-card-title::after,
main .sv-vs-mockup-card-title::after{
  content:""!important;
  display:block!important;
  width:92px!important;
  height:2px!important;
  margin-top:.48rem!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#00e5ff,rgba(139,92,246,.54),transparent)!important;
  box-shadow:0 0 14px rgba(0,229,255,.30)!important;
}

/* Card structure from mockups */
.sv-vs-mockup-card{
  border-color:rgba(0,229,255,.16)!important;
  background:
    radial-gradient(circle at 12% 10%,rgba(0,229,255,.055),transparent 34%),
    linear-gradient(180deg,rgba(6,16,34,.78),rgba(3,9,22,.78))!important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.sv-vs-mockup-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  border-radius:999px 0 0 999px!important;
  background:linear-gradient(180deg,#00e5ff,#8b5cf6)!important;
  opacity:.78!important;
  pointer-events:none!important;
  box-shadow:0 0 16px rgba(0,229,255,.24)!important;
}

/* Premium CTA buttons — full fills, readable text */
.sv-vs-mockup-btn,
.sv-vs-pro-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:46px!important;
  padding:12px 22px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:16px!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  line-height:1.1!important;
  text-decoration:none!important;
  text-align:center!important;
  white-space:normal!important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.26)!important;
  text-shadow:none!important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease!important;
}

.sv-vs-mockup-btn:hover,
.sv-vs-pro-button:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.08) brightness(1.06)!important;
  box-shadow:
    0 20px 44px rgba(0,0,0,.34),
    0 0 18px rgba(0,229,255,.12),
    inset 0 1px 0 rgba(255,255,255,.30)!important;
}

.sv-vs-mockup-btn,
.sv-vs-mockup-btn *,
.sv-vs-pro-button,
.sv-vs-pro-button *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  text-decoration:none!important;
}

/* Button color logic inspired by the approved mockups */
.sv-vs-btn-cyan{
  background:linear-gradient(135deg,#20e9f7,#04aeda)!important;
  color:#03151b!important;
}

.sv-vs-btn-blue{
  background:linear-gradient(135deg,#39c8ff,#6177ff)!important;
  color:#ffffff!important;
}

.sv-vs-btn-purple{
  background:linear-gradient(135deg,#8b5cf6,#b061ff)!important;
  color:#ffffff!important;
}

.sv-vs-btn-teal,
.sv-vs-btn-green{
  background:linear-gradient(135deg,#00bfa6,#02d1c8)!important;
  color:#041614!important;
}

.sv-vs-btn-amber{
  background:linear-gradient(135deg,#ffd166,#c99518)!important;
  color:#170f02!important;
}

.sv-vs-btn-red{
  background:linear-gradient(135deg,#ff6b8a,#b84dff)!important;
  color:#ffffff!important;
}

/* If old link rules still hit button anchors, force contrast */
a.sv-vs-mockup-btn,
a.sv-vs-pro-button,
button.sv-vs-mockup-btn,
button.sv-vs-pro-button{
  text-decoration:none!important;
}

/* Normal links stay readable but not CTA-like */
.sv-vs-readable-link:not(.sv-vs-mockup-btn):not(.sv-vs-pro-button){
  color:#70f3ff!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,229,255,.52)!important;
  text-underline-offset:4px!important;
}

/* Tables/results consistent with mockup direction */
.sv-vs-color-table th,
.sv-vs-table-head-cell{
  background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(8,18,42,.96))!important;
  color:#ffffff!important;
}

.sv-vs-colored-output{
  border-color:rgba(0,229,255,.20)!important;
  background:linear-gradient(180deg,rgba(5,14,30,.88),rgba(2,8,20,.82))!important;
}

/* Keep header/footer untouched */
header .sv-vs-mockup-section-title,
footer .sv-vs-mockup-section-title,
nav .sv-vs-mockup-section-title,
header .sv-vs-mockup-card-title,
footer .sv-vs-mockup-card-title,
nav .sv-vs-mockup-card-title{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  color:inherit!important;
}

header .sv-vs-mockup-section-title::before,
footer .sv-vs-mockup-section-title::before,
nav .sv-vs-mockup-section-title::before,
header .sv-vs-mockup-section-title::after,
footer .sv-vs-mockup-section-title::after,
nav .sv-vs-mockup-section-title::after,
header .sv-vs-mockup-card-title::before,
footer .sv-vs-mockup-card-title::before,
nav .sv-vs-mockup-card-title::before,
header .sv-vs-mockup-card-title::after,
footer .sv-vs-mockup-card-title::after,
nav .sv-vs-mockup-card-title::after{
  display:none!important;
}

@media(max-width:760px){
  .sv-tools-pro .sv-vs-mockup-section-title,
  .sv-tool-page .sv-vs-mockup-section-title,
  .lab-page .sv-vs-mockup-section-title,
  .svx-page .sv-vs-mockup-section-title,
  main .sv-vs-mockup-section-title{
    border-radius:18px!important;
    padding:11px 15px 12px!important;
    width:100%!important;
  }

  .sv-vs-mockup-btn,
  .sv-vs-pro-button{
    width:100%!important;
    min-height:48px!important;
  }
}


/* PHASE11G_REAL_WEB_CLEANUP_20260605
   Real web application cleanup:
   - labels/kickers back above headings
   - headings use darker readable banner
   - buttons are graphite/gray with white readable text globally
   - keeps glow underlines and side accents
*/

/* RESET older rainbow and colored button behavior */
.sv-tools-pro .sv-vs-gradient-heading,
.sv-tool-page .sv-vs-gradient-heading,
.lab-page .sv-vs-gradient-heading,
.svx-page .sv-vs-gradient-heading,
main .sv-vs-gradient-heading,
.sv-tools-pro .sv-vs-solid-heading,
.sv-tool-page .sv-vs-solid-heading,
.lab-page .sv-vs-solid-heading,
.svx-page .sv-vs-solid-heading,
main .sv-vs-solid-heading{
  -webkit-text-fill-color:initial!important;
  background:none!important;
  color:#f8fbff!important;
}

/* Small label/kicker MUST stay above heading, not beside it */
.sv-tools-pro :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small),
.sv-tool-page :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small),
.lab-page :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small),
.svx-page :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small),
main :is(.lab-kicker,.sx-kicker,.sv-kicker,.sv7-kicker,.sv8-kicker,.sv9-kicker,.svx-kicker,.svx-kicker-small){
  display:flex!important;
  width:fit-content!important;
  clear:both!important;
  margin:0 0 .58rem!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  color:#65efff!important;
  font-size:.76rem!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  text-shadow:0 0 14px rgba(0,229,255,.30)!important;
}

/* Main section heading = wider dark information banner / title bubble */
.sv-tools-pro .sv-vs-title-banner,
.sv-tool-page .sv-vs-title-banner,
.lab-page .sv-vs-title-banner,
.svx-page .sv-vs-title-banner,
main .sv-vs-title-banner{
  position:relative!important;
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 0 1.15rem!important;
  padding:12px 24px 13px!important;
  border:1px solid rgba(116,238,255,.15)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 10% 12%,rgba(0,229,255,.08),transparent 34%),
    linear-gradient(180deg,rgba(9,20,40,.96),rgba(3,8,20,.96))!important;
  color:#ffffff!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:-.032em!important;
  text-shadow:0 0 13px rgba(0,229,255,.10)!important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(139,92,246,.05)!important;
}

/* Glow underline stays under the title */
.sv-tools-pro .sv-vs-title-banner::after,
.sv-tool-page .sv-vs-title-banner::after,
.lab-page .sv-vs-title-banner::after,
.svx-page .sv-vs-title-banner::after,
main .sv-vs-title-banner::after{
  content:""!important;
  position:absolute!important;
  left:22px!important;
  bottom:-11px!important;
  width:96px!important;
  height:3px!important;
  border-radius:999px!important;
  background:#00e5ff!important;
  box-shadow:0 0 16px rgba(0,229,255,.50)!important;
}

/* Card titles: solid readable, with small glow underline */
.sv-tools-pro .sv-vs-card-title-clean,
.sv-tool-page .sv-vs-card-title-clean,
.lab-page .sv-vs-card-title-clean,
.svx-page .sv-vs-card-title-clean,
main .sv-vs-card-title-clean{
  position:relative!important;
  display:block!important;
  width:auto!important;
  margin:.05rem 0 .78rem!important;
  padding:0 0 .52rem!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:#ffffff!important;
  font-weight:950!important;
  letter-spacing:-.022em!important;
  line-height:1.16!important;
  text-shadow:0 0 12px rgba(0,229,255,.10)!important;
}

.sv-tools-pro .sv-vs-card-title-clean::after,
.sv-tool-page .sv-vs-card-title-clean::after,
.lab-page .sv-vs-card-title-clean::after,
.svx-page .sv-vs-card-title-clean::after,
main .sv-vs-card-title-clean::after{
  content:""!important;
  display:block!important;
  width:92px!important;
  height:2px!important;
  margin-top:.48rem!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#00e5ff,rgba(139,92,246,.45),transparent)!important;
  box-shadow:0 0 14px rgba(0,229,255,.25)!important;
}

/* Cards: keep the nice side line and clean glass background */
.sv-vs-clean-card,
.sv-vs-mockup-card,
.sv-vs-colored-card{
  position:relative!important;
  border-color:rgba(0,229,255,.15)!important;
  background:
    radial-gradient(circle at 12% 10%,rgba(0,229,255,.045),transparent 34%),
    linear-gradient(180deg,rgba(6,16,34,.78),rgba(3,9,22,.80))!important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.sv-vs-clean-card::before,
.sv-vs-mockup-card::before,
.sv-vs-colored-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  border-radius:999px 0 0 999px!important;
  background:linear-gradient(180deg,#00e5ff,#8b5cf6)!important;
  opacity:.78!important;
  pointer-events:none!important;
  box-shadow:0 0 16px rgba(0,229,255,.22)!important;
}

/* GLOBAL BUTTON POLICY: graphite / gray, white text, visible everywhere */
.sv-vs-graphite-btn,
.sv-vs-mockup-btn,
.sv-vs-pro-button,
.sv-tools-pro :is(a,button,input[type="button"],input[type="submit"])[class*="btn"],
.sv-tool-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"],
.lab-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"],
.svx-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:44px!important;
  padding:11px 20px!important;
  border:1px solid rgba(210,226,255,.26)!important;
  border-radius:14px!important;
  background:
    linear-gradient(180deg,rgba(55,65,81,.94),rgba(24,31,44,.96))!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  line-height:1.1!important;
  text-align:center!important;
  text-decoration:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.45)!important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px rgba(0,229,255,.045)!important;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease!important;
}

.sv-vs-graphite-btn:hover,
.sv-vs-mockup-btn:hover,
.sv-vs-pro-button:hover,
.sv-tools-pro :is(a,button,input[type="button"],input[type="submit"])[class*="btn"]:hover,
.sv-tool-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"]:hover,
.lab-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"]:hover,
.svx-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"]:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(0,229,255,.58)!important;
  background:
    linear-gradient(180deg,rgba(75,85,99,.98),rgba(31,41,55,.98))!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.38),
    0 0 18px rgba(0,229,255,.14),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}

/* Force inner text/icons readable */
.sv-vs-graphite-btn *,
.sv-vs-mockup-btn *,
.sv-vs-pro-button *,
.sv-tools-pro :is(a,button,input[type="button"],input[type="submit"])[class*="btn"] *,
.sv-tool-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"] *,
.lab-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"] *,
.svx-page :is(a,button,input[type="button"],input[type="submit"])[class*="btn"] *{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  text-decoration:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.45)!important;
}

/* Optional subtle accent ring for action links */
.sv-vs-graphite-btn::after,
.sv-vs-mockup-btn::after,
.sv-vs-pro-button::after{
  color:#7df6ff!important;
}

/* Normal text links still cyan */
.sv-vs-readable-link:not(.sv-vs-graphite-btn):not(.sv-vs-mockup-btn):not(.sv-vs-pro-button){
  color:#70f3ff!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,229,255,.50)!important;
  text-underline-offset:4px!important;
}

/* Wider simple tool/page banner support */
.sv-tools-pro :is(.hero,.tool-hero,.lab-hero,.sx-hero,.svx-hero,[class*="hero"]):not(header):not(nav),
.sv-tool-page :is(.hero,.tool-hero,.lab-hero,.sx-hero,.svx-hero,[class*="hero"]):not(header):not(nav),
.lab-page :is(.hero,.tool-hero,.lab-hero,.sx-hero,.svx-hero,[class*="hero"]):not(header):not(nav){
  border-color:rgba(0,229,255,.16)!important;
  background:
    radial-gradient(circle at 85% 20%,rgba(0,229,255,.08),transparent 34%),
    linear-gradient(145deg,rgba(5,14,31,.88),rgba(8,9,24,.92))!important;
  box-shadow:
    0 18px 54px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* Header/footer safe */
header .sv-vs-title-banner,
footer .sv-vs-title-banner,
nav .sv-vs-title-banner,
header .sv-vs-card-title-clean,
footer .sv-vs-card-title-clean,
nav .sv-vs-card-title-clean{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  color:inherit!important;
}

header .sv-vs-title-banner::after,
footer .sv-vs-title-banner::after,
nav .sv-vs-title-banner::after,
header .sv-vs-card-title-clean::after,
footer .sv-vs-card-title-clean::after,
nav .sv-vs-card-title-clean::after,
header .sv-vs-clean-card::before,
footer .sv-vs-clean-card::before,
nav .sv-vs-clean-card::before{
  display:none!important;
}

@media(max-width:760px){
  .sv-tools-pro .sv-vs-title-banner,
  .sv-tool-page .sv-vs-title-banner,
  .lab-page .sv-vs-title-banner,
  .svx-page .sv-vs-title-banner,
  main .sv-vs-title-banner{
    width:100%!important;
    border-radius:18px!important;
    padding:11px 15px 12px!important;
  }

  .sv-vs-graphite-btn,
  .sv-vs-mockup-btn,
  .sv-vs-pro-button{
    width:100%!important;
    min-height:48px!important;
  }
}

/* PHASE12A_ROLLBACK_TO_11G_HOTFIX_20260605: stable 11G restored, modal enhancer removed. */