*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#030608;
  --bg2:#060c12;
  --card:rgba(255,255,255,0.025);
  --card-hover:rgba(255,255,255,0.045);
  --border:rgba(255,255,255,0.06);
  --border-hover:rgba(255,255,255,0.12);
  --green:#10b981;
  --green-bright:#34d399;
  --green-dim:rgba(16,185,129,0.08);
  --gold:#f59e0b;
  --gold-bright:#fbbf24;
  --gold-dim:rgba(245,158,11,0.08);
  --red:#ef4444;
  --red-dim:rgba(239,68,68,0.08);
  --blue:#3b82f6;
  --blue-dim:rgba(59,130,246,0.08);
  --t1:#f1f5f9;
  --t2:rgba(241,245,249,0.5);
  --t3:rgba(241,245,249,0.25);
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--t1);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--gold-bright);text-decoration:none}
a:hover{text-decoration:underline}

/* Login Page */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:48px 40px;backdrop-filter:blur(20px)}
.login-box h1{font-family:var(--serif);font-size:28px;font-weight:400;text-align:center;margin-bottom:8px}
.login-box .sub{font-size:14px;color:var(--t2);text-align:center;margin-bottom:32px}
.login-box .logo{text-align:center;margin-bottom:24px;font-size:36px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--t3);margin-bottom:8px}
.form-group input{width:100%;padding:14px 18px;font-size:15px;font-family:var(--sans);color:var(--t1);background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;outline:none;transition:all .3s}
.form-group input:focus{border-color:rgba(245,158,11,0.3);box-shadow:0 0 0 4px rgba(245,158,11,0.06);background:rgba(255,255,255,0.05)}
.btn-primary{width:100%;padding:16px;font-size:15px;font-weight:700;font-family:var(--sans);color:#000;background:linear-gradient(135deg,var(--gold-bright),var(--gold));border:1px solid rgba(245,158,11,0.4);border-radius:100px;cursor:pointer;transition:all .4s;margin-top:8px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,158,11,0.25)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}
.login-error{color:var(--red);font-size:13px;text-align:center;margin-top:16px;display:none}

/* Dashboard Layout */
.dash{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--bg2);border-right:1px solid var(--border);padding:24px 0;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}
.sidebar-logo{padding:0 24px 24px;border-bottom:1px solid var(--border);margin-bottom:16px;font-family:var(--serif);font-size:20px;font-weight:400;display:flex;align-items:center;gap:10px}
.sidebar-logo span{font-size:24px}
.sidebar-nav{flex:1;padding:0 12px}
.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;color:var(--t2);font-size:14px;font-weight:500;transition:all .2s;margin-bottom:2px;text-decoration:none}
.sidebar-nav a:hover,.sidebar-nav a.active{background:var(--card);color:var(--t1)}
.sidebar-nav a.active{background:var(--gold-dim);color:var(--gold-bright)}
.sidebar-nav a .icon{font-size:18px;width:24px;text-align:center}
.sidebar-bottom{padding:16px 24px;border-top:1px solid var(--border)}
.sidebar-bottom .user{font-size:13px;color:var(--t2);margin-bottom:8px}
.sidebar-bottom button{background:none;border:1px solid var(--border);color:var(--t2);font-size:12px;font-family:var(--sans);padding:8px 16px;border-radius:8px;cursor:pointer;width:100%;transition:all .2s}
.sidebar-bottom button:hover{border-color:var(--red);color:var(--red)}

.main{flex:1;margin-left:240px;padding:32px}
.main-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.main-header h1{font-size:24px;font-weight:700}
.period-select{display:flex;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:4px}
.period-btn{padding:8px 16px;font-size:12px;font-weight:600;font-family:var(--sans);color:var(--t2);background:none;border:none;border-radius:8px;cursor:pointer;transition:all .2s}
.period-btn:hover{color:var(--t1)}
.period-btn.active{background:var(--gold-dim);color:var(--gold-bright)}
.refresh-info{font-size:11px;color:var(--t3);margin-left:12px}

/* Cards Grid */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:32px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .3s}
.card:hover{border-color:var(--border-hover)}
.card .card-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-bottom:8px}
.card .card-value{font-size:32px;font-weight:800;letter-spacing:-1px}
.card .card-value.gold{color:var(--gold-bright)}
.card .card-value.green{color:var(--green-bright)}
.card .card-sub{font-size:12px;color:var(--t3);margin-top:4px}

/* Charts Grid */
.charts{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:32px}
.chart-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.chart-box h3{font-size:14px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.chart-box h3 .icon{font-size:16px}
.chart-canvas{position:relative;height:260px}

/* Secondary Charts */
.charts-secondary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:32px}

/* Scroll Depth Bars */
.scroll-bars{display:flex;flex-direction:column;gap:10px}
.scroll-row{display:flex;align-items:center;gap:12px}
.scroll-label{font-size:12px;font-weight:600;color:var(--t2);width:40px;text-align:right}
.scroll-track{flex:1;height:24px;background:rgba(255,255,255,0.03);border-radius:6px;overflow:hidden;position:relative}
.scroll-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:6px;transition:width .8s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:10px;font-weight:700;color:#000;min-width:fit-content}

/* Tables */
.table-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:32px}
.table-box h3{font-size:14px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border)}
td{padding:12px 16px;font-size:13px;color:var(--t2);border-bottom:1px solid rgba(255,255,255,0.02)}
tr:hover td{color:var(--t1);background:rgba(255,255,255,0.01)}
.badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600}
.badge-gold{background:var(--gold-dim);color:var(--gold-bright)}
.badge-green{background:var(--green-dim);color:var(--green-bright)}
.badge-blue{background:var(--blue-dim);color:var(--blue)}
.badge-red{background:var(--red-dim);color:var(--red)}
.clickable{cursor:pointer}
.clickable:hover{background:rgba(245,158,11,0.04) !important}

/* Visitor Detail Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:20px;width:100%;max-width:800px;max-height:85vh;overflow-y:auto;padding:32px}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-header h2{font-size:20px;font-weight:700}
.modal-close{background:none;border:1px solid var(--border);color:var(--t2);font-size:18px;width:36px;height:36px;border-radius:10px;cursor:pointer;display:grid;place-items:center;transition:all .2s}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.modal-info-item{background:var(--card);border-radius:10px;padding:14px 16px}
.modal-info-item .label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-bottom:4px}
.modal-info-item .value{font-size:14px;font-weight:500}
.journey-list{display:flex;flex-direction:column;gap:8px}
.journey-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border-radius:10px;font-size:13px}
.journey-item .time{font-size:11px;color:var(--t3);min-width:70px}
.journey-item .type{font-weight:600;min-width:80px}
.journey-item .data{color:var(--t2)}

/* Loading */
.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--t3)}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;margin-right:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Responsive */
@media(max-width:1200px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .charts-secondary{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .sidebar{display:none}
  .main{margin-left:0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
}
@media(max-width:640px){
  .main{padding:16px}
  .cards{grid-template-columns:1fr}
  .charts-secondary{grid-template-columns:1fr}
  .main-header{flex-direction:column;gap:16px;align-items:flex-start}
  .modal-info{grid-template-columns:1fr}
}