/* Poradniki Looponi — te same tokeny co strona główna (site/index.html). */
:root{--field:#eef5e9;--paper:#fbfdf8;--card:#fff;--line:#d7e6d2;--ink:#1f2d24;--mute:#55675b;--green:#3fae5f;--green2:#2e8f4b;--yel:#f6cf3a;--yel2:#e2a91f;--vio:#5c63d8;
  --display:"Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono","DejaVu Sans Mono",ui-monospace,monospace;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--field);color:var(--ink);font:18px/1.7 var(--display);-webkit-font-smoothing:antialiased}
a{color:var(--green2)}
.g-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,40px);padding-top:calc(14px + env(safe-area-inset-top,0px))}
.g-logo{font:900 1.4rem/1 var(--display);color:var(--green2);text-decoration:none;display:flex;align-items:center;gap:8px}
.g-logo::before{content:"";width:26px;height:26px;border-radius:7px;background:linear-gradient(180deg,#ffe98a,var(--yel2));box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.g-langs{display:flex;gap:2px;background:var(--card);padding:4px;border-radius:12px;box-shadow:0 1px 0 var(--line)}
.g-langs a{font:800 .78rem/1 var(--mono);color:var(--mute);text-decoration:none;padding:7px 8px;border-radius:8px}
.g-langs a[aria-current]{background:var(--green2);color:#fff}
.g-main{max-width:760px;margin:0 auto;padding:8px 16px 60px}
.g-crumbs{font:600 .85rem/1.4 var(--mono);color:var(--mute);margin:10px 0 18px}
.g-crumbs a{text-decoration:none}
h1{font-weight:900;font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-weight:900;font-size:1.5rem;line-height:1.2;margin:2.2em 0 .6em;text-wrap:balance}
.g-lead{font-size:1.15rem;color:var(--mute);margin:18px 0 6px}
.g-date{font:600 .8rem/1 var(--mono);color:var(--mute);margin:0 0 22px}
.g-hero{margin:0 0 10px}
.g-hero img{width:100%;height:auto;border-radius:20px;box-shadow:0 24px 48px -28px rgba(20,50,30,.5);display:block}
article p,article li{max-width:68ch}
article ul,article ol{padding-left:1.3em}
article li{margin:.3em 0}
article strong{color:var(--ink)}
code{font-family:var(--mono);font-size:.88em;background:#fff6d1;border-radius:6px;padding:1px 6px}
table{border-collapse:collapse;width:100%;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 1px 0 var(--line);font-size:.95rem;display:block;overflow-x:auto}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#e4f2dc}
.g-cta{margin:2.4em 0;background:linear-gradient(170deg,#ffe98a,var(--yel));border-radius:22px;padding:22px 24px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.g-cta h2{margin:0 0 .3em}
.g-cta p{margin:.4em 0;color:#3b2c00}
.g-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px!important}
.g-btn{display:inline-block;background:var(--green2);color:#fff;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:12px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.g-btn.alt{background:var(--card);color:var(--ink)}
.g-link{font-weight:800;color:#3b2c00}
.qas{display:grid;gap:10px}
.qa{background:var(--card);border-radius:14px;padding:4px 18px;box-shadow:0 1px 0 var(--line)}
.qa summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--green2);font-weight:900}
.qa[open] summary::after{content:"−"}
.qa p{margin:0;padding:0 0 16px;color:var(--mute)}
.g-more{margin-top:3em}
.gcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.gcard{display:grid;gap:6px;background:var(--card);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 var(--line),0 12px 24px -18px rgba(20,50,30,.4)}
.gcard b{line-height:1.3}
.gcard span{color:var(--mute);font-size:.9rem;line-height:1.45}
.g-foot{text-align:center;padding:28px 16px calc(40px + env(safe-area-inset-bottom,0px));font:600 .9rem/1.5 var(--display);color:var(--mute)}
@media (max-width:640px){.gcards{grid-template-columns:minmax(0,1fr)}body{font-size:17px}}