/* Claude UI Kit — Utility CSS + components (v1.2.0) */
:root{
  --cui-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --cui-fg: #0b1a26;
  --cui-bg: #ffffff;
  --cui-muted: #5b6b7a;
  --cui-border: #e3e7ee;
  --cui-surface: #f7f9fc;
  --cui-accent: #0D2C41;
  --cui-success: #16a34a;
  --cui-warning: #d97706;
  --cui-danger: #d92d20;
  --cui-radius: 1rem;
  --cui-shadow: 0 10px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);

  /* Density (affects tables; controlled by [data-density]) */
  --cui-density-y: .65rem;
  --cui-density-x: .75rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --cui-fg: #e8edf2;
    --cui-bg: #0d1216;
    --cui-muted: #9db0be;
    --cui-border: #22303c;
    --cui-surface: #141a20;
    --cui-shadow: 0 8px 20px rgba(0,0,0,.45);
  }
}
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"]{ color-scheme: dark; }

/* Density presets */
html[data-density="compact"]{ --cui-density-y: .45rem; --cui-density-x: .55rem; }
html[data-density="cozy"]   { --cui-density-y: .6rem;  --cui-density-x: .7rem;  }
html[data-density="comfy"]  { --cui-density-y: .9rem;  --cui-density-x: 1.1rem; }

.cui-container, .cui-prose, .cui-card, .cui-btn, .cui-chip, .cui-input, .cui-select, .cui-textarea { font-family: var(--cui-font-sans); }
.cui-container{ max-width: 1100px; padding: 0 1rem; }
.cui-prose{ color: var(--cui-fg); }
.cui-muted{ color: var(--cui-muted); }

.cui-stack-sm > * + *{ margin-top: .5rem; }
.cui-stack-md > * + *{ margin-top: 1rem; }
.cui-stack-lg > * + *{ margin-top: 1.5rem; }
.cui-row{ display:flex; flex-wrap: wrap; gap:.75rem; align-items: center; }

.cui-h1{ font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem); font-weight: 700; letter-spacing:-.02em;}
.cui-h2{ font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 700; letter-spacing:-.02em;}

.cui-card{ background: var(--cui-bg); border: 1px solid var(--cui-border); border-radius: var(--cui-radius); box-shadow: var(--cui-shadow); overflow: hidden; }
.cui-card-header{ padding: 1rem 1.25rem; border-bottom:1px solid var(--cui-border); background: var(--cui-surface); }
.cui-card-title{ font-weight: 700; }
.cui-card-desc{ color: var(--cui-muted); font-size: .95rem; }
.cui-card-content{ padding: 1rem 1.25rem; }
.cui-card-footer{ padding: .75rem 1.25rem; border-top:1px solid var(--cui-border); background: var(--cui-surface); }

.cui-btn{
  --_bg: var(--cui-accent);
  --_fg: #fff;
  --_bd: transparent;
  appearance: none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .625rem 1rem; font-weight: 600; letter-spacing:.01em;
  border:1px solid var(--_bd); border-radius: calc(var(--cui-radius) - .25rem);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 2px rgba(0,0,0,.06); text-decoration: none;
}
.cui-btn:hover{ transform: translateY(-1px); }
.cui-btn:active{ transform: translateY(0); }
.cui-btn-subtle{ --_bg: var(--cui-surface); --_fg: var(--cui-fg); --_bd: var(--cui-border); }
.cui-btn-ghost{ --_bg: transparent; --_fg: var(--cui-fg); --_bd: var(--cui-border); }
.cui-btn-danger{ --_bg: var(--cui-danger); }
.cui-btn-sm{ padding: .45rem .75rem; font-size:.9rem;}
.cui-btn-lg{ padding: .8rem 1.25rem; font-size:1.05rem; }

.cui-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cui-chip{
  --_bg: var(--cui-surface); --_fg: var(--cui-fg); --_bd: var(--cui-border);
  display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .65rem; border:1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg); border-radius: 999px; cursor: pointer; font-weight: 600; font-size:.9rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cui-chip.is-selected{ --_bg: var(--cui-accent); --_fg: #fff; --_bd: var(--cui-accent); }

.cui-form{ display:grid; grid-template-columns:1fr; gap:1rem; }
.cui-field{ display:grid; gap:.4rem; }
.cui-label{ font-weight: 600; }
.cui-hint{ color: var(--cui-muted); font-size:.9rem; }
.cui-input, .cui-select, .cui-textarea{
  appearance:none; width:100%; background: var(--cui-bg); border:1px solid var(--cui-border);
  border-radius: calc(var(--cui-radius) - .25rem); padding:.6rem .75rem; color: var(--cui-fg);
  outline:none; transition: border-color .2s ease, box-shadow .2s ease; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.cui-input:focus, .cui-select:focus, .cui-textarea:focus{
  border-color: var(--cui-accent); box-shadow: 0 0 0 .15rem color-mix(in oklab, var(--cui-accent) 25%, transparent);
}
.cui-select{ padding-right: 2rem; }
.cui-textarea{ min-height: 120px; resize: vertical; }

.cui-switch{ display:inline-flex; align-items:center; gap:.5rem; cursor: pointer; user-select:none; }
.cui-switch-input{ position:absolute; opacity:0; pointer-events:none; }
.cui-switch-ui{
  width: 38px; height: 22px; border-radius: 999px; border:1px solid var(--cui-border);
  background: var(--cui-surface); position: relative; transition: background .2s ease, border-color .2s ease;
}
.cui-switch-ui::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px;
  background: var(--cui-bg); box-shadow: var(--cui-shadow); transition: transform .2s ease;
}
.cui-switch-input:checked + .cui-switch-ui{ border-color: var(--cui-accent); background: color-mix(in oklab, var(--cui-accent) 18%, var(--cui-surface)); }
.cui-switch-input:checked + .cui-switch-ui::after{ transform: translateX(16px); }
.cui-switch-label{ color: var(--cui-fg); }

.cui-alert{ border:1px solid var(--cui-border); background: var(--cui-surface); border-radius: var(--cui-radius); padding: .85rem 1rem; }
.cui-alert-title{ font-weight:700; margin-bottom:.25rem; }
.cui-alert-desc{ color: var(--cui-muted); }

.cui-hidden{ display:none !important; }
.cui-grid{ display:grid; gap:1rem; }
.cui-grid-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.cui-grid-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 900px){ .cui-grid-2, .cui-grid-3{ grid-template-columns: 1fr; } }

/* Tables (density-aware) */
.cui-table{ width:100%; border-collapse: collapse; }
.cui-table th, .cui-table td{ padding: var(--cui-density-y) var(--cui-density-x); border-bottom:1px solid var(--cui-border); text-align:left; }
.cui-table thead th{ background: var(--cui-surface); font-weight:700; }

/* Badges */
.cui-badge{
  display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.8rem;
  padding:.25rem .55rem; border-radius: 999px; line-height: 1;
  color: var(--cui-fg); background: var(--cui-surface); border:1px solid var(--cui-border);
}
.cui-badge-accent{ color:#fff; background: var(--cui-accent); border-color: var(--cui-accent); }
.cui-badge-success{ color:#fff; background: var(--cui-success); border-color: var(--cui-success); }
.cui-badge-warning{ color:#fff; background: var(--cui-warning); border-color: var(--cui-warning); }
.cui-badge-danger{  color:#fff; background: var(--cui-danger);  border-color: var(--cui-danger); }
.cui-badge-outline{ background: transparent; color: var(--cui-fg); border-color: var(--cui-border); }

/* Breadcrumb */
.cui-breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; align-items:center; }
cui-breadcrumb li, .cui-breadcrumb li{ color: var(--cui-muted); }
.cui-breadcrumb a{ color: inherit; text-decoration:none; }
.cui-breadcrumb a:hover{ text-decoration:underline; }
.cui-breadcrumb li + li::before{ content:"/"; opacity:.5; margin:0 .25rem; }

/* Tabs */
.cui-tabs{ display:block; }
.cui-tablist{ display:flex; gap:.25rem; border-bottom:1px solid var(--cui-border); margin-bottom:.75rem; }
.cui-tab{
  background: transparent; border:1px solid transparent; border-bottom:none;
  padding:.55rem .8rem; border-top-left-radius: calc(var(--cui-radius) - .5rem);
  border-top-right-radius: calc(var(--cui-radius) - .5rem);
  color: var(--cui-muted); cursor:pointer;
}
.cui-tab.is-active{ color: var(--cui-fg); background: var(--cui-bg); border-color: var(--cui-border); border-bottom-color: var(--cui-bg); }
.cui-tabpanel{ padding:.25rem 0; }
.cui-tabpanel[hidden]{ display:none !important; }

/* Progress */
.cui-progress{
  --value: 0%;
  --track: var(--cui-surface);
  --bar: var(--cui-accent);
  width:100%; height: 10px; border-radius: 999px; background: var(--track); position:relative; overflow:hidden;
  border:1px solid var(--cui-border);
}
.cui-progress .cui-progress-bar{
  position:absolute; inset:0 auto 0 0; width: var(--value); background: var(--bar);
  transition: width .3s ease; border-radius: 999px;
}
.cui-progress.is-success{ --bar: var(--cui-success); }
.cui-progress.is-warning{ --bar: var(--cui-warning); }
.cui-progress.is-danger{  --bar: var(--cui-danger);  }

/* Modal */
.cui-modal[hidden]{ display:none !important; }
.cui-modal{ position: fixed; inset:0; z-index: 9999; }
.cui-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.cui-modal-dialog{ position:relative; margin: 6vh auto; max-width: 560px; padding: 0 1rem; }
.cui-modal-dialog.is-sm{ max-width: 360px; }
.cui-modal-dialog.is-md{ max-width: 560px; }
.cui-modal-dialog.is-lg{ max-width: 720px; }
.cui-modal-dialog.is-xl{ max-width: 960px; }
.cui-modal-dialog.is-full{ width:100%; max-width:none; height:100%; margin:0; padding:0; display:flex; align-items:stretch; }
.cui-modal .cui-card{ box-shadow: 0 20px 40px rgba(0,0,0,.35); width:100%; }

/* Toasts + positions */
.cui-toast-stack{ position: fixed; display:flex; flex-direction:column; gap:.5rem; z-index: 9999; }
.cui-toast-stack.pos-bottom-right{ right:16px; bottom:16px; align-items:flex-end; }
.cui-toast-stack.pos-bottom-left { left:16px;  bottom:16px; }
.cui-toast-stack.pos-top-right   { right:16px; top:16px;    align-items:flex-end; }
.cui-toast-stack.pos-top-left    { left:16px;  top:16px; }
.cui-toast{ min-width: 260px; max-width: 360px; background: var(--cui-bg); color: var(--cui-fg);
  border:1px solid var(--cui-border); border-radius: calc(var(--cui-radius) - .25rem); box-shadow: var(--cui-shadow); padding:.75rem .9rem; }
.cui-toast-title{ font-weight:700; margin-bottom:.25rem; }
.cui-toast-desc{ color: var(--cui-muted); }
.cui-toast.is-success{ border-color: color-mix(in oklab, var(--cui-success) 35%, var(--cui-border)); }
.cui-toast.is-warning{ border-color: color-mix(in oklab, var(--cui-warning) 35%, var(--cui-border)); }
.cui-toast.is-danger{  border-color: color-mix(in oklab, var(--cui-danger) 35%, var(--cui-border)); }