*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f1117;--s1:#1a1d27;--s2:#242836;--bd:#2e3345;--tx:#e4e6ef;--t2:#9499b3;--t3:#6b7089;--pr:#6366f1;--ph:#818cf8;--ok:#22c55e;--no:#ef4444;--ac:#06b6d4}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;display:flex;flex-direction:column}

/* Header */
.hdr{background:var(--s1);border-bottom:1px solid var(--bd);padding:10px 24px;display:flex;align-items:center;gap:20px}
.hdr-l{display:flex;align-items:center;gap:14px;flex:1}
.hdr-logo{height:36px;width:auto}
.logo{font-size:24px;font-weight:800;background:linear-gradient(135deg,var(--pr),var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.date{color:var(--t2);font-size:12px}
.hdr-s{display:flex;gap:20px}
.si{text-align:center}
.sv{font-size:16px;font-weight:800;color:var(--pr)}
.sl{font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}

/* Buttons */
.btn{padding:8px 16px;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.btn-p{background:var(--pr);color:#fff}.btn-p:hover{background:var(--ph)}
.btn-s{background:var(--ok);color:#fff}.btn-s:hover{opacity:.9}
.btn-o{background:transparent;border:1px solid var(--bd);color:var(--tx)}.btn-o:hover{border-color:var(--pr)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:11px 24px;font-size:14px}

/* Filter panel */
.fpanel{background:var(--s1);border-bottom:1px solid var(--bd);padding:18px 24px}
.frow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.fg{flex:1;min-width:180px;position:relative}
.fg label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sn{width:20px;height:20px;border-radius:50%;background:var(--pr);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.fg input,.fg select{width:100%;padding:9px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:7px;color:var(--tx);font-size:13px;outline:none}
.fg input:focus,.fg select:focus{border-color:var(--pr)}
.fg select option{background:var(--s2)}
.fbtns{display:flex;gap:8px;padding-bottom:1px}

/* NAF Dropdown */
.dd{position:absolute;top:100%;left:0;right:0;max-height:400px;overflow-y:auto;background:var(--s1);border:1px solid var(--bd);border-radius:7px;margin-top:3px;z-index:50;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.dd.open{display:block}
.dd-item{padding:7px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid rgba(46,51,69,.3);display:flex;align-items:center;gap:8px}
.dd-item:hover{background:rgba(99,102,241,.08)}
.dd-item.sel{background:rgba(99,102,241,.12)}
.dd-chk{font-size:14px;color:var(--pr);min-width:18px}
.naf-code{font-weight:800;color:var(--pr);min-width:50px}
.naf-label{flex:1;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.naf-count{font-size:10px;color:var(--t3);background:var(--s2);padding:2px 7px;border-radius:10px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);border-radius:14px;font-size:11px;color:var(--ph);max-width:100%;overflow:hidden}
.chip b{margin-right:2px}
.chip button{background:none;border:none;color:var(--ph);cursor:pointer;font-size:13px;padding:0;line-height:1;flex-shrink:0}

/* Tags */
.tags{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:0}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);border-radius:16px;font-size:11px;color:var(--ph)}
.tag button{background:none;border:none;color:var(--ph);cursor:pointer;font-size:13px;padding:0;line-height:1}
.tag b{margin-right:2px}
.rcount{margin-left:auto;font-size:12px;color:var(--t2)}
.rcount strong{color:var(--pr);font-size:14px}

/* Result bar */
.rbar{padding:8px 24px;background:var(--s1);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.sbox{flex:1;position:relative}
.sbox input{width:100%;padding:7px 10px 7px 32px;background:var(--s2);border:1px solid var(--bd);border-radius:7px;color:var(--tx);font-size:12px;outline:none}
.sbox input:focus{border-color:var(--pr)}
.sbox svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--t3);width:14px;height:14px}
.pssel{padding:6px 8px;background:var(--s2);border:1px solid var(--bd);border-radius:6px;color:var(--tx);font-size:11px;outline:none}

/* Table */
.tblc{flex:1;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
thead{position:sticky;top:0;z-index:10}
th{background:var(--s2);padding:8px 10px;border-bottom:2px solid var(--bd);text-align:left;font-weight:700;white-space:nowrap;cursor:pointer;font-size:11px}
th:hover{color:var(--pr)}
.sa{font-size:9px;margin-left:3px;color:var(--t3)}.sa.on{color:var(--pr)}
tbody tr{border-bottom:1px solid rgba(46,51,69,.4)}
tbody tr:hover{background:var(--s2)}
td{padding:6px 10px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td:hover{white-space:normal;word-break:break-word}
.rn{color:var(--t3);font-size:10px;text-align:right;width:40px}
.tc{color:var(--ac);font-weight:500}
.sc a{color:var(--ph);text-decoration:none;font-size:11px}.sc a:hover{text-decoration:underline}

/* Pagination */
.pag{padding:8px 24px;background:var(--s1);border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.pi{font-size:12px;color:var(--t2)}
.pc{display:flex;gap:3px}
.pb{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--bd);border-radius:5px;background:var(--s2);color:var(--tx);cursor:pointer;font-size:11px}
.pb:hover:not(:disabled){border-color:var(--pr);color:var(--pr)}
.pb:disabled{opacity:.3;cursor:not-allowed}
.pb.on{background:var(--pr);color:#fff;border-color:var(--pr)}

/* Welcome */
.welc{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--t2);padding:60px 20px;text-align:center}
.welc h2{color:var(--tx);font-size:20px;margin-bottom:10px}
.welc p{font-size:14px;line-height:1.6}

/* Modal */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s}
.mo.active{opacity:1;pointer-events:all}
.mc{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:22px;width:90%;max-width:420px}
.mc h2{font-size:17px;margin-bottom:10px}
.fg2{margin-bottom:12px}
.fg2 label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px}
.fg2 input,.fg2 select{width:100%;padding:9px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:7px;color:var(--tx);font-size:13px;outline:none}
.ma{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.uz{border:2px dashed var(--bd);border-radius:10px;padding:24px;text-align:center;cursor:pointer}
.uz:hover{border-color:var(--pr)}
.uz p{color:var(--t2);font-size:13px}

/* Toast */
.toasts{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:6px}
.toast{padding:10px 18px;border-radius:8px;font-size:12px;font-weight:500;color:#fff;animation:si .25s ease;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.toast.success{background:var(--ok)}.toast.error{background:var(--no)}.toast.info{background:var(--pr)}
@keyframes si{from{transform:translateX(80px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}

/* Lock Screen */
.lock{position:fixed;inset:0;background:var(--bg);z-index:10000;display:flex;align-items:center;justify-content:center}
.lock-box{text-align:center;width:280px}
.lock-dots{display:flex;justify-content:center;gap:14px;margin:8px 0}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--bd);background:transparent;transition:all .2s}
.dot.filled{background:var(--pr);border-color:var(--pr)}
.dot.err{background:var(--no);border-color:var(--no);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lock-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.lk{width:64px;height:64px;border-radius:50%;border:2px solid var(--bd);background:transparent;color:var(--tx);font-size:24px;font-weight:600;cursor:pointer;transition:all .15s;margin:0 auto}
.lk:hover{border-color:var(--pr);color:var(--pr)}
.lk:active{background:var(--pr);color:#fff;border-color:var(--pr)}
.lk-del{font-size:20px}

/* Choice Screen */
#choiceScreen{position:fixed;inset:0;background:var(--bg);z-index:9000;display:none;align-items:center;justify-content:center}
.choice-container{text-align:center;width:90%;max-width:600px}
.choice-header{margin-bottom:40px}
.choice-cards{display:flex;gap:24px;justify-content:center}
.choice-card{flex:1;background:var(--s1);border:2px solid var(--bd);border-radius:16px;padding:36px 24px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:10px}
.choice-card:hover{border-color:var(--pr);transform:translateY(-4px);box-shadow:0 8px 30px rgba(99,102,241,.15)}
.choice-card h3{font-size:18px;font-weight:800;color:var(--tx)}
.choice-card p{font-size:13px;color:var(--t2)}
.choice-icon{color:var(--pr)}
.choice-icon-part{color:var(--ac)}
.choice-stat{font-size:12px;font-weight:700;color:var(--pr);background:rgba(99,102,241,.1);padding:4px 12px;border-radius:20px;margin-top:4px}

/* Column config drag list */
.col-list{display:flex;flex-direction:column;gap:4px}
.col-row{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;cursor:grab;transition:all .15s;user-select:none}
.col-row:active{cursor:grabbing}
.col-row.dragging{opacity:.4;border-color:var(--pr)}
.col-row.drag-over{border-color:var(--pr);box-shadow:0 0 0 2px rgba(99,102,241,.25)}
.col-grip{color:var(--t3);font-size:16px;flex-shrink:0;line-height:1}
.col-key{font-size:10px;color:var(--t3);background:var(--bg);padding:2px 8px;border-radius:4px;font-family:monospace;min-width:65px;text-align:center;flex-shrink:0}
.col-name-input{flex:1;background:transparent;border:1px solid transparent;border-radius:5px;padding:5px 8px;color:var(--tx);font-size:13px;font-weight:600;outline:none;transition:border-color .15s}
.col-name-input:hover{border-color:var(--bd)}
.col-name-input:focus{border-color:var(--pr);background:var(--s1)}
.col-num{width:22px;height:22px;border-radius:50%;background:var(--pr);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0}

@media(max-width:800px){.frow{flex-direction:column}.fg{min-width:100%}.hdr-s{display:none}.choice-cards{flex-direction:column}}