@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#fafafb;
  --border:#e4e6eb;
  --text:#15171c;
  --muted:#6b7280;
  --muted-2:#9aa0ab;
  --accent:#d3283f;
  --accent-bg:#fdeced;
  --accent-border:#f6c9ce;
  --shadow: 0 1px 2px rgba(20,22,28,0.04), 0 12px 32px -16px rgba(20,22,28,0.12);
  --radius:14px;
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:#0b0c0f;
  --surface:#141519;
  --surface-2:#18191e;
  --border:#26282f;
  --text:#eceef1;
  --muted:#9297a3;
  --muted-2:#666b76;
  --accent:#ef4a5a;
  --accent-bg:#2a1518;
  --accent-border:#4a2027;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 40px -20px rgba(0,0,0,0.6);
  color-scheme: dark;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition: background .25s ease, color .25s ease;
}

.mono{ font-family:'IBM Plex Mono', monospace; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1040px;
  width:100%;
  margin:0 auto;
  padding:22px 24px;
}

.brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{
  width:26px; height:26px; border-radius:7px;
  background:var(--surface-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:500; color:var(--muted);
}
.brand-name{ font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.brand-sub{ font-size:12px; color:var(--muted-2); display:none; }

.theme-toggle{
  width:34px; height:34px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--muted);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--muted-2); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.card{
  width:100%;
  max-width:520px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation: rise .4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.card-top{
  height:3px;
  background:var(--accent);
}

.card-body{ padding:32px 30px 8px; }

.status-row{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.status-icon{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.status-icon svg{ width:18px; height:18px; }
.status-code{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--accent);
  letter-spacing:0.02em;
}

h1{
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.35;
  margin-bottom:10px;
}

.lede{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:26px;
}
.lede b{ color:var(--text); font-weight:500; }

.divider{ height:1px; background:var(--border); margin:0 -30px; }

.details{ padding:6px 0 20px; }
.row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0;
  font-size:13px;
  gap:16px;
}
.row .k{ color:var(--muted); }
.row .v{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--text); text-align:right; }
.row .v.copy{ cursor:pointer; border-bottom:1px dashed var(--muted-2); }
.row .v.copy:hover{ color:var(--accent); border-color:var(--accent); }

.actions{ padding:22px 0 28px; }
.actions-title{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--muted-2); margin-bottom:14px;
}
.action{ display:flex; gap:12px; padding:11px 0; }
.action + .action{ border-top:1px solid var(--border); }
.action-icon{
  width:28px; height:28px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.action-icon svg{ width:14px; height:14px; color:var(--muted); }
.action p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.action p b{ color:var(--text); font-weight:500; }
.action a{ color:var(--text); font-weight:500; text-decoration:none; border-bottom:1px solid var(--border); }
.action a:hover{ color:var(--accent); border-color:var(--accent); }

.card-footer{
  padding:16px 30px;
  background:var(--surface-2);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; color:var(--muted-2);
  gap:10px;
  flex-wrap:wrap;
}

.pagefoot{
  text-align:center;
  padding:0 24px 26px;
  font-size:12px;
  color:var(--muted-2);
}

@media (min-width:640px){
  .brand-sub{ display:block; }
  .brand-sub::before{ content:"·"; margin:0 8px; color:var(--border); }
}

@media (max-width:420px){
  .card-body{ padding:26px 20px 6px; }
  .divider{ margin:0 -20px; }
  .card-footer{ padding:14px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .card{ animation:none; }
}