:root {
    --bg: #0a0e17;
    --bg2: #0d1321;
    --bg3: #131a2b;
    --card: #151d2e;
    --hover: #1a2540;
    --border: #1e2a45;
    --text: #e0e8ff;
    --text2: #8892b0;
    --text3: #5a6380;
    --cyan: #00c8ff;
    --blue: #4a9eff;
    --purple: #7b61ff;
    --pink: #ff6b9d;
    --green: #00e676;
    --yellow: #ffd740;
    --red: #ff5252;
    --grad1: linear-gradient(135deg, #00c8ff, #7b61ff);
    --grad2: linear-gradient(135deg, #7b61ff, #ff6b9d);
    --shadow: 0 4px 24px rgba(0,0,0,0.3);
    --sidebar-w: 220px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

#particles {
    position:fixed; top:0; left:0; width:100%; height:100%;
    z-index:0; pointer-events:none;
}

/* ===== Loading ===== */
.loading-screen {
    position:fixed; inset:0; display:flex;
    flex-direction:column; align-items:center; justify-content:center;
    background:var(--bg); z-index:9999;
}
.loading-spinner { position:relative; width:80px; height:80px; }
.spinner-ring {
    position:absolute; inset:0;
    border:3px solid transparent; border-radius:50%;
    animation:spin 1.5s linear infinite;
}
.spinner-ring:nth-child(1) { border-top-color:var(--cyan); animation-duration:1.5s; }
.spinner-ring:nth-child(2) { border-right-color:var(--purple); animation-duration:2s; animation-direction:reverse; }
.spinner-ring:nth-child(3) { border-bottom-color:var(--pink); animation-duration:2.5s; }
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.loading-text { margin-top:24px; font-size:14px; color:var(--text2); letter-spacing:2px; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ===== App ===== */
.app-container { display:flex; height:100vh; position:relative; z-index:1; }

/* ===== Sidebar ===== */
.sidebar {
    width:var(--sidebar-w); height:100vh;
    background:var(--bg2); border-right:1px solid var(--border);
    display:flex; flex-direction:column; flex-shrink:0;
    transition:width 0.3s ease; overflow:hidden;
}
.sidebar::after {
    content:''; position:absolute; top:0; right:0; width:1px; height:100%;
    background:linear-gradient(to bottom, var(--cyan), var(--purple), transparent); opacity:0.3;
}
.sidebar-header {
    height:56px; display:flex; align-items:center; padding:0 16px;
    border-bottom:1px solid var(--border);
}
.logo-icon { display:flex; align-items:center; gap:2px; }
.logo-bracket { font-size:20px; font-weight:700; color:var(--cyan); text-shadow:0 0 10px rgba(0,200,255,0.5); }
.logo-text { font-size:18px; font-weight:800; background:var(--grad1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.logo-title { margin-left:12px; overflow:hidden; }
.title-main { font-size:13px; font-weight:600; white-space:nowrap; }
.title-sub { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }

.sidebar-nav { flex:1; padding:8px; overflow-y:auto; }
.nav-item {
    display:flex; align-items:center; padding:10px 14px; margin:2px 0;
    border-radius:8px; cursor:pointer; transition:all 0.2s;
    color:var(--text2); position:relative;
}
.nav-item:hover { background:var(--hover); color:var(--text); }
.nav-item.active {
    background:linear-gradient(135deg, rgba(0,200,255,0.1), rgba(123,97,255,0.1));
    color:var(--cyan); border:1px solid rgba(0,200,255,0.2);
}
.nav-icon { font-size:18px; min-width:20px; }
.nav-label { margin-left:10px; font-size:13px; white-space:nowrap; }

.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); }
.system-info { font-size:11px; }
.info-item { display:flex; justify-content:space-between; margin:3px 0; }
.info-label { color:var(--text3); }
.info-value { color:var(--text2); }
.info-value.online { color:var(--green); text-shadow:0 0 5px rgba(0,230,118,0.3); }

/* ===== Main ===== */
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.top-bar {
    height:50px; display:flex; align-items:center;
    justify-content:space-between; padding:0 20px;
    background:rgba(13,19,33,0.85); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
}
.top-bar-left { display:flex; align-items:center; gap:12px; }
.menu-toggle { font-size:20px; cursor:pointer; color:var(--text2); }
.menu-toggle:hover { color:var(--cyan); }
.page-title { font-size:15px; font-weight:600; }
.top-bar-right { display:flex; align-items:center; gap:12px; }
.top-icon { font-size:18px; cursor:pointer; color:var(--text2); }
.top-icon:hover { color:var(--cyan); }
.avatar-circle {
    width:32px; height:32px; border-radius:50%;
    background:var(--grad1); display:flex; align-items:center;
    justify-content:center; font-size:14px; font-weight:700; color:#fff;
    box-shadow:0 0 10px rgba(0,200,255,0.3);
}

.content-area { flex:1; overflow-y:auto; padding:20px; }

/* ===== Dashboard ===== */
.dashboard-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px; margin-bottom:20px;
}
.stat-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:18px; display:flex; align-items:center; gap:14px;
    transition:all 0.2s;
}
.stat-card:hover {
    border-color:rgba(0,200,255,0.3); box-shadow:0 0 20px rgba(0,200,255,0.15);
    transform:translateY(-2px);
}
.stat-icon {
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-value { font-size:26px; font-weight:700; background:var(--grad1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }

.welcome-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:14px; padding:28px; text-align:center;
}
.welcome-card h2 { font-size:22px; font-weight:700; margin-bottom:10px; background:var(--grad1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.welcome-card p { color:var(--text2); margin-bottom:20px; line-height:1.6; }
.quick-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===== Buttons ===== */
.btn, button:not(.nav-item):not(.ep-icon) {
    padding:8px 16px; border-radius:8px; border:1px solid var(--border);
    background:transparent; color:var(--text); cursor:pointer;
    font-size:13px; transition:all 0.2s; font-family:inherit;
}
.btn:hover { background:var(--hover); border-color:var(--blue); }
.btn-primary { background:var(--grad1); border:none; color:#fff; }
.btn-primary:hover { box-shadow:0 0 15px rgba(0,200,255,0.4); }
.btn-success { background:linear-gradient(135deg,#00e676,#00c8ff); border:none; color:#fff; }
.btn-warning { background:linear-gradient(135deg,#ffd740,#ff6b9d); border:none; color:#fff; }
.btn-danger { background:linear-gradient(135deg,#ff5252,#ff6b9d); border:none; color:#fff; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

.glow-btn { box-shadow:0 0 12px rgba(0,200,255,0.2); }
.glow-btn:hover { box-shadow:0 0 20px rgba(0,200,255,0.4); transform:translateY(-2px); }

/* ===== Card ===== */
.card {
    background:var(--card); border:1px solid var(--border);
    border-radius:12px; overflow:hidden;
}
.card-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--border);
    background:var(--bg2); font-size:14px; font-weight:600;
}
.card-actions { display:flex; gap:8px; }

/* ===== Chat ===== */
.chat-container {
    display:flex; flex-direction:column; height:100%;
    background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.message { max-width:85%; }
.message-user { align-self:flex-end; }
.message-assistant { align-self:flex-start; }
.msg-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.msg-role { font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; }
.msg-time { font-size:10px; color:var(--text3); }
.msg-content {
    background:var(--bg3); border-radius:10px; padding:12px 14px;
    font-size:14px; line-height:1.5;
}
.message-user .msg-content {
    background:linear-gradient(135deg, rgba(0,200,255,0.1), rgba(123,97,255,0.1));
    border:1px solid rgba(0,200,255,0.2);
}

.typing-indicator { display:flex; gap:4px; padding:10px; }
.typing-indicator span {
    width:8px; height:8px; border-radius:50%;
    background:var(--cyan); animation:typingBounce 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:.3} 30%{transform:translateY(-8px);opacity:1} }

.chat-input-area {
    border-top:1px solid var(--border); padding:12px;
    background:var(--bg2);
}
.chat-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

.chat-textarea {
    width:100%; padding:10px 12px; border-radius:8px;
    border:1px solid var(--border); background:var(--bg3);
    color:var(--text); font-family:inherit; font-size:14px;
    resize:vertical; outline:none; transition:border-color 0.2s;
}
.chat-textarea:focus { border-color:var(--cyan); }

/* ===== Terminal ===== */
.terminal-container {
    display:flex; flex-direction:column; height:100%;
    background:#0c0c0c; border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.term-header {
    display:flex; align-items:center; padding:10px 14px;
    background:#111; border-bottom:1px solid var(--border);
}
.term-dots { display:flex; gap:6px; }
.dot { width:10px; height:10px; border-radius:50%; }
.dot-red { background:#ff5f56; }
.dot-yellow { background:#ffbd2e; }
.dot-green { background:#27ca40; }
.term-title { flex:1; text-align:center; font-size:12px; color:var(--text2); font-family:monospace; }
.term-body {
    flex:1; padding:12px; overflow-y:auto; cursor:text;
    font-family:'JetBrains Mono','Fira Code',monospace; font-size:13px; line-height:1.6;
}
.term-line { margin:2px 0; word-break:break-all; }
.term-line.command { color:var(--green); }
.term-line.error { color:var(--red); }
.term-prompt { color:var(--cyan); margin-right:6px; user-select:none; }
.term-input-line { display:flex; align-items:center; }
.term-input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text); font-family:inherit; font-size:inherit;
}
.term-input::placeholder { color:var(--text3); }

/* ===== Files ===== */
.files-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px; padding:16px;
}
.file-item {
    display:flex; flex-direction:column; align-items:center;
    padding:14px 8px; border-radius:8px; cursor:pointer;
    transition:all 0.2s; border:1px solid transparent;
}
.file-item:hover { background:var(--hover); border-color:var(--cyan); }
.file-item.is-dir { cursor:pointer; }
.file-item.is-dir:hover .file-icon { transform:scale(1.1); }
.file-icon { font-size:36px; margin-bottom:6px; }
.file-name { font-size:12px; text-align:center; word-break:break-all; max-width:100%; }
.file-size { font-size:10px; color:var(--text3); margin-top:3px; }

.breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.crumb { cursor:pointer; color:var(--cyan); font-size:13px; white-space:nowrap; }
.crumb:hover { text-decoration:underline; color:#fff; }
.crumb-sep { color:var(--text3); font-size:12px; }

/* File Preview */
.file-preview { padding:16px; }
.preview-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.preview-title { font-weight:600; font-size:14px; }
.preview-meta { color:var(--text3); font-size:11px; }
.preview-content { 
    background:var(--bg); border:1px solid var(--border); border-radius:8px; 
    padding:16px; overflow:auto; max-height:55vh; font-family:monospace;
    font-size:13px; line-height:1.6;
}
.preview-actions { margin-top:12px; }
.preview-truncated { text-align:center; padding:8px; color:var(--yellow); font-size:12px; }

/* File grid improvements */
.files-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; padding:16px; overflow-y:auto; max-height:calc(100vh - 280px); }
.file-item {
    display:flex; flex-direction:column; align-items:center;
    padding:14px 8px; border-radius:8px; cursor:pointer;
    transition:all 0.2s; border:1px solid transparent;
}
.file-item:hover { background:var(--hover); border-color:var(--cyan); }
.file-item.is-dir { cursor:pointer; }
.file-item.is-dir:hover .file-icon { transform:scale(1.1); }
.file-icon { font-size:36px; margin-bottom:6px; }
.file-name { font-size:12px; text-align:center; word-break:break-all; max-width:100%; }
.file-size { font-size:10px; color:var(--text3); margin-top:3px; }
.file-mtime { font-size:9px; color:var(--text3); margin-top:1px; }
.empty-state { text-align:center; padding:40px; color:var(--text3); grid-column:1/-1; }
.loading-spin { text-align:center; padding:40px; color:var(--text3); }

/* ===== Search Input ===== */
.search-input {
    padding:8px 12px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg3); color:var(--text); font-size:13px;
    outline:none; transition:border-color 0.2s; width:250px;
}
.search-input:focus { border-color:var(--cyan); }
.search-input::placeholder { color:var(--text3); }

/* ===== Memory ===== */
.mem-list { padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.mem-card {
    background:var(--bg3); border:1px solid var(--border); border-radius:8px;
    padding:14px; transition:all 0.2s;
}
.mem-card:hover { border-color:rgba(0,200,255,0.3); }
.mem-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mem-tag { font-size:12px; font-weight:600; color:var(--cyan); }
.mem-content { font-size:13px; line-height:1.5; margin-bottom:6px; }
.mem-time { font-size:10px; color:var(--text3); }

/* ===== Skills ===== */
.skills-grid { padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.skill-card-item {
    background:var(--bg3); border:1px solid var(--border); border-radius:8px;
    padding:14px; transition:all 0.2s;
}
.skill-card-item:hover { border-color:rgba(0,200,255,0.3); }
.skill-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.skill-hdr strong { font-size:14px; }
.skill-card-item p { font-size:12px; color:var(--text2); line-height:1.4; margin-bottom:10px; }
.skill-footer { display:flex; justify-content:flex-end; gap:6px; }

/* ===== Tags ===== */
.tag { font-size:11px; padding:2px 8px; border-radius:4px; font-weight:500; }
.tag-active { background:rgba(0,230,118,0.15); color:var(--green); border:1px solid rgba(0,230,118,0.3); }
.tag-inactive { background:rgba(90,99,128,0.2); color:var(--text3); border:1px solid rgba(90,99,128,0.3); }

/* ===== Table ===== */
.table-wrap { padding:0; overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); }
.table th { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-weight:600; }
.table td { font-size:13px; }

/* ===== Messages ===== */
.msg-form { padding:16px; display:flex; flex-direction:column; gap:12px; }
.msg-form .select-input { width:200px; }

.select-input {
    padding:8px 12px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg3); color:var(--text); font-size:13px; outline:none;
}
.select-input:focus { border-color:var(--cyan); }

.history-list { border-top:1px solid var(--border); padding:12px; }
.history-item { display:flex; align-items:center; gap:10px; padding:8px; border-radius:6px; font-size:13px; }
.history-item:hover { background:var(--hover); }
.history-item small { color:var(--text3); font-size:11px; margin-left:auto; }

/* ===== Images ===== */
.upload-area {
    border:2px dashed var(--border); border-radius:10px;
    padding:40px; text-align:center; cursor:pointer; color:var(--text3);
    transition:all 0.2s; margin:16px;
}
.upload-area:hover { border-color:var(--cyan); background:rgba(0,200,255,0.05); }
.preview-img { max-width:100%; max-height:400px; border-radius:6px; }
.img-analyze { display:flex; gap:8px; padding:0 16px 16px; }
.analysis-result { background:var(--bg3); border-radius:8px; padding:14px; margin:0 16px 16px; font-size:13px; line-height:1.5; }

/* ===== Settings ===== */
.settings-form { padding:16px; display:flex; flex-direction:column; gap:14px; max-width:450px; }
.form-row { display:flex; align-items:center; gap:12px; }
.form-row label { min-width:80px; font-size:13px; color:var(--text2); }
.form-row .search-input { flex:1; }
.form-row .select-input { flex:1; }

/* ===== Switch ===== */
.switch { position:relative; display:inline-block; width:40px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.slider {
    position:absolute; cursor:pointer; inset:0;
    background:var(--bg3); transition:0.3s; border-radius:22px;
    border:1px solid var(--border);
}
.slider::before {
    content:''; position:absolute; height:16px; width:16px;
    left:2px; bottom:2px; background:var(--text2); transition:0.3s; border-radius:50%;
}
.switch input:checked + .slider { background:var(--cyan); border-color:var(--cyan); }
.switch input:checked + .slider::before { transform:translateX(18px); background:#fff; }

/* ===== Modal ===== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:999;
    display:flex; align-items:center; justify-content:center;
}
.modal {
    background:var(--bg2); border:1px solid var(--border); border-radius:12px;
    padding:24px; max-width:400px; width:90%;
}
.modal p { margin-bottom:16px; font-size:14px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; }

/* ===== Browser ===== */
.browser-placeholder { display:flex; align-items:center; justify-content:center; padding:60px; color:var(--text3); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* ===== Collapsed sidebar ===== */
.sidebar.collapsed { width:56px; }

/* ===== Responsive ===== */
@media (max-width:768px) {
    .sidebar { position:fixed; left:0; top:0; z-index:100; transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .dashboard-grid { grid-template-columns:repeat(2,1fr); }
    .mem-list { grid-template-columns:1fr; }
    .skills-grid { grid-template-columns:1fr; }
}