/* ── Dashboard-local tokens (mirror of usage.html :root extras) ──
   Model palette tokens defined on :root because Tailwind v4 strips
   non-utility-referenced custom properties from compiled @theme, so
   `getComputedStyle().getPropertyValue('--color-model-*')` returns empty.
   Declaring them in this static stylesheet (served from /public) guarantees
   they're available to Recharts at runtime. */
:root {
  --color-model-haiku: #4DD0E1;   /* Anthropic light (lagoon) */
  --color-model-sonnet: #2A6FDB;  /* Anthropic mid (accent) */
  --color-model-opus: #1d4ed8;    /* Anthropic deep (accent-deep) */
  --color-model-gpt: #10A37F;     /* OpenAI brand green */
  --color-model-gemini: #EA8E47;  /* Google brand warm orange */
  --color-chart-1: #2A6FDB;
  --color-chart-2: #4dd0e1;
  --color-chart-3: #3f9d52;
  --color-chart-4: #f9a826;
  --color-chart-5: #4DD0E1;
}

:where(.app, body) {
  --card: #FFFFFF;
  --card-soft: #FCFAF5;
  --t-1: #0d2530;
  --t-2: #2B3F4B;
  --t-3: #4A5E6C;
  --t-4: #7C8E9B;
  --t-on-dark: #F4F9FC;
  --t-on-dark-2: #94A8B7;
  --t-on-dark-3: #6B7E8E;
  --teal: #0d2530;
  --rule-cream: rgba(13, 37, 48, .06);
  --rule-cream-strong: rgba(13, 37, 48, .10);
  --rule-dark: rgba(244, 249, 252, .10);
  --accent-wash: rgba(42, 111, 219, .08);
  --accent-wash-strong: rgba(42, 111, 219, .14);
  --sb-w: 240px;
  --topbar-h: 56px;
}

/* ── App shell ── */
.app {
  display: grid;
  grid-template-columns: var(--sb-w) 1fr;
  min-height: 100vh;
  background: var(--cream-50);
  color: var(--t-2);
  font-family: var(--font-sans);
}

/* ── Sidebar ── */
.sb {
  background: var(--teal);
  color: var(--t-on-dark-2);
  padding: 18px 0 24px;
  border-right: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  overflow-y: auto;
}
.sb-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 20px;
}
.sb-brand-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--t-on-dark);
}
.sb-brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.sb-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.sb-brand-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
}
.sb-toggle {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--t-on-dark-2);
  transition: background .15s ease;
  background: none;
  border: none;
  cursor: pointer;
}
.sb-toggle:hover {
  background: rgba(244, 249, 252, .06);
  color: var(--t-on-dark);
}
.sb-section {
  padding: 0 12px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--t-on-dark-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  margin: 1px 0;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sb-item .ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .85;
}
.sb-item:hover {
  background: rgba(244, 249, 252, .05);
  color: var(--t-on-dark);
}
.sb-item.active {
  background: rgba(42, 111, 219, .16);
  color: var(--t-on-dark);
}
.sb-item.active .ico {
  color: var(--accent-light);
  opacity: 1;
}
.sb-item .caret {
  margin-left: auto;
  opacity: .5;
  transition: transform .2s;
}
.sb-item.expanded .caret {
  transform: rotate(180deg);
}
.sb-sub {
  display: flex;
  flex-direction: column;
  padding: 4px 0 4px 38px;
}
.sb-sub a, .sb-sub button {
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--t-on-dark-3);
  transition: color .15s, background .15s;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.sb-sub a:hover, .sb-sub button:hover {
  color: var(--t-on-dark);
}
.sb-sub a.active, .sb-sub button.active {
  color: var(--t-on-dark);
  background: rgba(244, 249, 252, .05);
}
.sb-divider {
  height: 1px;
  background: var(--rule-dark);
  margin: 16px 12px;
}
.sb-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-footer .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.sb-footer .who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.sb-footer .who b {
  color: var(--t-on-dark);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-footer .who span {
  color: var(--t-on-dark-3);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* ── Main column ── */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Aligned with .landing-shell `#fcfbf8` so dashboard ↔ landing transition
     has no visual jump. Topbar bg below (rgba 253,251,246,.85 + backdrop
     blur) stays as-is per user request. */
  background: #fcfbf8;
  position: relative;
}
.main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(13, 37, 48, .025) 1px, transparent 1px),
    radial-gradient(rgba(13, 37, 48, .018) 1px, transparent 1px);
  background-size: 32px 32px, 64px 64px;
  background-position: 0 0, 16px 16px;
  opacity: .6;
}
.main > * {
  position: relative;
  z-index: 1;
}
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid var(--rule-cream);
  background: rgba(253, 251, 246, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t-3);
  font-family: var(--font-mono);
  letter-spacing: .02em;
}
.breadcrumb a, .breadcrumb button {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}
.breadcrumb a:hover, .breadcrumb button:hover {
  color: var(--t-1);
}
.breadcrumb .sep {
  color: var(--t-4);
}
.breadcrumb .current {
  color: var(--t-1);
  font-weight: 500;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ok, #2a8a5b);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.conn .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-ok, #2a8a5b);
  box-shadow: 0 0 8px rgba(42, 138, 91, .5);
  animation: pulse-conn 2.4s infinite;
}
@keyframes pulse-conn {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.user-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-200, #F2EDE2);
  border: 1px solid var(--rule-cream);
  display: grid;
  place-items: center;
  color: var(--t-2);
  cursor: pointer;
  transition: background .15s;
}
.user-btn:hover {
  background: var(--cream-300, #E7DFCE);
}

/* ── Page content ── */
.page {
  padding: 40px 48px 80px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px;
  flex-wrap: wrap;
}
.page-head h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--t-1);
  line-height: 1.1;
  margin-bottom: 4px;
}
.page-head h1 .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--t-3);
}
.page-head .sub {
  font-size: 14px;
  color: var(--t-3);
}

/* ── Period & Date controls ── */
.ctrl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 12px;
}
.ctrl-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.period-toggle {
  display: inline-flex;
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.period-toggle button {
  padding: 7px 14px;
  border-radius: 6px;
  color: var(--t-3);
  font-size: 12.5px;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.period-toggle button:hover {
  color: var(--t-1);
}
.period-toggle button.active {
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-weight: 600;
}
.date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t-2);
  cursor: pointer;
  transition: all .15s;
}
.date-pill:hover {
  border-color: var(--accent);
  background: var(--card);
}
.date-pill:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  background: var(--card);
}
.date-pill svg {
  width: 13px;
  height: 13px;
  color: var(--t-4);
  flex-shrink: 0;
}
.date-pill input {
  background: none;
  border: none;
  outline: none;
  font: inherit;
  color: var(--t-1);
  padding: 0;
  cursor: pointer;
  min-width: 110px;
}
.date-arrow {
  color: var(--t-4);
  font-family: var(--font-mono);
  font-size: 13px;
}
.metric-toggle {
  display: inline-flex;
  gap: 6px;
}
.metric-toggle button {
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  color: var(--t-3);
  font-size: 12.5px;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.metric-toggle button:hover {
  border-color: var(--rule-cream-strong);
  color: var(--t-1);
}
.metric-toggle button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}
.metric-toggle button svg {
  width: 13px;
  height: 13px;
}

/* ── KPI row ── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 980px) {
  .kpi-row {
    grid-template-columns: 1fr;
  }
}
.kpi {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 12px;
  padding: 20px 22px;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}
.kpi.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.kpi .kpi-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kpi .kpi-label svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.kpi .kpi-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--t-1);
  line-height: 1;
  margin-bottom: 8px;
  transition: color .2s;
}
.kpi .kpi-value small {
  font-size: 14px;
  font-weight: 500;
  color: var(--t-4);
  letter-spacing: 0;
}
.kpi .kpi-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  letter-spacing: .02em;
}
.kpi .kpi-sub b {
  color: var(--t-1);
  font-family: var(--font-sans);
  font-weight: 700;
}
.quota-bar {
  margin-top: 10px;
  height: 6px;
  background: var(--cream-200, #F2EDE2);
  border-radius: 3px;
  overflow: hidden;
}
.quota-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--m-haiku, var(--color-model-haiku)), var(--accent), var(--accent-deep));
  border-radius: 3px;
  transition: width .6s ease;
}

/* ── Cards & Chart ── */
.gn-card {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 2px rgba(13, 37, 48, .02);
}
.gn-card-head {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.gn-card-head .ch-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t-1);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.gn-card-head .ch-sub {
  font-size: 13px;
  color: var(--t-3);
}
.chart-wrap {
  position: relative;
  padding: 8px 0 0;
}

/* ── Chart legend ── */
.legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.legend-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-cream);
  background: var(--cream-100);
}
.legend-group .lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
}
.legend-item .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* ── Usage by Model ── */
.ubm-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-cream);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.ubm-row:last-of-type {
  border-bottom: none;
  padding-bottom: 16px;
}
.ubm-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ubm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ubm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}
.ubm-name .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ubm-name .co {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-4);
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  font-weight: 500;
  margin-left: 4px;
}
.ubm-bar-track {
  width: 100%;
  height: 8px;
  background: var(--cream-200, #F2EDE2);
  border-radius: 4px;
  overflow: hidden;
}
.ubm-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .8s cubic-bezier(.2, .7, .2, 1);
}
.ubm-stats {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t-3);
  flex-shrink: 0;
  min-width: 160px;
  justify-content: flex-end;
}
.ubm-stats b {
  color: var(--t-1);
  font-weight: 600;
}
.ubm-total {
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--rule-cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ubm-total .lab {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
}
.ubm-total .val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--t-1);
  font-weight: 600;
}

/* ── Request log ── */
.log-head {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto 80px;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-cream);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
}
.log-head-right {
  text-align: right;
}
.log-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto 80px;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-cream);
  align-items: center;
}
.log-row:last-child {
  border-bottom: none;
}
/* TCK-421c — expandable transaction rows ($ cost + token breakdown) */
.log-collapsible {
  border-bottom: 1px solid var(--rule-cream);
}
.log-collapsible:last-child {
  border-bottom: none;
}
.log-row--btn {
  width: 100%;
  background: none;
  border: none;
  border-bottom: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.log-row--btn:hover {
  background: var(--cream-100);
}
.log-row-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 2px 0 12px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
}
.log-row-detail b {
  color: var(--t-1);
  font-weight: 600;
}
.log-row .date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t-3);
}
.log-row .model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t-1);
  font-family: var(--font-mono);
}
.log-row .model .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.log-row .tag-prem {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  letter-spacing: .04em;
}
.log-row .credits {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--t-1);
  font-weight: 600;
}
.log-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--t-4);
  font-family: var(--font-mono);
}
.log-foot .export {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}
.log-foot .export:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}
.log-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.log-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .02em;
}
.log-chip:hover {
  background: var(--cream-200, #F2EDE2);
}
.log-chip.active {
  background: var(--accent-wash);
  border-color: rgba(42, 111, 219, .3);
  color: var(--accent-deep);
}
.log-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS PAGE — mirror of geo-nova-landing-page/project/dashboard/projects.html
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page header CTAs */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--accent);
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(42, 111, 219, .45);
}
.btn-primary svg { width: 16px; height: 16px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--t-1);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--rule-cream-strong);
}
.btn-ghost:hover {
  background: rgba(13, 37, 48, .04);
  border-color: rgba(13, 37, 48, .18);
}

/* Toolbar */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.search {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.search svg { width: 16px; height: 16px; color: var(--t-4); }
.search input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  color: var(--t-1);
  min-width: 0;
}
.search input::placeholder { color: var(--t-4); }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 8px;
  font-size: 13px;
  color: var(--t-2);
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
}
.filter-chip:hover { border-color: var(--rule-cream-strong); }
.filter-chip .caret { color: var(--t-4); width: 14px; height: 14px; }
.filter-chip.active {
  background: var(--accent-wash);
  border-color: rgba(42, 111, 219, .4);
  color: var(--accent-deep);
}

.view-toggle {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 8px;
  padding: 3px;
}
.view-toggle button {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--t-3);
  transition: all .15s;
  background: none;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.view-toggle button:hover { color: var(--t-1); }
.view-toggle button.active { background: var(--accent-wash); color: var(--accent-deep); }
.view-toggle svg { width: 16px; height: 16px; display: block; }

/* Sort dropdown menu — overrides shadcn DropdownMenu chrome to match cream surface */
.filter-menu {
  background: var(--card) !important;
  border: 1px solid var(--rule-cream) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 12px 32px -10px rgba(13, 37, 48, .14), 0 2px 6px -2px rgba(13, 37, 48, .06) !important;
  min-width: 180px;
}
.filter-menu-item {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: var(--t-2) !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
  outline: none !important;
}
.filter-menu-item:hover,
.filter-menu-item:focus,
.filter-menu-item[data-highlighted] {
  background: var(--accent-wash) !important;
  color: var(--accent-deep) !important;
}
.filter-menu-item[data-active="true"] {
  background: var(--accent-wash-strong) !important;
  color: var(--accent-deep) !important;
}

/* Type badge (per-workspace project type — Map / Dashboard / Story Map) */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--rule-cream);
  background: var(--cream-100);
  color: var(--t-2);
}
.type-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.type-badge.type-map {
  background: var(--accent-wash);
  border-color: rgba(42, 111, 219, .25);
  color: var(--accent-deep);
}
.type-badge.type-dashboard {
  background: rgba(63, 157, 82, .1);
  border-color: rgba(63, 157, 82, .25);
  color: #2a6f3a;
}
.type-badge.type-story {
  background: rgba(106, 74, 199, .1);
  border-color: rgba(106, 74, 199, .25);
  color: #5b3eb1;
}

/* Per-type icon tint inside the row pj-ico cell */
.pj-ico.ico-map { color: var(--accent); }
.pj-ico.ico-dashboard { color: #2a6f3a; background: rgba(63, 157, 82, .1); }
.pj-ico.ico-story { color: #5b3eb1; background: rgba(106, 74, 199, .1); }

/* Projects table panel */
.panel {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 2px rgba(13, 37, 48, .02);
}
.panel-head {
  display: grid;
  grid-template-columns: 2.4fr 2.6fr 1.2fr 1.2fr 1.2fr 64px;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-cream);
  background: var(--card-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
}
.row {
  display: grid;
  grid-template-columns: 2.4fr 2.6fr 1.2fr 1.2fr 1.2fr 64px;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-cream);
  align-items: center;
  transition: background .12s ease;
  cursor: pointer;
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--accent-wash); }
.row .project { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row .pj-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cream-200, #F2EDE2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
}
.row .pj-ico svg { width: 16px; height: 16px; }
.row .pj-text { display: flex; flex-direction: column; min-width: 0; }
.row .pj-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--t-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .pj-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: .02em;
}
.row .desc {
  font-size: 13px;
  color: var(--t-3);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .desc.empty { color: var(--t-4); font-family: var(--font-mono); }
.row .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t-3);
  letter-spacing: .02em;
}
.row .row-more,
.row .row-settings {
  color: var(--t-4);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: all .15s;
  background: none;
  border: none;
  cursor: pointer;
}
.row .row-more { opacity: 0; }
.row:hover .row-more { opacity: 1; }
.row .row-more:hover,
.row .row-settings:hover {
  background: rgba(13, 37, 48, .06);
  color: var(--t-1);
}
.row .row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.row .row-settings svg { width: 14px; height: 14px; }

.panel-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--rule-cream);
  background: var(--card-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--t-4);
  font-family: var(--font-mono);
}
.panel-foot .pager { display: flex; gap: 4px; }
.panel-foot .pager button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--t-3);
  display: grid;
  place-items: center;
  transition: all .15s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.panel-foot .pager button:hover { background: rgba(13, 37, 48, .06); color: var(--t-1); }
.panel-foot .pager button.active { background: var(--accent); color: white; }
.panel-foot .pager button:disabled { opacity: .4; cursor: not-allowed; }
.panel-foot .pager button:disabled:hover { background: none; color: var(--t-3); }

/* Card grid (Geo|Nova extension — no Claude Design source for card view) */
.pj-card {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 12px;
  padding: 18px 20px 64px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
}
.pj-card:hover {
  border-color: rgba(42, 111, 219, .35);
  box-shadow: 0 6px 18px -8px rgba(42, 111, 219, .25);
  transform: translateY(-1px);
}

/* Pin badge — top-right: icon + label on white surface */
.pj-card .pj-card-pin {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--rule-cream);
  box-shadow: 0 1px 2px rgba(13, 37, 48, .04);
  z-index: 2;
}
.pj-card .pj-card-pin .pin-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pj-card .pj-card-pin .pin-icon svg { width: 12px; height: 12px; }
.pj-card .pj-card-pin .pin-label {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--t-2);
  letter-spacing: .04em;
  white-space: nowrap;
}
.pj-card .pj-card-pin.ico-map .pin-icon { color: var(--accent); background: var(--accent-wash); }
.pj-card .pj-card-pin.ico-dashboard .pin-icon { color: #2a6f3a; background: rgba(63, 157, 82, .14); }
.pj-card .pj-card-pin.ico-story .pin-icon { color: #5b3eb1; background: rgba(106, 74, 199, .14); }

.pj-card .pj-card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--t-1);
  letter-spacing: -.01em;
  padding-right: 120px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pj-card .pj-card-desc {
  font-size: 13px;
  color: var(--t-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  margin: 0;
}
.pj-card .pj-card-meta {
  position: absolute;
  bottom: 18px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: .02em;
}
.pj-card .pj-card-meta svg { width: 12px; height: 12px; }

.pj-card .row-more,
.pj-card .row-settings {
  color: var(--t-4);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  transition: all .15s;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.pj-card .row-more { opacity: 0; }
.pj-card:hover .row-more { opacity: 1; }
.pj-card .row-more:hover,
.pj-card .row-settings:hover {
  background: rgba(13, 37, 48, .06);
  color: var(--t-1);
}
.pj-card .row-settings svg { width: 15px; height: 15px; }
.pj-card .pj-card-actions {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.pj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Empty state */
.pj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--rule-cream-strong);
  border-radius: 14px;
  gap: 8px;
}
.pj-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--t-1);
  margin: 0;
}
.pj-empty p {
  font-size: 14px;
  color: var(--t-3);
  margin: 0 0 12px;
  max-width: 420px;
}

/* Loading state (mirror of usage page) */
.pj-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  color: var(--t-4);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW PROJECT PAGE — mirror of dashboard/new-project.html (template gallery)
   ═══════════════════════════════════════════════════════════════════════════ */

:where(.app, body) {
  --cat-webapp: #2A6FDB;
  --cat-dashboard: #10A37F;
  --cat-webmap: #4DD0E1;
  --cat-staticmap: #7C8E9B;
  --cat-storymap: #EA8E47;
  --cat-report: #6a4ac7;
  --cat-website: #c44a3f;
}

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.search-pill {
  flex: 1;
  min-width: 240px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 10px;
  transition: all .15s;
}
.search-pill:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.search-pill svg { width: 16px; height: 16px; color: var(--t-4); }
.search-pill input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  color: var(--t-1);
  min-width: 0;
}
.search-pill input::placeholder { color: var(--t-4); }

.cat-tabs {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cat {
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--t-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}
.cat:hover { background: var(--cream-200); color: var(--t-1); }
.cat.active {
  background: var(--card);
  border-color: var(--rule-cream-strong);
  color: var(--t-1);
  font-weight: 600;
}
.cat .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  font-weight: 500;
  letter-spacing: .04em;
}
.cat.active .count { color: var(--accent); }

/* Section heading eyebrow with divider */
.section-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
  margin: 28px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-eyebrow .count-inline {
  color: var(--t-3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.section-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-cream);
}

/* Template grid */
.grid-templates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) {
  .grid-templates { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .grid-templates { grid-template-columns: 1fr; }
}

/* Template card */
.tpl {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s cubic-bezier(.2, .7, .2, 1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.tpl:hover:not(.tpl-soon) {
  transform: translateY(-2px);
  border-color: rgba(42, 111, 219, .3);
  box-shadow: 0 14px 30px -16px rgba(13, 37, 48, .15), 0 2px 4px rgba(13, 37, 48, .04);
}
.tpl.tpl-soon {
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.7);
}
.tpl.tpl-soon .tpl-preview {
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--cream-200) 100%);
}

.tpl-preview {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--cream-200) 100%);
  border-bottom: 1px solid var(--rule-cream);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tpl-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tpl-preview .tpl-preview-placeholder {
  width: 38%;
  opacity: .35;
  color: var(--t-4);
}
.tpl-preview .corner-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.tpl-preview .corner-badge.prod {
  background: rgba(42, 138, 91, .15);
  color: var(--ok);
  border: 1px solid rgba(42, 138, 91, .25);
}
.tpl-preview .corner-badge.new {
  background: rgba(42, 111, 219, .15);
  color: var(--accent-deep);
  border: 1px solid rgba(42, 111, 219, .25);
}
.tpl-preview .corner-badge.soon {
  background: rgba(124, 142, 155, .25);
  color: var(--t-2);
  border: 1px solid rgba(124, 142, 155, .35);
}

.tpl-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.tpl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.tpl-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t-1);
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* Category chip */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cat-webapp { color: var(--cat-webapp); background: rgba(42, 111, 219, .10); }
.cat-dashboard { color: var(--cat-dashboard); background: rgba(16, 163, 127, .10); }
.cat-webmap { color: #1a7a8b; background: rgba(77, 208, 225, .16); }
.cat-staticmap { color: var(--cat-staticmap); background: rgba(124, 142, 155, .14); }
.cat-storymap { color: var(--cat-storymap); background: rgba(234, 142, 71, .12); }
.cat-report { color: var(--cat-report); background: rgba(106, 74, 199, .10); }
.cat-website { color: var(--cat-website); background: rgba(196, 74, 63, .10); }

.tpl-desc {
  font-size: 13px;
  color: var(--t-3);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}

/* SDK badges row */
.tpl-sdks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--rule-cream);
  margin-top: auto;
}
.tpl-sdks .lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
  margin-right: 4px;
}
.sdk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--t-2);
  letter-spacing: .02em;
}
.sdk-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.sdk-badge.oss .dot { background: var(--ok); }
.sdk-badge.commercial .dot { background: var(--accent); }
.sdk-badge.freemium .dot { background: var(--warn); }
.sdk-badge.active {
  background: var(--accent-wash);
  border-color: rgba(42, 111, 219, .35);
  color: var(--accent-deep);
  font-weight: 600;
}
.sdk-badge.soon {
  opacity: .55;
}

/* Empty state */
.tpl-empty {
  padding: 60px 32px;
  text-align: center;
  color: var(--t-3);
  font-size: 14px;
}
.tpl-empty h3 {
  color: var(--t-1);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
}
.tpl-empty p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATE DETAIL PAGE — mirror of dashboard/template-detail.html
   ═══════════════════════════════════════════════════════════════════════════ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-3);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  margin-bottom: 22px;
  transition: all .15s;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 2px rgba(13, 37, 48, .02);
}
.back-link:hover {
  color: var(--accent-deep);
  border-color: rgba(42, 111, 219, .3);
  background: var(--card);
  transform: translateX(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 10px -6px rgba(42, 111, 219, .25);
}
.back-link svg { width: 12px; height: 12px; }

/* Header band */
.det-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.det-head .det-meta { flex: 1; min-width: 280px; }
.det-head h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--t-1);
  line-height: 1.1;
  margin: 0 0 12px;
}
.det-head h1 .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--t-3);
}
.det-head .det-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.det-head .det-desc {
  font-size: 15px;
  color: var(--t-2);
  line-height: 1.55;
  max-width: 64ch;
  margin: 0;
}

.flag-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.flag-prod { color: var(--ok); background: rgba(42, 138, 91, .12); border: 1px solid rgba(42, 138, 91, .2); }
.flag-new { color: var(--accent-deep); background: rgba(42, 111, 219, .12); border: 1px solid rgba(42, 111, 219, .2); }
.flag-soon { color: var(--t-2); background: rgba(124, 142, 155, .14); border: 1px solid rgba(124, 142, 155, .25); }

.det-cta-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--accent);
  text-decoration: none;
  font-family: inherit;
}
.det-cta-top:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(42, 111, 219, .45);
}
.det-cta-top:disabled { opacity: .5; cursor: not-allowed; }
.det-cta-top svg { width: 16px; height: 16px; }

/* Main grid: preview (left big) + rail (right) */
.det-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}
@media (max-width: 1024px) {
  .det-grid { grid-template-columns: 1fr; }
}

/* Preview frame — browser-window style */
.preview-wrap {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 2px rgba(13, 37, 48, .02);
}
.preview-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-cream);
  background: var(--card-soft);
}
.pc-dots { display: inline-flex; gap: 6px; }
.pc-dots span { width: 10px; height: 10px; border-radius: 50%; }
.pc-dots span:nth-child(1) { background: #f3a59c; }
.pc-dots span:nth-child(2) { background: #f5d57e; }
.pc-dots span:nth-child(3) { background: #9ed79c; }
.pc-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--t-3);
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  border-radius: 6px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-url svg { width: 11px; height: 11px; color: var(--ok); flex-shrink: 0; }
.pc-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-weight: 600;
  flex-shrink: 0;
}

.preview-area {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
  overflow: hidden;
}
.preview-area iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.preview-area .preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--t-3);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
.preview-area .preview-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--t-4);
  opacity: .6;
}

/* Sticky right rail */
.rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1025px) {
  .rail {
    position: sticky;
    top: 80px;
    align-self: start;
  }
}

.rail-card {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 12px;
  padding: 18px 20px;
}
.rail-card h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-4);
  font-weight: 600;
  margin: 0 0 14px;
}

/* SDK selector */
.sdk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sdk-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule-cream);
  background: var(--card);
  cursor: pointer;
  transition: all .15s;
}
.sdk-option:hover:not(:disabled):not(.active) {
  border-color: var(--rule-cream-strong);
  background: var(--cream-100);
}
.sdk-option.active {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.sdk-option:disabled,
.sdk-option.disabled {
  opacity: .5;
  cursor: not-allowed;
}
.sdk-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--t-4);
  flex-shrink: 0;
  position: relative;
  transition: all .15s;
}
.sdk-option.active .sdk-radio { border-color: var(--accent); }
.sdk-option.active .sdk-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.sdk-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--t-1);
}
.sdk-license {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
}
.sdk-license.oss { background: rgba(42, 138, 91, .12); color: var(--ok); }
.sdk-license.commercial { background: rgba(42, 111, 219, .12); color: var(--accent-deep); }
.sdk-license.freemium { background: rgba(201, 123, 20, .12); color: var(--warn); }
.sdk-license.soon { background: rgba(124, 142, 155, .14); color: var(--t-3); }

/* License explainer */
.license-info {
  padding: 12px 14px;
  background: var(--cream-100);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--t-2);
  line-height: 1.55;
  border: 1px solid var(--rule-cream);
  margin-top: 12px;
}
.license-info b { color: var(--t-1); }

/* Features list — Claude Design template-detail variant */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--t-2);
  line-height: 1.5;
}
.feature-list li svg {
  width: 14px;
  height: 14px;
  color: var(--ok);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Use template CTA card */
.use-card {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-radius: 12px;
  padding: 18px 20px;
  color: white;
  text-align: center;
}
.use-card .use-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
  background: white;
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  border: none;
  font-family: inherit;
  text-decoration: none;
}
.use-card .use-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(13, 37, 48, .3);
}
.use-card .use-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.use-card .use-btn svg { width: 16px; height: 16px; }
.use-card .use-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #ffffff !important;
  margin: 10px 0 0;
}

/* Tab section below preview */
.det-tabs { margin-top: 32px; }
.det-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule-cream);
  margin-bottom: 24px;
}
.det-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--t-3);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  font-family: inherit;
}
.det-tab:hover { color: var(--t-1); }
.det-tab.active {
  color: var(--accent);
  font-weight: 600;
}
.det-tab.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.det-tab-content { max-width: 760px; }
.det-tab-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--t-1);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.det-tab-content p {
  font-size: 14px;
  color: var(--t-2);
  line-height: 1.6;
  margin: 0 0 14px;
}
.det-tab-content .feature-list { gap: 12px; }
.det-tab-content .feature-list li { font-size: 14px; }

.stack-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule-cream);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--card);
}
.stack-row .ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cream-100);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.stack-row .nm {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--t-1);
}
.stack-row .nm small {
  display: block;
  font-weight: 400;
  color: var(--t-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURE PAGE — mirror of dashboard/configure.html (single-page form)
   ═══════════════════════════════════════════════════════════════════════════ */

.configure-page {
  padding: 40px 48px 80px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.configure-page .page-head h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--t-1);
  line-height: 1.1;
  margin: 0 0 8px;
}
.configure-page .page-head h1 .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--t-3);
}
.configure-page .page-head .sub {
  font-size: 14px;
  color: var(--t-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

/* Template summary recap */
.tpl-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 10px;
  margin-bottom: 24px;
}
.tpl-summary .summary-thumb {
  width: 56px;
  height: 38px;
  border-radius: 6px;
  background: var(--cream-100);
  border: 1px solid var(--rule-cream);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.tpl-summary .summary-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tpl-summary .summary-thumb svg {
  width: 70%;
  height: 70%;
  margin: 15% auto;
  display: block;
  color: var(--accent);
  opacity: .5;
}
.tpl-summary .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.tpl-summary .meta .nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
}
.tpl-summary .meta .sdk {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  letter-spacing: .04em;
}
.tpl-summary .change {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .15s;
  background: none;
  border: none;
}
.tpl-summary .change:hover { background: var(--accent-wash); }

/* Form card */
.form-card {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 16px;
}
.form-card .field { margin-bottom: 20px; }
.form-card .field:last-of-type { margin-bottom: 0; }
.form-card .field-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.form-card .field-label .lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
}
.form-card .field-label .req { color: var(--accent); font-size: 14px; }
.form-card .field-label .hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: .04em;
  margin-left: auto;
}
.form-card input[type="text"],
.form-card textarea,
.collapsible-body input[type="text"],
.collapsible-body textarea {
  width: 100%;
  background: var(--cream-50);
  border: 1px solid var(--rule-cream-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  color: var(--t-1);
  font-size: 14px;
  line-height: 1.55;
  transition: all .15s ease;
  resize: vertical;
  font-family: var(--font-sans);
  box-shadow: 0 1px 2px rgba(13, 37, 48, .02) inset;
}
.form-card input[type="text"]::placeholder,
.form-card textarea::placeholder,
.collapsible-body input[type="text"]::placeholder,
.collapsible-body textarea::placeholder {
  color: var(--t-4);
  font-style: italic;
}
.form-card input[type="text"]:hover:not(:focus),
.form-card textarea:hover:not(:focus),
.collapsible-body input[type="text"]:hover:not(:focus),
.collapsible-body textarea:hover:not(:focus) {
  border-color: var(--rule-cream-strong);
  background: var(--card);
}
.form-card input[type="text"]:focus,
.form-card textarea:focus,
.collapsible-body input[type="text"]:focus,
.collapsible-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 4px var(--accent-wash), 0 1px 2px rgba(13, 37, 48, .04) inset;
}
.form-card textarea,
.collapsible-body textarea {
  min-height: 88px;
  max-height: 240px;
}

/* Input prefix wrapper (icon left + input) */
.input-shell {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-shell input[type="text"] {
  padding-left: 42px;
}
.input-shell .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-4);
  pointer-events: none;
}
.input-shell .input-icon svg { width: 14px; height: 14px; }
.form-card .field-help {
  font-size: 12px;
  color: var(--t-4);
  margin-top: 6px;
  line-height: 1.5;
}

/* Collapsible section */
.collapsible {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.collapsible-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  background: var(--card);
  transition: background .15s;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.collapsible-head:hover { background: var(--card-soft); }
.collapsible-head .ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cream-100);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
}
.collapsible-head .ico svg { width: 16px; height: 16px; }
.collapsible-head .text {
  flex: 1;
  min-width: 0;
}
.collapsible-head .nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.collapsible-head .nm .opt {
  font-weight: 400;
  color: var(--t-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.collapsible-head .sub {
  font-size: 12px;
  color: var(--t-3);
  margin-top: 2px;
}
.collapsible-head .caret {
  color: var(--t-4);
  transition: transform .2s;
  flex-shrink: 0;
}
.collapsible-head .caret svg { width: 16px; height: 16px; }
.collapsible.open .collapsible-head .caret { transform: rotate(180deg); }
.collapsible.open .collapsible-head { border-bottom: 1px solid var(--rule-cream); }
.collapsible-body { padding: 20px; }

/* Status pill */
.status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.status-pill.set {
  background: var(--ok-wash, rgba(42, 138, 91, .12));
  color: var(--ok);
}

/* Integration row */
.int-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-cream);
}
.int-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.int-row:first-child { padding-top: 0; }
.int-row .av {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.int-row .av.gh { background: linear-gradient(135deg, #24292e, #4a5460); }
.int-row .av.sb { background: linear-gradient(135deg, #3ecf8e, #2a9d6e); }
.int-row .meta {
  flex: 1;
  min-width: 0;
}
.int-row .meta .nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.int-row .meta .sub {
  font-size: 12px;
  color: var(--t-3);
  margin-top: 2px;
}
.int-row .conn-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(42, 138, 91, .12);
  color: var(--ok);
  font-weight: 600;
}
.int-row .conn-tag.off {
  background: var(--cream-200);
  color: var(--t-4);
}
.int-row .toggle-switch {
  width: 36px;
  height: 20px;
  background: var(--cream-200);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.int-row .toggle-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(13, 37, 48, .2);
  transition: all .2s;
}
.int-row.on .toggle-switch { background: var(--accent); }
.int-row.on .toggle-switch::after { left: 18px; }
.int-row .toggle-switch:disabled { opacity: .5; cursor: not-allowed; }

.int-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule-cream-strong);
  background: var(--card);
  color: var(--t-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  flex-shrink: 0;
}
.int-connect-btn:hover:not(:disabled) {
  background: var(--cream-100);
  border-color: var(--rule-cream-strong);
  color: var(--t-1);
}
.int-connect-btn:disabled { opacity: .5; cursor: wait; }

.int-coming {
  padding: 12px 14px;
  background: var(--cream-100);
  border: 1px dashed var(--rule-cream-strong);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: .04em;
  text-align: center;
  margin-top: 14px;
}

/* CTA row */
.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.cta-row .btn-create {
  flex: 1;
  min-width: 280px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--accent);
  font-family: inherit;
}
.cta-row .btn-create:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(42, 111, 219, .45);
}
.cta-row .btn-create:disabled { opacity: .6; cursor: wait; }

/* Inline validation error under a field */
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #c44a3f;
  font-family: var(--font-sans);
  animation: field-error-pulse .2s ease-out;
}
.field-error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #c44a3f;
}
@keyframes field-error-pulse {
  0% { opacity: 0; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Input invalid state (paired with .field-error) */
.form-card .input-shell.invalid input[type="text"],
.form-card input[type="text"].invalid,
.form-card textarea.invalid {
  border-color: #c44a3f;
  box-shadow: 0 0 0 4px rgba(196, 74, 63, .08), 0 1px 2px rgba(13, 37, 48, .04) inset;
}
.cta-row .btn-create svg { width: 18px; height: 18px; }
.cta-row .btn-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 18px;
  border-radius: 10px;
  background: transparent;
  color: var(--t-3);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--rule-cream-strong);
  font-family: inherit;
}
.cta-row .btn-skip:hover:not(:disabled) {
  color: var(--t-1);
  background: var(--cream-100);
}
.cta-row .btn-skip:disabled { opacity: .5; cursor: not-allowed; }
.cta-row .btn-skip svg { width: 14px; height: 14px; }

.footnote {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--accent-wash);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--t-2);
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footnote svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.footnote b { color: var(--t-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   INTEGRATIONS PAGE — mirror of dashboard/integrations.html
   ═══════════════════════════════════════════════════════════════════════════ */

.page-head .ph-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Inject info card */
.inject-card {
  background: linear-gradient(135deg, rgba(42, 111, 219, .06), rgba(42, 111, 219, .02));
  border: 1px solid rgba(42, 111, 219, .18);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.inject-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.inject-icon svg { width: 18px; height: 18px; }
.inject-card .body { flex: 1; }
.inject-card .title {
  font-size: 14px;
  font-weight: 700;
  color: var(--t-1);
  margin: 0 0 4px;
}
.inject-card .desc {
  font-size: 13px;
  color: var(--t-2);
  line-height: 1.5;
  margin: 0;
}
.inject-card .desc code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(13, 37, 48, .06);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--t-1);
  letter-spacing: .01em;
}
.inject-card .lnk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  align-self: center;
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: inherit;
  text-decoration: none;
}
.inject-card .lnk svg { width: 13px; height: 13px; }

/* Chips (filter categories) */
.chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 8px;
  font-size: 13px;
  color: var(--t-2);
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
  font-family: inherit;
}
.chip:hover { border-color: var(--rule-cream-strong); }
.chip.active {
  background: var(--accent-wash);
  border-color: rgba(42, 111, 219, .4);
  color: var(--accent-deep);
}
.chip .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
}
.chip.active .count { color: var(--accent); }

/* Segmented filter (All / API key / OAuth) */
.seg {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 8px;
  padding: 3px;
}
.seg button {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--t-3);
  font-size: 12px;
  font-weight: 500;
  transition: all .15s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.seg button.active {
  background: var(--accent-wash);
  color: var(--accent-deep);
}

/* Category sections */
.cat-section { margin-bottom: 40px; }
.cat-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-cream);
  flex-wrap: wrap;
}
.cat-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: .12em;
}
.cat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t-1);
  letter-spacing: -.01em;
}
.cat-desc {
  font-size: 13px;
  color: var(--t-3);
  margin-left: auto;
}

/* Provider grid */
.prov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 920px) {
  .prov-grid { grid-template-columns: 1fr; }
}

/* Provider card */
.prov {
  background: var(--card);
  border: 1px solid var(--rule-cream);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.prov:hover {
  border-color: var(--rule-cream-strong);
  box-shadow: 0 4px 14px -8px rgba(13, 37, 48, .08);
}
.prov.connected { border-color: rgba(42, 138, 91, .18); }
.prov.unconfigured { background: var(--card-soft); }
.prov.soon { opacity: .65; }

.prov-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px 14px;
}
.prov-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  color: var(--t-1);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--rule-cream-strong);
  overflow: hidden;
}
.prov-logo svg { width: 22px; height: 22px; }
.prov-logo.dark {
  background: #0F0F10;
  color: #fff;
  border-color: #0F0F10;
}
.prov-logo.tinted { background: var(--cream-100); }

.prov-meta {
  flex: 1;
  min-width: 0;
}
.prov-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.prov-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--t-1);
  letter-spacing: -.01em;
}
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid;
}
.auth-badge.apikey {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: rgba(42, 111, 219, .22);
}
.auth-badge.oauth {
  background: rgba(106, 74, 199, .10);
  color: #5e3fbd;
  border-color: rgba(106, 74, 199, .22);
}
.auth-badge.webhook {
  background: rgba(63, 157, 82, .10);
  color: #2a6f3c;
  border-color: rgba(63, 157, 82, .22);
}
.prov-kind {
  font-size: 12px;
  color: var(--t-3);
  font-family: var(--font-mono);
  letter-spacing: .01em;
}

.prov-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  flex-shrink: 0;
}
.prov-status.connected {
  background: var(--ok-wash, rgba(42, 138, 91, .12));
  color: var(--ok);
}
.prov-status.empty {
  background: var(--cream-200);
  color: var(--t-3);
}
.prov-status.soon {
  background: var(--cream-200);
  color: var(--t-4);
}
.prov-status .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Credentials list */
.creds { border-top: 1px solid var(--rule-cream); }
.cred {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-cream);
  transition: background .12s;
}
.cred:last-child { border-bottom: none; }
.cred:hover { background: var(--cream-100); }
.cred-main { min-width: 0; }
.cred-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cred-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-1);
}
.cred-default {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.cred-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cred-value .acc { color: var(--t-2); }
.cred-value .sep { color: var(--t-4); }
.cred-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s;
}
.cred:hover .cred-actions { opacity: 1; }
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--t-3);
  cursor: pointer;
  transition: all .15s;
  background: transparent;
  border: none;
}
.icon-btn:hover {
  background: var(--cream-200);
  color: var(--t-1);
}
.icon-btn.danger:hover {
  background: var(--danger-wash, rgba(196, 74, 63, .10));
  color: var(--danger, #c44a3f);
}
.icon-btn svg { width: 14px; height: 14px; }

/* Provider footer */
.prov-foot {
  padding: 10px 12px 10px 18px;
  border-top: 1px dashed var(--rule-cream-strong);
  background: var(--card-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.add-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  background: transparent;
  border: 1px dashed transparent;
  font-family: inherit;
}
.add-key:hover {
  background: var(--accent-wash);
  border-color: rgba(42, 111, 219, .25);
}
.add-key svg { width: 13px; height: 13px; }
.prov-foot .docs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-2);
  background: var(--card);
  border: 1px solid var(--rule-cream-strong);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .01em;
  text-decoration: none;
}
.prov-foot .docs:hover {
  color: var(--accent-deep);
  border-color: rgba(42, 111, 219, .3);
  background: var(--accent-wash);
}
.prov-foot .docs svg { width: 11px; height: 11px; }
.prov-foot .docs .lbl {
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 600;
}
.prov-foot .docs:hover .lbl { color: var(--accent); }

/* Empty state inside provider card */
.prov-empty {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rule-cream);
}
.prov-empty p {
  font-size: 12px;
  color: var(--t-4);
  font-family: var(--font-mono);
  letter-spacing: .01em;
  margin: 0;
}
.prov-empty .row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prov-empty .connect {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: var(--accent);
  cursor: pointer;
  transition: all .15s;
  border: none;
  font-family: inherit;
}
.prov-empty .connect:hover { background: var(--accent-deep); }
.prov-empty .connect:disabled { opacity: .5; cursor: not-allowed; }
.prov-empty .connect svg { width: 13px; height: 13px; }

/* Soon roadmap grid */
.soon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 920px) {
  .soon-grid { grid-template-columns: repeat(2, 1fr); }
}
.soon-card {
  background: var(--card-soft);
  border: 1px dashed var(--rule-cream-strong);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.soon-card .prov-logo {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.soon-card .prov-logo svg { width: 18px; height: 18px; }
.soon-card .info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.soon-card .nm {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-2);
}
.soon-card .tag {
  font-size: 11px;
  color: var(--t-4);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.soon-card .pin {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--cream-200);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--rule-cream);
  flex-shrink: 0;
}

/* Credentials modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 37, 48, .45);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-fade-in .15s ease-out;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-box {
  background: var(--card);
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 30px 60px -20px rgba(13, 37, 48, .4);
  overflow: hidden;
  border: 1px solid var(--rule-cream);
  animation: modal-pop-in .2s cubic-bezier(.2, .8, .2, 1.05);
}
@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  padding: 22px 24px 6px;
}
.modal-head .crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.modal-head .crumb .logo-mini {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--cream-200);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--t-1);
  font-weight: 700;
  overflow: hidden;
}
.modal-head .crumb .logo-mini img { width: 14px; height: 14px; }
.modal-head .crumb-sep { color: var(--t-4); }
.modal-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--t-1);
  letter-spacing: -.01em;
  margin: 0;
}
.modal-head h3 .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--t-3);
}
.modal-head .sub {
  font-size: 13px;
  color: var(--t-3);
  margin: 4px 0 0;
  line-height: 1.5;
}
.modal-head .sub code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(13, 37, 48, .06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--t-1);
  letter-spacing: .01em;
}
.modal-body {
  padding: 18px 24px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-body .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-body .field label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-3);
  font-weight: 600;
}
.modal-body .field label .req { color: var(--accent); }
.modal-body .field input[type="text"],
.modal-body .field input[type="password"] {
  padding: 10px 12px;
  border: 1px solid var(--rule-cream-strong);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--t-1);
  background: var(--card-soft);
  outline: none;
  transition: all .15s;
  width: 100%;
  box-sizing: border-box;
}
.modal-body .field input[type="text"]:focus,
.modal-body .field input[type="password"]:focus {
  border-color: var(--accent);
  background: white;
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.modal-body .field input.invalid {
  border-color: var(--danger, #c44a3f);
  box-shadow: 0 0 0 4px rgba(196, 74, 63, .08);
}
.modal-body .field .hint {
  font-size: 11px;
  color: var(--t-4);
  font-family: var(--font-mono);
  letter-spacing: .01em;
}
.modal-body .field .err {
  font-size: 12px;
  color: var(--danger, #c44a3f);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-body .field .err svg { width: 13px; height: 13px; flex-shrink: 0; }

.input-with-eye {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-with-eye input { padding-right: 40px !important; }
.input-with-eye .eye-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t-4);
  transition: all .12s;
}
.input-with-eye .eye-toggle:hover {
  background: var(--cream-200);
  color: var(--t-1);
}
.input-with-eye .eye-toggle svg { width: 14px; height: 14px; }

.field .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--t-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-family: var(--font-sans);
}
.field .checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.modal-foot {
  padding: 16px 24px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--rule-cream);
  margin-top: 14px;
  background: var(--card-soft);
}
.modal-foot .btn-ghost { padding: 9px 16px; }
.modal-foot .btn-primary { padding: 9px 18px; }
.modal-foot .btn-primary:disabled { opacity: .6; cursor: wait; }

.modal-error-banner {
  margin: 0 24px 4px;
  padding: 10px 12px;
  background: var(--danger-wash, rgba(196, 74, 63, .10));
  border: 1px solid rgba(196, 74, 63, .25);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--danger, #c44a3f);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.modal-error-banner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}