*{box-sizing:border-box}
:root{
--blue:#1769c2;
--blue2:#287fe0;
--blue3:#eaf3ff;
--navy:#123d70;
--ink:#173454;
--muted:#6c829d;
--line:#d8e7f8;
--white:#fff;
--cyan:#16b8d5;
--purple:#8065df;
--shadow:0 12px 35px rgba(32,91,153,.10)
}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink)}
body{background:#eaf3ff}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}

/* HOMEPAGE */

.home-page{
background:linear-gradient(135deg,#07336f 0%,#08458e 55%,#062b60 100%);
min-height:100vh
}
.home-topbar{
height:82px;
padding:0 6vw;
display:flex;
align-items:center;
justify-content:space-between;
background:#080808;
border-bottom:1px solid #292929
}
.brand{
display:flex;
align-items:center;
gap:11px;
color:#174c86;
font-weight:900;
letter-spacing:.5px
}
.brand-mark{
width:43px;
height:43px;
border-radius:13px;
background:linear-gradient(135deg,#1769c2,#35a4ef);
color:white;
display:grid;
place-items:center;
font-size:19px;
box-shadow:0 6px 14px #1769c244
}
.brand small{
display:block;
font-size:9px;
letter-spacing:1.5px;
color:#6e8bab;
margin-top:3px
}
.top-pill{
border-radius:30px;
padding:10px 16px;
background:#edf6ff;
color:#3d6f9f;
font-size:12px;
font-weight:700
}
.top-pill i,.live-dot{
display:inline-block;
width:8px;
height:8px;
background:#20c997;
border-radius:50%;
margin-right:7px
}
.home-main{max-width:1240px;margin:auto;padding:40px 32px}
.hero{
min-height:350px;
border-radius:28px;
background:linear-gradient(115deg,#6326a5,#792fc1 62%,#9849d5);
color:white;
padding:48px 6%;
display:flex;
align-items:center;
justify-content:space-between;
overflow:hidden;
position:relative;
box-shadow:0 20px 45px #00000035
}
.hero:after{
content:"";
position:absolute;
width:430px;
height:430px;
border-radius:50%;
border:1px solid #ffffff30;
right:9%;
top:-160px;
box-shadow:0 0 0 35px #ffffff0b,0 0 0 75px #ffffff0b
}
.hero-copy{max-width:610px;position:relative;z-index:1}
.eyebrow{
font-size:10px;
font-weight:900;
letter-spacing:2px;
color:#6c9ac9
}
.hero .eyebrow{color:#cce8ff}
.hero h1{
font-size:clamp(36px,5vw,58px);
line-height:1.08;
margin:17px 0;
font-weight:850;
letter-spacing:-1.8px
}
.hero h1 em{font-style:normal;color:#c9f3ff}
.hero p{
max-width:570px;
color:#e5f3ff;
font-size:16px;
line-height:1.7;
margin:0
}
.hero-tags{
display:flex;
gap:9px;
flex-wrap:wrap;
margin-top:26px
}
.hero-tags span{
font-size:11px;
font-weight:700;
border:1px solid #ffffff55;
background:#ffffff17;
border-radius:30px;
padding:8px 12px
}
.hero-art{
width:300px;
height:260px;
position:relative;
z-index:1;
display:grid;
place-items:center;
margin-right:5%
}
.orbit{
position:absolute;
border:1px solid #d9f3ff66;
border-radius:50%;
transform:rotate(-25deg)
}
.orbit-one{width:240px;height:160px}
.orbit-two{width:280px;height:210px;transform:rotate(55deg)}
.core{
width:115px;
height:115px;
border-radius:34px;
background:linear-gradient(145deg,#fff,#c7eaff);
color:#1769c2;
display:grid;
place-content:center;
text-align:center;
box-shadow:0 15px 40px #073e7755;
transform:rotate(-8deg)
}
.core span{font-size:38px;font-weight:900}
.core small{font-size:9px;font-weight:900;letter-spacing:2px}
.float-chip{
position:absolute;
background:#fff;
color:#2467a7;
padding:9px 13px;
border-radius:10px;
font-size:10px;
font-weight:900;
box-shadow:0 8px 20px #073e7730
}
.chip-a{top:18px;right:10px}
.chip-b{bottom:25px;left:0}
.chip-c{top:110px;left:-15px}

/* SEZIONE PERCORSI */

.access-section{padding:48px 2% 22px}
.section-heading{text-align:center}
.section-heading h2{
font-size:30px;
margin:9px 0;
color:#ffffff
}
.section-heading p{color:#d3e4fa;margin:0}
.access-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
max-width:900px;
margin:30px auto
}
.access-card{
display:block;
background:white;
border:1px solid #dceafa;
border-radius:20px;
padding:28px 30px;
box-shadow:var(--shadow);
transition:.2s;
position:relative;
overflow:hidden
}
.access-card:hover{
transform:translateY(-5px);
box-shadow:0 18px 40px #276eae22;
border-color:#8bbdf0
}
.access-card:after{
content:"";
position:absolute;
width:130px;
height:130px;
border-radius:50%;
right:-45px;
top:-45px;
background:#eaf4ff
}
.access-icon{
width:55px;
height:55px;
border-radius:16px;
background:#e6f3ff;
color:#1769c2;
display:grid;
place-items:center;
font-size:28px;
margin-bottom:22px;
position:relative;
z-index:1
}
.network-card .access-icon{background:#e4fbf8;color:#0b9d91}
.icon-shield:before{content:"⬡"}
.icon-network:before{content:"◎"}
.card-kicker{
font-size:10px;
letter-spacing:1.6px;
color:#7e9abb;
font-weight:900
}
.access-card h3{
font-size:25px;
margin:8px 0;
color:#174c86
}
.access-card p{
font-size:14px;
line-height:1.6;
color:#71859e;
min-height:45px
}
.access-action{
display:flex;
align-items:center;
justify-content:space-between;
color:#1769c2;
font-size:12px;
font-weight:900;
letter-spacing:1px;
margin-top:22px
}
.access-action b{font-size:24px}
.network-card .access-action{color:#079b91}
.home-bottom{
border-top:1px solid #ffffff35;
padding:23px 5px;
display:flex;
justify-content:space-between;
gap:15px;
color:#d2e2f5;
font-size:12px
}
.home-bottom strong{color:#ffffff;margin-right:12px}
.home-bottom span{display:inline-block}

/* DASHBOARD SEZIONI */

.dashboard-page{background:#eaf3ff;min-height:100vh}
.app-shell{
display:grid;
grid-template-columns:245px minmax(440px,1fr) 300px;
min-height:100vh;
max-width:1900px;
margin:auto;
background:#f4f8ff;
box-shadow:0 0 40px #316ba515
}
.sidebar{
background:linear-gradient(180deg,#287fe0,#1769c2);
color:#fff;
padding:23px 17px;
display:flex;
flex-direction:column;
min-height:100vh
}
.sidebar-left{border-right:1px solid #ffffff22}
.sidebar-brand{color:#fff;margin:0 4px 40px}
.sidebar-brand small{color:#d2e9ff}
.sidebar-brand .brand-mark{
background:#fff;
color:#1769c2;
box-shadow:none
}
.side-label{
font-size:10px;
font-weight:900;
letter-spacing:1.5px;
color:#c8e3ff;
padding:0 10px;
margin-bottom:12px
}
.category-nav,.utility-nav{
display:flex;
flex-direction:column;
gap:5px
}
.category-link{
border:0;
background:transparent;
color:white;
text-align:left;
padding:12px 10px;
border-radius:10px;
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:700
}
.category-link:hover,.category-link.active{background:#ffffff25}
.category-link b{margin-left:auto;font-size:20px;font-weight:400}
.nav-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:7px;
background:#ffffff25;
font-size:16px
}
.subnav{display:none;padding:0 0 7px 43px}
.subnav.open{display:block}
.subnav button,.subnav-empty{
display:block;
border:0;
background:transparent;
color:#e2f2ff;
text-align:left;
font-size:12px;
padding:7px 0
}
.subnav button:hover{text-decoration:underline}
.subnav-empty{opacity:.7}
.muted-category{margin-top:2px}
.side-spacer{flex:1;min-height:40px}
.utility-nav{margin-bottom:28px}
.utility-nav a{
padding:10px;
border-radius:9px;
color:#e9f5ff;
font-size:15px
}
.utility-nav a:hover{background:#ffffff22}
.utility-nav span{margin-left:8px;font-size:13px;font-weight:600}
.sidebar-foot{
font-size:11px;
color:#c7e3ff;
padding:12px 10px;
border-top:1px solid #ffffff35
}

/* AREA CENTRALE */

.main-area{
padding:28px 30px 18px;
min-width:0;
display:flex;
flex-direction:column
}
.main-topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px
}
.breadcrumb{
font-size:9px;
letter-spacing:1.3px;
color:#8aa1bb;
font-weight:800
}
.breadcrumb span{padding:0 7px;color:#a7bfd9}
.breadcrumb b{color:#287fe0}
.main-topbar h1{
font-size:25px;
margin:7px 0 0;
color:#174879
}
.back-home{
font-size:13px;
font-weight:900;
color:#2878c8;
background:#e4f1ff;
padding:13px 17px;
border-radius:10px
}
.welcome-banner{
background:linear-gradient(105deg,#dceeff,#edf7ff);
border:1px solid #d0e5fb;
border-radius:18px;
padding:25px 28px;
display:flex;
align-items:center;
justify-content:space-between;
min-height:155px
}
.welcome-banner h2{
font-size:23px;
color:#174c86;
margin:9px 0
}
.welcome-banner p{
font-size:13px;
color:#6885a4;
line-height:1.6;
margin:0;
max-width:590px
}
.banner-symbol{
display:flex;
align-items:center;
justify-content:center;
width:80px;
height:100px;
margin-right:25px;
font-size:0;
text-shadow:none
}
.static-color-bar{
display:block;
width:9px;
height:76px;
border-radius:10px;
background:linear-gradient(180deg,#ffd166 0%,#ff65a3 35%,#a77bff 70%,#37d6e8 100%);
flex-shrink:0
}
.catalog-heading{
display:flex;
justify-content:space-between;
align-items:center;
margin:30px 0 17px
}
.catalog-heading h2{
font-size:19px;
color:#1b4c7c;
margin:0 0 5px
}
.catalog-heading p{
font-size:11px;
color:#8196ad;
margin:0
}
.count-pill,.count-small{
font-size:10px;
font-weight:900;
color:#2878c8;
background:#e3f1ff;
padding:7px 10px;
border-radius:20px
}
.lab-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px
}
.lab-card{
background:white;
border:1px solid #dceafa;
border-radius:16px;
padding:20px;
box-shadow:0 8px 24px #32699c0b;
min-height:215px;
display:flex;
flex-direction:column
}
.lab-card-top{
display:flex;
justify-content:space-between;
align-items:flex-start
}
.lab-card-icon{
width:43px;
height:43px;
border-radius:13px;
background:#e7f3ff;
color:#287fe0;
display:grid;
place-items:center;
font-size:22px
}
.lab-card-icon.wifi{background:#e3faf6;color:#0a9d91}
.lab-tag{
font-size:9px;
font-weight:900;
letter-spacing:1px;
color:#7898b8;
background:#f1f7fd;
padding:6px 8px;
border-radius:20px
}
.lab-card h3{
font-size:16px;
color:#1a4d7e;
margin:17px 0 5px
}
.lab-card p{
font-size:11px;
line-height:1.5;
color:#8094aa;
margin:0 0 18px
}
.lab-card-actions{display:flex;gap:8px;margin-top:auto}
.primary-button,.explain-button{
border:0;
border-radius:9px;
padding:11px 13px;
font-size:10px;
font-weight:900;
letter-spacing:.4px
}
.primary-button{
background:linear-gradient(100deg,#1769c2,#3295e7);
color:white;
flex:1;
box-shadow:0 5px 12px #287fe033
}
.explain-button{background:#eeeaff;color:#7055c8}
.coming-card{
border:1px dashed #bfd6ed;
background:#f9fcff;
justify-content:center;
align-items:center;
text-align:center;
color:#8aa5c0
}
.coming-card strong{font-size:13px;margin:10px}
.coming-card p{margin:0}
.main-footer{
margin-top:auto;
padding-top:25px;
display:flex;
justify-content:space-between;
gap:10px;
color:#9aacc0;
font-size:9px
}

/* SIDEBAR DESTRA VIOLA */

.sidebar-right{
background:linear-gradient(180deg,#6424a5 0%,#752db8 55%,#54208e 100%);
color:#244768;
border-left:1px solid #ffffff30;
padding:25px 17px;
gap:15px
}
.right-heading{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:2px
}
.right-heading .eyebrow{font-size:9px;color:#e2caff}
.right-heading h2{
font-size:17px;
color:#ffffff;
margin:5px 0 0
}
.stats-card{
border:1px solid #e0ebf7;
border-radius:14px;
padding:14px;
background:#fff;
box-shadow:0 6px 20px #2b63920b
}
.stats-card-title{
display:flex;
justify-content:space-between;
align-items:center;
font-size:11px;
font-weight:800;
color:#456888
}
.mini-status{
font-size:8px;
letter-spacing:.7px;
color:#8aa2b9;
background:#f0f5fa;
border-radius:20px;
padding:5px 7px
}
.donut-wrap{
display:grid;
place-items:center;
padding:14px 0 10px
}
.donut{
width:130px;
height:130px;
border-radius:50%;
background:conic-gradient(#287fe0 0deg,#dceafa 0deg);
display:grid;
place-items:center;
position:relative
}
.donut:before{
content:"";
position:absolute;
inset:12px;
background:#fff;
border-radius:50%
}
.donut>div{
position:relative;
display:flex;
flex-direction:column;
align-items:center
}
.donut strong{font-size:27px;color:#1b68b5}
.donut small{
font-size:8px;
letter-spacing:1px;
color:#8ba1b8;
font-weight:800
}
.stats-legend{
display:flex;
justify-content:center;
gap:13px;
font-size:8px;
color:#8197ad
}
.stats-legend i{
width:7px;
height:7px;
border-radius:50%;
display:inline-block;
margin-right:4px
}
.legend-blue{background:#287fe0}
.legend-pale{background:#dceafa}
.compact-stats{padding:13px 14px}
.clock-icon{font-size:18px;color:#287fe0}
.timer-value{
font-size:29px;
letter-spacing:1px;
color:#1769c2;
font-weight:850;
margin:9px 0 1px
}
.timer-caption{font-size:9px;color:#8ba0b5}
.score-icon{color:#f3a928;font-size:16px}
.score-line{display:flex;align-items:baseline;gap:9px;margin:11px 0}
.score-line strong{font-size:25px;color:#194f82}
.score-line span{font-size:9px;color:#91a3b7}
.bar-track{height:7px;background:#e8f0f8;border-radius:20px;overflow:hidden}
.bar-fill{
height:100%;
width:0;
background:linear-gradient(90deg,#16b8d5,#287fe0);
border-radius:20px;
transition:width .3s
}
.right-labs{padding:4px 1px}
.right-labs>.stats-card-title{margin-bottom:9px;color:#fff}
.right-lab-item{
border:1px solid #e2edf8;
border-radius:10px;
padding:9px;
margin:7px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:5px
}
.right-lab-name{
display:flex;
align-items:center;
gap:7px;
font-size:11px;
font-weight:700;
color:#46698b
}
.lab-dot{width:8px;height:8px;border-radius:50%}
.clamav-dot{background:#287fe0}
.wifi-dot{background:#16b8a4}
.explain-small{
border:0;
border-radius:7px;
background:#eeeaff;
color:#7055c8;
font-size:9px;
font-weight:900;
padding:7px 8px
}
.right-note{
display:flex;
gap:9px;
align-items:center;
background:#ffffff20;
border-radius:11px;
padding:12px;
color:#fff
}
.right-note .static-color-bar{
width:6px;
height:36px;
border-radius:8px
}
.right-note p{
font-size:10px;
line-height:1.5;
margin:0;
color:#f1e7ff
}

/* VISTA LAB E SPIEGAZIONI */

.lab-view-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:13px;
gap:12px
}
.text-back{
border:0;
background:transparent;
color:#2878c8;
font-size:11px;
font-weight:800;
padding:0;
margin-bottom:8px
}
.lab-view-header h2{font-size:21px;margin:0;color:#194e80}
.lab-view-header p{font-size:11px;color:#8095aa;margin:5px 0 0}
.explain-top-button,.return-lab-button{
border:0;
border-radius:10px;
background:linear-gradient(100deg,#745bd0,#967be9);
color:white;
padding:12px 16px;
font-size:10px;
font-weight:900;
box-shadow:0 5px 14px #8065df30
}
.iframe-wrap{
height:calc(100vh - 190px);
min-height:520px;
border:1px solid #d6e5f5;
border-radius:14px;
overflow:hidden;
background:#fff;
box-shadow:var(--shadow)
}
.iframe-wrap iframe{
width:100%;
height:100%;
border:0;
background:#fff
}
.explanation-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid #dbe8f6;
padding:0 0 16px
}
.explanation-article{
max-width:780px;
margin:30px auto;
background:#fff;
border:1px solid #dceafa;
border-radius:18px;
padding:36px;
box-shadow:var(--shadow)
}
.explanation-icon{
width:58px;
height:58px;
border-radius:17px;
background:#e9f3ff;
display:grid;
place-items:center;
font-size:27px;
margin-bottom:20px
}
.explanation-article h2{
font-size:30px;
color:#174c86;
margin:9px 0 13px
}
.explanation-lead{
font-size:16px;
line-height:1.7;
color:#52789d
}
.explanation-article #explanationBody{
font-size:14px;
line-height:1.8;
color:#617c98
}
.explanation-article #explanationBody h3{
color:#205b91;
margin-top:25px
}
.explanation-article #explanationBody ul{padding-left:22px}
.bottom-return{margin-top:28px}
[hidden]{display:none!important}

/* RESPONSIVE */

@media(max-width:1150px){
.app-shell{grid-template-columns:210px minmax(400px,1fr)}
.sidebar-right{
grid-column:1/-1;
min-height:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
align-items:start;
border-left:0;
border-top:1px solid #d9e8f7
}
.right-heading,.right-labs,.right-note{grid-column:1/-1}
.sidebar-right .stats-card{min-width:0}
.sidebar-left{min-height:100vh}
}

@media(max-width:760px){
.home-topbar{padding:0 18px}
.top-pill{display:none}
.home-main{padding:20px 15px}
.hero{padding:32px 25px;min-height:300px}
.hero-art{display:none}
.hero h1{font-size:39px}
.access-grid{grid-template-columns:1fr}
.home-bottom{flex-direction:column}
.app-shell{display:flex;flex-direction:column}
.sidebar{min-height:auto}
.sidebar-left{padding:14px}
.sidebar-brand{margin-bottom:15px}
.side-label{margin-top:10px}
.category-nav{display:grid;grid-template-columns:repeat(2,1fr)}
.subnav{padding-left:10px}
.side-spacer{display:none}
.utility-nav{
flex-direction:row;
flex-wrap:wrap;
margin:10px 0
}
.sidebar-foot{display:none}
.main-area{padding:20px 14px}
.main-topbar{align-items:flex-start}
.main-topbar h1{font-size:20px}
.lab-grid{grid-template-columns:1fr}
.welcome-banner{padding:20px}
.banner-symbol{margin-right:0;width:35px}
.banner-symbol .static-color-bar{height:55px}
.sidebar-right{
display:grid;
grid-template-columns:1fr 1fr;
padding:15px
}
.right-heading,.right-labs,.right-note{grid-column:1/-1}
.iframe-wrap{height:70vh;min-height:520px}
.lab-view-header{
align-items:flex-start;
flex-direction:column
}
.explanation-article{padding:22px}
.main-footer{flex-direction:column}
}