* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #002060; --primary-light: #4472C4;
    --bg: #0f1117; --bg-card: #1a1b23; --bg-card-hover: #22232e;
    --surface: #252630; --text: #e4e4e7; --text-sec: #8b8d98;
    --border: #2e2f3a; --success: #10b981; --error: #ef4444;
    --blue: #3b82f6; --purple: #8b5cf6; --emerald: #10b981;
    --orange: #f97316; --cyan: #06b6d4; --pink: #ec4899;
    --rose: #f43f5e; --indigo: #6366f1; --teal: #14b8a6; --amber: #f59e0b;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    background: var(--bg); color: var(--text); min-height: 100vh;
}

/* HEADER */
.header { background: linear-gradient(135deg,#0a0b12,#141520); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1400px; margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; }
.header-left { display: flex; align-items: center; gap: 14px; }
.logo-icon { width: 38px; height: 38px; background: linear-gradient(135deg,var(--primary),var(--primary-light)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.header-title h1 { font-size: 16px; font-weight: 700; color: #fff; }
.header-title p { font-size: 11px; color: var(--text-sec); margin-top: 1px; }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-badge { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); padding: 4px 12px; border-radius: 14px; font-size: 11px; color: var(--success); display: flex; align-items: center; gap: 6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.header-time { font-size: 11px; color: var(--text-sec); }

/* GRID */
.main { max-width: 1400px; margin: 0 auto; padding: 20px 28px 28px; }
.card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width:1200px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.card-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media (max-width:500px){.card-grid{grid-template-columns:1fr}}

/* CARD */
.fc { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; cursor: pointer; transition: all .25s; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 158px; }
.fc::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:14px 14px 0 0; opacity:0; transition:opacity .25s; }
.fc:hover { background: var(--bg-card-hover); border-color: #3a3b4a; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.3); }
.fc:hover::before { opacity: 1; }
.fc.disabled { opacity: .4; cursor: not-allowed; }
.fc.disabled:hover { transform: none; box-shadow: none; background: var(--bg-card); border-color: var(--border); }
.fc-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
.fc-body { flex: 1; }
.fc-body h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.fc-body p { font-size: 11.5px; color: var(--text-sec); line-height: 1.5; }
.fc-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.fc-tag { font-size: 10px; padding: 2px 9px; border-radius: 9px; font-weight: 600; }
.fc-arrow { font-size: 15px; color: var(--text-sec); transition: transform .2s; }
.fc:hover .fc-arrow { transform: translateX(3px); }

.c-blue .fc-icon{background:rgba(59,130,246,.12)} .c-blue::before{background:var(--blue)} .c-blue .fc-tag{background:rgba(59,130,246,.12);color:var(--blue)}
.c-purple .fc-icon{background:rgba(139,92,246,.12)} .c-purple::before{background:var(--purple)} .c-purple .fc-tag{background:rgba(139,92,246,.12);color:var(--purple)}
.c-emerald .fc-icon{background:rgba(16,185,129,.12)} .c-emerald::before{background:var(--emerald)} .c-emerald .fc-tag{background:rgba(16,185,129,.12);color:var(--emerald)}
.c-orange .fc-icon{background:rgba(249,115,22,.12)} .c-orange::before{background:var(--orange)} .c-orange .fc-tag{background:rgba(249,115,22,.12);color:var(--orange)}
.c-cyan .fc-icon{background:rgba(6,182,212,.12)} .c-cyan::before{background:var(--cyan)} .c-cyan .fc-tag{background:rgba(6,182,212,.12);color:var(--cyan)}
.c-pink .fc-icon{background:rgba(236,72,153,.12)} .c-pink::before{background:var(--pink)} .c-pink .fc-tag{background:rgba(236,72,153,.12);color:var(--pink)}
.c-rose .fc-icon{background:rgba(244,63,94,.12)} .c-rose::before{background:var(--rose)} .c-rose .fc-tag{background:rgba(244,63,94,.12);color:var(--rose)}
.c-indigo .fc-icon{background:rgba(99,102,241,.12)} .c-indigo::before{background:var(--indigo)} .c-indigo .fc-tag{background:rgba(99,102,241,.12);color:var(--indigo)}
.c-teal .fc-icon{background:rgba(20,184,166,.12)} .c-teal::before{background:var(--teal)} .c-teal .fc-tag{background:rgba(20,184,166,.12);color:var(--teal)}
.c-amber .fc-icon{background:rgba(245,158,11,.12)} .c-amber::before{background:var(--amber)} .c-amber .fc-tag{background:rgba(245,158,11,.12);color:var(--amber)}

/* MODAL */
.mo { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); z-index:200; align-items:center; justify-content:center; }
.mo.show { display:flex; animation:fadeIn .2s ease; }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.mo-box { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; width:90%; max-width:720px; max-height:85vh; display:flex; flex-direction:column; animation:slideUp .3s ease; box-shadow:0 20px 60px rgba(0,0,0,.5); }
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.mo-head { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.mo-head h2 { font-size:16px; color:#fff; display:flex; align-items:center; gap:8px; }
.mo-close { background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text-sec); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.mo-close:hover { background:rgba(239,68,68,.15); color:var(--error); }
.mo-body { padding:22px; overflow-y:auto; flex:1; }
.mo-foot { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* MSG */
.ma { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; max-height:180px; overflow-y:auto; padding-right:4px; }
.ma::-webkit-scrollbar{width:4px} .ma::-webkit-scrollbar-thumb{background:#3a3b4a;border-radius:2px}
.m { display:flex; gap:9px; animation:mIn .3s ease; }
@keyframes mIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.m-i { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.m-i.s{background:rgba(59,130,246,.15)} .m-i.o{background:rgba(16,185,129,.15)} .m-i.e{background:rgba(239,68,68,.15)} .m-i.u{background:rgba(139,92,246,.15)}
.m-t { background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:9px 13px; flex:1; font-size:12.5px; line-height:1.5; color:var(--text); }
.m-t strong{color:#fff}
.m-ts { font-size:10px; color:var(--text-sec); margin-top:3px; }

/* UPLOAD */
.uz { border:2px dashed #3a3b4a; border-radius:11px; padding:24px; text-align:center; cursor:pointer; transition:all .25s; background:rgba(255,255,255,.02); }
.uz:hover{border-color:var(--primary-light);background:rgba(68,114,196,.05)}
.uz.dragover{border-color:var(--blue);background:rgba(59,130,246,.08)}
.uz.has-file{border-color:var(--success);background:rgba(16,185,129,.05)}
.uz .ic{font-size:32px;margin-bottom:6px} .uz h4{font-size:13px;color:#fff;margin-bottom:3px} .uz p{font-size:11px;color:var(--text-sec)}

.fp { display:none; align-items:center; gap:10px; padding:9px 13px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); border-radius:9px; margin-top:10px; }
.fp.v{display:flex}
.fp .fi{font-size:22px} .fp .fd{flex:1} .fp .fn{font-size:12px;font-weight:600;color:#fff} .fp .fs{font-size:10px;color:var(--text-sec)}
.fp .fr{background:none;border:none;color:var(--text-sec);font-size:16px;cursor:pointer;padding:2px 5px;border-radius:5px;transition:all .2s}
.fp .fr:hover{background:rgba(239,68,68,.15);color:var(--error)}

.pw{display:none;margin-top:10px} .pw.v{display:block}
.pt{height:3px;background:var(--border);border-radius:3px;overflow:hidden}
.pb{height:100%;background:linear-gradient(90deg,var(--primary),var(--blue));border-radius:3px;width:0%;transition:width .4s}
.pl{font-size:10px;color:var(--text-sec);margin-top:3px;text-align:center}

/* BTN */
.btn { padding:8px 20px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer; border:none; transition:all .2s; display:flex; align-items:center; gap:6px; }
.btn-p { background:linear-gradient(135deg,var(--primary),#003399); color:#fff; }
.btn-p:hover:not(:disabled){box-shadow:0 4px 15px rgba(0,32,96,.4);transform:translateY(-1px)}
.btn-p:disabled{opacity:.4;cursor:not-allowed}
.btn-p.ld{pointer-events:none;position:relative;padding-right:36px}
.btn-p.ld::after{content:'';position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;right:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-g{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-sec)}
.btn-g:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-dl { background:linear-gradient(135deg,#059669,#10b981); color:#fff; text-decoration:none; padding:9px 22px; border-radius:9px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:all .2s; }
.btn-dl:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(16,185,129,.3)}

/* RESULT */
.rc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:12px}
.rc h4{font-size:13px;color:var(--blue);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.sr{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;background:rgba(255,255,255,.02);border-radius:6px;margin-bottom:3px;border:1px solid rgba(255,255,255,.04)}
.sr .sn{font-size:11.5px;font-weight:600;color:#fff} .sr .sm{display:flex;gap:10px;font-size:10.5px;color:var(--text-sec)}

.footer{text-align:center;padding:14px 28px;font-size:11px;color:var(--text-sec);border-top:1px solid var(--border)}
#fileInput{display:none}