:root{--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--background-color: #fafafa;--text-color: #333;--nav-bg: #ffffff;--nav-baseline: #d6d6d6;--card-bg: #ffffff;--card-border: #ddd;--card-shadow: rgba(0, 0, 0, .1);--primary-color: #000;--primary-logo-bd-color: #fff;--secondary-color: #fff;--error-color: #ff4d4f;--link-color: #2563eb;--link-hover: #1e40af;--footer-text: #6b7280}.dark{--background-color: #121212;--text-color: #e0e0e0;--nav-bg: #121212;--nav-baseline: #333;--card-bg: #171717;--card-border: #333;--primary-color: #fff;--primary-logo-bd-color: #121212;--secondary-color: #000;--error-color: #ff4d4f;--link-color: #2563eb;--link-hover: #1e40af;--footer-text: var(--text-color)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:var(--background-color);color:var(--text-color);min-height:100vh;transition:background .3s,color .3s}.nav{display:flex;flex-direction:column;align-items:center;background-color:var(--nav-bg)}.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 100px}.nav-base-line{width:100%;height:1px;background-color:var(--nav-baseline)}.nav-title{font-size:28px;font-weight:700;text-align:center}.github-logo{width:25px;height:25px}nav-buttons{display:flex;gap:15px;align-items:center;justify-content:center}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px 64px;margin-top:15px}.card-container{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:450px;padding:32px;background:var(--card-bg);border-radius:12px;box-shadow:0 2px 4px var(--card-shadow);border:1px solid var(--card-border)}.card-title{font-size:28px;font-weight:700;text-align:center;margin-bottom:24px;letter-spacing:-.02em}.card-description{text-align:center;font-size:16px;color:gray;margin:5px 0 40px}.home-card-title{font-size:36px;margin-bottom:0}.home-card{max-width:1200px}.blog-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(900px,1fr));gap:20px;justify-content:center;width:100%;max-width:800px;margin:auto;opacity:0;animation:fadeIn .5s ease-in-out .2s forwards}.blog-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 4px 8px var(--card-shadow);border-radius:10px;padding:24px;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out}.blog-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #00000026}.blog-card-header{display:flex;align-items:center;gap:15px;margin-bottom:25px}.blog-card-title{font-size:18px;font-weight:500;margin-bottom:5px}.blog-card-description{font-size:14px;color:gray}.blog-card-content p{font-size:14px;color:#666;padding:15px;margin-bottom:10px}.example-text{color:#aaa;font-size:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.form-container{display:flex;flex-direction:column;gap:12px}.input-field{width:100%;padding:12px 16px;font-size:14px;border:1px solid #e5e5e5;border-radius:8px;outline:none;transition:all .2s;background:var(--card-bg);color:var(--text-color)}.input-field:focus{border-color:transparent;box-shadow:0 0 0 2px var(--primary-color)}.button-group{display:flex;gap:10px;justify-content:center;align-items:center}.continue-button{padding:10px 20px;font-size:16px;border:none;border-radius:5px;cursor:pointer;background-color:#4caf50;color:#fff;transition:background-color .3s ease;white-space:nowrap;height:40px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.continue-button:hover{background-color:#45a049}.continue-button.logout{background-color:#f44336}.continue-button.logout:hover{background-color:#d32f2f}.continue-button:disabled{background-color:#ccc;cursor:not-allowed}.buttons{display:flex;flex-direction:column;gap:12px}.signup{color:var(--secondary-color);background-color:var(--primary-color)}.signin{color:var(--primary-color);background-color:var(--secondary-color);border:1px solid #ccc}.blog{text-decoration:none;background-color:transparent;color:var(--primary-color);border:1px solid var(--card-border);transition:all .3s ease-in-out}.blog:hover{background-color:var(--primary-color);color:var(--secondary-color)}.dark-mode-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border:none;cursor:pointer;background:var(--primary-logo-bd-color);color:var(--primary-color)}.generate-button{padding:8px 16px;font-size:14px;border:none;border-radius:4px;cursor:pointer;background-color:#4caf50;color:#fff;transition:background-color .3s ease}.generate-button:hover{background-color:#45a049}.preview-button{padding:8px 16px;font-size:14px;border:none;border-radius:4px;cursor:pointer;background-color:#007bff;color:#fff;transition:background-color .3s ease}.preview-button:hover{background-color:#0056b3}.popup-content{background-color:#fff;padding:20px;border-radius:8px;width:80%;max-height:80%;overflow-y:auto;box-shadow:0 4px 8px #0003}.close-button{background-color:#f44336;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;float:right}.close-button:hover{background-color:#d32f2f}.json-content{font-family:monospace;font-size:14px;white-space:pre-wrap;word-wrap:break-word}.video-button{padding:8px 16px;font-size:14px;border:none;border-radius:4px;cursor:pointer;background-color:#28a745;color:#fff;transition:background-color .3s ease}.video-button:hover{background-color:#218838}.status-button{padding:8px 16px;font-size:14px;border:none;border-radius:4px;cursor:pointer;background-color:#17a2b8;color:#fff;transition:background-color .3s ease}.status-button:hover{background-color:#138496}.status-pending{background-color:#ffc107}.status-processing{background-color:#17a2b8}.status-completed{background-color:#28a745}.status-failed{background-color:#dc3545}.status-uploading{background-color:#ffc107}.status-uploaded{background-color:#28a745}.status-not_started{background-color:#dc3545}.status-details{padding:20px;border-radius:8px;margin-top:20px;color:#fff}.status-details h3{margin-bottom:15px;font-size:1.2em}.status-details p{margin:10px 0;line-height:1.4}.status-details strong{font-weight:600;margin-right:8px}.status-details.status-pending{background-color:#ffc107}.status-details.status-processing{background-color:#17a2b8}.status-details.status-completed{background-color:#28a745}.status-details.status-failed{background-color:#dc3545}.toast-container{display:flex;justify-content:space-between;align-items:center;min-width:300px}.toast-close-button{background:transparent;border:none;color:#fff;margin-left:10px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s}.toast-close-button:hover{background:#ffffff1a}.footer{text-align:center;margin-top:20px;font-size:14px;color:var(--footer-text)}.footer div{cursor:pointer;color:var(--link-color);font-weight:500;transition:color .3s ease-in-out}.footer div:hover{color:var(--link-hover)}.footer a{text-decoration:none;color:gray;font-weight:500;transition:color .3s ease-in-out}@media (max-width: 768px){.nav-container{padding:12px 20px}.container{padding:100px 16px 32px}.card-container{width:90%;padding:24px}.card-title{font-size:24px}.blog-container{grid-template-columns:1fr}.input-field{font-size:16px;padding:10px 14px}.continue-button{font-size:16px}.footer{font-size:12px;margin-top:16px}}@media (max-width: 480px){.container{padding:80px 12px 24px}.card-container{width:100%;padding:20px}.card-title{font-size:22px}.input-field{font-size:14px;padding:10px 12px}.continue-button{font-size:14px}.footer{font-size:12px;margin-top:12px}}textarea{background:#fff;border-radius:0;border:none;border-bottom:1px solid #ededed;font-size:14px;line-height:1.5;padding:8px 0;resize:none;transition:border-color .15s ease;width:100%}textarea:hover{border-color:#c6c6c6}textarea:focus{outline:none;border-color:#c6c6c6}textarea::placeholder{color:#c6c6c6}.styled-table tbody tr.active-row{font-weight:700;color:#009879}.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin:20px 0}.pagination button{padding:8px 16px;border:none;border-radius:4px;background-color:#009879;color:#fff;cursor:pointer;transition:background-color .3s}.pagination button:disabled{background-color:#ccc;cursor:not-allowed}.pagination button:hover:not(:disabled){background-color:#00796b}.pagination span{font-size:16px;color:#333}.upload-field{margin:10px 0;display:flex;align-items:center;gap:10px}.file-input{padding:8px;border:1px solid #ddd;border-radius:4px;background-color:#fff;width:100%}.upload-success{color:#4caf50;font-weight:700;display:flex;align-items:center;gap:5px}.upload-success:before{content:"✓";color:#4caf50}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:flex-start;z-index:1000;padding-top:100px}.popup-content{background-color:#fff;padding:20px;border-radius:8px;max-width:500px;width:90%;position:relative;box-shadow:0 2px 10px #0000001a;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.popup-close-button{margin-top:15px;padding:8px 16px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.popup-close-button:hover{background-color:#45a049}.description-header{display:flex;align-items:center;gap:10px;margin-bottom:5px}.example-button{padding:4px 8px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .3s;white-space:nowrap}.example-button:hover{background-color:#45a049}.example-content{font-size:14px;line-height:1.6;color:#333}.example-content h5{margin:0 0 10px;color:#4caf50}.example-content p{margin:0 0 8px}.description-template{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:15px;margin:15px 0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;white-space:pre-wrap;font-size:14px;line-height:1.6;color:#333}.description-template div{margin:8px 0}.use-template-button{display:block;width:100%;padding:10px;margin-top:15px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.use-template-button:hover{background-color:#45a049}.description-tips{list-style-type:none;padding:0;margin:15px 0}.description-tips li{padding:4px 0 4px 20px;position:relative;font-size:13px;color:#666}.description-tips li:before{content:"•";color:#4caf50;font-weight:700;position:absolute;left:0}.rich-text-input{width:100%;min-height:200px;padding:12px 16px;font-size:14px;line-height:1.6;border:1px solid #e5e5e5;border-radius:8px;background:var(--card-bg);color:var(--text-color);overflow-y:auto;white-space:pre-wrap;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.rich-text-input:empty:before{content:attr(placeholder);color:#999}.rich-text-input:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--primary-color)}.rich-text-input div{margin:8px 0}.input-header{display:flex;flex-direction:column;gap:4px}.input-header .example-button{align-self:flex-start}.input-header .character-count{align-self:flex-end}.character-count{font-size:12px;color:#666;margin-top:4px;text-align:right}.description-header{margin-bottom:5px}.pagination-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:10px;background-color:#f5f5f5;border-radius:5px}.limit-selector{display:flex;align-items:center;gap:10px}.limit-select{padding:5px 10px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;cursor:pointer}.limit-select:hover{border-color:#999}.limit-select:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}@media screen and (max-width: 768px){.container{padding:10px}.conversations-page{padding:10px;width:100%;overflow-x:hidden}.conversations-page h1{font-size:24px;margin:10px 0;text-align:center}.pagination-controls{flex-direction:column;gap:15px;align-items:stretch;padding:10px;background-color:#f5f5f5;border-radius:8px;margin:10px 0}.limit-selector{width:100%;display:flex;justify-content:space-between;align-items:center}.limit-select{width:100px;padding:8px;border:1px solid #ddd;border-radius:4px;background-color:#fff}.pagination{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 10px}.pagination button{padding:10px 20px;font-size:14px;min-width:100px;white-space:nowrap}.pagination span{font-size:14px;margin:0 10px}}@media screen and (max-width: 480px){.container,.conversations-page{padding:5px}.conversations-page h1{font-size:20px;margin:8px 0}.pagination-controls{padding:8px;margin:8px 0}.limit-selector{flex-direction:column;gap:8px}.limit-selector label{font-size:14px}.limit-select{width:100%}.pagination{padding:0 5px}.pagination button{padding:8px 15px;min-width:80px;font-size:13px}.pagination span{font-size:13px}}@media screen and (max-width: 768px){.container{padding:10px}.conversations-page{overflow-x:auto}.styled-table{min-width:800px}.pagination-controls{flex-direction:column;gap:15px;align-items:stretch}.limit-selector{width:100%;justify-content:space-between}.limit-select{width:100px}.pagination{width:100%;justify-content:space-between;padding:0 10px}.pagination button{padding:10px 20px;font-size:14px;min-width:100px}.pagination span{font-size:14px;margin:0 10px}.video-button,.generate-button,.preview-button,.status-button{padding:8px 12px;font-size:14px;margin:2px;white-space:nowrap}.styled-table td,.styled-table th{padding:8px;font-size:14px}.popup-content{width:95%;max-height:90vh;margin:10px;padding:15px}.close-button{padding:8px 15px;font-size:14px}.json-content{font-size:12px;padding:10px}}@media screen and (max-width: 480px){.container{padding:5px}.conversations-page h1{font-size:24px;margin:10px 0}.pagination-controls{padding:8px}.limit-selector label,.pagination span{font-size:14px}.pagination{padding:0 5px}.pagination button{padding:8px 15px;min-width:80px}}.styled-table th,.styled-table td{padding:12px 15px}.video-button,.generate-button,.preview-button,.status-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s;margin:2px}.video-button{background-color:#4caf50;color:#fff}.generate-button{background-color:#2196f3;color:#fff}.preview-button{background-color:#ff9800;color:#fff}.status-button{background-color:#9e9e9e;color:#fff}.status-button.status-processing{background-color:#2196f3}.status-button.status-completed{background-color:#4caf50}.status-button.status-failed{background-color:#f44336}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background-color:#fff;padding:20px;border-radius:8px;max-width:90%;max-height:80vh;overflow-y:auto;position:relative}.close-button{position:absolute;top:10px;right:10px;padding:8px 16px;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer}.json-content{margin-top:20px;padding:15px;background-color:#f5f5f5;border-radius:4px;overflow-x:auto;font-family:monospace;white-space:pre-wrap;word-break:break-word}.table-container{overflow-x:auto;margin:0 -10px;padding:0 10px}.action-buttons{display:flex;flex-wrap:wrap;gap:4px;min-width:200px}.action-buttons button{flex:1;min-width:80px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (max-width: 768px){.action-buttons{flex-direction:column;gap:4px}.action-buttons button{width:100%;max-width:none}.table-container{margin:0 -5px;padding:0 5px}}.conversations-page{width:100%;max-width:1200px;margin:0 auto;padding:20px}.conversations-page h1{font-size:32px;margin-bottom:20px;color:var(--text-color)}.styled-table{width:100%;border-collapse:collapse;margin:25px 0;font-size:.9em;box-shadow:0 0 20px #00000026}.styled-table thead tr{background-color:#009879;color:#fff;text-align:left}.styled-table th,.styled-table td{padding:12px 15px;text-align:left}.styled-table tbody tr{border-bottom:1px solid #dddddd}.styled-table tbody tr:nth-of-type(2n){background-color:#f3f3f3}.styled-table tbody tr:last-of-type{border-bottom:2px solid #009879}@media screen and (max-width: 768px){.table-container{width:100%}.styled-table{display:block}.styled-table thead{display:none}.styled-table tbody{display:block}.styled-table tbody tr{display:block;margin-bottom:15px;border:1px solid #ddd;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px #0000001a}.styled-table tbody tr:nth-of-type(2n){background-color:#fff}.styled-table td{display:block;text-align:right;padding:12px 12px 12px 50%;position:relative;border-bottom:1px solid #eee;min-height:40px}.styled-table td:last-child{border-bottom:none}.styled-table td:before{content:attr(data-label);position:absolute;left:12px;width:45%;font-weight:700;text-align:left;top:50%;transform:translateY(-50%)}.action-buttons{display:flex;flex-direction:column;gap:8px;padding-left:0}.action-buttons button{width:100%;margin:0;padding:10px;font-size:14px}}@media screen and (max-width: 480px){.styled-table td{padding:10px 10px 10px 45%;font-size:14px;min-height:36px}.styled-table td:before{font-size:13px;width:40%;left:10px}.action-buttons button{padding:8px;font-size:13px}}
