/* ====================================================== MYDOGNI STREAMING ACCOUNT — NEON DASHBOARD ====================================================== */ body.mdni-account-neon { --acct-bg:#020b13; --acct-panel:#071a29; --acct-panel2:#0b2940; --acct-cyan:#39d9ff; --acct-ice:#dffbff; --acct-muted:#a9c2d1; --acct-green:#31e995; --acct-red:#ff5361; --acct-purple:#a66cff; background:#020a12 !important; } /* ====================================================== PAGE FOUNDATION ====================================================== */ body.mdni-account-neon #main-content { padding-bottom:80px !important; color:#eaf8ff !important; background: radial-gradient( circle at 52% 4%, rgba(29,161,222,.14), transparent 28% ), radial-gradient( circle at 8% 42%, rgba(22,123,182,.08), transparent 28% ), linear-gradient( 180deg, #051622 0%, #020b13 55%, #020911 100% ) !important; } body.mdni-account-neon #main-content .container { width:92% !important; max-width: 1180px !important; } body.mdni-account-neon #main-content .container::before { display:none !important; } body.mdni-account-neon #left-area { width:100% !important; padding-right:0 !important; } body.mdni-account-neon #sidebar { display:none !important; } body.mdni-account-neon .entry-title { display:none !important; } body.mdni-account-neon .et_pb_section, body.mdni-account-neon .et_pb_row, body.mdni-account-neon .et_pb_column { background-color: transparent !important; } /* ====================================================== HERO ====================================================== */ .mdni-account-hero { position:relative; overflow:hidden; max-width:1180px; margin: 0 auto 28px; padding: 56px 44px 42px; border-bottom: 1px solid rgba(61,218,255,.58); background: radial-gradient( circle at 80% 20%, rgba(56,216,255,.16), transparent 26% ), linear-gradient( 135deg, rgba(5,21,34,.98), rgba(4,14,24,.99) ); box-shadow: 0 18px 45px rgba(0,0,0,.30); } .mdni-account-hero::before { content:""; position:absolute; top:-100px; right:20%; width:390px; height:330px; opacity:.30; transform: skewX(-28deg); background: linear-gradient( 135deg, transparent, rgba(48,204,255,.35), transparent ); } .mdni-account-hero-inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:35px; } .mdni-account-eyebrow { display:inline-block; margin-bottom:14px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(60,215,255,.65); color: #68e4ff; background: rgba(8,68,103,.42); font-size:.72rem; font-weight:900; letter-spacing:.13em; } .mdni-account-hero h1 { margin:0; color:#fff; font-size: clamp(3rem,5vw,5rem); line-height:.96; letter-spacing:-.05em; font-weight:950; text-shadow: 0 4px 4px rgba(0,0,0,.60); } .mdni-account-hero h1 span { color: var(--acct-cyan); } .mdni-account-hero p { max-width:650px; margin: 18px 0 0; color: var(--acct-muted); font-size:1.08rem; line-height:1.65; } .mdni-account-hero-liberty { display:flex; align-items:center; gap:18px; min-width:275px; padding: 16px 21px; border: 1px solid rgba(63,217,255,.55); border-radius:20px; background: linear-gradient( 145deg, rgba(12,50,75,.92), rgba(3,20,32,.98) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 24px rgba(52,209,255,.11); } .mdni-account-avatar { width:76px; height:76px; padding:5px; flex:0 0 76px; border-radius:21px; border: 1px solid #58ddff; background: linear-gradient( 180deg, #39bde9, #075782 ); box-shadow: 0 0 17px rgba(55,215,255,.31), inset 0 1px 0 rgba(255,255,255,.34); } .mdni-account-avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:16px; } .mdni-account-hero-liberty strong { display:block; color:#dffaff; font-size:.78rem; letter-spacing:.16em; line-height:1.75; } /* ====================================================== GLOBAL ACCOUNT PANELS ====================================================== */ body.mdni-account-neon .mdni-acct-panel, body.mdni-account-neon .mdni-acct-surface, body.mdni-account-neon .mydogni-youtube-card, body.mdni-account-neon .mydogni-twitch-card, body.mdni-account-neon .swsp-device-card { position:relative; max-width: 1180px !important; color: #e9f8ff !important; border: 1px solid rgba(63,214,255,.66) !important; border-radius: 18px !important; background: radial-gradient( circle at 80% 0%, rgba(61,216,255,.11), transparent 33% ), linear-gradient( 180deg, rgba(13,48,72,.98), rgba(5,24,38,.99) ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -5px 12px rgba(0,0,0,.43), 0 15px 34px rgba(0,0,0,.30), 0 0 22px rgba(47,205,255,.07) !important; } body.mdni-account-neon .mdni-acct-panel, body.mdni-account-neon .mydogni-youtube-card, body.mdni-account-neon .mydogni-twitch-card { margin: 18px auto !important; padding: 25px !important; } body.mdni-account-neon .mdni-acct-panel::before, body.mdni-account-neon .mydogni-youtube-card::before, body.mdni-account-neon .mydogni-twitch-card::before, body.mdni-account-neon .swsp-device-card::after { content:""; position:absolute; top:0; left:8%; right:8%; height:1px; pointer-events:none; background: linear-gradient( 90deg, transparent, #65e2ff, #e7fcff, #65e2ff, transparent ); box-shadow: 0 0 8px rgba(58,216,255,.65); } /* Remove stubborn white legacy colors */ body.mdni-account-neon .mdni-acct-panel *, body.mdni-account-neon .mdni-acct-surface *, body.mdni-account-neon .swsp-device-card * { border-color: rgba(71,150,190,.34); } body.mdni-account-neon .mdni-acct-panel h1, body.mdni-account-neon .mdni-acct-panel h2, body.mdni-account-neon .mdni-acct-panel h3, body.mdni-account-neon .mdni-acct-panel h4, body.mdni-account-neon .mdni-acct-surface h1, body.mdni-account-neon .mdni-acct-surface h2, body.mdni-account-neon .mdni-acct-surface h3, body.mdni-account-neon .swsp-device-card strong, body.mdni-account-neon .swsp-device-card summary { color: #f5fcff !important; } body.mdni-account-neon .mdni-acct-panel p, body.mdni-account-neon .mdni-acct-surface p, body.mdni-account-neon .swsp-device-card p { color: #b6ccda !important; } /* ====================================================== SECURITY / BILLING ====================================================== */ body.mdni-account-neon .mdni-acct-security, body.mdni-account-neon .mdni-acct-billing { width: calc(50% - 12px) !important; min-height: 230px; display: inline-block !important; vertical-align: top; margin: 12px 4px !important; } body.mdni-account-neon .mdni-acct-security { border-color: rgba(54,227,151,.52) !important; } body.mdni-account-neon .mdni-acct-security span[style*="#087a3d"], body.mdni-account-neon .mdni-acct-billing [style*="#087a3d"] { color: var(--acct-green) !important; text-shadow: 0 0 8px rgba(49,233,149,.22); } /* ====================================================== DEVICE / STREAMBOX ====================================================== */ body.mdni-account-neon .swsp-device-card { margin: 24px auto !important; padding: 27px !important; } body.mdni-account-neon .swsp-device-card::before { color: #f4fcff !important; font-size: 1.45rem !important; text-shadow: 0 0 12px rgba(55,216,255,.15); } body.mdni-account-neon .swsp-device-card > details { border: 1px solid rgba(63,198,240,.38) !important; background: linear-gradient( 180deg, rgba(13,47,70,.94), rgba(5,25,39,.96) ) !important; } body.mdni-account-neon .swsp-device-card > div { color: #c2d7e4 !important; background: transparent !important; } /* ====================================================== YOUTUBE + TWITCH ====================================================== */ body.mdni-account-neon .mydogni-youtube-card, body.mdni-account-neon .mydogni-twitch-card { width: calc(50% - 14px); min-height:225px; display: inline-block; vertical-align: top; } body.mdni-account-neon .mydogni-youtube-card { border-color: rgba(255,66,76,.62) !important; } body.mdni-account-neon .mydogni-twitch-card { border-color: rgba(164,103,255,.68) !important; } body.mdni-account-neon .mydogni-youtube-head strong, body.mdni-account-neon .mydogni-twitch-head strong { color:#fff !important; font-size: 1.42rem !important; } body.mdni-account-neon .mydogni-youtube-sub, body.mdni-account-neon .mydogni-twitch-sub { color: #96b3c4 !important; } body.mdni-account-neon .mydogni-youtube-status.is-connected, body.mdni-account-neon .mydogni-twitch-status.is-connected { color: #74ffb5 !important; border: 1px solid #2be68a !important; background: rgba(19,136,77,.25) !important; box-shadow: 0 0 14px rgba(44,230,139,.17); } /* ====================================================== BUTTONS ====================================================== */ body.mdni-account-neon #main-content button, body.mdni-account-neon #main-content input[type="submit"], body.mdni-account-neon #main-content a[style*="padding"], body.mdni-account-neon #main-content .button { border: 1px solid #55ddff !important; border-radius: 10px !important; color:#fff !important; background: linear-gradient( 180deg, #1999d5 0%, #0b679e 48%, #053b60 52%, #03263e 100% ) !important; text-decoration:none !important; font-weight: 900 !important; text-shadow: 0 1px 2px #000; box-shadow: inset 0 2px 0 rgba(255,255,255,.27), inset 0 -4px 8px rgba(0,0,0,.43), 0 5px 0 rgba(0,12,22,.92), 0 10px 18px rgba(0,0,0,.30), 0 0 13px rgba(53,211,255,.18) !important; transition: transform .18s ease, box-shadow .18s ease; } body.mdni-account-neon #main-content button:hover, body.mdni-account-neon #main-content a[style*="padding"]:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.32), inset 0 -4px 8px rgba(0,0,0,.40), 0 7px 0 rgba(0,12,22,.90), 0 13px 22px rgba(0,0,0,.34), 0 0 21px rgba(53,211,255,.28) !important; } /* destructive */ body.mdni-account-neon .mdni-acct-danger, body.mdni-account-neon form:has( input[name="action"][value="swsp_device_revoke"] ) button { border-color: #ff5b69 !important; color: #ffdce0 !important; background: linear-gradient( 180deg, #7d202d, #3f1018 ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 15px rgba(255,72,87,.18) !important; } /* YouTube disconnect */ body.mdni-account-neon .mydogni-youtube-button.secondary, body.mdni-account-neon .mdni-acct-youtube-button { border-color: #ff525d !important; background: linear-gradient( 180deg, #a5242e, #4b1118 ) !important; } /* Twitch disconnect */ body.mdni-account-neon .mydogni-twitch-button.secondary, body.mdni-account-neon .mdni-acct-twitch-button { border-color: #a96dff !important; background: linear-gradient( 180deg, #6735aa, #32175c ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 0 15px rgba(155,86,255,.20) !important; } /* ====================================================== FORMS / INNER BOXES ====================================================== */ body.mdni-account-neon #main-content input[type="text"], body.mdni-account-neon #main-content input[type="email"], body.mdni-account-neon #main-content input[type="password"], body.mdni-account-neon #main-content select, body.mdni-account-neon #main-content textarea { color:#fff !important; border: 1px solid rgba(71,204,246,.45) !important; background: #031522 !important; box-shadow: inset 0 3px 8px rgba(0,0,0,.48); } /* ====================================================== MOBILE ====================================================== */ @media(max-width:850px) { .mdni-account-hero { padding: 42px 24px 34px; } .mdni-account-hero-inner { display:block; } .mdni-account-hero-liberty { margin-top:28px; max-width:330px; min-width:0; } body.mdni-account-neon .mdni-acct-security, body.mdni-account-neon .mdni-acct-billing, body.mdni-account-neon .mydogni-youtube-card, body.mdni-account-neon .mydogni-twitch-card { display:block !important; width: 100% !important; margin: 16px 0 !important; } } /* ====================================================== ACCOUNT DASHBOARD V2 LAYOUT + WHITE-STRIP CLEANUP ====================================================== */ /* Kill old white Divi/background strip */ body.mdni-account-neon #main-content .et_pb_section, body.mdni-account-neon #main-content .et_pb_row, body.mdni-account-neon #main-content .et_pb_column { background-image: none !important; background-color: transparent !important; } body.mdni-account-neon #main-content { min-height: 100vh; background: radial-gradient( circle at 50% 5%, rgba(30,165,224,.13), transparent 30% ), linear-gradient( 180deg, #061725 0%, #020c15 48%, #010810 100% ) !important; } /* ====================================================== MAIN DASHBOARD WIDTH ====================================================== */ body.mdni-account-neon .entry-content { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; } /* ====================================================== SECURITY + BILLING ROW ====================================================== */ .mdni-acct-two-col { display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; max-width: 1180px; margin: 20px auto 30px; } body.mdni-account-neon .mdni-acct-two-col .mdni-acct-security, body.mdni-account-neon .mdni-acct-two-col .mdni-acct-billing { display:block !important; width: auto !important; max-width: none !important; min-height: 225px; margin: 0 !important; padding: 27px !important; } /* security icon feel */ body.mdni-account-neon .mdni-acct-security { background: radial-gradient( circle at 90% 10%, rgba(40,235,146,.10), transparent 30% ), linear-gradient( 145deg, #0d3046, #051923 ) !important; } /* billing glow */ body.mdni-account-neon .mdni-acct-billing { background: radial-gradient( circle at 90% 10%, rgba(50,208,255,.12), transparent 30% ), linear-gradient( 145deg, #0d3048, #051923 ) !important; } /* ====================================================== STREAMING ACCOUNT LARGE PANEL ====================================================== */ body.mdni-account-neon .mdni-acct-surface { color: #eaf8ff !important; background: radial-gradient( circle at 80% 0%, rgba(51,210,255,.10), transparent 30% ), linear-gradient( 180deg, rgba(13,50,74,.98), rgba(4,22,35,.99) ) !important; } /* Keep nested white surfaces from punching holes */ body.mdni-account-neon .mdni-acct-surface .mdni-acct-surface { background: linear-gradient( 180deg, #0c2c42, #061b2a ) !important; } /* ====================================================== PAIR STREAMBOX STEPS ====================================================== */ body.mdni-account-neon .mdni-acct-step { position:relative; color: #e9f9ff !important; border: 1px solid rgba(61,205,247,.45) !important; border-radius: 11px !important; background: linear-gradient( 180deg, #0d324c, #061d2e ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -3px 7px rgba(0,0,0,.38), 0 6px 14px rgba(0,0,0,.18) !important; } /* ====================================================== DEVICE PANEL ====================================================== */ body.mdni-account-neon .swsp-device-card { width: 100% !important; max-width: none !important; box-sizing: border-box; } body.mdni-account-neon .swsp-device-card > div:first-child strong { color: #55ddff !important; text-shadow: 0 0 9px rgba(55,216,255,.23); } body.mdni-account-neon .swsp-device-card > details { color: #e9f8ff !important; } body.mdni-account-neon .swsp-device-card > div:has( form input[name="action"][value="swsp_device_diagnostics"] ) { padding: 16px !important; border: 1px solid rgba(62,191,231,.32) !important; border-radius: 11px; background: rgba(3,18,29,.38) !important; } /* ====================================================== YOUTUBE + TWITCH ROW ====================================================== */ .mdni-platform-row { display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; width: 100%; max-width: 1180px; margin: 30px auto 40px; } body.mdni-account-neon .mdni-platform-row .mydogni-youtube-card, body.mdni-account-neon .mdni-platform-row .mydogni-twitch-card { display:block !important; width: auto !important; max-width: none !important; min-height: 245px; margin: 0 !important; padding: 28px !important; } /* YouTube */ body.mdni-account-neon .mdni-platform-row .mydogni-youtube-card { border: 1px solid rgba(255,71,80,.70) !important; background: radial-gradient( circle at 88% 20%, rgba(255,50,59,.13), transparent 32% ), linear-gradient( 145deg, #123044, #071923 ) !important; } /* Twitch */ body.mdni-account-neon .mdni-platform-row .mydogni-twitch-card { border: 1px solid rgba(160,91,255,.72) !important; background: radial-gradient( circle at 88% 20%, rgba(145,72,255,.15), transparent 32% ), linear-gradient( 145deg, #123044, #071923 ) !important; } /* Platform typography */ body.mdni-account-neon .mdni-platform-row p { color: #b7ccda !important; font-size: .98rem; line-height: 1.55; } /* ====================================================== REMOVE STUBBORN WHITE TEXT BOXES ====================================================== */ body.mdni-account-neon #main-content div[style*="background:#fff"], body.mdni-account-neon #main-content div[style*="background: #fff"], body.mdni-account-neon #main-content div[style*="background:white"], body.mdni-account-neon #main-content div[style*="background: white"] { color: #eaf8ff !important; background: linear-gradient( 180deg, #0d3048, #061b2a ) !important; } /* ====================================================== CREDENTIAL / CODE TEXT ====================================================== */ body.mdni-account-neon #main-content code, body.mdni-account-neon #main-content pre { color: #84dff7 !important; background: rgba(1,13,22,.42) !important; } /* ====================================================== MOBILE ====================================================== */ @media(max-width:850px) { .mdni-acct-two-col, .mdni-platform-row { grid-template-columns: 1fr !important; gap: 16px; } } /* ====================================================== ACCOUNT DASHBOARD V3 READABILITY / CONTRAST FIX ====================================================== */ /* Main headings inside account panels */ body.mdni-account-neon #main-content h2, body.mdni-account-neon #main-content h3, body.mdni-account-neon #main-content h4 { color:#f5fbff !important; text-shadow: 0 1px 2px rgba(0,0,0,.90), 0 0 8px rgba(55,216,255,.12) !important; } /* Streaming Credentials heading */ body.mdni-account-neon #main-content h3 { color:#dff8ff !important; } /* General body text inside the large account panel */ body.mdni-account-neon .mdni-acct-surface, body.mdni-account-neon .mdni-acct-surface p, body.mdni-account-neon .mdni-acct-surface span { color:#c8dce8 !important; } /* Labels like Plan, Access through, Device limit */ body.mdni-account-neon .mdni-acct-surface strong { color:#f4fbff !important; } /* Credential values */ body.mdni-account-neon #main-content code { display:inline-block; padding:2px 5px; border-radius:4px; color:#72e6ff !important; background:#03131f !important; text-shadow: 0 0 6px rgba(70,220,255,.24); font-weight:600; } /* OBS URL / long credential lines */ body.mdni-account-neon #main-content code, body.mdni-account-neon #main-content pre { overflow-wrap:anywhere; word-break:break-word; } /* ====================================================== PAIRING STEPS ====================================================== */ body.mdni-account-neon .mdni-acct-step { color:#f2faff !important; font-weight:800 !important; background: linear-gradient( 180deg, #123b58 0%, #09263b 55%, #061b2b 100% ) !important; border: 1px solid rgba(71,219,255,.62) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -4px 8px rgba(0,0,0,.38), 0 6px 14px rgba(0,0,0,.20) !important; } body.mdni-account-neon .mdni-acct-step * { color:#f2faff !important; } /* Links inside pairing instructions */ body.mdni-account-neon .mdni-acct-step a { color:#5fe0ff !important; text-decoration:none !important; text-shadow: 0 0 7px rgba(61,218,255,.28); } /* Make step numbers cyan */ body.mdni-account-neon .mdni-acct-step { text-shadow: 0 1px 2px rgba(0,0,0,.85); } /* ====================================================== STATUS COLORS Keep positive states green ====================================================== */ body.mdni-account-neon #main-content [style*="#087a3d"], body.mdni-account-neon #main-content [style*="color:#087a3d"] { color:#42f29a !important; text-shadow: 0 0 7px rgba(66,242,154,.20) !important; } /* ====================================================== DIVIDERS ====================================================== */ body.mdni-account-neon #main-content hr { border:0 !important; height:1px; background: linear-gradient( 90deg, transparent, rgba(89,221,255,.50), transparent ) !important; } /* ====================================================== ACCOUNT DASHBOARD V3 READABILITY / CONTRAST FIX ====================================================== */ /* Main headings inside account panels */ body.mdni-account-neon #main-content h2, body.mdni-account-neon #main-content h3, body.mdni-account-neon #main-content h4 { color:#f5fbff !important; text-shadow: 0 1px 2px rgba(0,0,0,.90), 0 0 8px rgba(55,216,255,.12) !important; } /* Streaming Credentials heading */ body.mdni-account-neon #main-content h3 { color:#dff8ff !important; } /* General body text inside the large account panel */ body.mdni-account-neon .mdni-acct-surface, body.mdni-account-neon .mdni-acct-surface p, body.mdni-account-neon .mdni-acct-surface span { color:#c8dce8 !important; } /* Labels like Plan, Access through, Device limit */ body.mdni-account-neon .mdni-acct-surface strong { color:#f4fbff !important; } /* Credential values */ body.mdni-account-neon #main-content code { display:inline-block; padding:2px 5px; border-radius:4px; color:#72e6ff !important; background:#03131f !important; text-shadow: 0 0 6px rgba(70,220,255,.24); font-weight:600; } /* OBS URL / long credential lines */ body.mdni-account-neon #main-content code, body.mdni-account-neon #main-content pre { overflow-wrap:anywhere; word-break:break-word; } /* ====================================================== PAIRING STEPS ====================================================== */ body.mdni-account-neon .mdni-acct-step { color:#f2faff !important; font-weight:800 !important; background: linear-gradient( 180deg, #123b58 0%, #09263b 55%, #061b2b 100% ) !important; border: 1px solid rgba(71,219,255,.62) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -4px 8px rgba(0,0,0,.38), 0 6px 14px rgba(0,0,0,.20) !important; } body.mdni-account-neon .mdni-acct-step * { color:#f2faff !important; } /* Links inside pairing instructions */ body.mdni-account-neon .mdni-acct-step a { color:#5fe0ff !important; text-decoration:none !important; text-shadow: 0 0 7px rgba(61,218,255,.28); } /* Make step numbers cyan */ body.mdni-account-neon .mdni-acct-step { text-shadow: 0 1px 2px rgba(0,0,0,.85); } /* ====================================================== STATUS COLORS Keep positive states green ====================================================== */ body.mdni-account-neon #main-content [style*="#087a3d"], body.mdni-account-neon #main-content [style*="color:#087a3d"] { color:#42f29a !important; text-shadow: 0 0 7px rgba(66,242,154,.20) !important; } /* ====================================================== DIVIDERS ====================================================== */ body.mdni-account-neon #main-content hr { border:0 !important; height:1px; background: linear-gradient( 90deg, transparent, rgba(89,221,255,.50), transparent ) !important; } /* ====================================================== ACCOUNT DASHBOARD V4 HEADER + STATUS FINISH ====================================================== */ /* Remove old WordPress/Divi page title behind navigation */ body.page-id-35 #main-content .et_post_meta_wrapper, body.page-id-35 #main-content article > .entry-title, body.page-id-35 #main-content h1.entry-title { display:none !important; } /* Prevent any oversized legacy title from leaking upward */ body.page-id-35 #main-content { position:relative !important; z-index:1; } body.page-id-35 #main-header { position:relative; z-index:99999 !important; } /* ====================================================== ACTIVE STATUS BADGE ====================================================== */ body.mdni-account-neon .mdni-acct-active-badge { display:inline-flex !important; align-items:center; justify-content:center; min-width:92px; padding: 10px 18px !important; border-radius: 999px !important; border: 1px solid #3af09a !important; color: #8dffc2 !important; background: linear-gradient( 180deg, #126e4b 0%, #08452f 52%, #052d20 100% ) !important; font-weight: 950 !important; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 7px rgba(64,245,159,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 8px rgba(0,0,0,.38), 0 0 14px rgba(53,238,151,.20) !important; } /* Slightly brighter account panel title */ body.mdni-account-neon .mdni-acct-surface > h1, body.mdni-account-neon .mdni-acct-surface > h2, body.mdni-account-neon .mdni-acct-surface > h3 { color:#f5fbff !important; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 10px rgba(54,214,255,.12) !important; } /* ====================================================== ACCOUNT DASHBOARD V5 SECURITY + BILLING FULL-WIDTH MODULES ====================================================== */ /* Make the row occupy the full dashboard width */ body.mdni-account-neon .mdni-acct-two-col { display:grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap:22px !important; width:100% !important; max-width:950px !important; margin: 22px auto 34px !important; padding:0 !important; box-sizing:border-box !important; } /* Override every old inline width / max-width */ body.mdni-account-neon .mdni-acct-two-col > .mdni-acct-security, body.mdni-account-neon .mdni-acct-two-col > .mdni-acct-billing { display:block !important; width:100% !important; max-width:none !important; min-width:0 !important; min-height:250px !important; margin:0 !important; padding:28px 30px !important; box-sizing:border-box !important; } /* Larger card headings */ body.mdni-account-neon .mdni-acct-security h3, body.mdni-account-neon .mdni-acct-billing h3 { margin: 0 0 20px !important; color:#f4fbff !important; font-size:1.55rem !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:-.02em; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 12px rgba(58,215,255,.12) !important; } /* Body copy */ body.mdni-account-neon .mdni-acct-security p, body.mdni-account-neon .mdni-acct-billing p { margin: 0 0 17px !important; color:#bfd3df !important; font-size:1rem !important; line-height:1.55 !important; } body.mdni-account-neon .mdni-acct-security p:last-child, body.mdni-account-neon .mdni-acct-billing p:last-child { margin-bottom:0 !important; } /* Green successful values */ body.mdni-account-neon .mdni-acct-security span[style*="#087a3d"], body.mdni-account-neon .mdni-acct-security [style*="color:#087a3d"], body.mdni-account-neon .mdni-acct-billing [style*="color:#087a3d"] { color:#42f29a !important; font-weight:900 !important; text-shadow: 0 0 8px rgba(66,242,154,.20) !important; } /* Give security a subtle green hardware accent */ body.mdni-account-neon .mdni-acct-security { border-color: rgba(46,229,142,.58) !important; background: radial-gradient( circle at 92% 8%, rgba(47,232,144,.10), transparent 31% ), linear-gradient( 145deg, #0d3146 0%, #061d2c 58%, #041620 100% ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -5px 11px rgba(0,0,0,.42), 0 16px 32px rgba(0,0,0,.30), 0 0 20px rgba(42,229,142,.07) !important; } /* Billing remains cyan */ body.mdni-account-neon .mdni-acct-billing { border-color: rgba(62,214,255,.64) !important; background: radial-gradient( circle at 92% 8%, rgba(54,215,255,.12), transparent 31% ), linear-gradient( 145deg, #0e354e 0%, #071f31 58%, #041620 100% ) !important; } /* ====================================================== TOP ACCOUNT BAR ====================================================== */ body.mdni-account-neon .mdni-acct-account { width:100% !important; max-width:950px !important; box-sizing:border-box !important; margin: 18px auto 0 !important; } body.mdni-account-neon .mdni-acct-account h1, body.mdni-account-neon .mdni-acct-account h2, body.mdni-account-neon .mdni-acct-account h3 { color:#f5fbff !important; } /* Fix dim email underneath MyDogNI Account */ body.mdni-account-neon .mdni-acct-account p, body.mdni-account-neon .mdni-acct-account span { color:#b9d2e0 !important; opacity:1 !important; } /* ====================================================== RESPONSIVE ====================================================== */ @media(max-width:800px) { body.mdni-account-neon .mdni-acct-two-col { grid-template-columns: 1fr !important; } } /* ====================================================== ACCOUNT DASHBOARD V6 FORCE SECURITY + BILLING TO FULL DASHBOARD WIDTH ====================================================== */ body.mdni-account-neon .mdni-acct-two-col { width:950px !important; max-width:calc(100vw - 60px) !important; display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; column-gap:24px !important; margin: 24px auto 38px !important; padding:0 !important; box-sizing:border-box !important; } body.mdni-account-neon .mdni-acct-two-col > .mdni-acct-security, body.mdni-account-neon .mdni-acct-two-col > .mdni-acct-billing { width:100% !important; max-width:none !important; min-width:0 !important; height:auto !important; min-height:245px !important; margin:0 !important; padding: 30px 34px !important; box-sizing:border-box !important; } /* Keep the top account bar aligned to exactly the same width */ body.mdni-account-neon .mdni-acct-account { width:950px !important; max-width:calc(100vw - 60px) !important; margin-left:auto !important; margin-right:auto !important; } /* Make the email easier to read */ body.mdni-account-neon .mdni-acct-account p, body.mdni-account-neon .mdni-acct-account span { color:#9fc6d9 !important; opacity:1 !important; } /* Give both cards a more substantial dashboard appearance */ body.mdni-account-neon .mdni-acct-security, body.mdni-account-neon .mdni-acct-billing { border-radius:18px !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -6px 13px rgba(0,0,0,.42), 0 18px 35px rgba(0,0,0,.28), 0 0 20px rgba(54,213,255,.06) !important; } /* Mobile */ @media(max-width:800px) { body.mdni-account-neon .mdni-acct-two-col { width:100% !important; grid-template-columns: 1fr !important; } body.mdni-account-neon .mdni-acct-account { width:100% !important; } } /* ====================================================== ACCOUNT DASHBOARD V7 FIX ORIGINAL 2-COLUMN GRID CHOKE POINT ====================================================== */ /* The original account layout is a 2-column grid. Security + Billing were trapped inside one 441px cell. This cell must span BOTH columns. */ body.mdni-account-neon .mydogni-account-grid > .mdni-acct-full-grid-cell { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } /* Now the two-card row can use the full grid width */ body.mdni-account-neon .mdni-acct-full-grid-cell .mdni-acct-two-col { width: 100% !important; max-width: none !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 24px !important; margin: 24px 0 38px !important; } /* Cards fill each half */ body.mdni-account-neon .mdni-acct-full-grid-cell .mdni-acct-security, body.mdni-account-neon .mdni-acct-full-grid-cell .mdni-acct-billing { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* Mobile */ @media(max-width:800px) { body.mdni-account-neon .mdni-acct-full-grid-cell .mdni-acct-two-col { grid-template-columns: 1fr !important; } } /* ====================================================== ACCOUNT DASHBOARD V8 LOWER PAGE POLISH ====================================================== */ /* ------------------------------------------------------ ACCOUNT BAR EMAIL ------------------------------------------------------ */ body.mdni-account-neon .mdni-acct-account > div:first-child, body.mdni-account-neon .mdni-acct-account > div:first-child p, body.mdni-account-neon .mdni-acct-account > div:first-child span { color:#9ec9dc !important; opacity:1 !important; } body.mdni-account-neon .mdni-acct-account > div:first-child strong { color:#f4fbff !important; } /* ------------------------------------------------------ SECURITY + BILLING HARDWARE BADGES ------------------------------------------------------ */ body.mdni-account-neon .mdni-acct-security, body.mdni-account-neon .mdni-acct-billing { position:relative; overflow:hidden; } body.mdni-account-neon .mdni-acct-security::after { content:"✓"; position:absolute; top:24px; right:26px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#55ffad; border:1px solid rgba(60,238,156,.62); background: linear-gradient( 180deg, #126144, #073421 ); font-size:25px; font-weight:950; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 18px rgba(54,234,150,.18); } body.mdni-account-neon .mdni-acct-billing::after { content:"∞"; position:absolute; top:24px; right:26px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#69e5ff; border:1px solid rgba(70,216,255,.66); background: linear-gradient( 180deg, #14577d, #072d48 ); font-size:29px; font-weight:950; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 18px rgba(53,211,255,.18); } /* ------------------------------------------------------ LARGE STREAMING ACCOUNT PANEL ------------------------------------------------------ */ body.mdni-account-neon .mdni-acct-surface { border-color: rgba(65,215,255,.55) !important; border-radius: 20px !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -6px 15px rgba(0,0,0,.42), 0 20px 40px rgba(0,0,0,.30), 0 0 25px rgba(48,207,255,.06) !important; } /* ------------------------------------------------------ ADD / PAIR STREAMBOX PANEL ------------------------------------------------------ */ body.mdni-account-neon .mdni-acct-step { min-height:62px; display:flex !important; align-items:center; padding: 14px 18px !important; border: 1px solid rgba(65,214,255,.55) !important; background: radial-gradient( circle at 5% 50%, rgba(55,213,255,.10), transparent 18% ), linear-gradient( 180deg, #103852, #071f31 ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -4px 9px rgba(0,0,0,.40), 0 6px 14px rgba(0,0,0,.18) !important; } body.mdni-account-neon .mdni-acct-step:hover { border-color: #63e2ff !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -4px 9px rgba(0,0,0,.40), 0 8px 18px rgba(0,0,0,.22), 0 0 18px rgba(55,214,255,.12) !important; } /* ------------------------------------------------------ STREAMBOX SETUP & SUPPORT ------------------------------------------------------ */ body.mdni-account-neon .swsp-device-card { position:relative; padding: 30px !important; border: 1px solid rgba(61,215,255,.65) !important; background: radial-gradient( circle at 88% 10%, rgba(54,213,255,.13), transparent 30% ), linear-gradient( 145deg, #0d324a, #051b2a ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -6px 14px rgba(0,0,0,.42), 0 18px 36px rgba(0,0,0,.28) !important; } body.mdni-account-neon .swsp-device-card::before { content:"▣ StreamBox Setup & Support" !important; color:#f3fbff !important; font-size: 1.5rem !important; font-weight: 950 !important; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 10px rgba(55,216,255,.15); } body.mdni-account-neon .swsp-device-card > details { margin-top: 18px !important; padding: 15px 17px !important; border: 1px solid rgba(62,205,246,.38) !important; border-radius: 11px !important; background: linear-gradient( 180deg, #0b2c43, #061c2c ) !important; } body.mdni-account-neon .swsp-device-card > details:hover { border-color: rgba(78,220,255,.68) !important; } /* Diagnostics box */ body.mdni-account-neon .swsp-device-card > div:has( form input[name="action"][value="swsp_device_diagnostics"] ) { margin-top: 16px !important; padding: 18px !important; border: 1px solid rgba(59,195,237,.38) !important; background: linear-gradient( 180deg, rgba(7,31,47,.86), rgba(3,18,28,.92) ) !important; } /* ------------------------------------------------------ YOUTUBE + TWITCH PLATFORM MODULES ------------------------------------------------------ */ body.mdni-account-neon .mdni-platform-row { align-items:stretch; } body.mdni-account-neon .mdni-platform-row .mydogni-youtube-card, body.mdni-account-neon .mdni-platform-row .mydogni-twitch-card { position:relative; overflow:hidden; min-height: 255px; padding: 30px !important; border-radius: 18px !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -6px 14px rgba(0,0,0,.40), 0 18px 34px rgba(0,0,0,.29) !important; } /* YouTube play emblem */ body.mdni-account-neon .mydogni-youtube-card::after { content:"▶"; position:absolute; right:28px; bottom:28px; width:72px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:15px; color:#fff; background: linear-gradient( 180deg, #ff4852, #a80d17 ); border: 1px solid #ff737a; font-size:25px; opacity:.88; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 20px rgba(255,52,61,.20); } /* Twitch emblem */ body.mdni-account-neon .mydogni-twitch-card::after { content:"TW"; position:absolute; right:28px; bottom:28px; width:66px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:15px; color:#fff; background: linear-gradient( 180deg, #8b55e9, #472181 ); border: 1px solid #ab78ff; font-size:18px; font-weight:950; letter-spacing:.04em; opacity:.88; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 20px rgba(153,88,255,.20); } /* Platform title area */ body.mdni-account-neon .mydogni-youtube-head, body.mdni-account-neon .mydogni-twitch-head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(104,190,226,.18); } /* Connected pills */ body.mdni-account-neon .mydogni-youtube-status.is-connected, body.mdni-account-neon .mydogni-twitch-status.is-connected { padding: 7px 12px !important; border-radius: 999px !important; font-size: .72rem !important; font-weight: 950 !important; letter-spacing: .05em; } /* ------------------------------------------------------ RESPONSIVE ------------------------------------------------------ */ @media(max-width:800px) { body.mdni-account-neon .mdni-acct-security::after, body.mdni-account-neon .mdni-acct-billing::after { width:42px; height:42px; top:18px; right:18px; } body.mdni-account-neon .mydogni-youtube-card::after, body.mdni-account-neon .mydogni-twitch-card::after { opacity:.35; } } /* ====================================================== ACCOUNT DASHBOARD V9 YOUTUBE / TWITCH PLATFORM POLISH ====================================================== */ /* ---------------- YOUTUBE BUTTON ---------------- */ body.mdni-account-neon .mydogni-youtube-card button { border-color:#ff6068 !important; background: linear-gradient( 180deg, #d83a43 0%, #a51d27 46%, #6d1018 52%, #410a10 100% ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -4px 8px rgba(0,0,0,.42), 0 5px 0 rgba(40,0,4,.85), 0 10px 18px rgba(0,0,0,.30), 0 0 14px rgba(255,62,72,.18) !important; } /* ---------------- TWITCH BUTTON ---------------- */ body.mdni-account-neon .mydogni-twitch-card button { border-color:#a875ff !important; background: linear-gradient( 180deg, #8753d7 0%, #6733ad 46%, #422071 52%, #281344 100% ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.20), inset 0 -4px 8px rgba(0,0,0,.42), 0 5px 0 rgba(20,8,37,.88), 0 10px 18px rgba(0,0,0,.30), 0 0 14px rgba(150,89,255,.20) !important; } /* ---------------- DISCONNECTED STATUS ---------------- */ body.mdni-account-neon .mydogni-twitch-status:not(.is-connected), body.mdni-account-neon .mydogni-youtube-status:not(.is-connected) { color:#ffd999 !important; border: 1px solid rgba(255,190,85,.55) !important; background: linear-gradient( 180deg, rgba(105,73,28,.55), rgba(47,34,18,.75) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 12px rgba(255,183,67,.10) !important; } /* ---------------- PLATFORM EMBLEMS ---------------- */ body.mdni-account-neon .mydogni-youtube-card::after { width:68px; height:48px; right:28px; bottom:28px; border-radius:14px; box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -5px 9px rgba(0,0,0,.35), 0 7px 13px rgba(0,0,0,.30), 0 0 16px rgba(255,55,65,.17) !important; } body.mdni-account-neon .mydogni-twitch-card::after { width:62px; height:54px; right:28px; bottom:28px; border-radius:14px; box-shadow: inset 0 2px 0 rgba(255,255,255,.20), inset 0 -5px 9px rgba(0,0,0,.36), 0 7px 13px rgba(0,0,0,.30), 0 0 16px rgba(149,86,255,.18) !important; } /* ---------------- CARD HOVER ---------------- */ body.mdni-account-neon .mydogni-youtube-card, body.mdni-account-neon .mydogni-twitch-card { transition: transform .18s ease, box-shadow .18s ease; } body.mdni-account-neon .mydogni-youtube-card:hover, body.mdni-account-neon .mydogni-twitch-card:hover { transform:translateY(-3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.10), inset 0 -6px 14px rgba(0,0,0,.40), 0 22px 40px rgba(0,0,0,.34), 0 0 24px rgba(51,208,255,.09) !important; } /* ====================================================== ACCOUNT DASHBOARD V10 FINAL YOUTUBE / TWITCH PLATFORM COLORS ====================================================== */ /* ====================================================== YOUTUBE BUTTONS ====================================================== */ body.page-id-35.mdni-account-neon #main-content .mydogni-youtube-card button.mydogni-youtube-button, body.page-id-35.mdni-account-neon #main-content .mydogni-youtube-card button.mydogni-youtube-button.secondary { color:#fff !important; border: 1px solid #ff626b !important; background: linear-gradient( 180deg, #f0444e 0%, #c9232d 42%, #8b151d 50%, #4d0b11 100% ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.30), inset 0 -5px 9px rgba(0,0,0,.44), 0 5px 0 #33070b, 0 10px 18px rgba(0,0,0,.32), 0 0 18px rgba(255,55,65,.22) !important; } body.page-id-35.mdni-account-neon #main-content .mydogni-youtube-card button.mydogni-youtube-button:hover { border-color:#ff8a91 !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.34), inset 0 -5px 9px rgba(0,0,0,.40), 0 7px 0 #33070b, 0 13px 22px rgba(0,0,0,.35), 0 0 25px rgba(255,55,65,.34) !important; } /* ====================================================== TWITCH BUTTONS ====================================================== */ body.page-id-35.mdni-account-neon #main-content .mydogni-twitch-card button.mydogni-twitch-button, body.page-id-35.mdni-account-neon #main-content .mydogni-twitch-card button.mydogni-twitch-button.secondary { color:#fff !important; border: 1px solid #ad78ff !important; background: linear-gradient( 180deg, #925be0 0%, #6d39b7 42%, #4b247f 50%, #291445 100% ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -5px 9px rgba(0,0,0,.44), 0 5px 0 #1c0c31, 0 10px 18px rgba(0,0,0,.32), 0 0 18px rgba(155,91,255,.24) !important; } body.page-id-35.mdni-account-neon #main-content .mydogni-twitch-card button.mydogni-twitch-button:hover { border-color:#c49bff !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.30), inset 0 -5px 9px rgba(0,0,0,.40), 0 7px 0 #1c0c31, 0 13px 22px rgba(0,0,0,.35), 0 0 25px rgba(155,91,255,.35) !important; } /* ====================================================== YOUTUBE SUCCESS NOTICE ====================================================== */ body.page-id-35.mdni-account-neon #main-content .mydogni-youtube-notice { color:#7effb7 !important; border: 1px solid rgba(51,235,143,.55) !important; border-radius: 11px !important; background: linear-gradient( 180deg, rgba(15,91,60,.55), rgba(6,47,32,.68) ) !important; text-shadow: 0 0 7px rgba(61,239,151,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 14px rgba(48,228,140,.08) !important; } /* ====================================================== TWITCH SUCCESS NOTICE ====================================================== */ body.page-id-35.mdni-account-neon #main-content .mydogni-twitch-notice { color:#d5baff !important; border: 1px solid rgba(166,104,255,.56) !important; border-radius: 11px !important; background: linear-gradient( 180deg, rgba(81,42,139,.58), rgba(41,21,76,.72) ) !important; text-shadow: 0 0 7px rgba(169,105,255,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 14px rgba(147,83,255,.10) !important; } /* ====================================================== WARNING / ERROR STATES ====================================================== */ body.page-id-35.mdni-account-neon #main-content .mydogni-twitch-warning { color:#ffdb91 !important; border: 1px solid rgba(255,191,74,.52) !important; background: rgba(99,67,19,.38) !important; } body.page-id-35.mdni-account-neon #main-content .mydogni-twitch-error { color:#ff9ca5 !important; border: 1px solid rgba(255,82,96,.48) !important; background: rgba(103,20,30,.38) !important; } /* ====================================================== STREAMBOX PAIRING STEP BADGES ====================================================== */ body.mdni-account-neon .mdni-acct-step { display:flex !important; align-items:center !important; gap:15px !important; min-height:82px !important; padding: 14px 18px !important; text-align:left !important; } body.mdni-account-neon .mdni-acct-step-num { display:flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; flex:0 0 40px; border-radius:50%; color:#04121c !important; background: linear-gradient( 180deg, #8defff 0%, #37d8ff 42%, #1598ce 100% ); border: 1px solid #a8f3ff; font-size: 1.15rem; font-weight: 950; line-height:1; text-shadow:none !important; box-shadow: inset 0 2px 1px rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,71,110,.35), 0 4px 0 #04344d, 0 8px 14px rgba(0,0,0,.28), 0 0 15px rgba(55,216,255,.25); } body.mdni-account-neon .mdni-acct-step-copy { display:block; min-width:0; color:#f3fbff !important; font-size: 1rem; font-weight: 850; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.85); } body.mdni-account-neon .mdni-acct-step-copy * { color:inherit !important; } @media(max-width:650px) { body.mdni-account-neon .mdni-acct-step-num { width:34px; height:34px; min-width:34px; flex-basis:34px; } } /* ====================================================== PAIRING STEPS — FINAL GRID ====================================================== */ body.mdni-account-neon .mdni-acct-steps-grid { display:grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:14px !important; width:100% !important; padding:18px !important; box-sizing:border-box !important; align-items:stretch !important; } /* Individual step module */ body.mdni-account-neon .mdni-acct-steps-grid > .mdni-acct-step { display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:14px !important; min-height:132px !important; margin:0 !important; padding:20px !important; box-sizing:border-box !important; border-radius:15px !important; } /* Number badge */ body.mdni-account-neon .mdni-acct-steps-grid .mdni-acct-step-num { width:38px !important; height:38px !important; min-width:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; color:#032033 !important; background: linear-gradient( 180deg, #a5f4ff 0%, #42dcff 40%, #138fc5 100% ) !important; border: 1px solid #baf7ff !important; font-size:1.1rem !important; font-weight:950 !important; line-height:1 !important; text-shadow:none !important; box-shadow: inset 0 2px 1px rgba(255,255,255,.60), inset 0 -4px 7px rgba(0,61,95,.34), 0 4px 0 #04364f, 0 8px 14px rgba(0,0,0,.28), 0 0 14px rgba(55,216,255,.26) !important; } /* Instruction */ body.mdni-account-neon .mdni-acct-steps-grid .mdni-acct-step-copy { color:#f4fbff !important; font-size:.98rem !important; font-weight:850 !important; line-height:1.38 !important; text-shadow: 0 1px 2px rgba(0,0,0,.90) !important; } /* Tablet */ @media(max-width:950px) { body.mdni-account-neon .mdni-acct-steps-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } /* Phone */ @media(max-width:560px) { body.mdni-account-neon .mdni-acct-steps-grid { grid-template-columns: 1fr !important; } body.mdni-account-neon .mdni-acct-steps-grid > .mdni-acct-step { min-height:105px !important; } } /* ========================= STREAMBOX PAIRING FLOW ========================= */ .mdni-pairing-wrap{ margin-top: 28px; padding: 28px 28px 32px; border-radius: 28px; background: linear-gradient(180deg, rgba(18,53,78,.92), rgba(8,28,45,.95)); border: 1px solid rgba(74,208,255,.55); box-shadow: 0 0 0 1px rgba(0,180,255,.12) inset, 0 0 30px rgba(0,160,255,.12), 0 20px 50px rgba(0,0,0,.28); } .mdni-pairing-wrap h3{ margin: 0 0 12px; color: #eefaff; font-size: 48px; line-height: 1.05; font-weight: 900; text-shadow: 0 4px 10px rgba(0,0,0,.35); } .mdni-pairing-intro{ margin: 0 0 26px; color: rgba(230,245,255,.82); font-size: 16px; line-height: 1.6; } .mdni-pairing-flow{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px; border-radius: 24px; background: linear-gradient(180deg, rgba(11,42,64,.8), rgba(6,27,44,.9)); border: 1px solid rgba(74,208,255,.4); box-shadow: 0 0 0 1px rgba(0,180,255,.1) inset, 0 0 18px rgba(0,180,255,.08); } .mdni-pairing-start{ padding: 12px 18px; border-radius: 999px; font-weight: 900; letter-spacing: .12em; font-size: 13px; color: #84e8ff; background: linear-gradient(180deg, rgba(24,93,138,.95), rgba(5,45,73,.95)); border: 1px solid rgba(86,224,255,.6); box-shadow: 0 0 10px rgba(0,190,255,.22), 0 0 0 1px rgba(255,255,255,.08) inset; } .mdni-pairing-step{ position: relative; flex: 1 1 220px; min-height: 150px; padding: 28px 22px 22px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, rgba(15,56,84,.96), rgba(6,29,48,.98)); border: 1px solid rgba(74,208,255,.48); box-shadow: 0 0 18px rgba(0,170,255,.12), 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset; } .mdni-pairing-step::before{ content: attr(data-step); position: absolute; top: 10px; left: 16px; font-size: 72px; line-height: 1; font-weight: 900; color: rgba(66,214,255,.22); text-shadow: 0 0 16px rgba(0,180,255,.18); pointer-events: none; } .mdni-pairing-label{ position: relative; z-index: 1; display: block; margin-top: 38px; color: #f4fbff; font-size: 20px; line-height: 1.35; font-weight: 800; text-shadow: 0 3px 8px rgba(0,0,0,.35); } .mdni-pairing-arrow{ flex: 0 0 auto; font-size: 34px; font-weight: 900; color: #57dfff; text-shadow: 0 0 10px rgba(42,214,255,.55), 0 0 24px rgba(42,214,255,.25); transform: translateY(-2px); } /* mobile */ @media (max-width: 1100px){ .mdni-pairing-flow{ flex-direction: column; align-items: stretch; } .mdni-pairing-arrow{ align-self: center; transform: rotate(90deg); } .mdni-pairing-step{ min-height: 120px; } .mdni-pairing-step::before{ font-size: 58px; } .mdni-pairing-label{ margin-top: 28px; font-size: 18px; } } /* ====================================================== FINAL STREAMBOX PAIRING FLOW ====================================================== */ body.mdni-account-neon .mdni-final-step-flow { display:grid !important; grid-template-columns: 76px repeat(4, minmax(0,1fr)) !important; gap:24px !important; align-items:stretch !important; padding: 22px !important; overflow:visible !important; } /* START */ body.mdni-account-neon .mdni-flow-start { display:flex; align-items:center; justify-content:center; min-width:0; position:relative; } body.mdni-account-neon .mdni-flow-start span { display:flex; align-items:center; justify-content:center; min-height:42px; padding: 8px 14px; border-radius: 999px; color:#8eeaff; border: 1px solid #4edcff; background: linear-gradient( 180deg, #195b82, #073652 ); font-size:.72rem; font-weight:950; letter-spacing:.11em; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 16px rgba(54,216,255,.20); } /* arrow after START */ body.mdni-account-neon .mdni-flow-start::after { content:"➜"; position:absolute; right:-23px; top:50%; transform: translateY(-50%); color:#5de3ff; font-size:26px; font-weight:950; text-shadow: 0 0 8px rgba(62,220,255,.70), 0 0 18px rgba(62,220,255,.32); z-index:20; } /* ====================================================== STEP CARDS ====================================================== */ body.mdni-account-neon .mdni-final-step-flow > .mdni-acct-step { position:relative !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; min-height:145px !important; margin:0 !important; padding: 22px 18px !important; overflow:visible !important; border-radius: 17px !important; border: 1px solid rgba(66,214,255,.62) !important; background: radial-gradient( circle at 50% 0%, rgba(62,216,255,.13), transparent 42% ), linear-gradient( 180deg, #103a57, #061d2e ) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.10), inset 0 -5px 10px rgba(0,0,0,.43), 0 10px 22px rgba(0,0,0,.24), 0 0 16px rgba(48,208,255,.08) !important; } /* ====================================================== LARGE CONTRAST NUMBER BEHIND TEXT ====================================================== */ body.mdni-account-neon .mdni-final-step-flow > .mdni-acct-step::before { content: attr(data-step) !important; position:absolute !important; top:50% !important; left:50% !important; transform: translate(-50%,-52%) !important; display:block !important; width:auto !important; height:auto !important; color: rgba(255,177,70,.20) !important; background: none !important; border:0 !important; font-size: clamp(5rem,6vw,7rem) !important; font-weight: 950 !important; line-height: .8 !important; text-shadow: 0 0 15px rgba(255,168,54,.12) !important; pointer-events:none; z-index:1 !important; } /* TEXT ABOVE NUMBER */ body.mdni-account-neon .mdni-final-step-flow .mdni-acct-step-copy { position:relative; z-index:5; display:block !important; width:100%; margin:0 !important; color:#f7fcff !important; font-size:.95rem !important; font-weight:900 !important; line-height:1.38 !important; text-align:left; text-shadow: 0 2px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.65) !important; } /* ====================================================== ARROWS BETWEEN STEPS ====================================================== */ body.mdni-account-neon .mdni-final-step-flow > .mdni-acct-step:not(:last-child)::after { content:"➜"; position:absolute; right:-26px; top:50%; transform: translateY(-50%); color:#5de3ff; font-size:27px; font-weight:950; text-shadow: 0 0 8px rgba(62,220,255,.75), 0 0 18px rgba(62,220,255,.34); z-index:30; } /* Hide any leftover old number badges */ body.mdni-account-neon .mdni-final-step-flow .mdni-acct-step-num { display:none !important; } /* ====================================================== TABLET / MOBILE ====================================================== */ @media(max-width:950px) { body.mdni-account-neon .mdni-final-step-flow { grid-template-columns: 1fr !important; gap:14px !important; } body.mdni-account-neon .mdni-flow-start { justify-content:flex-start; } body.mdni-account-neon .mdni-flow-start::after, body.mdni-account-neon .mdni-final-step-flow > .mdni-acct-step:not(:last-child)::after { content:"↓"; position:absolute; left:50%; right:auto; top:auto; bottom:-22px; transform: translateX(-50%); } } /* ====================================================== PAIRING FLOW POLISH Remove START white box + brighten background numbers ====================================================== */ /* Remove the strange white housing around START */ body.mdni-account-neon .mdni-final-step-flow > .mdni-flow-start { background:transparent !important; background-image:none !important; border:none !important; outline:none !important; box-shadow:none !important; padding:0 !important; min-height:0 !important; border-radius:0 !important; } /* Keep only the actual START pill */ body.mdni-account-neon .mdni-final-step-flow > .mdni-flow-start > span { background: linear-gradient( 180deg, #13759b 0%, #075170 100% ) !important; color:#dffbff !important; border: 1px solid #61e5ff !important; box-shadow: inset 0 2px 1px rgba(255,255,255,.22), inset 0 -4px 7px rgba(0,30,55,.38), 0 4px 0 #032d43, 0 7px 14px rgba(0,0,0,.28), 0 0 15px rgba(69,220,255,.30) !important; } /* Bright gold / amber step numbers */ body.mdni-account-neon .mdni-final-step-flow > .mdni-acct-step::before { color: rgba(255,190,72,.55) !important; text-shadow: 0 0 8px rgba(255,184,55,.28), 0 0 22px rgba(255,151,34,.18) !important; opacity:1 !important; } /* Make the white text stand clearly above the number */ body.mdni-account-neon .mdni-final-step-flow .mdni-acct-step-copy { color:#ffffff !important; text-shadow: 0 2px 3px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,.90) !important; position:relative !important; z-index:10 !important; } /* MYDOGNI MOBILE PORTAL FIX 20260918 */ @media(max-width:600px){ body.mdni-account-neon .mydogni-youtube-card::after, body.mdni-account-neon .mydogni-twitch-card::after{ display:none !important; } } .swsp-credentials-disclosure{ margin-top:12px; } .swsp-credentials-disclosure summary{ cursor:pointer; font-weight:800; color:#66dcff; padding:10px 12px; border:1px solid rgba(73,195,236,.35); border-radius:10px; background:rgba(4,38,63,.45); } .swsp-credentials-disclosure[open] summary{ margin-bottom:14px; } .swsp-credentials-disclosure code{ overflow-wrap:anywhere; word-break:break-word; } /* MYDOGNI MOBILE PAIRING PANEL FIX 20260918 */ @media (max-width:600px){ body.page-id-35.mdni-account-neon .swsp-pairing-header{ box-sizing:border-box !important; width:100% !important; margin:0 0 18px !important; padding:22px 18px !important; border:1px solid rgba(74,208,255,.48) !important; border-radius:20px !important; color:#eaf8ff !important; background: linear-gradient( 180deg, rgba(15,56,84,.98), rgba(6,29,48,.99) ) !important; box-shadow: 0 0 18px rgba(0,170,255,.12), 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06) !important; } body.page-id-35.mdni-account-neon .swsp-pairing-header h3{ margin:0 0 10px !important; color:#f4fbff !important; font-size:27px !important; line-height:1.15 !important; text-shadow:0 3px 8px rgba(0,0,0,.38) !important; } body.page-id-35.mdni-account-neon .swsp-pairing-header > p{ margin:0 0 18px !important; color:#bed6e4 !important; font-size:16px !important; line-height:1.55 !important; } body.page-id-35.mdni-account-neon .swsp-pairing-steps{ background:transparent !important; } } /* MYDOGNI MOBILE WHITESPACE FIX 20260918 */ @media (max-width:800px) { /* * JavaScript moves cards into combined rows. Remove the original * wrapper cells when they become empty so they cannot create blank * grid rows on mobile. */ body.page-id-35.mdni-account-neon .mydogni-account-grid > .mydogni-account-grid-cell:empty { display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; } body.page-id-35.mdni-account-neon .mydogni-account-grid { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:16px !important; height:auto !important; min-height:0 !important; margin-bottom:20px !important; } body.page-id-35.mdni-account-neon .mydogni-account-grid > .mydogni-account-grid-cell, body.page-id-35.mdni-account-neon .mydogni-account-grid > .mdni-acct-full-grid-cell { width:100% !important; height:auto !important; min-height:0 !important; align-self:auto !important; } body.page-id-35.mdni-account-neon .mdni-acct-two-col, body.page-id-35.mdni-account-neon .mdni-platform-row { display:flex !important; flex-direction:column !important; align-items:stretch !important; width:100% !important; height:auto !important; min-height:0 !important; gap:16px !important; } body.page-id-35.mdni-account-neon .mdni-acct-full-grid-cell .mdni-acct-two-col { margin:16px 0 22px !important; } body.page-id-35.mdni-account-neon .mdni-platform-row { margin:20px auto 24px !important; } body.page-id-35.mdni-account-neon .mdni-platform-row .mydogni-youtube-card, body.page-id-35.mdni-account-neon .mdni-platform-row .mydogni-twitch-card { height:auto !important; min-height:0 !important; margin:0 !important; } } /* MYDOGNI DIVI MOBILE SPACING FIX 20260918 */ @media (max-width:800px) { body.page-id-35.mdni-account-neon #main-content .et_pb_section_0 { display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; } body.page-id-35.mdni-account-neon #main-content .et_pb_section_1 { height:auto !important; min-height:0 !important; margin:0 !important; padding:20px 0 0 !important; } body.page-id-35.mdni-account-neon #main-content .et_pb_section_1 > .et_pb_row_0 { height:auto !important; min-height:0 !important; margin:0 auto !important; padding:0 !important; } body.page-id-35.mdni-account-neon .mdni-platform-row { margin-bottom:0 !important; } }