/* ═══════════════════════ VRELO — интерфейс ═══════════════════════ */

/* Растровая картинка вместо вектора (см. assets/slike/ПРОМПТЫ.md) */
.slika {
  -webkit-mask-image: none !important; mask-image: none !important;
  background-repeat: no-repeat; background-size: cover; border-radius: inherit;
}
.celo-pozadina.slika { opacity: .5; -webkit-mask: linear-gradient(90deg, transparent, #000 38%); mask: linear-gradient(90deg, transparent, #000 38%); }
.brza-crtez.slika { opacity: .55; width: 104px; height: 104px; border-radius: 12px 0 0 0; }
.rel-crtez.slika { opacity: .55; height: 84px; border-radius: var(--r-s); }

/* ───────────────────── статичный сайдбар ───────────────────── */

.fioka {
  position: relative; background: var(--tamno); color: var(--na-tamnom);
  display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, .35);
}
.fioka > * { position: relative; z-index: 1; }

/* Пиротска трака по левому краю — подпись платформы */
.fioka-traka {
  position: absolute; left: 0; top: 0; bottom: 0; width: 40px; z-index: 2;
  background: url("/assets/svg/kilim-traka.svg") repeat-y left top / 40px auto;
  box-shadow: inset -7px 0 12px -7px rgba(0, 0, 0, .65);
}
/* Растровая лента: квадратная плитка с одним медальоном, повтор по вертикали */
.fioka-traka.slika { background-repeat: repeat-y; background-size: 40px 40px; }

.fioka-vez {
  position: absolute; right: -26px; bottom: 74px; width: 160px; height: 160px;
  color: var(--na-tamnom); opacity: .07; z-index: 0; pointer-events: none;
}

.fioka-znak { display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px 54px;
  color: inherit; text-decoration: none; border-radius: var(--r-m); }
.fioka-znak:hover .fioka-ime { color: var(--zlato); }
.fioka-znak:focus-visible { outline: 2px solid var(--zlato); outline-offset: -4px; }
.fioka-znak-ikona { width: 38px; height: 38px; color: var(--crven); flex: none; }
.fioka-znak-ikona.slika { border-radius: 9px; }
.fioka-ime {
  font-family: var(--pismo-naslov); font-size: 1.46rem; font-weight: 700;
  letter-spacing: .01em; line-height: 1; color: #fff;
}
.fioka-moto { font-size: 11px; color: var(--na-tamnom-2); letter-spacing: .02em; margin-top: 4px; }

.fioka-meni { padding: 6px 12px 12px 50px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.fioka-naslov {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--na-tamnom-2); padding: 18px 12px 7px; opacity: .75;
}
.fioka-stavka {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  border-radius: var(--r-m); color: var(--na-tamnom); cursor: pointer;
  border: none; background: none; text-align: left; width: 100%; font-size: 14px;
  transition: background .13s, color .13s;
}
.fioka-stavka:hover { background: var(--tamno-2); }
.fioka-stavka.aktivna {
  background: var(--kost); color: var(--mastilo); font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.fioka-stavka .ikona { opacity: .9; }
.fioka-broj {
  margin-left: auto; font-size: 11px; font-weight: 700; background: var(--crven); color: #fff;
  border-radius: 20px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px;
}
[hidden] { display: none !important; }
.fioka-crta { height: 1px; background: rgba(233, 227, 214, .13); margin: 14px 12px 4px; }

.fioka-podnozje {
  padding: 12px 14px 14px 50px; border-top: 1px solid rgba(233, 227, 214, .13);
  display: grid; gap: 6px;
}
.fioka-korisnik { display: flex; align-items: center; gap: 11px; }
.fioka-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--crven); color: #fff; font-family: var(--pismo-naslov); font-weight: 700;
  overflow: hidden; position: relative;
}
.fioka-ime-korisnika { font-size: 13.5px; font-weight: 600; color: #fff; }
.fioka-nivo { font-size: 11.5px; color: var(--na-tamnom-2); }
.fioka-prekidaci { display: flex; gap: 4px; }
.fioka-prekidac {
  padding: 4px 7px; font-size: 10.5px; font-weight: 700; border-radius: 6px;
  border: 1px solid rgba(233, 227, 214, .22); background: rgba(0, 0, 0, .25);
  color: var(--na-tamnom-2); cursor: pointer;
}
.fioka-prekidac:hover { border-color: rgba(233, 227, 214, .45); color: #fff; }
.fioka-prekidac.uklj { background: var(--crven); border-color: var(--crven); color: #fff; }

.fioka-stanje { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--na-tamnom-2); }
.tacka { width: 7px; height: 7px; border-radius: 50%; background: var(--mastilo-3); flex: none; }
.tacka.ok { background: #57a06f; }
.tacka.lose { background: #d1554d; }

/* ─────────────────────────── каркас ─────────────────────────── */

/* dvh, а не vh: на телефоне 100vh выше видимой области, и поле ввода уезжает под панель браузера */
.app { display: grid; grid-template-columns: var(--fioka) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.glavno { display: flex; flex-direction: column; overflow: hidden; background: var(--kost); min-width: 0; }

.vrh {
  height: var(--vrh); flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 26px; background: var(--kost); position: relative; z-index: 20;
}
.vrh h1 { margin: 0; font-size: 1.12rem; }
.vrh-pod { font-size: 12px; color: var(--mastilo-3); }
.vrh-desno { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vrh > div:first-child:empty { display: none; }

.prekidac-vrh {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--linija-jaka); border-radius: 20px; background: var(--hartija);
  color: var(--mastilo-2); cursor: pointer; font-size: 13px;
}
.prekidac-vrh:hover { background: var(--kost-2); color: var(--mastilo); }
.prekidac-vrh.uklj { background: var(--crven-blagi); border-color: var(--crven); color: var(--crven); font-weight: 600; }

.pogled { flex: 1; overflow-y: auto; }
.omot { max-width: var(--maks); margin: 0 auto; padding: 26px 26px 32px; }
.omot-usko { max-width: 940px; }

/* ─────────────────────── дашборд: шапка ─────────────────────── */

/* Полоса во всю ширину колонки: фотография втекает справа и растворяется
   в фоне страницы — ни рамки, ни карточки, ни видимого края. */
.celo {
  position: relative; overflow: hidden;
  margin: -26px -26px 6px; padding: clamp(26px, 4vh, 44px) 32px clamp(22px, 3.4vh, 38px);
  min-height: clamp(156px, 20vh, 252px); display: flex; align-items: center;
}
/* Фотографии — настоящие <img>: ни вуалей, ни фоновых слоёв.
   Сюжет на снимках стоит справа, поэтому кадр прижат вправо. */
.foto { overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vektor { display: grid; place-items: center; }
.foto-vektor .crtez { width: 78%; height: 78%; color: var(--rakija); opacity: .3; }

.celo-foto {
  position: absolute; right: 0; top: 0; bottom: 0; left: 380px; z-index: 0;
  --uvod: linear-gradient(90deg, transparent 0, #000 92px);
  --dno: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .35) 90%, transparent 100%);
  -webkit-mask-image: var(--uvod), var(--dno);
  -webkit-mask-composite: source-in;
  mask-image: var(--uvod), var(--dno);
  mask-composite: intersect;
}
@media (max-width: 1100px) { .celo-foto { left: 320px; } }
.celo-tekst { position: relative; z-index: 2; max-width: 330px; }
.celo h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 3vh, 2.32rem); letter-spacing: -.022em; }
.celo-datum { color: var(--mastilo-2); font-size: 14.5px; }

/* Цитата дня — в правом рельсе, как на образце */
.citat {
  text-align: right; font-family: var(--pismo-naslov); font-style: italic;
  font-size: 15.5px; line-height: 1.5; padding: 4px 2px 0;
}
.citat-autor { font-style: normal; font-size: 12.5px; color: var(--mastilo-2); margin-top: 6px; }
.citat-ornament {
  width: 110px; height: 11px; margin: 9px 0 0 auto; color: var(--crven); opacity: .6;
}

/* ─────────────────── карточки быстрых действий ─────────────────── */

/* Колонок столько, сколько влезает карточек не уже 240px: число зависит от места
   в колонке главной (рядом правая колонка), а не от ширины окна. Широко — 4 в ряд,
   уже — 2×2. */
.brze { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }

.brza {
  position: relative; overflow: hidden; text-align: left; isolation: isolate;
  background: var(--hartija); border: 1px solid var(--linija); border-radius: var(--r-l);
  padding: 15px 16px 16px; cursor: pointer; box-shadow: var(--senka-s);
  min-height: clamp(112px, 13vh, 132px); display: flex; align-items: flex-end;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.brza:hover { transform: translateY(-3px); box-shadow: var(--senka-m); border-color: var(--linija-jaka); }

/* Картинка прижата к правому краю и уходит под текст, растворяясь в бумаге */
.brza-foto {
  position: absolute; right: 0; top: 0; bottom: 0; width: 42%; z-index: 0;
  --uvod: linear-gradient(90deg, transparent 0, #000 52px);
  --dno: linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-image: var(--uvod), var(--dno);
  -webkit-mask-composite: source-in;
  mask-image: var(--uvod), var(--dno);
  mask-composite: intersect;
}
.brza-foto img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.brza:hover .brza-foto img { transform: scale(1.05); }

.brza-veo { display: none; }
.brza-sadrzaj { position: relative; z-index: 2; max-width: 64%; }

.brza-ikona {
  width: 34px; height: 34px; border-radius: 11px; background: var(--crven); color: #fff;
  display: grid; place-items: center; margin-bottom: 9px;
  box-shadow: 0 2px 8px rgba(176, 50, 47, .3);
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.brza:hover .brza-ikona { transform: scale(1.06) rotate(-3deg); }
.brza-naslov {
  font-family: var(--pismo-naslov); font-size: .99rem; font-weight: 600;
  margin-bottom: 3px; line-height: 1.2; letter-spacing: -.008em;
  text-wrap: balance;
}
.brza-opis { font-size: 12px; color: var(--mastilo-2); line-height: 1.35; }

/* ─────────────────────── сетка дашборда ─────────────────────── */

.ploca { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 20px; align-items: start; }
@media (max-width: 1120px) { .ploca { grid-template-columns: minmax(0, 1fr); } }

.rel { display: grid; gap: 15px; }
/* Высота задана, а не «не меньше»: иначе лента сообщений растёт вниз
   и тянет за собой страницу вместо того, чтобы прокручиваться внутри. */
.glava-kolona {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--vrh) - 58px);
  min-height: 700px;   /* на низком экране лучше дать странице чуть прокрутиться,
                          чем сплющить ленту сообщений до полоски */
}

.tiho-prazno { text-align: center; padding: 18px 12px 14px; }
.tiho-prazno-ornament { width: 120px; height: 11px; margin: 0 auto 10px; color: var(--rakija); opacity: .45; }

/* ─────────────────────── озвучка ─────────────────────── */

.zvuk-dugme {
  width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center;
  border: 1px solid var(--linija); border-radius: 50%; background: var(--hartija);
  color: var(--mastilo-2); cursor: pointer; padding: 0;
  transition: background .14s, color .14s, border-color .14s, transform .12s;
}
.zvuk-dugme:hover { background: var(--crven-blagi); color: var(--crven); border-color: var(--crven); }
.zvuk-dugme:active { transform: scale(.92); }
.zvuk-dugme.malo { width: 24px; height: 24px; }
.zvuk-dugme.svira {
  background: var(--crven); border-color: var(--crven); color: #fff;
  animation: puls 1.1s ease-in-out infinite;
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 50, 47, .38); }
  60% { box-shadow: 0 0 0 7px rgba(176, 50, 47, 0); }
}
@media (prefers-reduced-motion: reduce) { .zvuk-dugme.svira { animation: none; } }

/* ─────────────── заглавная полоса внутренних экранов ─────────────── */

.ekran-traka {
  position: relative; overflow: hidden;
  margin: -26px -26px 22px; padding: 34px 32px 30px;
  min-height: 186px; display: flex; align-items: flex-end; gap: 18px;
}
/* Снимок занимает участок, близкий к своим пропорциям 3:2 — тогда сюжет
   узнаётся, а не превращается в обрезанную ленту во всю ширину. */
.ekran-traka-foto {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: clamp(360px, 46%, 560px); z-index: 0;
  /* Две маски разом: слева снимок втекает в бумагу, снизу — растворяется,
     иначе кадр обрывается ровной чертой и выглядит обрезанным. */
  --uvod: linear-gradient(90deg, transparent 0, #000 120px);
  --dno: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%);
  -webkit-mask-image: var(--uvod), var(--dno);
  -webkit-mask-composite: source-in;
  mask-image: var(--uvod), var(--dno);
  mask-composite: intersect;
}
.ekran-traka-tekst { position: relative; z-index: 2; flex: 1; min-width: 0; max-width: 450px; }
.ekran-traka h1 { margin: 0 0 6px; font-size: 1.94rem; letter-spacing: -.02em; }
.ekran-traka-pod { color: var(--mastilo-2); font-size: 13.5px; max-width: 430px; }
.ekran-traka-desno { position: relative; z-index: 2; display: flex; gap: 8px; align-items: center; }

/* ─────────────────── появление: мягко, без рывка ─────────────────── */

.pogled > .omot { animation: uzdigni .34s cubic-bezier(.2, .7, .3, 1) both; }
.ekran-traka { animation: uzdigni .4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes uzdigni {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.brza { animation: uzdigni .42s cubic-bezier(.2, .7, .3, 1) both; }
.brza:nth-child(1) { animation-delay: .04s; }
.brza:nth-child(2) { animation-delay: .09s; }
.brza:nth-child(3) { animation-delay: .14s; }
.brza:nth-child(4) { animation-delay: .19s; }

.rel > * { animation: uzdigni .46s cubic-bezier(.2, .7, .3, 1) both; }
.rel > *:nth-child(1) { animation-delay: .06s; }
.rel > *:nth-child(2) { animation-delay: .12s; }
.rel > *:nth-child(3) { animation-delay: .18s; }
.rel > *:nth-child(4) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .pogled > .omot, .brza, .rel > * { animation: none; }
}

/* ─────────────────────────── элементы ─────────────────────────── */

.dugme {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-s); border: 1px solid var(--linija-jaka);
  background: var(--hartija); color: var(--mastilo); cursor: pointer; font-size: 13.5px;
  transition: background .12s, border-color .12s, transform .06s; white-space: nowrap;
}
.dugme:hover:not(:disabled) { background: var(--kost-2); border-color: var(--mastilo-3); }
.dugme:active:not(:disabled) { transform: translateY(1px); }
.dugme:disabled { opacity: .45; cursor: not-allowed; }
.dugme-glavno { background: var(--crven); border-color: var(--crven-tamni); color: #fff; font-weight: 600; }
.dugme-glavno:hover:not(:disabled) { background: var(--crven-tamni); border-color: var(--crven-tamni); }
.dugme-plavo { background: var(--plav); border-color: var(--plav); color: #fff; font-weight: 600; }
.dugme-plavo:hover:not(:disabled) { background: var(--plav-svetli); border-color: var(--plav-svetli); }
.dugme-tiho { background: transparent; border-color: transparent; color: var(--mastilo-2); }
.dugme-tiho:hover:not(:disabled) { background: var(--kost-2); }
.dugme-s { padding: 4px 9px; font-size: 12.5px; }
.dugme-krug {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center;
  background: var(--tamno); border-color: var(--tamno); color: #fff;
}
.dugme-krug:hover:not(:disabled) { background: var(--crven); border-color: var(--crven); }

.polje {
  width: 100%; padding: 10px 13px; border-radius: var(--r-s);
  border: 1px solid var(--linija-jaka); background: var(--hartija); color: var(--mastilo);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.polje:focus { border-color: var(--plav); box-shadow: 0 0 0 3px var(--plav-blagi); }
.polje::placeholder { color: var(--mastilo-3); }
textarea.polje { resize: vertical; min-height: 90px; line-height: 1.5; }

.kartica {
  background: var(--hartija); border: 1px solid var(--linija);
  border-radius: var(--r-l); padding: 18px 20px; box-shadow: var(--senka-s);
  transition: box-shadow .2s, border-color .2s;
}
.kartica + .kartica { margin-top: 14px; }
.kartica-naslov { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.kartica-naslov h2, .kartica-naslov h3 { margin: 0; line-height: 1.2; }
.kartica-naslov .ikona { align-self: center; }
.kartica-veza {
  margin-left: auto; font-size: 12.5px; color: var(--crven); cursor: pointer;
  background: none; border: none; padding: 0; white-space: nowrap;
}
.kartica-veza:hover { text-decoration: underline; }

.znacka {
  display: inline-flex; align-items: center; gap: 4px; padding: 1.5px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; background: var(--kost-2); color: var(--mastilo-2);
  border: 1px solid var(--linija); white-space: nowrap;
}
.znacka-crvena { background: var(--crven-blagi); color: var(--crven); border-color: transparent; }
.znacka-plava { background: var(--plav-blagi); color: var(--plav); border-color: transparent; }
.znacka-zelena { background: var(--zelena-blaga); color: var(--zelena); border-color: transparent; }
.znacka-zlatna { background: rgba(189, 132, 60, .14); color: var(--rakija); border-color: transparent; }

.mreza { display: grid; gap: 14px; align-items: stretch; }
.mreza-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mreza-3 { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }
.mreza-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .mreza-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prazno { text-align: center; padding: 46px 20px; color: var(--mastilo-3); }
.mreza > .prazno, .mreza-2 > .prazno, .mreza-3 > .prazno { grid-column: 1 / -1; }
.prazno .crtez { margin: 0 auto 16px; width: 170px; height: 128px; }
/* Фотография в пустом состоянии растворяется по краям, а не режется рамкой */
.prazno .crtez.slika {
  width: 250px; height: 188px; border-radius: 0; opacity: 1;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 48%, #000 62%, rgba(0,0,0,.65) 80%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 62% 64% at 50% 48%, #000 62%, rgba(0,0,0,.65) 80%, transparent 100%) !important;
}
.prazno h3 { color: var(--mastilo-2); }
.prazno p { max-width: 430px; margin: 0 auto; font-size: 13.5px; }

.red { display: flex; align-items: center; gap: 8px; }
.red-razmak { justify-content: space-between; }
.stub { display: flex; flex-direction: column; gap: 8px; }
.tiho { color: var(--mastilo-3); font-size: 12.5px; }
.sitno { font-size: 12px; }

/* ─────────────────────────── чат ─────────────────────────── */

.caskanje {
  display: flex; flex-direction: column; background: var(--hartija);
  border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--senka-s);
  overflow: hidden; flex: 1; min-height: 0;
}
.caskanje-glava { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--linija); }
.caskanje-ikona { width: 34px; height: 34px; border-radius: 10px; background: var(--kost-2);
  display: grid; place-items: center; color: var(--crven); flex: none; }
.poruke { flex: 1 1 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; min-height: 0; }

/* Кнопка «вниз»: появляется, когда лента отмотана вверх */
.caskanje { position: relative; }
.na-dno {
  position: absolute; right: 22px; bottom: 96px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hartija); border: 1px solid var(--linija-jaka); color: var(--mastilo-2);
  box-shadow: var(--senka-m); cursor: pointer; padding: 0;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .18s, transform .18s;
}
.na-dno.vidljiva { opacity: 1; pointer-events: auto; transform: none; }
.na-dno:hover { background: var(--crven); border-color: var(--crven); color: #fff; }
.na-dno .ikona { transform: rotate(90deg); }
.poruke-omot { display: flex; flex-direction: column; gap: 14px; }

.poruka { display: flex; gap: 11px; animation: pojavi .22s ease-out; }
@keyframes pojavi { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.poruka-ja { justify-content: flex-end; }
.poruka-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-family: var(--pismo-naslov);
  background: var(--kost-2); color: var(--crven);
}
.poruka-avatar .crtez { width: 18px; height: 18px; }
.poruka-avatar .crtez.slika { width: 100%; height: 100%; border-radius: inherit; }
.poruka-telo { min-width: 0; max-width: 88%; }
.poruka-ja .poruka-telo { max-width: 74%; }
.poruka-tekst { line-height: 1.62; }
.poruka-tekst > *:first-child { margin-top: 0; }
.poruka-tekst > *:last-child { margin-bottom: 0; }
.poruka-tekst p { margin: 0 0 .7em; }
.poruka-tekst ul, .poruka-tekst ol { margin: .4em 0 .7em; padding-left: 1.3em; }
.poruka-tekst li { margin: .2em 0; }
.poruka-tekst h3, .poruka-tekst h4 { margin: 1em 0 .4em; }
.poruka-tekst blockquote { margin: .6em 0; padding: .4em 0 .4em 12px;
  border-left: 3px solid var(--rakija); color: var(--mastilo-2); }
.poruka-tekst table { border-collapse: collapse; margin: .6em 0; font-size: 13px; width: 100%; }
.poruka-tekst th, .poruka-tekst td { border: 1px solid var(--linija); padding: 5px 9px; text-align: left; }
.poruka-tekst th { background: var(--kost-2); font-weight: 600; }
.poruka-on .poruka-tekst {
  background: var(--hartija-2); border: 1px solid var(--linija);
  padding: 12px 15px; border-radius: 4px 14px 14px 14px;
}
.poruka-ja .poruka-tekst {
  background: var(--plav-blagi); padding: 10px 14px; border-radius: 14px 4px 14px 14px;
}
.poruka-noge { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.poruka-ja .poruka-noge { justify-content: flex-end; }
.poruka-vreme { font-size: 11px; color: var(--mastilo-3); margin-left: auto; }
.poruka-ja .poruka-vreme { margin-left: 0; }

.kucanje { display: inline-flex; gap: 4px; padding: 6px 0; }
.kucanje span { width: 6px; height: 6px; border-radius: 50%; background: var(--mastilo-3); animation: skok 1.1s infinite; }
.kucanje span:nth-child(2) { animation-delay: .18s; }
.kucanje span:nth-child(3) { animation-delay: .36s; }
@keyframes skok { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.akcije { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.akcija {
  flex: 1 1 250px; min-width: 230px; max-width: 400px;
  border: 1px solid var(--linija-jaka); border-radius: var(--r-m);
  background: var(--hartija); overflow: hidden; transition: border-color .15s, opacity .2s;
  box-shadow: var(--senka-s);
}
.akcija-glava {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  background: var(--kost-2); border-bottom: 1px solid var(--linija);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mastilo-2);
}
.akcija-glava .ikona { color: var(--crven); }
.akcija-telo { padding: 11px 13px; font-size: 13.5px; }
.akcija-telo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.akcija-telo dt { color: var(--mastilo-3); }
.akcija-telo dd { margin: 0; }
.akcija-noge { display: flex; gap: 6px; padding: 9px 13px; border-top: 1px solid var(--linija); }
.akcija.primljena { border-color: var(--zelena); opacity: .75; }
.akcija.odbijena { opacity: .4; }
.akcija.greska { border-color: var(--crven); }

.unos { flex: none; border-top: 1px solid var(--linija); padding: 13px 18px 15px; background: var(--hartija); }
.unos-polje {
  display: flex; align-items: flex-end; gap: 9px;
  border: 1px solid var(--linija-jaka); border-radius: 24px;
  background: var(--kost); padding: 6px 6px 6px 16px;
  transition: border-color .12s, box-shadow .12s;
}
.unos-polje:focus-within { border-color: var(--plav); box-shadow: 0 0 0 3px var(--plav-blagi); }
.unos-polje textarea {
  flex: 1; border: none; background: none; outline: none; resize: none;
  max-height: 200px; line-height: 1.5; padding: 7px 0; font-size: 14.5px;
}
.unos-alati { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.predlog {
  padding: 4px 11px; border-radius: 20px; border: 1px dashed var(--linija-jaka);
  background: none; color: var(--mastilo-2); font-size: 12.5px; cursor: pointer;
}
.predlog:hover { border-style: solid; border-color: var(--crven); color: var(--crven); }

/* ────────────────────── правый рельс ────────────────────── */

.mini-graf { width: 100%; height: 190px; display: block; }
.graf-legenda-mini { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--mastilo-2); }
.graf-legenda-mini span { display: inline-flex; align-items: center; gap: 4px; }
.graf-tacka { width: 8px; height: 8px; border-radius: 50%; }

.krugovi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.krug { text-align: center; min-width: 0; }
.krug svg { display: block; margin: 0 auto 7px; }
.krug-ime {
  font-size: 11.5px; color: var(--mastilo-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.krug-udeo {
  font-size: 11px; color: var(--mastilo-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.beleske-spisak { display: grid; }
.beleska-red {
  display: grid; grid-template-columns: 32px minmax(0, 1fr);
  align-items: center; gap: 11px; padding: 9px 0; cursor: pointer;
  border-top: 1px solid var(--linija);
}
.beleska-red:first-child { border-top: none; padding-top: 2px; }
.beleska-red:hover .beleska-naslov { color: var(--crven); }
.beleska-ikona {
  width: 32px; height: 32px; border-radius: 9px; background: var(--kost-2); color: var(--mastilo-2);
  display: grid; place-items: center;
}
.beleska-tekst { min-width: 0; }
.beleska-naslov {
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beleska-meta {
  font-size: 11.5px; color: var(--mastilo-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rel-foto {
  height: 94px; margin: 12px -20px -18px; width: calc(100% + 40px);
  border-radius: 0 0 var(--r-l) var(--r-l);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 52%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 52%);
}
.rel-foto.foto-vektor { height: 76px; margin: 10px 0 0; width: 100%; }
/* Гравюра нарисована тёмной линией по светлой бумаге — в тёмной теме
   выворачиваем, иначе на карточке горит светлый прямоугольник. */
[data-tema="mrak"] .rel-foto img { filter: invert(1) hue-rotate(180deg); opacity: .5; }
.rel-foto.foto-vektor .crtez { color: var(--rakija); opacity: .32; }

/* ─────────────────────────── словарь ─────────────────────────── */

.rec-kartica {
  background: var(--hartija); border: 1px solid var(--linija); border-radius: var(--r-l);
  padding: 15px 17px 16px 19px; cursor: pointer; position: relative; overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
  box-shadow: var(--senka-s);
  transition: border-color .16s, box-shadow .2s, transform .16s cubic-bezier(.2,.7,.3,1);
}
.rec-kartica:hover { border-color: var(--linija-jaka); box-shadow: var(--senka-m); transform: translateY(-2px); }
.rec-kartica::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--mastilo-3);
}
.rec-kartica[data-status="new"]::after { background: var(--rakija); }
.rec-kartica[data-status="learning"]::after { background: var(--plav); }
.rec-kartica[data-status="known"]::after { background: var(--zelena); }
.rec-kartica[data-status="leech"]::after { background: var(--crven); }
.rec-lema { font-family: var(--pismo-naslov); font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; }
.rec-prevod { color: var(--mastilo-2); font-size: 13px; margin-top: 2px; }
.rec-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 10px; }

.filteri { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 16px; }
.filteri .polje { width: auto; flex: 1; min-width: 180px; }

/* ─────────────────────────── упражнения ─────────────────────────── */

.zadatak { margin-bottom: 14px; }
.zadatak-glava { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.zadatak-broj {
  width: 27px; height: 27px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--kost-2); font-weight: 700; font-size: 13px; color: var(--mastilo-2);
  font-family: var(--pismo-naslov);
}
.zadatak.tacan .zadatak-broj { background: var(--zelena); color: #fff; }
.zadatak.netacan .zadatak-broj { background: var(--crven); color: #fff; }
.zadatak-tekst { font-size: 15px; line-height: 1.95; font-family: var(--pismo-naslov); }
.praznina {
  display: inline-block; min-width: 96px; padding: 1px 7px; margin: 0 2px;
  border: none; border-bottom: 2px solid var(--plav); background: var(--plav-blagi);
  border-radius: 4px 4px 0 0; text-align: center; outline: none;
  font-family: var(--pismo-telo); font-size: 14px;
}
.praznina:focus { background: var(--kost-2); border-bottom-color: var(--crven); }
.praznina.tacna { border-bottom-color: var(--zelena); background: var(--zelena-blaga); }
.praznina.netacna { border-bottom-color: var(--crven); background: var(--crven-blagi); text-decoration: line-through; }
.praznina-broj { font-size: 10px; color: var(--mastilo-3); vertical-align: super; }

.izbori { display: grid; gap: 6px; margin: 8px 0; }
.izbor {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  border: 1px solid var(--linija); border-radius: var(--r-s); background: var(--hartija);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.izbor:hover { border-color: var(--plav); background: var(--plav-blagi); }
.izbor.izabran { border-color: var(--plav); background: var(--plav-blagi); font-weight: 600; }
.izbor.tacan { border-color: var(--zelena); background: var(--zelena-blaga); }
.izbor.netacan { border-color: var(--crven); background: var(--crven-blagi); }
.izbor-slovo { width: 21px; height: 21px; border-radius: 5px; display: grid; place-items: center;
  flex: none; background: var(--kost-2); font-size: 11.5px; font-weight: 700; }

.delovi { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.deo { padding: 5px 11px; border: 1px solid var(--linija-jaka); border-radius: var(--r-s);
  background: var(--hartija); cursor: pointer; font-family: var(--pismo-naslov); font-size: 14.5px; }
.deo:hover { border-color: var(--plav); }
.deo.upotrebljen { opacity: .3; pointer-events: none; }
.sastav { min-height: 44px; padding: 8px 11px; border: 1px dashed var(--linija-jaka);
  border-radius: var(--r-s); background: var(--kost-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sastav:empty::before { content: attr(data-prazno); color: var(--mastilo-3); font-size: 13px; }

.ocena { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-m);
  border-left: 3px solid var(--mastilo-3); background: var(--kost-2); font-size: 13.5px; }
.ocena.dobra { border-left-color: var(--zelena); background: var(--zelena-blaga); }
.ocena.losa { border-left-color: var(--crven); background: var(--crven-blagi); }
.ocena-glava { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-weight: 700; }
.ocena-bodovi { font-family: var(--pismo-naslov); font-size: 1.1rem; }
.ocena dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 12.5px; }
.ocena dt { color: var(--mastilo-3); }
.ocena dd { margin: 0; }
.ispravka { font-family: var(--pismo-naslov); font-size: 14.5px; }
.ispravka del { color: var(--crven); text-decoration-thickness: 1px; }
.ispravka ins { color: var(--zelena); text-decoration: none; font-weight: 600; }

.rubrika { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.rubrika-stavka { font-size: 11.5px; color: var(--mastilo-2); }
.rubrika-traka { width: 54px; height: 4px; border-radius: 3px; background: var(--linija); margin-top: 3px; overflow: hidden; }
.rubrika-traka i { display: block; height: 100%; background: var(--plav); }

/* ─────────────────────────── прогресс ─────────────────────────── */

.brojka { text-align: center; padding: 18px 12px; }
.brojka-vrednost { font-family: var(--pismo-naslov); font-size: 2.05rem; font-weight: 700; line-height: 1; }
.brojka-ime { font-size: 11.5px; color: var(--mastilo-3); margin-top: 5px; letter-spacing: .03em; }

.traka-red {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px 46px 124px; gap: 16px;
  align-items: center; padding: 9px 0; border-top: 1px solid var(--linija);
}
.traka-red:first-of-type { border-top: none; }
.traka-red-3 { grid-template-columns: minmax(0, 1fr) 128px 46px; }
.traka-red-podatak { grid-template-columns: 180px minmax(0, 1fr) auto; }
.traka-red .procenat {
  font-size: 12.5px; font-weight: 600; color: var(--mastilo-2); text-align: right;
  font-variant-numeric: tabular-nums;
}
.traka-red .dugme { width: 100%; justify-content: center; }
.traka { height: 8px; border-radius: 4px; }
.traka { height: 7px; border-radius: 4px; background: var(--linija); overflow: hidden; }
.traka i { display: block; height: 100%; border-radius: 4px; transition: width .4s ease-out; }
.traka i.nisko { background: var(--crven); }
.traka i.srednje { background: var(--rakija); }
.traka i.visoko { background: var(--zelena); }

.toplota { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 3px; }
.toplota-dan { aspect-ratio: 1; border-radius: 3px; background: var(--linija); }

/* ─────────────────── граф знаний: сцена и окно узла ─────────────────── */

.graf-alati { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 2px 12px; }
.graf-legenda { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--mastilo-2); }
.graf-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.graf-vrsta {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--linija); background: var(--hartija); color: var(--mastilo-2);
  font-size: 12px; cursor: pointer; transition: opacity .15s, border-color .15s;
}
.graf-vrsta:hover { border-color: var(--linija-jaka); }
.graf-vrsta.iskljucen { opacity: .42; }
.dugme.uklj { border-color: var(--crven); color: var(--crven); }

.graf-scena {
  display: grid; grid-template-columns: minmax(0, 1fr) 344px;
  grid-template-rows: minmax(0, 1fr); gap: 14px; height: 560px; min-height: 0;
}
.graf-platno {
  width: 100%; height: 100%; display: block; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 50% 42%, var(--hartija), var(--kost) 78%);
  border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--senka-s);
}
.graf-platno.vuce { cursor: grabbing; }

.graf-okno {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--hartija); border: 1px solid var(--linija);
  border-radius: var(--r-l); box-shadow: var(--senka-s);
}
.graf-okno-glava {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px;
  border-bottom: 1px solid var(--linija);
}
.graf-okno-glava .graf-tacka { margin-top: 7px; }
.graf-okno-ime { margin: 0 0 2px; font-size: 1.12rem; line-height: 1.22; }
.graf-okno-telo {
  flex: 1; min-height: 0; overflow-y: auto; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 13px;
}
.graf-okno-noge {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--linija);
}
.graf-okno-noge .tiho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graf-okno-prazno { margin: auto; padding: 30px 22px; text-align: center; color: var(--mastilo-3); }
.graf-okno-prazno .crtez { width: 96px; height: 96px; margin: 0 auto 10px; opacity: .5; }
.graf-okno-prazno h3 { margin: 0 0 6px; font-size: 1rem; color: var(--mastilo-2); }
.graf-okno-prazno p { margin: 0; font-size: 12.5px; }

.graf-odeljak > h4 {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mastilo-3);
}
.graf-polja { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.graf-polja dt { color: var(--mastilo-3); }
.graf-polja dd { margin: 0; }
.graf-lista { margin: 0; padding-left: 17px; font-size: 13px; display: grid; gap: 3px; }
.graf-tekst { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.graf-primer { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.graf-primer > div { min-width: 0; }
.graf-znacke, .graf-veze { display: flex; flex-wrap: wrap; gap: 6px; }
.graf-veza {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--linija);
  background: var(--kost-2); color: var(--mastilo); font-size: 12px; cursor: pointer;
}
.graf-veza:hover { border-color: var(--crven); color: var(--crven); }

@media (max-width: 1080px) {
  .graf-scena { grid-template-columns: 1fr; height: auto; }
  .graf-platno { height: 58vh; min-height: 360px; }
  .graf-okno { max-height: 70vh; }
}

/* ─────────────────── всплывающее ─────────────────── */

.poruke-sistem { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 8px; max-width: 360px; }
.obavestenje {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px;
  background: var(--hartija); border: 1px solid var(--linija-jaka); border-left: 3px solid var(--plav);
  border-radius: var(--r-s); box-shadow: var(--senka-l); font-size: 13.5px;
  animation: uleti .2s ease-out;
}
@keyframes uleti { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.obavestenje.uspeh { border-left-color: var(--zelena); }
.obavestenje.greska { border-left-color: var(--crven); }

.zavesa {
  position: fixed; inset: 0; background: rgba(20, 26, 35, .55); backdrop-filter: blur(3px);
  z-index: 100; display: grid; place-items: center; padding: 24px; animation: pojavi .15s ease-out;
}
.prozor {
  background: var(--hartija); border-radius: var(--r-l); box-shadow: var(--senka-l);
  max-width: 720px; width: 100%; max-height: 86vh; display: flex; flex-direction: column;
  border: 1px solid var(--linija);
}
.prozor-glava { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linija); }
.prozor-glava h2 { margin: 0; flex: 1; }
.prozor-telo { padding: 16px 18px; overflow-y: auto; }
.prozor-noge { padding: 12px 18px; border-top: 1px solid var(--linija); display: flex; gap: 8px; justify-content: flex-end; }

.ucitavanje { display: inline-flex; align-items: center; gap: 8px; color: var(--mastilo-3); font-size: 13px; }
.vrtiska { width: 15px; height: 15px; border: 2px solid var(--linija-jaka); border-top-color: var(--crven);
  border-radius: 50%; animation: vrti .7s linear infinite; }
@keyframes vrti { to { transform: rotate(360deg); } }

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--linija); }
.tabela th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mastilo-3); font-weight: 600; }
.tabela tbody tr:hover { background: var(--kost-2); }

.lista-stavka {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--linija); border-radius: var(--r-m); background: var(--hartija);
  cursor: pointer; box-shadow: var(--senka-s);
  transition: border-color .16s, box-shadow .2s, transform .16s cubic-bezier(.2,.7,.3,1);
}
.lista-stavka:hover { border-color: var(--linija-jaka); box-shadow: var(--senka-m); transform: translateY(-1px); }
.lista-stavka + .lista-stavka { margin-top: 8px; }
.lista-stavka > div:nth-child(2) { min-width: 0; }
.lista-stavka .tiho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabovi { display: flex; gap: 4px; border-bottom: 1px solid var(--linija); margin-bottom: 18px; }
.tab { padding: 9px 16px; border: none; background: none; cursor: pointer; color: var(--mastilo-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px;
  transition: color .14s, border-color .14s; }
.tab:hover { color: var(--mastilo); }
.tab.aktivan { color: var(--crven); border-bottom-color: var(--crven); font-weight: 600; }

@media (max-height: 800px) {
  .celo { min-height: 148px; }
}

/* Планшет: сайдбар сворачивается в полосу иконок. На телефоне он выезжающий — см. конец файла. */
@media (min-width: 761px) and (max-width: 1000px) {
  .app { grid-template-columns: 96px minmax(0, 1fr); }
  /* Название прячем, значок оставляем: это ссылка на главную */
  .fioka-znak > div:not(.fioka-znak-ikona), .fioka-stavka span:not(.fioka-broj), .fioka-naslov,
  .fioka-podnozje .fioka-ime-korisnika, .fioka-podnozje .fioka-nivo,
  .fioka-stanje span, .fioka-prekidaci { display: none; }
  .fioka-znak { padding: 18px 8px 14px 44px; justify-content: center; }
  .fioka-meni { padding: 6px 8px 12px 44px; }
  .fioka-stavka { justify-content: center; padding: 11px 8px; }
  .fioka-podnozje { padding: 12px 8px 12px 44px; justify-items: center; }
  .fioka-korisnik { flex-direction: column; gap: 6px; }
}

@media (max-width: 760px) {
  .celo { grid-template-columns: 1fr; }
  .citat { text-align: left; max-width: none; }
  .citat-ornament { margin-left: 0; }
  .celo-pozadina { opacity: .14; }
}

/* ───────────────── навыки, разговоры и память ───────────────── */

.caskanje-alati { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.koraci {
  display: flex; align-items: center; gap: 0; padding: 9px 18px;
  border-bottom: 1px solid var(--linija); background: var(--hartija-2);
  overflow-x: auto;
}
.korak { display: flex; align-items: center; gap: 7px; flex: none; padding-right: 8px; }
.korak-tacka {
  width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; background: var(--kost-2); color: var(--mastilo-3);
  border: 1px solid var(--linija);
}
.korak.prosao .korak-tacka { background: var(--zelena); color: #fff; border-color: transparent; }
.korak.tekuci .korak-tacka { background: var(--crven); color: #fff; border-color: transparent; }
.korak-ime { font-size: 11.5px; color: var(--mastilo-3); white-space: nowrap; }
.korak.tekuci .korak-ime { color: var(--crven); font-weight: 600; }
.korak.prosao .korak-ime { color: var(--mastilo-2); }
.korak-crta { width: 14px; height: 1px; background: var(--linija-jaka); flex: none; margin-right: 8px; }

.izbori-dugmad { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.izbor-dugme {
  padding: 6px 13px; border-radius: 18px; border: 1px solid var(--crven);
  background: var(--crven-blagi); color: var(--crven); font-size: 13px; cursor: pointer;
  transition: background .12s, color .12s;
}
.izbor-dugme:hover { background: var(--crven); color: #fff; }

.secanje {
  margin-bottom: 11px; padding: 10px 13px; border-radius: var(--r-m);
  background: rgba(189, 132, 60, .09); border-left: 3px solid var(--rakija); font-size: 13px;
}
.secanje-glava {
  display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--rakija); margin-bottom: 7px;
}
.secanje-stavka { padding: 4px 0; border-top: 1px solid rgba(189, 132, 60, .18); }
.secanje-stavka:first-of-type { border-top: none; }
.secanje-naziv { font-family: var(--pismo-naslov); font-weight: 600; }
.secanje-presuda { color: var(--mastilo-2); font-size: 12.5px; }
.secanje-meta { color: var(--mastilo-3); font-size: 11.5px; }

.spisak-vestina { display: grid; gap: 9px; }
.vestina-karta {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; text-align: left;
  border: 1px solid var(--linija); border-radius: var(--r-m); background: var(--hartija);
  cursor: pointer; transition: border-color .13s, box-shadow .13s, transform .08s;
  width: 100%;
}
.vestina-karta:hover { border-color: var(--crven); box-shadow: var(--senka-m); transform: translateY(-1px); }
.vestina-ikona {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--crven-blagi); color: var(--crven);
}
.vestina-ime { font-family: var(--pismo-naslov); font-size: 1.04rem; font-weight: 600; }
.vestina-opis { font-size: 12.5px; color: var(--mastilo-2); margin: 2px 0 6px; }
.vestina-koraci { display: flex; flex-wrap: wrap; gap: 4px; }
.vestina-korak {
  font-size: 11px; color: var(--mastilo-3); background: var(--kost-2);
  padding: 1px 7px; border-radius: 10px;
}

.razgovor-red {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--linija); border-radius: var(--r-m); background: var(--hartija);
  cursor: pointer; transition: border-color .12s;
}
.razgovor-red:hover { border-color: var(--linija-jaka); }
.razgovor-red.tekuci { border-color: var(--crven); background: var(--crven-blagi); }
.razgovor-naslov { font-size: 13.5px; font-weight: 600; }
.razgovor-meta { font-size: 11.5px; color: var(--mastilo-3); }
.razgovor-akcije { display: flex; gap: 3px; margin-left: auto; }

/* ──────────── быстрое добавление слов и словарь ──────────── */

.brza-traka {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 10px 14px; background: var(--hartija); border: 1px solid var(--linija);
  border-radius: var(--r-l); box-shadow: var(--senka-s);
}
.brza-traka-ime {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--pismo-naslov); font-size: 14.5px; font-weight: 600;
  padding-right: 12px; border-right: 1px solid var(--linija); white-space: nowrap;
}
.brza-traka .ikona { color: var(--crven); flex: none; }
@media (max-width: 720px) { .brza-traka-ime { border-right: none; padding-right: 0; } }
.brza-traka .polje { flex: 1; border: none; background: none; padding: 4px 0; }
.brza-traka .polje:focus { box-shadow: none; }
@media (max-width: 640px) { .brza-traka { flex-wrap: wrap; } .brza-traka .polje { min-width: 100%; } }

.nacrti { display: grid; gap: 10px; }
.karta-nacrt {
  display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--linija);
  border-left: 3px solid var(--zelena); border-radius: var(--r-m); background: var(--hartija-2);
}
.karta-nacrt.sumnjiva { border-left-color: var(--crven); opacity: .75; }
.karta-nacrt-glava { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.karta-nacrt-glava input { margin-top: 5px; width: 16px; height: 16px; flex: none; accent-color: var(--crven); }
.karta-nacrt-lema { font-family: var(--pismo-naslov); font-size: 1.15rem; }
.karta-nacrt-prevod { color: var(--mastilo-2); font-size: 13.5px; margin-top: 2px; }
.znacke-red { display: flex; flex-wrap: wrap; gap: 6px; }

.odrednica h3 { font-family: var(--pismo-naslov); }
.odrednica + .odrednica { margin-top: 12px; }
.odrednica .graf-lista { padding-left: 20px; }

/* ──────────────────────── испит ──────────────────────── */

.ispit-vestina + .ispit-vestina { margin-top: 10px; }
.ispit-vestina .graf-lista { margin-top: 4px; }
.ispit-glava { position: sticky; top: 0; z-index: 5; }
.ispit-naslov-vestine {
  margin: 22px 0 2px; font-size: 1.25rem; color: var(--crven);
  border-bottom: 1px solid var(--linija); padding-bottom: 6px;
}
.ispit-trake { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.ispit-traka { display: grid; gap: 4px; font-size: 13px; }

.zadatak-ispita { border-left: 3px solid var(--linija-jaka); }
.zadatak-ispita[data-skill="slusanje"] { border-left-color: var(--plav); }
.zadatak-ispita[data-skill="citanje"] { border-left-color: var(--zelena); }
.zadatak-ispita[data-skill="pisanje"] { border-left-color: var(--rakija); }
.zadatak-ispita[data-skill="upotreba"] { border-left-color: var(--crven); }
.zadatak-broj { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mastilo-3); }
.zadatak-nalog { font-family: var(--pismo-naslov); font-size: 1.05rem; margin: 2px 0 4px; }

.ispit-zvuk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--kost-2); border-radius: var(--r-m); }
.ispit-zvuk audio { height: 34px; flex: 1; min-width: 220px; }
.ispit-zvuk .ikona { color: var(--crven); }

.ispit-tekst { line-height: 1.65; white-space: pre-wrap; }
.ispit-tekst-blok { padding: 10px 12px; background: var(--hartija-2); border: 1px solid var(--linija);
  border-radius: var(--r-m); }
.ispit-tekst-blok + .ispit-tekst-blok { margin-top: 8px; }
.praznina {
  display: inline-block; min-width: 90px; margin: 0 3px; padding: 1px 6px;
  border: none; border-bottom: 1.5px solid var(--crven); background: transparent;
  font: inherit; color: var(--mastilo); text-align: center;
}
.praznina:focus { outline: none; background: var(--crven-blagi); }
.ispit-tvrdnja { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px dashed var(--linija); }
.ispit-izbor { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 6px 0; }
.ispit-izbor label { cursor: pointer; }
.ispit-izbor input, .ispit-tvrdnja input { accent-color: var(--crven); }
.kljuc-zadatka { margin-top: 8px; }
.kljuc-zadatka summary { cursor: pointer; }
.kljuc-zadatka[open] summary { margin-bottom: 6px; }

/* ──────────── правка пустых состояний внутри ленты ──────────── */

.caskanje .prazno { padding: 26px 20px 20px; }
.caskanje .prazno .crtez.slika { width: 196px; height: 148px; margin-bottom: 12px; }
.caskanje .prazno h3 { margin: 0 0 6px; }

/* ─────────────────────────── главная ─────────────────────────── */

.pocetna-kolona { display: grid; gap: 18px; align-content: start; min-width: 0; }
.danas-naslov { margin: 2px 0 10px; font-size: 1.2rem; }
.danas-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.danas-karta { display: flex; flex-direction: column; gap: 8px; }
.danas-mreza .kartica + .kartica { margin-top: 0; }
.danas-karta .kartica-naslov { margin-bottom: 0; }
.danas-opis { flex: 1; color: var(--mastilo-2); font-size: 13.5px; line-height: 1.45; }
.danas-karta .dugme { align-self: flex-start; }
/* Карточка, без которой платформа не работает (нет ключа), — заметнее остальных */
.danas-naglasak { border-color: var(--crven); box-shadow: 0 0 0 3px var(--crven-blagi); }

/* ═══════════════════════════ телефон ═══════════════════════════
   До 760px сайдбар не помещается даже полосой иконок: он становится
   выезжающей панелью по кнопке меню, а контент получает всю ширину экрана.
   Блок стоит последним в файле — он должен перекрывать общие правила. */

.meni-dugme { display: none; }
.fioka-zavesa { display: none; }

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  /* visibility прячет пункты закрытой панели и от клавиатуры, а не только от глаз */
  .fioka {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(86vw, 320px);
    transform: translateX(-102%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .24s;
    box-shadow: 0 0 44px rgba(0, 0, 0, .4);
  }
  .app.meni-otvoren .fioka {
    transform: none; visibility: visible;
    transition: transform .24s cubic-bezier(.2, .7, .3, 1);
  }
  .fioka-zavesa {
    display: block; position: fixed; inset: 0; z-index: 79;
    background: rgba(20, 26, 35, .5); opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  .app.meni-otvoren .fioka-zavesa { opacity: 1; pointer-events: auto; }

  .meni-dugme {
    display: inline-grid; place-items: center; flex: none;
    width: 40px; height: 40px; padding: 0; border-radius: var(--r-m);
    border: 1px solid var(--linija-jaka); background: var(--hartija); color: var(--mastilo);
    cursor: pointer;
  }
  .meni-dugme .ikona { width: 22px; height: 22px; }

  /* Верхняя панель: меню слева, действия экрана — лентой, которая листается вбок */
  .vrh { padding: 0 10px; gap: 8px; }
  .vrh-desno { min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
  .vrh-desno::-webkit-scrollbar { display: none; }
  .vrh-desno > * { flex: none; }

  .omot { padding: 14px 12px 28px; }

  /* Заглавные полосы: меньше отступов, снимок уходит фоном под текст */
  .celo { margin: -14px -12px 10px; padding: 18px 16px 16px; min-height: 0; }
  .celo h1 { font-size: 1.55rem; }
  .celo-foto { left: 0; opacity: .18; }
  .ekran-traka { margin: -14px -12px 14px; padding: 20px 16px 16px; min-height: 0; flex-wrap: wrap; }
  .ekran-traka-foto { width: 100%; opacity: .2; }
  .ekran-traka h1 { font-size: 1.5rem; }

  /* Быстрые действия на главной — сеткой 2×2: снимок уходит фоном вправо, текст слева */
  .brze { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 2px; }
  .brza { min-height: 104px; padding: 12px; border-radius: var(--r-m); }
  .brza-foto { width: 50%; }
  .brza-sadrzaj { max-width: 78%; }
  .brza-ikona { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 7px; }
  .brza-naslov { font-size: .98rem; }
  .brza-opis { font-size: 12.5px; }
  .danas-mreza { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* Экран чата — сам чат во весь экран, без рамки карточки и отступов страницы */
  .omot-caskanje { padding: 0; }
  .omot-caskanje .glava-kolona { height: calc(100dvh - var(--vrh)); min-height: 0; }
  .omot-caskanje .caskanje { border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  .caskanje-glava { padding: 8px 10px; gap: 9px; }
  #pod-sesije { display: none; }
  .poruke { padding: 14px 10px; }
  .poruke-omot { gap: 16px; }
  .poruka-avatar { display: none; }
  .poruka-telo { max-width: 100%; }
  .poruka-ja .poruka-telo { max-width: 90%; }
  .poruka-tekst { font-size: 16px; line-height: 1.55; }
  .poruka-on .poruka-tekst { padding: 11px 13px; }
  .poruka-ja .poruka-tekst { padding: 10px 13px; }
  .unos { padding: 8px 10px 10px; }
  .unos-polje { padding: 5px 5px 5px 14px; }
  .unos-alati { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
  .unos-alati::-webkit-scrollbar { display: none; }
  .unos-alati > * { flex: none; }
  .predlog { font-size: 13.5px; padding: 6px 12px; }
  .dugme-krug { width: 42px; height: 42px; }
  .na-dno { right: 12px; bottom: 110px; }

  /* 16px в полях ввода обязательно: при меньшем шрифте Safari на iPhone при фокусе
     приближает страницу и обратно не отдаляет — всё становится крупным и узким. */
  input, select, textarea, .polje, .unos-polje textarea { font-size: 16px; }

  /* Всё остальное — крупнее: размеры рассчитаны на мышь и широкий экран, а тут палец */
  :root { --vrh: 56px; }
  body { font-size: 15.5px; }
  .tiho { font-size: 13.5px; }
  .sitno { font-size: 13px; }
  .dugme { font-size: 14.5px; padding: 9px 14px; }
  .dugme-s { font-size: 13.5px; padding: 6px 11px; }
  .prekidac-vrh { font-size: 13.5px; padding: 7px 12px; }
  .znacka { font-size: 12.5px; }
  .tab { font-size: 15px; }
  .fioka-stavka { font-size: 16px; padding: 12px 13px; }

  /* Вкладки листаются вбок, а не распирают страницу */
  .tabovi { overflow-x: auto; scrollbar-width: none; }
  .tabovi::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 9px 12px; }

  .kartica { padding: 14px; }
  .red { flex-wrap: wrap; }
  /* Длинная подпись кнопки переносится, а не распирает карточку */
  .dugme { white-space: normal; max-width: 100%; }
  .mreza-2, .mreza-3 { grid-template-columns: minmax(0, 1fr); }
  .tabela { display: block; overflow-x: auto; }

  /* Строки со шкалами: название, шкала и цифра в ряд, кнопка — отдельной строкой.
     Строки «название — значение»: название над значением. */
  .traka-red, .traka-red-3 { grid-template-columns: minmax(0, 1fr) 72px 40px; gap: 6px 10px; }
  .traka-red > :nth-child(n+4) { grid-column: 1 / -1; }
  .traka-red-podatak { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .traka-red-podatak > :first-child { grid-column: 1 / -1; }

  /* Уведомления — сверху: внизу они на 4–7 секунд закрывали бы поле ввода чата */
  .poruke-sistem { left: 10px; right: 10px; top: calc(var(--vrh) + 6px); bottom: auto; max-width: none; }
  .zavesa { padding: 10px; }
  .prozor { max-height: 92dvh; }
  .prozor-glava, .prozor-telo, .prozor-noge { padding-left: 14px; padding-right: 14px; }
  .prozor-noge { flex-wrap: wrap; }
}