body.delog{
  --app-bg:#2f6f73;
  --app-bg-soft:#3a7c80;
  --app-surface:#ffffff;
  --app-surface-2:#f7f9fb;
  --app-border:#d9dee3;
  --app-text:#0f172a;
  --app-muted:#5b6472;
  --app-primary:#3fa6a8;
  --app-primary-strong:#2f8f92;
  --app-shadow:0 10px 24px rgba(15,23,42,.10);
  --app-shadow-soft:0 6px 16px rgba(15,23,42,.08);
  --app-radius-xl:22px;
  --app-radius-lg:18px;
  --app-radius-md:14px;
  background:var(--app-bg) !important;
  color:var(--app-text) !important;
}

html, body.delog{
  background:var(--app-bg) !important;
}

body.delog .wrap{
  position:relative;
  z-index:1;
}

body.delog .shell,
body.delog .card,
body.delog .inner,
body.delog .pagePanel,
body.delog .panel,
body.delog .tile,
body.delog .kpi,
body.delog .closeBox,
body.delog .inboxBar,
body.delog .inboxItem,
body.delog .tableWrap,
body.delog .modal,
body.delog .modalOverlay .modal{
  background:var(--app-surface) !important;
  background-image:none !important;
  border-color:rgba(15,23,42,.08) !important;
  box-shadow:var(--app-shadow) !important;
}

body.delog .shell{
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:var(--app-radius-xl) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(8px) !important;
}

body.delog .card,
body.delog .inner,
body.delog .pagePanel,
body.delog .panel,
body.delog .tile,
body.delog .kpi,
body.delog .closeBox{
  border-radius:var(--app-radius-lg) !important;
}

body.delog .logoBox{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}

body.delog .logoBox img{
  max-width:min(100%, 460px) !important;
  height:auto !important;
}

body.delog h1,
body.delog h2,
body.delog h3,
body.delog .cardTitle,
body.delog .hTitle,
body.delog .tileTitle{
  color:var(--app-text) !important;
}

body.delog .sub,
body.delog .subline,
body.delog .hSub,
body.delog .small,
body.delog .smallHint,
body.delog .hint,
body.delog .muted,
body.delog label,
body.delog .label{
  color:var(--app-muted) !important;
}

body.delog .btn,
body.delog button.btn,
body.delog a.btn,
body.delog .tabBtn,
body.delog .tileBtn,
body.delog .modalClose{
  background:#ffffff !important;
  color:var(--app-text) !important;
  border:1px solid var(--app-border) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  transition:transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

body.delog .btn:hover,
body.delog .btn:focus-visible,
body.delog .tabBtn:hover,
body.delog .tabBtn:focus-visible,
body.delog .tileBtn:hover,
body.delog .tileBtn:focus-visible,
body.delog .modalClose:hover,
body.delog .modalClose:focus-visible{
  background:var(--app-primary) !important;
  color:#ffffff !important;
  border-color:var(--app-primary-strong) !important;
  box-shadow:0 12px 24px rgba(63,166,168,.18) !important;
  outline:none !important;
}

body.delog .btn.primary,
body.delog .btnPrimary,
body.delog .tabBtn.active,
body.delog .pill{
  background:var(--app-primary) !important;
  color:#ffffff !important;
  border-color:var(--app-primary-strong) !important;
  box-shadow:0 10px 22px rgba(63,166,168,.18) !important;
}

body.delog input,
body.delog select,
body.delog textarea,
body.delog .input,
body.delog .select{
  background:#ffffff !important;
  color:var(--app-text) !important;
  border:1px solid var(--app-border) !important;
  border-radius:14px !important;
  min-height:46px;
  box-shadow:none !important;
}

body.delog input:focus,
body.delog select:focus,
body.delog textarea:focus,
body.delog .input:focus,
body.delog .select:focus{
  border-color:rgba(63,166,168,.75) !important;
  box-shadow:0 0 0 3px rgba(63,166,168,.15) !important;
  outline:none !important;
}

body.delog .badge,
body.delog .tag,
body.delog .dlTag,
body.delog .inboxBadge,
body.delog .pill{
  border-radius:999px !important;
}

body.delog .table,
body.delog table{
  background:#ffffff !important;
}

body.delog .table thead th,
body.delog table thead th,
body.delog th{
  background:#eef4f5 !important;
  color:#234049 !important;
}

body.delog .tableWrap,
body.delog table,
body.delog .table{
  border-radius:14px !important;
}

body.delog .mobileCardList{
  display:grid;
  gap:14px;
}

body.delog .mCard,
body.delog .mobileCard{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:18px !important;
  box-shadow:var(--app-shadow-soft) !important;
}

@media (max-width: 900px){
  body.delog{
    padding:12px !important;
  }

  body.delog .wrap,
  body.delog .shell,
  body.delog .card,
  body.delog .inner,
  body.delog .pagePanel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body.delog .headRow,
  body.delog .rightHead,
  body.delog .topbar,
  body.delog .brand,
  body.delog .toolbar,
  body.delog .controls,
  body.delog .hRow,
  body.delog .btnRow,
  body.delog .split{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  body.delog .rightHead > *,
  body.delog .toolbar > *,
  body.delog .controls > *,
  body.delog .btnRow > *,
  body.delog .split > *{
    max-width:100%;
  }

  body.delog .btn,
  body.delog button.btn,
  body.delog a.btn{
    min-height:46px !important;
  }
}