@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&family=Cairo:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════
   NETPULSE — DESIGN SYSTEM
   Supports: Mobile / Tablet / Desktop / Landscape
   RTL / LTR — Dark / Light
══════════════════════════════════════════ */

:root {
  --bg:            #070a0f;
  --bg-secondary:  #0d1117;
  --bg-card:       #0f1520;
  --bg-card-hover: #141d2e;
  --border:        #1e2d42;
  --border-bright: #2a3f5e;
  --accent:        #00d4ff;
  --accent-dim:    rgba(0,212,255,0.10);
  --accent-glow:   rgba(0,212,255,0.22);
  --green:         #00e676;
  --green-dim:     rgba(0,230,118,0.10);
  --red:           #ff3d71;
  --red-dim:       rgba(255,61,113,0.10);
  --yellow:        #ffd600;
  --yellow-dim:    rgba(255,214,0,0.10);
  --text-primary:  #e8edf5;
  --text-secondary:#7a8fa6;
  --text-muted:    #3d5269;
  --mono:          'IBM Plex Mono', monospace;
  --sans:          'Space Grotesk','Cairo',sans-serif;
  --radius:        8px;
  --radius-lg:     14px;
  --transition:    0.2s cubic-bezier(0.4,0,0.2,1);
  --shadow:        0 4px 24px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 36px rgba(0,212,255,0.14);
  --nav-h:         60px;
}

[data-theme="light"] {
  --bg:            #f0f4f8;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f7fafc;
  --border:        #d1dce8;
  --border-bright: #a8bdd4;
  --accent:        #0077cc;
  --accent-dim:    rgba(0,119,204,0.08);
  --accent-glow:   rgba(0,119,204,0.18);
  --green:         #009944;
  --green-dim:     rgba(0,153,68,0.09);
  --red:           #cc2244;
  --red-dim:       rgba(204,34,68,0.09);
  --yellow:        #b37a00;
  --yellow-dim:    rgba(179,122,0,0.09);
  --text-primary:  #0d1117;
  --text-secondary:#4a6275;
  --text-muted:    #8fa5b8;
  --shadow:        0 4px 24px rgba(0,0,0,0.08);
  --shadow-accent: 0 0 36px rgba(0,119,204,0.10);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  transition:background var(--transition),color var(--transition);
  -webkit-font-smoothing:antialiased;
}
[lang="ar"] body,[dir="rtl"] body{font-family:'Cairo',var(--sans);}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* ── GRID BACKGROUND ── */
.page-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.page-bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.025) 1px,transparent 1px);
  background-size:48px 48px;
}
.page-bg::after{
  content:'';position:absolute;
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(0,212,255,0.055) 0%,transparent 70%);
  top:-250px;left:50%;transform:translateX(-50%);
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-h);
  background:rgba(7,10,15,0.94);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  z-index:1000;
  display:flex;align-items:center;
  padding:0 20px;gap:0;
}
[data-theme="light"] .navbar{background:rgba(240,244,248,0.94);}

.nav-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;
  margin-inline-end:24px;flex-shrink:0;
}
.nav-logo-mark{
  width:30px;height:30px;
  background:var(--accent);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;flex-shrink:0;
}
.nav-logo-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.18));
}
.nav-logo-text{
  font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--text-primary);letter-spacing:-0.3px;white-space:nowrap;
}

.nav-links{
  display:flex;align-items:center;gap:2px;
  flex:1;overflow-x:auto;scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none;}

.nav-link{
  font-size:12.5px;font-weight:500;
  color:var(--text-secondary);
  padding:5px 11px;border-radius:var(--radius);
  white-space:nowrap;transition:color var(--transition),background var(--transition);
}
.nav-link:hover,.nav-link.active{color:var(--text-primary);background:var(--accent-dim);}
.nav-link.active{color:var(--accent);}

.nav-actions{
  display:flex;align-items:center;gap:4px;
  margin-inline-start:auto;flex-shrink:0;
}
.nav-btn{
  width:34px;height:34px;
  border:1px solid var(--border);background:transparent;
  border-radius:var(--radius);color:var(--text-secondary);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
  font-family:var(--mono);font-size:11px;font-weight:600;
}
.nav-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.nav-btn.lang-btn{width:auto;padding:0 9px;letter-spacing:.5px;}

/* Mobile menu */
.mobile-menu-btn{display:none;}

@media(max-width:768px){
  .nav-links{display:none;}
  .mobile-menu-btn{
    display:flex;width:34px;height:34px;
    border:1px solid var(--border);background:transparent;
    border-radius:var(--radius);color:var(--text-secondary);
    cursor:pointer;align-items:center;justify-content:center;
    margin-inline-start:4px;
  }
  .nav-links.open{
    display:flex;flex-direction:column;
    position:fixed;top:var(--nav-h);left:0;right:0;
    background:var(--bg-secondary);
    border-bottom:1px solid var(--border);
    padding:12px;gap:2px;z-index:999;
    animation:slideDown .2s ease;
  }
  @keyframes slideDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
  .nav-links.open .nav-link{padding:10px 14px;border-radius:var(--radius);}
}

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.main-content{margin-top:var(--nav-h);min-height:calc(100vh - var(--nav-h));}

.container{
  max-width:1120px;margin:0 auto;
  padding:0 20px;position:relative;z-index:1;
}
@media(max-width:480px){.container{padding:0 14px;}}

/* ── PAGE HEADER ── */
.page-header{padding:44px 0 32px;border-bottom:1px solid var(--border);margin-bottom:32px;}
@media(max-width:600px){.page-header{padding:28px 0 20px;margin-bottom:20px;}}
@media(orientation:landscape)and(max-height:500px){
  .page-header{padding:20px 0 16px;margin-bottom:16px;}
}

.page-label{
  font-family:var(--mono);font-size:10px;font-weight:500;
  color:var(--accent);letter-spacing:2px;text-transform:uppercase;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.page-label::before{content:'';display:inline-block;width:14px;height:1px;background:var(--accent);}

.page-title{
  font-size:clamp(24px,5vw,40px);font-weight:700;
  letter-spacing:-1px;line-height:1.05;margin-bottom:8px;
}
.page-subtitle{font-size:14px;color:var(--text-secondary);font-weight:400;}

/* ── CARDS ── */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;
  transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);
}
.card:hover{border-color:var(--border-bright);background:var(--bg-card-hover);}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius);
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  cursor:pointer;border:none;transition:all var(--transition);
  white-space:nowrap;position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:#070a0f;font-weight:700;}
.btn-primary:hover{box-shadow:0 0 18px var(--accent-glow);}
.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-bright);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text-primary);border-color:var(--border-bright);}
.btn-lg{padding:12px 28px;font-size:14.5px;border-radius:10px;}
.btn-sm{padding:5px 11px;font-size:11.5px;}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none;}
.w-full{width:100%;}

/* ── STAT DISPLAY ── */
.stat-value{
  font-family:var(--mono);font-size:clamp(32px,6vw,48px);
  font-weight:600;line-height:1;letter-spacing:-2px;color:var(--text-primary);
}
.stat-unit{
  font-family:var(--mono);font-size:11px;font-weight:400;
  color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-top:3px;
}
.stat-label{
  font-size:11px;font-weight:500;color:var(--text-secondary);
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px;
}

/* ── BADGE ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;
  font-size:10.5px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;font-family:var(--mono);
}
.badge-excellent{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,230,118,0.2);}
.badge-good{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,212,255,0.2);}
.badge-fair{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(255,214,0,0.2);}
.badge-poor{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,61,113,0.2);}

/* ── TABLE ── */
.data-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.data-table th{
  text-align:start;padding:9px 14px;
  font-family:var(--mono);font-size:10px;font-weight:500;
  color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text-secondary);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--accent-dim);color:var(--text-primary);}

/* ── GRID HELPERS ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:540px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
}
@media(orientation:landscape)and(max-height:500px){
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:repeat(2,1fr);}
}

/* ── PROGRESS BAR ── */
.progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.progress-fill{
  height:100%;border-radius:2px;background:var(--accent);
  transition:width .4s ease;position:relative;
}
.progress-fill::after{
  content:'';position:absolute;right:0;top:-2px;
  width:7px;height:7px;background:var(--accent);
  border-radius:50%;box-shadow:0 0 7px var(--accent);
}
[dir="rtl"] .progress-fill::after{right:auto;left:0;}

/* ── TOAST ── */
.toast-container{
  position:fixed;bottom:20px;inset-inline-end:20px;
  z-index:9999;display:flex;flex-direction:column;gap:7px;
}
@media(max-width:480px){
  .toast-container{bottom:12px;inset-inline-end:12px;inset-inline-start:12px;}
}
.toast{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 14px;
  font-size:12.5px;color:var(--text-primary);
  display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow);
  animation:toastIn .25s cubic-bezier(.4,0,.2,1);
  max-width:320px;
}
@media(max-width:480px){.toast{max-width:100%;}}
.toast.success{border-color:rgba(0,230,118,0.3);}
.toast.error{border-color:rgba(255,61,113,0.3);}
@keyframes toastIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);}}

/* ── ISP BAR ── */
.isp-bar{
  display:flex;align-items:center;gap:14px;padding:7px 0;
  font-family:var(--mono);font-size:10.5px;color:var(--text-muted);
  flex-wrap:wrap;
}
.isp-item{display:flex;align-items:center;gap:5px;}
.isp-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 5px var(--green);
  animation:pulse-dot 2s infinite;flex-shrink:0;
}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ── SECTION TITLE ── */
.section-title{
  font-size:11px;font-weight:600;font-family:var(--mono);
  color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;
}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--border);margin:24px 0;}

/* ── FOOTER ── */
.footer{border-top:1px solid var(--border);padding:28px 0;margin-top:64px;position:relative;z-index:1;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.footer-copy{font-size:11px;color:var(--text-muted);font-family:var(--mono);}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;}
.footer-link{font-size:11px;color:var(--text-muted);transition:color var(--transition);}
.footer-link:hover{color:var(--accent);}
@media(max-width:480px){.footer{margin-top:40px;}.footer-inner{flex-direction:column;align-items:flex-start;gap:14px;}}

/* ── SKELETON ── */
.skeleton{
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--border) 50%,var(--bg-card) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius);
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── SPINNER ── */
.spin{
  width:14px;height:14px;
  border:2px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin .6s linear infinite;
  display:inline-block;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.animate-up{animation:fadeUp .45s cubic-bezier(.4,0,.2,1) both;}
.animate-in{animation:fadeIn .35s ease both;}
.delay-1{animation-delay:.08s;}
.delay-2{animation-delay:.16s;}
.delay-3{animation-delay:.24s;}
.delay-4{animation-delay:.32s;}

/* ── GAUGE ── */
.gauge-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.gauge-inner{position:absolute;text-align:center;pointer-events:none;}

/* ── GAME SELECTOR ── */
.game-btn{
  padding:12px 8px;border:1px solid var(--border);background:var(--bg-card);
  border-radius:var(--radius);cursor:pointer;text-align:center;
  font-size:11.5px;font-weight:600;color:var(--text-secondary);
  transition:all var(--transition);font-family:var(--sans);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  -webkit-tap-highlight-color:transparent;
}
.game-btn:hover,.game-btn.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}

/* ── CHART WRAPPER ── */
.chart-wrap{position:relative;height:200px;}
@media(max-width:480px){.chart-wrap{height:160px;}}

/* ── PHASE STEPS ── */
.phase-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.phase-step-track{height:3px;width:100%;background:var(--border);border-radius:2px;overflow:hidden;}
.phase-step-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .3s ease;}
.phase-step.done .phase-step-fill{width:100%;background:var(--green);}
.phase-step.active .phase-step-fill{width:55%;}
.phase-step-name{font-family:var(--mono);font-size:9px;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase;}
.phase-step.active .phase-step-name{color:var(--accent);}
.phase-step.done .phase-step-name{color:var(--green);}

/* ── TOOLTIP ── */
.tooltip{position:relative;}
.tooltip::after{
  content:attr(data-tip);position:absolute;
  bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--bg-secondary);border:1px solid var(--border);
  color:var(--text-primary);font-size:10.5px;padding:3px 7px;
  border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--transition);font-family:var(--mono);
}
.tooltip:hover::after{opacity:1;}

/* ══════════════════════════════════════════
   UTILITY
══════════════════════════════════════════ */
.text-accent{color:var(--accent);}
.text-green{color:var(--green);}
.text-red{color:var(--red);}
.text-yellow{color:var(--yellow);}
.text-muted{color:var(--text-muted);}
.text-secondary{color:var(--text-secondary);}
.mono{font-family:var(--mono);}
.flex{display:flex;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-gap{display:flex;align-items:center;gap:10px;}
.gap-sm{gap:7px;}.gap-md{gap:14px;}.gap-lg{gap:20px;}
.mb-sm{margin-bottom:7px;}.mb-md{margin-bottom:14px;}.mb-lg{margin-bottom:22px;}.mb-xl{margin-bottom:36px;}
.mt-lg{margin-top:22px;}.mt-xl{margin-top:36px;}
.hidden{display:none!important;}
.text-center{text-align:center;}

/* ══════════════════════════════════════════
   LANDSCAPE MOBILE (orientation:landscape + small height)
══════════════════════════════════════════ */
@media(orientation:landscape)and(max-height:520px){
  :root{--nav-h:50px;}
  .page-header{padding:16px 0 12px;margin-bottom:14px;}
  .page-title{font-size:22px;}
  .btn-lg{padding:10px 22px;font-size:13px;}
  .card{padding:14px;}
  .footer{margin-top:32px;padding:18px 0;}
}

/* ══════════════════════════════════════════
   STAT CARD (shared between pages)
══════════════════════════════════════════ */
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;text-align:center;
}
.stat-card .stat-value{font-size:clamp(22px,4vw,36px);letter-spacing:-1px;}

/* ══════════════════════════════════════════
   INFO ITEM (sidebar)
══════════════════════════════════════════ */
.info-item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 13px;
  display:flex;align-items:center;gap:11px;
}
.info-icon{
  width:30px;height:30px;background:var(--accent-dim);
  border:1px solid rgba(0,212,255,0.13);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);flex-shrink:0;
}
.info-label{font-size:10px;color:var(--text-muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px;}
.info-value{font-size:13px;font-weight:600;color:var(--text-primary);font-family:var(--mono);}


/* ══════════════════════════════════════════
   PAGE-SPECIFIC RESPONSIVE OVERRIDES
══════════════════════════════════════════ */

/* Gaming page */
.gaming-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start;}
@media(max-width:820px){.gaming-layout{grid-template-columns:1fr;}}
@media(orientation:landscape)and(max-height:520px){
  .gaming-layout{grid-template-columns:200px 1fr;gap:12px;}
  .region-grid{grid-template-columns:repeat(4,1fr)!important;}
}

/* Video page */
.video-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start;}
@media(max-width:820px){.video-layout{grid-template-columns:1fr;}}
@media(orientation:landscape)and(max-height:520px){
  .video-layout{grid-template-columns:1fr 220px;gap:12px;}
  .stream-visual{height:120px!important;}
}

/* DNS page */
.dns-layout{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start;}
@media(max-width:820px){.dns-layout{grid-template-columns:1fr;}}
.dns-card{flex-wrap:wrap;}
@media(max-width:600px){
  .dns-latency{font-size:20px!important;}
  .dns-bar-col{display:none;}
}

/* History page */
.history-layout{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start;}
@media(max-width:820px){.history-layout{grid-template-columns:1fr;}}
.stats-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
@media(max-width:540px){.stats-overview{grid-template-columns:1fr;}}
@media(orientation:landscape)and(max-height:520px){.stats-overview{grid-template-columns:repeat(3,1fr);}}

/* Compare page */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px;}
@media(max-width:680px){.compare-grid{grid-template-columns:1fr;}}
@media(orientation:landscape)and(max-height:520px){.compare-grid{grid-template-columns:repeat(3,1fr);}}

/* Platform grid (video page) */
.platform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px;}
@media(max-width:380px){.platform-grid{grid-template-columns:1fr;}}

/* region grid (gaming) */
.region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px;}
@media(max-width:480px){.region-grid{grid-template-columns:1fr;}}

/* Game list responsive */
.game-list{display:flex;flex-direction:column;gap:7px;}
@media(max-width:820px){
  .game-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
}
@media(max-width:500px){
  .game-list{grid-template-columns:repeat(2,1fr);}
}
@media(orientation:landscape)and(max-height:520px){
  .game-list{grid-template-columns:repeat(2,1fr);}
}

/* Assessment grid */
.assessment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;}
@media(max-width:480px){.assessment-grid{grid-template-columns:1fr;}}

/* History filter bar */
.filter-bar{display:flex;gap:5px;margin-bottom:16px;flex-wrap:wrap;}

/* Table responsive scroll */
.history-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Quality table mobile */
.quality-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.quality-row:last-child{border-bottom:none;}
@media(max-width:480px){
  .quality-bar-wrap{display:none;}
  .quality-req{min-width:44px;}
}

/* Percentile bar */
.percentile-bar-wrap{max-width:100%!important;}
.percentile-markers{max-width:100%!important;}
@media(max-width:480px){
  .percentile-val{font-size:44px!important;}
  .percentile-desc{font-size:13px!important;}
}

/* Scale ref responsive */
@media(max-width:860px){
  .scale-ref{display:none;}
}

/* Speed stats on landscape mobile */
@media(orientation:landscape)and(max-height:520px){
  .speed-layout{grid-template-columns:1fr 240px!important;gap:12px;}
  .gauge-section{padding:10px 12px 8px!important;}
  .stats-row{margin-top:10px!important;gap:7px!important;}
}

/* ── Extra small screens (360px and below) ── */
@media(max-width:360px){
  .phase-bar{max-width:240px;}
  .btn-lg{padding:10px 18px;font-size:13px;}
  .page-title{font-size:22px;letter-spacing:-0.5px;}
  .stat-value{font-size:26px;}
  .last-vals{gap:10px;}
  .hero-title{letter-spacing:-1px;}
  .nav-logo-text{display:none;}
}

/* ── Gauge responsive (handled in JS via resizeGauge) ──
   CSS fallback for canvas container */
#speedGauge{
  max-width:100%;
  height:auto;
}
.gauge-wrap{
  width:100%;
  max-width:280px;
}
@media(max-width:360px){
  .gauge-wrap{max-width:220px;}
}
@media(orientation:landscape)and(max-height:520px){
  .gauge-wrap{max-width:200px;}
}

/* ── viewport-fit handled per page in <meta> tag ── */
/* Safe area insets for notch devices */
@supports(padding:env(safe-area-inset-top)){
  .navbar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
  .container{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));}
  .toast-container{bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));}
}

/* ══════════════════════════════════════════
   v3 ADDITIONS
══════════════════════════════════════════ */

/* Nav start group */
.nav-start{display:flex;align-items:center;gap:6px;flex-shrink:0;}

/* Back button */
.back-btn{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border:1px solid var(--border);background:transparent;
  border-radius:var(--radius);color:var(--text-secondary);
  text-decoration:none;transition:all var(--transition);flex-shrink:0;
}
.back-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.back-icon-rtl,.back-icon-ltr{display:flex;align-items:center;justify-content:center;}

/* Logo dائري */
.nav-logo-mark{
  width:32px;height:32px;border-radius:50%!important;
  overflow:hidden;flex-shrink:0;
  border:1.5px solid var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  background:var(--bg-secondary);
  display:flex;align-items:center;justify-content:center;
}
.nav-logo-mark img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block;}

/* Footer creator button */
.creator-footer-btn{
  background:transparent;border:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;color:var(--text-muted);
  transition:color .2s ease;padding:0;
  display:inline-flex;align-items:center;gap:5px;
  vertical-align:middle;
}
.creator-footer-btn:hover{color:var(--accent);}
.footer-sep{margin:0 6px;color:var(--border-bright);}

/* ── Creator Modal ── */
.creator-modal-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(7,10,15,0.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.creator-modal-overlay.open{opacity:1;pointer-events:all;}
.creator-modal{
  background:var(--bg-card);
  border:1px solid var(--border-bright);
  border-radius:var(--radius-lg);
  padding:32px 28px 24px;
  max-width:300px;width:100%;
  position:relative;
  transform:translateY(16px);scale:0.97;
  transition:transform .25s ease,scale .25s ease;
  box-shadow:0 32px 80px rgba(0,0,0,0.6);
}
.creator-modal-overlay.open .creator-modal{transform:translateY(0);scale:1;}
.creator-modal-close{
  position:absolute;top:12px;inset-inline-end:12px;
  width:28px;height:28px;border:1px solid var(--border);
  background:transparent;border-radius:6px;
  color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.creator-modal-close:hover{border-color:var(--red);color:var(--red);}
.creator-avatar{
  width:72px;height:72px;border-radius:50%;
  overflow:hidden;margin:0 auto 14px;
  border:2px solid var(--accent);
  box-shadow:0 0 20px var(--accent-glow);
}
.creator-avatar img{width:72px;height:72px;object-fit:cover;display:block;}
.creator-name{text-align:center;font-family:var(--mono);font-size:16px;font-weight:700;margin-bottom:3px;}
.creator-handle{text-align:center;font-size:12px;color:var(--text-muted);font-family:var(--mono);margin-bottom:20px;}
.creator-links{display:flex;flex-direction:column;gap:10px;}
.creator-link{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-secondary);
  text-decoration:none;color:var(--text-primary);
  transition:all var(--transition);
}
.creator-link:hover{border-color:var(--accent);background:var(--accent-dim);}
.creator-link-icon{
  width:38px;height:38px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.creator-link-icon.tg{background:linear-gradient(135deg,#0088cc,#00aaff);}
.creator-link-icon.tt{background:linear-gradient(135deg,#010101,#333);}
.creator-link-info{flex:1;}
.creator-link-name{font-size:13px;font-weight:600;margin-bottom:2px;}
.creator-link-user{font-size:11px;color:var(--text-muted);font-family:var(--mono);}
.creator-link-arrow{color:var(--text-muted);transition:color var(--transition);flex-shrink:0;}
.creator-link:hover .creator-link-arrow{color:var(--accent);}

/* ══════════════════════════════════════════
   PAGE LAYOUT — احترافي ومنظّم
══════════════════════════════════════════ */

/* Breadcrumb / page header تحسين */
.page-header{
  padding:36px 0 28px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.page-header-text{flex:1;}
@media(max-width:600px){
  .page-header{padding:24px 0 18px;margin-bottom:18px;flex-direction:column;align-items:flex-start;gap:10px;}
}

/* Section divider with label */
.section-divider{
  display:flex;align-items:center;gap:12px;
  margin:28px 0 18px;
}
.section-divider-line{flex:1;height:1px;background:var(--border);}
.section-divider-label{
  font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;
  white-space:nowrap;
}

/* Back button في داخل الصفحة (للجوال) */
.page-back-mobile{
  display:none;
  align-items:center;gap:8px;
  color:var(--text-muted);font-size:12px;font-weight:500;
  text-decoration:none;margin-bottom:16px;
  transition:color var(--transition);
}
.page-back-mobile:hover{color:var(--accent);}
/* السهم الرئيسي في الـ navbar — page-back-mobile محذوف */
@media(max-width:768px){.page-back-mobile{display:none;}}