.project-page { max-width: 1180px; }
.project-page .page-head { align-items: flex-start; margin-bottom: 28px; }
.project-page .page-head h1 { margin: 2px 0 6px; }
.project-list-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-card-v2 { display: grid; grid-template-columns: 68px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.project-card-v2__mode { display: grid; place-items: center; color: #fff; font-size: 26px; background: #284d61; }
.project-card-v2__mode--online { background: #1b6f92; }
.project-card-v2__mode--mixta { background: #556b3f; }
.project-card-v2__body { padding: 18px; }
.project-card-v2__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-card-v2__head h2 { margin: 7px 0 3px; font-size: 1.2rem; }
.project-card-v2__head p { margin: 0; color: var(--muted); font-size: .88rem; }
.project-card-v2__status { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #edf2f4; color: #52636c; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.project-card-v2__status--active { background: #e6f4ec; color: #28714d; }
.project-card-v2__status--paused { background: #fff2cf; color: #8b6314; }
.project-card-v2__status--archived { background: #eef0f1; color: #647078; }
.project-card-v2__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.project-card-v2__metrics span { display: flex; flex-direction: column; gap: 2px; padding: 9px; border: 1px solid #e4eaed; border-radius: 8px; color: var(--muted); font-size: .7rem; }
.project-card-v2__metrics strong { color: var(--ink); font-size: .92rem; font-variant-numeric: tabular-nums; }
.project-card-v2__actions { display: flex; gap: 8px; }
.project-empty-v2, .project-dashboard-empty { padding: 50px 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.project-empty-v2 > span { display: block; margin-bottom: 8px; color: var(--accent); font-size: 36px; }
.project-empty-v2 h2 { margin: 0 0 6px; color: var(--ink); }

.project-wizard { display: grid; gap: 22px; }
.project-wizard__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.project-wizard__head h1 { margin: 3px 0 6px; }
.project-steps { display: flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
.project-steps li { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); font-weight: 800; }
.project-steps li.is-active { border-color: var(--accent); color: #fff; background: var(--accent); box-shadow: 0 0 0 4px rgba(27, 93, 125, .12); }
.project-steps li.is-complete { border-color: #3f8f66; color: #3f8f66; }
.project-wizard__step { display: grid; gap: 20px; }
.project-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.project-mode-card, .project-code-card { position: relative; display: flex; gap: 13px; min-height: 126px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.project-mode-card:hover, .project-code-card:hover { transform: translateY(-2px); border-color: #8eb5c7; }
.project-mode-card:has(input:checked), .project-code-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27, 93, 125, .12); }
.project-mode-card input, .project-code-card input { position: absolute; inset: 12px 12px auto auto; width: 18px; height: 18px; accent-color: var(--accent); }
.project-mode-card__icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 10px; color: #fff; background: #285b72; font-size: 20px; }
.project-mode-card span:last-child, .project-code-card span { display: flex; flex-direction: column; gap: 8px; padding-right: 16px; }
.project-mode-card strong, .project-code-card strong { font-size: 1rem; }
.project-mode-card small, .project-code-card small { color: var(--muted); line-height: 1.45; }
.project-setup-schema { overflow: hidden; border: 1px solid #b8cdd8; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(24, 71, 94, .07); }
.project-setup-block { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr); gap: 24px; padding: 24px; }
.project-setup-block + .project-setup-block { border-top: 1px solid #d7e2e7; }
.project-setup-block:nth-child(even) { background: #f8fbfc; }
.project-setup-block__head { display: flex; align-items: flex-start; gap: 13px; }
.project-setup-block__number { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; color: #fff; background: #225f7b; font-weight: 900; }
.project-setup-block__head h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.project-setup-block__head p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.project-setup-block__body { display: grid; gap: 14px; min-width: 0; }
.project-code-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.project-code-card { min-height: 108px; }
.project-code-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.project-code-settings:has(textarea) { grid-template-columns: minmax(0, 560px); }
.project-code-preview { display: flex; align-items: center; gap: 12px; }
.project-code-preview > span { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.project-code-preview > div { display: flex; flex-wrap: wrap; gap: 7px; }
.project-code-preview code { padding: 7px 10px; border: 1px solid #cfdee5; border-radius: 6px; background: #eef5f8; color: #174e69; font-weight: 800; }
.project-demographics { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.project-demographics legend { padding: 0 7px; color: var(--ink); font-weight: 800; }
.project-demographics label { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #dce5e9; border-radius: 8px; background: #fff; }
.project-demographics input, .project-result-choice input { width: 18px; height: 18px; accent-color: var(--accent); }
.project-result-choice { display: flex; gap: 11px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.project-result-choice span { display: flex; flex-direction: column; gap: 4px; }
.project-result-choice small { color: var(--muted); }
.project-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.project-review article { display: flex; flex-direction: column; gap: 5px; min-height: 110px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.project-review article > span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.project-review ol { margin: 6px 0 0; padding-left: 20px; font-size: .85rem; }
.project-wizard__actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; background: linear-gradient(transparent, var(--paper) 22%); }

.project-dashboard-hero { padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(125deg, #fff 0%, #f1f7f9 100%); box-shadow: var(--shadow); }
.project-dashboard-hero__main { display: flex; justify-content: space-between; gap: 16px; }
.project-dashboard-hero h1 { margin: 3px 0 5px; }
.project-dashboard-hero p { margin: 0; color: var(--muted); }
.project-dashboard-hero__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 10px; margin-top: 20px; }
.project-dashboard-hero__metrics span { display: flex; flex-direction: column; gap: 3px; padding: 11px; border-radius: 8px; background: rgba(255,255,255,.78); color: var(--muted); font-size: .75rem; }
.project-dashboard-hero__metrics strong { color: var(--ink); font-size: 1.05rem; }
.project-tabs { display: flex; gap: 4px; margin: 18px 0; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.project-tabs button { flex: 0 0 auto; padding: 12px 15px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-weight: 750; cursor: pointer; }
.project-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.project-participant-form { margin-bottom: 14px; }
.project-participant-form__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.project-participant-form select, .project-public-data select { width: 100%; appearance: none; padding: 10px 38px 10px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%231b5d7d' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; }
.project-participants-list { display: grid; gap: 9px; }
.project-participant-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.project-participant-filters label { display: grid; gap: 5px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.project-participant-filters input, .project-participant-filters select { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); padding: 0 12px; font: inherit; }
.project-participant-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(160px, 1fr) 90px auto; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.project-participant-row__identity { display: flex; flex-direction: column; gap: 3px; }
.project-participant-row__identity span, .project-participant-row__sync { color: var(--muted); font-size: .77rem; }
.project-participant-row__progress { display: grid; grid-template-columns: auto minmax(90px, 1fr); align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.project-participant-row__progress i, .project-funnel i, .project-test-completion i { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: #e8eef1; }
.project-participant-row__progress b, .project-funnel b, .project-test-completion b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.project-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; }
.project-kpis article { display: flex; flex-direction: column-reverse; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.project-kpis span { color: var(--muted); font-size: .76rem; }
.project-kpis strong { font-size: 1.35rem; }
.project-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.project-chart-grid h2, .project-test-analysis h2 { margin: 0 0 16px; font-size: 1rem; }
.project-funnel, .project-test-completion { display: grid; gap: 11px; }
.project-funnel > div, .project-test-completion > div { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(100px, 2fr) 44px; align-items: center; gap: 8px; font-size: .78rem; }
.project-funnel strong, .project-test-completion strong { text-align: right; font-variant-numeric: tabular-nums; }
.project-test-tabs { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 13px; padding-bottom: 5px; }
.project-test-tabs button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-weight: 750; cursor: pointer; }
.project-test-tabs button[aria-selected="true"] { border-color: var(--accent); background: #eaf4f8; color: var(--accent); }
.project-test-analysis header { display: flex; justify-content: space-between; align-items: flex-start; }
.project-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 20px; }
.project-stats-grid span { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 7px; background: #f4f7f8; }
.project-stats-grid small { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.project-histogram { display: flex; align-items: flex-end; gap: 7px; height: 190px; padding: 25px 10px 0; border-bottom: 1px solid var(--line); }
.project-histogram > div { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; text-align: center; }
.project-histogram i { position: relative; display: block; min-height: 3px; border-radius: 4px 4px 0 0; background: #4c94b2; }
.project-histogram i span { position: absolute; top: -19px; left: 0; right: 0; color: var(--ink); font-size: .7rem; font-style: normal; }
.project-histogram small { min-height: 28px; padding-top: 5px; color: var(--muted); font-size: .62rem; }
.project-metric-table { max-height: 320px; margin-top: 20px; overflow: auto; }
.project-metric-table table { width: 100%; border-collapse: collapse; }
.project-metric-table th, .project-metric-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: .78rem; }
.project-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.project-share-layout { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.project-share-qr { aspect-ratio: 1; width: 132px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.project-share-qr svg { display: block; width: 100%; height: 100%; }
.project-settings-manifest, .project-public-manifest { display: grid; gap: 7px; margin: 14px 0; padding: 0; list-style: none; }
.project-settings-manifest li, .project-public-manifest li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 9px; border-radius: 7px; background: #f3f7f8; }
.project-settings-manifest li span, .project-public-manifest li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--accent); font-size: .7rem; }

.project-public-page { display: grid; place-items: center; min-height: calc(100vh - 60px); max-width: 760px; }
body.project-public-mode .shell { grid-template-columns: 1fr; }
body.project-public-mode .sidebar { display: none; }
body.project-public-mode .main { padding-bottom: 0; }
body.project-public-mode .main::before { display: none; }
.project-public-card, .project-result-card { width: min(100%, 680px); padding: clamp(22px, 5vw, 42px); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 18px 55px rgba(17, 52, 69, .12); }
.project-public-card h1, .project-result-card h1 { margin: 4px 0 8px; }
.project-public-summary { color: var(--accent); font-weight: 750; }
.project-public-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.project-result-card { text-align: center; }
.project-result-card__mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 15px; border-radius: 50%; color: #fff; background: #3f8f66; font-size: 28px; }

@media (max-width: 820px) {
  .project-participant-filters { grid-template-columns: 1fr; }
  .project-share-layout { grid-template-columns: 1fr; }
  .project-list-v2, .project-mode-grid, .project-code-grid, .project-chart-grid, .project-settings-grid { grid-template-columns: 1fr; }
  .project-card-v2 { grid-template-columns: 54px minmax(0, 1fr); }
  .project-wizard__head { align-items: flex-start; flex-direction: column; }
  .project-setup-block { grid-template-columns: 1fr; gap: 16px; }
  .project-participant-row { grid-template-columns: minmax(0, 1fr) auto; }
  .project-participant-row__progress { grid-column: 1 / -1; grid-row: 2; }
  .project-participant-row__sync { grid-column: 1; }
  .project-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .project-page { padding-left: 14px; padding-right: 14px; }
  .project-page .page-head--split { align-items: stretch; }
  .project-page .page-head .btn-row { width: 100%; }
  .project-page .page-head .btn { flex: 1; }
  .project-card-v2__metrics { grid-template-columns: 1fr; }
  .project-card-v2__actions { flex-direction: column; }
  .project-steps li { width: 30px; height: 30px; }
  .project-code-settings, .project-review, .project-participant-form__grid, .project-public-data { grid-template-columns: 1fr; }
  .project-code-preview { align-items: flex-start; flex-direction: column; }
  .project-wizard__actions { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .project-dashboard-topbar .btn { font-size: .75rem; }
  .project-dashboard-hero__main { flex-direction: column; }
  .project-dashboard-hero__metrics { grid-template-columns: 1fr; }
  .project-participant-row { grid-template-columns: 1fr; }
  .project-participant-row__progress, .project-participant-row__sync { grid-column: 1; }
  .project-participant-row .btn { width: 100%; }
  .project-kpis, .project-stats-grid { grid-template-columns: 1fr 1fr; }
  .project-funnel > div, .project-test-completion > div { grid-template-columns: minmax(78px, 1fr) minmax(80px, 1.5fr) 42px; }
  .project-histogram { gap: 3px; padding-left: 2px; padding-right: 2px; }
  .project-histogram small { font-size: .52rem; }
  .project-public-page { padding: 12px; min-height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .project-mode-card, .project-code-card { transition: none; }
}