.demo-container { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 72px); background-color: #0A0A0F; color: white; margin-top: 72px; }
.demo-sidebar { background-color: #111118; padding: 24px; border-right: 1px solid #1F2937; }
.demo-sidebar-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; cursor: pointer; transition: all 0.3s; color: #9CA3AF; margin-bottom: 4px; }
.demo-sidebar-item:hover, .demo-sidebar-item.active { background-color: #1F2937; color: white; }
.demo-main { padding: 32px; overflow-y: auto; }
.demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.demo-stat-card { background-color: #111118; border-radius: 12px; padding: 20px; border: 1px solid #1F2937; }
.demo-stat-value { font-size: 32px; font-weight: 800; color: white; }
.demo-stat-label { font-size: 13px; color: #6B7280; margin-top: 4px; }
.demo-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; background-color: #111118; border-radius: 12px; overflow: hidden; }
.demo-table th { text-align: left; padding: 12px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #6B7280; border-bottom: 1px solid #1F2937; }
.demo-table td { padding: 14px 16px; border-bottom: 1px solid #1F2937; font-size: 14px; }
.demo-table tr { cursor: pointer; transition: background-color 0.3s; }
.demo-table tr:hover { background-color: #1F2937; }
.demo-detail { background-color: #111118; border-radius: 16px; padding: 32px; border: 1px solid #1F2937; margin-bottom: 32px; display: none; }
.demo-detail.active { display: block; }
.demo-feed { background-color: #111118; border-radius: 12px; padding: 16px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 13px; border: 1px solid #1F2937; }
.feed-item { padding: 8px 0; border-bottom: 1px solid #1F2937; opacity: 0; animation: feedIn 0.3s forwards; }
.feed-item:last-child { border-bottom: none; }
.demo-chat { background-color: #111118; border-radius: 16px; padding: 24px; border: 1px solid #1F2937; margin-top: 32px; }
.chat-messages { max-height: 400px; overflow-y: auto; margin-bottom: 16px; display: flex; flex-direction: column; gap: 16px; }
.chat-message { padding: 12px 16px; border-radius: 12px; max-width: 80%; font-size: 14px; }
.chat-user { background-color: #1F2937; margin-left: auto; color: white; }
.chat-ai { background-color: rgba(124, 58, 237, 0.2); border: 1px solid rgba(124, 58, 237, 0.4); margin-right: auto; color: white; }
.chat-input-group { display: flex; gap: 8px; }
.chat-input { flex: 1; background-color: #1F2937; border: none; border-radius: 8px; padding: 12px 16px; color: white; font-size: 14px; }
.chat-input:focus { outline: 1px solid #8FFF08; }
.chat-send { background-color: #8FFF08; color: #080808; border: none; border-radius: 8px; padding: 12px 20px; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }
.chat-send:hover { background-color: #7BE007; }

@keyframes feedIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}