/* base.css — zmienne, reset, typografia, przyciski, karty, narzędzia */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F8FAFC; --bg2:#F1F5F9; --white:#FFFFFF;
  --border:#E2E8F0; --border2:#CBD5E1;
  --text:#0F172A; --text2:#334155; --muted:#64748B; --muted2:#94A3B8;
  --green:#34D399; --green-d:#10B981; --green-dd:#059669; --green-l:#D1FAE5; --green-m:#6EE7B7;
  --blue:#3B82F6; --blue-l:#DBEAFE;
  --amber:#F59E0B; --amber-l:#FEF3C7;
  --rose:#F43F5E; --rose-l:#FFE4E6;
  --sidebar:264px; --topbar:60px;
  --r:14px; --r-sm:10px; --r-xs:8px;
  --ease:cubic-bezier(.4,0,.2,1);
  --sh:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 4px 16px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --sh-lg:0 16px 40px rgba(15,23,42,.12),0 4px 8px rgba(15,23,42,.06);
  --font:'Plus Jakarta Sans',sans-serif;
  --font-h:'Manrope',sans-serif;
}

html{height:100%}
body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;-webkit-font-smoothing:antialiased}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes mIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Przyciski */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--r-sm);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .15s var(--ease);letter-spacing:-.01em}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0}
.btn-primary{background:var(--green-d);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.28)}
.btn-primary:hover{background:var(--green-dd);box-shadow:0 4px 12px rgba(16,185,129,.38)}
.btn-secondary{background:var(--white);color:var(--text2);border:1px solid var(--border);box-shadow:var(--sh)}
.btn-secondary:hover{border-color:var(--border2)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border2)}

/* Karty */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh)}
.cp{padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-title{font-family:var(--font-h);font-size:13px;font-weight:800;letter-spacing:-.01em}
.card-link{font-size:12px;color:var(--blue);font-weight:700;cursor:pointer;transition:opacity .15s}
.card-link:hover{opacity:.7}

/* Pills / badges */
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:3px}
.pill-g{background:var(--green-l);color:#065F46}
.pill-b{background:var(--blue-l);color:#1D4ED8}
.pill-a{background:var(--amber-l);color:#92400E}
.badge-trip{background:var(--green-l);color:#065F46}
.badge-home{background:var(--blue-l);color:#1D4ED8}

/* Nagłówki stron */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:14px}
.page-header h1{font-family:var(--font-h);font-size:24px;font-weight:800;letter-spacing:-.03em}
.page-sub{font-size:13px;color:var(--muted);margin-top:2px}

/* Pusty stan */
.empty-state{text-align:center;padding:52px 20px}
.empty-state .ei{font-size:40px;margin-bottom:12px;opacity:.45}
.empty-state h3{font-family:var(--font-h);font-size:16px;font-weight:800;margin-bottom:5px}
.empty-state p{font-size:13px;color:var(--muted)}