body { font-family: Arial; text-align: center; margin: 10px auto; max-width: 600px; padding: 10px; background: #1a1f2e; color: #e8eaf0; }
h1 { font-size: 1.5em; color: #e8eaf0; margin-bottom: 10px; }
.data { font-size: 1.2em; margin: 15px 0; }
.value { font-weight: bold; color: #007BFF; }
#timer { font-size: 1.1em; color: #b0b8cc; margin: 15px 0; }
.progress-container { width: 100%; max-width: 400px; height: 12px; background: #2e3650; border-radius: 6px; margin: 10px auto; overflow: hidden; }
#progress-bar { height: 100%; width: 0%; background-color: rgb(244, 67, 54); border-radius: 6px; transition: width 0.5s ease, background-color 0.5s ease; }
.links { margin-top: 20px; font-size: 0.9em; }
.links a { margin: 0 10px; text-decoration: none; color: #4da6ff; }
.links a:hover { text-decoration: underline; }
.history-box { background: #252b3b; border: 1px solid #3a4257; border-radius: 8px; padding: 10px; margin: 15px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.3); text-align: left; }
.history-title { font-size: 0.95em; font-weight: bold; color: #b0b8cc; margin-bottom: 8px; text-align: center; }
table { width: 100%; border-collapse: collapse; font-size: 0.9em; text-align: left; }
table tr:first-child { background: #2e3650; color: #e8eaf0; }
table th { padding: 8px; border-bottom: 2px solid #3a4257; color: #e8eaf0; }
table td { padding: 6px; border-bottom: 1px solid #2e3650; color: #d0d6e8; }
table td:first-child { font-weight: bold; color: #9aa5c0; }