:root{--color-primary:#14b8a6;--color-primary-dark:#0d9488;--color-primary-light:#2dd4bf;--color-primary-bg:#f0fdfa;--color-secondary:#64748b;--color-secondary-dark:#475569;--color-secondary-light:#94a3b8;--color-accent:#06b6d4;--color-accent-dark:#0891b2;--color-background:#f8fafc;--color-surface:#fff;--color-surface-hover:#f1f5f9;--color-border:#e2e8f0;--color-border-light:#f1f5f9;--color-text-primary:#1e293b;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-text-inverse:#fff;--color-success:#10b981;--color-success-bg:#d1fae5;--color-error:#ef4444;--color-error-bg:#fee2e2;--color-warning:#f59e0b;--color-warning-bg:#fef3c7;--color-info:#3b82f6;--color-info-bg:#dbeafe;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a;--shadow-primary:0 4px 14px 0 #14b8a626;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:400px;padding:60px 20px;display:flex}.loading-spinner{border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{color:var(--color-text-secondary);margin:0;font-size:14px;font-weight:500}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-background);color:var(--color-text-primary);min-height:100vh;font-family:Bai Jamjuree,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:Bai Jamjuree,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:20px}.btn{border-radius:var(--radius-md);cursor:pointer;border:none;padding:10px 20px;font-size:16px;font-weight:500;transition:all .2s}.btn-primary{background-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-primary)}.btn-primary:hover{background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 6px 20px #14b8a640}.btn-success{background-color:var(--color-success);color:var(--color-text-inverse);box-shadow:var(--shadow-md)}.btn-success:hover{box-shadow:var(--shadow-lg);background-color:#059669;transform:translateY(-1px)}.btn-danger{background-color:var(--color-error);color:var(--color-text-inverse);box-shadow:var(--shadow-md)}.btn-danger:hover{box-shadow:var(--shadow-lg);background-color:#dc2626;transform:translateY(-1px)}.form-group{margin-bottom:20px}.form-group label{color:var(--color-text-primary);margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-group input,.form-group select,.form-group textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);width:100%;color:var(--color-text-primary);padding:10px 12px;font-size:16px;transition:all .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #14b8a61a}.card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-border-light);margin-bottom:20px;padding:24px;transition:all .2s}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.loading{text-align:center;color:var(--color-text-secondary);padding:40px}.error{color:var(--color-error);background-color:var(--color-error-bg);border-radius:var(--radius-md);border-left:4px solid var(--color-error);margin-bottom:20px;padding:12px 16px}.success{color:#065f46;background-color:var(--color-success-bg);border-radius:var(--radius-md);border-left:4px solid var(--color-success);margin-bottom:20px;padding:12px 16px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.header-left{align-items:center;gap:16px;display:flex}.header-icon{background:var(--color-primary-bg);width:48px;height:48px;color:var(--color-primary);border-radius:var(--radius-lg);flex-shrink:0;justify-content:center;align-items:center;animation:2s ease-in-out infinite glowPulse;display:flex;box-shadow:0 0 20px #14b8a666,0 0 40px #14b8a633,0 0 60px #14b8a61a}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #14b8a666,0 0 40px #14b8a633,0 0 60px #14b8a61a}50%{box-shadow:0 0 30px #14b8a699,0 0 60px #14b8a666,0 0 90px #14b8a633}}.page-header h1{color:var(--color-text-primary);margin:0;font-size:28px;font-weight:700}.page-header p{color:var(--color-text-secondary);margin:4px 0 0;font-size:14px}.user-dashboard{min-height:100vh}.user-header{background:linear-gradient(135deg,var(--color-primary)0%,var(--color-primary-dark)100%);color:var(--color-text-inverse);box-shadow:var(--shadow-lg);border-radius:0 0 var(--radius-xl)var(--radius-xl);justify-content:space-between;align-items:center;margin-bottom:30px;padding:24px 32px;display:flex}.user-header h1{color:var(--color-text-inverse);margin:0;font-size:24px;font-weight:700}.user-header p{color:#ffffffe6;margin:5px 0 0;font-size:14px}.user-nav{gap:12px;margin-bottom:24px;list-style:none;display:flex}.user-nav a{color:var(--color-text-secondary);border-radius:var(--radius-md);padding:10px 20px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s}.user-nav a:hover,.user-nav a.active{background-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-primary);transform:translateY(-1px)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px;display:grid}.stat-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border-left:4px solid var(--color-primary);padding:24px;transition:all .2s}.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.stat-card h3{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:12px;font-weight:600}.stat-card .value{color:var(--color-primary);font-size:36px;font-weight:700;line-height:1.2}.qr-code-container{text-align:center;padding:20px}.qr-code-container img{border:3px solid var(--color-primary);border-radius:var(--radius-lg);background:var(--color-surface);max-width:300px;box-shadow:var(--shadow-lg);padding:15px;transition:all .2s}.qr-code-container img:hover{box-shadow:var(--shadow-xl);transform:scale(1.02)}.table{border-collapse:collapse;width:100%;margin-top:20px}.table th,.table td{text-align:left;border-bottom:1px solid var(--color-border);padding:12px}.table th{background-color:var(--color-primary);color:var(--color-text-inverse);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.table tr:hover{background-color:var(--color-surface-hover);transition:all .2s}
:root{--login-bg-gradient:linear-gradient(135deg,#14b8a6 0%,#0d9488 50%,#0891b2 100%)}.login-container{background:var(--login-bg-gradient);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-box{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:400px;padding:40px}.login-box h1{text-align:center;color:var(--color-text-primary);margin-bottom:10px;font-size:28px;font-weight:700}.login-box h2{text-align:center;color:var(--color-text-secondary);margin-bottom:30px;font-size:18px;font-weight:500}.login-box form{margin-top:20px}.login-box .btn{width:100%;margin-top:10px;padding:12px;font-size:16px}.login-box .btn:disabled{opacity:.6;cursor:not-allowed}