:root{
  --bg:#07060c;
  --card:#12101a;
  --card2:#181523;
  --text:#f2f0ff;
  --muted:#b9b3d6;
  --line:#2a2440;

  --accent:#ff4fd8;
  --accent2:#9b5cff;

  --orange:#ff9642;
  --navy:#112a68;

  --glow1: rgba(255,79,216,.30);
  --glow2: rgba(155,92,255,.28);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --shadow2: 0 12px 30px rgba(0,0,0,.45);
  --radius: 18px;

  --font-body: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* ✅ PROMJENA FONTA ZA NASLOVE */
  --font-card-title: "Thsmire Regular", "Thsmire", serif;

  --titleGlow: 0 0 10px rgba(155,92,255,.14), 0 0 16px rgba(255,79,216,.10);
}

*{box-sizing:border-box}
html,body{height:100%}

html{ background: var(--bg) !important; }

body{
  margin:0;
  font-family: var(--font-body);
  font-size:17px;
  line-height:1.45;
  background: var(--bg) !important;
  color:var(--text);
  position:relative;
  min-height:100vh;
}

.app{
  min-height:100vh;
  background: var(--bg);
}

body::before{
  content:"";
  position:fixed;
  left:0; right:0; top:0;
  height:420px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1200px 650px at 15% -10%, rgba(155,92,255,.28), transparent 60%),
    radial-gradient(900px 520px at 92% 12%, rgba(255,79,216,.22), transparent 56%),
    radial-gradient(700px 420px at 55% 0%, rgba(255,150,66,.10), transparent 55%);
}

body::after{
  content:"";
  position:fixed;
  left:0; right:0; bottom:-140px;
  height:260px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(800px 260px at 50% 50%, rgba(155,92,255,.14), transparent 70%),
    radial-gradient(700px 240px at 35% 70%, rgba(255,79,216,.12), transparent 70%);
}

a{color:inherit; text-decoration:none}
.container{max-width:920px;margin:0 auto;padding:18px}

/* ---------------- Cards ---------------- */
.card{
  border-radius: var(--radius);
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(42,36,64,.95);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, rgba(155,92,255,.22), rgba(255,79,216,.18), rgba(255,150,66,.10));
  filter: blur(14px);
  opacity:.55;
  pointer-events:none;
}

.card > *{ position:relative; z-index:1; }

.row{display:flex;gap:12px;align-items:center}
.col{display:flex;flex-direction:column;gap:10px}

/* ===============================
   ✅ NASLOVI – THSMIRE
================================ */
.card .h1,
.card .h2,
.card .topTitle,
.card .blogTitle,
.card .popupTitle,
.card h1,
.card h2,
.card h3{
  font-family: var(--font-card-title);
  font-weight: 400;
  letter-spacing: .02em;
  text-shadow: var(--titleGlow);
}

.card .h1,
.card h1{
  font-size: 30px;
  line-height: 1.08;
  margin: 0;
}

.card .h2,
.card h2,
.card h3{
  font-size: 22px;
  line-height: 1.12;
  margin: 0;
}

.card .topTitle{
  line-height: 1.08;
}

@media(max-width:520px){
  .card .h1,
  .card h1{ font-size: 26px; }

  .card .h2,
  .card h2,
  .card h3{ font-size: 20px; }
}

/* ---------------- Buttons ---------------- */
.btn{
  border:1px solid rgba(255,79,216,.35);
  background: linear-gradient(90deg, rgba(155,92,255,.95), rgba(255,79,216,.95));
  color:#fff;
  padding:13px 16px;
  border-radius:14px;
  font-weight:850;
  letter-spacing:.01em;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 24px rgba(255,79,216,.12);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 34px rgba(155,92,255,.20);
  filter: saturate(1.12);
}

.btn:active{transform:translateY(1px)}

.btn.secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(155,92,255,.35);
  color:var(--text);
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

.btn.secondary:hover{
  border-color: rgba(255,79,216,.45);
  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    0 0 26px rgba(255,79,216,.12);
}


/* focus ring (wow + accessibility) */
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.navBtn:focus-visible,
.dayBtn:focus-visible,
.dayBox:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(155,92,255,.18), 0 0 0 1px rgba(255,79,216,.35) inset;
  border-color: rgba(255,79,216,.50);
}

/* ---------------- Inputs (WOW) ---------------- */
.input,
.textarea{
  width:100%;
  background:
    radial-gradient(120px 80px at 20% 15%, rgba(155,92,255,.10), transparent 60%),
    radial-gradient(140px 90px at 90% 70%, rgba(255,79,216,.08), transparent 60%),
    var(--card);
  border:1px solid rgba(42,36,64,.95);
  color:var(--text);
  padding:13px 12px;
  border-radius:14px;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.input:hover,
.textarea:hover{
  border-color: rgba(155,92,255,.38);
}
.textarea{min-height:120px; resize:vertical;}

.small{color:var(--muted); font-size:14px}
.h1{font-size:26px;font-weight:900;margin:0}
.h2{font-size:18px;font-weight:900;margin:0}
.topTitle{font-weight:950;line-height:1.05; letter-spacing:.01em}

/* ---------------- Topbar ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(7,6,12,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(42,36,64,.7);
}
.topbarInner{
  max-width:920px;margin:0 auto;
  padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

.avatar{
  width:44px;height:44px;border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,79,216,.55);
  box-shadow: 0 0 0 3px rgba(155,92,255,.14);
  background:#000;
}

.badge{
  padding:7px 11px;border-radius:999px;
  font-size:12px;font-weight:950;letter-spacing:.03em;
}
.badge.basic{background:rgba(255,150,66,.16);border:1px solid rgba(255,150,66,.35);color:#ffd3b0}
.badge.premium{background:rgba(17,42,104,.35);border:1px solid rgba(120,160,255,.35);color:#d6e6ff}
.badge.none{background:rgba(185,179,214,.10);border:1px solid rgba(185,179,214,.25);color:var(--muted)}

.grid{display:grid;gap:12px}
.grid2{grid-template-columns:1fr 1fr}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}

.navBtn{
  width:46px;height:46px;border-radius:14px;
  border:1px solid rgba(42,36,64,.95);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.navBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(155,92,255,.38);
  box-shadow: 0 0 22px rgba(155,92,255,.10);
}
.navBtn:active{transform:translateY(1px)}

/* ---------------- Drawer (ostaje crn) ---------------- */
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:295px;
  background:#000;
  border-right:1px solid var(--line);
  transform:translateX(-110%);
  transition:transform .2s ease;
  z-index:100;
  padding:16px;
  box-shadow: 20px 0 60px rgba(0,0,0,.75);
}
.drawer.open{transform:translateX(0)}

.overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  display:none; z-index:99;
}
.overlay.show{display:block}

/* Menu linkovi */
.menuLink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  color: var(--text);
  background:#000;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.menuLink:hover{
  transform: translateY(-1px);
  border-color: rgba(155,92,255,.30);
  box-shadow: 0 0 22px rgba(255,79,216,.10);
}
.menuLink.disabled{opacity:.55; pointer-events:none}

.menuLink.logout,
.menuLink.logout:hover{
  background:#000 !important;
  border-color: var(--line);
  box-shadow:none;
  transform:none;
}

.menuDot{
  width:9px;height:9px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent2));
  box-shadow: 0 0 12px rgba(255,79,216,.35);
  flex-shrink:0;
}

/* Blog cards */
.blogCard{display:flex; gap:12px}
.blogImg{
  width:92px;height:72px;border-radius:14px;object-fit:cover;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.blogTitle{font-weight:950;margin:0}
.blogDate{color:var(--muted);font-size:12px;margin-top:4px}

/* Popup */
.popup{
  position:fixed; left:16px; right:16px; bottom:16px;
  max-width:920px;margin:0 auto;
  background: rgba(18,16,26,.96);
  border:1px solid rgba(42,36,64,.95);
  border-radius:18px;
  padding:14px;
  z-index:120;
  display:none;
  box-shadow: var(--shadow);
}
.popup.show{display:block}
.popupTitle{font-weight:950;margin:0 0 6px 0}
.popupText{margin:0;color:var(--muted)}
.popupImg{width:100%;max-height:180px;object-fit:cover;border-radius:14px;margin-top:10px;border:1px solid rgba(255,255,255,.08)}

/* Chat */
.msgList{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;padding-right:6px}
.msg{
  background:
    radial-gradient(160px 100px at 20% 20%, rgba(255,79,216,.08), transparent 60%),
    rgba(255,255,255,.03);
  border:1px solid rgba(42,36,64,.95);
  border-radius:16px;
  padding:10px 12px;
}
.msgHead{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.msgName{font-weight:950;font-size:14px}
.msgTime{color:var(--muted);font-size:12px}
.msgBody{margin:0;color:var(--text);white-space:pre-wrap}

/* Social */
.socialRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.socialBtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:16px;
  border:1px solid rgba(42,36,64,.95);
  background: rgba(255,255,255,.04);
  font-weight:950;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.socialBtn:hover{
  transform:translateY(-1px);
  border-color: rgba(255,79,216,.38);
  box-shadow: 0 0 24px rgba(155,92,255,.12);
}
.socialBtn:active{transform:translateY(0)}

/* Gym 14 days */
.dayGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
@media(max-width:520px){ .dayGrid{ grid-template-columns: 1fr; } }

.dayBtn{
  border:1px solid rgba(42,36,64,.95);
  background: rgba(255,255,255,.035);
  color: var(--text);
  padding:14px;
  border-radius:18px;
  text-align:left;
  cursor:pointer;
  font-weight:950;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.dayBtn:hover{
  transform:translateY(-1px);
  border-color: rgba(155,92,255,.38);
  box-shadow: 0 0 26px rgba(155,92,255,.12);
}
.dayBtn:active{transform:translateY(0)}
.dayBtn.active{
  border-color: rgba(255,79,216,.60);
  box-shadow: 0 0 0 2px rgba(155,92,255,.16) inset, 0 0 26px rgba(255,79,216,.10);
}

.dayDetails{margin-top:12px}
.dayDetailsInner{display:flex;gap:12px;align-items:flex-start}
@media(max-width:720px){ .dayDetailsInner{flex-direction:column;} }

.dayDetailsImg{
  width:100%;max-width:320px;height:180px;border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140px 90px at 25% 25%, rgba(255,79,216,.20), transparent 60%),
    radial-gradient(170px 110px at 80% 70%, rgba(155,92,255,.20), transparent 60%),
    rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-weight:950;
}

/* Meal plan 30 days */
.day30{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
}
@media(max-width:720px){ .day30{ grid-template-columns: repeat(3, 1fr); } }
@media(max-width:420px){ .day30{ grid-template-columns: repeat(2, 1fr); } }

.dayBox{
  border:1px solid rgba(42,36,64,.95);
  background: rgba(255,255,255,.035);
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  text-align:center;
  font-weight:950;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.dayBox:hover{
  transform:translateY(-1px);
  border-color: rgba(155,92,255,.38);
  box-shadow: 0 0 24px rgba(155,92,255,.12);
}
.dayBox:active{transform:translateY(0)}
.dayBox.active{
  border-color: rgba(255,79,216,.60);
  box-shadow: 0 0 0 2px rgba(155,92,255,.16) inset, 0 0 24px rgba(255,79,216,.10);
}

.mealVal{ font-weight:950; margin-top:4px; }

/* PWA safe-area (iPhone notch) */
body { padding-bottom: env(safe-area-inset-bottom); }
.topbar { padding-top: env(safe-area-inset-top); }

/* bolje kao app */
button, a { -webkit-tap-highlight-color: transparent; }

/* malo uglađivanja skrola u listama */
.msgList{ scrollbar-width: thin; scrollbar-color: rgba(155,92,255,.35) transparent; }
.msgList::-webkit-scrollbar{ width:10px; }
.msgList::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(155,92,255,.40), rgba(255,79,216,.28));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}