/* TikCap App - Professional Styling */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px;line-height:1.6}
.container{max-width:1200px;margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.15);backdrop-filter:blur(10px)}
.header{padding:40px 28px;text-align:center;background:linear-gradient(135deg,#000000 40%,#f003b9 100%);color:#fff;position:relative}
.language-switcher{position:absolute;top:20px;right:28px;display:flex;align-items:center;gap:8px;z-index:100}
.lang-flag{font-size:1.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));transition:transform 0.2s}
.lang-flag:hover{transform:scale(1.1)}
.switch{position:relative;display:inline-block;width:52px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.3);border:2px solid rgba(255,255,255,0.5);transition:0.4s;border-radius:28px;backdrop-filter:blur(10px)}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:2px;background:white;transition:0.4s;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
input:checked + .slider{background:rgba(255,255,255,0.5)}
input:checked + .slider:before{transform:translateX(24px)}
.slider:hover{background:rgba(255,255,255,0.4)}
.header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:0.3}
.header h1{font-size:2.2rem;font-weight:700;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,0.3)}
.header div{font-size:1rem;font-weight:400;letter-spacing:0.5px}
.value-props{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.prop-item{background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:0.85rem;font-weight:600;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);transition:all 0.3s ease}
.prop-item:hover{background:rgba(255,255,255,0.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.main{padding:32px}
.file-input-label{display:block;padding:20px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 100%);color:#fff;border-radius:12px;text-align:center;cursor:pointer;border:2px dashed rgba(255,255,255,.3);font-weight:600;font-size:1.1rem;transition:all 0.3s ease;position:relative;overflow:hidden}
.file-input-label:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,92,246,0.4);border-color:rgba(255,255,255,.5)}
.file-input-label::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.file-input-label:hover::before{left:100%}
.video-wrapper{position:relative;display:inline-block;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.2);min-height:150px;min-width:250px;max-width:400px}
video{display:block;max-width:400px;width:100%;height:auto;background:#000}
.video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 15px;background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:#fff;min-height:150px;text-align:center}
.placeholder-icon{font-size:3rem;margin-bottom:12px;opacity:0.8}
.video-placeholder h3{margin:0 0 8px 0;font-size:1.2rem;font-weight:700;color:#fff}
.video-placeholder p{margin:0 0 12px 0;color:#cbd5e1;font-size:0.9rem;line-height:1.4;max-width:300px}
.placeholder-features{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.placeholder-features span{background:rgba(255,255,255,0.1);padding:6px 12px;border-radius:16px;font-size:0.8rem;font-weight:600;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2)}
.caption-overlay{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;background:rgba(0,0,0,.8);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;text-align:center;max-width:92%;pointer-events:none;opacity:0;transition:opacity .18s}
.caption-overlay.show{opacity:1}
.caption-overlay.position-top{bottom:auto;top:22px}
.caption-overlay.position-center{bottom:auto;top:50%;transform:translate(-50%,-50%)}
.caption-overlay.position-bottom{bottom:22px;top:auto}
.word-display{font-size:1.2em;letter-spacing:0.05em;text-shadow:0 2px 4px rgba(0,0,0,0.5);line-height:1.4;max-width:90%;word-wrap:break-word}
#recordingCanvas{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border-radius:8px;pointer-events:none;z-index:10}
.recording-indicator{position:absolute;top:10px;right:10px;background:#f44336;color:#fff;padding:4px 8px;border-radius:4px;font-size:0.8rem;font-weight:bold;display:none}
.recording-indicator::before{content:'🔴';margin-right:4px}
.word-highlight{background:rgba(139,92,246,0.3);border-radius:4px;padding:2px 6px;animation:pulse 0.3s ease-in-out}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.controls{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.customization-panel{margin-top:24px;padding:28px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 4px 6px rgba(0,0,0,0.05)}
.customization-panel h3{margin:0 0 8px 0;color:#1e293b;font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:8px}
.customization-subtitle{margin:0 0 20px 0;color:#64748b;font-size:0.95rem;line-height:1.5;font-style:italic}
.customization-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.customization-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;transition:all 0.3s ease}
.customization-group:hover{border-color:#8B5CF6;box-shadow:0 2px 8px rgba(139,92,246,0.1)}
.customization-group label{font-weight:600;color:#374151;font-size:0.95rem;margin-bottom:4px}
.customization-group select,.customization-group input[type="color"]{padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:0.9rem;transition:all 0.3s ease;background:#fff}
.customization-group select:focus,.customization-group input[type="color"]:focus{outline:none;border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,0.1)}
.customization-group input[type="range"]{width:100%;height:6px;background:#e5e7eb;border-radius:3px;outline:none;transition:all 0.3s ease}
.customization-group input[type="range"]:focus{box-shadow:0 0 0 3px rgba(139,92,246,0.1)}
.customization-group input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:#8B5CF6;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.customization-group input[type="color"]{width:70px;height:45px;padding:4px;cursor:pointer;border-radius:8px}
#textSizeValue{font-size:0.85rem;color:#6b7280;margin-left:8px;font-weight:500}
button{padding:14px 24px;border-radius:12px;border:0;cursor:pointer;font-weight:600;font-size:1rem;transition:all 0.3s ease;position:relative;overflow:hidden;min-width:140px}
button:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.2)}
button:active{transform:translateY(0)}
button:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:linear-gradient(135deg,#10B981 0%,#059669 100%);color:#fff;box-shadow:0 4px 15px rgba(16,185,129,0.3)}
.btn-primary:hover{box-shadow:0 8px 25px rgba(16,185,129,0.4)}
.btn-secondary{background:linear-gradient(135deg,#6B7280 0%,#4B5563 100%);color:#fff;box-shadow:0 4px 15px rgba(107,114,128,0.3)}
.btn-secondary:hover{box-shadow:0 8px 25px rgba(107,114,128,0.4)}
.btn-info{background:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%);color:#fff;box-shadow:0 4px 15px rgba(59,130,246,0.3)}
.btn-info:hover{box-shadow:0 8px 25px rgba(59,130,246,0.4)}
.btn-success{background:linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%);color:#fff;box-shadow:0 4px 15px rgba(139,92,246,0.3)}
.btn-success:hover{box-shadow:0 8px 25px rgba(139,92,246,0.4)}
.status{margin-top:16px;padding:12px 16px;border-radius:12px;text-align:center;font-weight:500;font-size:0.95rem;border:1px solid transparent;transition:all 0.3s ease}
.status.processing{background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);color:#D97706;border-color:#F59E0B}
.status.success{background:linear-gradient(135deg,#D1FAE5 0%,#A7F3D0 100%);color:#059669;border-color:#10B981}
.status.error{background:linear-gradient(135deg,#FEE2E2 0%,#FECACA 100%);color:#DC2626;border-color:#EF4444}
.hidden{display:none}
.time-display{text-align:center;margin-top:12px;color:#6B7280;font-size:0.9rem;font-weight:500;padding:8px 16px;background:#f8fafc;border-radius:8px;display:inline-block}
.controls{gap:16px;margin-top:20px}
.audio-notice{margin-top:24px;padding:0;background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.3);position:relative}
.audio-notice::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.05) 50%,transparent 70%);animation:shimmer 3s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.notice-header{background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 100%);padding:24px;text-align:center;position:relative}
.notice-icon{font-size:2.5rem;margin-bottom:8px;animation:pulse-icon 2s infinite}
@keyframes pulse-icon{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.notice-header h3{margin:0 0 8px 0;color:#fff;font-size:1.4rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,0.3)}
.notice-badge{display:inline-block;background:rgba(255,255,255,0.2);color:#fff;padding:6px 16px;border-radius:20px;font-size:0.85rem;font-weight:600;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3)}
.notice-content{padding:28px;color:#fff}
.main-explanation{margin:0 0 16px 0;font-size:1rem;line-height:1.6;color:#e2e8f0;text-align:center}
.main-explanation strong{color:#fff;font-weight:700}
.language-note{margin:0 0 24px 0;font-size:0.9rem;line-height:1.5;color:#fbbf24;text-align:center;background:rgba(251,191,36,0.1);padding:12px;border-radius:8px;border:1px solid rgba(251,191,36,0.3)}
.language-note strong{color:#f59e0b}
.requirements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.requirement-item{display:flex;align-items:center;gap:12px;padding:16px;background:rgba(255,255,255,0.1);border-radius:12px;border:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease;backdrop-filter:blur(10px)}
.requirement-item:hover{background:rgba(255,255,255,0.15);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.req-icon{font-size:1.5rem;flex-shrink:0}
.req-text{display:flex;flex-direction:column;gap:2px}
.req-text strong{color:#fff;font-size:0.9rem;font-weight:700}
.req-text span{color:#cbd5e1;font-size:0.8rem}
.privacy-highlight{background:linear-gradient(135deg,rgba(16,185,129,0.2) 0%,rgba(5,150,105,0.2) 100%);border:1px solid rgba(16,185,129,0.4);border-radius:16px;padding:20px;margin-top:20px;display:flex;align-items:center;gap:16px;backdrop-filter:blur(10px)}
.privacy-icon{font-size:2rem;flex-shrink:0}
.privacy-content strong{color:#fff;font-size:1.1rem;font-weight:700;display:block;margin-bottom:4px}
.privacy-content p{margin:0;color:#d1fae5;font-size:0.9rem;line-height:1.5}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(5px)}
.modal.hidden{display:none !important}
.modal-content{background:#fff;border-radius:20px;max-width:90vw;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,0.3);animation:modalSlideIn 0.3s ease-out}
@keyframes modalSlideIn{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}
.modal-header{background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 100%);color:#fff;padding:20px 24px;display:flex;justify-content:space-between;align-items:center}
.modal-header h3{margin:0;font-size:1.3rem;font-weight:700}
.close-btn{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.3s ease;pointer-events:auto;z-index:1001}
.close-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}
.modal-body{padding:24px;text-align:center}
.modal-body video{max-width:100%;max-height:60vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.modal-actions{margin-top:20px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.modal-actions button{min-width:140px;pointer-events:auto;z-index:1001}
.app-footer{margin-top:40px;padding:32px;background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border-radius:16px;color:#fff}
.footer-content{text-align:center;max-width:800px;margin:0 auto}
.footer-content h4{margin:0 0 12px 0;font-size:1.4rem;font-weight:700;color:#fff}
.footer-content p{margin:0 0 20px 0;color:#cbd5e1;font-size:1rem;line-height:1.6}
.footer-features{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.footer-features span{background:rgba(255,255,255,0.1);padding:8px 16px;border-radius:20px;font-size:0.85rem;font-weight:600;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease}
.footer-features span:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px)}
.brand-info{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.2)}
.brand-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.brand-icon{font-size:1.5rem}
.brand-name{font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:1px}
.copyright{color:#cbd5e1;font-size:0.9rem;margin:0;line-height:1.5}
.copyright strong{color:#fff;font-weight:700}
@media (max-width:600px){
  .header h1{font-size:1.8rem}
  .main{padding:20px}
  .customization-panel{padding:20px}
  .customization-grid{grid-template-columns:1fr}
  button{min-width:120px;padding:12px 20px}
  .value-props{gap:8px}
  .prop-item{font-size:0.8rem;padding:4px 8px}
  .footer-features{gap:8px}
  .footer-features span{font-size:0.8rem;padding:6px 12px}
  .app-footer{padding:24px}
  .brand-name{font-size:1.1rem}
  .copyright{font-size:0.85rem}
  .brand-info{margin-top:24px;padding-top:20px}
  .video-wrapper{min-width:200px;min-height:120px;max-width:100%}
  .video-placeholder{min-height:120px;padding:15px 10px}
  .placeholder-icon{font-size:3rem}
  .video-placeholder h3{font-size:1.3rem}
  .video-placeholder p{font-size:0.9rem}
  .placeholder-features{gap:8px}
  .placeholder-features span{font-size:0.75rem;padding:4px 8px}
  .audio-notice{margin-top:20px}
  .notice-header{padding:20px}
  .notice-icon{font-size:2rem}
  .notice-header h3{font-size:1.2rem}
  .notice-content{padding:20px}
  .requirements-grid{grid-template-columns:1fr;gap:12px}
  .requirement-item{padding:12px}
  .req-icon{font-size:1.3rem}
  .privacy-highlight{padding:16px;flex-direction:column;text-align:center;gap:12px}
  .privacy-icon{font-size:1.8rem}
  .modal-content{max-width:95vw;max-height:95vh;margin:10px}
  .modal-header{padding:16px 20px}
  .modal-header h3{font-size:1.1rem}
  .modal-body{padding:20px}
  .modal-body video{max-height:50vh}
  .modal-actions{flex-direction:column;gap:8px}
  .modal-actions button{min-width:120px;width:100%}
}