:root {
  --bg: #090c10;
  --panel: #11161d;
  --panel-2: #171e27;
  --border: #293442;
  --text: #edf3f8;
  --muted: #8fa0b3;
  --accent: #66e0bf;
  --accent-strong: #2fbf9b;
  --warning: #ffc66d;
  --danger: #ff7b83;
  --success: #7ce7a6;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% -10%, rgba(54, 154, 132, 0.19), transparent 34rem),
    radial-gradient(circle at 100% 10%, rgba(81, 114, 166, 0.16), transparent 30rem),
    var(--bg);
  color: var(--text);
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(143, 160, 179, 0.16);
  background: rgba(9, 12, 16, 0.82);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 10;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -0.03em; }
h2 { margin-bottom: 0.45rem; letter-spacing: -0.025em; }
h3 { margin-bottom: 0.35rem; }
.eyebrow { margin-bottom: 0.35rem; color: var(--accent); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.muted { color: var(--muted); }

.connection { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; color: var(--muted); font-size: 0.85rem; }
.connection-help { color: var(--muted); line-height: 1.5; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 10px; }
.hero .capability-note { margin-top: 0.75rem; font-size: 0.85rem; }
.dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0.8rem rgba(255, 198, 109, 0.5); }
.dot.online { background: var(--success); box-shadow: 0 0 0.8rem rgba(124, 231, 166, 0.5); }
.token-field { display: flex; align-items: center; gap: 0.45rem; margin-left: 1rem; }
.token-field input { width: 10rem; }

main { padding: 2rem clamp(1rem, 4vw, 4rem) 4rem; }
.card { background: linear-gradient(150deg, rgba(23, 30, 39, 0.96), rgba(14, 19, 25, 0.96)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2); }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: clamp(1.4rem, 3vw, 2.5rem); margin-bottom: 1.5rem; }
.hero p:not(.eyebrow) { max-width: 54rem; color: var(--muted); margin-bottom: 0; line-height: 1.6; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.layout { display: grid; grid-template-columns: minmax(15rem, 0.8fr) minmax(28rem, 2fr) minmax(17rem, 0.9fr); gap: 1.25rem; align-items: start; }
.sidebar, .approvals-panel, .composer, .detail { padding: 1.25rem; }
.sidebar, .approvals-panel { position: sticky; top: 7.1rem; max-height: calc(100vh - 8.5rem); overflow: auto; }
.workspace { display: grid; gap: 1.25rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.55rem; border-radius: 999px; background: rgba(102, 224, 191, 0.12); color: var(--accent); font-weight: 750; }
.count.warning { color: var(--warning); background: rgba(255, 198, 109, 0.11); }

label { display: grid; gap: 0.45rem; color: var(--muted); font-size: 0.8rem; font-weight: 650; }
input, textarea, select { width: 100%; color: var(--text); background: #0b1016; border: 1px solid #334151; border-radius: 10px; padding: 0.72rem 0.8rem; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(47, 191, 155, 0.13); }
textarea { min-height: 6rem; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin: 0.9rem 0; }

button { border: 0; border-radius: 10px; padding: 0.72rem 1rem; font-weight: 750; transition: transform 120ms ease, opacity 120ms ease; }
button:hover { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
.primary { background: var(--accent); color: #05241c; }
.secondary { background: #25303c; color: var(--text); border: 1px solid #354354; }
.danger { background: rgba(255, 123, 131, 0.14); color: var(--danger); border: 1px solid rgba(255, 123, 131, 0.36); }
.small { padding: 0.5rem 0.7rem; font-size: 0.78rem; }

.task-list, .approval-list { display: grid; gap: 0.65rem; }
.task-item, .approval-item { padding: 0.9rem; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.025); }
.task-item { cursor: pointer; }
.task-item:hover, .task-item.selected { border-color: #3d4d5f; background: rgba(102, 224, 191, 0.05); }
.task-item p, .approval-item p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.status { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.24rem 0.5rem; color: var(--muted); background: #202936; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.status.SUCCEEDED { color: var(--success); background: rgba(124, 231, 166, 0.11); }
.status.BLOCKED, .status.FAILED, .status.CANCELLED { color: var(--danger); background: rgba(255, 123, 131, 0.11); }
.status.WAITING_APPROVAL, .status.WAITING_EXTERNAL, .status.EXHAUSTED { color: var(--warning); background: rgba(255, 198, 109, 0.11); }

.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.panel { padding: 1rem; background: rgba(0, 0, 0, 0.14); border: 1px solid rgba(143, 160, 179, 0.15); border-radius: 13px; }
.panel h3 { font-size: 0.95rem; }
.criterion { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; padding: 0.75rem 0; border-top: 1px solid rgba(143, 160, 179, 0.11); }
.criterion:first-of-type { border-top: 0; }
.criterion p { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.criterion .evidence { color: var(--muted); margin-top: 0.35rem; }
.resource, .event, .action { padding: 0.65rem 0; border-top: 1px solid rgba(143, 160, 179, 0.11); font-size: 0.78rem; }
.resource:first-of-type, .event:first-of-type, .action:first-of-type { border-top: 0; }
code { overflow-wrap: anywhere; color: #b8c7d9; }
details { margin-top: 0.45rem; color: var(--muted); }
summary { cursor: pointer; }
.event strong { color: var(--accent); }
.approval-buttons { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.empty-state { min-height: 12rem; display: grid; place-items: center; text-align: center; color: var(--muted); }

dialog { width: min(34rem, calc(100vw - 2rem)); color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.65); }
dialog::backdrop { background: rgba(2, 5, 8, 0.78); backdrop-filter: blur(4px); }
dialog form { display: grid; gap: 1rem; }
dialog h2, dialog p { margin-bottom: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.65rem; }

.toast { position: fixed; right: 1.25rem; bottom: 1.25rem; max-width: min(28rem, calc(100vw - 2.5rem)); padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #151d26; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(1rem); pointer-events: none; transition: 180ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255, 123, 131, 0.55); color: var(--danger); }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 15rem 1fr; }
  .approvals-panel { position: static; max-height: none; grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .topbar, .hero { align-items: flex-start; flex-direction: column; }
  .connection { flex-wrap: wrap; }
  .token-field { margin-left: 0; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: 18rem; }
  .form-grid, .grid-two { grid-template-columns: 1fr; }
  .detail-header { flex-direction: column; }
}