*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --navy:#1A1F5E; --sky:#7BA7D4; --sky-light:#B8D4EC; --white:#fff; --off-white:#F4F6FB; --dark:#0D0F1A; --muted:#6B7280; --body:#374151; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; color:var(--body); background:var(--off-white); min-height:100vh; }
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; height:68px; background:rgba(13,15,26,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(123,167,212,.15); }
.nav-logo { display:inline-flex; align-items:center; background:var(--white); border-radius:999px; padding:.35rem .75rem; }
.nav-logo img { height:36px; display:block; }
.nav-right { display:flex; gap:1.25rem; align-items:center; }
.nav-right a, .nav-right button { color:rgba(255,255,255,.8); font:500 .875rem 'Inter',sans-serif; text-decoration:none; background:none; border:0; cursor:pointer; }
.nav-right a:hover, .nav-right button:hover { color:var(--sky-light); }
main { max-width:860px; margin:0 auto; padding:calc(68px + 2.5rem) 1.25rem 4rem; }
main.narrow { max-width:440px; }
h1 { font-size:1.75rem; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin-bottom:.4rem; }
h2 { font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:.75rem; }
.sub { color:var(--muted); margin-bottom:1.5rem; line-height:1.6; }
.card { background:var(--white); border:1px solid rgba(26,31,94,.08); border-radius:14px; padding:1.5rem; margin-bottom:1.25rem; }
label { display:block; font-size:.8rem; font-weight:600; color:var(--navy); margin:.9rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], textarea { width:100%; padding:.7rem .85rem; border:1px solid #cfd6e4; border-radius:8px; font:400 .95rem 'Inter',sans-serif; color:var(--body); background:#fff; }
input:focus, textarea:focus { outline:2px solid var(--sky); border-color:var(--sky); }
textarea { min-height:140px; font-family:ui-monospace,Menlo,monospace; font-size:.78rem; resize:vertical; }
.hint { font-size:.78rem; color:var(--muted); margin-top:.3rem; line-height:1.5; }
.btn { display:inline-block; background:var(--navy); color:#fff; border:0; border-radius:8px; padding:.7rem 1.4rem; font:600 .9rem 'Inter',sans-serif; cursor:pointer; margin-top:1.1rem; text-decoration:none; }
.btn:hover { background:#272e85; }
.btn:disabled { opacity:.55; cursor:default; }
.btn.secondary { background:#fff; color:var(--navy); border:1px solid #cfd6e4; }
.btn.good { background:var(--ok); } .btn.danger { background:var(--bad); }
.btn.small { padding:.45rem .9rem; font-size:.8rem; margin-top:.5rem; margin-right:.4rem; }
.link { background:none; border:0; color:var(--navy); text-decoration:underline; cursor:pointer; font:500 .85rem 'Inter',sans-serif; padding:0; }
.tabs { display:flex; border-bottom:1px solid #e3e7f0; margin-bottom:1rem; }
.tabs button { flex:1; background:none; border:0; padding:.8rem; font:600 .9rem 'Inter',sans-serif; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.tabs button[aria-selected=true] { color:var(--navy); border-bottom-color:var(--sky); }
.msg { padding:.7rem .9rem; border-radius:8px; font-size:.85rem; margin:.9rem 0 0; line-height:1.5; }
.msg.error { background:#fef2f2; color:var(--bad); } .msg.ok { background:#f0fdf4; color:var(--ok); } .msg.info { background:#eff6ff; color:#1d4ed8; } .msg.warn { background:#fffbeb; color:var(--warn); }
.badge { display:inline-block; padding:.2rem .65rem; border-radius:999px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.badge.pending { background:#fef3c7; color:var(--warn); } .badge.approved { background:#dcfce7; color:var(--ok); }
.badge.rejected, .badge.revoked { background:#fee2e2; color:var(--bad); } .badge.superseded { background:#e5e7eb; color:#4b5563; }
.row { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:640px){ .grid2 { grid-template-columns:1fr; } }
dl.cert { background:var(--off-white); border-radius:8px; padding:.8rem 1rem; margin-top:.6rem; font-size:.82rem; }
dl.cert dt { font-weight:700; color:var(--navy); margin-top:.4rem; } dl.cert dt:first-child { margin-top:0; } dl.cert dd { word-break:break-all; }
.mono { font-family:ui-monospace,Menlo,monospace; font-size:.74rem; }
ul.plain { list-style:none; } ul.plain li { padding:.7rem 0; border-top:1px solid #eef0f6; font-size:.9rem; } ul.plain li:first-child { border-top:0; }
li.unread { font-weight:600; } .when { color:var(--muted); font-size:.75rem; font-weight:400; display:block; }
.steps { margin:.5rem 0 0 1.1rem; line-height:1.7; font-size:.9rem; }
.hidden, [hidden] { display:none !important; }
.tabs-inline { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }