:root{
  --bg: #fff6f8;
  --card: #ffffff;
  --ink: #3f2b33;
  --muted: #7d6670;
  --accent: #ff6ea8;
  --accent-2: #ffd4e5;
  --accent-3: #ffe9f1;
  --ok: #3aa981;
  --error: #d0576a;
  --ring: rgba(255,110,168,0.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --round: 18px;
  --shadow: 0 15px 35px rgba(212, 142, 164, 0.18);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0; padding: 24px;
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe9f1 20%, transparent 60%),
    radial-gradient(1200px 600px at 90% 0%, #ffe0ec 10%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.55 "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

.wrap{ max-width: 980px; margin: 0 auto; }

.header{
  display: grid; gap: 6px; margin-bottom: 16px;
  border: 1px solid #ffe0ec;
}
.header h1{ margin: 0; font-size: 26px; }
.subtitle{ margin: 0; color: var(--muted); }

.grid{
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

.card{
  background: var(--card);
  border-radius: var(--round);
  border: 1px solid #ffe0ec;
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}

.more{ margin-top: 16px; }

.label{
  color: var(--muted);
  font-size: 13.5px;
  margin: 2px 0 8px;
}

textarea{
  width: 100%;
  height: 360px;
  min-height: unset;
  max-height: 360px;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1.5px solid #ffd4e5;
  outline: none;
  background: var(--accent-3);
  color: var(--ink);
  font: 13.5px/1.5 var(--mono);
  resize: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--ring);
  background: #fff;
}

.controls{
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 10px;
}
.btn{
  appearance: none;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--accent), #ff5f9f);
  color: white;
  box-shadow: 0 6px 16px rgba(255, 110, 168, 0.35);
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }
.btn.ghost{
  background: var(--accent-2);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid #ffc3da;
}

.hint{ color: var(--muted); font-size: 13px; }

.status{ margin-top: 8px; font-size: 13px; color: var(--muted); }
.status.ok{ color: var(--ok); }
.status.err{ color: var(--error); }

.group{ margin-top: 12px; }

/* Output containers: always keep the pink dashed box */
#entityIdView,
#acsList,
#ssoList,
#certList{
  border: 1.5px dashed #ffd4e5;
  background: #fff7fa;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--mono);
  color: var(--ink);
  min-height: 48px;
  max-height: 260px;
  overflow-y: auto;
  display: block;
  min-width: 0;
}

/* Placeholder (initial) text color */
#entityIdView.empty,
#acsList.empty,
#ssoList.empty,
#certList.empty{
  color: var(--muted);
}

/* Column layout for results */
.row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  min-width: 0;
}

/* URL style: inline text (no white box, no label) */
.url{
  display: inline;
  font-family: var(--mono);
  word-break: break-word;
  overflow-wrap: anywhere;
  background: none;
  border: none;
  padding: 0;
}

/* Certificate block */
.cert{
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--mono);
  display: block;
}

/* Code chips (optional) */
code{
  font-family: var(--mono);
  background: #fff0f6;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid #ffd4e5;
}
ol.clean{ margin: 0; padding-left: 18px; }