:root{--color-primary: #2481cc;--color-on-primary: #ffffff;--color-primary-soft: #dbeeff;--color-background: #ffffff;--color-canvas: #f8f9ff;--color-surface: #f1f1f1;--color-surface-muted: #eceef4;--color-surface-strong: #e1e2e8;--color-text: #181c21;--color-text-muted: #5d656f;--color-text-subtle: #717781;--color-border: #c1c7d2;--color-danger: #e53935;--color-danger-soft: #ffdad6;--color-success: #31b545;--color-success-soft: #d8f3dc;--color-warning: #f5a623;--color-warning-soft: #fff0d2;--color-info-soft: #e5f2ff;--color-scrim: rgb(24 28 33 / .42);--color-on-primary-translucent: rgb(255 255 255 / .76);--font-heading: "Cairo", "Segoe UI", sans-serif;--font-body: "Cairo", "Segoe UI", sans-serif;--font-miniapp-arabic: "Readex Pro", "Segoe UI", sans-serif;--font-miniapp-latin: "Inter", "Segoe UI", sans-serif;--font-mono: "Cascadia Mono", Consolas, monospace;--font-icons: "Material Symbols Outlined", "Segoe MDL2 Assets", sans-serif;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--type-display-size: 2rem;--type-display-line: 1.45;--type-heading-size: 1.5rem;--type-heading-line: 1.5;--type-title-size: 1.125rem;--type-title-line: 1.55;--type-body-size: .9375rem;--type-body-line: 1.8;--type-label-size: .8125rem;--type-label-line: 1.6;--type-caption-size: .75rem;--type-caption-line: 1.5;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-pill: 9999px;--border-thin: 1px;--shadow-sm: 0 .125rem .5rem rgb(24 28 33 / .06);--shadow-md: 0 .5rem 1.5rem rgb(24 28 33 / .1);--shadow-lg: 0 1rem 3rem rgb(24 28 33 / .16);--motion-fast: .14s ease;--motion-standard: .22s ease;--tracking-eyebrow: .04em;--layout-header-height: 4rem;--layout-sidebar-width: 15rem;--layout-content-max: 75rem;--miniapp-max-width: 24.375rem;--miniapp-safe-bottom: 2.125rem;--miniapp-top-bar: .25rem;--miniapp-hero-height: 15rem;--viewport-height: 100vh;--miniapp-compact-breakpoint: 21rem;--modal-max-width: 22rem;--action-width: 9.375rem;--action-height: 4.6875rem;--control-height: 2.75rem;--icon-size: 1.25rem}*{box-sizing:border-box}body{margin:0;background:var(--color-canvas);color:var(--color-text);font-family:var(--font-miniapp-arabic);font-size:var(--type-body-size);line-height:var(--type-body-line)}button,input,select,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.mf-icon{font-family:var(--font-icons);font-size:var(--icon-size);font-weight:400;line-height:1;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr}.mf-shell{min-height:var(--viewport-height);background:var(--color-background)}.mf-chrome{height:var(--miniapp-top-bar);background:var(--color-surface-strong)}.mf-shell__content{width:min(100%,var(--miniapp-max-width));min-height:calc(var(--viewport-height) - var(--miniapp-top-bar));margin:0 auto;padding-block-end:var(--miniapp-safe-bottom);overflow-x:hidden}.mf-hero{position:relative;display:flex;min-height:var(--miniapp-hero-height);align-items:flex-end;overflow:hidden;padding:var(--space-6) var(--space-4);background:linear-gradient(155deg,var(--color-primary-soft),var(--color-background))}.mf-hero--calm{background:linear-gradient(155deg,var(--color-success-soft),var(--color-background))}.mf-hero--system{background:linear-gradient(155deg,var(--color-surface-strong),var(--color-background))}.mf-hero__glow{position:absolute;inset-block-start:var(--space-5);inset-inline-end:calc(var(--space-10) * -1);width:var(--space-16);height:var(--space-16);border-radius:var(--radius-pill);background:var(--color-primary);opacity:.12;filter:blur(var(--space-6))}.mf-hero__home{position:absolute;inset-block-start:var(--space-4);inset-inline-end:var(--space-4)}.mf-hero__copy{position:relative;z-index:1;max-width:calc(100% - var(--space-8))}.mf-hero__eyebrow{display:block;color:var(--color-primary);font-size:var(--type-caption-size);font-weight:var(--weight-semibold)}.mf-hero h1{margin:var(--space-1) 0 0;font-size:var(--type-heading-size);line-height:var(--type-heading-line);font-weight:var(--weight-bold)}.mf-hero p{margin:var(--space-2) 0 0;color:var(--color-text-muted)}.mf-hero__action{margin-block-start:var(--space-4)}.mf-home-button,.mf-icon-button{display:inline-grid;width:var(--control-height);height:var(--control-height);place-items:center;border:0;border-radius:var(--radius-pill);background:var(--color-on-primary-translucent);color:var(--color-primary);box-shadow:var(--shadow-sm);cursor:pointer}.mf-icon-button{background:transparent;box-shadow:none;color:var(--color-text-muted)}.mf-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-thin) solid transparent;border-radius:var(--radius-md);color:var(--color-text);font-size:var(--type-label-size);font-weight:var(--weight-semibold);cursor:pointer;transition:transform var(--motion-fast),opacity var(--motion-fast)}.mf-button:active{transform:scale(.98)}.mf-button:disabled{cursor:not-allowed;opacity:.48}.mf-button--action{width:var(--action-width);height:var(--action-height);flex-direction:column;gap:var(--space-1);padding:var(--space-2);text-align:center}.mf-button--compact{min-height:var(--control-height);padding:var(--space-2) var(--space-4)}.mf-button--wide{width:100%;min-height:var(--action-height);padding:var(--space-3) var(--space-4)}.mf-button--primary{background:var(--color-primary);color:var(--color-on-primary)}.mf-button--secondary{border-color:var(--color-border);background:var(--color-surface)}.mf-button--quiet{background:transparent;color:var(--color-primary)}.mf-button--danger{background:var(--color-danger);color:var(--color-on-primary)}.mf-card{overflow:hidden;border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);box-shadow:var(--shadow-sm)}.mf-card--muted{background:var(--color-surface)}.mf-card--accent{border-color:var(--color-primary)}.mf-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);border-block-end:var(--border-thin) solid var(--color-border)}.mf-card__header h2{margin:0;font-size:var(--type-title-size);font-weight:var(--weight-semibold)}.mf-card__body{padding:var(--space-4)}.mf-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);padding:var(--space-4)}.mf-metric{display:grid;justify-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-2);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);text-align:center}.mf-metric__icon{color:var(--color-primary)}.mf-metric__label{color:var(--color-text-muted);font-size:var(--type-caption-size)}.mf-metric strong{color:var(--color-primary);font-size:var(--type-heading-size);line-height:1}.mf-metric--success strong{color:var(--color-success)}.mf-metric--warning strong{color:var(--color-warning)}.mf-list{display:grid;gap:var(--space-1)}.mf-list-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-block-end:var(--border-thin) solid var(--color-border)}.mf-list-row__icon{color:var(--color-primary)}.mf-list-row__copy{display:grid;flex:1;min-width:0}.mf-list-row__copy span{overflow:hidden;color:var(--color-text-muted);font-size:var(--type-caption-size);text-overflow:ellipsis;white-space:nowrap}.mf-list-row__trailing{flex:0 0 auto}.mf-badge,.mf-status{display:inline-flex;align-items:center;gap:var(--space-1);width:fit-content;border-radius:var(--radius-pill);font-size:var(--type-caption-size);font-weight:var(--weight-semibold)}.mf-badge{padding:var(--space-1) var(--space-2);background:var(--color-surface);color:var(--color-text-muted)}.mf-badge__count{display:inline-grid;min-width:var(--space-5);height:var(--space-5);place-items:center;border-radius:var(--radius-pill);background:currentColor;color:var(--color-background)}.mf-badge--primary{background:var(--color-primary-soft);color:var(--color-primary)}.mf-badge--success,.mf-status--success{color:var(--color-success)}.mf-badge--warning,.mf-status--warning{color:var(--color-warning)}.mf-badge--danger,.mf-status--danger{color:var(--color-danger)}.mf-status{padding:var(--space-1) var(--space-2)}.mf-status__dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:currentColor}.mf-field{display:grid;gap:var(--space-2)}.mf-field__label{font-size:var(--type-label-size);font-weight:var(--weight-semibold)}.mf-input{width:100%;min-height:var(--control-height);padding:var(--space-2) var(--space-3);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text);outline:none}.mf-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 var(--space-1) var(--color-primary-soft)}.mf-input::placeholder{color:var(--color-text-subtle)}.mf-textarea{min-height:var(--space-16);resize:vertical}.mf-field__message{color:var(--color-text-muted);font-size:var(--type-caption-size)}.mf-field--error .mf-input,.mf-field--error .mf-field__message{border-color:var(--color-danger);color:var(--color-danger)}.mf-check{display:flex;align-items:flex-start;gap:var(--space-3)}.mf-check input{position:absolute;opacity:0}.mf-check__box{flex:0 0 auto;width:var(--space-5);height:var(--space-5);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background)}.mf-check input:checked+.mf-check__box{border-color:var(--color-primary);background:var(--color-primary);box-shadow:inset 0 0 0 var(--space-1) var(--color-background)}.mf-check strong,.mf-check small{display:block}.mf-check small{color:var(--color-text-muted);font-size:var(--type-caption-size)}.mf-alert{display:flex;gap:var(--space-3);padding:var(--space-3);border:var(--border-thin) solid var(--color-primary-soft);border-radius:var(--radius-md);background:var(--color-info-soft)}.mf-alert__icon{color:var(--color-primary)}.mf-alert strong{font-weight:var(--weight-semibold)}.mf-alert p{margin:var(--space-1) 0 0;color:var(--color-text-muted);font-size:var(--type-caption-size)}.mf-alert--success{border-color:var(--color-success-soft);background:var(--color-success-soft)}.mf-alert--success .mf-alert__icon{color:var(--color-success)}.mf-alert--warning{background:var(--color-warning-soft)}.mf-alert--warning .mf-alert__icon{color:var(--color-warning)}.mf-alert--danger{border-color:var(--color-danger-soft);background:var(--color-danger-soft)}.mf-alert--danger .mf-alert__icon{color:var(--color-danger)}.mf-modal{position:fixed;inset:0;z-index:4;display:grid;place-items:center;padding:var(--space-4)}.mf-modal__backdrop{position:absolute;inset:0;background:var(--color-scrim)}.mf-modal__panel{position:relative;width:min(100%,var(--modal-max-width));padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-background);box-shadow:var(--shadow-lg)}.mf-modal__panel header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.mf-modal__panel h2{margin:0;font-size:var(--type-title-size)}.mf-modal__panel p{color:var(--color-text-muted)}.mf-modal__actions{display:flex;gap:var(--space-3);margin-block-start:var(--space-5)}.mf-modal__actions .mf-button{flex:1}.mf-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-1)}.mf-pagination__page{display:grid;min-width:var(--space-8);height:var(--space-8);place-items:center;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);cursor:pointer}.mf-pagination__page:hover,.mf-pagination__page--active{background:var(--color-primary);color:var(--color-on-primary)}.mf-preview-section{display:grid;gap:var(--space-3);padding:var(--space-5) var(--space-4)}.mf-preview-section h2{margin:0;font-size:var(--type-title-size)}.mf-preview-section>p{margin:0;color:var(--color-text-muted);font-size:var(--type-caption-size)}.mf-action-grid{display:grid;grid-template-columns:repeat(2,var(--action-width));justify-content:center;gap:var(--space-3)}.mf-action-grid .mf-button--wide{grid-column:1 / -1}.mf-stack{display:grid;gap:var(--space-3)}.mf-inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.mf-form-grid{display:grid;gap:var(--space-4)}
