:root {
  /* Zmapowane na wspolny motyw miejski (/wspolne/legionowo.css), ale NA
     SZTYWNO w wartosciach jasnych — Karta ma mase wlasnych, hardcodowanych
     pastelowych kolorow (wizerunek karty mieszkanca), ktore nie maja
     odpowiednika w trybie ciemnym. Automatyczne przelaczenie tylko --lgn-*
     pod prefers-color-scheme:dark dawalo brzydka, niespojna mieszanke
     (ciemne tlo/tekst + jasne, hardcodowane elementy karty). Do czasu
     pelnego wsparcia trybu ciemnego w Karcie, wymuszamy jasny zawsze. */
  color-scheme: light;
  --ink: #111827;
  --muted: #374151;
  --cream: #F3F4F6;
  --paper: #FFFFFF;
  --teal: #0F3C7E;
  --teal-dark: #0B2A58;
  --gold: #B91C1C;
  --line: #E2E5EA;
  /* Obramowania elementow interaktywnych (pola, selecty) — WCAG 1.4.11
     wymaga 3:1, wiec NIE wolno tu uzywac dekoracyjnego --line (1.26:1). */
  --line-control: #6B7280;
  --red: #B91C1C;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -6px rgba(16,24,40,.12);
}
* { box-sizing:border-box; }
/* WCAG 2.4.1 — pominiecie powtarzalnego naglowka i nawigacji. Widoczny
   dopiero po otrzymaniu fokusa z klawiatury. */
.skip-link { position:absolute; top:-60px; left:16px; z-index:9999; background:var(--teal); color:#fff; padding:12px 20px; border-radius:6px; font-weight:800; text-decoration:none; transition:top .2s ease; }
.skip-link:focus { top:16px; }
/* WCAG 2.2 (2.4.11): przyklejony pasek u gory ma 74px — bez tego
   element przewiniety do fokusa chowa sie pod nim przy nawigacji Tabem. */
:target, a, button, input, select, textarea, [tabindex] { scroll-margin-top: 90px; } html { scroll-behavior:smooth; } body { margin:0; font-family:Manrope,Arial,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5; } button,input { font:inherit; } button { cursor:pointer; } .topbar { height:74px; padding:0 max(24px,calc((100vw - 1180px)/2)); background:rgba(255,253,248,.94); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; z-index:5; top:0; backdrop-filter:blur(12px); } .brand { color:var(--ink); text-decoration:none; display:flex; gap:10px; align-items:center; letter-spacing:-.6px; font-weight:500; } .brand strong { color:var(--teal); } .brand-mark { width:34px; height:34px; display:grid; place-items:center; background:var(--teal); color:#fff; font-family:"Playfair Display",serif; font-size:22px; border-radius:50% 50% 45% 45%; } .nav { display:flex; gap:8px; } .nav-link { border:0; background:transparent; padding:9px 12px; color:var(--muted); font-weight:700; } .nav-link.active { color:var(--teal); border-bottom:2px solid var(--teal); } .view { display:none; } .view.active { display:block; } .hero { min-height:500px; max-width:1180px; margin:auto; padding:86px 32px 66px; display:grid; grid-template-columns:1fr 440px; align-items:center; gap:55px; overflow:hidden; } .eyebrow { color:var(--teal); font-size:12px; letter-spacing:1.5px; font-weight:800; margin:0 0 12px; } h1,h2 { letter-spacing:-1.7px; margin:0; line-height:1.08; } h1 { font-size:clamp(42px,5vw,68px); } h1 em { font-family:"Playfair Display",serif; color:var(--teal); font-style:normal; font-weight:700; } h2 { font-size:28px; } .intro { max-width:520px; font-size:17px; color:var(--muted); margin:22px 0 30px; } .hero-actions,.form-actions { display:flex; gap:12px; align-items:center; } .button { border:0; border-radius:7px; padding:13px 18px; font-weight:800; text-decoration:none; display:inline-flex; gap:18px; justify-content:center; align-items:center; } .button-primary { background:var(--teal); color:#fff; box-shadow:0 5px 12px rgba(0,109,103,.18); } .button-primary:hover { background:var(--teal-dark); } .button-secondary { background:transparent; color:var(--teal); border:1px solid var(--line); } .button-tertiary { color:var(--teal); background:transparent; padding-left:0; } .hero-art { height:350px; position:relative; } .shape { position:absolute; border-radius:50%; } .shape-one { width:290px;height:290px;background:#dbebe5;right:13px;top:28px; } .shape-two { width:135px;height:135px;background:#e9d8a3;right:246px;top:0; } .shape-three { width:58px;height:58px;background:#8ec4bc;right:22px;bottom:8px; } .card { color:#fff; background:linear-gradient(135deg,#017871,#00534f); box-shadow:0 22px 35px rgba(0,63,59,.25); border-radius:18px; padding:22px; position:relative; overflow:hidden; } .card::after { content:""; position:absolute; width:200px;height:200px; right:-100px;bottom:-98px;border:1px solid rgba(255,255,255,.25);border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.06),0 0 0 57px rgba(255,255,255,.05); } .card-hero { position:absolute; transform:rotate(-6deg); width:340px; right:34px; top:63px; } .card-top,.card-bottom { position:relative; z-index:1; display:flex; justify-content:space-between; font-weight:800; font-size:10px; letter-spacing:1.2px; } .card-logo { font-family:"Playfair Display",serif; font-size:27px; line-height:.75; } .card-person { position:relative; z-index:1; display:flex; align-items:center; gap:13px; margin:44px 0 27px; } .avatar-placeholder,.user-avatar { display:grid; place-items:center; background:#e8d59f; color:var(--teal-dark); font-weight:800; border-radius:50%; } .avatar-placeholder { width:49px;height:49px; } .card-person strong,.card-person small { display:block; } .card-person strong { font-size:15px; }.card-person small { font-size:10px;opacity:.78;margin-top:3px; }.fake-qr { font-size:23px; line-height:.7; }.benefits { background:var(--cream); padding:34px max(32px,calc((100vw - 1100px)/2)); display:grid; grid-template-columns:repeat(3,1fr); gap:55px; }.benefits article { position:relative; padding-left:51px; }.benefits h2 { font-size:17px;letter-spacing:-.5px; }.benefits p { color:var(--muted);font-size:13px;margin:6px 0 0; }.benefit-icon { color:var(--teal); position:absolute;left:0;top:0;font-size:28px;font-weight:800; }.application-section { max-width:1100px; margin:auto; padding:84px 32px 105px; }.section-heading { text-align:center; margin-bottom:44px; }.section-heading p:last-child { color:var(--muted); margin:12px 0 0; }.form-layout { display:grid; grid-template-columns:220px 1fr; gap:45px; align-items:start; }.steps { margin:0;padding:0;list-style:none; }.step { display:flex;gap:13px;align-items:center;margin:0 0 25px; opacity:.47; }.step span { width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--teal);border-radius:50%;font-size:13px;font-weight:800; }.step strong,.step small { display:block; }.step strong { font-size:14px; }.step small { font-size:11px; }.step.active { opacity:1; }.step.active span { background:var(--teal);color:#fff; }.form-page { display:none;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:35px;border-radius:12px; }.form-page.active { display:block; } fieldset { border:0;margin:0 0 28px;padding:0; } legend { font-weight:800;font-size:18px;margin-bottom:20px;letter-spacing:-.5px; } label { display:block;font-size:13px;font-weight:700;color:var(--ink); } input:not([type=file]):not([type=checkbox]) { width:100%;margin-top:7px;padding:12px 13px;border:1px solid var(--line-control);border-radius:6px;background:#fff;font-size:14px;color:var(--ink); } input:focus { outline:2px solid var(--teal);border-color:var(--teal); }.grid { display:grid;gap:18px; }.grid.two { grid-template-columns:repeat(2,1fr); }.grid + label, fieldset > label + label { margin-top:18px; }.hint { color:var(--muted);font-size:13px;margin:-13px 0 16px; }.file-drop { border:1px dashed var(--line);border-radius:8px;padding:23px;text-align:center;background:var(--paper);color:var(--teal); }.file-drop input { display:none; }.file-drop strong,.file-drop small { display:block; }.file-drop small { color:var(--muted);font-weight:500;margin-top:4px; }.file-drop.compact { padding:19px 12px; }.upload-icon { font-size:23px;line-height:1;display:block;margin-bottom:7px; }.file-name { color:var(--teal);font-size:12px;margin:5px 0 0;min-height:18px; }.summary { padding:17px;background:var(--cream);border-radius:7px;font-size:14px;margin-bottom:20px; }.summary strong { display:block;margin-bottom:4px; }.check { display:flex;gap:11px;align-items:flex-start;margin:14px 0;font-weight:500;line-height:1.45; }.check input { margin-top:4px;accent-color:var(--teal); }.notice { display:flex;gap:12px;background:var(--cream);border-left:3px solid var(--teal);padding:13px 15px;margin-bottom:26px;color:var(--muted);font-size:13px; }.notice span { width:20px;height:20px;flex:none;border-radius:50%;background:var(--teal);color:white;display:grid;place-items:center;font-weight:800; }.notice p { margin:0; }.office-view { max-width:1240px;margin:auto;padding:54px 30px 80px; }.office-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px; }.office-header h1 { font-size:40px; }.office-header p:last-child { color:var(--muted); }.user-chip { display:flex;gap:9px;align-items:center;font-size:13px;font-weight:700; }.user-chip small { color:var(--muted);font-weight:500; }.user-avatar { width:36px;height:36px; }.stat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:25px; }.stat-grid article { background:var(--paper);border:1px solid var(--line);padding:18px;border-radius:8px; }.stat-grid span,.stat-grid small { display:block;color:var(--muted);font-size:12px; }.stat-grid strong { display:block;font-size:28px;letter-spacing:-1px;margin:4px 0; }.office-content { display:grid;grid-template-columns:340px 1fr;min-height:550px;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow); }.application-list { border-right:1px solid var(--line); }.list-heading { display:flex;justify-content:space-between;align-items:center;padding:20px 20px 12px; }.list-heading h2 { font-size:20px; }.icon-button { border:0;background:transparent;color:var(--teal);font-size:20px;min-width:24px;min-height:24px;display:inline-grid;place-items:center; }.application-list input { margin:0 16px 13px;width:calc(100% - 32px);padding:10px 12px;border:1px solid var(--line-control);border-radius:5px; }.application-item { width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;padding:15px 20px; }.application-item:hover,.application-item.active { background:var(--cream); }.application-item .app-row { display:flex;justify-content:space-between;gap:8px; }.application-item strong { font-size:13px; }.application-item small { color:var(--muted);font-size:11px; }.status { display:inline-block;border-radius:99px;padding:3px 7px;font-size:10px;font-weight:800;white-space:nowrap; }.status.new { background:var(--cream);color:var(--teal); }.status.review { background:#f4ead2;color:#8a6210; }.status.fix { background:#f7e2de;color:#9e392f; }.review-panel { padding:28px 31px; }.empty-state { height:100%;display:grid;place-content:center;text-align:center;color:var(--muted); }.empty-state span { color:var(--teal);font-size:42px; }.empty-state h2 { color:var(--ink);font-size:20px;margin:8px; }.review-top { display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:19px; }.review-top h2 { font-size:23px; }.review-meta { color:var(--muted);font-size:12px;margin:6px 0 0; }.review-grid { display:grid;grid-template-columns:1.1fr .9fr;gap:27px;margin-top:26px; }.review-grid h3 { font-size:14px;margin:0 0 11px; }.data-list { margin:0;display:grid;gap:8px; }.data-list div { display:grid;grid-template-columns:125px 1fr;font-size:13px; }.data-list dt { color:var(--muted); }.data-list dd { margin:0;font-weight:700; }.document { display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:6px;margin-bottom:9px;font-size:13px; }.document-icon { color:var(--teal);font-size:19px; }.document small { display:block;color:var(--muted); }.photo-preview { width:84px;height:84px;border-radius:8px;background:#e7d59f;display:grid;place-items:center;color:var(--teal-dark);font-weight:800;font-size:23px;margin-bottom:20px; }.decision-box { border-top:1px solid var(--line);margin-top:28px;padding-top:22px; }.decision-box label { margin:13px 0 7px; }.decision-box select,.decision-box textarea { width:100%;border:1px solid var(--line-control);border-radius:6px;padding:10px;background:#fff; }.decision-box textarea { min-height:75px;resize:vertical; }.decision-actions { display:flex;gap:10px;margin-top:16px; }.approve { background:var(--teal);color:white; }.request-fix { color:#815b0f;background:#f2e7c9; }.reject { color:white;background:var(--red); }.timeline { margin-top:25px;border-top:1px solid var(--line);padding-top:18px; }.timeline h3 { margin:0 0 10px;font-size:14px; }.timeline p { margin:8px 0;font-size:12px;color:var(--muted); }.timeline p strong { color:var(--ink); }.large-card { width:min(360px,100%);margin:18px auto; }.card-note { text-align:center;color:var(--muted);font-size:12px; } dialog { border:0;border-radius:12px;padding:34px;max-width:440px;color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.24); } dialog::backdrop { background:rgba(8,29,30,.55);backdrop-filter:blur(3px); }.dialog-icon { width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:var(--cream);color:var(--teal);font-size:25px;font-weight:800; }.dialog-close { position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:25px;color:var(--muted);min-width:24px;min-height:24px;display:grid;place-items:center; }
.pilot-banner { background:#9f1632;color:white;text-align:center;padding:8px 18px;font-size:12px;font-weight:800;letter-spacing:.2px; }
.auth-button { border:1px solid #a9c1e5;background:white;color:var(--teal);border-radius:7px;padding:8px 12px;font-size:12px;font-weight:800; }
.auth-user { display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700; }
.auth-user .user-avatar { width:32px;height:32px;font-size:11px; }
.auth-logout { border:0;background:transparent;color:var(--teal);font-size:11px;font-weight:800;padding:0; }
.login-dialog { width:min(430px,calc(100% - 30px)); }
.auth-tabs { display:flex;gap:6px;padding:4px;background:#eef4fc;border-radius:8px;margin:8px 0 25px; }
.auth-tabs button { flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:6px;font-weight:800;font-size:12px; }
.auth-tabs button.active { color:var(--teal);background:white;box-shadow:0 2px 8px rgba(21,47,91,.08); }
.login-dialog form { display:grid;gap:16px;margin-top:22px; }
.login-dialog form .button { margin-top:3px; }
.dialog-intro { color:var(--muted);font-size:14px;margin:12px 0 0; }
.form-error { min-height:18px;margin:-8px 0 0;color:var(--red);font-size:12px;font-weight:700; }
.demo-accounts { margin-top:25px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px; }
.demo-accounts summary { color:var(--teal);font-weight:800;cursor:pointer; }
.demo-accounts p { line-height:1.7; }
.demo-accounts small { display:block;margin-top:5px; }
.resident-dashboard { max-width:1100px;margin:0 auto;padding:65px 32px 10px; }
.dashboard-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:22px; }
.resident-applications { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.resident-case { border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:22px;box-shadow:0 8px 23px rgba(21,47,91,.05); }
.resident-case-top { display:flex;align-items:flex-start;justify-content:space-between;gap:13px; }.resident-case h3 { margin:0;font-size:16px; }.resident-case p { color:var(--muted);font-size:12px;margin:5px 0 0; }.resident-case .case-history { border-top:1px solid var(--line);padding-top:13px;margin:17px 0 0;font-size:12px;color:var(--muted); }.digital-card-mini { margin-top:17px;border-radius:9px;background:linear-gradient(135deg,#215ca8,#0b326d);padding:16px;color:white;display:flex;justify-content:space-between;align-items:end; }.digital-card-mini strong,.digital-card-mini small { display:block; }.digital-card-mini small { opacity:.8;font-size:10px;margin-top:4px; }.token-qr { width:56px;height:56px;background:white;border:3px solid white;object-fit:contain; }.dashboard-empty { grid-column:1/-1;padding:29px;background:#eef4fc;border-radius:9px;color:var(--muted);font-size:14px; }.dashboard-empty strong { color:var(--ink);display:block;font-size:16px;margin-bottom:4px; }

.document { color:var(--ink);text-decoration:none; }
.document:hover { border-color:#9ebbe4;background:#f7faff; }
.case-details { border:0;background:transparent;color:var(--teal);font-weight:800;font-size:12px;padding:14px 0 0; }
.case-dialog { width:min(520px,calc(100% - 30px)); }
.case-card { margin-top:22px; }
.case-timeline { max-height:270px;overflow:auto; }
.admin-users { margin-top:30px;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow); }
.admin-users-list { display:grid;gap:9px; }
.admin-user-row { display:grid;grid-template-columns:1.3fr 1.4fr .7fr auto;align-items:center;gap:16px;padding:13px 15px;border:1px solid var(--line);border-radius:7px;font-size:12px; }
.admin-user-row strong,.admin-user-row small { display:block; }.admin-user-row small { color:var(--muted);margin-top:2px; }
.user-state { font-weight:800;color:var(--teal); }.user-state.blocked { color:var(--red); }
.small-action { border:1px solid #a9c1e5;background:white;color:var(--teal);border-radius:5px;padding:6px 9px;font-weight:800;font-size:11px; }
.login-dialog select { width:100%;margin-top:7px;padding:12px 13px;border:1px solid var(--line);border-radius:6px;background:#fff; }
.login-dialog input[type=file] { display:block;width:100%;margin-top:7px;padding:10px;border:1px dashed #a9c1e5;border-radius:6px;background:#fbfdff;font-size:12px; }
.card-controls { display:flex;flex-wrap:wrap;gap:8px;margin-top:13px; }
.verification-page { min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#eef4fc,#f8e8ec); }
.verification-card { width:min(460px,100%);background:white;border:1px solid var(--line);border-top:7px solid var(--red);border-radius:14px;padding:38px;box-shadow:var(--shadow);text-align:center; }
.verification-card.valid { border-top-color:var(--teal); }.verification-card .brand-mark { margin:0 auto 20px; }.verification-card h1 { font-size:35px;margin-bottom:25px; }
.verification-card dl { margin:0 0 28px;text-align:left; }.verification-card dl div { display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:12px 0; }
.verification-card dt { color:var(--muted); }.verification-card dd { margin:0;font-weight:800; }

/* Barwy Legionowa: czerwień, biel i błękit, zaczerpnięte z miejskiego herbu i flagi. */
.brand-mark { background:var(--gold); }
.nav-link.active { border-bottom-color:var(--gold); }
.button-primary { box-shadow:0 5px 12px rgba(22,77,154,.18); }
.button-secondary { border-color:#a9c1e5; }
.shape-one { background:#dce8f8; }
.shape-two { background:#f2c9d2; }
.shape-three { background:#9ebbe4; }
.card { background:linear-gradient(135deg,#215ca8,#0b326d); box-shadow:0 22px 35px rgba(11,50,109,.25); }
.avatar-placeholder,.user-avatar,.photo-preview { background:#f0d3da; }
.photo-preview { object-fit:cover; }
.benefits { background:#e8eff9; }
.summary,.notice { background:#eef4fc; }
.notice { color:#3d5875; }
.file-drop { border-color:#a9c1e5; background:#fbfdff; }
.application-item:hover,.application-item.active { background:#eef4fc; }
.status.new { background:#e7eef9;color:#164d9a; }
.status.review { background:#f8e6ea;color:#9e1935; }
.request-fix { color:#8d1630;background:#f8e3e7; }
.dialog-icon { background:#e7eef9; }

@media (max-width:480px) { .topbar { flex-wrap:wrap;height:auto;padding:10px 14px;row-gap:6px; }.nav { order:3;width:100%;justify-content:center; }.user-name { max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom; } }
@media (max-width:760px) { .topbar { padding:0 18px; }.nav-link { font-size:12px;padding:9px 5px; }.hero { grid-template-columns:1fr;padding:59px 24px 39px;gap:10px; }.hero-art { height:270px;transform:scale(.82);transform-origin:center left; }.benefits,.stat-grid,.resident-applications { grid-template-columns:1fr;gap:23px; }.application-section,.resident-dashboard { padding:60px 18px; }.form-layout,.office-content { grid-template-columns:1fr; }.steps { display:flex;gap:12px;overflow:auto; }.step { min-width:100px; }.step small { display:none; }.form-page { padding:24px 18px; }.grid.two,.review-grid { grid-template-columns:1fr; }.office-view { padding:35px 16px; }.office-header { gap:16px; }.office-header h1 { font-size:31px; }.application-list { border-right:0;border-bottom:1px solid var(--line);max-height:320px;overflow:auto; }.review-panel { padding:23px 18px; }.review-top { display:block; }.decision-actions { flex-wrap:wrap; }.dashboard-heading { align-items:flex-start;gap:15px; }.admin-user-row { grid-template-columns:1fr;gap:7px; } }
.document-history { margin-top:6px; }
.document-history summary { cursor:pointer; color:var(--muted); font-size:12px; font-weight:700; padding:6px 0; }
.document-history .document { margin-top:9px; opacity:.75; }
.summary-files { display:block; margin-top:8px; color:var(--muted); font-size:12px; }