@jaimevalasek/aioson 1.30.1 → 1.30.2

package/docs/design-previews/cognitive-core-ui-preview.css

@@ -0,0 +1,1315 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --cc-void: #070a10;
+  --cc-bg: #0a0f18;
+  --cc-surface: #0f1723;
+  --cc-surface-2: #131e2d;
+  --cc-surface-3: #192536;
+  --cc-inset: #0b111b;
+  --cc-border: rgba(221, 235, 255, 0.08);
+  --cc-border-strong: rgba(221, 235, 255, 0.16);
+  --cc-text: #e6edf7;
+  --cc-heading: #f7fbff;
+  --cc-muted: #8a98aa;
+  --cc-subtle: #5f6f83;
+  --cc-accent: #28d7e8;
+  --cc-accent-2: #64a8ff;
+  --cc-green: #3dd89f;
+  --cc-amber: #f5c451;
+  --cc-red: #ff6b6b;
+  --cc-violet: #a78bfa;
+  --cc-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
+  --cc-radius: 8px;
+  --cc-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --cc-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+html {
+  min-height: 100%;
+  background: var(--cc-void);
+  color: var(--cc-text);
+  font-family: var(--cc-font);
+  font-size: 15px;
+  line-height: 1.45;
+  letter-spacing: 0;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  background:
+    linear-gradient(135deg, rgba(40, 215, 232, 0.05), transparent 32%),
+    linear-gradient(180deg, #070a10 0%, #0a0f18 48%, #070a10 100%);
+  color: var(--cc-text);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.cc-page {
+  min-height: 100svh;
+  position: relative;
+  isolation: isolate;
+}
+
+.cc-page::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 36px 36px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 80%);
+}
+
+.cc-page::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    linear-gradient(115deg, rgba(40, 215, 232, 0.08), transparent 24%),
+    linear-gradient(245deg, rgba(167, 139, 250, 0.07), transparent 26%);
+  opacity: 0.7;
+}
+
+.cc-mono,
+.eyebrow,
+.metric-label,
+.status-chip,
+.nav-kicker,
+.timeline-time,
+.field-label,
+.table-head,
+.mini-code {
+  font-family: var(--cc-mono);
+  letter-spacing: 0;
+}
+
+.cc-shell {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 100svh;
+  background: rgba(7, 10, 16, 0.76);
+}
+
+.cc-topbar {
+  display: grid;
+  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  min-height: 64px;
+  padding: 12px clamp(16px, 3vw, 28px);
+  border-bottom: 1px solid var(--cc-border);
+  background: rgba(10, 15, 24, 0.9);
+  backdrop-filter: blur(18px);
+}
+
+.brand {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+}
+
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border-radius: var(--cc-radius);
+  background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2));
+  color: #041018;
+  font-weight: 800;
+  box-shadow: 0 0 24px rgba(40, 215, 232, 0.28);
+}
+
+.brand-copy {
+  min-width: 0;
+}
+
+.brand-name {
+  color: var(--cc-heading);
+  font-weight: 800;
+  line-height: 1.05;
+}
+
+.brand-sub {
+  margin-top: 2px;
+  color: var(--cc-muted);
+  font-size: 0.72rem;
+}
+
+.top-nav {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.top-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-pill {
+  flex: 0 0 auto;
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: var(--cc-radius);
+  color: var(--cc-muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.nav-pill.active {
+  border-color: rgba(40, 215, 232, 0.28);
+  background: rgba(40, 215, 232, 0.08);
+  color: var(--cc-accent);
+}
+
+.top-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.status-chip,
+.action-button,
+.ghost-button,
+.primary-button {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: var(--cc-radius);
+  white-space: normal;
+}
+
+.status-chip {
+  padding: 0 10px;
+  border: 1px solid rgba(61, 216, 159, 0.25);
+  background: rgba(61, 216, 159, 0.08);
+  color: var(--cc-green);
+  font-size: 0.72rem;
+}
+
+.status-light {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: currentColor;
+  box-shadow: 0 0 12px currentColor;
+}
+
+.action-button,
+.ghost-button,
+.primary-button {
+  border: 1px solid var(--cc-border-strong);
+  padding: 0 13px;
+  background: var(--cc-surface-2);
+  color: var(--cc-text);
+  font-weight: 700;
+  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+}
+
+.action-button:hover,
+.ghost-button:hover,
+.primary-button:hover {
+  transform: translateY(-1px);
+  border-color: rgba(40, 215, 232, 0.34);
+}
+
+.primary-button {
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2));
+  color: #041018;
+  box-shadow: 0 0 24px rgba(40, 215, 232, 0.18);
+}
+
+.ghost-button {
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--cc-muted);
+}
+
+.cc-layout {
+  display: grid;
+  grid-template-columns: minmax(190px, 236px) minmax(0, 1fr) minmax(250px, 310px);
+  min-height: 0;
+}
+
+.cc-layout.two-pane {
+  grid-template-columns: minmax(190px, 236px) minmax(0, 1fr);
+}
+
+.side-rail,
+.right-rail,
+.workspace,
+.list-pane,
+.detail-pane,
+.settings-nav,
+.settings-workspace {
+  min-width: 0;
+}
+
+.side-rail {
+  border-right: 1px solid var(--cc-border);
+  background: rgba(12, 18, 28, 0.86);
+  padding: 18px 12px;
+  overflow: auto;
+}
+
+.rail-group + .rail-group {
+  margin-top: 22px;
+}
+
+.rail-title,
+.eyebrow,
+.metric-label,
+.field-label,
+.table-head {
+  color: var(--cc-subtle);
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.rail-title {
+  padding: 0 10px 8px;
+}
+
+.rail-link {
+  width: 100%;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  border-radius: var(--cc-radius);
+  color: var(--cc-muted);
+  font-weight: 600;
+}
+
+.rail-link.active {
+  background: rgba(40, 215, 232, 0.09);
+  color: var(--cc-accent);
+}
+
+.rail-glyph {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 2px;
+  background: currentColor;
+  opacity: 0.82;
+}
+
+.workspace {
+  padding: clamp(16px, 2.5vw, 28px);
+  overflow: auto;
+}
+
+.workspace-stack {
+  display: grid;
+  gap: 18px;
+}
+
+.page-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: end;
+}
+
+.page-heading h1,
+.hero-copy h1,
+.section-heading,
+.auth-title {
+  margin: 0;
+  color: var(--cc-heading);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: 0;
+}
+
+.page-heading h1 {
+  font-size: clamp(1.6rem, 2.4vw, 2.35rem);
+}
+
+.page-heading p,
+.section-copy,
+.hero-copy p,
+.auth-copy,
+.muted-copy {
+  margin: 8px 0 0;
+  color: var(--cc-muted);
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
+  gap: 12px;
+}
+
+.metric-panel,
+.content-panel,
+.inset-panel,
+.feature-panel,
+.auth-panel,
+.settings-panel {
+  min-width: 0;
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(15, 23, 35, 0.9);
+  box-shadow: var(--cc-shadow);
+}
+
+.metric-panel {
+  padding: 16px;
+  box-shadow: none;
+}
+
+.metric-value {
+  margin-top: 9px;
+  color: var(--cc-heading);
+  font-size: clamp(1.55rem, 2vw, 2rem);
+  font-weight: 800;
+  line-height: 1;
+}
+
+.metric-note {
+  margin-top: 8px;
+  color: var(--cc-muted);
+  font-size: 0.82rem;
+}
+
+.metric-panel.accent {
+  border-color: rgba(40, 215, 232, 0.28);
+  background: linear-gradient(180deg, rgba(40, 215, 232, 0.1), rgba(15, 23, 35, 0.92));
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
+  gap: 18px;
+}
+
+.content-panel,
+.settings-panel,
+.auth-panel {
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 16px;
+  border-bottom: 1px solid var(--cc-border);
+}
+
+.panel-title {
+  margin: 0;
+  color: var(--cc-heading);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.panel-subtitle {
+  margin: 5px 0 0;
+  color: var(--cc-muted);
+  font-size: 0.84rem;
+}
+
+.panel-body {
+  padding: 16px;
+}
+
+.inset-panel {
+  background: var(--cc-inset);
+  box-shadow: none;
+}
+
+.signal-chart {
+  position: relative;
+  min-height: 240px;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: 12px;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.signal-chart::before {
+  content: "";
+  position: absolute;
+  inset: 16px 16px 48px;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 100% 25%, 12.5% 100%;
+  opacity: 0.7;
+}
+
+.chart-bars {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(16, minmax(5px, 1fr));
+  align-items: end;
+  gap: clamp(4px, 1vw, 9px);
+  min-height: 190px;
+}
+
+.bar {
+  min-height: 16px;
+  border-radius: 4px 4px 2px 2px;
+  background: linear-gradient(180deg, var(--cc-accent), rgba(40, 215, 232, 0.18));
+  animation: bar-breathe 3.6s ease-in-out infinite;
+  animation-delay: var(--delay, 0ms);
+}
+
+.bar.secondary {
+  background: linear-gradient(180deg, var(--cc-violet), rgba(167, 139, 250, 0.16));
+}
+
+@keyframes bar-breathe {
+  0%, 100% { filter: brightness(1); }
+  50% { filter: brightness(1.26); }
+}
+
+.chart-legend {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  color: var(--cc-muted);
+  font-size: 0.78rem;
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--cc-accent);
+}
+
+.legend-dot.violet {
+  background: var(--cc-violet);
+}
+
+.queue-list,
+.activity-list,
+.settings-list {
+  display: grid;
+  gap: 10px;
+}
+
+.queue-row,
+.activity-row,
+.settings-row,
+.trace-row,
+.table-row {
+  min-width: 0;
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.queue-row,
+.activity-row,
+.settings-row {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+}
+
+.row-top {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.row-title {
+  min-width: 0;
+  color: var(--cc-heading);
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.row-meta {
+  color: var(--cc-muted);
+  font-size: 0.82rem;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  border: 1px solid var(--cc-border-strong);
+  color: var(--cc-muted);
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+
+.tag.green { color: var(--cc-green); border-color: rgba(61, 216, 159, 0.28); background: rgba(61, 216, 159, 0.08); }
+.tag.amber { color: var(--cc-amber); border-color: rgba(245, 196, 81, 0.28); background: rgba(245, 196, 81, 0.08); }
+.tag.red { color: var(--cc-red); border-color: rgba(255, 107, 107, 0.28); background: rgba(255, 107, 107, 0.08); }
+.tag.violet { color: var(--cc-violet); border-color: rgba(167, 139, 250, 0.28); background: rgba(167, 139, 250, 0.08); }
+.tag.cyan { color: var(--cc-accent); border-color: rgba(40, 215, 232, 0.28); background: rgba(40, 215, 232, 0.08); }
+
+.progress {
+  width: 100%;
+  height: 7px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--cc-accent), var(--cc-green));
+}
+
+.right-rail {
+  border-left: 1px solid var(--cc-border);
+  background: rgba(12, 18, 28, 0.78);
+  padding: 16px;
+  overflow: auto;
+}
+
+.rail-panel {
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(15, 23, 35, 0.88);
+  overflow: hidden;
+}
+
+.rail-panel + .rail-panel {
+  margin-top: 12px;
+}
+
+.rail-panel .panel-body {
+  padding: 12px;
+}
+
+.timeline {
+  display: grid;
+  gap: 12px;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+}
+
+.timeline-pin {
+  width: 9px;
+  height: 9px;
+  margin-top: 5px;
+  border-radius: 999px;
+  background: var(--cc-accent);
+  box-shadow: 0 0 12px rgba(40, 215, 232, 0.58);
+}
+
+.timeline-title {
+  color: var(--cc-heading);
+  font-size: 0.84rem;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.timeline-time {
+  margin-top: 2px;
+  color: var(--cc-subtle);
+  font-size: 0.68rem;
+}
+
+.data-table {
+  display: grid;
+  gap: 8px;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: minmax(130px, 1fr) minmax(84px, 0.7fr) minmax(80px, 0.55fr) minmax(120px, 0.8fr);
+  gap: 12px;
+  align-items: center;
+  padding: 11px 12px;
+}
+
+.table-row.table-head {
+  border-color: transparent;
+  background: transparent;
+  color: var(--cc-subtle);
+  padding-block: 0;
+}
+
+.cell-primary {
+  min-width: 0;
+}
+
+.cell-title {
+  color: var(--cc-heading);
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.cell-sub {
+  margin-top: 2px;
+  color: var(--cc-muted);
+  font-size: 0.78rem;
+}
+
+.mini-code {
+  color: var(--cc-muted);
+  font-size: 0.78rem;
+  overflow-wrap: anywhere;
+}
+
+.landing-nav {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: minmax(190px, 1fr) auto auto;
+  gap: 18px;
+  align-items: center;
+  min-height: 66px;
+  padding: 12px clamp(16px, 4vw, 48px);
+  border-bottom: 1px solid var(--cc-border);
+  background: rgba(7, 10, 16, 0.88);
+  backdrop-filter: blur(18px);
+}
+
+.landing-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(10px, 2vw, 24px);
+  color: var(--cc-muted);
+  font-weight: 600;
+  flex-wrap: wrap;
+}
+
+.landing-hero {
+  position: relative;
+  min-height: clamp(500px, calc(100svh - 240px), 720px);
+  display: grid;
+  align-items: center;
+  padding: clamp(48px, 8vw, 84px) clamp(16px, 4vw, 48px);
+  overflow: hidden;
+}
+
+.hero-product-scene {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  display: grid;
+  grid-template-columns: minmax(80px, 0.7fr) minmax(440px, 1.35fr) minmax(120px, 0.8fr);
+  gap: 18px;
+  padding: 90px clamp(18px, 4vw, 58px) 36px;
+  opacity: 0.88;
+  transform: translateX(12%);
+}
+
+.hero-product-scene::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(7, 10, 16, 0.9), rgba(7, 10, 16, 0.48) 42%, rgba(7, 10, 16, 0.12)),
+    linear-gradient(180deg, rgba(7, 10, 16, 0.05), rgba(7, 10, 16, 0.58));
+}
+
+.scene-panel {
+  min-width: 0;
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(15, 23, 35, 0.92);
+  overflow: hidden;
+  box-shadow: var(--cc-shadow);
+}
+
+.scene-main {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.scene-header {
+  padding: 14px;
+  border-bottom: 1px solid var(--cc-border);
+  color: var(--cc-heading);
+  font-weight: 700;
+}
+
+.scene-grid {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(12px, 1fr));
+  align-items: end;
+  gap: 8px;
+  min-height: 260px;
+  padding: 18px;
+}
+
+.scene-bar {
+  border-radius: 4px 4px 2px 2px;
+  background: linear-gradient(180deg, var(--cc-accent), rgba(40, 215, 232, 0.14));
+}
+
+.scene-footer {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  padding: 14px;
+  border-top: 1px solid var(--cc-border);
+}
+
+.scene-stat {
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.hero-copy {
+  max-width: 680px;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-copy h1 {
+  font-size: clamp(2.5rem, 8vw, 6.2rem);
+  max-width: 10ch;
+}
+
+.hero-copy p {
+  max-width: 590px;
+  font-size: clamp(1rem, 1.6vw, 1.22rem);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.landing-section {
+  padding: clamp(48px, 8vw, 82px) clamp(16px, 4vw, 48px);
+}
+
+.section-inner {
+  max-width: 1180px;
+  margin: 0 auto;
+}
+
+.section-heading {
+  font-size: clamp(2rem, 4vw, 3.4rem);
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 16px;
+  margin-top: 26px;
+}
+
+.feature-panel {
+  padding: 20px;
+  box-shadow: none;
+}
+
+.feature-panel h3 {
+  margin: 12px 0 8px;
+  color: var(--cc-heading);
+  font-size: 1.04rem;
+}
+
+.feature-panel p {
+  margin: 0;
+  color: var(--cc-muted);
+}
+
+.mini-metric {
+  color: var(--cc-accent);
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.list-detail-shell {
+  display: grid;
+  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) minmax(250px, 320px);
+  gap: 16px;
+}
+
+.list-pane,
+.detail-pane {
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(15, 23, 35, 0.9);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.detail-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: start;
+  padding: 18px;
+  border-bottom: 1px solid var(--cc-border);
+}
+
+.trace-map {
+  display: grid;
+  gap: 10px;
+}
+
+.trace-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+}
+
+.trace-step {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: rgba(40, 215, 232, 0.1);
+  color: var(--cc-accent);
+  font-weight: 800;
+}
+
+.auth-shell {
+  min-height: 100svh;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
+  gap: clamp(18px, 4vw, 54px);
+  align-items: center;
+  padding: clamp(20px, 5vw, 64px);
+}
+
+.auth-visual {
+  min-width: 0;
+  display: grid;
+  gap: 18px;
+}
+
+.auth-title {
+  font-size: clamp(2.1rem, 6vw, 5rem);
+  max-width: 11ch;
+}
+
+.auth-panel {
+  padding: clamp(18px, 4vw, 30px);
+}
+
+.auth-form {
+  display: grid;
+  gap: 14px;
+  margin-top: 24px;
+}
+
+.field {
+  display: grid;
+  gap: 7px;
+}
+
+.input {
+  min-height: 44px;
+  width: 100%;
+  border: 1px solid var(--cc-border-strong);
+  border-radius: var(--cc-radius);
+  background: var(--cc-inset);
+  color: var(--cc-text);
+  padding: 0 12px;
+  outline: none;
+}
+
+.input:focus {
+  border-color: rgba(40, 215, 232, 0.45);
+  box-shadow: 0 0 0 3px rgba(40, 215, 232, 0.12);
+}
+
+.settings-shell {
+  display: grid;
+  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
+  gap: 16px;
+}
+
+.settings-nav,
+.settings-workspace {
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(15, 23, 35, 0.9);
+  overflow: hidden;
+}
+
+.settings-nav {
+  padding: 12px;
+}
+
+.settings-workspace {
+  display: grid;
+  gap: 0;
+}
+
+.settings-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.toggle {
+  width: 44px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid rgba(40, 215, 232, 0.24);
+  background: rgba(40, 215, 232, 0.1);
+  position: relative;
+}
+
+.toggle::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--cc-accent);
+  box-shadow: 0 0 14px rgba(40, 215, 232, 0.45);
+}
+
+.toggle.off {
+  border-color: var(--cc-border-strong);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.toggle.off::after {
+  right: auto;
+  left: 3px;
+  background: var(--cc-subtle);
+  box-shadow: none;
+}
+
+.kanban-toolbar {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.kanban-board {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+  gap: 14px;
+  align-items: start;
+}
+
+.kanban-column {
+  min-width: 0;
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background: rgba(15, 23, 35, 0.74);
+  overflow: hidden;
+}
+
+.kanban-column-header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 13px 14px;
+  border-bottom: 1px solid var(--cc-border);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.kanban-column-title {
+  min-width: 0;
+  color: var(--cc-heading);
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.kanban-column-count {
+  flex: 0 0 auto;
+}
+
+.kanban-stack {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+}
+
+.kanban-card {
+  min-width: 0;
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
+    var(--cc-inset);
+}
+
+.kanban-card.featured {
+  border-color: rgba(40, 215, 232, 0.28);
+  box-shadow: inset 0 1px 0 rgba(40, 215, 232, 0.18);
+}
+
+.kanban-card-title {
+  color: var(--cc-heading);
+  font-weight: 700;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.kanban-card-meta {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--cc-muted);
+  font-size: 0.8rem;
+}
+
+.avatar-group {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--cc-border-strong);
+  border-radius: 999px;
+  background: var(--cc-surface-3);
+  color: var(--cc-text);
+  font-size: 0.68rem;
+  font-weight: 800;
+}
+
+.avatar + .avatar {
+  margin-left: -6px;
+}
+
+.kanban-swimlane {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--cc-border);
+}
+
+.kanban-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 12px;
+}
+
+.footer-note {
+  color: var(--cc-subtle);
+  font-size: 0.78rem;
+}
+
+@media (max-width: 1180px) {
+  .cc-layout {
+    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
+  }
+
+  .right-rail {
+    grid-column: 1 / -1;
+    border-left: 0;
+    border-top: 1px solid var(--cc-border);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 12px;
+  }
+
+  .rail-panel + .rail-panel {
+    margin-top: 0;
+  }
+
+  .content-grid,
+  .list-detail-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .list-detail-shell .right-rail {
+    display: block;
+    border: 1px solid var(--cc-border);
+    border-radius: var(--cc-radius);
+  }
+}
+
+@media (max-width: 840px) {
+  .cc-shell {
+    min-height: auto;
+  }
+
+  .cc-topbar,
+  .landing-nav {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .top-nav,
+  .landing-links,
+  .top-actions {
+    justify-content: flex-start;
+  }
+
+  .top-nav {
+    flex-wrap: wrap;
+    overflow-x: visible;
+  }
+
+  .cc-layout,
+  .cc-layout.two-pane,
+  .settings-shell,
+  .auth-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .side-rail {
+    order: 2;
+  }
+
+  .workspace {
+    order: 1;
+  }
+
+  .right-rail {
+    order: 3;
+  }
+
+  .side-rail {
+    border-right: 0;
+    border-bottom: 1px solid var(--cc-border);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 12px;
+  }
+
+  .rail-group + .rail-group {
+    margin-top: 0;
+  }
+
+  .page-heading,
+  .detail-hero,
+  .settings-row {
+    grid-template-columns: 1fr;
+  }
+
+  .table-row,
+  .table-row.table-head {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .hero-product-scene {
+    grid-template-columns: 1fr;
+    transform: none;
+    opacity: 0.46;
+  }
+
+  .scene-panel:not(.scene-main) {
+    display: none;
+  }
+
+  .landing-hero {
+    min-height: clamp(480px, calc(100svh - 220px), 640px);
+  }
+}
+
+@media (max-width: 560px) {
+  html {
+    font-size: 14px;
+  }
+
+  .workspace,
+  .right-rail {
+    padding: 14px;
+  }
+
+  .metric-grid,
+  .feature-grid,
+  .scene-footer {
+    grid-template-columns: 1fr;
+  }
+
+  .table-row,
+  .table-row.table-head,
+  .trace-row {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-bars {
+    grid-template-columns: repeat(8, minmax(8px, 1fr));
+  }
+
+  .chart-bars .bar:nth-child(n + 9) {
+    display: none;
+  }
+}