/* letras-generator — editorial / premium. Typographic, hairline dividers, restrained single accent. */
.lbg{
	--lbg-bg:#FFFFFF; --lbg-surface:#FFFFFF; --lbg-surface-2:#F1F1F4;
	--lbg-ink:#1A1A1E; --lbg-muted:#6B6B73; --lbg-line:#E5E5E9;
	--lbg-accent:#A62D52; --lbg-accent-soft:#F3E3E8; --lbg-success:#2E7D57;
	--lbg-serif:ui-serif,Georgia,"Times New Roman",serif;
	--lbg-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--lbg-ink); font-family:var(--lbg-sans);
	max-width:1200px; margin:0 auto; padding:0 clamp(18px,4vw,50px);
}
@media (prefers-color-scheme:dark){
	.lbg{ --lbg-bg:#15120F; --lbg-surface:#1D1815; --lbg-surface-2:#26201C; --lbg-ink:#F1ECE6; --lbg-muted:#B0A79E; --lbg-line:#3A332D; --lbg-accent:#E8859C; --lbg-accent-soft:#3A2129; --lbg-success:#5AC291; }
}
:root[data-theme="light"] .lbg{ --lbg-bg:#FFFFFF; --lbg-surface:#FFFFFF; --lbg-surface-2:#F1F1F4; --lbg-ink:#1A1A1E; --lbg-muted:#6B6B73; --lbg-line:#E5E5E9; --lbg-accent:#A62D52; --lbg-accent-soft:#F3E3E8; --lbg-success:#2E7D57; }
:root[data-theme="dark"] .lbg{ --lbg-bg:#15120F; --lbg-surface:#1D1815; --lbg-surface-2:#26201C; --lbg-ink:#F1ECE6; --lbg-muted:#B0A79E; --lbg-line:#3A332D; --lbg-accent:#E8859C; --lbg-accent-soft:#3A2129; --lbg-success:#5AC291; }

.lbg *{ box-sizing:border-box }
/* input + controls stay centered and readable; the results index spans full width */
.lbg-badge-wrap, .lbg-composer, .lbg-toolbar{ max-width:800px; margin-left:auto; margin-right:auto; }

.lbg-badge-wrap{ text-align:center }
.lbg-badge{ display:inline-flex; align-items:center; gap:8px; margin:0 auto 20px; padding:6px 0; font-size:13px; font-weight:500; color:var(--lbg-muted); font-family:var(--lbg-serif); font-style:italic }
.lbg-dot{ width:6px; height:6px; border-radius:50%; background:var(--lbg-accent) }

/* input — refined type box */
.lbg-composer{ background:var(--lbg-surface); border:1px solid var(--lbg-line); border-radius:16px; padding:18px 22px 14px; margin-bottom:18px; box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 32px -20px rgba(0,0,0,.20); transition:border-color .18s,box-shadow .18s }
.lbg-composer:focus-within{ border-color:var(--lbg-accent); box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 3px var(--lbg-accent-soft) }
.lbg-input{ width:100%; border:0; outline:none; resize:none; background:transparent; color:var(--lbg-ink); font-family:var(--lbg-serif); font-size:23px; line-height:1.4; padding:2px 0; min-height:30px; caret-color:var(--lbg-accent) }
.lbg-input::placeholder{ color:var(--lbg-muted); font-style:normal }
.lbg-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:11px; border-top:1px solid var(--lbg-line) }
.lbg-count{ font-size:12px; color:var(--lbg-muted); font-variant-numeric:tabular-nums; letter-spacing:.02em }
.lbg-clear{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--lbg-muted); background:transparent; border:0; cursor:pointer; padding:5px 6px; font-family:inherit; transition:color .2s }
.lbg-clear:hover{ color:var(--lbg-accent) }

.lbg-toolbar{ padding:8px 0 4px }
.lbg-search{ position:relative; margin-bottom:14px }
.lbg-search svg{ position:absolute; left:2px; top:50%; transform:translateY(-50%); color:var(--lbg-muted) }
.lbg-search-input{ width:100%; padding:9px 4px 9px 28px; border:0; border-bottom:1px solid var(--lbg-line); background:transparent; color:var(--lbg-ink); font:inherit; font-size:14px; outline:none; transition:border-color .2s }
.lbg-search-input:focus{ border-bottom-color:var(--lbg-accent) }
.lbg-search-input::placeholder{ color:var(--lbg-muted) }
.lbg-size-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
.lbg-size-label{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--lbg-muted); white-space:nowrap }
.lbg-size{ flex:1; accent-color:var(--lbg-accent); height:3px; cursor:pointer }
.lbg-size-reset{ border:0; background:transparent; color:var(--lbg-muted); cursor:pointer; font-size:16px; line-height:1; padding:3px 7px; border-radius:6px; font-family:inherit; transition:color .2s,background .2s }
.lbg-size-reset:hover{ color:var(--lbg-accent); background:var(--lbg-surface-2) }

/* chips — quiet text with an accent underline for active */
.lbg-chips{ display:flex; gap:22px; overflow-x:auto; margin:8px 0 10px; padding-bottom:9px; border-bottom:1px solid var(--lbg-line); scrollbar-width:none }
.lbg-chips::-webkit-scrollbar{ display:none }
.lbg-chip{ flex:0 0 auto; padding:6px 0; border:0; background:transparent; color:var(--lbg-muted); font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; font-family:inherit; position:relative; transition:color .2s }
.lbg-chip:hover{ color:var(--lbg-ink) }
.lbg-chip.on{ color:var(--lbg-ink) }
.lbg-chip.on::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--lbg-accent) }

.lbg-section{ display:flex; align-items:center; gap:12px; margin:26px 2px 4px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lbg-muted) }
.lbg-section::after{ content:""; flex:1; height:1px; background:var(--lbg-line) }
.lbg-hint{ text-align:center; color:var(--lbg-muted); font-family:var(--lbg-serif); font-style:italic; font-size:14px; margin:4px 2px 16px }

/* results — a full-width index of hairline-divided rows (no boxes) */
.lbg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); column-gap:34px; row-gap:0; margin-top:8px; padding-bottom:6px }
@media (max-width:560px){ .lbg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px } }
.lbg-more-wrap{ display:flex; justify-content:center; padding:30px 0 44px }
.lbg-loadmore{ display:inline-flex; align-items:center; gap:9px; padding:13px 30px; border-radius:12px; border:1px solid var(--lbg-line); background:var(--lbg-surface); color:var(--lbg-ink); font-family:var(--lbg-sans); font-size:14.5px; font-weight:600; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:border-color .2s,color .2s,box-shadow .2s }
.lbg-loadmore:hover{ border-color:var(--lbg-accent); color:var(--lbg-accent); box-shadow:0 10px 26px -16px rgba(0,0,0,.32) }
.lbg-loadmore .n{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--lbg-accent-soft); color:var(--lbg-accent); font-size:12px; font-weight:700 }
.lbg-adslot{ margin:16px auto 0; max-width:970px; text-align:center }
.lbg-adslot:empty{ display:none }
.lbg-card{ border:0; border-bottom:1px solid var(--lbg-line); background:transparent; padding:15px 8px 13px; margin:0 -8px; border-radius:8px; transition:background .18s }
.lbg-card:hover{ background:var(--lbg-surface-2) }
.lbg-card.flash{ background:var(--lbg-accent-soft) }
.lbg-preview{ font-size:var(--lbg-preview-size,23px); line-height:1.55; color:var(--lbg-ink); word-break:break-word; overflow-wrap:anywhere; margin-bottom:9px; cursor:pointer; min-height:1em }
.lbg-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.lbg-name{ font-size:11.5px; color:var(--lbg-muted); letter-spacing:.02em; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.lbg-name > span{ color:var(--lbg-ink); font-weight:600 }
.lbg-acts{ display:flex; align-items:center; gap:6px }
.lbg-star{ width:30px; height:30px; border-radius:7px; border:0; background:transparent; cursor:pointer; font-size:15px; color:var(--lbg-muted); display:grid; place-items:center; transition:transform .15s,color .2s,background .2s; font-family:inherit }
.lbg-star:hover{ color:var(--lbg-accent); background:var(--lbg-surface-2) }
.lbg-star.on{ color:var(--lbg-accent) }
.lbg-star.pop{ transform:scale(1.3) }
.lbg-copy{ width:30px; height:30px; border-radius:7px; border:0; cursor:pointer; background:var(--lbg-accent-soft); color:var(--lbg-accent); display:grid; place-items:center; transition:transform .12s,color .2s,background .2s }
.lbg-copy:hover{ background:var(--lbg-accent); color:#fff }
.lbg-copy:active{ transform:scale(.9) }
.lbg-copy.done{ background:var(--lbg-success); color:#fff }
.lbg-copy svg{ display:block }

.lbg-ff{ font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:4px; white-space:nowrap }
.lbg-ff.ok{ background:transparent; color:var(--lbg-success); border:1px solid color-mix(in srgb,var(--lbg-success) 40%,transparent) }
.lbg-ff.warn{ background:transparent; color:var(--lbg-muted); border:1px solid var(--lbg-line) }

.lbg-empty{ text-align:center; color:var(--lbg-muted); padding:60px 20px; font-size:16px; font-family:var(--lbg-serif); font-style:italic; grid-column:1/-1 }
.lbg-big{ font-size:30px; display:block; margin-bottom:12px; font-style:normal }

.lbg-toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,16px); z-index:9999; opacity:0; pointer-events:none; background:var(--lbg-ink); color:var(--lbg-bg); padding:11px 22px; border-radius:8px; font-weight:600; font-size:13.5px; font-family:var(--lbg-sans); letter-spacing:.01em; box-shadow:0 12px 34px rgba(0,0,0,.22); display:flex; align-items:center; gap:9px; transition:opacity .22s,transform .22s }
.lbg-toast.show{ opacity:1; transform:translate(-50%,0) }
.lbg-chk{ width:18px; height:18px; border-radius:50%; background:var(--lbg-success); color:#fff; display:grid; place-items:center; font-size:11px }

.lbg :focus-visible{ outline:2px solid var(--lbg-accent); outline-offset:3px; border-radius:4px }
.lbg .lbg-input:focus, .lbg .lbg-input:focus-visible{ outline:none }
@media (max-width:520px){ .lbg{ padding:0 16px } .lbg-grid{ grid-template-columns:1fr; column-gap:0 } .lbg-input{ font-size:26px } }
@media (prefers-reduced-motion:reduce){ .lbg *,.lbg-toast{ transition:none !important } }