@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;800&display=swap');

:root {
    --bg:#09090b;--surface:rgba(255,255,255,0.02);--surface-hover:rgba(255,255,255,0.04);
    --border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.12);
    --text:#fafafa;--text-muted:#a1a1aa;--text-dim:#71717a;--text-faint:#52525b;--text-ghost:#3f3f46;
    --accent:#6366f1;--accent2:#a855f7;--accent3:#ec4899;
    --green:#22c55e;--yellow:#f59e0b;--red:#ef4444;
    --radius:14px;--radius-sm:10px;--radius-xs:7px;
    --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Outfit',-apple-system,sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:rgba(99,102,241,0.3)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
input::placeholder{color:var(--text-ghost)}

.bg-noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg-orb{position:fixed;border-radius:50%;filter:blur(80px);z-index:0;pointer-events:none}
.bg-orb--1{width:600px;height:600px;top:-200px;right:-200px;background:radial-gradient(circle,rgba(99,102,241,0.13),transparent 70%)}
.bg-orb--2{width:500px;height:500px;bottom:-150px;left:-150px;background:radial-gradient(circle,rgba(168,85,247,0.10),transparent 70%)}

.container{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 20px}

.header{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}
.header__logo{display:flex;align-items:center;gap:10px}
.header__icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));font-size:18px;font-weight:900;color:#fff;box-shadow:0 0 24px rgba(99,102,241,0.3)}
.header__title{font-size:21px;font-weight:800;letter-spacing:-0.5px;background:linear-gradient(135deg,#e2e8f0,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header__badge{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(168,85,247,0.2));color:#a78bfa;border:1px solid rgba(167,139,250,0.2)}
.header__actions{display:flex;align-items:center;gap:12px}
.header__avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer}

.btn{padding:8px 18px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:12px;font-weight:700;font-family:inherit;background:rgba(255,255,255,0.06);color:var(--text-dim);transition:all 0.2s;letter-spacing:0.2px}
.btn:hover{background:rgba(255,255,255,0.1);color:var(--text-muted)}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 0 24px rgba(99,102,241,0.2)}
.btn--primary:hover{box-shadow:0 0 36px rgba(99,102,241,0.35)}
.btn--outline{border:1px solid var(--border)}
.btn--danger{border:1px solid rgba(239,68,68,0.2);color:var(--red)}
.btn--danger:hover{background:rgba(239,68,68,0.1)}
.btn--big{padding:15px 44px;border-radius:var(--radius);font-size:15px}
.btn--disabled{opacity:0.4;cursor:default;pointer-events:none}
.btn--sm{padding:6px 14px;font-size:11px}

.main{padding-top:40px;padding-bottom:80px}

.hero{text-align:center;margin-bottom:40px}
.hero__title{font-size:48px;font-weight:900;line-height:1.08;letter-spacing:-2px;margin-bottom:14px;background:linear-gradient(135deg,#fff 25%,#a78bfa 65%,var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero__subtitle{font-size:16px;color:var(--text-dim);max-width:500px;margin:0 auto;line-height:1.5}

.dropzone{max-width:600px;margin:0 auto;padding:56px 36px;border-radius:22px;cursor:pointer;text-align:center;transition:all 0.3s;border:2px dashed var(--border);background:var(--surface)}
.dropzone:hover,.dropzone--active{border-color:var(--accent);background:rgba(99,102,241,0.05)}
.dropzone__icon{width:66px;height:66px;border-radius:18px;margin:0 auto 18px;background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(168,85,247,0.12));display:flex;align-items:center;justify-content:center;font-size:30px}
.dropzone__title{font-size:16px;font-weight:600;color:#e4e4e7;margin-bottom:6px}
.dropzone__hint{font-size:12px;color:var(--text-faint)}

.video-preview{max-width:600px;margin:0 auto 28px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#000}
.video-preview video{width:100%;display:block;max-height:320px}
.video-preview__info{padding:10px 18px;background:rgba(255,255,255,0.03);display:flex;justify-content:space-between;align-items:center}

.url-input{max-width:600px;margin:20px auto 0;display:flex;gap:8px}
.url-input__field{flex:1;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;padding:0 14px}
.url-input__field input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13px;padding:12px 0;font-family:inherit}

.modes{max-width:600px;margin:24px auto 0}
.modes__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.mode-card{padding:16px 14px;border-radius:var(--radius);cursor:pointer;text-align:center;border:2px solid var(--border);background:var(--surface);transition:all 0.25s}
.mode-card:hover{border-color:var(--border-hover)}
.mode-card--active{border-color:var(--accent);background:rgba(99,102,241,0.08)}
.mode-card__icon{font-size:28px;margin-bottom:6px}
.mode-card__label{font-size:13px;font-weight:700;margin-bottom:3px}
.mode-card--active .mode-card__label{color:#a78bfa}
.mode-card__desc{font-size:10px;color:var(--text-faint);line-height:1.3}

.settings{max-width:600px;margin:20px auto 0;display:flex;gap:10px}
.settings__group{flex:1}
.glass{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.label{font-size:10px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.btn-group{display:flex;gap:5px}

.cta{text-align:center;margin-top:32px}
.cta__hint{font-size:11px;color:var(--text-ghost);margin-top:10px}

.analyzing{max-width:540px;margin:0 auto;text-align:center}
.analyzing__spinner{position:relative;width:90px;height:90px;margin:0 auto 28px}
.analyzing__icon{width:90px;height:90px;border-radius:24px;background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(168,85,247,0.1));display:flex;align-items:center;justify-content:center;font-size:40px;animation:pulse 2s ease infinite}
.analyzing__ring{position:absolute;inset:-5px;border-radius:28px;border:2px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent2);animation:spin 1.5s linear infinite}
.analyzing__title{font-size:26px;font-weight:800;letter-spacing:-0.8px;margin-bottom:6px}
.analyzing__phase{font-size:14px;color:var(--accent);font-weight:600;margin-bottom:32px}

.progress{background:rgba(255,255,255,0.05);border-radius:10px;height:7px;overflow:hidden;margin:24px 0 10px}
.progress__bar{height:100%;border-radius:10px;transition:width 0.12s ease;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3))}
.progress__number{font-size:30px;font-weight:800;font-family:var(--mono);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.stats{display:grid;gap:10px;margin-bottom:20px}
.stats--4{grid-template-columns:repeat(4,1fr)}
.stats--3{grid-template-columns:repeat(3,1fr)}
.stat{text-align:center}
.stat__value{font-size:22px;font-weight:800;font-family:var(--mono)}
.stat__label{font-size:10px;color:var(--text-faint);font-weight:600;text-transform:uppercase;letter-spacing:0.7px;margin-top:2px}

.results-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.results-header__title{font-size:28px;font-weight:900;letter-spacing:-0.8px;margin-bottom:4px}
.results-header__sub{font-size:13px;color:var(--text-dim)}
.results-header__actions{display:flex;gap:8px;flex-wrap:wrap}

.filters{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}

.clip{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 20px;cursor:pointer;transition:all 0.25s ease;margin-bottom:10px}
.clip:hover{border-color:var(--border-hover)}
.clip--selected{background:rgba(99,102,241,0.05);border-color:rgba(99,102,241,0.18)}
.clip__row{display:flex;align-items:center;gap:14px}
.clip__checkbox{width:22px;height:22px;border-radius:7px;flex-shrink:0;border:2px solid var(--border-hover);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.clip__checkbox--checked{border-color:var(--accent);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.clip__info{flex:1;min-width:0}
.clip__top{display:flex;align-items:center;gap:7px;margin-bottom:3px;flex-wrap:wrap}
.clip__emoji{font-size:16px}
.clip__title{font-size:14px;font-weight:700;color:#e4e4e7}
.clip__tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:0.5px;background:rgba(255,255,255,0.05);color:var(--text-dim)}
.clip__tag--viral{background:rgba(239,68,68,0.15);color:#f87171}
.clip__tag--series{background:rgba(99,102,241,0.15);color:#818cf8}
.clip__part{font-family:var(--mono);font-size:10px;font-weight:800;padding:2px 8px;border-radius:5px;background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(168,85,247,0.2));color:#a78bfa}
.clip__meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-faint);flex-wrap:wrap}
.clip__time{font-family:var(--mono)}
.clip__arrow{color:var(--text-faint);font-size:16px;transition:transform 0.3s}
.clip__arrow--open{transform:rotate(180deg)}

.score-ring{position:relative;flex-shrink:0}
.score-ring__value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;font-family:var(--mono)}

.platform{padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;color:#fff;letter-spacing:0.5px;display:inline-flex;align-items:center;gap:3px}
.platform--tiktok{background:linear-gradient(135deg,#010101,#25f4ee)}
.platform--reels{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.platform--shorts{background:linear-gradient(135deg,#ff0000,#cc0000)}

.clip__expanded{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.05)}
.clip__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.clip__panel{background:rgba(0,0,0,0.25);border-radius:12px;padding:14px}

.ai-bar{margin-bottom:7px}
.ai-bar__header{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-bottom:3px}
.ai-bar__val{font-family:var(--mono);font-weight:600}
.ai-bar__track{height:4px;border-radius:4px;background:rgba(255,255,255,0.05)}
.ai-bar__fill{height:100%;border-radius:4px;transition:width 0.8s ease}
.ai-bar__fill--high{background:linear-gradient(90deg,var(--green),#4ade80)}
.ai-bar__fill--mid{background:linear-gradient(90deg,var(--yellow),#fbbf24)}
.ai-bar__fill--low{background:linear-gradient(90deg,var(--red),#f87171)}

.waveform{display:flex;align-items:center;gap:2px;height:44px}
.waveform__bar{width:3px;border-radius:2px;transition:height 0.14s ease;background:rgba(255,255,255,0.08)}
.waveform__bar--active{background:linear-gradient(to top,var(--accent),var(--accent2))}

.clip__actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}

.clip__edit-times{margin-top:12px;display:flex;gap:10px;align-items:flex-end}
.clip__edit-times label{font-size:10px;color:var(--text-faint);display:block;margin-bottom:3px}
.clip__edit-times input{font-family:var(--mono);background:rgba(255,255,255,0.06);border:1px solid var(--border-hover);border-radius:8px;padding:6px 10px;color:var(--text);font-size:12px;width:80px;outline:none}
.clip__edit-times input:focus{border-color:var(--accent)}

.clip-player{border-radius:12px;overflow:hidden;background:#000;position:relative}
.clip-player video{width:100%;display:block;max-height:200px}
.clip-player__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);cursor:pointer;transition:background 0.2s}
.clip-player__play-btn{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;padding-left:3px}
.clip-player__bar{height:3px;background:rgba(255,255,255,0.1)}
.clip-player__bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 0.2s}
.clip-player__time{display:flex;justify-content:space-between;padding:6px 10px;font-size:10px;color:var(--text-dim);font-family:var(--mono);background:rgba(0,0,0,0.6)}

.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.75);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;animation:fadeUp 0.3s ease}
.modal{background:#18181b;border-radius:22px;padding:32px 36px;border:1px solid var(--border);max-width:440px;width:92%;box-shadow:0 25px 70px rgba(0,0,0,0.6)}
.modal__header{text-align:center;margin-bottom:24px}
.modal__icon{font-size:44px;margin-bottom:10px}
.modal__title{font-size:22px;font-weight:800;letter-spacing:-0.5px;margin-bottom:6px}
.modal__sub{font-size:13px;color:var(--text-dim)}
.modal__options{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.modal__option{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;border:none;cursor:pointer;text-align:left;width:100%;background:rgba(255,255,255,0.04);color:#fff;transition:all 0.2s;font-family:inherit}
.modal__option:hover{background:rgba(255,255,255,0.08)}
.modal__option--primary{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.modal__option--primary:hover{box-shadow:0 0 30px rgba(99,102,241,0.3)}
.modal__option-icon{font-size:22px}
.modal__option-label{font-size:13px;font-weight:700}
.modal__option-desc{font-size:10px;color:var(--text-faint)}
.modal__option--primary .modal__option-desc{color:rgba(255,255,255,0.65)}
.modal__tip{margin-bottom:14px;font-size:11px;color:var(--text-dim);line-height:1.4}
.modal__tip strong{color:#a78bfa}

.empty{text-align:center;padding:48px 0;color:var(--text-ghost)}
.empty__icon{font-size:36px;margin-bottom:10px}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-up{animation:fadeUp 0.5s ease}

@media(max-width:768px){
    .hero__title{font-size:32px;letter-spacing:-1px}
    .modes__grid{grid-template-columns:1fr}
    .settings{flex-direction:column}
    .stats--4{grid-template-columns:repeat(2,1fr)}
    .clip__grid{grid-template-columns:1fr}
    .results-header{flex-direction:column}
    .results-header__actions{width:100%}
}