:root{--demo-navy:#10243e;--demo-blue:#2878d0;--demo-sky:#eaf4ff;--demo-line:#d8e5f2;--demo-white:#fff;--demo-muted:#61758c}
*{box-sizing:border-box}.demo-page{margin:0;min-height:100vh;background:linear-gradient(145deg,#f7fbff,#edf5fb);color:var(--demo-navy);font-family:Vazirmatn,Tahoma,sans-serif}.demo-shell{width:min(1120px,calc(100% - 32px));margin:auto;padding:56px 0}.demo-hero{text-align:center;max-width:780px;margin:0 auto 36px}.demo-badge{display:inline-flex;padding:7px 14px;border-radius:99px;background:#dff4e9;color:#157044;font-weight:700}.demo-hero h1{font-size:clamp(28px,5vw,48px);line-height:1.35;margin:18px 0 10px}.demo-hero p{color:var(--demo-muted);line-height:2}.demo-hero a{color:var(--demo-blue);font-weight:700}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:18px}.demo-card{background:var(--demo-white);border:1px solid var(--demo-line);border-radius:22px;padding:24px;box-shadow:0 15px 35px rgba(17,55,91,.07);display:flex;flex-direction:column;min-height:285px}.demo-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--demo-sky);color:var(--demo-blue);font-size:22px;font-weight:800}.demo-card h2{margin:18px 0 8px}.demo-card p{color:var(--demo-muted);line-height:1.9;flex:1}.demo-card button{border:0;border-radius:12px;background:var(--demo-navy);color:#fff;width:100%;padding:12px;cursor:pointer;font:inherit;font-weight:700}.demo-card button:hover{background:var(--demo-blue)}.demo-notice{margin-top:26px;padding:18px 22px;border:1px solid #f1d99f;background:#fff9e9;border-radius:16px;color:#795a18}@media(max-width:560px){.demo-shell{padding:30px 0}.demo-grid{grid-template-columns:1fr}}
.demo-card button:disabled{cursor:not-allowed;background:#8a9aae;color:#f6f8fa}.demo-notice a{color:var(--demo-blue);font-weight:700}
.demo-error{margin:0 0 24px;padding:14px 18px;border:1px solid #efb4b4;border-radius:14px;background:#fff0f0;color:#8d2020;text-align:center}
.demo-customer{margin-top:18px;padding:25px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-radius:15px;color:#fff;background:#173b32}.demo-customer h2{margin:10px 0 5px;font-size:20px}.demo-customer p{margin:0;color:rgba(255,255,255,.68);line-height:1.9}.demo-customer form{flex:0 0 auto}.demo-customer button{min-height:46px;padding:0 18px;border:0;border-radius:8px;color:#173b32;background:#c9dcae;font-weight:850;cursor:pointer}