html, body { margin: 0; padding: 0; }
/* Mobile block screen */
#mobileBlockScreen {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(-45deg, #00eff8, #f800b4, #ebf503, #02f6c1, #00eff8, #9400f8);
background-size: 400% 400%;
animation: authGradient 30s ease infinite;
z-index: 999999;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px;
}
.mobile-block-content {
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 768px) {
#mobileBlockScreen {
display: flex !important;
}
#authScreen,
#mainContainer,
.content-wrapper,
.auth-loading-screen,
.y2k-background {
display: none !important;
}
}
/* Global Font: Inter */
body, body * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Exception: monospace for code/technical elements */
code, pre, .monospace, input[type="text"], textarea {
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
}
/* CSS Custom Properties for Resizable Sidebar */
:root {
--sidebar-width: 28vw;
--sidebar-collapsed: 0;
/* Theme Variables — warm light mode */
--bg-primary: #faf9f6;
--bg-secondary: #f5f4ef;
--text-primary: #2c2c2a;
--text-secondary: #5f5e5a;
--border-color: #e2e0d9;
}
/* Dark Mode Variables */
.dark-mode {
--bg-primary: #2E2E2E;
--bg-secondary: #1f1f1f;
--text-primary: rgba(255, 255, 255, 0.9);
--text-secondary: rgba(255, 255, 255, 0.6);
--border-color: rgba(255, 255, 255, 0.3);
}
/* Authentication Screen Styles - Y2K Windows 98 Theme */
/* Video Background for Authentication */
.auth-video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -3;
filter: blur(16px) saturate(1.2);
transform: scale(1.15);
}
.auth-frost-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px);
z-index: -2;
}
/* Fallback gradient background - hidden when video loads */
.y2k-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #00ff88 0%, #88ff00 50%, #ff8800 100%);
z-index: -4;
opacity: 0;
}
/* Windows 98 Style Authentication Dialog */
.auth-screen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
}
.auth-navbar {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
z-index: 200;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: auto;
}
.auth-navbar-logo {
height: 40px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
.auth-navbar-theme-toggle {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
padding: 6px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.auth-navbar-theme-toggle:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.auth-navbar-theme-toggle svg {
width: 15px;
height: 15px;
stroke: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.auth-screen-logo {
margin-top: 264px;
max-width: 500px;
width: auto;
margin-bottom: 12px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9));
}
@media (max-width: 768px) {
.auth-screen-logo {
max-width: 280px;
}
.agency-screen-logo {
max-width: 280px;
}
}
.window-titlebar {
background: linear-gradient(90deg, #0040ff 0%, #4080ff 100%);
color: white;
padding: 3px 6px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
font-size: 11px;
}
.window-title {
display: flex;
align-items: center;
gap: 6px;
}
.title-icon {
width: 16px;
height: 16px;
background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
border: 1px solid #000;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-weight: 900;
}
.window-controls {
display: flex;
gap: 2px;
}
.control-btn {
width: 16px;
height: 14px;
background: #c0c0c0;
border: 1px outset #c0c0c0;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: bold;
}
.control-btn:active {
border: 1px inset #c0c0c0;
}
.window-content {
padding: 16px;
background: #c0c0c0;
}
.logo-section {
text-align: center;
margin-bottom: 20px;
}
.retro-logo {
width: 80px;
height: 60px;
margin: 0 auto 12px;
background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
border: 2px inset #c0c0c0;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 900;
color: #000;
text-shadow: 1px 1px 0px #fff;
}
.app-title {
font-size: 14px;
font-weight: bold;
color: #000080;
margin-bottom: 4px;
}
.app-subtitle {
font-size: 11px;
color: #666;
}
.tab-container {
margin: 16px 0;
}
.tab-buttons {
display: flex;
border-bottom: 1px solid #808080;
}
.auth-tab {
background: #c0c0c0;
border: 1px outset #c0c0c0;
border-bottom: none;
padding: 6px 16px;
font-size: 11px;
cursor: pointer;
color: #000;
font-family: 'MS Sans Serif', sans-serif;
}
.auth-tab.active {
background: #c0c0c0;
border: 1px inset #c0c0c0;
border-bottom: 1px solid #c0c0c0;
margin-bottom: -1px;
}
.tab-content {
background: #c0c0c0;
border: 1px inset #c0c0c0;
padding: 16px;
}
.form-group {
margin-bottom: 12px;
}
.form-label {
display: block;
font-size: 11px;
font-weight: bold;
margin-bottom: 4px;
color: #000;
}
.form-input {
width: 100%;
padding: 4px;
border: 2px inset #c0c0c0;
background: white;
font-family: 'MS Sans Serif', sans-serif;
font-size: 11px;
color: #000;
}
.form-input:focus {
outline: 1px dotted #000;
outline-offset: -2px;
}
.button-group {
display: flex;
gap: 8px;
margin-top: 16px;
}
.google-button {
background: #c0c0c0;
border: 2px outset #c0c0c0;
padding: 6px 12px;
font-size: 11px;
font-family: 'MS Sans Serif', sans-serif;
cursor: pointer;
color: #000;
display: flex;
align-items: center;
gap: 6px;
width: 100%;
justify-content: center;
margin-top: 8px;
}
.google-button:active {
border: 2px inset #c0c0c0;
}
.google-icon {
width: 16px;
height: 16px;
}
.status-bar {
background: #c0c0c0;
border-top: 1px inset #c0c0c0;
padding: 4px 8px;
font-size: 11px;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
}
.forgot-password {
margin-top: 12px;
text-align: center;
display: block;
color: #0000ff;
text-decoration: underline;
font-size: 11px;
cursor: pointer;
}
.forgot-password:visited {
color: #800080;
}
.error-message {
background: #ffcccc;
border: 1px solid #ff0000;
padding: 8px;
margin-bottom: 12px;
font-size: 11px;
color: #cc0000;
}
.success-message {
background: #ccffcc;
border: 1px solid #00aa00;
padding: 8px;
margin-bottom: 12px;
font-size: 11px;
color: #006600;
}
.hidden {
display: none !important;
}
/* Taskbar - only show during authentication */
.taskbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: #c0c0c0;
border-top: 1px outset #c0c0c0;
display: none;
align-items: center;
padding: 0 4px;
z-index: 1000;
}
.start-button {
background: #c0c0c0;
border: 2px outset #c0c0c0;
padding: 4px 12px;
font-size: 11px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
}
.start-button:active {
border: 2px inset #c0c0c0;
}
.taskbar-time {
margin-left: auto;
font-size: 11px;
padding: 4px 8px;
border: 1px inset #c0c0c0;
}
/* Hide main content when auth is active */
.auth-screen:not(.hidden) ~ .content-wrapper {
display: none;
}
/* Show taskbar when auth is active */
.auth-screen:not(.hidden) ~ .taskbar {
display: flex;
}
/* Top Center Toggle Switch with Animated Green Gradient */
.tier-toggle {
display: none !important; /* Hidden to force agency mode */
pointer-events: auto;
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.1);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 3px;
border: 1px solid rgba(255,255,255,0.2);
align-items: center;
gap: 0;
width: 200px;
height: 40px;
z-index: 200;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.tier-option {
flex: 1;
text-align: center;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 17px;
font-family: 'Space Grotesk', sans-serif;
position: relative;
z-index: 2;
}
.tier-option.active {
background: linear-gradient(45deg, #4ade80, #22c55e, #16a34a, #22c55e);
background-size: 300% 300%;
animation: greenGradientShift 3s ease infinite;
color: white;
box-shadow: 0 2px 12px rgba(34, 197, 94, 0.4);
transform: scale(1.01);
}
@keyframes greenGradientShift {
0%, 100% { background-position: 0% 50%; }
33% { background-position: 100% 50%; }
66% { background-position: 50% 100%; }
}
.tier-option.inactive {
background: transparent;
color: rgba(255,255,255,0.7);
}
.tier-option:hover {
color: white;
background: rgba(255,255,255,0.1);
}
/* Agency Workflow Bar */
.agency-workflow {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 66.67%;
height: 70px;
background: linear-gradient(90deg,
rgba(102, 126, 234, 0.4) 0%,
rgba(118, 75, 162, 0.4) 20%,
rgba(240, 147, 251, 0.4) 40%,
rgba(245, 87, 108, 0.4) 60%,
rgba(79, 172, 254, 0.4) 80%,
rgba(102, 126, 234, 0.4) 100%);
border: 2px solid rgba(255,255,255,0.4);
border-radius: 35px;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 0 20px;
backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.workflow-step {
color: white;
font-weight: bold;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
padding: 8px 16px;
border-radius: 12px;
text-align: center;
line-height: 1.2;
flex: 1;
margin: 0 5px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.workflow-step:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.05);
}
.workflow-step.center-chat {
color: white;
font-weight: bold;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
padding: 6px 12px;
border-radius: 12px;
text-align: center;
line-height: 1.2;
flex: 1.5;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.3);
box-shadow: 0 4px 16px rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.4);
gap: 6px;
min-height: 27px;
}
.workflow-step.center-chat span {
font-size: 13px !important;
font-weight: bold !important;
}
.agency-nav-item.center span {
font-size: 12px !important;
font-weight: bold !important;
}
.workflow-step.center-chat:hover {
background: rgba(255,255,255,0.4);
transform: scale(1.08);
}
/* Google Drive button styles */
.gdrive-icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
min-height: 36px !important;
width: 100%;
}
.gdrive-icon img {
width: 37.5px !important;
height: 37.5px !important;
display: block !important;
}
.gdrive-text {
font-size: 13px !important;
font-weight: bold !important;
color: rgba(255,255,255,0.9);
font-family: 'Space Grotesk', sans-serif;
}
.agency-nav-item.center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 8px 16px !important;
}
/* Dark mode styles for Google Drive button */
.gradient-bg-night .gdrive-text {
color: rgba(255,255,255,0.9) !important;
}
/* Hide plus button in agency mode */
.agency-mode .plus-button {
display: none;
}
/* Override plus button position for bottom left */
.plus-button {
bottom: 30px !important;
left: 30px !important;
}
/* Agency Mode - Video Background Interface */
.agency-static-interface {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 5000; pointer-events: none;
font-family: 'Space Grotesk', sans-serif;
transition: all 0.3s ease;
}
/* Agency Video Background */
.agency-video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
background-color: #000;
}
.agency-static-interface::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, transparent 45%, rgba(255,255,255,0.015) 45.1%),
radial-gradient(circle at 75% 75%, transparent 45%, rgba(0,0,0,0.015) 45.1%),
radial-gradient(circle at 75% 25%, transparent 45%, rgba(255,255,255,0.01) 45.1%),
radial-gradient(circle at 25% 75%, transparent 45%, rgba(0,0,0,0.01) 45.1%);
background-size: 16px 16px, 20px 20px, 12px 12px, 18px 18px;
background-position: 0 0, 5px 5px, 3px 3px, 8px 8px;
pointer-events: none;
opacity: 0.2;
animation: grain 15s steps(8) infinite;
}
@keyframes grain {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
10% { transform: translate(-1px, 1px) rotate(1deg); }
20% { transform: translate(1px, 0px) rotate(0deg); }
30% { transform: translate(0px, -1px) rotate(-1deg); }
40% { transform: translate(-1px, -1px) rotate(2deg); }
50% { transform: translate(1px, 1px) rotate(-1deg); }
60% { transform: translate(0px, 1px) rotate(1deg); }
70% { transform: translate(1px, -1px) rotate(0deg); }
80% { transform: translate(-1px, 0px) rotate(-1deg); }
90% { transform: translate(1px, -1px) rotate(1deg); }
}
/* Versionary logo styling */
.logo-image {
height: 90px !important;
width: auto !important;
object-fit: contain !important;
}
/* Theme toggle — sun/moon switch */
.theme-switch {
display: block;
--width-of-switch: 3.5em;
--height-of-switch: 2em;
--size-of-icon: 1.4em;
--slider-offset: 0.3em;
position: relative;
width: var(--width-of-switch);
height: var(--height-of-switch);
cursor: pointer;
z-index: 100;
}
.theme-switch input {
opacity: 0;
width: 0;
height: 0;
}
.theme-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f4f4f5;
transition: .4s;
border-radius: 30px;
}
.theme-slider:before {
position: absolute;
content: "";
height: var(--size-of-icon, 1.4em);
width: var(--size-of-icon, 1.4em);
border-radius: 20px;
left: var(--slider-offset, 0.3em);
top: 50%;
transform: translateY(-50%);
background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
transition: .4s;
}
.theme-switch input:checked + .theme-slider {
background-color: #303136;
}
.theme-switch input:checked + .theme-slider:before {
left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
background: #303136;
box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
/* Dark mode styles for loading preview */
.dark-mode .master-console-overlay .loading-preview {
color: rgba(255, 255, 255, 0.6);
}
/* Comprehensive Dark Mode Console Styling */
.dark-mode .master-console-overlay {
background: transparent;
}
.dark-mode .master-console-overlay .top-header {
background: #2E2E2E;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.dark-mode .master-console-overlay .project-name {
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .dropdown-icon {
color: rgba(255, 255, 255, 0.6);
}
/* Homepage Dropdown Dark Mode - Missing Rules */
.dark-mode .user-dropdown {
background: #1f1f1f !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
.dark-mode .dropdown-item {
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .dropdown-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
/* Missing dark mode rules for dropdown separators and user subscription */
.dark-mode .dropdown-separator {
background: rgba(255, 255, 255, 0.2) !important;
}
.dark-mode .user-subscription {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Content wrapper default backgrounds — prevent white flash during auth transition */
.content-wrapper {
background: #0d1117;
}
body:not(.dark-mode) .content-wrapper {
background: #f5f5f5;
}
/* Homepage Main Console Dark Mode - Complete Rules */
.dark-mode .content-wrapper {
background: #1a1a1a !important;
}
.dark-mode #mainContainer {
background: rgba(46, 46, 46, 0.95) !important;
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .nav-bar {
background: #2E2E2E !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .user-info {
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .logo-image {
filter: brightness(0.9) !important;
}
/* Tier Toggle Dark Mode */
.dark-mode .tier-toggle {
background: rgba(46, 46, 46, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .tier-option {
color: rgba(255, 255, 255, 0.8) !important;
background: transparent !important;
}
.dark-mode .tier-option.active {
background: #5CE65C !important;
color: #000000 !important;
}
.dark-mode .tier-option:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.9) !important;
}
/* Agency Chat Input Dark Mode */
.dark-mode .agency-chat-input {
background: #181818 !important;
border: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.dark-mode .agency-chat-input input {
color: #ffffff !important;
background: transparent !important;
}
.dark-mode .agency-chat-input input::placeholder {
color: rgba(255,255,255,0.6) !important;
}
.dark-mode .animated-placeholder {
color: #ffffff !important;
font-weight: 400 !important;
}
.dark-mode .agency-chat-input button {
color: rgba(255,255,255,0.8) !important;
}
.dark-mode .agency-chat-input button:hover {
color: #ffffff !important;
background: rgba(255,255,255,0.1) !important;
}
.dark-mode .agency-nav-item {
color: rgba(255,255,255,0.9) !important;
border-color: rgba(255,255,255,0.3) !important;
background: rgba(0,0,0,0.2) !important;
}
.dark-mode .agency-unified-module {
background: #181818 !important;
border: none !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
}
.dark-mode .agency-chat-header {
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .versionary-text {
background: linear-gradient(90deg, #00ff88, #88ff00) !important;
background-clip: text !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* Agency Workflow Dark Mode */
.dark-mode .agency-workflow {
background: rgba(46, 46, 46, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .workflow-step {
color: rgba(255, 255, 255, 0.9) !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.dark-mode .workflow-step:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
.dark-mode .workflow-step.center-chat {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .workflow-step.center-chat:hover {
background: rgba(255, 255, 255, 0.3) !important;
}
/* Plus Button Dark Mode */
.dark-mode .plus-button {
background: rgba(46, 46, 46, 0.9) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .plus-button:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Master Console Pipeline Toolbar — moved to top, old bottom toolbar hidden */
.master-console-overlay .bottom-toolbar {
display: none !important;
}
/* QC Indicator Animation */
@keyframes pulse-qc {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
border-color: #10b981;
}
50% {
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
border-color: #10b981;
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
border-color: #e2e0d9;
}
}
.qc-ready-input {
border: 2px solid #10b981 !important;
background: rgba(16, 185, 129, 0.05) !important;
}
/* Pipeline Step Color Consistency */
.master-console-overlay .pipeline-step {
background: #f9fafb !important;
color: #374151 !important;
border: 1px solid #e2e0d9 !important;
}
.master-console-overlay .pipeline-step:hover {
background: #f0efe9 !important;
}
.master-console-overlay .pipeline-step.active {
background: #111827 !important;
color: white !important;
}
.dark-mode .master-console-overlay .pipeline-step {
background: #374151 !important;
color: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.dark-mode .master-console-overlay .pipeline-step:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}
.dark-mode .master-console-overlay .pipeline-step.active {
background: #111827 !important;
color: white !important;
}
/* Pipeline Step Numbers Color Consistency */
.master-console-overlay .pipeline-step-number {
background: #e2e0d9 !important;
color: #374151 !important;
}
.master-console-overlay .pipeline-step.active .pipeline-step-number {
background: white !important;
color: #111827 !important;
}
.dark-mode .master-console-overlay .pipeline-step-number {
background: rgba(255, 255, 255, 0.3) !important;
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .master-console-overlay .pipeline-step.active .pipeline-step-number {
background: white !important;
color: #111827 !important;
}
/* Remove Button Outlines from All Console Elements */
.master-console-overlay button,
.master-console-overlay input,
.master-console-overlay textarea,
.master-console-overlay .pipeline-step,
.master-console-overlay .header-btn,
.master-console-overlay .toolbar-btn {
outline: none !important;
border: none !important;
}
.master-console-overlay button:focus,
.master-console-overlay input:focus,
.master-console-overlay textarea:focus,
.master-console-overlay .pipeline-step:focus,
.master-console-overlay .header-btn:focus,
.master-console-overlay .toolbar-btn:focus {
outline: none !important;
box-shadow: none !important;
}
/* Restore necessary borders for pipeline steps and inputs */
.master-console-overlay .pipeline-step {
border: 1px solid #e2e0d9 !important;
}
.dark-mode .master-console-overlay .pipeline-step {
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip,
.master-console-overlay .carousel-indicators button.indicator-chip,
.master-console-overlay button.indicator-chip {
border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip:hover,
.master-console-overlay .carousel-indicators button.indicator-chip:hover,
.master-console-overlay button.indicator-chip:hover {
border-color: rgba(0, 0, 0, 0.25) !important;
}
.master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip.active,
.master-console-overlay .carousel-indicators button.indicator-chip.active,
.master-console-overlay button.indicator-chip.active {
border: 1px solid #3b82f6 !important;
}
.dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip,
.dark-mode .master-console-overlay .carousel-indicators button.indicator-chip,
.dark-mode .master-console-overlay button.indicator-chip,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators button.indicator-chip,
.main-content.console-dark-mode .master-console-overlay button.indicator-chip {
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip:hover,
.dark-mode .master-console-overlay .carousel-indicators button.indicator-chip:hover,
.dark-mode .master-console-overlay button.indicator-chip:hover,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip:hover,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators button.indicator-chip:hover,
.main-content.console-dark-mode .master-console-overlay button.indicator-chip:hover {
border-color: rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip.active,
.dark-mode .master-console-overlay .carousel-indicators button.indicator-chip.active,
.dark-mode .master-console-overlay button.indicator-chip.active,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip.active,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators button.indicator-chip.active,
.main-content.console-dark-mode .master-console-overlay button.indicator-chip.active {
border: 1px solid #3b82f6 !important;
}
.master-console-overlay input,
.master-console-overlay textarea {
border: 1px solid #e2e0d9 !important;
}
.dark-mode .master-console-overlay input,
.dark-mode .master-console-overlay textarea {
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
/* Processing Console Styling - MISSING CSS */
.processing-console {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
padding: 20px;
box-sizing: border-box;
}
.processing-console.active {
display: flex;
align-items: center;
justify-content: center;
}
.console-content {
background: #faf9f6;
border-radius: 12px;
padding: 30px;
max-width: 600px;
width: 100%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.console-header {
text-align: center;
margin-bottom: 30px;
}
.console-header h2 {
color: #111827;
font-size: 24px;
font-weight: 600;
margin: 0 0 10px 0;
font-family: 'Space Grotesk', sans-serif;
}
.batch-id {
color: #6b7280;
font-size: 14px;
font-family: 'Space Grotesk', sans-serif;
}
.progress-bar {
position: relative;
background: #f0efe9;
border-radius: 8px;
height: 12px;
margin: 20px 0;
overflow: hidden;
}
.progress-fill {
background: linear-gradient(90deg, #10b981, #059669);
height: 100%;
width: 0%;
border-radius: 8px;
transition: width 0.3s ease;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: 600;
color: #111827;
font-family: 'Space Grotesk', sans-serif;
}
.status-log {
background: #f9fafb;
border-radius: 8px;
padding: 15px;
max-height: 200px;
overflow-y: auto;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 13px;
line-height: 1.4;
color: #374151;
}
/* Processing Console Dark Mode */
.dark-mode .console-content {
background: #2E2E2E;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.dark-mode .console-header h2 {
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .batch-id {
color: rgba(255, 255, 255, 0.6);
}
.dark-mode .progress-bar {
background: #374151;
}
.dark-mode .progress-text {
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .status-log {
background: #1f1f1f;
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Complete Processing Console Dark Mode Styling */
.dark-mode .processing-console {
background: rgba(0, 0, 0, 0.9);
}
.dark-mode .status-item {
color: rgba(255, 255, 255, 0.8);
}
.dark-mode .status-item.pending {
color: rgba(255, 193, 7, 0.9);
}
.dark-mode .status-item.active {
color: rgba(0, 245, 255, 0.9);
}
.dark-mode .status-item.completed {
color: rgba(34, 197, 94, 0.9);
}
.dark-mode .status-item.error {
color: rgba(239, 68, 68, 0.9);
}
.dark-mode .progress-fill {
background: linear-gradient(90deg, #10b981, #00d4aa);
}
.dark-mode .master-console-overlay .dropdown-icon {
color: rgba(255, 255, 255, 0.6);
}
.dark-mode .master-console-overlay .project-icon {
filter: brightness(0) invert(1);
}
body:not(.dark-mode) .master-console-overlay .project-icon {
filter: brightness(0);
}
.dark-mode .master-console-overlay .user-greeting-container:hover {
background: rgba(255, 255, 255, 0.1);
}
.dark-mode .master-console-overlay .user-dropdown {
background: #1f1f1f;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.dark-mode .master-console-overlay .dropdown-item {
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .master-console-overlay .dropdown-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.dark-mode .master-console-overlay .user-subscription {
color: rgba(255, 255, 255, 0.6);
}
.dark-mode .master-console-overlay .header-btn {
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .master-console-overlay .header-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.dark-mode .master-console-overlay .console-close-btn {
background: #ef4444;
color: white;
}
.dark-mode .master-console-overlay .invite-btn {
background: #3b82f6;
color: white;
}
.dark-mode .master-console-overlay .upgrade-btn {
color: rgba(255, 255, 255, 0.6);
}
.dark-mode .master-console-overlay .reset-btn {
background: #f59e0b;
color: white;
}
.dark-mode .master-console-overlay .reset-btn:hover {
background: #d97706;
}
.dark-mode .master-console-overlay .main-container {
background: #2E2E2E;
}
.dark-mode .master-console-overlay .left-sidebar {
background: #2E2E2E;
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.dark-mode .master-console-overlay .sidebar-resize-handle:hover {
background: rgba(255, 255, 255, 0.3);
}
.dark-mode .master-console-overlay .main-content {
background: transparent;
}
.dark-mode .master-console-overlay .sidebar-bottom {
background: #2E2E2E;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.dark-mode .master-console-overlay .input-placeholder {
background: #1f1f1f;
border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.6);
}
.dark-mode .master-console-overlay .bottom-toolbar {
display: none;
}
.dark-mode .master-console-overlay .pipeline-step {
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .master-console-overlay .pipeline-step:hover {
background: rgba(255, 255, 255, 0.1);
}
.dark-mode .master-console-overlay .pipeline-step.active {
background: #111827;
color: white;
}
.dark-mode .master-console-overlay .pipeline-step-number {
background: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .master-console-overlay .pipeline-step.active .pipeline-step-number {
background: white;
color: #111827;
}
/* Dark mode sidebar chat text */
.dark-mode .master-console-overlay .agent-name {
color: rgba(255, 255, 255, 0.9);
}
.dark-mode .master-console-overlay .agent-time {
color: rgba(255, 255, 255, 0.5);
}
.dark-mode .master-console-overlay .agent-response {
color: rgba(255, 255, 255, 0.85);
}
.dark-mode .master-console-overlay .thinking-text {
color: rgba(255, 255, 255, 0.5);
}
.dark-mode .master-console-overlay .thinking-icon {
color: rgba(255, 255, 255, 0.5);
}
/* Dark mode input and textarea styling */
.dark-mode .master-console-overlay input,
.dark-mode .master-console-overlay textarea {
background: #1f1f1f !important;
color: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .master-console-overlay input::placeholder,
.dark-mode .master-console-overlay textarea::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
.dark-mode .master-console-overlay .title-input {
background: #1f1f1f !important;
color: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
/* Chat history message styling */
.dark-mode .master-console-overlay .chat-message.user {
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .master-console-overlay .chat-message.assistant {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Fix specific console input and button elements */
.dark-mode .master-console-overlay #consoleChatInput {
color: rgba(255, 255, 255, 0.9) !important;
}
.dark-mode .master-console-overlay #consoleChatInput::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Fix upload button (+ icon) color */
.dark-mode .master-console-overlay button svg {
stroke: rgba(255, 255, 255, 0.8) !important;
}
/* Fix send button background and icon */
.master-console-overlay button[onclick*="sendChatMessage"] {
background: #2E2E2E !important;
}
.dark-mode .master-console-overlay button[onclick*="sendChatMessage"] {
background: rgba(255, 255, 255, 0.6) !important;
}
.master-console-overlay button[onclick*="sendChatMessage"] svg {
color: var(--bg-primary) !important;
}
.dark-mode .master-console-overlay button[onclick*="sendChatMessage"] svg {
color: var(--bg-primary) !important;
}
/* Fix button text colors in dark mode */
.dark-mode .master-console-overlay button {
color: rgba(255, 255, 255, 0.8) !important;
}
.user-info {
color: white;
font-weight: bold;
font-size: 15px;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
gap: 5px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
transition: all 0.2s ease;
}
.user-info:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.02);
}
.hamburger-icon {
font-size: 16px;
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.2s ease;
}
.hamburger-icon:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.user-dropdown {
position: absolute;
top: 100%;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 200px;
z-index: 1000;
display: none;
margin-top: 5px;
}
/* Special positioning for console dropdown to prevent cutoff */
#consoleUserDropdown {
right: auto;
left: 0;
}
.user-dropdown.active {
display: block;
}
.dropdown-item {
padding: 12px 16px;
color: #333;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background-color 0.2s ease;
}
.dropdown-item:hover {
background: rgba(0, 0, 0, 0.05);
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-separator {
height: 1px;
background: rgba(0, 0, 0, 0.1);
margin: 0;
}
.user-profile {
padding: 16px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.user-profile:hover {
background: none !important;
cursor: default !important;
}
.user-subscription {
font-size: 10px;
color: #666;
margin-top: 4px;
padding: 2px 6px;
background: rgba(0, 150, 255, 0.1);
border: 1px solid rgba(0, 150, 255, 0.3);
border-radius: 4px;
display: inline-block;
}
/* ===== NEW USER DROPDOWN PANEL ===== */
.user-dropdown-panel {
position: absolute;
top: 50px;
right: 0;
width: 260px;
background: #1a1a24;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
z-index: 10000;
overflow: hidden;
font-family: 'Space Grotesk', sans-serif;
}
body:not(.dark-mode) .user-dropdown-panel {
background: #faf9f6;
border-color: rgba(0,0,0,0.08);
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.udd-header {
padding: 20px 20px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
body:not(.dark-mode) .udd-header { border-bottom-color: rgba(0,0,0,0.06); }
.udd-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.udd-name { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); }
body:not(.dark-mode) .udd-name { color: #1a1a1a; }
.udd-email { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 1px; }
body:not(.dark-mode) .udd-email { color: #999; }
.udd-btn-primary {
flex: 1; padding: 8px 0; border-radius: 8px;
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: #fff; border: none; font-size: 12px; font-weight: 600; cursor: pointer;
}
.udd-btn-primary:hover { opacity: 0.9; }
.udd-btn-secondary {
flex: 1; padding: 8px 0; border-radius: 8px;
background: transparent; color: rgba(255,255,255,0.6);
border: 1px solid rgba(255,255,255,0.1); font-size: 12px; font-weight: 500; cursor: pointer;
}
body:not(.dark-mode) .udd-btn-secondary { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.1); }
.udd-credits {
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.85);
}
body:not(.dark-mode) .udd-credits { border-bottom-color: rgba(0,0,0,0.06); color: #1a1a1a; }
.udd-credits-spent { color: rgba(255,255,255,0.6); }
.udd-credits-spent strong { color: rgba(255,255,255,0.9); }
body:not(.dark-mode) .udd-credits-spent { color: #666; }
body:not(.dark-mode) .udd-credits-spent strong { color: #1a1a1a; }
.udd-credits-limit { color: rgba(255,255,255,0.4); }
body:not(.dark-mode) .udd-credits-limit { color: #999; }
.udd-credits-bar-bg {
height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden;
}
body:not(.dark-mode) .udd-credits-bar-bg { background: rgba(0,0,0,0.06); }
.udd-credits-bar-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
transition: width 0.4s ease;
}
.udd-credits-bar-fill.high { background: linear-gradient(90deg, #ef4444, #f97316); }
.udd-menu { padding: 8px 0; }
.udd-menu-item {
display: flex; align-items: center; padding: 10px 20px; gap: 12px;
cursor: pointer; transition: background 0.15s, color 0.15s;
color: rgba(255,255,255,0.4); font-size: 13px; font-weight: 500;
}
.udd-menu-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); }
body:not(.dark-mode) .udd-menu-item { color: rgba(0,0,0,0.4); }
body:not(.dark-mode) .udd-menu-item:hover { background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.8); }
.udd-menu-item.udd-danger { color: #ef4444; }
.udd-menu-item.udd-danger:hover { background: rgba(239,68,68,0.06); color: #ef4444; }
.udd-menu-item span { flex: 1; }
.udd-badge {
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
background: rgba(99,102,241,0.15); color: #818cf8; flex: none !important;
}
.udd-toggle { margin-left: auto; flex: none; }
.udd-toggle-track {
width: 36px; height: 20px; border-radius: 10px;
background: rgba(255,255,255,0.1); position: relative;
cursor: pointer; transition: background 0.2s;
}
body:not(.dark-mode) .udd-toggle-track { background: rgba(0,0,0,0.1); }
.udd-toggle-track.active {
background: linear-gradient(135deg, #3b82f6, #6366f1);
}
.udd-toggle-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: #fff; position: absolute; top: 2px; left: 2px;
transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.udd-toggle-track.active .udd-toggle-thumb { transform: translateX(16px); }
.udd-avatar-ring {
position: relative; width: 48px; height: 48px; flex-shrink: 0;
}
.udd-ring-svg {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
transform: rotate(-90deg);
}
.udd-ring-bg { stroke: rgba(255,255,255,0.06); }
body:not(.dark-mode) .udd-ring-bg { stroke: rgba(0,0,0,0.06); }
.udd-ring-fill {
stroke: url(#uddCreditGrad);
stroke-linecap: round;
transition: stroke-dashoffset 0.4s ease;
}
.udd-avatar-inner {
position: absolute; top: 4px; left: 4px; width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 14px; font-weight: 700;
overflow: hidden; cursor: pointer;
}
.udd-avatar-inner img {
width: 100%; height: 100%; object-fit: cover;
}
/* Avatar crop modal */
.avatar-crop-overlay {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.avatar-crop-modal {
background: rgba(22,22,32,0.95);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
padding: 24px;
width: 340px;
max-width: 90vw;
}
body:not(.dark-mode) .avatar-crop-modal {
background: rgba(255,255,255,0.95);
border-color: rgba(0,0,0,0.08);
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.avatar-crop-title {
font-size: 16px; font-weight: 700;
color: rgba(255,255,255,0.9);
text-align: center; margin-bottom: 20px;
}
body:not(.dark-mode) .avatar-crop-title { color: #1a1a1a; }
.avatar-crop-preview {
width: 280px; height: 280px; margin: 0 auto;
position: relative; overflow: hidden;
border-radius: 12px;
background: #0a0a0f;
cursor: grab;
user-select: none; -webkit-user-select: none;
touch-action: none;
}
.avatar-crop-preview:active { cursor: grabbing; }
body:not(.dark-mode) .avatar-crop-preview { background: #e5e5e5; }
.avatar-crop-preview img {
position: absolute;
transform-origin: center center;
pointer-events: none;
will-change: transform;
}
.avatar-crop-circle-mask {
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(circle 100px at center, transparent 99px, rgba(0,0,0,0.55) 100px);
}
body:not(.dark-mode) .avatar-crop-circle-mask {
background: radial-gradient(circle 100px at center, transparent 99px, rgba(255,255,255,0.55) 100px);
}
.avatar-crop-circle-border {
position: absolute;
top: 50%; left: 50%;
width: 200px; height: 200px;
transform: translate(-50%, -50%);
border: 2px dashed rgba(255,255,255,0.3);
border-radius: 50%;
pointer-events: none;
}
body:not(.dark-mode) .avatar-crop-circle-border {
border-color: rgba(0,0,0,0.2);
}
.avatar-crop-zoom {
display: flex; align-items: center; gap: 10px;
margin: 16px auto; width: 280px; padding: 0 4px;
}
.avatar-crop-zoom svg {
flex-shrink: 0;
color: rgba(255,255,255,0.4);
}
body:not(.dark-mode) .avatar-crop-zoom svg { color: rgba(0,0,0,0.4); }
.avatar-crop-zoom input[type="range"] {
flex: 1; height: 4px;
-webkit-appearance: none; appearance: none;
background: rgba(255,255,255,0.1);
border-radius: 2px; outline: none;
}
body:not(.dark-mode) .avatar-crop-zoom input[type="range"] {
background: rgba(0,0,0,0.1);
}
.avatar-crop-zoom input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #6366f1);
cursor: pointer; border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.avatar-crop-actions {
display: flex; gap: 10px; margin-top: 20px;
}
.avatar-crop-cancel {
flex: 1; padding: 10px 0; border-radius: 8px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
font-size: 13px; font-weight: 500;
cursor: pointer; font-family: inherit;
}
body:not(.dark-mode) .avatar-crop-cancel {
border-color: rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
}
.avatar-crop-save {
flex: 1; padding: 10px 0; border-radius: 8px;
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: #fff; border: none;
font-size: 13px; font-weight: 600;
cursor: pointer; font-family: inherit;
transition: opacity 0.15s;
}
.avatar-crop-save:hover { opacity: 0.9; }
.udd-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0 12px; }
body:not(.dark-mode) .udd-divider { background: rgba(0,0,0,0.06); }
.agency-static-interface.active {
display: flex !important;
}
/* Hide video background in agency mode */
.agency-mode .background-video {
display: none;
}
/* Homepage drag overlay — full viewport */
#dragDropOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
text-align: center;
}
/* Homepage drag overlay is hidden/shown via JS based on console state */
/* Universal drag-drop overlay — shared by homepage and console */
.drag-drop-overlay .drop-content {
text-align: center;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.drag-drop-overlay .drop-label {
font-size: 18px;
font-weight: 500;
}
.drag-drop-overlay .drop-sublabel {
font-size: 13px;
margin-top: 8px;
}
/* Drag overlay frosted glass — matches .agency-chat-container */
.drag-drop-overlay {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border: none;
}
body:not(.dark-mode) .drag-drop-overlay {
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.drag-drop-overlay .drop-label {
color: rgba(255, 255, 255, 0.9);
}
.drag-drop-overlay .drop-sublabel {
color: rgba(255, 255, 255, 0.5);
}
body:not(.dark-mode) .drag-drop-overlay .drop-label {
color: rgba(0, 0, 0, 0.75);
}
body:not(.dark-mode) .drag-drop-overlay .drop-sublabel {
color: rgba(0, 0, 0, 0.45);
}
#consoleDragOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10001;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
text-align: center;
}
/* Console drag overlay inherits .drag-drop-overlay frosted glass styles */
/* Keep agency interface visible during drag so backdrop-filter can blur the video */
.agency-mode .upload-modal {
z-index: 9999;
}
/* Show nav elements in agency mode */
.agency-nav-elements {
pointer-events: auto;
position: fixed;
top: 20px;
left: 20px;
right: 20px;
z-index: 200;
display: none;
justify-content: space-between;
align-items: center;
}
.agency-mode .agency-nav-elements {
pointer-events: auto;
display: flex;
}
.agency-user-info {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 4px 4px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.9);
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
}
.agency-user-info:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.agency-user-avatar {
width: 28px;
height: 28px;
border-radius: 5px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 12px;
flex-shrink: 0;
}
.agency-user-name {
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
white-space: nowrap;
font-size: 13px;
text-transform: capitalize;
}
.agency-user-info .dropdown-icon {
width: 12px;
height: 12px;
stroke: white;
color: white;
transition: all 0.3s ease;
flex-shrink: 0;
}
body:not(.dark-mode) .agency-user-info .dropdown-icon {
stroke: white;
color: white;
}
body.dark-mode .agency-user-info .dropdown-icon {
stroke: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
}
/* Time-Adaptive Gradient Background with Animation */
.gradient-bg-day, .gradient-bg-night {
transition: opacity 0.25s ease;
}
.gradient-bg-day {
background: radial-gradient(circle at bottom,
rgba(88, 28, 135, 0.7) 0%,
rgba(76, 52, 138, 0.8) 25%,
rgba(130, 76, 160, 0.7) 50%,
rgba(214, 74, 149, 0.6) 75%,
rgba(255, 112, 112, 0.5) 100%);
background-size: 120% 120%;
animation: gradientShift 20s ease-in-out infinite;
}
.gradient-bg-night {
background: radial-gradient(circle at bottom,
rgba(76, 52, 138, 0.8) 0%,
rgba(88, 28, 135, 0.9) 25%,
rgba(130, 76, 160, 0.8) 50%,
rgba(214, 74, 149, 0.7) 75%,
rgba(255, 112, 112, 0.6) 100%);
background-size: 120% 120%;
animation: gradientShift 20s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% {
background-position: 0% 0%;
}
25% {
background-position: 50% 25%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 25% 75%;
}
}
/* Dark Mode Chat Console Styles */
.gradient-bg-night .agency-chat-input {
background: #303030 !important;
border: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.gradient-bg-night .agency-chat-input input {
color: #ffffff !important;
background: transparent !important;
}
.gradient-bg-night .agency-chat-input input::placeholder {
color: rgba(255,255,255,0.6) !important;
}
.gradient-bg-night .animated-placeholder {
color: #ffffff !important;
font-weight: 400 !important;
}
.gradient-bg-night .agency-chat-input button {
color: rgba(255,255,255,0.8) !important;
border: none !important;
outline: none !important;
}
.gradient-bg-night .agency-chat-input button:hover {
color: #ffffff !important;
background: rgba(255,255,255,0.1) !important;
}
.gradient-bg-night .agency-nav-item {
color: rgba(255,255,255,0.9) !important;
border-color: rgba(255,255,255,0.3) !important;
background: rgba(0,0,0,0.2) !important;
}
.gradient-bg-night .agency-nav-item:hover {
color: #ffffff !important;
background: rgba(255,255,255,0.1) !important;
}
/* Dark Mode Container Styles */
.gradient-bg-night .agency-unified-module {
background: #303030 !important;
border: none !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
}
/* Dark Mode Bottom Navigation - Fix white background */
.gradient-bg-night .agency-bottom-nav {
background: #333131 !important;
border: 1px solid rgba(255,255,255,0.2) !important;
}
/* Make navigation buttons dark grey in dark mode */
.gradient-bg-night .agency-nav-item:not(.center) {
background: #303030 !important;
color: rgba(255,255,255,0.9) !important;
border: none !important;
}
.gradient-bg-night .agency-nav-item.center {
background: #303030 !important;
color: rgba(255,255,255,0.9) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
}
/* Public Button Popup Modal */
.agency-content {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
position: fixed;
padding-top: 180px;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 100;
pointer-events: auto;
}
.agency-title {
color: white;
font-size: 3.5rem;
font-weight: 300;
margin: 0 0 10px 0;
letter-spacing: -0.02em;
}
.agency-title .versionary-text {
background: linear-gradient(45deg, #f97316, #dc2626);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.agency-subtitle {
display: none;
}
.agency-unified-module {
pointer-events: auto;
width: 60vw;
max-width: none;
background: #faf9f6 !important;
background: rgba(250, 249, 246, 0.95);
border: 1px solid rgba(0,0,0,0.12);
border-radius: 24px;
padding: 25px;
backdrop-filter: blur(12px);
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
margin: -15px auto 0 auto;
}
.agency-chat-input {
width: 100%;
background: #faf9f6 !important;
border-radius: 20px;
padding: 20px 24px;
display: flex;
align-items: flex-start;
gap: 14px;
backdrop-filter: blur(15px);
border: none !important;
min-height: 75px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
margin-bottom: 20px;
}
.agency-chat-input button {
background: none;
border: none;
color: #374151;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: all 0.2s ease;
}
.agency-chat-input button:hover {
color: #1f2937;
background: rgba(0,0,0,0.08);
}
.agency-chat-input input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: #333;
font-size: 16px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
line-height: 1.4;
display: none;
}
.agency-chat-input input::placeholder {
color: #666;
}
.animated-placeholder {
flex: 1;
color: #4b5563;
font-size: 13.5px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-style: italic;
line-height: 1.4;
display: flex;
align-items: center;
}
.animated-text {
display: inline-block;
position: relative;
}
.typing-text {
display: inline;
white-space: nowrap;
height: 1.2em;
vertical-align: bottom;
margin-left: 4px;
}
.text-carousel {
display: flex;
flex-direction: column;
animation: textSlide 4s infinite;
position: absolute;
top: 0;
}
@keyframes textSlide {
0%, 30% { transform: translateY(0); }
35%, 65% { transform: translateY(-100%); }
70%, 95% { transform: translateY(-200%); }
100% { transform: translateY(0); }
}
.carousel-item {
height: 1.2em;
display: flex;
align-items: center;
}
.agency-chat-input input::placeholder {
color: rgba(255,255,255,0.5);
}
.agency-submit-btn {
background: #333;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: white;
}
.agency-submit-btn:hover {
background: #faf9f6;
}
.agency-chat-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-radius: 28px;
padding: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.18);
pointer-events: auto;
position: relative;
z-index: 1;
}
.agency-textarea {
width: 100%;
padding: 8px;
border: none;
border-radius: 0;
font-size: 15px;
font-family: 'Space Grotesk', sans-serif;
background: transparent;
color: var(--text-primary);
box-sizing: border-box;
resize: none;
min-height: 80px;
margin-bottom: 8px;
}
.agency-textarea:focus {
outline: none;
background: transparent;
}
.agency-textarea::placeholder {
color: var(--text-secondary);
}
.agency-button-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.agency-button-group-left,
.agency-button-group-right {
display: flex;
gap: 6px;
align-items: center;
}
.agency-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 14px;
height: 36px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 9999px;
font-size: 13px;
font-weight: 500;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-primary);
pointer-events: auto;
position: relative;
z-index: 2;
}
.agency-action-btn:hover {
background: var(--bg-secondary);
border-color: var(--border-color);
}
.agency-action-btn:active {
opacity: 0.7;
}
.agency-action-btn svg {
flex-shrink: 0;
}
.agency-icon-btn {
width: 36px;
padding: 0;
gap: 0;
}
.agency-send-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 0;
width: 36px;
height: 36px;
background: #2E2E2E;
color: white;
border: none;
border-radius: 9999px;
font-size: 14px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
pointer-events: auto;
position: relative;
z-index: 2;
}
.dark-mode .agency-send-btn {
background: rgba(255, 255, 255, 0.6);
}
.agency-send-btn:hover {
opacity: 0.9;
}
.agency-send-btn:active {
opacity: 0.8;
}
.agency-send-btn svg {
flex-shrink: 0;
color: var(--bg-primary);
}
.dark-mode .agency-chat-container {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
body:not(.dark-mode) .agency-chat-container {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.console-chat-container {
width: 100%;
margin: 0 auto;
background: var(--bg-primary);
border-radius: 16px;
padding: 6px;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.1),
0 0 0 1px var(--border-color);
pointer-events: auto;
position: relative;
z-index: 1;
}
#consoleChatInput.console-textarea {
width: 100%;
padding: 10px 8px;
border: none !important;
border-radius: 0;
font-size: 15px;
font-family: 'Space Grotesk', sans-serif;
background: none !important;
color: var(--text-primary);
transition: all 0.3s ease;
box-sizing: border-box;
resize: none;
min-height: 40px;
margin-bottom: 12px;
}
.console-textarea:focus {
outline: none;
background: var(--bg-primary);
}
.console-textarea::placeholder {
color: var(--text-secondary);
}
.console-button-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.console-button-group-left,
.console-button-group-right {
display: flex;
gap: 4px;
align-items: center;
}
.console-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 10px;
height: 28px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-primary);
pointer-events: auto;
position: relative;
z-index: 2;
}
.console-action-btn:hover {
background: var(--bg-secondary);
border-color: var(--border-color);
}
.console-action-btn:active {
opacity: 0.7;
}
.console-action-btn svg {
flex-shrink: 0;
}
.console-icon-btn {
width: 28px;
padding: 0;
gap: 0;
}
#consoleSubmitBtn.console-send-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 0;
width: 28px;
height: 28px;
background: #2E2E2E;
color: #ffffff !important;
border: none;
border-radius: 9999px;
font-size: 12px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
pointer-events: auto;
position: relative;
z-index: 2;
}
.dark-mode #consoleSubmitBtn.console-send-btn {
background: rgba(255, 255, 255, 0.6) !important;
}
.dark-mode #consoleSubmitBtn.console-send-btn svg {
color: #2E2E2E !important;
fill: #2E2E2E !important;
stroke: #2E2E2E !important;
}
.console-send-btn:hover {
opacity: 0.9;
}
.console-send-btn:active {
opacity: 0.8;
}
.console-send-btn svg {
flex-shrink: 0;
}
.dark-mode .console-chat-container {
background: var(--bg-primary);
}
.agency-bottom-container {
position: relative;
width: 66.67vw;
max-width: none;
margin: 0 auto;
}
/* ===== DASHBOARD FULL-SCREEN OVERLAY ===== */
.dashboard-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10001;
display: none;
transform: translateY(100%);
transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
font-family: 'Space Grotesk', sans-serif;
pointer-events: none;
}
.dashboard-overlay.dashboard-open {
transform: translateY(0);
pointer-events: auto;
}
.dashboard-overlay.dashboard-open ~ #v2ArtifactToggle,
.dashboard-overlay.dashboard-open ~ #v2SidebarToggle {
display: none !important;
}
body:not(.dark-mode) .dashboard-overlay {
background: rgba(245, 245, 247, 0.95);
}
.dashboard-overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 32px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body:not(.dark-mode) .dashboard-overlay-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.dashboard-overlay-title {
font-size: 20px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
body:not(.dark-mode) .dashboard-overlay-title {
color: rgba(0, 0, 0, 0.85);
}
.dashboard-overlay-close {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255, 255, 255, 0.7);
transition: background 200ms;
}
.dashboard-overlay-close:hover {
background: rgba(255, 255, 255, 0.2);
}
body:not(.dark-mode) .dashboard-overlay-close {
background: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.6);
}
body:not(.dark-mode) .dashboard-overlay-close:hover {
background: rgba(0, 0, 0, 0.12);
}
.dashboard-overlay-content {
padding: 24px 32px;
overflow-y: auto;
height: auto;
flex: 1;
}
.dashboard-overlay-content .dashboard-grid {
/* grid is now built inline by buildJobCardsHTML */
}
.dashboard-job-card {
transition: transform 0.15s;
}
.dashboard-job-card:hover {
transform: translateY(-2px);
}
.dashboard-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: rgba(255, 255, 255, 0.4);
font-size: 15px;
}
body:not(.dark-mode) .dashboard-empty {
color: rgba(0, 0, 0, 0.35);
}
.dashboard-skeleton-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
height: 220px;
animation: skeletonPulse 1.5s ease-in-out infinite;
}
body:not(.dark-mode) .dashboard-skeleton-card {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.dash-sidebar-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.4);
cursor: pointer;
transition: all 0.15s;
}
.dash-sidebar-item:hover {
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.8);
}
.dash-sidebar-item.active {
background: rgba(59,130,246,0.08);
color: #3b82f6;
border-right: 2px solid #3b82f6;
}
body:not(.dark-mode) .dash-sidebar-item {
color: rgba(0,0,0,0.4);
}
body:not(.dark-mode) .dash-sidebar-item:hover {
background: rgba(0,0,0,0.04);
color: rgba(0,0,0,0.8);
}
body:not(.dark-mode) .dash-sidebar-item.active {
background: rgba(59,130,246,0.06);
color: #3b82f6;
}
#dashboardSidebar {
border-right: 1px solid rgba(255,255,255,0.06);
}
.dash-sidebar-header {
color: rgba(255,255,255,0.3);
}
body:not(.dark-mode) #dashboardSidebar {
border-right-color: rgba(0,0,0,0.08);
}
body:not(.dark-mode) .dash-sidebar-header {
color: rgba(0,0,0,0.35);
}
/* ===== SETTINGS PAGE (Freepik-style) ===== */
.settings-page {
width: 100%; height: 100%; display: flex; flex-direction: column;
background: #0d0d14; color: rgba(255,255,255,0.85);
}
body:not(.dark-mode) .settings-page { background: #f8f8f8; color: #1a1a1a; }
.settings-header {
display: flex; align-items: center; padding: 16px 32px;
border-bottom: 1px solid rgba(255,255,255,0.06); gap: 8px;
}
body:not(.dark-mode) .settings-header { border-bottom-color: rgba(0,0,0,0.06); }
.settings-breadcrumb { font-size: 13px; color: rgba(255,255,255,0.4); cursor: pointer; }
body:not(.dark-mode) .settings-breadcrumb { color: #999; }
.settings-breadcrumb-sep { font-size: 13px; color: rgba(255,255,255,0.2); }
body:not(.dark-mode) .settings-breadcrumb-sep { color: #ccc; }
.settings-breadcrumb-active { font-size: 13px; font-weight: 600; }
.dash-wordmark {
height: 16px; margin-left: auto; opacity: 0.4;
filter: brightness(0) invert(1);
}
body:not(.dark-mode) .dash-wordmark {
filter: brightness(0);
}
.settings-close {
background: none; border: none; font-size: 18px;
color: rgba(255,255,255,0.4); cursor: pointer; padding: 4px 8px;
}
body:not(.dark-mode) .settings-close { color: #999; }
.settings-layout { display: flex; flex: 1; overflow: hidden; }
.settings-sidebar {
width: 220px; flex-shrink: 0; padding: 24px 16px;
border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto;
}
body:not(.dark-mode) .settings-sidebar { border-right-color: rgba(0,0,0,0.06); }
.settings-sidebar-group { margin-bottom: 24px; }
.settings-sidebar-label {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
color: rgba(255,255,255,0.3); padding: 0 12px; margin-bottom: 8px;
}
body:not(.dark-mode) .settings-sidebar-label { color: #999; }
.settings-sidebar-item {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
color: rgba(255,255,255,0.5); transition: all 0.15s;
}
body:not(.dark-mode) .settings-sidebar-item { color: rgba(0,0,0,0.5); }
.settings-sidebar-item:hover {
background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8);
}
body:not(.dark-mode) .settings-sidebar-item:hover {
background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.8);
}
.settings-sidebar-item.active {
background: rgba(99,102,241,0.1); color: #818cf8;
}
body:not(.dark-mode) .settings-sidebar-item.active {
background: rgba(99,102,241,0.08); color: #6366f1;
}
.settings-content { flex: 1; overflow-y: auto; padding: 32px 48px; }
.settings-section { display: none; }
.settings-section.active { display: block; }
.settings-title { font-size: 22px; font-weight: 700; margin: 0 0 16px 0; }
.settings-subtitle { font-size: 16px; font-weight: 600; margin: 16px 0 12px 0; }
.settings-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 16px 0; }
body:not(.dark-mode) .settings-divider { background: rgba(0,0,0,0.06); }
.settings-field-group { margin-bottom: 20px; }
.settings-label {
display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px;
color: rgba(255,255,255,0.5);
}
body:not(.dark-mode) .settings-label { color: #666; }
.settings-input {
width: 100%; max-width: 400px; padding: 10px 14px; border-radius: 8px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.85); font-size: 13px; font-family: inherit;
}
body:not(.dark-mode) .settings-input {
background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: #1a1a1a;
}
.settings-row {
display: flex; align-items: center; justify-content: space-between; padding: 12px 0;
}
.settings-text-primary { color: rgba(255,255,255,0.85); }
body:not(.dark-mode) .settings-text-primary { color: #1a1a1a; }
.settings-text-muted { color: rgba(255,255,255,0.4); }
body:not(.dark-mode) .settings-text-muted { color: #999; }
.settings-description { font-size: 13px; color: rgba(255,255,255,0.4); margin: 4px 0; }
body:not(.dark-mode) .settings-description { color: #999; }
.settings-btn-outline {
padding: 8px 20px; border-radius: 8px; background: transparent;
border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
}
body:not(.dark-mode) .settings-btn-outline {
border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.5);
}
.settings-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-connected-badge {
font-size: 11px; padding: 3px 10px; border-radius: 12px;
background: rgba(34,197,94,0.1); color: #22c55e;
}
.settings-session-row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-radius: 8px; background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.04); font-size: 13px;
}
body:not(.dark-mode) .settings-session-row {
background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.04);
}
.settings-session-active { color: #22c55e; font-size: 12px; }
.settings-member-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.settings-credits-bar-bg {
height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden;
}
body:not(.dark-mode) .settings-credits-bar-bg { background: rgba(0,0,0,0.06); }
.settings-credits-bar-fill {
height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}
.settings-danger-zone {
padding: 16px 20px; border-radius: 12px;
border: 1px solid rgba(239,68,68,0.2); background: rgba(239,68,68,0.03);
}
.settings-avatar-display { margin-bottom: 8px; }
#settingsJobGrid { margin-top: 16px; }
.settings-badge-muted {
font-size: 11px; padding: 2px 8px; border-radius: 4px;
background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
}
body:not(.dark-mode) .settings-badge-muted {
background: rgba(0,0,0,0.04); color: #999;
}
@keyframes skeletonPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
.agency-feature-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 9999px;
padding: 12px;
margin: 0 auto 24px auto;
font-family: 'Space Grotesk', sans-serif;
backdrop-filter: blur(6px) drop-shadow(10px 4px 8px rgba(0, 0, 0, 0.9));
}
.agency-badge-text {
color: rgba(255, 255, 255, 0.95);
font-size: 14px;
}
.agency-badge-text span {
font-weight: 600;
color: #FEFBEA;
text-transform: capitalize;
}
.agency-screen-logo {
max-width: 500px;
width: auto;
margin: 0 auto 10px auto;
display: block;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
}
.agency-main-title {
color: #FEFBEA;
font-size: 5.19rem;
font-weight: 400;
margin: 0 auto 20px auto;
letter-spacing: -0.02em;
font-family: 'Jersey 25', sans-serif;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
text-align: center;
}
.agency-main-title #dynamicUserName {
color: #FEFBEA;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
font-family: inherit;
text-shadow: inherit;
}
.agency-subtitle {
color: rgba(255,255,255,0.7);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
font-size: 0.975rem;
margin: 0 auto 16px auto;
font-weight: 500;
font-family: 'Space Grotesk', sans-serif;
display: block;
text-align: center;
max-width: 500px;
width: 100%;
}
.agency-chat-header {
color: white;
font-size: 2.5rem;
font-weight: 300;
text-align: center;
margin-bottom: 10px;
letter-spacing: -0.02em;
display: none;
}
.agency-chat-header .versionary-text {
background: linear-gradient(45deg, #f97316, #dc2626);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.agency-bottom-nav {
width: calc(100% - 40px);
max-width: 800px;
height: 60px;
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 0 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(0,0,0,0.15);
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.agency-nav-item:not(.center) {
color: #555;
font-weight: 600;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
padding: 6px 12px;
border-radius: 10px;
text-align: center;
line-height: 1.2;
flex: 1;
margin: 0 3px;
border: none !important;
position: relative;
overflow: hidden;
}
.agency-nav-item::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(92, 230, 92, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
opacity: 0;
pointer-events: none;
}
.agency-nav-item.clicked::after {
width: 200%;
height: 200%;
opacity: 1;
}
/* Active state */
.agency-nav-item:active {
transform: scale(0.95);
}
.agency-nav-item.center {
color: #333;
font-weight: 600;
font-size: 9px;
cursor: pointer;
transition: all 0.3s ease;
padding: 9px 12px;
border-radius: 10px;
text-align: center;
line-height: 1.2;
flex: 1.125;
margin: 0 3px;
background: #e9ecef;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.05) !important;
display: flex;
align-items: center;
}
.agency-nav-item:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.05);
}
.agency-nav-item.center {
background: #e9ecef;
color: #333;
font-size: 9px;
padding: 9px 12px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.05);
flex: 1.125;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 4px;
min-height: 54px;
}
.loading-spinner {
width: 12px;
height: 12px;
border: 2px solid #ccc;
border-top: 2px solid #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes reframeGrabPulse {
0%, 100% { border-color: rgba(0, 255, 0, 0.8); box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.3); }
50% { border-color: rgba(0, 255, 0, 0.4); box-shadow: inset 0 0 4px rgba(0, 255, 0, 0.1); }
}
.agency-nav-item.center:hover {
background: rgba(255,255,255,0.4);
transform: scale(1.08);
}
/* Responsive design for toggle */
@media (max-width: 768px) {
.tier-toggle {
pointer-events: auto;
width: 160px;
height: 35px;
top: 12px;
}
.tier-option {
font-size: 0.7rem;
padding: 4px 8px;
}
.agency-workflow {
width: 66.67%;
height: 60px;
padding: 0 10px;
}
.workflow-step {
font-size: 11px;
padding: 6px 8px;
margin: 0 2px;
min-height: 30px;
}
.workflow-step.center-chat {
font-size: 11px;
padding: 6px 8px;
margin: 0 2px;
line-height: 1.2;
text-align: center;
gap: 4px;
}
.workflow-step.center-chat span {
font-size: 11px !important;
font-weight: bold !important;
}
.agency-title {
font-size: 2.5rem;
}
.agency-content {
padding-top: 120px;
}
.agency-subtitle {
font-size: 1rem;
max-width: 300px;
}
.agency-bottom-container {
width: 85%;
}
.agency-bottom-nav {
height: 60px;
padding: 0 10px;
}
.agency-nav-item {
font-size: 11px;
padding: 6px 8px;
margin: 0 2px;
}
.agency-nav-item.center {
font-size: 10px;
padding: 9px 12px;
min-height: 45px;
}
.agency-feature-badge {
padding: 6px 12px;
margin-bottom: 12px;
}
.agency-badge-text {
font-size: 12px;
}
.agency-screen-logo {
max-width: 280px;
margin-bottom: 20px;
}
.agency-main-title {
font-size: 3.33rem;
font-family: 'Jersey 25', sans-serif;
font-weight: 400;
color: #FEFBEA;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
margin-bottom: 16px;
}
.agency-main-title #dynamicUserName {
color: #FEFBEA;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
font-family: inherit;
text-shadow: inherit;
}
.agency-subtitle {
color: rgba(255,255,255,0.8);
font-size: 1.040rem;
margin-bottom: 30px;
font-weight: 300;
font-family: 'Space Grotesk', sans-serif;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.agency-chat-header {
font-size: 2rem;
}
}
/* Professional Master Console Styles */
/* Master Console Overlay - Y2K Professional Interface */
.master-console-overlay {
display: none;
background: #faf9f6;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
font-family: 'Space Grotesk', sans-serif;
}
.master-console-overlay.active {
display: block;
}
/* Top Header */
.master-console-overlay .top-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
background: #faf9f6;
border-bottom: 1px solid #e2e0d9;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 13px;
z-index: 1000;
}
.master-console-overlay .header-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.master-console-overlay .header-center {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.user-greeting-container {
position: relative;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background-color 0.2s;
min-height: 40px;
}
.user-greeting-container:hover {
background: rgba(0, 0, 0, 0.05);
}
.master-console-overlay .project-icon {
width: 28px;
height: 28px;
object-fit: contain;
display: block;
filter: brightness(0);
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%); }
100% { transform: translateX(100%) translateY(100%); }
}
@keyframes ellipses {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
.loading-preview .ellipses::after,
.master-console-overlay .loading-preview .ellipses::after {
content: '';
animation: ellipses 1.5s infinite;
}
.master-console-overlay .project-name {
font-size: 14px;
font-weight: 500;
color: #111827;
}
.dropdown-icon {
color: #6b7280;
width: 12px;
height: 12px;
transition: transform 0.2s ease;
}
/* Hover effects for dropdown containers */
.user-info:hover .dropdown-icon,
.user-greeting-container:hover .dropdown-icon {
transform: rotate(180deg);
}
.master-console-overlay .dropdown-icon {
color: #6b7280;
width: 12px;
height: 12px;
}
.master-console-overlay .loading-preview {
font-size: 13px;
color: #6b7280;
}
.master-console-overlay .header-right {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
justify-content: flex-end;
}
/* Header Text Stack */
.master-console-overlay .header-text-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Restore Loading Preview Styling */
.master-console-overlay .loading-preview {
font-size: 9px;
color: #6b7280;
margin-top: 0px;
}
.master-console-overlay .header-btn {
background: none;
border: none;
padding: 6px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
font-weight: 500;
}
.master-console-overlay .console-close-btn {
background: #ef4444;
color: white;
}
.master-console-overlay .invite-btn {
background: #3b82f6;
color: white;
}
.master-console-overlay .upgrade-btn {
color: #6b7280;
opacity: 0.4;
pointer-events: none;
cursor: default;
}
.master-console-overlay .reset-btn {
background: #f59e0b;
color: white;
}
.master-console-overlay .reset-btn:hover {
background: #d97706;
}
/* Main Container */
.master-console-overlay .main-container {
display: flex;
height: calc(100vh - 48px);
padding-top: 0;
position: fixed;
top: 48px;
left: 0;
right: 0;
}
/* Left Sidebar */
.master-console-overlay .left-sidebar {
width: var(--sidebar-width);
min-width: 15vw;
background: #f5f4ef;
display: flex;
flex-direction: column;
border-right: 1px solid #e2e0d9;
height: 100%;
overflow-y: auto;
position: relative;
}
/* Resize Handle */
.sidebar-resize-handle {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: transparent;
cursor: col-resize;
z-index: 1001;
transition: background-color 0.2s;
}
.sidebar-resize-handle:hover {
background: #e2e0d9;
}
/* Sidebar Collapse Toggle — half-circle tab on main-container */
.sidebar-collapse-toggle {
position: absolute;
left: var(--sidebar-width);
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 48px;
border-radius: 0 10px 10px 0;
background: #21262d;
border: 1px solid #30363d;
border-left: none;
color: #7d8590;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1010;
transition: background 0.2s, color 0.2s, width 0.2s, left 0.3s ease;
padding: 0;
font-size: 14px;
line-height: 1;
box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}
.sidebar-collapse-toggle:hover {
background: #30363d;
color: #c9d1d9;
width: 22px;
}
body:not(.dark-mode) .sidebar-collapse-toggle {
background: #eae8e1;
border-color: #d5d3cc;
color: #656d76;
box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}
body:not(.dark-mode) .sidebar-collapse-toggle:hover {
background: #dddbd4;
color: #24292f;
}
/* Sidebar collapsed state */
.left-sidebar.sidebar-collapsed {
width: 40px !important;
min-width: 40px !important;
overflow: hidden !important;
}
.left-sidebar.sidebar-collapsed .ai-agent-section,
.left-sidebar.sidebar-collapsed .user-input-section,
.left-sidebar.sidebar-collapsed .sidebar-bottom,
.left-sidebar.sidebar-collapsed .sidebar-resize-handle,
.left-sidebar.sidebar-collapsed .agent-header,
.left-sidebar.sidebar-collapsed .cost-notice,
.left-sidebar.sidebar-collapsed .input-area {
display: none !important;
}
.sidebar-collapsed-badge {
display: none;
flex-direction: column;
align-items: center;
height: 100%;
color: #7d8590;
padding: 12px 0;
}
.left-sidebar.sidebar-collapsed .sidebar-collapsed-badge {
display: flex;
}
/* Top section: logo + text, pinned to top */
.sidebar-collapsed-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.sidebar-collapsed-badge-icon {
width: 24px;
height: 24px;
background: none;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-collapsed-badge-text {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: #484f58;
font-weight: 600;
}
body:not(.dark-mode) .sidebar-collapsed-badge-text { color: #8b8b85; }
/* Middle section: history icon + dots, centered */
.sidebar-collapsed-middle {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
/* Bottom section: user avatar, pinned to bottom */
.sidebar-collapsed-bottom {
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar-collapsed-user-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: #30363d;
border: 1px solid #484f58;
color: #c9d1d9;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.sidebar-collapsed-user-icon:hover {
background: #484f58;
}
body:not(.dark-mode) .sidebar-collapsed-user-icon {
background: #eae8e1;
border-color: #d5d3cc;
color: #2c2c2a;
}
body:not(.dark-mode) .sidebar-collapsed-user-icon:hover {
background: #d5d3cc;
}
/* Mode toggle (Chat / Sliders) */
.mode-toggle {
display: flex;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
padding: 3px;
gap: 3px;
margin: 10px 16px;
}
.mode-btn {
flex: 1;
padding: 7px 10px;
border-radius: 6px;
border: none;
background: transparent;
color: #7a7d82;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.mode-btn.active {
background: rgba(255,255,255,0.06);
color: #f0f0f0;
border: 1px solid rgba(255,255,255,0.1);
}
.mode-btn.active.sliders-mode {
background: rgba(255, 107, 43, 0.15);
color: #FF6B2B;
border-color: rgba(255, 107, 43, 0.4);
}
body:not(.dark-mode) .mode-toggle {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.08);
}
body:not(.dark-mode) .mode-btn {
color: #5f5e5a;
}
body:not(.dark-mode) .mode-btn.active {
background: #faf9f6;
color: #2c2c2a;
border-color: rgba(0,0,0,0.12);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
body:not(.dark-mode) .mode-btn.active.sliders-mode {
background: rgba(255, 107, 43, 0.1);
color: #FF6B2B;
border-color: rgba(255, 107, 43, 0.3);
}
.left-sidebar.sidebar-collapsed .mode-toggle {
display: none;
}
/* ── Chat History (inside Verne collapsed sidebar) ── */
.collapsed-history-divider { background: rgba(255,255,255,0.1); }
body:not(.dark-mode) .collapsed-history-divider { background: rgba(0,0,0,0.1); }
.collapsed-history-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
opacity: 0.5;
color: #7d8590;
margin-top: 4px;
}
.collapsed-history-icon:hover { opacity: 1; }
.dark-mode .collapsed-history-icon:hover { background: rgba(255,255,255,0.08); }
body:not(.dark-mode) .collapsed-history-icon:hover { background: rgba(0,0,0,0.06); }
.collapsed-history-dots {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin-top: 6px;
}
.collapsed-history-dot {
width: 8px;
height: 8px;
border-radius: 50%;
cursor: pointer;
transition: transform 0.15s;
}
.collapsed-history-dot:hover { transform: scale(1.5); }
/* History panel inside expanded Verne sidebar */
.verne-history-panel {
display: none;
flex-direction: column;
flex: 1;
min-height: 0;
}
.verne-history-header {
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
body:not(.dark-mode) .verne-history-header {
border-bottom-color: rgba(0,0,0,0.06);
}
.verne-history-back {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #c9d1d9;
}
body:not(.dark-mode) .verne-history-back { color: #24292f; }
.verne-history-back:hover { opacity: 0.8; }
.verne-history-search {
padding: 8px 12px;
}
.verne-history-search input {
width: 100%;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
outline: none;
box-sizing: border-box;
}
.dark-mode .verne-history-search input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: #c9d1d9;
}
body:not(.dark-mode) .verne-history-search input {
background: rgba(0,0,0,0.03);
border: 1px solid rgba(0,0,0,0.1);
color: #24292f;
}
.verne-history-list {
flex: 1;
overflow-y: auto;
padding: 0;
}
.chat-history-group-header {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 12px 14px 4px;
opacity: 0.5;
font-weight: 600;
}
.chat-history-item {
padding: 10px 14px;
cursor: pointer;
border-left: 2px solid transparent;
border-radius: 0;
transition: all 0.15s;
}
.dark-mode .chat-history-item:hover { background: rgba(255,255,255,0.04); }
body:not(.dark-mode) .chat-history-item:hover { background: rgba(0,0,0,0.03); }
.chat-history-item.active {
border-left-color: #8b5cf6;
}
.dark-mode .chat-history-item.active { background: rgba(139,92,246,0.08); }
body:not(.dark-mode) .chat-history-item.active { background: rgba(139,92,246,0.06); }
.chat-history-item-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 2px;
}
.chat-history-item-name {
font-weight: 600;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
margin-right: 8px;
}
.chat-history-item-time {
font-size: 11px;
opacity: 0.5;
flex-shrink: 0;
}
.chat-history-item-preview {
font-size: 12px;
opacity: 0.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-history-item-pills {
display: flex;
gap: 4px;
margin-top: 4px;
}
.chat-history-pill {
font-size: 9px;
padding: 1px 5px;
border-radius: 6px;
font-weight: 500;
}
.verne-history-footer {
padding: 10px 12px;
border-top: 0.5px solid rgba(255,255,255,0.08);
}
body:not(.dark-mode) .verne-history-footer {
border-top-color: rgba(0,0,0,0.08);
}
.verne-history-new-btn {
width: 100%;
padding: 7px;
border-radius: 6px;
border: 0.5px solid rgba(255,255,255,0.15);
background: transparent;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #c9d1d9;
transition: background 0.15s;
}
.verne-history-new-btn:hover { background: rgba(255,255,255,0.06); }
body:not(.dark-mode) .verne-history-new-btn {
border-color: rgba(0,0,0,0.12);
color: #2c2c2a;
}
body:not(.dark-mode) .verne-history-new-btn:hover { background: rgba(0,0,0,0.04); }
/* Slider Panel */
.vs-slider-context {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255,107,43,0.08);
border: 1px solid rgba(255,107,43,0.25);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 16px;
}
.vs-slider-context-label {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #7a7d82;
margin-bottom: 2px;
}
.vs-slider-context-val {
font-size: 13px;
font-weight: 700;
color: #FF6B2B;
}
.vs-fmt-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.vs-fmt-chip {
padding: 4px 9px;
border-radius: 4px;
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.08);
background: transparent;
color: #7a7d82;
cursor: pointer;
transition: all 0.15s;
}
.vs-fmt-chip.active {
background: rgba(255,107,43,0.15);
border-color: rgba(255,107,43,0.4);
color: #FF6B2B;
}
.vs-override-indicator {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
background: rgba(34,197,94,0.08);
border: 1px solid rgba(34,197,94,0.2);
border-radius: 6px;
font-size: 10px;
color: #22c55e;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.vs-override-indicator::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
}
.vs-slider-group { margin-bottom: 22px; }
.vs-slider-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 9px;
}
.vs-slider-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b0b3b8;
}
.vs-slider-val { font-size: 11px; color: #FF6B2B; min-width: 40px; text-align: right; }
.vs-slider-val.at-zero { color: #7a7d82; }
.vs-slider-track-wrap { position: relative; height: 28px; display: flex; align-items: center; }
.vs-slider-track {
position: relative;
flex: 1;
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
cursor: pointer;
}
.vs-slider-center-mark {
position: absolute;
left: 50%; top: -4px; bottom: -4px;
width: 1px;
background: rgba(255,255,255,0.12);
pointer-events: none;
}
.vs-slider-fill {
position: absolute;
height: 100%;
background: #FF6B2B;
border-radius: 2px;
pointer-events: none;
transition: left 0.04s, width 0.04s;
}
.vs-slider-fill-zoom { left: 0; width: 0; }
.vs-slider-thumb {
position: absolute;
top: 50%; transform: translate(-50%, -50%);
width: 15px; height: 15px;
border-radius: 50%;
background: #FF6B2B;
border: 2px solid rgba(0,0,0,0.3);
pointer-events: none;
transition: left 0.04s;
}
.vs-slider-track input[type=range] {
position: absolute; inset: 0;
width: 100%; height: 100%;
opacity: 0; cursor: pointer; margin: 0;
}
.vs-slider-ends {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #555;
letter-spacing: 0.05em;
margin-top: 4px;
}
.vs-slider-actions {
display: flex;
gap: 8px;
margin-top: 4px;
margin-bottom: 8px;
}
.vs-action-btn {
flex: 1;
padding: 9px 12px;
border-radius: 7px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
color: #7a7d82;
font-size: 10px;
letter-spacing: 0.07em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.vs-action-btn:hover { color: #f0f0f0; border-color: rgba(255,255,255,0.15); }
.vs-reset-btn { flex: 0 0 auto; padding: 9px 14px; }
.vs-apply-btn {
background: #FF6B2B;
border-color: #FF6B2B;
color: #fff;
font-weight: 600;
}
.vs-apply-btn:hover { opacity: 0.85; }
.vs-slider-footnote {
font-size: 9px;
color: #555;
text-align: center;
line-height: 1.6;
letter-spacing: 0.04em;
margin-bottom: 20px;
}
/* Live reframe preview */
#previewMonitor {
overflow: hidden;
}
#previewMonitor video {
transform-origin: center center;
transition: transform 0.08s ease;
will-change: transform;
}
.vs-crop-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
}
.vs-crop-box {
position: absolute;
border: 2px solid #FF6B2B;
box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
transition: all 0.08s ease;
pointer-events: none;
}
.vs-crop-label {
position: absolute;
top: -22px;
left: 0;
font-size: 9px;
color: #FF6B2B;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(0,0,0,0.6);
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
/* Hot Swap */
.vs-hotswap-section {
border-top: 1px solid rgba(255,255,255,0.07);
padding-top: 18px;
margin-top: 4px;
}
.vs-hotswap-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.vs-hotswap-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #b0b3b8;
display: flex;
align-items: center;
gap: 7px;
}
.vs-hs-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #3b82f6;
box-shadow: 0 0 6px rgba(59,130,246,0.6);
}
.vs-lang-badge {
font-size: 9px;
padding: 3px 9px;
border-radius: 4px;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.25);
color: #3b82f6;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
}
.vs-lang-badge:hover { background: rgba(59,130,246,0.22); }
.vs-drop-zone {
border: 1.5px dashed rgba(59,130,246,0.3);
border-radius: 10px;
background: rgba(59,130,246,0.04);
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
font-size: 12px;
color: #7a7d82;
}
.vs-drop-zone:hover, .vs-drop-zone.drag-over {
border-color: rgba(59,130,246,0.7);
background: rgba(59,130,246,0.1);
}
.vs-drop-zone.has-file {
border: 1.5px solid rgba(34,197,94,0.45);
background: rgba(34,197,94,0.05);
}
.vs-drop-zone strong { color: #3b82f6; }
.vs-drop-zone.has-file strong { color: #22c55e; }
.vs-drop-icon { font-size: 18px; opacity: 0.5; }
.vs-drop-subtext { font-size: 9px; opacity: 0.5; letter-spacing: 0.06em; }
.vs-file-thumb {
width: 44px; height: 30px;
border-radius: 4px;
background: rgba(34,197,94,0.1);
border: 1px solid rgba(34,197,94,0.3);
display: flex; align-items: center; justify-content: center;
font-size: 8px; color: #22c55e;
font-weight: 600; letter-spacing: 0.06em;
flex-shrink: 0;
}
.vs-file-name {
font-size: 10px; color: #f0f0f0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 2px;
}
.vs-file-meta { font-size: 9px; color: #555; }
.vs-file-clear {
width: 20px; height: 20px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: #7a7d82; font-size: 10px;
cursor: pointer; display: flex;
align-items: center; justify-content: center;
flex-shrink: 0; transition: all 0.15s;
}
.vs-file-clear:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #ef4444; }
.vs-hotswap-note {
font-size: 9px; color: #555;
text-align: center; line-height: 1.6;
letter-spacing: 0.04em; margin-top: 8px;
}
/* Light mode overrides for sliders/hotswap */
body:not(.dark-mode) .vs-slider-label { color: #374151; }
body:not(.dark-mode) .vs-slider-track { background: rgba(0,0,0,0.08); }
body:not(.dark-mode) .vs-slider-center-mark { background: rgba(0,0,0,0.1); }
body:not(.dark-mode) .vs-slider-ends { color: #9ca3af; }
body:not(.dark-mode) .vs-slider-footnote { color: #9ca3af; }
body:not(.dark-mode) .vs-hotswap-note { color: #9ca3af; }
body:not(.dark-mode) .vs-file-meta { color: #9ca3af; }
body:not(.dark-mode) .vs-file-name { color: #1f2937; }
body:not(.dark-mode) .vs-slider-context { background: rgba(255,107,43,0.06); }
body:not(.dark-mode) .vs-action-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #6b7280; }
body:not(.dark-mode) .vs-action-btn:hover { color: #1f2937; border-color: rgba(0,0,0,0.2); }
body:not(.dark-mode) .vs-hotswap-section { border-color: rgba(0,0,0,0.08); }
body:not(.dark-mode) .vs-fmt-chip { border-color: rgba(0,0,0,0.1); color: #6b7280; }
/* Smooth transitions for sidebar and dependent elements */
.master-console-overlay .left-sidebar {
transition: width 0.3s ease, min-width 0.3s ease;
}
.pipeline-content,
#consoleLoaderOverlay {
transition: left 0.3s ease, width 0.3s ease;
}
/* User Input Section */
.master-console-overlay .user-input-section {
display: none;
padding: 0;
border-bottom: 1px solid #f0efe9;
}
.master-console-overlay .user-question {
font-size: 14px;
color: #111827;
line-height: 1.5;
}
.dark-mode .master-console-overlay .user-question {
color: rgba(255, 255, 255, 0.9);
}
/* AI Agent Section */
.master-console-overlay .ai-agent-section {
padding: 28px 16px 0 16px;
flex: 1;
min-height: 0;
overflow-y: auto;
max-height: calc(100vh - 200px);
display: flex;
flex-direction: column;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.master-console-overlay .ai-agent-section::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.master-console-overlay .agent-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 0;
}
.master-console-overlay .agent-icon {
width: 20px;
height: 20px;
background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 8px;
font-weight: 900;
font-family: 'Comic Sans MS', cursive, sans-serif;
text-shadow: 0.5px 0.5px 0px #fff, -0.5px -0.5px 0px #fff, 0.5px -0.5px 0px #fff, -0.5px 0.5px 0px #fff;
border: 1px solid #000;
box-shadow: 1px 1px 0px #000;
}
.master-console-overlay .agent-name {
font-size: 14px;
font-weight: 500;
color: #111827;
}
.master-console-overlay .agent-time {
font-size: 12px;
color: #6b7280;
margin-left: auto;
}
.master-console-overlay .thinking-status {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 0;
}
.master-console-overlay .thinking-icon {
width: 16px;
height: 16px;
color: #6b7280;
}
.master-console-overlay .thinking-text {
font-size: 13px;
color: #6b7280;
}
.master-console-overlay .agent-response {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
/* Bottom Sidebar */
.master-console-overlay .sidebar-bottom {
width: 100%;
height: auto;
min-height: 80px;
padding: 8px 16px;
padding-bottom: 16px;
border-top: 1px solid #eae8e1;
background: #f5f4ef;
margin-top: auto;
flex-shrink: 0;
}
.master-console-overlay .cost-notice {
padding: 8px 8px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.master-console-overlay .cost-text {
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
color: var(--text-secondary);
margin: 0;
text-align: left;
}
.master-console-overlay .read-more-btn {
white-space: nowrap;
background: none;
color: var(--text-primary);
border: none;
padding: 0;
font-size: 12px;
cursor: pointer;
text-decoration: underline;
font-weight: 500;
transition: opacity 0.2s ease;
}
.master-console-overlay .read-more-btn:hover {
opacity: 0.7;
}
.master-console-overlay .close-notice {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
font-size: 16px;
}
.master-console-overlay .input-area {
border-top: none;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0px;
}
.master-console-overlay .input-placeholder {
background: #f9fafb;
border: 1px solid #e2e0d9;
border-radius: 8px;
padding: 12px;
font-size: 13px;
color: #6b7280;
cursor: text;
}
/* Main Content Area - Fixed for pipeline content visibility */
.master-console-overlay .main-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
background: transparent;
height: calc(100vh - 48px); /* 48px header, bottom toolbar removed */
overflow-y: auto;
/* padding: 20px; */
box-sizing: border-box;
}
.master-console-overlay .content-center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
margin: 0 auto;
min-height: 400px; /* Ensure enough space for pipeline content */
position: relative;
}
/* Video Container */
.master-console-overlay .heart-container {
margin-bottom: 32px;
}
.master-console-overlay .loading-video {
width: 120px;
height: 120px;
object-fit: cover;
object-position: 46%;
border-radius: 8px;
}
.master-console-overlay .heart-icon {
width: 120px;
height: 120px;
opacity: 0.4;
}
/* Status Text */
.master-console-overlay .status-text {
font-size: 18px;
color: #111827;
font-weight: 500;
margin-bottom: 48px;
}
.dark-mode .master-console-overlay .status-text {
color: rgba(255, 255, 255, 0.9);
}
/* Action Items */
.master-console-overlay .action-items {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.master-console-overlay .action-item {
display: flex;
align-items: center;
gap: 12px;
color: #6b7280;
font-size: 14px;
}
.master-console-overlay .action-icon {
width: 20px;
height: 20px;
color: #9ca3af;
}
/* Bottom Toolbar (legacy — removed) */
.master-console-overlay .bottom-toolbar { display: none; }
/* Pipeline Tabs Bar */
.pipeline-tabs-bar {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: stretch;
padding: 6px 12px;
z-index: 1001;
transition: left 0.3s ease;
}
.pipeline-tabs {
--radius: 8px;
--border: 4px;
--height: 38px;
--speed: 0.25s;
--ease: linear(0, 0.1641 3.52%, 0.311 7.18%, 0.4413 10.99%, 0.5553 14.96%, 0.6539 19.12%, 0.738 23.5%, 0.8086 28.15%, 0.8662 33.12%, 0.9078 37.92%, 0.9405 43.12%, 0.965 48.84%, 0.9821 55.28%, 0.992 61.97%, 0.9976 70.09%, 1);
height: var(--height);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
background: #2E2E2E;
border-radius: var(--radius);
position: relative;
border: var(--border) solid #2E2E2E;
width: 100%;
}
.pipeline-tab-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pipeline-tabs:has(:checked:nth-of-type(1)) { --active: 0; }
.pipeline-tabs:has(:checked:nth-of-type(2)) { --active: 1; }
.pipeline-tabs:has(:checked:nth-of-type(3)) { --active: 2; }
.pipeline-tabs:has(:checked:nth-of-type(4)) { --active: 3; }
.pipeline-tabs :checked + .pipeline-tab-label { --highlight: 1; }
.pipeline-tabs:has(.pipeline-tab-input:nth-of-type(4)) { --count: 4; }
.pipeline-tab-label {
position: relative;
z-index: 1;
padding: 0 clamp(10px, 10px + 10px, 20px);
cursor: pointer;
text-align: center;
height: 100%;
display: grid;
grid-auto-flow: column;
gap: 6px;
border-radius: calc(var(--radius) - var(--border));
place-items: center;
color: hsl(0 0% 100% / calc(0.5 + var(--highlight, 0)));
transition: background 0.25s var(--ease, ease), color 0.25s var(--ease, ease);
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
font-family: inherit;
white-space: nowrap;
}
.pipeline-tab-input:not(:checked) + .pipeline-tab-label:hover {
--highlight: 0.35;
background: hsl(0 0% 20%);
}
.pipeline-tabs::after {
pointer-events: none;
content: "";
width: calc(100% / var(--count));
height: 100%;
background: hsl(0 0% 100%);
position: absolute;
border-radius: calc(var(--radius) - var(--border));
mix-blend-mode: difference;
translate: calc(var(--active, 0) * 100%) 0;
transition: translate var(--speed) var(--ease, ease);
}
body:not(.dark-mode) .pipeline-tabs {
background: #f5f4ef;
border-color: #f5f4ef;
}
body:not(.dark-mode) .pipeline-tab-label {
color: rgba(0, 0, 0, 0.5);
}
body:not(.dark-mode) .pipeline-tabs :checked + .pipeline-tab-label {
color: #ffffff;
}
body:not(.dark-mode) .pipeline-tab-input:not(:checked) + .pipeline-tab-label:hover {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.7);
}
body:not(.dark-mode) .pipeline-tabs::after {
background: #3b82f6;
mix-blend-mode: normal;
opacity: 1;
}
/* NUCLEAR RESET: All pipeline CSS removed for clean start */
.console-drop-zone {
/* Content overlay - no borders or background (parent pipeline window handles drop zone styling) */
border: none !important;
background: transparent !important;
padding: 0;
margin: 0;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
position: relative !important;
border-radius: 0 !important;
}
.console-drop-zone-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Pipeline window hover states DISABLED - moved to drag only */
/* .pipeline-content:hover {
border-color: #3b82f6 !important;
background: #eff6ff !important;
} */
.pipeline-content.dragover {
border-color: #3b82f6 !important;
background: #eff6ff !important;
}
.console-drop-zone h1 {
font-size: 24px;
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.9);
}
body:not(.dark-mode) .console-drop-zone h1 {
color: #111827;
}
.console-drop-zone p {
color: rgba(255, 255, 255, 0.5);
margin-bottom: 20px;
}
body:not(.dark-mode) .console-drop-zone p {
color: #6b7280;
}
.browse-files-btn, .translate-btn, .export-btn {
background: #3b82f6;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.browse-files-btn:hover, .translate-btn:hover, .export-btn:hover {
background: #2563eb;
}
.title-input {
width: 100%;
max-width: 400px;
padding: 12px;
border: 1px solid #e2e0d9;
border-radius: 6px;
font-size: 16px;
}
.step-batch-content, .step-translate-content, .step-titles-content, .step-export-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent;
border-radius: 6px;
padding: 20px;
margin: 10px auto;
min-height: 200px;
}
.step-batch-content, .step-translate-content, .step-titles-content, .step-export-content {
max-width: 600px;
margin: 0 auto;
padding: 0 20px;
}
.translate-options {
margin-top: 12px;
}
.translation-actions {
margin-top: 12px;
}
.title-editor {
margin-top: 12px;
}
/* MAIN CONTENT AREA DARK MODE STYLING */
.main-content.console-dark-mode {
background: transparent !important;
color: #FFFFFF !important;
}
.main-content.console-dark-mode .step-batch-content,
.main-content.console-dark-mode .step-translate-content,
.main-content.console-dark-mode .step-titles-content,
.main-content.console-dark-mode .step-export-content {
background: transparent !important;
color: #FFFFFF !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.main-content.console-dark-mode h1,
.main-content.console-dark-mode h2,
.main-content.console-dark-mode h3,
.main-content.console-dark-mode p,
.main-content.console-dark-mode label {
color: #FFFFFF !important;
}
.main-content.console-dark-mode select,
.main-content.console-dark-mode input {
background: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.main-content.console-dark-mode button {
background: #444444 !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.main-content.console-dark-mode .translate-btn {
background: #10b981 !important;
}
.main-content.console-dark-mode .skip-btn {
background: #6b7280 !important;
}
/* MAIN CONTENT DARK MODE - BATCH WINDOW BACKGROUND */
.main-content.console-dark-mode .pipeline-content {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
}
/* MAIN CONTENT AREA LIGHT MODE TEXT CONTRAST FIXES */
.main-content:not(.console-dark-mode) {
color: #4a90e2 !important;
}
.main-content:not(.console-dark-mode) h1,
.main-content:not(.console-dark-mode) h2,
.main-content:not(.console-dark-mode) h3,
.main-content:not(.console-dark-mode) p:not([style*="color"]),
.main-content:not(.console-dark-mode) label {
color: #4a90e2 !important;
}
.main-content:not(.console-dark-mode) select,
.main-content:not(.console-dark-mode) input {
color: #4a90e2 !important;
background: #faf9f6 !important;
border: 1px solid #4a90e2 !important;
}
/* Export Summary Text Color Match */
.main-content:not(.console-dark-mode) #processingSummary {
color: #4a90e2 !important;
}
.main-content:not(.console-dark-mode) #processingSummary strong {
color: #4a90e2 !important;
}
/* MAIN CONTENT DARK MODE TOGGLE BUTTON */
.main-content-dark-mode-toggle {
position: fixed;
top: 50px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #d1d5db;
border-radius: 8px;
color: #4a90e2;
padding: 8px 12px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* AUTO-SYNC: Main Content with Body Dark Mode */
.dark-mode .main-content:not(.console-light-mode-override) {
background: transparent !important;
color: #FFFFFF !important;
}
.dark-mode .main-content:not(.console-light-mode-override) .step-batch-content,
.dark-mode .main-content:not(.console-light-mode-override) .step-translate-content,
.dark-mode .main-content:not(.console-light-mode-override) .step-titles-content,
.dark-mode .main-content:not(.console-light-mode-override) .step-export-content {
background: transparent !important;
color: #FFFFFF !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.dark-mode .main-content:not(.console-light-mode-override) h1,
.dark-mode .main-content:not(.console-light-mode-override) h2,
.dark-mode .main-content:not(.console-light-mode-override) h3,
.dark-mode .main-content:not(.console-light-mode-override) p,
.dark-mode .main-content:not(.console-light-mode-override) label {
color: #FFFFFF !important;
}
.dark-mode .main-content:not(.console-light-mode-override) select,
.dark-mode .main-content:not(.console-light-mode-override) input {
background: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .main-content:not(.console-light-mode-override) button {
background: #444444 !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.dark-mode .main-content:not(.console-light-mode-override) .translate-btn {
background: #10b981 !important;
}
.dark-mode .main-content:not(.console-light-mode-override) .skip-btn {
background: #6b7280 !important;
}
/* AUTO-SYNC: Batch Window Background with Body Dark Mode */
.dark-mode .main-content:not(.console-light-mode-override) .pipeline-content {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
}
/* console-drop-zone-content is now plain transparent — glassmorphic moved to drag overlay */
.file-list {
margin: 0;
text-align: left;
overflow-y: auto;
width: 100%;
padding: 8px 0;
box-sizing: border-box;
}
.file-item {
display: flex;
align-items: center;
padding: 10px 14px;
background: #161b22;
border: 1px solid #21262d;
border-radius: 6px;
margin: 6px 0;
width: 100%;
font-size: 13px;
color: #c9d1d9;
gap: 10px;
box-sizing: border-box;
}
.file-item .file-icon {
font-size: 18px;
flex-shrink: 0;
}
.file-item .file-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'Space Grotesk', monospace;
}
.file-item .file-size {
color: #7d8590;
font-size: 11px;
white-space: nowrap;
font-family: monospace;
}
.file-item .file-ext {
background: #21262d;
color: #7d8590;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
font-family: monospace;
}
/* NUCLEAR RESET: Second conflicting pipeline CSS block removed */
/* Default content has lower z-index */
.heart-container,
.status-text,
.action-items {
position: relative;
z-index: 1;
}
/* NUCLEAR RESET: Broken sibling selector logic removed */
/* NUCLEAR CSS REMOVED - Using Professional Windows */
/* NUCLEAR STEP CONTENT CSS REMOVED */
/* Hide inactive pipeline content */
.master-console-overlay .content-center .pipeline-content:not(.active) {
display: none !important;
}
/* NUCLEAR Z-INDEX CSS REMOVED - Using Professional Windows */
.pipeline-content:not(.active),
.fresh-pipeline-window:not(.active) {
display: none !important;
}
/* ========== LIGHT MODE CONSOLE TABS ========== */
body:not(.dark-mode) .pipeline-content {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* Card backgrounds: dark #161b22 -> light white */
body:not(.dark-mode) .step-export-content div[style*="background:#161b22"],
body:not(.dark-mode) .step-export-content div[style*="background: #161b22"],
body:not(.dark-mode) .step-batch-content div[style*="background:#161b22"],
body:not(.dark-mode) .step-batch-content div[style*="background: #161b22"],
body:not(.dark-mode) .step-translate-content div[style*="background:#161b22"],
body:not(.dark-mode) .step-translate-content div[style*="background: #161b22"],
body:not(.dark-mode) .step-titles-content div[style*="background:#161b22"],
body:not(.dark-mode) .step-titles-content div[style*="background: #161b22"] {
background: #f5f4ef !important;
border-color: #d5d3cc !important;
}
/* Inner card backgrounds: #0d1117 -> warm light (not titles — they keep dark) */
body:not(.dark-mode) .step-export-content div[style*="background:#0d1117"],
body:not(.dark-mode) .step-batch-content div[style*="background:#0d1117"] {
background: #f0efe9 !important;
border-color: #d5d3cc !important;
}
/* Text colors: light text -> dark text */
body:not(.dark-mode) .step-export-content h2,
body:not(.dark-mode) .step-export-content h3,
body:not(.dark-mode) .step-batch-content h2,
body:not(.dark-mode) .step-batch-content h3,
body:not(.dark-mode) .step-titles-content h2,
body:not(.dark-mode) .step-titles-content h3,
body:not(.dark-mode) .step-translate-content h2,
body:not(.dark-mode) .step-translate-content h3 {
color: #1f2328 !important;
}
body:not(.dark-mode) .step-export-content p,
body:not(.dark-mode) .step-export-content span,
body:not(.dark-mode) .step-batch-content p,
body:not(.dark-mode) .step-batch-content span,
body:not(.dark-mode) .step-titles-content p,
body:not(.dark-mode) .step-titles-content span,
body:not(.dark-mode) .step-translate-content p,
body:not(.dark-mode) .step-translate-content span {
color: #656d76 !important;
}
/* ===== TRANSLATION COMING SOON OVERLAY ===== */
.translate-coming-soon-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
z-index: 10;
background: rgba(255, 255, 255, 0.6);
}
.dark-mode .translate-coming-soon-overlay {
background: rgba(13, 17, 23, 0.65);
}
.translate-coming-soon-card {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px 12px 32px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.dark-mode .translate-coming-soon-card {
background: rgba(22, 27, 34, 0.9);
border: 1px solid #21262d;
box-shadow: none;
}
.translate-coming-soon-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
}
.dark-mode .translate-coming-soon-title {
color: #c9d1d9;
}
.translate-coming-soon-subtitle {
margin: 2px 0 0 0;
font-size: 12px;
color: #6b7280;
}
.dark-mode .translate-coming-soon-subtitle {
color: #7d8590;
}
/* ===== CUSTOM MODAL SYSTEM ===== */
.v-modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.v-modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.v-modal {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
padding: 32px;
max-width: 420px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
transform: scale(0.95) translateY(10px);
transition: transform 0.25s ease;
font-family: 'Space Grotesk', sans-serif;
}
.v-modal-overlay.active .v-modal {
transform: scale(1) translateY(0);
}
.dark-mode .v-modal {
background: rgba(20, 20, 30, 0.95);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.v-modal-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.v-modal-icon.warning {
background: rgba(245, 158, 11, 0.1);
color: #F59E0B;
}
.v-modal-icon.invite {
background: rgba(34, 197, 94, 0.1);
color: #22C55E;
}
.v-modal-title {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.dark-mode .v-modal-title {
color: #f0f0f0;
}
.v-modal-text {
font-size: 14px;
color: #666;
line-height: 1.5;
margin-bottom: 24px;
}
.dark-mode .v-modal-text {
color: rgba(255, 255, 255, 0.5);
}
.v-modal-actions {
display: flex;
gap: 10px;
}
.v-modal-btn {
flex: 1;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s;
border: none;
text-align: center;
}
.v-modal-btn.secondary {
background: rgba(0, 0, 0, 0.05);
color: #333;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.v-modal-btn.secondary:hover {
background: rgba(0, 0, 0, 0.08);
}
.dark-mode .v-modal-btn.secondary {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.1);
}
.v-modal-btn.danger {
background: #EF4444;
color: #fff;
}
.v-modal-btn.danger:hover {
background: #DC2626;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.v-modal-btn.primary {
background: #22C55E;
color: #fff;
}
.v-modal-btn.primary:hover {
background: #16A34A;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.v-modal-input {
width: 100%;
padding: 12px 14px;
border: 2px solid transparent;
border-radius: 8px;
background: rgba(0, 0, 0, 0.04);
font-size: 14px;
font-family: 'Space Grotesk', sans-serif;
color: #1a1a1a;
outline: none;
transition: all 0.2s;
margin-bottom: 16px;
box-sizing: border-box;
}
.v-modal-input:focus {
border-color: rgba(34, 197, 94, 0.4);
background: #faf9f6;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}
.dark-mode .v-modal-input {
background: rgba(255, 255, 255, 0.06);
color: #f0f0f0;
}
.dark-mode .v-modal-input:focus {
border-color: rgba(34, 197, 94, 0.4);
background: rgba(255, 255, 255, 0.1);
}
.v-modal-success {
display: none;
text-align: center;
padding: 8px 0;
color: #22C55E;
font-size: 13px;
font-weight: 600;
}
/* ===== ONBOARDING TAKEOVER ===== */
.onboarding-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.onboarding-overlay.active {
display: flex;
opacity: 1;
}
.onboarding-screen {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
padding: 48px 40px;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
font-family: 'Space Grotesk', sans-serif;
text-align: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.onboarding-screen.active {
display: flex;
opacity: 1;
}
.dark-mode .onboarding-screen {
background: none;
border: none;
box-shadow: none;
}
.onboarding-icon-bubble {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.onboarding-icon-bubble.green { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
.onboarding-icon-bubble.blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
.onboarding-icon-bubble.purple { background: rgba(139, 92, 246, 0.15); color: #A78BFA; }
.onboarding-icon-bubble.amber { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.onboarding-icon-bubble.teal { background: rgba(20, 184, 166, 0.15); color: #2DD4BF; }
.onboarding-icon-bubble svg {
width: 36px;
height: 36px;
animation: onboarding-bounce 2s ease-in-out infinite;
}
@keyframes onboarding-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.onboarding-step-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #4ADE80;
margin-bottom: 12px;
text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
.onboarding-title {
font-size: 32px;
font-weight: 800;
color: #ffffff;
margin-bottom: 14px;
line-height: 1.2;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.dark-mode .onboarding-title { color: #ffffff; }
.onboarding-text {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 28px;
max-width: 500px;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.dark-mode .onboarding-text { color: rgba(255, 255, 255, 0.8); }
.onboarding-sample-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 12px;
color: #4ADE80;
font-size: 14px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
text-decoration: none;
transition: all 0.2s;
margin-bottom: 28px;
}
.onboarding-sample-btn:hover {
background: rgba(34, 197, 94, 0.18);
border-color: rgba(34, 197, 94, 0.35);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}
.onboarding-dots {
display: flex;
gap: 8px;
margin-bottom: 28px;
}
.onboarding-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.3s;
cursor: pointer;
}
.onboarding-dot.active {
background: #22C55E;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
transform: scale(1.1);
}
.onboarding-dot.completed { background: rgba(34, 197, 94, 0.4); }
.dark-mode .onboarding-dot { background: rgba(255, 255, 255, 0.12); }
.onboarding-tag {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 16px;
}
.onboarding-tag.coming-soon { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
.onboarding-actions {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
max-width: 360px;
}
.onboarding-skip {
flex: 1;
padding: 14px;
border: none;
background: none;
color: rgba(255, 255, 255, 0.45);
font-size: 14px;
font-weight: 500;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s;
border-radius: 12px;
}
.onboarding-skip:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
.dark-mode .onboarding-skip:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
.onboarding-next {
flex: 1;
padding: 14px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
background: #22C55E;
color: #fff;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.onboarding-next:hover {
background: #16A34A;
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3);
transform: translateY(-1px);
}
.onboarding-matrix-preview {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 14px 18px;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.7;
text-align: left;
margin-bottom: 24px;
max-width: 440px;
width: 100%;
overflow-x: auto;
}
.dark-mode .onboarding-matrix-preview {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.65);
}
/* Pointing arrows */
.onboarding-arrow {
position: absolute;
pointer-events: none;
z-index: 100001;
}
.onboarding-arrow svg {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.onboarding-arrow.point-left {
animation: arrow-point-left 1.5s ease-in-out infinite;
}
.onboarding-arrow.point-down {
animation: arrow-point-down 1.5s ease-in-out infinite;
}
.onboarding-arrow.point-right {
animation: arrow-point-right 1.5s ease-in-out infinite;
}
@keyframes arrow-point-left {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-12px); }
}
@keyframes arrow-point-down {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(12px); }
}
@keyframes arrow-point-right {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(12px); }
}
.translate-skip-btn {
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #1a1a1a;
padding: 10px 28px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
transition: all 0.15s;
}
.translate-skip-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.dark-mode .translate-skip-btn {
color: #c9d1d9;
border-color: #484f58;
}
.dark-mode .translate-skip-btn:hover {
background: rgba(255, 255, 255, 0.05);
}
/* File card styling */
body:not(.dark-mode) .file-item {
background: #faf9f6 !important;
border-color: #d5d3cc !important;
color: #2c2c2a !important;
}
body:not(.dark-mode) .file-item .file-name {
color: #1f2328 !important;
}
body:not(.dark-mode) .file-item .file-size {
color: #656d76 !important;
}
body:not(.dark-mode) .file-item .file-ext {
background: #dddbd4 !important;
color: #1f2328 !important;
}
/* Secondary buttons: dark gray -> light gray */
body:not(.dark-mode) .pipeline-content button[style*="background:#21262d"],
body:not(.dark-mode) .pipeline-content button[style*="background: #21262d"] {
background: #f6f8fa !important;
color: #1f2328 !important;
border-color: #d5d3cc !important;
}
/* Bottom bar border */
body:not(.dark-mode) .pipeline-content div[style*="border-top:1px solid #21262d"],
body:not(.dark-mode) .pipeline-content div[style*="border-top: 1px solid #21262d"] {
border-top-color: #d5d3cc !important;
}
/* ===== TITLES CARD BASE STYLES ===== */
@keyframes borderRotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.title-card {
position: relative;
background: transparent;
border: none;
border-radius: 12px;
padding: 2px;
overflow: hidden;
}
.title-card::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: conic-gradient(
from 220deg,
transparent 0%,
transparent 25%,
#ef4444 30%,
#f97316 45%,
#ef4444 55%,
#f97316 70%,
#ef4444 80%,
transparent 85%,
transparent 100%
);
animation: borderRotate 3s linear infinite;
}
.title-card::after {
content: '';
position: absolute;
inset: 2px;
background: #0a0a14;
border-radius: 10px;
z-index: 0;
}
.title-card > * {
position: relative;
z-index: 1;
}
.title-card > :first-child {
border-radius: 10px 10px 0 0;
overflow: hidden;
}
.title-card > :last-child {
border-radius: 0 0 10px 10px;
}
.title-card.title-card-approved::before {
animation: none;
background: #22C55E;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: none;
}
.title-card.title-card-needs-review::before {
background: conic-gradient(
from 220deg,
transparent 0%,
transparent 25%,
#ef4444 30%,
#f97316 45%,
#ef4444 55%,
#f97316 70%,
#ef4444 80%,
transparent 85%,
transparent 100%
);
}
.title-card.title-card-awaiting::before {
background: conic-gradient(
from 220deg,
transparent 0%,
transparent 25%,
#8b5cf6 30%,
#3b82f6 45%,
#8b5cf6 55%,
#3b82f6 70%,
#8b5cf6 80%,
transparent 85%,
transparent 100%
);
}
.title-card-detail {
padding: 8px 10px;
background: #0d1117;
color: rgba(255, 255, 255, 0.85);
}
.tc-title {
color: #a78bfa;
font-weight: 600;
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Space Mono', 'SF Mono', monospace;
letter-spacing: 0.5px;
}
.tc-meta {
color: #c4b5fd;
font-size: 10px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tc-line {
font-size: 10px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tc-check { color: #a78bfa; }
.tc-warning { color: #f0883e; }
.tc-none { color: #484f58; }
.tc-nr-dot { background: #F59E0B; }
.title-card-badge {
padding: 6px 10px 8px;
background: #0a0a14;
border-top: 1px solid rgba(139, 92, 246, 0.15);
}
#titlesBottomBar {
border-top-color: rgba(139, 92, 246, 0.2);
}
#titlesBottomBar p {
color: rgba(255, 255, 255, 0.8);
}
#titlesBottomBar span {
color: rgba(255, 255, 255, 0.6);
}
.overlay-status-badge.needs-review {
background: linear-gradient(135deg, #ef4444, #f97316);
color: #fff;
}
/* ===== TITLES SEARCH BAR + FILTER ===== */
#titlesSearchBar {
padding: 8px 8px 4px;
position: sticky;
top: 0;
z-index: 10;
background: inherit;
}
.titles-search-group {
display: flex;
align-items: center;
position: relative;
width: 100%;
gap: 8px;
}
.titles-search-input {
flex: 1;
height: 40px;
line-height: 28px;
padding: 0 1rem 0 2.5rem;
border: 2px solid transparent;
border-radius: 8px;
outline: none;
background-color: rgba(255, 255, 255, 0.08);
color: #e0e0e0;
font-size: 14px;
font-family: 'Space Grotesk', sans-serif;
transition: .3s ease;
box-sizing: border-box;
}
.titles-search-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.titles-search-input:focus,
.titles-search-input:hover {
border-color: rgba(34, 197, 94, 0.4);
background-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}
.titles-search-icon {
position: absolute;
left: 1rem;
fill: rgba(255, 255, 255, 0.35);
width: 1rem;
height: 1rem;
pointer-events: none;
z-index: 1;
}
/* Light mode search */
body:not(.dark-mode) .titles-search-input {
background-color: #f3f3f4;
color: #0d0c22;
border-color: transparent;
}
body:not(.dark-mode) .titles-search-input::placeholder { color: #9e9ea7; }
body:not(.dark-mode) .titles-search-input:focus,
body:not(.dark-mode) .titles-search-input:hover {
border-color: rgba(34, 197, 94, 0.4);
background-color: #fff;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}
body:not(.dark-mode) .titles-search-icon { fill: #9e9ea7; }
/* Filter button */
.titles-filter-btn {
display: flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 14px;
border: 2px solid transparent;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: .3s ease;
white-space: nowrap;
}
.titles-filter-btn:hover {
border-color: rgba(34, 197, 94, 0.4);
background-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}
.titles-filter-btn.active {
border-color: #22C55E;
color: #4ADE80;
}
body:not(.dark-mode) .titles-filter-btn {
background-color: #f3f3f4;
color: #555;
}
body:not(.dark-mode) .titles-filter-btn:hover {
border-color: rgba(34, 197, 94, 0.4);
background-color: #fff;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}
body:not(.dark-mode) .titles-filter-btn.active {
border-color: #22C55E;
background-color: #fff;
color: #22C55E;
}
/* Filter dropdown */
.titles-filter-dropdown {
position: absolute;
right: 0;
top: 48px;
background: rgba(30, 30, 30, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 100;
min-width: 180px;
}
body:not(.dark-mode) .titles-filter-dropdown {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.filter-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #e0e0e0;
transition: background 0.15s;
}
.filter-option:hover { background: rgba(255, 255, 255, 0.08); }
body:not(.dark-mode) .filter-option { color: #333; }
body:not(.dark-mode) .filter-option:hover { background: rgba(0, 0, 0, 0.05); }
.filter-option.active { font-weight: 600; }
.filter-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
/* ===== TITLES CARD LIGHT MODE OVERRIDES ===== */
body:not(.dark-mode) .title-card::after {
background: rgba(255, 255, 255, 0.92);
}
body:not(.dark-mode) .title-card-detail {
background: #f8f8fa;
color: #333;
}
body:not(.dark-mode) .tc-title {
color: #1a1a2e;
}
body:not(.dark-mode) .tc-meta {
color: #4a4a5a;
}
body:not(.dark-mode) .tc-check {
color: #2d8a2d;
}
body:not(.dark-mode) .tc-none {
color: #999;
}
body:not(.dark-mode) .tc-nr-dot {
background: #F59E0B;
}
body:not(.dark-mode) .title-card-badge {
background: #f0f0f4;
border-top-color: rgba(0, 180, 0, 0.15);
}
body:not(.dark-mode) .title-card .overlay-status-option {
color: #333;
}
body:not(.dark-mode) .title-card .thumb-placeholder {
color: #888;
}
body:not(.dark-mode) .overlay-status-badge.needs-review {
background: linear-gradient(135deg, #ef4444, #f97316);
color: #fff;
}
body:not(.dark-mode) #titlesBottomBar {
border-top: 2px solid #1a1a2e !important;
}
body:not(.dark-mode) #titlesBottomBar p {
color: #1a1a2e !important;
}
body:not(.dark-mode) #titlesBottomBar span {
color: #333 !important;
}
/* EXCEPTION: Preview monitor stays dark (NLE player) */
body:not(.dark-mode) #previewMonitor,
body:not(.dark-mode) .scrub-bar-container {
background: #212121 !important;
color: #ffffff !important;
}
#previewMonitor video {
border: 3px solid #00ff00;
box-sizing: border-box;
}
body:not(.dark-mode) .scrub-bar-container span,
body:not(.dark-mode) .scrub-bar-container button {
color: #ffffff !important;
}
/* Preview background toggle - green slider */
.preview-bg-toggle-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
.preview-switch {
font-size: 9px;
position: relative;
display: inline-block;
width: 3.5em;
height: 2em;
}
.preview-switch .preview-input {
opacity: 0;
width: 0;
height: 0;
}
.preview-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2e2e2e;
transition: .4s;
border-radius: 30px;
}
.preview-slider:before {
position: absolute;
content: "";
height: 1.4em;
width: 1.4em;
border-radius: 20px;
left: 0.3em;
bottom: 0.3em;
background-color: #4e4;
transition: .4s;
}
.preview-input:checked + .preview-slider {
background-color: #000;
}
.preview-input:focus + .preview-slider {
box-shadow: 0 0 1px #000;
}
.preview-input:checked + .preview-slider:before {
transform: translateX(1.5em);
}
/* Format radio text buttons */
.format-radio-group {
display: flex;
gap: 24px;
justify-content: center;
align-items: center;
padding: 10px 0;
}
.format-radio-group label {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-grow: 0;
}
.format-radio-group input {
display: none;
}
.format-radio-group .format-label {
position: relative;
font-size: 14px;
color: rgba(0, 255, 0, 0.5);
transition: all 0.3s;
padding-bottom: 4px;
}
.format-radio-group input:checked + .format-label {
color: rgba(0, 255, 0, 1);
}
.format-radio-group .format-label::before,
.format-radio-group .format-label::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
border-radius: 3px;
background: rgba(0, 255, 0, 0.8);
opacity: 0;
transition: all 0.3s;
}
.format-radio-group .format-label::before {
width: 100%;
height: 2px;
}
.format-radio-group .format-label::after {
width: 50%;
height: 2px;
bottom: -3px;
background: rgba(0, 255, 0, 0.4);
}
.format-radio-group input:checked + .format-label::before,
.format-radio-group input:checked + .format-label::after {
opacity: 1;
}
/* Format HUD badge */
.format-hud {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: #0f0;
font-family: 'SF Mono', 'Courier New', monospace;
font-size: 11px;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 4px;
z-index: 10;
pointer-events: none;
transition: opacity 0.3s;
white-space: nowrap;
max-width: 90%;
}
/* ===== DARK MODE: Preview accent green → purple ===== */
body.dark-mode #previewMonitor video {
border-color: #8b5cf6;
}
body.dark-mode .preview-slider:before {
background-color: #8b5cf6;
}
body.dark-mode .format-radio-group .format-label {
color: rgba(139, 92, 246, 0.5);
}
body.dark-mode .format-radio-group input:checked + .format-label {
color: rgba(139, 92, 246, 1);
}
body.dark-mode .format-radio-group .format-label::before,
body.dark-mode .format-radio-group .format-label::after {
background: rgba(139, 92, 246, 0.8);
}
body.dark-mode .format-radio-group input:checked + .format-label::after {
background: rgba(139, 92, 246, 0.4);
}
body.dark-mode .format-hud {
color: #8b5cf6;
}
body.dark-mode #timecodeHUD {
color: #8b5cf6 !important;
}
/* NLE toolbar dropdown styling */
body.dark-mode .nle-indicator { }
body.dark-mode #nleToolbarToggle { color: #bbb; }
/* NLE-style scrub bar */
#previewScrubber {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 24px;
background: transparent;
outline: none;
margin: 0;
padding: 0;
position: relative;
z-index: 4;
cursor: pointer;
opacity: 0;
}
#previewScrubber::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0;
height: 0;
background: transparent;
border: none;
cursor: pointer;
}
#previewScrubber::-moz-range-thumb {
width: 0;
height: 0;
background: transparent;
border: none;
cursor: pointer;
}
#previewScrubber::-webkit-slider-runnable-track {
background: transparent;
height: 24px;
}
#previewScrubber::-moz-range-track {
background: transparent;
height: 24px;
}
/* Shot marker tooltip */
#shotMarkerTooltip {
display: none;
position: fixed;
background: rgba(0,0,0,0.9);
color: #00cc66;
font-family: 'SF Mono','Courier New',monospace;
font-size: 10px;
padding: 4px 10px;
border-radius: 4px;
pointer-events: none;
z-index: 999999;
white-space: nowrap;
}
body.dark-mode #shotMarkerTooltip {
color: #8b5cf6;
}
/* NLE OVR toolbar light mode overrides */
body:not(.dark-mode) #nleToolbarToggle {
border-color: rgba(0, 0, 0, 0.15) !important;
color: #555 !important;
}
body:not(.dark-mode) #nleToolbarDropdown .nle-toggle-row span:nth-child(2) {
color: #1a1a1a !important;
}
body:not(.dark-mode) #nleToolbarDropdown .nle-toggle-row span:nth-child(3) {
color: #888 !important;
}
body:not(.dark-mode) #nleToolbarDropdown .nle-toggle-row:hover {
background: rgba(0, 0, 0, 0.04) !important;
}
/* Electric glow on chat frame grab images */
@keyframes electricBorder {
0% { border-color: rgba(0, 255, 100, 0.3); box-shadow: 0 0 8px rgba(0, 255, 100, 0.1); }
25% { border-color: rgba(0, 255, 150, 0.6); box-shadow: 0 0 12px rgba(0, 255, 100, 0.2); }
50% { border-color: rgba(0, 255, 200, 0.8); box-shadow: 0 0 16px rgba(0, 255, 150, 0.3); }
75% { border-color: rgba(0, 200, 255, 0.6); box-shadow: 0 0 12px rgba(0, 255, 100, 0.2); }
100% { border-color: rgba(0, 255, 100, 0.3); box-shadow: 0 0 8px rgba(0, 255, 100, 0.1); }
}
@keyframes electricBorderDark {
0% { border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 0 8px rgba(139, 92, 246, 0.1); }
25% { border-color: rgba(139, 92, 246, 0.6); box-shadow: 0 0 12px rgba(139, 92, 246, 0.2); }
50% { border-color: rgba(99, 102, 241, 0.8); box-shadow: 0 0 16px rgba(99, 102, 241, 0.3); }
75% { border-color: rgba(59, 130, 246, 0.6); box-shadow: 0 0 12px rgba(99, 102, 241, 0.2); }
100% { border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 0 8px rgba(139, 92, 246, 0.1); }
}
.reframe-tag-hidden { display: none !important; }
.chat-approval-image {
border: 3px solid rgba(0, 255, 100, 0.3);
border-radius: 6px;
animation: electricBorder 4s ease-in-out infinite;
}
body.dark-mode .chat-approval-image {
border-color: rgba(139, 92, 246, 0.3);
animation: electricBorderDark 4s ease-in-out infinite;
}
/* Text overlay preview items */
.text-overlay-item {
position: absolute;
pointer-events: none;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
z-index: 10;
}
/* Active adjustments HUD */
#activeAdjustmentsDisplay {
background: rgba(0, 255, 0, 0.08);
color: rgba(0, 255, 0, 0.7);
border: 1px solid rgba(0, 255, 0, 0.2);
}
body.dark-mode #activeAdjustmentsDisplay {
background: rgba(139, 92, 246, 0.15);
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(139, 92, 246, 0.3);
}
/* Before/After toggle */
#beforeAfterToggle {
text-transform: uppercase;
letter-spacing: 1px;
}
#beforeAfterToggle.showing-original {
opacity: 0.5;
}
body.dark-mode #beforeAfterToggle {
background: rgba(139, 92, 246, 0.2);
color: #a78bfa;
border-color: rgba(139, 92, 246, 0.4);
}
body:not(.dark-mode) #beforeAfterToggle {
background: rgba(0, 255, 0, 0.1);
color: #3a9a3a;
border-color: rgba(0, 255, 0, 0.3);
}
/* Title card names keep green in both modes */
/* Title card metadata text */
body:not(.dark-mode) .step-titles-content div[style*="color: #7d8590"],
body:not(.dark-mode) .step-titles-content div[style*="color:#7d8590"] {
color: #656d76 !important;
}
/* Title cards keep dark background in light mode — handled by .title-card overrides */
/* ===== PROFESSIONAL PIPELINE WINDOWS STYLING ===== */
/* Target the REAL professional windows - NUCLEAR CSS REMOVED */
.pipeline-content {
position: fixed !important;
top: 48px !important;
left: var(--sidebar-width) !important;
width: calc(100vw - var(--sidebar-width)) !important;
bottom: 0 !important;
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-radius: 16px;
color: #ffffff !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: hidden !important;
}
.content-center .step-batch-content,
.content-center .step-translate-content,
.content-center .step-titles-content,
.content-center .step-export-content {
width: 100% !important;
max-width: none !important;
height: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
color: #ffffff !important;
overflow-y: auto !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
/* Console loader overlay */
#consoleLoaderOverlay {
position: fixed;
top: 48px;
left: var(--sidebar-width);
width: calc(100vw - var(--sidebar-width));
bottom: 60px;
background: rgba(10, 10, 15, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 55;
opacity: 0;
pointer-events: none;
transition: opacity 300ms ease;
}
#consoleLoaderOverlay.active {
opacity: 1;
pointer-events: all;
}
#consoleLoaderOverlay video {
width: 220px;
height: auto;
display: none !important;
}
#consoleLoaderOverlay .loader-lottie {
width: 72px;
height: 72px;
display: block;
}
#consoleLoaderOverlay .loader-message {
color: #ffffff;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
margin-top: 10px;
text-align: center;
opacity: 0.9;
}
/* Light mode loader */
#consoleLoaderOverlay.light-mode {
background: rgba(252, 252, 252, 0.97);
}
#consoleLoaderOverlay.light-mode .loader-lottie {
display: block;
}
#consoleLoaderOverlay.light-mode .loader-message {
color: #1a1a2e;
}
/* Titles tab layout — parent is flex column, grid scrolls, bar stays fixed */
#step-titles .step-titles-content {
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
}
/* Export tab layout — same pattern: scroll content, pinned bottom bar */
#step-export .step-export-content {
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
}
/* ===== EXPORT TAB TWO-COLUMN LAYOUT ===== */
.export-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 20px;
flex: 1;
min-height: 0;
padding: 20px;
overflow: hidden;
}
.export-left {
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
min-height: 0;
}
.export-right {
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
min-height: 0;
}
/* Preview player */
.export-preview-container {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: rgba(0, 0, 0, 0.04);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
.dark-mode .export-preview-container,
.console-dark-mode .export-preview-container {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.export-preview-video {
width: 100%;
height: 100%;
object-fit: contain;
display: none;
}
.export-preview-video.active {
display: block;
}
.export-preview-empty {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: rgba(0, 0, 0, 0.3);
font-size: 14px;
font-family: 'Space Grotesk', sans-serif;
}
.dark-mode .export-preview-empty,
.console-dark-mode .export-preview-empty {
color: rgba(255, 255, 255, 0.3);
}
/* Master selectors */
.export-masters {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 4px 0;
flex-shrink: 0;
}
.export-master-card {
flex-shrink: 0;
width: 120px;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
transition: border-color 0.2s, box-shadow 0.2s;
background: rgba(0, 0, 0, 0.04);
}
.export-master-card:hover {
border-color: rgba(34, 197, 94, 0.4);
}
.export-master-card.active {
border-color: #22C55E;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.export-master-thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.08);
}
.export-master-label {
padding: 6px 8px;
font-size: 11px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
}
.dark-mode .export-master-card,
.console-dark-mode .export-master-card {
background: rgba(255, 255, 255, 0.04);
}
.dark-mode .export-master-label,
.console-dark-mode .export-master-label {
color: rgba(255, 255, 255, 0.7);
}
/* Job details */
.export-job-details {
background: rgba(0, 0, 0, 0.03);
border-radius: 12px;
padding: 16px 20px;
border: 1px solid rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
.dark-mode .export-job-details,
.console-dark-mode .export-job-details {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
}
.export-job-title {
font-size: 15px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
margin-bottom: 8px;
color: #1a1a1a;
}
.dark-mode .export-job-title,
.console-dark-mode .export-job-title {
color: rgba(255, 255, 255, 0.9);
}
.export-job-meta {
font-size: 13px;
font-family: 'Space Grotesk', sans-serif;
color: #666;
line-height: 1.6;
}
.dark-mode .export-job-meta,
.console-dark-mode .export-job-meta {
color: rgba(255, 255, 255, 0.5);
}
/* Action buttons */
.export-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.export-share-btn,
.export-download-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.export-share-btn {
background: rgba(0, 0, 0, 0.05);
color: #333;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.export-share-btn:hover {
background: rgba(0, 0, 0, 0.08);
}
.dark-mode .export-share-btn,
.console-dark-mode .export-share-btn {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .export-share-btn:hover,
.console-dark-mode .export-share-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.export-download-btn {
background: #22C55E;
color: #fff;
}
.export-download-btn:hover {
background: #16A34A;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
/* Deliverables list */
.export-deliverables-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
padding-right: 4px;
min-height: 0;
}
.export-deliverable-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
border: 1px solid transparent;
background: rgba(0, 0, 0, 0.02);
flex-shrink: 0;
}
.export-deliverable-row:hover {
background: rgba(0, 0, 0, 0.05);
}
.export-deliverable-row.active {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.3);
}
.dark-mode .export-deliverable-row,
.console-dark-mode .export-deliverable-row {
background: rgba(255, 255, 255, 0.03);
}
.dark-mode .export-deliverable-row:hover,
.console-dark-mode .export-deliverable-row:hover {
background: rgba(255, 255, 255, 0.06);
}
.dark-mode .export-deliverable-row.active,
.console-dark-mode .export-deliverable-row.active {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
}
.export-deliverable-icon {
width: 80px;
height: 45px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.export-deliverable-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dark-mode .export-deliverable-icon,
.console-dark-mode .export-deliverable-icon {
background: rgba(255, 255, 255, 0.06);
}
.export-deliverable-name {
font-size: 13px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark-mode .export-deliverable-name,
.console-dark-mode .export-deliverable-name {
color: rgba(255, 255, 255, 0.9);
}
.export-deliverable-meta {
font-size: 11px;
font-family: 'Space Grotesk', sans-serif;
color: #888;
margin-top: 2px;
}
.dark-mode .export-deliverable-meta,
.console-dark-mode .export-deliverable-meta {
color: rgba(255, 255, 255, 0.4);
}
/* Scrollbar styling for deliverables list */
.export-deliverables-list::-webkit-scrollbar {
width: 4px;
}
.export-deliverables-list::-webkit-scrollbar-track {
background: transparent;
}
.export-deliverables-list::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 2px;
}
.dark-mode .export-deliverables-list::-webkit-scrollbar-thumb,
.console-dark-mode .export-deliverables-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
/* Export empty/processing state */
.export-processing-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 20px;
text-align: center;
color: #888;
font-size: 14px;
font-family: 'Space Grotesk', sans-serif;
}
.dark-mode .export-processing-state,
.console-dark-mode .export-processing-state {
color: rgba(255, 255, 255, 0.4);
}
/* Batch tab — ensure preview wrapper fills height and pins its bottom bar */
#step-batch .step-batch-content {
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
height: 100% !important;
}
.console-drop-zone {
flex: 1 !important;
min-height: 0 !important;
overflow-y: auto !important;
}
.console-drop-zone.preview-mode {
overflow: hidden !important;
}
/* Titles tab status badges */
.overlay-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 500;
cursor: pointer;
border: none;
position: relative;
user-select: none;
line-height: 1;
}
/* needs-review colors handled in title card CSS section above */
.overlay-status-badge.in-progress { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; }
.overlay-status-badge.approved { background: rgba(0,200,80,0.15); color: #00c850; }
.status-dropdown-container {
position: relative;
display: inline-block;
}
.overlay-status-menu {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 4px;
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
overflow: hidden;
z-index: 100;
min-width: 140px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
display: none;
}
.overlay-status-menu.open { display: block; }
.overlay-status-option {
padding: 6px 10px;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
color: #e6edf3;
border: none;
background: none;
width: 100%;
text-align: left;
}
.overlay-status-option:hover { background: #30363d; }
/* Light mode dropdown overrides */
body:not(.dark-mode) .overlay-status-menu {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
body:not(.dark-mode) .overlay-status-option {
color: #1a1a1a;
}
body:not(.dark-mode) .overlay-status-option:hover {
background: rgba(0, 0, 0, 0.05);
}
.overlay-status-option .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* ===== PIPELINE ACTION BUTTON — gradient border with glow ===== */
.pipeline-action-btn {
position: relative;
text-decoration: none;
color: #fff;
background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
border: none;
outline: none;
white-space: nowrap;
z-index: 1;
flex-shrink: 0;
}
.pipeline-action-btn span {
position: relative;
z-index: 1;
}
.pipeline-action-btn::before {
content: "";
position: absolute;
inset: 1px;
background: #272727;
border-radius: 7px;
transition: 0.5s;
}
.pipeline-action-btn:hover::before {
opacity: 0.7;
}
.pipeline-action-btn::after {
content: "";
position: absolute;
inset: 0px;
background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
border-radius: 8px;
transition: 0.5s;
opacity: 0;
filter: blur(10px);
z-index: -1;
}
.pipeline-action-btn:hover::after {
opacity: 0.5;
}
/* Light mode variant */
body:not(.dark-mode) .pipeline-action-btn::before {
background: #f0f0f2;
}
body:not(.dark-mode) .pipeline-action-btn {
color: #1a1a2e;
}
body:not(.dark-mode) .pipeline-action-btn span {
color: #1a1a2e;
}
body:not(.dark-mode) .pipeline-action-btn:hover::before {
opacity: 0.5;
}
body:not(.dark-mode) .pipeline-action-btn:hover span {
color: #fff;
}
/* Dark mode (default) */
body.dark-mode .pipeline-action-btn::before {
background: #272727;
}
body.dark-mode .pipeline-action-btn {
color: #fff;
}
/* ===== PIPELINE SECONDARY BUTTON — gradient border (subtle) ===== */
.pipeline-secondary-btn {
position: relative;
text-decoration: none;
color: #fff;
background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
padding: 8px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: none;
outline: none;
white-space: nowrap;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
}
.pipeline-secondary-btn span {
position: relative;
z-index: 1;
}
.pipeline-secondary-btn::before {
content: "";
position: absolute;
inset: 1px;
background: #272727;
border-radius: 7px;
transition: 0.5s;
}
.pipeline-secondary-btn:hover::before {
opacity: 0.7;
}
body:not(.dark-mode) .pipeline-secondary-btn::before {
background: #f0f0f2;
}
body:not(.dark-mode) .pipeline-secondary-btn {
color: #1a1a2e;
}
body:not(.dark-mode) .pipeline-secondary-btn span {
color: #1a1a2e;
}
body:not(.dark-mode) .pipeline-secondary-btn:hover span {
color: #fff;
}
/* ===== PIPELINE BOTTOM BAR DIVIDERS (unified) ===== */
#previewBottomBar,
#titlesBottomBar,
#exportBottomBar,
.batch-file-bar {
border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
}
body:not(.dark-mode) #previewBottomBar,
body:not(.dark-mode) #titlesBottomBar,
body:not(.dark-mode) #exportBottomBar,
body:not(.dark-mode) .batch-file-bar {
border-top: 2px solid rgba(0, 0, 0, 0.1) !important;
}
/* Titles tab thumbnail grid cards */
.thumb-container {
width: 100%;
aspect-ratio: 1 / 1;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 6px 6px 0 0;
}
.thumb-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.thumb-container .thumb-placeholder {
color: #484f58;
font-size: 10px;
text-align: center;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ensure batch step can expand to full width for previews */
.content-center .step-batch-content {
max-width: none !important;
}
.carousel-container {
margin-top: 20px;
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.carousel-controls-row {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
}
.carousel-preview-row {
width: 100%;
position: relative;
}
.aspect-ratio-previews {
display: flex;
gap: 80px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0;
flex-wrap: nowrap;
justify-content: flex-start;
position: relative;
}
.aspect-ratio-previews::before,
.aspect-ratio-previews::after {
content: '';
flex: 0 0 calc(50% - 250px);
min-width: 100px;
}
.aspect-ratio-previews::-webkit-scrollbar {
display: none;
}
.aspect-preview {
flex: 0 0 auto;
scroll-snap-align: center;
scroll-snap-stop: always;
transform: scale(0.9);
transition: all 0.3s ease;
}
.aspect-preview.active {
transform: scale(1);
}
.preview-container {
height: 400px;
width: auto;
}
.preview-container[data-aspect-ratio="9:16"] {
width: 225px;
}
.preview-container[data-aspect-ratio="4:5"] {
width: 320px;
}
.preview-container[data-aspect-ratio="1:1"] {
width: 400px;
}
.carousel-arrow {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #1f2937;
transition: all 0.3s ease;
flex-shrink: 0;
z-index: 10;
}
.carousel-arrow:hover {
background: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.25);
transform: scale(1.1);
}
.carousel-arrow:active {
transform: scale(0.95);
}
.carousel-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.dark-mode .carousel-arrow,
.main-content.console-dark-mode .carousel-arrow {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.dark-mode .carousel-arrow:hover,
.main-content.console-dark-mode .carousel-arrow:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
.dark-mode .carousel-arrow:disabled,
.main-content.console-dark-mode .carousel-arrow:disabled {
opacity: 0.3;
}
.carousel-indicators-wrapper {
display: flex;
justify-content: center;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
min-width: 0;
}
.carousel-indicators-wrapper::-webkit-scrollbar {
display: none;
}
.carousel-indicators {
display: flex;
gap: 12px;
padding: 8px 16px;
align-items: center;
}
.indicator-chip,
.master-console-overlay .indicator-chip,
.master-console-overlay .carousel-indicators .indicator-chip,
.master-console-overlay .carousel-indicators-wrapper .indicator-chip,
.master-console-overlay button.indicator-chip {
flex: 0 0 auto;
scroll-snap-align: center;
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 20px;
padding: 8px 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 80px;
}
.indicator-chip:hover,
.master-console-overlay .indicator-chip:hover,
.master-console-overlay .carousel-indicators .indicator-chip:hover,
.master-console-overlay .carousel-indicators-wrapper .indicator-chip:hover,
.master-console-overlay button.indicator-chip:hover {
background: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.25);
}
.indicator-chip.active,
.master-console-overlay .indicator-chip.active,
.master-console-overlay .carousel-indicators .indicator-chip.active,
.master-console-overlay .carousel-indicators-wrapper .indicator-chip.active,
.master-console-overlay button.indicator-chip.active {
border: 1px solid #1d4ed8 !important;
transform: scale(1.05);
}
.indicator-label {
font-size: 12px;
font-weight: 600;
color: #1f2937;
}
.indicator-subtitle {
font-size: 10px;
color: rgba(0, 0, 0, 0.6);
}
.dark-mode .indicator-chip,
.dark-mode .master-console-overlay .indicator-chip,
.dark-mode .master-console-overlay .carousel-indicators .indicator-chip,
.dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip,
.dark-mode .master-console-overlay button.indicator-chip,
.main-content.console-dark-mode .indicator-chip,
.main-content.console-dark-mode .master-console-overlay .indicator-chip,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators .indicator-chip,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip,
.main-content.console-dark-mode .master-console-overlay button.indicator-chip {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.dark-mode .indicator-chip:hover,
.dark-mode .master-console-overlay .indicator-chip:hover,
.dark-mode .master-console-overlay .carousel-indicators .indicator-chip:hover,
.dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip:hover,
.dark-mode .master-console-overlay button.indicator-chip:hover,
.main-content.console-dark-mode .indicator-chip:hover,
.main-content.console-dark-mode .master-console-overlay .indicator-chip:hover,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators .indicator-chip:hover,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip:hover,
.main-content.console-dark-mode .master-console-overlay button.indicator-chip:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.dark-mode .indicator-chip.active,
.dark-mode .master-console-overlay .indicator-chip.active,
.dark-mode .master-console-overlay .carousel-indicators .indicator-chip.active,
.dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip.active,
.dark-mode .master-console-overlay button.indicator-chip.active,
.main-content.console-dark-mode .indicator-chip.active,
.main-content.console-dark-mode .master-console-overlay .indicator-chip.active,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators .indicator-chip.active,
.main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip.active,
.main-content.console-dark-mode .master-console-overlay button.indicator-chip.active {
background: rgba(255, 255, 255, 0.25);
border: 1px solid #3b82f6 !important;
}
.dark-mode .indicator-label,
.main-content.console-dark-mode .indicator-label {
color: #ffffff;
}
.dark-mode .indicator-subtitle,
.main-content.console-dark-mode .indicator-subtitle {
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
.carousel-controls-row {
gap: 15px;
margin-bottom: 20px;
}
.carousel-arrow {
width: 32px;
height: 32px;
}
.carousel-arrow svg {
width: 18px;
height: 18px;
}
.aspect-ratio-previews {
gap: 50px;
padding: 30px 0;
}
.aspect-ratio-previews::before,
.aspect-ratio-previews::after {
flex: 0 0 calc(50% - 200px);
min-width: 80px;
}
.preview-container {
height: 400px;
}
.preview-container[data-aspect-ratio="9:16"] {
width: 225px;
}
.preview-container[data-aspect-ratio="4:5"] {
width: 320px;
}
.preview-container[data-aspect-ratio="1:1"] {
width: 400px;
}
}
@media (max-width: 480px) {
.carousel-controls-row {
gap: 10px;
margin-bottom: 15px;
}
.carousel-arrow {
display: none;
}
.aspect-ratio-previews {
gap: 40px;
padding: 20px 0;
}
.aspect-ratio-previews::before,
.aspect-ratio-previews::after {
flex: 0 0 calc(50% - 175px);
min-width: 60px;
}
.preview-container {
height: 350px;
}
.preview-container[data-aspect-ratio="9:16"] {
width: 196.875px;
}
.preview-container[data-aspect-ratio="4:5"] {
width: 280px;
}
.preview-container[data-aspect-ratio="1:1"] {
width: 350px;
}
}
/* Top-align preview content so it doesn't get vertically clipped */
.console-drop-zone.preview-mode {
justify-content: flex-start !important;
align-items: stretch !important;
padding: 0 !important;
border-radius: 0 !important;
}
.console-drop-zone.preview-mode ~ *,
.step-batch-content:has(.preview-mode) {
padding: 0 !important;
}
/* Ensure batch step can expand to full width for previews */
.content-center .step-batch-content {
max-width: none !important;
}
/* Old loading screen CSS removed — replaced by .auth-loading-screen */
.versionary-logo-svg {
width: 100%;
height: 100%;
opacity: 0.9;
}
.versionary-logo-svg .line-element {
fill: rgba(255, 255, 255, 0.8);
stroke: none;
}
.loading-logo::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(249, 115, 22, 0.8) 20%,
rgba(255, 255, 255, 0.9) 50%,
rgba(220, 38, 38, 0.8) 80%,
transparent 100%);
animation: logoSweep 3s ease-in-out infinite;
z-index: 2;
}
.loading-logo::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.1) 50%,
rgba(255,255,255,0) 100%);
animation: logoPulse 2s ease-in-out infinite alternate;
z-index: 1;
}
@keyframes logoSweep {
0% {
left: -100%;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes logoPulse {
0% {
opacity: 0.3;
transform: scaleX(1);
}
100% {
opacity: 0.6;
transform: scaleX(1.02);
}
}
.loading-text {
font-size: 1.8rem;
font-weight: 300;
margin: 0 0 10px 0;
opacity: 0.95;
animation: textPulse 2s ease-in-out infinite;
}
.loading-subtext {
font-size: 1rem;
font-weight: 300;
margin: 0;
opacity: 0.7;
animation: textPulse 2s ease-in-out infinite 0.5s;
}
@keyframes textPulse {
0%, 100% {
opacity: 0.7;
transform: translateY(0px);
}
50% {
opacity: 1;
transform: translateY(-2px);
}
}
.loading-progress {
width: 300px;
height: 4px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
margin: 30px auto 0;
overflow: hidden;
position: relative;
}
.loading-progress::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.8),
transparent);
animation: progressSweep 2s ease-in-out infinite;
}
@keyframes progressSweep {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Agency Interface - Hidden until loaded */
.agency-static-interface {
opacity: 0;
transition: opacity 0.8s ease-in;
}
.agency-static-interface.loaded {
opacity: 1;
}
.agency-nav-item:not(.center) {
color: #374151 !important;
border: none !important;
background: rgba(255,255,255,0.9) !important;
}
.agency-nav-item:not(.center):hover {
color: #1f2937 !important;
background: rgba(255,255,255,1) !important;
}
.agency-nav-item.center {
color: #374151 !important;
border: 1px solid rgba(0,0,0,0.15) !important;
background: rgba(255,255,255,0.9) !important;
}
.agency-nav-item.center:hover {
color: #1f2937 !important;
background: rgba(255,255,255,1) !important;
border-color: rgba(0,0,0,0.2) !important;
}
.gradient-bg-night .agency-nav-item:hover {
color: rgba(255,255,255,0.9) !important;
background: #303030 !important;
border-color: rgba(255,255,255,0.25) !important;
}
.gradient-bg-night .agency-nav-item.center:hover {
color: #ffffff !important;
background: #404040 !important;
border-color: rgba(255,255,255,0.25) !important;
}
.auth-buttons-container {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 99999px;
padding: 12px;
margin-bottom: -100px;
background: var(--bg-primary);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.2),
0 0 0 1px var(--border-color);
}
.auth-btn {
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.95rem;
font-weight: 500;
padding: 12px 24px;
border-radius: 99999px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.auth-btn-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.auth-btn-signup {
background-color: var(--text-primary);
color: var(--bg-primary);
border: 1px solid var(--text-primary);
}
.auth-btn-signup:hover {
background-color: var(--text-secondary);
border-color: var(--text-secondary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.auth-btn-login {
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.auth-btn-login:hover {
background-color: var(--bg-primary);
border-color: var(--text-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.auth-btn-docs {
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.auth-btn-docs:hover {
background-color: var(--bg-primary);
border-color: var(--text-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.auth-btn:active {
transform: translateY(1px);
}
.dark-mode .auth-btn-signup {
background-color: rgba(255, 255, 255, 0.95);
color: #000000;
border-color: rgba(255, 255, 255, 0.95);
}
.dark-mode .auth-btn-signup:hover {
background-color: #ffffff;
border-color: #ffffff;
}
.dark-mode .auth-btn-login {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.3);
}
.dark-mode .auth-btn-login:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
}
.dark-mode .auth-btn-docs {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.3);
}
.dark-mode .auth-btn-docs:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
}
.auth-dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-dialog-overlay.active {
opacity: 1;
visibility: visible;
}
.auth-dialog {
position: relative;
width: 90%;
max-width: 420px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
padding: 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transform: scale(0.9) translateY(20px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.auth-dialog-overlay.active .auth-dialog {
transform: scale(1) translateY(0);
opacity: 1;
}
.auth-dialog-content {
position: relative;
z-index: 1;
}
.auth-dialog-header {
text-align: center;
margin-bottom: 32px;
}
.auth-dialog-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.auth-dialog-subtitle {
font-size: 14px;
color: var(--text-secondary);
font-weight: 400;
}
.auth-form-group {
margin-bottom: 20px;
}
.auth-form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
font-family: 'Space Grotesk', sans-serif;
}
.auth-form-input {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 15px;
font-family: 'Space Grotesk', sans-serif;
background: var(--bg-secondary);
color: var(--text-primary);
transition: all 0.3s ease;
box-sizing: border-box;
}
.auth-form-input:focus {
outline: none;
border-color: #667eea;
background: var(--bg-primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.auth-form-input::placeholder {
color: var(--text-secondary);
}
.auth-form-submit {
width: 100%;
padding: 14px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 8px;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.auth-form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.auth-form-submit:active {
transform: translateY(0);
}
.auth-divider {
display: flex;
align-items: center;
margin: 24px 0;
color: var(--text-secondary);
font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-color);
}
.auth-divider span {
padding: 0 16px;
}
.auth-google-button {
width: 100%;
padding: 14px 24px;
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 15px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.auth-google-button:hover {
background: var(--bg-primary);
border-color: var(--border-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.auth-google-icon {
width: 20px;
height: 20px;
}
.auth-google-button .loading-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(0, 0, 0, 0.3);
border-top: 2px solid rgba(0, 0, 0, 0.9);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.dark-mode .auth-google-button .loading-spinner {
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid rgba(255, 255, 255, 0.9);
}
.auth-dialog-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: var(--bg-secondary);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 2;
}
.auth-dialog-close:hover {
background: var(--bg-secondary);
transform: rotate(90deg);
}
.auth-dialog-close svg {
width: 18px;
height: 18px;
stroke: var(--text-secondary);
}
.dark-mode .auth-dialog-overlay {
background: rgba(0, 0, 0, 0.4);
}
.dark-mode .auth-dialog {
background: rgba(30, 30, 30, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ============================================================================ */
/* NEW AUTH SYSTEM STYLES - PIN-based Authentication */
/* ============================================================================ */
/* Updated Login Modal Styles - PIN-based Auth */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
animation: fadeIn 0.2s ease-out;
}
.dialog-container {
background: #2D2D2D;
border-radius: 16px;
width: 90%;
max-width: 480px;
padding: 32px;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: slideUp 0.3s ease-out;
}
.dialog-close {
position: absolute;
top: 16px;
right: 16px;
background: transparent;
border: none;
color: #9CA3AF;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s;
}
.dialog-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #E5E7EB;
}
.dialog-header {
margin-bottom: 32px;
text-align: center;
}
.dialog-title {
font-size: 28px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 8px 0;
}
.dialog-subtitle {
font-size: 14px;
color: #9CA3AF;
margin: 0;
}
.auth-step {
animation: fadeIn 0.3s ease-out;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #E5E7EB;
margin-bottom: 8px;
}
.form-input {
width: 100%;
padding: 12px 16px;
background: #1F1F1F;
border: 2px solid #3F3F3F;
border-radius: 8px;
color: #FFFFFF;
font-size: 16px;
transition: all 0.2s;
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: #8B5CF6;
background: #252525;
}
.form-input::placeholder {
color: #6B7280;
}
.pin-input {
font-size: 24px;
letter-spacing: 8px;
text-align: center;
font-weight: 600;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.btn {
padding: 14px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
color: #FFFFFF;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-google {
background: #FFFFFF;
color: #1F1F1F;
border: 2px solid #E5E7EB;
}
.btn-google:hover {
background: #F9FAFB;
border-color: #D1D5DB;
}
.btn-block {
width: 100%;
}
.btn-link {
background: none;
border: none;
color: #8B5CF6;
font-size: 14px;
cursor: pointer;
padding: 8px;
text-decoration: none;
}
.btn-link:hover {
color: #A78BFA;
text-decoration: underline;
}
.divider {
display: flex;
align-items: center;
margin: 24px 0;
color: #6B7280;
font-size: 14px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: #3F3F3F;
}
.divider span {
padding: 0 16px;
}
.resend-section {
margin-top: 16px;
text-align: center;
}
.status-message {
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
animation: slideDown 0.3s ease-out;
}
.status-message.success {
background: rgba(34, 197, 94, 0.1);
border: 1px solid #22C55E;
color: #22C55E;
}
.status-message.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid #EF4444;
color: #EF4444;
}
.status-message.info {
background: rgba(139, 92, 246, 0.1);
border: 1px solid #8B5CF6;
color: #A78BFA;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideDown {
from {
transform: translateY(-10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Auth loading screen - animated gradient + Lottie triangle loader */
.auth-loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(-45deg, #00eff8, #f800b4, #ebf503, #02f6c1, #00eff8, #9400f8);
background-size: 400% 400%;
animation: authGradient 30s ease infinite;
}
@keyframes authGradient {
0% { background-position: 0% 50%; }
25% { background-position: 50% 100%; }
50% { background-position: 100% 50%; }
75% { background-position: 50% 0%; }
100% { background-position: 0% 50%; }
}
/* Loading spinner for buttons */
.btn-loading::after {
content: '';
width: 16px;
height: 16px;
margin-left: 12px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #FFFFFF;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes v2DotPulse {
0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1.2); }
}