:root{
  --bg:#f5f7fb; --card:#fff; --text:#0f172a; --muted:#667085; --line:#e6e9ef;
  --brand:#0f172a; --shadow:0 8px 24px rgba(15,23,42,.06); --radius:16px;
  --accent:#1d4ed8;
}

/* ========== Reset / base ========== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial;
}
a{ color:inherit; text-decoration:none }

/* ========== Top bar ========== */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(245,247,251,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1440px; margin:0 auto; padding:6px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand-wrap{ display:flex; align-items:center; gap:12px }
.brand img{ height:58px; display:block }
.brand-title{ font-weight:800; font-size:18px; color:var(--brand) }

.top-right{ display:flex; align-items:center; gap:14px; color:var(--muted) }
.tag{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#eef2f7; border:1px solid var(--line);
}
.avatar{
  width:40px; height:40px; border-radius:999px;
  background:#dbeafe; color:#1e3a8a;
  display:grid; place-items:center; font-weight:700;
  border:1px solid #c7d2fe;
}
.account{ position:relative }
.account-trigger{ display:flex; align-items:center; gap:14px; cursor:pointer }
.account .avatar{ flex:0 0 auto }
.user-meta{ display:flex; flex-direction:column; line-height:1.1 }

/* Dropdown */
.menu-panel{
  position:absolute; right:0; top:50px; width:288px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,.16);
  overflow:hidden; display:none; z-index:40;
}
.menu-panel.open{ display:block }
.menu-head{
  display:flex; gap:12px; align-items:center;
  padding:12px 12px 10px;
  background:linear-gradient(180deg,#fff,#fafbfe);
}
.menu-head .avatar-xl{
  width:46px; height:46px; border-radius:999px;
  background:#60a5fa; color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:18px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.menu-head .name{ font-weight:800; font-size:16px; line-height:1.2 }
.menu-head .email{ color:var(--muted); font-size:11px; margin-top:4px }
.menu-head .badge-small{
  display:inline-block; margin-top:6px; font-size:10px; padding:3px 7px;
  border-radius:999px; background:#f2f4f7; border:1px solid var(--line);
  color:#0f172a; font-weight:600;
}
.menu-section{ border-top:1px solid var(--line); padding:6px 0; background:#fff }
.menu-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 12px; color:#0f172a;
}
.menu-item:hover{ background:#f7f9fc }
.menu-footer{ border-top:1px solid var(--line); background:#fff }
.menu-logout{
  display:flex; align-items:center; gap:12px; padding:11px 12px; color:#0f172a;
}
.menu-logout:hover{ background:#f7f9fc }

/* ========== Layout ========== */
.container{
  flex:1;
  width:100%;
  max-width:1440px;
  margin:24px auto 64px;
  padding:0 24px;
}
.page-title{ font-size:28px; font-weight:800; margin:8px 0 24px }

/* Grid dwukolumnowy — lewa karta profilu + prawa zawartość */
.grid{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:24px;
  align-items:start;
}

/* ========== Cards ========== */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
.card-title{ font-weight:700; font-size:18px; margin:0 0 14px }
.center{ text-align:center }
.muted{ color:var(--muted) }

/* ========== Buttons ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; border:1px solid var(--line);
  background:#fff; font-weight:600; cursor:pointer;
  font-size:14px; font-weight:500; line-height:1; font-family:inherit;
}
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent) }
.btn.small{ height:32px; padding:0 12px; font-size:13px }
button.btn{ -webkit-appearance:none; appearance:none; height:40px; padding:0 14px; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:12px }

/* ========== Profiles / lists ========== */
.main-badge{
  display:inline-block; margin-left:8px; font-size:11px; padding:4px 8px;
  border-radius:999px; background:#e0f2fe; border:1px solid #7dd3fc;
  color:#075985; font-weight:600;
}
.profiles-list{ margin-top:12px; border-top:1px solid var(--line) }
.profile-item{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line) }

/* ========== Filepicker ========== */
.filepicker-wrap{ display:flex; flex-direction:column; gap:6px }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.filepicker{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  overflow:hidden; min-height:40px;
}
.filepicker-name{
  flex:1; padding:10px 12px; color:#667085; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.filepicker-btn{
  flex:0 0 auto; padding:10px 14px; font-weight:600; border-left:1px solid var(--line);
  background:#f8fafc; cursor:pointer; user-select:none;
}
.filepicker:hover{ border-color:#cdd3df }
.filepicker:focus-within{ box-shadow:0 0 0 3px rgba(59,130,246,.2); border-color:#3b82f6 }

/* ========== Footer ========== */
.site-footer{
  border-top:1px solid var(--line);
  background:#fff;
}
.site-footer .footer-inner{
  max-width:1440px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--muted); font-size:14px;
}
.footer-nav a{ color:var(--muted); margin-left:14px }
.footer-nav a:hover{ color:var(--text) }

/* ========== Responsive ========== */
@media(max-width:1024px){
  .grid{ grid-template-columns:1fr }
  .container{ padding:0 16px }
  .topbar-inner{ padding:6px 16px }
}
@media(max-width:600px){
  .container{ padding:0 12px; margin-top:16px }
}

/* ========== Shared components (ujednolicenie paneli) ========== */

/* Alerty / komunikaty flash */
.alert{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  font-size:14px; display:flex; gap:10px; align-items:flex-start;
  background:#fff; margin-bottom:12px;
}
.alert.ok{   border-color:#bbf7d0; background:#f0fdf4; color:#14532d }
.alert.err{  border-color:#fecaca; background:#fff1f2; color:#7f1d1d }
.alert.info{ border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a }
.alert.warn{ border-color:#fde68a; background:#fffbeb; color:#7c2d12 }

/* Pasek tytułu z alertami po prawej */
.title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.title-row .right{ display:flex; gap:10px; align-items:center }

/* Karta boczna profilu (lewa kolumna .grid) */
.profile-avatar{
  width:120px; height:120px; border-radius:999px;
  background:#eef2ff; color:#3730a3;
  display:grid; place-items:center;
  font-weight:800; font-size:42px;
  border:1px solid #c7d2fe; margin:8px auto 12px;
}
.profile-name{ font-weight:700; font-size:18px }
.role-badge{
  display:inline-block; margin-top:10px;
  font-size:12px; font-weight:600; color:#3730a3;
  background:#eef2ff; border:1px solid #c7d2fe;
  border-radius:999px; padding:4px 12px;
}
.back-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px }

/* Karty statystyk */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.stat-row.cols4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:700px){ .stat-row,.stat-row.cols4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px){ .stat-row,.stat-row.cols4{ grid-template-columns:1fr } }
.stat-card{ border:1px solid var(--line); border-radius:14px; padding:16px; background:#fff }
.stat-num{ font-size:28px; font-weight:800; color:var(--accent); line-height:1; margin-bottom:4px }
.stat-num.warn{ color:#d97706 }
.stat-lbl{ font-size:12px; color:var(--muted) }

/* Wiersze funkcji na dashboardach */
.feature{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--line) }
.feature:last-child{ border-bottom:none }
.feature h3{ margin:0 0 4px; font-size:15px }
.feature p{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; max-width:460px }

/* Odznaka "wkrótce" */
.soon{
  display:inline-block; font-size:11px; font-weight:700;
  color:#92400e; background:#fef3c7; border:1px solid #fde68a;
  border-radius:99px; padding:2px 9px; margin-left:8px;
}

/* Przełącznik ról w menu konta */
.menu-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:8px 12px 4px }
.menu-panel form{ margin:0 }
button.menu-item{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin:0; padding:11px 12px;
  background:none; border:0; border-radius:0;
  cursor:pointer; font:inherit; color:#0f172a; text-align:left;
}
button.menu-item:hover{ background:#f7f9fc }
.menu-item.role-current{ background:#f0f6ff; cursor:default; font-weight:700 }
.menu-item.role-current:hover{ background:#f0f6ff }
.menu-item .role-check{ color:var(--accent); font-weight:800; font-size:14px }

/* Karta boczna klubu (partials/club_side.php) */
.club-info-row{ display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:10px; background:#f8fafc; border:1px solid #f1f5f9; margin-bottom:6px }
.club-info-icon{ flex:0 0 24px; width:24px; height:24px; border-radius:6px; background:#eef2ff; border:1px solid #c7d2fe; color:var(--accent); display:grid; place-items:center }
.club-avatar{ width:64px; height:64px; border-radius:50%; background:#eef2ff; color:#3730a3; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; border:2px solid #c7d2fe; margin:0 auto 12px }
.tag.club{ border-color:#c7d2fe; background:#eef2ff; color:#3730a3 }

/* Nawigacja podstron w lewej kolumnie */
.side-nav{ padding:8px; margin-top:14px }
.side-nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  font-size:14px; font-weight:500; color:var(--text);
  text-decoration:none; transition:background .12s;
}
.side-nav a:hover{ background:#f1f5f9 }
.side-nav a.active{ background:#eef2ff; color:var(--accent); font-weight:700 }
.side-nav a svg{ flex:0 0 16px; opacity:.55 }
.side-nav a.active svg{ opacity:1 }

/* Dropzone — strefa wgrywania plików (przeciągnij lub kliknij) */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:26px 18px; border:2px dashed #c7d2fe; border-radius:14px;
  background:#f8faff; cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s;
}
.dropzone:hover{ border-color:#93c5fd; background:#f0f6ff }
.dropzone.drag{ border-color:var(--accent); background:#e8f1ff }
.dropzone.ready{ border-style:solid; border-color:#86efac; background:#f0fdf4 }
.dropzone-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#eef2ff; border:1px solid #c7d2fe; color:var(--accent);
}
.dropzone.ready .dropzone-icon{ background:#dcfce7; border-color:#86efac; color:#15803d }
.dropzone-title{ font-size:14px; font-weight:600; color:#0f172a }
.dropzone-hint{ font-size:12px; color:var(--muted) }
.dropzone-file{ font-size:13px; font-weight:600; color:#15803d; word-break:break-all }

/* Nawigacja sekcji (office/admin) — wspólne */
.nav-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:10px 12px 4px }
.nav-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-radius:10px; font-size:14px; font-weight:500; color:var(--text); text-decoration:none; transition:background .12s }
.nav-item:hover{ background:#f1f5f9 }
.nav-item.active{ background:#eef2ff; color:var(--accent); font-weight:700 }
.nav-icon{ width:16px; height:16px; opacity:.5 }
.nav-item.active .nav-icon{ opacity:1 }
.nav-cnt{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; background:#e2e8f0; color:#475569 }
.nav-item.active .nav-cnt{ background:var(--accent); color:#fff }
.nav-divider{ height:1px; background:var(--line); margin:6px 4px }

/* Skip-link (WCAG 2.4.1) — widoczny tylko przy nawigacji klawiaturą */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:#000080; color:#fff; padding:10px 18px; border-radius:0 0 10px 0;
  font-size:14px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; outline:3px solid #93c5fd; }

/* Wizard: pasek postępu (stepper) — wspólny dla kreatorów licencji */
.progress{display:flex;align-items:center;justify-content:center;gap:8px 10px;flex-wrap:wrap;padding-bottom:4px}
.progress-step{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;flex:0 0 auto}
.progress-dot{width:14px;height:14px;border-radius:999px;background:transparent;border:2px solid #3b82f6;box-sizing:border-box;position:relative;flex:0 0 auto}
.progress-line{height:2px;background:#3b82f6;opacity:.6;border-radius:2px;flex:1 1 14px;min-width:8px;max-width:40px}
.progress-step.is-active .progress-dot{box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.progress-step.is-done .progress-dot{background:#22c55e;border-color:#22c55e;box-shadow:none}
.progress-step.is-done .progress-dot::after{content:"\2713";position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);font-size:10px;color:#fff;font-weight:700}
.progress-step.is-done + .progress-line{background:#22c55e;opacity:.9}
@media(min-width:1024px){.progress{gap:10px 12px}.progress-step{font-size:14px;gap:8px}.progress-line{max-width:44px}.progress-dot{width:16px;height:16px}}
@media(max-width:560px){.progress-step{font-size:11px;gap:5px}.progress-line{max-width:22px;min-width:6px}}