/* ===========================
   TOKENS
   =========================== */
:root {
    --bg: #08080d;
    --bg-card: #111119;
    --bg-hover: #1a1a26;
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --accent: #6366f1;
    --accent-glow: rgba(99,102,241,0.25);
    --accent2: #a855f7;
    --human: #10b981;
    --human-glow: rgba(16,185,129,0.18);
    --ai: #f43f5e;
    --ai-glow: rgba(244,63,94,0.18);
    --warn: #f59e0b;
    --warn-glow: rgba(245,158,11,0.18);
    --text: #f0f0f5;
    --text2: #9ca3b0;
    --text3: #555a66;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 16px;
    --radius-sm: 10px;
    --transition: 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* ===========================
   RESET
   =========================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input{font:inherit;color:inherit}

/* ===========================
   BACKGROUND
   =========================== */
.bg-glow{
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99,102,241,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(168,85,247,0.06) 0%, transparent 70%);
}
.bg-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;opacity:0;animation:floatUp linear infinite}
@keyframes floatUp{
    0%{opacity:0;transform:translateY(100vh) scale(0)}
    10%{opacity:.5}
    90%{opacity:.5}
    100%{opacity:0;transform:translateY(-5vh) scale(1)}
}

/* ===========================
   APP LAYOUT
   =========================== */
.app{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;
    min-height:100vh;padding:60px 20px 40px;
    max-width:560px;margin:0 auto;
}

/* ===========================
   BRAND
   =========================== */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:48px;animation:fadeIn .6s ease both}
.brand-icon{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-radius:10px;color:#fff;padding:7px;
}
.brand-name{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}

/* ===========================
   HEADLINE
   =========================== */
.headline{
    font-size:clamp(2rem,5.5vw,3rem);font-weight:800;text-align:center;
    line-height:1.15;letter-spacing:-.03em;margin-bottom:12px;
    animation:fadeInUp .6s ease .05s both;
}
.gradient-text{
    background:linear-gradient(135deg,#6366f1,#818cf8);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.gradient-text-alt{
    background:linear-gradient(135deg,#f43f5e,#fb7185);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tagline{
    font-size:1.05rem;color:var(--text2);text-align:center;margin-bottom:36px;
    animation:fadeInUp .6s ease .12s both;
}

/* ===========================
   API BAR
   =========================== */
.api-bar{width:100%;margin-bottom:24px;animation:fadeInUp .6s ease .18s both}
.api-toggle{
    display:flex;align-items:center;gap:6px;
    font-size:.78rem;font-weight:500;color:var(--text3);
    padding:6px 0;transition:var(--transition);
}
.api-toggle:hover{color:var(--text2)}
.api-panel{margin-top:8px}
.api-row{display:flex;gap:8px}
.api-input{
    flex:1;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:10px 14px;font-family:var(--mono);font-size:.82rem;
    outline:none;transition:var(--transition);
}
.api-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.api-check{
    padding:10px 18px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;
    color:var(--text2);transition:var(--transition);
}
.api-check:hover{border-color:var(--accent);color:var(--accent)}
.api-status{font-size:.78rem;margin-top:6px;min-height:18px;font-weight:500}
.api-status.ok{color:var(--human)}
.api-status.fail{color:var(--ai)}
.api-status.wait{color:var(--text3)}

/* ===========================
   CARD
   =========================== */
.card{
    width:100%;background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--radius);
    padding:36px 28px;position:relative;overflow:hidden;
    box-shadow:0 8px 40px rgba(0,0,0,.35);
    animation:fadeInUp .6s ease .24s both;
}
.card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
}

/* ===========================
   UPLOAD ZONE
   =========================== */
.upload-zone{
    border:2px dashed var(--border-hover);border-radius:14px;
    padding:52px 24px;text-align:center;cursor:pointer;
    transition:all var(--transition);
}
.upload-zone:hover,.upload-zone.drag-over{
    border-color:var(--accent);background:var(--accent-glow);
}
.upload-ring{
    width:60px;height:60px;margin:0 auto 18px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:rgba(99,102,241,.08);
    border:1px solid rgba(99,102,241,.18);color:var(--accent);
}
.upload-ring svg{width:28px;height:28px}
.upload-label{font-size:.95rem;color:var(--text2);margin-bottom:6px}
.upload-browse{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.upload-hint{font-size:.78rem;color:var(--text3)}

/* ===========================
   FILE BAR
   =========================== */
.file-bar{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;background:rgba(99,102,241,.06);
    border-radius:var(--radius-sm);border:1px solid rgba(99,102,241,.12);
}
.file-icon{color:var(--accent);flex-shrink:0;display:flex}
.file-meta{flex:1;display:flex;flex-direction:column;min-width:0}
.file-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:.75rem;color:var(--text3);font-family:var(--mono)}
.file-remove{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;color:var(--text3);transition:var(--transition);flex-shrink:0;
}
.file-remove:hover{background:rgba(244,63,94,.1);color:var(--ai)}

.audio-player{width:100%;margin-top:12px;border-radius:8px;height:40px;outline:none}

/* ===========================
   ANALYZE BUTTON
   =========================== */
.btn-analyze{
    width:100%;margin-top:16px;padding:16px;
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;font-weight:700;font-size:1rem;
    border-radius:var(--radius-sm);
    box-shadow:0 0 30px var(--accent-glow);
    transition:all var(--transition);
}
.btn-analyze:hover{transform:translateY(-2px);box-shadow:0 0 50px var(--accent-glow)}
.btn-analyze:active{transform:translateY(0)}

/* ===========================
   LOADER
   =========================== */
.loader{text-align:center;padding:44px 0}
.loader-pulse{
    width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
    background:var(--accent);opacity:.25;
    animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{transform:scale(.85);opacity:.2}
    50%{transform:scale(1.15);opacity:.45}
}
.loader-text{font-size:.95rem;color:var(--text2)}
.dots::after{content:'';animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{
    0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}
}

/* ===========================
   RESULT
   =========================== */
.result{text-align:center;animation:fadeInUp .45s ease both}
.result-badge{
    width:88px;height:88px;margin:0 auto 18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:40px;
    animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.result-badge.human{background:var(--human-glow);border:2px solid var(--human);box-shadow:0 0 36px var(--human-glow)}
.result-badge.ai{background:var(--ai-glow);border:2px solid var(--ai);box-shadow:0 0 36px var(--ai-glow)}
.result-badge.unknown{background:var(--warn-glow);border:2px solid var(--warn);box-shadow:0 0 36px var(--warn-glow)}

.result-label{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.result-label.human{color:var(--human)}
.result-label.ai{color:var(--ai)}
.result-label.unknown{color:var(--warn)}

.result-explanation{
    text-align:center;background:rgba(255,255,255,.03);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:16px 18px;margin:20px 0;
    font-size:.9rem;color:var(--text2);line-height:1.6;
}
.result-explanation:empty{display:none}

/* Again button */
.btn-again{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:8px;padding:12px 24px;font-weight:600;font-size:.9rem;
    background:rgba(255,255,255,.04);border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text2);transition:var(--transition);
}
.btn-again:hover{border-color:var(--accent);color:var(--text);background:var(--accent-glow)}

/* ===========================
   FOOTER NOTE
   =========================== */
.footer-note{
    margin-top:24px;font-size:.75rem;color:var(--text3);text-align:center;
    animation:fadeIn .6s ease .4s both;
}

/* ===========================
   UTILITIES
   =========================== */
.hidden{display:none!important}

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ===========================
   RESPONSIVE
   =========================== */
@media(max-width:480px){
    .app{padding:40px 16px 32px}
    .card{padding:28px 20px;border-radius:14px}
    .upload-zone{padding:40px 16px}
    .headline{font-size:1.8rem}
}