@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&family=Nunito+Sans:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap');

:root{--ui-font-scale:1;--ui-font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body.ui-font-manrope{--ui-font-family:'Manrope',system-ui,sans-serif}
body.ui-font-inter{--ui-font-family:'Inter',system-ui,sans-serif}
body.ui-font-montserrat{--ui-font-family:'Montserrat',system-ui,sans-serif}
body.ui-font-roboto{--ui-font-family:'Roboto',system-ui,sans-serif}
body.ui-font-nunito{--ui-font-family:'Nunito Sans',system-ui,sans-serif}
body,button,input,select,textarea{font-family:var(--ui-font-family)!important}

/* Scale the typography without stretching cards or breaking the grids. */
body{font-size:calc(14px * var(--ui-font-scale))}
body h1{font-size:calc(30px * var(--ui-font-scale))}
body h2{font-size:calc(20px * var(--ui-font-scale))}
body h3{font-size:calc(16px * var(--ui-font-scale))}
body .eyebrow,body .analytics-kicker{font-size:calc(11px * var(--ui-font-scale))}
body .nav a,body .analytics-sidebar nav a,body button,body .btn,body input,body select,body textarea{font-size:calc(14px * var(--ui-font-scale))}
body .muted,body small{font-size:calc(11px * var(--ui-font-scale))}
body .stat-card strong{font-size:calc(32px * var(--ui-font-scale))}
body .order-time strong,body .order-amount strong{font-size:calc(17px * var(--ui-font-scale))}
body .order-client strong,body .order-product strong,body .order-ttn strong{font-size:calc(14px * var(--ui-font-scale))}
body .status-pill,body .soft-badge,body .double-badge{font-size:calc(11px * var(--ui-font-scale))}
body .analytics-header h1{font-size:calc(32px * var(--ui-font-scale))}
body .analytics-main .metric-value,body .analytics-main [class*="value"]{font-family:var(--ui-font-family)!important}

/* Settings typography card */
.typography-settings-card{overflow:hidden}
.typography-live-badge{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:999px;background:#edf3ff;color:#2e6bff;font-size:11px;font-weight:800}
.typography-preview{--preview-scale:1;margin-top:20px;padding:18px;border:1px solid #dfe7f3;border-radius:17px;background:linear-gradient(145deg,#f8fbff,#fff);display:grid;gap:5px;font-size:calc(14px * var(--preview-scale));transition:.2s ease}
.typography-preview span,.typography-preview small{color:#7c8aa2}
.typography-preview strong{font-size:calc(18px * var(--preview-scale));letter-spacing:-.02em}
.font-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.font-choice{position:relative;min-height:86px;padding:15px 42px 14px 15px;border:1px solid #dfe5ef;border-radius:16px;background:#fff;cursor:pointer;transition:.18s ease;display:flex;flex-direction:column;justify-content:center}
.font-choice:hover{border-color:#9bb8ff;transform:translateY(-1px)}
.font-choice.is-selected{border-color:#2e6bff;box-shadow:0 0 0 3px rgba(46,107,255,.1);background:#f8fbff}
.font-choice input{position:absolute;opacity:0;pointer-events:none}
.font-choice-name{display:block;font-size:17px;font-weight:800;color:#172033}
.font-choice small{display:block;margin-top:4px;color:#7d899e;font-size:10px}
.font-choice i{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#eef2f7;color:transparent;font-style:normal;font-weight:900}
.font-choice.is-selected i{background:#2e6bff;color:#fff}
.font-demo-manrope{font-family:'Manrope',sans-serif!important}.font-demo-inter{font-family:'Inter',sans-serif!important}.font-demo-montserrat{font-family:'Montserrat',sans-serif!important}.font-demo-roboto{font-family:'Roboto',sans-serif!important}.font-demo-nunito{font-family:'Nunito Sans',sans-serif!important}
.font-scale-control{margin-top:18px;padding-top:18px;border-top:1px solid #e4e9f1}
.font-scale-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.font-scale-head strong,.font-scale-head small{display:block}.font-scale-head small{margin-top:4px;color:#7d899e}
.font-scale-head output{min-width:61px;padding:8px 10px;border-radius:12px;background:#edf3ff;color:#2e6bff;text-align:center;font-size:15px;font-weight:900}
.font-scale-control input[type=range]{width:100%;height:6px;margin:18px 0 14px;accent-color:#2e6bff;cursor:pointer}
.font-scale-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.font-scale-presets button{min-height:35px;border:1px solid #dfe5ef;border-radius:11px;background:#fff;color:#69758b;font-size:11px;font-weight:800;cursor:pointer}
.font-scale-presets button:hover,.font-scale-presets button.is-active{border-color:#2e6bff;background:#edf3ff;color:#2e6bff}
.settings-submit{align-items:center;justify-content:space-between!important;gap:20px;padding:16px 18px;border:1px solid #dfe5ef;border-radius:18px;background:#fff;position:sticky;bottom:12px;z-index:8;box-shadow:0 14px 36px rgba(35,52,84,.1)}
.settings-save-note b,.settings-save-note small{display:block}.settings-save-note small{margin-top:4px;color:#7d899e}

@media(max-width:700px){.font-choice-grid{grid-template-columns:1fr}.font-scale-presets{grid-template-columns:repeat(2,1fr)}.settings-submit{position:static;flex-direction:column;align-items:stretch}.settings-submit .btn{width:100%}}