@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@300;400;500;600;700&display=swap');
:root {
    --green-dark: #1a5e1f;
    --green-primary: #2d8a35;
    --green-light: #4caf50;
    --green-bg: #e8f5e9;
    --gold-primary: #d4a843;
    --gold-light: #f0d68a;
    --gold-dark: #b8922e;
    --text-dark: #1a1a1a;
    --text-medium: #4a4a4a;
    --text-light: #7a7a7a;
    --bg-cream: #fafaf5;
    --border-light: #e0e0d8;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Noto Sans Sinhala',sans-serif; background:var(--bg-cream); color:var(--text-dark); line-height:1.8; }
.header { background:linear-gradient(135deg,var(--green-dark),var(--green-primary),var(--green-light)); padding:2rem 1rem; text-align:center; color:white; }
.header-logo { font-size:1.8rem; font-weight:700; }
.header-logo span { color:var(--gold-light); }
.header-subtitle { font-size:0.9rem; opacity:0.9; }
.header-badge { display:inline-block; background:var(--gold-primary); color:var(--green-dark); padding:0.2rem 0.8rem; border-radius:20px; font-size:0.75rem; font-weight:600; margin-top:0.5rem; }
.guide-nav { background:white; border-bottom:2px solid var(--border-light); padding:0.5rem; display:flex; overflow-x:auto; gap:0.3rem; position:sticky; top:0; z-index:100; box-shadow:var(--shadow-sm); }
.guide-nav a { text-decoration:none; color:var(--text-medium); padding:0.5rem 0.8rem; border-radius:8px; font-size:0.8rem; white-space:nowrap; font-weight:500; transition:all 0.2s; }
.guide-nav a:hover { background:var(--green-bg); color:var(--green-primary); }
.guide-nav a.active { background:var(--green-primary); color:white; font-weight:600; }
.guide-title { text-align:center; padding:2rem 1rem; background:white; border-bottom:3px solid var(--gold-primary); }
.guide-title h1 { font-size:1.8rem; color:var(--green-dark); margin-bottom:0.5rem; font-weight:700; }
.guide-title .gn { display:inline-block; background:var(--gold-primary); color:white; width:36px; height:36px; border-radius:50%; line-height:36px; font-size:1.1rem; font-weight:700; margin-bottom:0.5rem; }
.guide-title p { color:var(--text-medium); font-size:1rem; }
.steps { max-width:480px; margin:0 auto; padding:1.5rem 1rem; }
.step { background:white; border-radius:16px; margin-bottom:2rem; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border-light); position:relative; }
.step.err { border-color:#ff9800; }
.sn { position:absolute; top:12px; left:12px; width:40px; height:40px; background:var(--green-primary); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; z-index:10; box-shadow:var(--shadow-sm); }
.sc { background:#f5f5f0; display:flex; justify-content:center; }
.sc img { width:100%; max-width:390px; display:block; }
.cap { padding:1.2rem 1.5rem; font-size:1.1rem; line-height:1.8; border-top:2px solid var(--gold-light); background:linear-gradient(180deg,#fffef5,white); }
.cap b { color:var(--green-primary); font-weight:700; font-size:1rem; }
.note { padding:0.8rem 1.5rem 1.2rem; font-size:0.85rem; color:var(--text-light); background:var(--green-bg); border-top:1px dashed var(--green-light); }
.nav-btns { display:flex; justify-content:space-between; padding:1.5rem 1rem; max-width:480px; margin:0 auto; }
.nav-btns a { text-decoration:none; padding:0.7rem 1.2rem; border-radius:10px; font-size:0.9rem; font-weight:600; }
.pb { background:white; color:var(--green-primary); border:2px solid var(--green-primary); }
.nb { background:var(--green-primary); color:white; }
.footer { text-align:center; padding:2rem; background:var(--green-dark); color:rgba(255,255,255,0.7); font-size:0.8rem; }
.footer a { color:var(--gold-light); }
@media(min-width:768px) { .steps { max-width:520px; } }