@font-face{font-family:'B Yekan';src:url('../fonts/BYekan.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:600 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{direction:rtl;color-scheme:light}
body{margin:0;background:var(--klp-bg);color:var(--klp-text);font-family:"B Yekan",Vazirmatn,Tahoma,"Segoe UI",sans-serif;font-size:17px;line-height:1.65}
button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}
a{color:var(--klp-primary)}h1,h2,h3,p{overflow-wrap:break-word}h1,h2,h3{line-height:1.5}
:focus-visible{outline:3px solid var(--klp-focus);outline-offset:4px}
h1[tabindex="-1"]:focus{outline:none}
.icon{width:24px;height:24px;flex-shrink:0;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;inset-inline-start:16px;top:-100px;z-index:100;background:white;padding:12px 18px}.skip-link:focus{top:12px}
.button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--klp-control-height);padding:9px 18px;border-radius:var(--klp-radius-sm);border:1px solid var(--klp-border);background:var(--klp-primary-soft);color:var(--klp-primary);font-size:14px;font-weight:500;text-decoration:none;transition:background .15s}
.button:hover:not(:disabled){background:var(--klp-primary-soft-hover)}.button.primary{background:var(--klp-primary);color:white;border-color:var(--klp-primary);box-shadow:var(--klp-shadow-sm)}.button.primary:hover:not(:disabled){background:var(--klp-primary-hover)}
.button.danger{background:var(--klp-danger-soft);border-color:var(--klp-danger-border);color:var(--klp-danger)}
.button.success-action{background:var(--klp-success-soft);color:var(--klp-success);border-color:var(--klp-success-border)}.button.success-action:hover:not(:disabled){background:var(--klp-success-soft-hover)}
.button.quiet{background:transparent;border-color:transparent;color:var(--klp-text-muted)}
.status-badge.warning{background:var(--klp-warning-soft);color:var(--klp-warning)}
.icon-button,.button.icon-button{padding:10px;min-width:44px;background:transparent;border-color:transparent;color:var(--klp-text-muted)}.icon-button:hover{background:var(--klp-primary-soft)}
.panel{background:var(--klp-surface);border:1px solid var(--klp-border);border-radius:var(--klp-radius-lg);padding:var(--klp-space-lg);box-shadow:var(--klp-shadow-sm)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--klp-space-control);padding-bottom:20px;border-bottom:1px solid var(--klp-border)}
.heading-title{display:flex;gap:11px;align-items:center}.heading-title .icon{color:var(--klp-primary)}.heading-title h2{font-size:18px;margin:0}
.status-badge{display:inline-flex;align-items:center;gap:7px;background:var(--klp-primary-soft);border-radius:6px;padding:4px 10px;font-size:12px;color:var(--klp-text-muted);white-space:nowrap}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}.status-badge.success{background:var(--klp-success-soft);color:var(--klp-success)}.status-badge.danger{background:var(--klp-danger-soft);color:var(--klp-danger)}
.feedback-state{text-align:center;padding:22px 16px;background:var(--klp-surface-soft);border-radius:var(--klp-radius-md)}.state-symbol{display:inline-grid;place-items:center;width:48px;height:48px;color:var(--klp-primary);background:var(--klp-primary-soft);border-radius:var(--klp-radius-md)}
.feedback-state h3{font-size:17px;margin-block:14px 6px}.feedback-state p{font-size:14px;color:var(--klp-text-muted);margin:0}
.feedback-state.error .state-symbol,.feedback-state.offline .state-symbol{color:var(--klp-danger);background:var(--klp-danger-soft)}
.feedback-state.loading .icon,.feedback-state.reconnecting .icon{animation:rotate 2s linear infinite}
@keyframes rotate{to{transform:rotate(360deg)}}
.helper{font-size:14px;color:var(--klp-text-muted)}
.connection-banner,.pwa-banner{display:flex;align-items:center;gap:var(--klp-space-control);flex-wrap:wrap;padding:12px 18px;margin-bottom:16px;border:1px solid var(--klp-warning-border);background:var(--klp-warning-soft);color:var(--klp-warning);border-radius:var(--klp-radius-md);font-size:14px}
.pwa-banner{border-color:var(--klp-border);background:white;color:var(--klp-text)}.pwa-banner span,.connection-banner span{flex:1}
.form-field{display:flex;flex-direction:column;gap:var(--klp-space-sm);min-width:0}.form-field label{font-size:14px;font-weight:500}.form-field small{color:var(--klp-text-muted)}
input:not([type=checkbox]),select,textarea{max-width:100%;min-width:0}.form-field input,.form-field select,.form-field textarea{width:100%;min-height:var(--klp-control-height);border:1px solid var(--klp-input-border);border-radius:var(--klp-radius-sm);padding:9px 12px;background:white;color:var(--klp-text)}
.required{color:var(--klp-danger)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--klp-space-md)}
.toggle-field{display:flex;align-items:center;gap:var(--klp-space-control);position:relative;min-height:var(--klp-control-height);cursor:pointer}.toggle-field > span:first-child{flex:1}.toggle-field input{position:absolute;opacity:0;inset-inline-end:0;width:44px;height:44px;margin:0}
.toggle-track{width:44px;height:25px;background:var(--klp-toggle-off);border-radius:20px;position:relative;pointer-events:none}.toggle-track:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:19px;height:19px;border-radius:50%;background:white}.toggle-field input:checked + .toggle-track{background:var(--klp-primary)}.toggle-field input:checked + .toggle-track:after{inset-inline-start:22px}.toggle-field input:focus-visible + .toggle-track{outline:3px solid var(--klp-focus);outline-offset:4px}.toggle-field input:disabled + .toggle-track{opacity:.5}
.search-control{display:flex;align-items:center;position:relative}.search-control .icon{position:absolute;inset-inline-start:12px;width:19px;color:var(--klp-text-muted)}.search-control input{padding-inline-start:40px}
.preview-stack{display:grid;gap:var(--klp-space-lg)}.button-row{display:flex;gap:10px;flex-wrap:wrap}.preview-result{padding:var(--klp-space-control);background:var(--klp-success-soft);color:var(--klp-success);border-radius:var(--klp-radius-sm)}
.sticky-actions{position:sticky;bottom:0;background:var(--klp-surface);display:flex;gap:var(--klp-space-control);padding:var(--klp-space-md);border-top:1px solid var(--klp-border)}
.boot{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--klp-space-md)}.boot img{width:64px;height:64px}.boot progress{width:170px;accent-color:var(--klp-primary)}
#blazor-error-ui{display:none;position:fixed;inset-inline:16px;bottom:90px;z-index:100;background:var(--klp-danger-soft);color:var(--klp-danger);border:1px solid var(--klp-danger-border);padding:var(--klp-space-md);border-radius:var(--klp-radius-md)}
@media(max-width:640px){.panel{padding:var(--klp-space-md)}.heading-title h2{font-size:16px}.section-heading{gap:var(--klp-space-sm);padding-bottom:16px}.form-grid{grid-template-columns:1fr}.sticky-actions{bottom:calc(var(--klp-mobile-nav-height) + env(safe-area-inset-bottom))}.sticky-actions .button{flex:1}.connection-banner,.pwa-banner{padding:var(--klp-space-control)}.connection-banner span,.pwa-banner span{flex-basis:75%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Shared hierarchy and isolated demonstration controls. */
h1{font-size:var(--klp-font-page)}h2{font-size:var(--klp-font-section)}
.button,.form-field label{font-size:var(--klp-font-body)}
.demo-tools,.report-demo,.settings-tools,.demo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--klp-space-sm);padding:var(--klp-space-sm);border:1px dashed var(--klp-border);border-radius:var(--klp-radius-sm);background:var(--klp-surface-soft)}
.demo-tools select,.report-demo select,.settings-tools select,.demo-actions select{min-height:var(--klp-control-height);border:1px solid var(--klp-input-border);border-radius:var(--klp-radius-sm);background:var(--klp-surface);color:var(--klp-text);padding-inline:var(--klp-space-sm)}
.button[aria-busy=true] .icon{animation:rotate 2s linear infinite}
.filter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--klp-space-sm);margin-block:var(--klp-space-md)}

html{scrollbar-gutter:stable}html.dialog-open{overflow:hidden}