/*!
 * LESCO Bill Checker — frontend styles
 * v1.0.0
 *
 * Typography intentionally inherits from the active theme.
 * No font-family is declared anywhere in this file.
 */

/* ===============================================================
   Tokens
   =============================================================== */
.lbc-wrap{
  --lbc-navy:#0a2a63;
  --lbc-blue:#1450c4;
  --lbc-blue-soft:#2f6ff0;
  --lbc-cyan:#1fc0e6;
  --lbc-spark:#ffd166;

  --lbc-sky:#eef4ff;
  --lbc-sky-deep:#dbe6fb;
  --lbc-surface:#ffffff;
  --lbc-surface-2:#f7f9fe;

  --lbc-ink:#0e1a30;
  --lbc-muted:#5b6a86;
  --lbc-faint:#8c99b0;
  --lbc-line:#e3e9f4;
  --lbc-line-2:#d5deee;

  --lbc-ok:#12805c;
  --lbc-danger:#c62f22;
  --lbc-danger-soft:#fdf2f0;
  --lbc-danger-line:#f3cbc4;

  --lbc-radius:20px;
  --lbc-ease:cubic-bezier(.22,.9,.32,1);
  --lbc-ease-bounce:cubic-bezier(.34,1.56,.64,1);

  max-width:565px;
  margin:26px auto;
  color:var(--lbc-ink);
  text-align:left;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

.lbc-wrap *,
.lbc-wrap *::before,
.lbc-wrap *::after{box-sizing:border-box}

.lbc-wrap button{font:inherit;letter-spacing:inherit}

/* ===============================================================
   Card
   =============================================================== */
.lbc-card{
  position:relative;
  background:var(--lbc-surface);
  border:1px solid var(--lbc-line);
  border-radius:var(--lbc-radius);
  overflow:hidden;
  box-shadow:
    0 1px 2px rgba(10,42,99,.05),
    0 14px 32px -14px rgba(10,42,99,.26),
    0 40px 70px -36px rgba(10,42,99,.22);
  animation:lbc-rise .68s var(--lbc-ease) both;
}

@keyframes lbc-rise{
  from{opacity:0;transform:translateY(20px) scale(.982)}
  to{opacity:1;transform:none}
}

/* ===============================================================
   Header — drifting aurora, floating sparks, pulsing bolt
   =============================================================== */
.lbc-header{
  position:relative;
  padding:25px 21px 27px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,var(--lbc-navy) 0%,var(--lbc-blue) 46%,var(--lbc-blue-soft) 74%,var(--lbc-cyan) 100%);
  isolation:isolate;
  overflow:hidden;
}

.lbc-header::before{
  content:"";
  position:absolute;
  inset:-45% -25%;
  z-index:-2;
  background:
    radial-gradient(36% 50% at 20% 26%,rgba(255,255,255,.30),transparent 62%),
    radial-gradient(32% 44% at 84% 70%,rgba(120,240,255,.30),transparent 66%),
    radial-gradient(28% 40% at 60% 12%,rgba(255,209,102,.16),transparent 68%);
  animation:lbc-aurora 18s ease-in-out infinite alternate;
}

@keyframes lbc-aurora{
  from{transform:translate3d(-5%,-4%,0) scale(1)}
  to{transform:translate3d(6%,5%,0) scale(1.14)}
}

/* faint circuit grid */
.lbc-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent 78%);
  animation:lbc-grid 26s linear infinite;
}

@keyframes lbc-grid{
  from{background-position:0 0,0 0}
  to{background-position:34px 34px,34px 34px}
}

.lbc-spark{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--lbc-spark);
  box-shadow:0 0 10px 2px rgba(255,209,102,.75);
  opacity:0;
  pointer-events:none;
}
.lbc-spark--1{left:16%;bottom:14%;animation:lbc-float 7.5s var(--lbc-ease) infinite}
.lbc-spark--2{left:78%;bottom:22%;width:4px;height:4px;animation:lbc-float 9s var(--lbc-ease) 1.6s infinite}
.lbc-spark--3{left:47%;bottom:9%;width:3px;height:3px;animation:lbc-float 8.2s var(--lbc-ease) 3.4s infinite}

@keyframes lbc-float{
  0%{opacity:0;transform:translateY(6px) scale(.6)}
  16%{opacity:.95}
  70%{opacity:.5}
  100%{opacity:0;transform:translateY(-54px) scale(1.15)}
}

.lbc-bolt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  margin:0 auto 12px;
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:
    lbc-fade-up .6s var(--lbc-ease) .05s both,
    lbc-bolt-pulse 3.6s ease-in-out 1s infinite;
}

@keyframes lbc-bolt-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.32)}
  50%{box-shadow:0 0 0 11px rgba(255,255,255,0)}
}

.lbc-title{
  margin:0 0 8px;
  padding:0;
  font-size:22px;
  line-height:1.24;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 1px 12px rgba(6,24,60,.28);
  animation:lbc-fade-up .6s var(--lbc-ease) .12s both;
}

.lbc-subtitle{
  margin:0 auto;
  max-width:46ch;
  padding:0;
  font-size:13.2px;
  line-height:1.55;
  color:rgba(255,255,255,.94);
  animation:lbc-fade-up .6s var(--lbc-ease) .2s both;
}

.lbc-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:13px;
  padding:5px 11px 5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  animation:lbc-fade-up .6s var(--lbc-ease) .28s both;
}

.lbc-badge-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#7dffc8;
  box-shadow:0 0 0 0 rgba(125,255,200,.8);
  animation:lbc-live 2.4s ease-out infinite;
}

@keyframes lbc-live{
  0%{box-shadow:0 0 0 0 rgba(125,255,200,.75)}
  70%,100%{box-shadow:0 0 0 8px rgba(125,255,200,0)}
}

@keyframes lbc-fade-up{
  from{opacity:0;transform:translateY(11px)}
  to{opacity:1;transform:none}
}

/* ===============================================================
   Body
   =============================================================== */
.lbc-body{padding:18px 20px 4px}

/* ---------------- Tabs with sliding pill ---------------- */
.lbc-tabs{
  position:relative;
  display:flex;
  gap:6px;
  padding:5px;
  border-radius:15px;
  background:var(--lbc-surface-2);
  border:1px solid var(--lbc-line);
  animation:lbc-fade-up .6s var(--lbc-ease) .3s both;
}

.lbc-tab-pill{
  position:absolute;
  top:5px;
  left:5px;
  height:calc(100% - 10px);
  width:0;
  border-radius:11px;
  background:linear-gradient(135deg,var(--lbc-navy),var(--lbc-blue) 60%,var(--lbc-blue-soft));
  box-shadow:0 6px 16px -8px rgba(20,80,196,.85);
  transition:transform .42s var(--lbc-ease),width .42s var(--lbc-ease);
  pointer-events:none;
  z-index:0;
}

.lbc-tab{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:9px 8px 10px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--lbc-muted);
  cursor:pointer;
  transition:color .3s var(--lbc-ease),transform .2s var(--lbc-ease);
}

.lbc-tab-label{font-size:13px;font-weight:700;line-height:1.25;letter-spacing:-.005em}
.lbc-tab-sub{font-size:11px;font-weight:600;opacity:.72;line-height:1.2}

.lbc-tab:hover{color:var(--lbc-navy)}
.lbc-tab:active{transform:scale(.982)}
.lbc-tab.is-active{color:#fff}
.lbc-tab.is-active .lbc-tab-sub{opacity:.85}
.lbc-tab:focus-visible{outline:2px solid var(--lbc-blue-soft);outline-offset:2px}

/* ---------------- Form ---------------- */
.lbc-form{
  padding-top:17px;
  animation:lbc-fade-up .6s var(--lbc-ease) .36s both;
}

.lbc-field{display:block;animation:lbc-field-in .38s var(--lbc-ease) both}
.lbc-field[hidden]{display:none}

@keyframes lbc-field-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

.lbc-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
  color:var(--lbc-ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.005em;
}

.lbc-input-shell{position:relative;display:block}

.lbc-input{
  width:100%;
  padding:14px 72px 14px 15px;
  border:1.5px solid var(--lbc-line-2);
  border-radius:13px;
  background:var(--lbc-surface-2);
  color:var(--lbc-ink);
  font:inherit;
  font-size:18.5px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums lining-nums;
  transition:
    border-color .26s var(--lbc-ease),
    box-shadow .26s var(--lbc-ease),
    background .26s var(--lbc-ease);
}

.lbc-input::placeholder{color:#a9b5c9;font-weight:500;letter-spacing:.05em}
.lbc-input:hover{border-color:#c2cee3}

.lbc-input:focus{
  outline:0;
  background:#fff;
  border-color:var(--lbc-blue);
  box-shadow:
    0 0 0 4px rgba(47,111,240,.15),
    0 8px 20px -12px rgba(20,80,196,.6);
}

.lbc-input.is-error{
  border-color:var(--lbc-danger);
  background:var(--lbc-danger-soft);
  box-shadow:0 0 0 4px rgba(198,47,34,.12);
  animation:lbc-shake .44s var(--lbc-ease);
}

.lbc-input.is-ready{
  border-color:var(--lbc-ok);
  background:#f2fbf7;
  box-shadow:0 0 0 4px rgba(18,128,92,.12);
}

@keyframes lbc-shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-7px)}
  38%{transform:translateX(6px)}
  58%{transform:translateX(-4px)}
  78%{transform:translateX(2px)}
}

/* clear + tick inside the field */
.lbc-clear{
  position:absolute;
  top:50%;right:46px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#e6ecf7;
  color:var(--lbc-muted);
  cursor:pointer;
  transition:background .22s var(--lbc-ease),color .22s var(--lbc-ease),transform .18s var(--lbc-ease);
}
.lbc-clear:hover{background:#d8e1f2;color:var(--lbc-navy)}
.lbc-clear:active{transform:translateY(-50%) scale(.9)}
.lbc-clear[hidden]{display:none}
.lbc-clear:focus-visible{outline:2px solid var(--lbc-blue-soft);outline-offset:2px}

.lbc-tick{
  position:absolute;
  top:50%;right:16px;
  transform:translateY(-50%) scale(.4);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--lbc-ok);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .26s var(--lbc-ease),transform .34s var(--lbc-ease-bounce);
}

.lbc-input.is-ready ~ .lbc-tick{opacity:1;transform:translateY(-50%) scale(1)}

/* progress meter under the input */
.lbc-meter{
  position:relative;
  height:3px;
  margin-top:9px;
  border-radius:3px;
  background:var(--lbc-line);
  overflow:hidden;
}

.lbc-meter-fill{
  display:block;
  height:100%;
  width:0;
  border-radius:3px;
  background:linear-gradient(90deg,var(--lbc-blue),var(--lbc-cyan));
  transition:width .3s var(--lbc-ease),background .3s var(--lbc-ease);
}

.lbc-meter.is-full .lbc-meter-fill{
  background:linear-gradient(90deg,var(--lbc-ok),#3fd39a);
}

.lbc-hint{
  display:block;
  margin-top:9px;
  color:var(--lbc-muted);
  font-size:12.5px;
  line-height:1.55;
}

/* live status line */
.lbc-status{
  min-height:0;
  margin-top:10px;
  color:var(--lbc-faint);
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  transition:color .24s var(--lbc-ease);
}
.lbc-status.is-ready{color:var(--lbc-ok)}
.lbc-status:empty{margin-top:0}

/* ---------------- Save checkbox ---------------- */
.lbc-save{
  display:flex;
  align-items:center;
  gap:11px;
  margin:14px 0 16px;
  padding:11px 13px;
  border:1px solid var(--lbc-line);
  border-radius:12px;
  background:var(--lbc-surface-2);
  color:var(--lbc-muted);
  font-size:13px;
  line-height:1.4;
  cursor:pointer;
  user-select:none;
  transition:background .24s var(--lbc-ease),border-color .24s var(--lbc-ease),color .24s var(--lbc-ease);
}

.lbc-save:hover{background:var(--lbc-sky);border-color:var(--lbc-sky-deep);color:var(--lbc-navy)}

.lbc-save-toggle{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
  pointer-events:none;
}

.lbc-save-box{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;height:19px;
  border:1.6px solid var(--lbc-line-2);
  border-radius:6px;
  background:#fff;
  color:#fff;
  transition:background .22s var(--lbc-ease),border-color .22s var(--lbc-ease),transform .2s var(--lbc-ease-bounce);
}

.lbc-save-box svg{opacity:0;transform:scale(.5);transition:opacity .2s var(--lbc-ease),transform .28s var(--lbc-ease-bounce)}

.lbc-save-toggle:checked + .lbc-save-box{
  background:linear-gradient(135deg,var(--lbc-blue),var(--lbc-blue-soft));
  border-color:var(--lbc-blue);
  transform:scale(1.06);
}
.lbc-save-toggle:checked + .lbc-save-box svg{opacity:1;transform:scale(1)}
.lbc-save-toggle:focus-visible + .lbc-save-box{outline:2px solid var(--lbc-blue-soft);outline-offset:2px}

.lbc-save-text{color:inherit}

/* ---------------- Submit ---------------- */
.lbc-submit{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:4px;
  padding:15px 18px;
  border:0;
  border-radius:13px;
  background:linear-gradient(135deg,var(--lbc-navy),var(--lbc-blue) 52%,var(--lbc-blue-soft) 82%,var(--lbc-cyan) 130%);
  color:#fff;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.01em;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 12px 26px -13px rgba(20,80,196,.9);
  transition:transform .22s var(--lbc-ease),box-shadow .3s var(--lbc-ease),opacity .2s;
}

.lbc-submit::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-70%;
  width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.36),transparent);
  transform:skewX(-18deg);
  transition:left .68s var(--lbc-ease);
  pointer-events:none;
}

.lbc-submit:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 18px 34px -13px rgba(20,80,196,.95);
}
.lbc-submit:hover:not(:disabled)::before{left:125%}
.lbc-submit:active:not(:disabled){transform:translateY(0) scale(.99)}
.lbc-submit:focus-visible{outline:3px solid var(--lbc-blue-soft);outline-offset:3px}
.lbc-submit:disabled{opacity:.92;cursor:progress;transform:none}

.lbc-submit-arrow{
  display:inline-flex;
  transition:transform .28s var(--lbc-ease);
}
.lbc-submit:hover:not(:disabled) .lbc-submit-arrow{transform:translateX(4px)}

.lbc-submit.is-loading{animation:lbc-pulse 1.5s ease-in-out infinite}
.lbc-submit.is-loading .lbc-submit-arrow{display:none}

@keyframes lbc-pulse{
  0%,100%{box-shadow:0 12px 26px -13px rgba(20,80,196,.8)}
  50%{box-shadow:0 12px 36px -10px rgba(31,192,230,.95)}
}

.lbc-spinner{
  display:none;
  flex:none;
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.32);
  border-top-color:#fff;
  border-radius:50%;
  animation:lbc-spin .72s linear infinite;
}
.lbc-submit.is-loading .lbc-spinner{display:inline-block}

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

/* ---------------- Error ---------------- */
.lbc-error{
  margin-top:14px;
  padding:12px 15px;
  border:1px solid var(--lbc-danger-line);
  border-left:3.5px solid var(--lbc-danger);
  border-radius:12px;
  background:var(--lbc-danger-soft);
  color:#9c2417;
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  text-align:center;
  animation:lbc-error-in .3s var(--lbc-ease);
}
.lbc-error[hidden]{display:none}

@keyframes lbc-error-in{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}

/* ---------------- Bill alert opt-in (soft ask) ---------------- */
.lbc-ask{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:15px;
  padding:13px 14px;
  border:1px solid var(--lbc-sky-deep);
  border-radius:13px;
  background:linear-gradient(135deg,var(--lbc-sky),#fff 70%);
  animation:lbc-ask-in .42s var(--lbc-ease) both;
}
.lbc-ask[hidden]{display:none}

@keyframes lbc-ask-in{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

.lbc-ask-bell{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--lbc-blue),var(--lbc-blue-soft));
  color:#fff;
  animation:lbc-bell 4.5s ease-in-out 1.2s infinite;
  transform-origin:50% 15%;
}

@keyframes lbc-bell{
  0%,88%,100%{transform:rotate(0)}
  90%{transform:rotate(11deg)}
  93%{transform:rotate(-9deg)}
  96%{transform:rotate(5deg)}
}

.lbc-ask-body{flex:1 1 auto;min-width:0}

.lbc-ask-title{
  display:block;
  margin-bottom:3px;
  color:var(--lbc-navy);
  font-size:13.5px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.005em;
}

.lbc-ask-text{
  margin:0;
  padding:0;
  color:var(--lbc-muted);
  font-size:12.5px;
  line-height:1.5;
}

.lbc-ask-actions{
  flex:none;
  display:flex;
  align-items:center;
  gap:7px;
  align-self:center;
}

.lbc-ask-yes,
.lbc-ask-no{
  padding:8px 13px;
  border-radius:9px;
  border:1px solid transparent;
  font-size:12.5px;
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
  cursor:pointer;
  transition:background .22s var(--lbc-ease),color .22s var(--lbc-ease),border-color .22s var(--lbc-ease),transform .18s var(--lbc-ease),box-shadow .24s var(--lbc-ease);
}

.lbc-ask-yes{
  background:linear-gradient(135deg,var(--lbc-navy),var(--lbc-blue) 60%,var(--lbc-blue-soft));
  color:#fff;
  box-shadow:0 7px 16px -9px rgba(20,80,196,.9);
}
.lbc-ask-yes:hover{transform:translateY(-1px);box-shadow:0 11px 20px -9px rgba(20,80,196,.95)}
.lbc-ask-yes:active{transform:translateY(0) scale(.98)}
.lbc-ask-yes:disabled{opacity:.7;cursor:progress;transform:none}

.lbc-ask-no{
  background:transparent;
  border-color:var(--lbc-line-2);
  color:var(--lbc-muted);
}
.lbc-ask-no:hover{background:#fff;color:var(--lbc-navy);border-color:var(--lbc-sky-deep)}

.lbc-ask-yes:focus-visible,
.lbc-ask-no:focus-visible{outline:2px solid var(--lbc-blue-soft);outline-offset:2px}

/* confirmed state */
.lbc-ask.is-done{
  border-color:#bfe7d6;
  background:linear-gradient(135deg,#eefaf4,#fff 70%);
}
.lbc-ask.is-done .lbc-ask-bell{
  background:linear-gradient(135deg,var(--lbc-ok),#3fd39a);
  animation:lbc-ask-pop .44s var(--lbc-ease-bounce) both;
}
.lbc-ask.is-done .lbc-ask-title{color:var(--lbc-ok)}
.lbc-ask.is-done .lbc-ask-actions{display:none}
.lbc-ask.is-done .lbc-ask-text{display:none}

@keyframes lbc-ask-pop{
  from{transform:scale(.6)}
  to{transform:scale(1)}
}

@media(max-width:620px){
  .lbc-ask{flex-wrap:wrap;gap:10px;padding:12px 13px}
  .lbc-ask-body{flex:1 1 calc(100% - 43px)}
  .lbc-ask-actions{width:100%;justify-content:stretch}
  .lbc-ask-yes,.lbc-ask-no{flex:1;text-align:center;padding:10px 12px}
  .lbc-ask.is-done .lbc-ask-body{flex:1 1 auto}
}

/* ---------------- Saved chips ---------------- */
.lbc-saved{margin-top:18px;animation:lbc-fade-up .4s var(--lbc-ease) both}
.lbc-saved[hidden]{display:none}

.lbc-saved-heading{
  display:block;
  margin-bottom:9px;
  color:var(--lbc-faint);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.lbc-saved-list{display:flex;flex-wrap:wrap;gap:8px}

.lbc-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 8px 8px 13px;
  border:1px solid var(--lbc-sky-deep);
  border-radius:999px;
  background:var(--lbc-sky);
  color:var(--lbc-navy);
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums lining-nums;
  animation:lbc-chip-in .34s var(--lbc-ease-bounce) both;
}

@keyframes lbc-chip-in{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:none}
}

.lbc-chip-use{
  border:0;
  background:none;
  padding:0;
  color:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  cursor:pointer;
  transition:opacity .2s var(--lbc-ease)}
.lbc-chip-use:hover{opacity:.75}
.lbc-chip-use:focus-visible{outline:2px solid var(--lbc-blue-soft);outline-offset:3px;border-radius:4px}

.lbc-chip-tag{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  opacity:.6;
}

.lbc-chip-del{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(10,42,99,.09);
  color:var(--lbc-navy);
  cursor:pointer;
  transition:background .2s var(--lbc-ease),transform .18s var(--lbc-ease);
}
.lbc-chip-del:hover{background:rgba(198,47,34,.16);color:var(--lbc-danger)}
.lbc-chip-del:active{transform:scale(.88)}
.lbc-chip-del:focus-visible{outline:2px solid var(--lbc-blue-soft);outline-offset:2px}

/* ---------------- Help ---------------- */
.lbc-help{margin-top:15px;border-top:1px solid var(--lbc-line);padding-top:6px}

.lbc-help-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:13px 2px;
  border:0;
  background:none;
  color:var(--lbc-muted);
  font-size:13.5px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:color .22s var(--lbc-ease);
}
.lbc-help-toggle:hover{color:var(--lbc-navy)}
.lbc-help-toggle:focus-visible{outline:2px solid var(--lbc-blue-soft);outline-offset:2px;border-radius:8px}

.lbc-help-icon{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--lbc-sky);
  color:var(--lbc-blue);
  font-size:12.5px;
  font-weight:800;
}

.lbc-help-chevron{
  margin-left:auto;
  display:inline-flex;
  color:var(--lbc-faint);
  transition:transform .34s var(--lbc-ease),color .22s var(--lbc-ease);
}
.lbc-help-toggle[aria-expanded="true"] .lbc-help-chevron{transform:rotate(180deg);color:var(--lbc-blue)}

.lbc-help-panel{padding:2px 0 18px;animation:lbc-help-in .38s var(--lbc-ease) both}
.lbc-help-panel[hidden]{display:none}

@keyframes lbc-help-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* mini bill illustration */
.lbc-mini-bill{
  position:relative;
  padding:13px 14px 15px;
  border:1px solid var(--lbc-line);
  border-radius:13px;
  background:
    linear-gradient(180deg,#fff,var(--lbc-surface-2));
  overflow:hidden;
}

.lbc-mini-top{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding-bottom:9px;
  margin-bottom:10px;
  border-bottom:1px dashed var(--lbc-line-2);
}

.lbc-mini-brand{font-size:13px;font-weight:800;color:var(--lbc-navy);letter-spacing:.04em}
.lbc-mini-tag{font-size:8.5px;font-weight:700;color:var(--lbc-faint);letter-spacing:.08em}

.lbc-mini-row{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 9px;
  border-radius:8px;
  margin-bottom:5px;
}

.lbc-mini-key{font-size:8.5px;font-weight:800;letter-spacing:.09em;color:var(--lbc-faint)}
.lbc-mini-val{font-size:13.5px;font-weight:800;color:var(--lbc-ink);letter-spacing:.07em;font-variant-numeric:tabular-nums lining-nums}

.lbc-mini-row--ref{
  background:rgba(31,192,230,.12);
  box-shadow:inset 0 0 0 1.5px rgba(20,80,196,.34);
  animation:lbc-highlight 3s ease-in-out infinite;
}

@keyframes lbc-highlight{
  0%,100%{box-shadow:inset 0 0 0 1.5px rgba(20,80,196,.28)}
  50%{box-shadow:inset 0 0 0 1.5px rgba(20,80,196,.72)}
}

.lbc-mini-lines{display:flex;flex-direction:column;gap:5px;margin-top:9px;padding:0 9px}
.lbc-mini-lines span{height:5px;border-radius:3px;background:var(--lbc-line)}
.lbc-mini-lines span:nth-child(1){width:88%}
.lbc-mini-lines span:nth-child(2){width:64%}
.lbc-mini-lines span:nth-child(3){width:76%}

.lbc-help-list{
  margin:14px 0 0;
  padding:0 0 0 19px;
  color:var(--lbc-muted);
  font-size:13px;
  line-height:1.65;
}
.lbc-help-list li{margin:0 0 6px}
.lbc-help-list li::marker{color:var(--lbc-blue)}

/* ---------------- Footer ---------------- */
.lbc-footer{
  padding:12px 20px 15px;
  border-top:1px solid var(--lbc-line);
  background:var(--lbc-surface-2);
  color:var(--lbc-faint);
  text-align:center;
  font-size:11.5px;
  line-height:1.6;
}

/* ---------------- Loading overlay ---------------- */
.lbc-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  animation:lbc-overlay-in .28s var(--lbc-ease) both;
}
.lbc-overlay[hidden]{display:none}

@keyframes lbc-overlay-in{from{opacity:0}to{opacity:1}}

.lbc-overlay-inner{text-align:center;max-width:320px}

.lbc-meter-anim{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  height:42px;
  margin-bottom:16px;
}

.lbc-meter-anim span{
  display:block;
  width:8px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--lbc-cyan),var(--lbc-blue));
  animation:lbc-bars 1.05s var(--lbc-ease) infinite;
}
.lbc-meter-anim span:nth-child(1){animation-delay:0s}
.lbc-meter-anim span:nth-child(2){animation-delay:.13s}
.lbc-meter-anim span:nth-child(3){animation-delay:.26s}
.lbc-meter-anim span:nth-child(4){animation-delay:.39s}

@keyframes lbc-bars{
  0%,100%{height:11px;opacity:.55}
  50%{height:40px;opacity:1}
}

.lbc-overlay-text{
  margin:0;
  color:var(--lbc-navy);
  font-size:14.5px;
  font-weight:700;
  line-height:1.5;
}

.lbc-overlay-link{
  display:inline-block;
  margin-top:12px;
  color:var(--lbc-blue);
  font-size:13px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  animation:lbc-fade-up .34s var(--lbc-ease) both;
}
.lbc-overlay-link[hidden]{display:none}
.lbc-overlay-link:hover{color:var(--lbc-navy)}

/* ===============================================================
   Tablet / mobile
   =============================================================== */
@media(max-width:620px){
  .lbc-wrap{margin:20px auto}
  .lbc-card{border-radius:17px}

  .lbc-header{padding:25px 17px 27px}
  .lbc-bolt{width:44px;height:44px;margin-bottom:12px;border-radius:14px}
  .lbc-title{font-size:21px}
  .lbc-subtitle{font-size:13.2px}
  .lbc-badge{margin-top:13px;font-size:11px;padding:5px 11px 5px 9px}

  .lbc-body{padding:16px 15px 4px}

  .lbc-tab-label{font-size:12.8px}
  .lbc-tab-sub{font-size:10.5px}

  .lbc-form{padding-top:17px}
  .lbc-input{font-size:18px;padding:14px 68px 14px 14px;letter-spacing:.04em}
  .lbc-clear{right:42px}
  .lbc-tick{right:14px}

  .lbc-submit{padding:15px 17px;font-size:15px}
  .lbc-save{margin:14px 0 16px}

  .lbc-footer{padding:13px 16px 16px;font-size:11px}
  .lbc-overlay{padding:18px}
}

@media(max-width:400px){
  .lbc-title{font-size:19.5px}
  .lbc-input{font-size:17.5px;letter-spacing:.03em;padding-right:66px}
  .lbc-tab{padding:9px 4px 10px}
  .lbc-tab-label{font-size:12px}
  .lbc-tab-sub{font-size:10px}
  .lbc-chip{font-size:12px}
  .lbc-mini-val{font-size:12px}
}

/* very narrow: stack the tabs */
@media(max-width:330px){
  .lbc-tabs{flex-direction:column}
  .lbc-tab-pill{display:none}
  .lbc-tab.is-active{
    background:linear-gradient(135deg,var(--lbc-navy),var(--lbc-blue));
    color:#fff;
  }
}

/* ===============================================================
   LESCO additions + polish layer
   Nothing below changes font-family or any font-size.
   =============================================================== */

/* ---- U / R badge -------------------------------------------------
   LESCO reference numbers end in U (urban) or R (rural). PITC does not
   accept the letter, so it is stripped — this badge echoes it back so the
   visitor can see it was understood rather than silently swallowed.        */
.lbc-ru{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border:1px solid var(--lbc-sky-deep);
  border-radius:999px;
  background:var(--lbc-sky);
  color:var(--lbc-blue);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
  animation:lbc-ru-in .34s var(--lbc-ease-bounce) both;
}
.lbc-ru[hidden]{display:none}

@keyframes lbc-ru-in{
  from{opacity:0;transform:translateY(-4px) scale(.86)}
  to{opacity:1;transform:none}
}

/* sample U on the mini bill */
.lbc-mini-val em{
  font-style:normal;
  padding:1px 5px;
  margin-left:3px;
  border-radius:5px;
  background:rgba(20,80,196,.12);
  color:var(--lbc-blue);
}

/* ---- Card: ambient ring that wakes up while the form is in use ---- */
/* inset:0, not -1px: .lbc-card clips its overflow, so a negative inset would
   put the ring in the clipped-away pixel and it would never paint. */
.lbc-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,var(--lbc-blue),var(--lbc-cyan) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--lbc-ease);
}
.lbc-card:focus-within::after{opacity:.55}

/* ---- Header: a slow light sweep over the gradient ---- */
.lbc-header .lbc-bolt,
.lbc-header .lbc-title,
.lbc-header .lbc-subtitle,
.lbc-header .lbc-badge{position:relative;z-index:2}

.lbc-sheen{
  position:absolute;
  top:-60%;
  left:-45%;
  width:45%;
  height:220%;
  z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 45%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.16) 55%,transparent);
  transform:rotate(12deg);
  pointer-events:none;
  animation:lbc-sheen 7.5s var(--lbc-ease) 1.4s infinite;
}

@keyframes lbc-sheen{
  0%{left:-45%}
  55%,100%{left:135%}
}

/* bolt gets a soft halo that breathes with the pulse */
.lbc-bolt::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:inherit;
  background:radial-gradient(circle,rgba(255,255,255,.34),transparent 68%);
  opacity:0;
  pointer-events:none;
  animation:lbc-halo 3.4s var(--lbc-ease) infinite;
}

@keyframes lbc-halo{
  0%,100%{opacity:0;transform:scale(.8)}
  50%{opacity:.85;transform:scale(1.08)}
}

/* ---- Tabs: springier pill with a lift ---- */
.lbc-tab-pill{
  transition:transform .48s var(--lbc-ease-bounce),width .48s var(--lbc-ease-bounce);
  box-shadow:0 6px 15px -8px rgba(10,42,99,.95);
}

/* ---- Input: focus halo + success ripple ---- */
.lbc-input-shell::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:13px;
  border:1.5px solid var(--lbc-ok);
  opacity:0;
  pointer-events:none;
}

.lbc-input-shell:has(.lbc-input.is-ready)::after{
  animation:lbc-ripple .62s var(--lbc-ease) 1;
}

@keyframes lbc-ripple{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.045)}
}

/* the digit block gets a hair more presence once it validates */
.lbc-input.is-ready{
  box-shadow:0 0 0 4px rgba(18,128,92,.11);
}

/* ---- Meter: light travelling along the fill ---- */
.lbc-meter-fill{position:relative;overflow:hidden}

.lbc-meter-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-100%);
  animation:lbc-meter-sheen 1.7s var(--lbc-ease) infinite;
}

.lbc-meter.is-full .lbc-meter-fill::after{animation:none}

@keyframes lbc-meter-sheen{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(180%)}
}

/* ---- Tick: ring pulse behind the checkmark ---- */
.lbc-tick::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:2px solid var(--lbc-ok);
  opacity:0;
}

.lbc-input.is-ready ~ .lbc-tick::before{
  animation:lbc-tick-ring .68s var(--lbc-ease) 1;
}

@keyframes lbc-tick-ring{
  0%{opacity:.7;transform:scale(.6)}
  100%{opacity:0;transform:scale(1.5)}
}

/* ---- Submit: press ripple + deeper hover ---- */
.lbc-submit:hover:not(:disabled){
  box-shadow:0 16px 32px -13px rgba(20,80,196,.95);
}

.lbc-submit:active:not(:disabled){transform:translateY(0) scale(.988)}

.lbc-submit::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}

.lbc-submit:active:not(:disabled)::after{
  animation:lbc-press .5s var(--lbc-ease) 1;
}

@keyframes lbc-press{
  0%{opacity:.5;transform:translate(-50%,-50%) scale(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(26)}
}

/* ---- Saved chips: lift on hover ---- */
.lbc-chip{transition:transform .2s var(--lbc-ease),box-shadow .24s var(--lbc-ease)}
.lbc-chip:hover{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(10,42,99,.75)}

/* ---- Help: chevron rotates when the panel opens ---- */
.lbc-help-chevron{transition:transform .32s var(--lbc-ease-bounce)}
.lbc-help-toggle[aria-expanded="true"] .lbc-help-chevron{transform:rotate(180deg)}

/* the reference row on the mini bill draws the eye */
.lbc-mini-row--ref{
  border-radius:7px;
  animation:lbc-mini-flash 2.6s var(--lbc-ease) .4s infinite;
}

@keyframes lbc-mini-flash{
  0%,100%{background:transparent}
  45%{background:rgba(20,80,196,.09)}
}

/* ---- Overlay: soften what is behind it ---- */
.lbc-overlay{
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
}

/* ===============================================================
   Optional auto dark mode — enable with [lesco_bill_checker dark="auto"]
   =============================================================== */
@media(prefers-color-scheme:dark){
  .lbc-auto-dark{
    --lbc-sky:#16233c;
    --lbc-sky-deep:#24365a;
    --lbc-surface:#0f1829;
    --lbc-surface-2:#141f34;
    --lbc-ink:#e8eefb;
    --lbc-muted:#a3b1c9;
    --lbc-faint:#7f8da6;
    --lbc-line:#22304b;
    --lbc-line-2:#2c3d5e;
    --lbc-danger-soft:#2a1715;
    --lbc-danger-line:#5a2a22;
  }
  .lbc-auto-dark .lbc-input::placeholder{color:#5f6d85}
  .lbc-auto-dark .lbc-save-box{background:#0f1829}
  .lbc-auto-dark .lbc-mini-bill{background:linear-gradient(180deg,#141f34,#0f1829)}
  .lbc-auto-dark .lbc-mini-lines span{background:#22304b}
  .lbc-auto-dark .lbc-clear{background:#22304b;color:#a3b1c9}
  .lbc-auto-dark .lbc-clear:hover{background:#2c3d5e;color:#e8eefb}
  .lbc-auto-dark .lbc-chip{color:#cfe0ff}
  .lbc-auto-dark .lbc-chip-del{background:rgba(255,255,255,.1);color:#cfe0ff}
  .lbc-auto-dark .lbc-overlay{background:rgba(15,24,41,.92)}
  .lbc-auto-dark .lbc-overlay-text{color:#e8eefb}
  .lbc-auto-dark .lbc-input.is-ready{background:#12261f}
  .lbc-auto-dark .lbc-error{color:#ffb3a6}
  .lbc-auto-dark .lbc-ask{background:linear-gradient(135deg,#16233c,#0f1829 70%)}
  .lbc-auto-dark .lbc-ask-title{color:#cfe0ff}
  .lbc-auto-dark .lbc-ask-no:hover{background:#16233c;color:#e8eefb}
  .lbc-auto-dark .lbc-ask.is-done{background:linear-gradient(135deg,#12261f,#0f1829 70%);border-color:#1e4a38}
  .lbc-auto-dark .lbc-ru{background:#16233c;border-color:#2c3d5e;color:#9dc0ff}
  .lbc-auto-dark .lbc-mini-val em{background:rgba(157,192,255,.16);color:#9dc0ff}
  .lbc-auto-dark .lbc-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
}

/* ===============================================================
   Reduced motion
   =============================================================== */
@media(prefers-reduced-motion:reduce){
  .lbc-wrap *,
  .lbc-wrap *::before,
  .lbc-wrap *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .lbc-submit:hover:not(:disabled){transform:none}
  .lbc-spark{display:none}
  .lbc-sheen{display:none}
  .lbc-bolt::after,
  .lbc-meter-fill::after{display:none}
  .lbc-mini-row--ref{animation:none}
  .lbc-chip:hover{transform:none}
}