:root{--navy:#0d1947;--deep:#111f55;--blue:#2555ed;--light:#f4f7ff;--ink:#111b40;--muted:#66738f;--border:#dce4f5;--shadow:0 12px 40px rgba(12,32,91,.13)}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#15265c 0,#16245a 320px,#dce5f7 750px,#f5f7fc 100%);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.container{max-width:1510px;margin:auto;padding:0 18px}.nav{background:#0c1742;color:#fff;border-bottom:1px solid #283d78}.nav-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-size:25px;font-weight:850;letter-spacing:-1px;display:flex;align-items:center;gap:10px;white-space:nowrap}.logo-icon{background:#315ee9;border-radius:8px;width:36px;height:32px;display:grid;place-items:center;font-size:22px}.nav-links{display:flex;gap:12px;align-items:center}.nav-links a{padding:12px 16px;border-radius:10px;font-weight:650;font-size:14px}.nav-links a:hover,.nav-links a.active{background:#213d8d}.hero{position:relative;overflow:hidden;color:white;padding:20px 0 30px;min-height:175px}.hero:after{content:"";position:absolute;right:4%;top:3px;width:480px;height:280px;border-radius:50%;opacity:.38;background:radial-gradient(circle at 50% 40%,transparent 35%,#1985ff 36%,transparent 37%),repeating-radial-gradient(ellipse at 50% 70%,transparent 0 17px,#3884ff 18px 19px,transparent 20px 35px);transform:rotate(-12deg);pointer-events:none}.hero h1{font-size:clamp(27px,3vw,40px);margin:0 0 7px;letter-spacing:-1px}.hero p{font-size:16px;max-width:720px;line-height:1.55;margin:0}.features{display:flex;gap:28px;flex-wrap:wrap;margin-top:19px;font-size:14px}.features span{display:flex;align-items:center;gap:9px}.features b{font-size:21px;color:#a7b9ff}.detector{background:linear-gradient(110deg,#fff,#eef3ff);border-radius:20px;box-shadow:var(--shadow);padding:24px 28px;display:flex;align-items:center;gap:20px;position:relative;z-index:1}.detector-icon{height:58px;width:58px;border-radius:14px;display:grid;place-items:center;background:#4565eb;color:#fff;font-size:30px;flex-shrink:0}.current{flex:1;min-width:240px}.current h2{font-size:19px;margin:0 0 9px}.ua-current{background:#19284d;color:#fff;border-radius:8px;padding:12px 14px;word-break:break-all;line-height:1.5;font-size:13px;cursor:pointer}.icon-button{border:0;background:transparent;color:#3253d6;font-size:20px;margin-left:6px}.detected{border-left:1px solid #cbd6ed;padding-left:25px;display:grid;grid-template-columns:repeat(3,minmax(95px,1fr));gap:18px;min-width:42%}.detect-item{display:flex;align-items:center;gap:9px}.detect-item .emoji{font-size:26px}.detect-item small{display:block;font-weight:700;color:#28417c}.detect-item strong{display:block;font-size:14px}.dashboard{display:grid;grid-template-columns:340px minmax(0,1fr);gap:10px;margin-top:16px;align-items:stretch}.panel{background:linear-gradient(145deg,#fff,#f2f5ff);border-radius:18px;box-shadow:var(--shadow);padding:22px}.sidebar h2,.results h2{font-size:19px;letter-spacing:-.5px;margin:0 0 17px}.sidebar h2{padding-bottom:15px;border-bottom:1px solid var(--border)}.field{margin-bottom:18px}.field label,.field-title{display:block;font-size:14px;font-weight:750;margin-bottom:9px}.range{display:flex;align-items:center;gap:10px}.range select{min-width:0;flex:1}.field select,.search{border:1px solid #c5d2ec;border-radius:9px;background:#fff;padding:11px 12px;color:#15254e;width:100%;outline:none}.field select:focus,.search:focus{border-color:#2754eb;box-shadow:0 0 0 3px #dce6ff}.device-options{display:grid;gap:8px}.device-option{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:9px 13px;border:1px solid #cad6ed;background:#f7f9ff;border-radius:8px;color:#152752;font-size:14px}.device-option.active{background:#2654e9;border-color:#2654e9;color:#fff}.device-option span{display:flex;gap:11px;align-items:center}.primary{background:#2554ea;color:white;border:1px solid #2554ea;border-radius:9px;padding:12px 17px;font-weight:750}.primary:hover{background:#123fd2}.generate{width:100%;margin-top:8px}.results{min-width:0}.results-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.results-head h2{margin-bottom:9px}.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{background:#e5ebff;color:#183a9c;padding:9px 11px;border-radius:9px;font-size:12px;font-weight:700}.tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:14px 0 7px}.tab{background:transparent;border:0;border-radius:8px;padding:10px 14px;color:#1c3574;font-size:13px;font-weight:700}.tab.active{background:#2858eb;color:#fff}.tools{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0}.search{max-width:550px;flex:1;min-width:220px}.actions{display:flex;gap:8px;flex-wrap:wrap}.secondary{background:#f9fbff;border:1px solid #cbd7f0;color:#1b3472;padding:10px 13px;border-radius:8px;font-size:13px;font-weight:700}.actions .primary{font-size:13px;padding:10px 14px}.table-wrap{overflow:auto;border:1px solid #e1e7f5;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:12px}th{background:#edf2fc;text-align:left;padding:12px 10px;white-space:nowrap}td{border-top:1px solid #e2e8f4;padding:10px;vertical-align:middle}tbody tr:nth-child(even){background:#f8faff}.ua-cell{min-width:390px;max-width:650px;line-height:1.5;overflow-wrap:anywhere;color:#1c2b51}.copy-mini{border:0;background:transparent;color:#2854d8;font-size:18px}.empty{text-align:center;padding:38px;color:var(--muted)}.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:13px;font-size:12px;color:#64718b}.pagination button{border:1px solid #cdd7ed;background:white;border-radius:7px;padding:8px 10px;margin-left:6px;color:#1a3473}.pagination button:disabled{opacity:.45;cursor:not-allowed}.data-note{margin:12px 0 0;color:#6d7892;font-size:12px;line-height:1.5}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px;padding:14px 0}.stat-box{display:flex;flex-direction:column;gap:8px;padding:19px;border:1px solid #dce5f6;border-radius:12px;background:white;text-align:left;color:#142653}.stat-box strong{font-size:19px}.stat-box span{font-size:12px;color:#69758e}.info-section{margin:25px 0;background:#fff;border-radius:18px;padding:26px;box-shadow:var(--shadow);line-height:1.7}.info-section h2{margin-top:0}.info-section p{color:#46536f}.info-section details{border-bottom:1px solid #e4e9f5;padding:13px 0}.info-section summary{cursor:pointer;font-weight:700}.footer{color:#d9e3ff;background:#0c1742;margin-top:30px;padding:25px 0;font-size:13px}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer a{margin-left:14px}.toast{position:fixed;bottom:25px;right:25px;background:#152655;color:#fff;border-radius:10px;padding:13px 20px;box-shadow:var(--shadow);opacity:0;transform:translateY(15px);transition:.2s;pointer-events:none;z-index:10}.toast.visible{opacity:1;transform:translateY(0)}.static-page{background:#fff;border-radius:16px;max-width:900px;margin:30px auto;padding:35px;line-height:1.8}.static-page h1{margin-top:0}.static-page p,.static-page li{color:#4e5a70}@media(max-width:1050px){.detector{flex-wrap:wrap}.detected{border-left:0;border-top:1px solid #cbd6ed;padding:16px 0 0;width:100%}.dashboard{grid-template-columns:290px minmax(0,1fr)}.nav-links{gap:0}.nav-links a{padding:10px 8px}}@media(max-width:750px){.dashboard{grid-template-columns:1fr}.detector{padding:18px}.nav-inner{height:auto;min-height:65px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.nav-links{width:100%;overflow:auto}.nav-links a{white-space:nowrap}.hero{padding:24px 0}.hero:after{opacity:.12}.features{gap:10px 17px}.detected{grid-template-columns:repeat(2,1fr)}.panel{padding:16px}.ua-cell{min-width:270px}.footer a{margin-left:0;margin-right:12px}}@media(max-width:430px){.detected{grid-template-columns:1fr 1fr}.features{font-size:12px}.hero h1{font-size:28px}.pills{gap:5px}.pill{font-size:11px}.tab{padding:8px 9px}.actions{width:100%}.actions button{flex:1}}
