:root {
  --bg:#0f1115; --card:#1a1d24; --card2:#11141a; --fg:#e8eaed; --mut:#9aa0aa;
  --acc:#4f8cff; --acc2:#3a6fd6; --ok:#2ecc71; --warn:#e6a23c; --line:#2a2e37; --r:14px;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
.wrap { max-width:880px; margin:0 auto; padding:22px 16px 60px; }
.wrap.narrow { max-width:460px; }
h1 { font-size:22px; margin:0 0 4px; }
h2 { font-size:17px; margin:18px 0 8px; }
.mut { color:var(--mut); }
.sm { font-size:13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:14px 0; }
label { display:block; font-size:13px; color:var(--mut); margin:10px 0 4px; }
input, textarea, select {
  width:100%; padding:11px 12px; background:var(--card2); border:1px solid var(--line);
  border-radius:10px; color:var(--fg); font:inherit;
}
textarea { min-height:120px; resize:vertical; }
textarea.mono { font-family:ui-monospace,Menlo,monospace; font-size:13px; }
button { cursor:pointer; border:0; border-radius:10px; padding:12px 16px; font:inherit; font-weight:600; color:#fff; background:var(--acc); }
button:disabled { opacity:.5; cursor:default; }
button.big { font-size:18px; padding:18px; width:100%; }
button.alt { background:#232733; color:var(--fg); border:1px solid var(--line); }
button.ghost { background:transparent; color:var(--mut); padding:7px 10px; }
button.danger { background:transparent; color:#e06c6c; border:1px solid #4a2a2a; padding:7px 10px; }
button.w { width:100%; }
button.danger-btn { background:#e0544e !important; color:#fff !important; box-shadow:0 6px 16px rgba(224,84,78,.3) !important; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row.between { justify-content:space-between; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:560px){ .grid2 { grid-template-columns:1fr; } }
.item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line); }
.item:first-child { border-top:0; }
.link { font-family:ui-monospace,monospace; font-size:12px; color:var(--acc); word-break:break-all; }
.pill { font-size:12px; padding:3px 9px; border-radius:999px; background:#232733; color:var(--mut); }
.pill.ok { background:#15321f; color:#6fe39b; }
.check { display:flex; align-items:center; gap:8px; margin:8px 0; }
.check input { width:auto; }
.status { margin-top:12px; min-height:20px; font-size:14px; }
.status.err { color:#e06c6c; } .status.ok { color:var(--ok); }
.hide { display:none; }
.center { text-align:center; }
.back { background:none; color:var(--acc); padding:4px 0; font-size:14px; }
a { color:var(--acc); }
/* lead card */
.lead { padding:14px 0; border-top:1px solid var(--line); }
.lead:first-child { border-top:0; }
.lead .head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.linkbox { display:flex; gap:8px; align-items:center; background:var(--card2); border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin:9px 0; }
.linkbox .link { flex:1; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions button { flex:1; min-width:110px; padding:9px 10px; font-size:13px; }
.copybtn { flex:0 0 auto; padding:7px 11px; font-size:13px; }

/* RODO box */
.rodo { max-height:200px; overflow-y:auto; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:14px; white-space:pre-wrap; font-size:14px; }
.rodo.locked { border-color:var(--warn); }

/* ============ MOTYW STRONY KLIENTA (body.client) ============ */
/* Profesjonalny, czysty: biel + granat + jedna zielen (telefon). */
body.client {
  background:#ffffff;
  color: #2a3346; min-height:100vh; overflow-x:hidden;
}
body.client.anim { overflow:hidden; }   /* w trakcie animacji proca/przelot - bez suwakow */
body.client .badge { touch-action:none; }   /* przeciaganie dymka bez scrollowania strony */
body.client h1 { color:#16234a; font-size:25px; letter-spacing:-.2px; }   /* granat zamiast czerni */
body.client .mut { color:#6b7480; }
body.client .badge {
  width:72px; height:72px; margin:6px auto 18px; position:relative; will-change:transform;
}
body.client .badge .bubwrap { width:72px; position:relative; z-index:1; }
body.client .badge .bub { width:72px; height:auto; display:block; filter:drop-shadow(0 5px 5px rgba(30,45,80,.14)); }
body.client .badge .bub.hide { display:none; }
/* delikatny cien-elipsa pod dymkiem (zostaje gdy dymek lewituje) */
body.client .badge::after {
  content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  width:44px; height:11px; border-radius:50%; z-index:0; filter:blur(2.5px);
  background:radial-gradient(ellipse at center, rgba(30,45,80,.22), rgba(30,45,80,0) 70%);
}
/* lewitacja: porusza sie obrazek, cien lekko pulsuje */
body.client .badge.floating .bubwrap { animation:bubFloat 3.6s ease-in-out infinite; }
body.client .badge.floating::after { animation:shadowPulse 3.6s ease-in-out infinite; }
@keyframes bubFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes shadowPulse { 0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); } 50%{ opacity:.32; transform:translateX(-50%) scale(.82); } }
body.client .card {
  background:#fff; border:1px solid #e7ebf2;
  border-radius:18px; box-shadow:0 8px 26px rgba(20,35,74,.07); padding:20px;
}
body.client h2 { color:#1d294a; }
/* przycisk glowny = TELEFON: zielen (stonowana, profesjonalna) */
body.client button {
  background: linear-gradient(135deg, #2fae5d, #25994f); color:#fff;
  box-shadow:0 8px 18px rgba(37,153,79,.24); border-radius:14px;
}
body.client button.big { padding:18px; font-size:18px; }
/* przycisk drugi = PRZEGLADARKA: bialy z granatowym akcentem */
body.client button.alt {
  background:#fff; color:#1d2c54; border:1.5px solid #d4dbea; box-shadow:none;
}
body.client button:active { transform:translateY(1px); }
body.client .rodo { background:#f7f9fc; border-color:#e6eaf2; color:#36405a; }
body.client .rodo.locked { border-color:#c9a23c; }
body.client .check label { color:#46506a; }
body.client .pill { background:#eef1f8; color:#5a6478; }
body.client .status { color:#6b7480; }
body.client .status.err { color:#cf5151; }
body.client #phoneNote { color:#23824a; font-weight:700; font-size:15px; }
body.client a { color:#1d2c54; }

/* pozytywny, rozswietlony napis-tagline */
body.client .tagline {
  font-weight:800; font-size:17px; letter-spacing:.2px; margin-top:6px;
  background:linear-gradient(95deg, #2a5fd0 0%, #45a6f0 45%, #3ad0c0 70%, #2a5fd0 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:tagShine 5s linear infinite;
  filter:drop-shadow(0 1px 7px rgba(60,150,230,.35));   /* lekkie rozswietlenie */
}
@keyframes tagShine { to { background-position:220% center; } }
@media (prefers-reduced-motion: reduce) { body.client .tagline { animation:none; } }

/* --- lekkie animacje (fancy) --- */
/* tlo biale, statyczne - bez animacji gradientu */

/* podswietlenie przycisku gdy dymek go dotknie (.lit) */
body.client button.lit { box-shadow:0 0 0 3px rgba(63,201,106,.45), 0 10px 26px rgba(45,180,85,.45) !important; filter:brightness(1.06); }
body.client button.alt.lit { box-shadow:0 0 0 3px rgba(29,44,84,.32), 0 10px 22px rgba(29,44,84,.22) !important; }

body.client h1, body.client #sub { animation:fadeUp .6s ease both; }
body.client #sub { animation-delay:.08s; }
body.client .card { animation:fadeUp .6s ease both; }
body.client #actions .card:nth-child(1) { animation-delay:.14s; }
body.client #actions .card:nth-child(2) { animation-delay:.22s; }
body.client #rodoCard { animation-delay:.30s; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

body.client button { transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
body.client button.big:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(37,153,79,.30); filter:brightness(1.03); }
body.client button.alt:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(29,44,84,.16); }

/* delikatny puls na przycisku telefonu - zwraca uwage */
body.client #phoneBtn { animation:softPulse 2.6s ease-in-out infinite; }
@keyframes softPulse {
  0%,100%{ box-shadow:0 8px 20px rgba(45,180,85,.30); }
  50%    { box-shadow:0 8px 28px rgba(45,180,85,.50); }
}

/* --- efekt ladowania strony (entrance) --- */
body.client .wrap { animation:wrapIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wrapIn { from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  body.client, body.client .wrap, body.client .badge, body.client .badge.floating,
  body.client .card, body.client h1, body.client #sub, body.client #phoneBtn { animation:none; }
}

/* ============ PANEL ADMINA ============ */
/* sam trybik (bez napisu) - wieksza ikona, lekko w prawo */
#settingsBtn { font-size:20px; line-height:1; padding:6px 9px; }

/* maly dymek pod pierwszym boksem (Projekty) - lewituje + mruga */
.admin-bub { width:56px; margin:2px auto 6px; position:relative; }
.admin-bub .bw { width:56px; animation:abFloat 3.6s ease-in-out infinite; will-change:transform; }
.admin-bub .b { width:56px; height:auto; display:block; filter:drop-shadow(0 6px 7px rgba(0,0,0,.4)); }
.admin-bub .b.hide { display:none; }
.admin-bub::after {
  content:""; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  width:32px; height:8px; border-radius:50%; filter:blur(2.5px); z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.4), rgba(0,0,0,0) 70%);
  animation:abShadow 3.6s ease-in-out infinite;
}
@keyframes abFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes abShadow { 0%,100%{ opacity:.5; transform:translateX(-50%) scale(1); } 50%{ opacity:.3; transform:translateX(-50%) scale(.82); } }
@media (prefers-reduced-motion: reduce){ .admin-bub .bw, .admin-bub::after { animation:none; } }