main{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 24px;gap:28px}.live-clock-card{width:100%;max-width:680px;background:linear-gradient(135deg,#00a8ff0d,#161b22cc);border:1px solid var(--accent);border-radius:16px;padding:24px;text-align:center;box-shadow:0 8px 32px #00a8ff26;display:flex;flex-direction:column;gap:10px;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s}.live-clock-card:hover{transform:scale(1.01)}.live-clock-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,.05),transparent);pointer-events:none}.live-clock-lbl{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px}.live-clock-time{font-family:JetBrains Mono,monospace;font-size:38px;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(0,168,255,.6)}.layout-grid{width:100%;max-width:680px;display:grid;grid-template-columns:1fr;gap:24px}.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:20px}.card-title{color:#fff;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding-bottom:12px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.input-group{display:flex;gap:8px}.input-group input{flex:1}input[type=number],input[type=datetime-local],input[type=text]{background:var(--bg3);border:1px solid var(--border);color:#fff;padding:12px;border-radius:var(--r);outline:none;font-family:JetBrains Mono,monospace;font-size:14px;transition:border-color .2s}input:focus{border-color:var(--accent)}.results-box{background:#090d1380;border:1px solid var(--border);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;font-family:JetBrains Mono,monospace;font-size:13px}.result-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:8px;align-items:center}.result-row:last-child{border-bottom:none;padding-bottom:0}.result-label{color:var(--muted);font-family:Inter,sans-serif;font-size:12px;font-weight:500}.result-val{color:#fff;text-align:right;user-select:all}.result-val.highlight-val{color:var(--accent);font-weight:700}.snippet-tabs{display:flex;border-bottom:1px solid var(--border);gap:4px}.tab-btn{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.tab-btn.active{border-bottom-color:var(--accent);color:#fff;background:var(--bg3);border-radius:var(--r) var(--r) 0 0}.snippet-content{background:#090d13;border:1px solid var(--border);border-radius:var(--r);padding:16px;font-family:JetBrains Mono,monospace;font-size:13px;color:#fff;overflow-x:auto;position:relative;margin-top:12px}.copy-snippet-btn{position:absolute;top:12px;right:12px;background:var(--bg3);border:1px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:4px;cursor:pointer;font-size:11px;transition:all .2s}.copy-snippet-btn:hover{color:#fff;border-color:var(--accent)}@media(max-width:768px){main{padding:20px 12px;gap:16px}.live-clock-card{padding:16px}.live-clock-card h2{font-size:28px}.layout-grid{width:100%;max-width:100%}.card{padding:16px;gap:16px}.form-row{flex-direction:column;align-items:stretch;gap:12px}.form-row>*{width:100%!important}.result-pane{padding:12px;font-size:13px}}