:root{
  --bg:#0a0b0f; --panel:#12141c; --panel2:#181b26; --line:rgba(255,255,255,.07);
  --txt:#f4f5f8; --mut:#8a8f9e; --accent:#c6ff3d; --accent2:#7c5cff; --danger:#ff5c7c;
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--txt);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.brand{font-family:'Sora',sans-serif}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
/* Sidebar */
.side{background:var(--panel);border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:22px;margin-bottom:34px;letter-spacing:-.5px}
.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#8bff00);display:grid;place-items:center;color:#0a0b0f;font-weight:800}
.logo svg{width:20px;height:20px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:13px;color:var(--mut);text-decoration:none;font-weight:500;font-size:14.5px;cursor:pointer;transition:.2s}
.nav a svg{width:19px;height:19px;stroke-width:1.8}
.nav a:hover{background:var(--panel2);color:var(--txt)}
.nav a.active{background:var(--accent);color:#0a0b0f;font-weight:600}
.side-foot{margin-top:auto;background:var(--panel2);border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px}
.side-foot img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.side-foot .nm{font-weight:600;font-size:14px}
.side-foot .pl{font-size:12px;color:var(--accent)}
/* Main */
.main{padding:30px 38px 60px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:16px}
.hello h1{font-size:27px;font-weight:700;letter-spacing:-.6px}
.hello p{color:var(--mut);margin-top:5px;font-size:14.5px}
.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);padding:11px 16px;border-radius:14px;color:var(--mut);width:280px}
.search input{background:none;border:none;outline:none;color:var(--txt);font-family:inherit;font-size:14px;width:100%}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.col2{grid-column:span 2}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{font-size:16px;font-weight:600;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.card h3 .more{color:var(--mut);font-size:13px;font-weight:500;cursor:pointer}
/* Stat rings
   Broj MORA biti u opticom centru prstena. Zato se i velicina prstena i
   padding drze u varijablama, .ctr je kutija iste visine kao svg, pomerena
   za padding, pa se sadrzaj centrira flexom. Nema hardkodiranog "top". */
.rings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.ring{--rs:96px;          /* dijametar prstena */
      --rp:20px;          /* padding kartice   */
      background:var(--panel2);border-radius:18px;padding:var(--rp);
      text-align:center;position:relative}
.ring svg{width:var(--rs);height:var(--rs);display:block;margin:0 auto;
          transform:rotate(-90deg)}
.ring .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9}
.ring .prog{fill:none;stroke-width:9;stroke-linecap:round;
            transition:stroke-dashoffset 1.3s cubic-bezier(.5,0,.2,1)}
.ring .ctr{position:absolute;top:var(--rp);left:var(--rp);right:var(--rp);
           height:var(--rs);display:flex;align-items:center;justify-content:center;
           font-family:'Sora',sans-serif;font-weight:700;font-size:22px;
           letter-spacing:-.02em;line-height:1;pointer-events:none}
.ring .lbl{color:var(--mut);font-size:13px;margin-top:10px}
.ring .sub{font-size:11px;color:var(--mut);opacity:.7;margin-top:2px}
@media(max-width:1240px){.ring{--rs:84px}.ring .ctr{font-size:20px}}
@media(max-width:640px){.ring{--rs:76px;--rp:16px}.ring .ctr{font-size:18px}}
/* Hero workout card */
.hero-card{background:linear-gradient(135deg,#7c5cff,#5b3ff0);border:none;position:relative;overflow:hidden;color:#fff}
.hero-card::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%)}
.hero-card .tag{display:inline-block;background:rgba(255,255,255,.2);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:16px}
.hero-card h2{font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.5px;max-width:80%}
.hero-card .meta{display:flex;gap:20px;margin:18px 0 22px;font-size:13.5px;opacity:.9}
.hero-card .meta b{font-family:'Sora';font-size:17px;display:block;font-weight:700}
.btn{background:var(--accent);color:#0a0b0f;border:none;padding:13px 22px;border-radius:13px;font-family:'Sora';font-weight:600;font-size:14px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(198,255,61,.25)}
.btn.ghost{background:rgba(255,255,255,.15);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.25);box-shadow:none}
/* Exercise list */
.ex{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:.15s}
.ex:last-child{border-bottom:none}
.ex:hover{padding-left:6px}
.chk{width:24px;height:24px;border-radius:8px;border:2px solid var(--mut);flex:none;display:grid;place-items:center;transition:.2s}
.chk svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:.2s;stroke:#0a0b0f}
.ex.done .chk{background:var(--accent);border-color:var(--accent)}
.ex.done .chk svg{opacity:1;transform:scale(1)}
.ex.done .ex-nm{color:var(--mut);text-decoration:line-through}
.ex-nm{font-weight:500;font-size:14.5px}
.ex-sub{color:var(--mut);font-size:12.5px;margin-top:2px}
.ex-time{margin-left:auto;color:var(--mut);font-size:13px;font-family:'Sora'}
/* Chart */
.bars{display:flex;align-items:flex-end;gap:12px;height:150px;margin-top:20px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%}
.bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}
.bar{width:100%;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,var(--accent),#7bbd00);transition:height 1.1s cubic-bezier(.5,0,.2,1);position:relative}
.bar.act{background:linear-gradient(180deg,var(--accent2),#4b2fd0)}
.bar-day{font-size:12px;color:var(--mut);font-weight:500}
/* Classes */
.cls{display:flex;align-items:center;gap:14px;background:var(--panel2);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.cls .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:none}
.cls .info{flex:1}
.cls .info b{font-weight:600;font-size:14.5px}
.cls .info span{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.book{background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:9px 16px;border-radius:11px;font-family:'Sora';font-weight:600;font-size:13px;cursor:pointer;transition:.2s}
.book:hover{border-color:var(--accent);color:var(--accent)}
.book.booked{background:var(--accent);color:#0a0b0f;border-color:var(--accent)}
/* Membership */
.mem{background:linear-gradient(135deg,#1c2030,#12141c);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden}
.mem::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(198,255,61,.14),transparent 55%)}
.mem .row{display:flex;justify-content:space-between;align-items:center;position:relative}
.mem .tier{font-family:'Sora';font-weight:700;font-size:20px}
.mem .id{color:var(--mut);font-size:12px;letter-spacing:2px;margin-top:22px;position:relative}
.mem .no{font-family:'Sora';font-size:18px;letter-spacing:3px;margin-top:4px;position:relative}
.mem .foot{display:flex;justify-content:space-between;margin-top:20px;position:relative;font-size:12px;color:var(--mut)}
.mem .foot b{color:var(--txt);font-family:'Sora';display:block;margin-top:2px}
.badge{background:var(--accent);color:#0a0b0f;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;font-family:'Sora'}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--accent);color:#0a0b0f;padding:14px 24px;border-radius:14px;font-family:'Sora';font-weight:600;font-size:14px;box-shadow:0 15px 40px rgba(0,0,0,.4);transition:.4s cubic-bezier(.5,0,.2,1);z-index:99}
.toast.show{transform:translateX(-50%) translateY(0)}
@media(max-width:980px){.app{grid-template-columns:1fr}.side{display:none}.grid{grid-template-columns:1fr}.col2{grid-column:span 1}.main{padding:22px}}

/* ---- custom ikonice (zamena za emojije) ---- */
.eic{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;
     stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bic{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
     stroke-linecap:round;stroke-linejoin:round}
.eic .a,.bic .a{opacity:.55}