css
.check-box {
display: flex;
align-items: center;
background-color: #2a2a2a;
border: 1px solid #444;
border-radius: 4px;
padding: 5px 10px;
margin-bottom: 10px;
font-family: monospace;
font-size: 0.85em;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.check-label {
background-color: #555;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
margin-right: 8px;
font-weight: bold;
}
.check-success { color: #55ff55; font-weight: bold; }
.check-fail { color: #ff5555; font-weight: bold; }
.check-detail { color: #aaa; margin-left: auto; font-size: 0.9em;}
.biohazard-terminal {
font-family: "Courier New", Courier, monospace;
background-color: #050a05;
background-image:
linear-gradient(rgba(10, 20, 10, 0.95), rgba(10, 20, 10, 0.95)),
repeating-linear-gradient(0deg, transparent, transparent 2px, #1a331a 2px, #1a331a 4px);
color: #a5d6a7;
border: 2px solid #2e7d32;
border-radius: 4px;
padding: 15px;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 0 15px rgba(46, 125, 50, 0.3);
position: relative;
overflow: hidden;
font-size: 14px;
line-height: 1.5;
}
.biohazard-terminal::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(76, 175, 80, 0.4);
animation: scanline 4s linear infinite;
pointer-events: none;
z-index: 10;
}
@keyframes scanline {
0% { top: -5%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 105%; opacity: 0; }
}
.biohazard-terminal strong {
color: #fff;
font-weight: bold;
}
.biohazard-terminal em {
color: #81c784;
font-style: normal;
}
.danger-text, .danger { color: #ef5350 !important; }
.warning-text, .warning { color: #ffca28 !important; }
.highlight { color: #fff; text-shadow: 0 0 5px #4caf50; }
.status-header {
border-bottom: 1px dashed #2e7d32;
padding-bottom: 10px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
gap: 5px;
}
.header-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.header-label {
color: #66bb6a;
font-size: 0.85em;
margin-right: 5px;
}
.header-value {
color: #fff;
font-weight: bold;
}
.status-badge {
background: #1b5e20;
color: #a5d6a7;
padding: 1px 6px;
font-size: 0.75em;
border-radius: 2px;
border: 1px solid #2e7d32;
}
.status-badge.danger { border-color: #c62828; color: #ffcdd2; background: #3e0a0a; }
.main-log {
padding: 10px;
margin-bottom: 20px;
border-left: 3px solid #66bb6a;
background: rgba(46, 125, 50, 0.1);
color: #e8f5e9;
text-align: justify;
}
.panel-section {
margin-bottom: 10px;
border: 1px solid #1b5e20;
background: rgba(0, 0, 0, 0.3);
}
.panel-header {
background: #0f2610;
color: #81c784;
padding: 8px 12px;
cursor: pointer;
font-weight: bold;
list-style: none;
display: flex;
align-items: center;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
.panel-header:hover {
background: #1b381c;
color: #fff;
}
.panel-section[open] .panel-header {
border-bottom: 1px solid #2e7d32;
background: #1b381c;
}
.panel-header::before {
content: "[+]";
display: inline-block;
width: 25px;
color: #4caf50;
font-family: monospace;
}
.panel-section[open] .panel-header::before {
content: "[-]";
color: #ef5350;
}
.panel-header::-webkit-details-marker { display: none; }
.panel-content {
padding: 12px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.grid-item {
display: flex;
justify-content: space-between;
border-bottom: 1px dotted #2e7d32;
padding-bottom: 2px;
}
.grid-item.full-width {
grid-column: 1 / -1;
}
.label { color: #66bb6a; font-size: 0.9em; }
.value { color: #fff; text-align: right; }
.text-block { margin-bottom: 10px; }
.block-label { display: block; margin-bottom: 2px; border-bottom: 1px solid #1b5e20; width: 100%; }
.desc-text { margin: 0; font-size: 0.95em; color: #c8e6c9; }
.detail-list { margin: 5px 0 0 15px; padding: 0; font-size: 0.9em; color: #a5d6a7; }
.meter-container { margin-bottom: 12px; }
.meter-label { display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 3px; }
.progress-bar {
height: 8px;
background: #000;
border: 1px solid #2e7d32;
border-radius: 2px;
overflow: hidden;
}
.progress-fill { height: 100%; background: #4caf50; }
.sanity-fill { background: linear-gradient(90deg, #1b5e20, #66bb6a); }
.virus-fill { background: repeating-linear-gradient(45deg, #c62828, #c62828 5px, #8e0000 5px, #8e0000 10px); }
.sub-status { font-size: 0.85em; margin-top: 2px; font-style: italic; }
.bio-risk-box {
border: 1px solid #c62828;
background: rgba(62, 10, 10, 0.2);
padding: 8px;
margin-bottom: 10px;
}
.risk-header {
color: #ef5350;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #c62828;
margin-bottom: 8px;
font-size: 0.9em;
letter-spacing: 1px;
}
.list-group { margin-bottom: 10px; }
.list-title { color: #81c784; border-bottom: 1px solid #2e7d32; margin-bottom: 5px; font-size: 0.9em; }
.list-item { display: flex; align-items: flex-start; margin-bottom: 4px; font-size: 0.95em; }
.item-icon { margin-right: 8px; min-width: 15px; }
.npc-entry { margin-bottom: 15px; }
.npc-header { display: flex; justify-content: space-between; background: #1b381c; padding: 4px; margin-bottom: 5px; border-left: 3px solid #ef5350; }
.npc-name { color: #fff; font-weight: bold; }
.npc-danger { color: #ef5350; font-weight: bold; }
.scan-line { border: 0; border-top: 1px dashed #2e7d32; margin: 10px 0; opacity: 0.5; }
.macro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 15px; }
.macro-item { text-align: center; }
.macro-label { font-size: 0.7em; color: #81c784; margin-bottom: 2px; }
.macro-bar { height: 40px; width: 10px; background: #000; border: 1px solid #2e7d32; margin: 0 auto; position: relative; }
.macro-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: #66bb6a; }
.water-fill { background: #42a5f5; }
.body-check-box { background: rgba(0,0,0,0.4); padding: 8px; border: 1px solid #1b5e20; margin-bottom: 10px; }
.check-title { text-align: center; color: #fff; border-bottom: 1px solid #2e7d32; margin-bottom: 5px; font-size: 0.85em; }
.check-row { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 0.9em; border-bottom: 1px dotted #1b5e20; padding-bottom: 2px; }
.check-row.multi-line { flex-direction: column; }
.check-part { color: #66bb6a; font-weight: bold; }
.check-details { padding-left: 10px; font-size: 0.9em; color: #a5d6a7; }
.sub-label { color: #81c784; font-size: 0.85em; }
.alert-box {
border: 1px solid #ef5350;
background: rgba(183, 28, 28, 0.1);
padding: 8px;
display: flex;
align-items: center;
color: #ffcdd2;
}
.alert-icon { font-size: 1.5em; margin-right: 10px; color: #ef5350; }
.env-readings { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9em; }
.reading-label { color: #81c784; }
.radar-display {
background:
radial-gradient(circle, transparent 20%, #1b5e20 21%, transparent 22%),
radial-gradient(circle, transparent 40%, #1b5e20 41%, transparent 42%),
linear-gradient(0deg, transparent 49%, #1b5e20 50%, transparent 51%),
linear-gradient(90deg, transparent 49%, #1b5e20 50%, transparent 51%),
#000;
border: 2px solid #2e7d32;
border-radius: 50%;
width: 150px;
height: 150px;
margin: 10px auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.radar-display::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 2px;
background: #4caf50;
transform-origin: 0 0;
animation: radar-spin 3s linear infinite;
box-shadow: 0 0 10px #4caf50;
}
@keyframes radar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.radar-section { z-index: 2; text-align: center; font-size: 0.75em; background: rgba(0,0,0,0.7); padding: 2px; margin: 2px; border-radius: 4px; width: 90%; }
.threat-alert { border: 1px solid #ef5350; padding: 5px; display: flex; align-items: center; background: rgba(62,10,10,0.5); }
.blink-dot { width: 10px; height: 10px; background: #ef5350; border-radius: 50%; margin-right: 10px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.memory-scroll { max-height: 200px; overflow-y: auto; border: 1px solid #1b5e20; }
.memory-scroll::-webkit-scrollbar { width: 6px; }
.memory-scroll::-webkit-scrollbar-thumb { background: #2e7d32; }
.memory-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.memory-table th { background: #1b381c; color: #81c784; padding: 5px; text-align: left; position: sticky; top: 0; }
.memory-table td { padding: 4px; border-bottom: 1px solid #1b381c; color: #a5d6a7; }
.memory-table tr:nth-child(even) { background: rgba(27, 94, 32, 0.1); }
.action-grid { display: grid; gap: 8px; }
.action-btn {
background: #0f2610;
border: 1px solid #2e7d32;
padding: 10px;
color: #fff;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.action-btn:hover {
background: #1b5e20;
border-color: #66bb6a;
box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
transform: translateX(5px);
}
.action-btn::before {
content: ">";
position: absolute;
left: -10px;
opacity: 0;
transition: all 0.2s;
color: #66bb6a;
}
.action-btn:hover::before {
left: 5px;
opacity: 1;
}
.action-btn:hover { padding-left: 20px; }
@media (max-width: 600px) {
.header-row { flex-direction: column; align-items: flex-start; }
.status-badge { align-self: flex-start; margin-top: 2px; }
.info-grid { grid-template-columns: 1fr; }
.macro-grid { grid-template-columns: repeat(4, 1fr); }
}
.thought-chain .panel-content {
background-color: #0E210E;   
color: #C8E6C9;              
}
.thought-chain .panel-content * {
color: inherit;
}
.thought-chain .panel-content .label {
color: #66bb6a;  
}