*,*::before,*::after{-webkit-tap-highlight-color:transparent !important}
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}
button,a,input,select{touch-action:manipulation}

:root{--bg:#f5f6f8;--card:#fff;--text:#111318;--muted:#737983;--line:#e7e9ed;--soft:#f6f7f9;--orange:#ff5a1f;--green:#16a36a;--shadow:0 8px 30px rgba(0,0,0,.06)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
button,select{font:inherit}
button{cursor:pointer}
.wrap{width:min(1120px,calc(100% - 48px));margin:auto}
header{height:68px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.brand{display:flex;align-items:center;gap:6px;flex-shrink:0}
a.brand,
a.brand:visited,
a.brand:hover,
a.brand:focus,
a.brand:active{color:#ff5a1f;text-decoration:none}
.brandmark{width:38px;height:38px;object-fit:contain;border-radius:10px;display:block;box-shadow:0 6px 16px rgba(255,90,31,.28);transition:box-shadow .25s ease,transform .25s ease}
a.brand:hover .brandmark{box-shadow:0 8px 22px rgba(255,90,31,.42);transform:translateY(-1px)}
.brandname{font-size:21px;letter-spacing:-.4px;font-weight:700;color:#ff5a1f;text-decoration:none}
.main-menu{display:flex;align-items:center;justify-content:flex-end;gap:20px;margin-left:auto}
.main-menu a{color:var(--text);text-decoration:none;font-size:13px;white-space:nowrap;transition:color .2s}
.main-menu a:hover{color:var(--orange)}
.menu-extra{display:flex;align-items:center;gap:8px}
.menu-extra select{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:8px;padding:8px 10px;font-size:12px;cursor:pointer}

/* ---------- FASQOO LITE BUTTON – PREMIUM GRADIENT ---------- */
.lite-btn,
.lite-btn:visited{
  height:37px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#ff5a1f 0%,#ff8b61 100%);
  color:#fff!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 15px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1px;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(255,90,31,.30),inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
  flex-shrink:0;
  position:relative;
}
.lite-btn::before{
  content:"";
  font-size:13px;
  line-height:1;
  display:inline-block;
  transform:translateY(-.5px);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.lite-btn:hover,
.lite-btn:focus{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(255,90,31,.42),inset 0 1px 0 rgba(255,255,255,.28);
  filter:brightness(1.05);
  color:#fff!important;
}
.lite-btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.install-btn{height:35px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;font-size:12px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.install-btn:hover{background:var(--soft);border-color:#bfc7d1;box-shadow:0 3px 10px rgba(0,0,0,.05);transform:none}.install-btn:active{transform:translateY(1px)}.install-btn[hidden]{display:none}.install-platform-icon{width:16px;height:16px;display:grid;place-items:center;border:1px solid currentColor;border-radius:5px;font-size:12px;font-weight:800;line-height:1}.install-btn .install-label{line-height:1}
.theme-btn{width:35px;height:35px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);display:grid;place-items:center;font-size:16px}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:20px;color:var(--text)}

.lang-control{
  height:35px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 10px;
  box-shadow:none;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.lang-control:hover{background:var(--soft);border-color:#bfc7d1;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.lang-icon{font-size:14px;line-height:1;color:currentColor;transform:none;display:inline-block}
.lang-control select{min-width:76px;height:33px;border:0;outline:0;background:transparent;color:var(--text);padding:0 14px 0 0;font-size:12px;font-weight:500;cursor:pointer;}
.lang-control:focus-within{border-color:#bfc7d1;box-shadow:0 3px 10px rgba(0,0,0,.05);}
.theme-btn{width:35px;height:35px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);display:grid;place-items:center;font-size:16px;box-shadow:none;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;}
.theme-btn:hover{background:var(--soft);border-color:#bfc7d1;box-shadow:0 3px 10px rgba(0,0,0,.05);transform:none}
@media(max-width:900px){.lang-control{height:35px}.lang-control select{height:33px;min-width:68px}.theme-btn{width:35px;height:35px}}
@media(max-width:600px){.menu-extra{gap:6px}.lite-btn{font-size:11px;padding:0 12px;height:34px}.lite-btn::before{font-size:12px}.lang-control{padding:0 8px}.lang-control select{min-width:58px;font-size:11px}}
main{padding:30px 0 65px}
.hero{text-align:center;margin-bottom:25px}
.hero h1{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-1px;margin:0 0 9px}
.hero p{margin:0;color:var(--muted);font-size:14px}
.server-line{display:flex;justify-content:center;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.server-badge{border:1px solid var(--line);padding:7px 12px;font-size:11px;color:var(--muted);background:#fff}
.server-badge strong{color:var(--text);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:28px}
.grid{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:center}
.speedbox{text-align:center}
.gauge{width:295px;height:295px;margin:auto;position:relative}
.gauge svg{width:100%;height:100%;transform:rotate(-135deg)}
.ring{fill:none;stroke:#edf0f4;stroke-width:13;stroke-linecap:round;stroke-dasharray:816;stroke-dashoffset:204}
.progress{fill:none;stroke:url(#g);stroke-width:12;stroke-linecap:round;stroke-dasharray:816;stroke-dashoffset:816;transition:stroke-dashoffset .45s cubic-bezier(.22,.61,.36,1)}
.center{position:absolute;inset:0;display:grid;place-content:center}
.num{font-size:52px;line-height:1;font-weight:700;letter-spacing:-2px}
.unit{font-size:13px;color:var(--muted);margin-top:7px}
.status{min-height:21px;margin-top:-8px;color:var(--muted);font-size:13px}
.start{margin-top:16px;width:220px;height:56px;border:0;border-radius:8px;background:var(--orange);color:#fff;font-size:15px;font-weight:600;transition:.2s}
.start:hover{transform:translateY(-1px)}
.start:disabled{opacity:.6;cursor:not-allowed;transform:none}
.metrics{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.metric{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.metric:nth-child(2n){border-right:0}
.metric:nth-child(n+3){border-bottom:0}
.mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.label{font-size:12px;color:var(--muted)}
.icon{width:32px;height:32px;border-radius:50%;background:#f3f3f3;color:#111;display:grid;place-items:center;font-size:13px}
.value{font-size:25px}
.small{font-size:12px;color:var(--muted)}
.chart{border:1px solid var(--line);margin-top:14px;padding:17px}
.charthead{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px}
.charthead span{color:var(--muted);font-size:11px}
canvas{width:100%;height:155px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:17px}
.info{padding:15px;border:1px solid var(--line);background:var(--card)}
.info .label{text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.info .iv{margin-top:7px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quality{margin-top:17px;padding:19px;border:1px solid var(--line)}
.qtop{display:flex;justify-content:space-between;align-items:center}
.qscore{font-size:26px}
.bar{height:8px;background:#edf1f5;border-radius:99px;margin:13px 0;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e5484d,#e6a500,#16a36a);transition:.5s}
.qtext{font-size:12px;color:var(--muted)}
.section{margin-top:32px}
.section h2{font-size:19px;font-weight:700;margin:0 0 13px}
.section-sub{color:var(--muted);font-size:12px;margin:-5px 0 15px}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.tool{padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.tool h3{font-size:14px;font-weight:600;margin:11px 0 6px}
.tool p{font-size:12px;line-height:1.55;color:var(--muted);margin:0}
.report{padding:20px;border:1px solid var(--line)}
.reportgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.r{background:var(--soft);padding:13px}
.r b{display:block;font-size:10px;color:var(--muted);font-weight:400;text-transform:uppercase}
.r span{display:block;margin-top:6px;font-size:14px}
.actions{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.action{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:9px 13px;color:#334155;font-size:12px}
.action:hover{background:var(--soft)}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.method-card{position:relative;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:18px;min-height:190px}.method-num{display:inline-flex;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center;background:var(--soft);color:var(--orange);font-size:11px;font-weight:800}.method-card h3{margin:18px 0 8px;font-size:14px}.method-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}.method-note{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-size:12px;color:var(--muted);line-height:1.6}

.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:22px 0 0;font-size:11px;color:var(--muted);line-height:1.5}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust span::before{content:"✓";color:var(--green);font-weight:700;font-size:12px;line-height:1}

.history{border:1px solid var(--line);background:var(--card);overflow:auto}
.hhead{padding:17px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.hhead h2{margin:0;font-size:15px;font-weight:700}
table{width:100%;border-collapse:collapse;min-width:650px}
th,td{text-align:left;padding:13px 17px;border-bottom:1px solid #eef1f5;font-size:12px}
th{font-weight:400;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:25px}
footer{background:var(--card);border-top:1px solid var(--line);padding:23px 0;color:var(--muted);font-size:11px}
.foot{display:flex;justify-content:space-between}
.fasqoo-footer-copy{display:flex;flex-direction:column;gap:8px;line-height:1.55}
.fasqoo-footer-copy div:first-child{font-weight:600}
.fasqoo-footer-links{display:flex;flex-wrap:wrap;gap:10px 20px}
.fasqoo-footer-links a{color:inherit;text-decoration:none;opacity:.82}
.fasqoo-footer-links a:hover{opacity:1;text-decoration:underline}
.dark{--bg:#0d0f12;--card:#15181d;--text:#f3f4f6;--muted:#9aa1ab;--line:#2a2f36;--soft:#1b1f25}
.dark header,.dark footer{background:#111318}
.dark .ring{stroke:#292e35}
.dark .icon{background:#22262c;color:#eee}
.dark .server-badge{background:var(--card)}
.dark th,.dark td{border-color:#282d34}
@media(max-width:1000px){.apps,.tools,.reportgrid,.method-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.method-grid{grid-template-columns:1fr}
  .menu-toggle{display:block}
  .main-menu{display:none;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);padding:20px;gap:15px;box-shadow:0 10px 20px rgba(0,0,0,.1);align-items:flex-start}
  .main-menu.active{display:flex}
  .menu-extra{width:100%;justify-content:flex-start;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);gap:12px}
}
@media(max-width:560px){
  body{overflow-x:hidden}
  .wrap{width:100%}
  .hero h1{font-size:26px}
  .card{padding:17px}
  .gauge{width:240px;height:240px}
  .num{font-size:42px}
  .metric{padding:13px}
  .info-grid,.tools,.reportgrid{grid-template-columns:1fr 1fr}
  .foot{flex-direction:column;gap:7px}
  .hero-trust{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:14px;margin-top:16px;padding:0 4px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .hero-trust::-webkit-scrollbar{display:none}
  .hero-trust span{flex:0 0 auto;white-space:nowrap}
}
:root{
  --bg:#f3f5f8;--card:#fff;--text:#10141a;--muted:#69727e;--line:#e3e7ec;
  --soft:#f7f8fa;--orange:#ff5a1f;--orange-2:#ff7b45;--green:#16a36a;
  --shadow:0 16px 45px rgba(16,24,40,.07);--radius:16px;
}
body{background:radial-gradient(circle at 50% -15%,rgba(255,90,31,.08),transparent 34%),var(--bg)}
.wrap{width:min(1180px,calc(100% - 40px))}
header{height:72px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand{gap:8px}.brandmark{width:40px;height:40px;border-radius:11px}.brandname{font-size:22px;font-weight:800;letter-spacing:-.7px;color:#ff5a1f;text-decoration:none}
.main-menu{gap:22px}.main-menu a{font-weight:500}
.menu-extra select,.theme-btn{margin:0;padding:0}
.eyebrow,.section-kicker,.mini-kicker{font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--orange);text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(255,90,31,.18);background:rgba(255,90,31,.06);border-radius:999px}
.eyebrow-dot,.pulse,.mini-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.eyebrow-dot{box-shadow:0 0 0 4px rgba(255,90,31,.10)}
.premium-hero h1{font-size:clamp(38px,5vw,58px);letter-spacing:-2.2px;margin:16px 0 10px;font-weight:800}
.premium-hero p{font-size:16px}
.server-line{margin:8px 0 22px}
.server-badge{border-radius:999px;padding:7px 14px}
.card{border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.test-card{position:relative;overflow:hidden}
.test-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--orange),#ffb18e,transparent)}
.test-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.test-topline strong{display:block;margin-top:4px;font-size:13px}
.phase-steps{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.phase-step{font-size:10px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--soft)}
.phase-step.active{color:var(--orange);border-color:rgba(255,90,31,.25);background:rgba(255,90,31,.07);font-weight:700}
.gauge{width:315px;height:315px}
.gauge:after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(255,90,31,.08);pointer-events:none}
.num{font-size:58px;font-weight:800}.start{width:230px;height:58px;border-radius:12px;box-shadow:0 10px 22px rgba(255,90,31,.20)}
.start:hover{box-shadow:0 14px 28px rgba(255,90,31,.25)}
.gauge-caption{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:10px;margin-top:9px}
.pulse{width:6px;height:6px;background:#aeb7c2}
.metrics{border-radius:12px;overflow:hidden;background:var(--card)}
.metric{padding:21px}.metric .icon{background:var(--soft);border:1px solid var(--line)}
.value{font-size:28px;font-weight:700;letter-spacing:-.5px}
.chart{border-radius:12px;background:linear-gradient(180deg,var(--soft),transparent);margin-top:15px}
.info-grid{gap:12px}.info{border-radius:12px;padding:16px}
.quality{border-radius:12px;background:linear-gradient(135deg,var(--soft),transparent)}
.quality-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:10px;color:var(--muted)}
.mini-dot{width:5px;height:5px;background:var(--green);vertical-align:middle;margin-right:5px}
#qualityLabel{font-weight:700;color:var(--text)}
.section{margin-top:42px}.section h2{font-size:22px;letter-spacing:-.5px}
.section-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:15px}
.section-heading-row h2{margin:5px 0 5px}.section-heading-row .section-sub{margin:0}
.section-badge{font-size:9px;font-weight:800;letter-spacing:1px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.intelligence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.intel-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:18px;border:1px solid var(--line);background:var(--card);border-radius:14px;box-shadow:0 5px 20px rgba(16,24,40,.035)}
.intel-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,90,31,.08);color:var(--orange);font-weight:800;grid-row:span 2}
.intel-card span{font-size:10px;color:var(--muted);display:block}.intel-card strong{font-size:17px;display:block;margin-top:3px}.intel-card small{grid-column:2;color:var(--muted);font-size:9px;margin-top:4px}
.apps,.tools{gap:14px}.tool{border-radius:14px;box-shadow:0 5px 20px rgba(16,24,40,.035)}
.report,.history{border-radius:14px;overflow:hidden}.r{border-radius:10px}
.history{border-radius:14px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.history .hhead{min-width:0}
.history table{min-width:650px}
.actions .action{border-radius:10px}
footer{margin-top:45px}.foot{align-items:flex-start}
.dark{--bg:#090c10;--card:#12161b;--text:#f4f6f8;--muted:#98a2ae;--line:#29303a;--soft:#171c22;--shadow:0 18px 50px rgba(0,0,0,.25)}
.dark body{background:radial-gradient(circle at 50% -15%,rgba(255,90,31,.09),transparent 34%),var(--bg)}
.dark header,.dark footer{background:rgba(14,17,22,.88)}
.dark .lang-control{background:var(--card);border-color:var(--line);color:var(--text)}
.dark .lang-control select{background:var(--card);color:var(--text);color-scheme:dark}
.dark .lang-control select option{background:var(--card);color:var(--text)}
.dark .test-card:before{background:linear-gradient(90deg,var(--orange),#ff8b61,transparent)}
.dark .premium-hero .eyebrow{background:rgba(255,90,31,.09)}
.dark .server-badge,.dark .intel-card,.dark .tool,.dark .report,.dark .history{background:var(--card)}
.dark .phase-step{background:var(--soft)}
.dark .phase-step.active{background:rgba(255,90,31,.10)}
.dark .quality{background:linear-gradient(135deg,var(--soft),transparent)}
.dark .start{box-shadow:0 12px 26px rgba(255,90,31,.14)}
@media(max-width:1000px){.intelligence-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.method-grid{grid-template-columns:1fr}
  .wrap{width:min(100% - 24px,1180px)}.premium-hero h1{letter-spacing:-1.5px}
  .test-topline{align-items:flex-start;flex-direction:column}.phase-steps{justify-content:flex-start}
  .gauge{width:280px;height:280px}.gauge:after{inset:23px}
}
@media(max-width:560px){
  .card{padding:18px}.gauge{width:245px;height:245px}.num{font-size:46px}
  .intelligence-grid{grid-template-columns:1fr 1fr}.intel-card{padding:13px}.intel-card small{display:none}
  .section-heading-row{align-items:flex-start;flex-direction:column;gap:8px}
}
@media(max-width:560px){
  .hhead{padding:13px 14px;gap:10px;align-items:flex-start;flex-wrap:wrap}
  .hhead h2{font-size:14px;line-height:1.35;min-width:0;flex:1 1 180px}
  .hhead .action{flex:0 0 auto;white-space:nowrap}
  .history{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}
  .history table{min-width:650px}
  .history th,.history td{padding:11px 12px;font-size:11px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{
  header,footer,.premium-hero,.server-line,.start,.phase-steps,.actions,.apps,.tools,.intelligence-section,.hero-trust{display:none!important}
  body{background:#fff!important}.card,.report,.history{box-shadow:none!important;border:1px solid #ddd}
}
.connection-grade{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.connection-grade.good{color:#087443;background:#e8f8f0}
.connection-grade.medium{color:#956900;background:#fff5d9}
.connection-grade.bad{color:#b4232a;background:#fdecec}
.quality-detail{margin-top:8px;font-size:12px;line-height:1.65;color:var(--muted);max-width:850px}
.metric-reading{font-size:11px;color:var(--muted);margin-top:5px}
.speed-widget{position:fixed;right:20px;bottom:20px;width:min(340px,calc(100vw - 28px));z-index:3000;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.18);padding:16px}
.speed-widget[hidden]{display:none!important}
.speed-widget-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.speed-widget-head strong{display:block;font-size:14px}.speed-widget-head span{display:block;font-size:10px;color:var(--muted);margin-top:3px}
#widgetClose{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.speed-widget-main{text-align:center;padding:14px 0 10px}
#widgetSpeed{font-size:38px;font-weight:800;letter-spacing:-1.5px}
.speed-widget-main span{font-size:10px;color:var(--muted)}
.speed-widget-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.speed-widget-grid div{padding:10px;background:var(--soft);border:1px solid var(--line);border-radius:10px}
.speed-widget-grid b{display:block;font-size:15px}.speed-widget-grid span{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.widget-run{width:100%;height:40px;margin-top:11px;border:0;border-radius:10px;background:var(--orange);color:#fff;font-weight:700;cursor:pointer}
.widget-provider{font-size:9px;color:var(--muted);margin-top:9px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==========================================================
   FASQOO PREMIUM DESIGN POLISH
   ========================================================== */
:root{--premium-orange:#ff5a1f;--premium-orange-soft:rgba(255,90,31,.10);--premium-green:#16a36a;--premium-radius:18px;}
body{min-height:100vh}
header{box-shadow:0 1px 0 rgba(16,24,40,.04),0 8px 28px rgba(16,24,40,.035)}
.brandname{font-weight:800;color:#ff5a1f;text-decoration:none}
.main-menu a{position:relative}
.main-menu a:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--premium-orange);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.main-menu a:hover:after{transform:scaleX(1)}
.premium-hero h1{max-width:920px;margin-left:auto;margin-right:auto;text-wrap:balance}
.test-card{border-color:#dfe4ea}
.test-card:before{height:4px}
.test-topline{margin-bottom:28px}
.test-topline strong{font-size:14px}
.phase-step{transition:background .2s,border-color .2s,color .2s}
.gauge{filter:drop-shadow(0 12px 22px rgba(255,90,31,.07))}
.gauge .progress{filter:drop-shadow(0 0 5px rgba(255,90,31,.18))}
.center{z-index:2}
.num{font-variant-numeric:tabular-nums}
.start{letter-spacing:.05px}
.metrics{box-shadow:0 6px 22px rgba(16,24,40,.025)}
.metric{min-height:118px;transition:background .2s}
.metric:hover{background:rgba(255,90,31,.018)}
.value{font-variant-numeric:tabular-nums}
.chart{min-height:205px}
.info{box-shadow:0 3px 15px rgba(16,24,40,.025)}
.quality{box-shadow:0 5px 20px rgba(16,24,40,.025)}
.quality .bar{height:9px}
.intel-card,.tool,.method-card{transition:border-color .2s,box-shadow .2s,background .2s}
.intel-card:hover,.tool:hover,.method-card:hover{border-color:#d8dee6;box-shadow:0 9px 26px rgba(16,24,40,.055)}
.section-kicker{letter-spacing:1.7px}
.section-heading-row h2{font-size:clamp(20px,2.3vw,25px)}
.method-card{min-height:205px}
footer{box-shadow:0 -1px 0 rgba(16,24,40,.025)}
@media(max-width:900px){.premium-hero h1{font-size:clamp(34px,6vw,48px)}.test-card{padding:24px}}
@media(max-width:560px){
  
  .premium-hero h1{font-size:30px;line-height:1.13}
  .premium-hero p{font-size:14px;line-height:1.55}
  .test-card{padding:15px}
  .test-topline{padding-bottom:15px;margin-bottom:18px}
  .phase-step{padding:5px 8px}
  .metric{min-height:105px;padding:12px}
  .value{font-size:23px}
  .chart{min-height:185px;padding:13px}
  .info{padding:13px}
}
.dark .test-card{border-color:#303844}
.dark .metric:hover{background:rgba(255,255,255,.015)}
.dark .intel-card:hover,.dark .tool:hover,.dark .method-card:hover{border-color:#3a424d;box-shadow:0 10px 28px rgba(0,0,0,.22)}
#heroTitle{font-weight:400 !important}

/* ==========================================================
   FASQOO COMPACT HOME / FIRST-SCREEN SPEED TEST
   ========================================================== */
main{padding:12px 0 65px}
.server-line{margin:0 0 10px}
.test-card{margin-top:0}
@media(min-width:761px){
  .test-card{margin-top:0}
}
@media(max-width:760px){
  main{padding:8px 0 45px}
  .server-line{margin-bottom:8px}
}
@media(max-width:560px){
  main{padding-top:6px}
}

/* ==========================================================
   EXTENDED METRICS (6 tiles)
   ========================================================== */
.metrics{grid-template-columns:repeat(3,1fr)}
.metric:nth-child(2n){border-right:1px solid var(--line)}
.metric:nth-child(3n){border-right:0}
.metric:nth-child(n+3){border-bottom:1px solid var(--line)}
.metric:nth-child(n+4){border-bottom:0}
.value span.val-measuring{color:#5b7cfa;transition:color .25s ease;}
.value span.val-good{color:#16a36a;transition:color .35s ease}
.value span.val-medium{color:#e6a500;transition:color .35s ease}
.value span.val-bad{color:#e5484d;transition:color .35s ease}

@keyframes fasqooPulseSync{
  0%  {transform:scale(1);   color:var(--orange); box-shadow:0 0 0 0 rgba(37,99,235,.35)}
  45% {transform:scale(1.42); color:#2563eb;      box-shadow:0 0 0 6px rgba(37,99,235,0)}
  100%{transform:scale(1);   color:var(--orange); box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
.icon.pulse-sync{animation-name:fasqooPulseSync;animation-timing-function:ease-out;animation-iteration-count:1;animation-fill-mode:both;will-change:transform;}
@media(max-width:900px){
  .metrics{grid-template-columns:1fr 1fr}
  .metric:nth-child(3n){border-right:1px solid var(--line)}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-child(n+4){border-bottom:1px solid var(--line)}
  .metric:nth-child(n+5){border-bottom:0}
}

/* ==========================================================
   OVERALL GRADE (A+ to F) with glow
   ========================================================== */
.grade-display{
  margin-top:18px;padding:22px;border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;gap:22px;
  background:linear-gradient(135deg,var(--soft),transparent);
  transition:border-color .3s,box-shadow .3s;
}
.grade-badge{
  width:96px;height:96px;border-radius:22px;
  display:grid;place-items:center;
  font-size:38px;font-weight:800;letter-spacing:-2px;
  color:#8c95a3;background:var(--soft);border:1px solid var(--line);
  transition:all .55s cubic-bezier(.22,.61,.36,1);
  flex:0 0 auto;
}
.grade-badge.tier-excellent{
  color:#fff;
  background:linear-gradient(135deg,#16a36a,#0b8a55);
  border-color:#0b8a55;
  box-shadow:0 0 0 4px rgba(22,163,106,.15),0 0 40px rgba(22,163,106,.45),0 14px 30px rgba(22,163,106,.35);
  animation:gradeGlow 2.4s ease-in-out infinite alternate;
}
.grade-badge.tier-good{
  color:#fff;
  background:linear-gradient(135deg,#7dc95c,#4ea832);
  border-color:#4ea832;
  box-shadow:0 0 0 4px rgba(125,201,92,.14),0 0 30px rgba(125,201,92,.35),0 10px 24px rgba(125,201,92,.28);
}
.grade-badge.tier-medium{
  color:#fff;
  background:linear-gradient(135deg,#e6a500,#c78900);
  border-color:#c78900;
  box-shadow:0 0 0 4px rgba(230,165,0,.14),0 0 26px rgba(230,165,0,.32),0 10px 22px rgba(230,165,0,.25);
}
.grade-badge.tier-bad{
  color:#fff;
  background:linear-gradient(135deg,#e5484d,#b9282d);
  border-color:#b9282d;
  box-shadow:0 0 0 4px rgba(229,72,77,.14),0 0 26px rgba(229,72,77,.32),0 10px 22px rgba(229,72,77,.25);
}
@keyframes gradeGlow{
  0%  {box-shadow:0 0 0 4px rgba(22,163,106,.15),0 0 34px rgba(22,163,106,.40),0 14px 30px rgba(22,163,106,.30)}
  100%{box-shadow:0 0 0 6px rgba(22,163,106,.22),0 0 55px rgba(22,163,106,.60),0 18px 38px rgba(22,163,106,.40)}
}
.grade-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.grade-title{font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--orange);text-transform:uppercase}
.grade-sub{font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:560px){
  .grade-display{padding:16px;gap:14px}
  .grade-badge{width:76px;height:76px;font-size:30px;border-radius:18px}
  .grade-sub{font-size:12px}
}
.dark .grade-display{background:linear-gradient(135deg,var(--soft),transparent)}

/* ==========================================================
   8 APPLICATION PROFILE TILES
   ========================================================== */
.apps{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.apps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.apps{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.apps{grid-template-columns:1fr}}

.app-profile{
  position:relative;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:14px;
  padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:12px;
  opacity:.40;
  filter:saturate(.35);
  transition:opacity .55s ease, filter .55s ease, transform .25s ease, border-color .35s, box-shadow .35s;
  cursor:default;
  overflow:hidden;
  min-height:170px;
}
.app-profile.revealed{opacity:1;filter:saturate(1)}
.app-profile.revealed.pass{border-color:rgba(22,163,106,.35);box-shadow:0 6px 22px rgba(22,163,106,.08)}
.app-profile.revealed.fail{border-color:rgba(229,72,77,.35);box-shadow:0 6px 22px rgba(229,72,77,.07)}
.app-profile.revealed:hover{transform:translateY(-3px)}

.app-emoji{font-size:38px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.08))}
.app-profile h3{font-size:15px;font-weight:700;margin:0;letter-spacing:-.2px}
.app-profile p{margin:0;font-size:11px;color:var(--muted);line-height:1.55}

.app-profile .app-emoji{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:var(--orange);
  background:rgba(255,90,31,.08);
  border-radius:12px;
  font-size:0;
  filter:none;
}
.app-profile .app-emoji svg{
  width:26px;
  height:26px;
  display:block;
}
.dark .app-profile .app-emoji{
  background:rgba(255,90,31,.14);
  color:#ff8b61;
}

.app-verdict{
  margin-top:auto;
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;
  padding:8px 10px;border-radius:10px;
  background:var(--soft);color:var(--muted);
  border:1px solid var(--line);
  transition:background .35s, color .35s, border-color .35s, transform .35s;
}
.app-verdict .mark{
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  font-size:12px;font-weight:900;
  background:#cdd3db;color:#fff;
  transition:background .35s, transform .35s;
}
.app-profile.revealed.pass .app-verdict{
  background:rgba(22,163,106,.10);color:#0b8a55;border-color:rgba(22,163,106,.30);
}
.app-profile.revealed.pass .mark{background:#16a36a;transform:scale(1.05)}
.app-profile.revealed.fail .app-verdict{
  background:rgba(229,72,77,.10);color:#b4232a;border-color:rgba(229,72,77,.30);
}
.app-profile.revealed.fail .mark{background:#e5484d;transform:scale(1.05)}

/* ==========================================================
   FASQOO OOKLA-STYLE MEGA NAVIGATION
   ========================================================== */
.main-menu{align-items:center}
.main-menu>a.active{color:var(--orange);font-weight:700}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{
  appearance:none;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:13px;font-weight:500;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;padding:8px 0;cursor:pointer;
}
.nav-dropdown-toggle:hover{color:var(--orange)}
.nav-chevron{font-size:12px;line-height:1;transition:transform .22s ease}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown.open .nav-chevron{transform:rotate(180deg)}

/* Keep mega-menu content fully inside the menu frame */
.nav-dropdown-menu,
.nav-dropdown-menu *{box-sizing:border-box}
.nav-dropdown-menu{overflow:hidden}
.nav-mega-item{min-width:0;max-width:100%;overflow:hidden}
.nav-mega-copy{min-width:0;max-width:100%;overflow:hidden}
.nav-mega-title,.nav-mega-desc{max-width:100%;overflow-wrap:anywhere;word-break:normal}
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  width:100%;
  max-width:650px;
  min-width:560px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(16,24,40,.10);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(16,24,40,.16),0 6px 22px rgba(16,24,40,.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:1200;
}
.nav-dropdown-menu:before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  width:13px;
  height:13px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(255,255,255,.95);
  border-left:1px solid rgba(16,24,40,.10);
  border-top:1px solid rgba(16,24,40,.10);
  backdrop-filter:blur(10px);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.nav-mega-column{min-width:0}
.nav-dropdown-section{
  padding:2px 8px 9px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}
.nav-dropdown-section.diag-section{
  padding-top:2px;
}
.nav-mega-item{
  display:flex!important;
  align-items:flex-start;
  gap:12px;
  width:100%;
  padding:11px 10px!important;
  border-radius:12px;
  color:var(--text)!important;
  text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.nav-mega-item+.nav-mega-item{margin-top:3px}
.nav-mega-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--soft);
  border:1px solid var(--line);
  font-size:18px;
  line-height:1;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.nav-mega-copy{min-width:0;padding-top:1px}
.nav-mega-title{
  display:block;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  color:var(--text);
  transition:color .18s ease;
}
.nav-mega-desc{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.45;
  color:var(--muted);
  font-weight:400;
  transition:color .18s ease;
}
.nav-mega-item:after{display:none!important}
.nav-mega-item:hover{
  background:linear-gradient(135deg,rgba(255,90,31,.07),rgba(255,255,255,.72));
  color:var(--orange)!important;
  transform:translateX(3px);
  box-shadow:0 7px 18px rgba(16,24,40,.06);
}
.nav-mega-item:hover .nav-mega-icon{
  background:rgba(255,90,31,.10);
  border-color:rgba(255,90,31,.20);
  box-shadow:0 0 0 3px rgba(255,90,31,.05);
  transform:translateY(-1px);
}
.nav-mega-item:hover .nav-mega-title{color:var(--orange)}
.nav-mega-item:hover .nav-mega-desc{color:var(--muted)}
.nav-dropdown-menu a{position:static}

.dark .nav-dropdown-menu{
  background:rgba(21,24,29,.96);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 26px 75px rgba(0,0,0,.45),0 7px 25px rgba(0,0,0,.25);
}
.dark .nav-dropdown-menu:before{
  background:rgba(21,24,29,.96);
  border-color:rgba(255,255,255,.10);
}
.dark .nav-mega-item:hover{
  background:linear-gradient(135deg,rgba(255,90,31,.11),rgba(255,255,255,.025));
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

@media(max-width:1050px){
  .nav-dropdown-menu{min-width:520px}
}
@media(max-width:760px){
  .nav-dropdown{width:100%;display:block}
  .nav-dropdown-toggle{width:100%;justify-content:space-between;padding:2px 0}
  .nav-dropdown-menu{
    position:static;
    width:100%;
    min-width:0;
    max-width:none;
    margin-top:8px;
    transform:none!important;
    grid-template-columns:1fr;
    gap:8px;
    box-shadow:none;
    border-radius:12px;
    padding:9px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    max-height:0;
    overflow:hidden;
    transition:opacity .18s ease,max-height .22s ease,visibility .18s ease;
  }
  .nav-dropdown-menu:before{display:none}
  .nav-dropdown:hover .nav-dropdown-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    max-height:0;
  }
  .nav-dropdown.open .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    max-height:900px;
  }
  .nav-mega-column{width:100%}
  .nav-mega-item{padding:10px 9px!important}
  .nav-mega-desc{font-size:10px}
}

/* ==========================================================
   PROFESSIONAL SVG MEGA-MENU ICONS
   ========================================================== */
.nav-mega-icon svg{
  width:20px;
  height:20px;
  display:block;
  flex:0 0 auto;
  color:#52525b;
  transition:color .18s ease, transform .18s ease;
}
.nav-mega-item:hover .nav-mega-icon svg{
  color:var(--orange);
  transform:scale(1.05);
}
.dark .nav-mega-icon svg{
  color:#a1a1aa;
}
.dark .nav-mega-item:hover .nav-mega-icon svg{
  color:var(--orange);
}
.nav-mega-icon{
  font-size:0;
  line-height:0;
}
.nav-mega-icon > svg{
  font-size:initial;
}

/* ==========================================================
   FASQOO 4-COLUMN FOOTER
   ========================================================== */
.site-footer{margin-top:45px;padding:42px 0 22px;background:var(--card);border-top:1px solid var(--line);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1.15fr 1fr;gap:42px;padding-bottom:34px}
.footer-brand-name{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text);margin-bottom:12px}
.footer-brand p{max-width:290px;margin:0;font-size:11px;line-height:1.7;color:var(--muted)}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.footer-column h4{margin:0 0 7px;color:var(--text);font-size:12px;font-weight:700}
.footer-column a{color:var(--muted);font-size:11px;line-height:1.5;text-decoration:none;transition:color .18s ease}
.footer-column a:hover{color:var(--orange)}
.footer-disclaimer{
  margin-top:10px;
  padding:0 16px 22px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:18px;
  padding-bottom:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
}
.footer-copyright{
  color:var(--text);
  font-size:11px;
  font-weight:600;
}
.footer-cloudflare{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  max-width:760px;
}
.footer-powered,
.footer-disclaimer{
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
  font-weight:400;
}
.footer-disclaimer{
  opacity:.78;
}
.dark .site-footer{background:rgba(14,17,22,.88)}
@media(max-width:900px){
  .main-menu{gap:15px}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:28px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:760px){
  .nav-dropdown{width:100%;display:block}
  .nav-dropdown-toggle{width:100%;justify-content:space-between;padding:2px 0}
  .nav-dropdown-menu{
    position:static;width:100%;margin-top:8px;transform:none!important;
    box-shadow:none;border-radius:10px;padding:7px;
    opacity:0;visibility:hidden;max-height:0;overflow:hidden;
    transition:opacity .18s ease,max-height .22s ease,visibility .18s ease;
  }
  .nav-dropdown-menu:before{display:none}
  .nav-dropdown:hover .nav-dropdown-menu{opacity:0;visibility:hidden;pointer-events:none;max-height:0}
  .nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;max-height:500px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}
/* ==========================================================
   1. VISUELLE HIERARCHIE & GIGANTISCHER TACHO-GLOW
   ========================================================== */
.gauge {
  filter: drop-shadow(0 0 24px rgba(255, 90, 31, 0.22));
  transition: filter 0.3s ease;
}
.test-card.testing .gauge {
  filter: drop-shadow(0 0 36px rgba(37, 99, 235, 0.35));
}
.progress {
  filter: drop-shadow(0 0 8px rgba(255, 90, 31, 0.5));
}

/* ==========================================================
   2. OLED BLACK & CYBERPUNK / TECH-VIBE (DARK MODE)
   ========================================================== */
.dark {
  --bg: #05070a !important;
  --card: #0c1017 !important;
  --text: #f8fafc !important;
  --muted: #8b9bb4 !important;
  --line: #1e2633 !important;
  --soft: #111722 !important;
}
.dark header, .dark footer {
  background: rgba(8, 11, 16, 0.92) !important;
}

/* Farb-Codierung für Performance in den Metriken */
.value .val-good, .metric-card .m-value.good, span.val-good {
  color: #10b981 !important; /* Smaragdgrün (Gaming/Streaming ready) */
  text-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}
.value .val-medium, .metric-card .m-value.medium, span.val-medium {
  color: #f59e0b !important; /* Durchschnitt / Gelb */
}
.value .val-bad, .metric-card .m-value.bad, span.val-bad {
  color: #ef4444 !important; /* Probleme / Rot */
  text-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
}

/* ==========================================================
   3. ADSTERRA / REVENUE BANNER: CLS-SCHUTZ (KEINE LAYOUT-SPRÜNGE)
   ========================================================== */
.ad-container, .ad-slot {
  width: 100%;
  min-height: 90px;
  max-width: 728px;
  margin: 24px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  /* Verhindert Layout-Verschiebungen (CLS) beim Nachladen */
  contain-intrinsic-size: 728px 90px;
  content-visibility: auto;
}
.ad-container::before {
  content: "Advertisement";
  position: absolute;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================
   4. MICRO-INTERACTIONS & QUICK-SWITCH (LITE VERSION)
   ========================================================== */
@keyframes flashGlow {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.2) drop-shadow(0 0 12px rgba(255,90,31,0.6)); }
  100% { transform: scale(1); filter: brightness(1); }
}
.flash-feedback {
  animation: flashGlow 0.4s ease-in-out;
}

/* Quick Switch Badge zur Lite-Version */
.lite-quick-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  background: rgba(255, 90, 31, 0.08);
  border: 1px solid rgba(255, 90, 31, 0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.lite-quick-switch:hover {
  background: rgba(255, 90, 31, 0.15);
  transform: translateY(-1px);
}

/* ==========================================================
   5. MOBILE-FIRST & PWA-OPTIMIERUNG (THUMB ZONE & BANNER)
   ========================================================== */
@media (max-width: 760px) {
  /* Daumen-Erreichbarkeit (Thumb Zone): Start-Button prominent unten/mittig fixierbar oder ideal platziert */
  .speedbox .start {
    width: 100% !important;
    max-width: 320px;
    height: 56px;
    font-size: 16px;
    border-radius: 16px;
    margin: 20px auto 10px;
    box-shadow: 0 10px 25px rgba(255, 90, 31, 0.35);
  }
}

/* Unaufdringliches PWA-Installationsbanner am unteren Rand */
.pwa-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  width: min(420px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
.pwa-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.pwa-toast-logo {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}
.pwa-toast-content {
  flex: 1;
  min-width: 0;
}
.pwa-toast-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 2px;
}
.pwa-toast-desc {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.pwa-toast-btn {
  background: var(--orange);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
/* ==========================================================
   PWA TOAST / AUTOMATISCHES POPUP
   ========================================================== */
.pwa-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  width: min(420px, calc(100vw - 32px));
  background: var(--card, #12161b);
  border: 1px solid var(--line, #29303a);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9999;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
}

.pwa-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


.pwa-toast-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}

.pwa-toast-content {
  flex: 1;
  min-width: 0;
}

.pwa-toast-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 3px;
  color: var(--text, #f4f6f8);
}

.pwa-toast-desc {
  font-size: 11px;
  color: var(--muted, #98a2ae);
  margin: 0;
  line-height: 1.4;
}

.pwa-toast-btn {
  background: var(--orange, #ff5a1f);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s, transform 0.2s;
}

.pwa-toast-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.pwa-toast-close {
  background: transparent;
  border: 0;
  color: var(--muted, #98a2ae);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.pwa-toast-close:hover {
  color: var(--text, #f4f6f8);
}