/* Leef - futuristic green theme (linter-safe, no CSS vars, no inset/min/backdrop-filter) */

html{
  box-sizing: border-box;
}

body, div, section, header, footer, nav, main, article, aside,
h1,h2,h3,h4,h5,h6,p,span,a,ul,ol,li,
form,label,input,textarea,select,button{
  box-sizing: inherit;
}
html,body{margin:0;padding:0;}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#eafff1;
  min-height:100vh;

  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(92,255,154,0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(47,220,132,0.14), transparent 55%),
    radial-gradient(900px 600px at 50% 90%, rgba(92,255,154,0.10), transparent 60%),
    linear-gradient(135deg, #060f0b, #07110c 55%, #050a07);
}

body.light{
  color:#06130c;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(92,255,154,0.14), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(47,220,132,0.10), transparent 55%),
    linear-gradient(135deg, #f6fffb, #f0fff8 55%, #ffffff);
}

a{color:#5cff9a;text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:980px;margin:0 auto;padding:18px;}

.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.brand:hover{ text-decoration:none; }

.logo{
  width:48px;
  height:48px;
  border-radius:10px;

  background:url("leef-logo.png") center/contain no-repeat;

  box-shadow: 0 0 26px rgba(92,255,154,0.22);
  animation: leefGlow 2.6s ease-in-out infinite;
}

@keyframes leefGlow{
  0%   { box-shadow: 0 0 18px rgba(92,255,154,0.18), 0 0 28px rgba(47,220,132,0.10); transform: scale(1); }
  50%  { box-shadow: 0 0 26px rgba(92,255,154,0.30), 0 0 40px rgba(47,220,132,0.18); transform: scale(1.03); }
  100% { box-shadow: 0 0 18px rgba(92,255,154,0.18), 0 0 28px rgba(47,220,132,0.10); transform: scale(1); }
}

.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

.card{
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}

body.light .card{
  background: rgba(255,255,255,0.80);
  border-color: rgba(6,19,12,0.12);
}

.grid{display:grid;gap:14px;}
.grid.two{grid-template-columns:1fr;}
@media (min-width:800px){
  .grid.two{grid-template-columns:1fr 1fr;}
}

.btn,button{
  appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color:#eafff1;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}

body.light .btn, body.light button{
  color:#06130c;
  background: rgba(255,255,255,0.72);
  border-color: rgba(6,19,12,0.12);
}

.btn.primary,button.primary{
  border:1px solid rgba(92,255,154,0.32);
  background: linear-gradient(135deg, rgba(92,255,154,0.18), rgba(47,220,132,0.12));
}

.btn.primary:hover,button.primary:hover{
  border-color: rgba(92,255,154,0.45);
}

.btn.danger{
  border-color: rgba(255,107,139,0.35);
  color:#ff6b8b;
}

small{color: rgba(214,255,233,0.75);}
body.light small{color: rgba(7,40,24,0.65);}

input,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  color:#eafff1;
}

body.light input, body.light textarea{
  background: rgba(255,255,255,0.85);
  color:#06130c;
  border-color: rgba(6,19,12,0.12);
}

textarea{min-height:180px;resize:vertical;}

.row{display:flex;gap:12px;flex-wrap:wrap;}
/* linter-safe alternative to .row>* */
.row > div,
.row > label,
.row > input,
.row > textarea,
.row > select,
.row > button{flex:1;}

.kv{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

.badge{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  color: rgba(214,255,233,0.80);
}
body.light .badge{
  border-color: rgba(6,19,12,0.12);
  color: rgba(7,40,24,0.70);
}

.item{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.07);
}
body.light .item{
  background: rgba(255,255,255,0.65);
  border-color: rgba(6,19,12,0.12);
}

hr{
  border:none;
  border-top:1px solid rgba(255,255,255,0.16);
  margin:14px 0;
}
body.light hr{border-top:1px solid rgba(6,19,12,0.12);}

/* Modal (no inset/min/backdrop-filter for editor compatibility) */
.modal-backdrop{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  background: rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index: 9999;
}
.modal{
  width:100%;
  max-width:720px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(92,255,154,0.14), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(47,220,132,0.12), transparent 60%),
    rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  padding:16px;
}
body.light .modal{
  background: rgba(255,255,255,0.92);
  border-color: rgba(6,19,12,0.12);
}
.modal h3{margin:0 0 6px;}
.modal p{margin:0 0 10px;line-height:1.4;}
.modal .modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px;}
.modal .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(92,255,154,0.22);
  background: rgba(92,255,154,0.08);
  font-size:12px;
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(92,255,154,0.30);
  background: rgba(0,0,0,0.35);
  color: #eafff1;
  display:none;
  z-index: 10000;
}
body.light .toast{
  background: rgba(255,255,255,0.75);
  color:#06130c;
  border-color: rgba(6,19,12,0.12);
}

/* QR glow */
.qr-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.qr-frame{
  border-radius:16px;
  padding:14px;
  border:1px solid rgba(92,255,154,0.28);
  background:
    radial-gradient(500px 200px at 20% 0%, rgba(92,255,154,0.14), transparent 60%),
    radial-gradient(500px 200px at 80% 0%, rgba(47,220,132,0.10), transparent 60%),
    rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 30px rgba(92,255,154,0.14),
    0 0 40px rgba(47,220,132,0.10);
}
body.light .qr-frame{
  background: rgba(255,255,255,0.85);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}
.qr-frame canvas{display:block;border-radius:12px;}

/* --- Leef toggles (NO CSS variables, matches your theme) --- */
.toggleline{ display:block; margin-top:10px; }

.toggle{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
  width:100%;
  cursor:pointer;
  user-select:none;
}

/* hide the real checkbox */
.toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* text */
.toggle-text{
  display:inline-block;
  white-space:nowrap;
  font-size:14px;
  color: rgba(214,255,233,0.75); /* same as your small text vibe */
  transition: color .25s ease;
}

/* switch track */
.toggle .switch{
  width:44px;
  height:26px;
  border-radius:999px;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16); /* matches your card borders */
  position:relative;
  flex:0 0 auto;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* knob */
.toggle .switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* ON state glow */
.toggle input:checked + .switch{
  background: rgba(92,255,154,0.18);
  border-color: rgba(92,255,154,0.55);
  box-shadow: 0 0 0 4px rgba(92,255,154,0.10), 0 0 22px rgba(92,255,154,0.18);
}
.toggle input:checked + .switch::after{
  transform: translateX(18px);
  box-shadow: 0 10px 24px rgba(92,255,154,0.18);
}
.toggle input:checked ~ .toggle-text{
  color: rgba(92,255,154,0.95);
}

/* light mode tweaks */
body.light .toggle-text{ color: rgba(7,40,24,0.75); }
body.light .toggle .switch{
  background: rgba(255,255,255,0.75);
  border-color: rgba(6,19,12,0.12);
}
body.light .toggle .switch::after{
  background: rgba(6,19,12,0.20);
}

/* hide/show boxes */
.togglebox{ margin-top:8px; }
.is-hidden{ display:none !important; }