/* ========================================================= Woospeak AI — Visual V3 final cohesive immersive skin CSS-only redesign. This file replaces the previous visual V2 layer. Goals: no patch stacking, readable language switchers, premium dark surfaces, stronger chat/card hierarchy, course pages fixed, dashboard rebuilt visually without changing HTML, JS or business logic. ========================================================= */ html, body{ background: radial-gradient(920px 540px at 14% -4%, rgba(37,99,235,.34), transparent 64%), radial-gradient(800px 560px at 84% 0%, rgba(124,58,237,.28), transparent 62%), radial-gradient(900px 620px at 50% 108%, rgba(14,165,233,.10), transparent 66%), linear-gradient(180deg,var(--ws-legacy-dark-950) 0%,var(--ws-legacy-dark-930) 46%,var(--ws-legacy-dark-980) 100%) !important; background-attachment:fixed !important; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 50% 0%, black 0%, transparent 74%); } #woospeak-ai-app{ /* V15 foundation: visual layer now consumes semantic Design System tokens. The --v3 aliases are kept for backward compatibility during migration. */ --v3-bg:var(--ws-color-bg-page); --v3-bg-2:var(--ws-color-bg-page-2); --v3-panel:var(--ws-color-surface); --v3-panel-strong:var(--ws-color-surface-strong); --v3-card:var(--ws-color-card); --v3-card-soft:var(--ws-color-card-soft); --v3-field:var(--ws-color-field); --v3-field-2:var(--ws-color-field-strong); --v3-border:var(--ws-color-border); --v3-border-strong:var(--ws-color-border-strong); --v3-text:var(--ws-color-text); --v3-text-2:var(--ws-color-text-soft); --v3-muted:var(--ws-color-muted); --v3-muted-2:var(--ws-color-muted-2); --v3-blue:var(--ws-color-primary); --v3-blue-2:var(--ws-color-primary-strong); --v3-cyan:var(--ws-color-cyan); --v3-violet:var(--ws-color-violet); --v3-purple:var(--ws-color-purple); --v3-green:var(--ws-color-success); --v3-yellow:var(--ws-color-warning); --v3-red:var(--ws-color-danger); --v3-glow-blue:var(--ws-glow-blue); --v3-glow-violet:var(--ws-glow-violet); --v3-shadow:var(--ws-shadow-lg); --v3-shadow-soft:var(--ws-shadow-md); color:var(--ws-color-text) !important; color-scheme:dark; font-family:var(--ws-font-sans) !important; } #woospeak-ai-app *, #woospeak-ai-app *::before, #woospeak-ai-app *::after{ box-sizing:border-box; } #woospeak-ai-app, #woospeak-ai-app p, #woospeak-ai-app span, #woospeak-ai-app div, #woospeak-ai-app label, #woospeak-ai-app small, #woospeak-ai-app strong, #woospeak-ai-app h1, #woospeak-ai-app h2, #woospeak-ai-app h3, #woospeak-ai-app h4, #woospeak-ai-app h5, #woospeak-ai-app h6{ color:inherit; } #woospeak-ai-app .woospeak-ai-shell{ gap:18px !important; } /* ========================================================= 1) Global dark stage and glass panels ========================================================= */ #woospeak-ai-app .woospeak-ai-panel, #woospeak-ai-app .woospeak-ai-layout, #woospeak-ai-app .woospeak-ai-courses-wrap, #woospeak-ai-app .woospeak-ai-dashboard-wrap, #woospeak-ai-app .woospeak-ai-dashboard-inner{ background:transparent !important; } #woospeak-ai-app .woospeak-ai-panel{ border-color:rgba(147,197,253,.10) !important; } #woospeak-ai-app .woospeak-ai-card, #woospeak-ai-app .woospeak-ai-card-inner, #woospeak-ai-app .woospeak-ai-courses-card, #woospeak-ai-app .woospeak-ai-courses-header, #woospeak-ai-app .woospeak-ai-course-form, #woospeak-ai-app .woospeak-ai-dashboard-placeholder, #woospeak-ai-app .woospeak-ai-dash-card, #woospeak-ai-app .ws-assessment-start, #woospeak-ai-app .ws-assessment-screen, #woospeak-ai-app .ws-assessment-result, #woospeak-ai-app .ws-step-shell, #woospeak-ai-app .ws-question-card, #woospeak-ai-app .ws-card{ background: radial-gradient(820px 270px at 8% 0%, rgba(59,130,246,.12), transparent 62%), linear-gradient(180deg,rgba(15,23,42,.86),rgba(8,13,28,.78)) !important; border:1px solid var(--v3-border) !important; box-shadow:var(--v3-shadow-soft), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter:blur(18px) saturate(1.16); -webkit-backdrop-filter:blur(18px) saturate(1.16); color:var(--v3-text) !important; } #woospeak-ai-app .woospeak-ai-card, #woospeak-ai-app .woospeak-ai-courses-card, #woospeak-ai-app .woospeak-ai-dash-card, #woospeak-ai-app .ws-assessment-start, #woospeak-ai-app .ws-assessment-screen, #woospeak-ai-app .ws-step-shell{ border-radius:28px !important; } /* ========================================================= 2) Header, avatar and language switchers ========================================================= */ #woospeak-ai-app .woospeak-ai-hero, #woospeak-ai-app .woospeak-ai-hero.ws-coach-hero{ background: radial-gradient(760px 330px at 13% 0%, rgba(59,130,246,.32), transparent 60%), radial-gradient(640px 300px at 82% 12%, rgba(124,58,237,.24), transparent 58%), linear-gradient(180deg,rgba(16,26,48,.80),rgba(10,15,32,.64)) !important; border:1px solid rgba(147,197,253,.20) !important; box-shadow:0 32px 96px rgba(0,0,0,.44), var(--v3-glow-violet), inset 0 1px 0 rgba(255,255,255,.10) !important; backdrop-filter:blur(22px) saturate(1.18); -webkit-backdrop-filter:blur(22px) saturate(1.18); } #woospeak-ai-app .ws-coach-name, #woospeak-ai-app .woospeak-ai-hero-title{ color:var(--ws-legacy-white) !important; text-shadow:0 0 28px rgba(96,165,250,.25) !important; } #woospeak-ai-app .ws-language-switcher-field > span, #woospeak-ai-app .woospeak-ai-hero-subtitle, #woospeak-ai-app .ws-coach-status{ color:rgba(226,232,240,.82) !important; opacity:1 !important; font-weight:800 !important; } /* Language switcher fixed: visible without opening. */ #woospeak-ai-app .ws-language-switcher{ gap:8px !important; } #woospeak-ai-app .ws-language-switcher-select, #woospeak-ai-app select.ws-language-switcher-select, #woospeak-ai-app #woospeak-ai-source-lang-select, #woospeak-ai-app #woospeak-ai-target-lang-select{ appearance:none !important; -webkit-appearance:none !important; min-width:150px !important; min-height:34px !important; padding:7px 38px 7px 14px !important; border-radius:999px !important; background: linear-gradient(180deg,rgba(31,44,71,.96),rgba(15,23,42,.96)) !important; border:1px solid rgba(147,197,253,.38) !important; color:var(--ws-legacy-white) !important; opacity:1 !important; font-weight:850 !important; text-shadow:none !important; box-shadow:0 0 0 1px rgba(255,255,255,.04),0 10px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important; background-image: linear-gradient(45deg, transparent 50%, var(--ws-legacy-blue-200) 50%), linear-gradient(135deg, var(--ws-legacy-blue-200) 50%, transparent 50%), linear-gradient(180deg,rgba(31,44,71,.96),rgba(15,23,42,.96)) !important; background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%, 0 0 !important; background-size:6px 6px,6px 6px,100% 100% !important; background-repeat:no-repeat !important; } #woospeak-ai-app .ws-language-switcher-select option, #woospeak-ai-app select option{ background:var(--ws-legacy-slate-950) !important; color:var(--ws-legacy-hex-f8fbff) !important; } #woospeak-ai-app .ws-language-switcher-select:focus, #woospeak-ai-app select.ws-language-switcher-select:focus{ outline:none !important; border-color:rgba(96,165,250,.80) !important; box-shadow:0 0 0 4px rgba(59,130,246,.20),0 0 34px rgba(96,165,250,.24) !important; } #woospeak-ai-app .ws-profile-summary, #woospeak-ai-app .ws-badge{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(226,232,240,.96)) !important; color:var(--ws-legacy-slate-700) !important; border-color:rgba(147,197,253,.28) !important; box-shadow:0 10px 24px rgba(0,0,0,.20) !important; } #woospeak-ai-app #ws-coach-avatar-hero.ws-coach-avatar, #woospeak-ai-app .ws-coach-avatar{ transform:scale(1.16) !important; background:radial-gradient(circle at 32% 24%, var(--ws-legacy-blue-50) 0%, var(--ws-legacy-blue-300) 22%, var(--ws-legacy-blue-600) 56%, var(--ws-legacy-violet-800) 100%) !important; box-shadow:0 0 0 8px rgba(96,165,250,.12),0 0 56px rgba(96,165,250,.50),0 22px 64px rgba(37,99,235,.40),inset 0 1px 0 rgba(255,255,255,.50) !important; animation:wsV3AvatarPulse 4.4s ease-in-out infinite; } @keyframes wsV3AvatarPulse{ 0%,100%{ filter:saturate(1.05); box-shadow:0 0 0 8px rgba(96,165,250,.10),0 0 48px rgba(96,165,250,.42),0 20px 58px rgba(37,99,235,.36),inset 0 1px 0 rgba(255,255,255,.48); } 50%{ filter:saturate(1.22); box-shadow:0 0 0 12px rgba(96,165,250,.16),0 0 72px rgba(124,58,237,.46),0 24px 70px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.56); } } /* ========================================================= 3) Navigation tabs and buttons ========================================================= */ #woospeak-ai-app .woospeak-ai-tabs{ background:rgba(2,6,23,.42) !important; border:1px solid rgba(147,197,253,.18) !important; border-radius:999px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 42px rgba(0,0,0,.34) !important; } #woospeak-ai-app .woospeak-ai-tab, #woospeak-ai-app .woospeak-ai-tabs button, #woospeak-ai-app [role="tab"]{ color:rgba(226,232,240,.82) !important; background:rgba(255,255,255,.035) !important; border:1px solid rgba(147,197,253,.12) !important; text-shadow:none !important; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } #woospeak-ai-app .woospeak-ai-tab.is-active, #woospeak-ai-app .woospeak-ai-tab[aria-selected="true"], #woospeak-ai-app .woospeak-ai-tabs button.is-active, #woospeak-ai-app .woospeak-ai-tabs button[aria-selected="true"]{ color:var(--ws-legacy-white) !important; background:linear-gradient(135deg,var(--ws-legacy-blue-600) 0%,var(--ws-legacy-indigo-600) 52%,var(--ws-legacy-violet-600) 100%) !important; border-color:rgba(191,219,254,.42) !important; box-shadow:0 0 34px rgba(99,102,241,.36),0 16px 38px rgba(37,99,235,.30) !important; } #woospeak-ai-app button, #woospeak-ai-app .woospeak-ai-btn, #woospeak-ai-app .woospeak-ai-button{ transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } #woospeak-ai-app .woospeak-ai-btn, #woospeak-ai-app button[type="submit"], #woospeak-ai-app #woospeak-ai-send, #woospeak-ai-app #woospeak-ai-simulation-trigger, #woospeak-ai-app .woospeak-ai-assessment-trigger, #woospeak-ai-app .ws-submit{ background:linear-gradient(135deg,var(--ws-legacy-blue-600) 0%,var(--ws-legacy-indigo-600) 52%,var(--ws-legacy-violet-600) 100%) !important; border:1px solid rgba(191,219,254,.34) !important; color:var(--ws-legacy-white) !important; box-shadow:0 0 28px rgba(99,102,241,.30),0 14px 34px rgba(37,99,235,.26) !important; } #woospeak-ai-app .woospeak-ai-btn-secondary, #woospeak-ai-app button:not([type="submit"]):not(.woospeak-ai-tab):not(.ws-language-switcher-select){ border-color:rgba(147,197,253,.20); } @media (hover:hover){ #woospeak-ai-app button:hover, #woospeak-ai-app .woospeak-ai-btn:hover, #woospeak-ai-app .woospeak-ai-tab:hover, #woospeak-ai-app .woospeak-ai-card-suggestion:hover, #woospeak-ai-app .woospeak-ai-courses-card:hover, #woospeak-ai-app .woospeak-ai-dash-card:hover{ transform:translateY(-2px); } } /* ========================================================= 4) Forms, inputs, search and select fields ========================================================= */ #woospeak-ai-app input:not([type]), #woospeak-ai-app input[type="text"], #woospeak-ai-app input[type="search"], #woospeak-ai-app input[type="email"], #woospeak-ai-app input[type="url"], #woospeak-ai-app input[type="tel"], #woospeak-ai-app input[type="number"], #woospeak-ai-app input[type="password"], #woospeak-ai-app textarea, #woospeak-ai-app select:not(.ws-language-switcher-select), #woospeak-ai-app .woospeak-ai-input, #woospeak-ai-app .woospeak-ai-composer, #woospeak-ai-app .ws-form-control, #woospeak-ai-app .woospeak-ai-course-search-input, #woospeak-ai-app .woospeak-ai-course-select, #woospeak-ai-app .woospeak-ai-course-textarea{ background:linear-gradient(180deg,var(--v3-field-2),var(--v3-field)) !important; color:var(--ws-legacy-hex-f8fbff) !important; border:1px solid rgba(147,197,253,.24) !important; box-shadow:0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important; text-shadow:none !important; } #woospeak-ai-app input:not([type])::placeholder, #woospeak-ai-app input[type="text"]::placeholder, #woospeak-ai-app input[type="search"]::placeholder, #woospeak-ai-app input[type="email"]::placeholder, #woospeak-ai-app input[type="url"]::placeholder, #woospeak-ai-app input[type="tel"]::placeholder, #woospeak-ai-app input[type="number"]::placeholder, #woospeak-ai-app input[type="password"]::placeholder, #woospeak-ai-app textarea::placeholder{ color:rgba(203,213,225,.64) !important; opacity:1 !important; } #woospeak-ai-app input:not([type]):focus, #woospeak-ai-app input[type="text"]:focus, #woospeak-ai-app input[type="search"]:focus, #woospeak-ai-app input[type="email"]:focus, #woospeak-ai-app input[type="url"]:focus, #woospeak-ai-app input[type="tel"]:focus, #woospeak-ai-app input[type="number"]:focus, #woospeak-ai-app input[type="password"]:focus, #woospeak-ai-app textarea:focus, #woospeak-ai-app select:focus{ outline:none !important; border-color:rgba(96,165,250,.68) !important; box-shadow:0 0 0 4px rgba(59,130,246,.18),0 0 34px rgba(59,130,246,.16), inset 0 1px 0 rgba(255,255,255,.10) !important; } #woospeak-ai-app .woospeak-ai-course-field label, #woospeak-ai-app label{ color:var(--v3-text-2) !important; opacity:1 !important; } /* ========================================================= 5) Chat: eliminate heavy grey, focus conversation ========================================================= */ #woospeak-ai-app .woospeak-ai-layout{ gap:20px !important; } #woospeak-ai-app .woospeak-ai-chat, #woospeak-ai-app .woospeak-ai-chat-main, #woospeak-ai-app .woospeak-ai-conversation, #woospeak-ai-app .woospeak-ai-thread, #woospeak-ai-app .woospeak-ai-messages, #woospeak-ai-app .woospeak-ai-chat-window{ background: radial-gradient(880px 320px at 0% 0%, rgba(59,130,246,.16), transparent 58%), linear-gradient(180deg,rgba(13,21,39,.90),rgba(7,12,25,.86)) !important; border:1px solid rgba(147,197,253,.20) !important; box-shadow:0 28px 88px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08) !important; color:var(--v3-text) !important; } #woospeak-ai-app .woospeak-ai-layout .woospeak-ai-chat{ min-height:560px; border-radius:28px !important; } #woospeak-ai-app .woospeak-ai-chat-header, #woospeak-ai-app .woospeak-ai-conversation-header, #woospeak-ai-app .woospeak-ai-chat-toolbar{ background:linear-gradient(180deg,rgba(32,44,70,.94),rgba(18,28,49,.88)) !important; color:var(--ws-legacy-hex-f8fbff) !important; border:1px solid rgba(147,197,253,.22) !important; box-shadow:0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important; } #woospeak-ai-app .woospeak-ai-message, #woospeak-ai-app .woospeak-ai-bubble, #woospeak-ai-app .woospeak-ai-message-assistant, #woospeak-ai-app .woospeak-ai-message-user, #woospeak-ai-app [data-role="assistant"], #woospeak-ai-app [data-role="user"]{ border:1px solid rgba(147,197,253,.18) !important; box-shadow:0 18px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important; } #woospeak-ai-app .woospeak-ai-message-assistant, #woospeak-ai-app .woospeak-ai-bubble--assistant, #woospeak-ai-app [data-role="assistant"], #woospeak-ai-app .woospeak-ai-message:first-child{ background:linear-gradient(135deg,rgba(49,59,82,.98),rgba(30,41,59,.94) 48%,rgba(15,23,42,.92)) !important; color:var(--ws-legacy-hex-f8fbff) !important; } #woospeak-ai-app .woospeak-ai-message-user, #woospeak-ai-app .woospeak-ai-bubble--user, #woospeak-ai-app [data-role="user"]{ background:linear-gradient(135deg,rgba(37,99,235,.96),rgba(124,58,237,.92)) !important; color:var(--ws-legacy-white) !important; } #woospeak-ai-app .woospeak-ai-message p, #woospeak-ai-app .woospeak-ai-message span, #woospeak-ai-app .woospeak-ai-bubble p, #woospeak-ai-app .woospeak-ai-bubble span{ color:inherit !important; } #woospeak-ai-app .woospeak-ai-composer, #woospeak-ai-app .woospeak-ai-input-wrap{ background:rgba(6,10,22,.86) !important; border:1px solid rgba(147,197,253,.18) !important; box-shadow:0 16px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ========================================================= 6) Coach card: premium IA panel ========================================================= */ #woospeak-ai-app .woospeak-ai-card, #woospeak-ai-app .woospeak-ai-card-inner, #woospeak-ai-app #woospeak-ai-card, #woospeak-ai-app .woospeak-ai-card-empty{ background: radial-gradient(640px 230px at 8% 0%, rgba(124,58,237,.18), transparent 62%), linear-gradient(180deg,rgba(17,25,46,.94),rgba(7,12,25,.88)) !important; border:1px solid rgba(147,197,253,.22) !important; box-shadow:0 28px 88px rgba(0,0,0,.40),0 0 44px rgba(124,58,237,.12), inset 0 1px 0 rgba(255,255,255,.08) !important; color:var(--ws-legacy-hex-f8fbff) !important; } #woospeak-ai-app .woospeak-ai-card-empty-head, #woospeak-ai-app .woospeak-ai-card-header, #woospeak-ai-app .ws-card-head{ background:rgba(2,6,23,.48) !important; border:1px solid rgba(96,165,250,.22) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 30px rgba(96,165,250,.12) !important; } #woospeak-ai-app .woospeak-ai-card h2, #woospeak-ai-app .woospeak-ai-card h3, #woospeak-ai-app .woospeak-ai-card-empty-title, #woospeak-ai-app .woospeak-ai-card-examples-title{ color:var(--ws-legacy-white) !important; opacity:1 !important; } #woospeak-ai-app .woospeak-ai-card p, #woospeak-ai-app .woospeak-ai-card small, #woospeak-ai-app .woospeak-ai-card-empty-text{ color:rgba(226,232,240,.76) !important; } #woospeak-ai-app .woospeak-ai-card-suggestion, #woospeak-ai-app .ws-chip, #woospeak-ai-app .ws-pill{ background:rgba(15,23,42,.78) !important; color:var(--ws-legacy-hex-e0f2fe) !important; border:1px solid rgba(96,165,250,.22) !important; box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07) !important; } /* ========================================================= 7) Courses: generate + library cleaned and readable ========================================================= */ #woospeak-ai-app .woospeak-ai-panel--courses, #woospeak-ai-app .woospeak-ai-courses-section, #woospeak-ai-app .woospeak-ai-courses-generate-section, #woospeak-ai-app .woospeak-ai-courses-library-section{ background:transparent !important; color:var(--ws-legacy-hex-f8fbff) !important; } #woospeak-ai-app .woospeak-ai-courses-tabs, #woospeak-ai-app .woospeak-ai-courses-toolbar{ background:transparent !important; } #woospeak-ai-app .woospeak-ai-courses-tabs button, #woospeak-ai-app .woospeak-ai-courses-tabs .is-active, #woospeak-ai-app .woospeak-ai-courses-tabs button[aria-selected="true"]{ border-radius:16px !important; } #woospeak-ai-app .woospeak-ai-courses-tabs .is-active, #woospeak-ai-app .woospeak-ai-courses-tabs button[aria-selected="true"]{ background:linear-gradient(135deg,var(--ws-legacy-blue-600),var(--ws-legacy-indigo-600) 52%,var(--ws-legacy-violet-600)) !important; color:var(--ws-legacy-white) !important; border-color:rgba(191,219,254,.34) !important; } #woospeak-ai-app .woospeak-ai-courses-header, #woospeak-ai-app .woospeak-ai-course-form, #woospeak-ai-app .woospeak-ai-courses-card, #woospeak-ai-app .woospeak-ai-courses-library-card, #woospeak-ai-app .woospeak-ai-courses-related, #woospeak-ai-app .woospeak-ai-courses-recent{ background: radial-gradient(920px 290px at 6% 0%, rgba(37,99,235,.14), transparent 62%), linear-gradient(180deg,rgba(15,23,42,.88),rgba(7,12,25,.80)) !important; color:var(--ws-legacy-hex-f8fbff) !important; border:1px solid rgba(147,197,253,.20) !important; box-shadow:0 28px 86px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important; } #woospeak-ai-app .woospeak-ai-courses-title, #woospeak-ai-app .woospeak-ai-courses-card-title, #woospeak-ai-app .woospeak-ai-courses-library-title, #woospeak-ai-app .woospeak-ai-course-form h2, #woospeak-ai-app .woospeak-ai-course-form h3{ color:var(--ws-legacy-white) !important; opacity:1 !important; text-shadow:0 0 28px rgba(96,165,250,.22) !important; letter-spacing:-.04em; } #woospeak-ai-app .woospeak-ai-courses-title, #woospeak-ai-app .woospeak-ai-courses-library-title{ font-weight:950 !important; } #woospeak-ai-app .woospeak-ai-courses-intro, #woospeak-ai-app .woospeak-ai-courses-library-intro, #woospeak-ai-app .woospeak-ai-course-help, #woospeak-ai-app .woospeak-ai-course-form p, #woospeak-ai-app .woospeak-ai-course-field small, #woospeak-ai-app .woospeak-ai-library-empty{ color:rgba(226,232,240,.78) !important; opacity:1 !important; } #woospeak-ai-app .woospeak-ai-library-filters{ background: radial-gradient(760px 230px at 0% 0%, rgba(96,165,250,.12), transparent 62%), linear-gradient(180deg,rgba(15,23,42,.84),rgba(8,13,28,.76)) !important; border:1px solid rgba(147,197,253,.22) !important; box-shadow:0 20px 58px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08) !important; } #woospeak-ai-app .woospeak-ai-course-thumb, #woospeak-ai-app .woospeak-ai-course-card, #woospeak-ai-app .woospeak-ai-course-item, #woospeak-ai-app .ws-course-card{ background:linear-gradient(180deg,rgba(15,23,42,.80),rgba(7,12,25,.72)) !important; border:1px solid rgba(147,197,253,.18) !important; box-shadow:0 18px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important; color:var(--ws-legacy-hex-f8fbff) !important; } #woospeak-ai-app .woospeak-ai-course-thumb img, #woospeak-ai-app .woospeak-ai-course-card img, #woospeak-ai-app .ws-course-card img{ filter:saturate(1.08) contrast(1.04) brightness(.92); } #woospeak-ai-app .woospeak-ai-courses-library-count, #woospeak-ai-app .woospeak-ai-courses-library-results, #woospeak-ai-app #ws-library-count, #woospeak-ai-app #ws-library-results-count{ background:rgba(37,99,235,.18) !important; color:var(--ws-legacy-blue-200) !important; border:1px solid rgba(96,165,250,.34) !important; box-shadow:0 0 28px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* ========================================================= 8) Dashboard rebuilt visually, not just darkened ========================================================= */ #woospeak-ai-app .woospeak-ai-panel--dashboard{ background:transparent !important; } #woospeak-ai-app .woospeak-ai-dashboard-wrap{ padding:24px !important; border-radius:30px !important; background: radial-gradient(880px 360px at 12% 0%, rgba(37,99,235,.18), transparent 62%), radial-gradient(780px 320px at 88% 4%, rgba(124,58,237,.14), transparent 62%), linear-gradient(180deg,rgba(10,16,31,.86),rgba(5,10,22,.78)) !important; border:1px solid rgba(147,197,253,.22) !important; box-shadow:0 34px 110px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08) !important; } #woospeak-ai-app .woospeak-ai-dash-layout{ gap:22px !important; } #woospeak-ai-app .woospeak-ai-dash-card{ background: radial-gradient(760px 260px at 8% 0%, rgba(96,165,250,.13), transparent 60%), linear-gradient(180deg,rgba(17,27,49,.92),rgba(9,15,30,.84)) !important; color:var(--ws-legacy-hex-f8fbff) !important; border:1px solid rgba(147,197,253,.22) !important; box-shadow:0 26px 82px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important; } #woospeak-ai-app .woospeak-ai-dash-card::before{ height:3px !important; left:18px !important; right:18px !important; background:linear-gradient(90deg,var(--ws-legacy-cyan-400),var(--ws-legacy-blue-400) 50%,var(--ws-legacy-violet-400)) !important; opacity:.90 !important; box-shadow:0 0 24px rgba(96,165,250,.42) !important; } #woospeak-ai-app .woospeak-ai-dash-card--hero{ background: radial-gradient(920px 300px at 0% 0%, rgba(37,99,235,.20), transparent 60%), linear-gradient(180deg,rgba(18,29,52,.96),rgba(10,16,32,.88)) !important; border-color:rgba(147,197,253,.28) !important; } #woospeak-ai-app .woospeak-ai-dash-kicker, #woospeak-ai-app .woospeak-ai-dash-card-title, #woospeak-ai-app .ws-dash-card-block-title, #woospeak-ai-app .ws-dash-kpi-label, #woospeak-ai-app .ws-dash-action-verb{ color:var(--ws-legacy-blue-300) !important; opacity:1 !important; letter-spacing:.16em !important; } #woospeak-ai-app .woospeak-ai-dash-title, #woospeak-ai-app .ws-dash-hero-name, #woospeak-ai-app .woospeak-ai-dashboard-title{ color:var(--ws-legacy-white) !important; text-shadow:0 0 30px rgba(96,165,250,.24) !important; } #woospeak-ai-app .woospeak-ai-dash-muted, #woospeak-ai-app .woospeak-ai-dashboard-text, #woospeak-ai-app .ws-dash-kpi-sub, #woospeak-ai-app .ws-dash-assessment-row-meta, #woospeak-ai-app .ws-dash-assessment-date{ color:rgba(226,232,240,.72) !important; } #woospeak-ai-app .ws-dash-kpi, #woospeak-ai-app .ws-dash-assessment-kpi, #woospeak-ai-app .ws-dash-assessment-latest, #woospeak-ai-app .ws-dash-action-item{ background:linear-gradient(180deg,rgba(24,36,60,.90),rgba(12,20,38,.82)) !important; border:1px solid rgba(147,197,253,.18) !important; box-shadow:0 16px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important; color:var(--ws-legacy-hex-f8fbff) !important; } #woospeak-ai-app .ws-dash-kpi-value, #woospeak-ai-app .ws-dash-kpi-text, #woospeak-ai-app .ws-dash-assessment-kpi-value, #woospeak-ai-app .ws-dash-assessment-row-title{ color:var(--ws-legacy-white) !important; text-shadow:0 0 28px rgba(96,165,250,.20) !important; } #woospeak-ai-app .woospeak-ai-dash-level, #woospeak-ai-app .ws-level-pill, #woospeak-ai-app .woospeak-ai-dashboard-levels button, #woospeak-ai-app .woospeak-ai-level-pill{ background:rgba(15,23,42,.78) !important; color:rgba(226,232,240,.88) !important; border:1px solid rgba(147,197,253,.24) !important; box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important; } #woospeak-ai-app .woospeak-ai-dash-level.is-active, #woospeak-ai-app .woospeak-ai-dashboard-levels button.is-active, #woospeak-ai-app .woospeak-ai-level-pill.is-active, #woospeak-ai-app .ws-level-pill.is-active, #woospeak-ai-app .ws-level-pill[aria-current="true"]{ background:linear-gradient(135deg,var(--ws-legacy-blue-600),var(--ws-legacy-indigo-600) 52%,var(--ws-legacy-violet-600)) !important; color:var(--ws-legacy-white) !important; border-color:rgba(191,219,254,.42) !important; box-shadow:0 0 34px rgba(96,165,250,.36),0 16px 40px rgba(37,99,235,.26) !important; } #woospeak-ai-app .woospeak-ai-dash-progress-bar, #woospeak-ai-app .ws-dash-domain-progress, #woospeak-ai-app .woospeak-ai-dashboard-progress, #woospeak-ai-app .ws-progressbar, #woospeak-ai-app .ws-step-progressbar{ background:rgba(148,163,184,.14) !important; border-radius:999px !important; overflow:hidden !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; } #woospeak-ai-app .woospeak-ai-dash-progress-fill, #woospeak-ai-app .woospeak-ai-dashboard-progress-fill, #woospeak-ai-app .ws-progressbar-fill, #woospeak-ai-app .ws-step-progressbar-fill{ background:linear-gradient(90deg,var(--ws-legacy-cyan-400),var(--ws-legacy-blue-400) 45%,var(--ws-legacy-violet-400) 100%) !important; box-shadow:0 0 24px rgba(96,165,250,.48) !important; } /* ========================================================= 9) Assessment and results ========================================================= */ #woospeak-ai-app .ws-assessment-start, #woospeak-ai-app .ws-assessment-screen, #woospeak-ai-app .ws-assessment-result{ border-top:1px solid rgba(96,165,250,.46) !important; } #woospeak-ai-app .ws-assessment-start h2, #woospeak-ai-app .ws-assessment-start h3, #woospeak-ai-app .ws-step-title, #woospeak-ai-app .ws-question-title, #woospeak-ai-app .ws-result-title{ color:var(--ws-legacy-white) !important; text-shadow:0 0 28px rgba(96,165,250,.22) !important; } #woospeak-ai-app .ws-question-help, #woospeak-ai-app .ws-step-progress, #woospeak-ai-app .ws-result-subtitle{ color:rgba(226,232,240,.74) !important; } #woospeak-ai-app .ws-assessment-start button{ background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(15,23,42,.88)) !important; color:var(--ws-legacy-hex-f8fbff) !important; border:1px solid rgba(147,197,253,.22) !important; } /* ========================================================= 10) Text hierarchy and last white islands neutralization ========================================================= */ #woospeak-ai-app h1, #woospeak-ai-app h2, #woospeak-ai-app h3, #woospeak-ai-app h4, #woospeak-ai-app .woospeak-ai-card-title, #woospeak-ai-app .woospeak-ai-dashboard-title{ color:var(--ws-legacy-white) !important; } #woospeak-ai-app p, #woospeak-ai-app .description, #woospeak-ai-app .help, #woospeak-ai-app .muted{ color:var(--v3-text-2) !important; } #woospeak-ai-app [class*="placeholder"], #woospeak-ai-app [class*="empty"]{ color:rgba(226,232,240,.74) !important; } #woospeak-ai-app [style*="background: white"], #woospeak-ai-app [style*="background:var(--ws-legacy-white)"], #woospeak-ai-app [style*="background-color: white"], #woospeak-ai-app [style*="background-color:var(--ws-legacy-white)"]{ background:var(--v3-card) !important; color:var(--ws-legacy-hex-f8fbff) !important; } /* Scrollbars */ #woospeak-ai-app ::-webkit-scrollbar{ width:10px; height:10px; } #woospeak-ai-app ::-webkit-scrollbar-track{ background:rgba(15,23,42,.42); } #woospeak-ai-app ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(96,165,250,.72),rgba(124,58,237,.72)); border-radius:999px; border:2px solid rgba(15,23,42,.42); } @media (max-width:768px){ #woospeak-ai-app{ width:100%; padding:0 8px; } #woospeak-ai-app .woospeak-ai-hero.ws-coach-hero{ padding:18px 16px !important; } #woospeak-ai-app .woospeak-ai-layout .woospeak-ai-chat{ min-height:520px; } #woospeak-ai-app #ws-coach-avatar-hero.ws-coach-avatar{ transform:scale(1.06) !important; } #woospeak-ai-app .ws-language-switcher-select{ min-width:132px !important; } #woospeak-ai-app .woospeak-ai-dashboard-wrap{ padding:14px !important; } } @media (prefers-reduced-motion:reduce){ #woospeak-ai-app *, #woospeak-ai-app *::before, #woospeak-ai-app *::after{ animation:none !important; transition:none !important; } } /* ========================================================= V14.15.13 — Visual V3 final harmonization Consolidated inside the V3 skin, replacing the previous incremental readability/card/switcher additions. CSS-only: no HTML, JS or business logic changes. ========================================================= */ /* Native form popups: improve what CSS can control. Chrome/macOS still renders the open