:root {
--bg: #f6f1e8;
--paper: #fffaf1;
--ink: #1f2937;
--muted: #6b7280;
--line: #e4d8c6;
--accent: #1f7a5c;
--accent-2: #d97706;

--physical: #dc2626;
--emotional: #2563eb;
--intellectual: #1f7a5c;

--shadow: 0 18px 45px rgba(31, 41, 55, .10);
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background:
radial-gradient(circle at top left, rgba(31, 122, 92, .12), transparent 34rem),
radial-gradient(circle at top right, rgba(217, 119, 6, .12), transparent 28rem),
var(--bg);
line-height: 1.55;
}

a {
color: inherit;
}

.site-header,
.site-footer {
max-width: 1180px;
margin: 0 auto;
padding: 1.1rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.site-header nav {
display: flex;
gap: 1rem;
}

.site-header nav a,
.brand {
text-decoration: none;
font-weight: 750;
}

.brand {
color: var(--accent);
font-size: 1.2rem;
letter-spacing: .02em;
}

.wrap {
width: min(1120px, calc(100% - 2rem));
margin: 0 auto 3rem;
}

.hero {
padding: 3rem 0 1.5rem;
text-align: center;
}

.eyebrow {
margin: 0 0 .4rem;
color: var(--accent-2);
text-transform: uppercase;
font-weight: 800;
letter-spacing: .12em;
font-size: .82rem;
}

h1 {
margin: 0 auto;
max-width: 820px;
font-size: clamp(2rem, 5vw, 4.2rem);
line-height: 1.02;
}

h2,
h3 {
margin-top: 0;
}

.lead {
max-width: 780px;
margin: 1rem auto 0;
color: #374151;
font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.panel {
background: rgba(255, 250, 241, .86);
border: 1px solid var(--line);
border-radius: 26px;
padding: clamp(1rem, 3vw, 1.6rem);
box-shadow: var(--shadow);
margin: 1rem 0;
}

.form-panel form {
display: grid;
gap: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(220px, .8fr) minmax(220px, .8fr);
  gap: 1rem;
  align-items: end;
}

.date-parts-field {
  min-width: 0;
}

.form-grid > label {
  min-width: 0;
}

label span,
.date-main-label {
display: block;
font-weight: 700;
margin: 0 0 .35rem;
}

input[type="date"],
.date-parts select {
width: 100%;
min-height: 3.15rem;
padding: .85rem .9rem;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
font: inherit;
color: var(--ink);
box-shadow: 0 8px 20px rgba(31, 41, 55, .05);
outline: none;
}

input[type="date"]:focus,
.date-parts select:focus {
border-color: rgba(31, 122, 92, .55);
box-shadow:
0 0 0 4px rgba(31, 122, 92, .12),
0 10px 24px rgba(31, 41, 55, .08);
}

.date-parts-field {
display: block;
min-width: 0;
}

.date-main-label {
margin-bottom: .55rem;
}

.date-parts {
display: grid;
grid-template-columns: .85fr 1.15fr .85fr;
gap: .6rem;
}

.date-parts label {
position: relative;
display: block;
min-width: 0;
}

.date-parts label span {
display: block;
margin-bottom: .35rem;
color: var(--muted);
font-size: .86rem;
font-weight: 700;
}

.date-parts select {
appearance: none;
-webkit-appearance: none;
padding-right: 2.25rem;
cursor: pointer;
}

.date-parts label::after {
content: "▾";
position: absolute;
right: .85rem;
bottom: .83rem;
color: var(--accent-2);
font-size: .8rem;
line-height: 1;
pointer-events: none;
}

.date-parts select option {
color: var(--ink);
background: #fff;
}

.date-parts select option:disabled {
color: #9ca3af;
}

.check {
display: flex;
align-items: center;
gap: .55rem;
min-height: 3.2rem;
}

.check input {
width: 1.15rem;
height: 1.15rem;
}

.check span {
margin: 0;
}

button {
justify-self: start;
border: 0;
background: var(--accent);
color: #fff;
padding: .9rem 1.25rem;
border-radius: 999px;
font: inherit;
font-weight: 800;
cursor: pointer;
box-shadow: 0 12px 28px rgba(31, 122, 92, .23);
}

button:hover {
filter: brightness(.95);
}

.error {
color: #991b1b;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: 16px;
padding: .8rem 1rem;
}

.result-summary strong {
color: var(--accent);
}

.chart-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
margin-bottom: .7rem;
}

.chart-head p,
.muted {
color: var(--muted);
}

canvas {
width: 100%;
height: auto;
display: block;
border-radius: 18px;
background: #fff;
border: 1px solid var(--line);
}

.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 1rem 0;
}

.card {
background: rgba(255, 255, 255, .76);
border: 1px solid var(--line);
border-top: 6px solid var(--accent);
border-radius: 22px;
padding: 1.1rem;
box-shadow: var(--shadow);
}

.card.physical {
border-top-color: var(--physical);
}

.card.emotional {
border-top-color: var(--emotional);
}

.card.intellectual {
border-top-color: var(--intellectual);
}

.card .big {
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1;
font-weight: 850;
margin: .2rem 0 .7rem;
}

.derived-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .8rem;
}

.derived-item {
display: grid;
gap: .2rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 1rem;
}

.derived-item span {
font-size: 2rem;
font-weight: 850;
color: var(--accent);
}

.derived-item small {
color: var(--muted);
}

.note {
font-size: .98rem;
}

.site-footer {
color: var(--muted);
border-top: 1px solid var(--line);
}

/* Sekcja powiązanych projektów */

.bio-related-sites {
margin-top: 3rem;
padding: 3rem 1rem 2.5rem;
background:
radial-gradient(circle at 20% 0%, rgba(255, 111, 0, .20), transparent 36%),
radial-gradient(circle at 80% 20%, rgba(255, 42, 42, .16), transparent 34%),
linear-gradient(135deg, rgba(70, 5, 5, .92), rgba(24, 2, 8, .96));
border-top: 1px solid rgba(255, 255, 255, .08);
}

.bio-related-inner,
.bio-footer-inner {
max-width: 1120px;
margin: 0 auto;
}

.bio-kicker {
margin: 0 0 .4rem;
color: #ffb35c;
font-size: .9rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}

.bio-related-sites h2 {
margin: 0 0 1.5rem;
color: #fff;
font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.bio-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}

.bio-related-card {
display: block;
min-height: 100%;
padding: 1.25rem;
border-radius: 1.25rem;
color: #fff;
text-decoration: none;
background: rgba(255, 255, 255, .075);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 16px 45px rgba(0, 0, 0, .22);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.bio-related-card:hover,
.bio-related-card:focus-visible {
transform: translateY(-3px);
background: rgba(255, 255, 255, .11);
border-color: rgba(255, 180, 90, .65);
}

.bio-related-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
margin-bottom: .85rem;
border-radius: 999px;
background: rgba(255, 128, 32, .16);
border: 1px solid rgba(255, 178, 93, .42);
font-size: 1.35rem;
}

.bio-related-title {
display: block;
margin-bottom: .45rem;
color: #fff;
font-size: 1.08rem;
font-weight: 800;
}

.bio-related-text {
display: block;
color: rgba(255, 255, 255, .78);
line-height: 1.55;
font-size: .96rem;
}

/* Stopka */

.bio-site-footer {
padding: 1.6rem 1rem 1.9rem;
color: rgba(255, 255, 255, .76);
background: #160207;
border-top: 1px solid rgba(255, 255, 255, .08);
}

.bio-footer-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem 2rem;
align-items: start;
}

.bio-footer-brand strong {
display: block;
color: #fff;
font-size: 1.1rem;
}

.bio-footer-brand span {
display: block;
margin-top: .2rem;
font-size: .92rem;
color: rgba(255, 255, 255, .62);
}

.bio-footer-links {
display: flex;
flex-wrap: wrap;
gap: .75rem 1rem;
justify-content: flex-end;
}

.bio-footer-links a,
.bio-footer-note a {
color: #ffbd72;
text-decoration: none;
}

.bio-footer-links a:hover,
.bio-footer-note a:hover {
text-decoration: underline;
}

.bio-footer-note {
grid-column: 1 / -1;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, .08);
font-size: .9rem;
line-height: 1.55;
}

.bio-footer-note p {
margin: .35rem 0;
}

/* Responsywność */

@media (max-width: 900px) {
.form-grid {
grid-template-columns: 1fr;
}

button {
width: 100%;
}
}

@media (max-width: 820px) {
.site-header {
align-items: flex-start;
}

.cards,
.derived-grid,
.bio-related-grid {
grid-template-columns: 1fr;
}

.chart-head {
display: block;
}

.bio-footer-inner {
grid-template-columns: 1fr;
}

.bio-footer-links {
justify-content: flex-start;
}
}

@media (max-width: 700px) {
.date-parts {
grid-template-columns: 1fr;
}

.date-parts select {
min-height: 3.25rem;
}
}
/* Poprawka układu formularza biorytmu */

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
  gap: 1rem;
  align-items: end;
}

.date-parts-field {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
}

.date-main-label {
  display: block;
  margin: 0 0 .55rem;
  font-weight: 700;
}

.date-parts {
  display: grid;
  grid-template-columns: .9fr 1.2fr .9fr;
  gap: .65rem;
}

.date-parts label {
  position: relative;
  display: block;
  min-width: 0;
}

.date-parts label span {
  display: block;
  margin: 0 0 .35rem;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}

.date-parts select {
  width: 100%;
  min-height: 3.15rem;
  padding: .85rem 2.25rem .85rem .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(31, 41, 55, .05);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.date-parts select:focus {
  border-color: rgba(31, 122, 92, .55);
  box-shadow:
    0 0 0 4px rgba(31, 122, 92, .12),
    0 10px 24px rgba(31, 41, 55, .08);
}

.date-parts label::after {
  content: "▾";
  position: absolute;
  right: .85rem;
  bottom: .83rem;
  color: var(--accent-2);
  font-size: .8rem;
  line-height: 1;
  pointer-events: none;
}

.date-parts select option {
  color: var(--ink);
  background: #fff;
}

.date-parts select option:disabled {
  color: #9ca3af;
}

.form-grid > label {
  min-width: 0;
}

@media (max-width: 820px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .date-parts {
    grid-template-columns: 1fr;
  }
}