@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Lexend:wght@300;400;500;600&display=swap');
/* Dimau brand theme — light blue glass, light surfaces, dark words (palettes: piktochart sky-blue) */
html:root{--dm-font:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif!important;--dm-head-font:'Manrope','Lexend',system-ui,sans-serif;
 --glass:rgba(240,248,255,.42);--glass-edge:rgba(240,248,255,.9);
 --glass-shadow:inset 0 1px 0 rgba(240,248,255,.95),inset 0 0 22px rgba(240,248,255,.35),0 10px 28px rgba(70,130,180,.22);
 background:radial-gradient(circle at 6% 72%,rgba(240,248,255,.45) 0 15vmax,rgba(176,224,230,.25) 15.2vmax,transparent 15.6vmax),radial-gradient(circle at 94% 8%,rgba(240,248,255,.6) 0 11vmax,rgba(135,206,235,.3) 11.2vmax,transparent 11.6vmax),radial-gradient(circle at 82% 90%,rgba(224,255,255,.4) 0 9vmax,transparent 9.4vmax),radial-gradient(circle at 38% 3%,rgba(240,248,255,.5) 0 4vmax,transparent 4.3vmax),linear-gradient(165deg,#E0FFFF 0%,#B0E0E6 22%,#87CEEB 55%,#00BFFF 100%)!important;background-attachment:fixed!important;min-height:100%;font-size:16px;-webkit-text-size-adjust:100%}
html:root>body{background:transparent!important;color:#000000;font-family:var(--dm-font)!important;font-size:1rem;line-height:1.55}
::selection{background:#87CEEB;color:#000000}
/* everything below stays out of the dark Explorer (connected products) */
@scope (body) to (.network-hero) {
:scope :is(button,input,select,textarea){font-family:inherit}
/* one glass layer per item — cards, tiles and buttons, never their wrappers */
:scope :is(.card,.panel,.stat,.pillar,.num,.dec,.s,.sheet,.modal,.dialog,.fb-card,.lib li,.ladder li,.rulelist li,.pill,.chip,.badge,[class$="-card"],[class$="-panel"],[class$="-pill"],[class$="-chip"],[class$="-badge"],
 input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,button,.btn,.button):not(i):not(:empty):not([class*="dss-"]):not(:has(:is(.card,.panel,.stat,.pillar,.num,.dec,[class$="-card"],[class$="-panel"]))){
 background-color:var(--glass);border:1.5px solid #1E90FF!important;
 box-shadow:0 0 0 1px rgba(135,206,235,.35),0 0 12px rgba(30,144,255,.45),inset 0 0 14px rgba(30,144,255,.18)!important}
:scope :is(.card,.panel,.stat,.pillar,.num,.dec,.sheet,.modal,.dialog,.fb-card,[class$="-card"],[class$="-panel"],.lib li,.ladder li,.rulelist li):not(i):not(:empty):not([class*="dss-"]):not(:has(:is(.card,.panel,.stat,.pillar,.num,.dec,[class$="-card"],[class$="-panel"]))){border-radius:6px 26px 6px 26px!important}
:scope :is(.pill,.chip,.badge,[class$="-pill"],[class$="-chip"],[class$="-badge"],button,.btn,.button,input,select,textarea):not(i):not(:empty):not([class*="dss-"]){border-radius:4px 16px 4px 16px!important}
/* wrappers that hold cards get no layer of their own */
:scope :is(.cards,.pillars,.stats,.grid,.panel,.card,[class$="-cards"],[class$="-grid"]):has(:is(.card,.panel,.stat,.pillar,.num,.dec,[class$="-card"],[class$="-panel"])){background:transparent!important;border:0!important;box-shadow:none!important}
/* bullets */
:scope li::marker{color:#1E90FF}
/* one heading family and one responsive scale: large on desktop, smaller on phones */
:scope :is(h1,h2,h3,h4,h5,h6){font-family:var(--dm-head-font)!important;color:#000000;letter-spacing:-.01em}
:scope h1{font-size:clamp(2rem,1.2rem + 3.6vw,4rem)!important;line-height:1.08;font-weight:800}
:scope h2{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.6rem)!important;line-height:1.15;font-weight:800}
:scope h3{font-size:clamp(1.12rem,1rem + .7vw,1.5rem)!important;line-height:1.25;font-weight:700}
:scope h4{font-size:clamp(1rem,.95rem + .3vw,1.2rem)!important;font-weight:700}
/* header: app name, subtitle — no greyed-out words */
:is(#dimau-shell-header,body > .wrap > header,header) :is(.tag,.tag *,p,small,span){opacity:1!important}
:scope :is(#dimau-shell-header,body > .wrap > header){font-family:var(--dm-font)!important;background:var(--glass)!important;border-bottom:1.5px solid var(--glass-edge)!important}
:scope :is(#dimau-shell-header,body > .wrap > header) .tag > span{color:#191970!important;font-size:clamp(12px,1.25vw,15px)!important;font-weight:500!important}
:scope :is(#dimau-shell-header,body > .wrap > header) .tag > :not(span){color:#000000!important;font-family:var(--dm-head-font)!important;font-size:clamp(18px,2.2vw,26px)!important;font-weight:800!important}
/* primary buttons */
:is(button[type=submit],.btn-primary,.button-primary,.primary-btn,.cta,.btn.primary,button.primary,a.primary){background:linear-gradient(135deg,#1E90FF,#4682B4)!important;color:#F0F8FF!important;border:1.5px solid rgba(240,248,255,.7)!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(240,248,255,.6),0 8px 20px rgba(30,144,255,.35)!important}
/* the same Welcome, Share, Help, Feedback and Account buttons on every app */
:scope :is(.bw-pill,.bw-share,#dimau-shell-utility,#dimau-shell-account,.dm-acct-btn,.fb-open,.share){
 font-family:var(--dm-head-font)!important;font-size:14px!important;font-weight:700!important;line-height:1!important;
 min-height:44px!important;padding:10px 16px!important;border-radius:999px!important;gap:8px!important;
 background:var(--glass)!important;color:#000080!important;border:1.5px solid var(--glass-edge)!important;
 box-shadow:var(--glass-shadow)!important;text-shadow:none!important;letter-spacing:0!important}
:scope :is(.bw-pill,.bw-share,#dimau-shell-utility,#dimau-shell-account,.dm-acct-btn,.fb-open,.share):hover{background:rgba(240,248,255,.7)!important}
:scope :is(.bw-pill,.bw-share,.share) :is(svg,img,.bw-flag){width:18px!important;height:18px!important;flex:0 0 18px}
:scope .bw-float{top:auto!important;left:16px!important;right:auto!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
:scope .fb-open{right:16px!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;left:auto!important}
@media (max-width:640px){:scope :is(.bw-pill,.bw-share,#dimau-shell-utility,#dimau-shell-account,.fb-open,.share){font-size:13px!important;min-height:40px!important;padding:8px 13px!important}}
/* Dimau logo always sits on its white tile */
:scope :is(.tile,.dimau-logo-frame,.dimau-owner-logo-frame,[class*="logo-tile"]){background:#FFFFFF!important;border:0!important;box-shadow:0 4px 14px rgba(70,130,180,.25)!important;border-radius:14px!important}
/* neon-blue edge on every button that has a layer */
:scope :is(.bw-pill,.bw-share,#dimau-shell-utility,#dimau-shell-account,.dm-acct-btn,.fb-open,.share,button[type=submit],.btn-primary,.button-primary,.primary-btn,.cta,.btn.primary,button.primary,a.primary,.card .acts a,.card .acts button,.eco a){
 border:1.5px solid #1E90FF!important;border-radius:4px 16px 4px 16px!important;
 box-shadow:0 0 0 1px rgba(135,206,235,.35),0 0 12px rgba(30,144,255,.45),inset 0 0 14px rgba(30,144,255,.18)!important}

/* ---------- type scale: one set of fonts and sizes across the page ---------- */
:scope{font-weight:400}
:scope :is(p,li,label,td,th,dd,.note,.sub,.north){font-size:15px!important;font-weight:400!important;line-height:1.55!important}
:scope :is(.card,.pillar,.dec,.s,.stat,.num,.lib li,.ladder li,.rulelist li) :is(p,li,span:not([class])){font-size:14px!important;font-weight:400!important}
:scope .lead{font-size:clamp(16px,10px + 1vw,19px)!important;font-weight:400!important}
:scope :is(.lbl,.pk,.st,.tv,small,.fine,.kicker,.ops,.ops span,.legend span,.dn,.n,.stat span){font-size:12px!important;font-weight:500!important;letter-spacing:.02em}
:scope :is(.card,.pillar,.dec,.s,.lib li,.ladder li,.rulelist li) :is(b,strong,h4),:scope b.t{font-family:var(--dm-head-font)!important;font-size:16px!important;font-weight:700!important;color:#000000}
:scope :is(.stat,.num) b{font-family:var(--dm-head-font)!important;font-size:clamp(24px,8px + 2vw,30px)!important;font-weight:800!important}
:scope :is(nav.top a,header nav a){font-size:14px!important;font-weight:500!important;color:#000080!important}
:scope :is(button,.btn,.card .acts a,.play,.dss-copy,.eco a):not(.fb-x):not([class*="dss-"]):not(.fb-card button:not(.play)){font-family:var(--dm-head-font)!important;font-size:14px!important;font-weight:700!important}
/* ---------- share panel: one tidy grid ---------- */
:scope .dss-app.dss-app.dss-app.dss-app{background:transparent!important;border:1.5px solid transparent!important;box-shadow:none!important;border-radius:6px 18px 6px 18px!important;font-family:var(--dm-head-font)!important;font-size:13px!important;font-weight:600!important;color:#000080!important;transition:background .15s,border-color .15s}
:scope .dss-app.dss-app.dss-app.dss-app:is(:hover,:focus-visible){background:rgba(240,248,255,.65)!important;border-color:#1E90FF!important;box-shadow:0 0 12px rgba(30,144,255,.35)!important}
:scope .dss-close.dss-close.dss-close.dss-close{border:1.5px solid #1E90FF!important;border-radius:4px 14px 4px 14px!important;box-shadow:0 0 10px rgba(30,144,255,.35)!important;background:rgba(240,248,255,.7)!important}
:scope .dss-copy{background:linear-gradient(135deg,#1E90FF,#4682B4)!important;color:#F0F8FF!important;border:1.5px solid #1E90FF!important;border-radius:4px 16px 4px 16px!important;box-shadow:0 0 12px rgba(30,144,255,.45)!important}

}