@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";body{-webkit-font-smoothing:antialiased;color:#1e293b;background:#f1f5f9;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.login-page{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f3460 100%);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,Roboto,sans-serif;display:flex}.login-card{text-align:center;background:#fffffff7;border-radius:16px;width:400px;padding:48px 36px;box-shadow:0 24px 80px #00000059}.login-logo img{max-width:160px;margin-bottom:12px}.login-card h2{color:#1e293b;margin-bottom:28px;font-size:26px;font-weight:300}.login-error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-bottom:16px;padding:10px 14px;font-size:14px}.login-card .input-group{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;align-items:center;margin-bottom:16px;transition:border-color .2s;display:flex;overflow:hidden}.login-card .input-group:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.login-card .input-icon{-webkit-user-select:none;user-select:none;padding:0 14px;font-size:18px}.login-card input{color:#1e293b;background:0 0;border:none;outline:none;flex:1;padding:14px 14px 14px 0;font-size:15px}.login-card button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;width:100%;margin-top:8px;padding:14px;font-size:16px;font-weight:500;transition:all .2s}.login-card button:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-1px);box-shadow:0 4px 16px #2563eb4d}.login-card button:disabled{opacity:.6;cursor:not-allowed}*{box-sizing:border-box;margin:0;padding:0}.dashboard{background:#f1f5f9;min-height:100vh;font-family:Inter,Roboto,sans-serif;display:flex}.sidebar{color:#e2e8f0;z-index:100;background:linear-gradient(#0f172a 0%,#1e293b 100%);flex-direction:column;width:240px;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-header{text-align:center;border-bottom:1px solid #ffffff14;padding:24px 16px 20px}.sidebar-logo{max-width:120px;margin-bottom:8px}.sidebar-user{color:#94a3b8;margin-top:4px;font-size:13px}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:12px 8px;display:flex}.nav-item{color:#cbd5e1;border-radius:10px;align-items:center;gap:10px;padding:12px 16px;font-size:14px;font-weight:400;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{color:#f1f5f9;background:#ffffff0f}.nav-item.active{color:#60a5fa;background:#3b82f633;font-weight:500}.nav-icon{font-size:18px}.sidebar-logout{color:#f87171;cursor:pointer;background:#ef44441a;border:none;border-radius:10px;align-items:center;gap:10px;margin:8px;padding:14px 16px;font-size:14px;transition:background .15s;display:flex}.sidebar-logout:hover{background:#ef444433}.main-content{flex:1;min-height:100vh;margin-left:240px;padding:24px}.top-qr h2{color:#1e293b;margin-bottom:20px;font-size:22px}.top-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.top-card{cursor:pointer;background:#fff;border-radius:12px;align-items:center;gap:16px;padding:20px;transition:all .2s;display:flex;position:relative;box-shadow:0 1px 4px #0000000f}.top-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001a}.top-rank{color:#fff;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:700;display:flex;position:absolute;top:10px;left:10px}.top-card:first-child .top-rank{background:linear-gradient(135deg,#f59e0b,#b45309)}.top-card:nth-child(2) .top-rank{background:linear-gradient(135deg,#94a3b8,#64748b)}.top-card:nth-child(3) .top-rank{background:linear-gradient(135deg,#d97706,#92400e)}.top-qr-img{border:1px solid #e2e8f0;border-radius:8px;width:56px;height:56px}.top-info{flex:1}.top-name{color:#1e293b;margin-bottom:4px;font-size:14px;font-weight:500}.top-count{color:#2563eb;font-size:20px;font-weight:700}.qr-list{max-width:1200px}.qr-list-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.qr-list-header h2{color:#1e293b;font-size:22px;font-weight:600}.search-form{gap:8px;display:flex}.search-form input{border:1px solid #e2e8f0;border-radius:8px;outline:none;width:220px;padding:8px 14px;font-size:14px}.search-form input:focus{border-color:#3b82f6}.search-form button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:8px;padding:8px 14px}.qr-tabs{align-items:center;gap:8px;margin-bottom:16px;display:flex}.tab{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px 18px;font-size:13px;transition:all .15s}.tab:hover{background:#f1f5f9}.tab.active{color:#fff;background:#3b82f6;border-color:#3b82f6}.qr-total{color:#64748b;margin-left:auto;font-size:13px}.qr-table-wrap{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px #0000000f}.qr-table{border-collapse:collapse;width:100%}.qr-table thead{background:#f8fafc}.qr-table th{text-align:left;color:#64748b;border-bottom:1px solid #e2e8f0;padding:12px 16px;font-size:13px;font-weight:500}.qr-table td{vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:12px 16px;font-size:14px}.row-disabled{opacity:.5}.qr-name{color:#1e293b;max-width:300px;font-weight:500}.qr-thumb{cursor:pointer;border:1px solid #e2e8f0;border-radius:6px;width:60px;height:60px}.qr-count{color:#0f172a;font-size:20px;font-weight:700}.empty-row{text-align:center;color:#94a3b8;padding:40px 0}.action-btns{gap:4px;display:flex}.btn-action{cursor:pointer;background:#f1f5f9;border:none;border-radius:6px;padding:6px 8px;font-size:16px;text-decoration:none;transition:background .15s}.btn-action:hover{background:#e2e8f0}.pagination{justify-content:center;align-items:center;gap:8px;margin-top:20px;display:flex}.pagination button{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px 14px;font-size:14px}.pagination button:disabled{opacity:.4;cursor:not-allowed}.pagination span{color:#64748b;font-size:14px}.qr-stats{max-width:1100px}.qr-stats h2{color:#1e293b;margin-bottom:16px;font-size:22px}.stats-filter{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px;display:flex}.stats-filter label{color:#475569;align-items:center;gap:6px;font-size:14px;display:flex}.stats-filter input[type=date]{border:1px solid #e2e8f0;border-radius:8px;padding:8px 12px;font-size:14px}.stats-filter button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:8px;padding:8px 20px;font-size:14px}.stats-filter button:hover{background:#2563eb}.stats-loading{text-align:center;color:#94a3b8;padding:60px;font-size:16px}.chart-box{background:#fff;border-radius:12px;margin-bottom:24px;padding:24px;box-shadow:0 1px 4px #0000000f}.pie-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.pie-box{text-align:center;background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 4px #0000000f}.no-data{text-align:center;color:#94a3b8;padding:40px}@media (width<=768px){.pie-grid{grid-template-columns:1fr}}.qr-create{max-width:900px}.qr-create h2{color:#1e293b;margin-bottom:20px;font-size:22px}.create-layout{align-items:flex-start;gap:32px;display:flex}.create-form{background:#fff;border-radius:12px;flex:1;padding:28px;box-shadow:0 1px 4px #0000000f}.form-row{margin-bottom:18px}.form-row label{color:#475569;margin-bottom:6px;font-size:13px;font-weight:500;display:block}.required{color:#ef4444}.form-row input,.form-row select{border:1px solid #e2e8f0;border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:14px;transition:border-color .15s}.form-row input:focus,.form-row select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-row-group{gap:16px;display:flex}.form-row.half{flex:1}.form-row-checkbox{flex:1;align-items:center;gap:8px;margin-bottom:18px;display:flex}.form-row-checkbox input{cursor:pointer;width:16px;height:16px}.form-row-checkbox label{color:#475569;cursor:pointer;margin-bottom:0;font-size:14px;font-weight:500}.create-error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-bottom:14px;padding:10px 14px;font-size:14px}.create-form button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:8px;width:100%;padding:12px;font-size:15px;font-weight:500;transition:all .2s}.create-form button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px #10b9814d}.create-form button:disabled{opacity:.6;cursor:not-allowed}.create-result{text-align:center;background:#fff;border-radius:12px;width:300px;padding:24px;box-shadow:0 1px 4px #0000000f}.create-result h3{color:#059669;margin-bottom:16px;font-size:16px}.result-qr{border:1px solid #e2e8f0;border-radius:8px;width:200px;height:200px;margin-bottom:12px}.result-info{text-align:left;color:#475569;margin-bottom:14px;font-size:13px}.result-info p{margin-bottom:4px}.result-info a{color:#2563eb;text-decoration:none}.download-btn{color:#fff;background:#3b82f6;border-radius:8px;padding:10px 20px;font-size:14px;text-decoration:none;transition:background .15s;display:inline-block}.download-btn:hover{background:#2563eb}