/* Fast Mode presentation layer: local enhancements, accessibility and responsive polish. */
:root { color-scheme: dark; --fm-border: rgba(148,163,184,.18); --fm-panel: rgba(15,23,42,.72); --fm-muted: #94a3b8; }
* { box-sizing: border-box; }
body { text-rendering: optimizeLegibility; }
.brand-link { color: inherit; text-decoration: none; }
.nav-actions { display:flex; align-items:center; gap:.75rem; }
.theme-toggle { display:inline-flex; align-items:center; gap:.5rem; min-height:40px; padding:.5rem .75rem; border:1px solid #334155; border-radius:.75rem; background:rgba(30,41,59,.72); color:#cbd5e1; font:600 .8rem/1 system-ui,sans-serif; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.theme-toggle:hover { background:#334155; color:#fff; }
.theme-toggle:focus-visible { outline:3px solid #60a5fa; outline-offset:3px; }
.skip-link { position:fixed; z-index:100; top:.75rem; left:.75rem; transform:translateY(-160%); padding:.75rem 1rem; border-radius:.75rem; color:#fff; background:#2563eb; font-weight:700; }
.skip-link:focus { transform:translateY(0); }
.glass-card { box-shadow:0 18px 55px rgba(2,6,23,.16); }
#speed, #dns, #history, #tools, #faq { scroll-margin-top:6.5rem; }
#test-status { display:flex; align-items:center; justify-content:center; }
#start-btn { min-width:8.75rem; min-height:3.75rem; letter-spacing:.08em; }
#history-figure { margin:1rem 0 1.25rem; padding:1.1rem 1.2rem .9rem; border:1px solid var(--fm-border); border-radius:1rem; background:var(--fm-panel); }
.history-chart-title { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; color:#e2e8f0; font-size:.95rem; font-weight:700; }
.history-chart-title span { color:var(--fm-muted); font-size:.75rem; font-weight:500; }
.history-chart { min-height:150px; margin-top:.5rem; }
.history-chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart-legend { display:flex; justify-content:center; gap:1.25rem; margin-top:.5rem; color:#cbd5e1; font-size:.75rem; }
.chart-legend span { display:inline-flex; align-items:center; gap:.45rem; }
.legend-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; }
.download-dot { background:#34d399; }.upload-dot { background:#c084fc; }
.history-chart-note { margin:.55rem 0 0; color:var(--fm-muted); font-size:.72rem; text-align:center; }
#history-export, #history-export-json, #history-clear { white-space:nowrap; }
.table-shell { max-width:100%; }
footer a { text-underline-offset:3px; }
@media (max-width:640px) {
  .theme-label { display:none; }
  .theme-toggle { width:40px; justify-content:center; padding:.5rem; }
  #history header > div:last-child { flex-wrap:wrap; }
  #history-export, #history-export-json, #history-clear { flex:1 1 auto; }
  .history-chart-title { align-items:flex-start; flex-direction:column; gap:.2rem; }
  #ip-info .glass-card { align-items:stretch; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle, .skip-link { transition:none; } }

/* Theme-aware overrides for the utility-class UI. */
html[data-theme="light"] { color-scheme:light; }
html[data-theme="light"] body { background:#f1f5f9 !important; color:#0f172a !important; }
html[data-theme="light"] nav { background:rgba(255,255,255,.94) !important; border-color:#dbe3ed !important; }
html[data-theme="light"] footer { background:#e8eef6 !important; border-color:#dbe3ed !important; }
html[data-theme="light"] .bg-gradient-to-r { background-image:none !important; }
html[data-theme="light"] .glass-card,
html[data-theme="light"] #history-figure { background:rgba(255,255,255,.88) !important; border-color:#dbe3ed !important; box-shadow:0 12px 38px rgba(15,23,42,.07); }
html[data-theme="light"] [class*="bg-slate-900"], html[data-theme="light"] [class*="bg-slate-950"] { background-color:#f1f5f9 !important; }
html[data-theme="light"] [class*="bg-slate-800"] { background-color:#e8eef6 !important; }
html[data-theme="light"] [class*="border-slate-700"], html[data-theme="light"] [class*="border-slate-800"], html[data-theme="light"] [class*="border-slate-900"] { border-color:#d5dfeb !important; }
html[data-theme="light"] [class~="text-white"] { color:#0f172a !important; }
html[data-theme="light"] [class~="text-slate-200"], html[data-theme="light"] [class~="text-slate-300"] { color:#334155 !important; }
html[data-theme="light"] [class~="text-slate-400"], html[data-theme="light"] [class~="text-slate-500"] { color:#64748b !important; }
html[data-theme="light"] .theme-toggle { background:#fff; border-color:#cbd5e1; color:#334155; }
html[data-theme="light"] .history-chart-title, html[data-theme="light"] .chart-legend { color:#1e293b; }
html[data-theme="light"] .history-chart-note { color:#64748b; }
html[data-theme="light"] .bg-blue-600, html[data-theme="light"] .bg-emerald-600 { color:#fff !important; }

/* Cohesive layout and sizing system. */
:root {
  --fm-accent:#60a5fa;
  --fm-accent-2:#34d399;
  --fm-surface:#111c30;
  --fm-surface-raised:#17243a;
  --fm-content:72rem;
}
html { background:#0b1220; }
body {
  color:#e8eef9;
  background:
    radial-gradient(ellipse at 50% -18rem, rgba(37,99,235,.25), transparent 46rem),
    #0b1220 !important;
  font-size:clamp(15px, .45vw + 13.5px, 16px);
}
nav[aria-label="Main navigation"] { padding: .8rem max(1rem, calc((100% - var(--fm-content))/2)); }
nav[aria-label="Main navigation"] > div:first-child { min-height:2.7rem; gap:1rem; }
.brand-link { flex:0 0 auto; letter-spacing:-.045em; font-size:1.35rem; }
.brand-link i { filter:drop-shadow(0 0 10px rgba(59,130,246,.55)); }
nav .hidden.md\:flex { gap:clamp(.75rem,2vw,1.5rem); align-items:center; }
nav .hidden.md\:flex a { white-space:nowrap; color:#a9b8ce; }
nav .hidden.md\:flex a:hover { color:#f8fafc; }
#menu-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--fm-border); border-radius:.8rem; }
#mobile-menu { padding:.65rem .2rem .35rem; }
#mobile-menu a { min-height:42px; display:flex; align-items:center; padding:0 .8rem; border-radius:.65rem; color:#cbd5e1; }
#mobile-menu a:hover { background:rgba(96,165,250,.1); }
#main-content { width:min(100%, var(--fm-content)); padding-top:clamp(.75rem,2.4vw,1.5rem); }
#ip-info { margin-top:clamp(.5rem,2vw,1.25rem); }
#ip-info > .glass-card { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:1.1rem 1.25rem; gap:1rem; }
#ip-info > .glass-card > .h-10 { display:none; }
#ip-info > .glass-card > div:not(.h-10) { min-width:0; }
#ip-info > .glass-card > div:first-child { min-width:0; }
#ip-info > .glass-card > div:first-child > div:first-child { flex:0 0 auto; padding:.8rem; }
#ip-info > .glass-card p:not([id]) { font-size:.67rem; letter-spacing:.1em; }
#ip-info [id^="user-"] { font-size:clamp(.9rem,1.2vw,1.05rem); line-height:1.4; }
#conn-info { color:#b3c0d2; }
#speed { margin-top:clamp(1rem,3vw,2rem); }
#speed > header { max-width:46rem; margin-inline:auto; margin-bottom:clamp(1.3rem,3vw,2rem); }
#speed h1 { font-size:clamp(1.85rem,4.2vw,3rem); letter-spacing:-.045em; line-height:1.1; }
#speed > header p { max-width:42rem; margin:.7rem auto 0; line-height:1.65; }
h2 { letter-spacing:-.035em; line-height:1.18; }
.glass-card { border-color:rgba(148,163,184,.16) !important; background:linear-gradient(145deg,rgba(20,32,53,.93),rgba(13,24,42,.93)); box-shadow:0 16px 44px rgba(0,0,0,.16); }
#speed .grid.lg\:grid-cols-3 { align-items:start; }
#speed .lg\:col-span-2 { min-width:0; }
#speed .lg\:col-span-2.glass-card { padding:clamp(1rem,3vw,2rem); }
#speed .gauge-wrap { width:clamp(12rem,28vw,17rem); margin-bottom:1.2rem; }
#current-speed { font-size:clamp(2.2rem,5vw,3.25rem); letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
#speed .grid.grid-cols-2 article { min-width:0; padding:clamp(.65rem,1.5vw,1rem) .5rem; }
#speed .grid.grid-cols-2 article > div:last-child { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#speed .grid.grid-cols-2 article .text-xl { font-size:clamp(.95rem,1.8vw,1.25rem); }
#insights > * { min-width:0; }
#start-btn { min-width:8.5rem; min-height:3.25rem; padding:.8rem 2.6rem; font-size:1rem; box-shadow:0 10px 28px rgba(37,99,235,.28); }
#unit-btn { padding:.5rem .7rem; }
#light-mode { width:1rem; height:1rem; }
#speed aside { padding:clamp(1rem,2vw,1.4rem); }
#speed aside img { width:min(100%,15rem); aspect-ratio:1; object-fit:cover; }
#speed aside h3 { font-size:1.05rem; }
#dns,#history,#tools,#faq,#blog { scroll-margin-top:5.5rem; }
#dns,#history,#tools { padding-top:clamp(1.5rem,4vw,2.5rem); }
#dns header h2,#history h2,#tools h2 { font-size:clamp(1.45rem,3vw,2rem); }
#dns header p,#tools header p { max-width:55rem; margin-top:.5rem; line-height:1.6; }
#dns-results { grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
#dns-results > * { min-width:0; }
#history header > div:last-child { display:flex; flex-wrap:wrap; }
#history header > div:last-child button { min-height:40px; }
#history-wrap { scrollbar-width:thin; }
#history-wrap th,#history-wrap td { padding:.75rem .85rem; }
#tools > header { margin-bottom:1.5rem; }
#tools .grid > article { min-width:0; padding:clamp(1rem,2vw,1.4rem); }
#blog { align-items:start; gap:clamp(1.5rem,4vw,3rem); padding-top:clamp(2rem,5vw,3.5rem); }
#blog article h2 { font-size:clamp(1.25rem,2.2vw,1.55rem); }
#faq { padding-top:clamp(2rem,5vw,3.5rem); margin-top:clamp(2rem,5vw,3.5rem); }
#faq > h2 { font-size:clamp(1.55rem,3vw,2rem); }
#faq details summary { gap:1rem; padding:clamp(1rem,2.4vw,1.5rem); font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.45; }
#faq details > div { padding:0 clamp(1rem,2.4vw,1.5rem) 1.25rem; }
footer { margin-top:clamp(2.5rem,6vw,4rem); }
#toast { left:50%; width:max-content; }

/* Shared light theme components. */
html[data-theme="light"] { background:#f4f7fb; }
html[data-theme="light"] body { background:radial-gradient(ellipse at 50% -18rem,rgba(59,130,246,.11),transparent 46rem),#f4f7fb !important; color:#13223a !important; }
html[data-theme="light"] .glass-card { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,250,255,.97)); }
html[data-theme="light"] nav .hidden.md\:flex a { color:#475569; }
html[data-theme="light"] nav .hidden.md\:flex a:hover { color:#0f172a; }
html[data-theme="light"] #mobile-menu a { color:#334155; }
html[data-theme="light"] #mobile-menu a:hover { background:rgba(37,99,235,.08); }
html[data-theme="light"] #conn-info { color:#475569; }
html[data-theme="light"] #history-wrap { border-color:#d6e0ec; }
html[data-theme="light"] #history-wrap thead { background:#e8eef6; }
html[data-theme="light"] #history-wrap tbody tr { border-top:1px solid #e2e8f0; }
html[data-theme="light"] #faq details > div { border-color:#e2e8f0; }

/* Tablet, phone and very narrow phone layouts. */
@media (max-width:767px) {
  nav[aria-label="Main navigation"] { padding:.65rem 1rem; }
  nav .hidden.md\:flex { display:none; }
  #main-content { padding-left:clamp(.85rem,4vw,1.25rem); padding-right:clamp(.85rem,4vw,1.25rem); }
  #ip-info > .glass-card { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem .75rem; padding:1rem; }
  #ip-info > .glass-card > div:first-child { grid-column:1 / -1; }
  #ip-info > .glass-card > div:not(:first-child):not(.h-10) { padding-left:.2rem; }
  #speed .grid.lg\:grid-cols-3 { gap:1rem; }
  #speed aside { display:grid; grid-template-columns:minmax(90px,130px) 1fr; align-items:center; text-align:left; gap:.35rem 1rem; }
  #speed aside img { grid-row:span 3; width:100%; margin:0; }
  #speed aside h3,#speed aside p { margin:0; }
  #speed aside a { grid-column:1 / -1; }
  #speed aside > p:last-child { grid-column:1 / -1; }
  #history header { align-items:stretch; }
  #history header > div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #history header > div:last-child button { min-width:0; padding-inline:.65rem; }
  #history-clear { grid-column:1 / -1; }
  #blog { grid-template-columns:minmax(0,1fr); }
  #blog > div,#blog > aside { min-width:0; }
}
@media (max-width:420px) {
  .brand-link { font-size:1.2rem; }
  .nav-actions { gap:.45rem; }
  #theme-btn,#menu-btn { min-width:38px; width:38px; height:38px; }
  #main-content { padding-left:.8rem; padding-right:.8rem; }
  #ip-info > .glass-card { gap:.8rem .55rem; padding:.85rem; }
  #ip-info > .glass-card > div:first-child { gap:.7rem; }
  #ip-info > .glass-card > div:first-child > div:first-child { padding:.65rem; }
  #speed .lg\:col-span-2.glass-card { padding:1rem .8rem; }
  #speed .gauge-wrap { width:min(12.25rem,60vw); }
  #speed .grid.grid-cols-2 { gap:.45rem; }
  #speed .grid.grid-cols-2 article { padding:.65rem .3rem; }
  #speed .grid.grid-cols-2 article .text-\[10px\],#speed .grid.grid-cols-2 article .text-xs { font-size:.62rem; }
  #speed .grid.grid-cols-2 article .text-xl { font-size:.93rem; }
  #speed .grid.grid-cols-2 article .text-base { font-size:.85rem; }
  #speed aside { grid-template-columns:84px minmax(0,1fr); padding:.85rem; }
  #dns-btn { width:100%; }
  #faq details summary { padding:1rem .85rem; }
}
@media (prefers-reduced-motion:reduce) { body { scroll-behavior:auto; } }
@media (min-width:768px) {
  nav .hidden.md\:flex { display:flex; }
  #mobile-menu { display:none; }
  #menu-btn { display:none; }
}