:root{
  --bg:#050814;
  --bg2:#0b101f;
  --card:#111827;
  --cardSoft:#151c2c;
  --accent:#22c55e;
  --accentSoft:#16a34a;
  --accentDim:#4ade80;
  --text:#ffffff;
  --muted:#9ca3af;
  --mutedSoft:#6b7280;
  --radius:18px;
  --radiusSm:12px;
  --shadowSoft:0 16px 40px rgba(0,0,0,.45);
  --shadowHard:0 28px 70px rgba(0,0,0,.6);
}

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

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#111827,#020617 55%);
  color:var(--text);
  min-height:100dvh;
  display:flex;
  justify-content:center;
  padding-top:40px; /* żeby ładnie wyglądało */
  padding:24px;
  -webkit-font-smoothing:antialiased;
}

/* -------- CARD -------- */

.card{
  width:100%;
  max-width:420px;
  background:var(--cardSoft);
  border-radius:var(--radius);
  padding:36px 28px 32px;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:var(--shadowHard);
  display:flex;
  flex-direction:column;
  gap:26px;
}

/* -------- BRAND -------- */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  margin-bottom:4px;
}

.brand-badge{
  width:42px;
  height:42px;
  border-radius:14px;
  background:radial-gradient(circle at 30% 0,#4ade80,#16a34a);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#022c22;
  box-shadow:0 0 22px rgba(34,197,94,.7);
  font-size:1.2rem;
}

.brand-name{
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:-.01em;
}

.brand-sub{
  text-align:center;
  color:var(--mutedSoft);
  font-size:.75rem;
  margin-top:-6px;
}

/* -------- FORM -------- */

.input-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

label{
  font-size:.85rem;
  color:var(--muted);
}

input{
  padding:14px 16px;
  font-size:.95rem;
  border-radius:var(--radiusSm);
  border:1px solid rgba(75,85,99,.6);
  background:var(--card);
  color:var(--text);
}

input:focus{
  outline:none;
  border-color:var(--accentDim);
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
}

/* -------- CHECKBOX -------- */

.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
  line-height:1.35;
  font-size:.82rem;
  color:var(--mutedSoft);
}

.checkbox-row a{
  color:var(--accentDim);
  text-decoration:none;
  font-weight:500;
}

.checkbox-row a:hover{
  text-decoration:underline;
}

.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--card);
  border: 2px solid rgba(75,85,99,.6);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* FOCUS */
.checkbox-row input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--accentDim);
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

.checkbox-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 12px;
  border-right: 3px solid var(--accentDim);
  border-bottom: 3px solid var(--accentDim);

  /* --- IDEALNE CENTROWANIE --- */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(0) rotate(45deg);

  transition: transform .18s ease-out;
  transform-origin: center;
}

.checkbox-row input[type="checkbox"]:checked::after {
  transform: translate(-50%, -60%) scale(1) rotate(45deg);
}


/* -------- BUTTON -------- */

.btn-main{
  width:100%;
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:15px 24px;
  background:linear-gradient(135deg,var(--accent),var(--accentSoft));
  color:#022c22;
  font-weight:700;
  font-size:1rem;
  box-shadow:var(--shadowSoft);
  margin-top:6px;
}

.btn-main:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

.btn-main:disabled{
  opacity:.45;
  cursor:default;
  transform:none;
}

/* -------- STATUS MSG -------- */

.error{
  color:#f87171;
  font-size:.82rem;
  margin-top:6px;
}

.success{
  color:var(--accentDim);
  font-size:.9rem;
  text-align:center;
  margin-top:10px;
}

/* -------- SPINNER -------- */

.spinner{
  width:18px;
  height:18px;
  border:2px solid rgba(255,255,255,.2);
  border-top-color:#022c22;
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:0 auto;
}

@keyframes spin{
  to{transform:rotate(360deg);}
}



/* ========= TOASTY ========= */

#toasts{
  position:fixed;
  top:20px;
  right:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.toast{
  min-width:260px;
  max-width:320px;
  background:var(--cardSoft);
  border-radius:var(--radiusSm);
  padding:14px 16px;
  font-size:.9rem;
  color:var(--text);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease;
}

.toast.show{
  opacity:1;
  transform:translateY(0px);
}

.toast-success{
  border-left:4px solid var(--accentDim);
}

.toast-error{
  border-left:4px solid #f87171;
}


/* ===== TRANSITIONS ===== */
.view-transition {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}

.view-transition.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== FULL PANEL (success screen) ===== */
.full-panel {
  width:100%;
  max-width:420px;
  background:var(--cardSoft);
  border-radius:var(--radius);
  padding:36px 28px 32px;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:var(--shadowHard);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ===== BIG SPINNER ===== */
.big-spinner {
  width:42px;
  height:42px;
  border:4px solid rgba(255,255,255,.15);
  border-top-color:var(--accentDim);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin:0 auto;
}


.panel-nav {
  display:flex;
  gap:6px;
  justify-content:space-between;
  margin-bottom:10px;
}

.nav-btn {
  flex:1;
  padding:10px 12px;
  border:none;
  background:#111827;
  color:#9ca3af;
  border-radius:10px;
  font-size:.9rem;
  cursor:pointer;
}

.nav-btn.active {
  background:#22c55e;
  color:#022c22;
  font-weight:700;
}

.contracts-list {
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.contract-item {
  background:#111827;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.btn-small {
  padding:8px 14px;
  border:none;
  border-radius:999px;
  background:#22c55e;
  font-size:.85rem;
  color:#022c22;
  cursor:pointer;
}

.plan-box {
  background:#111827;
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
}

.plan-name { font-size:1.1rem; font-weight:700; }
.plan-price { font-size:1.4rem; margin-top:4px; color:#22c55e; }

.plan-list {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
}

.plan-item {
  background:#111827;
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
}


  .fade-enter {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  .fade-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .fade-exit {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .fade-exit-active {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }


  .tab-wrap {
  opacity:0;
  transform:translateY(10px);
}

.tab-wrap.fade-enter-active {
  opacity:1;
  transform:translateY(0);
  transition:all .25s ease;
}

.tab-wrap.fade-exit-active {
  opacity:0;
  transform:translateY(-10px);
  transition:all .25s ease;
}


.card {
  width:100%;
  max-width:420px;
}



.panel-content {
  width:100%;
  min-width:100%;
}


.panel-content > .tab-wrap {
  padding-top:4px;
}


.tab-wrap {
  display:block;
  width:100%;
}


.status-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: .75rem;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.status-badge.pending {
  background: rgba(250,204,21,.15);
  color: #facc15;
}

.status-badge.approved {
  background: rgba(34,197,94,.15);
  color: #22c55e;
}

.status-badge.expired {
  background: rgba(239,68,68,.15);
  color: #ef4444;
}

.status-badge.rejected {
  background: rgba(239,68,68,.25);
  color: #ef4444;
}


    .fade-enter { opacity:0; transform:translateY(10px); }
    .fade-enter-active { opacity:1; transform:translateY(0); transition:all .25s ease; }
    .fade-exit { opacity:1; transform:translateY(0); }
    .fade-exit-active { opacity:0; transform:translateY(-10px); transition:all .25s ease; }