:root { --titan-red: #B01E23; --bg: #050505; --green: #00ff41; }
body { background: var(--bg); color: white; font-family: 'Roboto Mono', monospace; margin: 0; }

.titan-logo-css { 
    width: 60px; height: 60px; background: var(--titan-red); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--titan-red);
}
.titan-logo-css::after { content: "Ω"; color: white; font-size: 35px; font-weight: bold; }
.logo-small { transform: scale(0.6); cursor: pointer; }
.logo-large { transform: scale(1.5); margin-bottom: 30px; }

header { background: #000; border-bottom: 2px solid var(--titan-red); padding: 15px; position: sticky; top: 0; z-index: 100; }
.header-top { display: flex; justify-content: space-between; align-items: center; }
.brand-info h1 { font-family: 'Orbitron'; font-size: 14px; margin: 0; }
.version-tag { font-size: 10px; color: #666; }

.tabs-container { display: flex; overflow-x: auto; gap: 10px; padding: 10px 0; }
.tab-btn { background: #111; color: #555; border: 1px solid #222; padding: 8px 15px; border-radius: 5px; white-space: nowrap; }
.tab-btn.active { background: var(--titan-red); color: white; }

.grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; }
.item-card { background: #111; border: 1px solid #222; padding: 15px; border-radius: 10px; font-size: 12px; }

.tracker-card { background: #111; margin: 15px; padding: 15px; border-radius: 10px; border-left: 4px solid var(--titan-red); }
input { background: #000; border: 1px solid #333; color: white; padding: 10px; width: 100%; box-sizing: border-box; }

#cart-bar { position: fixed; bottom: 0; width: 100%; background: #000; border-top: 2px solid var(--titan-red); padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.cart-hidden { display: none !important; }
.wa-btn { background: #25D366; color: white; border: none; padding: 10px; border-radius: 5px; font-weight: bold; font-size: 10px; }
.tech-btn { background: var(--titan-red); }

#splash { position: fixed; inset: 0; background: black; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loader-bar { width: 200px; height: 2px; background: #222; margin-top: 20px; }
.progress { height: 100%; background: var(--titan-red); width: 0%; animation: load 3s forwards; }
@keyframes load { to { width: 100%; } }