:root{--bg:#f4f7fb;--card:#fff;--text:#142033;--muted:#6b778c;--line:#e4eaf1;--accent:#0f766e;--nav:#0b172a;--danger:#b42318}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text)}a{color:inherit}.topbar{height:66px;background:var(--nav);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20;box-shadow:0 4px 18px #0b172a22}.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand-badge{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#22c55e,#0ea5e9);display:grid;place-items:center}.nav{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.nav a{padding:9px 12px;border-radius:9px;text-decoration:none;color:#dbe7f5;font-size:13px}.nav a:hover,.nav a.active{background:#ffffff18;color:#fff}.container{max-width:1380px;margin:auto;padding:24px}.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.select,input,textarea,button{font:inherit}.select,input,textarea{border:1px solid #d7dee8;border-radius:10px;background:#fff;padding:10px 12px;outline:none}.select:focus,input:focus,textarea:focus{border-color:#77a8ff;box-shadow:0 0 0 3px #3b82f61a}.btn{border:0;border-radius:10px;padding:10px 14px;background:#0f172a;color:#fff;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn.secondary{background:#eef2f7;color:#243147}.btn.danger{background:#fee4e2;color:#b42318}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px #1c2b4a0a;padding:18px}.kpi{position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-24px;top:-24px;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#0ea5e915,#22c55e10)}.kpi .label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.kpi .value{font-size:30px;font-weight:850;margin-top:7px;animation:rise .55s ease both}.kpi .sub{font-size:11px;color:var(--muted);margin-top:5px}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.charts{grid-template-columns:2fr 1fr}.charts2{grid-template-columns:1fr 1fr 1fr}.card h3{margin:0 0 14px;font-size:15px}.chartbox{height:300px}.chartbox.small{height:245px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px}th,td{padding:11px 10px;border-bottom:1px solid #edf1f5;text-align:left;font-size:12px;vertical-align:top}th{color:#6b778c;font-size:11px;text-transform:uppercase;letter-spacing:.035em}.flag{font-size:18px}.pill{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eef4ff;color:#315ea8;font-size:10px;font-weight:700}.pulse{width:9px;height:9px;background:#22c55e;border-radius:50%;display:inline-block;box-shadow:0 0 0 0 #22c55e88;animation:pulse 1.6s infinite}@keyframes pulse{70%{box-shadow:0 0 0 8px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}.muted{color:var(--muted)}.notice{padding:12px 14px;border-radius:11px;margin:12px 0;background:#ecfdf3;color:#067647;border:1px solid #abefc6}.error{background:#fef3f2;color:#b42318;border-color:#fecdca}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field label{display:block;font-size:12px;font-weight:750;margin-bottom:6px}.field input,.field textarea,.field select{width:100%}.code{background:#0b172a;color:#dce9fa;padding:14px;border-radius:12px;white-space:pre-wrap;word-break:break-word;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.preview{display:grid;place-items:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:14px;padding:24px}.tabs{display:flex;gap:6px;margin-bottom:14px}.tabs a{padding:8px 12px;border-radius:9px;text-decoration:none;background:#eef2f7;font-size:12px}.tabs a.active{background:#0f172a;color:#fff}@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}.charts,.charts2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}@media(max-width:620px){.topbar{height:auto;padding:12px;align-items:flex-start;gap:10px}.nav{justify-content:flex-end}.container{padding:14px}.kpis{grid-template-columns:1fr}.kpi .value{font-size:26px}}


/* =========================================================
   Professional Visitor Intelligence v2.3
   ========================================================= */
.setting-check{
    display:flex;
    gap:8px;
    align-items:center;
    font-size:12px;
}
.setting-check input{
    width:auto;
}
.visitor-kpis{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.filter-grid{
    display:grid;
    grid-template-columns:
        repeat(7,minmax(130px,1fr));
    gap:10px;
    align-items:end;
}
.filter-search{
    grid-column:span 2;
}
.visitor-table{
    min-width:1260px;
}
.location-cell{
    display:flex;
    gap:8px;
    align-items:flex-start;
}
.tiny{
    color:#8793a4;
    font-size:10px;
    line-height:1.4;
}
.pill.new{
    background:#ecfdf3;
    color:#087443;
}
.pill.returning{
    background:#fff7e8;
    color:#9a5b00;
}
.pill.bot{
    background:#f2f4f7;
    color:#475467;
}
.pill.source{
    background:#f4f0ff;
    color:#6941c6;
}
.btn.mini{
    padding:7px 9px;
    font-size:10px;
    border-radius:8px;
}
.pagination{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:14px;
}
.detail-columns{
    grid-template-columns:1fr 1fr;
}
.profile-kpis{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.profile-value{
    font-size:14px;
    font-weight:800;
    margin-top:8px;
}
.visitor-hero{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    background:#f8fafc;
    border:1px solid #edf1f5;
    border-radius:13px;
    margin-bottom:12px;
}
.visitor-flag{
    width:52px;
    height:52px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:#fff;
    border:1px solid #e5eaf0;
    font-size:29px;
}
.detail-row{
    display:grid;
    grid-template-columns:145px minmax(0,1fr);
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #edf1f5;
}
.detail-row:last-child{
    border-bottom:0;
}
.detail-label{
    color:#748094;
    font-size:11px;
    font-weight:750;
}
.detail-value{
    font-size:12px;
    word-break:break-word;
}
.mono{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size:11px;
}
.system-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    background:#ecfdf3;
    color:#087443;
    font-size:10px;
    font-weight:800;
}
@media(max-width:1200px){
    .filter-grid{
        grid-template-columns:
            repeat(4,minmax(130px,1fr));
    }
}
@media(max-width:900px){
    .visitor-kpis,
    .profile-kpis{
        grid-template-columns:1fr 1fr;
    }
    .detail-columns{
        grid-template-columns:1fr;
    }
    .filter-grid{
        grid-template-columns:1fr 1fr;
    }
    .filter-search{
        grid-column:span 2;
    }
}
@media(max-width:560px){
    .visitor-kpis,
    .profile-kpis,
    .filter-grid{
        grid-template-columns:1fr;
    }
    .filter-search{
        grid-column:auto;
    }
    .detail-row{
        grid-template-columns:1fr;
        gap:4px;
    }
}