:root { --bg: #0b1220; --panel: #111a2e; --line: #1f2d4a; --ink: #e6f0ff; --mute: #8aa0c4; --cyan: #22d3ee; --blue: #2f7cf6; --orange: #ff8a1b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(1200px 500px at 20% -10%, #14305a 0, transparent 60%), var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; }
.tg-top { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: rgba(10, 18, 34, .8); }
.tg-top h1 { font-size: 17px; margin: 0; letter-spacing: .2px; }
.tg-grow { flex: 1; }
.tg-state { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: rgba(34, 211, 238, .15); color: var(--cyan); border: 1px solid rgba(34, 211, 238, .35); }
.tg-state.off { background: rgba(255, 138, 27, .13); color: var(--orange); border-color: rgba(255, 138, 27, .4); }
.tg-btn { border: 1px solid var(--line); background: linear-gradient(#1b2a4a, #14213b); color: var(--ink); padding: 7px 14px; border-radius: 10px; font: inherit; cursor: pointer; }
.tg-btn:hover { border-color: var(--cyan); }
.tg-btn.tg-main { background: linear-gradient(#5ee3ff, #1c7ee8); border-color: #7ae8ff; color: #04223f; font-weight: 600; }
.tg-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 16px; padding: 16px 18px; }
.tg-pane { min-width: 0; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; overflow: auto; }
.tg-pane h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--mute); }
.tg-pane h2 small { text-transform: none; letter-spacing: 0; margin-left: 6px; font-weight: 400; }
#tg-rules { flex: 1; min-height: 160px; resize: none; background: #0a1324; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#tg-rules:focus { outline: 2px solid rgba(34, 211, 238, .5); }
.tg-help { font-size: 12.5px; color: var(--mute); }
.tg-help p { margin: 3px 0; }
code { background: #0a1324; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; color: #9fe9ff; font: 12px ui-monospace, Menlo, Consolas, monospace; }
.tg-pods { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.tg-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: #0d172b; border: 1px solid var(--line); text-align: center; }
.tg-pod.bad { border-color: #7a2d2d; }
.tg-orb { width: 46px; height: 46px; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 255, 255, 0) 36%), radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--pc) 70%, #fff) 0, var(--pc) 55%, color-mix(in srgb, var(--pc) 55%, #000) 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 4px 14px color-mix(in srgb, var(--pc) 45%, transparent); opacity: .55; transition: opacity .3s, transform .3s; }
.tg-pod.fire .tg-orb { opacity: 1; animation: tg-pulse .9s ease-out; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 0 26px 6px color-mix(in srgb, var(--pc) 70%, transparent); }
@keyframes tg-pulse { 0% { transform: scale(.8); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
.tg-pod b { font-size: 12px; }
.tg-pod span { font-size: 11px; color: var(--mute); word-break: break-word; }
.tg-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font: 12px ui-monospace, Menlo, Consolas, monospace; max-height: 100%; overflow: auto; }
.tg-log li { padding: 5px 8px; border-radius: 8px; background: #0d172b; color: #bcd0ee; }
.tg-log li i { color: var(--mute); font-style: normal; margin-right: 8px; }
.tg-log li.err { color: #ffb48a; }
@media (max-width: 760px) { .tg-wrap { grid-template-columns: 1fr; } }
