*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 20px;--s6: 24px;--s8: 32px;--s10: 40px;--s12: 48px;--n-50: #fafafa;--n-100: #f4f4f5;--n-150: #ececee;--n-200: #e4e4e7;--n-300: #d4d4d8;--n-400: #a1a1aa;--n-500: #71717a;--n-600: #52525b;--n-700: #3f3f46;--n-800: #27272a;--n-900: #18181b;--accent: #2563eb;--accent-soft: #eff6ff;--ok: #16a34a;--ok-bg: #f0fdf4;--warn: #d97706;--warn-bg: #fffbeb;--err: #dc2626;--err-bg: #fef2f2;--bg: var(--n-50);--card: #ffffff;--line: var(--n-200);--r1: 4px;--r2: 6px;--r3: 8px;--topbar-h: 48px}html{font-size:14px;scroll-behavior:smooth}body{font-family:var(--font);font-size:1rem;line-height:1.5;color:var(--n-900);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;min-height:100vh}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.topbar{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);padding:0 var(--s6);background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}.topbar-left{display:flex;align-items:center;gap:var(--s3)}.brand{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:inherit}.brand-icon{width:26px;height:26px;display:grid;place-items:center;background:var(--n-900);color:#fff;font-weight:700;font-size:12px;border-radius:var(--r2);line-height:1}.brand-name{font-weight:600;font-size:13px;letter-spacing:-.01em}.brand-dot{color:var(--n-400);font-weight:400}.topbar-sep{width:1px;height:18px;background:var(--n-200)}.topbar-title{font-size:13px;font-weight:500;color:var(--n-500);letter-spacing:0}.topbar-right{display:flex;align-items:center}.topbar-time{font-size:12px;color:var(--n-400);font-variant-numeric:tabular-nums}.main{max-width:1080px;margin:0 auto;padding:var(--s6) var(--s6) var(--s10)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s4)}.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s3);display:flex;align-items:baseline;gap:var(--s2)}.metric-value{font-size:18px;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.3}.metric-label{font-size:11px;font-weight:500;color:var(--n-400);letter-spacing:.02em}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}.toolbar-start,.toolbar-end{display:flex;align-items:center;gap:var(--s2)}.tabs{display:inline-flex;background:var(--n-100);border-radius:var(--r2);padding:2px}.tab{appearance:none;background:none;border:none;font:inherit;font-size:12px;font-weight:500;color:var(--n-500);padding:4px 12px;border-radius:var(--r1);cursor:pointer;transition:color .12s,background .12s,box-shadow .12s;line-height:1.5}.tab:hover{color:var(--n-700)}.tab:active{color:var(--n-900)}.tab.active{background:var(--card);color:var(--n-900);box-shadow:0 1px 2px #0000000d;font-weight:600}.search{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:4px 10px;width:200px;cursor:text;transition:border-color .12s,box-shadow .12s}.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.search svg{color:var(--n-400);flex-shrink:0}.search input{border:none;outline:none;background:transparent;font:inherit;font-size:12px;color:var(--n-900);width:100%;line-height:1.5}.search input::placeholder{color:var(--n-400)}.btn{appearance:none;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;font-weight:500;color:var(--n-600);background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:5px 10px;cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;line-height:1.5;white-space:nowrap}.btn:hover{background:var(--n-50);border-color:var(--n-300);color:var(--n-900)}.btn:active{background:var(--n-100)}.btn.spinning svg{animation:spin .55s cubic-bezier(.4,0,.2,1)}@keyframes spin{to{transform:rotate(360deg)}}.table-frame{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;max-height:calc(100vh - 250px);overflow-y:auto}.table-frame::-webkit-scrollbar{width:4px}.table-frame::-webkit-scrollbar-track{background:transparent}.table-frame::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:2px}.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.tbl.hidden{display:none}.tbl thead{position:sticky;top:0;z-index:2;background:var(--n-50)}.tbl th{text-align:left;padding:var(--s2) var(--s4);font-size:11px;font-weight:600;color:var(--n-500);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;transition:color .12s;line-height:1.5}.tbl th:hover{color:var(--n-800)}.tbl th.sorted{color:var(--n-900)}.tbl th.col-center{text-align:center}.sort-icon{display:inline-block;width:14px;margin-left:3px;font-size:11px;opacity:0;transition:opacity .12s;vertical-align:middle;font-weight:700;color:var(--accent)}.tbl th:hover .sort-icon{opacity:.4}.tbl th.sorted .sort-icon{opacity:1}.tbl td{padding:var(--s2) var(--s4);font-size:12.5px;color:var(--n-500);border-bottom:1px solid var(--n-100);vertical-align:middle;line-height:1.5}.tbl tbody tr:last-child td{border-bottom:none}.c-name{font-weight:600;font-size:13px;color:var(--n-900)}.c-email{color:var(--n-400);font-size:11.5px}.c-phone{letter-spacing:.03em;color:var(--n-500);font-size:12px}.c-age{text-align:center;color:var(--n-500)}.c-date{color:var(--n-400);font-size:11.5px;white-space:nowrap}.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.01em;line-height:1.6}.badge--ok{background:var(--ok-bg);color:var(--ok)}.badge--warn{background:var(--warn-bg);color:var(--warn)}.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}.state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s12) var(--s6);gap:var(--s3);color:var(--n-500);font-size:13px;text-align:center}.state.hidden{display:none}.state svg{color:var(--n-400)}.state p{max-width:36ch}#state-error p{color:var(--err);font-weight:500}.spinner{width:20px;height:20px;border:2px solid var(--n-200);border-top-color:var(--n-600);border-radius:50%;animation:spin .6s linear infinite}.bar{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) 0;font-size:12px;color:var(--n-500);font-variant-numeric:tabular-nums}.bar .sync-label{color:var(--n-400)}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s3) var(--s4);border-top:1px solid var(--n-100);background:var(--n-50)}.page-btn{appearance:none;background:none;border:1px solid transparent;font:inherit;font-size:12px;font-weight:500;color:var(--n-500);min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r1);cursor:pointer;transition:all .12s;padding:0 var(--s1)}.page-btn:hover{background:var(--card);border-color:var(--line);color:var(--n-700)}.page-btn.active{background:var(--n-900);color:#fff;border-color:var(--n-900);font-weight:600}.page-btn:disabled{opacity:.35;cursor:not-allowed}.page-btn:disabled:hover{background:none;border-color:transparent}.page-info{font-size:11.5px;color:var(--n-400);margin:0 var(--s2)}.toast{position:fixed;bottom:var(--s6);left:50%;transform:translate(-50%) translateY(20px);background:var(--n-900);color:#fff;font-size:12.5px;font-weight:500;padding:var(--s2) var(--s4);border-radius:var(--r2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 4px 12px #00000026}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:focus:not(:focus-visible){outline:none}::selection{background:var(--accent-soft);color:var(--n-900)}@media(max-width:768px){.metrics{grid-template-columns:repeat(2,1fr);gap:var(--s2)}.toolbar{flex-direction:column;align-items:stretch;gap:var(--s2)}.toolbar-start{flex-wrap:wrap;gap:var(--s2)}.toolbar-end{justify-content:flex-end}.search{width:100%;flex:1;min-width:0}.tbl th:nth-child(3),.tbl td:nth-child(3),.tbl th:nth-child(7),.tbl td:nth-child(7){display:none}.btn-label{display:none}.btn{padding:6px 8px}}@media(max-width:480px){.main{padding:var(--s3) var(--s3) var(--s8)}.topbar{padding:0 var(--s3)}.metrics{grid-template-columns:repeat(2,1fr)}.metric-value{font-size:15px}.tbl th:nth-child(4),.tbl td:nth-child(4),.tbl th:nth-child(5),.tbl td:nth-child(5){display:none}.pagination{flex-wrap:wrap}}