:root{--bg:#f4f7fb;--card:#fff;--ink:#132238;--muted:#64748b;--primary:#0f766e;--primary2:#115e59;--danger:#b91c1c;--warn:#b45309;--line:#e2e8f0;--soft:#ecfeff;--shadow:0 20px 45px rgba(15,35,65,.08)}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}.muted{color:var(--muted)}.small,small{font-size:.82rem;color:var(--muted)}
.sidebar{position:fixed;inset:0 auto 0 0;width:278px;background:#0b1727;color:#e5edf7;padding:22px 18px;display:flex;flex-direction:column;gap:20px;z-index:5}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#14b8a6,#22c55e);display:flex;align-items:center;justify-content:center;font-weight:900;color:white;box-shadow:0 12px 25px rgba(20,184,166,.25)}.brand strong{display:block;font-size:1.1rem}.brand span{display:block;color:#9fb3c8;font-size:.82rem}.sidebar nav{display:grid;gap:6px}.sidebar nav a{color:#cbd5e1;padding:11px 12px;border-radius:12px;text-decoration:none}.sidebar nav a:hover{background:#14263e;color:#fff}.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:15px;display:grid;gap:4px}.sidebar-foot span{font-weight:700}.sidebar-foot small{color:#9fb3c8}
.main{margin-left:278px;padding:26px;min-height:100vh}.main-login{margin-left:0;padding:0}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.topbar h1{font-size:1.7rem;margin:0 0 6px}.topbar p{margin:0;color:var(--muted);max-width:880px}.pill,.tag,.status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:.78rem;background:#e0f2fe;color:#075985;font-weight:700}.status{background:#ecfdf5;color:#047857;text-transform:capitalize}.tag{background:#fef3c7;color:#92400e}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.card-head h2{margin:0;font-size:1.15rem}.card-head p{margin:4px 0 0}.narrow{max-width:860px}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric span{color:var(--muted);display:block}.metric strong{display:block;font-size:2rem;margin-top:8px}.metric.warning{background:#fffbeb}
.btn,button.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1}.btn:hover{text-decoration:none;background:#f8fafc}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary2)}.btn.danger{background:#fef2f2;color:var(--danger);border-color:#fecaca}.btn.ghost{background:transparent}.btn.small{padding:7px 10px;font-size:.82rem}.btn.full{width:100%;justify-content:center}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline{display:inline}.inline button{margin-right:4px}
table{width:100%;border-collapse:collapse;overflow:hidden}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:.78rem;text-transform:none;letter-spacing:.01em;color:var(--muted);background:#f8fafc}tr:hover td{background:#fbfdff}.detail-row td{background:#f8fafc;color:#475569;font-size:.92rem}.empty{text-align:center;color:var(--muted);padding:26px!important}.flash-wrap{margin-bottom:16px}.flash{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;margin-bottom:8px}.flash-success{background:#ecfdf5;border-color:#bbf7d0}.flash-danger{background:#fef2f2;border-color:#fecaca}.flash-warning{background:#fffbeb;border-color:#fde68a}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.form-stack{display:grid;gap:14px}.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.filters.mini{margin-top:10px}label{display:grid;gap:6px;font-weight:700;color:#334155}input,select,textarea{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:10px 11px;background:#fff;color:#0f172a;font:inherit}textarea{min-height:92px;resize:vertical}.span2{grid-column:span 2}.form-grid.compact .span2{grid-column:span 2}.check{display:flex;align-items:center;gap:8px;grid-auto-flow:column;justify-content:start}.check input{width:auto}.notice{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;padding:12px 14px}.profile-card .info-grid,.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.info-grid div{border:1px solid var(--line);background:#f8fafc;border-radius:16px;padding:12px}.info-grid span{display:block;color:var(--muted);font-size:.78rem}.info-grid strong{display:block;margin-top:5px}.big-balance{font-size:1.6rem;font-weight:900;color:var(--primary)}.announcement-list{display:grid;gap:12px}.announcement-list article{border:1px solid var(--line);background:#f8fafc;border-radius:16px;padding:14px}.announcement-list p{margin:8px 0}.risk{border-radius:999px;padding:4px 8px;font-weight:700;font-size:.78rem}.risk-low{background:#ecfdf5;color:#047857}.risk-medium{background:#fffbeb;color:#92400e}.risk-high{background:#fef2f2;color:#b91c1c}
.login-shell{min-height:100vh;background:radial-gradient(circle at top left,#134e4a,#0f172a 50%,#020617);display:flex;align-items:center;justify-content:center;padding:24px}.login-card{width:min(520px,100%);background:rgba(255,255,255,.96);border-radius:28px;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.login-logo{width:70px;height:70px;border-radius:22px;background:linear-gradient(135deg,#14b8a6,#22c55e);color:white;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px}.login-card h1{font-size:1.6rem;margin:0 0 8px}.login-card p{margin:0 0 18px}.login-card .notice{margin-top:16px}
pre{white-space:pre-wrap;background:#0f172a;color:#dbeafe;border-radius:16px;padding:16px;overflow:auto}.print-body{background:#fff}.statement{max-width:1050px;margin:0 auto;padding:24px}.print-hide{margin-top:18px}
@media (max-width:1050px){.sidebar{position:static;width:auto}.main{margin-left:0;padding:18px}.grid.two,.metrics,.form-grid.compact{grid-template-columns:1fr}.topbar{display:block}.form-grid{grid-template-columns:1fr}.span2,.form-grid.compact .span2{grid-column:span 1}.profile-card .info-grid,.info-grid{grid-template-columns:1fr}table{display:block;overflow-x:auto;white-space:nowrap}.card-head{flex-direction:column}.filters input,.filters select{min-width:170px;flex:1}}
@media print{.sidebar,.topbar,.print-actions .btn,.print-hide,.flash-wrap{display:none!important}.main{margin:0;padding:0}.card{box-shadow:none;border:1px solid #bbb;border-radius:0}.main{min-height:auto}body{background:#fff}table{display:table;white-space:normal}th,td{padding:6px;font-size:12px}}
.calc-box{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px;color:#334155}.calc-box small{color:#64748b}

/* Phase 003 official logo and favicon branding */
.brand-link{color:#e5edf7;text-decoration:none}.brand-link:hover{text-decoration:none}.brand-icon{width:54px;height:54px;border-radius:18px;object-fit:cover;box-shadow:0 12px 26px rgba(0,0,0,.22);background:#fff}.topbar-title{display:flex;align-items:flex-start;gap:14px}.topbar-logo{width:54px;height:54px;border-radius:17px;object-fit:cover;background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px rgba(15,35,65,.08);flex:0 0 auto}.login-brand{display:flex;justify-content:center;margin-bottom:20px}.login-brand img{width:min(390px,100%);height:auto;display:block}.statement-brand{display:flex;gap:18px;align-items:center;margin-bottom:10px}.statement-brand img{width:310px;max-width:40%;height:auto;display:block}.statement-brand h1{margin:0 0 6px}.statement-brand p{margin:0;color:var(--muted)}
@media (max-width:1050px){.topbar-title{align-items:center}.topbar-logo{width:46px;height:46px}.statement-brand{display:block}.statement-brand img{max-width:100%;width:360px;margin-bottom:10px}}
@media print{.statement-brand img{width:230px;max-width:35%}.topbar-logo{display:none}}

/* Phase 004 mobile/tablet friendly responsive upgrade */
.mobile-menu-toggle{display:none;position:fixed;top:12px;left:12px;z-index:40;align-items:center;gap:8px;border:1px solid rgba(226,232,240,.9);background:rgba(255,255,255,.96);color:#0f172a;padding:10px 13px;border-radius:999px;font-weight:800;box-shadow:0 14px 32px rgba(15,35,65,.16);backdrop-filter:blur(10px)}
.mobile-menu-toggle span{font-size:1.1rem;line-height:1}.sidebar-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.48);z-index:30;backdrop-filter:blur(2px)}
body.nav-open{overflow:hidden}.sidebar nav a,.btn,button.btn,input,select,textarea{min-height:42px}.sidebar nav a{display:flex;align-items:center}.brand{min-width:0}.brand div{min-width:0}.brand strong,.brand span{overflow:hidden;text-overflow:ellipsis}.topbar .pill{white-space:nowrap}.card{overflow:visible}.table-scroll{width:100%;overflow-x:auto}.responsive-table{min-width:100%}.actions .btn{white-space:nowrap}.filters .btn{min-height:42px}.login-card input{min-height:46px}.login-card .btn{min-height:46px}.login-card h1{line-height:1.15}.announcement-list article{overflow-wrap:anywhere}

@media (min-width:1051px){.sidebar{overflow-y:auto}.main{max-width:1680px}.responsive-table th,.responsive-table td{overflow-wrap:anywhere}.responsive-table td:last-child{white-space:nowrap}}

@media (max-width:1050px){
  .mobile-menu-toggle{display:inline-flex}.sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(86vw,320px)!important;max-width:320px;height:100vh;padding:72px 18px 18px!important;transform:translateX(-105%);transition:transform .22s ease;z-index:35;overflow-y:auto;box-shadow:20px 0 60px rgba(2,6,23,.30)}
  .sidebar.is-open{transform:translateX(0)}.sidebar-foot{margin-top:18px}.main{margin-left:0!important;padding:72px 16px 18px!important}.main-login{padding:0!important}.topbar{display:flex!important;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.topbar-title{min-width:0;align-items:center!important}.topbar-title h1{font-size:1.35rem;line-height:1.2}.topbar-title p{font-size:.9rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.topbar .pill{font-size:.72rem;padding:5px 8px}.brand-icon{width:50px;height:50px}.grid.two{grid-template-columns:1fr!important}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}.metric strong{font-size:1.55rem}.card{border-radius:18px;padding:15px;margin-bottom:14px}.card-head{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:12px;flex-wrap:wrap}.card-head h2{font-size:1.05rem}.form-grid,.form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))!important}.span2,.form-grid.compact .span2{grid-column:span 2!important}.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.filters input,.filters select{min-width:0!important;width:100%}.filters .btn{justify-content:center}.actions{gap:8px}.profile-card .info-grid,.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.statement-brand{display:flex!important;align-items:center!important}.statement-brand img{width:240px;max-width:48%;margin-bottom:0}.statement{padding:18px}
}

@media (max-width:760px){
  body{font-size:15px}.mobile-menu-toggle{top:10px;left:10px;padding:9px 12px}.main{padding:66px 10px 14px!important}.topbar{display:block!important}.topbar-logo{width:44px!important;height:44px!important}.topbar-title{align-items:flex-start!important}.topbar-title h1{font-size:1.16rem;margin-top:2px}.topbar-title p{font-size:.84rem;-webkit-line-clamp:3}.topbar .pill{display:inline-flex;margin-top:10px}.card{border-radius:16px;padding:12px}.card-head{display:grid!important;grid-template-columns:1fr!important}.card-head .btn,.card-head .actions{width:100%;justify-content:center}.metrics{grid-template-columns:1fr!important}.metric{display:flex;justify-content:space-between;align-items:center;gap:12px}.metric strong{font-size:1.45rem;margin-top:0}.grid{gap:12px}.form-grid,.form-grid.compact{grid-template-columns:1fr!important}.span2,.form-grid.compact .span2{grid-column:span 1!important}.profile-card .info-grid,.info-grid{grid-template-columns:1fr!important}.filters{grid-template-columns:1fr}.actions{display:grid;grid-template-columns:1fr;width:100%}.actions .btn,.actions button.btn{width:100%;justify-content:center}.inline{display:grid;gap:8px}.inline button{margin-right:0;width:100%;justify-content:center}.btn.small{min-height:38px}.login-shell{padding:14px;align-items:flex-start;min-height:100dvh}.login-card{padding:22px 18px;border-radius:22px;margin-top:20px}.login-brand{margin-bottom:14px}.login-card h1{font-size:1.24rem}.login-card p{font-size:.9rem}.login-card .notice{font-size:.78rem}.statement{padding:12px}.statement-brand{display:block!important}.statement-brand img{width:100%;max-width:360px;margin-bottom:10px}
  table.responsive-table{display:block;min-width:0!important;white-space:normal!important;border-collapse:separate;border-spacing:0;width:100%}table.responsive-table thead{display:none}table.responsive-table tbody{display:grid;gap:10px}table.responsive-table tr{display:block;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(15,35,65,.05);overflow:hidden}table.responsive-table tr:hover td{background:#fff}table.responsive-table td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 11px;text-align:right;white-space:normal!important;min-width:0;overflow-wrap:anywhere}table.responsive-table td::before{content:attr(data-label);font-size:.72rem;text-transform:none;letter-spacing:.01em;color:var(--muted);font-weight:800;text-align:left;flex:0 0 44%;max-width:44%;line-height:1.35}table.responsive-table td:last-child{border-bottom:0}table.responsive-table .empty{display:block;text-align:center}table.responsive-table .empty::before{display:none}.detail-row,.mobile-detail-row{border-style:dashed!important;background:#f8fafc!important}.detail-row td,.mobile-detail-row td{display:block!important;text-align:left!important}.detail-row td::before,.mobile-detail-row td::before{display:none!important}.tag,.status,.pill{white-space:normal}.calc-box{font-size:.92rem}
}

@media (max-width:420px){.sidebar{width:92vw!important}.brand-icon{width:46px;height:46px}.topbar-title{gap:10px}.card{padding:11px}.btn,button.btn,input,select,textarea{font-size:15px}.login-card{padding:20px 15px}.metric{display:block}.metric strong{margin-top:5px}.responsive-table td{display:block;text-align:left}.responsive-table td::before{display:block;max-width:none;margin-bottom:4px}}

@media print{.mobile-menu-toggle,.sidebar-backdrop{display:none!important}.responsive-table thead{display:table-header-group!important}.responsive-table tbody{display:table-row-group!important}.responsive-table tr{display:table-row!important;box-shadow:none!important;border:0!important}.responsive-table td{display:table-cell!important;text-align:left!important}.responsive-table td::before{content:none!important}.statement-brand{display:flex!important}}
/* Phase 005 presentation-aligned loan and return computation features */
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.mini-cards .card{margin-bottom:0}.highlight-box{background:#f0fdfa;border-color:#99f6e4}.decision-box{background:#fffbeb;border-color:#fcd34d}.soft-card{background:linear-gradient(135deg,#ecfdf5,#eff6ff)}.big-balance{font-weight:900;font-size:1.1rem;color:#0f766e}.card h2+ .form-grid,.form-stack h2{margin-top:14px}
@media (max-width:1050px){.grid.three{grid-template-columns:1fr!important}}
@media print{.soft-card{background:#fff!important}.highlight-box,.decision-box{background:#fff!important;border:1px solid #bbb!important}}
/* Phase 006 variable contribution policy support */
.compact-list{margin:8px 0 0 18px;padding:0;color:#475569;font-size:.9rem}.compact-list li{margin:4px 0}.mini-cards .card .big-balance{font-size:1.35rem}


/* Phase 014 ACL and guide-inspired layout refinements */
body{background:linear-gradient(180deg,#f8fafc 0%,#eef6f2 100%)}
.sidebar{background:linear-gradient(180deg,#07192d 0%,#0b3b2c 100%);border-right:1px solid rgba(255,255,255,.08)}
.desktop-sidebar-toggle-btn{display:none;margin-left:auto;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#e5edf7;border-radius:10px;padding:7px 10px;font-weight:800;cursor:pointer}.nav-section-title{margin:14px 8px 5px;color:#9fb3c8;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900}.sidebar nav a{position:relative}.sidebar nav a:hover{background:rgba(255,255,255,.11)}.sidebar nav a:focus{outline:2px solid rgba(212,175,55,.65);outline-offset:2px}.topbar{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:24px;padding:14px 16px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.app-footer{margin:24px 0 0;color:var(--muted);font-size:.78rem;text-align:center}.acl-group h3{margin-top:0;color:#0f3b2c}.check-row{display:flex!important;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}.check-row input{width:18px;height:18px;min-height:auto;margin-top:2px}.check-row span{display:grid;gap:2px}.check-row small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.acl-form .card{box-shadow:0 10px 28px rgba(15,35,65,.06)}
@media (min-width:1051px){.desktop-sidebar-toggle-btn{display:block}.sidebar-collapsed .sidebar{transform:translateX(-100%)}.sidebar-collapsed .main{margin-left:0}.sidebar,.main{transition:margin-left .22s ease,transform .22s ease}.sidebar-collapsed:before{content:'☰';position:fixed;left:12px;top:12px;z-index:50;background:#0b3b2c;color:#fff;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(15,35,65,.2)}}
@media print{.app-footer{display:none}.topbar{box-shadow:none;border:0}}



/* Phase 018 responsive layout fix: laptop/desktop/tablet/mobile menu behavior */
.desktop-menu-reopen{
  display:none;
  position:fixed;
  left:14px;
  top:14px;
  z-index:60;
  width:46px;
  height:46px;
  border:0;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:#0b3b2c;
  color:#fff;
  font-size:1.25rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(15,35,65,.25);
}
.desktop-menu-reopen:focus{outline:3px solid rgba(212,175,55,.70);outline-offset:3px}

/* Desktop and laptop: sidebar is fixed, content gets correct margin, mobile menu is hidden. */
@media (min-width:1181px){
  .mobile-menu-toggle{display:none!important}
  .sidebar-backdrop{display:none!important}
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:278px!important;
    height:100vh!important;
    transform:translateX(0)!important;
    padding:22px 18px!important;
    overflow-y:auto!important;
    z-index:35!important;
  }
  .main{margin-left:278px!important;padding:26px!important}
  .main-login{margin-left:0!important;padding:0!important}
  .desktop-sidebar-toggle-btn{display:block!important}
  body.sidebar-collapsed .sidebar{transform:translateX(-105%)!important}
  body.sidebar-collapsed .main{margin-left:0!important;padding-left:72px!important}
  body.sidebar-collapsed .desktop-menu-reopen{display:flex!important}
  body:not(.sidebar-collapsed) .desktop-menu-reopen{display:none!important}
  body.sidebar-collapsed:before{display:none!important;content:none!important}
  .topbar{display:flex!important}
}

/* Tablet and small laptop widths: use off-canvas menu with normal Menu button. */
@media (max-width:1180px){
  body.sidebar-collapsed{overflow:auto}
  body.sidebar-collapsed .main{margin-left:0!important}
  .desktop-menu-reopen,.desktop-sidebar-toggle-btn{display:none!important}
  .mobile-menu-toggle{display:inline-flex!important}
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(86vw,330px)!important;
    max-width:330px!important;
    height:100vh!important;
    padding:72px 18px 18px!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    z-index:35!important;
    overflow-y:auto!important;
    box-shadow:20px 0 60px rgba(2,6,23,.30)!important;
  }
  .sidebar.is-open{transform:translateX(0)!important}
  .main{margin-left:0!important;padding:72px 16px 18px!important;max-width:none!important}
  .main-login{padding:0!important}
  .topbar{display:flex!important;align-items:flex-start;gap:12px}
  .topbar-title{min-width:0}
  .topbar-title h1{font-size:1.32rem;line-height:1.2}
  .grid.two{grid-template-columns:1fr!important}
  .grid.three{grid-template-columns:1fr!important}
  .form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Mobile phones: single-column cards and tables become readable cards. */
@media (max-width:760px){
  .metrics{grid-template-columns:1fr!important}
  .form-grid,.form-grid.compact{grid-template-columns:1fr!important}
  .span2,.form-grid.compact .span2{grid-column:span 1!important}
  .topbar{display:block!important}
  .topbar-title h1{font-size:1.15rem}
  .topbar-title p{font-size:.84rem}
  .pill{margin-top:10px}
  .card{padding:12px;border-radius:16px}
}

/* Very small devices */
@media (max-width:420px){
  .sidebar{width:92vw!important}
  .main{padding-left:10px!important;padding-right:10px!important}
}




/* Phase 020: desktop sidebar hide/open behavior matched to phase335 guide */
.visually-hidden{
  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;
}
.desktop-menu-reopen{display:none!important}
.desktop-sidebar-reveal{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:1042;
  display:none!important;
  align-items:center;
  justify-content:center;
  width:20px;
  min-height:96px;
  padding:0;
  border:none;
  border-radius:0 14px 14px 0;
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  color:#fff;
  box-shadow:0 12px 28px rgba(16,109,111,.20);
  opacity:.92;
  cursor:pointer;
  transition:width .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.desktop-sidebar-reveal:hover,
.desktop-sidebar-reveal:focus-visible{
  width:28px;
  opacity:1;
  box-shadow:0 14px 30px rgba(16,109,111,.26);
}
.desktop-sidebar-reveal-icon{
  font-size:1rem;
  line-height:1;
}

/* Match the guide: desktop starts at lg/992px. Hide the sidebar completely, then show a left-edge reveal tab. */
@media (min-width:992px){
  html.ko-sidebar-collapsed .sidebar{
    display:none!important;
  }
  html.ko-sidebar-collapsed .main{
    margin-left:0!important;
    padding-left:26px!important;
    max-width:none!important;
  }
  html.ko-sidebar-collapsed .desktop-sidebar-reveal{
    display:inline-flex!important;
  }
  html.ko-sidebar-collapsed body:before,
  body.sidebar-collapsed:before{
    display:none!important;
    content:none!important;
  }
  .desktop-sidebar-toggle-btn{
    display:block!important;
  }
}

/* Keep mobile/tablet menu as off-canvas, not the desktop reveal tab. */
@media (max-width:991px){
  .desktop-sidebar-reveal,
  .desktop-sidebar-toggle-btn{
    display:none!important;
  }
  html.ko-sidebar-collapsed .sidebar{
    display:flex!important;
  }
  html.ko-sidebar-collapsed .main{
    margin-left:0!important;
  }
}




/* Final production cleanup and performance helpers */
img{max-width:100%}
.card,.topbar,.login-card{contain:layout paint}
.sidebar{will-change:transform}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

.field-required-mark{display:inline-block;margin-top:4px;color:#b91c1c;font-weight:700;font-size:.75rem}.acl-group table input[type=checkbox]{width:18px;height:18px;min-height:auto}


/* Phase 003: CRM-style reliable hide/show menu hotfix for desktop, laptop, tablet, and mobile */
body.sidebar-collapsed:before{
  display:none!important;
  content:none!important;
  pointer-events:none!important;
}
@media (min-width:1181px){
  .mobile-menu-toggle,
  .sidebar-backdrop{
    display:none!important;
  }
  .sidebar{
    display:flex!important;
    transform:translateX(0)!important;
  }
  html.ko-sidebar-collapsed .sidebar{
    display:none!important;
  }
  html.ko-sidebar-collapsed .main{
    margin-left:0!important;
    padding-left:26px!important;
    max-width:none!important;
  }
  html.ko-sidebar-collapsed .desktop-sidebar-reveal{
    display:inline-flex!important;
    pointer-events:auto!important;
  }
  html:not(.ko-sidebar-collapsed) .desktop-sidebar-reveal{
    display:none!important;
  }
  .desktop-sidebar-toggle-btn{
    display:block!important;
    pointer-events:auto!important;
  }
}
@media (max-width:1180px){
  body.sidebar-collapsed:before{
    display:none!important;
    content:none!important;
  }
  html.ko-sidebar-collapsed .sidebar{
    display:flex!important;
    transform:translateX(-105%)!important;
  }
  html.ko-sidebar-collapsed .sidebar.is-open,
  .sidebar.is-open{
    display:flex!important;
    transform:translateX(0)!important;
  }
  html.ko-sidebar-collapsed .main{
    margin-left:0!important;
    padding-left:16px!important;
  }
  .desktop-sidebar-reveal,
  .desktop-sidebar-toggle-btn{
    display:none!important;
  }
  .mobile-menu-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    z-index:1050!important;
    pointer-events:auto!important;
    border:1px solid rgba(255,255,255,.24)!important;
    background:#0b3b2c!important;
    color:#fff!important;
    box-shadow:0 14px 34px rgba(15,35,65,.25)!important;
  }
  .sidebar-backdrop{
    z-index:1040!important;
  }
  .sidebar{
    z-index:1045!important;
  }
}
@media (max-width:760px){
  html.ko-sidebar-collapsed .main{
    padding-left:10px!important;
  }
  .mobile-menu-toggle{
    min-width:44px!important;
  }
}

/* Phase 005: professional spacing, settings layout, and whole-portal visual polish */
:root{
  --ko-radius-lg:24px;
  --ko-radius-md:18px;
  --ko-focus:0 0 0 4px rgba(15,118,110,.12);
  --ko-soft-border:#dbe7ef;
}
body{line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.main{max-width:1720px;}
.topbar{margin-bottom:24px;}
.topbar h1{letter-spacing:-.03em;line-height:1.15;}
.topbar p{line-height:1.5;}
.card{
  padding:22px;
  border-color:var(--ko-soft-border);
  border-radius:var(--ko-radius-lg);
  box-shadow:0 14px 38px rgba(15,35,65,.075);
}
.card-head{margin-bottom:18px;}
.card-head h2,.card h2{letter-spacing:-.02em;color:#0b1f35;line-height:1.25;}
.card-head p,.card p{line-height:1.6;}
.grid{gap:20px;}
.grid.two{gap:22px;}
.metrics{gap:20px;}
.metric{position:relative;overflow:hidden;min-height:124px;background:linear-gradient(180deg,#fff,#fbfefe);}
.metric:after{content:"";position:absolute;right:-38px;top:-38px;width:118px;height:118px;border-radius:999px;background:rgba(15,118,110,.07);pointer-events:none;}
.metric span{font-weight:800;letter-spacing:.01em;}
.metric strong{letter-spacing:-.04em;position:relative;z-index:1;}
.soft-card{background:linear-gradient(135deg,#f0fdfa,#f8fbff)!important;border-color:#ccefe7!important;}
.decision-box{background:linear-gradient(135deg,#fffbeb,#fff7ed)!important;border-color:#fde68a!important;}
.highlight-box{background:linear-gradient(135deg,#effdf7,#ecfeff)!important;border-color:#b7f7df!important;}
.btn,button.btn{
  min-height:42px;
  padding:10px 15px;
  border-radius:13px;
  box-shadow:0 4px 12px rgba(15,35,65,.035);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover,button.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,35,65,.08);}
.btn.primary{box-shadow:0 10px 22px rgba(15,118,110,.18);}
.btn.small{min-height:34px;padding:7px 11px;border-radius:10px;}
.form-stack>.btn{justify-self:start;align-self:center;}
.form-grid{gap:18px;}
.form-grid.compact{gap:16px;}
label{gap:8px;line-height:1.35;}
input,select,textarea{
  border-color:#d1dce8;
  border-radius:14px;
  padding:11px 12px;
  min-height:44px;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
textarea{line-height:1.55;min-height:112px;}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(15,118,110,.72);
  box-shadow:var(--ko-focus);
}
.notice{line-height:1.6;border-radius:18px;background:#f8fbfc;border-color:#cbdbe6;}
table{border-collapse:separate;border-spacing:0;}
th:first-child{border-top-left-radius:14px;}th:last-child{border-top-right-radius:14px;}
th{background:#f3f7fb;color:#536a85;}
td{line-height:1.45;}
tr:last-child td{border-bottom-color:transparent;}
.filters{padding:14px;border:1px solid var(--line);background:#fbfdff;border-radius:18px;}
.actions{row-gap:10px;}
.info-grid{gap:14px;}
.info-grid div{border-radius:18px;background:#fbfdff;}
.login-card{box-shadow:0 28px 70px rgba(2,6,23,.24);}

.settings-page{max-width:1320px;margin:0 auto 28px;}
.settings-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#ffffff 0%,#eefcf8 100%);border-color:#cdeee6;position:relative;overflow:hidden;}
.settings-hero:after{content:"";position:absolute;right:-58px;top:-78px;width:210px;height:210px;border-radius:999px;background:rgba(15,118,110,.09);pointer-events:none;}
.settings-hero h2{font-size:1.55rem;margin:3px 0 6px;color:#0b1f35;}
.eyebrow{display:inline-flex;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:var(--primary2);}
.settings-form{display:grid;gap:18px;}
.settings-section{margin-bottom:0;}
.settings-section .card-head{border-bottom:1px solid #edf2f7;padding-bottom:14px;}
.settings-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.settings-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.settings-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.settings-grid-with-textarea{grid-template-columns:2fr 1fr;align-items:start;}
.settings-grid-with-textarea .span2{grid-column:span 1;}
.settings-notice{margin:16px 0 0;}
.settings-actions{position:sticky;bottom:14px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:4px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-color:#cfe4dc;box-shadow:0 18px 48px rgba(15,35,65,.12);}
.settings-actions p{margin:3px 0 0;}
.settings-save-btn{width:auto!important;min-width:150px;justify-content:center;white-space:nowrap;}

@media (max-width:1180px){
  .main{max-width:none;}
  .card{padding:18px;border-radius:20px;}
  .settings-page{max-width:none;}
  .settings-grid-3,.settings-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .settings-grid-with-textarea{grid-template-columns:1fr!important;}
}
@media (max-width:760px){
  .card{padding:16px;border-radius:18px;}
  .filters{padding:12px;}
  .settings-hero h2{font-size:1.28rem;}
  .settings-grid-2,.settings-grid-3,.settings-grid-4{grid-template-columns:1fr!important;}
  .settings-actions{position:static;display:grid;grid-template-columns:1fr;}
  .settings-save-btn{width:100%!important;}
  .form-stack>.btn{justify-self:stretch;justify-content:center;}
}
@media print{
  .settings-actions{position:static;box-shadow:none;}
  .settings-save-btn{display:none!important;}
}

/* Phase 006: production-actual reports layout polish */
.report-hero{background:linear-gradient(135deg,#ffffff 0%,#f0fdfa 55%,#eef6ff 100%)}
.report-hero .small{margin:8px 0 0;color:#64748b;font-size:.82rem;font-weight:700}
.report-kpis{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:18px}
.report-kpis .metric{min-height:136px;display:flex;flex-direction:column;justify-content:space-between}
.report-kpis .metric small{color:#64748b;line-height:1.35}.report-kpis .metric strong{font-size:1.8rem;color:#09253f}.table-scroll{border-radius:16px;border:1px solid var(--line);overflow:auto;background:#fff}.table-scroll table{margin:0}.table-scroll th:first-child,.table-scroll td:first-child{padding-left:14px}.table-scroll th:last-child,.table-scroll td:last-child{padding-right:14px}.tag{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;background:#ecfdf5;color:#0f766e;font-weight:900;border:1px solid #bbf7d0}.small{font-size:.84rem;color:#64748b}.status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#334155;font-weight:800;border:1px solid #e2e8f0}
@media (max-width:1180px){.report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}.report-kpis .metric{min-height:auto}}
@media (max-width:760px){.report-kpis{grid-template-columns:1fr!important}.report-hero .actions{width:100%;display:grid;grid-template-columns:1fr}.report-hero .actions .btn,.report-hero .actions button.btn{width:100%;justify-content:center}}
@media print{.report-hero{background:#fff!important}.report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}.table-scroll{overflow:visible;border:0}.status,.tag{border:0;background:transparent;color:#111;padding:0}.report-hero .small{color:#111}}

/* Phase 007: red asterisk required markers and screen-friendly full-width forms */
.form-page-card{
  width:100%;
  max-width:none!important;
  margin-left:0;
  margin-right:0;
}
form.form-grid,
form.form-stack,
form.settings-form,
form.acl-form,
form.filters{
  width:100%;
  max-width:none;
}
form.form-grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  align-items:start;
}
form.form-grid.compact{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
}
form.form-grid > .actions,
form.form-grid > .notice,
form.form-grid > .card,
form.form-grid > .soft-card,
form.form-grid > .decision-box{
  grid-column:1 / -1!important;
}
form.form-grid > label,
form.form-stack > label,
.settings-form label,
.filters label{
  min-width:0;
}
.form-label-text{
  display:inline-flex;
  align-items:center;
  gap:2px;
  width:fit-content;
  max-width:100%;
  color:#26374d;
  font-weight:800;
}
.required-asterisk{
  display:inline-flex;
  color:#b91c1c;
  font-size:1.05em;
  font-weight:900;
  line-height:1;
  margin-left:4px;
  vertical-align:baseline;
}
.field-required-mark{display:none!important;}
.field-is-required input,
.field-is-required select,
.field-is-required textarea{
  border-color:#d1dce8;
}
.field-is-required input:focus,
.field-is-required select:focus,
.field-is-required textarea:focus{
  border-color:rgba(15,118,110,.72);
}
.form-stack .actions,
form.form-stack > button.btn{
  justify-self:start;
}
@media (min-width:1400px){
  form.form-grid:not(.compact){grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  form.form-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (min-width:992px) and (max-width:1399px){
  form.form-grid:not(.compact){grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  form.form-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width:760px){
  form.form-grid,
  form.form-grid.compact{grid-template-columns:1fr!important;}
  form.form-grid > .span2,
  form.form-grid.compact > .span2{grid-column:1 / -1!important;}
  .form-stack .actions,
  form.form-stack > button.btn{justify-self:stretch;justify-content:center;}
}

/* Phase 008: live actual calculator layout */
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:760px){.grid.four{grid-template-columns:1fr!important}}

/* Phase 009 Brevo notifications and forgot-password polish */
.auth-links{display:flex;justify-content:center;gap:10px;margin-top:8px;font-weight:800}.auth-links a{color:var(--primary);text-decoration:none}.auth-links a:hover{text-decoration:underline}.auth-card .notice{margin:4px 0 0}.field-help{color:var(--muted);font-weight:600;font-size:.78rem;line-height:1.35}.settings-clear-key{align-self:end;border:1px solid var(--line);background:#f8fafc;border-radius:14px;padding:10px 12px;min-height:46px}.settings-section .tag{align-self:flex-start}.settings-form input[type="password"]{letter-spacing:.03em}@media (max-width:760px){.settings-clear-key{align-self:stretch}.auth-links{font-size:.92rem}}

/* Phase 010: Telegram bot notification settings */
.settings-action-buttons{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.notification-toggle-grid{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#f8fafc}
.notification-toggle-grid .check{font-weight:800;color:#334155}
.notification-toggle-grid input[type="checkbox"]{width:18px;height:18px;min-height:auto}
@media (max-width:760px){.settings-action-buttons{display:grid;grid-template-columns:1fr;width:100%}.settings-action-buttons .btn{width:100%!important;justify-content:center}}


/* Phase 011: self-service user settings */
.account-settings-page .card-head{margin-bottom:18px;}
.account-settings-form{gap:20px!important;}
.account-section{margin-bottom:0!important;}
.account-section h3{margin:0 0 6px;font-size:1.08rem;color:#0f172a;}
.account-section .muted{margin:0 0 14px;}
.locked-info-grid{margin-top:10px;}
.locked-info-grid div{background:#f8fafc;border-style:solid;}
.nested-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.account-settings-actions{justify-content:flex-start;padding-top:2px;}
@media (max-width:760px){.account-settings-actions{display:grid;grid-template-columns:1fr;width:100%;}.account-settings-actions .btn{width:100%;justify-content:center;}.nested-form-grid{grid-template-columns:1fr;}}

/* Phase 014: full Telegram + Brevo notification matrix */
.notification-matrix-section .card-head{align-items:flex-start;gap:16px;}
.notification-matrix-toolbar{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);background:#f8fafc;border-radius:16px;}
.notification-matrix-toolbar p{margin:0;}
.notification-matrix-wrap{border:1px solid var(--line);border-radius:18px;overflow:auto;background:#fff;}
.notification-matrix{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;}
.notification-matrix th{position:sticky;top:0;z-index:1;background:#0f766e;color:#fff;text-align:left;padding:13px 14px;font-size:.86rem;letter-spacing:.01em;text-transform:none;}
.notification-matrix td{padding:13px 14px;border-bottom:1px solid #e5e7eb;vertical-align:middle;}
.notification-matrix tbody tr:hover:not(.matrix-group-row){background:#f8fafc;}
.notification-matrix .matrix-group-row td{background:#ecfdf5;color:#064e3b;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;border-bottom:1px solid #bbf7d0;}
.matrix-check{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:800;color:#334155;white-space:nowrap;}
.matrix-check input[type="checkbox"]{width:18px;height:18px;min-height:auto;accent-color:#0f766e;}
@media (max-width:900px){.notification-matrix{min-width:720px}.notification-matrix th,.notification-matrix td{padding:11px 12px}.notification-matrix-section .card-head{display:block}.notification-matrix-section .tag{display:inline-flex;margin-top:10px}}
@media (max-width:760px){.notification-matrix-wrap{border-radius:14px}.notification-matrix{min-width:680px}.notification-matrix-toolbar{padding:12px}.settings-actions{gap:16px}}


/* Phase 015: CRM-style searchable dropdowns across the portal */
.ko-native-select-hidden{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
}
.ko-select-wrap{
  position:relative;
  width:100%;
  min-width:0;
  color:#0f172a;
  font-weight:500;
  z-index:1;
}
.ko-select-wrap.open{z-index:90;}
.ko-select-wrap.is-disabled{opacity:.72;}
.ko-select-trigger{
  width:100%;
  min-height:44px;
  border:1px solid #d1dce8;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  color:#0f172a;
  font:inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,35,65,.035);
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.ko-select-trigger:hover{border-color:#b7c7d8;background:#fff;}
.ko-select-trigger:focus,.ko-select-wrap.open .ko-select-trigger{
  outline:none;
  border-color:rgba(15,118,110,.72);
  box-shadow:var(--ko-focus);
}
.ko-select-trigger.has-error{border-color:#b91c1c;box-shadow:0 0 0 4px rgba(185,28,28,.12);}
.ko-select-trigger:disabled{cursor:not-allowed;background:#f8fafc;color:#64748b;box-shadow:none;}
.ko-select-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.ko-select-trigger.is-empty .ko-select-label{color:#64748b;}
.ko-select-arrow{flex:0 0 auto;color:#64748b;font-weight:900;font-size:1rem;line-height:1;}
.ko-select-panel{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid #d1dce8;
  border-radius:16px;
  box-shadow:0 20px 48px rgba(15,35,65,.18);
  padding:9px;
  max-height:320px;
  overflow:hidden;
}
.ko-select-wrap.open .ko-select-panel{display:block;}
.ko-select-search{
  min-height:40px;
  height:40px;
  border-radius:12px;
  margin-bottom:8px;
  padding:8px 11px;
  background:#f8fafc;
}
.ko-select-list{max-height:238px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;}
.ko-select-option{
  width:100%;
  display:block;
  text-align:left;
  border:0;
  background:#fff;
  color:#172033;
  border-radius:12px;
  padding:10px 11px;
  cursor:pointer;
  font:inherit;
  line-height:1.35;
}
.ko-select-option:hover,.ko-select-option.selected{background:#ecfdf5;color:#0f766e;}
.ko-select-option:disabled{opacity:.48;cursor:not-allowed;}
.ko-select-empty{display:none;padding:13px 10px;text-align:center;color:#64748b;font-size:.86rem;font-weight:700;}
.filters .ko-select-wrap{min-width:170px;flex:1;}
.filters .ko-select-trigger{min-height:42px;}
.settings-form .ko-select-wrap,.form-grid .ko-select-wrap,.form-stack .ko-select-wrap{width:100%;}
html[dir="rtl"] .ko-select-trigger,html[dir="rtl"] .ko-select-option{text-align:right;}
@media (max-width:760px){
  .ko-select-panel{
    position:fixed;
    left:12px;
    right:12px;
    top:auto;
    bottom:16px;
    max-height:66vh;
    border-radius:18px;
    z-index:9999;
  }
  .ko-select-list{max-height:48vh;}
  .filters .ko-select-wrap{min-width:0;width:100%;}
}
@media print{
  .ko-select-wrap{display:none!important;}
  .ko-native-select-hidden{position:static!important;opacity:1!important;clip:auto!important;clip-path:none!important;width:auto!important;height:auto!important;pointer-events:auto!important;overflow:visible!important;}
}


/* Phase 016: table column sentence/title case */
th, table.responsive-table td::before, .notification-matrix th { text-transform: none; }


/* Phase 018: smoother rendering and interaction performance. */
.sidebar, .main, .topbar, .card, .metrics, .table-wrap, .ko-select-panel {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.card, .table-wrap, .metrics, .section-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}
.ko-select-list {
  overscroll-behavior: contain;
}
button, .btn, a, input, select, textarea, .ko-select-trigger {
  touch-action: manipulation;
}
@media (prefers-reduced-motion: no-preference) {
  .sidebar, .main, .desktop-sidebar-reveal, .ko-select-panel {
    will-change: transform, opacity;
  }
}