/* Magyar MCP shared design kit — static pages (setup, ÁSZF, adatkezelés, hibabejelentés).
Mirrors src/ui-kit.ts (green theme). Link with:
Fonts (load in of each page):
*/
:root{
--paper:#F4F1E9; --surface:#FFFFFF; --surface-2:#FCFBF7;
--ink:#17191E; --ink-soft:#565A63; --ink-faint:#8A8E97;
--line:#E4DECF; --line-2:#EFEADD; --line-strong:#1C1E22;
--accent:#0F5A39; --accent-d:#0A4329; --accent-tint:#EAF1EC; --accent-tint-bd:#BFD6C8;
--amber:#B8791B; --amber-soft:#F3E7CF;
--danger:#B23A3A; --danger-soft:#F7E7E3; --danger-bd:#E2B7AE;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:600;line-height:1.12;letter-spacing:-0.01em}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
::selection{background:var(--accent-tint)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
/* nav / appbar */
.k-nav{position:sticky;top:0;z-index:40;background:rgba(244,241,233,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.k-nav-in{max-width:1180px;margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:700;font-size:20px;letter-spacing:-0.02em;color:var(--ink)}
.brand .mk{width:28px;height:28px;flex-shrink:0}
.brand b{color:var(--accent);font-weight:700}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;padding:13px 22px;border:2px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:.15s;text-decoration:none}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-sm{padding:9px 15px;font-size:13.5px;border-width:1px}
.btn-block{width:100%}
/* forms */
label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
input,select,textarea{width:100%;padding:13px 14px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;font-size:15px;outline:none;transition:border-color .15s;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
.field{margin-bottom:16px}
.hint{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin-top:6px}
.hint a{color:var(--accent)}
/* status boxes */
.error{background:var(--danger-soft);border:1px solid var(--danger-bd);color:var(--danger);padding:12px 15px;font-size:14px;margin-bottom:16px}
.ok{background:var(--accent-tint);border:1px solid var(--accent-tint-bd);color:var(--accent-d);padding:12px 15px;font-size:14px;margin-bottom:16px}
.note{background:var(--amber-soft);border:1px solid #E6D2A8;color:#7A5210;padding:12px 15px;font-size:14px;line-height:1.55}
/* sections / panels */
.sec{padding:64px 0}
.sec-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.panel{background:var(--surface);border:1px solid var(--line);margin-bottom:22px}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--line);font-family:'Fraunces',serif;font-size:18px;font-weight:600}
.panel-body{padding:22px}
.card{background:var(--surface);border:1px solid var(--line);padding:30px}
/* step list (setup guide) */
.step{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{flex-shrink:0;width:40px;height:40px;background:var(--accent);color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
.step .body h3{font-size:19px;margin-bottom:8px}
.step .body p{color:var(--ink-soft);font-size:15.5px}
/* long-form document (legal pages) */
.doc{max-width:820px;margin:0 auto;padding:40px 0 64px}
.doc h1{font-size:38px;margin-bottom:10px}
.doc .doc-meta{color:var(--ink-faint);font-size:14px;margin-bottom:30px}
.doc h2{font-size:23px;margin:34px 0 12px}
.doc h3{font-size:18px;margin:22px 0 8px}
.doc p{color:var(--ink-soft);margin-bottom:14px}
.doc ul,.doc ol{color:var(--ink-soft);margin:0 0 16px 22px}
.doc li{margin-bottom:7px}
.doc a{color:var(--accent)}
.doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.doc th,.doc td{text-align:left;padding:11px 13px;border:1px solid var(--line)}
.doc th{background:var(--surface-2);font-weight:700}
.doc code{font-family:'Courier New',monospace;font-size:13.5px;background:var(--surface-2);border:1px solid var(--line);padding:2px 6px}
/* badges / code */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border:1px solid var(--line);white-space:nowrap}
.badge-ok{background:var(--accent-tint);color:var(--accent-d);border-color:var(--accent-tint-bd)}
code,.mono{font-family:'Courier New',monospace;font-size:13.5px;background:var(--surface-2);border:1px solid var(--line);padding:2px 6px}
/* footer */
.k-foot{background:var(--ink);color:#A7A59D;padding:40px 0 28px;margin-top:60px}
.k-foot a{color:#A7A59D}
.k-foot a:hover{color:#fff}
.k-foot .brand{color:#fff}
.k-foot .brand b{color:#6FB893}
.muted{color:var(--ink-soft)}
.center{text-align:center}
@media(max-width:640px){
.wrap,.k-nav-in{padding-left:16px;padding-right:16px}
.doc h1{font-size:30px}
.sec{padding:44px 0}
}