/*
 * BAOI 5.3.34.1 — Shared Tool UI Contract
 * First opt-in wave: JWT, SemVer and MTU/MSS only.
 * XML / URL / password / QR remain the visual reference.
 */

body.baoi-tool-shared-ui-v5341{
  --baoi-tool-surface:#0d192a;
  --baoi-tool-surface-2:#111e31;
  --baoi-tool-result:#06111d;
  --baoi-tool-line:#2b4059;
  --baoi-tool-line-soft:rgba(148,180,211,.14);
  --baoi-tool-text:#f3f8ff;
  --baoi-tool-muted:#9fb1c6;
  --baoi-tool-cyan:#55dff4;
  --baoi-tool-green:#67e19d;
  --baoi-tool-control-bg:#081321;
  --baoi-tool-radius:18px;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool{
  box-sizing:border-box!important;
  width:min(1180px,calc(100% - 32px))!important;
  max-width:1180px!important;
  margin:18px auto 28px!important;
  padding:22px!important;
  border:1px solid var(--baoi-tool-line)!important;
  border-radius:var(--baoi-tool-radius)!important;
  background:linear-gradient(155deg,rgba(17,31,51,.94),rgba(8,18,31,.97))!important;
  color:var(--baoi-tool-text)!important;
  box-shadow:none!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-header{
  max-width:900px!important;
  margin:0 0 18px!important;
  padding:0!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-kicker{
  display:inline-block!important;
  margin:0 0 7px!important;
  color:var(--baoi-tool-cyan)!important;
  font-size:.75rem!important;
  font-weight:900!important;
  line-height:1.2!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-header h2{
  margin:0 0 8px!important;
  color:#fff!important;
  font-size:clamp(2rem,4vw,2.75rem)!important;
  line-height:1.05!important;
  letter-spacing:-.03em!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-header p{
  max-width:780px!important;
  margin:0!important;
  color:var(--baoi-tool-muted)!important;
  font-size:1rem!important;
  line-height:1.55!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:16px!important;
  align-items:stretch!important;
  margin:0!important;
}

body.baoi-tool-shared-ui-v5341.baoi-tool-shared-variant-b .boai-v390-tool .boai-tool-layout{
  grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr)!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool :where(.boai-tool-form,.boai-result-panel){
  box-sizing:border-box!important;
  min-width:0!important;
  margin:0!important;
  padding:17px!important;
  border:1px solid var(--baoi-tool-line)!important;
  border-radius:14px!important;
  background:var(--baoi-tool-surface-2)!important;
  color:var(--baoi-tool-text)!important;
  box-shadow:none!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-form{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool :where(.boai-tool-form label,.boai-result-heading){
  color:#e8f2fd!important;
  font-size:.88rem!important;
  font-weight:800!important;
  line-height:1.35!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool :where(input[type=text],input[type=number],input[type=url],select,textarea){
  box-sizing:border-box!important;
  width:100%!important;
  min-height:44px!important;
  margin:6px 0 12px!important;
  padding:10px 12px!important;
  border:1px solid #31475f!important;
  border-radius:10px!important;
  outline:0!important;
  background:var(--baoi-tool-control-bg)!important;
  color:#f4f8ff!important;
  box-shadow:none!important;
  font:inherit!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool textarea{
  min-height:180px!important;
  resize:vertical!important;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool :where(input,select,textarea):focus{
  border-color:rgba(85,223,244,.72)!important;
  box-shadow:0 0 0 3px rgba(85,223,244,.12)!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-actions{
  display:flex!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  margin:2px 0 0!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-button{
  appearance:none!important;
  min-height:42px!important;
  padding:9px 15px!important;
  border:1px solid rgba(85,223,244,.24)!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#37d8d1,#4b9cf2)!important;
  color:#06131d!important;
  font-weight:900!important;
  line-height:1.15!important;
  cursor:pointer!important;
  box-shadow:none!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-button:hover{
  filter:brightness(1.06)!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-button-secondary{
  border-color:#334b67!important;
  background:#14243a!important;
  color:#edf5ff!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-result-panel{
  min-height:220px!important;
  background:var(--baoi-tool-surface-2)!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-result-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 12px!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-status-dot{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:4px 9px!important;
  border:1px solid rgba(103,225,157,.28)!important;
  border-radius:999px!important;
  background:rgba(103,225,157,.08)!important;
  color:var(--baoi-tool-green)!important;
  font-size:.75rem!important;
  font-weight:850!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool :where(.boai-command,pre){
  box-sizing:border-box!important;
  margin:8px 0!important;
  padding:14px!important;
  border:1px solid #20334a!important;
  border-radius:12px!important;
  background:var(--baoi-tool-result)!important;
  color:#dff7ff!important;
  overflow:auto!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-v390-big{
  margin:10px 0 8px!important;
  padding:16px!important;
  border:1px solid rgba(85,223,244,.17)!important;
  border-radius:12px!important;
  background:var(--baoi-tool-result)!important;
  color:#a8eff8!important;
  font-size:clamp(1.65rem,3.6vw,2.5rem)!important;
  font-weight:900!important;
  line-height:1.1!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-result-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-result-grid > div{
  padding:13px!important;
  border:1px solid var(--baoi-tool-line-soft)!important;
  border-radius:11px!important;
  background:var(--baoi-tool-result)!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-result-grid dt{
  margin:0 0 5px!important;
  color:var(--baoi-tool-muted)!important;
  font-size:.76rem!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-result-grid dd{
  margin:0!important;
  color:#fff!important;
  font-size:1.05rem!important;
  font-weight:850!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-guide{
  margin:15px 0 0!important;
  padding:14px 15px!important;
  border:1px solid var(--baoi-tool-line-soft)!important;
  border-radius:12px!important;
  background:rgba(7,16,29,.46)!important;
  color:var(--baoi-tool-muted)!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-guide h2{
  margin:0 0 7px!important;
  color:#edf6ff!important;
  font-size:1.08rem!important;
  line-height:1.25!important;
}

body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-guide p{
  margin:0!important;
  color:var(--baoi-tool-muted)!important;
  line-height:1.55!important;
}

/* JWT: output blocks should visually match the XML result panel. */
body.baoi-tool-shared-id-jwt .boai-v390-tool .boai-result-panel h3{
  margin:12px 0 6px!important;
  color:#dce9f6!important;
  font-size:.9rem!important;
}
body.baoi-tool-shared-id-jwt .boai-v390-tool .boai-result-panel h3:first-of-type{margin-top:0!important}

/* SemVer: result card stays compact and product-like. */
body.baoi-tool-shared-id-semver .boai-v390-tool .boai-result-panel{
  display:flex!important;
  flex-direction:column!important;
}
body.baoi-tool-shared-id-semver .boai-v390-tool [data-role="semver-detail"]{
  margin:0!important;
  color:var(--baoi-tool-muted)!important;
}

/* MTU/MSS: dense B variant, compact three-metric result. */
body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-tool-form{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:12px!important;
}
body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-tool-form > label,
body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-tool-form > input,
body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-tool-form > select{
  min-width:0!important;
}
body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-tool-form .boai-actions{
  grid-column:1/-1!important;
}
body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-result-grid{
  grid-template-columns:1fr!important;
}

@media(max-width:900px){
  body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-tool-layout,
  body.baoi-tool-shared-ui-v5341.baoi-tool-shared-variant-b .boai-v390-tool .boai-tool-layout{
    grid-template-columns:1fr!important;
  }
  body.baoi-tool-shared-ui-v5341 .boai-v390-tool .boai-result-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:640px){
  body.baoi-tool-shared-ui-v5341 .boai-v390-tool{
    width:min(100% - 20px,1180px)!important;
    padding:15px!important;
    border-radius:14px!important;
  }
  body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-tool-form{
    grid-template-columns:1fr!important;
  }
  body.baoi-tool-shared-id-mtu .boai-v390-tool .boai-tool-form .boai-actions{
    grid-column:auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.baoi-tool-shared-ui-v5341 *,body.baoi-tool-shared-ui-v5341 *::before,body.baoi-tool-shared-ui-v5341 *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}