/*
 * theme.css — QC Inspect design tokens.
 * Calm, Apple-like. Light grey-blue canvas, blue→indigo gradient accent,
 * green Pass, red Fail, amber Pending. A separate, deliberate dark palette.
 */

:root {
  --canvas: #f2f4f9;
  --surface: #ffffff;
  --surface-2: #eaeef6;
  --border: #dde3ee;
  --border-strong: #b4bfd3;
  --ink: #0f172a;
  --muted: #566176;
  --accent: #2f6bff;
  --accent-hover: #1e55e6;
  --accent-ink: #ffffff;
  --accent-text: #1f57e0;
  --accent-strong: #1a47b8;
  --accent-soft: #e3ecff;
  --accent-border: #b7cdff;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dcf5e5;
  --success-strong: #166534;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #fdf0d5;
  --warning-strong: #92400e;
  --danger: #dc2626;
  --danger-ink: #ffffff;
  --danger-soft: #fde4e4;
  --danger-strong: #b91c1c;
  --chart-1: #2f6bff;
  --chart-2: #7c5cff;
  --chart-3: #15a34a;
  --chart-4: #f59e0b;
  --chart-5: #ef4444;
  --chart-6: #0ea5e9;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 16px;
  --radius-card: 22px;
  --radius-input: 14px;
  --border-w: 1px;
  --card-pad: 1.25rem;
  --btn-weight: 600;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(30, 60, 140, 0.16);
  --shadow-raised: 0 12px 40px -12px rgba(20, 40, 110, 0.28), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-btn: 0 6px 18px -6px rgba(47, 107, 255, 0.55);
  --shadow-glow: 0 10px 30px -8px rgba(80, 90, 240, 0.45);

  --gradient-brand: linear-gradient(135deg, #2f6bff 0%, #4f5df5 55%, #7c4dff 100%);
  --gradient-brand-soft: linear-gradient(135deg, #e6eeff 0%, #ece8ff 100%);
  --gradient-hero: linear-gradient(145deg, #1d4ed8 0%, #3b4fe0 50%, #6d3fe8 100%);
  --gradient-pass: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  --gradient-fail: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  --gradient-pending: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --gradient-canvas: linear-gradient(180deg, #e8eeff 0%, #f2f4f9 340px);
  --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72));
}

html[data-theme="dark"] {
  --canvas: #0b1020;
  --surface: #151b2e;
  --surface-2: #1d2540;
  --border: #263052;
  --border-strong: #3a4670;
  --ink: #f1f5ff;
  --muted: #9aa6c4;
  --accent: #3866e6;
  --accent-hover: #4f7df0;
  --accent-ink: #ffffff;
  --accent-text: #8db0ff;
  --accent-strong: #b7cdff;
  --accent-soft: #1b2b5c;
  --accent-border: #2f4a9a;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #123425;
  --success-strong: #6ee7a0;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2a10;
  --warning-strong: #fbbf6a;
  --danger: #d93a40;
  --danger-ink: #ffffff;
  --danger-soft: #3b1519;
  --danger-strong: #ff8a8f;
  --chart-1: #6b97ff;
  --chart-2: #a78bfa;
  --chart-3: #4ade80;
  --chart-4: #fbbf24;
  --chart-5: #f87171;
  --chart-6: #38bdf8;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.65);
  --shadow-raised: 0 16px 44px -12px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-btn: 0 6px 20px -6px rgba(79, 131, 255, 0.5);
  --shadow-glow: 0 10px 30px -8px rgba(110, 90, 255, 0.5);

  --gradient-brand: linear-gradient(135deg, #3866e6 0%, #5a63f2 55%, #7c52f5 100%);
  --gradient-brand-soft: linear-gradient(135deg, #1b2b5c 0%, #2a2468 100%);
  --gradient-hero: linear-gradient(145deg, #1e3a9e 0%, #3a3fb8 50%, #5b34b8 100%);
  --gradient-pass: linear-gradient(135deg, #22a65a 0%, #166534 100%);
  --gradient-fail: linear-gradient(135deg, #ef5a5f 0%, #b91c1c 100%);
  --gradient-pending: linear-gradient(135deg, #e5a11a 0%, #b45309 100%);
  --gradient-canvas: linear-gradient(180deg, #121a38 0%, #0b1020 340px);
  --gradient-glass: linear-gradient(180deg, rgba(21, 27, 46, 0.88), rgba(21, 27, 46, 0.74));
}

/*
 * app.css — QC Inspect.
 * Calm, Apple-like surfaces; blue→indigo gradients; large touch targets (56px+).
 * Colours come only from tokens in theme.css. Motion respects html.reduced-motion.
 */

/* ------------------------------------------------------------------ base */
.q-body {
  background-color: var(--canvas);
  background-image: var(--gradient-canvas);
  background-repeat: no-repeat;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
.q-body h1, .q-body h2, .q-body h3, .q-body h4 { font-family: var(--font-display); letter-spacing: var(--display-tracking); }
.q-body a { text-decoration: none; }
.q-body a:not(.btn):not(.q-row):not(.q-tab):not(.q-sidelink):not(.q-attn-i):not(.q-proj):not(.q-iconbtn):not(.tab):hover { text-decoration: underline; text-underline-offset: 3px; }

/* big, calm touch targets — every control is at least 56px tall */
.btn { min-height: 3.5rem; padding-inline: 1.4rem; font-size: 1rem; border-radius: var(--radius-btn); letter-spacing: -0.005em; }
.btn-lg { min-height: 3.75rem; }
.btn-icon { min-width: 3.5rem; padding-inline: 0; }
.btn:active:not(:disabled) { transform: scale(0.975); }
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-secondary):not(.btn-destructive):not(.btn-danger):not(.btn-link) {
  background-image: var(--gradient-brand);
  border-color: transparent;
  box-shadow: var(--shadow-btn);
}
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-secondary):not(.btn-destructive):not(.btn-danger):not(.btn-link):hover {
  filter: brightness(1.06) saturate(1.05);
  border-color: transparent;
}
.btn-destructive, .btn-danger { background-image: var(--gradient-fail); border-color: transparent; }
.btn-outline { background: var(--surface); }
.btn-link { min-height: 0; }
.input, .select, .textarea { min-height: 3.5rem; font-size: 1rem; border-radius: var(--radius-input); }
textarea.input, .textarea { min-height: 7rem; }
.check { min-height: 3rem; }
.modal { border-radius: 26px; }
.modal-foot .btn, .modal-head + form .modal-foot .btn { min-width: 7rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ----------------------------------------------------------------- motion */
@keyframes q-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes q-ring { from { stroke-dashoffset: 327; } }
@keyframes q-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -18px, 0); } }
@keyframes q-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.rise { animation: q-rise 560ms var(--ease-out) both; }
.q-main > .rise:nth-child(2) { animation-delay: 60ms; }
.q-main > .rise:nth-child(3) { animation-delay: 120ms; }
.q-main > .rise:nth-child(4) { animation-delay: 180ms; }
.q-main > .rise:nth-child(5) { animation-delay: 240ms; }
.q-main > .rise:nth-child(n + 6) { animation-delay: 300ms; }
.q-grid > *, .q-list > * { animation: q-rise 480ms var(--ease-out) both; }
.q-grid > *:nth-child(2), .q-list > *:nth-child(2) { animation-delay: 50ms; }
.q-grid > *:nth-child(3), .q-list > *:nth-child(3) { animation-delay: 100ms; }
.q-grid > *:nth-child(4), .q-list > *:nth-child(4) { animation-delay: 150ms; }
.q-grid > *:nth-child(n + 5), .q-list > *:nth-child(n + 5) { animation-delay: 200ms; }

/* ----------------------------------------------------------------- shell */
.q-app { min-height: 100dvh; display: flex; flex-direction: column; }
.q-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-side { display: none; }
.q-top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem;
  padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.7rem;
  background: var(--gradient-glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.q-title { flex: 1; min-width: 0; margin: 0; font-size: 1.3rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-top-actions { display: flex; align-items: center; gap: 0.5rem; }
.q-top-btn { min-height: 3.5rem; }
.q-top-btn span { display: none; }
@media (min-width: 40rem) { .q-top-btn span { display: inline; } }
.q-iconbtn {
  position: relative; display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 18px; color: var(--ink);
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.q-iconbtn:hover { background: var(--surface-2); }
.q-iconbtn:active { transform: scale(0.94); }
.q-iconbtn .icon { width: 1.5rem; height: 1.5rem; }
.q-dot {
  position: absolute; top: 0.45rem; right: 0.4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; color: var(--danger-ink); background: var(--gradient-fail);
  animation: q-pulse 2.4s ease-in-out infinite;
}
.q-main { width: 100%; max-width: 56rem; margin: 0 auto; padding: 1rem 1rem calc(7rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1rem; }
.q-logo { display: block; flex-shrink: 0; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--chart-1) 35%, transparent)); }

.q-tabbar {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; padding: 0.4rem; border-radius: 28px;
  background: var(--gradient-glass); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--border); box-shadow: var(--shadow-raised); max-width: 34rem; margin-inline: auto;
}
.q-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 3.5rem; border-radius: 22px;
  font-size: 0.68rem; font-weight: 650; color: var(--muted); transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 200ms var(--ease);
}
.q-tab .icon { width: 1.4rem; height: 1.4rem; transition: transform 260ms var(--ease-out); }
.q-tab:active { transform: scale(0.94); }
.q-tab.is-on { color: var(--accent-ink); background: var(--gradient-brand); box-shadow: var(--shadow-btn); }
.q-tab.is-on .icon { transform: translateY(-1px) scale(1.08); }

@media (min-width: 64rem) {
  .q-app { flex-direction: row; }
  .q-side {
    display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; height: 100dvh; width: 17.5rem; flex-shrink: 0; padding: 1.25rem;
    background: var(--surface); border-right: 1px solid var(--border);
  }
  .q-tabbar { display: none; }
  .q-topbrand { display: none; }
  .q-main { padding: 1.5rem 2rem 3rem; max-width: 62rem; }
  .q-top { padding-inline: 2rem; }
}
.q-brand { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.25rem 0.75rem; color: var(--ink); }
.q-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.q-brand b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: var(--display-tracking); }
.q-brand small { color: var(--muted); font-size: 0.78rem; }
.q-sidenav { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.q-sidelink {
  display: flex; align-items: center; gap: 0.8rem; min-height: 3.5rem; padding: 0 1rem; border-radius: 18px; color: var(--muted); font-weight: 600;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.q-sidelink .icon { width: 1.35rem; height: 1.35rem; }
.q-sidelink:hover { background: var(--surface-2); color: var(--ink); }
.q-sidelink.is-on { background: var(--gradient-brand); color: var(--accent-ink); box-shadow: var(--shadow-btn); }
.q-sidelink em { margin-left: auto; font-style: normal; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--gradient-fail); color: var(--danger-ink); }
.q-me { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 20px; background: var(--surface-2); }
.q-me-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.q-me-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.q-me-t small { color: var(--muted); font-size: 0.78rem; }
.avatar { background: var(--gradient-brand-soft); color: var(--accent-strong); }

/* ------------------------------------------------------------- cards/rows */
.q-card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.card.q-card > * + * { margin-top: 0.85rem; }
@media (hover: hover) { a.q-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); } }
a.q-card:active { transform: scale(0.985); }
.q-h { margin: 0; font-size: 1.05rem; font-weight: 700; }
.q-h2 { margin: 0.1rem 0 0; font-size: 1.5rem; font-weight: 750; }
.q-h-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.q-eyebrow { color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; }
.q-sub { color: var(--muted); margin: 0.25rem 0 1.25rem; }
.q-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .q-grid { grid-template-columns: repeat(2, 1fr); } }
.q-list { display: flex; flex-direction: column; gap: 0.6rem; }
.q-row {
  display: flex; align-items: center; gap: 0.85rem; min-height: 4rem; width: 100%; padding: 0.85rem 1rem; text-align: left; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease);
}
a.q-row:hover, button.q-row:hover { border-color: var(--accent-border); }
a.q-row:active, button.q-row:active { transform: scale(0.985); }
.q-row-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.q-row-main b { font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.q-row-main small { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.q-chev { color: var(--muted); flex-shrink: 0; }
.q-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.q-person .avatar { flex-shrink: 0; }
.q-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.q-reopen { cursor: pointer; }
.q-reopen input { width: 1.5rem; height: 1.5rem; accent-color: var(--accent); flex-shrink: 0; }

.q-tag {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650;
  color: var(--muted); background: var(--surface-2); line-height: 1.5;
}
.q-tag .icon { width: 0.8rem; height: 0.8rem; }
.q-tag-crit { color: var(--danger-strong); background: var(--danger-soft); }
.q-tag-warn { color: var(--warning-strong); background: var(--warning-soft); }
.q-tag-fail { color: var(--danger-strong); background: var(--danger-soft); }
.q-tag-pass { color: var(--success-strong); background: var(--success-soft); }

.q-st { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.q-st i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.q-st-pass { color: var(--success-strong); background: var(--success-soft); }
.q-st-fail { color: var(--danger-strong); background: var(--danger-soft); }
.q-st-pending { color: var(--warning-strong); background: var(--warning-soft); }
.q-st-na { color: var(--muted); background: var(--surface-2); }

.q-bar { display: flex; height: 0.55rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.q-bar i { display: block; height: 100%; transition: width 900ms var(--ease-out); }
.b-pass { background: var(--gradient-pass); }
.b-na { background: var(--border-strong); }
.b-fail { background: var(--gradient-fail); }

.q-proj { display: flex; flex-direction: column; gap: 0.8rem; color: var(--ink); }
.q-proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.q-proj-head span:first-child { display: flex; flex-direction: column; min-width: 0; }
.q-proj-head b { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.q-proj-head small { color: var(--muted); }
.q-pct { font-family: var(--font-display); font-weight: 750; font-size: 1.4rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.q-proj-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.q-c-pass { color: var(--success-strong); }
.q-c-fail { color: var(--danger-strong); }
.q-c-pend { color: var(--warning-strong); }

/* ---------------------------------------------------------------- hero etc */
.q-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem;
  border-radius: 30px; color: var(--accent-ink); background: var(--gradient-hero); box-shadow: var(--shadow-glow);
}
.q-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--accent-ink) 24%, transparent), transparent 70%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--accent-ink) 12%, transparent), transparent 70%);
}
.q-hero > * { position: relative; }
.q-hero-text { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 1; }
.q-hero small { opacity: 0.85; font-weight: 600; }
.q-hero h2 { margin: 0; font-size: 1.55rem; line-height: 1.15; font-weight: 750; }
.q-hero-p { margin: 0; opacity: 0.9; }
.q-next { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.q-next b { font-size: 1.02rem; line-height: 1.3; }
.q-next small { opacity: 0.85; }
.q-btn-glass {
  margin-top: 0.6rem; color: var(--accent-text); background: var(--surface) !important; background-image: none !important; border-color: transparent !important;
  box-shadow: var(--shadow-raised) !important; align-self: flex-start;
}
.q-btn-glass:hover { filter: none !important; transform: translateY(-1px); }

.q-ring { position: relative; width: 6.75rem; height: 6.75rem; flex-shrink: 0; display: grid; place-items: center; }
.q-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.q-ring circle { fill: none; stroke-width: 10; }
.q-ring-bg { stroke: var(--border); }
.q-ring-fg { stroke: var(--accent); stroke-linecap: round; animation: q-ring 1.2s var(--ease-out) both; }
.q-hero .q-ring-bg { stroke: color-mix(in srgb, var(--accent-ink) 25%, transparent); }
.q-hero .q-ring-fg { stroke: var(--accent-ink); }
.q-ring div { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.q-ring b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 750; }
.q-ring small { font-size: 0.7rem; opacity: 0.8; }

.q-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.q-stat {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 0.5rem; text-align: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-card);
}
.q-stat b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 750; line-height: 1; }
.q-stat span { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.q-stat.is-pass b { color: var(--success-strong); }
.q-stat.is-fail b { color: var(--danger-strong); }
.q-stat.is-pend b { color: var(--warning-strong); }

.q-attn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.6rem; }
@media (min-width: 40rem) { .q-attn { grid-template-columns: repeat(4, 1fr); } }
.q-attn-i {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow-card); transition: transform 200ms var(--ease-out), border-color 200ms var(--ease);
}
.q-attn-i:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.q-attn-i:active { transform: scale(0.97); }
.q-attn-i .icon { color: var(--accent-text); width: 1.4rem; height: 1.4rem; margin-bottom: 0.25rem; }
.q-attn-i b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.q-attn-i span { font-size: 0.8rem; color: var(--muted); font-weight: 600; }

.q-empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 26px; }
.q-readall { display: flex; justify-content: flex-end; }
.q-tabs { gap: 1.4rem; }
.q-tabs .tab { min-height: 3.25rem; display: inline-flex; align-items: center; }

/* ------------------------------------------------------ project / stages */
.q-phead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.q-phead-t { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.q-phead-t small { color: var(--muted); font-weight: 600; }
.q-phead-t h2 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.q-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.q-stages { display: flex; flex-direction: column; gap: 0.8rem; }
.q-stage { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow-card); overflow: hidden; }
.q-stage > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 4.5rem; padding: 0.9rem 1.1rem; cursor: pointer; list-style: none;
  transition: background-color 180ms var(--ease);
}
.q-stage > summary::-webkit-details-marker { display: none; }
.q-stage > summary:hover { background: var(--surface-2); }
.q-stage-t { display: flex; flex-direction: column; min-width: 0; }
.q-stage-t b { font-weight: 700; line-height: 1.3; }
.q-stage-t small { color: var(--muted); }
.q-stage[open] > summary { border-bottom: 1px solid var(--border); }
.q-stage-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; animation: fade-in 280ms var(--ease) both; }
.q-task h4 { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); font-weight: 650; }
.q-stage-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 20px;
  background: var(--gradient-brand-soft); font-weight: 600; color: var(--accent-strong);
}
.q-stage-foot form { display: contents; }

/* ------------------------------------------------------------- picker */
.q-picksels { display: grid; gap: 0.9rem; }
@media (min-width: 48rem) { .q-picksels { grid-template-columns: repeat(3, 1fr); } }
.q-pickform { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.1rem; }
.q-pickhint { margin-top: 1rem; }
.q-picklist { display: flex; flex-direction: column; gap: 0.5rem; max-height: 26rem; overflow-y: auto; padding: 0.1rem; }
.q-pick {
  display: flex; align-items: flex-start; gap: 0.85rem; min-height: 3.75rem; padding: 0.8rem 1rem; cursor: pointer; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.q-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.q-pick.is-added { opacity: 0.55; cursor: default; }
.q-pick input { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; accent-color: var(--accent); flex-shrink: 0; }
.q-pick-t { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.q-pick-t small { color: var(--muted); }
.q-assign { display: grid; gap: 0.9rem; }
@media (min-width: 40rem) { .q-assign { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.q-newcheck > summary { display: flex; align-items: center; gap: 0.6rem; min-height: 3.5rem; cursor: pointer; font-weight: 650; list-style: none; }
.q-newcheck > summary::-webkit-details-marker { display: none; }
.q-form { display: flex; flex-direction: column; gap: 1.1rem; }
.q-form .field + .field { margin-top: 0; }
.q-inline { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.q-inline .select { flex: 1; }

/* ------------------------------------------------------------- the check */
.q-check-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.q-check-name { margin: 0.5rem 0 0; font-size: 1.35rem; line-height: 1.3; font-weight: 750; overflow-wrap: anywhere; }
.q-crumb { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.q-instr { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.q-result { display: flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; }
.q-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.6rem; margin-bottom: 0.7rem; }
.q-photo { position: relative; margin: 0; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-card); animation: q-rise 380ms var(--ease-out) both; }
.q-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-photo-x {
  position: absolute; top: 0.3rem; right: 0.3rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%;
  color: var(--accent-ink); background: color-mix(in srgb, var(--ink) 62%, transparent); backdrop-filter: blur(6px);
}
.q-upload { cursor: pointer; width: 100%; }
.q-decide { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
@media (min-width: 40rem) { .q-decide { grid-template-columns: 1fr 1fr 1fr; } }
.q-decide .btn { min-height: 4rem; font-size: 1.05rem; }
.btn.q-pass { background-image: var(--gradient-pass); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--success) 70%, transparent); color: var(--success-ink); border-color: transparent; }
.btn.q-fail { background-image: var(--gradient-fail); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--danger) 70%, transparent); color: var(--danger-ink); border-color: transparent; }
.btn.q-na { color: var(--muted); }
.q-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 1.2rem; }
.q-timeline li { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.q-timeline li::before { content: ""; position: absolute; left: -1.6rem; top: 0.45rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--gradient-brand); box-shadow: 0 0 0 4px var(--canvas); }
.q-tl-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.q-tl-h small { color: var(--muted); }
.q-timeline p { margin: 0; line-height: 1.5; }

/* ----------------------------------------------------------- sign-off */
.q-sigpad { border: 2px dashed var(--border-strong); border-radius: 22px; background: var(--surface-2); overflow: hidden; touch-action: none; }
.q-sigpad canvas { display: block; width: 100%; height: 12rem; cursor: crosshair; }
.q-sig-done { display: flex; flex-direction: column; gap: 0.6rem; }
.q-sig-img { max-width: 16rem; border-radius: 14px; background: var(--surface-2); }

/* ------------------------------------------------------------- alerts */
.q-note-i { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 16px; flex-shrink: 0; background: var(--gradient-brand-soft); color: var(--accent-text); }
.q-note.k-fail .q-note-i { background: var(--danger-soft); color: var(--danger-strong); }
.q-note.k-pass .q-note-i { background: var(--success-soft); color: var(--success-strong); }
.q-note.k-overdue .q-note-i, .q-note.k-na .q-note-i { background: var(--warning-soft); color: var(--warning-strong); }
.q-note.is-new { border-color: var(--accent-border); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.q-profile { display: flex; align-items: center; gap: 1rem; }
.q-more-links { display: flex; flex-direction: column; gap: 0.6rem; }
.q-signout { width: 100%; color: var(--danger-strong); }
.q-link { display: block; margin: 0.6rem 0; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--surface); font-size: 0.82rem; overflow-wrap: anywhere; user-select: all; }

/* --------------------------------------------------------------- auth */
.q-auth { position: relative; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 1.5rem; overflow: hidden; background: var(--gradient-canvas); }
.q-auth-hero i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; background: var(--gradient-brand); animation: q-float 9s ease-in-out infinite; }
.q-auth-hero i:nth-child(1) { width: 22rem; height: 22rem; top: -7rem; left: -6rem; }
.q-auth-hero i:nth-child(2) { width: 18rem; height: 18rem; bottom: -6rem; right: -5rem; animation-delay: -3s; background: var(--gradient-hero); }
.q-auth-hero i:nth-child(3) { width: 12rem; height: 12rem; top: 40%; right: 10%; opacity: 0.3; animation-delay: -6s; }
.q-auth-top { position: absolute; top: calc(0.75rem + env(safe-area-inset-top)); right: 0.75rem; }
.q-auth-card {
  position: relative; width: 100%; max-width: 26rem; padding: 2rem 1.5rem; border-radius: 32px; background: var(--gradient-glass);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border); box-shadow: var(--shadow-raised);
}
.q-auth-card h1 { margin: 0.75rem 0 0; font-size: 1.7rem; font-weight: 750; text-align: center; }
.q-auth-card .q-sub { text-align: center; }
.q-auth-logo { display: flex; justify-content: center; }
.q-links { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; font-weight: 600; }
.q-auth-foot { position: relative; margin: 0; font-size: 0.8rem; color: var(--muted); }
.alert { border-radius: 20px; }

/* --------------------------------------------------------------- report */
.q-report { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; color: var(--ink); }
.q-report-bar { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.q-report-head h1 { margin: 0 0 0.25rem; font-size: 1.8rem; }
.q-report-head p { margin: 0.15rem 0; }
.q-report-sum { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1rem 0; padding: 0.9rem 1rem; border-radius: 16px; background: var(--surface-2); }
.q-report-stage { margin-top: 1.5rem; break-inside: avoid-page; }
.q-report-stage h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.q-report-stage h2 small { font-weight: 500; color: var(--muted); font-size: 0.8rem; margin-left: 0.4rem; }
.q-report-so { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.q-report-so img { height: 2.75rem; border-radius: 8px; }
.q-report table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.q-report th, .q-report td { text-align: left; vertical-align: top; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border); }
.q-report th { background: var(--surface-2); font-size: 0.74rem; }
.q-report tr { break-inside: avoid; }
.q-report tr.r-fail td:nth-child(4) { color: var(--danger-strong); }
.q-report tr.r-pass td:nth-child(4) { color: var(--success-strong); }
@media (max-width: 40rem) { .q-report { overflow-x: auto; } }
@media print {
  .q-report-bar { display: none; }
  .q-body { background: none; }
  .q-report { padding: 0; max-width: none; }
}