/* Management Static · Light theme · Brand palette (shared with runtime)
   #E42369 magenta · #F77BA8 pink · #FFFFFF white · #F0DC7A yellow · #B6E0EB sky · #2F133C ink
   Font: Domine (display/serif) · Noto Sans Thai (body) · Space Mono (mono)
*/
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --brand-magenta:#E42369;
  --brand-pink:#F77BA8;
  --brand-white:#FFFFFF;
  --brand-yellow:#F0DC7A;
  --brand-sky:#B6E0EB;
  --brand-ink:#2F133C;

  --bg:#FFFFFF;
  --surface:#FDF6F9;
  --surface2:#FBF4EC;
  --panel:#FFFFFF;
  --text1:#2F133C;
  --text2:#5C3F60;
  --text3:#8C6B90;
  --text4:#B89FBC;
  --border:rgba(47,19,60,0.10);
  --border-strong:rgba(47,19,60,0.22);

  --st-ready-text:#0E7C56;    --st-ready-bg:#D7F4E7;
  --st-progress-text:#1D7B9B; --st-progress-bg:#DFF1F8;
  --st-partial-text:#A67C18;  --st-partial-bg:#FBF1C8;
  --st-blocked-text:#E42369;  --st-blocked-bg:#FCE1EC;
  --st-none-text:#8C6B90;     --st-none-bg:#F0E8F2;
  --p0-text:#E42369; --p0-bg:#FCE1EC;
  --p1-text:#A67C18; --p1-bg:#FBF1C8;
  --p2-text:#5C3F60; --p2-bg:#F0E8F2;
  --mode-text:#1D7B9B; --mode-bg:#DFF1F8;

  --teal:#0E7C56;
  --blue:#1D7B9B;
  --purple:#6B2C73;
  --amber:#A67C18;
  --rose:#E42369;
  --pink:#E42369;
  --green:#0E7C56;
  --orange:#E42369;
  --cyan:#1D7B9B;
  --indigo:#6B2C73;

  --serif:'Domine','Noto Serif Thai',Georgia,serif;
  --sans:'Noto Sans Thai','Domine',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'Space Mono','SF Mono',Menlo,monospace;
  --bebas:'Domine','Noto Serif Thai',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text1);min-height:100vh;line-height:1.65;
  background-image:
    radial-gradient(ellipse 70% 50% at 10% -10%,rgba(247,123,168,0.12) 0%,transparent 55%),
    radial-gradient(ellipse 50% 45% at 95% 5%,rgba(182,224,235,0.20) 0%,transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 110%,rgba(240,220,122,0.12) 0%,transparent 55%);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:100%;width:100%;margin:0 auto;padding:36px 28px 96px}

.breadcrumb{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--text3);text-transform:uppercase;margin-bottom:22px}
.breadcrumb a{color:var(--text2);border-bottom:1px dashed var(--border-strong)}
.breadcrumb a:hover{color:var(--brand-magenta)}
.breadcrumb .sep{color:var(--text4);margin:0 10px}

.hero{
  padding:32px 38px;border-radius:20px;
  background:linear-gradient(135deg,#FCE1EC 0%,#FBF1C8 55%,#DFF1F8 100%);
  border:1px solid var(--border-strong);
  margin-bottom:28px;
  box-shadow:0 14px 40px rgba(47,19,60,0.08);
}
.hero .kicker{
  display:inline-block;padding:7px 15px;border-radius:99px;
  background:var(--panel);border:1px solid var(--border-strong);
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-magenta);font-weight:700;margin-bottom:14px;
}
.hero h1{
  font-family:var(--serif);font-size:clamp(36px,5.5vw,56px);font-weight:700;letter-spacing:-.01em;line-height:1.08;
  color:var(--brand-ink);margin-bottom:10px;
}
.hero h1 em{font-style:italic;color:var(--brand-magenta)}
.hero .sub{font-size:18px;color:var(--text2);line-height:1.6;max-width:900px;font-family:var(--sans)}
.hero .sub strong{color:var(--brand-ink)}

.summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:22px 0 28px}
.sum-card{padding:16px 18px;border-radius:12px;background:var(--panel);border:1px solid var(--border);box-shadow:0 2px 6px rgba(47,19,60,0.04)}
.sum-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.sum-card .value{font-family:var(--serif);font-size:32px;color:var(--brand-ink);line-height:1;font-weight:700}
.sum-card .meta{font-family:var(--mono);font-size:11px;color:var(--text4);margin-top:4px}

.section{margin-top:28px}
.section h2{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--brand-ink);margin-bottom:10px;letter-spacing:-.01em}
.section h2 .th{display:block;font-family:var(--sans);font-size:15px;font-weight:400;color:var(--text3);letter-spacing:0;margin-top:2px}

.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{
  padding:6px 14px;border-radius:99px;
  background:var(--panel);border:1px solid var(--border-strong);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);
  cursor:pointer;user-select:none;transition:all .15s;
}
.chip:hover{border-color:var(--brand-magenta);color:var(--brand-magenta)}
.chip.active{background:var(--brand-magenta);border-color:var(--brand-magenta);color:var(--brand-white)}

table.reg{
  width:100%;border-collapse:collapse;
  font-family:var(--sans);font-size:15.5px;color:var(--text1);
  background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  box-shadow:0 2px 8px rgba(47,19,60,0.04);
}
table.reg caption{
  padding:12px 16px;font-family:var(--serif);font-size:17px;font-weight:700;color:var(--brand-ink);
  text-align:left;background:var(--surface);border-bottom:1px solid var(--border);
  caption-side:top;
}
table.reg th{
  text-align:left;padding:12px 14px;
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--text1);background:#FBEFEF;border-bottom:2px solid var(--brand-pink);
  white-space:nowrap;position:sticky;top:0;
}
table.reg td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
table.reg tr:last-child td{border-bottom:none}
table.reg tbody tr:hover{background:#FDF6F9}
table.reg td.id{font-family:var(--mono);font-size:14px;color:var(--brand-magenta);font-weight:700;white-space:nowrap}
table.reg td.name{color:var(--brand-ink);font-weight:600;font-size:15.5px}
table.reg td.muted{color:var(--text3);font-family:var(--mono);font-size:14px}

.pill{display:inline-block;padding:3px 10px;border-radius:5px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;white-space:nowrap;border:1px solid transparent}
.pill-ready   {background:var(--st-ready-bg);   color:var(--st-ready-text);   border-color:#B4E4CF}
.pill-progress{background:var(--st-progress-bg);color:var(--st-progress-text);border-color:#BADCE6}
.pill-partial {background:var(--st-partial-bg); color:var(--st-partial-text); border-color:#E8D380}
.pill-blocked {background:var(--st-blocked-bg); color:var(--st-blocked-text); border-color:#F2C2D3}
.pill-none    {background:var(--st-none-bg);    color:var(--st-none-text);    border-color:#DDCFE0}
.pill-mode    {background:var(--mode-bg);       color:var(--mode-text);       border-color:#BADCE6}
.pill-priority-p0{background:var(--p0-bg);color:var(--p0-text);border-color:#F2C2D3}
.pill-priority-p1{background:var(--p1-bg);color:var(--p1-text);border-color:#E8D380}
.pill-priority-p2{background:var(--p2-bg);color:var(--p2-text);border-color:#DDCFE0}

.table-wrap{overflow-x:auto;width:100%;border-radius:10px}

.nav-registries{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.nav-card{
  display:flex;flex-direction:column;gap:6px;
  padding:20px 22px;border-radius:12px;
  background:var(--panel);border:1px solid var(--border);
  transition:all .18s;text-decoration:none;
  box-shadow:0 2px 8px rgba(47,19,60,0.04);
}
.nav-card:hover{border-color:var(--brand-magenta);transform:translateY(-2px);box-shadow:0 8px 20px rgba(47,19,60,0.10)}
.nav-card .nc-code{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-magenta);font-weight:700}
.nav-card .nc-title{font-family:var(--serif);font-size:22px;color:var(--brand-ink);font-weight:700;letter-spacing:-.01em}
.nav-card .nc-desc{font-size:14px;color:var(--text2);line-height:1.55;font-family:var(--sans)}
.nav-card .nc-count{font-family:var(--mono);font-size:11.5px;color:var(--brand-magenta);letter-spacing:.1em}

.honest{
  margin-top:22px;padding:18px 22px;border-radius:12px;
  background:#FBF1C8;border:1px solid #E8D380;
  color:var(--text1);font-size:14.5px;line-height:1.7;font-family:var(--sans);
}
.honest strong{color:var(--brand-ink)}
.honest code{font-family:var(--mono);font-size:13px;background:var(--panel);color:var(--brand-magenta);padding:1px 7px;border-radius:4px;border:1px solid var(--border-strong)}
.honest a{color:var(--brand-magenta);border-bottom:1px dashed rgba(228,35,105,0.35)}

/* Status Legend · reusable at bottom */
.status-legend{
  margin-top:30px;padding:20px 24px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);
  font-family:var(--sans);font-size:14.5px;color:var(--text2);line-height:1.7;
}
.status-legend h3{font-family:var(--serif);font-size:19px;color:var(--brand-ink);margin-bottom:12px;font-weight:700}
.status-legend .legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 20px;margin-top:8px}
.status-legend .leg-row{display:flex;align-items:center;gap:10px}
.status-legend .leg-row .pill{flex-shrink:0}
.status-legend .leg-row .desc{color:var(--text2);font-size:14px}
.status-legend .note{margin-top:12px;font-size:13px;color:var(--text3);font-style:italic}

.foot{
  margin-top:64px;padding-top:22px;border-top:1px solid var(--border);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--text3);text-transform:uppercase;text-align:center;
}
.foot a{color:var(--text2);border-bottom:1px dashed var(--border-strong);padding:0 8px}
.foot a:hover{color:var(--brand-magenta)}

@media (max-width:760px){
  .hero{padding:24px 22px}
  .hero h1{font-size:34px}
  .section h2{font-size:26px}
  table.reg{font-size:14px}
  table.reg td.muted,table.reg td.id{font-size:12.5px}
  .pill{font-size:10.5px}
}