:root{
  --bg:#0d1117;--panel:#161c27;--panel2:#1c2535;--panel3:#222f45;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --accent:#f472b6;--accent2:#f59e0b;--accent3:#10b981;--accent4:#ef4444;
  --blue:#3b82f6;--text:#e8edf8;--muted:#8b93a0;
  --charcoal:#403B33;--rose:#BC4749;--teal:#70A3A7;--beige:#F0EAD6;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* HERO */
.page-hero{background:linear-gradient(135deg,#1e1e2e 0%,#2d2d3f 100%);padding:56px 24px 48px;text-align:center;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(244,114,182,.1) 1px,transparent 1px);background-size:26px 26px;}
.hero-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1.5px solid rgba(244,114,182,.3);border-radius:999px;padding:4px 14px;display:inline-block;margin-bottom:14px;position:relative;}
.hero-title{font-family:'Fredoka',cursive;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:600;color:white;line-height:1.15;margin-bottom:10px;position:relative;}
.hero-sub{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:520px;margin:0 auto 28px;position:relative;}

/* SEARCH */
.search-wrap{position:relative;max-width:440px;margin:0 auto 10px;}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none;color:var(--muted);}
.search-input{width:100%;padding:12px 16px 12px 42px;border:1.5px solid var(--border2);border-radius:12px;background:var(--panel2);color:var(--text);font-family:'Inter',sans-serif;font-size:.92rem;outline:none;transition:border-color .2s,box-shadow .2s;}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(244,114,182,.15);}
.search-input::placeholder{color:rgba(232,237,248,.3);}
.search-count{font-size:.72rem;color:var(--muted);text-align:center;margin-top:8px;}

/* ENGINE TABS */
.engine-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:860px;margin:0 auto;padding:20px 16px 0;}
.engine-tab{padding:8px 18px;border-radius:10px;border:1.5px solid var(--border2);background:var(--panel2);cursor:pointer;font-family:'Fredoka',cursive;font-size:.82rem;font-weight:600;color:var(--muted);transition:all .15s;}
.engine-tab:hover{border-color:var(--accent);color:var(--accent);}
.engine-tab.active{background:var(--accent);border-color:var(--accent);color:#000;}

/* MAIN CONTENT */
.guide-container{max-width:920px;margin:0 auto;padding:24px 16px 80px;}

/* ENGINE SECTION */
.engine-section{display:none;margin-bottom:32px;}
.engine-section.visible{display:block;}
.engine-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--border2);}
.engine-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;}
.engine-name{font-family:'Fredoka',cursive;font-size:1.3rem;font-weight:700;color:white;flex:1;}
.engine-badge{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:white;padding:4px 12px;border-radius:999px;}

/* ERROR CARDS */
.error-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:16px;transition:border-color .2s;}
.error-card:hover{border-color:rgba(244,114,182,.2);}
.error-card.hidden{display:none;}
.error-title{font-family:'Fredoka',cursive;font-size:1.05rem;font-weight:700;color:white;margin-bottom:14px;display:flex;align-items:center;gap:8px;}

/* PROBLEM BOX */
.box-problem{background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.25);border-radius:12px;padding:14px 16px;margin-bottom:12px;}
.box-label{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.box-label.problem{color:#ef4444;}
.box-label.solution{color:#10b981;}
.box-label.prevent{color:#f59e0b;}
.box-text{font-size:.85rem;color:rgba(232,237,248,.85);line-height:1.65;}

/* ARROW */
.arrow-down{display:flex;justify-content:center;padding:4px 0;}
.arrow-down svg{width:24px;height:24px;}

/* SOLUTION BOX */
.box-solution{background:rgba(16,185,129,.08);border:1.5px solid rgba(16,185,129,.25);border-radius:12px;padding:14px 16px;margin-bottom:12px;}
.solution-steps{list-style:none;counter-reset:step;}
.solution-steps li{counter-increment:step;font-size:.85rem;color:rgba(232,237,248,.85);line-height:1.65;padding:3px 0 3px 0;}
.solution-steps li::before{content:"Step " counter(step) ": ";font-weight:700;color:#10b981;}

/* PREVENTION BOX */
.box-prevent{background:rgba(245,158,11,.08);border:1.5px solid rgba(245,158,11,.2);border-radius:12px;padding:14px 16px;}

/* FOOTER */
.site-footer{background:#080a10;border-top:1px solid var(--border2);padding:40px 24px 32px;text-align:center;}
.footer-inner{max-width:900px;margin:0 auto;}
.footer-logo{font-family:'Fredoka',cursive;font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.footer-tagline{font-size:.72rem;color:var(--muted);margin-bottom:18px;}
.footer-links,.footer-socials{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
.footer-links a,.footer-socials a{font-size:.8rem;color:rgba(232,237,248,.35);transition:color .15s;}
.footer-links a:hover,.footer-socials a:hover{color:rgba(232,237,248,.7);}
.footer-copy{font-size:.68rem;color:rgba(232,237,248,.2);margin-top:14px;}

/* COPY TO CLIPBOARD */
.card-copy{margin-left:auto;flex:none;font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);background:transparent;border:1.5px solid rgba(244,114,182,.4);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.card-copy:hover{border-color:var(--accent);background:rgba(244,114,182,.12);}
.card-copy.copied{color:#10b981;border-color:rgba(16,185,129,.6);background:rgba(16,185,129,.14);}
code.copyable{cursor:copy;border-radius:4px;transition:background .15s,box-shadow .15s;}
code.copyable:hover{background:rgba(16,185,129,.2);}
code.copyable.copied{background:rgba(16,185,129,.35);box-shadow:0 0 0 2px rgba(16,185,129,.4);}
.engine-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* NO RESULTS */
.no-results{background:var(--panel);border:1.5px dashed var(--border2);border-radius:16px;padding:40px 24px;text-align:center;}
.no-results[hidden]{display:none;}
.no-results-emoji{font-size:2rem;margin-bottom:10px;}
.no-results-title{font-family:'Fredoka',cursive;font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:8px;}
.no-results-hint{font-size:.85rem;color:var(--muted);line-height:1.6;max-width:360px;margin:0 auto 18px;}
.no-results-clear{font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem;color:#000;background:var(--accent);border:none;border-radius:999px;padding:9px 20px;cursor:pointer;}
.no-results-clear:hover{filter:brightness(1.08);}

@media print{
  .page-hero,.engine-tabs,.search-wrap,.search-count,.card-copy,.no-results{display:none !important;}
  body{background:#fff;color:#000;}
  .engine-section{display:block !important;}
  .error-card{border:1px solid #ccc;page-break-inside:avoid;background:#fafafa;}
  .box-problem{background:#fef2f2;border-color:#fecaca;}
  .box-solution{background:#f0fdf4;border-color:#bbf7d0;}
  .box-prevent{background:#fffbeb;border-color:#fde68a;}
  .box-text,.solution-steps li{color:#000;}
  @page{margin:1.5cm;size:A4;}
  .site-footer{display:none !important;}
}