:root{
  --bg:#f4f8fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#f0f6fa;
  --line:#e2ecf3; --line2:#cfdde8; --ink:#1f3147; --ink2:#33485f; --muted:#7891a8;
  --muted2:#647d96;
  --green:#10b981; --green-d:#0e9b6e; --green-l:#d6f6ec;
  --sky:#2bb3ff; --sky-d:#1690d6; --sky-l:#dcf1ff;
  --sun:#ffc23c; --sun-d:#f0a818; --sun-l:#fff2d4;
  --coral:#ff6b6b; --coral-d:#e85555; --coral-l:#ffe2e2;
  --purple:#8b6dff; --purple-l:#ece6ff;
  --shadow:0 4px 16px rgba(31,49,71,.08); --shadow-lg:0 10px 30px rgba(31,49,71,.12);
  color-scheme:only light;
}
/* === 12 MOTYWÓW (akcent wiodący = rodzina --green*) === */
[data-theme="szmaragd"]{--green:#10b981;--green-d:#0e9b6e;--green-l:#d6f6ec;--accent2-l:#dcf1ff;}
[data-theme="blekit"]{--green:#2bb3ff;--green-d:#1690d6;--green-l:#dcf1ff;--accent2-l:#e7f7ff;}
[data-theme="granat"]{--green:#3046c9;--green-d:#1d2a86;--green-l:#dde3ff;--accent2-l:#e8ecff;}
[data-theme="fiolet"]{--green:#e89b78;--green-d:#c56a44;--green-l:#fbeadd;--accent2-l:#fdf2ea;}
[data-theme="roz"]{--green:#ec4899;--green-d:#d12d80;--green-l:#ffe0f0;--accent2-l:#ffe8f3;}
[data-theme="bordo"]{--green:#a82f4e;--green-d:#861d39;--green-l:#ffdbe4;--accent2-l:#ffe6ec;}
[data-theme="pomarancz"]{--green:#ff6a00;--green-d:#d65600;--green-l:#ffcca3;--accent2-l:#ffe2cc;}
[data-theme="turkus"]{--green:#1f8bff;--green-d:#0a63d8;--green-l:#d4e8ff;--accent2-l:#e3f1ff;}
[data-theme="oliwka"]{--green:#84a015;--green-d:#6c850e;--green-l:#eaf4c5;--accent2-l:#f0f7d6;}
[data-theme="grafit"]{--green:#64748b;--green-d:#4a5a70;--green-l:#dde5ee;--accent2-l:#e8eef5;}
[data-theme="zloto"]{--green:#d4a017;--green-d:#9d7610;--green-l:#fdf2cc;--accent2-l:#fdf2cc;}
[data-theme="braz"]{--green:#7a4a2a;--green-d:#5c3620;--green-l:#f1e2d3;--accent2-l:#f1e2d3;}
[data-theme="czarny"]{--green:#2b2b2b;--green-d:#111111;--green-l:#e3e3e3;--accent2-l:#ededed;}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  background:
    radial-gradient(1450px 680px at 85% -5%, var(--green-l), transparent 68%),
    radial-gradient(1250px 630px at -5% 10%, var(--green-l), transparent 63%),
    radial-gradient(1170px 680px at 15% 105%, var(--green-l), transparent 63%),
    radial-gradient(1260px 680px at 95% 95%, var(--green-l), transparent 63%),
    var(--bg);
  color:var(--ink);font-family:'Nunito',system-ui,sans-serif;min-height:100vh;overflow-x:hidden;
}
.app{min-height:100vh;display:flex;flex-direction:column;}
.container{max-width:1080px;width:100%;margin:0 auto;padding:22px 18px 70px;}
a{color:var(--sky-d);}

/* ===== HEADER ===== */
.hdr{background:#fff;border-bottom:2px solid var(--line);position:sticky;top:0;z-index:30;box-shadow:0 4px 20px rgba(31,49,71,.06);}
.hdr-inner{max-width:1080px;margin:0 auto;padding:14px 18px 0;display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.brand{display:flex;align-items:center;gap:13px;flex-wrap:wrap;}
.brand-logo{width:48px;height:48px;flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(16,185,129,.3));}
.brand h1{font-family:'Fredoka',sans-serif;font-weight:700;letter-spacing:.5px;font-size:30px;line-height:1;background:linear-gradient(100deg,var(--green),var(--sky-d) 60%,var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hdr-clock{font-family:'Nunito';font-size:13px;font-weight:600;color:var(--muted2);background:var(--panel2);padding:6px 12px;border-radius:18px;border:1px solid var(--line);white-space:nowrap;}
.next-match-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(120deg,var(--sky-l),var(--green-l));border:1px solid var(--green);border-radius:14px;padding:11px 16px;margin-bottom:14px;font-family:'Nunito';font-weight:700;color:var(--ink);}
.next-match-bar.soon{background:linear-gradient(120deg,#ffe1e1,#fff0f0);border-color:#f87171;animation:pulse 1.5s infinite;}
.viewing-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--purple-l);border:1px solid var(--purple);border-radius:14px;padding:10px 16px;margin-bottom:14px;font-family:'Nunito';font-size:14px;color:var(--ink);}

/* Podium - jednolite kolory dla 1/2/3 miejsca (rankingi, HoF, profile) */
.podium-1{background:linear-gradient(90deg,#ffd86b,#e8a91a) !important;}
.podium-2{background:linear-gradient(90deg,#f0f2f7,#dfe3ec) !important;}
.podium-3{background:linear-gradient(90deg,#f5cba6,#e0a070) !important;}
.podium-1-solid{background:linear-gradient(135deg,#ffd86b,#e8a91a);border:2px solid #b87f0a;}
.podium-2-solid{background:linear-gradient(135deg,#f0f2f7,#dfe3ec);border:2px solid #8c9bb3;}
.podium-3-solid{background:linear-gradient(135deg,#f5cba6,#e0a070);border:2px solid #a8632c;}
.sync-dot{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted2);font-weight:700;}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);}
.dot.on{background:#10b981;box-shadow:0 0 7px #10b981;}
.dot.off{background:#e85555;box-shadow:0 0 7px #ff6b6b;}
.edit-pill{font-weight:800;font-size:13px;padding:8px 14px;border-radius:22px;cursor:pointer;border:2px solid var(--green);background:var(--green-l);color:var(--green-d);transition:all .15s;font-family:'Nunito';}
.edit-pill.unlocked{background:var(--green);border-color:var(--green-d);color:#fff;}
.edit-pill:hover{transform:translateY(-1px);}

.ed-switch{display:flex;align-items:center;}
.ed-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1px solid var(--green);
  border-radius:18px;
  padding:6px 32px 6px 32px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8ba0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") 10px center no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") right 10px center no-repeat,
    linear-gradient(180deg, var(--green-l) 0%, #fff 100%);
  color:var(--ink);
  font-family:'Nunito';font-weight:700;font-size:13px;
  cursor:pointer;
  transition:all .15s;
  box-shadow:0 1px 2px rgba(31,49,71,.05);
}
.ed-select:hover{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8ba0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") 10px center no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") right 10px center no-repeat,
    var(--green-l);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.ed-select:focus{outline:none;border-color:var(--green-d);box-shadow:0 0 0 3px var(--green-l);}

.nav{display:flex;gap:3px;margin-top:13px;flex-wrap:wrap;align-items:center;max-width:1080px;margin-left:auto;margin-right:auto;padding:0 18px;}
.nav-btn{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;background:transparent;color:var(--muted2);border:none;padding:10px 15px;cursor:pointer;border-radius:11px 11px 0 0;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap;}
.nav-btn:hover{color:var(--ink);background:var(--panel2);}
.nav-btn.active{color:var(--green-d);border-bottom-color:var(--green);background:var(--green-l);}
.nav-btn.nav-admin{font-size:13px;}
.nav-btn.nav-admin:hover{color:var(--sky-d);}
.nav-btn.nav-admin.active{color:var(--sky-d);border-bottom-color:var(--sky);background:var(--sky-l);}
.nav-divider{display:inline-block;width:1px;height:24px;background:var(--line2);margin:0 10px;align-self:center;opacity:.7;}

/* ===== CARDS ===== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow);}
.card-h{font-family:'Fredoka',sans-serif;font-weight:600;font-size:21px;margin-bottom:15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--ink);}
.card-h .badge{background:var(--green-l);color:var(--green-d);border:1px solid var(--green);font-size:12px;padding:3px 10px;border-radius:20px;font-weight:800;}
.card-h.sm{font-size:18px;}
/* Centrum (dashboard) - wszystko w jednej karcie z subtelnymi separatorami */
.centrum-card{padding:8px 22px;}
.centrum-section{padding:18px 0;}
.centrum-section + .centrum-section{border-top:1px solid var(--line);}
.centrum-h{font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;margin:0 0 12px;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.centrum-phase{font-family:'Fredoka',sans-serif;font-weight:700;font-size:26px;color:var(--green-d);text-align:center;letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase;}
.profile-section{margin-bottom:18px;}
.profile-section + .profile-section{border-top:1px solid var(--line);padding-top:18px;}
.profile-section-h{font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;color:var(--muted2);margin-bottom:10px;text-transform:uppercase;letter-spacing:.6px;}

/* ===== FORM ===== */
.inp,.ta,select.inp{background:#fff;border:2px solid var(--line);color:var(--ink);border-radius:11px;padding:10px 13px;font-size:15px;font-family:'Nunito';font-weight:600;outline:none;transition:all .15s;}
.inp:focus,.ta:focus,select.inp:focus{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-l);}
.inp.full{width:100%;}
.ta{width:100%;resize:vertical;line-height:1.5;font-family:ui-monospace,Menlo,monospace;font-size:13.5px;font-weight:400;}
.lbl{display:block;font-size:12px;color:var(--muted2);margin-bottom:5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;}
.inline-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:5px 0;}
.row-fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}

.btn{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;background:#fff;color:var(--ink);border:2px solid var(--line);padding:9px 17px;border-radius:12px;cursor:pointer;transition:all .15s;}
.btn:hover{background:var(--panel2);transform:translateY(-1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn.primary{background:var(--sky);color:#fff;border-color:var(--sky-d);}
.btn.green{background:var(--green);color:#fff;border-color:var(--green-d);}
.btn.sun{background:var(--sun);color:#5a4200;border-color:var(--sun-d);}
.btn.ghost{background:transparent;}
.btn.danger{background:var(--coral);border-color:var(--coral-d);color:#fff;}
.btn.sm{padding:6px 12px;font-size:13.5px;border-radius:9px;}
.btn.save{background:var(--green);color:#fff;border-color:var(--green-d);}
.btn.save.dirty{background:var(--sun);color:#5a4200;border-color:var(--sun-d);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,168,24,.4);}50%{box-shadow:0 0 0 6px rgba(240,168,24,0);}}
.x{background:transparent;border:none;color:var(--coral-d);cursor:pointer;font-size:13px;font-weight:800;}
.x:hover{text-decoration:underline;}

.muted{color:var(--muted2);}
.small{font-size:13px;}
.locked-note{background:var(--sun-l);border:1px solid var(--sun-d);border-radius:12px;padding:11px 15px;font-size:14px;color:#7a5800;margin-bottom:16px;display:flex;align-items:center;gap:9px;font-weight:700;}
.preview-note{font-size:12px;color:var(--muted2);margin-bottom:14px;text-align:right;font-style:italic;opacity:.75;}
.saved-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:11px 22px;border-radius:30px;font-weight:800;box-shadow:var(--shadow-lg);z-index:200;font-family:'Fredoka';animation:rise .3s ease;}
@keyframes rise{from{opacity:0;transform:transl(-50%,10px);}to{opacity:1;}}

.empty{text-align:center;padding:50px 20px;color:var(--muted2);}
.empty-ic{font-size:48px;margin-bottom:10px;}
.empty h3{font-family:'Fredoka',sans-serif;color:var(--ink2);font-size:21px;margin-bottom:5px;font-weight:600;}

/* flag */
.flag{height:15px;width:auto;vertical-align:middle;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.flag.lg{height:21px;}
.flag-err{display:inline-block;font-size:10px;color:var(--coral-d);border:1px dashed var(--coral);border-radius:3px;padding:0 4px;vertical-align:middle;font-weight:700;}

/* tables */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-family:'Fredoka',sans-serif;font-size:13.5px;color:var(--muted2);text-align:left;padding:9px 11px;border-bottom:2px solid var(--line);font-weight:500;}
.tbl td{padding:11px;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:600;}
.tbl .num{text-align:center;font-variant-numeric:tabular-nums;}
.tbl th.num{text-align:center;}

/* code box */
.codebox{position:relative;}
.codebox textarea{width:100%;background:#0f2433;border:1px solid var(--line2);border-radius:12px;color:#bfe8ff;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;padding:14px;line-height:1.5;resize:vertical;}
.copy-btn{position:absolute;top:10px;right:10px;}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(31,49,71,.45);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:#fff;border-radius:20px;padding:26px;max-width:440px;width:100%;box-shadow:var(--shadow-lg);}
.modal h2{font-family:'Fredoka',sans-serif;font-size:23px;margin-bottom:8px;font-weight:600;}

/* pills / chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:13px;font-weight:800;}
.chip.ok{background:var(--green-l);color:var(--green-d);}
.chip.no{background:var(--sun-l);color:var(--sun-d);}

@media(max-width:640px){
  .container{padding:16px 12px 60px;}
  .hdr-inner{padding:12px 12px 0;gap:8px;}
  .brand{gap:9px;}
  .brand-logo{width:38px;height:38px;}
  .brand h1{font-size:22px;letter-spacing:.3px;}
  .hdr-right{margin-left:0;width:100%;justify-content:flex-start;gap:8px;}
  .hdr-clock{font-size:11px;padding:5px 9px;}
  .ed-select{font-size:12px;padding:6px 30px;}
  .edit-pill{font-size:12px;padding:7px 12px;}
  .sync-dot{font-size:11px;}
  .nav{gap:2px;padding:0 8px;margin-top:10px;}
  .nav-btn{font-size:13px;padding:8px 10px;}
  .nav-btn.nav-admin{font-size:12px;}
  .nav-divider{margin:0 5px;height:18px;}
  .card{padding:15px;border-radius:14px;margin-bottom:14px;}
  .card-h{font-size:18px;}
  .card-h.sm{font-size:16px;}
  .centrum-card{padding:6px 15px;}
  .centrum-phase{font-size:20px;}
  .row-fields{grid-template-columns:1fr;}
  .tbl th{font-size:12px;padding:7px 7px;}
  .tbl td{font-size:13px;padding:8px 7px;}
  .clk-date{display:none;}
  .sync-label{display:none;}
  .sync-dot{display:none;}
  .edit-pill{margin-left:auto;}
}
@media(max-width:400px){
  .brand h1{font-size:19px;}
  .brand-logo{width:34px;height:34px;}
  .hdr-clock{font-size:10px;}
  .nav-btn{font-size:12px;padding:7px 8px;}
}

/* tura 2 */
.section{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;background:var(--bg2);}
.section-h{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;font-family:'Fredoka';font-weight:600;font-size:16px;background:var(--panel2);user-select:none;}
.section-h:hover{background:var(--green-l);}
.section-body{padding:16px;}
.section-chev{transition:transform .2s;color:var(--muted2);}
.section.closed .section-chev{transform:rotate(-90deg);}
.locked-inp{position:relative;}
.locked-badge{font-size:11px;color:var(--muted2);font-weight:800;margin-left:6px;}
.edit-link{background:none;border:none;color:var(--sky-d);font-weight:800;cursor:pointer;font-size:12px;text-decoration:underline;}
.opening-badge{display:inline-flex;align-items:center;gap:4px;background:var(--purple-l);color:var(--purple);font-size:11px;font-weight:800;padding:2px 8px;border-radius:12px;}
.time-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:2px 8px;border-radius:12px;white-space:nowrap;}
.time-badge.upcoming{background:var(--sky-l);color:var(--sky-d);}
.time-badge.live{background:#ffe1e1;color:#c53030;animation:pulse 2s infinite;}
.time-badge.finished{background:#e7e9ec;color:var(--muted2);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.phase-group{margin-bottom:22px;}
.phase-group-h{font-family:'Fredoka';font-weight:600;font-size:15px;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-left:4px;border-left:4px solid var(--green);padding-left:10px;}
.save-bar{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.dirty-note{color:var(--sun-d);font-weight:800;font-size:13px;}
.clean-note{color:var(--green-d);font-weight:800;font-size:13px;}
/* Dymki wyjaśniające (hover na desktopie, tap/focus na mobile) */
.tip{position:relative;cursor:help;}
.tip:focus{outline:none;}
.tip .i-mark{font-size:10px;color:var(--muted);font-weight:800;margin-left:3px;vertical-align:super;}
.tip[data-tip]:hover::after,.tip[data-tip]:focus::after{
  content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:9px;width:max-content;max-width:230px;
  background:var(--ink);color:#fff;font-family:'Nunito',sans-serif;font-size:12px;font-weight:600;
  line-height:1.45;text-align:center;white-space:normal;padding:8px 11px;border-radius:9px;
  box-shadow:0 6px 22px rgba(31,49,71,.28);z-index:60;pointer-events:none;}
.tip[data-tip]:hover::before,.tip[data-tip]:focus::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:3px;border:6px solid transparent;border-top-color:var(--ink);z-index:60;pointer-events:none;}