/**
 * Tour — Account → Security (walkthrough/screens/account.php). Prefix lac-.
 *
 * ⚠️ Light app inside a dark site: every colour is explicit. The header card is
 *    DARK, as the product's .acc-headcard.
 * ⚠️ Two deliberate departures from the product's own paint, both for legibility
 *    on white and both what the product's cascade is trying to do:
 *      - "Set up on this device" is drawn with dark-volt text (#4a6b00). The page
 *        paints it var(--volt) on white, which all but disappears.
 *      - the success line is #5a6068: the product's inline volt loses to its own
 *        `.acc-light .acc-card p { color:#5a6068 !important }` anyway.
 * ⚠️ No transitions or animations: the engine drives all motion.
 * ⚠️ No media queries: the phone layout is the .lw-scaler.is-hand block below.
 */

.lw-scaler .lac{ color:#0a0a0a; font-family:'Inter',system-ui,sans-serif; }
.lw-scaler .lac [hidden]{ display:none !important; }

/* header — the dark, volt-edged card */
.lw-scaler .lac-head{
  margin:0 0 24px; padding:22px 26px; background:#0a0a0a; border:1px solid #C8F135; border-radius:16px;
  box-shadow:0 0 0 4px rgba(200,241,53,.10), 0 16px 36px rgba(15,18,22,.22);
}
.lw-scaler .lac-eyebrow{ margin:0 0 4px; font-size:13px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:rgba(242,242,242,.55); }
.lw-scaler .lac-h1{ margin:0; font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:42px; line-height:1.05; letter-spacing:-.02em; color:#F2F2F2; }
.lw-scaler .lac-h1 span{ color:#C8F135; }
.lw-scaler .lac-sub{ margin:8px 0 0; font-size:14px; line-height:1.5; color:rgba(242,242,242,.62); }
.lw-scaler .lac-sub strong{ font-weight:600; color:#F2F2F2; }

/* tabs — the white segmented control; the lit tab is volt */
.lw-scaler .lac-tabs{
  display:inline-flex; gap:4px; max-width:100%; overflow:hidden; margin:0 0 22px; padding:5px;
  background:#fff; border:1px solid #e3e6ea; border-radius:14px; box-shadow:0 1px 2px rgba(15,18,22,.05);
}
.lw-scaler .lac-tab{
  position:relative; overflow:hidden; flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:10px;
  font-family:'Anta','Inter',sans-serif; font-size:13px; line-height:1.3; letter-spacing:.01em; white-space:nowrap; color:#5a6068;
}
.lw-scaler .lac-tab i{ color:inherit; }
.lw-scaler .lac-tab-on{
  position:absolute; inset:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px;
  background:#C8F135; color:#0a0a0a; box-shadow:0 1px 2px rgba(15,18,22,.12);
}

/* cards */
.lw-scaler .lac-card{
  margin:0 0 18px; padding:24px 26px; background:#fff; border:1px solid #e3e6ea; border-radius:14px;
  box-shadow:0 1px 2px rgba(15,18,22,.04); color:#0a0a0a;
}
.lw-scaler .lac-card-head{ margin-bottom:18px; }
.lw-scaler .lac-h2{ margin:0 0 4px; font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:20px; line-height:1.1; color:#0a0a0a; }
.lw-scaler .lac-card-sub{ margin:0; font-size:14px; line-height:1.5; color:#5a6068; }

/* the password form — empty fields, as the page loads */
.lw-scaler .lac-field{ margin-bottom:16px; }
.lw-scaler .lac-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.lw-scaler .lac-label{
  display:block; margin-bottom:6px; font-family:'Anta','Inter',sans-serif; font-size:11px; line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase; color:#5a6068;
}
.lw-scaler .lac-req{ color:#ff5c35; }
.lw-scaler .lac-input{ display:block; height:44px; background:#fff; border:1px solid #d6dae0; border-radius:9px; box-shadow:0 1px 0 rgba(15,18,22,.03); }
.lw-scaler .lac-submit{ display:flex; justify-content:flex-end; margin-top:8px; padding-top:18px; border-top:1px solid #e3e6ea; }
.lw-scaler .lac-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:9px; background:#C8F135; color:#0a0a0a;
  font-family:'Anta','Inter',sans-serif; font-size:14px; line-height:1.3; box-shadow:0 6px 16px rgba(200,241,53,.20);
}
.lw-scaler .lac-btn i{ color:#0a0a0a; }

/* Face ID & fingerprint — the list the page's script draws, then the button */
.lw-scaler .lac-pk-list{ margin-bottom:14px; }
.lw-scaler .lac-pk-none{ margin:0; font-size:13px; line-height:1.5; color:#5a6068; }
.lw-scaler .lac-pk-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #eef0f3; }
.lw-scaler .lac-pk-name{ font-size:14px; line-height:1.5; color:#0a0a0a; }
.lw-scaler .lac-pk-name i{ margin-right:8px; opacity:.6; color:#0a0a0a; }
.lw-scaler .lac-pk-used{ display:block; margin-left:24px; font-size:12px; line-height:1.4; color:#8a909a; }
.lw-scaler .lac-pk-remove{ padding:4px 8px; font-size:13px; color:#ff7a5c; }
.lw-scaler .lac-pk-add{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:9px;
  background:transparent; border:1px solid #C8F135; color:#4a6b00; font-family:'Anta','Inter',sans-serif; font-size:14px; line-height:1.3;
}
.lw-scaler .lac-pk-add i{ color:#4a6b00; }
.lw-scaler .lac-pk-add.lw-hover{ background:rgba(200,241,53,.10); }
.lw-scaler .lac-pk-msg{ min-height:18px; margin:10px 0 0; font-size:13px; line-height:1.4; color:#5a6068; }

/* Current session */
.lw-scaler .lac-session{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:#f7f8fa; border:1px solid #e3e6ea; border-radius:10px; }
.lw-scaler .lac-session > i{ font-size:18px; color:#4a6b00; }
.lw-scaler .lac-session-meta{ font-size:13px; line-height:1.5; color:#5a6068; }
.lw-scaler .lac-session-meta strong{ color:#0a0a0a; }
.lw-scaler .lac-hint{ margin:12px 0 0; font-size:13px; line-height:1.5; color:#5a6068; }
.lw-scaler .lac-hint i{ color:#4a6b00; }

/* ---------------- phone (narrow design space) ----------------
 * As the product below 900 / 700 / 600px: the header shrinks (clamp to 28px),
 * cards pad 20px 18px, the new-password pair stacks, and the tab strip keeps
 * its size and runs off the right edge (the product's scrolls sideways). */
.lw-scaler.is-hand .lac-h1{ font-size:28px; }
.lw-scaler.is-hand .lac-card{ padding:20px 18px; }
.lw-scaler.is-hand .lac-grid{ grid-template-columns:1fr; }