body{background-color:#0f172a;color:#f8fafc;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg-primary:#0a0e1a;--bg-secondary:#1a1f2e;--bg-tertiary:#2d3748;--bg-quaternary:#4a5568;--text-primary:#fff;--text-secondary:#e2e8f0;--text-muted:#a0aec0;--border-color:#2d3748;--border-light:#4a5568;--accent-primary:#667eea;--accent-secondary:#764ba2;--accent-gradient:linear-gradient(135deg,#667eea,#764ba2);--success:#48bb78;--warning:#ed8936;--error:#f56565;--info:#4299e1;--shadow:0 4px 6px -1px #0006;--shadow-lg:0 20px 25px -5px #00000080;--shadow-xl:0 25px 50px -12px #0009;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6}.App,body{background-color:#0a0e1a;background-color:var(--bg-primary)}.App{min-height:100vh}.container-fluid{margin:0 auto;max-width:1280px;padding:0 1rem}.row{display:flex;gap:1rem}.col{flex:1 1}.col-sidebar{flex:0 0 320px}.col-content{flex:1 1 auto}.card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1f2e;background:var(--bg-secondary);border:1px solid #2d3748;border:1px solid var(--border-color);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 20px 25px -5px #00000080;box-shadow:var(--shadow-lg);transition:all .3s ease}.card:hover{box-shadow:0 25px 50px -12px #0009;box-shadow:var(--shadow-xl);transform:translateY(-2px)}.card-body{padding:1.5rem}.header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1a1f2e;background:var(--bg-secondary);border-bottom:1px solid #2d3748;border-bottom:1px solid var(--border-color);position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-inner{justify-content:space-between;padding:1.25rem 0}.brand,.header-inner{align-items:center;display:flex}.brand{gap:1rem}.brand-badge{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--accent-gradient);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0006;box-shadow:var(--shadow);color:#fff;display:grid;height:48px;place-items:center;width:48px}.brand-title{color:#fff;color:var(--text-primary);font-size:1.25rem;font-weight:800}.brand-subtitle{color:#a0aec0;color:var(--text-muted);font-size:.9rem;font-weight:500}.stats{display:flex;gap:2rem}.stat{background:#2d3748;background:var(--bg-tertiary);border:1px solid #4a5568;border:1px solid var(--border-light);border-radius:8px;border-radius:var(--radius-md);min-width:80px;padding:.75rem 1rem;text-align:center}.stat-value{color:#fff;color:var(--text-primary);font-size:1.5rem;font-weight:900}.stat-label{color:#a0aec0;color:var(--text-muted);font-size:.8rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.actions{display:flex;gap:.75rem}.actions,.btn{align-items:center}.btn{-webkit-appearance:none;appearance:none;background:#2d3748;background:var(--bg-tertiary);border:1px solid #2d3748;border:1px solid var(--border-color);border-radius:8px;border-radius:var(--radius-md);color:#fff;color:var(--text-primary);cursor:pointer;display:inline-flex;font-weight:500;gap:.5rem;padding:.6rem 1rem;transition:all .2s ease}.btn:hover{background:#4a5568;background:var(--bg-quaternary);transform:translateY(-1px)}.btn-primary,.btn:hover{box-shadow:0 4px 6px -1px #0006;box-shadow:var(--shadow)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--accent-gradient);border:none;color:#fff}.btn-primary:hover{box-shadow:0 20px 25px -5px #00000080;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-danger{background:#f56565;background:var(--error);border:none;color:#fff}.btn-danger:hover{background:#e53e3e;transform:translateY(-1px)}.badge-online{align-items:center;background:#48bb781a;border:1px solid #48bb7833;border-radius:8px;border-radius:var(--radius-md);color:#48bb78;color:var(--success);display:inline-flex;font-size:.85rem;font-weight:600;gap:.5rem;padding:.5rem 1rem}.dashboard{background:#0a0e1a;background:var(--bg-primary);min-height:100vh}.layout{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:320px 1fr}.tabs{background:#1a1f2e;background:var(--bg-secondary);border-bottom:1px solid #2d3748;border-bottom:1px solid var(--border-color);border-radius:12px 12px 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;margin-bottom:1rem;overflow:hidden}.tab{background:#0000;border:none;color:#a0aec0;color:var(--text-muted);cursor:pointer;flex:1 1;font-weight:600;padding:1rem 1.5rem;position:relative;transition:all .3s ease}.tab:hover{background:#2d3748;background:var(--bg-tertiary);color:#e2e8f0;color:var(--text-secondary)}.tab.active{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--accent-gradient);box-shadow:0 4px 6px -1px #0006;box-shadow:var(--shadow);color:#fff}.tab.active:after{background:#fff;bottom:0;content:"";height:3px;left:0;position:absolute;right:0}.ticket-item{background:#1a1f2e;background:var(--bg-secondary);border:1px solid #2d3748;border:1px solid var(--border-color);border-radius:8px;border-radius:var(--radius-md);cursor:pointer;margin-bottom:.5rem;padding:1rem 1.25rem;transition:all .2s ease}.ticket-item:hover{background:#2d3748;background:var(--bg-tertiary);box-shadow:0 4px 6px -1px #0006;box-shadow:var(--shadow);transform:translateY(-1px)}.ticket-item.is-selected{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--accent-gradient);border-color:#667eea;border-color:var(--accent-primary);box-shadow:0 20px 25px -5px #00000080;box-shadow:var(--shadow-lg);color:#fff}.ticket-item.closed{background:#0a0e1a;background:var(--bg-primary);opacity:.6}.pill{border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.5px;padding:4px 10px;text-transform:uppercase}.pill.open{background:#48bb78;background:var(--success);color:#fff}.pill.in-progress{background:#ed8936;background:var(--warning);color:#fff}.pill.closed{background:#a0aec0;background:var(--text-muted);color:#fff}.chat-header{background:#2d3748;background:var(--bg-tertiary);border-bottom:1px solid #2d3748;border-bottom:1px solid var(--border-color);border-radius:12px 12px 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:1rem 1.5rem}.chat-body{grid-gap:1rem;background:#0a0e1a;background:var(--bg-primary);display:grid;gap:1rem;height:calc(70vh - 140px);overflow-y:auto;padding:1.5rem}.chat-bubble{border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0006;box-shadow:var(--shadow);max-width:75%;padding:.75rem 1rem;transition:all .2s ease;width:-webkit-max-content;width:max-content}.chat-bubble:hover{box-shadow:0 20px 25px -5px #00000080;box-shadow:var(--shadow-lg);transform:translateY(-1px)}.chat-bubble.agent{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--accent-gradient);border-radius:12px 12px 6px 12px;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);color:#fff;margin-left:auto}.chat-bubble.customer{background:#2d3748;background:var(--bg-tertiary);border-radius:12px 12px 12px 6px;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);color:#fff;color:var(--text-primary);margin-right:auto}.chat-meta{font-size:11px;font-weight:500;margin-top:6px;opacity:.7}.chat-input{background:#1a1f2e;background:var(--bg-secondary);border-radius:0 0 12px 12px;border-radius:0 0 var(--radius-lg) var(--radius-lg);border-top:1px solid #2d3748;border-top:1px solid var(--border-color);display:flex;gap:.75rem;padding:1rem 1.5rem}.chat-input input{background:#0a0e1a;background:var(--bg-primary);border:1px solid #2d3748;border:1px solid var(--border-color);border-radius:8px;border-radius:var(--radius-md);color:#fff;color:var(--text-primary);flex:1 1;font-size:14px;outline:none;padding:.75rem 1rem;transition:all .2s ease}.chat-input input:focus{border-color:#667eea;border-color:var(--accent-primary);box-shadow:0 0 0 3px #667eea1a}.chat-input input:disabled{cursor:not-allowed;opacity:.5}@media (max-width:1024px){.layout{grid-template-columns:1fr}.col-sidebar{flex-basis:100%}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1f2e;background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:#2d3748;background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a0aec0;background:var(--text-muted)}.text-center{text-align:center}.text-muted{color:#a0aec0;color:var(--text-muted)}.text-success{color:#48bb78;color:var(--success)}.text-warning{color:#ed8936;color:var(--warning)}.text-error{color:#f56565;color:var(--error)}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.rounded{border-radius:.375rem}.shadow{box-shadow:0 4px 6px -1px #0006;box-shadow:var(--shadow)}.shadow-lg{box-shadow:0 20px 25px -5px #00000080;box-shadow:var(--shadow-lg)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.glass-effect{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1a1f2ecc;border:1px solid #ffffff1a}.gradient-border{background:#1a1f2e;background:var(--bg-secondary);border-radius:12px;border-radius:var(--radius-lg);position:relative}.gradient-border:before{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--accent-gradient);border-radius:inherit;content:"";inset:0;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;padding:1px;position:absolute}.ticket-item:hover .pill{transform:scale(1.05)}.btn:active{transform:translateY(0)}.loading-shimmer{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,#2d3748 25%,#4a5568 50%,#2d3748 75%);background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-quaternary) 50%,var(--bg-tertiary) 75%);background-size:200% 100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media (max-width:1024px){.layout{grid-template-columns:280px 1fr}.layout,.stats{gap:1rem}.stat{min-width:60px;padding:.5rem .75rem}}@media (max-width:768px){.container-fluid{padding:.5rem}.layout{gap:.75rem;grid-template-columns:1fr}.col-sidebar{order:2}.col-content{order:1}.stats{flex-wrap:wrap;gap:.5rem}.stat{min-width:50px;padding:.4rem .6rem}.header-inner{flex-wrap:wrap;gap:1rem}.brand{gap:.5rem}.brand-badge{height:36px;width:36px}.brand-title{font-size:1.1rem}.brand-subtitle{font-size:.8rem}}