/* JWT Visualizer & Decoder — Styles
   Theme: Cyber-blue / dark mode with light toggle
   Monospace for token data, Inter for UI */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#00D4FF;--primary-hover:#33DFFF;--primary-glow:rgba(0,212,255,0.2);
  --header-color:#FF6B6B;--payload-color:#00D4FF;--sig-color:#FBBF24;
  --bg:#0B0E14;--bg-surface:#131720;--bg-elevated:#1A1F2E;
  --border:rgba(0,212,255,0.12);--border-focus:rgba(0,212,255,0.4);
  --text:#E2E8F0;--text-muted:#8B949E;--text-dim:#4A5568;
  --success:#22C55E;--warning:#F59E0B;--error:#EF4444;
  --radius:10px;--radius-sm:6px;--transition:200ms ease;
  --mono:'JetBrains Mono','Courier New',monospace;
  --sans:'Inter',system-ui,sans-serif;
}
[data-theme="light"]{
  --bg:#F7F8FA;--bg-surface:#FFFFFF;--bg-elevated:#EDF2F7;
  --border:rgba(0,0,0,0.1);--border-focus:rgba(0,100,200,0.3);
  --text:#1A202C;--text-muted:#4A5568;--text-dim:#A0AEC0;
  --primary:#0077CC;--primary-hover:#0099FF;--primary-glow:rgba(0,119,204,0.15);
}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.header{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:0.75rem 1.5rem}
.header-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:0.6rem}
.logo-icon{color:var(--primary);filter:drop-shadow(0 0 6px var(--primary-glow))}
.logo h1{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--primary),#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-right{display:flex;align-items:center;gap:0.75rem}
.badge{font-size:0.68rem;font-weight:600;padding:0.2rem 0.6rem;border:1px solid var(--success);border-radius:99px;color:var(--success);text-transform:uppercase;letter-spacing:0.05em}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}
.icon-btn:hover{border-color:var(--primary);color:var(--primary)}

.main{flex:1;padding:1.5rem;max-width:900px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.25rem}

.section-label{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:0.4rem;display:block}

.token-input{font-family:var(--mono);font-size:0.85rem;line-height:1.5;background:var(--bg-surface);color:var(--primary);border:1px solid var(--border);border-radius:var(--radius);padding:0.875rem 1rem;width:100%;resize:vertical;transition:border-color var(--transition);word-break:break-all}
.token-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-glow)}
.token-input::placeholder{color:var(--text-dim);font-size:0.8rem}

.input-actions{display:flex;gap:0.5rem;margin-top:0.5rem;flex-wrap:wrap}
.primary-btn{font-family:var(--sans);font-size:0.85rem;font-weight:600;padding:0.6rem 1.25rem;border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary),#7C3AED);color:#fff;cursor:pointer;transition:all var(--transition);box-shadow:0 4px 12px var(--primary-glow)}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--primary-glow)}
.secondary-btn{font-family:var(--sans);font-size:0.82rem;font-weight:500;padding:0.5rem 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}
.secondary-btn:hover{border-color:var(--primary);color:var(--primary)}
.text-btn{font-family:var(--sans);font-size:0.78rem;background:none;border:none;color:var(--text-dim);cursor:pointer;transition:color var(--transition)}
.text-btn:hover{color:var(--error)}

.decoded-output{display:flex;flex-direction:column;gap:1rem;animation:fadeIn 300ms ease}
.token-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 1rem;border-bottom:1px solid var(--border)}
.section-header h2{font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em}
.header-color h2{color:var(--header-color)}
.payload-color h2{color:var(--payload-color)}
.sig-color h2{color:var(--sig-color)}
.section-tag{font-family:var(--mono);font-size:0.7rem;padding:0.15rem 0.5rem;border-radius:4px;background:var(--bg-elevated);color:var(--text-dim)}

.json-block{font-family:var(--mono);font-size:0.82rem;line-height:1.6;padding:1rem;margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.header-bg{background:rgba(255,107,107,0.04);color:var(--header-color)}
.payload-bg{background:rgba(0,212,255,0.04);color:var(--payload-color)}
.sig-bg{background:rgba(251,191,36,0.04);color:var(--sig-color)}

.claims-list{padding:0.5rem 1rem;display:flex;flex-direction:column;gap:0.25rem}
.claim-row{font-size:0.8rem;display:flex;gap:0.5rem;padding:0.25rem 0;border-bottom:1px solid var(--border)}
.claim-row:last-child{border-bottom:none}
.claim-key{font-family:var(--mono);font-weight:600;color:var(--text-muted);min-width:40px}
.claim-desc{color:var(--text-dim);font-style:italic}

.verify-row{display:flex;gap:0.5rem;padding:0.75rem 1rem}
.verify-input{font-family:var(--mono);font-size:0.82rem;flex:1;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.5rem 0.75rem;transition:border-color var(--transition)}
.verify-input:focus{outline:none;border-color:var(--border-focus)}
.verify-result{padding:0.5rem 1rem;font-size:0.82rem;font-weight:500}

.exp-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.exp-section h3{font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-bottom:0.75rem}
.exp-display{font-family:var(--mono);font-size:0.85rem}
.exp-valid{color:var(--success)}
.exp-expired{color:var(--error)}

.history-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.section-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.section-header-row h3{font-size:0.85rem;font-weight:600;color:var(--text-muted)}
.history-list{display:flex;flex-direction:column;gap:0.4rem}
.history-item{font-family:var(--mono);font-size:0.75rem;padding:0.4rem 0.6rem;background:var(--bg);border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all var(--transition)}
.history-item:hover{color:var(--primary);border-left:2px solid var(--primary)}
.empty-state{text-align:center;color:var(--text-dim);font-size:0.85rem;padding:1rem}

.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-elevated);color:var(--text);padding:0.6rem 1.25rem;border-radius:var(--radius);border:1px solid var(--border);font-size:0.82rem;font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transition:all 300ms ease;z-index:999}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

.footer{text-align:center;padding:0.75rem 1.5rem;border-top:1px solid var(--border);color:var(--text-dim);font-size:0.75rem}

.hidden{display:none!important}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){
  .main{padding:0.75rem}
  .input-actions{flex-direction:column}
  .primary-btn,.secondary-btn{width:100%}
  .verify-row{flex-direction:column}
}