/* ══════════════════════════════════════════════════════
   SEO CLIENT PORTAL — v5 Production
   Bulletproof: no layout-breaking resets
══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@700;800&display=swap');

/* ── Scoped reset: safe properties only ── */
#seop-portal *,
#seop-portal *::before,
#seop-portal *::after {
    box-sizing: border-box !important;
}

#seop-portal ul,
#seop-portal ol,
#seop-portal li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Portal shell ── */
#seop-portal {
    background: #060b16 !important;
    color: #dde5f5 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 30px 80px rgba(0,0,0,0.7) !important;
}

#seop-portal a       { text-decoration: none !important; color: inherit !important; cursor: pointer !important; }
#seop-portal button  { cursor: pointer !important; font-family: inherit !important; }
#seop-portal canvas  { display: block !important; max-width: 100% !important; }
#seop-portal h1,
#seop-portal h2,
#seop-portal h3      { font-family: 'Sora', sans-serif !important; margin: 0 !important; padding: 0 !important; }
#seop-portal p       { margin: 0 !important; padding: 0 !important; line-height: 1.7 !important; }

/* Login wrap */
#seop-login-wrap * {
    box-sizing: border-box !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ══════════════════════════════════
   LOADING
══════════════════════════════════ */
.seop-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
    gap: 1rem !important;
    color: #374f6b !important;
    font-size: .85rem !important;
}
.seop-spinner {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(71,145,255,0.1) !important;
    border-top-color: #4791ff !important;
    animation: sp5Spin .7s linear infinite !important;
}
@keyframes sp5Spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════
   HEADER
══════════════════════════════════ */
.seop-header {
    padding: 3.5rem 3rem 3rem !important;
    background:
        radial-gradient(ellipse 110% 130% at 110% -25%, rgba(71,145,255,0.15) 0%, transparent 55%),
        radial-gradient(ellipse 70% 90% at -15% 110%, rgba(123,108,240,0.1) 0%, transparent 55%),
        linear-gradient(170deg, #0b1225 0%, #060b16 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Grid texture */
.seop-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    pointer-events: none !important;
    opacity: .6 !important;
}

/* Glow orb */
.seop-header::after {
    content: '' !important;
    position: absolute !important;
    top: -120px !important;
    right: -120px !important;
    width: 520px !important;
    height: 520px !important;
    background: radial-gradient(circle, rgba(71,145,255,0.09) 0%, transparent 65%) !important;
    pointer-events: none !important;
    animation: sp5Orb 9s ease-in-out infinite alternate !important;
}
@keyframes sp5Orb {
    from { transform: translate(0,0); }
    to   { transform: translate(-35px, 25px); }
}

.seop-header-inner {
    position: relative !important;
    z-index: 1 !important;
}

/* Live badge */
.seop-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .42rem 1.1rem .42rem .75rem !important;
    background: rgba(71,145,255,0.09) !important;
    border: 1px solid rgba(71,145,255,0.24) !important;
    border-radius: 100px !important;
    font-size: .63rem !important;
    font-weight: 600 !important;
    color: #4791ff !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    margin-bottom: 1.85rem !important;
    line-height: 1 !important;
}

.seop-live-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10d48a !important;
    box-shadow: 0 0 10px #10d48a !important;
    animation: sp5Dot 2.5s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
@keyframes sp5Dot {
    0%,100% { opacity:1; box-shadow:0 0 10px #10d48a; }
    50%      { opacity:.3; box-shadow:0 0 4px #10d48a; }
}

/* H1 */
.seop-header h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -.045em !important;
    line-height: .95 !important;
    margin-bottom: 1.5rem !important;
}
.seop-header h1 span {
    display: block !important;
    background: linear-gradient(118deg, #4791ff 0%, #22d3ee 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    line-height: 1.1 !important;
    margin-top: .1rem !important;
}

/* Meta chips row */
.seop-header-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .6rem !important;
    margin-bottom: 2.4rem !important;
    align-items: center !important;
}
.seop-meta-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    padding: .38rem .9rem .38rem .6rem !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 100px !important;
    font-size: .76rem !important;
    color: #7d94b5 !important;
    line-height: 1 !important;
}
.seop-meta-chip-icon {
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
    background: rgba(255,255,255,0.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .65rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.seop-meta-chip strong { color: #dde5f5 !important; font-weight: 500 !important; }

/* Stat strip */
.seop-stat-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: .85rem !important;
}
.seop-stat {
    padding: 1.4rem 1.6rem !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.seop-stat::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(71,145,255,0.6), transparent) !important;
}
.seop-stat:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(71,145,255,0.28) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 50px rgba(71,145,255,0.09) !important;
}
.seop-stat-n {
    font-family: 'Sora', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
    line-height: 1 !important;
    margin-bottom: .4rem !important;
    background: linear-gradient(130deg, #ffffff 30%, #4791ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.seop-stat-l {
    font-size: .62rem !important;
    font-weight: 600 !important;
    color: #374f6b !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════
   DOWNLOAD ROW
══════════════════════════════════ */
.seop-dl-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    padding: 1.2rem 3rem !important;
    background: #080d19 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.seop-dl-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .65rem 1.4rem !important;
    background: #111c2e !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 100px !important;
    color: #dde5f5 !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    transition: all .2s ease !important;
    line-height: 1 !important;
}
.seop-dl-btn:hover {
    background: linear-gradient(135deg, #4791ff, #7b6cf0) !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(71,145,255,0.32) !important;
}
.seop-dl-note {
    font-size: .72rem !important;
    color: #1b2d42 !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════
   TABS
══════════════════════════════════ */
.seop-tabs {
    display: flex !important;
    background: #080d19 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 0 3rem !important;
    gap: 0 !important;
}
.seop-tab {
    padding: 1rem 1.5rem !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: #374f6b !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    transition: color .2s, border-color .2s !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
}
.seop-tab:hover { color: #7d94b5 !important; }
.seop-tab.active { color: #4791ff !important; border-bottom-color: #4791ff !important; }

/* ══════════════════════════════════
   SECTIONS
══════════════════════════════════ */
.seop-section {
    padding: 3rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.seop-section:nth-child(even) {
    background: rgba(8,13,25,0.55) !important;
}

.seop-section-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: .6rem !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    color: #4791ff !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    margin-bottom: .65rem !important;
    line-height: 1 !important;
}
.seop-section-eyebrow::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #4791ff, #7b6cf0) !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}
.seop-section h2 {
    font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -.03em !important;
    margin-bottom: .5rem !important;
    line-height: 1.1 !important;
}
.seop-section-desc {
    font-size: .88rem !important;
    color: #7d94b5 !important;
    max-width: 580px !important;
    line-height: 1.75 !important;
    margin-bottom: 2rem !important;
}

/* ══════════════════════════════════
   PROGRESS CARD
══════════════════════════════════ */
.seop-progress-card {
    padding: 2rem !important;
    background: #0d1525 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    margin-bottom: 1.75rem !important;
    position: relative !important;
    overflow: hidden !important;
}
.seop-progress-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(71,145,255,0.5), transparent) !important;
}
.seop-progress-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    margin-bottom: 1.25rem !important;
}
.seop-progress-title {
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: #dde5f5 !important;
    line-height: 1.35 !important;
}
.seop-progress-title small {
    display: block !important;
    font-size: .73rem !important;
    color: #374f6b !important;
    font-weight: 400 !important;
    margin-top: .3rem !important;
    line-height: 1.5 !important;
}
.seop-progress-pct {
    font-family: 'Sora', sans-serif !important;
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    background: linear-gradient(130deg, #4791ff, #22d3ee) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.seop-bar-track {
    height: 10px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    margin-bottom: 1.4rem !important;
}
.seop-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #4791ff, #22d3ee) !important;
    border-radius: 100px !important;
    width: 0 !important;
    transition: width 1.6s cubic-bezier(.16,1,.3,1) !important;
    box-shadow: 0 0 14px rgba(71,145,255,0.5) !important;
}
.seop-task-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .6rem !important;
}
.seop-tp {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    padding: .34rem .9rem !important;
    border-radius: 100px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
.seop-tp-done { background: rgba(16,212,138,0.1) !important; color: #34d399 !important; border: 1px solid rgba(16,212,138,0.2) !important; }
.seop-tp-prog { background: rgba(245,166,35,0.1) !important; color: #fbbf24 !important; border: 1px solid rgba(245,166,35,0.2) !important; }
.seop-tp-todo { background: rgba(255,255,255,0.04) !important; color: #374f6b !important; border: 1px solid rgba(255,255,255,0.08) !important; }

/* ══════════════════════════════════
   SCORE CARDS
══════════════════════════════════ */
.seop-scores-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}
.seop-score-card {
    padding: 1.35rem 1.5rem !important;
    background: #0d1525 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.seop-score-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #4791ff, #7b6cf0) !important;
    opacity: 0 !important;
    transition: opacity .22s !important;
}
.seop-score-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(71,145,255,0.28) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.3), 0 0 50px rgba(71,145,255,0.09) !important;
}
.seop-score-card:hover::before { opacity: 1 !important; }
.seop-score-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
}
.seop-score-name {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: #7d94b5 !important;
    line-height: 1 !important;
}
.seop-score-num {
    font-family: 'Sora', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1 !important;
}
.seop-score-num span {
    font-size: .68rem !important;
    color: #374f6b !important;
    font-weight: 400 !important;
    font-family: 'Inter', sans-serif !important;
}
.seop-score-track {
    height: 5px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
}
.seop-score-bar-cur {
    height: 100% !important;
    background: linear-gradient(90deg, #4791ff, #22d3ee) !important;
    border-radius: 100px !important;
    width: 0 !important;
    transition: width 1.6s cubic-bezier(.16,1,.3,1) !important;
    box-shadow: 0 0 10px rgba(71,145,255,0.5) !important;
}
.seop-score-bar-tgt {
    height: 4px !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
}
.seop-score-bar-tgt-fill {
    height: 100% !important;
    background: rgba(123,108,240,0.35) !important;
    border-radius: 100px !important;
    width: 0 !important;
    transition: width 1.6s cubic-bezier(.16,1,.3,1) !important;
}
.seop-score-labels {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: .55rem !important;
}
.seop-score-label-txt {
    font-size: .6rem !important;
    color: #1b2d42 !important;
    line-height: 1 !important;
}
.seop-radar-wrap {
    max-width: 380px !important;
    margin: 2rem auto 0 !important;
}

/* ══════════════════════════════════
   TASK CATEGORIES + ITEMS
══════════════════════════════════ */
.seop-category-block {
    margin-bottom: 2.25rem !important;
}
.seop-category-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .8rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    margin-bottom: 1rem !important;
}
.seop-category-name {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    color: #dde5f5 !important;
    line-height: 1 !important;
}
.seop-category-name::before {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4791ff, #7b6cf0) !important;
    box-shadow: 0 0 10px rgba(71,145,255,0.6) !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.seop-category-badge {
    padding: .22rem .7rem !important;
    background: rgba(71,145,255,0.09) !important;
    border: 1px solid rgba(71,145,255,0.2) !important;
    border-radius: 100px !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    color: #4791ff !important;
    line-height: 1.4 !important;
}
.seop-task-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: .9rem !important;
    padding: .8rem .75rem !important;
    border-radius: 10px !important;
    margin-bottom: 2px !important;
    transition: background .15s ease !important;
}
.seop-task-item:hover {
    background: rgba(255,255,255,0.03) !important;
}
.seop-task-dot {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.seop-dot-done { background: rgba(16,212,138,0.14) !important; color: #34d399 !important; border: 1px solid rgba(16,212,138,0.24) !important; }
.seop-dot-prog { background: rgba(245,166,35,0.12) !important; color: #fbbf24 !important; border: 1px solid rgba(245,166,35,0.24) !important; }
.seop-dot-todo { background: rgba(255,255,255,0.05) !important; color: #374f6b !important; border: 1px solid rgba(255,255,255,0.09) !important; }
.seop-task-body {
    flex: 1 !important;
    min-width: 0 !important;
}
.seop-task-name {
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: #dde5f5 !important;
    line-height: 1.5 !important;
}
.seop-task-name.done {
    text-decoration: line-through !important;
    color: #374f6b !important;
}
.seop-task-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: .3rem !important;
    margin-top: .3rem !important;
    font-size: .76rem !important;
    color: #7d94b5 !important;
    font-style: italic !important;
    line-height: 1.55 !important;
}
.seop-task-note::before {
    content: '↳' !important;
    color: #374f6b !important;
    font-style: normal !important;
    flex-shrink: 0 !important;
    line-height: 1.55 !important;
}
.seop-task-status-badge {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
    padding: .26rem .7rem !important;
    border-radius: 100px !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.seop-sb-done { background: rgba(16,212,138,0.1) !important; color: #34d399 !important; border: 1px solid rgba(16,212,138,0.2) !important; }
.seop-sb-prog { background: rgba(245,166,35,0.1) !important; color: #fbbf24 !important; border: 1px solid rgba(245,166,35,0.2) !important; }
.seop-sb-high { background: rgba(240,79,90,0.1) !important; color: #f87171 !important; border: 1px solid rgba(240,79,90,0.2) !important; }
.seop-sb-med  { background: rgba(245,166,35,0.08) !important; color: #fbbf24 !important; border: 1px solid rgba(245,166,35,0.14) !important; }
.seop-sb-low  { background: rgba(16,212,138,0.08) !important; color: #6ee7b7 !important; border: 1px solid rgba(16,212,138,0.14) !important; }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.seop-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    padding: 1.4rem 3rem !important;
    background: #080d19 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.seop-footer-updated {
    font-size: .7rem !important;
    color: #1b2d42 !important;
    line-height: 1 !important;
}
.seop-footer-brand {
    font-size: .7rem !important;
    color: #1b2d42 !important;
    line-height: 1 !important;
}
.seop-footer-brand a {
    color: #374f6b !important;
    font-weight: 600 !important;
    transition: color .15s !important;
}
.seop-footer-brand a:hover { color: #4791ff !important; }

/* ══════════════════════════════════
   ERROR
══════════════════════════════════ */
.seop-error {
    padding: 4rem 3rem !important;
    text-align: center !important;
    color: #7d94b5 !important;
    font-size: .9rem !important;
    line-height: 1.7 !important;
}
.seop-error a { color: #4791ff !important; }

/* ══════════════════════════════════
   HOME GRID
══════════════════════════════════ */
.seop-home-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 1.1rem !important;
    padding: 2.5rem 3rem !important;
}
.seop-home-card {
    display: block !important;
    padding: 1.75rem !important;
    background: #0d1525 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.seop-home-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #4791ff, #7b6cf0) !important;
    opacity: 0 !important;
    transition: opacity .22s !important;
}
.seop-home-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(71,145,255,0.28) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.38), 0 0 50px rgba(71,145,255,0.09) !important;
}
.seop-home-card:hover::before { opacity: 1 !important; }
.seop-home-card strong {
    display: block !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: .4rem !important;
    line-height: 1.3 !important;
}
.seop-home-card span {
    font-size: .78rem !important;
    color: #374f6b !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════
   LOGIN PAGE
══════════════════════════════════ */
#seop-login-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 560px !important;
    padding: 2rem !important;
    background:
        radial-gradient(ellipse 80% 50% at 70% -10%, rgba(71,145,255,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at -10% 90%, rgba(123,108,240,0.1) 0%, transparent 60%),
        #060b16 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
.seop-login-card {
    padding: 3.5rem 3rem !important;
    max-width: 440px !important;
    width: 100% !important;
    background: rgba(11,18,32,0.96) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 24px !important;
    text-align: center !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 28px 70px rgba(0,0,0,0.45),
        0 0 50px rgba(71,145,255,0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    animation: sp5Login .5s ease both !important;
}
@keyframes sp5Login {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.seop-login-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(71,145,255,0.65), rgba(123,108,240,0.5), transparent) !important;
}
.seop-login-logo {
    width: 66px !important;
    height: 66px !important;
    background: linear-gradient(135deg, #4791ff, #7b6cf0) !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 2rem !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    box-shadow: 0 14px 36px rgba(71,145,255,0.38) !important;
}
.seop-login-agency {
    font-size: .64rem !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: #4791ff !important;
    margin-bottom: .75rem !important;
    line-height: 1 !important;
}
.seop-login-title {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: .5rem !important;
    line-height: 1.15 !important;
    letter-spacing: -.03em !important;
}
.seop-login-sub {
    font-size: .9rem !important;
    color: #7d94b5 !important;
    margin-bottom: 2.25rem !important;
    line-height: 1.68 !important;
}
.seop-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    width: 100% !important;
    padding: .95rem 2rem !important;
    background: linear-gradient(135deg, #4791ff, #7b6cf0) !important;
    border: none !important;
    border-radius: 100px !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    transition: all .25s ease !important;
    box-shadow: 0 10px 28px rgba(71,145,255,0.38) !important;
}
.seop-login-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 40px rgba(71,145,255,0.52) !important;
    color: #fff !important;
}
.seop-login-help {
    font-size: .78rem !important;
    color: #374f6b !important;
    margin-top: 1.75rem !important;
    line-height: 1.72 !important;
}
.seop-login-help a { color: #7d94b5 !important; }
.seop-login-help a:hover { color: #4791ff !important; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 768px) {
    .seop-header  { padding: 2.25rem 1.5rem 2rem !important; }
    .seop-section { padding: 2rem 1.5rem !important; }
    .seop-dl-wrap { padding: 1rem 1.5rem !important; }
    .seop-tabs    { padding: 0 1.5rem !important; }
    .seop-footer  { padding: 1.1rem 1.5rem !important; }
    .seop-home-grid { padding: 1.5rem !important; }
    .seop-header h1 { font-size: 2.4rem !important; }
    .seop-scores-grid { grid-template-columns: 1fr 1fr !important; }
    .seop-stat-strip  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    .seop-header h1     { font-size: 2rem !important; }
    .seop-scores-grid   { grid-template-columns: 1fr !important; }
    .seop-progress-pct  { font-size: 2.1rem !important; }
}