:root{
    --bg:#05080f;
    --bg-2:#0b101a;
    --panel:#0f1623;
    --panel-2:#131b2c;
    --border:rgba(255,255,255,0.08);
    --text:#e6edf7;
    --muted:#8b9ab0;
    --accent:#00e5ff;
    --accent-2:#7c3aed;
    --success:#00e676;
    --warn:#ffb300;
    --danger:#ff1744;
    --radius:16px;
    --shadow:0 24px 60px rgba(0,0,0,0.55);
    --glass:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
* { box-sizing:border-box; }
html,body { height:100%; }
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.45;
    overflow:hidden;
}
#app{
    display:flex;
    height:100vh;
    width:100vw;
}
a { color:var(--accent); text-decoration:none; }
button,input,textarea,select{
    font-family:inherit;
    font-size:0.95rem;
}

/* Sidebar */
#sidebar{
    width:280px;
    flex-shrink:0;
    background:var(--panel);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
}
.brand{
    padding:22px 24px;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:12px;
}
.brand-icon{
    width:38px;height:38px;border-radius:12px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;box-shadow:0 0 18px rgba(0,229,255,0.25);
}
.brand-title{ font-weight:700; font-size:1.1rem; letter-spacing:-0.3px; }
.brand-sub{ font-size:.75rem; color:var(--muted); }

.nav{
    padding:14px 12px;
    display:flex;flex-direction:column;gap:6px;
    flex:1;overflow:auto;
}
.nav-item{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;border-radius:12px;
    color:var(--muted);cursor:pointer;transition:.15s;
    border:1px solid transparent;
}
.nav-item:hover{ background:rgba(255,255,255,0.04); color:var(--text); }
.nav-item.active{ background:var(--glass); color:var(--accent); border-color:rgba(0,229,255,0.25); }
.nav-badge{
    margin-left:auto;background:rgba(255,23,68,0.85);color:#fff;
    font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:99px;
}

.user-card{
    padding:16px;border-top:1px solid var(--border);
    display:flex;align-items:center;gap:12px;
}
.user-avatar{
    width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent-2),var(--accent));
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
}
.user-name{ font-weight:600;font-size:.95rem; }
.user-role{ font-size:.75rem;color:var(--muted); }

/* Main */
#main{
    flex:1;display:flex;flex-direction:column;min-width:0;
    background:radial-gradient(circle at 10% 0%, rgba(124,58,237,0.08), transparent 35%),
               radial-gradient(circle at 90% 100%, rgba(0,229,255,0.06), transparent 30%),
               var(--bg);
}
header{
    height:68px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 28px;background:var(--glass);backdrop-filter:blur(10px);
}
header h1{ font-size:1.25rem;margin:0; }
.header-actions{display:flex;gap:10px;align-items:center;}
.search-box{
    background:var(--bg-2);border:1px solid var(--border);border-radius:12px;
    padding:9px 14px;color:var(--text);width:260px;outline:none;
}
.search-box:focus{ border-color:var(--accent); }

.content{ flex:1;overflow:auto;padding:26px 28px; }
.screen{ display:none; }
.screen.active{ display:block;animation:fade .25s ease; }
@keyframes fade{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:24px;}
.stat-card{
    background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px;backdrop-filter:blur(8px);box-shadow:var(--shadow);
}
.stat-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:0.5px;}
.stat-value{font-size:2rem;font-weight:700;margin-top:6px;}
.stat-value.open{color:var(--accent);}
.stat-value.high{color:var(--danger);}

/* Lists */
.ticket-list{display:flex;flex-direction:column;gap:10px;}
.ticket-row{
    background:var(--panel-2);border:1px solid var(--border);border-radius:14px;
    padding:16px 18px;display:grid;grid-template-columns:1fr auto auto auto;gap:16px;
    align-items:center;cursor:pointer;transition:.15s;
}
.ticket-row:hover{ border-color:rgba(0,229,255,0.3); transform:translateY(-1px); }
.ticket-title{font-weight:600;}
.ticket-meta{color:var(--muted);font-size:.8rem;margin-top:3px;}
.priority{ text-transform:uppercase;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:99px; }
.priority.low{background:rgba(0,230,118,0.12);color:var(--success);}
.priority.medium{background:rgba(255,179,0,0.12);color:var(--warn);}
.priority.high{background:rgba(255,23,68,0.12);color:var(--danger);}
.priority.critical{background:var(--danger);color:#fff;}
.status{font-size:.8rem;color:var(--muted);}
.status.open{color:var(--accent);}
.status.in_progress{color:var(--warn);}
.status.resolved,.status.closed{color:var(--success);}

/* Buttons */
.btn{
    border:none;border-radius:12px;padding:10px 18px;font-weight:600;cursor:pointer;
    transition:.15s;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#05080f; }
.btn-primary:hover{ filter:brightness(1.15); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:rgba(255,255,255,0.05); border-color:var(--accent); }
.btn-danger{ background:rgba(255,23,68,0.18); color:var(--danger); border:1px solid rgba(255,23,68,0.4); }
.btn-sm{padding:6px 12px;font-size:.85rem;}

/* Forms */
.form-group{margin-bottom:16px;}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;}
input[type="text"],input[type="email"],select,textarea{
    width:100%;background:var(--bg-2);border:1px solid var(--border);
    border-radius:12px;padding:12px 14px;color:var(--text);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
textarea{min-height:120px;resize:vertical;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* Ticket detail */
.chat-box{
    background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px;max-height:420px;overflow:auto;margin-bottom:16px;
}
.message{margin-bottom:16px;display:flex;flex-direction:column;align-items:flex-start;}
.message.staff{align-items:flex-end;}
.message-bubble{
    max-width:70%;padding:12px 16px;border-radius:14px;
    background:var(--panel);border:1px solid var(--border);
}
.message.staff .message-bubble{background:rgba(0,229,255,0.08);border-color:rgba(0,229,255,0.25);}
.message-name{font-size:.75rem;color:var(--muted);margin-bottom:4px;}
.message-time{font-size:.7rem;color:var(--muted);margin-top:6px;}
.reply-box{display:flex;gap:10px;}
.reply-box textarea{flex:1;min-height:60px;}

/* KB */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.kb-card{
    background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px;cursor:pointer;transition:.15s;
}
.kb-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.kb-cat{color:var(--accent);font-size:.75rem;font-weight:700;text-transform:uppercase;margin-bottom:6px;}
.kb-title{font-weight:700;margin-bottom:8px;}
.kb-desc{color:var(--muted);font-size:.85rem;}
.kb-article{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:26px;}
.kb-article h2{margin-top:0;}
.kb-article pre{background:var(--bg);padding:14px;border-radius:10px;overflow:auto;border:1px solid var(--border);}
.kb-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent);}

/* Modals */
#modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;
    display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}
#modal-overlay.show{display:flex;}
.modal{
    background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
    width:min(640px,92vw);max-height:90vh;overflow:auto;box-shadow:var(--shadow);
}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-title{font-weight:700;font-size:1.1rem;}
.modal-close{font-size:1.4rem;color:var(--muted);cursor:pointer;}
.modal-body{padding:22px;}

/* Widget launcher */
#support-widget-launcher{
    position:fixed;bottom:22px;right:22px;z-index:99999;
    width:58px;height:58px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none;color:#05080f;font-size:1.6rem;cursor:pointer;
    box-shadow:0 8px 28px rgba(0,229,255,0.35);display:flex;align-items:center;justify-content:center;
    transition:.2s;
}
#support-widget-launcher:hover{ transform:scale(1.08); }

/* Empty */
.empty{text-align:center;color:var(--muted);padding:50px 20px;}
.empty-icon{font-size:3rem;margin-bottom:12px;opacity:.6;}

/* Mobile */
#sidebar-overlay{display:none;}
@media (max-width:860px){
    #sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .25s;z-index:200;width:260px;}
    #sidebar.open{transform:translateX(0);}
    #sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;display:none;}
    #sidebar-overlay.show{display:block;}
    .menu-btn{display:block;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 12px;margin-right:10px;}
    .form-grid{grid-template-columns:1fr;}
    .ticket-row{grid-template-columns:1fr;gap:8px;}
}