ot {
--red-primary: #BF1E2E;
--red-bright: #FF4757;
--red-dark: #8B0000;
--red-glow: rgba(255, 71, 87, 0.4);
--silver-light: #F0F0F0;
--silver-mid: #C0C0C0;
--silver-dark: #A0A0A0;
--blue-energy: #1E90FF;
--blue-dark: #0056B3;
--bg-deep: #0a0a1a;
--bg-panel: #111a2e;
--bg-card: #16213e;
display: block;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--silver-light);
background: var(--bg-deep);
padding: 1px 0;
}
ot * { box-sizing: border-box; margin: 0; }
ot > h {
display: block;
background: linear-gradient(90deg, var(--red-dark), var(--red-primary) 30%, var(--silver-mid) 70%, var(--silver-dark));
color: white;
font-weight: 700;
padding: 8px 12px;
margin: 10px 0 8px;
border-radius: 0 8px 8px 0;
border-left: 4px solid var(--red-bright);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.5);
position: relative;
overflow: hidden;
}
ot > h::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: linear-gradient(to bottom, transparent, var(--silver-light), transparent);
}
ot > hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
margin: 12px 0;
opacity: 0.7;
}
ot > article {
display: block;
background: var(--bg-card);
padding: 14px;
margin: 10px 0;
border-radius: 6px;
border: 1px solid rgba(191, 30, 46, 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
line-height: 1.7;
}
ot > article p { margin: 0.8em 0; }
ot details {
display: block;
background: var(--bg-panel);
margin: 10px 0;
border-radius: 6px;
border: 1px solid rgba(160, 160, 160, 0.1);
overflow: hidden;
transition: border-color 0.3s;
}
ot details:hover { border-color: rgba(191, 30, 46, 0.4); }
ot details[open] { border-top: 2px solid var(--red-primary); }
ot details > summary {
display: block;
background: linear-gradient(135deg, rgba(191,30,46,0.9), rgba(139,0,0,0.9));
color: var(--silver-light);
font-weight: 600;
padding: 10px 14px;
cursor: pointer;
user-select: none;
position: relative;
transition: all 0.25s ease;
list-style: none;
}
ot details > summary:hover,
ot details[open] > summary {
background: linear-gradient(135deg, rgba(255,71,87,0.95), rgba(191,30,46,0.95));
padding-left: 18px;
}
ot details > summary::after {
content: '▶';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s;
color: var(--silver-mid);
}
ot details[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
ot details h[c] {
display: block;
color: var(--red-bright);
font-size: 0.95em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 12px 10px 6px;
padding-bottom: 4px;
border-bottom: 1px dashed rgba(191, 30, 46, 0.5);
}
ot details p {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 10px;
padding: 8px 12px;
align-items: start;
}
ot details p > i:first-of-type {
grid-column: 1;
text-align: right;
color: var(--silver-mid);
font-weight: 500;
font-style: normal;
white-space: nowrap;
padding-right: 4px;
border-right: 1px solid rgba(255,71,87,0.3);
}
ot details p > i:not(:first-of-type),
ot details p > i:first-of-type ~ * {
grid-column: 2;
color: var(--silver-light);
font-style: normal;
}
ot details h[c="n"] {
background: rgba(139, 0, 0, 0.25);
color: var(--silver-light);
padding: 6px 10px;
margin: 8px 0 0;
border-radius: 4px 4px 0 0;
border-left: 3px solid var(--red-bright);
}
ot i[c="t"] {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--blue-energy), var(--blue-dark) 70%);
color: transparent !important;
font-size: 0;
padding: 0;
margin: 0 6px;
vertical-align: middle;
box-shadow: 0 0 15px var(--blue-energy), inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(255, 255, 255, 0.7);
position: relative;
overflow: visible;
animation: pulse-core 2s infinite alternate;
}
ot i[c="t"]::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
filter: blur(1px);
}
ot i[c="t"]::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid rgba(30, 144, 255, 0.4);
animation: pulse-ring 2s infinite alternate;
}
ot i[c="t"][e^="0"],
ot i[c="t"][e^="1"],
ot i[c="t"][e^="2"] {
background: radial-gradient(circle at 30% 30%, #FF0000, #8B0000 70%) !important;
border-color: rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 0 25px #FF0000, inset 0 0 10px #FFD700, inset 0 -2px 6px rgba(0, 0, 0, 0.7) !important;
animation: blink-red-core 0.5s infinite alternate steps(2) !important;
}
ot i[c="t"][e^="0"]::after,
ot i[c="t"][e^="1"]::after,
ot i[c="t"][e^="2"]::after {
border-color: rgba(255, 0, 0, 0.7) !important;
animation: blink-red-ring 0.5s infinite alternate steps(2) !important;
}
@keyframes pulse-core {
0% { box-shadow: 0 0 15px var(--blue-energy), inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.5); }
100% { box-shadow: 0 0 25px var(--blue-energy), inset 0 2px 4px rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.6); }
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.1); opacity: 0.9; }
}
@keyframes blink-red-core {
0% { background: radial-gradient(circle at 30% 30%, #FF0000, #8B0000 70%); box-shadow: 0 0 25px #FF0000, inset 0 0 10px #FFD700, inset 0 -2px 6px rgba(0,0,0,0.7); }
100% { background: radial-gradient(circle at 30% 30%, #FF4500, #B22222 70%); box-shadow: 0 0 35px #FF8C00, inset 0 0 15px gold, inset 0 -3px 8px rgba(0,0,0,0.8); }
}
@keyframes blink-red-ring {
0% { border-color: rgba(255, 0, 0, 0.7); transform: scale(1); }
100% { border-color: rgba(255, 140, 0, 0.9); transform: scale(1.15); }
}
ot m {
display: inline-block;
background: rgba(255, 71, 87, 0.1);
color: var(--red-bright);
font-weight: 600;
padding: 2px 8px;
margin: 2px 4px 2px 0;
border-radius: 4px;
border: 1px solid rgba(255, 71, 87, 0.3);
}
ot t {
display: block;
font-family: monospace;
font-size: 0.9em;
color: var(--silver-mid);
background: rgba(255,255,255,0.03);
padding: 6px 10px;
margin: 4px 0;
border-radius: 4px;
border-left: 2px solid var(--red-primary);
white-space: pre-wrap;
}
ot a {
display: block;
background: rgba(30, 144, 255, 0.08);
color: var(--silver-light);
padding: 10px 14px;
margin: 6px 0;
border-radius: 6px;
border: 1px solid rgba(191, 30, 46, 0.3);
text-decoration: none;
transition: all 0.25s ease;
position: relative;
}
ot a:hover {
background: rgba(191, 30, 46, 0.15);
border-color: var(--red-primary);
color: var(--silver-light);
transform: translateX(4px);
box-shadow: -4px 0 12px var(--red-glow);
}
ot a::before {
content: '⚡';
margin-right: 8px;
color: var(--red-bright);
}
.stat-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 10px;
padding: 8px 12px;
align-items: start;
}
.stat-grid > p {
grid-column: 1 / -1;
margin: 0;
}
.stat-grid > h[c] {
grid-column: 1 / -1;
margin: 12px 0 6px;
display: block;
color: var(--red-bright);
font-size: 0.95em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-bottom: 4px;
border-bottom: 1px dashed rgba(191, 30, 46, 0.5);
}
.stat-grid > h[c="n"] {
background: rgba(139, 0, 0, 0.25);
color: var(--silver-light);
padding: 6px 10px;
margin: 8px 0 0;
border-radius: 4px 4px 0 0;
border-left: 3px solid var(--red-bright);
}
.stat-grid > i {
text-align: right;
color: var(--silver-mid);
font-weight: 500;
font-style: normal;
white-space: nowrap;
padding-right: 4px;
border-right: 1px solid rgba(255,71,87,0.3);
}
.stat-grid > span {
color: var(--silver-light);
word-break: break-word;
}
.stat-grid > i[c="t"] {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
color: transparent !important;
font-size: 0;
padding: 0;
margin: 0 6px;
vertical-align: middle;
}
.stat-grid m {
}
ot details hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
margin: 12px 0;
opacity: 0.7;
}