:root {
    --bg-base: #000000;
    --node-bg: rgba(20, 20, 23, 0.85);
    --node-border: #27272a;
    --text-main: #fafafa;
    --text-muted: #a1a1aa;
    --text-dark: #52525b;
    --glass-blur: 10px;
    
    --color-core: #c084fc;       /* Purple */
    --color-people: #f472b6;     /* Pink */
    --color-idea: #fb7185;       /* Rose */
    --color-comms: #60a5fa;      /* Blue */
    --color-task: #38bdf8;       /* Sky Blue */
    --color-cal: #34d399;        /* Emerald */
    --color-discovery: #fbbf24;  /* Amber */
    --color-pending: #f87171;    /* Red/Coral */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-base); color: var(--text-main); overflow: hidden; }

#3d-graph { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; }

/* 3D HTML Node Cards */
.node-card {
    background: var(--node-bg);
    border: 1px solid var(--node-border);
    border-radius: 10px;
    padding: 14px;
    width: 240px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--text-main);
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: auto;
    cursor: default;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.node-card:hover { border-color: #52525b; box-shadow: 0 15px 45px rgba(0,0,0,0.95); }

/* Node Type Borders & Shadows */
.node-card.group-core { width: 300px; border-color: rgba(192, 132, 252, 0.4); box-shadow: 0 0 20px rgba(192, 132, 252, 0.1); }
.node-card.group-people { border-color: rgba(244, 114, 182, 0.3); }
.node-card.group-idea { border-color: rgba(251, 113, 133, 0.3); }
.node-card.group-comms { border-color: rgba(96, 165, 250, 0.3); }
.node-card.group-task { border-color: rgba(56, 189, 248, 0.3); }
.node-card.group-cal { border-color: rgba(52, 211, 153, 0.3); }
.node-card.group-discovery { border-color: rgba(251, 191, 36, 0.3); }
.node-card.group-pending { border-color: rgba(248, 113, 113, 0.5); box-shadow: 0 0 20px rgba(248, 113, 113, 0.1); }

.card-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; }
.group-core .card-header { color: var(--color-core); }
.group-people .card-header { color: var(--color-people); }
.group-idea .card-header { color: var(--color-idea); }
.group-comms .card-header { color: var(--color-comms); }
.group-task .card-header { color: var(--color-task); }
.group-cal .card-header { color: var(--color-cal); }
.group-discovery .card-header { color: var(--color-discovery); }
.group-pending .card-header { color: var(--color-pending); }

.card-title { font-size: 14px; font-weight: 600; color: #fff; }
.card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* Meta details like email sender, dates */
.card-meta { font-size: 10px; color: var(--text-dark); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 6px; margin-top: 4px; }

/* Buttons & HITL Actions */
.card-action { 
    margin-top: 6px; padding: 7px 12px; border-radius: 6px; border: none; 
    background: rgba(255,255,255,0.06); color: var(--text-main); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: 0.2s; text-align: center;
}
.card-action:hover { background: rgba(255,255,255,0.12); }
.card-action.primary { background: var(--text-main); color: #000; }
.card-action.primary:hover { background: #e4e4e7; }

/* Human-in-the-Loop Button Grid */
.action-btn-group { display: flex; gap: 6px; margin-top: 6px; }
.action-btn-group button { flex: 1; padding: 7px; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-approve { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.2); }
.btn-approve:hover { background: #34d399; color: #000; }
.btn-reject { background: rgba(248, 113, 113, 0.1); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.2); }
.btn-reject:hover { background: #f87171; color: #000; }

/* Static UI Overlays */
.ui-overlay { position: absolute; top: 0; left: 0; width: 100%; padding: 24px 32px; display: flex; justify-content: space-between; pointer-events: none; z-index: 1000; }
.ui-overlay > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; background: rgba(10,10,10,0.85); padding: 8px 16px; border-radius: 8px; border: 1px solid var(--node-border); backdrop-filter: blur(var(--glass-blur)); }
.brand h2 { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.brand-icon { color: var(--color-core); }

.cmd-trigger { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--node-border); padding: 6px 12px; border-radius: 8px; cursor: text; color: var(--text-muted); font-size: 13px; font-weight: 500; width: 260px; backdrop-filter: blur(var(--glass-blur)); }
.cmd-trigger kbd { margin-left: auto; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; font-size: 11px; color: var(--text-dark); }

.canvas-controls { display: flex; align-items: center; gap: 8px; background: rgba(10,10,10,0.85); padding: 6px; border-radius: 8px; border: 1px solid var(--node-border); backdrop-filter: blur(var(--glass-blur)); }
.icon-btn { background: none; border: none; color: var(--text-muted); width: 28px; height: 28px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-main); }

/* Terminal */
.terminal-overlay { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 620px; z-index: 1000; pointer-events: auto; }
.terminal { background: rgba(10,10,10,0.85); padding: 16px; border-radius: 10px; border: 1px solid var(--node-border); backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 10px 40px rgba(0,0,0,0.9); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); }
.term-line.output { color: var(--color-core); margin-bottom: 8px; }
.term-input-wrapper { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--node-border); padding-top: 12px; margin-top: 12px; }
.prompt { color: var(--color-cal); }
.term-input { background: transparent; border: none; outline: none; color: var(--text-main); font-family: inherit; font-size: 11px; flex-grow: 1; }

/* Modal */
.cmd-palette-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 9999; display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh; }
.cmd-palette-modal { width: 600px; background: #0a0a0a; border: 1px solid var(--node-border); border-radius: 8px; overflow: hidden; }
.cmd-input-wrapper { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--node-border); }
.cmd-input-wrapper input { flex-grow: 1; background: transparent; border: none; outline: none; color: var(--text-main); font-size: 16px; }
.cmd-results { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.cmd-group { font-size: 11px; font-weight: 600; color: var(--text-dark); padding: 8px 12px; text-transform: uppercase; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.cmd-item:hover, .cmd-item.active { background: var(--color-task); }