:root {
    --bg-color: #0a0b1e;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-color: #e0e0e0;
    --accent-color: #00f3ff;
    --accent-glow: 0 0 10px rgba(0, 243, 255, 0.5);
    --danger-color: #ff3e3e;
    --success-color: #00ff88;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #1a1c2e 0%, #0a0b1e 100%);
}

.container {
    width: 100%;
    max-width: 1400px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

/* Start Screen Styling */
#start-screen {
    text-align: center;
    gap: 2rem;
}

.logo {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
}

.highlight {
    color: var(--accent-color);
    text-shadow: var(--accent-glow);
}

.description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.input-group {
    display: flex;
    gap: 1rem;
    background: var(--glass-bg);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#url-input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    padding: 0.5rem;
    outline: none;
}

#url-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#start-btn {
    background: var(--accent-color);
    color: #000;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--accent-color);
}

.note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
}

/* Session View Styling */
#session-view {
    justify-content: flex-start;
    padding: 1rem;
}

.control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: var(--glass-bg);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.url-display {
    font-family: 'Courier New', monospace;
    color: var(--accent-color);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    min-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timer {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.danger-btn {
    background: rgba(255, 62, 62, 0.2);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
}

.danger-btn:hover {
    background: var(--danger-color);
    color: white;
    box-shadow: 0 0 15px var(--danger-color);
}

.browser-container {
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: none; /* Hide default cursor, draw custom one if needed or let logic handle */
    /* Wait, browser canvas will show the content. For remote cursor, we rely on the implementation. 
       Usually if we map mousemove, the remote cursor moves on screen. 
       Let's keep default cursor for now unless user wants strict hiding. */
    cursor: crosshair; 
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(5px);
    z-index: 10;
}

.hidden {
    display: none !important;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#status-text {
    font-size: 1.1rem;
    color: var(--text-color);
}