* {margin: 0;padding: 0;box-sizing: border-box;}
:root {--primary: #FF0000;--primary-dark: #CC0000;--primary-light: #FF3333;--bg-dark: #2a2a2a;--bg-card: #3a3a3a;--text-primary: #ffffff;--text-secondary: #b3b3b3;--border: #4a4a4a;--shadow: rgba(0, 0, 0, 0.5);}
body.light-mode {--bg-dark: #f5f5f5;--bg-card: #ffffff;--text-primary: #1a1a1a;--text-secondary: #666666;--border: #e0e0e0;--shadow: rgba(0, 0, 0, 0.1);}
body.theater-mode #player-container {max-width: 77% !important;width: 77% !important;margin: 0 auto !important;padding: 0 !important;border: none !important;}
body.theater-mode .container {max-width: 100% !important;padding: 0 !important;}
body.theater-mode main {max-width: 100vw !important;width: 100vw !important;padding: 0 !important;margin: 0 !important;}
body.theater-mode .player-wrapper {padding-bottom: 70vh !important;max-height: 100vh !important;border-radius: 0 !important;width: 100% !important;}
body.theater-mode .player-wrapper iframe {width: 100% !important;height: 100% !important;}
body.theater-mode .features,
body.theater-mode .instructions,
body.theater-mode footer,
body.theater-mode .hero {display: none !important;}
body.theater-mode nav {padding: 0.25rem 1rem !important;min-height: auto !important;margin-bottom: 0 !important;border-bottom: none !important;}
body.theater-mode .nav-container {margin: 0 auto !important;padding: 0 0.5rem !important;}
body.theater-mode .logo {font-size: 1rem !important;}
body.theater-mode .btn-icon,
body.theater-mode .btn-social,
body.theater-mode .btn-donate {padding: 0.25rem 0.5rem !important;font-size: 0.75rem !important;}
body.theater-mode .video-info {display: none !important;}
body.theater-mode .video-title {display: none !important;}
body.theater-mode .video-primary-info {display: none !important;}
body.theater-mode .video-details {display: none !important;}
html {scroll-behavior: smooth;}
body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;background: var(--bg-dark);color: var(--text-primary);line-height: 1.6;overflow-x: hidden;position: relative;}
.background-gradient {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(204, 0, 0, 0.05) 0%, transparent 50%);pointer-events: none;z-index: -1;}
/* Navbar */
.navbar {background: rgba(26, 26, 26, 0.8);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-bottom: 1px solid var(--border);position: sticky;top: 0;z-index: 1000;padding: 5px 0;}
.nav-container {max-width: 1400px;margin: 5px auto;padding: 0 5px;display: flex;justify-content: space-between;align-items: center;}
.logo {display: flex;align-items: center;gap: 12px;font-weight: 700;font-size: 1.25rem;}
.logo svg {flex-shrink: 0;}
.logo-text {color: var(--text-primary);line-height: 1;display: flex;align-items: center;}
.nav-actions {display: flex;flex-direction: row;gap: 1rem;align-items: center;}
.btn-icon {padding: 0.5rem;border-radius: 10px;background: transparent;border: 2px solid white;display: flex;align-items: center;justify-content: center;color: white;transition: all 0.3s ease;cursor: pointer;font-size: 0.9rem;}
.btn-icon:hover {background: rgba(255, 255, 255, 0.1);transform: translateY(-2px);}
.btn-social {padding: 0.5rem 1.2rem;border-radius: 10px;background: white;border: 2px solid white;display: flex;align-items: center;justify-content: center;gap: 8px;color: #000;transition: all 0.3s ease;text-decoration: none;font-weight: 600;font-size: 0.9rem;white-space: nowrap;}
.btn-social:hover {background: #f0f0f0;transform: translateY(-2px);}
.btn-donate {padding: 0.5rem 1.2rem;border-radius: 10px;background: transparent;border: 2px solid white;color: #FF1493;font-weight: 600;font-size: 0.9rem;cursor: pointer;transition: all 0.3s ease;text-decoration: none;display: flex;align-items: center;gap: 8px;white-space: nowrap;}
.btn-donate svg {color: #FF0000;}
.btn-donate:hover {background: rgba(255, 20, 147, 0.1);transform: translateY(-2px);}
.donate-wrapper {display: flex;flex-direction: column;align-items: center;gap: 4px;position: relative;}
.donate-options {display: flex;gap: 0.75rem;margin-top: 0.5rem;animation: fadeIn 0.3s ease;}
@keyframes fadeIn {from {opacity: 0;transform: translateY(-10px);}
to {opacity: 1;transform: translateY(0);}
}
.donate-option {padding: 0.6rem 1.2rem;border-radius: 10px;display: flex;align-items: center;justify-content: center;gap: 8px;font-weight: 600;font-size: 0.9rem;cursor: pointer;transition: all 0.3s ease;text-decoration: none;white-space: nowrap;}
.paypal-option {background: #0070BA;border: 2px solid #0070BA;color: white;}
.paypal-option:hover {background: #005A94;border-color: #005A94;transform: translateY(-2px);}
.wise-option {background: #9FE870;border: 2px solid #9FE870;color: #000;}
.wise-option:hover {background: #7ECA50;border-color: #7ECA50;transform: translateY(-2px);}
/* Header Disclaimer */
.header-disclaimer {max-width: 1400px;margin: 0 auto;padding: 0;text-align: center;}
.header-disclaimer p {font-size: 0.9rem;color: #FFFFFF;line-height: 1.4;margin: 0 auto;padding: 0;font-weight: 700;text-align: center;}
/* Container */
.container {max-width: 1400px;margin: 0 auto;padding: 0.5rem;}
main {min-height: 80vh;}
/* Player Container */
#player-container {display: none;max-width: 85%;margin: 5px auto 2rem auto;}
#player-container.active {display: block;}
#video-player {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;background: #000;border-radius: 12px;box-shadow: 0 8px 24px var(--shadow);}
#video-player iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;border-radius: 12px;}
/* Repeat Controls */
.repeat-controls {margin-top: 1rem;background: var(--bg-card);border-radius: 12px;padding: 1rem;border: 1px solid var(--border);}
.repeat-toggle-line {display: flex;align-items: center;justify-content: space-between;gap: 1rem;}
.repeat-toggle-left {display: flex;align-items: center;gap: 1rem;}
.repeat-label {font-weight: 600;font-size: 1rem;color: var(--text-primary);}
.repeat-toggle-btn {display: flex;align-items: center;gap: 0.75rem;background: transparent;border: none;cursor: pointer;padding: 0.5rem;border-radius: 8px;transition: background 0.2s ease;}
.repeat-toggle-btn:hover {background: rgba(255, 255, 255, 0.05);}
.toggle-switch {width: 44px;height: 24px;background: var(--border);border-radius: 12px;position: relative;transition: background 0.3s ease;}
.toggle-switch.active {background: #00FF00;}
.toggle-slider {width: 18px;height: 18px;background: white;border-radius: 50%;position: absolute;top: 3px;left: 3px;transition: left 0.3s ease;}
.toggle-switch.active .toggle-slider {left: 23px;}
.toggle-text {font-weight: 700;font-size: 0.95rem;color: var(--text-secondary);min-width: 35px;}
.toggle-switch.active + .toggle-text {color: #00FF00;}
.repeat-settings {margin-top: 1rem;padding-top: 1rem;border-top: 1px solid var(--border);}
.time-controls {display: flex;flex-direction: column;gap: 1rem;}
.time-control-group {display: flex;align-items: center;gap: 1rem;flex-wrap: wrap;}
.time-control-group label {font-weight: 600;color: var(--text-primary);min-width: 60px;}
.time-control-group input {width: 100px;padding: 0.5rem 0.75rem;background: var(--bg-dark);border: 1px solid var(--border);border-radius: 6px;color: var(--text-primary);font-size: 0.9rem;}
.time-control-group input:focus {outline: none;border-color: #00FF00;}
.set-current-btn {padding: 0.5rem 1rem;background: var(--bg-dark);border: 1px solid var(--border);border-radius: 6px;color: var(--text-primary);font-size: 0.85rem;cursor: pointer;transition: all 0.2s ease;white-space: nowrap;}
.set-current-btn:hover {background: var(--border);border-color: #00FF00;}
.action-buttons {display: flex;gap: 0.75rem;margin-top: 0.5rem;}
.ok-btn, .clear-btn {padding: 0.6rem 1.5rem;border-radius: 8px;font-weight: 600;font-size: 0.9rem;cursor: pointer;transition: all 0.2s ease;border: none;}
.ok-btn {background: #00FF00;color: #000;}
.ok-btn:hover {background: #00CC00;transform: translateY(-1px);}
.clear-btn {background: transparent;border: 1px solid var(--border);color: var(--text-primary);}
.clear-btn:hover {background: var(--border);border-color: #FF0000;color: #FF0000;}
/* Video Details - YouTube Style */
.video-details {margin-bottom: 1.5rem;}
.video-primary-info {padding-bottom: 1rem;border-bottom: 1px solid var(--border);}
.video-title {font-size: 1.10rem;font-weight: 600;margin-bottom: 2px;line-height: 1;color: #D0D0D0;text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;}
.video-meta {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1rem;}
.video-stats {display: flex;gap: 1.5rem;align-items: center;}
.video-stats span {display: flex;align-items: center;gap: 6px;color: var(--text-secondary);font-size: 0.95rem;}
.video-stats svg {opacity: 0.8;}
.video-actions {display: flex;gap: 0.5rem;flex-wrap: wrap;}
.action-btn {padding: 0.6rem 1.2rem;border-radius: 50px;background: var(--bg-card);border: 1px solid var(--border);color: var(--text-primary);font-weight: 600;font-size: 0.9rem;cursor: pointer;transition: all 0.2s ease;display: flex;align-items: center;gap: 8px;}
.action-btn:hover {background: var(--border);transform: scale(1.02);}
.action-btn svg {opacity: 0.9;}
.like-btn:hover {background: rgba(255, 0, 0, 0.1);border-color: var(--primary);color: var(--primary);}
.share-btn:hover svg,
.like-btn:hover svg {opacity: 1;}
.watch-on-youtube {background: var(--primary);border-color: var(--primary);}
.watch-on-youtube:hover {background: var(--primary-dark);border-color: var(--primary-dark);transform: scale(1.05);}
/* Hero Section */
.hero-section {text-align: center;padding: 1rem 1rem;max-width: 900px;margin: 0 auto;}
.hero-badge {display: inline-block;padding: 0.4rem 1rem;background: rgba(255, 0, 0, 0.1);border: 1px solid rgba(255, 0, 0, 0.3);border-radius: 50px;color: var(--primary-light);font-weight: 600;font-size: 0.85rem;margin-bottom: 0.75rem;text-transform: uppercase;letter-spacing: 1px;}
.hero-title {font-size: 3rem;font-weight: 800;line-height: 1.1;margin-bottom: 0;background: linear-gradient(135deg, #ffffff 0%, #b3b3b3 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.hero-subtitle {font-size: 1.3rem;color: var(--text-secondary);margin-bottom: 0;line-height: 1.8;}
.cta-buttons {display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;}
.btn-primary {padding: 1rem 2.5rem;border-radius: 14px;background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);color: white;font-weight: 700;font-size: 1.1rem;border: none;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 10px;box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);}
.btn-primary:hover {transform: translateY(-3px);box-shadow: 0 15px 40px rgba(255, 0, 0, 0.4);}
.btn-secondary {padding: 1rem 2.5rem;border-radius: 14px;background: transparent;color: var(--text-primary);font-weight: 600;font-size: 1.1rem;border: 2px solid var(--border);cursor: pointer;transition: all 0.3s ease;}
.btn-secondary:hover {background: var(--bg-card);border-color: var(--primary);transform: translateY(-3px);}
/* Features Grid */
.features-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 0.75rem;margin: 1.5rem 0;padding: 0 0.5rem;}
.feature-card {background: var(--bg-card);border: 1px solid var(--border);border-radius: 12px;padding: 1.25rem;transition: all 0.3s ease;position: relative;overflow: hidden;}
.feature-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, transparent, var(--primary), transparent);opacity: 0;transition: opacity 0.3s ease;}
.feature-card:hover {transform: translateY(-5px);border-color: var(--primary);box-shadow: 0 20px 40px var(--shadow);}
.feature-card:hover::before {opacity: 1;}
.feature-icon {width: 48px;height: 48px;border-radius: 12px;display: flex;align-items: center;justify-content: center;margin-bottom: 0.75rem;color: white;}
.feature-card h3 {font-size: 1.1rem;font-weight: 700;margin-bottom: 0.4rem;color: #00ff00;}
.feature-card p {color: var(--text-secondary);font-size: 0.9rem;line-height: 1.4;}
.feature-image-card {display: flex;align-items: center;justify-content: center;padding: 0;overflow: hidden;}
.feature-image {width: 100%;height: 100%;object-fit: cover;display: block;}
/* Instructions */
.instructions {max-width: 1000px;margin: 2rem auto;padding: 1.5rem;background: var(--bg-card);border: 1px solid var(--border);border-radius: 16px;}
.instructions h3 {font-size: 1.5rem;font-weight: 700;text-align: center;margin-bottom: 1.5rem;}
.steps {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 1rem;}
.step {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 0.5rem;}
.step-number {width: 48px;height: 48px;border-radius: 50%;background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color: white;display: flex;align-items: center;justify-content: center;font-size: 1.3rem;font-weight: 700;box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3);}
.step-content h4 {font-size: 1rem;font-weight: 600;margin-bottom: 0.25rem;}
.step-content p {color: var(--text-secondary);font-size: 0.85rem;}
/* Sample Section */
.sample-section {max-width: 1200px;margin: 3rem auto;padding: 2rem;text-align: center;}
.sample-section .hero-title {margin-bottom: 2rem;}
.sample-image {width: 100%;max-width: 100%;height: auto;border-radius: 12px;box-shadow: 0 10px 30px var(--shadow);border: 1px solid var(--border);}
/* Footer */
footer {border-top: 1px solid var(--border);margin-top: 4rem;padding: 2rem 0;}
.footer-content {max-width: 1400px;margin: 0 auto;padding: 0 2rem;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1.5rem;}
.footer-left p {color: var(--text-secondary);font-size: 0.9rem;}
.footer-right {display: flex;gap: 1.5rem;}
.footer-link {color: var(--text-secondary);text-decoration: none;font-size: 0.9rem;display: flex;align-items: center;gap: 8px;transition: all 0.3s ease;}
.footer-link:hover {color: var(--primary);}
/* Message (when no video) */
.message {display: block;}
.message.hidden {display: none;}
/* Responsive Design */
@media (max-width: 720px) {#player-container {max-width: 90%;}
.repeat-toggle-line {flex-direction: column;align-items: flex-start;gap: 0.75rem;}
.repeat-toggle-left {width: 100%;}
.watch-on-youtube {width: 100%;justify-content: center;}
.navbar {padding: 0.5rem 0;}
.nav-container {flex-direction: column;gap: 1rem;}
.nav-actions {flex-direction: column;width: 100%;}
.btn-social, .btn-donate {width: 100%;justify-content: center;}
.container {padding: 1rem;}
.video-title {font-size: 1rem;}
}
@media (max-width: 968px) {.hero-title {font-size: 3rem;}
.hero-subtitle {font-size: 1.1rem;}
.steps {grid-template-columns: repeat(2, 1fr);}
.footer-content {flex-direction: column;text-align: center;}
.video-meta {flex-direction: column;align-items: flex-start;}
.video-actions {width: 100%;}
.action-btn {flex: 1;justify-content: center;}
.channel-info {flex-wrap: wrap;}
.subscribe-btn {width: 100%;justify-content: center;}
}
@media (max-width: 720px) {.features-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px) {.hero-title {font-size: 2.5rem;}
.hero-subtitle {font-size: 1rem;}
.cta-buttons {flex-direction: column;width: 100%;}
.btn-primary,
.btn-secondary {width: 100%;justify-content: center;}
.steps {grid-template-columns: 1fr;}
.nav-container {padding: 0 1rem;}
.logo-text {font-size: 1rem;}
.container {padding: 1rem;}
.instructions {padding: 2rem 1.5rem;}
}
/* Animations */
@keyframes fadeIn {from {opacity: 0;transform: translateY(20px);}
to {opacity: 1;transform: translateY(0);}
}
.hero-section {animation: fadeIn 0.6s ease-out;}
.feature-card {animation: fadeIn 0.6s ease-out;animation-fill-mode: both;}
.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }