/* PT Issue Tracker — v1.1.0 — Light/Dark Theme System
   Default: light. data-theme="dark" on .ptit for dark mode.
   ─────────────────────────────────────────────────────── */

/* ── Light theme (default) ──────────────────────────────── */
.ptit {
  --pt-bg:             #f5f5f3;
  --pt-surface:        #ffffff;
  --pt-surface-1:      #f9f9f7;
  --pt-surface-2:      #f3f3f0;
  --pt-border:         #e5e5e2;
  --pt-border-soft:    #eeeeeb;
  --pt-text:           #111827;
  --pt-text-muted:     #6b7280;
  --pt-text-faint:     #9ca3af;
  --pt-primary:        #2563eb;
  --pt-primary-bg:     rgba(37,99,235,.08);
  --pt-primary-border: rgba(37,99,235,.25);
  --pt-green:          #059669;
  --pt-green-bg:       rgba(5,150,105,.08);
  --pt-green-border:   rgba(5,150,105,.25);
  --pt-amber:          #d97706;
  --pt-amber-bg:       rgba(217,119,6,.08);
  --pt-amber-border:   rgba(217,119,6,.25);
  --pt-red:            #dc2626;
  --pt-red-bg:         rgba(220,38,38,.08);
  --pt-red-border:     rgba(220,38,38,.25);
  --pt-purple:         #7c3aed;
  --pt-purple-bg:      rgba(124,58,237,.08);
  --pt-purple-border:  rgba(124,58,237,.25);
  --pt-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --pt-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --pt-shadow-lg: 0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --pt-radius-sm: 8px;
  --pt-radius-md: 14px;
  --pt-radius-lg: 20px;
  --pt-radius-xl: 24px;
  --pt-font: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --pt-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--pt-text);
  font-family: var(--pt-font);
}

/* ── Dark theme ─────────────────────────────────────────── */
.ptit[data-theme="dark"] {
  --pt-bg:             #0b0f14;
  --pt-surface:        #111827;
  --pt-surface-1:      #0f1520;
  --pt-surface-2:      #161e2e;
  --pt-border:         rgba(255,255,255,.13);
  --pt-border-soft:    rgba(255,255,255,.08);
  --pt-text:           rgba(255,255,255,.92);
  --pt-text-muted:     rgba(255,255,255,.55);
  --pt-text-faint:     rgba(255,255,255,.35);
  --pt-primary:        #60a5fa;
  --pt-primary-bg:     rgba(96,165,250,.12);
  --pt-primary-border: rgba(96,165,250,.35);
  --pt-green:          #34d399;
  --pt-green-bg:       rgba(52,211,153,.10);
  --pt-green-border:   rgba(52,211,153,.30);
  --pt-amber:          #fbbf24;
  --pt-amber-bg:       rgba(251,191,36,.10);
  --pt-amber-border:   rgba(251,191,36,.30);
  --pt-red:            #f87171;
  --pt-red-bg:         rgba(248,113,113,.10);
  --pt-red-border:     rgba(248,113,113,.30);
  --pt-purple:         #a78bfa;
  --pt-purple-bg:      rgba(167,139,250,.10);
  --pt-purple-border:  rgba(167,139,250,.30);
  --pt-shadow-sm: 0 1px 3px rgba(0,0,0,.4),  0 1px 2px rgba(0,0,0,.3);
  --pt-shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
  --pt-shadow-lg: 0 10px 30px rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.35);
}

/* ── Base ───────────────────────────────────────────────── */
.ptit * { box-sizing: border-box; }
.ptit a { color: var(--pt-primary); text-decoration: none; }
.ptit a:hover { text-decoration: underline; }
.ptit-muted { color: var(--pt-text-muted); font-size: 13px; }

/* ── Theme toggle ───────────────────────────────────────── */
.ptit-theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--pt-radius-sm);
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  color: var(--pt-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: var(--pt-shadow-sm);
  transition: all .15s;
  flex-shrink: 0;
}
.ptit-theme-toggle:hover {
  background: var(--pt-surface-1);
  color: var(--pt-text);
  border-color: var(--pt-primary-border);
}

/* ── Topbar ─────────────────────────────────────────────── */
.ptit-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow-sm);
  flex-wrap: wrap;
}
.ptit-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ptit-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-1);
  color: var(--pt-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.ptit-tab:hover { border-color: var(--pt-primary-border); color: var(--pt-text); text-decoration: none; }
.ptit-tab.is-active {
  border-color: var(--pt-primary-border);
  background: var(--pt-primary-bg);
  color: var(--pt-primary);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--pt-primary-bg);
}
.ptit-actions { display: flex; align-items: center; gap: 8px; }

/* ── Stats bar ──────────────────────────────────────────── */
.ptit-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}
@media (max-width:1100px) { .ptit-stats { grid-template-columns: repeat(3,minmax(110px,1fr)); } }
@media (max-width:560px)  { .ptit-stats { grid-template-columns: repeat(2,minmax(110px,1fr)); } }
.ptit-stat {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  padding: 14px 14px 12px;
  box-shadow: var(--pt-shadow-sm);
}
.ptit-stat__label { font-size: 12px; color: var(--pt-text-muted); font-weight: 500; }
.ptit-stat__value { font-size: 24px; font-weight: 700; margin-top: 6px; color: var(--pt-text); letter-spacing: -.3px; }

/* ── Sections ───────────────────────────────────────────── */
.ptit-section { margin: 14px 0; }
.ptit-section--kanban {
  padding: 14px;
  border-radius: var(--pt-radius-lg);
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-1);
}
.ptit-section--editor,
.ptit-section--single {
  padding: 14px;
  border-radius: var(--pt-radius-lg);
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  box-shadow: var(--pt-shadow-sm);
}

/* ── Kanban ─────────────────────────────────────────────── */
.ptit-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 12px;
}
@media (max-width:1100px) { .ptit-kanban { grid-template-columns: repeat(2,minmax(240px,1fr)); } }
@media (max-width:600px)  { .ptit-kanban { grid-template-columns: 1fr; } }
.ptit-col {
  border-radius: var(--pt-radius-md);
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  box-shadow: var(--pt-shadow-sm);
  overflow: hidden;
  min-height: 220px;
}
.ptit-col__head {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pt-surface-1);
  border-bottom: 1px solid var(--pt-border-soft);
}
.ptit-col__title { font-weight: 700; font-size: 14px; color: var(--pt-text); }
.ptit-col__count {
  font-family: var(--pt-mono);
  font-size: 11px;
  background: var(--pt-surface-2);
  border: 1px solid var(--pt-border);
  color: var(--pt-text-muted);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
}
.ptit-col__body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ptit-col.is-drop-hover {
  outline: 2px dashed var(--pt-primary);
  outline-offset: -4px;
  background: var(--pt-primary-bg);
}

/* ── Cards ──────────────────────────────────────────────── */
.ptit-card {
  border-radius: var(--pt-radius-md);
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  box-shadow: var(--pt-shadow-sm);
  padding: 12px 14px;
  transition: box-shadow .15s, border-color .15s;
}
.ptit-card:hover { box-shadow: var(--pt-shadow-md); border-color: var(--pt-primary-border); }
.ptit-card[draggable="true"] { cursor: grab; }
.ptit-card.is-dragging { opacity: .55; transform: rotate(1.5deg); }
.ptit-card__top { display: flex; gap: 10px; }
.ptit-thumb {
  width: 48px; height: 48px;
  border-radius: var(--pt-radius-sm);
  object-fit: cover;
  border: 1px solid var(--pt-border);
  flex-shrink: 0;
}
.ptit-card__titlewrap { flex: 1; min-width: 0; }
.ptit-card__title {
  display: block;
  font-weight: 600;
  color: var(--pt-text);
  font-size: 14px;
  line-height: 1.35;
}
.ptit-card__title:hover { color: var(--pt-primary); text-decoration: none; }
.ptit-card__id { font-size: 11px; color: var(--pt-text-faint); margin-top: 2px; }
.ptit-card__meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.ptit-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--pt-border-soft);
}
.ptit-small { font-size: 12px; color: var(--pt-text-muted); }

/* ── Badges ─────────────────────────────────────────────── */
.ptit-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-1);
  color: var(--pt-text-muted);
}
.ptit-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--pt-primary-border);
  background: var(--pt-primary-bg);
  color: var(--pt-primary);
}
.ptit-chip--env:hover { filter: brightness(.95); text-decoration: none; }
.ptit-badge--type-bug    { border-color:var(--pt-red-border);    background:var(--pt-red-bg);    color:var(--pt-red); }
.ptit-badge--type-change { border-color:var(--pt-primary-border);background:var(--pt-primary-bg);color:var(--pt-primary); }
.ptit-badge--type-task   { border-color:var(--pt-green-border);  background:var(--pt-green-bg);  color:var(--pt-green); }
.ptit-badge--priority-low    { border-color:var(--pt-border); }
.ptit-badge--priority-medium { border-color:var(--pt-primary-border); background:var(--pt-primary-bg); color:var(--pt-primary); }
.ptit-badge--priority-high   { border-color:var(--pt-amber-border);   background:var(--pt-amber-bg);   color:var(--pt-amber); }
.ptit-badge--priority-urgent { border-color:var(--pt-red-border);     background:var(--pt-red-bg);     color:var(--pt-red); }
.ptit-badge--due-overdue { border-color:var(--pt-red-border);   background:var(--pt-red-bg);   color:var(--pt-red); }
.ptit-badge--due-on      { border-color:var(--pt-green-border); background:var(--pt-green-bg); color:var(--pt-green); }

/* ── Buttons ────────────────────────────────────────────── */
.ptit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  color: var(--pt-text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: all .15s;
  box-shadow: var(--pt-shadow-sm);
}
.ptit-btn:hover { text-decoration: none; border-color: var(--pt-primary-border); color: var(--pt-primary); }
.ptit-btn--filled {
  background: var(--pt-primary);
  border-color: var(--pt-primary);
  color: #fff;
}
.ptit-btn--filled:hover { filter: brightness(1.06); color: #fff; }
.ptit-btn--tonal {
  background: var(--pt-primary-bg);
  border-color: var(--pt-primary-border);
  color: var(--pt-primary);
}
.ptit-btn--tonal:hover { filter: brightness(.96); color: var(--pt-primary); }
.ptit-iconbtn {
  width: 36px; height: 36px;
  border-radius: var(--pt-radius-sm);
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  color: var(--pt-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pt-shadow-sm);
  transition: all .15s;
}
.ptit-iconbtn:hover { background: var(--pt-surface-1); color: var(--pt-text); border-color: var(--pt-primary-border); }

/* ── Inputs ─────────────────────────────────────────────── */
.ptit-input,
.ptit input[type="text"],
.ptit input[type="email"],
.ptit input[type="url"],
.ptit input[type="search"],
.ptit input[type="tel"],
.ptit input[type="number"],
.ptit input[type="date"],
.ptit input[type="password"],
.ptit select,
.ptit textarea {
  background: var(--pt-surface) !important;
  color: var(--pt-text) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-sm) !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  font-family: var(--pt-font) !important;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.ptit-input:focus,
.ptit input:focus,
.ptit select:focus,
.ptit textarea:focus {
  border-color: var(--pt-primary) !important;
  box-shadow: 0 0 0 3px var(--pt-primary-bg) !important;
}
.ptit input::placeholder,
.ptit textarea::placeholder { color: var(--pt-text-faint) !important; }

/* ── Editor / Form ──────────────────────────────────────── */
.ptit-editor { padding: 0; overflow: hidden; }
.ptit-editor__head {
  padding: 14px 16px;
  background: var(--pt-surface-1);
  border-bottom: 1px solid var(--pt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ptit-editor__title { font-weight: 700; font-size: 15px; color: var(--pt-text); }
.ptit-form { padding: 16px; }
.ptit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width:600px) { .ptit-grid { grid-template-columns: 1fr; } }
.ptit-field { display: flex; flex-direction: column; gap: 5px; }
.ptit-field--full { grid-column: 1/-1; }
.ptit-field label { font-size: 12px; font-weight: 600; color: var(--pt-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.ptit-form__actions {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--pt-border);
  background: var(--pt-surface-1);
}

/* ── Single issue ───────────────────────────────────────── */
.ptit-single { padding: 0; overflow: hidden; }
.ptit-single__head {
  padding: 14px 16px;
  background: var(--pt-surface-1);
  border-bottom: 1px solid var(--pt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ptit-single__title { font-weight: 700; font-size: 16px; color: var(--pt-text); flex: 1; min-width: 0; }
.ptit-divider { border: none; border-top: 1px solid var(--pt-border); margin: 16px 0; }

/* ── Comments / Activity ────────────────────────────────── */
.ptit-comments { padding: 0 16px 16px; }
.ptit-comment {
  background: var(--pt-surface-1);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ptit-comment__author { font-weight: 600; font-size: 13px; color: var(--pt-text); }
.ptit-comment__date   { font-size: 12px; color: var(--pt-text-faint); margin-left: 8px; }
.ptit-comment__body   { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--pt-text); }
.ptit-activity { padding: 0 16px; }
.ptit-activity__item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pt-border-soft);
  font-size: 13px;
  color: var(--pt-text-muted);
}
.ptit-activity__item:last-child { border-bottom: none; }

/* ── Attachments ────────────────────────────────────────── */
.ptit-attach { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px; }
.ptit-attach img {
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: var(--pt-radius-sm);
  border: 1px solid var(--pt-border);
  transition: border-color .15s;
}
.ptit-attach img:hover { border-color: var(--pt-primary); }

/* ── Pin info ───────────────────────────────────────────── */
.ptit-pin-info { padding: 12px 16px; font-size: 13px; }
.ptit-pin-info__row { display: flex; gap: 8px; margin-bottom: 5px; color: var(--pt-text); }
.ptit-pin-info__row code {
  background: var(--pt-surface-1);
  border: 1px solid var(--pt-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--pt-mono);
  font-size: 12px;
  color: var(--pt-primary);
}

/* ── Pin confirmation bar ───────────────────────────────── */
.ptit-pin-confirm {
  background: var(--pt-primary-bg);
  border-bottom: 1px solid var(--pt-primary-border);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--pt-primary);
  font-weight: 600;
}

/* ── Modal ──────────────────────────────────────────────── */
.ptit-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ptit-modal.is-open { display: flex; }
.ptit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(3px);
}
.ptit-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  box-shadow: var(--pt-shadow-lg);
  width: min(720px,100%);
  max-height: 92vh;
  overflow-y: auto;
}
.ptit-modal__head {
  padding: 16px 20px;
  background: var(--pt-surface-1);
  border-bottom: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl) var(--pt-radius-xl) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1;
}
#ptit-modal-title { font-weight: 700; font-size: 16px; color: var(--pt-text); }
.ptit-modal__close {
  background: transparent;
  border: 0;
  color: var(--pt-text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--pt-radius-sm);
  line-height: 1;
  transition: background .1s;
}
.ptit-modal__close:hover { background: var(--pt-surface-2); color: var(--pt-text); }

/* ── Page filter chips ──────────────────────────────────── */
.ptit-tabswrap { display: flex; flex-direction: column; gap: 10px; }
.ptit-pagechips { display: flex; gap: 6px; flex-wrap: wrap; }
.ptit-chipbtn {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  color: var(--pt-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  box-shadow: var(--pt-shadow-sm);
}
.ptit-chipbtn:hover { border-color: var(--pt-green-border); color: var(--pt-green); text-decoration: none; }
.ptit-chipbtn.is-active {
  border-color: var(--pt-green-border);
  background: var(--pt-green-bg);
  color: var(--pt-green);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--pt-green-bg);
}

/* ── Search + Bulk ──────────────────────────────────────── */
.ptit-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}
.ptit-search-wrap { flex: 1; min-width: 200px; max-width: 380px; }
.ptit-search { font-size: 14px !important; }
.ptit-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; animation: ptit-fadein .15s ease; }
@keyframes ptit-fadein { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.ptit-bulk__select { width: auto; font-size: 13px !important; padding: 9px 12px !important; }
.ptit-bulk__apply  { padding: 9px 14px !important; font-size: 13px !important; }
.ptit-bulk__clear  { padding: 9px 14px !important; font-size: 13px !important; }

/* Card checkbox */
.ptit-card__check {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
  gap: 6px;
  font-size: 12px;
  color: var(--pt-text-muted);
  user-select: none;
}
.ptit-card__check input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--pt-primary);
  cursor: pointer;
  margin: 0;
}
.ptit-card.is-selected {
  border-color: var(--pt-primary-border) !important;
  background: var(--pt-primary-bg) !important;
  box-shadow: 0 0 0 2px var(--pt-primary-bg), var(--pt-shadow-sm) !important;
}
.ptit-card.is-hidden { display: none; }

/* ── Make Note widget ───────────────────────────────────── */
.ptit-report { position: fixed; right: 16px; bottom: 16px; z-index: 99999; font-family: var(--pt-font); }
.ptit-report__fab {
  border: 1px solid var(--pt-green-border, rgba(5,150,105,.25));
  background: var(--pt-green-bg, rgba(5,150,105,.08));
  color: var(--pt-green, #059669);
  border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  font-weight: 700;
  font-size: 14px;
  transition: all .15s;
}
.ptit-report__fab:hover { background: var(--pt-green, #059669); color: #fff; }
.ptit-report__panel {
  width: min(420px, calc(100vw - 32px));
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid var(--pt-border, #e5e5e2);
  background: var(--pt-surface, #fff);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  display: none;
  overflow: hidden;
}
.ptit-report.is-open .ptit-report__panel { display: block; }
.ptit-report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--pt-border, #e5e5e2);
  background: var(--pt-surface-1, #f9f9f7);
}
.ptit-report__title { font-weight: 700; font-size: 14px; color: var(--pt-text, #111827); }
.ptit-report__close {
  background: transparent;
  border: 0;
  color: var(--pt-text-muted, #6b7280);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.ptit-report__close:hover { background: var(--pt-surface-2, #f3f3f0); }
.ptit-report__meta { padding: 10px 14px 0; font-size: 12px; color: var(--pt-text-muted, #6b7280); }
.ptit-report__form { padding: 10px 14px 14px; }
.ptit-report__result { margin-top: 10px; font-size: 12px; color: var(--pt-green, #059669); font-weight: 600; }

@media (max-width:640px) {
  .ptit-report { left: 12px; right: 12px; bottom: 12px; }
  .ptit-report__fab { width: 100%; }
  .ptit-report__panel { width: 100%; }
}

/* ── Project Health Dashboard ───────────────────────────── */
.ptit-health { font-family: var(--pt-font, ui-sans-serif, system-ui, sans-serif); }

.ptit-health__hero {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--pt-surface, #fff);
  border: 1px solid var(--pt-border, #e5e5e2);
  border-radius: 22px;
  padding: 24px 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  box-shadow: var(--pt-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.ptit-health__score-wrap  { flex-shrink: 0; }
.ptit-health__arc         { overflow: visible; }
.ptit-health__score-detail{ flex: 1; min-width: 200px; }
.ptit-health__score-label { font-size: 23px; font-weight: 700; margin-bottom: 6px; color: var(--pt-text, #111827); }
.ptit-health__score-sub   { font-size: 15px; color: var(--pt-text-muted, #6b7280); margin-bottom: 16px; }
.ptit-health__global-stats{ display: flex; gap: 8px; flex-wrap: wrap; }

.ptit-health__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.ptit-health__card {
  background: var(--pt-surface, #fff);
  border: 1px solid var(--pt-border, #e5e5e2);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--pt-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
  transition: box-shadow .15s, border-color .15s;
}
.ptit-health__card:hover {
  box-shadow: var(--pt-shadow-md, 0 4px 12px rgba(0,0,0,.08));
  border-color: var(--pt-primary-border, rgba(37,99,235,.25));
}
.ptit-health__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ptit-health__project-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--pt-text, #111827);
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
}
.ptit-health__project-name:hover { color: var(--pt-primary, #2563eb); text-decoration: none; }

.ptit-health__badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Light mode health badges */
.ptit-health__badge--ready { background:rgba(5,150,105,.10);  border:1px solid rgba(5,150,105,.3);  color:#059669; }
.ptit-health__badge--good  { background:rgba(37,99,235,.08);  border:1px solid rgba(37,99,235,.25); color:#2563eb; }
.ptit-health__badge--warn  { background:rgba(217,119,6,.08);  border:1px solid rgba(217,119,6,.25); color:#d97706; }
/* Dark mode overrides */
.ptit[data-theme="dark"] .ptit-health__badge--ready { background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35); color:#34d399; }
.ptit[data-theme="dark"] .ptit-health__badge--good  { background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.35); color:#60a5fa; }
.ptit[data-theme="dark"] .ptit-health__badge--warn  { background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35); color:#fbbf24; }

.ptit-health__bar {
  display: flex;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pt-surface-2, #f3f3f0);
  margin-bottom: 14px;
  gap: 2px;
}
.ptit[data-theme="dark"] .ptit-health__bar { background: rgba(255,255,255,.07); }
.ptit-health__bar-seg { border-radius: 999px; min-width: 3px; }

.ptit-health__stats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ptit-health__stat {
  background: var(--pt-surface-1, #f9f9f7);
  border: 1px solid var(--pt-border, #e5e5e2);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 50px;
  text-align: center;
  flex: 1;
}
/* Light */
.ptit-health__stat--warn   { border-color:rgba(217,119,6,.3);   background:rgba(217,119,6,.07); }
.ptit-health__stat--danger { border-color:rgba(220,38,38,.3);   background:rgba(220,38,38,.07); }
.ptit-health__stat--good   { border-color:rgba(5,150,105,.25);  background:rgba(5,150,105,.07); }
/* Dark */
.ptit[data-theme="dark"] .ptit-health__stat--warn   { border-color:rgba(251,191,36,.35);  background:rgba(251,191,36,.08); }
.ptit[data-theme="dark"] .ptit-health__stat--danger { border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.08); }
.ptit[data-theme="dark"] .ptit-health__stat--good   { border-color:rgba(52,211,153,.25);  background:rgba(52,211,153,.06); }

.ptit-health__stat-val   { font-size: 21px; font-weight: 700; color: var(--pt-text, #111827); line-height: 1; }
.ptit-health__stat-label { font-size: 12px; color: var(--pt-text-muted, #6b7280); margin-top: 3px; }
/* Light stat value colors */
.ptit-health__stat--warn   .ptit-health__stat-val { color:#d97706; }
.ptit-health__stat--danger .ptit-health__stat-val { color:#dc2626; }
.ptit-health__stat--good   .ptit-health__stat-val { color:#059669; }
/* Dark stat value colors */
.ptit[data-theme="dark"] .ptit-health__stat--warn   .ptit-health__stat-val { color:#fbbf24; }
.ptit[data-theme="dark"] .ptit-health__stat--danger .ptit-health__stat-val { color:#f87171; }
.ptit[data-theme="dark"] .ptit-health__stat--good   .ptit-health__stat-val { color:#34d399; }

.ptit-health__last {
  font-size: 12px;
  color: var(--pt-text-muted, #6b7280);
  border-top: 1px solid var(--pt-border-soft, #eeeeeb);
  padding-top: 10px;
  line-height: 1.5;
}
.ptit-health__last-title { color: var(--pt-text, #111827); font-weight: 500; }

/* Admin health page (no .ptit wrapper — standalone light styles) */
.ptit-health--admin .ptit-health__hero    { background:#fff; border-color:#e5e5e2; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ptit-health--admin .ptit-health__card    { background:#fff; border-color:#e5e5e2; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ptit-health--admin .ptit-health__bar     { background:#f3f3f0; }
.ptit-health--admin .ptit-health__score-label { color:#111827; }
.ptit-health--admin .ptit-health__score-sub   { color:#6b7280; }
.ptit-health--admin .ptit-health__project-name{ color:#111827; }
.ptit-health--admin .ptit-health__last        { color:#6b7280; border-color:#eeeeeb; }
.ptit-health--admin .ptit-health__last-title  { color:#111827; }
.ptit-health--admin .ptit-health__stat        { background:#f9f9f7; border-color:#e5e5e2; }
.ptit-health--admin .ptit-health__stat-val    { color:#111827; }
.ptit-health--admin .ptit-health__stat-label  { color:#6b7280; }
.ptit-health--admin .ptit-muted               { color:#6b7280; }
.ptit-health--admin .ptit-health__badge--ready{ background:rgba(5,150,105,.10);  border:1px solid rgba(5,150,105,.3);  color:#059669; }
.ptit-health--admin .ptit-health__badge--good { background:rgba(37,99,235,.08);  border:1px solid rgba(37,99,235,.25); color:#2563eb; }
.ptit-health--admin .ptit-health__badge--warn { background:rgba(217,119,6,.08);  border:1px solid rgba(217,119,6,.25); color:#d97706; }
.ptit-health--admin .ptit-health__stat--warn   { border-color:rgba(217,119,6,.3);  background:rgba(217,119,6,.07); }
.ptit-health--admin .ptit-health__stat--danger { border-color:rgba(220,38,38,.3);  background:rgba(220,38,38,.07); }
.ptit-health--admin .ptit-health__stat--good   { border-color:rgba(5,150,105,.25); background:rgba(5,150,105,.07); }
.ptit-health--admin .ptit-health__stat--warn   .ptit-health__stat-val { color:#d97706; }
.ptit-health--admin .ptit-health__stat--danger .ptit-health__stat-val { color:#dc2626; }
.ptit-health--admin .ptit-health__stat--good   .ptit-health__stat-val { color:#059669; }

/* ── Make Note — loading overlay ───────────────────────────── */
@keyframes ptit-spin {
  to { transform: rotate(360deg); }
}

.ptit-report__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(3px);
  border-radius: 0 0 20px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 10;
}

/* Dark mode overlay */
.ptit[data-theme="dark"] .ptit-report__loading,
.ptit-report .ptit-report__loading {
  background: rgba(17, 24, 39, .72);
}

.ptit-report__loading.is-active {
  opacity: 1;
  pointer-events: all;
}

.ptit-report__spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(37,99,235,.15);
  border-top-color: #2563eb;
  animation: ptit-spin .7s linear infinite;
}

/* Dark mode spinner */
.ptit-report .ptit-report__spinner {
  border-color: rgba(96,165,250,.15);
  border-top-color: #60a5fa;
}

.ptit-report__loading-text {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.ptit-report .ptit-report__loading-text {
  color: #60a5fa;
}