:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  background: #111318;
  color: #f4f6f8;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

.hub-shell {
  width: min(100% - 32px, 720px);
  margin: 0 auto;
  padding: 48px 0;
}

.hub-header { margin-bottom: 32px; }
.hub-kicker { font-size: .75rem; letter-spacing: .16em; opacity: .65; }
h1 { margin: 8px 0; font-size: clamp(2rem, 8vw, 4rem); }
.hub-status { margin: 0; opacity: .75; }
.visual-workbench-entry {
  display: inline-flex;
  margin-top: 12px;
  color: inherit;
  font-weight: 800;
  text-decoration: none;
  opacity: .88;
}
.visual-workbench-entry:hover { text-decoration: underline; opacity: 1; }


.go-workbench {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.go-workbench__item {
  min-width: 0;
  padding: 14px;
  border: 1px solid currentColor;
  border-radius: 14px;
}

.go-workbench__item span {
  display: block;
  margin-bottom: 6px;
  font-size: .72rem;
  letter-spacing: .1em;
  opacity: .65;
  text-transform: uppercase;
}

.go-workbench__item strong {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.hub-panel {
  padding: 20px;
  border: 1px solid currentColor;
  border-radius: 18px;
}

.hub-panel h2 { margin-top: 0; }
.hub-capabilities { margin-bottom: 0; padding-left: 20px; }


.centre-panel {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid #65d6a6;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(101, 214, 166, .1), rgba(17, 19, 24, .2));
}

.centre-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.centre-heading h2 { margin: 4px 0 16px; }
.centre-state {
  padding: 7px 10px;
  border-radius: 999px;
  background: #65d6a6;
  color: #111318;
  font-size: .72rem;
  letter-spacing: .08em;
}

.centre-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}

.centre-identity div { min-width: 0; }
.centre-identity dt {
  font-size: .68rem;
  letter-spacing: .08em;
  opacity: .65;
  text-transform: uppercase;
}
.centre-identity dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.centre-form { display: grid; gap: 12px; }
.centre-form label {
  display: grid;
  gap: 6px;
  font-size: .78rem;
  letter-spacing: .04em;
}
.centre-form input,
.centre-form textarea,
.centre-form select {
  width: 100%;
  border: 1px solid rgba(244, 246, 248, .35);
  border-radius: 10px;
  padding: 10px 12px;
  background: #171a20;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.centre-form :disabled { opacity: .6; }
.centre-form button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  background: #65d6a6;
  color: #111318;
  font: inherit;
  font-weight: 800;
}
.centre-form button:disabled { opacity: .55; }
.centre-route { margin: 0; font-size: .82rem; opacity: .8; }
.centre-error { min-height: 1.25em; margin: 0; color: #ff9b9b; }


.counter-panel {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid rgba(244, 246, 248, .55);
  border-radius: 18px;
  background: rgba(244, 246, 248, .03);
}
.counter-heading h2 { margin: 4px 0 16px; }
.counter-guide,
.counter-chat {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(244, 246, 248, .18);
  border-radius: 12px;
}
.counter-guide p,
.counter-hint,
.counter-result,
.counter-notion { margin: 0; }
.counter-conversation {
  display: grid;
  gap: 8px;
  min-height: 88px;
  max-height: 320px;
  overflow: auto;
}
.counter-chat-empty,
.counter-hint { font-size: .82rem; opacity: .68; }
.counter-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(244, 246, 248, .04);
}
.counter-message strong { font-size: .75rem; }
.counter-message span { white-space: pre-wrap; overflow-wrap: anywhere; }
.counter-form { display: grid; gap: 7px; }
.counter-form label {
  display: grid;
  gap: 6px;
  font-size: .78rem;
  letter-spacing: .04em;
}
.counter-form textarea {
  width: 100%;
  border: 1px solid rgba(244, 246, 248, .35);
  border-radius: 10px;
  padding: 10px 12px;
  background: #171a20;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.counter-form textarea:disabled { opacity: .65; }
.counter-result { min-height: 1.25em; font-size: .8rem; opacity: .8; }
.counter-notion a { color: inherit; font-weight: 700; }

[hidden] { display: none !important; }


.dressing-room {
  display: grid;
  gap: 12px;
  margin: 4px 0;
  padding: 14px;
  border: 1px solid rgba(244, 246, 248, .2);
  border-radius: 14px;
}

.dressing-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dressing-heading h3 { margin: 3px 0 0; }
.dressing-heading strong {
  padding: 5px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .75rem;
}

.dressing-intro { margin: 0; font-size: .88rem; opacity: .8; }
.dressing-checklist { display: grid; gap: 8px; }
.dressing-checklist label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}
.dressing-checklist input { width: auto; margin-top: 2px; }

.dressing-lessons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.dressing-lessons label,
.dressing-lessons [data-dressing-empty],
.dressing-lessons ul { grid-column: 1 / -1; }
.dressing-lessons button {
  min-height: 40px;
  align-self: end;
}
.dressing-lessons ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}

.dressing-work-fit {
  padding-top: 4px;
  border-top: 1px solid rgba(244, 246, 248, .14);
}
.dressing-work-fit summary {
  cursor: pointer;
  font-size: .82rem;
  opacity: .8;
}
.dressing-work-fit[open] { display: grid; gap: 10px; }


.ticket-hub-panel {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid #65d6a6;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(101, 214, 166, .12), rgba(17, 19, 24, .28));
}

.ticket-hub-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ticket-hub-heading h2 { margin: 4px 0 10px; }
.ticket-hub-heading > strong {
  padding: 7px 10px;
  border-radius: 999px;
  background: #65d6a6;
  color: #111318;
  font-size: .7rem;
  letter-spacing: .06em;
}

.ticket-hub-intro { margin: 0 0 14px; opacity: .84; }

.ticket-current {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.ticket-current div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(244, 246, 248, .18);
  border-radius: 10px;
}

.ticket-current dt {
  font-size: .68rem;
  letter-spacing: .07em;
  opacity: .62;
  text-transform: uppercase;
}

.ticket-current dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.ticket-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 10px;
}

.ticket-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(244, 246, 248, .22);
  border-radius: 14px;
  background: rgba(17, 19, 24, .45);
}

.ticket-card h3 { margin: 0 0 2px; }
.ticket-card form { display: grid; gap: 9px; }
.ticket-card label {
  display: grid;
  gap: 5px;
  font-size: .78rem;
}
.ticket-card input,
.ticket-card textarea,
.ticket-card select {
  width: 100%;
  border: 1px solid rgba(244, 246, 248, .35);
  border-radius: 10px;
  padding: 10px 11px;
  background: #171a20;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.ticket-card button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  background: #65d6a6;
  color: #111318;
  font: inherit;
  font-weight: 800;
}
.ticket-card button:disabled { opacity: .55; }

.ticket-store-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-store-item {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(244, 246, 248, .16);
  border-radius: 10px;
}

.ticket-store-item > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ticket-store-item span {
  overflow-wrap: anywhere;
  font-size: .72rem;
  opacity: .65;
}

.ticket-store-item > div:last-child {
  display: flex;
  gap: 6px;
}

.ticket-store-item button {
  min-height: 34px;
  padding: 6px 10px;
}

.ticket-result {
  min-height: 1.3em;
  margin: 12px 0 0;
  font-size: .82rem;
  font-weight: 700;
}

.ticket-result[data-state="error"] { color: #ff9b9b; }

.ticket-diagnostics {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 246, 248, .16);
}

.ticket-diagnostics summary {
  cursor: pointer;
  font-weight: 700;
}

.dressing-briefing-room {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(244, 246, 248, .18);
  border-radius: 12px;
}

.dressing-briefing-room label {
  display: grid;
  gap: 5px;
  font-size: .78rem;
}

.dressing-briefing-room input {
  width: 100%;
  border: 1px solid rgba(244, 246, 248, .35);
  border-radius: 10px;
  padding: 10px 11px;
  background: #171a20;
  color: inherit;
  font: inherit;
}

.dressing-briefing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dressing-briefing-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #65d6a6;
  color: #111318;
  font: inherit;
  font-weight: 800;
}

.dressing-briefing-output {
  max-height: 28rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .ticket-current { grid-template-columns: 1fr; }
  .ticket-hub-heading { align-items: stretch; flex-direction: column; }
  .ticket-hub-heading > strong { align-self: flex-start; }
}