/*
 * GOXA Speed Test v2.0 — iPhone-native feel
 * Same DNA as Calculator · iOS panel · History · Fixed height
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── HARD RESET ── */
#goxa-speed-root,
#goxa-speed-root *,
#goxa-speed-root *::before,
#goxa-speed-root *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#goxa-speed-root button {
    all: unset;
    box-sizing: border-box;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ══════════════════════════════════════════
   TOKENS — identical to Calculator
══════════════════════════════════════════ */
#goxa-speed-root {
    --gs-bg-from:       #EEF2FF;
    --gs-bg-to:         #F0FDF8;
    --gs-cobalt:        #5B8BF5;
    --gs-cobalt-dim:    rgba(91,139,245,0.12);
    --gs-cobalt-mid:    rgba(91,139,245,0.20);
    --gs-cobalt-glow:   rgba(91,139,245,0.28);
    --gs-cyan:          #22D3EE;
    --gs-cyan-soft:     rgba(34,211,238,0.15);
    --gs-cyan-glow:     rgba(34,211,238,0.30);
    --gs-mint:          #34D399;
    --gs-mint-soft:     rgba(52,211,153,0.12);
    --gs-amber:         #F59E0B;
    --gs-amber-soft:    rgba(245,158,11,0.12);
    --gs-surface:       rgba(255,255,255,0.82);
    --gs-surface-b:     rgba(200,210,240,0.55);
    --gs-btn:           rgba(255,255,255,0.80);
    --gs-btn-b:         rgba(200,210,240,0.55);
    --gs-text:          #1A1D2E;
    --gs-text-sec:      #6B7280;
    --gs-text-dim:      #9CA3AF;
    --gs-sh-sm:         0 2px 8px rgba(100,116,180,0.10);
    --gs-sh-md:         0 6px 24px rgba(100,116,180,0.14);
    --gs-sh-stat:       0 2px 10px rgba(100,116,180,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
    --gs-sh-btn:        0 6px 28px rgba(91,139,245,0.38), 0 2px 8px rgba(91,139,245,0.22);
    --gs-r-wrap:        28px;
    --gs-r-stat:        18px;
    --gs-r-btn:         100px;
    --gs-font-ui:       'Space Grotesk', sans-serif;
    --gs-font-num:      'Plus Jakarta Sans', sans-serif;
    --gs-tr:            0.20s cubic-bezier(0.4,0,0.2,1);
    --gs-tr-slow:       0.50s cubic-bezier(0.4,0,0.2,1);
    --gs-h:             680px;

    display:            flex;
    flex-direction:     column;
    width:              100%;
    max-width:          400px;
    height:             var(--gs-h);
    margin:             0 auto;
    background:         linear-gradient(145deg, var(--gs-bg-from), var(--gs-bg-to));
    border-radius:      var(--gs-r-wrap);
    border:             1.5px solid rgba(255,255,255,0.95);
    box-shadow:         var(--gs-sh-md), inset 0 1px 0 rgba(255,255,255,0.9);
    color:              var(--gs-text);
    font-family:        var(--gs-font-ui);
    font-size:          14px;
    position:           relative;
    overflow:           hidden;
    animation:          gs-in 0.45s cubic-bezier(0.34,1.46,0.64,1) both;
}

#goxa-speed-root::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 50% at 50% 30%, rgba(91,139,245,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(52,211,153,0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    transition: background 0.8s ease;
}
#goxa-speed-root.gs-testing::before {
    background:
        radial-gradient(ellipse 70% 55% at 50% 30%, rgba(34,211,238,0.13) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(91,139,245,0.10) 0%, transparent 65%);
}

@keyframes gs-in {
    from { opacity:0; transform: translateY(12px) scale(0.98); }
    to   { opacity:1; transform: none; }
}

/* ── SCROLL CONTAINER ── */
.gs-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 20px 28px;
    position: relative;
    z-index: 1;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
}
.gs-scroll::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════
   iOS MENU PANEL — History
══════════════════════════════════════════ */
.gs-menu-panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(240,244,255,0.88);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: var(--gs-r-wrap) var(--gs-r-wrap) 24px 24px;
    border-bottom: 1px solid rgba(200,210,240,0.50);
    box-shadow: 0 8px 40px rgba(100,116,180,0.22);
    padding: 20px 20px 24px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1),
                opacity   0.28s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
    max-height: 90%;
    overflow-y: auto;
    scrollbar-width: none;
}
.gs-menu-panel::-webkit-scrollbar { display: none; }
.gs-menu-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.gs-menu-pull {
    width: 36px;
    height: 4px;
    background: rgba(180,190,220,0.55);
    border-radius: 100px;
    margin: 0 auto 14px;
}

.gs-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.gs-menu-title {
    font-family: var(--gs-font-num);
    font-size: 17px;
    font-weight: 700;
    color: var(--gs-text);
    letter-spacing: -0.02em;
}
.gs-menu-close {
    width: 30px;
    height: 30px;
    background: rgba(200,210,240,0.50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gs-text-sec);
    font-size: 16px;
    line-height: 1;
    transition: background var(--gs-tr);
    flex-shrink: 0;
}
.gs-menu-close:hover { background: rgba(200,210,240,0.80); }

/* History list */
.gs-history-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--gs-text-sec);
    font-size: 13px;
    line-height: 1.6;
}
.gs-history-empty-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.5;
}

.gs-history-list { display: flex; flex-direction: column; gap: 8px; }

.gs-history-item {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(200,210,240,0.50);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background var(--gs-tr);
}
.gs-history-item:hover { background: rgba(255,255,255,0.92); }

.gs-hi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gs-hi-date {
    font-size: 11px;
    color: var(--gs-text-dim);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.gs-hi-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
}
.gs-hi-badge.exc  { background: var(--gs-cyan-soft);  color: #0E9AAF; }
.gs-hi-badge.good { background: var(--gs-mint-soft);  color: #059669; }
.gs-hi-badge.mod  { background: var(--gs-amber-soft); color: #B45309; }

.gs-hi-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
}
.gs-hi-stat { text-align: center; }
.gs-hi-stat-lbl {
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--gs-text-dim);
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}
.gs-hi-stat-val {
    font-family: var(--gs-font-num);
    font-size: 16px;
    font-weight: 700;
    color: var(--gs-text);
    letter-spacing: -0.02em;
    display: block;
}
.gs-hi-stat-unit {
    font-size: 9px;
    color: var(--gs-text-dim);
    font-weight: 500;
    display: block;
}

.gs-history-clear {
    margin-top: 12px;
    width: 100%;
    padding: 11px;
    background: transparent;
    border: 1px solid rgba(200,210,240,0.55);
    border-radius: 14px;
    color: #EF4444;
    font-family: var(--gs-font-ui);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background var(--gs-tr);
    letter-spacing: 0.02em;
}
.gs-history-clear:hover { background: rgba(239,68,68,0.07); }

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.gs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.gs-title {
    font-family: var(--gs-font-num);
    font-size: 21px;
    font-weight: 800;
    color: var(--gs-text);
    letter-spacing: -0.03em;
}
.gs-menu-btn {
    width: 34px;
    height: 34px;
    background: var(--gs-btn);
    border-radius: 50%;
    border: 1px solid var(--gs-btn-b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--gs-sh-sm);
    color: var(--gs-text-sec);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    user-select: none;
    transition: background var(--gs-tr), box-shadow var(--gs-tr);
    flex-shrink: 0;
    line-height: 1;
}
.gs-menu-btn:hover { background: rgba(255,255,255,0.98); box-shadow: 0 4px 16px rgba(100,116,180,0.18); }

/* ══════════════════════════════════════════
   STATUS BADGE
══════════════════════════════════════════ */
.gs-status-badge {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    height: 26px;
}
.gs-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(10px);
}
.gs-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%; flex-shrink: 0;
    transition: background 0.6s ease;
}
.gs-status-pill.state-idle       { background: rgba(200,210,240,0.35); color: var(--gs-text-sec); border-color: rgba(200,210,240,0.50); }
.gs-status-pill.state-idle .gs-status-dot { background: var(--gs-text-dim); }
.gs-status-pill.state-connecting,
.gs-status-pill.state-testing    { background: var(--gs-cobalt-dim); color: var(--gs-cobalt); border-color: rgba(91,139,245,0.22); box-shadow: 0 2px 14px rgba(91,139,245,0.15); }
.gs-status-pill.state-connecting .gs-status-dot,
.gs-status-pill.state-testing .gs-status-dot { background: var(--gs-cobalt); animation: gs-pdot 1.2s ease-in-out infinite; }
.gs-status-pill.state-excellent  { background: var(--gs-cyan-soft); color: #0E9AAF; border-color: rgba(34,211,238,0.30); box-shadow: 0 2px 16px var(--gs-cyan-glow); }
.gs-status-pill.state-excellent .gs-status-dot { background: var(--gs-cyan); }
.gs-status-pill.state-good       { background: var(--gs-mint-soft); color: #059669; border-color: rgba(52,211,153,0.28); }
.gs-status-pill.state-good .gs-status-dot { background: var(--gs-mint); }
.gs-status-pill.state-moderate   { background: var(--gs-amber-soft); color: #B45309; border-color: rgba(245,158,11,0.25); }
.gs-status-pill.state-moderate .gs-status-dot { background: var(--gs-amber); }

@keyframes gs-pdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ══════════════════════════════════════════
   GAUGE
══════════════════════════════════════════ */
.gs-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    flex: 1;
    justify-content: center;
}
.gs-gauge-svg {
    width: 100%;
    max-width: 300px;
    height: auto;
    overflow: visible;
    transition: filter var(--gs-tr-slow);
}
#goxa-speed-root.gs-testing .gs-gauge-svg {
    filter: drop-shadow(0 4px 36px rgba(34,211,238,0.22));
}

.gs-wave-wrap { opacity: 0; transition: opacity 0.4s ease; margin-top: -2px; }
#goxa-speed-root.gs-testing .gs-wave-wrap { opacity: 1; }

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.gs-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin-bottom: 14px;
}
.gs-stat {
    background: var(--gs-btn);
    border: 1px solid var(--gs-btn-b);
    border-radius: var(--gs-r-stat);
    padding: 12px 8px 10px;
    text-align: center;
    box-shadow: var(--gs-sh-stat);
    transition: all var(--gs-tr);
    position: relative;
    overflow: hidden;
}
.gs-stat::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.gs-stat.gs-stat-active { border-color: rgba(91,139,245,0.28); box-shadow: 0 4px 20px rgba(91,139,245,0.12), var(--gs-sh-stat); }
.gs-stat-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; color: var(--gs-cobalt); opacity: 0.7; }
.gs-stat-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gs-stat-label  { font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gs-text-dim); margin-bottom: 4px; display: block; }
.gs-stat-value  { font-family: var(--gs-font-num); font-size: 24px; font-weight: 800; color: var(--gs-text); letter-spacing: -0.03em; line-height: 1; display: block; margin-bottom: 2px; transition: color 0.3s ease; }
.gs-stat.gs-stat-active .gs-stat-value { color: var(--gs-cobalt); }
.gs-stat-unit   { font-size: 9px; font-weight: 600; color: var(--gs-text-dim); letter-spacing: 0.04em; display: block; }

@keyframes gs-pop { 0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)} }
.gs-stat-value.gs-updated { animation: gs-pop 0.25s cubic-bezier(0.34,1.56,0.64,1); }

/* ══════════════════════════════════════════
   SERVER
══════════════════════════════════════════ */
.gs-server {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 14px;
}
.gs-server-icon svg { width: 12px; height: 12px; stroke: var(--gs-text-dim); fill: none; stroke-width: 2; stroke-linecap: round; }
.gs-server-text  { font-size: 12px; font-weight: 500; color: var(--gs-text-sec); }
.gs-server-chevron { font-size: 10px; color: var(--gs-text-dim); }

/* ══════════════════════════════════════════
   START BUTTON
══════════════════════════════════════════ */
.gs-start-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--gs-cobalt), #7B6CF6);
    border: none;
    border-radius: var(--gs-r-btn);
    color: white;
    font-family: var(--gs-font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--gs-sh-btn);
    transition: all var(--gs-tr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    user-select: none;
}
.gs-start-btn::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; height:50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 100%);
    border-radius: inherit;
    pointer-events: none;
}
.gs-start-btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(91,139,245,0.46); }
.gs-start-btn:active { transform: scale(0.97); }
.gs-start-btn.gs-running { background: linear-gradient(135deg, #EF4444, #F97316); box-shadow: 0 6px 28px rgba(239,68,68,0.35); }
.gs-btn-icon { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.50); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gs-start-btn.gs-running .gs-btn-icon { animation: gs-spin 1.2s linear infinite; }
.gs-btn-icon svg { width: 10px; height: 10px; }

@keyframes gs-spin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ══════════════════════════════════════════
   ELEMENTOR OVERRIDE — button forced styles
══════════════════════════════════════════ */

#goxa-speed-root .gs-start-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 24px !important;
    background: linear-gradient(135deg, #5B8BF5, #7B6CF6) !important;
    border: none !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 6px 28px rgba(91,139,245,0.38), 0 2px 8px rgba(91,139,245,0.22) !important;
    line-height: normal !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

#goxa-speed-root .gs-start-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 36px rgba(91,139,245,0.46) !important;
}

#goxa-speed-root .gs-start-btn:active {
    transform: scale(0.97) !important;
}

#goxa-speed-root .gs-start-btn.gs-running {
    background: linear-gradient(135deg, #EF4444, #F97316) !important;
    box-shadow: 0 6px 28px rgba(239,68,68,0.35) !important;
}

#goxa-speed-root .gs-btn-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.50) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#goxa-speed-root #gs-btn-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}


/* ══ GOXA Unified Icon Button — identical to gf-icon-btn in Fuel ══ */
.goxa-icon-btn {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(200,210,240,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 8px rgba(100,116,180,0.12), 0 1px 2px rgba(0,0,0,0.04);
    color: #6B7280;
    transition: background 0.20s ease, box-shadow 0.20s ease, color 0.20s ease, transform 0.20s ease;
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.goxa-icon-btn:hover {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 4px 16px rgba(100,116,180,0.18);
    color: #1A1D2E;
    transform: translateY(-1px);
}
.goxa-icon-btn:active { transform: scale(0.94); }

/* Remove old .goxa-expand-btn / .goxa-settings-btn / .goxa-ctrl-group if present */
.goxa-expand-btn, .goxa-settings-btn, .goxa-ctrl-group { all: unset; }

/* Fullscreen state */
#goxa-calc-root.goxa-is-fullscreen,
#goxa-speed-root.goxa-is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
}

/* Elementor override — force icon button style */
#goxa-calc-root .goxa-icon-btn,
#goxa-speed-root .goxa-icon-btn {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.80) !important;
    border: 1px solid rgba(200,210,240,0.55) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(100,116,180,0.12), 0 1px 2px rgba(0,0,0,0.04) !important;
    color: #6B7280 !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-shadow: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
#goxa-calc-root .goxa-icon-btn:hover,
#goxa-speed-root .goxa-icon-btn:hover {
    background: rgba(255,255,255,0.98) !important;
    color: #1A1D2E !important;
    box-shadow: 0 4px 16px rgba(100,116,180,0.18) !important;
    transform: translateY(-1px) !important;
}

/* ── Expand / Fullscreen — strong override for Elementor ── */
#goxa-calc-root.goxa-is-fullscreen {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    inset: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; min-height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    margin: 0 !important;
    transform: none !important;
}
#goxa-speed-root.goxa-is-fullscreen {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    inset: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; min-height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    margin: 0 !important;
    transform: none !important;
}