:root {
  --sqp-ink: #20262a;
  --sqp-text: #303537;
  --sqp-muted: #59615e;
  --sqp-green: #2d6f50;
  --sqp-green-deep: #20563e;
  --sqp-sage: #e6eee9;
  --sqp-yellow: #f4c430;
  --sqp-cream: #f0ece3;
  --sqp-paper: #f8f6ef;
  --sqp-white: #fff;
  --sqp-line: #c9c1b4;
  --sqp-danger: #a43c32;
  --sqp-font: "Archivo", Aptos, "Segoe UI", Helvetica, Arial, sans-serif;
  --sqp-display: "Archivo Black", "Arial Black", "Franklin Gothic Heavy", Arial, sans-serif;
}

.sqp-auth,
.sqp-portal,
.sqp-admin {
  color: var(--sqp-text);
  font-family: var(--sqp-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}

.sqp-auth *,
.sqp-auth *::before,
.sqp-auth *::after,
.sqp-portal *,
.sqp-portal *::before,
.sqp-portal *::after,
.sqp-admin *,
.sqp-admin *::before,
.sqp-admin *::after {
  box-sizing: border-box;
}

.sqp-shell {
  width: min(calc(100% - 30px), 1240px);
  margin-inline: auto;
}

.sqp-auth h1,
.sqp-auth h2,
.sqp-auth h3,
.sqp-portal h1,
.sqp-portal h2,
.sqp-portal h3,
.sqp-admin h1,
.sqp-admin h2,
.sqp-admin h3 {
  margin: 0 0 16px;
  color: var(--sqp-ink);
  font-family: var(--sqp-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.sqp-auth h1,
.sqp-portal-header h1 {
  font-size: clamp(2.6rem, 5vw, 4.8rem);
}

.sqp-auth h2,
.sqp-portal h2,
.sqp-admin h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

.sqp-auth h3,
.sqp-portal h3,
.sqp-admin h3 {
  font-size: 1.45rem;
}

.sqp-auth p,
.sqp-portal p,
.sqp-admin p {
  margin: 0 0 18px;
}

.sqp-auth {
  padding: clamp(50px, 7vw, 100px) 0;
  background:
    linear-gradient(135deg, transparent 75%, rgba(45, 111, 80, 0.08) 75%),
    var(--sqp-cream);
}

.sqp-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
  align-items: start;
  gap: clamp(35px, 6vw, 80px);
}

.sqp-auth-intro {
  position: sticky;
  top: 140px;
  padding: 36px;
  border: 3px solid var(--sqp-ink);
  background: var(--sqp-green-deep);
  box-shadow: 10px 10px 0 var(--sqp-yellow);
  color: var(--sqp-white);
}

.sqp-auth-intro h1,
.sqp-portal-header h1 {
  color: var(--sqp-white);
}

.sqp-auth-intro > p {
  font-size: 1.08rem;
}

.sqp-auth-intro ul,
.sqp-security-note ul,
.sqp-readiness,
.sqp-number-list {
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.sqp-auth-intro li,
.sqp-security-note li,
.sqp-readiness li,
.sqp-number-list li {
  position: relative;
  padding: 11px 0 11px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
  font-weight: 700;
}

.sqp-auth-intro li::before,
.sqp-security-note li::before,
.sqp-readiness li::before {
  position: absolute;
  top: 12px;
  left: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--sqp-yellow);
  color: var(--sqp-ink);
  content: "✓";
  font-size: 13px;
  font-weight: 900;
  line-height: 21px;
  text-align: center;
}

.sqp-auth-panels {
  display: grid;
  gap: 25px;
}

.sqp-auth-card,
.sqp-panel,
.sqp-stat,
.sqp-project-card,
.sqp-plan-card,
.sqp-template-card {
  border: 2px solid var(--sqp-ink);
  border-radius: 4px;
  background: var(--sqp-white);
}

.sqp-auth-card,
.sqp-panel {
  padding: clamp(24px, 4vw, 38px);
}

.sqp-auth-card--register {
  border-top: 8px solid var(--sqp-green);
}

.sqp-kicker,
.sqp-card-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  margin-bottom: 14px;
  border-left: 5px solid var(--sqp-yellow);
  background: var(--sqp-sage);
  color: var(--sqp-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sqp-auth-intro .sqp-kicker,
.sqp-portal-header .sqp-kicker {
  background: var(--sqp-white);
}

.sqp-form {
  display: grid;
  gap: 17px;
}

.sqp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sqp-form label:not(.sqp-check) {
  display: grid;
  gap: 7px;
  margin: 0;
}

.sqp-form label > span,
.sqp-form small {
  color: var(--sqp-ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.sqp-form small {
  color: var(--sqp-muted);
  font-weight: 600;
}

.sqp-password-control {
  position: relative;
  display: block;
}

.sqp-password-control input {
  padding-right: 78px !important;
}

.sqp-password-control button {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 60px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--sqp-ink);
  border-radius: 2px;
  background: var(--sqp-sage);
  color: var(--sqp-ink);
  font: 800 0.82rem/1 var(--sqp-font);
  cursor: pointer;
}

.sqp-password-control button:hover,
.sqp-password-control button:focus-visible {
  background: var(--sqp-yellow);
  outline: 3px solid rgba(45, 111, 80, 0.2);
}

.sqp-human-check {
  display: grid;
  gap: 10px;
  padding: 17px;
  margin: 0;
  border: 2px solid var(--sqp-ink);
  border-left: 7px solid var(--sqp-yellow);
  border-radius: 3px;
  background: var(--sqp-paper);
}

.sqp-human-check legend {
  padding: 0 7px;
  color: var(--sqp-green-deep);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.sqp-human-check label {
  max-width: 230px;
}

.sqp-human-check input[type="number"] {
  background: var(--sqp-white);
}

.sqp-form input:not([type="checkbox"]):not([type="file"]),
.sqp-form select,
.sqp-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  border: 2px solid var(--sqp-line);
  border-radius: 3px;
  background: var(--sqp-white);
  color: var(--sqp-ink);
  font: 600 1rem/1.35 var(--sqp-font);
  box-shadow: none;
}

.sqp-form textarea {
  min-height: 110px;
  resize: vertical;
}

.sqp-form input:focus,
.sqp-form select:focus,
.sqp-form textarea:focus {
  border-color: var(--sqp-green-deep);
  outline: 3px solid rgba(45, 111, 80, 0.18);
}

.sqp-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
  font-size: 0.92rem;
}

.sqp-check input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--sqp-green-deep);
}

.sqp-button,
.sqp-table-action,
.sqp-form-link,
.sqp-tabs a,
.sqp-panel-heading a {
  font-family: var(--sqp-font);
  font-weight: 800;
}

.sqp-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 2px solid #173f2f;
  border-radius: 4px;
  background: var(--sqp-green-deep);
  box-shadow: 4px 4px 0 var(--sqp-ink);
  color: var(--sqp-white) !important;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
}

.sqp-button:hover,
.sqp-button:focus {
  background: var(--sqp-green);
  color: var(--sqp-white) !important;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--sqp-ink);
}

.sqp-button--wide {
  width: 100%;
}

.sqp-button--small {
  min-height: 43px;
  padding: 9px 14px;
  font-size: 0.9rem;
}

.sqp-button--light {
  border-color: var(--sqp-ink);
  background: var(--sqp-yellow);
  color: var(--sqp-ink) !important;
  box-shadow: none;
}

.sqp-button--light:hover {
  background: var(--sqp-white);
  color: var(--sqp-ink) !important;
}

.sqp-form-link,
.sqp-panel-heading a,
.sqp-table-action {
  color: var(--sqp-green-deep) !important;
  font-size: 0.9rem;
  text-decoration: underline !important;
  text-decoration-color: var(--sqp-yellow) !important;
  text-decoration-thickness: 3px !important;
}

.sqp-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.sqp-portal {
  min-height: 70vh;
  padding: 42px 0 80px;
  background: var(--sqp-paper);
}

.sqp-portal-header {
  display: flex;
  min-height: 185px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(28px, 5vw, 48px);
  border: 3px solid var(--sqp-ink);
  background: var(--sqp-green-deep);
  box-shadow: 9px 9px 0 var(--sqp-yellow);
  color: var(--sqp-white);
}

.sqp-portal-header h1 {
  margin-bottom: 6px;
}

.sqp-portal-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.95rem;
}

.sqp-tabs {
  display: flex;
  margin: 34px 0 28px;
  overflow-x: auto;
  border: 2px solid var(--sqp-ink);
  background: var(--sqp-white);
  scrollbar-width: thin;
}

.sqp-tabs a {
  display: flex;
  min-width: max-content;
  min-height: 52px;
  align-items: center;
  padding: 12px 18px;
  border-right: 1px solid var(--sqp-line);
  color: var(--sqp-ink) !important;
  font-size: 0.92rem;
  text-decoration: none !important;
}

.sqp-tabs a:hover,
.sqp-tabs a.is-active {
  background: var(--sqp-sage);
  box-shadow: inset 0 -5px 0 var(--sqp-yellow);
}

.sqp-content {
  display: grid;
  gap: 28px;
}

.sqp-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  align-items: end;
  gap: 35px;
  padding: 12px 0 4px;
}

.sqp-section-heading h2,
.sqp-panel h2,
.sqp-admin h2 {
  margin-bottom: 0;
}

.sqp-section-heading > p {
  margin: 0;
  color: var(--sqp-muted);
}

.sqp-heading-action {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.sqp-heading-action p {
  margin: 0;
  color: var(--sqp-muted);
}

.sqp-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sqp-stat {
  min-height: 165px;
  padding: 24px;
  border-top: 7px solid var(--sqp-green);
}

.sqp-stat > span,
.sqp-stat > small {
  display: block;
  color: var(--sqp-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.sqp-stat > strong {
  display: block;
  margin: 15px 0 13px;
  color: var(--sqp-ink);
  font-family: var(--sqp-display);
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sqp-status {
  display: inline-flex !important;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--sqp-sage);
  color: var(--sqp-green-deep) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.15;
}

.sqp-status--past_due,
.sqp-status--unpaid,
.sqp-status--incomplete,
.sqp-status--cancelled,
.sqp-status--canceled,
.sqp-status--void,
.sqp-status--uncollectible {
  background: #f5dcd8;
  color: #742a23 !important;
}

.sqp-status--pending,
.sqp-status--on_hold,
.sqp-status--open,
.sqp-status--cancel_at_period_end {
  background: #f7e9ad;
  color: #5d4800 !important;
}

.sqp-status--paused,
.sqp-status--complete,
.sqp-status--archived {
  background: var(--sqp-cream);
  color: var(--sqp-muted) !important;
}

.sqp-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 19px;
  border: 2px solid var(--sqp-ink);
  border-left-width: 8px;
  background: var(--sqp-white);
  color: var(--sqp-ink);
  font-size: 0.94rem;
}

.sqp-alert strong,
.sqp-alert span {
  display: block;
}

.sqp-alert--success { border-left-color: var(--sqp-green); background: var(--sqp-sage); }
.sqp-alert--warning { border-left-color: var(--sqp-yellow); background: #fff8dc; }
.sqp-alert--error { border-left-color: var(--sqp-danger); background: #fff1ef; }
.sqp-alert--info { border-left-color: #477493; background: #edf4f8; }

.sqp-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sqp-green-deep);
  font: 800 0.9rem/1.2 var(--sqp-font);
  text-decoration: underline;
  text-decoration-color: var(--sqp-yellow);
  text-decoration-thickness: 3px;
  cursor: pointer;
}

.sqp-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.sqp-panel-actions,
.sqp-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.sqp-panel-actions {
  justify-content: flex-end;
}

.sqp-progress {
  height: 18px;
  overflow: hidden;
  border: 2px solid var(--sqp-ink);
  background: var(--sqp-cream);
}

.sqp-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sqp-green), var(--sqp-green-deep));
}

.sqp-time-panel > p {
  margin: 14px 0 0;
  color: var(--sqp-muted);
  font-size: 0.9rem;
}

.sqp-time-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

.sqp-time-numbers > div {
  padding: 0 22px;
  border-right: 1px solid var(--sqp-line);
}

.sqp-time-numbers > div:first-child { padding-left: 0; }
.sqp-time-numbers > div:last-child { border-right: 0; }
.sqp-time-numbers span { display: block; color: var(--sqp-muted); font-size: 0.82rem; font-weight: 800; }
.sqp-time-numbers strong { display: block; margin-top: 7px; color: var(--sqp-ink); font: 400 1.9rem/1 var(--sqp-display); }
.sqp-overage { padding: 12px; background: #fff1ef; color: #742a23 !important; }

.sqp-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sqp-mini-list {
  display: grid;
}

.sqp-mini-list > div {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--sqp-line);
}

.sqp-mini-list > div:last-child { border-bottom: 0; }
.sqp-mini-list strong { overflow: hidden; color: var(--sqp-ink); font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.sqp-mini-list small { color: var(--sqp-muted); font-size: 0.78rem; font-weight: 700; }

.sqp-project-dot {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--sqp-green);
  box-shadow: 0 0 0 6px var(--sqp-sage);
}

.sqp-project-dot--on_hold { background: #a07800; box-shadow: 0 0 0 6px #f7e9ad; }
.sqp-project-dot--complete,
.sqp-project-dot--archived { background: var(--sqp-muted); box-shadow: 0 0 0 6px var(--sqp-cream); }

.sqp-file-icon {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 2px solid var(--sqp-ink);
  background: var(--sqp-sage);
  color: var(--sqp-ink);
  font-size: 0.65rem;
  font-weight: 900;
}

.sqp-empty {
  color: var(--sqp-muted);
}

.sqp-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.sqp-quick-actions a {
  display: block;
  min-height: 120px;
  padding: 22px;
  border: 2px solid var(--sqp-ink);
  border-bottom: 7px solid var(--sqp-yellow);
  background: var(--sqp-white);
  color: var(--sqp-ink) !important;
  text-decoration: none !important;
}

.sqp-quick-actions a:hover { background: var(--sqp-sage); }
.sqp-quick-actions strong,
.sqp-quick-actions span { display: block; }
.sqp-quick-actions strong { font-size: 1.05rem; font-weight: 900; }
.sqp-quick-actions span { margin-top: 7px; color: var(--sqp-muted); font-size: 0.84rem; }

.sqp-project-grid,
.sqp-plan-grid,
.sqp-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sqp-project-card,
.sqp-plan-card,
.sqp-template-card {
  padding: 24px;
}

.sqp-project-card {
  border-top: 7px solid var(--sqp-green);
}

.sqp-project-card__top,
.sqp-plan-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.sqp-project-card__top small { color: var(--sqp-muted); font-weight: 800; }
.sqp-project-card > p { font-size: 0.9rem; }
.sqp-project-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sqp-project-meta span { display: block; padding: 11px; background: var(--sqp-cream); color: var(--sqp-muted); font-size: 0.76rem; font-weight: 800; }
.sqp-project-meta b { display: block; margin-top: 5px; color: var(--sqp-ink); font-size: 0.85rem; }

.sqp-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sqp-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sqp-table th,
.sqp-table td {
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--sqp-line);
  text-align: left;
  vertical-align: top;
}

.sqp-table th {
  background: var(--sqp-ink);
  color: var(--sqp-white);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sqp-table td > strong,
.sqp-table td > small,
.sqp-table td > a {
  display: block;
}

.sqp-table td > small {
  margin-top: 4px;
  color: var(--sqp-muted);
  font-size: 0.8rem;
}

.sqp-table-action--danger { color: var(--sqp-danger) !important; }

.sqp-doc-layout { grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr); }
.sqp-security-note { background: var(--sqp-green-deep); color: var(--sqp-white); }
.sqp-security-note h3 { color: var(--sqp-white); }
.sqp-security-note li { border-color: rgba(255, 255, 255, 0.18); }

.sqp-file-field input[type="file"] {
  width: 100%;
  padding: 13px;
  border: 2px dashed var(--sqp-green);
  background: var(--sqp-sage);
  font: 700 0.9rem/1.3 var(--sqp-font);
}

.sqp-file-field b { color: var(--sqp-muted); font-size: 0.83rem; }

.sqp-template-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 17px;
  border-top: 7px solid var(--sqp-green);
}

.sqp-template-number {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 2px solid var(--sqp-ink);
  background: var(--sqp-yellow);
  color: var(--sqp-ink);
  font-weight: 900;
}

.sqp-template-preview {
  width: 100%;
  aspect-ratio: 1.65 / 1;
  object-fit: contain;
  border: 2px solid var(--sqp-ink);
  background: var(--sqp-white);
}

.sqp-template-card small,
.sqp-template-card p { color: var(--sqp-muted); font-size: 0.86rem; }
.sqp-locked { color: var(--sqp-muted); font-size: 0.86rem; font-weight: 800; }
.sqp-disclaimer { padding: 18px; border-left: 7px solid var(--sqp-yellow); background: var(--sqp-cream); font-size: 0.86rem; }

.sqp-billing-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px;
  border: 2px solid var(--sqp-ink);
  background: var(--sqp-white);
}

.sqp-billing-summary > div { flex: 1 1 160px; }
.sqp-billing-summary span,
.sqp-billing-summary strong { display: block; }
.sqp-billing-summary span { color: var(--sqp-muted); font-size: 0.8rem; font-weight: 800; }
.sqp-billing-summary strong { margin-top: 4px; color: var(--sqp-ink); font-size: 1.1rem; }
.sqp-billing-summary form { margin-left: auto; }

.sqp-plan-card { display: grid; align-content: start; gap: 14px; }
.sqp-plan-card.is-current { border-color: var(--sqp-green-deep); background: var(--sqp-sage); box-shadow: 7px 7px 0 var(--sqp-green-deep); }
.sqp-plan-card__top > span { color: var(--sqp-ink); font: 400 1.8rem/1 var(--sqp-display); }
.sqp-plan-card__top > b { padding: 5px 7px; background: var(--sqp-yellow); color: var(--sqp-ink); font-size: 0.72rem; }
.sqp-plan-price { display: block; color: var(--sqp-ink); font: 400 2.8rem/1 var(--sqp-display); }
.sqp-plan-price small { display: block; margin-top: 7px; color: var(--sqp-muted); font: 700 0.78rem/1.3 var(--sqp-font); }
.sqp-plan-card > p { color: var(--sqp-muted); font-size: 0.88rem; }

.sqp-plan-hours {
  display: inline-flex;
  width: fit-content;
  padding: 8px 10px;
  border: 2px solid var(--sqp-ink);
  background: var(--sqp-sage);
  color: var(--sqp-ink);
  font-family: var(--sqp-display);
  font-size: 1.08rem;
  line-height: 1.2;
}

.sqp-plan-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sqp-plan-options > div {
  padding: 11px;
  border: 2px solid var(--sqp-line);
  background: var(--sqp-white);
}

.sqp-plan-options strong,
.sqp-plan-options span,
.sqp-plan-options small {
  display: block;
}

.sqp-plan-options strong {
  color: var(--sqp-ink);
  font: 400 1.55rem/1 var(--sqp-display);
}

.sqp-plan-options span {
  margin-top: 5px;
  color: var(--sqp-muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.sqp-plan-options small {
  margin-top: 7px;
  padding: 4px 6px;
  background: var(--sqp-green-deep);
  color: var(--sqp-white);
  font-size: 0.78rem;
  font-weight: 900;
}

.sqp-plan-actions {
  display: grid;
  gap: 9px;
}

/* Keep portal details sturdy and readable on site and mobile. */
.sqp-plan-card > p,
.sqp-template-card p,
.sqp-disclaimer,
.sqp-quick-actions span,
.sqp-mini-list strong,
.sqp-mini-list small,
.sqp-time-numbers span {
  font-size: 0.95rem;
}

@media (max-width: 520px) {
  .sqp-plan-options {
    grid-template-columns: 1fr;
  }
}

.sqp-definition { margin: 22px 0; }
.sqp-definition > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sqp-line); }
.sqp-definition dt { color: var(--sqp-muted); font-size: 0.82rem; font-weight: 800; }
.sqp-definition dd { margin: 0; overflow-wrap: anywhere; color: var(--sqp-ink); font-weight: 700; }

.sqp-admin {
  max-width: 1450px;
  margin-top: 24px;
}

.sqp-admin > h1 {
  margin: 0 0 26px;
  padding: 0;
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.sqp-admin > .sqp-stat-grid,
.sqp-admin > .sqp-two-column,
.sqp-admin > .sqp-panel,
.sqp-admin > .sqp-alert,
.sqp-admin > form > .sqp-two-column,
.sqp-admin > form > .sqp-panel,
.sqp-admin > form > .sqp-button {
  margin-bottom: 24px;
}

.sqp-admin .sqp-stat { min-height: 145px; }
.sqp-admin-layout { grid-template-columns: minmax(400px, 0.9fr) minmax(340px, 1.1fr); align-items: start; }
.sqp-admin-layout .sqp-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sqp-admin .notice { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 400; }
.sqp-settings-form { gap: 0; }
.sqp-settings-form .sqp-plan-card { background: var(--sqp-paper); }

.sqp-workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px;
  margin: 0 0 24px;
  border: 3px solid var(--sqp-ink);
  background: var(--sqp-green-deep);
  box-shadow: 7px 7px 0 var(--sqp-yellow);
  color: var(--sqp-white);
}

.sqp-workspace-heading h1 {
  margin: 0 0 8px;
  color: var(--sqp-white);
  font-size: clamp(2rem, 3vw, 3rem);
}

.sqp-workspace-heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.sqp-workspace-heading .sqp-card-label {
  background: var(--sqp-white);
}

.sqp-workspace-columns {
  align-items: start;
}

#add-client-time {
  border-top: 8px solid var(--sqp-yellow);
  scroll-margin-top: 45px;
}

.sqp-readiness li {
  border-bottom-color: var(--sqp-line);
  color: var(--sqp-ink);
}

.sqp-readiness li.is-ready::before { background: var(--sqp-green); color: var(--sqp-white); }
.sqp-readiness li.is-missing::before { background: var(--sqp-yellow); content: "!"; }

.sqp-number-list { counter-reset: sqp-steps; }
.sqp-number-list li { padding-left: 48px; border-bottom-color: var(--sqp-line); counter-increment: sqp-steps; }
.sqp-number-list li::before { position: absolute; top: 8px; left: 0; display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid var(--sqp-ink); background: var(--sqp-yellow); content: counter(sqp-steps); font-size: 0.8rem; font-weight: 900; }

/* Front-end staff time recorder. This page deliberately shares the client
   portal design while keeping the working form compact and above the fold. */
.sqp-staff { padding-top: 24px; }
.sqp-staff .sqp-portal-header { min-height: 0; margin-bottom: 20px; padding-block: 24px; }
.sqp-staff .sqp-portal-header h1 { font-size: clamp(2.2rem, 4vw, 3.7rem); }
.sqp-staff-stats { margin-bottom: 20px; }
.sqp-staff-stats--overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sqp-staff-stats .sqp-stat { min-height: 120px; }
.sqp-staff-layout { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); align-items: start; }
.sqp-staff-recorder { border-top: 8px solid var(--sqp-yellow); }
.sqp-staff-guide { position: sticky; top: 110px; }
.sqp-staff-guide .sqp-number-list { margin-top: 10px; }
.sqp-staff-client-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 0 0 16px; }
.sqp-staff-client-heading h2 { margin-bottom: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.sqp-staff-time { display: grid; gap: 7px; }
.sqp-staff-time > span { font-size: 0.88rem; font-weight: 800; }
.sqp-staff-time > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sqp-staff-time label span { font-size: 0.74rem; }
.sqp-staff-time output { padding: 7px 10px; border-left: 4px solid var(--sqp-green); background: var(--sqp-sage); color: var(--sqp-ink); font-size: 0.82rem; font-weight: 900; }
.sqp-staff-filter { display: grid; min-width: 230px; gap: 5px; }
.sqp-staff-filter label { color: var(--sqp-muted); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; }
.sqp-staff-filter select { min-height: 44px; padding: 8px 34px 8px 11px; border: 2px solid var(--sqp-ink); background: var(--sqp-white); color: var(--sqp-ink); font: inherit; font-size: 0.9rem; font-weight: 800; }
.sqp-staff-recent small { display: block; margin-top: 4px; color: var(--sqp-muted); line-height: 1.4; }
.sqp-link-button--danger { color: var(--sqp-danger); }
.sqp-staff-auth .sqp-auth-intro h1 { font-size: clamp(2.25rem, 4.8vw, 4rem); }

@media (max-width: 1100px) {
  .sqp-auth-shell { grid-template-columns: 1fr; }
  .sqp-auth-intro { position: static; }
  .sqp-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sqp-project-grid,
  .sqp-plan-grid,
  .sqp-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sqp-admin-layout { grid-template-columns: 1fr; }
  .sqp-staff-layout { grid-template-columns: 1fr; }
  .sqp-staff-guide { position: static; }
}

@media (max-width: 760px) {
  .sqp-auth,
  .sqp-portal,
  .sqp-admin { font-size: 17px; }
  .sqp-auth { padding: 32px 0 55px; }
  .sqp-auth-intro,
  .sqp-auth-card,
  .sqp-panel { padding: 24px; }
  .sqp-auth h1,
  .sqp-portal-header h1 { font-size: clamp(2.35rem, 10vw, 3.3rem); }
  .sqp-auth h2,
  .sqp-portal h2,
  .sqp-admin h2 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .sqp-form-grid,
  .sqp-stat-grid,
  .sqp-two-column,
  .sqp-doc-layout,
  .sqp-project-grid,
  .sqp-plan-grid,
  .sqp-template-grid,
  .sqp-quick-actions,
  .sqp-section-heading { grid-template-columns: 1fr; }
  .sqp-portal { padding-top: 22px; }
  .sqp-portal-header { min-height: 0; align-items: stretch; flex-direction: column; padding: 25px; }
  .sqp-portal-header .sqp-button { width: 100%; }
  .sqp-tabs { margin-top: 26px; }
  .sqp-tabs a { min-height: 56px; padding-inline: 16px; font-size: 0.94rem; }
  .sqp-stat { min-height: 135px; }
  .sqp-time-numbers { grid-template-columns: 1fr; }
  .sqp-time-numbers > div { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--sqp-line); }
  .sqp-time-numbers > div:last-child { border-bottom: 0; }
  .sqp-panel-heading,
  .sqp-alert,
	.sqp-billing-summary,
	.sqp-workspace-heading { align-items: stretch; flex-direction: column; }
	.sqp-panel-actions { justify-content: flex-start; }
	.sqp-panel-actions .sqp-button,
	.sqp-workspace-actions .sqp-button { width: 100%; }
	.sqp-billing-summary { gap: 16px; }
	.sqp-billing-summary > div { width: 100%; flex: 0 0 auto; }
  .sqp-billing-summary form,
  .sqp-billing-summary .sqp-button { width: 100%; margin-left: 0; }
  .sqp-mini-list > div { grid-template-columns: 35px minmax(0, 1fr); }
  .sqp-mini-list small { grid-column: 2; }
  .sqp-project-meta { grid-template-columns: 1fr; }
  .sqp-definition > div { grid-template-columns: 1fr; gap: 4px; }
  .sqp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sqp-table,
  .sqp-table tbody,
  .sqp-table tr,
  .sqp-table td { display: block; width: 100%; }
  .sqp-table tr { padding: 13px 0; border-bottom: 2px solid var(--sqp-ink); }
  .sqp-table td { display: grid; grid-template-columns: minmax(90px, 0.35fr) minmax(0, 0.65fr); gap: 12px; padding: 7px 0; border: 0; }
  .sqp-table td::before { color: var(--sqp-muted); content: attr(data-label); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
  .sqp-admin .sqp-table td::before { content: none; }
  .sqp-admin .sqp-table td { display: block; }
  .sqp-staff-client-heading,
  .sqp-staff-recent .sqp-panel-heading { align-items: stretch; flex-direction: column; }
  .sqp-staff-client-heading .sqp-button,
  .sqp-staff-filter { width: 100%; }
  .sqp-staff-stats--overview { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .sqp-shell { width: min(calc(100% - 20px), 1240px); }
  .sqp-auth-intro,
  .sqp-auth-card,
  .sqp-panel,
  .sqp-project-card,
  .sqp-plan-card,
  .sqp-template-card { padding: 20px; }
  .sqp-stat-grid { grid-template-columns: 1fr; }
}