:root{--red:#d60812;--red2:#a90007;--dark:#232529;--dark2:#34373c;--silver:#bfc3c7;--bg:#f3f4f6;--card:#fff;--text:#232529;--muted:#6d7178;--line:#e2e4e7;--green:#168447;--amber:#b56a00;--blue:#1769aa;--shadow:0 14px 38px rgba(29,31,35,.09)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.muted{color:var(--muted)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 78% 12%,rgba(214,8,18,.28),transparent 27%),linear-gradient(135deg,#1d1f22,#4d5055)}.login-card{width:min(460px,100%);background:#fff;border-radius:28px;padding:34px;box-shadow:0 30px 80px #0007;border-top:6px solid var(--red)}.login-logo{width:min(310px,100%);display:block;margin:0 auto 12px}.eyebrow{text-align:center;color:var(--red);font-size:12px;font-weight:900;letter-spacing:.12em}.login-card h1{text-align:center;margin:8px 0}.login-card p{text-align:center}.login-card label,.form-grid label{display:flex;flex-direction:column;gap:7px;font-weight:700;margin:14px 0}.login-card input,.form-grid input,.form-grid select,.form-grid textarea,.toolbar input,.toolbar select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#fff}.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:800}.btn.primary{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff}.btn.secondary{background:var(--dark);color:#fff}.btn.success{background:var(--green);color:#fff}.btn.warning{background:#ffe6bd;color:#7b4400}.btn.danger{background:#ffe3e5;color:#a10008}.btn.ghost{background:#fff1;border:1px solid #fff3;color:#fff}.btn.soft{background:#eef0f2;color:var(--dark)}.wide{width:100%}.notice{padding:12px 14px;border-radius:12px;margin:14px 0}.notice.warning{background:#fff2d8;color:#794700}.app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{background:linear-gradient(180deg,var(--dark),#17181b);color:#fff;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;padding:8px 8px 20px;border-bottom:1px solid #fff2}.brand img{width:75px;background:white;border-radius:10px;padding:4px}.brand strong,.brand span{display:block}.brand span{font-size:12px;color:#c8cbd0;margin-top:3px}nav{padding:18px 0;display:grid;gap:6px}.nav-btn{display:flex;gap:11px;align-items:center;width:100%;border:0;border-radius:11px;background:transparent;color:#dfe1e4;padding:11px 13px;text-align:left}.nav-btn:hover,.nav-btn.active{background:linear-gradient(90deg,var(--red),#9e0006);color:#fff}.side-foot{margin-top:auto;display:grid;gap:10px}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;background:#fff1;color:#dfe1e4;font-size:12px}.main{min-width:0}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:13px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:5}.topbar h2{margin:0}.topbar p{margin:3px 0 0;font-size:13px}.icon-btn{border:0;background:#eef0f2;width:40px;height:40px;border-radius:10px;font-size:20px}.user-box{margin-left:auto;display:flex;align-items:center;gap:10px}.user-box span{display:block;font-size:12px;color:var(--muted);margin-top:2px}.avatar{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900}.content{padding:24px;max-width:1480px;margin:auto}.grid{display:grid;gap:18px}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.card h3{margin:0 0 14px}.stat{display:flex;justify-content:space-between;gap:12px}.stat strong{display:block;font-size:27px}.stat span{color:var(--muted);font-size:13px}.stat-icon{width:45px;height:45px;border-radius:14px;background:#ffe7e8;color:var(--red);display:grid;place-items:center;font-size:22px}.hero{background:linear-gradient(135deg,#25272b,#4b4e53);color:#fff;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:var(--red);right:-100px;top:-110px;opacity:.55}.hero>*{position:relative;z-index:1}.hero .muted{color:#d3d5d8}.attendance-clock{font-size:34px;font-weight:900;margin:10px 0}.status{display:inline-flex;border-radius:999px;padding:7px 11px;font-weight:800;font-size:12px}.status.pending,.status.draft{background:#fff0cd;color:#7c4a00}.status.approved,.status.published,.status.present{background:#e1f5e8;color:#126a37}.status.rejected,.status.revoked,.status.late{background:#ffe3e5;color:#9d0008}.status.closed{background:#e7e9ec}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.toolbar{display:flex;gap:10px;align-items:end;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}.toolbar .group{display:flex;gap:9px;flex-wrap:wrap}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}table{border-collapse:collapse;width:100%;min-width:760px}th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:top}th{background:#f2f3f5;color:#50545a;position:sticky;top:0}tr:last-child td{border-bottom:0}.empty{text-align:center;padding:36px;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.form-grid .full{grid-column:1/-1}.modal{border:0;border-radius:18px;padding:0;width:min(720px,calc(100% - 24px));box-shadow:0 30px 90px #0007}.modal::backdrop{background:#0008}.modal-card{padding:0}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}#modalBody{padding:20px}.toast{position:fixed;z-index:1000;right:20px;top:20px;max-width:420px;background:#24262a;color:#fff;border-left:5px solid var(--red);padding:14px 17px;border-radius:12px;box-shadow:0 14px 40px #0004}.loading{position:fixed;inset:0;background:#0008;z-index:999;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-weight:800}.spinner{width:30px;height:30px;border:4px solid #fff4;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.slip{border:1px solid var(--line);border-radius:16px;padding:22px}.slip-head{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid var(--dark);padding-bottom:14px}.slip-logo{width:200px}.slip-row{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:8px 0}.slip-total{font-size:19px;font-weight:900;background:#f2f3f5;padding:13px;border-radius:12px;margin-top:12px}.footnote{font-size:12px;color:var(--muted)}@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;z-index:20;transition:.2s}.sidebar.open{left:0}.grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding:16px}.topbar{padding:12px 14px}.user-box>div:last-child{display:none}}@media(max-width:620px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.topbar h2{font-size:18px}.login-card{padding:25px}.actions .btn{flex:1}.content{padding:12px}.card{padding:16px}}

/* v0.5.1 hotfix: hidden elements must never be displayed by component styles */
[hidden], .loading[hidden], .toast[hidden], #appView[hidden], #loginView[hidden]{display:none!important;}


/* v0.5.2 hotfix: sidebar menu scrolls, footer remains visible */
.sidebar{
  overflow:hidden;
}
.sidebar .brand{
  flex:0 0 auto;
}
.sidebar nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  padding:18px 4px 18px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.32) transparent;
}
.sidebar nav::-webkit-scrollbar{
  width:6px;
}
.sidebar nav::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);
  border-radius:999px;
}
.sidebar nav::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.42);
}
.side-foot{
  flex:0 0 auto;
  margin-top:0;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(23,24,27,0),#17181b 18%);
  position:relative;
  z-index:2;
}
.side-foot .badge{
  width:100%;
  justify-content:center;
}
#logoutBtn{
  min-height:44px;
}


/* v0.5.3 mobile app experience */
.nav-backdrop,
.mobile-nav,
.drawer-close{
  display:none;
}

@media(max-width:980px){
  html,body{
    min-height:100%;
    min-height:100dvh;
    overscroll-behavior-y:none;
  }
  body.drawer-open{
    overflow:hidden;
  }
  .app-shell{
    display:block;
    min-height:100vh;
    min-height:100dvh;
  }
  .sidebar{
    display:flex;
    position:fixed;
    inset:0 auto 0 0;
    left:0;
    width:min(86vw,320px);
    height:100vh;
    height:100dvh;
    padding:
      calc(14px + env(safe-area-inset-top))
      14px
      calc(14px + env(safe-area-inset-bottom));
    transform:translateX(-105%);
    transition:transform .24s cubic-bezier(.2,.8,.2,1);
    z-index:50;
    box-shadow:20px 0 55px rgba(0,0,0,.35);
  }
  .sidebar.open{
    left:0;
    transform:translateX(0);
  }
  .drawer-close{
    display:grid;
    place-items:center;
    margin-left:auto;
    flex:0 0 auto;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:25px;
    line-height:1;
  }
  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:45;
    background:rgba(13,15,18,.52);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  .nav-backdrop[hidden]{
    display:none!important;
  }
  .main{
    min-height:100vh;
    min-height:100dvh;
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }
  .topbar{
    min-height:68px;
    height:auto;
    padding:
      calc(9px + env(safe-area-inset-top))
      14px
      9px;
    gap:12px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 1px 12px rgba(24,26,30,.06);
  }
  .topbar h2{
    font-size:20px;
    line-height:1.15;
  }
  .topbar p{
    max-width:58vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .icon-btn{
    width:42px;
    height:42px;
    border-radius:14px;
  }
  .user-box{
    gap:0;
  }
  .avatar{
    width:40px;
    height:40px;
    box-shadow:0 6px 18px rgba(214,8,18,.23);
  }
  .content{
    width:100%;
    max-width:none;
    padding:15px 14px calc(28px + env(safe-area-inset-bottom));
  }
  .card{
    border-radius:22px;
    box-shadow:0 9px 27px rgba(29,31,35,.08);
  }
  .table-wrap{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    border-radius:16px;
    background:#fff;
  }
  table{
    min-width:680px;
  }
  .mobile-nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;
    z-index:40;
    left:10px;
    right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    min-height:64px;
    padding:6px;
    border:1px solid rgba(215,218,223,.94);
    border-radius:22px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 42px rgba(24,26,30,.2);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .mobile-nav-btn{
    min-width:0;
    border:0;
    border-radius:16px;
    background:transparent;
    color:#686d75;
    padding:6px 3px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:10px;
    font-weight:800;
    line-height:1.05;
  }
  .mobile-nav-btn .mobile-nav-icon{
    display:grid;
    place-items:center;
    min-height:23px;
    font-size:20px;
    line-height:1;
  }
  .mobile-nav-btn.active{
    color:var(--red);
    background:#fff0f1;
  }
  .mobile-nav-btn:active{
    transform:scale(.96);
  }
  .toast{
    top:auto;
    right:12px;
    left:12px;
    bottom:calc(84px + env(safe-area-inset-bottom));
    max-width:none;
    border-radius:16px;
  }
  .modal{
    width:100%;
    max-width:none;
    max-height:92vh;
    max-height:92dvh;
    margin:auto 0 0;
    border-radius:26px 26px 0 0;
  }
  .modal[open]{
    animation:sheetUp .22s ease-out;
  }
  .modal-head{
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
    padding:15px 16px;
  }
  #modalBody{
    max-height:calc(92dvh - 72px);
    overflow-y:auto;
    padding:16px 16px calc(22px + env(safe-area-inset-bottom));
  }
  @keyframes sheetUp{
    from{transform:translateY(18px);opacity:.65}
    to{transform:translateY(0);opacity:1}
  }
}

@media(max-width:620px){
  .login-shell{
    min-height:100vh;
    min-height:100dvh;
    padding:0;
    place-items:stretch;
    background:linear-gradient(160deg,#1b1d20,#303339 62%,#780006);
  }
  .login-card{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    border-radius:0;
    border-top:0;
    padding:
      calc(30px + env(safe-area-inset-top))
      24px
      calc(24px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:none;
    background:linear-gradient(180deg,rgba(255,255,255,.98),#fff);
  }
  .login-logo{
    width:min(270px,82vw);
    margin-bottom:16px;
  }
  .login-card h1{
    font-size:29px;
    margin:10px 0 4px;
  }
  .login-card input{
    min-height:52px;
    border-radius:16px;
    font-size:16px;
  }
  .login-card .btn{
    min-height:52px;
    border-radius:16px;
    font-size:16px;
  }
  .topbar p{
    display:none;
  }
  .content{
    padding:13px 12px 24px;
  }
  .grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .grid.cols-3,
  .grid.cols-2{
    grid-template-columns:1fr;
    gap:12px;
  }
  .card{
    padding:16px;
    border-radius:20px;
  }
  .stat{
    min-height:104px;
    align-items:flex-start;
  }
  .stat strong{
    font-size:22px;
    line-height:1.1;
    margin-top:6px;
  }
  .stat span{
    font-size:11px;
  }
  .stat-icon{
    width:40px;
    height:40px;
    border-radius:13px;
    flex:0 0 auto;
  }
  .hero{
    min-height:230px;
  }
  .hero:after{
    width:180px;
    height:180px;
    right:-80px;
    top:-75px;
  }
  .attendance-clock{
    font-size:32px;
  }
  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }
  .actions .btn{
    width:100%;
    min-height:48px;
    border-radius:15px;
  }
  .toolbar{
    align-items:stretch;
    gap:12px;
  }
  .toolbar>h3{
    width:100%;
    margin-bottom:0;
  }
  .toolbar .group{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .toolbar .group .btn{
    width:100%;
    min-height:44px;
    padding:10px 8px;
  }
  .form-grid label{
    margin:9px 0;
  }
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .toolbar input,
  .toolbar select{
    min-height:48px;
    border-radius:14px;
    font-size:16px;
  }
  .slip{
    padding:15px;
    border-radius:18px;
  }
  .slip-head{
    flex-direction:column;
  }
  .slip-logo{
    width:min(180px,70vw);
  }
}

@media(display-mode:standalone){
  .topbar{
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  .mobile-nav{
    bottom:calc(6px + env(safe-area-inset-bottom));
  }
}


/* v0.5.4 hotfix: mobile drawer must always be closable */
@media(max-width:980px){
  .sidebar .brand{
    position:relative;
    padding-right:54px;
  }
  .drawer-close{
    display:grid!important;
    position:absolute;
    top:calc(8px + env(safe-area-inset-top));
    right:8px;
    z-index:60;
    width:42px;
    height:42px;
    min-width:42px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:14px;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:30px;
    font-weight:500;
    line-height:1;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
    touch-action:manipulation;
  }
  .drawer-close:active{
    transform:scale(.94);
    background:rgba(214,8,18,.82);
  }
  .nav-backdrop{
    cursor:pointer;
    touch-action:manipulation;
  }
  .sidebar.open + .nav-backdrop:not([hidden]){
    display:block!important;
  }
}


/* v0.6.0 — Mobile redesign inspired by the TaQur app pattern */
.topbar-brand-btn{display:none;border:0;background:transparent;padding:0}.topbar-logo{display:block;width:82px;height:34px;object-fit:contain}.topbar-copy{min-width:0}.mobile-home{display:none}.mobile-nav{display:none!important}

@media(max-width:900px){
  body{background:#f5f6f8}
  .main{padding-bottom:0!important;min-height:100dvh}
  .topbar{
    min-height:64px;height:64px;padding:8px 12px;gap:9px;background:#fff;
    border-bottom:1px solid #eceef1;box-shadow:0 3px 14px rgba(25,27,31,.06)
  }
  .topbar-brand-btn{display:block;flex:0 0 auto}
  .topbar-logo{width:72px;height:32px}
  .topbar-copy{flex:1;overflow:hidden}
  .topbar h2{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar p{display:none}
  .menu-trigger{width:38px;height:38px;border-radius:12px;background:#f1f2f4;font-size:19px}
  .user-box{margin-left:0}.user-box>div:last-child{display:none}.avatar{width:36px;height:36px;font-size:14px}
  .content{padding:12px 11px 24px;max-width:none}
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr!important}
  .mobile-home{display:block}
  .mobile-welcome-card{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:18px;border-radius:22px;color:#fff;overflow:hidden;position:relative;
    background:linear-gradient(135deg,#25272b,#3c3f44 62%,#870006);box-shadow:0 14px 34px rgba(27,29,33,.17)
  }
  .mobile-welcome-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-62px;top:-72px;background:#d60812;opacity:.75}
  .mobile-welcome-card>div{position:relative;z-index:1}.welcome-kicker,.mobile-welcome-card strong,.mobile-welcome-card small{display:block}
  .welcome-kicker{font-size:12px;color:#d7d9dc;margin-bottom:4px}.mobile-welcome-card strong{font-size:18px;line-height:1.25}.mobile-welcome-card small{margin-top:5px;color:#d7d9dc}
  .mobile-time{text-align:right;min-width:72px}.mobile-time span{display:block;font-size:25px;font-weight:900}.mobile-time small{font-size:10px;letter-spacing:.12em}
  .app-menu-card{margin-top:12px;padding:16px 12px 12px;background:#fff;border:1px solid #e8eaed;border-radius:22px;box-shadow:0 8px 24px rgba(29,31,35,.07)}
  .app-section-head{display:flex;justify-content:space-between;align-items:center;padding:0 5px 12px}.app-section-head h3{font-size:16px;margin:0}.app-section-head p{font-size:11px;color:var(--muted);margin:3px 0 0}
  .mini-menu-btn{border:0;background:#fff0f1;color:var(--red);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800}
  .app-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px}
  .app-menu-tile{border:0;background:transparent;min-width:0;padding:5px 1px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#34373c;border-radius:15px;touch-action:manipulation}
  .app-menu-tile:active{background:#f5f6f8;transform:scale(.96)}
  .app-menu-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:17px;font-size:23px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
  .app-menu-label{font-size:10.5px;font-weight:750;line-height:1.15;text-align:center;min-height:24px;display:flex;align-items:flex-start;justify-content:center}
  .tone-red{background:#ffe7e9}.tone-blue{background:#e6f1ff}.tone-amber{background:#fff0d7}.tone-green{background:#e4f7ea}.tone-violet{background:#eee9ff}.tone-teal{background:#e2f7f5}.tone-slate{background:#eceff3}.tone-gold{background:#fff5c9}.tone-gray{background:#ececec}
  .dashboard-stats{margin-top:12px;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .dashboard-stats .card{min-height:102px;padding:14px;border-radius:18px;box-shadow:0 6px 18px rgba(29,31,35,.06)}
  .dashboard-stats .stat strong{font-size:20px}.dashboard-stats .stat span{font-size:10.5px}.dashboard-stats .stat-icon{width:36px;height:36px;border-radius:12px;font-size:17px}
  .desktop-hero{display:none}.dashboard-lower{margin-top:12px!important}.system-card{border-radius:20px;padding:16px}
  .attendance-layout{gap:12px}.attendance-main-card,.attendance-security-card,.attendance-history-card{border-radius:21px}
  .attendance-main-card .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.attendance-main-card .actions .btn{min-height:46px}.attendance-main-card #registerDeviceBtn{grid-column:1/-1}
  .attendance-clock{font-size:30px}.attendance-history-card{margin-top:12px!important}
  .toolbar{align-items:stretch}.toolbar .group{display:grid;grid-template-columns:1fr 1fr;width:100%}.toolbar .group .btn{width:100%}
  .form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.form-grid input,.form-grid select,.form-grid textarea{font-size:16px;min-height:48px}
  .card{padding:15px;border-radius:20px}
}

@media(max-width:760px){
  .table-wrap{overflow:visible;border:0;background:transparent}
  table.mobile-card-table{min-width:0;width:100%;display:block}
  table.mobile-card-table thead{display:none}
  table.mobile-card-table tbody{display:grid;gap:10px}
  table.mobile-card-table tr{display:block;background:#fff;border:1px solid #e5e7ea;border-radius:17px;padding:5px 12px;box-shadow:0 5px 16px rgba(29,31,35,.05)}
  table.mobile-card-table td{display:grid;grid-template-columns:minmax(88px,38%) 1fr;gap:10px;align-items:start;width:100%;padding:9px 0;border-bottom:1px solid #eef0f2;font-size:12px;overflow-wrap:anywhere}
  table.mobile-card-table td:last-child{border-bottom:0}
  table.mobile-card-table td:before{content:attr(data-label);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#7b8087;font-weight:800}
  table.mobile-card-table td[colspan]{display:block;text-align:center}
  table.mobile-card-table td[colspan]:before{display:none}
  table.mobile-card-table td .btn{margin:2px 2px 2px 0;min-height:38px}
}

@media(max-width:390px){
  .app-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-menu-label{font-size:11px}
}

@media(display-mode:standalone) and (max-width:900px){
  .topbar{padding-top:calc(8px + env(safe-area-inset-top));height:calc(64px + env(safe-area-inset-top))}
}