/* LG code board. Everything is scoped to .lgb / .lgb-* so LG's own styles.css is never affected.
   Palette = LG's own (dark #0a0a0f, pink #ff4081 → #c2185b). */
.lgb, .lgb-sheet, .lgb-scrim, .lgb-toast, .lgb-hero-add {
  --lgb-surface:#15121d; --lgb-surface-2:#1d1828; --lgb-sheet:#1a1524; --lgb-well:#0f0c16;
  --lgb-tile-top:#2d2342; --lgb-tile-bot:#1e1829;
  --lgb-line:#2c2438; --lgb-line-hot:rgba(255,64,129,.38);
  --lgb-fg:#ffffff; --lgb-text:#e0e0e0; --lgb-soft:#b0b0b0; --lgb-muted:#9b93aa; --lgb-dim:#6f6880;
  --lgb-pink:#ff4081; --lgb-pink-hi:#ff79a8; --lgb-pink-mid:#e91e63; --lgb-pink-deep:#c2185b;
  --lgb-violet:#8b5cf6; --lgb-violet-soft:#c4b0ff; --lgb-ok:#3fd49b; --lgb-ok-ink:#06261a; --lgb-bad:#ff8a65;
  box-sizing:border-box;
}
.lgb *, .lgb-sheet * { box-sizing:border-box }
.lgb [hidden], .lgb-sheet[hidden], .lgb-sheet [hidden], .lgb-scrim[hidden], .lgb-toast[hidden] { display:none !important }

/* The board sits inside LG's article section, so it takes the section's width and LG's own h2 style. */
.lgb { margin:0 0 40px; padding:0; color:var(--lgb-text); font-size:15px; line-height:1.6 }
.lgb h2 { margin-bottom:16px }
/* Phones: tighter spacing above the board on this page only, so the first code starts within the first screen. */
@media (max-width:768px) {
  #article { padding-top:16px }
  #article > nav[aria-label="Breadcrumb"] { margin-bottom:8px !important }
}

/* LG pill button */
.lgb-btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border:0; border-radius:50px; background:linear-gradient(135deg,#ff4081 0%,#e91e63 50%,#c2185b 100%); color:#fff; font:inherit; font-weight:700; font-size:.95em; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; cursor:pointer; box-shadow:0 4px 20px rgba(255,64,129,.35); transition:transform .3s, box-shadow .3s }
.lgb-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,64,129,.5); color:#fff }
.lgb-btn:disabled { opacity:.42; cursor:not-allowed; transform:none; box-shadow:none }
.lgb-ghost { background:rgba(255,64,129,.07); border:2px solid rgba(255,64,129,.6); color:var(--lgb-pink-hi); box-shadow:none }
.lgb-ghost:hover { background:rgba(255,64,129,.16); box-shadow:none }
.lgb-block { width:100% }
.lgb-hero-add { margin:-6px auto 0; display:flex; position:relative; min-height:40px; padding:0 18px; font-size:.85em }
.lgb :focus-visible, .lgb-sheet :focus-visible, .lgb-hero-add:focus-visible { outline:2px solid var(--lgb-pink-hi); outline-offset:2px }

.lgb-seg-row { display:flex; justify-content:center }
.lgb-seg { display:inline-flex; background:var(--lgb-surface); border:1px solid var(--lgb-line); border-radius:999px; padding:3px }
.lgb-seg button { min-height:40px; background:transparent; border:0; color:var(--lgb-muted); padding:6px 16px; border-radius:999px; font:inherit; font-weight:600; font-size:13px; cursor:pointer }
.lgb-seg button[aria-pressed="true"] { background:var(--lgb-surface-2); color:var(--lgb-fg) }

.lgb-cards { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; grid-template-columns:minmax(0,1fr) }
@media (min-width:820px) { .lgb-cards { grid-template-columns:repeat(2,minmax(0,1fr)) } .lgb-cta { grid-column:1 / -1 } }
.lgb-card { position:relative; background:var(--lgb-surface); border:1px solid var(--lgb-line); border-radius:16px; padding:14px; display:grid; gap:10px; transition:border-color .2s, box-shadow .2s }
.lgb-card:hover { border-color:var(--lgb-line-hot) }
.lgb-shared { border-color:var(--lgb-pink); box-shadow:0 0 0 3px rgba(255,64,129,.22) }
.lgb-ribbon { position:absolute; top:-10px; left:14px; background:var(--lgb-pink); color:#fff; font-weight:800; font-size:10.5px; line-height:1; letter-spacing:1px; text-transform:uppercase; padding:5px 8px; border-radius:6px }
.lgb-top { display:flex; align-items:center; gap:10px }
.lgb-ava { width:38px; height:38px; border-radius:50%; flex:none; border:2px solid rgba(255,64,129,.55); background:var(--lgb-surface-2) url(/board-assets/guest.jpg) center/cover no-repeat }
.lgb-is-mine .lgb-ava { border-color:var(--lgb-violet) }
.lgb-who { flex:1; min-width:0; display:grid; gap:1px; line-height:1.25 }
.lgb-line { display:flex; align-items:center; flex-wrap:wrap; gap:5px }
.lgb-name { color:var(--lgb-fg); font-weight:700; font-size:14px }
.lgb-cc { font-size:10.5px; font-weight:800; letter-spacing:.5px; color:var(--lgb-soft); border:1px solid var(--lgb-line); border-radius:4px; padding:1px 4px; line-height:1.3 }
.lgb-src, .lgb-who time { font-size:12px; color:var(--lgb-muted) }
.lgb-badge { font-weight:800; font-size:10.5px; line-height:1; letter-spacing:1px; text-transform:uppercase; padding:4px 7px; border-radius:6px }
.lgb-new { background:rgba(255,64,129,.16); color:var(--lgb-pink-hi) }
.lgb-topb { background:rgba(63,212,155,.14); color:var(--lgb-ok) }
.lgb-mine { background:rgba(139,92,246,.22); color:var(--lgb-violet-soft) }
.lgb-tally { display:flex; gap:10px; font-size:13px; font-weight:600; color:var(--lgb-muted); white-space:nowrap }
.lgb-tally b { color:var(--lgb-fg); font-variant-numeric:tabular-nums }
.lgb-up b { color:var(--lgb-ok) }
.lgb-votes { display:flex; gap:6px; flex:none }
.lgb-vote-card { min-height:40px; min-width:52px; padding:3px 10px; font-variant-numeric:tabular-nums }
.lgb-vote-card b { color:var(--lgb-fg); margin-left:2px }
.lgb-vote-card:hover { border-color:var(--lgb-line-hot); color:var(--lgb-fg) }
.lgb-vote-card:disabled { opacity:.6; cursor:default }
.lgb-main { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px }
.lgb-tiles { display:flex; gap:4px }
.lgb-tiles span { width:clamp(28px,8.4vw,40px); height:clamp(38px,11vw,50px); display:grid; place-items:center; border-radius:8px; border:1px solid var(--lgb-line); background:linear-gradient(180deg,var(--lgb-tile-top),var(--lgb-tile-bot)); box-shadow:inset 0 -3px 0 rgba(0,0,0,.35); font-weight:800; font-size:clamp(18px,5.4vw,25px); line-height:1; color:var(--lgb-fg) }
.lgb-sm span { width:26px; height:32px; font-size:16px; border-radius:6px }
/* Copy fills the rest of the row; when a long label (e.g. ru «Копировать») doesn't fit next to the code, it wraps under it full-width. */
.lgb-copy { flex:1 0 auto; max-width:100%; min-height:clamp(38px,11vw,50px); min-width:88px; padding:0 18px }
.lgb-done { background:var(--lgb-ok) !important; color:var(--lgb-ok-ink) !important; box-shadow:none !important }
.lgb-own { margin:0; text-align:left; font-size:13px; color:var(--lgb-violet-soft); border-top:1px dashed var(--lgb-line); padding-top:8px }
.lgb-cta { border-radius:16px; padding:18px 16px; text-align:center; background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(255,64,129,.14)); border:1px solid var(--lgb-line-hot); display:grid; gap:8px; justify-items:center }
.lgb-cta strong { color:var(--lgb-fg); font-size:1.15em; font-weight:800 }
.lgb-cta p { margin:0; color:var(--lgb-soft); font-size:14px }
.lgb-empty { text-align:center; color:var(--lgb-soft); margin:14px 0 0 }
.lgb-more { width:100%; margin-top:10px; background:transparent; border:1px dashed var(--lgb-line); color:var(--lgb-muted); border-radius:12px; padding:10px; cursor:pointer; font:inherit }
.lgb-linkish { background:none; border:0; padding:0; color:var(--lgb-pink-hi); text-decoration:underline; cursor:pointer; font:inherit; font-size:13px }
.lgb-fine { margin:14px 0 0; font-size:13px; color:var(--lgb-muted); text-align:center }
.lgb-official { margin-top:14px; background:var(--lgb-surface-2); border-radius:14px; padding:12px 14px; font-size:14px; color:var(--lgb-soft); text-align:center }
.lgb-official strong { display:block; color:var(--lgb-fg); font-size:12.5px; letter-spacing:1px; text-transform:uppercase }
.lgb-official code { font-family:inherit; font-weight:700; color:var(--lgb-fg); background:none }

/* sheets */
.lgb-scrim { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998 }
.lgb-sheet { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); max-width:440px; max-height:calc(100% - 80px); overflow:auto; margin-inline:auto; background:var(--lgb-sheet); border:1px solid var(--lgb-line-hot); border-radius:20px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.65); z-index:9999; display:grid; gap:12px; color:var(--lgb-text); font-size:15px; line-height:1.6; text-align:left; animation:lgb-rise .22s ease-out }
@keyframes lgb-rise { from { transform:translateY(16px); opacity:0 } to { transform:none; opacity:1 } }
@media (min-width:900px) { .lgb-sheet { left:24px; right:auto; bottom:24px; margin:0; width:420px } }
.lgb-x { position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:50%; background:transparent; border:0; color:var(--lgb-muted); font-size:22px; cursor:pointer }
.lgb-title { margin:0; color:var(--lgb-fg); font-weight:800; font-size:1.2em; line-height:1.3; padding-right:30px }
.lgb-title span { color:var(--lgb-pink-hi); letter-spacing:2px }
.lgb-text { margin:0; color:var(--lgb-soft); font-size:14.5px; line-height:1.55 }
.lgb-steps { margin:0; padding:0; list-style:none; counter-reset:lgb; display:grid; gap:8px }
.lgb-steps li { counter-increment:lgb; position:relative; padding-left:34px; min-height:24px; color:var(--lgb-text); font-size:14.5px; line-height:1.5 }
.lgb-steps li::before { content:counter(lgb); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--lgb-surface-2); border:1px solid var(--lgb-line); font-weight:800; font-size:12px; color:var(--lgb-fg) }
.lgb-vote-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; color:var(--lgb-muted) }
.lgb-vote { min-height:40px; background:transparent; border:1px solid var(--lgb-line); color:var(--lgb-muted); border-radius:999px; padding:3px 12px; font:inherit; font-weight:600; font-size:13px; line-height:1; cursor:pointer }
.lgb-vote.lgb-on-up { border-color:var(--lgb-ok); color:var(--lgb-ok); background:rgba(63,212,155,.1) }
.lgb-note { margin:0; font-size:12.5px; color:var(--lgb-muted) }
.lgb-sheet textarea { width:100%; min-height:84px; resize:vertical; background:var(--lgb-well); border:1px solid var(--lgb-line); border-radius:12px; color:var(--lgb-fg); padding:12px; font:inherit; font-size:15px; line-height:1.5 }
.lgb-sheet textarea:focus { border-color:var(--lgb-pink); outline:none; box-shadow:0 0 0 3px rgba(255,64,129,.18) }
.lgb-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.lgb-stack { display:grid; gap:12px; margin:0 }
.lgb-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.lgb-parse { min-height:24px; font-size:14px; line-height:1.45; display:flex; align-items:center; flex-wrap:wrap; gap:10px }
.lgb-ok-t { color:var(--lgb-ok) }
.lgb-err-t { color:var(--lgb-bad) }
.lgb-spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:lgb-spin .8s linear infinite }
@keyframes lgb-spin { to { transform:rotate(360deg) } }
.lgb-share { display:flex; gap:8px }
.lgb-share input { flex:1; min-width:0; background:var(--lgb-well); border:1px solid var(--lgb-line); border-radius:10px; color:var(--lgb-soft); padding:9px 10px; font:inherit; font-size:13px }
.lgb-btn-sm { flex:none; background:var(--lgb-surface-2); border:1px solid var(--lgb-line); color:var(--lgb-fg); border-radius:10px; padding:0 12px; min-height:38px; cursor:pointer; font:inherit; font-size:14px }
.lgb-succ-row { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:13px; color:var(--lgb-muted) }
.lgb-toast { position:fixed; left:50%; top:calc(64px + env(safe-area-inset-top,0px)); transform:translateX(-50%); background:#2a2236; border:1px solid #2c2438; color:#fff; padding:10px 14px; border-radius:12px; z-index:10000; font-size:14px; max-width:calc(100% - 32px); box-shadow:0 10px 30px rgba(0,0,0,.5) }
/* "Questions About Codes" uses LG's own .faq accordion; only list answers get left alignment. */
.lgb-faq details p, .lgb-faq details ul, .lgb-faq details ol { text-align:left }
.lgb-faq details ul, .lgb-faq details ol { margin:12px 0 0; padding-left:20px; color:#b0b0b0; line-height:1.7; display:grid; gap:4px }
@media (prefers-reduced-motion: reduce) { .lgb *, .lgb-sheet, .lgb-sheet * { animation:none !important; transition:none !important } }