:root{--bg-main: #020617;--bg-sidebar: #0f172a;--bg-card: rgba(30, 41, 59, .4);--primary: #7c3aed;--primary-hover: #8b5cf6;--secondary: #3b82f6;--accent: #22d3ee;--text-main: #f8fafc;--text-muted: #94a3b8;--border: rgba(255, 255, 255, .1);--success: #10b981;--danger: #f43f5e}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--bg-main);color:var(--text-main);height:100vh;overflow:hidden}.app-container{display:flex;height:100vh}.sidebar{width:260px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.sidebar-header{padding:24px;display:flex;align-items:center;gap:12px}.logo-box{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;box-shadow:0 4px 12px #7c3aed4d}.nav-list{flex:1;padding:16px;display:flex;flex-direction:column;gap:8px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;cursor:pointer;color:var(--text-muted);transition:all .2s ease;background:transparent;border:1px solid transparent;font-size:14px;font-weight:500;width:100%;text-align:left}.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}.nav-item.active{background:rgba(124,58,237,.15);color:var(--primary-hover);border:1px solid rgba(124,58,237,.2)}.sidebar-footer{padding:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.contract-badge{background:rgba(255,255,255,.05);padding:12px;border-radius:12px;font-size:12px}.contract-badge p{color:var(--text-muted)}.contract-badge span{color:#fff;font-weight:600;display:block;margin-top:2px}.logout-item{color:#fca5a5!important}.logout-item:hover{background:rgba(239,68,68,.1)!important;color:#ef4444!important}.main-content{flex:1;padding:40px;overflow-y:auto}.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.search-container{display:flex;align-items:center;gap:12px}.search-input-wrapper{position:relative}.search-input{background:#1e293b;border:1px solid var(--border);padding:10px 16px 10px 40px;border-radius:99px;color:#fff;width:280px;outline:none;transition:border-color .2s}.search-input:focus{border-color:var(--primary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:40px}.stat-card{background:var(--bg-card);border:1px solid var(--border);padding:24px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-header{display:flex;justify-content:space-between;margin-bottom:16px}.stat-icon{padding:8px;background:#0f172a;border-radius:10px}.stat-badge{font-size:11px;font-weight:700;padding:4px 8px;border-radius:99px}.badge-up{background:rgba(16,185,129,.1);color:var(--success)}.badge-down{background:rgba(244,63,94,.1);color:var(--danger)}.data-table-container{background:var(--bg-card);border:1px solid var(--border);padding:24px;border-radius:24px}table{width:100%;border-collapse:collapse}th{text-align:left;color:var(--text-muted);font-size:13px;padding-bottom:16px;border-bottom:1px solid var(--border)}td{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}.sentiment-badge{padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600}.positive{background:rgba(16,185,129,.1);color:var(--success)}.negative{background:rgba(244,63,94,.1);color:var(--danger)}.neutral{background:rgba(148,163,184,.1);color:var(--text-muted)}.webhook-action-btn{display:flex;align-items:center;justify-content:center;transition:all .2s ease}.webhook-action-btn:hover{transform:translateY(-2px);filter:brightness(1.2)}.webhook-action-btn:active{transform:translateY(0)}.glass{background:rgba(255,255,255,.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05)}.glass-dark{background:rgba(15,23,42,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05)}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#020617;position:relative;overflow:hidden;padding:20px}.login-card{width:100%;max-width:420px;padding:40px;border-radius:24px;z-index:10;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080}.login-header{text-align:center;margin-bottom:32px}.login-logo{width:64px;height:64px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 10px 15px -3px #4361ee4d}.login-header h1{font-size:24px;font-weight:700;margin-bottom:8px;background:linear-gradient(to right,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login-header p{color:var(--text-muted);font-size:14px}.login-form .input-group{margin-bottom:20px}.login-form label{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:13px;margin-bottom:8px;font-weight:500}.login-form input{width:100%;padding:12px 16px;background:rgba(15,23,42,.6);border:1px solid var(--border);border-radius:12px;color:#fff;outline:none;transition:all .2s}.login-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4361ee26}.login-btn{width:100%;padding:14px;background:linear-gradient(to right,var(--primary),var(--secondary));border:none;border-radius:12px;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:32px}.login-btn:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #4361ee66}.login-footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}.login-bg-decor .blob{position:absolute;filter:blur(80px);z-index:1;opacity:.4}.blob-1{width:400px;height:400px;background:var(--primary);top:-100px;right:-100px;border-radius:50%;animation:float 20s infinite alternate}.blob-2{width:300px;height:300px;background:var(--secondary);bottom:-50px;left:-50px;border-radius:50%;animation:float 15s infinite alternate-reverse}@keyframes float{0%{transform:translate(0)}to{transform:translate(50px,50px)}}
