/* LINE setup wizard — light theme (white + green), resembling the LINE official
   account / LINE Developers sites WITHOUT matching their palette exactly (a
   deliberately different green, to avoid brand-confusion problems later).

   Loaded AFTER onboarding.css, so these :root values override the dark theme —
   and only on this page (only line-setup.html links this file). */
:root {
  --bg: #ffffff;          /* inputs, code/url boxes */
  --card: #ffffff;        /* cards */
  --card2: #eef4f0;       /* secondary buttons / chips */
  --line: #d7e0da;        /* borders */
  --text: #1c2722;        /* dark text on white */
  --muted: #5b6b63;       /* secondary text */
  --accent: #10b667;      /* LINE-ish green, intentionally NOT #06C755 */
  --ok: #12a85f;
  --err: #d8503f;
}

body { background: #f4f8f6; color: var(--text); }  /* soft off-white page */

.lead { color: var(--muted); }
.card { box-shadow: 0 1px 3px rgba(20, 40, 30, .06); }
.primary { color: #fff; }

.badge-line { background: #e3f6ea; color: #0a8a4a; }

.ls-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ls-progress-text { color: var(--muted); font-size: 13px; }
.ls-progress-text b { color: var(--text); }
.ls-bar { flex: 1 1 160px; height: 6px; background: #e3eae6; border-radius: 999px; overflow: hidden; }
.ls-bar-fill { height: 100%; width: 14%; background: var(--accent); transition: width .25s ease; }

.ls-list { margin: 10px 0; padding-left: 20px; }
.ls-list li { margin: 6px 0; }
.ls-on { color: var(--ok); font-weight: 700; }
.ls-off { color: var(--err); font-weight: 700; }

.ls-note { border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 13px; border: 1px solid var(--line); }
.ls-warn { border-color: #e7d49b; background: #fbf6e3; color: #8a6a1c; }

.ls-webhook { margin-top: 14px; }
.ls-webhook-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ls-webhook-url {
  flex: 1; background: #f6faf8; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; word-break: break-all; color: var(--text);
}

.ls-summary { list-style: none; padding: 0; margin: 8px 0 16px; }
.ls-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ls-summary li span:first-child { color: var(--muted); }
.ls-summary li span:last-child { color: var(--text); word-break: break-all; text-align: right; }

.ls-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ls-nav .primary { margin-left: auto; }

/* done card: light green circle instead of the dark-theme version */
.done .check { background: #e3f6ea; color: var(--ok); }