/* 写迹 — shared primitives for the six port pages (layout follows the original reference sites) */
:root{
  --font:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  --blue:#0891B2; --blue-light:#ECFEFF; --blue-dark:#0E7490;
  --green:#06B6D4; --green-light:#ECFEFF;
  --orange:#F59E0B; --orange-light:#FFFBEB;
  --red:#EF4444; --red-light:#FEF2F2;
  --purple:#0E7490; --purple-light:#ECFEFF;
  --cyan:#06B6D4; --gold:#F59E0B;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);line-height:1.5}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---- controls ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:10px;padding:11px 20px;font-size:.95rem;font-weight:650;cursor:pointer;
  transition:filter .15s ease,transform .12s ease,box-shadow .15s ease;
}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-light{background:#fff;color:#0B2530;border:1px solid #D7E8EE}
.btn-light:hover{border-color:var(--blue);color:var(--blue)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.95rem;font-weight:600}
.field input,.field select,.field textarea{
  border:1px solid #D7E8EE;border-radius:10px;padding:11px 13px;background:#fff;width:100%;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid rgba(8,145,178,.35);outline-offset:1px;border-color:var(--blue)
}
.hint{font-size:.95rem;color:#7FA8B8}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.95rem;font-weight:650;padding:5px 12px;border-radius:999px;white-space:nowrap}
.chip-demo{background:var(--green-light);color:#0E7490;border:1px solid #A5F3FC}
.chip-sim{background:#EAF4F7;color:#3D6B7A;border:1px dashed #B8D6DF}
.chip-published{background:var(--green-light);color:#0E7490}
.chip-needs_review{background:var(--orange-light);color:#B45309}
.chip-approved{background:var(--blue-light);color:var(--blue-dark)}
.chip-draft{background:#EAF4F7;color:#4E7A8A}
.chip-failed{background:var(--red-light);color:#B91C1C}

/* logo chip: keeps the original PNG logo legible on dark chrome */
.logo-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:12px;padding:6px 10px;line-height:0;
}
.logo-chip img{height:36px;width:auto}
.logo-light img{height:38px;width:auto}

/* demo banner */
.demo-banner{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(6,182,212,.16);color:#67E8F9;border:1px solid rgba(6,182,212,.4);
  padding:7px 14px;border-radius:999px;font-size:.95rem;font-weight:700;letter-spacing:.04em;
}
.demo-banner.on-light{background:var(--green-light);color:#0E7490;border-color:#A5F3FC}

/* status */
.status-line{min-height:1.4em;font-size:.95rem}
.status-line[data-tone="ok"]{color:#0E7490}
.status-line[data-tone="warn"]{color:#B45309}
.status-line[data-tone="err"]{color:#B91C1C}

.empty-state{
  border:1px dashed #B8D6DF;border-radius:12px;padding:30px 18px;text-align:center;
  color:#4E7A8A;font-size:.95rem;background:rgba(255,255,255,.04);
}
.empty-state strong{display:block;font-size:1.05rem;color:inherit;margin-bottom:6px}

/* tables */
table.data{width:100%;border-collapse:collapse;font-size:.95rem}
table.data th{text-align:left;padding:10px 12px;border-bottom:1px solid #D7E8EE;font-size:.95rem;font-weight:650;white-space:nowrap}
table.data td{padding:11px 12px;border-bottom:1px solid #EAF4F7}
table.data tr:last-child td{border-bottom:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-48px;background:#fff;color:#0B2530;padding:10px 14px;border-radius:8px;font-weight:700;z-index:300}
.skip-link:focus{top:12px}

/* generic light card */
.card{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 8px 28px rgba(15,23,42,.06)}
.card-h{font-size:1.12rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* reveal (subtle, optional) */
.et-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.et-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .et-reveal{opacity:1;transform:none}
}
@media (max-width:560px){
  .chip{white-space:normal}
}

/* bar fix: spans must be block for width/height to apply */
.bar-track{display:block}
.bar-fill{display:block}