/* OneHub Glassmorphism Override */

body {
    background: linear-gradient(160deg, #F0F0EE 0%, #E8E4F0 35%, #F5F0F5 65%, #F0EDE8 100%) !important;
}
body::before {
    content: '';
    position: fixed;
    top: -20%; right: -10%;
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 70%);
    border-radius: 50%; z-index: -1; pointer-events: none;
}
body::after {
    content: '';
    position: fixed;
    bottom: -20%; left: -10%;
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(236,72,153,0.06) 0%, transparent 70%);
    border-radius: 50%; z-index: -1; pointer-events: none;
}
.auth-page {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F5F4 30%, #FDF2F8 60%, #EDE9FE 100%) !important;
}
.auth-card,.feature-card,.plan-card,.recharge-card,.profile-card,.settings-section,.history-item,.agent-card,.modal-content {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.sidebar {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-right: 1px solid rgba(255,255,255,0.35) !important;
}
.sidebar-nav-item:hover,.sidebar-nav-item.active {
    background: rgba(124,58,237,0.08) !important;
}
.chat-input-wrap {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}
.toolbar {
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
}
.toolbar-btn {
    background: rgba(255,255,255,0.4) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
.toolbar-btn:hover { background: rgba(255,255,255,0.7) !important; }
.msg-bot .msg-bubble {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
.msg-user .msg-bubble {
    background: rgba(124,58,237,0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.msg-action-wrap {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
.form-input,.chat-input {
    background: rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}
.form-input:focus,.chat-input:focus {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(124,58,237,0.4) !important;
}
.btn-outline {
    background: rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}
.btn-outline:hover { background: rgba(255,255,255,0.7) !important; }
.recharge-tab { background: rgba(255,255,255,0.35) !important; }
.recharge-tab.active {
    background: rgba(255,255,255,0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.filter-btn,.filter-select {
    background: rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
}
.modal-overlay {
    background: rgba(0,0,0,0.15) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.main-wrapper { background: transparent !important; }

/* Markdown styles */
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3,.msg-bubble h4,.msg-bubble h5,.msg-bubble h6 { margin:12px 0 6px;font-weight:600;line-height:1.4;color:var(--text); }
.msg-bubble h1 { font-size:18px; }
.msg-bubble h2 { font-size:16px; }
.msg-bubble h3 { font-size:15px; }
.msg-bubble h4 { font-size:14px; }
.msg-bubble h1:first-child,.msg-bubble h2:first-child,.msg-bubble h3:first-child { margin-top:0; }
.msg-bubble table { width:100%;border-collapse:collapse;margin:8px 0;font-size:13px;border-radius:6px;overflow:hidden; }
.msg-bubble thead { background:rgba(124,58,237,0.06); }
.msg-bubble th { padding:8px 12px;text-align:left;font-weight:600;color:var(--text);border-bottom:2px solid rgba(124,58,237,0.15);font-size:12px; }
.msg-bubble td { padding:7px 12px;border-bottom:1px solid var(--border);color:var(--text2); }
.msg-bubble tr:hover td { background:rgba(124,58,237,0.03); }
.msg-bubble ul,.msg-bubble ol { margin:6px 0;padding-left:20px;color:var(--text2); }
.msg-bubble li { margin:3px 0;line-height:1.6; }
.msg-bubble hr { border:none;height:1px;background:var(--border);margin:12px 0; }
.msg-bubble blockquote { margin:8px 0;padding:8px 14px;border-left:3px solid var(--brand);background:rgba(124,58,237,0.04);border-radius:0 6px 6px 0;color:var(--text2);font-size:13px; }
.msg-bubble strong { color:var(--text);font-weight:600; }
.msg-bubble p { margin:4px 0;line-height:1.7; }
.msg-bubble pre { background:#1e1e2e;color:#cdd6f4;padding:12px 16px;border-radius:8px;overflow-x:auto;margin:8px 0;font-size:13px;line-height:1.5; }
.msg-bubble pre code { background:none;padding:0;color:inherit;font-size:13px; }
.msg-bubble code { font-family:'SF Mono',Menlo,'Consolas',monospace;font-size:12.5px;background:rgba(124,58,237,0.08);padding:2px 5px;border-radius:4px;color:#7c3aed; }
.msg-bubble a { color:var(--brand);text-decoration:none;border-bottom:1px dotted var(--brand); }
.msg-bubble a:hover { border-bottom-style:solid; }

/* ===== Skills Center v7 - position:fixed guarantees top ===== */
#page-skills {
    position: fixed !important;
    top: 0 !important;
    left: var(--sidebar-width) !important;
    width: calc(100vw - var(--sidebar-width)) !important;
    height: 100vh !important;
    overflow: hidden !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}
#page-skills .page-header {
    padding: 12px 32px 6px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
#page-skills .page-header h1 {
    margin: 0 !important;
    padding: 0 !important;
}
#page-skills .page-body {
    padding: 8px 32px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}
#page-skills .page-body > div:first-child {
    margin-top: 0 !important;
}
#page-skills #skillsGrid {
    margin-top: 0 !important;
}