.flex-row{display:flex}.flex-between{justify-content:space-between}.flex-center{align-items:center}.hidden{display:none}.textarea-explicit{height:200px}.sig-output{margin-top:12px;word-break:break-all;font-size:12px}main{flex:1;display:flex;flex-direction:row;padding:0;min-height:calc(100vh - 60px)}.panel-left{width:35%;border-right:1px solid var(--border);background:var(--bg2);display:flex;flex-direction:column;overflow-y:auto;padding:32px 24px;gap:24px;box-shadow:inset -10px 0 20px -10px #0000004d}.panel-right{flex:1;background:var(--bg);display:flex;flex-direction:column;padding:32px;overflow-y:auto;gap:24px}@media(max-width:1024px){main{flex-direction:column}.panel-left{width:100%;border-right:none;border-bottom:1px solid var(--border);padding:24px;box-shadow:none}.panel-right{padding:24px}}.control-group{display:flex;flex-direction:column;gap:10px}.control-group label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px}textarea{background:var(--bg3);border:1px solid var(--border);color:#fff;padding:16px;border-radius:10px;outline:none;font-family:JetBrains Mono,monospace;font-size:13px;resize:vertical;min-height:160px;transition:all .25s cubic-bezier(.4,0,.2,1);line-height:1.6;box-shadow:0 4px 6px #00000026}textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00a8ff26,0 4px 12px #00000040;background:color-mix(in srgb,var(--bg3) 95%,#fff)}input[type=text]{background:var(--bg3);border:1px solid var(--border);color:#fff;padding:12px 16px;border-radius:8px;outline:none;font-family:JetBrains Mono,monospace;font-size:13px;transition:all .25s ease;box-shadow:0 2px 4px #0000001a}input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00a8ff26;background:color-mix(in srgb,var(--bg3) 95%,#fff)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:300px;gap:20px;color:var(--muted);text-align:center;padding:48px;border:2px dashed var(--border);border-radius:16px;background:#161b2233}.empty-icon{font-size:56px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.empty-state p{font-size:15px;max-width:360px;line-height:1.6}.result-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px;transition:transform .2s ease,box-shadow .2s ease}.result-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}.result-card.card-header-jwt{border-left:4px solid #ff7b72}.result-card.card-payload-jwt{border-left:4px solid #d29922}.result-card-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}.result-card.card-header-jwt .result-card-title span{color:#ff7b72}.result-card.card-payload-jwt .result-card-title span{color:#d29922}.result-content{background:#090d13;border:1px solid var(--border);border-radius:8px;padding:16px;font-family:JetBrains Mono,monospace;font-size:13px;color:#adbac7;white-space:pre-wrap;word-break:break-all;min-height:80px;line-height:1.6;box-shadow:inset 0 2px 8px #0006}.timeline-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:20px}.timeline-bar-wrapper{overflow-x:auto;padding:56px 0 20px;margin:0 -12px}.timeline-bar{position:relative;height:48px;min-width:680px;background:var(--bg3);border-radius:24px;border:1px solid var(--border);margin:0 48px;box-shadow:inset 0 2px 6px #00000080}.timeline-zone{position:absolute;top:0;bottom:0;transition:--left .3s ease,--width .3s ease;left:var(--left);width:var(--width)}.timeline-zone-before{background:linear-gradient(90deg,#d299220d,#d2992226);left:0;border-top-left-radius:24px;border-bottom-left-radius:24px}.timeline-zone-valid{background:linear-gradient(90deg,#2ea04326,#3fb95040)}.timeline-zone-after{background:linear-gradient(90deg,#f8514926,#f851490d);right:0;border-top-right-radius:24px;border-bottom-right-radius:24px}.timeline-marker{position:absolute;top:-12px;height:calc(100% + 24px);width:2px;z-index:2;transition:--pct .5s cubic-bezier(.19,1,.22,1),left .5s cubic-bezier(.19,1,.22,1);left:var(--pct)}.marker-line{position:absolute;top:12px;bottom:12px;width:2px}.timeline-marker-iat .marker-line{background:#58a6ff}.timeline-marker-nbf .marker-line{background:#d29922}.timeline-marker-exp .marker-line{background:#f85149}.timeline-marker-now .marker-line{background:#fff;box-shadow:0 0 10px #fffc,0 0 20px var(--accent)}.timeline-marker:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--bg2);border:3px solid}.timeline-marker-iat:after{border-color:#58a6ff}.timeline-marker-nbf:after{border-color:#d29922}.timeline-marker-exp:after{border-color:#f85149}.timeline-marker-now:after{width:16px;height:16px;border-color:#fff;background:var(--accent);box-shadow:0 0 8px #fff;animation:glow-pulse 2s infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 4px #fff,0 0 8px var(--accent)}50%{box-shadow:0 0 10px #fff,0 0 24px var(--accent)}}.marker-label{position:absolute;top:-48px;transform:translate(-50%);text-align:center;font-size:10px;line-height:1.4;white-space:nowrap;background:#0d1117d9;backdrop-filter:blur(4px);border:1px solid var(--border);padding:4px 8px;border-radius:6px;box-shadow:0 4px 12px #00000040}.marker-label-title{font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.timeline-marker-iat .marker-label-title{color:#58a6ff}.timeline-marker-nbf .marker-label-title{color:#d29922}.timeline-marker-exp .marker-label-title{color:#f85149}.timeline-marker-now .marker-label-title{color:#fff}.marker-label-time{color:var(--muted);font-size:9px;font-family:monospace}.marker-now-arrow{position:absolute;top:-12px;left:50%;transform:translate(-50%);color:#fff;font-size:10px;text-shadow:0 0 4px var(--accent);animation:bounce-arrow 1.2s infinite}@keyframes bounce-arrow{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-4px)}}.timeline-info{display:flex;gap:20px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--border);font-size:12px}.timeline-info-item{display:flex;align-items:center;gap:8px;color:var(--text)}.timeline-info-dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 4px #00000080}.timeline-info-dot.warning{background:#d29922}.timeline-info-dot.error{background:#f85149}.timeline-info-dot.success{background:#3fb950}.timeline-info-dot.muted{background:#8b949e}.timeline-error{background:#f851491a;border:1px solid var(--error);color:#f85149;padding:12px 16px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px}.status-badge{font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 4px #00000026}.status-badge.valid{background:#2ea04326;color:#3fb950;border:1px solid rgba(46,160,67,.3)}.status-badge.expired{background:#f8514926;color:#f85149;border:1px solid rgba(248,81,73,.3)}.status-badge.pending{background:#d2992226;color:#d29922;border:1px solid rgba(210,153,34,.3)}.status-badge.no-exp{background:#8b949e26;color:#8b949e;border:1px solid rgba(139,148,158,.3)}.signature-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;border-left:4px solid #58a6ff}.signature-banner{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:8px;border:1px solid var(--border);font-weight:600;font-size:14px;transition:all .25s ease;box-shadow:0 4px 10px #0000001a}.signature-banner.verified{background:#2ea04314;border-color:var(--success);color:#3fb950;box-shadow:0 0 15px #2ea04326}.signature-banner.invalid{background:#f8514914;border-color:var(--error);color:#f85149;box-shadow:0 0 15px #f8514926}.signature-banner.unsigned{background:#d2992214;border-color:var(--warning);color:#d29922}.signature-banner.no-secret{background:#8b949e0d;border-color:var(--border);color:var(--muted)}.json-key{color:#79c0ff}.json-string{color:#a5d6ff}.json-number{color:#79c0ff}.json-bool{color:#ff7b72}.json-null{color:#8b949e}.signature-icon-svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}