.line-wizard { --line-accent:var(--primary,#1a56a8); border:1px solid var(--g200,#dce3eb); overflow:hidden; }
.line-wizard .lw-head { padding:24px; background:linear-gradient(115deg,var(--g50,#f6f8fb),#fff); display:flex; gap:20px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.line-wizard h3 { margin:0 0 7px; font-size:20px; letter-spacing:.02em; }
.line-wizard .lw-eyebrow { font-size:11px; color:var(--g500,#657184); letter-spacing:.12em; margin-bottom:8px; }
.line-wizard .lw-status { border:1px solid var(--g200,#dce3eb); border-radius:30px; padding:8px 14px; font-weight:600; background:#fff; }
.line-wizard .lw-grid { display:grid; grid-template-columns:220px minmax(0,1fr); }
.line-wizard nav { padding:16px; border-right:1px solid var(--g200,#dce3eb); background:var(--g50,#f6f8fb); }
.line-wizard nav button { width:100%; display:flex; align-items:center; gap:10px; text-align:left; padding:11px 9px; border:0; background:none; color:var(--g600,#465368); border-radius:8px; cursor:pointer; line-height:1.5; }
.line-wizard nav button[aria-current=step] { background:#fff; color:var(--line-accent); box-shadow:0 2px 9px #142b4b0c; font-weight:700; }
.line-wizard .lw-number { width:26px; height:26px; border-radius:50%; border:1px solid var(--g300,#b8c4d3); display:grid; place-items:center; flex-shrink:0; font-size:12px; }
.line-wizard [aria-current=step] .lw-number { background:var(--line-accent); color:#fff; border-color:transparent; }
.line-wizard .lw-content { padding:24px; min-width:0; }
.line-wizard .lw-screen { color:var(--g500,#657184); font-size:12px; margin-bottom:10px; }
.line-wizard .lw-copy { margin:12px 0; padding:12px; background:var(--g50,#f6f8fb); border:1px solid var(--g200,#dce3eb); border-radius:8px; }
.line-wizard .lw-copy label { display:block; font-size:12px; margin-bottom:6px; color:var(--g600,#465368); }
.line-wizard .lw-copy-row { display:flex; align-items:center; gap:10px; }
.line-wizard .lw-copy code { font-size:12px; overflow-wrap:anywhere; flex:1; min-width:0; }
.line-wizard .lw-warning { margin:16px 24px 0; border:1px solid #edc09b; border-left:4px solid #b55618; background:#fff8ee; padding:14px 16px; color:#793b17; border-radius:8px; line-height:1.8; }
.line-wizard .lw-text { line-height:1.9; color:var(--g700,#354255); }
.line-wizard .lw-progress { height:4px; background:var(--g100,#edf1f6); }
.line-wizard .lw-progress span { display:block; height:100%; background:var(--line-accent); transition:width .2s; }
.line-wizard .lw-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0; }
.line-wizard .lw-form label { display:block; font-size:12px; line-height:1.8; }
.line-wizard .lw-form input { width:100%; }
.line-wizard .lw-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; align-items:center; }
.line-wizard .lw-result { padding:12px; border:1px solid var(--g200,#dce3eb); border-radius:8px; margin:8px 0; display:flex; justify-content:space-between; gap:12px; }
.line-wizard .lw-error { color:#a53028; background:#fff2f0; padding:12px; border-radius:8px; margin:12px 0; }
.line-wizard .lw-check { display:flex; align-items:flex-start; gap:9px; line-height:1.8; margin:18px 0; }
.line-wizard button:focus-visible,.line-wizard input:focus-visible { outline:3px solid #599fe1; outline-offset:3px; }
.line-wizard .lw-foot { padding:16px 24px; border-top:1px solid var(--g200,#dce3eb); display:flex; justify-content:space-between; gap:10px; }
@media(max-width:760px) { .line-wizard .lw-grid { grid-template-columns:1fr; } .line-wizard nav { display:none; } .line-wizard .lw-form { grid-template-columns:1fr; } .line-wizard .lw-content,.line-wizard .lw-head { padding:18px; } .line-wizard .lw-warning { margin:14px 18px 0; } }
/* Guide hierarchy uses the existing application palette and button components. */
.line-wizard .lw-grid { grid-template-columns:285px minmax(0,1fr); }
.line-wizard .lw-eyebrow { letter-spacing:.03em; font-size:13px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.line-wizard .lw-dev-badge,.line-wizard .lw-secret-badge { display:inline-block; border-radius:5px; padding:2px 7px; font-size:11px; background:var(--g100,#edf1f6); color:var(--g600,#465368); white-space:nowrap; }
.line-wizard .lw-secret-badge.is-registered { color:var(--primary,#1a56a8); background:var(--g50,#f6f8fb); border:1px solid var(--g200,#dce3eb); }
.line-wizard .lw-subtitle { margin:0; color:var(--g600,#465368); font-size:14px; line-height:1.8; }
.line-wizard .lw-nav-label { white-space:nowrap; font-size:12px; }
.line-wizard h4 { margin:10px 0 24px; font-size:21px; line-height:1.5; }
.line-wizard h5 { margin:0 0 12px; font-size:14px; font-weight:700; line-height:1.6; }
.line-wizard .lw-current { color:var(--primary,#1a56a8); font-size:12px; letter-spacing:.02em; line-height:1.8; }
.line-wizard .lw-todo { counter-reset:instruction; list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.line-wizard .lw-todo li { counter-increment:instruction; position:relative; padding-left:38px; line-height:1.9; font-size:14px; color:var(--g700,#354255); }
.line-wizard .lw-todo li::before { content:counter(instruction); position:absolute; left:0; top:2px; width:26px; height:26px; display:grid; place-items:center; background:var(--g50,#f6f8fb); color:var(--primary,#1a56a8); border:1px solid var(--g200,#dce3eb); border-radius:8px; font-weight:700; font-size:12px; }
.line-wizard .lw-location,.line-wizard .lw-values { margin-top:28px; }
.line-wizard .lw-location { border-left:3px solid var(--g200,#dce3eb); padding-left:14px; }
.line-wizard .lw-location p,.line-wizard .lw-values p { margin:0 0 10px; line-height:1.9; font-size:13px; color:var(--g600,#465368); overflow-wrap:anywhere; }
.line-wizard .lw-pitfalls { margin-top:24px; padding:16px 18px; background:#fff8ee; border:1px solid #edc09b; border-radius:8px; color:#793b17; }
.line-wizard .lw-pitfalls ul { margin:0; padding-left:18px; font-size:13px; line-height:1.9; }
.line-wizard .lw-pitfalls li + li { margin-top:8px; }
.line-wizard .lw-label { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; font-weight:600; }
.line-wizard .lw-hint { display:block; margin-top:6px; color:var(--g500,#657184); font-size:11px; line-height:1.7; }
.line-wizard .lw-form input { box-sizing:border-box; }
.line-wizard h4:focus { outline:2px solid var(--primary,#1a56a8); outline-offset:5px; border-radius:2px; }
@media(max-width:760px) {
  .line-wizard .lw-grid { grid-template-columns:minmax(0,1fr); }
  .line-wizard .lw-nav { display:none; }
  .line-wizard h4 { font-size:19px; margin-bottom:20px; }
  .line-wizard .lw-foot { padding:16px 18px; flex-wrap:wrap; }
  .line-wizard .lw-foot > div { display:flex; gap:8px; margin-left:auto; }
  .line-wizard .lw-copy-row { align-items:flex-start; }
  .line-wizard .lw-copy-row button { flex-shrink:0; }
  .line-wizard .lw-result { flex-direction:column; gap:4px; font-size:13px; }
}

.line-wizard .lw-suggest { margin-top:24px; min-width:0; }
.line-wizard .lw-suggest-reason { margin:8px 0 0; font-size:11px; color:var(--g500,#657184); line-height:1.7; overflow-wrap:anywhere; }
.line-wizard .lw-suggest .lw-copy-row { flex-wrap:wrap; }
.line-wizard .lw-suggest .lw-copy-row button { flex-shrink:0; }

/* Menu previews share the wizard palette, with native keyboard radio controls. */
.line-wizard .lw-design { margin:24px 0; padding:24px; border:1px solid var(--g200, #dce3eb); border-radius:20px; background:var(--surface, #fff); }
.line-wizard .lw-design-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.line-wizard .lw-design-head h5 { margin:0; font-size:17px; }
.line-wizard .lw-theme-current { font-size:12px; padding:6px 10px; border-radius:999px; background:var(--g50, #f6f8fb); color:var(--primary, #1a56a8); }
.line-wizard .lw-theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0; }
.line-wizard .lw-theme-card { position:relative; display:block; min-width:0; cursor:pointer; border:2px solid var(--g200, #dce3eb); padding:10px; border-radius:16px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.line-wizard .lw-theme-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px #173b2e12; }
.line-wizard .lw-theme-card.is-selected { border-color:var(--primary, #1a56a8); background:var(--g50, #f6f8fb); box-shadow:0 0 0 3px #16756415; }
.line-wizard .lw-theme-card:focus-within { outline:3px solid var(--primary, #1a56a8); outline-offset:4px; }
.line-wizard .lw-theme-card input { position:absolute; top:18px; right:18px; width:20px; height:20px; accent-color:var(--primary, #1a56a8); z-index:1; }
.line-wizard .lw-theme-card img { display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 4px 14px #173b2e16; }
.line-wizard .lw-theme-caption { display:grid; gap:6px; padding:14px 4px 6px; }
.line-wizard .lw-theme-caption strong { font-size:15px; }
.line-wizard .lw-theme-caption > span { font-size:12px; line-height:1.7; color:var(--g500, #64748b); }
@media (max-width:600px) {
  .line-wizard .lw-design { padding:16px; }
  .line-wizard .lw-theme-grid { grid-template-columns:1fr; gap:14px; }
  .line-wizard .lw-design > .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .line-wizard .lw-theme-card { transition:none; }
  .line-wizard .lw-theme-card:hover { transform:none; }
}