/* ============================================================
   Megatest Design System
   Semantic classes — every visual pattern named once, reused everywhere.
   ============================================================ */

/* --- Reset & Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* palette */
  --c-bg:        #0d1117;
  --c-surface:   #161b22;
  --c-border:    #30363d;
  --c-text:      #e6edf3;
  --c-muted:     #8b949e;
  --c-accent:    #58a6ff;
  --c-accent-bg: rgba(56,139,253,.15);
  --c-pass:      #3fb950;
  --c-pass-bg:   rgba(63,185,80,.15);
  --c-fail:      #f85149;
  --c-fail-bg:   rgba(248,81,73,.15);
  --c-new:       #d29922;
  --c-new-bg:    rgba(210,153,34,.15);
  --c-error:     #f85149;

  /* spacing scale */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px;  --sp-lg: 24px;  --sp-xl: 32px;  --sp-2xl: 48px;

  /* type */
  --ff: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ff-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  --fs-xs: 11px;  --fs-sm: 12px;  --fs-md: 14px;  --fs-lg: 16px;  --fs-xl: 20px;  --fs-2xl: 24px;

  /* radii */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 12px;  --r-pill: 100px;

  /* misc */
  --shadow: 0 1px 3px rgba(0,0,0,.4);
  --sidebar-w: 260px;
}

html { font-size: var(--fs-md); }
body {
  font-family: var(--ff);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }


/* --- Layout ------------------------------------------------ */
.app           { display: flex; min-height: 100vh; }
.sidebar       { width: var(--sidebar-w); background: var(--c-surface); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; }
.main          { flex: 1; margin-left: var(--sidebar-w); }
.page          { max-width: 1100px; margin: 0 auto; padding: var(--sp-xl); }
.page--wide    { max-width: 1400px; }
.page--full    { max-width: none; }

.sidebar__logo       { padding: var(--sp-lg); font-size: var(--fs-xl); font-weight: 700; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: var(--sp-sm); }
.sidebar__logo svg   { width: 24px; height: 24px; }
.sidebar__nav        { flex: 1; padding: var(--sp-sm) 0; overflow-y: auto; }
.sidebar__section    { padding: var(--sp-xs) var(--sp-md); font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: var(--sp-md); }
.sidebar__footer     { padding: var(--sp-md); border-top: 1px solid var(--c-border); }

.nav-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  color: var(--c-muted); font-size: var(--fs-md);
  border-radius: var(--r-md); margin: 2px var(--sp-sm);
  transition: background .15s, color .15s;
}
.nav-item:hover              { background: var(--c-border); color: var(--c-text); text-decoration: none; }
.nav-item.active             { background: var(--c-accent-bg); color: var(--c-accent); }
.nav-item svg                { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item__badge             { margin-left: auto; font-size: var(--fs-xs); background: var(--c-fail-bg); color: var(--c-fail); padding: 1px 6px; border-radius: var(--r-pill); }


/* --- Header bar (in-page) ---------------------------------- */
.topbar {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-xl);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  position: sticky; top: 0; z-index: 5;
}
.topbar__breadcrumb           { display: flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-md); color: var(--c-muted); }
.topbar__breadcrumb a         { color: var(--c-muted); }
.topbar__breadcrumb a:hover   { color: var(--c-text); }
.topbar__breadcrumb span      { color: var(--c-text); font-weight: 600; }
.topbar__actions              { margin-left: auto; display: flex; gap: var(--sp-sm); }


/* --- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  padding: 6px 14px;
  font-size: var(--fs-md); font-weight: 500; font-family: var(--ff);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover                    { background: var(--c-border); text-decoration: none; }
.btn svg                      { width: 16px; height: 16px; }
.btn--primary                 { background: #238636; border-color: rgba(63,185,80,.4); color: #fff; }
.btn--primary:hover           { background: #2ea043; }
.btn--danger                  { background: var(--c-fail-bg); border-color: rgba(248,81,73,.4); color: var(--c-fail); }
.btn--danger:hover            { background: rgba(248,81,73,.25); }
.btn--accent                  { background: var(--c-accent-bg); border-color: rgba(56,139,253,.4); color: var(--c-accent); }
.btn--accent:hover            { background: rgba(56,139,253,.25); }
.btn--sm                      { padding: 3px 10px; font-size: var(--fs-sm); }
.btn--icon                    { padding: 6px; }
.btn--ghost                   { border-color: transparent; background: transparent; }
.btn--ghost:hover             { background: var(--c-border); }


/* --- Badges & status -------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs); font-weight: 600;
  border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .03em;
}
.badge--pass  { background: var(--c-pass-bg); color: var(--c-pass); }
.badge--fail  { background: var(--c-fail-bg); color: var(--c-fail); }
.badge--new   { background: var(--c-new-bg);  color: var(--c-new); }
.badge--run   { background: var(--c-accent-bg); color: var(--c-accent); }
.badge--muted { background: rgba(139,148,158,.15); color: var(--c-muted); }

.dot       { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--pass { background: var(--c-pass); }
.dot--fail { background: var(--c-fail); }
.dot--new  { background: var(--c-new); }
.dot--run  { background: var(--c-accent); animation: pulse 1.5s infinite; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }


/* --- Cards & panels --------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card__header {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--c-border);
}
.card__header h2, .card__header h3 { font-size: var(--fs-lg); font-weight: 600; }
.card__body   { padding: var(--sp-lg); }
.card__footer { padding: var(--sp-md) var(--sp-lg); border-top: 1px solid var(--c-border); }


/* --- Tables ------------------------------------------------ */
.table          { width: 100%; border-collapse: collapse; }
.table th       { text-align: left; font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--c-border); }
.table td       { padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--c-border); font-size: var(--fs-md); vertical-align: middle; }
.table tbody tr:hover { background: rgba(56,139,253,.04); }
.table__link    { display: flex; align-items: center; gap: var(--sp-sm); }
.table__mono    { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--c-muted); }


/* --- Tabs -------------------------------------------------- */
.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--c-border);
  padding: 0 var(--sp-lg);
}
.tab {
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-md); color: var(--c-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .15s;
  display: flex; align-items: center; gap: var(--sp-xs);
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--ff);
}
.tab:hover          { color: var(--c-text); text-decoration: none; }
.tab.active         { color: var(--c-text); border-bottom-color: var(--c-accent); font-weight: 500; }
.tab__count         { font-size: var(--fs-xs); background: var(--c-border); padding: 1px 6px; border-radius: var(--r-pill); }


/* --- Filter bar -------------------------------------------- */
.filters {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  flex-wrap: wrap;
}
.filter-chip {
  padding: 4px 12px;
  font-size: var(--fs-sm); font-family: var(--ff);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  background: transparent; color: var(--c-muted);
  cursor: pointer; transition: all .15s;
}
.filter-chip:hover       { border-color: var(--c-accent); color: var(--c-text); }
.filter-chip.active      { background: var(--c-accent-bg); border-color: rgba(56,139,253,.4); color: var(--c-accent); }

.search-input {
  padding: 6px 12px 6px 32px;
  font-size: var(--fs-md); font-family: var(--ff);
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md);
  color: var(--c-text); width: 240px;
}
.search-input:focus { outline: none; border-color: var(--c-accent); }
.search-wrap        { position: relative; }
.search-wrap svg    { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--c-muted); }


/* --- Progress --------------------------------------------- */
.progress       { height: 6px; background: var(--c-border); border-radius: 3px; overflow: hidden; }
.progress__bar  { height: 100%; border-radius: 3px; transition: width .3s; }
.progress__bar--pass { background: var(--c-pass); }
.progress__bar--fail { background: var(--c-fail); }
.progress__bar--run  { background: var(--c-accent); animation: pulse 1.5s infinite; }


/* --- Checkpoint card (review page) ------------------------- */
.checkpoint {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color .15s;
}
.checkpoint:hover { border-color: rgba(139,148,158,.4); }
.checkpoint.checkpoint--fail { border-color: rgba(248,81,73,.3); }
.checkpoint.checkpoint--new  { border-color: rgba(210,153,34,.3); }

.checkpoint__header {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.checkpoint__title   { font-weight: 600; font-size: var(--fs-md); }
.checkpoint__meta    { color: var(--c-muted); margin-left: auto; display: flex; gap: var(--sp-md); align-items: center; }

.checkpoint__images {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: var(--c-border);
}
.checkpoint__images--two { grid-template-columns: 1fr 1fr; }

.checkpoint__image-slot {
  background: var(--c-bg);
  display: flex; flex-direction: column;
}
.checkpoint__image-label {
  font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sp-xs) var(--sp-sm);
  text-align: center;
}
.checkpoint__image-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-sm);
  min-height: 180px;
}
.checkpoint__image-wrap img { border-radius: var(--r-sm); max-height: 260px; }

.checkpoint__actions {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-top: 1px solid var(--c-border);
}

/* placeholder rectangles for mock screenshots */
.mock-screenshot {
  width: 100%; aspect-ratio: 16/10;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); color: var(--c-muted);
}
.mock-screenshot--baseline { background: linear-gradient(135deg, #1a2332 0%, #1f2d3d 100%); }
.mock-screenshot--actual   { background: linear-gradient(135deg, #1f2d3d 0%, #2a1f1f 100%); }
.mock-screenshot--diff     { background: linear-gradient(135deg, #2a1f2a 0%, #3d1f1f 100%); }
.mock-screenshot--new      { background: linear-gradient(135deg, #2a2a1f 0%, #3d3d1f 100%); }

/* diff highlight overlay */
.diff-highlight {
  position: relative;
}
.diff-highlight::after {
  content: '';
  position: absolute; inset: 20% 30% 40% 10%;
  border: 2px solid var(--c-fail);
  border-radius: var(--r-sm);
  background: rgba(248,81,73,.08);
  pointer-events: none;
}


/* --- Empty state ------------------------------------------ */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-2xl) var(--sp-lg);
  text-align: center;
}
.empty svg        { width: 48px; height: 48px; color: var(--c-muted); margin-bottom: var(--sp-md); }
.empty__title     { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-xs); }
.empty__desc      { color: var(--c-muted); margin-bottom: var(--sp-lg); max-width: 380px; }


/* --- Stats row -------------------------------------------- */
.stats {
  display: flex; gap: var(--sp-lg); padding: var(--sp-md) 0;
}
.stat        { display: flex; flex-direction: column; }
.stat__value { font-size: var(--fs-2xl); font-weight: 700; }
.stat__label { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat--pass .stat__value { color: var(--c-pass); }
.stat--fail .stat__value { color: var(--c-fail); }
.stat--new  .stat__value { color: var(--c-new); }


/* --- Misc helpers ----------------------------------------- */
.gap-sm  { gap: var(--sp-sm); }
.gap-md  { gap: var(--sp-md); }
.gap-lg  { gap: var(--sp-lg); }
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1; }
.muted   { color: var(--c-muted); }
.mono    { font-family: var(--ff-mono); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.ml-auto { margin-left: auto; }
.mt-md   { margin-top: var(--sp-md); }
.mt-lg   { margin-top: var(--sp-lg); }
.mb-md   { margin-bottom: var(--sp-md); }
.mb-lg   { margin-bottom: var(--sp-lg); }
.p-md    { padding: var(--sp-md); }
.p-lg    { padding: var(--sp-lg); }


/* --- Run list item ---------------------------------------- */
.run-item {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--c-border);
  transition: background .15s;
}
.run-item:hover { background: rgba(56,139,253,.04); }
.run-item__info { flex: 1; }
.run-item__title { font-weight: 500; display: flex; align-items: center; gap: var(--sp-sm); }
.run-item__detail { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }
.run-item__stats { display: flex; gap: var(--sp-md); align-items: center; }
.run-item__stat { font-size: var(--fs-sm); display: flex; align-items: center; gap: 4px; }


/* --- Project card (dashboard) ------------------------------ */
.project-card {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--c-border);
  transition: background .15s;
  text-decoration: none; color: inherit;
}
.project-card:hover { background: rgba(56,139,253,.04); text-decoration: none; }
.project-card__icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--c-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.project-card__info { flex: 1; }
.project-card__name { font-weight: 600; }
.project-card__repo { font-size: var(--fs-sm); color: var(--c-muted); }
.project-card__status { display: flex; align-items: center; gap: var(--sp-sm); }


/* --- Onboarding checklist --------------------------------- */
.checklist       { list-style: none; }
.checklist__item {
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  font-size: var(--fs-md);
}
.checklist__check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.checklist__check--done { background: var(--c-pass); border-color: var(--c-pass); }
.checklist__check--done svg { color: #fff; }


/* --- Timeline (discovery page) ----------------------------- */
.timeline        { position: relative; padding-left: var(--sp-xl); }
.timeline::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--c-border); }
.timeline__item  { position: relative; padding-bottom: var(--sp-lg); }
.timeline__dot   {
  position: absolute; left: calc(-1 * var(--sp-xl) + 4px); top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-border); border: 2px solid var(--c-bg);
  z-index: 1;
}
.timeline__dot--done    { background: var(--c-pass); }
.timeline__dot--active  { background: var(--c-accent); animation: pulse 1.5s infinite; }
.timeline__dot--pending { background: var(--c-border); }
.timeline__title { font-weight: 600; margin-bottom: var(--sp-xs); }
.timeline__desc  { font-size: var(--fs-sm); color: var(--c-muted); }


/* --- Settings form ---------------------------------------- */
.form-group       { margin-bottom: var(--sp-lg); }
.form-label       { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--sp-xs); }
.form-hint        { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-xs); }
.form-input {
  width: 100%; padding: 8px 12px;
  font-size: var(--fs-md); font-family: var(--ff);
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md);
  color: var(--c-text);
}
.form-input:focus { outline: none; border-color: var(--c-accent); }
.form-select      { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }

.radio-group      { display: flex; flex-direction: column; gap: var(--sp-sm); }
.radio-option {
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  cursor: pointer; transition: border-color .15s;
}
.radio-option:hover          { border-color: var(--c-muted); }
.radio-option.active         { border-color: var(--c-accent); background: var(--c-accent-bg); }
.radio-option__label         { font-weight: 500; }
.radio-option__desc          { font-size: var(--fs-sm); color: var(--c-muted); }


/* --- Avatar ----------------------------------------------- */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #6e40c9, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; color: #fff;
  flex-shrink: 0;
}


/* --- Responsive ------------------------------------------- */
@media (max-width: 768px) {
  .sidebar          { display: none; }
  .main             { margin-left: 0; }
  .checkpoint__images { grid-template-columns: 1fr; }
}