:root {
  --forest: #173d34;
  --forest-dark: #102d28;
  --forest-light: #245b4b;
  --mint: #dbece2;
  --accent: #d6b877;
  --paper: #f6f8f5;
  --ink: #1f2f2b;
  --muted: #62716b;
  --border: #e0e7e1;
  --white: #fff;
  --shadow: 0 12px 40px rgba(16, 45, 40, .07);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #c69a46; outline-offset: 3px; }
[hidden] { display: none !important; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.12rem; letter-spacing: -.035em; text-decoration: none; color: var(--forest); }
.brand--light { color: white; }
.brand-mark { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; font-size: 1.55rem; font-weight: 800; line-height: 1; border-radius: .7rem; color: var(--forest); background: #eaf0db; }
.brand-dot { color: #b9974c; }
.eyebrow { font-size: .72rem; text-transform: uppercase; font-weight: 800; letter-spacing: .17em; color: #e6ce9e; }
.eyebrow--green { color: #4c7960; }
h1, h2, h3, p { margin-top: 0; }
h1 { letter-spacing: -.045em; line-height: 1.08; }
h2, h3 { letter-spacing: -.027em; }
p { line-height: 1.62; }
.muted { color: var(--muted); }
.small-note { font-size: .76rem; opacity: .68; }
label { display: block; font-size: .84rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
input[type="text"], input[type="password"] { width: 100%; min-height: 3rem; background: #fff; border: 1px solid #cfdcd3; border-radius: .72rem; padding: .75rem .95rem; color: var(--ink); outline: none; transition: border-color .18s, box-shadow .18s; }
input:focus { border-color: #32785e; box-shadow: 0 0 0 4px #32785e21; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 5rem; }
.password-toggle { position: absolute; right: .42rem; top: 50%; transform: translateY(-50%); padding: .48rem .55rem; background: transparent; border: 0; color: #3b7358; font-size: .8rem; font-weight: 750; }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-top: 1.6rem; min-height: 3.2rem; padding: .77rem 1.1rem; background: var(--forest); color: #fff; font-weight: 750; border: 1px solid var(--forest); border-radius: .72rem; transition: background .18s, transform .18s; }
.primary-button:hover { background: var(--forest-light); }
.primary-button:disabled { opacity: .65; cursor: wait; }
.field-hint { color: var(--muted); font-size: .77rem; margin: .4rem 0 0; }
.alert { padding: .9rem 1rem; border: 1px solid transparent; border-radius: .8rem; font-size: .86rem; line-height: 1.5; margin-bottom: 1.25rem; }
.alert--error { background: #fff0ec; color: #9c362c; border-color: #f6c8be; }
.alert--success { background: #e6f3e8; color: #225b38; border-color: #b6ddbd; }
.alert--notice { background: #fff8de; color: #786029; border-color: #eedb9e; }
.login-body { background: var(--forest-dark); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-info { color: #fff; padding: clamp(2rem, 5vw, 5.2rem); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; background: radial-gradient(circle at 95% 85%, #295647 0, transparent 49%), linear-gradient(160deg, #173f34, #0d2923); }
.login-info:after { content: ""; pointer-events: none; position: absolute; width: 60vw; height: 60vw; border: 1px solid #ffffff13; border-radius: 50%; right: -44vw; top: 10%; }
.login-intro { position: relative; z-index: 1; max-width: 33rem; margin: 5rem 0; }
.login-intro h1 { font-size: clamp(3.2rem, 5vw, 5.8rem); font-weight: 680; margin: 1.2rem 0 1.5rem; }
.login-intro p { font-size: 1.06rem; max-width: 25rem; color: #cbdcd2; }
.landmark { display: flex; align-items: flex-end; gap: .9rem; width: 73%; height: 3.8rem; border-bottom: 1px solid #b1caaf80; opacity: .65; }
.landmark span { width: 16%; border: 1px solid #a8c7b0; border-bottom: 0; border-radius: 120px 120px 0 0; }
.landmark span:nth-child(1) { height: 45%; }.landmark span:nth-child(2) { height: 70%; }.landmark span:nth-child(3) { height: 95%; }.landmark span:nth-child(4) { height: 62%; }
.login-info>.small-note { margin: 1.5rem 0 0; }
.login-panel { background: #fbfcfa; display: grid; place-items: center; padding: 2.25rem; }
.panel-inner { width: min(100%, 25rem); padding: 2rem 0; }
.panel-inner h2 { font-size: 2.35rem; margin: .7rem 0 .6rem; }
.panel-inner>.muted { font-size: .91rem; margin-bottom: 2rem; }
.panel-footer { border-top: 1px solid var(--border); margin-top: 2.1rem; padding-top: 1.3rem; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.install-body { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: linear-gradient(135deg, #edf3ee, #fafbf8); }
.install-card { background: white; border: 1px solid var(--border); border-radius: 1.4rem; padding: clamp(1.3rem, 5vw, 2.7rem); width: min(100%, 33rem); box-shadow: var(--shadow); }
.install-card .brand { margin-bottom: 2.3rem; }.install-card h1 { font-size: 2.25rem; margin: .6rem 0 1rem; }.install-card>.muted { font-size: .9rem; }
.topbar { color: #fff; background: var(--forest); }
.topbar-content { max-width: 77rem; min-height: 5.1rem; margin: auto; padding: .9rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.user-tools { display: flex; align-items: center; gap: 1rem; }
.user-pill { display: inline-flex; align-items: center; gap: .55rem; font-size: .87rem; white-space: nowrap; }.user-dot { width: .48rem; height: .48rem; border-radius: 50%; background: #b8d9a0; }
.role-label { color: #aecfc0; font-size: .76rem; }
.logout-button { background: transparent; color: #e1f0e6; border: 1px solid #ffffff4a; border-radius: .65rem; padding: .58rem .83rem; font-weight: 650; font-size: .8rem; }.logout-button:hover { background: #ffffff17; }
.nav-tabs { background: #fff; box-shadow: 0 1px 0 var(--border); overflow-x: auto; scrollbar-width: thin; }
.nav-tabs-inner { display: flex; margin: auto; max-width: 77rem; padding: 0 1.25rem; gap: .35rem; min-width: max-content; }
.nav-tab { display: inline-flex; justify-content: center; align-items: center; padding: 1.1rem .95rem; min-height: 3.6rem; text-decoration: none; color: #64736d; font-weight: 650; font-size: .91rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-tab:hover { color: var(--forest); }.nav-tab.is-active { color: var(--forest); border-bottom-color: #cfa558; }
.main-content { min-height: calc(100vh - 12rem); max-width: 77rem; margin: auto; padding: clamp(1.2rem, 4vw, 2.6rem) 1.4rem 4rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.page-head h1 { font-size: clamp(2.15rem, 4vw, 3.15rem); margin: .5rem 0 .4rem; }
.page-head p { color: var(--muted); margin-bottom: 0; }
.status-tag { font-size: .75rem; font-weight: 750; white-space: nowrap; border: 1px solid #d3e3d8; background: #eaf3ec; color: #3e765b; border-radius: 100px; padding: .5rem .75rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feature-card { background: white; border: 1px solid var(--border); border-radius: 1.1rem; padding: clamp(1.3rem, 3vw, 2rem); box-shadow: 0 2px 12px rgba(20, 39, 31, .025); }
.feature-card--wide { grid-column: 1 / -1; }
.feature-card--wide:not(.settings-grid *) { min-height: 16rem; }
.feature-card h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: .6rem 0 .5rem; }.feature-card h3 { font-size: 1.3rem; margin: .8rem 0 .55rem; }
.feature-card p { color: var(--muted); font-size: .94rem; max-width: 45rem; margin-bottom: 0; }
.card-kicker { color: #577b66; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.feature-topline { display: flex; justify-content: space-between; align-items: flex-start; }
.card-icon { color: #c99e50; font-size: 2rem; }
.coming-soon { display: inline-block; margin-top: 1.7rem; color: #516759; background: #f0f4ed; border: 1px solid #e0e8d9; padding: .58rem .75rem; border-radius: .58rem; font-size: .79rem; font-weight: 650; }
.settings-grid .feature-card { min-width: 0; }.settings-grid .feature-card h2 { margin-bottom: 1rem; }
.profile-row { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--border); font-size: .82rem; }.profile-row span { color: var(--muted); }.profile-row strong { text-align: right; overflow-wrap: anywhere; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; max-width: 77rem; margin: auto; padding: 0 1.4rem 1.7rem; font-size: .75rem; color: #829087; }
@media (max-width: 850px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-info { min-height: 15rem; padding: 1.4rem 1.3rem; }
  .login-intro { margin: 2.2rem 0 .7rem; }
  .login-intro h1 { font-size: 2.4rem; margin: .7rem 0; }
  .login-intro p { font-size: .88rem; }
  .login-info>.small-note, .landmark { display: none; }
  .login-panel { padding: 1.5rem 1.3rem 3rem; align-items: start; }
  .panel-inner { padding: .4rem 0; }
}
@media (max-width: 590px) {
  .topbar-content { min-height: 4rem; padding: .7rem .85rem; }
  .brand { font-size: .99rem; gap: .45rem; }.brand-mark { width: 1.95rem; height: 1.95rem; font-size: 1.35rem; }
  .user-tools { gap: .5rem; }.user-pill { font-size: .8rem; }.role-label { display: none; }
  .logout-button { padding: .51rem .6rem; font-size: .72rem; }
  .nav-tabs-inner { padding: 0 .45rem; gap: 0; }.nav-tab { padding: .84rem .76rem; font-size: .82rem; min-height: 3.3rem; }
  .main-content { padding: 1.5rem .9rem 3.5rem; }
  .page-head { align-items: flex-start; margin-bottom: 1.4rem; }.page-head h1 { font-size: 2rem; }.page-head p { font-size: .88rem; }
  .status-tag { font-size: .66rem; padding: .4rem .5rem; }
  .dashboard-grid { grid-template-columns: 1fr; gap: .75rem; }.feature-card--wide { grid-column: auto; }.feature-card { padding: 1.2rem; }
  .site-footer { padding: 0 .9rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Sprint 2: koła, obwody i konta, responsywne także na telefonach. */
select, input[type="number"] {
  font: inherit; width: 100%; min-height: 3rem; background: #fff; color: var(--ink);
  border: 1px solid #cfdcd3; border-radius: .72rem; padding: .7rem .9rem;
}
select:focus-visible, input[type="number"]:focus-visible { outline: 3px solid #c69a46; outline-offset: 3px; }
.primary-button--link { text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
.club-switch { display: flex; gap: .4rem; align-items: center; }
.club-switch label { margin: 0; font-size: .75rem; color: #c5dbcf; }
.club-switch select { min-height: 2.3rem; min-width: 9rem; max-width: 15rem; border-color: #93aca0; padding: .4rem .55rem; font-size: .82rem; }
.club-switch-button { background: #fff; border: 1px solid #fff; color: #1c4c3c; border-radius: .5rem; min-height: 2.3rem; padding: .4rem .7rem; font-weight: 700; font-size: .8rem; }
.settings-tabs { display: flex; gap: .45rem; overflow-x: auto; padding: 0 0 1.4rem; margin: -.7rem 0 .25rem; }
.settings-tab { text-decoration: none; white-space: nowrap; padding: .7rem 1rem; border-radius: .75rem; border: 1px solid #d3e0d5; background: white; color: #4a6755; font-size: .87rem; font-weight: 750; }
.settings-tab.is-active { background: #1c493a; color: white; border-color: #1c493a; }
.settings-tab:hover:not(.is-active) { background: #eaf3eb; }
.outline-button { border-radius: .65rem; min-height: 2.3rem; background: white; border: 1px solid #b8d0bf; color: #24553d; padding: .5rem .75rem; font-size: .8rem; font-weight: 750; white-space: nowrap; }
.outline-button:hover { background: #eef5ef; }
.outline-button--danger { border-color: #efd2c9; color: #9c3b30; }
.outline-button--danger:hover { background: #fff2ee; }
.compact-list { margin-top: 1rem; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.compact-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.compact-item strong { font-size: .92rem; }
.item-meta { font-size: .8rem; color: var(--muted); margin-top: .3rem; line-height: 1.45; }
.item-actions, .member-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.mini-tag { padding: .3rem .55rem; border-radius: .55rem; background: #eaf3ed; color: #336c4b; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.mini-tag--inactive { background: #f5eae6; color: #9e4b3b; }
.empty-state { background: #f5f8f3; padding: 1.1rem; border-radius: .75rem; margin-top: 1rem; color: #637469; font-size: .87rem; border: 1px dashed #d0dfcf; }
.district-form { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(8rem, .6fr) auto; align-items: end; gap: .75rem; padding-top: 1.3rem; }
.district-form label { margin-top: 0; }
.district-form .primary-button { margin: 0; align-self: end; min-width: 9rem; justify-content: center; }
.member-card { border: 1px solid #dae5dd; border-radius: .9rem; margin: .9rem 0; padding: 1.1rem; background: #fbfdfa; }
.member-head { display: flex; justify-content: space-between; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; }
.member-head h3 { margin: 0; font-size: 1.03rem; }
.member-actions { justify-content: flex-start; }
.member-role-form { display: flex; align-items: center; gap: .4rem; }
.member-role-form select { min-height: 2.3rem; width: auto; padding: .4rem .5rem; font-size: .8rem; }
.password-reset { margin-top: .9rem; color: #38664e; font-size: .83rem; }
.password-reset summary { cursor: pointer; font-weight: 750; }
.password-reset form { padding-top: .5rem; max-width: 26rem; }
.password-reset form .outline-button { margin-top: .6rem; }
.inline-action { margin-top: 1.4rem; }
.notice-compact { background: #f3f7ed; padding: .9rem; margin-top: 1.1rem; border-radius: .65rem; color: #5a6c5e; font-size: .81rem; line-height: 1.6; }
@media (max-width: 900px) {
  .topbar-content { flex-wrap: wrap; }
  .topbar-actions { flex: 1; min-width: 100%; justify-content: space-between; }
}
@media (max-width: 650px) {
  .topbar-actions { gap: .6rem; }
  .club-switch { max-width: 100%; flex: 1 1 100%; }
  .club-switch select { max-width: none; flex: 1; min-width: 0; }
  .club-switch label { display: none; }
  .club-switch-button { padding: .4rem .65rem; }
  .settings-tabs { margin-top: -.15rem; gap: .35rem; }
  .settings-tab { font-size: .78rem; padding: .65rem .65rem; }
  .district-form { grid-template-columns: 1fr; }
  .district-form .primary-button { margin-top: 0; width: 100%; }
  .compact-item { align-items: flex-start; }
  .district-item { flex-direction: column; align-items: stretch; }
  .item-actions { justify-content: space-between; }
  .member-head { flex-direction: column; }
  .member-role-form { width: 100%; flex-wrap: wrap; }
  .member-role-form select { flex: 1; }
  .member-actions { align-items: stretch; }
  .member-actions form { max-width: 100%; }
  .member-actions button { white-space: normal; }
}