:root {

color-scheme: light;

--ink: #191919;

--muted: #68707a;

--line: #d9dee4;

--paper: #fbfbf8;

--panel: #ffffff;

--red: #c51f12;

--gold: #f1c84c;

--orange: #e8842d;

--green: #357c46;

--blue: #2e63aa;

--brown: #70422b;

--shadow: 0 14px 34px rgba(18, 24, 31, .12);

}

* {

box-sizing: border-box;

}

html {

min-height: 100%;

background: var(--paper);

}

body {

margin: 0;

color: var(--ink);

font-family: Arial, Helvetica, sans-serif;

line-height: 1.45;

}

button,

input,

select,

textarea {

font: inherit;

}

button,

select,

input,

textarea,

a {

border-radius: 8px;

}

.app-header {

display: flex;

align-items: center;

justify-content: space-between;

gap: 24px;

padding: 22px clamp(18px, 4vw, 54px);

border-bottom: 1px solid var(--line);

background: linear-gradient(90deg, #ffffff 0%, #fff7f2 54%, #f6faf8 100%);

}

.brand-block {

display: flex;

align-items: center;

gap: 16px;

min-width: 0;

}

.brand-logo {

width: 72px;

height: 72px;

object-fit: contain;

}

.eyebrow {

margin: 0 0 4px;

color: var(--red);

font-size: .78rem;

font-weight: 700;

letter-spacing: 0;

text-transform: uppercase;

}

h1,

h2,

h3,

p {

overflow-wrap: anywhere;

}

h1 {

margin: 0;

font-size: clamp(1.55rem, 2.6vw, 2.5rem);

letter-spacing: 0;

}

h2 {

margin: 0;

font-size: clamp(1.35rem, 2vw, 1.9rem);

letter-spacing: 0;

}

h3 {

margin: 0;

font-size: 1.05rem;

letter-spacing: 0;

}

.header-stats {

display: flex;

gap: 10px;

}

.header-stats div {

min-width: 112px;

padding: 12px 14px;

border: 1px solid var(--line);

background: rgba(255, 255, 255, .76);

}

.header-stats span {

display: block;

font-size: 1.42rem;

font-weight: 800;

}

.header-stats small {

display: block;

color: var(--muted);

}

main {

width: min(1200px, calc(100% - 32px));

margin: 18px auto 48px;

}

.tabs {

display: flex;

gap: 8px;

padding: 6px;

border: 1px solid var(--line);

background: #fff;

overflow-x: auto;

}

.tab {

border: 0;

background: transparent;

color: var(--muted);

padding: 10px 14px;

min-height: 42px;

cursor: pointer;

white-space: nowrap;

}

.tab.active {

background: var(--ink);

color: #fff;

}

.view {

display: none;

padding-top: 18px;

}

.view.active {

display: block;

}

.toolbar,

.section-head {

display: flex;

align-items: end;

justify-content: space-between;

gap: 14px;

margin-bottom: 16px;

}

.field {

display: grid;

gap: 7px;

min-width: 210px;

}

.field.grow {

flex: 1;

}

.field span {

color: var(--muted);

font-size: .84rem;

font-weight: 700;

}

select,

input,

textarea {

width: 100%;

border: 1px solid var(--line);

background: #fff;

color: var(--ink);

padding: 11px 12px;

outline: none;

}

select:focus,

input:focus,

textarea:focus {

border-color: var(--red);

box-shadow: 0 0 0 3px rgba(197, 31, 18, .14);

}

.rank-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

gap: 12px;

}

.student-portal-notice {

display: grid;

gap: 3px;

margin-bottom: 16px;

padding: 14px;

border: 1px solid #bfd7c8;

background: #f2fbf5;

}

.student-portal-notice strong {

font-size: 1.08rem;

}

.student-portal-notice span,

.student-portal-notice small {

color: var(--muted);

}

.auth-signout {

grid-column: 1 / -1;

}

.auth-gate {

min-height: 58vh;

place-items: center;

padding: 24px 0;

}

.auth-gate:not([hidden]) {

display: grid;

}

.auth-panel {

width: min(100%, 520px);

display: grid;

gap: 12px;

}

.auth-panel h2,
.auth-panel p {

margin: 0;

}

.auth-locked .tabs,
.auth-locked .view,
.auth-locked .app-footer {

display: none;

}

.instruction-panel {

margin-bottom: 16px;

padding: 14px 16px;

border: 1px solid #cfd8e3;

background: #f7fafc;

}

.instruction-panel ol {

display: grid;

gap: 7px;

margin: 0;

padding-left: 20px;

color: #3e4a57;

}

.instruction-panel li {

padding-left: 2px;

}

.standards-disclaimer {

margin-bottom: 16px;

padding: 14px 16px;

border: 1px solid #d6c488;

background: #fff8dc;

}

.standards-disclaimer p {

margin: 0;

}

.standards-disclaimer p:not(.eyebrow) {

color: #3e4a57;

}

.rank-card,

.check-item,

.technique-card,

.plan-card,

.signup-form,

.admin-panel,

.metric-card,

.source-panel,

.policy-panel {

border: 1px solid var(--line);

background: var(--panel);

box-shadow: 0 4px 14px rgba(20, 25, 31, .05);

}

.rank-card {

position: relative;

display: grid;

gap: 12px;

min-height: 168px;

padding: 16px;

cursor: pointer;

}

.rank-card.active {

border-color: var(--ink);

box-shadow: var(--shadow);

}

.belt-strip {

height: 10px;

border-radius: 999px;

background: var(--belt-color);

}

.progress-track {

height: 10px;

overflow: hidden;

background: #eef0f2;

border-radius: 999px;

}

.progress-fill {

width: var(--pct);

height: 100%;

background: var(--belt-color);

border-radius: inherit;

}

.rank-meta {

color: var(--muted);

font-size: .9rem;

}

.rank-path {

margin: 5px 0 0;

color: var(--muted);

font-size: .88rem;

}

.wide-band {

display: flex;

justify-content: space-between;

gap: 24px;

margin-top: 18px;

padding: 20px;

border: 1px solid var(--line);

background: #191919;

color: #fff;

}

.wide-band .eyebrow {

color: #f6c84e;

}

.focus-list {

display: grid;

grid-template-columns: repeat(3, minmax(160px, 1fr));

gap: 10px;

flex: 1;

}

.focus-pill {

padding: 12px;

background: rgba(255,255,255,.1);

border: 1px solid rgba(255,255,255,.2);

}

.belt-layout {

display: grid;

grid-template-columns: 220px minmax(0, 1fr);

gap: 18px;

}

.belt-nav {

display: grid;

align-content: start;

gap: 8px;

}

.belt-nav button {

display: flex;

align-items: center;

gap: 10px;

width: 100%;

border: 1px solid var(--line);

background: #fff;

padding: 12px;

cursor: pointer;

text-align: left;

}

.belt-nav button.active {

border-color: var(--ink);

box-shadow: var(--shadow);

}

.belt-dot {

width: 16px;

height: 16px;

border-radius: 999px;

background: var(--belt-color);

border: 1px solid rgba(0,0,0,.15);

flex: 0 0 auto;

}

.belt-detail {

min-width: 0;

}

.chip-row {

display: flex;

gap: 8px;

flex-wrap: wrap;

margin-bottom: 14px;

}

.chip {

border: 1px solid var(--line);

background: #fff;

color: var(--muted);

padding: 8px 10px;

cursor: pointer;

}

.chip.active {

background: var(--red);

border-color: var(--red);

color: #fff;

}

.curriculum-notice {

margin-bottom: 14px;

padding: 14px;

border: 1px solid #d6c488;

background: #fff8dc;

}

.curriculum-notice p {

margin: 0;

}

.curriculum-notice p + p {

color: #3e4a57;

}

.school-rank-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
}

.belt-nav button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.school-rank-content {
  display: grid;
  gap: 14px;
}

.school-rank-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
}

.school-rank-card p {
  margin: 0;
}

.school-rank-line {
  padding-left: 12px;
  color: #3e4a57;
}

.checklist {

display: grid;

gap: 10px;

}

.check-item {

display: grid;

grid-template-columns: auto minmax(0, 1fr) auto;

gap: 12px;

align-items: center;

padding: 12px;

}

.check-item input {

width: 20px;

height: 20px;

}

.check-text {

min-width: 0;

}

.check-title {

display: block;

font-weight: 700;

}

.check-description {

display: block;

max-width: 760px;

margin-top: 5px;

color: #3e4a57;

font-size: .92rem;

line-height: 1.45;

}

.check-meta {

display: block;

margin-top: 3px;

color: var(--muted);

font-size: .88rem;

}

.primary-button,

.ghost-button,

.icon-button,

.demo-button {

display: inline-flex;

align-items: center;

justify-content: center;

min-height: 38px;

border: 1px solid transparent;

padding: 8px 12px;

text-decoration: none;

cursor: pointer;

}

.primary-button {

background: var(--red);

color: #fff;

}

.ghost-button,

.demo-button {

background: #fff;

border-color: var(--line);

color: var(--ink);

}

.danger-button {

border-color: #b91c1c;

color: #991b1b;

}

.icon-button {

width: 38px;

padding: 0;

background: var(--ink);

color: #fff;

}

.technique-grid {

display: grid;

grid-template-columns: repeat(3, minmax(220px, 1fr));

gap: 12px;

}

.technique-card {

display: grid;

gap: 12px;

padding: 14px;

min-height: 166px;

}

.tag-row {

display: flex;

gap: 6px;

flex-wrap: wrap;

}

.tag {

display: inline-flex;

align-items: center;

min-height: 26px;

padding: 3px 8px;

border: 1px solid var(--line);

color: var(--muted);

font-size: .78rem;

}

.school-hero {

display: flex;

align-items: stretch;

justify-content: space-between;

gap: 18px;

margin-bottom: 16px;

padding: 20px;

border: 1px solid var(--line);

background: #191919;

color: #fff;

}

.school-hero p:not(.eyebrow) {

max-width: 650px;

margin: 8px 0 0;

color: rgba(255,255,255,.78);

}

.school-hero .eyebrow {

color: #f6c84e;

}

.school-status {

display: grid;

align-content: center;

gap: 4px;

min-width: 220px;

padding: 14px;

border: 1px solid rgba(255,255,255,.2);

background: rgba(255,255,255,.08);

}

.school-status strong {

font-size: 1.35rem;

}

.school-status small,

.status-label {

color: rgba(255,255,255,.72);

}

.status-label {

font-size: .78rem;

font-weight: 700;

text-transform: uppercase;

}

.plan-grid {

display: grid;

grid-template-columns: repeat(3, minmax(220px, 1fr));

gap: 12px;

margin-bottom: 18px;

}

.plan-card {

display: grid;

gap: 14px;

align-content: start;

padding: 16px;

}

.plan-card.active {

border-color: var(--ink);

box-shadow: var(--shadow);

}

.plan-card.featured {
  border-color: var(--red);
  box-shadow: 0 10px 26px rgba(197, 31, 18, .12);
}

.plan-card.featured .plan-highlight {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.plan-card ul {

display: grid;

gap: 7px;

margin: 0;

padding-left: 18px;

color: #3e4a57;

}

.plan-highlight {

width: fit-content;

padding: 6px 9px;

color: #154734;

background: #e8f6ee;

border: 1px solid #b9dcc6;

font-size: .82rem;

font-weight: 800;

}

.plan-price {

display: flex;

align-items: baseline;

gap: 6px;

}

.plan-price span {

font-size: 2rem;

font-weight: 800;

}

.plan-price small {

color: var(--muted);

}

.school-test-link {
  display: block;
  overflow-wrap: anywhere;
}

.school-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.signup-layout {

display: grid;

grid-template-columns: minmax(0, 1fr) 320px;

gap: 18px;

}

.signup-form {

display: grid;

gap: 14px;

padding: 16px;

}

.signup-form textarea {

min-height: 130px;

}

.hidden-field {

display: none;

}

.admin-hero {

display: flex;

align-items: center;

justify-content: space-between;

gap: 18px;

margin-bottom: 16px;

padding: 20px;

border: 1px solid var(--line);

background: #f6faf8;

}

.admin-hero p:not(.eyebrow) {

max-width: 680px;

margin: 8px 0 0;

color: var(--muted);

}

.metric-grid {

display: grid;

grid-template-columns: repeat(5, minmax(120px, 1fr));

gap: 12px;

margin-bottom: 18px;

}

.metric-card {

padding: 14px;

}

.metric-card span {

display: block;

font-size: 1.65rem;

font-weight: 800;

}

.metric-card small {

color: var(--muted);

}

.admin-layout {

display: grid;

grid-template-columns: 340px minmax(0, 1fr);

gap: 18px;

margin-bottom: 18px;

}

.admin-grid {

display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 18px;

}

.approval-panel,
.snapshot-panel {
  min-height: 100%;
}

.curriculum-panel {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: start;
}

.curriculum-import-column,
.curriculum-editor-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.video-manager-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.video-manager-grid {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr);
  gap: 12px;
  align-items: end;
}

.admin-panel {

padding: 16px;

min-width: 0;

}

.roster-help {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #cfd8e3;
  background: #f7fafc;
}

.roster-help strong,
.roster-help span {
  display: block;
}

.roster-help span {
  color: var(--muted);
}

.section-head.compact {

align-items: center;

margin-bottom: 12px;

}

.roster-table,

.approval-list,

.report-summary {

display: grid;

gap: 10px;

}

.report-summary h4 {
  margin: 10px 0 0;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.drop-zone {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 128px;
  place-items: center;
  border: 2px dashed var(--line);
  background: #fbfbf8;
  padding: 18px;
  text-align: center;
  cursor: pointer;
}

.drop-zone.drag-over {
  border-color: var(--red);
  background: #fff7f2;
}

.drop-zone input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-zone strong {
  font-size: 1.05rem;
}

.drop-zone span,
.drop-zone small {
  color: var(--muted);
}

.drop-zone .upload-status {
  display: block;
  max-inline-size: 100%;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.logo-drop-zone {
  min-height: 100%;
}

.compact-drop-zone {
  min-height: 96px;
  padding: 14px;
}

.compact-textarea {
  min-height: 84px;
  resize: vertical;
}

.curriculum-builder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.curriculum-locked-notice {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fbfbf8;
}

.curriculum-draft-notice {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #d7c27b;
  background: #fff8df;
}

.curriculum-locked-notice[hidden] {
  display: none;
}

.curriculum-draft-notice[hidden] {
  display: none;
}

.curriculum-locked-notice h3,
.curriculum-locked-notice p,
.curriculum-draft-notice p {
  margin: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.curriculum-builder-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.curriculum-builder-panel h4 {
  margin: 0;
}

.curriculum-item-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

.curriculum-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fbfbf8;
}

.curriculum-picker-row strong,
.curriculum-picker-row small {
  display: block;
}

.curriculum-picker-row small {
  margin-top: 3px;
  color: var(--muted);
}

.curriculum-picker-row button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.inline-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.inline-add-row input {
  min-width: 0;
}

.roster-row {

display: grid;

grid-template-columns: minmax(170px, 1.3fr) minmax(130px, .9fr) minmax(120px, .8fr) auto;

gap: 12px;

align-items: center;

padding: 12px;

border: 1px solid var(--line);

background: #fff;

}

.finance-row {

grid-template-columns: minmax(170px, 1.2fr) minmax(120px, .7fr) minmax(100px, .55fr) minmax(100px, .55fr);

}

.expense-row {

grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .7fr) minmax(100px, .5fr) auto;

}

.owner-admin-layout {

grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);

align-items: start;

}

.owner-admin-access {

margin-bottom: 18px;

}

.owner-account-row {

grid-template-columns: minmax(220px, 1.25fr) minmax(140px, .65fr) minmax(140px, .6fr) auto;

}

.owner-account-row.active {

border-color: var(--red);

box-shadow: 0 0 0 2px rgba(172, 19, 25, .08);

}

.owner-account-row .row-actions {

min-width: 170px;

}

.danger-zone {

display: flex;

align-items: center;

justify-content: space-between;

gap: 12px;

padding: 14px;

border: 1px solid #fecaca;

background: #fff5f5;

}

.danger-zone small {

display: block;

margin-top: 4px;

color: #7f1d1d;

}

.expense-row select + .bank-other-field {

margin-top: 8px;

width: 100%;

}

.bank-other-field[hidden] {

display: none;

}

.finance-grid {

grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);

}

.roster-head {

color: var(--muted);

font-size: .82rem;

font-weight: 800;

text-transform: uppercase;

}

.roster-row small,

.approval-card small {

display: block;

margin-top: 3px;

color: var(--muted);

}

.row-actions {

display: flex;

gap: 8px;

flex-wrap: wrap;

justify-content: end;

}

.rank-progress-pills {

display: flex;

flex-wrap: wrap;

gap: 6px;

margin-top: 8px;

}

.rank-progress-pills span {

display: inline-flex;

align-items: center;

min-height: 24px;

padding: 3px 8px;

border: 1px solid var(--line);

background: #f8fafc;

font-size: .78rem;

font-weight: 800;

}

.approval-card,

.report-line {

display: flex;

justify-content: space-between;

gap: 12px;

padding: 12px;

border: 1px solid var(--line);

background: #fff;

}

.rank-breakdown {

display: grid;

gap: 8px;

margin-top: 10px;

}

.rank-breakdown div {

display: flex;

justify-content: space-between;

gap: 10px;

padding: 10px;

background: #f7f8f9;

}

.empty-state {

padding: 14px;

color: var(--muted);

border: 1px dashed var(--line);

background: #fff;

}

.notes-layout {

display: grid;

grid-template-columns: minmax(0, 1fr) 320px;

gap: 18px;

}

.coach-notes-list {

display: grid;

gap: 12px;

margin-top: 12px;

}

.coach-note-card {

display: grid;

gap: 10px;

padding: 14px;

border: 1px solid var(--line);

background: #fff;

}

.coach-note-head {

display: flex;

align-items: start;

justify-content: space-between;

gap: 12px;

}

.coach-note-head small {

display: block;

margin-top: 3px;

color: var(--muted);

}

textarea {

min-height: 420px;

resize: vertical;

}

.coach-note-card textarea {

min-height: 140px;

}

.source-panel {

padding: 16px;

}

.policy-layout {

display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 18px;

}

.policy-panel {

display: grid;

align-content: start;

gap: 10px;

padding: 16px;

}

.policy-panel p {

margin: 0;

color: #3e4a57;

}

.policy-panel h3 {

margin-bottom: 2px;

}

.policy-panel ul {

display: grid;

gap: 8px;

margin: 0;

padding-left: 20px;

color: #3e4a57;

}

.source-panel ul {

margin: 8px 0 16px;

padding-left: 20px;

}

.small-copy {

color: var(--muted);

font-size: .9rem;

}

.app-footer {

display: flex;

align-items: center;

justify-content: center;

gap: 12px;

flex-wrap: wrap;

width: min(1200px, calc(100% - 32px));

margin: -28px auto 36px;

padding-top: 18px;

border-top: 1px solid var(--line);

color: var(--muted);

font-size: .9rem;

}

.app-footer button {

border: 0;

background: transparent;

color: var(--ink);

padding: 6px 4px;

cursor: pointer;

text-decoration: underline;

text-underline-offset: 3px;

}

dialog {

width: min(860px, calc(100% - 24px));

border: 1px solid var(--line);

padding: 0;

box-shadow: var(--shadow);

}

dialog::backdrop {

background: rgba(0,0,0,.42);

}

.dialog-head {

display: flex;

align-items: start;

justify-content: space-between;

gap: 16px;

padding: 18px;

border-bottom: 1px solid var(--line);

}

.demo-body {

display: grid;

grid-template-columns: minmax(330px, 1.15fr) minmax(0, .85fr);

gap: 18px;

padding: 18px;

}

.video-frame {

position: relative;

width: 100%;

aspect-ratio: 4 / 3;

overflow: hidden;

background: #0d0f12;

}

.video-frame iframe {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

border: 0;

}

.video-frame video {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

display: block;

background: #020617;

object-fit: contain;

}

.video-frame video[hidden] {

display: none;

}

.generated-demo {

position: absolute;

inset: 0;

display: grid;

grid-template-columns: 1fr;

grid-template-rows: minmax(0, 1fr) auto;

gap: 8px;

padding: 10px;

color: #f8fafc;

background: #101418;

}

.generated-demo[hidden] {

display: none;

}

.generated-stage {

position: relative;

min-height: 112px;

overflow: hidden;

border: 1px solid rgba(255,255,255,.14);

background:

linear-gradient(90deg, transparent 49%, rgba(255,255,255,.08) 50%, transparent 51%),

linear-gradient(0deg, #1f6b5e, #234f58);

}

.generated-stage::before,

.generated-stage::after {

content: "";

position: absolute;

left: 16px;

right: 16px;

border-top: 1px solid rgba(255,255,255,.22);

}

.generated-stage::before { top: 28px; }

.generated-stage::after { bottom: 28px; }

.generated-label {

position: absolute;

left: 10px;

top: 8px;

z-index: 2;

max-width: calc(100% - 20px);

font-size: .72rem;

font-weight: 800;

letter-spacing: .03em;

text-transform: uppercase;

color: rgba(255,255,255,.86);

}

.generated-figure {

position: absolute;

width: 48px;

height: 54px;

left: var(--x, 42%);

top: var(--y, 48%);

transform: translate(-50%, -50%) rotate(var(--r, 0deg));

transform-origin: center;

}

.generated-figure .head,

.generated-figure .body,

.generated-figure .belt,

.generated-figure .leg {

position: absolute;

display: block;

}

.generated-figure .head {

width: 15px;

height: 15px;

left: 16px;

top: 0;

border-radius: 50%;

background: var(--figure-color);

}

.generated-figure .body {

width: 26px;

height: 28px;

left: 11px;

top: 14px;

border-radius: 7px 7px 4px 4px;

background: var(--figure-color);

}

.generated-figure .belt {

width: 28px;

height: 4px;

left: 10px;

top: 29px;

background: #f4c542;

}

.generated-figure .leg {

width: 12px;

height: 22px;

top: 38px;

border-radius: 6px;

background: var(--figure-color);

transform-origin: top center;

}

.generated-figure .leg.left {

left: 12px;

transform: rotate(-18deg);

}

.generated-figure .leg.right {

right: 12px;

transform: rotate(18deg);

}

.generated-figure.tori { --figure-color: #f8fafc; }

.generated-figure.uke { --figure-color: #d94c4c; }

.generated-cues {

display: grid;

gap: 8px;

margin: 0;

padding: 0;

list-style: none;

font-size: .78rem;

line-height: 1.25;

}

.generated-cues li {

display: grid;

grid-template-columns: 22px minmax(0, 1fr);

gap: 8px;

align-items: start;

}

.generated-cues span {

display: grid;

place-items: center;

width: 22px;

height: 22px;

color: #101418;

background: #f4c542;

font-weight: 800;

font-size: .72rem;

}

.generated-cues strong {

display: block;

margin-bottom: 2px;

color: #fff;

font-size: .78rem;

}

.generated-cues p {

margin: 0;

color: rgba(255,255,255,.78);

}

.generated-demo[data-motion="scissor"] .tori,

.generated-demo[data-motion="swing"] .tori,

.generated-demo[data-motion="sleeve-reversal"] .tori {

animation: generatedBottomPlayer 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="scissor"] .uke,

.generated-demo[data-motion="swing"] .uke,

.generated-demo[data-motion="sleeve-reversal"] .uke {

animation: generatedSweepPartner 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="pass"] .tori,

.generated-demo[data-motion="double-under"] .tori,

.generated-demo[data-motion="one-arm-pass"] .tori {

animation: generatedPassPlayer 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="pass"] .uke,

.generated-demo[data-motion="double-under"] .uke,

.generated-demo[data-motion="one-arm-pass"] .uke {

animation: generatedGuardPartner 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="roll"] .tori,

.generated-demo[data-motion="leg-extension"] .tori,

.generated-demo[data-motion="cross-hook"] .tori {

animation: generatedRollPlayer 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="roll"] .uke,

.generated-demo[data-motion="leg-extension"] .uke,

.generated-demo[data-motion="cross-hook"] .uke {

animation: generatedRollPartner 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="cartwheel"] .tori {

animation: generatedCartwheelPlayer 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="cartwheel"] .uke {

animation: generatedGuardPartner 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="combo-flow"] .tori {

animation: generatedComboPlayer 4.5s ease-in-out infinite;

}

.generated-demo[data-motion="combo-flow"] .uke {

animation: generatedComboPartner 4.5s ease-in-out infinite;

}

@keyframes generatedBottomPlayer {

0%, 100% { left: 36%; top: 65%; transform: translate(-50%, -50%) rotate(-88deg); }

45% { left: 46%; top: 61%; transform: translate(-50%, -50%) rotate(-28deg); }

72% { left: 58%; top: 45%; transform: translate(-50%, -50%) rotate(0deg); }

}

@keyframes generatedSweepPartner {

0%, 100% { left: 58%; top: 44%; transform: translate(-50%, -50%) rotate(0deg); }

45% { left: 55%; top: 54%; transform: translate(-50%, -50%) rotate(30deg); }

72% { left: 66%; top: 67%; transform: translate(-50%, -50%) rotate(88deg); }

}

@keyframes generatedPassPlayer {

0%, 100% { left: 30%; top: 46%; transform: translate(-50%, -50%) rotate(0deg); }

45% { left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(8deg); }

72% { left: 68%; top: 48%; transform: translate(-50%, -50%) rotate(0deg); }

}

@keyframes generatedGuardPartner {

0%, 100% { left: 55%; top: 60%; transform: translate(-50%, -50%) rotate(90deg); }

45% { left: 52%; top: 61%; transform: translate(-50%, -50%) rotate(90deg); }

72% { left: 48%; top: 64%; transform: translate(-50%, -50%) rotate(82deg); }

}

@keyframes generatedRollPlayer {

0%, 100% { left: 42%; top: 66%; transform: translate(-50%, -50%) rotate(-90deg); }

45% { left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(-170deg); }

72% { left: 62%; top: 48%; transform: translate(-50%, -50%) rotate(-360deg); }

}

@keyframes generatedRollPartner {

0%, 100% { left: 58%; top: 44%; transform: translate(-50%, -50%) rotate(0deg); }

45% { left: 54%; top: 52%; transform: translate(-50%, -50%) rotate(82deg); }

72% { left: 45%; top: 66%; transform: translate(-50%, -50%) rotate(110deg); }

}

@keyframes generatedCartwheelPlayer {

0%, 100% { left: 29%; top: 44%; transform: translate(-50%, -50%) rotate(0deg); }

38% { left: 50%; top: 27%; transform: translate(-50%, -50%) rotate(180deg); }

72% { left: 70%; top: 45%; transform: translate(-50%, -50%) rotate(360deg); }

}

@keyframes generatedComboPlayer {

0%, 100% { left: 38%; top: 43%; transform: translate(-50%, -50%) rotate(0deg); }

38% { left: 46%; top: 43%; transform: translate(-50%, -50%) rotate(-8deg); }

72% { left: 58%; top: 52%; transform: translate(-50%, -50%) rotate(18deg); }

}

@keyframes generatedComboPartner {

0%, 100% { left: 58%; top: 43%; transform: translate(-50%, -50%) rotate(0deg); }

38% { left: 57%; top: 43%; transform: translate(-50%, -50%) rotate(8deg); }

72% { left: 66%; top: 63%; transform: translate(-50%, -50%) rotate(90deg); }

}

.generated-stage {

min-height: 0;

border-color: rgba(255,255,255,.18);

background: #101418;

}

.generated-stage::before,

.generated-stage::after {

display: none;

}

.generated-visual {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

}

.mat-grid {

fill: none;

stroke: rgba(255,255,255,.2);

stroke-width: 2;

stroke-linecap: round;

}

.motion-arrow {

fill: none;

stroke: #f4c542;

stroke-width: 8;

stroke-linecap: round;

stroke-dasharray: 12 12;

opacity: .82;

filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));

animation: arrowPulse 2.4s ease-in-out infinite;

}

.leg-track {

fill: none;

stroke: #f8fafc;

stroke-width: 3;

stroke-dasharray: 8 10;

stroke-linecap: round;

opacity: .28;

}

.track-right {

stroke: #f4c542;

}

.pass-arrow,

.roll-arrow {

opacity: 0;

}

.demo-rig {

filter: url(#figureShadow);

transform-box: fill-box;

transform-origin: center;

}

.figure-shadow {

fill: rgba(0,0,0,.28);

}

.gi-jacket {

stroke: rgba(10,14,18,.6);

stroke-width: 3;

}

.tori-jacket {

fill: #f8fafc;

}

.uke-jacket {

fill: #d94c4c;

}

.head {

fill: #f0c7a8;

stroke: rgba(10,14,18,.5);

stroke-width: 3;

}

.gi-line {

fill: none;

stroke-linecap: round;

stroke-width: 18;

transform-box: fill-box;

transform-origin: center;

}

.tori-rig .gi-line {

stroke: #f8fafc;

}

.uke-rig .gi-line {

stroke: #d94c4c;

}

.lapel {

fill: none;

stroke: rgba(10,14,18,.44);

stroke-width: 4;

stroke-linecap: round;

stroke-linejoin: round;

}

.belt-line {

fill: none;

stroke: #f4c542;

stroke-width: 8;

stroke-linecap: round;

}

.face-line {

fill: none;

stroke: rgba(10,14,18,.55);

stroke-width: 3;

stroke-linecap: round;

}

.joint {

fill: #f4c542;

stroke: rgba(10,14,18,.45);

stroke-width: 2;

transform-box: fill-box;

transform-origin: center;

}

.foot {

fill: #f8fafc;

stroke: rgba(10,14,18,.48);

stroke-width: 3;

transform-box: fill-box;

transform-origin: center;

}

.uke-rig .foot {

fill: #d94c4c;

}

.limbs .leg.left,

.limbs .leg.right,

.limbs .knee.left,

.limbs .knee.right,

.limbs .foot.left,

.limbs .foot.right {

animation-duration: 5s;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

}

.generated-demo .tori-rig {

animation: realisticComboTori 5s ease-in-out infinite;

}

.generated-demo .uke-rig {

animation: realisticComboUke 5s ease-in-out infinite;

}

.generated-demo[data-motion="scissor"] .tori-rig,

.generated-demo[data-motion="swing"] .tori-rig,

.generated-demo[data-motion="sleeve-reversal"] .tori-rig {

animation-name: realisticSweepTori;

}

.generated-demo[data-motion="scissor"] .uke-rig,

.generated-demo[data-motion="swing"] .uke-rig,

.generated-demo[data-motion="sleeve-reversal"] .uke-rig {

animation-name: realisticSweepUke;

}

.generated-demo[data-motion="pass"] .tori-rig,

.generated-demo[data-motion="double-under"] .tori-rig,

.generated-demo[data-motion="one-arm-pass"] .tori-rig {

animation-name: realisticPassTori;

}

.generated-demo[data-motion="pass"] .uke-rig,

.generated-demo[data-motion="double-under"] .uke-rig,

.generated-demo[data-motion="one-arm-pass"] .uke-rig {

animation-name: realisticPassUke;

}

.generated-demo[data-motion="roll"] .tori-rig,

.generated-demo[data-motion="leg-extension"] .tori-rig,

.generated-demo[data-motion="cross-hook"] .tori-rig {

animation-name: realisticRollTori;

}

.generated-demo[data-motion="roll"] .uke-rig,

.generated-demo[data-motion="leg-extension"] .uke-rig,

.generated-demo[data-motion="cross-hook"] .uke-rig {

animation-name: realisticRollUke;

}

.generated-demo[data-motion="cartwheel"] .tori-rig {

animation-name: realisticCartwheelTori;

}

.generated-demo[data-motion="cartwheel"] .uke-rig {

animation-name: realisticPassUke;

}

.generated-demo[data-motion="scissor"] .tori-rig .leg.left,

.generated-demo[data-motion="swing"] .tori-rig .leg.left,

.generated-demo[data-motion="sleeve-reversal"] .tori-rig .leg.left {

animation-name: sweepBlockLeg;

}

.generated-demo[data-motion="scissor"] .tori-rig .leg.right,

.generated-demo[data-motion="swing"] .tori-rig .leg.right,

.generated-demo[data-motion="sleeve-reversal"] .tori-rig .leg.right {

animation-name: sweepChopLeg;

}

.generated-demo[data-motion="scissor"] .tori-rig .knee.left,

.generated-demo[data-motion="swing"] .tori-rig .knee.left,

.generated-demo[data-motion="sleeve-reversal"] .tori-rig .knee.left,

.generated-demo[data-motion="scissor"] .tori-rig .foot.left,

.generated-demo[data-motion="swing"] .tori-rig .foot.left,

.generated-demo[data-motion="sleeve-reversal"] .tori-rig .foot.left {

animation-name: sweepBlockMarker;

}

.generated-demo[data-motion="scissor"] .tori-rig .knee.right,

.generated-demo[data-motion="swing"] .tori-rig .knee.right,

.generated-demo[data-motion="sleeve-reversal"] .tori-rig .knee.right,

.generated-demo[data-motion="scissor"] .tori-rig .foot.right,

.generated-demo[data-motion="swing"] .tori-rig .foot.right,

.generated-demo[data-motion="sleeve-reversal"] .tori-rig .foot.right {

animation-name: sweepChopMarker;

}

.generated-demo[data-motion="pass"] .tori-rig .leg.left,

.generated-demo[data-motion="double-under"] .tori-rig .leg.left,

.generated-demo[data-motion="one-arm-pass"] .tori-rig .leg.left {

animation-name: passLeadLeg;

}

.generated-demo[data-motion="pass"] .tori-rig .leg.right,

.generated-demo[data-motion="double-under"] .tori-rig .leg.right,

.generated-demo[data-motion="one-arm-pass"] .tori-rig .leg.right {

animation-name: passTrailLeg;

}

.generated-demo[data-motion="pass"] .tori-rig .knee.left,

.generated-demo[data-motion="double-under"] .tori-rig .knee.left,

.generated-demo[data-motion="one-arm-pass"] .tori-rig .knee.left,

.generated-demo[data-motion="pass"] .tori-rig .foot.left,

.generated-demo[data-motion="double-under"] .tori-rig .foot.left,

.generated-demo[data-motion="one-arm-pass"] .tori-rig .foot.left {

animation-name: passLeadMarker;

}

.generated-demo[data-motion="pass"] .tori-rig .knee.right,

.generated-demo[data-motion="double-under"] .tori-rig .knee.right,

.generated-demo[data-motion="one-arm-pass"] .tori-rig .knee.right,

.generated-demo[data-motion="pass"] .tori-rig .foot.right,

.generated-demo[data-motion="double-under"] .tori-rig .foot.right,

.generated-demo[data-motion="one-arm-pass"] .tori-rig .foot.right {

animation-name: passTrailMarker;

}

.generated-demo[data-motion="roll"] .tori-rig .leg.left,

.generated-demo[data-motion="leg-extension"] .tori-rig .leg.left,

.generated-demo[data-motion="cross-hook"] .tori-rig .leg.left {

animation-name: rollExtendLeg;

}

.generated-demo[data-motion="roll"] .tori-rig .leg.right,

.generated-demo[data-motion="leg-extension"] .tori-rig .leg.right,

.generated-demo[data-motion="cross-hook"] .tori-rig .leg.right {

animation-name: rollHookLeg;

}

.generated-demo[data-motion="roll"] .tori-rig .knee.left,

.generated-demo[data-motion="leg-extension"] .tori-rig .knee.left,

.generated-demo[data-motion="cross-hook"] .tori-rig .knee.left,

.generated-demo[data-motion="roll"] .tori-rig .foot.left,

.generated-demo[data-motion="leg-extension"] .tori-rig .foot.left,

.generated-demo[data-motion="cross-hook"] .tori-rig .foot.left {

animation-name: rollExtendMarker;

}

.generated-demo[data-motion="roll"] .tori-rig .knee.right,

.generated-demo[data-motion="leg-extension"] .tori-rig .knee.right,

.generated-demo[data-motion="cross-hook"] .tori-rig .knee.right,

.generated-demo[data-motion="roll"] .tori-rig .foot.right,

.generated-demo[data-motion="leg-extension"] .tori-rig .foot.right,

.generated-demo[data-motion="cross-hook"] .tori-rig .foot.right {

animation-name: rollHookMarker;

}

.generated-demo[data-motion="cartwheel"] .tori-rig .leg.left {

animation-name: cartwheelSplitLeft;

}

.generated-demo[data-motion="cartwheel"] .tori-rig .leg.right {

animation-name: cartwheelSplitRight;

}

.generated-demo[data-motion="cartwheel"] .tori-rig .knee.left,

.generated-demo[data-motion="cartwheel"] .tori-rig .foot.left {

animation-name: cartwheelMarkerLeft;

}

.generated-demo[data-motion="cartwheel"] .tori-rig .knee.right,

.generated-demo[data-motion="cartwheel"] .tori-rig .foot.right {

animation-name: cartwheelMarkerRight;

}

.generated-demo[data-motion="pass"] .pass-arrow,

.generated-demo[data-motion="double-under"] .pass-arrow,

.generated-demo[data-motion="one-arm-pass"] .pass-arrow,

.generated-demo[data-motion="cartwheel"] .pass-arrow {

opacity: .82;

}

.generated-demo[data-motion="pass"] .sweep-arrow,

.generated-demo[data-motion="double-under"] .sweep-arrow,

.generated-demo[data-motion="one-arm-pass"] .sweep-arrow,

.generated-demo[data-motion="cartwheel"] .sweep-arrow {

opacity: 0;

}

.generated-demo[data-motion="roll"] .roll-arrow,

.generated-demo[data-motion="leg-extension"] .roll-arrow,

.generated-demo[data-motion="cross-hook"] .roll-arrow {

opacity: .82;

}

.generated-demo[data-motion="roll"] .sweep-arrow,

.generated-demo[data-motion="leg-extension"] .sweep-arrow,

.generated-demo[data-motion="cross-hook"] .sweep-arrow {

opacity: 0;

}

@keyframes arrowPulse {

0%, 100% { stroke-dashoffset: 0; opacity: .62; }

50% { stroke-dashoffset: -24; opacity: .95; }

}

@keyframes realisticSweepTori {

0%, 100% { transform: translate(220px, 228px) rotate(-82deg) scale(.92); }

38% { transform: translate(268px, 210px) rotate(-38deg) scale(.96); }

72% { transform: translate(382px, 160px) rotate(2deg) scale(1); }

}

@keyframes realisticSweepUke {

0%, 100% { transform: translate(382px, 166px) rotate(0deg) scale(1); }

38% { transform: translate(384px, 208px) rotate(30deg) scale(.98); }

72% { transform: translate(462px, 248px) rotate(88deg) scale(.94); }

}

@keyframes realisticPassTori {

0%, 100% { transform: translate(178px, 164px) rotate(0deg) scale(.98); }

42% { transform: translate(314px, 122px) rotate(9deg) scale(1); }

76% { transform: translate(468px, 164px) rotate(0deg) scale(1); }

}

@keyframes realisticPassUke {

0%, 100% { transform: translate(370px, 226px) rotate(88deg) scale(.95); }

42% { transform: translate(352px, 232px) rotate(92deg) scale(.95); }

76% { transform: translate(310px, 238px) rotate(82deg) scale(.95); }

}

@keyframes realisticRollTori {

0%, 100% { transform: translate(246px, 244px) rotate(-92deg) scale(.94); }

42% { transform: translate(318px, 192px) rotate(-188deg) scale(.97); }

76% { transform: translate(410px, 158px) rotate(-360deg) scale(1); }

}

@keyframes realisticRollUke {

0%, 100% { transform: translate(390px, 158px) rotate(4deg) scale(1); }

42% { transform: translate(366px, 206px) rotate(78deg) scale(.96); }

76% { transform: translate(292px, 250px) rotate(112deg) scale(.94); }

}

@keyframes realisticCartwheelTori {

0%, 100% { transform: translate(172px, 162px) rotate(0deg) scale(.98); }

35% { transform: translate(320px, 90px) rotate(180deg) scale(1); }

75% { transform: translate(492px, 164px) rotate(360deg) scale(.98); }

}

@keyframes realisticComboTori {

0%, 100% { transform: translate(238px, 164px) rotate(0deg) scale(1); }

42% { transform: translate(282px, 160px) rotate(-10deg) scale(1); }

76% { transform: translate(360px, 202px) rotate(18deg) scale(.98); }

}

@keyframes realisticComboUke {

0%, 100% { transform: translate(392px, 166px) rotate(0deg) scale(1); }

42% { transform: translate(392px, 166px) rotate(8deg) scale(1); }

76% { transform: translate(452px, 246px) rotate(88deg) scale(.94); }

}

@keyframes sweepBlockLeg {

0%, 100% { transform: translate(0, 0) rotate(-8deg) scaleY(1); }

38% { transform: translate(8px, -10px) rotate(-46deg) scaleY(1.16); }

72% { transform: translate(15px, -14px) rotate(-18deg) scaleY(1.05); }

}

@keyframes sweepChopLeg {

0%, 100% { transform: translate(0, 0) rotate(8deg) scaleY(1); }

38% { transform: translate(-8px, 9px) rotate(54deg) scaleY(1.18); }

72% { transform: translate(-4px, -6px) rotate(20deg) scaleY(1.03); }

}

@keyframes sweepBlockMarker {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

38% { transform: translate(12px, -13px) rotate(-28deg); }

72% { transform: translate(15px, -12px) rotate(-10deg); }

}

@keyframes sweepChopMarker {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

38% { transform: translate(-12px, 12px) rotate(34deg); }

72% { transform: translate(-5px, -6px) rotate(12deg); }

}

@keyframes passLeadLeg {

0%, 100% { transform: translate(0, 0) rotate(-6deg) scaleY(1); }

42% { transform: translate(15px, -18px) rotate(-58deg) scaleY(1.18); }

76% { transform: translate(22px, 3px) rotate(-14deg) scaleY(1.02); }

}

@keyframes passTrailLeg {

0%, 100% { transform: translate(0, 0) rotate(8deg) scaleY(1); }

42% { transform: translate(-10px, 10px) rotate(34deg) scaleY(.95); }

76% { transform: translate(18px, -2px) rotate(18deg) scaleY(1.05); }

}

@keyframes passLeadMarker {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

42% { transform: translate(17px, -18px) rotate(-35deg); }

76% { transform: translate(24px, 3px) rotate(-8deg); }

}

@keyframes passTrailMarker {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

42% { transform: translate(-10px, 10px) rotate(22deg); }

76% { transform: translate(18px, -2px) rotate(10deg); }

}

@keyframes rollExtendLeg {

0%, 100% { transform: translate(0, 0) rotate(-8deg) scaleY(1); }

42% { transform: translate(18px, -7px) rotate(-72deg) scaleY(1.22); }

76% { transform: translate(8px, -10px) rotate(-24deg) scaleY(1.05); }

}

@keyframes rollHookLeg {

0%, 100% { transform: translate(0, 0) rotate(8deg) scaleY(1); }

42% { transform: translate(-15px, 9px) rotate(62deg) scaleY(1.15); }

76% { transform: translate(-8px, -4px) rotate(28deg) scaleY(1.02); }

}

@keyframes rollExtendMarker {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

42% { transform: translate(19px, -8px) rotate(-42deg); }

76% { transform: translate(8px, -9px) rotate(-12deg); }

}

@keyframes rollHookMarker {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

42% { transform: translate(-16px, 10px) rotate(38deg); }

76% { transform: translate(-8px, -3px) rotate(14deg); }

}

@keyframes cartwheelSplitLeft {

0%, 100% { transform: translate(0, 0) rotate(-6deg) scaleY(1); }

35% { transform: translate(-18px, -22px) rotate(-92deg) scaleY(1.34); }

75% { transform: translate(7px, 3px) rotate(-12deg) scaleY(1); }

}

@keyframes cartwheelSplitRight {

0%, 100% { transform: translate(0, 0) rotate(6deg) scaleY(1); }

35% { transform: translate(18px, -22px) rotate(92deg) scaleY(1.34); }

75% { transform: translate(-7px, 3px) rotate(12deg) scaleY(1); }

}

@keyframes cartwheelMarkerLeft {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

35% { transform: translate(-21px, -24px) rotate(-58deg); }

75% { transform: translate(7px, 3px) rotate(-5deg); }

}

@keyframes cartwheelMarkerRight {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

35% { transform: translate(21px, -24px) rotate(58deg); }

75% { transform: translate(-7px, 3px) rotate(5deg); }

}

.demo-meta {

color: var(--muted);

margin-top: 0;

}

.demo-actions {

display: flex;

gap: 10px;

flex-wrap: wrap;

}

@media (max-width: 900px) {

.app-header,

.toolbar,

.section-head,

.wide-band {

align-items: stretch;

flex-direction: column;

}

.rank-grid,

.technique-grid,

.focus-list,

.plan-grid,

.signup-layout,

.metric-grid,

.admin-layout,

.admin-grid,

.curriculum-panel,

.video-manager-grid,

.notes-layout,

.policy-layout,

.curriculum-builder,

.demo-body {

grid-template-columns: 1fr;

}

.school-hero,

.admin-hero {

flex-direction: column;

align-items: stretch;

}

.belt-layout,
.school-rank-layout {

grid-template-columns: 1fr;

}

.belt-nav {

grid-template-columns: repeat(2, minmax(0, 1fr));

}

}

@media (max-width: 560px) {

main {

width: min(100% - 20px, 1200px);

}

.app-header {

padding: 16px;

}

.brand-logo {

width: 58px;

height: 58px;

}

.header-stats {

display: grid;

grid-template-columns: 1fr 1fr;

}

.header-stats div {

min-width: 0;

}

.belt-nav {

grid-template-columns: 1fr;

}

.check-item {

grid-template-columns: auto minmax(0, 1fr);

}

.roster-row {

grid-template-columns: 1fr;

}

.row-actions {

justify-content: start;

}

.check-item .demo-button {

grid-column: 2;

width: fit-content;

}

}

.bank-import-panel {
  margin: 18px 0;
}

.yearly-financial-panel {
  margin-top: 18px;
}

.yearly-financial-panel .chip-row {
  margin: 10px 0 14px;
}

.ledger-condensed {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fbfbf8;
}

.ledger-condensed h4,
.ledger-condensed p {
  margin: 0;
}

.statement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.bank-drop-zone {
  display: grid;
  gap: 8px;
  min-height: 136px;
  place-items: center;
  border: 2px dashed var(--line);
  background: #fbfbf8;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.bank-drop-zone.drag-over {
  border-color: var(--red);
  background: #fff7f2;
}

.bank-drop-zone input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.bank-drop-zone strong {
  font-size: 1.05rem;
}

.bank-drop-zone span,
.import-summary {
  color: var(--muted);
}

.import-summary {
  margin: 12px 0;
}

.import-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.import-check input {
  width: 18px;
  height: 18px;
}

.bank-import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fbfbf8;
}

.bank-import-footer div {
  display: grid;
  gap: 4px;
}

.bank-import-footer small {
  color: var(--muted);
}