.demo-page{--demo-bg:#f4f6f8;--demo-card:#ffffff;--demo-ink:#1c2434;--demo-muted:#6b7280;--demo-line:#e8ecf1;--demo-teal:#00a6d9;--demo-teal-soft:#e6f7fc;--demo-sky:#5eb8e8;--demo-sky-soft:#e8f5fc;--demo-mint:#7dbe8a;--demo-mint-soft:#eaf6ed;--demo-amber:#ffa627;--demo-amber-soft:#fff4e5;--demo-coral:#f07167;--demo-coral-soft:#fdeceb;--demo-radius:18px;--demo-shadow:0 10px 30px rgba(28,36,52,0.06),0 2px 8px rgba(28,36,52,0.04);padding:clamp(28px,4vw,56px) var(--gutter) clamp(56px,7vw,88px);background:radial-gradient(ellipse 50% 40% at 90% 0,rgba(0,166,217,.06),transparent 55%),radial-gradient(ellipse 40% 35% at 8% 20%,rgba(255,166,39,.05),transparent 50%),var(--demo-bg)}.demo-shell{max-width:1180px;margin:0 auto;gap:clamp(24px,3vw,36px)}.demo-intro,.demo-shell{display:flex;flex-direction:column}.demo-intro{max-width:560px;gap:10px}.demo-intro__badge{align-self:flex-start;display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--demo-sky-soft);color:#0c6d8a;font-size:12px;font-weight:600;letter-spacing:.02em}.demo-intro__title{margin:0;font-family:var(--ff-sans);font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--demo-ink)}.demo-intro__lede{margin:0;font-size:16px;line-height:1.55;color:var(--demo-muted);max-width:46ch}.demo-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.15fr);gap:clamp(16px,2vw,24px);align-items:start}.demo-side{display:flex;flex-direction:column;gap:16px}.demo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-metric{background:var(--demo-card);border-radius:14px;padding:16px 14px;box-shadow:var(--demo-shadow);border:1px solid rgba(232,236,241,.9)}.demo-metric__value{margin:0 0 4px;font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--demo-ink);line-height:1.1}.demo-metric__label{margin:0;font-size:12px;line-height:1.35;color:var(--demo-muted)}.demo-metric--teal{box-shadow:var(--demo-shadow),inset 0 3px 0 0 var(--demo-teal)}.demo-metric--amber{box-shadow:var(--demo-shadow),inset 0 3px 0 0 var(--demo-amber)}.demo-metric--mint{box-shadow:var(--demo-shadow),inset 0 3px 0 0 var(--demo-mint)}.demo-card{background:var(--demo-card);border-radius:var(--demo-radius);border:1px solid rgba(232,236,241,.95);box-shadow:var(--demo-shadow)}.demo-card--preview{padding:20px 20px 18px}.demo-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.demo-card__title{margin:0;font-size:15px;font-weight:700;color:var(--demo-ink)}.demo-card__sub{margin:0 0 18px;font-size:13px;color:var(--demo-muted)}.demo-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--demo-sky-soft);color:#0c6d8a;font-size:11px;font-weight:600;white-space:nowrap}.demo-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:140px;padding:8px 4px 0;border-bottom:1px solid var(--demo-line)}.demo-bars__col{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}.demo-bars__value{font-size:11px;font-weight:600;color:var(--demo-ink)}.demo-bars__bar{width:100%;max-width:28px;border-radius:8px 8px 4px 4px;min-height:12px}.demo-bars__bar--teal{background:linear-gradient(180deg,#4ec3e8,var(--demo-teal))}.demo-bars__bar--sky{background:linear-gradient(180deg,#8fd0f0,var(--demo-sky))}.demo-bars__bar--mint{background:linear-gradient(180deg,#a8d9b2,var(--demo-mint))}.demo-bars__bar--amber{background:linear-gradient(180deg,#ffc56b,var(--demo-amber))}.demo-bars__bar--coral{background:linear-gradient(180deg,#f59a93,var(--demo-coral))}.demo-bars__label{font-size:11px;color:var(--demo-muted)}.demo-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 16px;font-size:12px;color:var(--demo-muted)}.demo-legend li{display:inline-flex;align-items:center;gap:6px}.demo-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.tone-teal{background:var(--demo-teal)}.tone-amber{background:var(--demo-amber)}.tone-coral{background:var(--demo-coral)}.demo-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.demo-feature{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--demo-card);border-radius:14px;border:1px solid rgba(232,236,241,.95);box-shadow:var(--demo-shadow)}.demo-feature__dot{flex-shrink:0;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--demo-teal);box-shadow:0 0 0 4px var(--demo-teal-soft)}.demo-feature--sky .demo-feature__dot{background:var(--demo-sky);box-shadow:0 0 0 4px var(--demo-sky-soft)}.demo-feature--coral .demo-feature__dot{background:var(--demo-coral);box-shadow:0 0 0 4px var(--demo-coral-soft)}.demo-feature strong{display:block;font-size:14px;font-weight:700;color:var(--demo-ink);margin-bottom:2px}.demo-feature span span{display:block;font-size:13px;line-height:1.45;color:var(--demo-muted)}.demo-card--form{padding:clamp(24px,3vw,36px)}.demo-form{gap:20px}.demo-form,.demo-form__head{display:flex;flex-direction:column}.demo-form__head{gap:6px}.demo-form__title{margin:0;font-family:var(--ff-sans);font-size:clamp(24px,2.6vw,30px);font-weight:700;letter-spacing:-.025em;color:var(--demo-ink)}.demo-form__lede{margin:0;font-size:14px;line-height:1.5;color:var(--demo-muted)}.demo-form__banner{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:12px;background:var(--demo-teal-soft);border:1px solid #d2eef7;color:#0c5f78;font-size:13px;line-height:1.45}.demo-form__banner p{margin:0}.demo-form__banner-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--demo-teal);color:#fff;font-size:12px;font-weight:700;font-style:italic;display:inline-flex;align-items:center;justify-content:center;line-height:1}.demo-form__error{margin:0;padding:10px 12px;border-radius:10px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13px}.demo-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}.demo-field{display:flex;flex-direction:column;gap:6px;min-width:0}.demo-field--full{grid-column:1/-1}.demo-field__label{font-size:12px;font-weight:600;color:#374151}.demo-field__label abbr{color:var(--demo-coral);text-decoration:none;margin-left:2px}.demo-field input,.demo-field select,.demo-field textarea{width:100%;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:10px;background:#fbfcfd;color:var(--demo-ink);font:inherit;font-size:14px;padding:11px 12px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.demo-field textarea{resize:vertical;min-height:92px;line-height:1.45}.demo-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6b7280 0),linear-gradient(135deg,#6b7280 50%,transparent 0);background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}.demo-field input::placeholder,.demo-field textarea::placeholder{color:#9aa3af}.demo-field input:hover,.demo-field select:hover,.demo-field textarea:hover{background:#fff;border-color:#cbd5e1}.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{outline:none;background:#fff;border-color:var(--demo-teal);box-shadow:0 0 0 3px rgba(0,166,217,.14)}.demo-form__footer{gap:16px;flex-wrap:wrap;padding-top:4px}.demo-form__actions,.demo-form__footer{display:flex;align-items:center;justify-content:flex-end}.demo-form__actions{gap:10px;margin-left:auto}.demo-form__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease,transform .15s ease}.demo-form__btn--ghost{background:#fff;border-color:#e2e8f0;color:#374151}.demo-form__btn--ghost:hover{background:#f8fafc;border-color:#cbd5e1}.demo-form__btn--primary{background:var(--demo-teal);border-color:var(--demo-teal);color:#fff;box-shadow:0 8px 20px rgba(0,166,217,.22)}.demo-form__btn--primary:hover{background:#0093c2;border-color:#0093c2;transform:translateY(-1px)}.demo-form__btn--primary:disabled{opacity:.7;cursor:wait;transform:none}.demo-form--success{align-items:flex-start;justify-content:center;min-height:320px;gap:14px}.demo-form__success-icon{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--demo-teal);box-shadow:0 10px 24px rgba(0,166,217,.25)}@media (max-width:980px){.demo-layout{grid-template-columns:1fr}.demo-side{order:2}.demo-card--form{order:1}}@media (max-width:640px){.demo-page{padding-inline:12px}.demo-form__grid,.demo-metrics{grid-template-columns:1fr}.demo-form__footer{flex-direction:column;align-items:stretch}.demo-form__actions{flex-direction:column-reverse;align-items:stretch;margin-left:0;width:100%}.demo-form__btn{width:100%}}