@import url('/vendor/sarahui/sarahui.css');

.qr-login-panel{display:grid;justify-items:center;gap:12px;text-align:center}
.login-method-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--surface-soft);border-radius:10px}
.login-method-option{min-height:36px;padding:0 16px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.login-method-option.active{background:var(--surface);color:var(--text-strong);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.qr-login-instruction{max-width:320px;margin:0;color:var(--muted);font-size:12px;line-height:18px}
.qr-login-frame{width:224px;height:224px;padding:10px;background:#fff;border-radius:12px;display:grid;place-items:center}
.qr-login-frame img{display:block;width:100%;height:100%;image-rendering:pixelated}
.qr-login-frame img[hidden],.qr-login-frame [data-qr-placeholder][hidden]{display:none}
.qr-login-frame [data-qr-placeholder]{padding:20px;color:#64748b;font-size:12px;text-align:center}
.qr-login-status,.qr-login-browser{min-height:18px;margin:0;color:var(--muted);font-size:11px;line-height:16px}
.qr-login-status{font-weight:700;color:var(--text-strong)}
.qr-login-browser{min-height:0}
.qr-login-panel .wide{width:100%}
.mobile-login-panel{margin-top:18px;border-top:1px solid var(--surface-muted);padding-top:14px}
.mobile-login-panel h3{margin:0;text-align:center;font-size:13px;color:var(--text-strong)}
.mobile-login-help{margin:5px auto 12px;max-width:300px;text-align:center;color:var(--muted);font-size:11px;line-height:16px}
.mobile-login-panel .stack-form{gap:10px}
.mobile-login-panel button:disabled{opacity:.65;cursor:wait}
.mobile-login-panel label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--text-strong)}
.mobile-login-status{min-height:16px;margin:0;text-align:center;color:var(--muted);font-size:11px;font-weight:700}
.qr-login-fallback{margin-top:18px;border-top:1px solid var(--surface-muted);padding-top:14px;color:var(--muted);font-size:11px}
.qr-login-fallback summary{cursor:pointer;text-align:center;font-weight:700}
.qr-login-fallback .stack-form{margin-top:14px;text-align:left}
html[data-theme="dark"] .qr-login-frame{background:#fff}

/*
 * SAFA Modern Web Product UI Design System
 * 100% Flat Minimalist Design — Inspired by MarcoHR SaaS Design Architecture
 * ZERO Shadows, ZERO Borders, Ultra-Fast Performance
 */

:root{
  color-scheme:light;
  --bg:#f7faf8;
  --bg-gradient:#f7faf8;
  --surface:#ffffff;
  --surface-soft:#f1f5f9;
  --surface-muted:#e2e8f0;
  --surface-raised:#ffffff;
  --text:#0f172a;
  --text-strong:#020617;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e5e7eb;
  --line-brand:#dce7e2;
  --line-strong:#cbd5e1;

  --brand-green:#064e3b;
  --brand-green-2:#043a2c;
  --brand-green-soft:#dcfce7;
  --brand-orange:#f97316;
  --brand-orange-2:#ea580c;
  --brand-orange-soft:#ffedd5;
  --brand-orange-gradient:#f97316;
  --brand-green-gradient:#064e3b;

  /* Android app chrome */
  --chrome-gold:#d7a84b;
  --chrome-gold-soft:#fef9c3;
  --chrome-ink:#3e2700;
  --nav-active:#a82222;
  --nav-active-soft:#ffebee;

  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --success:#16a34a;
  --success-soft:#dcfce7;
  --warning:#d97706;
  --warning-soft:#fef3c7;
  --info:#0284c7;
  --info-soft:#e0f2fe;

  --shortcut-red:#e53935;--shortcut-red-soft:#fee2e2;
  --shortcut-orange:#fb8c00;--shortcut-orange-soft:#ffedd5;
  --shortcut-green:#43a047;--shortcut-green-soft:#dcfce7;
  --shortcut-pink:#e91e63;--shortcut-pink-soft:#fce7f3;
  --shortcut-yellow:#b58a00;--shortcut-yellow-soft:#fef9c3;
  --shortcut-teal:#00796b;--shortcut-teal-soft:#ccfbf1;
  --shortcut-indigo:#3f51b5;--shortcut-indigo-soft:#e0e7ff;
  --shortcut-brown:#8d6e63;--shortcut-brown-soft:#f5ebe6;

  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-card:14px;--r-lg:18px;--r-xl:22px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;
  --touch:48px;--field-h:44px;--button-h:48px;--topbar-h:68px;--bottom-nav-h:68px;--sidebar-w:248px;

  --shadow-1:none;
  --shadow-2:none;
  --shadow-3:none;
  --shadow-card:none;
  --shadow-hover:none;
  --shadow-primary-btn:none;
  --shadow-primary-btn-hover:none;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --fast:120ms;--normal:180ms;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Bengali",sans-serif;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#09120f;
  --bg-gradient:#09120f;
  --surface:#11201a;
  --surface-soft:#172c24;
  --surface-muted:#1f3b30;
  --surface-raised:#142720;
  --text:#f1f5f9;
  --text-strong:#ffffff;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --line:#1e3e33;
  --line-brand:#234e3f;
  --line-strong:#326553;
  --chrome-gold:#1b1812;
  --chrome-gold-soft:#2d2513;
  --chrome-ink:#fcd34d;
  --nav-active:#60a5fa;
  --nav-active-soft:#1e293b;
  --brand-orange-soft:#431407;
  --brand-green-soft:#064e3b;
  --danger:#f87171;--danger-soft:#450a0a;
  --success:#4ade80;--success-soft:#052e16;
  --warning:#fbbf24;--warning-soft:#451a03;
  --info:#38bdf8;--info-soft:#082f49;
  --shortcut-red-soft:#450a0a;
  --shortcut-orange-soft:#431407;
  --shortcut-green-soft:#052e16;
  --shortcut-pink-soft:#500724;
  --shortcut-yellow-soft:#422006;
  --shortcut-teal-soft:#042f2e;
  --shortcut-indigo-soft:#1e1b4b;
  --shortcut-brown-soft:#2c1810;
  --shadow-1:none;
  --shadow-2:none;
  --shadow-3:none;
  --shadow-card:none;
  --shadow-hover:none;
  --shadow-primary-btn:none;
  --shadow-primary-btn-hover:none;
}

*,*::before,*::after{
  box-sizing:border-box;
  box-shadow:none !important;
  text-shadow:none !important;
}

html{min-height:100%;background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeSpeed;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none}
button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.muted{color:var(--muted)}

/* Screen Isolation — Only active screen is displayed */
.screen{display:none !important}
.screen.active{display:block !important}
.sub-screen{display:none !important}
.sub-screen.active{display:block !important}
[hidden]{display:none !important}

/* Icon system */
.icon{width:20px;height:20px;display:inline-block;flex:0 0 auto;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat}
.icon-home{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.5 11h2.3v9h5.3v-5.7h3.8V20h5.3v-9h2.3L12 3Z'/%3E%3C/svg%3E")}
.icon-people{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.5 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM9 13c-4 0-7 2-7 4.7V21h14v-3.3C16 15 13 13 9 13Zm6.5.8c-.5 0-1 .1-1.4.1 2.3 1.1 3.9 2.8 3.9 4.8V21h4v-2.8c0-2.5-2.8-4.4-6.5-4.4Z'/%3E%3C/svg%3E")}
.icon-supplier{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v5H4V4Zm1 7h14v9H5v-9Zm3 2v2h8v-2H8Zm0 4v1h5v-1H8Z'/%3E%3C/svg%3E")}
.icon-wallet{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.5A2.5 2.5 0 0 1 5.5 3H19v4H6a1 1 0 0 0 0 2h15v11H5.5A2.5 2.5 0 0 1 3 17.5v-12ZM17 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E")}
.icon-payments{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5Zm2 3v8h14V8H5Zm7 1.5A2.5 2.5 0 1 1 12 14.5a2.5 2.5 0 0 1 0-5ZM6 10h2v4H6v-4Zm10 0h2v4h-2v-4Z'/%3E%3C/svg%3E")}
.icon-report{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H2V3h2v16Zm3-2H5v-5h2v5Zm5 0h-2V7h2v10Zm5 0h-2V4h2v13Z'/%3E%3C/svg%3E")}
.icon-settings{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m19.4 13 .1-1-.1-1 2-1.6-2-3.4-2.5 1a8 8 0 0 0-1.7-1L14.8 3h-4l-.4 3a8 8 0 0 0-1.7 1l-2.5-1-2 3.4 2 1.6-.1 1 .1 1-2 1.6 2 3.4 2.5-1a8 8 0 0 0 1.7 1l.4 3h4l.4-3a8 8 0 0 0 1.7-1l2.5 1 2-3.4-2-1.6ZM12.8 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E")}
.icon-theme{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 18V4a8 8 0 0 1 0 16Z'/%3E%3C/svg%3E")}
.icon-refresh{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.7 6.3A8 8 0 0 0 4.3 9H2l3.5 3.5L9 9H6.4a6 6 0 1 1 .7 7.4l-1.5 1.3a8 8 0 1 0 12.1-11.4Z'/%3E%3C/svg%3E")}
.icon-search{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 1 0 4.7 13.3L20.9 22 22 20.9l-5.7-5.7A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E")}
.icon-filter{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h10v2H4V7Zm0 8h16v2H4v-2Zm14-9h2v4h-2V6ZM8 14h2v4H8v-4Z'/%3E%3C/svg%3E")}
.icon-add{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E")}
.icon-close{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E")}
.icon-back{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2Z'/%3E%3C/svg%3E")}
.icon-sync{--icon:var(--icon-refresh)}
.icon-exchange{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h13.17l-2.58-2.59L15 3l5 5-5 5-1.41-1.41L16.17 9H3V7Zm18 10H7.83l2.58 2.59L9 21l-5-5 5-5 1.41 1.41L7.83 15H21v2Z'/%3E%3C/svg%3E")}
.icon-user{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5Z'/%3E%3C/svg%3E")}
.icon-phone{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2 10 5.4 8 8.2c1.5 3 3.8 5.3 6.8 6.8l2.8-2 3.4 3.4-1.8 3.4c-.4.8-1.3 1.2-2.2 1C9 19.2 4.8 15 3.2 7c-.2-.9.2-1.8 1-2.2L6.6 2Z'/%3E%3C/svg%3E")}
.icon-lock{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h2v11H5V10h2Zm2 0h6V7a3 3 0 0 0-6 0v3Zm3 3a2 2 0 0 0-1 3.7V19h2v-2.3A2 2 0 0 0 12 13Z'/%3E%3C/svg%3E")}

/* Form Controls & Inputs — Flat Clean Modern */
input,select,textarea{
  width:100%;
  min-height:var(--field-h);
  border:none !important;
  border-radius:var(--r-sm);
  background:var(--surface-soft);
  color:var(--text);
  padding:10px 14px;
  font-size:13.5px;
  line-height:20px;
  transition:background var(--fast) var(--ease);
}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:none;
  background:var(--surface-muted);
}

/* Button System — MarcoHR SaaS Aesthetic */
.icon-button,.compact-button,.primary-button,.secondary-button,.danger-button,.button,.mini-button{
  border:none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  font-weight:700;
  border-radius:var(--r-sm);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),opacity var(--fast) var(--ease);
}
.icon-button:active,.compact-button:active,.primary-button:active,.secondary-button:active,.danger-button:active,.mini-button:active{
  opacity:0.88;
}
.primary-button,.button.primary{
  min-height:var(--button-h);
  padding:0 20px;
  background:var(--brand-orange);
  color:#ffffff;
  font-size:13.5px;
  font-weight:750;
  letter-spacing:-.01em;
}
.primary-button:hover,.button.primary:hover{
  background:var(--brand-orange-2);
}
.secondary-button,.compact-button{
  min-height:40px;
  padding:0 14px;
  background:var(--surface-soft);
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
}
.secondary-button:hover,.compact-button:hover{
  background:var(--surface-muted);
  color:var(--text-strong);
}
.danger-button{
  min-height:42px;
  padding:0 16px;
  background:var(--danger-soft);
  color:var(--danger);
  font-size:12.5px;
  font-weight:750;
}
.danger-button:hover{
  background:var(--danger);
  color:#ffffff;
}
.icon-button{
  width:var(--touch);
  height:var(--touch);
  min-height:var(--touch);
  padding:0;
  border-radius:var(--r-sm);
  background:var(--surface-soft);
  color:var(--text);
}
.icon-button:hover{background:var(--surface-muted);color:var(--text-strong)}
.mini-button{
  min-height:32px;
  padding:0 12px;
  font-size:11.5px;
  font-weight:700;
  border-radius:var(--r-xs);
  background:var(--surface-soft);
  color:var(--text);
}
.mini-button:hover{background:var(--surface-muted)}
.mini-button.primary{
  background:var(--brand-orange-soft);
  color:var(--brand-orange);
}
.mini-button.primary:hover{background:var(--brand-orange);color:#ffffff}
.mini-button.danger{
  background:var(--danger-soft);
  color:var(--danger);
}
.mini-button.danger:hover{background:var(--danger);color:#ffffff}
.mini-button.blue{
  background:var(--info-soft);
  color:var(--info);
}
.mini-button.blue:hover{background:var(--info);color:#ffffff}

/* Auth / Login Composition */
.auth-body{
  background:var(--bg);
  display:grid;
  place-items:center;
  min-height:100vh;
}
.auth-layout{
  width:100%;
  max-width:420px;
  padding:20px;
  margin:auto;
}
.auth-shell{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.auth-toolbar{
  display:flex;
  justify-content:flex-end;
}
.language-switch{
  display:inline-flex;
  padding:3px;
  border-radius:var(--r-sm);
  background:var(--surface-soft);
  border:none !important;
}
.language-switch a{
  padding:5px 12px;
  border-radius:var(--r-xs);
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  transition:all var(--fast) var(--ease);
}
.language-switch a.active{
  background:var(--brand-orange);
  color:#ffffff;
}
.auth-card{
  background:var(--surface);
  border:none !important;
  border-radius:var(--r-card);
  padding:28px 24px;
}
.auth-brand{
  text-align:center;
  margin-bottom:20px;
}
.auth-logo-wrap{width:88px;height:88px;margin:0 auto 12px;border-radius:18px;background:var(--surface-soft);border:none !important;display:grid;place-items:center;padding:12px}
.auth-logo{width:100%;height:100%;object-fit:contain}
.auth-brand h1{margin:0;font-size:22px;font-weight:850;letter-spacing:-.02em;color:var(--text-strong)}
.auth-card h2{margin:0 0 18px;font-size:15px;font-weight:800;color:var(--muted);text-align:center}
.field-control{
  position:relative;
  display:flex;
  align-items:center;
}
.field-control .field-icon{
  position:absolute;
  left:14px;
  width:18px;
  height:18px;
  color:var(--muted);
  pointer-events:none;
}
.field-control input{
  padding-left:42px;
}
.stack-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.stack-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--text-strong);
}
.field-error,.auth-error-inline{
  color:var(--danger);
  font-size:11.5px;
  font-weight:700;
  margin:2px 0 0;
}
.auth-error-inline{min-height:16px;text-align:center}

/* Shortcut Grid & Actions */
.shortcut-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px 6px;
  justify-items:center;
}
.shortcut-action.red .shortcut-badge{background:var(--shortcut-red-soft);color:var(--shortcut-red)}
.shortcut-action.orange .shortcut-badge{background:var(--shortcut-orange-soft);color:var(--shortcut-orange)}
.shortcut-action.green .shortcut-badge{background:var(--shortcut-green-soft);color:var(--shortcut-green)}
.shortcut-action.pink .shortcut-badge{background:var(--shortcut-pink-soft);color:var(--shortcut-pink)}
.shortcut-action.yellow .shortcut-badge{background:var(--shortcut-yellow-soft);color:var(--shortcut-yellow)}
.shortcut-action.teal .shortcut-badge{background:var(--shortcut-teal-soft);color:var(--shortcut-teal)}
.shortcut-action.indigo .shortcut-badge{background:var(--shortcut-indigo-soft);color:var(--shortcut-indigo)}
.shortcut-action.brown .shortcut-badge{background:var(--shortcut-brown-soft);color:var(--shortcut-brown)}

.standalone-mobile-nav{display:none}

.sales-card.blue{background:var(--info-soft)}
.sales-card.teal{background:var(--shortcut-teal-soft)}
.sales-card.amber{background:var(--shortcut-orange-soft)}
.sales-card.emerald{background:var(--shortcut-green-soft)}

/* Navigation active token */
.bottom-nav-item.active{
  background:var(--nav-active-soft);
  color:var(--nav-active);
}

/* System update page */
.system-page{
  background:var(--bg);
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
}
.system-card{
  background:var(--surface);
  border:none !important;
  border-radius:18px;
  padding:28px;
  max-width:560px;
  width:100%;
}

/* App Shell Desktop Adaptation */
@media(min-width:1024px){
  .app-sidebar{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:var(--sidebar-w);
    height:100vh;
    z-index:200;
    background:var(--surface);
  }
  .app-workspace{
    min-height:100vh;
    padding-left:var(--sidebar-w);
  }
  .mobile-bottom-nav,.app-navigation{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:16px 12px;
    height:auto;
  }
  .standalone-mobile-nav{display:none}
  .shortcut-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .subpage{left:var(--sidebar-w);top:68px}
  .entity-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}
}