/* Structure Engine — web shell. House style: navy #0C1A2B, teal #2DD4A7. */
:root{
  --navy:#0c1a2b; --navy-2:#0f2033; --panel:#122539; --panel-2:#162c44;
  --line:#20364f; --line-2:#2a445f;
  --ink:#e8f0f7; --muted:#8fa6bd; --faint:#63788f;
  --teal:#2dd4a7; --teal-dim:#1f9e7c; --teal-ink:#062018;
  --amber:#f6c453; --red:#f97066; --green:#31c48d;
  --radius:12px;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 80% -10%, #14294025, transparent), var(--navy);
  color:var(--ink); font-family:var(--font); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);
  background:linear-gradient(var(--navy-2),var(--navy));position:sticky;top:0;z-index:5}
.brand{display:flex;gap:14px;align-items:center}
.brand__mark{width:34px;height:34px;color:var(--teal)}
.brand h1{font-size:1.15rem;margin:0;letter-spacing:-.01em}
.brand__sub{margin:0;font-size:.78rem;color:var(--muted)}
.status{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);
  font-family:var(--mono)}
.status__dot{width:9px;height:9px;border-radius:50%;background:var(--faint);
  box-shadow:0 0 0 3px #ffffff08}
.status.ok .status__dot{background:var(--green);box-shadow:0 0 0 3px #31c48d22}
.status.down .status__dot{background:var(--red);box-shadow:0 0 0 3px #f9706622}

/* layout */
.stack{max-width:960px;margin:0 auto;padding:clamp(16px,3vw,32px);
  display:flex;flex-direction:column;gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px clamp(16px,3vw,24px)}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card__head h2{font-size:1rem;margin:0;font-weight:640}
.step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--teal);color:var(--teal-ink);font-weight:800;font-size:.85rem;font-family:var(--mono)}
.is-hidden{display:none !important}

/* tabs */
.tabs{display:inline-flex;background:var(--navy-2);border:1px solid var(--line);
  border-radius:10px;padding:4px;gap:4px;margin-bottom:16px}
.tab{border:0;background:none;color:var(--muted);padding:7px 16px;border-radius:7px;
  cursor:pointer;font-size:.88rem;font-weight:560;font-family:var(--font)}
.tab.is-active{background:var(--panel-2);color:var(--ink);box-shadow:0 1px 0 #0006}

.tabpanel label,.field label,.verify__label{display:block;font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;
  font-family:var(--mono)}
input[type=text],select{width:100%;background:var(--navy-2);border:1px solid var(--line-2);
  color:var(--ink);border-radius:9px;padding:11px 13px;font-size:.95rem;font-family:var(--font)}
input[type=text]:focus,select:focus{outline:2px solid var(--teal);outline-offset:0;border-color:transparent}
input::placeholder{color:var(--faint)}

/* buttons */
.card__actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);
  padding:10px 16px;border-radius:9px;cursor:pointer;font-size:.9rem;font-weight:580;font-family:var(--font)}
.btn:hover{border-color:var(--teal-dim)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--primary{background:var(--teal);color:var(--teal-ink);border-color:transparent}
.btn--primary:hover{background:#38e6b8}
.btn--ghost{background:transparent}
.btn--ghost:hover{border-color:var(--red);color:var(--red)}
.hint{font-size:.82rem;color:var(--muted)}
.hint.err{color:var(--red)}
.hint.ok{color:var(--green)}

/* chip / badges */
.chip{margin-left:auto;font-family:var(--mono);font-size:.72rem;padding:4px 12px;
  border-radius:999px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.chip[data-state=pending]{background:#f6c45322;color:var(--amber)}
.chip[data-state=verified]{background:#31c48d22;color:var(--green)}
.chip[data-state=rejected]{background:#f9706622;color:var(--red)}
.meta{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:.74rem;padding:4px 10px;border-radius:7px;
  background:var(--navy-2);border:1px solid var(--line);color:var(--muted)}
.badge.low{color:var(--amber);border-color:#f6c45355}
.badge.high{color:var(--green);border-color:#31c48d44}

/* verify grid */
.verify{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:680px){.verify{grid-template-columns:1fr}}
.verify__original{background:var(--navy-2);border:1px solid var(--line);border-radius:9px;
  padding:14px;font-family:var(--mono);font-size:.9rem;word-break:break-all;min-height:44px;color:var(--ink)}
.preview{background:
  linear-gradient(0deg,#0000,#0000),
  repeating-conic-gradient(#ffffff08 0% 25%, transparent 0% 50%) 50%/18px 18px,
  var(--navy-2);
  border:1px solid var(--line);border-radius:9px;min-height:220px;
  display:grid;place-items:center;color:var(--teal);padding:10px;margin-bottom:14px}
.preview svg{width:100%;max-width:340px;height:auto}
.edit-row{display:flex;gap:8px}
.edit-row input{flex:1}
.warnbox{margin-top:12px;background:#f6c4530f;border:1px solid #f6c45333;color:var(--amber);
  border-radius:9px;padding:10px 12px;font-size:.84rem}
.verifier{max-width:220px}

/* export */
.export{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:680px){.export{grid-template-columns:1fr}}
.field{margin-bottom:14px}
.segmented{display:flex;flex-wrap:wrap;gap:6px}
.seg{border:1px solid var(--line-2);background:var(--navy-2);color:var(--muted);
  padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.82rem;font-family:var(--mono)}
.seg.is-active{background:var(--teal);color:var(--teal-ink);border-color:transparent}
.codeblock{background:var(--navy-2);border:1px solid var(--line);border-radius:9px;
  padding:14px;font-family:var(--mono);font-size:.8rem;color:var(--muted);
  white-space:pre-wrap;word-break:break-all;max-height:260px;overflow:auto;margin:0}
.codeblock svg{max-width:100%}
.save{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.save .field{flex:1;min-width:160px;margin:0}

/* library */
.search-row{display:flex;gap:8px;flex-wrap:wrap}
.search-row select{width:auto}
.search-row input{flex:1;min-width:180px}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
.result{background:var(--navy-2);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--teal)}
.result svg{width:100%;height:auto;max-height:130px}
.result__name{color:var(--ink);font-size:.84rem;margin-top:8px;word-break:break-word}
.result__key{color:var(--faint);font-family:var(--mono);font-size:.68rem;margin-top:3px}
.result__tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.result__tag{font-family:var(--mono);font-size:.64rem;background:var(--panel-2);
  color:var(--muted);padding:2px 7px;border-radius:5px}
.empty{color:var(--faint);font-size:.86rem;grid-column:1/-1;text-align:center;padding:20px}

/* structure editor modal (JSME) */
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:50;padding:16px}
.modal__panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(760px,96vw);overflow:hidden;box-shadow:0 24px 70px #000b}
.modal__bar{display:flex;justify-content:space-between;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--line)}
.modal__actions{display:flex;gap:8px}
.jsme-container{width:100%;height:470px;background:#fff}
.checkline{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.86rem;
  color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--font)}
.checkline input{width:auto}