:root {
  color-scheme: dark;
  --bg: #080b14;
  --sidebar: #0b0f1b;
  --panel: rgba(17, 23, 39, .88);
  --panel-solid: #111727;
  --panel-soft: #151c2f;
  --line: rgba(164, 183, 229, .13);
  --line-strong: rgba(164, 183, 229, .24);
  --text: #f5f7ff;
  --muted: #8f9ab7;
  --accent: #7ee6c4;
  --accent-strong: #3ad5a8;
  --blue: #7da5ff;
  --warning: #ffca68;
  --danger: #ff7777;
  --danger-soft: rgba(255, 119, 119, .12);
  --success-soft: rgba(126, 230, 196, .11);
  font-family: Inter, "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 72% -10%, rgba(90, 119, 213, .13), transparent 35%),
    radial-gradient(circle at 18% 15%, rgba(45, 201, 158, .08), transparent 28%),
    var(--bg);
  color: var(--text);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .43; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 26px 20px 22px;
  border-right: 1px solid var(--line);
  background: rgba(9, 13, 24, .9);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #07120f;
  background: linear-gradient(135deg, #a7f5dc, #48d4aa);
  box-shadow: 0 10px 30px rgba(72, 212, 170, .18);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.5px;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .2px; }
.brand small { color: var(--muted); margin-top: 3px; font-size: 11px; }
.side-section { margin-top: 56px; }
.side-label { margin: 0 0 14px; color: #65708d; font-size: 10px; font-weight: 850; letter-spacing: 1.5px; text-transform: uppercase; }
.loop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.loop-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 39px;
  padding: 7px 10px;
  color: #adb6cc;
  border-radius: 11px;
  font-size: 12px;
}
.loop-list li::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 34px;
  width: 1px;
  height: 10px;
  background: var(--line-strong);
}
.loop-list li:last-child::after { display: none; }
.loop-list span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--accent);
  background: rgba(126, 230, 196, .05);
  font: 700 10px/1 Consolas, monospace;
}
.architecture-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .022);
}
.architecture-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(126, 230, 196, .08); }
.architecture-note strong { font-size: 12px; }
.architecture-note p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.sidebar-foot { margin-top: auto; color: var(--muted); }
.sidebar-foot small { font-size: 10px; }
.mode-badge {
  width: max-content;
  margin-bottom: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(126, 230, 196, .09);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}
.mode-badge.live-mode { color: var(--warning); background: rgba(255, 202, 104, .09); }

main { min-width: 0; padding: 34px 40px 64px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 7px; font-size: clamp(27px, 3vw, 36px); letter-spacing: -1.2px; }
h2 { margin-bottom: 0; font-size: 18px; letter-spacing: -.25px; }
h3 { margin-bottom: 0; }
.page-subtitle { max-width: 630px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.topbar-actions { display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; }
.device-field { min-width: 190px; display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; }
.device-field > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.device-field select {
  width: 172px;
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 10px 30px 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: #dfe6fa;
  background: var(--panel-solid);
  outline: none;
  font-family: Consolas, monospace;
  font-size: 11px;
}
.device-field small { color: #5f6a87; font-size: 9px; }
.control-button { height: 40px; padding: 0 13px; border-radius: 11px; font-size: 11px; font-weight: 850; }
.pause-button { border: 1px solid rgba(255, 202, 104, .28); background: rgba(255, 202, 104, .07); color: #ffd88c; }
.pause-button.active { background: rgba(255, 202, 104, .18); box-shadow: inset 0 0 0 1px rgba(255, 202, 104, .13); }
.stop-button { border: 1px solid rgba(255, 119, 119, .32); background: rgba(255, 119, 119, .08); color: #ff9c9c; }
.control-button:hover { filter: brightness(1.16); }

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  margin: 26px 0 18px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(15, 20, 35, .72);
}
.status-strip > div {
  display: grid;
  grid-template-columns: 10px auto;
  align-items: center;
  column-gap: 9px;
  padding: 7px 13px;
  border-right: 1px solid var(--line);
}
.status-strip > div:last-child { border-right: 0; }
.status-strip b { font-size: 11px; }
.status-strip em { grid-column: 2; margin-top: 2px; color: var(--muted); font-size: 9px; font-style: normal; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #526078; box-shadow: 0 0 0 4px rgba(82, 96, 120, .1); }
.dot.online { background: var(--accent); box-shadow: 0 0 0 4px rgba(126, 230, 196, .08); }
.dot.warn { background: var(--warning); box-shadow: 0 0 0 4px rgba(255, 202, 104, .08); }
.dot.offline { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 119, 119, .08); }
.dot.neutral { background: #65718e; }

.command-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(430px, 1.6fr);
  gap: 28px;
  padding: 25px;
  border: 1px solid rgba(126, 230, 196, .22);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(21, 31, 48, .96), rgba(13, 24, 36, .9));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .2);
}
.command-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -120px;
  top: -170px;
  border-radius: 50%;
  background: rgba(69, 217, 172, .09);
  filter: blur(8px);
}
.command-copy h2 { margin-bottom: 8px; font-size: 21px; }
.command-copy p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.command-entry { position: relative; z-index: 1; }
.command-entry textarea {
  width: 100%;
  min-height: 89px;
  resize: vertical;
  padding: 15px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  color: var(--text);
  background: rgba(7, 11, 20, .62);
  outline: none;
  line-height: 1.65;
}
.command-entry textarea:focus { border-color: rgba(126, 230, 196, .62); box-shadow: 0 0 0 3px rgba(126, 230, 196, .06); }
.command-entry textarea::placeholder { color: #68738f; }
.command-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; }
.command-actions span { color: var(--muted); font-size: 9px; line-height: 1.5; }

.primary-button, .secondary-button, .risk-button, .danger-confirm, .text-button {
  border-radius: 11px;
  padding: 10px 14px;
  border: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
}
.primary-button { color: #061510; background: linear-gradient(135deg, #9af0d5, #54d6ae); box-shadow: 0 9px 24px rgba(75, 214, 174, .13); }
.secondary-button { color: #dce5fa; border: 1px solid var(--line-strong); background: #1a2236; }
.risk-button { color: #1b1303; background: linear-gradient(135deg, #ffe0a1, #ffbd53); }
.danger-confirm { color: white; background: linear-gradient(135deg, #ff8f8f, #f15d67); }
.text-button { color: var(--muted); background: transparent; }
.primary-button:hover, .secondary-button:hover, .risk-button:hover, .danger-confirm:hover, .text-button:hover { filter: brightness(1.08); }

.task-run-status {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  grid-template-areas:
    "heading label"
    "detail meta";
  gap: 10px 24px;
  align-items: center;
  margin-top: 17px;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: linear-gradient(120deg, rgba(17, 23, 39, .96), rgba(12, 17, 29, .94));
  box-shadow: 0 16px 45px rgba(0, 0, 0, .14);
}
.task-run-status-heading { grid-area: heading; display: flex; align-items: center; gap: 12px; }
.task-run-status-heading .eyebrow { margin-bottom: 3px; font-size: 8px; }
.task-run-status-heading h2 { font-size: 15px; }
.task-run-status-dot { width: 12px; height: 12px; border-radius: 50%; background: #65718e; box-shadow: 0 0 0 6px rgba(101, 113, 142, .09); }
.task-run-status-label { grid-area: label; min-width: 96px; text-align: right; font-size: 24px; line-height: 1; letter-spacing: .04em; }
.task-run-status-detail { grid-area: detail; margin: 0 0 0 24px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.task-run-status-meta { grid-area: meta; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; color: #7985a2; font-size: 8px; }
.task-run-status-meta code { color: #aeb9d5; font-size: 8px; }
.task-run-status[data-task-state="running"] { border-color: rgba(125, 165, 255, .42); background: linear-gradient(120deg, rgba(21, 31, 52, .98), rgba(14, 22, 39, .95)); }
.task-run-status[data-task-state="running"] .task-run-status-dot { background: var(--blue); box-shadow: 0 0 0 6px rgba(125, 165, 255, .11), 0 0 22px rgba(125, 165, 255, .28); }
.task-run-status[data-task-state="running"] .task-run-status-label { color: var(--blue); }
.task-run-status[data-task-state="success"] { border-color: rgba(126, 230, 196, .4); background: linear-gradient(120deg, rgba(16, 40, 39, .96), rgba(12, 27, 30, .94)); }
.task-run-status[data-task-state="success"] .task-run-status-dot { background: var(--accent); box-shadow: 0 0 0 6px rgba(126, 230, 196, .1), 0 0 22px rgba(126, 230, 196, .24); }
.task-run-status[data-task-state="success"] .task-run-status-label { color: var(--accent); }
.task-run-status[data-task-state="failure"] { border-color: rgba(255, 119, 119, .45); background: linear-gradient(120deg, rgba(50, 24, 34, .96), rgba(31, 17, 27, .94)); }
.task-run-status[data-task-state="failure"] .task-run-status-dot { background: var(--danger); box-shadow: 0 0 0 6px rgba(255, 119, 119, .1), 0 0 22px rgba(255, 119, 119, .22); }
.task-run-status[data-task-state="failure"] .task-run-status-label { color: var(--danger); }

.console-grid { display: grid; grid-template-columns: minmax(430px, .92fr) minmax(500px, 1.08fr); gap: 17px; margin-top: 17px; }
.console-column { display: grid; align-content: start; gap: 17px; }
.panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  background: linear-gradient(145deg, rgba(19, 26, 43, .92), rgba(14, 19, 32, .94));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .13);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head .eyebrow { margin-bottom: 5px; font-size: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 850; }
.pill.neutral { color: #9aa7c5; background: rgba(154, 167, 197, .09); }
.pill.active { color: var(--blue); background: rgba(125, 165, 255, .1); }
.pill.live { color: #ff9999; background: rgba(255, 119, 119, .1); }
.pill.risk { color: var(--warning); background: rgba(255, 202, 104, .11); }
.pill.success { color: var(--accent); background: rgba(126, 230, 196, .1); }
.pill.danger { color: var(--danger); background: var(--danger-soft); }
.empty-state { min-height: 86px; display: grid; place-items: center; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 13px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.7; }

.goal-summary { margin-bottom: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .021); }
.goal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.goal-title-row div span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.goal-title-row strong { font-size: 13px; line-height: 1.5; }
.goal-title-row code { padding: 4px 7px; border-radius: 7px; color: var(--accent); background: rgba(126, 230, 196, .07); font-size: 9px; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.goal-chips span { padding: 5px 7px; border-radius: 8px; color: #aeb9d5; background: rgba(255, 255, 255, .035); font-size: 9px; }
.plan-list { display: grid; gap: 8px; }
.plan-step { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; }
.plan-step.current { border-color: rgba(125, 165, 255, .35); background: rgba(125, 165, 255, .06); }
.plan-step.done { border-color: rgba(126, 230, 196, .16); }
.plan-step.blocked { border-color: rgba(255, 119, 119, .2); background: rgba(255, 119, 119, .04); }
.plan-step.waiting { opacity: .66; }
.step-index { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #b7c4e4; background: #1a2236; font: 700 10px/1 Consolas, monospace; }
.plan-step.current .step-index { color: #0e1730; background: var(--blue); }
.plan-step.done .step-index { color: #061510; background: var(--accent); }
.plan-step strong { display: block; font-size: 11px; }
.plan-step p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.step-state { color: var(--muted); font-size: 8px; font-weight: 850; }

.trace-list { display: grid; gap: 2px; }
.trace-item { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 9px 0; }
.trace-marker { position: relative; width: 8px; height: 8px; margin-top: 5px; border: 2px solid var(--accent); border-radius: 50%; }
.trace-marker::after { content: ""; position: absolute; left: 2px; top: 9px; width: 1px; height: calc(100% + 42px); background: var(--line-strong); }
.trace-item:last-child .trace-marker::after { display: none; }
.trace-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trace-title strong { font-size: 10px; }
.trace-title time { color: var(--muted); font-size: 8px; }
.trace-item p { margin: 4px 0; color: #b4bed5; font-size: 9px; line-height: 1.55; }
.trace-item small { display: block; margin-top: 5px; color: #65708c; font-size: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.observation-only .trace-marker { border-color: var(--blue); }
.trace-item.current-trace { margin: 2px -7px; padding: 10px 7px; border: 1px solid rgba(125, 165, 255, .18); border-radius: 10px; background: rgba(125, 165, 255, .035); }
.trace-item.current-trace .trace-marker { border-color: var(--blue); }
.trace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.trace-grid span { min-width: 0; padding: 6px 7px; border-radius: 8px; color: #c5cee3; background: rgba(255, 255, 255, .025); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.trace-grid b { display: block; margin-bottom: 2px; color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .03em; }
.trace-grid .scope-state.active { color: var(--accent); background: rgba(126, 230, 196, .05); }
.trace-grid .scope-state.stale,
.trace-grid .scope-state.invalidated,
.trace-grid .scope-state.missing { color: var(--warning); background: rgba(255, 202, 104, .055); }

.preview-panel { padding-bottom: 15px; }
.preview-wrap { position: relative; min-height: 390px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; background: #03050a; }
.preview-wrap img { display: block; width: 100%; height: 100%; max-height: 540px; object-fit: contain; }
.preview-overlay { position: absolute; inset: auto 12px 12px; display: none; padding: 9px 11px; border: 1px solid rgba(125, 165, 255, .24); border-radius: 10px; color: #ced9f8; background: rgba(7, 11, 21, .82); backdrop-filter: blur(10px); font-size: 10px; }
.preview-overlay.show { display: block; }
.scene-meta { display: grid; grid-template-columns: 1.5fr .8fr .8fr; gap: 7px; margin-top: 10px; }
.scene-meta span { min-width: 0; padding: 8px 9px; border-radius: 10px; background: rgba(255, 255, 255, .025); }
.scene-meta b, .scene-meta em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-meta b { margin-bottom: 3px; color: var(--muted); font-size: 8px; }
.scene-meta em { color: #d3dbef; font-size: 9px; font-style: normal; }

.action-content { min-height: 112px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .022); }
.next-action-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.next-action-title > span { color: var(--blue); font-size: 9px; font-weight: 850; }
.risk-tag, .safe-tag { padding: 4px 6px; border-radius: 7px; font-size: 8px; }
.risk-tag { color: var(--warning); background: rgba(255, 202, 104, .1); }
.safe-tag { color: var(--accent); background: rgba(126, 230, 196, .08); }
.action-content h3 { margin-bottom: 7px; font-size: 14px; }
.action-target { width: max-content; max-width: 100%; margin-bottom: 7px; padding: 4px 7px; overflow: hidden; border-radius: 7px; color: #a9b9e2; background: rgba(125, 165, 255, .07); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.action-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.action-facts span { min-width: 0; padding: 7px 8px; border-radius: 8px; color: #d4dcf0; background: rgba(255, 255, 255, .025); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.action-facts b { display: block; margin-bottom: 2px; color: var(--muted); font-size: 7px; }
.action-metadata { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.action-metadata span, .compatibility-note { padding: 4px 6px; border-radius: 7px; color: #96a6c9; background: rgba(255, 255, 255, .035); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 7px; overflow-wrap: anywhere; }
.compatibility-note { width: max-content; max-width: 100%; margin: 8px 0; }
.action-content p { margin-bottom: 8px; color: #aeb8d1; font-size: 10px; line-height: 1.65; }
.action-content small { color: var(--muted); font-size: 8px; }
.action-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.pause-notice { margin: 11px 0 0; padding: 9px 11px; border: 1px solid rgba(255, 202, 104, .18); border-radius: 10px; color: #f6d896; background: rgba(255, 202, 104, .06); font-size: 9px; line-height: 1.55; }

.capability-panel { margin-top: 17px; border-color: rgba(125, 165, 255, .2); }
.capability-intro { margin: -3px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.capability-form { display: grid; grid-template-columns: minmax(190px, .65fr) minmax(360px, 1.5fr) auto; gap: 10px; align-items: end; }
.capability-form label { display: grid; gap: 6px; }
.capability-form label > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.capability-form select, .capability-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--text);
  background: rgba(7, 11, 20, .62);
  outline: none;
}
.capability-form textarea { min-height: 42px; resize: vertical; line-height: 1.5; }
.capability-status { min-height: 64px; margin-top: 13px; }
.capability-status.active { display: grid; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.capability-status strong { font-size: 12px; }
.capability-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.capability-meta span { padding: 5px 7px; border-radius: 7px; color: #aeb9d5; background: rgba(255, 255, 255, .035); font: 8px/1.4 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.capability-evidence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.capability-evidence figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #05070c; }
.capability-evidence img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.capability-evidence figcaption { padding: 6px; color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast { position: fixed; right: 26px; bottom: 26px; z-index: 50; max-width: min(420px, calc(100vw - 40px)); padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 12px; color: #dfe7f8; background: #1b2437; box-shadow: 0 18px 60px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; font-size: 11px; }
.toast.show { opacity: 1; transform: none; }
.toast.error { color: #ffd0d0; background: #392026; border-color: rgba(255, 119, 119, .25); }

dialog { width: min(570px, calc(100vw - 30px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 20px; color: var(--text); background: #111727; box-shadow: 0 34px 120px rgba(0, 0, 0, .62); }
dialog::backdrop { background: rgba(2, 4, 10, .78); backdrop-filter: blur(5px); }
dialog form { padding: 25px; }
.manual-motion-dialog { width: min(650px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow: auto; }
.manual-motion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }
.manual-motion-grid label { display: grid; gap: 5px; color: #aeb9d5; font-size: 11px; }
.manual-motion-grid input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: rgba(0,0,0,.22); }
.dialog-help { color: var(--muted); font-size: 11px; line-height: 1.6; }
.manual-motion-status { display: flex; align-items: center; gap: 18px; margin: 12px 0; padding: 12px 16px; border: 1px solid rgba(126,230,196,.3); border-radius: 12px; background: rgba(13, 34, 35, .82); }
.manual-motion-status > span { flex: 1; color: var(--muted); font-size: 11px; }
dialog h2 { margin-bottom: 11px; font-size: 21px; }
.risk-level { margin-bottom: 17px; padding: 9px 11px; border-radius: 10px; font-size: 10px; font-weight: 850; }
.risk-level.high { color: #ffd58c; border: 1px solid rgba(255, 202, 104, .22); background: rgba(255, 202, 104, .08); }
.risk-level.guarded { color: var(--accent); border: 1px solid rgba(126, 230, 196, .18); background: rgba(126, 230, 196, .06); }
.risk-details { margin: 0; display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.risk-details div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 12px; background: #131a2b; }
.risk-details dt { color: var(--muted); font-size: 9px; }
.risk-details dd { margin: 0; color: #dce4f7; font-size: 10px; line-height: 1.55; }
.warning-box { margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(255, 202, 104, .2); border-radius: 11px; color: #f7d998; background: rgba(255, 202, 104, .06); font-size: 10px; line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 19px; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 205px minmax(0, 1fr); }
  main { padding: 28px 25px 50px; }
  .topbar { display: grid; }
  .topbar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .command-card { grid-template-columns: 1fr; gap: 17px; }
  .console-grid { grid-template-columns: 1fr; }
  .preview-wrap { min-height: 330px; }
  .capability-form { grid-template-columns: 1fr 1fr; }
  .capability-form .capability-goal { grid-column: 2; }
  .capability-form button { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 17px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-section, .architecture-note { display: none; }
  .sidebar-foot { margin: 12px 0 0 55px; }
  main { padding: 22px 14px 40px; }
  .topbar-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .device-field { grid-column: 1 / -1; width: 100%; }
  .device-field select { width: 100%; }
  .status-strip { grid-template-columns: 1fr 1fr; }
  .status-strip > div:nth-child(2) { border-right: 0; }
  .status-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .command-card, .panel { padding: 16px; }
.pairing-entry { display: grid; gap: 12px; }
.pairing-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.pairing-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.pairing-fields input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px; background: rgba(7, 12, 24, .68); color: var(--text); padding: 10px 11px; }
.pairing-connection { color: var(--muted); font-size: 11px; }
.pairing-connection code { color: var(--accent); }
  .command-actions { align-items: stretch; flex-direction: column; }
  .command-actions .primary-button { width: 100%; }
  .task-run-status {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "label" "detail" "meta";
    gap: 11px;
    padding: 16px;
  }
  .task-run-status-label { text-align: left; }
  .task-run-status-detail { margin-left: 24px; }
  .task-run-status-meta { justify-content: flex-start; margin-left: 24px; }
  .preview-wrap { min-height: 280px; }
  .scene-meta { grid-template-columns: 1fr; }
  .trace-grid, .action-facts { grid-template-columns: 1fr; }
  .capability-form { grid-template-columns: 1fr; }
  .capability-form .capability-goal, .capability-form button { grid-column: auto; }
  .capability-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Console refresh: clearer hierarchy and a quieter workspace surface. */
:root {
  --bg: #070b13;
  --sidebar: #0a101b;
  --panel: rgba(16, 24, 40, .94);
  --panel-solid: #111b2d;
  --line: rgba(172, 193, 232, .14);
  --line-strong: rgba(172, 193, 232, .26);
  --muted: #96a4c1;
  --accent: #8ef0cf;
  --accent-strong: #4cd9ad;
  --blue: #8eafff;
}
body {
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(91, 126, 255, .18), transparent 65%),
    radial-gradient(700px 420px at 8% 8%, rgba(54, 209, 169, .09), transparent 68%),
    var(--bg);
}
.app-shell { grid-template-columns: 230px minmax(0, 1fr); }
.sidebar {
  padding: 24px 17px 20px;
  background: linear-gradient(180deg, rgba(10, 16, 28, .96), rgba(8, 12, 21, .94));
  border-right-color: rgba(172, 193, 232, .16);
}
.brand-mark { border-radius: 12px; box-shadow: 0 9px 26px rgba(72, 212, 170, .22); }
.side-section { margin-top: 45px; }
.loop-list li { min-height: 37px; }
main { max-width: 1680px; padding: 32px 42px 66px; margin: 0 auto; width: 100%; }
.topbar { padding-bottom: 5px; }
h1 { font-size: clamp(29px, 3vw, 40px); letter-spacing: -1.5px; }
.page-subtitle { font-size: 12px; }
.status-strip { margin-top: 23px; border-radius: 13px; background: rgba(14, 21, 36, .76); }
.command-card {
  grid-template-columns: minmax(250px, .68fr) minmax(430px, 1.8fr);
  padding: 27px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(20, 33, 52, .98), rgba(12, 25, 37, .95));
  box-shadow: 0 22px 75px rgba(0, 0, 0, .24);
}
.command-copy h2 { font-size: 23px; }
.command-entry textarea { min-height: 102px; background: rgba(5, 10, 19, .72); }
.primary-button { padding: 11px 16px; border-radius: 10px; }
.task-run-status, .panel { border-radius: 16px; }
.panel { padding: 21px; background: linear-gradient(145deg, rgba(20, 29, 48, .95), rgba(13, 19, 33, .96)); }
.panel-head { margin-bottom: 14px; }
.preview-wrap { min-height: 430px; border-radius: 12px; background: #02050b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.action-content, .goal-summary { background: rgba(255, 255, 255, .028); }
.capability-panel { background: linear-gradient(145deg, rgba(18, 27, 46, .95), rgba(13, 19, 33, .96)); }
@media (max-width: 1180px) { main { padding: 28px 25px 50px; } }

/* Keep first-run command entry focused; advanced budgets stay available on demand. */
.advanced-settings { margin-top: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.advanced-settings summary { padding: 9px 11px; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; list-style-position: inside; }
.advanced-settings[open] summary { color: var(--accent); border-bottom: 1px solid var(--line); }
.advanced-settings .task-budget-fields { margin: 0; padding: 10px 11px 11px; }


.machine-position-panel {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(430px, 1.35fr);
  gap: 22px;
  align-items: center;
  margin: 18px 0;
  padding: 18px 21px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(20, 33, 52, .88), rgba(12, 25, 37, .82));
}
.machine-position-copy h2 { margin-bottom: 6px; font-size: 17px; }
.machine-position-copy p:last-child { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.machine-position-buttons { display: grid; grid-template-columns: repeat(10, minmax(34px, 1fr)); gap: 7px; }
.machine-position-button {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: #cdd8f1;
  background: rgba(255, 255, 255, .035);
  font-size: 12px;
  font-weight: 850;
  transition: .16s ease;
}
.machine-position-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.machine-position-button.active { border-color: var(--accent); color: #06130f; background: var(--accent); box-shadow: 0 8px 24px rgba(72, 212, 170, .18); }
.machine-position-button:disabled { cursor: not-allowed; }
@media (max-width: 1180px) {
  .pairing-fields { grid-template-columns: 1fr; }
  .machine-position-panel { grid-template-columns: 1fr; gap: 13px; }
}
@media (max-width: 760px) {
  .machine-position-panel { padding: 16px; }
  .machine-position-buttons { grid-template-columns: repeat(5, minmax(42px, 1fr)); }
}


/* Lucky bag monitor feedback: expose returned decisions and runtime failures. */
.lucky-feedback { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4, 10, 20, .58); }
.lucky-feedback-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.lucky-feedback h3 { margin: 3px 0 0; font-size: 18px; }
.lucky-feedback h4 { margin: 0 0 7px; color: #dce6ff; font-size: 12px; }
.lucky-feedback-stats { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.lucky-feedback-stats span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; }
.lucky-feedback-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.lucky-feedback-columns section { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.lucky-feedback p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.lucky-feedback-columns section p:first-of-type { color: var(--accent); font-weight: 750; }
.lucky-feedback-error { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255, 105, 125, .48); border-radius: 9px; color: #ffb5c0; background: rgba(125, 21, 43, .2); font-size: 11px; line-height: 1.5; }
.lucky-feedback-timeline { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.lucky-feedback-event { padding: 10px 12px; border-left: 2px solid var(--line-strong); background: rgba(255,255,255,.02); }
.lucky-feedback-event strong, .lucky-feedback-event span { display: block; color: #cfdaf2; font-size: 11px; }
.lucky-feedback-event span { color: var(--accent); margin-top: 3px; }
.lucky-feedback-event small { color: var(--muted); font-size: 10px; }
@media (max-width: 760px) { .lucky-feedback-columns { grid-template-columns: 1fr; } }

/* Chat-first workspace refresh. */
.compact-sidebar { display: flex; flex-direction: column; min-height: 100vh; }
.compact-sidebar .side-section, .compact-sidebar .architecture-note, .compact-sidebar .loop-list { display: none; }
.sidebar-live { display: flex; gap: 10px; align-items: center; margin-top: 46px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); }
.sidebar-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.sidebar-live strong, .sidebar-live small { display: block; }
.sidebar-live strong { color: #eef4ff; font-size: 11px; }
.sidebar-live small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.sidebar-note { margin-top: auto; padding: 13px 2px; }
.sidebar-note p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.topbar-title h1 { margin-bottom: 5px; }
.compact-status { margin-top: 17px; }
.agent-workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 18px; margin-top: 18px; align-items: start; }
.chat-panel, .live-preview-panel { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(19, 29, 48, .96), rgba(10, 17, 30, .98)); box-shadow: 0 22px 70px rgba(0,0,0,.2); }
.chat-panel { min-width: 0; overflow: hidden; }
.chat-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 23px 24px 17px; border-bottom: 1px solid var(--line); }
.chat-panel-head h2 { margin: 4px 0 0; font-size: 22px; }
.chat-stream { display: flex; flex-direction: column; gap: 13px; padding: 19px 24px; min-height: 385px; max-height: 650px; overflow: auto; }
.chat-status { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.028); }
.chat-messages { display: grid; gap: 12px; }
.conversation-message { display: flex; gap: 9px; align-items: flex-start; max-width: 94%; }
.conversation-user { justify-self: end; max-width: 86%; }
.conversation-qwen { justify-self: start; }
.conversation-avatar { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 9px; color: #06130f; background: linear-gradient(140deg, var(--accent), #8eb7ff); font-size: 11px; font-weight: 900; }
.conversation-bubble { min-width: 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: 13px 13px 13px 4px; background: rgba(255,255,255,.035); }
.conversation-user .conversation-bubble { border-color: rgba(120,186,255,.28); border-radius: 13px 13px 4px 13px; background: linear-gradient(135deg, rgba(45,89,146,.54), rgba(24,47,82,.72)); }
.conversation-label { color: #9ad8ff; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.conversation-qwen .conversation-label { color: var(--accent); }
.conversation-bubble p { margin: 5px 0 0; color: #edf3ff; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-bubble small { display: block; margin-top: 7px; color: #8296bb; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.execution-feedback .conversation-bubble { border-color: rgba(126,230,196,.2); background: rgba(126,230,196,.045); }
.conversation-error .conversation-bubble { border-color: rgba(255,119,119,.3); background: rgba(255,119,119,.07); }
.chat-status .task-run-status-heading { margin-bottom: 6px; }
.chat-status h3 { margin: 0; font-size: 12px; }
.chat-status .task-run-status-detail { margin: 4px 0; }
.chat-composer { padding: 16px 24px 20px; border-top: 1px solid var(--line); background: rgba(3,8,16,.38); }
.composer-label { display: block; margin-bottom: 8px; color: #dbe5fb; font-size: 11px; font-weight: 800; }
.chat-composer textarea { min-height: 92px; width: 100%; resize: vertical; border: 1px solid rgba(142,175,255,.26); border-radius: 13px; background: rgba(3,8,16,.75); color: #f2f6ff; font-size: 13px; line-height: 1.6; }
.chat-composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(142,240,207,.1); }
.composer-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 11px; }
.composer-tools, .composer-send { display: flex; align-items: center; gap: 9px; }
.composer-tools { flex-wrap: wrap; }
.composer-send { flex-direction: column; align-items: flex-end; gap: 5px; }
.composer-send #commandHint { color: var(--muted); font-size: 10px; }
.template-button { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: #b9c9e9; background: rgba(255,255,255,.035); font-size: 11px; }
.template-button:hover { border-color: var(--accent); color: var(--accent); }
.send-button { min-width: 132px; padding: 11px 17px; border-radius: 10px; font-size: 12px; }
.send-button span { margin-left: 5px; font-size: 15px; }
.live-column { display: grid; gap: 14px; min-width: 0; }
.live-preview-panel { padding: 17px; }
.live-preview-panel .preview-wrap { min-height: 340px; }
.feature-tools, .secondary-tools, .execution-details { border: 1px solid var(--line); border-radius: 13px; background: rgba(13,21,36,.72); }
.feature-tools summary, .secondary-tools summary, .execution-details summary { padding: 13px 15px; color: #cbd8f2; cursor: pointer; font-size: 11px; font-weight: 800; list-style-position: inside; }
.feature-tools[open] summary, .secondary-tools[open] summary, .execution-details[open] summary { color: var(--accent); border-bottom: 1px solid var(--line); }
.feature-tools > p { margin: 12px 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.feature-tools-actions, .secondary-tools .pairing-entry { padding: 0 15px 14px; }
.feature-tools-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.feature-tools-actions .feature-status { margin-left: auto; }
.secondary-tools .pairing-fields { padding-top: 13px; }
.secondary-tools .pairing-connection { margin: 9px 0; }
.execution-details { margin-top: 17px; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; }
.details-grid .panel { margin: 0; }
.utility-capability { margin-top: 12px; }
.utility-capability .capability-panel { margin: 14px; }
#capabilityAcceptancePanel { border-radius: 13px; }
#luckyBagFeedback { margin-top: 3px; }
@media (max-width: 1080px) { .agent-workspace { grid-template-columns: 1fr; } .live-column { grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); align-items: start; } }
@media (max-width: 760px) {
  main { padding: 20px 14px 45px; }
  .topbar { display: block; }
  .topbar-actions { margin-top: 14px; justify-content: flex-start; flex-wrap: wrap; }
  .chat-panel-head, .chat-stream, .chat-composer { padding-left: 15px; padding-right: 15px; }
  .composer-footer, .live-column { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .composer-send { align-items: stretch; }
  .send-button { width: 100%; }
  .details-grid { grid-template-columns: 1fr; }
}

.technical-details { margin-top: 11px; border-top: 1px solid var(--line); color: var(--muted); }
.technical-details summary { padding-top: 10px; cursor: pointer; font-size: 10px; color: #9fb2d7; }
.technical-details[open] summary { color: var(--accent); }
.technical-grid { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; margin-top: 10px; font-size: 10px; line-height: 1.5; }
.technical-grid span { color: #8fa2c5; }
.technical-grid p { margin: 0; overflow-wrap: anywhere; }
.technical-line { margin-top: 9px; color: #8296bb; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }

/* Chat-only task entry: the user request is the only non-Qwen message. */
.user-message {
  align-self: flex-end;
  width: min(86%, 760px);
  margin-left: auto;
  padding: 11px 14px;
  border: 1px solid rgba(120, 186, 255, 0.28);
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(45, 89, 146, 0.54), rgba(24, 47, 82, 0.72));
  box-shadow: 0 10px 24px rgba(2, 10, 25, 0.2);
}
.user-message-label {
  color: #9ad8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.user-message p {
  margin: 5px 0 0;
  color: #f3f7ff;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.continue-button { border: 1px solid rgba(142, 240, 207, .38); background: rgba(142, 240, 207, .12); color: #a8f5dd; }

/* Primary task status: the page must answer “is the phone doing anything?” at a glance. */
.task-run-status-primary {
  margin: 14px 0 18px;
  min-height: 74px;
  border-width: 1px;
}
.task-run-status-primary[data-task-state="not-started"] {
  border-color: rgba(172, 193, 232, .24);
}
.task-run-status-primary[data-task-state="paused"] {
  border-color: rgba(255, 202, 104, .45);
  background: linear-gradient(120deg, rgba(46, 36, 22, .95), rgba(24, 23, 22, .94));
}
.task-run-status-primary[data-task-state="paused"] .task-run-status-dot {
  background: var(--warning);
  box-shadow: 0 0 0 6px rgba(255, 202, 104, .11);
}
.task-run-status-primary[data-task-state="not-started"] .task-run-status-label { color: #c4cee4; }
.task-run-status-primary .task-run-status-detail { font-size: 11px; }
/* Website account controls also remain usable in the compact sidebar. */
.account-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-width: 0; }
.account-panel strong, .account-panel small, .account-panel p { overflow-wrap: anywhere; }
.account-panel small { opacity: .8; }
.account-panel p { margin: 0; font-size: 13px; }
.account-panel [hidden] { display: none !important; }
#top[hidden], #accessNotice[hidden], #manualMotionStatus[hidden] { display: none !important; }
.access-notice { margin: auto; padding: 48px 24px; max-width: 640px; }
.access-notice p { color: #aab7ce; line-height: 1.8; }
.device-management-dialog { width: min(640px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; }
.device-assignment-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid #344158; }
.device-assignment-card strong, .device-assignment-card p { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
.device-assignment-card select { min-width: 0; width: 100%; }
.device-assignment-card label, .device-assignment-card input { min-width: 0; max-width: 100%; }
.device-assignment-card label { display: grid; gap: 8px; }
.device-assignment-card[hidden] { display: none; }
.team-card { grid-template-columns: minmax(0, 1fr); }
.team-member-picker { min-width: 0; margin: 0; border: 1px solid #344158; border-radius: 8px; padding: 12px; max-height: 240px; overflow-y: auto; }
.team-member-picker .team-member-option { display: flex; align-items: center; gap: 8px; margin: 10px 0; overflow-wrap: anywhere; }
.team-member-picker .team-member-option[hidden] { display: none; }
.team-member-option input { width: auto; flex-shrink: 0; }
#teamMemberSummary { overflow-wrap: anywhere; }
#teamManagementDialog { box-sizing: border-box; padding: 20px; border: 1px solid #344158; border-radius: 16px; background: #111b2b; color: #ecf2ff; }
#teamManagementDialog h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
#teamManagementDialog p { line-height: 1.6; }
#teamManagementDialog .dialog-help { color: #aab7ce; font-size: 13px; }
#teamManagementDialog input:not([type=checkbox]) { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #40516c; border-radius: 8px; background: #0b1321; color: #ecf2ff; font: inherit; }
#teamManagementDialog > label { display: grid; gap: 8px; margin-top: 18px; }
#teamManagementDialog details { margin-top: 18px; }
#teamManagementDialog .dialog-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.project-card { grid-template-columns: minmax(0, 1fr); }
.project-member-picker { min-width: 0; margin: 0; border: 1px solid #344158; border-radius: 8px; padding: 12px; max-height: 220px; overflow-y: auto; }
.project-member-picker label { display: flex; gap: 8px; align-items: center; margin: 9px 0; overflow-wrap: anywhere; }
.project-member-picker input[type=checkbox] { width: auto; flex-shrink: 0; }
#projectManagementDialog { box-sizing: border-box; width: min(640px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; padding: 20px; border: 1px solid #344158; border-radius: 16px; background: #111b2b; color: #ecf2ff; }
#projectManagementDialog input:not([type=checkbox]), #projectManagementDialog textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #40516c; border-radius: 8px; background: #0b1321; color: #ecf2ff; font: inherit; }
#projectManagementDialog textarea { min-height: 76px; resize: vertical; }
#projectManagementDialog > label { display: grid; gap: 8px; margin-top: 18px; }
.quota-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quota-card strong, .quota-card small { grid-column: 1 / -1; }
.quota-card label { display: grid; gap: 7px; }
.quota-card input, .quota-card select, #auditViewerDialog input { box-sizing: border-box; width: 100%; padding: 9px; border: 1px solid #40516c; border-radius: 8px; background: #0b1321; color: #ecf2ff; }
.quota-card button { grid-column: 1 / -1; justify-self: end; }
#auditViewerDialog > label { display: grid; gap: 8px; margin-top: 16px; }
.audit-entry { display: grid; gap: 5px; padding: 12px 0; border-bottom: 1px solid #344158; overflow-wrap: anywhere; }
.audit-entry small { color: #aab7ce; }
.audit-entry code { white-space: pre-wrap; color: #cbd6ee; font-size: 11px; }
.notification-entry { display: grid; gap: 6px; padding: 13px 0; border-bottom: 1px solid #344158; overflow-wrap: anywhere; }
.notification-entry small { color: #aab7ce; }
.notification-entry p { margin: 0; color: #cbd6ee; line-height: 1.5; }
.notification-entry button { justify-self: end; }
.notification-entry.is-read { opacity: .7; }
@media (max-width: 480px) { .device-assignment-card { grid-template-columns: minmax(0, 1fr); } }