/* =========================================================
   BLOK 2: RASPORED LJUSKE, /app
   Zamenjuje: MainLayout.razor + TopBar.razor + BottomNav.razor
   (mobilni raspored ostaje, desktop dobija bočnu traku).

   Jedan atribut vodi raspored: .app[data-traka]
     "rasirena"   od 1100 px, i korisnik nije skupio traku
     "skupljena"  od 1100 px skupljena, ili 720 do 1099 px uvek
     "telefon"    ispod 720 px: gornja i donja traka kao u aplikaciji
   Atribut postavlja app-ljuska.js pre nego što se Blazor učita,
   pa skelet ljuske već ima pravi oblik.

   Sadržaj se prilagođava širini SVOG okvira (container upiti na
   .glavno), ne širini prozora. Skupljena traka zato sama daje
   mreži jednu kolonu više, bez ijednog dodatnog pravila.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

.app {
  position: relative;
  display: grid;
  grid-template-columns: var(--us-traka-siroka) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  background: var(--us-bg);
  color: var(--us-fg);
  font: 400 14px/1.5 var(--us-font);
  letter-spacing: var(--us-tracking-normal);
  -webkit-font-smoothing: antialiased;
}
.app[data-traka="skupljena"] { grid-template-columns: var(--us-traka-uska) minmax(0, 1fr); }
.app[data-traka="telefon"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ik-sm { width: 16px; height: 16px; }
.ik-lg { width: 28px; height: 28px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bočna traka ---------- */
.traka {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0; overflow-y: auto;
  padding: 14px 12px 12px;
  background: var(--us-bg2);
  border-right: 1px solid var(--us-border);
}
.app[data-traka="telefon"] .traka { display: none; }

.traka-znak {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 8px; margin-bottom: 10px;
  color: var(--us-fg); text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
}
.traka-znak svg { width: 28px; height: 28px; flex: none; }

.traka-grupa { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.traka-naslov {
  display: flex; align-items: center; gap: 8px;
  height: 22px; padding: 0 10px; margin-bottom: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: var(--us-tracking-wide);
  text-transform: uppercase; color: var(--us-fg-subtle);
}
.traka-naslov i { width: 8px; height: 8px; border-radius: 3px; background: var(--us-accent); flex: none; }
.traka-naslov[data-pol="posao"] i { background: var(--us-posao); }

.stavka {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--us-radius-sm);
  background: transparent; color: var(--us-fg-muted);
  font: 500 14px/1.2 var(--us-font); text-decoration: none; text-align: left;
  cursor: pointer;
  transition: background-color var(--us-t-mikro) var(--us-ease), color var(--us-t-mikro) var(--us-ease);
}
.stavka:hover { background: var(--us-surface2); color: var(--us-fg); }
.stavka[aria-current="page"] { background: var(--us-tint); color: var(--us-accent); font-weight: 600; }
.stavka[data-pol="posao"][aria-current="page"] { background: var(--us-posao-tint); color: var(--us-posao); }
.stavka-tekst {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--us-t-stanje) var(--us-ease), transform var(--us-t-stanje) var(--us-ease);
}

/* Oznaka sa brojem: Poruke broje razgovore (prag 9+), Obaveštenja broje
   događaje (prag 99+). Pragovi su preneti iz BottomNav i TopBar. */
.broj {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--us-radius-pill);
  background: var(--us-oznaka); color: #FFFFFF;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}

.traka-dno {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--us-border);
  display: flex; flex-direction: column; gap: 6px;
}
.korisnik {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 8px;
  border: 0; border-radius: var(--us-radius-sm);
  background: transparent; color: var(--us-fg);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--us-t-mikro) var(--us-ease);
}
.korisnik:hover, .korisnik[aria-expanded="true"] { background: var(--us-surface2); }
.korisnik-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.korisnik-ime { font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.korisnik-tok { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--us-fg-muted); font-variant-numeric: tabular-nums; }

.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--us-tint); color: var(--us-accent);
  font-weight: 700; font-size: 14px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.avatar[data-pol="posao"] { background: var(--us-posao-tint); color: var(--us-posao); }

/* ---------- Skupljena traka ---------- */
/* Tekst stavke ne nestaje: postaje opis koji izlazi na hover i fokus.
   Isti čvor nosi i ime za čitač ekrana, pa skupljena traka ne ostaje bez imena. */
/* Sva pravila su vezana za .traka, da fioka i meni (isti .stavka) ostanu puni. */
.app[data-traka="skupljena"] .traka { overflow: visible; padding-inline: 12px; }
.app[data-traka="skupljena"] .traka .traka-znak { justify-content: center; padding: 0; }
.app[data-traka="skupljena"] .traka .traka-ime { display: none; }
.app[data-traka="skupljena"] .traka .stavka { justify-content: center; padding: 0; }
.app[data-traka="skupljena"] .traka .stavka-zak { display: none; }
.app[data-traka="skupljena"] .traka .stavka-tekst {
  position: absolute; left: calc(100% + 12px); top: 50%;
  flex: none; overflow: visible;
  padding: 6px 10px; border-radius: var(--us-radius-xs);
  background: var(--us-fg); color: var(--us-bg);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--us-shadow-md);
  opacity: 0; transform: translate(-4px, -50%);
  pointer-events: none;
}
.app[data-traka="skupljena"] .traka .stavka:hover .stavka-tekst,
.app[data-traka="skupljena"] .traka .stavka:focus-visible .stavka-tekst { opacity: 1; transform: translate(0, -50%); }
.app[data-traka="skupljena"] .traka .stavka .broj {
  position: absolute; top: 1px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 10px; line-height: 15px;
  border: 1.5px solid var(--us-bg2);
}
.app[data-traka="skupljena"] .traka .traka-naslov { justify-content: center; padding: 0; }
.app[data-traka="skupljena"] .traka .traka-naslov span { display: none; }
.app[data-traka="skupljena"] .traka .traka-naslov i { width: 20px; height: 3px; border-radius: 2px; }
.app[data-traka="skupljena"] .traka .korisnik { justify-content: center; padding: 8px 0; }
.app[data-traka="skupljena"] .traka .korisnik-info,
.app[data-traka="skupljena"] .traka .korisnik-strelica { display: none; }
.stavka-zak { width: 14px; height: 14px; color: var(--us-fg-subtle); }

/* Prelaz: širina kolone se menja odjednom (raspored se ne animira),
   a tekst stavki ulazi kroz opacity i transform, po 05-pokret.md. */
.app[data-traka="rasirena"] .traka .stavka-tekst { animation: us-tekst-ulaz var(--us-t-stanje) var(--us-ease) both; }

/* ---------- Glavni deo ---------- */
.glavno {
  position: relative; min-width: 0; min-height: 0;
  overflow-y: auto;
  container: sadrzaj / inline-size;
}
.sadrzaj { max-width: var(--us-sadrzaj-max); margin: 0 auto; padding: 24px 32px 56px; }
.sadrzaj-uzak { max-width: 560px; }
@container sadrzaj (max-width: 719px) {
  .sadrzaj { padding: 16px 16px 112px; }
}

/* Gornja traka u sadržaju (TopBar na desktopu): samo povratak, naslov,
   brza pretraga i radnje ekrana. Zvono, tokeni i avatar su u bočnoj traci. */
.vrh {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  height: var(--us-vrh-visina); padding: 0 32px;
  background: color-mix(in srgb, var(--us-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--us-border-soft);
}
.vrh h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrh-desno { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.brza-pretraga {
  display: flex; align-items: center; gap: 8px;
  width: 280px; height: 40px; padding: 0 12px;
  border: 1px solid var(--us-border); border-radius: var(--us-radius-sm);
  background: var(--us-surface); color: var(--us-fg-subtle);
  font: inherit; font-size: 14px; cursor: text;
}
.brza-pretraga kbd { margin-left: auto; font: 600 11px/1 var(--us-font); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--us-border); color: var(--us-fg-subtle); }
.app[data-traka="telefon"] .vrh { display: none; }
@container sadrzaj (max-width: 899px) { .brza-pretraga { width: 40px; padding: 0; justify-content: center; } .brza-pretraga span, .brza-pretraga kbd { display: none; } }

/* ---------- Telefon: TopBar i BottomNav kao u aplikaciji ---------- */
.vrh-tel { display: none; }
.app[data-traka="telefon"] .vrh-tel {
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 12px 0 16px;
  background: color-mix(in srgb, var(--us-bg) 92%, transparent);
  border-bottom: 1px solid var(--us-border-soft);
  position: relative; z-index: 3;
}
.vrh-tel .traka-znak { height: 40px; margin: 0; padding: 0; font-size: 16px; }
.vrh-tel .traka-znak svg { width: 24px; height: 24px; }
.ikon-dugme {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: var(--us-radius-sm);
  background: transparent; color: var(--us-fg-muted); cursor: pointer;
}
.ikon-dugme:hover { background: var(--us-surface2); color: var(--us-fg); }
.ikon-dugme .broj { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; line-height: 15px; font-size: 10px; padding: 0 4px; border: 1.5px solid var(--us-bg); }

.dno-nav { display: none; }
.app[data-traka="telefon"] .dno-nav {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 64px; padding: 6px;
  border: 1px solid var(--us-border); border-radius: 20px;
  background: color-mix(in srgb, var(--us-surface) 96%, transparent);
  box-shadow: var(--us-shadow-md);
}
.dno-stavka {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 14px; color: var(--us-fg-muted); text-decoration: none;
  font-size: 11px; font-weight: 600;
}
.dno-stavka[aria-current="page"] { background: var(--us-tint); color: var(--us-accent); }
.dno-ikona { position: relative; display: inline-flex; }
.dno-ikona .broj { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; line-height: 15px; font-size: 10px; padding: 0 4px; border: 1.5px solid var(--us-surface); }

/* ---------- Tokeni u ljusci (TokenIkona + us-token-pill) ---------- */
.token { display: inline-block; width: 12px; height: 16px; flex: none; }
.token-pil {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--us-border); border-radius: var(--us-radius-pill);
  background: var(--us-surface); color: var(--us-fg);
  font-size: 13px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
}

/* ---------- Korisnički meni (popover iznad dna trake) ---------- */
.meni {
  position: absolute; z-index: 6;
  width: 264px; padding: 6px;
  border: 1px solid var(--us-border); border-radius: var(--us-radius-md);
  background: var(--us-surface); box-shadow: var(--us-shadow-md);
  transform-origin: bottom left;
  animation: us-meni-ulaz var(--us-t-stanje) var(--us-ease) both;
}
.meni-glava { display: flex; align-items: center; gap: 10px; padding: 10px; }
.meni-odeljak { padding: 4px 0; border-top: 1px solid var(--us-border-soft); }
.meni .stavka { width: 100%; min-height: 38px; font-size: 14px; }
.meni-sporedno { margin-left: auto; font-size: 12px; color: var(--us-fg-subtle); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Fioka (telefon i 720 do 1099 px) ---------- */
.zastor { position: absolute; inset: 0; z-index: 7; background: var(--us-zatamnjenje); animation: us-bledi-ulaz 200ms var(--us-ease) both; }
.fioka {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 8;
  width: min(320px, 86%); display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px; overflow-y: auto;
  background: var(--us-bg2); border-right: 1px solid var(--us-border);
  box-shadow: var(--us-shadow-md);
  animation: us-fioka-ulaz var(--us-t-stanje) var(--us-ease) both;
}

/* =========================================================
   ZAJEDNIČKE KOMPONENTE (us-btn, us-card, us-chip, us-stc, boost)
   ========================================================= */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--us-radius-sm);
  font: 600 14px/1 var(--us-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--us-t-mikro) var(--us-ease), border-color var(--us-t-mikro) var(--us-ease), transform 120ms var(--us-ease);
}
.dugme:active { transform: scale(.98); }
.dugme-glavno { background: var(--us-accent-cta); color: var(--us-na-cta); box-shadow: 0 10px 24px rgba(47,107,255,.25); }
.dugme-glavno:hover { background: #1E54E5; }
.dugme-posao { background: var(--us-posao-jak); color: #FFFFFF; }
.dugme-posao:hover { background: #A21CAF; }
.dugme-sporedno { background: var(--us-surface); color: var(--us-fg); border-color: var(--us-border); }
.dugme-sporedno:hover { background: var(--us-surface2); }
.dugme-tiho { background: transparent; color: var(--us-accent); padding: 0 10px; }
.dugme-tiho:hover { background: var(--us-tint); }
.dugme-malo { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.dugme-puno { width: 100%; }
.dugme[disabled] { opacity: .5; pointer-events: none; }

.kartica { background: var(--us-surface); border: 1px solid var(--us-border); border-radius: var(--us-radius-lg); box-shadow: var(--us-shadow-sm); }
.kartica-telo { padding: 20px; }

.naslov-sekcije { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.naslov-sekcije h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.naslov-sekcije a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--us-accent); text-decoration: none; }
.prigušeno, .priguseno { color: var(--us-fg-muted); }
.sitno { font-size: 12px; color: var(--us-fg-subtle); }
.oznaka-polja { display: block; font-size: 12px; font-weight: 600; letter-spacing: var(--us-tracking-wide); text-transform: uppercase; color: var(--us-fg-subtle); margin-bottom: 6px; }

.polje {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--us-border); border-radius: var(--us-radius-sm);
  background: var(--us-surface); color: var(--us-fg);
  font: 400 14px/1.4 var(--us-font);
  transition: border-color var(--us-t-mikro) var(--us-ease), box-shadow var(--us-t-mikro) var(--us-ease);
}
.polje:focus-within, .polje:focus { outline: none; border-color: var(--us-accent); box-shadow: 0 0 0 4px var(--us-tint); }
.polje input, .polje textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
textarea.polje { padding: 12px 14px; min-height: 120px; resize: vertical; }
.polje::placeholder, .polje input::placeholder, .polje textarea::placeholder { color: var(--us-fg-subtle); }

.cip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--us-border); border-radius: var(--us-radius-pill);
  background: var(--us-surface); color: var(--us-fg-muted);
  font: 600 13px/1 var(--us-font); white-space: nowrap; cursor: pointer;
}
.cip[aria-pressed="true"] { background: var(--us-accent-cta); border-color: var(--us-accent-cta); color: var(--us-na-cta); }
.cip-posao[aria-pressed="true"] { background: var(--us-posao-jak); border-color: var(--us-posao-jak); color: #FFFFFF; }

/* StatusChip.razor: ikona + reč, nikad samo boja */
.stc { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--us-radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.stc .ik { width: 13px; height: 13px; stroke-width: 2.4; }
.stc.ok { background: var(--us-ok-bg); color: var(--us-ok-fg); }
.stc.warn { background: var(--us-warn-bg); color: var(--us-warn-fg); }
.stc.err { background: var(--us-err-bg); color: var(--us-err-fg); }
.stc.neu { background: var(--us-surface2); color: var(--us-fg-muted); }
.stc.deal { background: var(--us-posao-tint); color: var(--us-posao); }
.stc.info { background: var(--us-tint); color: var(--us-accent); }

/* BoostChip / BoostMark: lajm je samo plaćeno isticanje */
.boost { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 3px; border: 1px solid var(--us-boost-ivica); border-radius: var(--us-radius-pill); background: var(--us-boost-chip); color: var(--us-boost-fg); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.boost-znak { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--us-boost-polje); color: var(--us-boost-munja); }
.boost-znak svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.boost-ugao { position: absolute; top: 10px; left: 10px; }

.pol-posao { color: var(--us-posao); }
.tacka { width: 8px; height: 8px; border-radius: 50%; background: var(--us-accent); flex: none; }

/* JobCard.razor: kartica posla, orhideja */
.jc { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--us-radius-lg); background: var(--us-surface); border: 1px solid var(--us-border); box-shadow: var(--us-shadow-sm); text-decoration: none; color: var(--us-fg); transition: transform 220ms var(--us-ease), box-shadow 220ms var(--us-ease); }
.jc:hover { transform: translateY(-4px); box-shadow: var(--us-senka-podignuta); }
.jc-vrh { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--us-fg-subtle); }
.jc b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.jc-dno { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: auto; font-size: 12px; color: var(--us-fg-muted); }
.plata { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--us-radius-pill); background: var(--us-posao-tint); color: var(--us-posao); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Volonterski posao: zelena oznaka umesto iznosa, da se ne čita kao plata */
.plata-vol { background: var(--us-ok-bg); color: var(--us-ok-fg); }


/* ListingCard.razor: kartica oglasa. Isti čvor u pretrazi, omiljenima,
   profilu uslugodavca, živom pregledu obrasca i pregledu boost-a. */
.lc { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--us-radius-lg); background: var(--us-surface); border: 1px solid var(--us-border); box-shadow: var(--us-shadow-sm); color: var(--us-fg); text-decoration: none; transition: transform 220ms var(--us-ease), box-shadow 220ms var(--us-ease); }
.lc:hover { transform: translateY(-4px); box-shadow: var(--us-senka-podignuta); }
.lc-slika { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--us-skelet); }
.lc-slika img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--us-ease); }
.lc:hover .lc-slika img { transform: scale(1.04); }
.lc-omiljeni { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--us-surface) 90%, transparent); color: var(--us-fg); cursor: pointer; }
.lc-telo { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.lc-kat { font-size: 11px; font-weight: 600; letter-spacing: var(--us-tracking-wide); text-transform: uppercase; color: var(--us-accent); }
.lc-naslov { font-size: 14.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-ko { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--us-fg-muted); white-space: nowrap; overflow: hidden; }
.lc-dno { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; }
.lc-cena { font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-ocena { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--us-fg-muted); font-variant-numeric: tabular-nums; }
.zvezda { width: 14px; height: 14px; fill: #F59E0B; stroke: none; flex: none; }
.lc[data-boost="da"] { border-color: var(--us-boost-ivica); box-shadow: 0 0 0 1px var(--us-boost-ivica), var(--us-shadow-sm); }
.ver { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--us-accent-cta); color: #FFFFFF; flex: none; }
.ver svg { width: 10px; height: 10px; stroke-width: 3; }