*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;background:#08080B;color:#F4F3EE;padding:20px 16px 60px;max-width:860px;margin:0 auto}

/* Header */
.top{display:flex;justify-content:space-between;align-items:baseline}
.brand{font-size:28px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:10px}
.logo-shield{flex:0 0 auto}
.brand .d{color:#CBFF2E}.brand .g{color:#8C8C99;font-weight:600}
.tag{color:#8C8C99;font-size:12px;display:flex;align-items:center;gap:6px}
.tag .live{width:8px;height:8px;border-radius:50%;background:#CBFF2E;animation:pulse 1.4s ease-in-out infinite}
.sub{color:#8C8C99;font-size:11px;margin:2px 0 16px}

/* Chat Section */
.chat-section{background:#0d0d14;border:1px solid #1e1e2a;border-radius:16px;margin-bottom:14px;display:flex;flex-direction:column;overflow:hidden}
.chat-messages{min-height:200px;max-height:400px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:85%;animation:fadeIn .3s}
.msg.jarvis{align-self:flex-start}
.msg.user{align-self:flex-end}
.msg.system{align-self:center;max-width:95%}
.msg-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.msg.jarvis .msg-name{color:#CBFF2E}
.msg.user .msg-name{color:#8C8C99}
.msg.system .msg-name{color:#f5a623}
.msg-body{font-size:13px;line-height:1.6;padding:10px 14px;border-radius:12px;white-space:pre-wrap;word-wrap:break-word}
.msg.jarvis .msg-body{background:#101018;border:1px solid #1e1e2a;color:#e0e0e8}
.msg.user .msg-body{background:#1a2a0a;border:1px solid #2a3a1a;color:#CBFF2E}
.msg.system .msg-body{background:#1a1510;border:1px solid #2a2518;color:#f5a623;font-size:12px;text-align:center}
.msg.system.danger .msg-body{background:#1a0f0f;border-color:#3a1818;color:#FF5B39}
.msg-time{font-size:9px;color:#555;margin-top:3px}
.msg-typing{color:#8C8C99;font-style:italic}
.chat-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #1e1e2a;background:#0a0a12}
.chat-input input{flex:1;background:#101018;border:1px solid #23232e;border-radius:10px;padding:12px 16px;color:#F4F3EE;font-size:14px;font-family:inherit;outline:none;transition:border .2s}
.chat-input input:focus{border-color:#CBFF2E}
.chat-input button{background:#CBFF2E;color:#08080B;border:none;border-radius:10px;padding:12px 20px;font-weight:700;font-size:14px;cursor:pointer;transition:background .2s}
.chat-input button:hover{background:#b8e629}
.chat-input button:disabled{background:#2a3a1a;color:#555;cursor:wait}

/* VPN Card */
.vpn-card{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#0d0d14;border:2px solid #23232e;border-radius:14px;margin-bottom:12px;transition:border .3s}
.vpn-card.connected{border-color:#3a5300;background:linear-gradient(135deg,#0f1f0a,#0d0d14)}
.vpn-card.disconnected{border-color:#5a2418}
.vpn-left{display:flex;align-items:center;gap:14px}
.vpn-status-dot{width:12px;height:12px;border-radius:50%;background:#555;transition:background .3s,box-shadow .3s}
.vpn-card.connected .vpn-status-dot{background:#CBFF2E;box-shadow:0 0 12px #CBFF2E;animation:pulse 1.6s ease-in-out infinite}
.vpn-card.disconnected .vpn-status-dot{background:#FF5B39}
.vpn-title{font-size:15px;font-weight:700;color:#F4F3EE}
.vpn-detail{font-size:11px;color:#8C8C99;margin-top:2px}
.vpn-toggle{padding:8px 20px;border-radius:10px;border:none;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s}
.vpn-card.connected .vpn-toggle{background:#1a2a0f;color:#CBFF2E;border:1px solid #3a5300}
.vpn-card.connected .vpn-toggle:hover{background:#2a3a1a}
.vpn-card.disconnected .vpn-toggle{background:#CBFF2E;color:#08080B}
.vpn-card.disconnected .vpn-toggle:hover{background:#b8e629}

/* Always-On Protection Status */
.protect-status{width:100%;display:flex;align-items:center;gap:14px;padding:14px 20px;background:#0f1f0a;border:1px solid #3a5300;border-radius:14px;color:#CBFF2E;margin-bottom:12px}
.protect-status .protect-icon{font-size:22px}
.protect-status b{font-size:13px;display:block}
.protect-status small{font-size:11px;color:#8C8C99;font-weight:400}
.protect-badge{background:#CBFF2E;color:#08080B;font-size:10px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:1px;margin-left:auto}
.protect-status.warn{border-color:#f5a623;background:#1a1510}
.protect-status.warn .protect-badge{background:#f5a623}

/* Hero Card */
.hero{border-radius:18px;padding:22px;border:1px solid var(--bd,#3a5300);background:radial-gradient(130% 150% at 0% 0%,var(--bc22,#CBFF2E22),#101018 62%);margin-bottom:14px}
.hero-status{display:flex;align-items:center;gap:12px}
.hero-dot{width:14px;height:14px;border-radius:50%;background:var(--bc,#CBFF2E);box-shadow:0 0 18px var(--bc,#CBFF2E);animation:pulse 1.6s ease-in-out infinite}
.hero-title{font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--bc,#CBFF2E)}
.hero-msg{color:#c9d3de;font-size:13px;margin-top:6px;line-height:1.5}
.score-bar{height:6px;border-radius:3px;background:#1a1a24;margin:10px 0 4px;overflow:hidden}
.score-fill{height:100%;border-radius:3px;transition:width .6s,background .6s}
.score-label{font-size:11px;color:#8C8C99;margin-bottom:12px}
.score-label b{color:var(--bc,#CBFF2E)}

/* Pills */
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pill{border:1px solid #3a5300;background:#0f1f0a;border-radius:12px;padding:10px 6px;text-align:center}
.pill.off{border-color:#5a2418;background:#1a0f0d}
.pill-dot{font-size:13px;margin-bottom:3px;color:#CBFF2E;animation:pulse 1.8s ease-in-out infinite}
.pill.off .pill-dot{color:#FF5B39}
.pill-label{font-weight:800;font-size:11px}
.pill-sub{color:#8C8C99;font-size:9px;margin-top:2px}

/* Section Headers */
.sec{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#8C8C99;font-weight:700;margin:18px 0 8px;display:flex;align-items:center;gap:8px}
.sec .cnt{background:#23232e;color:#F4F3EE;font-size:10px;padding:2px 7px;border-radius:8px;font-weight:600}
.clickable{cursor:pointer;user-select:none}
.clickable:hover{color:#F4F3EE}

/* Chips */
.chip{display:flex;align-items:center;gap:12px;background:#101018;border:1px solid #23232e;border-radius:12px;padding:10px 14px;margin-bottom:6px}
.chip-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.chip-dot.ok{background:#CBFF2E}.chip-dot.warn{background:#f5a623}.chip-dot.bad{background:#FF5B39}
.chip-body{flex:1}
.chip-title{font-size:13px;font-weight:600}
.chip-desc{font-size:11px;color:#8C8C99;margin-top:1px}
.chip-icon{font-weight:800;font-size:11px}
.chip-icon.ok{color:#CBFF2E}.chip-icon.warn{color:#f5a623}.chip-icon.bad{color:#FF5B39}

/* Tables */
.tbl{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:11px}
.tbl th{text-align:left;color:#8C8C99;font-weight:600;padding:6px 10px;border-bottom:1px solid #23232e;font-size:9px;text-transform:uppercase;letter-spacing:1px}
.tbl td{padding:5px 10px;border-bottom:1px solid #16161e;color:#c9d3de;font-family:"SF Mono",Menlo,monospace;font-size:11px}
.tbl tr:hover td{background:#12121a}

/* Collapse */
.collapse{margin-bottom:4px}
.collapse summary{list-style:none}.collapse summary::-webkit-details-marker{display:none}

/* Grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* System Info */
.sysinfo{font-size:11px;color:#8C8C99;line-height:1.9;padding:10px 14px;background:#101018;border:1px solid #23232e;border-radius:12px}
.sysinfo b{color:#F4F3EE}

/* Footer */
.foot{text-align:center;color:#8C8C99;font-size:11px;margin-top:24px;line-height:1.8}
.foot b{color:#F4F3EE}.foot .man{color:#CBFF2E;font-style:italic}

/* Network Trust Card */
.net-trust-card{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#101018;border:1px solid #23232e;border-radius:14px;margin-bottom:12px}
.net-trust-card.trusted{border-color:#3a5300;background:#0f1f0a}
.net-trust-card.untrusted{border-color:#5a2418;background:#1a0f0d}
.net-trust-card.unknown{border-color:#5a4318;background:#1a1510}
.net-trust-left{display:flex;align-items:center;gap:12px}
.net-trust-icon{font-size:20px}
.net-trust-name{font-size:14px;font-weight:700}
.net-trust-detail{font-size:11px;color:#8C8C99;margin-top:2px}
.net-trust-actions{display:flex;gap:6px}
.net-trust-btn{padding:6px 14px;border-radius:8px;border:1px solid #23232e;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}
.net-trust-btn.safe{background:#0f1f0a;color:#CBFF2E;border-color:#3a5300}
.net-trust-btn.safe:hover{background:#1a2a0f}
.net-trust-btn.unsafe{background:#1a0f0d;color:#FF5B39;border-color:#5a2418}
.net-trust-btn.unsafe:hover{background:#2a1a18}

/* Bank Emergency Cards */
.bank-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#101018;border:1px solid #23232e;border-radius:14px;margin-bottom:8px}
.bank-card .bank-icon{font-size:24px}
.bank-card .bank-info{flex:1}
.bank-card .bank-name{font-size:14px;font-weight:700}
.bank-card .bank-note{font-size:11px;color:#8C8C99;margin-top:2px}
.bank-call{background:#FF5B39;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:700;font-size:12px;cursor:pointer;text-decoration:none;display:inline-block}
.bank-call:hover{background:#ff4422}
.bank-card-compact{background:#101018;border:1px solid #23232e;border-radius:14px;padding:14px 18px;margin-bottom:8px}
.bank-top{display:flex;align-items:center;justify-content:space-between}
.bank-left{display:flex;align-items:center;gap:10px}
.bank-left b{font-size:14px}
.bank-nums{display:flex;flex-direction:column;gap:6px}
.bank-num-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#0a0a12;border-radius:8px;font-size:11px}
.bank-num-row b{font-size:11px;color:#F4F3EE}
.bank-call-sm{background:#FF5B39;color:#fff;border:none;border-radius:6px;padding:4px 10px;font-weight:600;font-size:11px;text-decoration:none}
.bank-expand summary{list-style:none;user-select:none}.bank-expand summary::-webkit-details-marker{display:none}

/* Breach Check */
.breach-box{padding:12px}
.breach-input{display:flex;gap:8px;margin-bottom:10px}
.breach-input input{flex:1;background:#101018;border:1px solid #23232e;border-radius:8px;padding:10px 14px;color:#F4F3EE;font-size:13px;outline:none}
.breach-input input:focus{border-color:#CBFF2E}
.breach-input button{background:#CBFF2E;color:#08080B;border:none;border-radius:8px;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer}
.breach-result-ok{color:#CBFF2E;font-size:13px;padding:8px}
.breach-result-bad{color:#FF5B39;font-size:13px;padding:8px}
.breach-list{font-size:12px;color:#c9d3de;margin-top:6px;line-height:1.8}

/* Responsive */
@media(max-width:600px){
  .grid2{grid-template-columns:1fr}
  .pills{grid-template-columns:repeat(2,1fr)}
  .chat-messages{min-height:150px;max-height:300px}
}

/* Animations */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}