/*! Psyn UI v0.1.1 | MIT | psyn.app */
/* Psyn UI design tokens — generated from tokens/tokens.json. Do not edit by hand. */
:root {
  --psy-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --psy-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* color (dark) */
  --psy-color-bg: #0d0d0d;
  --psy-color-surface-1: #141414;
  --psy-color-surface-2: #1e1e1e;
  --psy-color-surface-3: #242424;
  --psy-color-border: #2a2a2a;
  --psy-color-border-strong: #3a3a3a;
  --psy-color-text: #f0f0f0;
  --psy-color-text-muted: #888888;
  --psy-color-text-faint: #5a5a5a;
  --psy-color-accent: #3178c6;
  --psy-color-accent-hover: #4f94d9;
  --psy-color-accent-soft: #15314e;
  --psy-color-on-accent: #ffffff;
  --psy-color-green: #4ade80;
  --psy-color-green-soft: #14532d;
  --psy-color-red: #f87171;
  --psy-color-red-soft: #7f1d1d;
  --psy-color-yellow: #facc15;
  --psy-color-yellow-soft: #713f12;
  --psy-color-blue: #5aabea;
  --psy-color-blue-soft: #102a3f;

  /* spacing */
  --psy-space-0: 0;
  --psy-space-1: 4px;
  --psy-space-2: 8px;
  --psy-space-3: 12px;
  --psy-space-4: 16px;
  --psy-space-5: 24px;
  --psy-space-6: 32px;
  --psy-space-7: 48px;
  --psy-space-8: 64px;

  /* type scale */
  --psy-text-xs: 12px;
  --psy-text-sm: 13px;
  --psy-text-base: 15px;
  --psy-text-lg: 18px;
  --psy-text-xl: 22px;
  --psy-text-2xl: 28px;
  --psy-text-3xl: 38px;
  --psy-leading-tight: 1.2;
  --psy-leading-normal: 1.5;
  --psy-leading-relaxed: 1.7;
  --psy-weight-normal: 400;
  --psy-weight-medium: 500;
  --psy-weight-bold: 700;

  /* radius */
  --psy-radius-sm: 4px;
  --psy-radius-md: 8px;
  --psy-radius-lg: 14px;
  --psy-radius-full: 9999px;

  /* shadow */
  --psy-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --psy-shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --psy-shadow-lg: 0 12px 32px rgba(0,0,0,0.55);

  /* z-index */
  --psy-z-base: 1;
  --psy-z-dropdown: 1000;
  --psy-z-sticky: 1020;
  --psy-z-modal-backdrop: 1040;
  --psy-z-modal: 1050;
  --psy-z-tooltip: 1070;
}

/* light theme — overrides color tokens only */
[data-theme="light"] {
  --psy-color-bg: #fafafa;
  --psy-color-surface-1: #ffffff;
  --psy-color-surface-2: #f4f4f5;
  --psy-color-surface-3: #e9e9ec;
  --psy-color-border: #e0e0e3;
  --psy-color-border-strong: #cccccf;
  --psy-color-text: #18181b;
  --psy-color-text-muted: #71717a;
  --psy-color-text-faint: #a1a1aa;
  --psy-color-accent: #1b5fa8;
  --psy-color-accent-hover: #3178c6;
  --psy-color-accent-soft: #dceafb;
  --psy-color-on-accent: #ffffff;
  --psy-color-green: #16a34a;
  --psy-color-green-soft: #dcfce7;
  --psy-color-red: #dc2626;
  --psy-color-red-soft: #fee2e2;
  --psy-color-yellow: #ca8a04;
  --psy-color-yellow-soft: #fef9c3;
  --psy-color-blue: #1c74b5;
  --psy-color-blue-soft: #e3f1fc;
}


/* Psyn UI — reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: var(--psy-leading-normal);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

:focus-visible {
  outline: 2px solid var(--psy-color-accent);
  outline-offset: 2px;
  border-radius: var(--psy-radius-sm);
}

:where(button, a, input, select, textarea):focus:not(:focus-visible) {
  outline: none;
}


/* Psyn UI — base elements */
body {
  background: var(--psy-color-bg);
  color: var(--psy-color-text);
  font-family: var(--psy-font-ui);
  font-size: var(--psy-text-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--psy-weight-bold);
  line-height: var(--psy-leading-tight);
  color: var(--psy-color-text);
}

h1 {
  font-size: var(--psy-text-3xl);
}
h2 {
  font-size: var(--psy-text-2xl);
}
h3 {
  font-size: var(--psy-text-xl);
}
h4 {
  font-size: var(--psy-text-lg);
}
h5 {
  font-size: var(--psy-text-base);
}
h6 {
  font-size: var(--psy-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--psy-color-text-muted);
}

p {
  line-height: var(--psy-leading-relaxed);
}

a {
  color: var(--psy-color-accent);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--psy-color-accent-hover);
}

small {
  font-size: var(--psy-text-sm);
}

strong,
b {
  font-weight: var(--psy-weight-bold);
}

code,
kbd,
samp {
  font-family: var(--psy-font-mono);
  font-size: 0.9em;
}

:not(pre) > code {
  background: var(--psy-color-surface-2);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-sm);
  padding: 0.1em 0.4em;
  color: var(--psy-color-accent-hover);
}

pre {
  font-family: var(--psy-font-mono);
  font-size: var(--psy-text-sm);
  line-height: var(--psy-leading-normal);
  background: var(--psy-color-surface-1);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-md);
  padding: var(--psy-space-4);
  overflow-x: auto;
}

ul,
ol {
  padding-left: var(--psy-space-5);
  line-height: var(--psy-leading-relaxed);
}

hr {
  border: none;
  border-top: 1px solid var(--psy-color-border);
  margin: var(--psy-space-5) 0;
}

::selection {
  background: var(--psy-color-accent);
  color: var(--psy-color-on-accent);
}


/* Psyn UI — layout: container, 12-col grid, flex helpers */
.psy-container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--psy-space-4);
}
.psy-container-wide {
  max-width: 1320px;
}
.psy-container-narrow {
  max-width: 760px;
}

/* grid */
.psy-row {
  --psy-gutter: var(--psy-space-5);
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--psy-gutter) / -2);
}
.psy-row > [class*="psy-col"] {
  padding-inline: calc(var(--psy-gutter) / 2);
}

[class*="psy-col-"] {
  flex: 0 0 auto;
}
.psy-col {
  flex: 1 1 0;
  min-width: 0;
}

.psy-col-1 {
  width: 8.3333%;
}
.psy-col-2 {
  width: 16.6667%;
}
.psy-col-3 {
  width: 25%;
}
.psy-col-4 {
  width: 33.3333%;
}
.psy-col-5 {
  width: 41.6667%;
}
.psy-col-6 {
  width: 50%;
}
.psy-col-7 {
  width: 58.3333%;
}
.psy-col-8 {
  width: 66.6667%;
}
.psy-col-9 {
  width: 75%;
}
.psy-col-10 {
  width: 83.3333%;
}
.psy-col-11 {
  width: 91.6667%;
}
.psy-col-12 {
  width: 100%;
}

@media (min-width: 576px) {
  .psy-col-sm-1 { width: 8.3333%; }
  .psy-col-sm-2 { width: 16.6667%; }
  .psy-col-sm-3 { width: 25%; }
  .psy-col-sm-4 { width: 33.3333%; }
  .psy-col-sm-5 { width: 41.6667%; }
  .psy-col-sm-6 { width: 50%; }
  .psy-col-sm-7 { width: 58.3333%; }
  .psy-col-sm-8 { width: 66.6667%; }
  .psy-col-sm-9 { width: 75%; }
  .psy-col-sm-10 { width: 83.3333%; }
  .psy-col-sm-11 { width: 91.6667%; }
  .psy-col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  .psy-col-md-1 { width: 8.3333%; }
  .psy-col-md-2 { width: 16.6667%; }
  .psy-col-md-3 { width: 25%; }
  .psy-col-md-4 { width: 33.3333%; }
  .psy-col-md-5 { width: 41.6667%; }
  .psy-col-md-6 { width: 50%; }
  .psy-col-md-7 { width: 58.3333%; }
  .psy-col-md-8 { width: 66.6667%; }
  .psy-col-md-9 { width: 75%; }
  .psy-col-md-10 { width: 83.3333%; }
  .psy-col-md-11 { width: 91.6667%; }
  .psy-col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
  .psy-col-lg-1 { width: 8.3333%; }
  .psy-col-lg-2 { width: 16.6667%; }
  .psy-col-lg-3 { width: 25%; }
  .psy-col-lg-4 { width: 33.3333%; }
  .psy-col-lg-5 { width: 41.6667%; }
  .psy-col-lg-6 { width: 50%; }
  .psy-col-lg-7 { width: 58.3333%; }
  .psy-col-lg-8 { width: 66.6667%; }
  .psy-col-lg-9 { width: 75%; }
  .psy-col-lg-10 { width: 83.3333%; }
  .psy-col-lg-11 { width: 91.6667%; }
  .psy-col-lg-12 { width: 100%; }
}

/* flex helpers */
.psy-d-flex { display: flex; }
.psy-d-inline-flex { display: inline-flex; }
.psy-d-grid { display: grid; }
.psy-flex-col { flex-direction: column; }
.psy-flex-wrap { flex-wrap: wrap; }
.psy-flex-1 { flex: 1 1 0; min-width: 0; }
.psy-items-start { align-items: flex-start; }
.psy-items-center { align-items: center; }
.psy-items-end { align-items: flex-end; }
.psy-items-stretch { align-items: stretch; }
.psy-justify-start { justify-content: flex-start; }
.psy-justify-center { justify-content: center; }
.psy-justify-end { justify-content: flex-end; }
.psy-justify-between { justify-content: space-between; }
.psy-justify-around { justify-content: space-around; }

.psy-gap-0 { gap: var(--psy-space-0); }
.psy-gap-1 { gap: var(--psy-space-1); }
.psy-gap-2 { gap: var(--psy-space-2); }
.psy-gap-3 { gap: var(--psy-space-3); }
.psy-gap-4 { gap: var(--psy-space-4); }
.psy-gap-5 { gap: var(--psy-space-5); }
.psy-gap-6 { gap: var(--psy-space-6); }


/* Psyn UI — utilities: spacing, display, text, color, border, sizing */

/* margin */
.psy-m-0 { margin: var(--psy-space-0); }
.psy-m-1 { margin: var(--psy-space-1); }
.psy-m-2 { margin: var(--psy-space-2); }
.psy-m-3 { margin: var(--psy-space-3); }
.psy-m-4 { margin: var(--psy-space-4); }
.psy-m-5 { margin: var(--psy-space-5); }
.psy-m-6 { margin: var(--psy-space-6); }
.psy-m-auto { margin: auto; }

.psy-mt-0 { margin-top: var(--psy-space-0); }
.psy-mt-1 { margin-top: var(--psy-space-1); }
.psy-mt-2 { margin-top: var(--psy-space-2); }
.psy-mt-3 { margin-top: var(--psy-space-3); }
.psy-mt-4 { margin-top: var(--psy-space-4); }
.psy-mt-5 { margin-top: var(--psy-space-5); }
.psy-mt-6 { margin-top: var(--psy-space-6); }

.psy-mb-0 { margin-bottom: var(--psy-space-0); }
.psy-mb-1 { margin-bottom: var(--psy-space-1); }
.psy-mb-2 { margin-bottom: var(--psy-space-2); }
.psy-mb-3 { margin-bottom: var(--psy-space-3); }
.psy-mb-4 { margin-bottom: var(--psy-space-4); }
.psy-mb-5 { margin-bottom: var(--psy-space-5); }
.psy-mb-6 { margin-bottom: var(--psy-space-6); }

.psy-mx-0 { margin-inline: var(--psy-space-0); }
.psy-mx-1 { margin-inline: var(--psy-space-1); }
.psy-mx-2 { margin-inline: var(--psy-space-2); }
.psy-mx-3 { margin-inline: var(--psy-space-3); }
.psy-mx-4 { margin-inline: var(--psy-space-4); }
.psy-mx-auto { margin-inline: auto; }
.psy-my-0 { margin-block: var(--psy-space-0); }
.psy-my-1 { margin-block: var(--psy-space-1); }
.psy-my-2 { margin-block: var(--psy-space-2); }
.psy-my-3 { margin-block: var(--psy-space-3); }
.psy-my-4 { margin-block: var(--psy-space-4); }
.psy-my-5 { margin-block: var(--psy-space-5); }

/* padding */
.psy-p-0 { padding: var(--psy-space-0); }
.psy-p-1 { padding: var(--psy-space-1); }
.psy-p-2 { padding: var(--psy-space-2); }
.psy-p-3 { padding: var(--psy-space-3); }
.psy-p-4 { padding: var(--psy-space-4); }
.psy-p-5 { padding: var(--psy-space-5); }
.psy-p-6 { padding: var(--psy-space-6); }

.psy-pt-0 { padding-top: var(--psy-space-0); }
.psy-pt-2 { padding-top: var(--psy-space-2); }
.psy-pt-4 { padding-top: var(--psy-space-4); }
.psy-pb-0 { padding-bottom: var(--psy-space-0); }
.psy-pb-2 { padding-bottom: var(--psy-space-2); }
.psy-pb-4 { padding-bottom: var(--psy-space-4); }
.psy-px-2 { padding-inline: var(--psy-space-2); }
.psy-px-3 { padding-inline: var(--psy-space-3); }
.psy-px-4 { padding-inline: var(--psy-space-4); }
.psy-py-2 { padding-block: var(--psy-space-2); }
.psy-py-3 { padding-block: var(--psy-space-3); }
.psy-py-4 { padding-block: var(--psy-space-4); }

/* display */
.psy-d-none { display: none; }
.psy-d-block { display: block; }
.psy-d-inline { display: inline; }
.psy-d-inline-block { display: inline-block; }

/* text */
.psy-text-xs { font-size: var(--psy-text-xs); }
.psy-text-sm { font-size: var(--psy-text-sm); }
.psy-text-base { font-size: var(--psy-text-base); }
.psy-text-lg { font-size: var(--psy-text-lg); }
.psy-text-xl { font-size: var(--psy-text-xl); }
.psy-text-2xl { font-size: var(--psy-text-2xl); }
.psy-text-3xl { font-size: var(--psy-text-3xl); }

.psy-font-normal { font-weight: var(--psy-weight-normal); }
.psy-font-medium { font-weight: var(--psy-weight-medium); }
.psy-font-bold { font-weight: var(--psy-weight-bold); }
.psy-font-mono { font-family: var(--psy-font-mono); }

.psy-text-left { text-align: left; }
.psy-text-center { text-align: center; }
.psy-text-right { text-align: right; }
.psy-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.psy-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* text color */
.psy-text-default { color: var(--psy-color-text); }
.psy-text-muted { color: var(--psy-color-text-muted); }
.psy-text-faint { color: var(--psy-color-text-faint); }
.psy-text-accent { color: var(--psy-color-accent); }
.psy-text-green { color: var(--psy-color-green); }
.psy-text-red { color: var(--psy-color-red); }
.psy-text-yellow { color: var(--psy-color-yellow); }
.psy-text-blue { color: var(--psy-color-blue); }

/* background */
.psy-bg-bg { background: var(--psy-color-bg); }
.psy-bg-surface-1 { background: var(--psy-color-surface-1); }
.psy-bg-surface-2 { background: var(--psy-color-surface-2); }
.psy-bg-surface-3 { background: var(--psy-color-surface-3); }
.psy-bg-accent { background: var(--psy-color-accent); color: var(--psy-color-on-accent); }

/* border + radius */
.psy-border { border: 1px solid var(--psy-color-border); }
.psy-border-0 { border: 0; }
.psy-border-top { border-top: 1px solid var(--psy-color-border); }
.psy-border-bottom { border-bottom: 1px solid var(--psy-color-border); }
.psy-rounded-sm { border-radius: var(--psy-radius-sm); }
.psy-rounded { border-radius: var(--psy-radius-md); }
.psy-rounded-lg { border-radius: var(--psy-radius-lg); }
.psy-rounded-full { border-radius: var(--psy-radius-full); }

/* shadow */
.psy-shadow-sm { box-shadow: var(--psy-shadow-sm); }
.psy-shadow { box-shadow: var(--psy-shadow-md); }
.psy-shadow-lg { box-shadow: var(--psy-shadow-lg); }

/* sizing */
.psy-w-100 { width: 100%; }
.psy-w-auto { width: auto; }
.psy-h-100 { height: 100%; }
.psy-mw-100 { max-width: 100%; }

/* position */
.psy-relative { position: relative; }
.psy-sticky-top { position: sticky; top: 0; z-index: var(--psy-z-sticky); }

/* responsive display */
@media (max-width: 767.98px) {
  .psy-d-md-none { display: none; }
}
@media (min-width: 768px) {
  .psy-d-md-block { display: block; }
  .psy-d-md-flex { display: flex; }
}


/* Psyn UI — components */

/* ---------- buttons ---------- */
.psy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--psy-space-2);
  font-size: var(--psy-text-sm);
  font-weight: var(--psy-weight-medium);
  line-height: 1;
  padding: 9px 16px;
  border: 1px solid var(--psy-color-border-strong);
  border-radius: var(--psy-radius-md);
  background: var(--psy-color-surface-2);
  color: var(--psy-color-text);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}
.psy-btn:hover {
  background: var(--psy-color-surface-3);
  border-color: var(--psy-color-text-faint);
}
.psy-btn:disabled,
.psy-btn.psy-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.psy-btn-primary {
  background: var(--psy-color-accent);
  border-color: var(--psy-color-accent);
  color: var(--psy-color-on-accent);
}
.psy-btn-primary:hover {
  background: var(--psy-color-accent-hover);
  border-color: var(--psy-color-accent-hover);
}
.psy-btn-secondary {
  background: transparent;
  border-color: var(--psy-color-border-strong);
  color: var(--psy-color-text);
}
.psy-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--psy-color-text-muted);
}
.psy-btn-ghost:hover {
  background: var(--psy-color-surface-2);
  color: var(--psy-color-text);
  border-color: transparent;
}
.psy-btn-danger {
  background: var(--psy-color-red);
  border-color: var(--psy-color-red);
  color: #fff;
}
.psy-btn-danger:hover {
  filter: brightness(1.08);
}
.psy-btn-sm {
  font-size: var(--psy-text-xs);
  padding: 6px 11px;
}
.psy-btn-lg {
  font-size: var(--psy-text-base);
  padding: 12px 22px;
}
.psy-btn-block {
  display: flex;
  width: 100%;
}

.psy-btn-group {
  display: inline-flex;
}
.psy-btn-group .psy-btn {
  border-radius: 0;
  margin-left: -1px;
}
.psy-btn-group .psy-btn:first-child {
  border-top-left-radius: var(--psy-radius-md);
  border-bottom-left-radius: var(--psy-radius-md);
  margin-left: 0;
}
.psy-btn-group .psy-btn:last-child {
  border-top-right-radius: var(--psy-radius-md);
  border-bottom-right-radius: var(--psy-radius-md);
}

/* ---------- forms ---------- */
.psy-field {
  display: flex;
  flex-direction: column;
  gap: var(--psy-space-2);
  margin-bottom: var(--psy-space-4);
}
.psy-label {
  font-size: var(--psy-text-sm);
  font-weight: var(--psy-weight-medium);
  color: var(--psy-color-text);
}
.psy-input,
.psy-select,
.psy-textarea {
  width: 100%;
  font-size: var(--psy-text-sm);
  color: var(--psy-color-text);
  background: var(--psy-color-surface-1);
  border: 1px solid var(--psy-color-border-strong);
  border-radius: var(--psy-radius-md);
  padding: 9px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.psy-input::placeholder,
.psy-textarea::placeholder {
  color: var(--psy-color-text-faint);
}
.psy-input:focus,
.psy-select:focus,
.psy-textarea:focus {
  outline: none;
  border-color: var(--psy-color-accent);
  box-shadow: 0 0 0 3px var(--psy-color-accent-soft);
}
.psy-textarea {
  min-height: 96px;
  resize: vertical;
}
.psy-field-help {
  font-size: var(--psy-text-xs);
  color: var(--psy-color-text-muted);
}
.psy-field-error .psy-input,
.psy-field-error .psy-select,
.psy-field-error .psy-textarea {
  border-color: var(--psy-color-red);
}
.psy-field-error .psy-field-help {
  color: var(--psy-color-red);
}

.psy-check,
.psy-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--psy-space-2);
  font-size: var(--psy-text-sm);
  cursor: pointer;
}
.psy-check input,
.psy-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--psy-color-accent);
}

.psy-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  cursor: pointer;
}
.psy-switch input {
  position: absolute;
  opacity: 0;
}
.psy-switch-track {
  width: 38px;
  height: 22px;
  border-radius: var(--psy-radius-full);
  background: var(--psy-color-surface-3);
  border: 1px solid var(--psy-color-border-strong);
  transition: background 0.15s ease;
}
.psy-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--psy-color-text-muted);
  transition: transform 0.15s ease, background 0.15s ease;
}
.psy-switch input:checked + .psy-switch-track {
  background: var(--psy-color-accent);
  border-color: var(--psy-color-accent);
}
.psy-switch input:checked + .psy-switch-track::after {
  transform: translateX(16px);
  background: #fff;
}

/* ---------- card ---------- */
.psy-card {
  background: var(--psy-color-surface-1);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-lg);
  overflow: hidden;
}
.psy-card-header {
  padding: var(--psy-space-4);
  border-bottom: 1px solid var(--psy-color-border);
  font-weight: var(--psy-weight-medium);
}
.psy-card-body {
  padding: var(--psy-space-4);
}
.psy-card-footer {
  padding: var(--psy-space-4);
  border-top: 1px solid var(--psy-color-border);
  background: var(--psy-color-surface-2);
}

/* ---------- badge + tag ---------- */
.psy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--psy-space-1);
  font-size: var(--psy-text-xs);
  font-weight: var(--psy-weight-medium);
  padding: 2px 8px;
  border-radius: var(--psy-radius-full);
  background: var(--psy-color-surface-3);
  color: var(--psy-color-text-muted);
}
.psy-badge-accent { background: var(--psy-color-accent-soft); color: var(--psy-color-accent-hover); }
.psy-badge-green { background: var(--psy-color-green-soft); color: var(--psy-color-green); }
.psy-badge-red { background: var(--psy-color-red-soft); color: var(--psy-color-red); }
.psy-badge-yellow { background: var(--psy-color-yellow-soft); color: var(--psy-color-yellow); }
.psy-badge-blue { background: var(--psy-color-blue-soft); color: var(--psy-color-blue); }

.psy-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--psy-space-1);
  font-size: var(--psy-text-xs);
  padding: 3px 9px;
  border: 1px solid var(--psy-color-border-strong);
  border-radius: var(--psy-radius-sm);
  color: var(--psy-color-text-muted);
}

/* ---------- alert ---------- */
.psy-alert {
  display: flex;
  gap: var(--psy-space-3);
  padding: var(--psy-space-3) var(--psy-space-4);
  border: 1px solid var(--psy-color-border);
  border-left-width: 3px;
  border-radius: var(--psy-radius-md);
  background: var(--psy-color-surface-1);
  font-size: var(--psy-text-sm);
  line-height: var(--psy-leading-normal);
}
.psy-alert-info { border-left-color: var(--psy-color-blue); }
.psy-alert-success { border-left-color: var(--psy-color-green); }
.psy-alert-warning { border-left-color: var(--psy-color-yellow); }
.psy-alert-danger { border-left-color: var(--psy-color-red); }

/* ---------- navbar + nav ---------- */
.psy-navbar {
  display: flex;
  align-items: center;
  gap: var(--psy-space-5);
  height: 56px;
  padding-inline: var(--psy-space-5);
  background: var(--psy-color-surface-1);
  border-bottom: 1px solid var(--psy-color-border);
}
.psy-navbar-brand {
  font-weight: var(--psy-weight-bold);
  font-size: var(--psy-text-lg);
  color: var(--psy-color-text);
}
.psy-nav {
  display: flex;
  align-items: center;
  gap: var(--psy-space-1);
}
.psy-nav a {
  color: var(--psy-color-text-muted);
  font-size: var(--psy-text-sm);
  padding: 7px 12px;
  border-radius: var(--psy-radius-md);
  transition: color 0.15s ease, background 0.15s ease;
}
.psy-nav a:hover,
.psy-nav a.psy-active {
  color: var(--psy-color-text);
  background: var(--psy-color-surface-2);
}

/* ---------- tabs ---------- */
.psy-tabs {
  display: flex;
  gap: var(--psy-space-1);
  border-bottom: 1px solid var(--psy-color-border);
}
.psy-tab {
  padding: 9px 14px;
  font-size: var(--psy-text-sm);
  color: var(--psy-color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.psy-tab:hover { color: var(--psy-color-text); }
.psy-tab.psy-active {
  color: var(--psy-color-accent-hover);
  border-bottom-color: var(--psy-color-accent);
}
.psy-tab-panel { display: none; padding-top: var(--psy-space-4); }
.psy-tab-panel.psy-active { display: block; }

/* ---------- modal ---------- */
.psy-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--psy-z-modal-backdrop);
  display: none;
}
.psy-modal-backdrop.psy-open { display: block; }
.psy-modal {
  position: fixed;
  inset: 0;
  z-index: var(--psy-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--psy-space-4);
}
.psy-modal.psy-open { display: flex; }
.psy-modal-dialog {
  width: 100%;
  max-width: 480px;
  background: var(--psy-color-surface-1);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-lg);
  box-shadow: var(--psy-shadow-lg);
}
.psy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--psy-space-4);
  border-bottom: 1px solid var(--psy-color-border);
  font-weight: var(--psy-weight-medium);
}
.psy-modal-body { padding: var(--psy-space-4); }
.psy-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--psy-space-2);
  padding: var(--psy-space-4);
  border-top: 1px solid var(--psy-color-border);
}

/* ---------- dropdown ---------- */
.psy-dropdown { position: relative; display: inline-block; }
.psy-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--psy-color-surface-2);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-md);
  box-shadow: var(--psy-shadow-md);
  padding: var(--psy-space-1);
  z-index: var(--psy-z-dropdown);
  display: none;
}
.psy-dropdown-menu.psy-open { display: block; }
.psy-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--psy-text-sm);
  color: var(--psy-color-text);
  padding: 7px 10px;
  border-radius: var(--psy-radius-sm);
}
.psy-dropdown-item:hover { background: var(--psy-color-surface-3); }
.psy-dropdown-divider {
  height: 1px;
  background: var(--psy-color-border);
  margin: var(--psy-space-1) 0;
}

/* ---------- table ---------- */
.psy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--psy-text-sm);
}
.psy-table th,
.psy-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--psy-color-border);
}
.psy-table th {
  color: var(--psy-color-text-muted);
  font-weight: var(--psy-weight-medium);
  font-size: var(--psy-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.psy-table-striped tbody tr:nth-child(odd) { background: var(--psy-color-surface-1); }
.psy-table-hover tbody tr:hover { background: var(--psy-color-surface-2); }

/* ---------- tooltip ---------- */
.psy-tooltip { position: relative; display: inline-flex; }
.psy-tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--psy-text-xs);
  background: var(--psy-color-surface-3);
  color: var(--psy-color-text);
  border: 1px solid var(--psy-color-border-strong);
  border-radius: var(--psy-radius-sm);
  padding: 4px 8px;
  box-shadow: var(--psy-shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: var(--psy-z-tooltip);
}
.psy-tooltip:hover .psy-tooltip-bubble,
.psy-tooltip:focus-within .psy-tooltip-bubble { opacity: 1; }

/* ---------- progress ---------- */
.psy-progress {
  width: 100%;
  height: 8px;
  background: var(--psy-color-surface-3);
  border-radius: var(--psy-radius-full);
  overflow: hidden;
}
.psy-progress-bar {
  height: 100%;
  background: var(--psy-color-accent);
  border-radius: var(--psy-radius-full);
  transition: width 0.3s ease;
}

/* ---------- breadcrumb ---------- */
.psy-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--psy-space-2);
  font-size: var(--psy-text-sm);
  color: var(--psy-color-text-muted);
  list-style: none;
  padding: 0;
}
.psy-breadcrumb li { display: flex; align-items: center; gap: var(--psy-space-2); }
.psy-breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--psy-color-text-faint);
}
.psy-breadcrumb a { color: var(--psy-color-text-muted); }
.psy-breadcrumb a:hover { color: var(--psy-color-text); }

/* ---------- pagination ---------- */
.psy-pagination {
  display: inline-flex;
  gap: var(--psy-space-1);
  list-style: none;
  padding: 0;
}
.psy-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  font-size: var(--psy-text-sm);
  color: var(--psy-color-text-muted);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-md);
}
.psy-pagination a:hover { background: var(--psy-color-surface-2); color: var(--psy-color-text); }
.psy-pagination .psy-active a {
  background: var(--psy-color-accent);
  border-color: var(--psy-color-accent);
  color: var(--psy-color-on-accent);
}

/* ---------- code block ---------- */
.psy-code {
  font-family: var(--psy-font-mono);
  font-size: var(--psy-text-sm);
  background: var(--psy-color-surface-1);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-md);
  padding: var(--psy-space-4);
  overflow-x: auto;
  color: var(--psy-color-text);
}


/* Psyn UI — icon base + @font-face.
   Per-glyph classes (.psy-i-<name>::before) are generated by the font build
   into dist/icons/psyn-icons.css. Include that file to use the icon font. */

@font-face {
  font-family: "psyn-icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src:
    url("fonts/psyn-icons.woff2") format("woff2"),
    url("fonts/psyn-icons.woff") format("woff"),
    url("fonts/psyn-icons.ttf") format("truetype");
}

/* base icon: works for both the font (<i class="psy-i psy-i-heart">) and
   inline svg / sprite use (<svg class="psy-i">...</svg>) */
.psy-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  font-size: inherit;
  line-height: 1;
  vertical-align: -0.18em;
  flex-shrink: 0;
}

/* font glyph rendering */
i.psy-i,
[class^="psy-i-"]::before,
[class*=" psy-i-"]::before {
  font-family: "psyn-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* inline svg sizing */
svg.psy-i {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1.25em;
  height: 1.25em;
}

/* explicit size utilities (px) */
.psy-i-16 { width: 16px; height: 16px; font-size: 16px; }
.psy-i-24 { width: 24px; height: 24px; font-size: 24px; }
.psy-i-32 { width: 32px; height: 32px; font-size: 32px; }
.psy-i-48 { width: 48px; height: 48px; font-size: 48px; }
.psy-i-64 { width: 64px; height: 64px; font-size: 64px; }