/* ===========================
   Spisak.app Light Design System
   Based on original dark palette
   =========================== */

:root{
  --bg:#f7fafb;          /* svetla pozadina */
  --card:#ffffff;         /* kartice bele */
  --muted:#4b5563;        /* sekundarni tekst */
  --text:#0f172a;         /* glavni tamni tekst */
  --accent:#28c177;       /* zelena iz logotipa */
  --accent-2:#1ea963;     /* hover zelena */
  --danger:#e11d48;
  --radius:16px;
  --shadow:0 8px 28px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

a{color:var(--accent); text-decoration:none; transition:color .2s ease}
a:hover{color:var(--accent-2)}

.container{
  width:100%;
  max-width:980px;
  margin-inline:auto;
  padding:24px;
}

.center{text-align:center}
.mb-2{margin-bottom:12px}
.mb-3{margin-bottom:18px}
.mb-4{margin-bottom:26px}

.card{
  background:var(--card);
  border:1px solid rgba(15,23,42,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}

.btn{
  display:inline-block;
  border:none;
  background:var(--accent);
  color:#05331b;
  padding:12px 18px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:transform .05s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 16px rgba(40,193,119,.25);
}
.btn:hover{background:var(--accent-2)}
.btn:active{transform:translateY(1px)}

.btn-outline{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  color:var(--text);
  background:#fff;
  transition:all .2s ease;
}
.btn-outline:hover{
  border-color:rgba(15,23,42,.2);
  background:#f1f5f9;
}

.input,
input[type="text"],input[type="email"],input[type="password"]{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#ffffff;
  color:var(--text);
  outline:none;
  transition:border .2s ease, box-shadow .2s ease;
  margin-bottom:12px;
}
input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(40,193,119,.15);
}

.label{display:block; color:var(--muted); font-size:14px; margin:4px 0 6px}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.nav{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 24px;
}
.nav .brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  color:var(--text);
}
.brand img{width:32px; height:32px; border-radius:8px}
.nav-spacer{flex:1}
.nav a{color:var(--muted); font-weight:600}
.nav a:hover{color:var(--text)}
.user-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  background:rgba(255,255,255,.7);
}

.list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  background:#ffffff;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  background:rgba(40,193,119,.15);
  color:#065f46;
  border:1px solid rgba(40,193,119,.35);
}

.hr{
  height:1px;
  background:rgba(15,23,42,.08);
  border:0;
  margin:16px 0;
}

/* Google dugme – u skladu s light temom */
.google-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(15,23,42,.14);
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  color:var(--text);
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  transition:all .2s ease;
}
.google-btn:hover{
  border-color:rgba(15,23,42,.22);
  background:#f8fafc;
}
.google-btn img{width:18px; height:18px}