/* Emcoda színek: zab, zsálya, moha, rózsa, levendula, menta, méz */
:root {
  --oat: #F3F1E7; --sage: #A8B89A; --moss: #4F6146; --text: #2C3628;
  --rose: #F4C7D3; --lavender: #CDBFEA; --mint: #BFE3D0; --honey: #E3B567;
  --card: #FBFAF4; --line: #E2DFD2; --sage-soft: #DCE4D3;
  --glow: 0 12px 32px -10px rgba(79,97,70,.12), 0 4px 14px -6px rgba(205,191,234,.35);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--oat); color: var(--text); font: 16px/1.55 "Figtree", system-ui, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1, h2 { font-family: "Young Serif", Georgia, serif; font-weight: 400; color: var(--moss); }
h1 { font-size: 2rem; margin: 8px 0 20px; }
h2 { font-size: 1.25rem; margin: 0 0 12px; }
a { color: var(--moss); }
.link { text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Young Serif", serif; font-size: 1.3rem; color: var(--moss); text-decoration: none; }
.dot { width: 22px; height: 22px; border-radius: 50%; background: var(--moss); box-shadow: inset 0 0 0 5px var(--sage); }
.who { display: flex; align-items: center; gap: 10px; }
.who img { width: 32px; height: 32px; border-radius: 50%; }

.hero { text-align: center; padding: 48px 0; }
.hero h1 { font-size: 2.4rem; }
.hero p { max-width: 480px; margin: 0 auto 24px; }

.btn { display: inline-block; background: var(--moss); color: var(--oat); border: 0; border-radius: 999px; padding: 12px 26px; font: 600 1rem "Figtree", sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--text); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.server { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-weight: 500; margin: 0; }
.server:hover { border-color: var(--sage); }
.server img, .initial { width: 44px; height: 44px; border-radius: 50%; }
.initial { display: grid; place-items: center; background: var(--lavender); color: var(--text); font-weight: 600; }

label { display: block; font-weight: 500; margin-bottom: 14px; }
select, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--text); }
textarea { resize: vertical; }
select:focus, textarea:focus { outline: 2px solid var(--sage); border-color: var(--sage); }
code { background: var(--mint); border-radius: 6px; padding: 1px 6px; font-size: .9em; }
.small { font-size: .88rem; color: #5d6758; }

.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 12px; }
.toggle input { position: absolute; opacity: 0; }
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle input:checked + .switch { background: var(--moss); }
.toggle input:checked + .switch::after { transform: translateX(18px); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--honey); outline-offset: 2px; }

.preview { background: #313338; color: #dbdee1; border-radius: 12px; padding: 12px 14px; }
.preview .bot-name { font-size: .8rem; color: #949ba4; }
.preview p { margin: 4px 0 0; white-space: pre-wrap; }
.mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 4px; padding: 0 3px; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.emoji { font-size: 1.2rem; }

.flash { background: var(--mint); border-radius: 12px; padding: 10px 14px; }
footer { text-align: center; padding: 24px; font-size: .88rem; color: #5d6758; }

/* Saját kurzor, mint az emcoda.com-on: moha nyíl, kattintható elemeken rózsaszín szív */
html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 3l15.5 7.6-6.6 1.9-3 6.4z' fill='%234F6146' stroke='%23FFFDF7' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto; }
a, button, label, .btn, .toggle, .pick-btn, .pick-list li { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 23s-9-5.4-9-11.2C5 8.6 7.3 6.5 10 6.5c1.7 0 3.1.9 4 2.2.9-1.3 2.3-2.2 4-2.2 2.7 0 5 2.1 5 5.3C23 17.6 14 23 14 23z' fill='%23F4C7D3' stroke='%237A3E52' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, pointer; }
textarea { cursor: text; }

/* Kerek lenyíló lista, mint az emcoda.com űrlapján */
.pick { position: relative; margin-top: 6px; }
.pick select { position: absolute; inset: 0; opacity: 0; pointer-events: none; margin: 0; }
.pick-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font: inherit; font-weight: 400; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; }
.pick-btn:focus-visible, .pick.open .pick-btn { outline: 2px solid var(--sage); border-color: var(--sage); }
.pick-btn svg { flex: none; transition: transform .2s; }
.pick.open .pick-btn svg { transform: rotate(180deg); }
.pick-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none; background: #FFFDF7; border: 1.5px solid var(--sage-soft); border-radius: 20px; box-shadow: var(--glow); max-height: 260px; overflow-y: auto; font-weight: 400; }
.pick-list[hidden] { display: none; }
.pick-list li { padding: 9px 14px; border-radius: 14px; }
.pick-list li.active { background: var(--sage-soft); }
.pick-list li[aria-selected="true"] { color: var(--moss); font-weight: 600; }