:root {
    --bg-deep: #020617;
    --bg-side: #0f172a;
    --accent: #3b82f6;
    --border: rgba(148, 163, 184, 0.15);
    --text: #e5e7eb;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }

body { background: var(--bg-deep); color: var(--text); display: flex; height: 100vh; overflow: hidden; }

/* SIDEBAR */
.sidebar {
    width: 240px; background: var(--bg-side);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; transition: 0.3s;
}
.sidebar.collapsed { width: 70px; }

.sidebar-header { padding: 25px; display: flex; align-items: center; gap: 12px; }
.logo-dot { width: 12px; height: 12px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 10px #22c55e; }
.logo-text { font-weight: bold; font-size: 14px; white-space: nowrap; }

.nav-links { list-style: none; padding: 10px; }
.nav-item {
    display: flex; align-items: center; padding: 12px 15px;
    color: #94a3b8; text-decoration: none; border-radius: 8px;
    margin-bottom: 5px; transition: 0.2s; white-space: nowrap;
}
.nav-item i { width: 25px; font-size: 16px; }
.nav-item:hover, .nav-item.active { background: rgba(59, 130, 246, 0.1); color: var(--accent); }

/* MAIN CONTENT */
.main-content { flex-grow: 1; display: flex; flex-direction: column; height: 100vh; }
.app-topbar {
    padding: 15px 30px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px);
    display: flex; align-items: center; border-bottom: 1px solid var(--border);
}

.toggle-btn { background: none; border: none; color: white; cursor: pointer; margin-right: 20px; font-size: 18px; }
.header-info h1 { font-size: 18px; }
.muted { font-size: 12px; color: #64748b; }

.content-wrapper { padding: 30px; overflow-y: auto; flex-grow: 1; scroll-behavior: smooth; }

/* CONCEPT ELEMENTS */
.concept-section { margin-bottom: 50px; }
.section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--accent); }

.card-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
    padding: 30px; border-radius: 15px; border: 1px solid var(--border);
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: var(--bg-side); padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
.card h3 { margin-bottom: 10px; color: var(--accent); font-size: 16px; }
.card ul { padding-left: 20px; font-size: 14px; color: #94a3b8; }

.badge-row { display: flex; gap: 10px; margin-top: 15px; }
.badge { padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: bold; }
.b-buyer { background: #1e40af; color: white; }
.b-seller { background: #065f46; color: white; }
.b-admin { background: #5b21b6; color: white; }

/* TABLE STYLE */
.db-table-container { background: var(--bg-side); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.db-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.db-table th { background: rgba(255,255,255,0.05); padding: 15px; text-align: left; color: var(--accent); }
.db-table td { padding: 15px; border-top: 1px solid var(--border); }
code { background: #000; padding: 2px 6px; border-radius: 4px; color: #f472b6; }

/* COLLAPSE LOGIC */
.sidebar.collapsed .logo-text, .sidebar.collapsed span { display: none; }