/* Odoova Demos — frontend styling (scoped) */
.odoova-demo-page{background:#fff;margin:0;}
.ovd-main{display:block;padding-top:28px;min-height:60vh;}
.ovd-wrap{max-width:1080px;margin:0 auto;padding:28px 20px 80px;font-family:'Hind Siliguri',system-ui,'Noto Sans Bengali',sans-serif;color:#1c2430;line-height:1.85;}
.ovd-wrap *{box-sizing:border-box}

/* Hero */
.ovd-hero{background:linear-gradient(135deg,#15366b,#1f6feb);color:#fff;border-radius:18px;padding:36px 40px;margin-bottom:22px;}
.ovd-hero h1{margin:0 0 8px;font-size:32px;}
.ovd-hero p{margin:0;font-size:18px;opacity:.92;}

/* Catalog grid */
.ovd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.ovd-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #dde3ec;border-radius:16px;padding:22px 24px;transition:transform .12s,box-shadow .12s,border-color .12s;}
.ovd-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,30,50,.12);border-color:#1f6feb;}
.ovd-card-ico{font-size:32px}
.ovd-card h3{margin:8px 0 2px;font-size:21px}
.ovd-card-ind{color:#0d9f6e;font-size:14px;font-weight:600}
.ovd-card p{color:#5b6675;font-size:15px;margin:10px 0 14px}
.ovd-card-link{font-size:14px;font-weight:600;color:#1f6feb}
.ovd-foot-note{margin-top:26px;color:#5b6675;font-size:15px;text-align:center}

/* Single demo */
.ovd-back{display:inline-block;margin-bottom:16px;color:#1f6feb;text-decoration:none;font-size:14px}
.ovd-single-head{display:flex;gap:18px;align-items:center;border-bottom:3px solid #1f6feb;padding-bottom:18px;margin-bottom:8px}
.ovd-single-ico{font-size:46px}
.ovd-single-head h1{margin:0;font-size:30px}
.ovd-single-ind{color:#0d9f6e;font-weight:600;font-size:15px}
.ovd-single-tag{color:#5b6675;margin:4px 0 0;font-size:16px}

/* Access block (masked credentials + CTA) */
.ovd-access{background:linear-gradient(135deg,#0f2336,#15324a);color:#dce9f7;border-radius:14px;padding:22px 26px;margin:22px 0;max-width:520px}
.ovd-access-head{font-size:16px;font-weight:600;color:#9fc1e6;margin-bottom:12px}
.ovd-access-row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid #25415c;font-size:15px}
.ovd-access-row span{color:#9fc1e6}
.ovd-access-row b{font-family:'JetBrains Mono',ui-monospace,monospace;color:#7ef0c2;letter-spacing:1px}
.ovd-cta{display:inline-block;margin-top:16px;background:#1f6feb;color:#fff;text-decoration:none;padding:11px 20px;border-radius:9px;font-weight:600;font-size:15px}
.ovd-cta:hover{background:#1a5fd0}
.ovd-access-note{margin-top:10px;color:#7e94ac;font-size:13px}

/* Documentation body */
.odoova-demo-doc{font-size:16.5px}
.odoova-demo-doc h2{font-size:23px;margin:34px 0 6px;padding-top:8px}
.odoova-demo-doc h2 .n{display:inline-grid;place-items:center;width:32px;height:32px;background:#1f6feb;color:#fff;border-radius:8px;font-size:16px;margin-right:9px;vertical-align:middle}
.odoova-demo-doc h3{font-size:18px;color:#1f6feb;margin:20px 0 4px}
.odoova-demo-doc table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
.odoova-demo-doc th,.odoova-demo-doc td{border:1px solid #dde3ec;padding:9px 13px;text-align:left;vertical-align:top}
.odoova-demo-doc th{background:#f6f8fb}
.odoova-demo-doc .path{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:#fff;background:#1f6feb;padding:2px 9px;border-radius:6px;white-space:nowrap}
.odoova-demo-doc .box{border-radius:10px;padding:13px 18px;margin:14px 0;font-size:15.5px}
.odoova-demo-doc .box.tip{background:#eef7f1;border:1px solid #bfe6d0}
.odoova-demo-doc .box.warn{background:#fff6e6;border:1px solid #ffd98a}
.odoova-demo-doc ol.steps{counter-reset:s;list-style:none;padding-left:0}
.odoova-demo-doc ol.steps li{counter-increment:s;position:relative;padding-left:38px;margin-bottom:10px}
.odoova-demo-doc ol.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;background:#e7eefb;color:#1f6feb;border:1px solid #c7d8f7;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px}
.odoova-demo-doc .flow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.odoova-demo-doc .flow .s{background:#f6f8fb;border:1px solid #dde3ec;border-radius:9px;padding:8px 12px;font-size:13.5px;flex:1;min-width:150px}
.odoova-demo-doc .flow .s b{display:block;color:#1f6feb}

/* Demo stats grid ("what's in this demo") */
.ovd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:20px 0 8px}
.ovd-stat{background:#f6f8fb;border:1px solid #dde3ec;border-radius:12px;padding:16px 14px;text-align:center}
.ovd-stat .num{font-size:28px;font-weight:700;color:#1f6feb;line-height:1.1}
.ovd-stat .lbl{font-size:13.5px;color:#5b6675;margin-top:4px}
.ovd-stat .ic{font-size:20px}

/* Per-step screenshot (step-by-step tutorial) */
.ovd-step-shot{margin:14px 0 30px;border:1px solid #dde3ec;border-radius:12px;overflow:hidden;box-shadow:0 3px 14px rgba(20,30,50,.07)}
.ovd-step-shot img{width:100%;display:block}

/* Screenshot gallery (legacy) */
.ovd-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:18px 0}
.ovd-shots figure{margin:0;border:1px solid #dde3ec;border-radius:12px;overflow:hidden;background:#fff}
.ovd-shots img{width:100%;display:block;border-bottom:1px solid #eef1f6}
.ovd-shots figcaption{padding:8px 12px;font-size:13.5px;color:#5b6675}

@media(max-width:600px){.ovd-hero{padding:26px}.ovd-single-head{flex-direction:column;align-items:flex-start}}