Retro CRT Terminal Display

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="crt-497"><div class="screen"><div class="header">SYS_STATUS <span>HP 348/450</span></div><div class="clock-display">08:40</div><div class="sub-date">02.23.2026</div><div class="footer-nav"><span>STAT</span><span>INV</span><span>DATA</span></div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.crt-497 { width: 280px; background: #1c1917; border: 6px solid #292524; border-radius: 20px; padding: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.9); font-family: monospace; color: #22c55e; margin: auto; }
.crt-497 .screen { background: #022c22; border-radius: 10px; padding: 14px; border: 1px solid #065f46; position: relative; overflow: hidden; box-shadow: inset 0 0 15px rgba(34, 197, 94, 0.2); }
.crt-497 .screen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%); background-size: 100% 4px; pointer-events: none; }
.crt-497 .header { display: flex; justify-content: space-between; font-size: 10px; border-bottom: 1px solid #059669; padding-bottom: 4px; font-weight: bold; }
.crt-497 .clock-display { font-size: 38px; font-weight: 900; text-align: center; margin: 12px 0 2px; text-shadow: 0 0 8px #22c55e; letter-spacing: 2px; }
.crt-497 .sub-date { font-size: 11px; text-align: center; opacity: 0.8; margin-bottom: 14px; }
.crt-497 .footer-nav { display: flex; justify-content: space-around; font-size: 10px; font-weight: bold; border-top: 1px solid #059669; padding-top: 6px; }
.crt-497 .footer-nav span { cursor: pointer; transition: opacity 0.2s; }
.crt-497 .footer-nav span:hover { text-shadow: 0 0 6px #22c55e; opacity: 1; }