@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap";:root{--primary-color: #2c3e50;--secondary-color: #fca12e;--accent-color: #e74c3c;--success-color: #27ae60;--background-color: #ecf0f1;--container-bg: #ffffff;--text-color: #2c3e50;--border-color: #bdc3c7;--hover-color: #e39429;--subtitle-bg: #f9f9f9;--download-bg: #2c3e50;--download-hover: #fca12e;--font-light: 300;--font-regular: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700}body{font-family:Montserrat,sans-serif;font-weight:var(--font-regular);line-height:1.6;margin:0;padding:20px;background-color:var(--background-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}.dark-mode{--primary-color: #fca12e;--secondary-color: #fca12e;--accent-color: #f28b82;--success-color: #81c995;--background-color: #202124;--container-bg: #2a2a2a;--text-color: #e8eaed;--border-color: #5f6368;--hover-color: #e39429;--subtitle-bg: #333333;--download-bg: #fca12e;--download-hover: #e39429}.container{max-width:800px;margin:0 auto;background-color:var(--container-bg);padding:30px;border-radius:12px;box-shadow:0 4px 6px #0000001a}h1{text-align:center;color:var(--primary-color);margin-bottom:30px;font-size:2.2em;font-weight:var(--font-bold);letter-spacing:-.5px}h2{color:var(--primary-color);font-size:1.5em;margin-bottom:20px;font-weight:var(--font-semibold);letter-spacing:-.3px}.form-group{margin-bottom:25px}.subtitle-styling .form-group{margin-bottom:4px}label{display:block;margin-bottom:8px;font-weight:var(--font-medium);color:var(--primary-color);letter-spacing:.2px}select{width:100%;padding:12px;border:2px solid var(--border-color);border-radius:6px;font-size:14px;font-family:Montserrat,sans-serif;font-weight:var(--font-regular);transition:border-color .3s ease;background-color:var(--container-bg);color:var(--text-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em;padding-right:2.5rem;box-sizing:border-box}select:focus{border-color:var(--secondary-color);outline:none}button{background-color:var(--secondary-color);color:#fff;padding:12px 24px;border:none;border-radius:6px;cursor:pointer;width:100%;font-size:16px;font-weight:var(--font-semibold);font-family:Montserrat,sans-serif;letter-spacing:.3px;transition:background-color .3s ease,transform .2s ease}button:hover:not(:disabled){background-color:var(--hover-color);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed}.progress-bar{height:8px;background-color:var(--background-color);border-radius:4px;overflow:hidden;margin:20px 0}.progress-fill{height:100%;background-color:var(--success-color);width:0%;animation:progress 2s infinite linear;border-radius:4px}@keyframes progress{0%{width:0%}to{width:100%}}.status-text{text-align:center;color:var(--primary-color);font-weight:var(--font-medium);margin-top:10px;letter-spacing:.2px}.download-links{display:flex;flex-direction:column;gap:12px;margin-top:25px}.download-button{display:block;background-color:var(--download-bg);color:#fff;text-decoration:none;padding:14px 24px;border-radius:6px;text-align:center;font-weight:var(--font-semibold);letter-spacing:.3px;transition:all .3s ease;margin:20px;width:auto}.download-button:hover{background-color:var(--download-hover);transform:translateY(-1px)}.tabs{margin-bottom:30px;border-bottom:2px solid var(--border-color);display:flex;gap:5px}.tab-button{padding:12px 24px;margin-bottom:-2px;border:none;background:none;cursor:pointer;font-size:16px;font-weight:var(--font-medium);color:var(--text-color);font-family:Montserrat,sans-serif;letter-spacing:.2px;transition:all .3s ease;border-bottom:2px solid transparent;width:auto}.tab-button:hover{color:var(--secondary-color);background-color:transparent;transform:none}.tab-button.active{border-bottom:2px solid var(--secondary-color);color:var(--secondary-color);font-weight:var(--font-semibold)}.tab-content{padding:25px 0;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}input[type=file]{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}input[type=file]+label{display:inline-block;padding:12px 24px;background-color:var(--secondary-color);color:#fff;font-family:Montserrat,sans-serif;font-weight:var(--font-semibold);font-size:14px;border-radius:6px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;text-align:center;width:100%;box-sizing:border-box}input[type=file]+label:hover{background-color:var(--hover-color);transform:translateY(-1px)}input[type=file]+label:active{transform:translateY(0)}.file-info{margin-top:8px;font-size:14px;color:var(--primary-color);font-family:Montserrat,sans-serif;font-weight:var(--font-regular)}.subtitle-styling{border:1px solid var(--border-color);padding:12px;margin-bottom:20px;border-radius:8px;background-color:var(--subtitle-bg)}.subtitle-styling h3{margin-top:0;margin-bottom:10px;color:var(--primary-color);font-size:1em;font-weight:var(--font-medium);letter-spacing:-.2px}.form-row{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}.form-group.half{width:calc(50% - 8px)}.subtitle-styling input[type=number],.subtitle-styling select{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:4px;font-size:13px;font-family:Montserrat,sans-serif;font-weight:var(--font-regular);transition:border-color .3s ease;box-sizing:border-box;height:32px;background-color:var(--container-bg);color:var(--text-color)}.subtitle-styling input[type=number]:focus,.subtitle-styling select:focus{border-color:var(--secondary-color);outline:none}.subtitle-styling label{font-size:13px;margin-bottom:4px}.auth-container{z-index:1000;background-color:var(--container-bg);border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.auth-container.sign-in-state{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:40px 60px;text-align:center;box-shadow:0 8px 16px #00000026}.auth-container.sign-in-state .auth-button{background-color:var(--secondary-color);color:#fff;padding:15px 30px;border:none;border-radius:8px;cursor:pointer;font-size:18px;font-weight:var(--font-semibold);font-family:Montserrat,sans-serif;transition:background-color .3s ease,transform .2s ease;min-width:140px}.auth-container.sign-in-state .auth-button:hover{background-color:var(--hover-color);transform:translateY(-2px)}.auth-container.sign-out-state{position:fixed;top:20px;left:20px;padding:10px 15px;font-size:14px}.auth-section{margin:5px 0}.auth-container.sign-out-state .auth-button{background-color:var(--secondary-color);color:#fff;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:var(--font-medium);font-family:Montserrat,sans-serif;transition:background-color .3s ease;min-width:80px;width:auto}.auth-container.sign-out-state .auth-button:hover{background-color:var(--hover-color);transform:none}.auth-container.sign-out-state .auth-button.secondary{background-color:var(--accent-color);margin-left:10px}.auth-container.sign-out-state .auth-button.secondary:hover{background-color:#c0392b}.user-info{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px}.welcome-message{font-size:12px;font-weight:var(--font-medium);color:var(--text-color)}.dark-mode-toggle{position:fixed;top:70px;right:20px;z-index:1000;height:40px;border-radius:50%;background-color:var(--secondary-color);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #0003;color:#fff;transition:background-color .3s ease;padding:0;overflow:hidden;width:40px}.dark-mode-toggle:hover{background-color:var(--hover-color);transform:none}.sandbox-banner{background-color:red;color:#fff;padding:10px;text-align:center;margin:-20px -20px 20px}.sandbox-banner a{color:#fff;text-decoration:underline}.sandbox-banner.bottom{margin:20px -20px -20px}@media (max-width: 600px){.container{padding:20px}h1{font-size:1.8em}.tab-button{padding:10px 15px;font-size:14px}.form-row{flex-direction:column;gap:10px}.form-group.half{width:100%}.subtitle-styling{padding:10px}.subtitle-styling input[type=number],.subtitle-styling select{padding:6px}.dark-mode-toggle{top:60px;right:10px;width:36px;height:36px}.auth-container.sign-in-state{padding:30px 40px;width:90%;max-width:320px;left:50%;transform:translate(-50%,-50%)}.auth-container.sign-in-state .auth-button{padding:12px 24px;font-size:16px;min-width:120px}.auth-container.sign-out-state{top:10px;left:10px;padding:8px 12px;font-size:12px}.user-info{flex-direction:column;gap:8px}.auth-container.sign-out-state .auth-button.secondary{margin-left:0;margin-top:8px}}.preview-panel{margin-top:24px;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background-color:var(--subtitle-bg);animation:fadeIn .3s ease}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background-color:var(--primary-color);color:#fff;font-size:13px;font-weight:var(--font-medium);gap:10px}.preview-close{background:none;border:none;color:#fff;cursor:pointer;font-size:16px;padding:0 4px;width:auto;line-height:1;opacity:.8;transition:opacity .2s;flex-shrink:0}.preview-close:hover{opacity:1;background:none;transform:none}.preview-image{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background-color:#000}
