/* TK Buje Piramida — base: varijable, reset, layout, navigacija */

:root {
      --bg: #0d0d0d; --bg2: #141414; --bg3: #1a1a1a; --bg4: #222222;
      --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14);
      --text: #f0f0f0; --text2: #c8c8c8; --text3: #888888;
      --orange: #ff6b2b; --orange2: #ff8c55; --orange-glow: rgba(255,107,43,0.15);
      --green: #22c55e; --green2: #16a34a; --green-glow: rgba(34,197,94,0.12);
      --red: #ef4444; --red-glow: rgba(239,68,68,0.12);
      --gold: #f59e0b; --blue: #3b82f6; --blue-glow: rgba(59,130,246,0.12);
      --radius: 14px;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; }
    ::-webkit-scrollbar { width:4px; }
    ::-webkit-scrollbar-track { background:var(--bg); }
    ::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }

    /* LOGIN */
    .login-screen { display:none; position:fixed; inset:0; background:var(--bg); z-index:1000; align-items:center; justify-content:center; flex-direction:column; }
    .login-screen.show { display:flex; }
    .login-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%, rgba(255,107,43,0.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(59,130,246,0.06) 0%, transparent 60%); }
    .login-box { position:relative; background:var(--bg2); border:1px solid var(--border2); border-radius:24px; padding:2.5rem 2rem; width:100%; max-width:360px; text-align:center; box-shadow:0 40px 80px rgba(0,0,0,0.6); }
    .login-logo { font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700; color:var(--text); margin-bottom:0.2rem; }
    .login-logo span { color:var(--orange); }
    .login-sub { font-size:0.75rem; color:var(--text3); text-transform:uppercase; letter-spacing:3px; margin-bottom:2rem; }
    .btn-google { display:flex; align-items:center; justify-content:center; gap:0.75rem; width:100%; background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-family:'Inter',sans-serif; font-size:0.9rem; font-weight:500; padding:0.85rem 1.5rem; border-radius:12px; cursor:pointer; transition:all 0.2s; }
    .btn-google:hover { background:var(--bg4); border-color:var(--orange); color:var(--orange); }
    .btn-google img { width:18px; height:18px; }

    /* HEADER */
    header { background:rgba(13,13,13,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 1.25rem; position:sticky; top:0; z-index:200; }
    .header-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:56px; }
    .logo { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; color:var(--text); }
    .logo span { color:var(--orange); }
    .logo small { font-size:0.7rem; color:var(--text3); font-weight:400; margin-left:0.4rem; letter-spacing:1px; text-transform:uppercase; }
    nav { display:flex; gap:0.15rem; align-items:center; }
    nav button { background:none; border:none; color:var(--text2); font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:500; padding:0.4rem 0.85rem; border-radius:8px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
    nav button:hover { color:var(--text); background:var(--bg3); }
    nav button.active { color:var(--orange); background:var(--orange-glow); }
    .admin-btn { border:1px solid var(--border) !important; }
    .admin-btn.on { color:var(--green) !important; background:var(--green-glow) !important; border-color:rgba(34,197,94,0.3) !important; }
    .user-badge { display:flex; align-items:center; gap:0.5rem; }
    .user-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange2)); display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:white; flex-shrink:0; }
    .btn-logout { background:none; border:1px solid var(--border); color:var(--text3); font-size:0.72rem; padding:0.25rem 0.6rem; border-radius:6px; cursor:pointer; transition:all 0.2s; }
    .btn-logout:hover { color:var(--red); border-color:var(--red); }
    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:0.4rem; background:none; border:none; }
    .hamburger span { display:block; width:22px; height:2px; background:var(--text2); border-radius:2px; transition:all 0.3s; }
    .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .mobile-menu { display:none; position:fixed; top:56px; left:0; right:0; background:rgba(13,13,13,0.97); backdrop-filter:blur(20px); z-index:199; padding:0.75rem 1rem 1.25rem; border-bottom:1px solid var(--border); }
    .mobile-menu.open { display:block; }
    .mobile-menu button { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text2); font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:500; padding:0.7rem 0.5rem; border-bottom:1px solid var(--border); cursor:pointer; }
    .mobile-menu button.active { color:var(--orange); }
    .mobile-menu .mob-logout { color:var(--red) !important; border-bottom:none; }
    .mobile-user { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 0.5rem 1rem; border-bottom:1px solid var(--border); margin-bottom:0.25rem; }

    /* MAIN */
    main { max-width:1100px; margin:0 auto; padding:1.5rem 1.25rem; }
    .section { display:none; }
    .section.active { display:block; }

    /* NOTIFICATION BADGE */
    .notif-badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--red); color:white; font-size:0.65rem; font-weight:700; border-radius:50%; margin-left:4px; vertical-align:middle; }