/* PEM Certificate Viewer — Ocean Blue Dark Theme */
:root {
  --primary:#0984E3;--primary-light:#74B9FF;--primary-dark:#0652DD;
  --accent:#E17055;--accent-light:#fab1a0;
  --bg-base:#0D1B2A;--bg-surface:#132238;--bg-elevated:#1B2D45;
  --bg-glass:rgba(19,34,56,0.65);--bg-glass-border:rgba(116,185,255,0.12);
  --text-primary:#E8F0FE;--text-secondary:#8EAEC4;--text-muted:#5A7A94;
  --border:rgba(116,185,255,0.15);--border-strong:rgba(116,185,255,0.3);
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --shadow:0 4px 24px rgba(0,0,0,0.3);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Fira Code','Consolas',monospace;
  --transition:250ms ease;
  --success:#00B894;--warning:#FDCB6E;--danger:#D63031;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;background-image:radial-gradient(ellipse at 20% 0%,rgba(9,132,227,.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(116,185,255,.06) 0%,transparent 50%)}
.glass-card{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--bg-glass-border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);transition:border-color var(--transition)}
.glass-card:hover{border-color:var(--border-strong)}
.app-header{position:sticky;top:0;z-index:100;background:rgba(13,27,42,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.75rem 1.5rem}
.header-content{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo-group{display:flex;align-items:center;gap:.75rem}
.logo-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(9,132,227,.1);border-radius:var(--radius-sm);border:1px solid rgba(9,132,227,.2)}
.app-header h1{font-size:1.15rem;font-weight:700;background:linear-gradient(135deg,var(--primary-light),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{font-size:.75rem;color:var(--text-muted)}
.container{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;width:100%;flex:1;display:flex;flex-direction:column;gap:1.25rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;font-family:var(--font-sans);font-size:.85rem;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);background:var(--bg-elevated);color:var(--text-primary)}
.btn:hover{border-color:var(--primary);background:rgba(9,132,227,.1)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:var(--primary);color:#fff;box-shadow:0 2px 10px rgba(9,132,227,.3)}
.btn-primary:hover{box-shadow:0 4px 16px rgba(9,132,227,.4);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-secondary)}
.btn-ghost:hover{color:var(--text-primary);background:rgba(116,185,255,.08)}
.btn-sm{padding:.35rem .7rem;font-size:.8rem}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.section-header h2,.glass-card>h2{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;color:var(--primary-light)}
.glass-card>h2{margin-bottom:1rem}
.input-actions{display:flex;gap:.5rem}
.pem-textarea{width:100%;min-height:160px;padding:1rem;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;color:var(--text-primary);background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical;transition:border-color var(--transition)}
.pem-textarea::placeholder{color:var(--text-muted)}
.pem-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(9,132,227,.15)}
.input-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem}
.char-count{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}
.error-banner{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.2rem;background:rgba(214,48,49,.12);border:1px solid rgba(214,48,49,.3);border-radius:var(--radius-sm);color:var(--accent-light);font-size:.85rem;animation:slideIn .3s ease}
.results-container{display:flex;flex-direction:column;gap:1.25rem;animation:fadeIn .4s ease}
.chain-visual{display:flex;align-items:stretch;overflow-x:auto;padding:.5rem 0}
.chain-node{flex:0 0 auto;min-width:180px;max-width:240px;padding:.8rem 1rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
.chain-node:hover,.chain-node.active{border-color:var(--primary);background:rgba(9,132,227,.08)}
.chain-node.active{box-shadow:0 0 0 2px rgba(9,132,227,.3)}
.chain-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.3rem}
.chain-cn{font-size:.82rem;font-weight:500;color:var(--text-primary);word-break:break-word}
.chain-arrow{display:flex;align-items:center;justify-content:center;padding:0 .5rem;color:var(--text-muted);font-size:1.2rem}
.cert-tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}
.cert-tab{padding:.45rem .9rem;font-family:var(--font-sans);font-size:.8rem;font-weight:500;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.cert-tab:hover{border-color:var(--primary);color:var(--text-primary)}
.cert-tab.active{background:rgba(9,132,227,.15);border-color:var(--primary);color:var(--primary-light)}
.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.overview-item{padding:.8rem;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--transition)}
.overview-item:hover{border-color:var(--border-strong)}
.overview-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.25rem}
.overview-value{font-size:.85rem;font-weight:500;color:var(--text-primary);font-family:var(--font-mono);word-break:break-all}
.detail-table{display:flex;flex-direction:column}
.detail-row{display:flex;padding:.55rem 0;border-bottom:1px solid var(--border);gap:1rem;font-size:.85rem}
.detail-row:last-child{border-bottom:none}
.detail-key{flex:0 0 140px;color:var(--text-muted);font-weight:500;font-size:.8rem}
.detail-value{flex:1;color:var(--text-primary);font-family:var(--font-mono);font-size:.82rem;word-break:break-all}
.validity-dates{display:flex;justify-content:space-between;margin-bottom:.5rem}
.date-label{color:var(--text-muted);font-size:.7rem;text-transform:uppercase}
.date-value{font-family:var(--font-mono);font-size:.82rem;color:var(--text-primary)}
.validity-bar{height:8px;background:var(--bg-base);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.validity-fill{height:100%;border-radius:4px;transition:width .8s ease}
.validity-fill.valid{background:linear-gradient(90deg,var(--success),#55efc4)}
.validity-fill.warning{background:linear-gradient(90deg,var(--warning),#ffeaa7)}
.validity-fill.expired{background:linear-gradient(90deg,var(--danger),#ff7675)}
.validity-status{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:var(--radius-xs);font-size:.78rem;font-weight:600;margin-top:.6rem}
.validity-status.valid{background:rgba(0,184,148,.12);color:var(--success);border:1px solid rgba(0,184,148,.3)}
.validity-status.warning{background:rgba(253,203,110,.12);color:var(--warning);border:1px solid rgba(253,203,110,.3)}
.validity-status.expired{background:rgba(214,48,49,.12);color:var(--danger);border:1px solid rgba(214,48,49,.3)}
.validity-remaining{font-size:.78rem;color:var(--text-secondary);margin-top:.4rem}
.usage-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.usage-tag{padding:.3rem .65rem;font-size:.75rem;font-weight:500;background:rgba(9,132,227,.1);color:var(--primary-light);border:1px solid rgba(9,132,227,.2);border-radius:var(--radius-xs)}
.usage-tag.critical{background:rgba(225,112,85,.12);color:var(--accent-light);border-color:rgba(225,112,85,.25)}
.extension-item{padding:.75rem 0;border-bottom:1px solid var(--border)}
.extension-item:last-child{border-bottom:none}
.extension-name{font-size:.82rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.4rem}
.extension-oid{font-size:.72rem;font-family:var(--font-mono);color:var(--text-muted);margin-top:.2rem}
.extension-value{font-size:.8rem;color:var(--text-secondary);margin-top:.3rem;font-family:var(--font-mono);word-break:break-all;padding:.4rem .6rem;background:var(--bg-base);border-radius:var(--radius-xs);border:1px solid var(--border)}
.critical-badge{font-size:.65rem;font-weight:600;text-transform:uppercase;padding:.15rem .4rem;border-radius:3px;background:rgba(225,112,85,.15);color:var(--accent);border:1px solid rgba(225,112,85,.3)}
.raw-field{padding:.5rem 0;border-bottom:1px solid var(--border)}
.raw-field:last-child{border-bottom:none}
.raw-label{font-size:.72rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);margin-bottom:.2rem}
.raw-value{font-family:var(--font-mono);font-size:.78rem;color:var(--text-secondary);word-break:break-all}
.app-footer{text-align:center;padding:1.5rem;font-size:.75rem;color:var(--text-muted);border-top:1px solid var(--border)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:768px){.container{padding:1rem}.glass-card{padding:1rem}.overview-grid{grid-template-columns:1fr}.detail-row{flex-direction:column;gap:.2rem}.detail-key{flex:none}.chain-visual{flex-direction:column;gap:.5rem}.chain-arrow{transform:rotate(90deg);padding:.25rem 0}.chain-node{max-width:100%}.validity-dates{flex-direction:column;gap:.5rem}.input-footer{flex-direction:column;gap:.5rem;align-items:stretch}.input-footer .btn-primary{justify-content:center}}
@media(max-width:480px){.app-header h1{font-size:1rem}.logo-icon{display:none}.section-header{flex-direction:column;align-items:flex-start}}