is light-pink, off-theme on dark. */
body.kt-deepspace code{
background:var(--bg-elev)!important;color:var(--cyan)!important;
border:1px solid var(--hair)!important;border-radius:6px;padding:2px 7px;}
body.kt-deepspace code a,body.kt-deepspace code a:hover{color:var(--cyan)!important;}
body.kt-deepspace pre{
background:var(--bg-elev)!important;color:var(--text)!important;
border:1px solid var(--hair)!important;border-radius:10px;padding:14px 16px;}
/* KPI hero numbers (membership .counter / traffic+device+balance strong>a) */
body.kt-deepspace .card.card-custom .font-size-h4 .counter,
body.kt-deepspace .card.card-custom .font-size-h4 strong,
body.kt-deepspace .card.card-custom .font-size-h4 strong a{
font-family:var(--fmono)!important;font-weight:700!important;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;text-decoration:none!important;}
/* KPI sub-text (expiry / speed limit / next reset) — CN labels stay system, digits go mono */
/* KPI sub-labels only (.text-dark-50) — NOT every card-body (that muted +
mono'd prose like the tutorial steps, hurting readability). */
body.kt-deepspace .card.card-custom .card-body p.text-dark-50,
body.kt-deepspace .card.card-custom .card-body .font-size-sm{
font-family:var(--fmono)!important;color:var(--muted)!important;}
/* ====================== 3. CANVAS + BACKGROUND FIELD ====================== */
/* body keeps its inline background-image (user_bg_top.jpg header band, head.tpl:21);
we only set background-color underneath it. */
body.kt-deepspace{
background-color:var(--bg)!important;
background-repeat:no-repeat!important;background-position:top center!important;
background-size:100% 520px!important;}
/* grid layer (::before) — strongest at top, masked out below */
body.kt-deepspace::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background-image:
linear-gradient(var(--hair) 1px,transparent 1px),
linear-gradient(90deg,var(--hair) 1px,transparent 1px);
background-size:54px 54px;opacity:.3;
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);}
/* aurora layer (::after) — soft radial stops fake blur(100px), cheap on GPU.
NOTE: shares ::after with the loading splash (§19); while body.page-loading is
present the splash wins (more specific); after DOM-ready the aurora shows. */
body.kt-deepspace::after{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(680px 560px at 30% -180px,rgba(42,59,255,.30),transparent 62%),
radial-gradient(560px 460px at 60% -100px,rgba(0,224,255,.20),transparent 60%),
radial-gradient(480px 400px at -6% 40%,rgba(110,123,255,.13),transparent 60%);}
/* let the field show through structural shells */
body.kt-deepspace .d-flex.flex-column.flex-root,
body.kt-deepspace .page,
body.kt-deepspace #kt_wrapper,
body.kt-deepspace #kt_content,
body.kt-deepspace .subheader{background:transparent!important;}
/* ====================== 4. CARDS / KILL MACARONS / TEXT / SVG ====================== */
/* generic panel -> deepspace glass (solid + hairline + inner top highlight) */
body.kt-deepspace .card.card-custom{
background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--panel)!important;
border:1px solid var(--hair)!important;border-radius:var(--r-card)!important;
box-shadow:0 16px 40px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05)!important;}
body.kt-deepspace .card.card-custom.shadow-lg,
body.kt-deepspace .shadow-lg{box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)!important;}
body.kt-deepspace .card.card-custom .card-header{background:transparent!important;}
/* respect Metronic's .border-0 (shop/agent use an empty .card-header.border-0 as a
top spacer — drawing a hairline there floats a weird divider above the title). */
body.kt-deepspace .card.card-custom .card-header:not(.border-0){border-bottom:1px solid var(--hair)!important;}
body.kt-deepspace .card-label,body.kt-deepspace .card-title{color:var(--text)!important;}
/* bare .card (NOT .card-custom): onboarding wizard + node-list class accordion
group headers ("白金会员" etc.). Metronic leaves these white, so force dark
(needs !important + :not to beat the bundle's .card{background:#fff}). */
body.kt-deepspace .card:not(.card-custom){
background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--hair)!important;}
body.kt-deepspace .card:not(.card-custom) > .card-header{background:transparent!important;border-color:var(--hair)!important;}
/* accordion group cards (node-list class headers "白金会员" etc.): the visible chip
IS the .card-header.rounded-xl.shadow-lg. Styling the wrapper .card too drew a
second, smaller-radius (5px) border around the rounded (16px) header = doubled
corner. Make the wrapper transparent and let the header be the single chip. */
body.kt-deepspace .accordion .card{background:transparent!important;border:0!important;box-shadow:none!important;}
body.kt-deepspace .accordion .card > .card-header{
background:var(--panel)!important;border:1px solid var(--hair)!important;border-radius:16px!important;}
/* the .accordion-svg-toggle .card-title carries the white bg (not .card/.card-header) */
body.kt-deepspace .accordion .card-title{background:transparent!important;color:var(--text)!important;}
body.kt-deepspace .accordion .card-title .card-label{color:var(--text)!important;}
/* the accordion chevron is an uncolored .svg-icon (fill #000000 -> invisible on dark) */
body.kt-deepspace .accordion .card-header .svg-icon svg g [fill]{fill:var(--muted)!important;}
/* pastel corner art (abstract-2.svg), inline-tinted cards (#663259 purple),
photo cards (img-16.jpg) -> flat panel; !important flattens both image & color */
body.kt-deepspace .card.bgi-no-repeat{
background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent)!important;
background-color:var(--panel)!important;}
/* 4 KPI macaron tints + assorted light fills + agent solid cards -> flat panel.
Use .card.bg-* (not bare .bg-*) so progress-bar/label bg-primary stays untouched. */
body.kt-deepspace .bg-diagonal,
body.kt-deepspace .bg-diagonal-light-primary,
body.kt-deepspace .bg-diagonal-light-success,
body.kt-deepspace .bg-diagonal-light-warning,
body.kt-deepspace .bg-diagonal-light-danger,
body.kt-deepspace .bg-white,
body.kt-deepspace .card.bg-primary,
body.kt-deepspace .card.bg-success,
body.kt-deepspace .card.bg-info,
body.kt-deepspace .card.bg-warning,
body.kt-deepspace .card.bg-danger,
body.kt-deepspace [class*="bg-radial-gradient"]{
background-image:none!important;background-color:var(--panel)!important;}
/* the diagonal macaron is painted by ::before/::after pseudo overlays
(style.white.css ~21727) that sit ON TOP of the card bg — kill them so the
dark panel shows through. This is what actually flattens the 4 KPI cards. */
body.kt-deepspace .bg-diagonal:before,
body.kt-deepspace .bg-diagonal:after{display:none!important;}
body.kt-deepspace .card.bg-primary .text-white,
body.kt-deepspace .card.bg-primary .text-inverse-primary{color:var(--text)!important;}
/* text utilities -> deepspace text/muted; separators -> hair */
body.kt-deepspace .text-dark,body.kt-deepspace .text-dark-75,
body.kt-deepspace h1,body.kt-deepspace h2,body.kt-deepspace h3,
body.kt-deepspace h4,body.kt-deepspace h5,body.kt-deepspace .text-white{color:var(--text)!important;}
body.kt-deepspace .text-dark-50,body.kt-deepspace .text-muted{color:var(--muted)!important;opacity:1;}
body.kt-deepspace .text-primary{color:var(--cyan)!important;}
body.kt-deepspace .separator,body.kt-deepspace .separator-dashed,
body.kt-deepspace .separator-border-4{border-color:var(--hair)!important;}
/* symbol bricks (client logos, avatars) -> sunken bg-elev well */
body.kt-deepspace .symbol .symbol-label,
body.kt-deepspace .symbol.symbol-light .symbol-label,
body.kt-deepspace .bg-light-primary{
background-color:var(--bg-elev)!important;border:1px solid var(--hair)!important;}
/* SVG icon recolor (Metronic drives fill via CSS on inline