:root { --bg-dark: #070a14; --bg-panel: rgba(10,14,24,0.85); --grid-color: rgba(0, 255, 255, 0.03); --accent-cyan: #00ffff; --accent-pink: #ff00ff; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans JP', 'Orbitron', sans-serif; background-color: var(--bg-dark); color: #fff; height: 100vh; overflow: hidden; position: relative; display: flex; flex-direction: column;}

/* Background Grid */
.grid-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 40px 40px; z-index: -1; transform: perspective(500px) rotateX(60deg) scale(2.5); transform-origin: center bottom; opacity: 0.8; pointer-events: none;}

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid #1a2340; background: rgba(5,10,20,0.95); z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,0.5);}
.brand-text { font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 10px rgba(0,255,255,0.3); }
.os { color: var(--accent-pink); }

.nav-center { display: flex; align-items: center; gap: 20px; }
.model-select-wrapper { display: flex; align-items: center; background: #0f172a; border: 1px solid #1e293b; padding: 5px 15px; border-radius: 20px; gap: 8px;}
.status-dot { width: 8px; height: 8px; background: #a855f7; border-radius: 50%; box-shadow: 0 0 8px #a855f7; }
.icon-monitor { font-size: 14px; }
.model-select { background: transparent; color: #fff; border: none; font-family: inherit; font-size: 12px; font-weight: 700; outline: none; cursor: pointer;}
.agent-icons { display: flex; gap: 10px; }
.agent-icon { width: 32px; height: 32px; border-radius: 50%; background: #0f172a; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; border: 1px solid #1e293b; transition: 0.2s;}
.agent-icon:hover { background: #1e293b; }
.agent-icon.active { border-color: #a855f7; background: rgba(168, 85, 247, 0.2); box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);}

.nav-right { display: flex; align-items: center; gap: 20px; }
.sync-status { font-size: 11px; display: flex; align-items: center; gap: 10px; font-family: 'Noto Sans JP', sans-serif;}
.port-info { color: #64748b; }
.badge-online { border: 1px solid #10b981; color: #10b981; padding: 2px 8px; border-radius: 4px; background: rgba(16, 185, 129, 0.1); font-weight: 700;}
.btn-icon { background: transparent; border: none; color: #64748b; font-size: 18px; cursor: pointer; transition: 0.2s; }
.btn-icon:hover { color: #fff; }

.layout { display: flex; flex: 1; overflow: hidden; z-index: 10; }

/* Hero Panel & Agent Card */
.hero-panel { flex: 0 0 28%; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #1a2340; background: rgba(5,10,20,0.85); backdrop-filter: blur(10px); padding: 30px;}
.agent-status-card { width: 100%; background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 20px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.agent-info { display: flex; align-items: center; gap: 15px; }
.agent-emoji { width: 48px; height: 48px; background: #1e293b; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 1px solid #334155;}
.agent-info h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px 0;}
.agent-info small { font-size: 10px; color: var(--accent-cyan); font-family: 'Orbitron', sans-serif; letter-spacing: 1px;}
.badge-standby { background: rgba(51, 65, 85, 0.8); color: #cbd5e1; font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 700;}
.card-details { display: flex; justify-content: space-between; border-top: 1px solid #1e293b; border-bottom: 1px solid #1e293b; padding: 15px 0; margin-bottom: 15px;}
.detail-block label { display: block; font-size: 10px; color: #64748b; margin-bottom: 5px;}
.detail-block p { font-size: 13px; font-weight: 700; margin: 0;}
.cpu-load .cpu-header { display: flex; justify-content: space-between; font-size: 10px; color: #64748b; margin-bottom: 8px;}
.progress-bar { width: 100%; height: 6px; background: #1e293b; border-radius: 3px; overflow: hidden;}
.progress-bar .fill { height: 100%; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan);}

.robot-head { width: 80px; height: 100px; background: #1a1a1a; border-radius: 20px; position: relative; border: 2px solid transparent; background-clip: padding-box; margin-bottom: 20px; box-shadow: 0 0 30px rgba(0,255,255,0.2); }
.robot-head::before { content: ''; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink)); border-radius: 22px; z-index: -1; }
.eye { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; top: 50%; box-shadow: 0 0 10px #fff; }
.eye.left { left: 20px; } .eye.right { right: 20px; }
.brand-title { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 900; letter-spacing: 4px; margin-bottom: 30px; }
.btn-rainbow { width: 100%; background: #0f172a; color: #fff; padding: 15px 0; font-size: 12px; font-weight: 700; border: 2px solid transparent; border-radius: 8px; cursor: pointer; position: relative; background-clip: padding-box; text-transform: uppercase; z-index: 1; letter-spacing: 2px; font-family: 'Orbitron', sans-serif;}
.btn-rainbow::before { content: ''; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); border-radius: 10px; z-index: -1; opacity: 0.8; }

/* Config Panel */
.config-panel { flex: 0 0 42%; background: rgba(10,15,25,0.85); padding: 30px; overflow-y: auto; border-right: 1px solid #1a2340; backdrop-filter: blur(10px); }
.config-title { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 900; margin-bottom: 25px; border-bottom: 1px solid #1a2340; padding-bottom: 15px; color: var(--accent-cyan); display: flex; align-items: center; justify-content: space-between;}
.badge { background: var(--accent-pink); color: #fff; font-size: 10px; padding: 4px 8px; border-radius: 4px; letter-spacing: 1px;}
.form-section { margin-bottom: 25px; background: rgba(255,255,255,0.01); padding: 20px; border: 1px solid #1e293b; border-radius: 8px;}
.form-section h3 { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--accent-pink); margin-bottom: 15px; letter-spacing: 2px;}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; color: #94a3b8; margin-bottom: 8px; letter-spacing: 0.5px;}
.form-group input[type="text"], .form-group textarea, .cyber-select { width: 100%; background: #0f172a; border: 1px solid #334155; color: #fff; padding: 12px; border-radius: 6px; font-family: inherit; font-size: 12px; outline: none; transition: 0.2s;}
.form-group input:focus, .form-group textarea:focus, .cyber-select:focus { border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(0,255,255,0.1); }
.param-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.param-grid input { width: 100%; background: #0f172a; border: 1px solid #334155; color: var(--accent-cyan); padding: 10px; text-align: center; border-radius: 6px; font-family: 'Orbitron', sans-serif; font-size: 12px;}
.checkbox-group { display: flex; flex-direction: column; gap: 10px; }
.checkbox-group label { font-size: 11px; color: #cbd5e1; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; margin: 0;}
.btn-save { background: rgba(0,255,255,0.1); color: var(--accent-cyan); border: 1px solid var(--accent-cyan); padding: 15px; font-weight: 900; border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 12px; width: 100%; letter-spacing: 2px; text-transform: uppercase; font-family: 'Orbitron', sans-serif;}
.btn-save:hover { background: var(--accent-cyan); color: #000; box-shadow: 0 0 20px rgba(0,255,255,0.4);}

/* Chat Panel */
.chat-panel { flex: 0 0 30%; display: flex; flex-direction: column; background: var(--bg-panel); backdrop-filter: blur(10px); }
.chat-history { flex: 1; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.msg { padding: 15px; border-radius: 8px; line-height: 1.6; font-size: 12px; letter-spacing: 0.5px; max-width: 90%; }
.msg.agent { background: rgba(0,255,255,0.05); border-left: 2px solid var(--accent-cyan); color: #e2e8f0; align-self: flex-start; }
.msg.user { background: rgba(255,0,255,0.05); border-right: 2px solid var(--accent-pink); color: #e2e8f0; align-self: flex-end; text-align: right; }
.chat-input-area { padding: 20px; border-top: 1px solid #1e293b; display: flex; gap: 10px; background: rgba(0,0,0,0.5); }
.chat-input-area input { flex: 1; background: #0f172a; border: 1px solid #334155; padding: 12px 15px; color: #fff; outline: none; border-radius: 6px; font-family: inherit; font-size: 12px;}
.chat-input-area input:focus { border-color: var(--accent-pink); }
.btn-send { background: var(--accent-pink); color: #fff; border: none; padding: 0 20px; font-weight: 700; cursor: pointer; border-radius: 6px; transition: 0.2s; font-size: 12px;}
.btn-send:hover { background: #d946ef; }