/* 0KE iOS visual language. Loaded after each page's local styles. */
:root{
  --primary:#0a84ff!important;
  --primary-dark:#0071e3!important;
  --primary-strong:#0071e3!important;
  --primary-light:#eaf4ff!important;
  --primary-lighter:#f3f8ff!important;
  --primary-bg:#eaf4ff!important;
  --bg:#f2f2f7!important;
  --bg-alt:#e5e5ea!important;
  --surface-muted:#f2f2f7!important;
  --card:#ffffff!important;
  --text:#1c1c1e!important;
  --text2:#3a3a3c!important;
  --text-secondary:#3a3a3c!important;
  --text3:#8e8e93!important;
  --text-muted:#8e8e93!important;
  --border:#d1d1d6!important;
  --border2:#e5e5ea!important;
  --card-border:rgba(60,60,67,.16)!important;
  --success:#34c759!important;
  --success-bg:#e9f8ed!important;
  --warning:#ff9f0a!important;
  --warning-bg:#fff5df!important;
  --danger:#ff3b30!important;
  --danger-bg:#fff0ef!important;
  --radius-sm:10px!important;
  --radius:14px!important;
  --radius-lg:18px!important;
  --radius-xl:22px!important;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif!important;
}
html{background:#f2f2f7;}
body,button,input,select,textarea{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif!important;
  letter-spacing:0!important;
}
body{
  color:#1c1c1e!important;
  background:linear-gradient(180deg,#f9fafc 0%,#f2f2f7 100%)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.app,.app-wrap{background:transparent!important;}
.card,.hcard,.block,.hero-card,.menu-btn,.role-item,.task-item,.row-item,.link,.li,.pc,.stat,.sb,.sr,.ov .box,.modal-box{
  border-color:rgba(60,60,67,.14)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
.card,.hcard,.block,.hero-card,.stat,.sb,.sr,.ov .box,.modal-box{background:#fff!important;}
.card:hover,.hcard:hover,.block:hover,.hero-card:hover,.menu-btn:hover,.role-item:hover,.task-item:hover,.row-item:hover,.link:hover,.li:hover,.pc:hover{
  transform:none!important;
  border-color:rgba(10,132,255,.52)!important;
  box-shadow:none!important;
}
.card::after,.card::before{display:none!important;}
.card-title,.hcard-hdr .tt,.head .h,.name,.hero-card .name{color:#1c1c1e!important;letter-spacing:0!important;}
.meta,.muted,.hcard-body,.task-item .tskd,.row-item .tskd,.head .t,.bag-time,.subtitle{color:#6e6e73!important;}
.input,.n-input,.row-item input[type="text"],.row-item input[type="number"],.row-item select,.hcard-ctrl select{
  border:1px solid #d1d1d6!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#1c1c1e!important;
  box-shadow:none!important;
}
.input:focus,.n-input:focus,.row-item input:focus,.row-item select:focus,.hcard-ctrl select:focus{
  border-color:rgba(10,132,255,.75)!important;
  box-shadow:0 0 0 4px rgba(10,132,255,.14)!important;
}
.btn,button[class*="btn"],.mini-btn,.back-btn{
  border-radius:12px!important;
  box-shadow:none!important;
  font-weight:600!important;
}
.btn.primary,button.primary,button[class*="primary"],.btn.p,.add-account{
  border-color:#0a84ff!important;
  background:#0a84ff!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(10,132,255,.18)!important;
}
.btn.primary:hover,button.primary:hover,button[class*="primary"]:hover,.btn.p:hover,.add-account:hover{
  border-color:#0071e3!important;
  background:#0071e3!important;
  box-shadow:0 9px 20px rgba(10,132,255,.23)!important;
  transform:none!important;
}
.btn.plain,.btn.s,.btn.secondary,.btn.sub,.btn.ghost,.back-btn{
  border-color:#d1d1d6!important;
  background:#fff!important;
  color:#0a84ff!important;
}
.btn.plain:hover,.btn.s:hover,.btn.secondary:hover,.btn.sub:hover,.btn.ghost:hover,.back-btn:hover{
  border-color:#a7cfff!important;
  background:#f3f8ff!important;
  color:#0071e3!important;
  transform:none!important;
}
.btn.run,.btn.success{background:#e9f8ed!important;border-color:#a8e0b4!important;color:#18843a!important;}
.btn.pause,.btn.danger{background:#fff0ef!important;border-color:#ffc4c0!important;color:#d92d25!important;}
.btn.run:hover,.btn.success:hover{background:#dff5e5!important;transform:none!important;}
.btn.pause:hover,.btn.danger:hover{background:#ffe6e4!important;transform:none!important;}
.tb-item,.tab-item,.ti,.fi{
  border-radius:11px!important;
  color:#6e6e73!important;
  font-weight:600!important;
}
#tb-nav,.tab{
  border-color:rgba(60,60,67,.13)!important;
  border-radius:15px!important;
  background:rgba(118,118,128,.11)!important;
  box-shadow:none!important;
}
.tb-item{border-color:transparent!important;background:transparent!important;box-shadow:none!important;}
.tb-item.active,.tab-item.on,.ti.on,.fi.on{
  border-color:#0a84ff!important;
  background:#0a84ff!important;
  color:#fff!important;
  box-shadow:none!important;
}
.tb-item:hover,.tab-item:hover:not(.on),.ti:hover:not(.on),.fi:hover:not(.on){
  background:rgba(255,255,255,.72)!important;
  color:#1c1c1e!important;
  transform:none!important;
}
#content .task-item,#content .row-item,.task-item,.row-item{
  border-color:rgba(60,60,67,.12)!important;
  background:#fff!important;
  box-shadow:none!important;
}
#content .task-item:hover,#content .row-item:hover,.task-item:hover,.row-item:hover{background:#f8fbff!important;}
#content .opt .row-item,.opt .row-item{background:#f2f2f7!important;}
.task-item .cb,.row-item .cb,.toggle-slider,.tg{background:#c7c7cc!important;border-color:#c7c7cc!important;}
.task-item .cb.on,.row-item .cb.on,.toggle-sw input:checked+.toggle-slider,.tg.on{background:#0a84ff!important;border-color:#0a84ff!important;}
.pill,.badge,.tag{border-radius:999px!important;}
.tag.primary,.tag.b{background:#eaf4ff!important;color:#0a84ff!important;}
.bottom-nav{
  border-color:rgba(60,60,67,.14)!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 -1px 0 rgba(60,60,67,.08)!important;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.bottom-nav .nav-item{color:#8e8e93!important;border-left:0!important;}
.bottom-nav .nav-item.active{color:#0a84ff!important;}
.bottom-nav .nav-item.active .nav-icon{filter:none!important;}
.modal-overlay,.ov,.search-modal,.role-modal-overlay{
  background:rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.modal-box,.role-modal-box,.ov .box{
  border-color:rgba(60,60,67,.14)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 18px 50px rgba(0,0,0,.16)!important;
}
.toast{
  border-color:rgba(255,255,255,.18)!important;
  border-radius:14px!important;
  background:rgba(28,28,30,.92)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
}
#app > .login-box,#login-page.login{
  width:min(390px,calc(100vw - 40px))!important;
  margin:0 auto!important;
  padding:76px 0 40px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-align:center!important;
}
#app > .login-box .logo,#login-page.login .logo{
  width:72px!important;
  height:72px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 auto 26px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:0!important;
  line-height:0!important;
}
#app > .login-box .logo img,#login-page.login .logo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 9px 12px rgba(14,64,116,.18));
}
#app > .login-box .subtitle,#login-page.login .sub{
  margin:0 0 28px!important;
  color:#6e6e73!important;
  font-size:16px!important;
}
#app > .login-box .input,#login-page.login .input{
  min-height:54px!important;
  margin-bottom:10px!important;
  padding:0 16px!important;
  border-radius:16px!important;
  text-align:center!important;
  font-size:16px!important;
}
#app > .login-box .btn.primary,#login-page.login .btn.p{
  min-height:54px!important;
  margin-bottom:10px!important;
  border-radius:16px!important;
  font-size:16px!important;
}
@media(max-width:520px){
  #app > .login-box,#login-page.login{width:calc(100vw - 40px)!important;padding-top:62px!important;}
  .app,.app-wrap{padding-left:12px!important;padding-right:12px!important;}
  .card,.hcard,.block,.hero-card{border-radius:16px!important;}
}

/* Preserve the task navigation's own blue-white hierarchy. */
.task-nav-card{
  background:#f3f7ff!important;
  border-color:#9dc5ff!important;
}
#tb-nav{
  background:transparent!important;
  border-color:transparent!important;
}
#tb-nav .tb-item{
  border-color:#e2e8f0!important;
  background:#fff!important;
  color:#1e293b!important;
  box-shadow:0 1px 3px rgba(0,0,0,.04)!important;
}
#tb-nav .tb-item.active{
  border-color:#aac9e2!important;
  background:#dff0ff!important;
  color:#406e96!important;
  transform:translateY(-2px)!important;
  box-shadow:0 6px 13px rgba(64,110,150,.16),inset 0 1px 0 rgba(255,255,255,.94)!important;
}
#tb-nav .tb-item.active:hover{
  background:#dff0ff!important;
  color:#406e96!important;
  transform:translateY(-3px)!important;
  box-shadow:0 9px 18px rgba(64,110,150,.23),inset 0 1px 0 rgba(255,255,255,.94)!important;
}
#tb-nav .tb-item:hover:not(.active){
  border-color:#cbd5e1!important;
  background:#f1f5f9!important;
  color:#1e293b!important;
  transform:translateY(-2px)!important;
  box-shadow:0 7px 14px rgba(31,41,55,.12)!important;
}

/* Shared interaction feedback for every tab family outside the task navigator. */
.tb-item,.tab-item,.ti,.fi{
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease!important;
}
.tb-item:hover:not(.active),.tab-item:hover:not(.on),.ti:hover:not(.on),.fi:hover:not(.on){
  transform:translateY(-2px)!important;
  box-shadow:0 7px 14px rgba(31,41,55,.12)!important;
}
.tb-item.active:hover,.tab-item.on:hover,.ti.on:hover,.fi.on:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 9px 18px rgba(10,132,255,.22)!important;
}

/* Club shop tabs keep visible color against the white modal surface. */
#cs-tabs .tb-item{
  border-width:1px!important;
  border-style:solid!important;
  color:#314158!important;
  box-shadow:0 3px 8px rgba(31,41,55,.06)!important;
}
#cs-tabs .tb-item:nth-child(1){background:#eaf5ff!important;border-color:#72b8ef!important;color:#27658f!important;}
#cs-tabs .tb-item:nth-child(2){background:#eaf8f0!important;border-color:#72c695!important;color:#287048!important;}
#cs-tabs .tb-item:nth-child(3){background:#fff5dc!important;border-color:#dfb757!important;color:#806019!important;}
#cs-tabs .tb-item:nth-child(4){background:#e9f8f7!important;border-color:#68c1bd!important;color:#286f6c!important;}
#cs-tabs .tb-item:hover:not(.active){
  filter:saturate(1.08)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 7px 14px rgba(31,41,55,.12)!important;
}
#cs-tabs .tb-item.active{
  background:#0a84ff!important;
  border-color:#006edb!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(10,132,255,.24)!important;
}
#cs-tabs .tb-item.active:hover{
  background:#0077e6!important;
  border-color:#0064c7!important;
  color:#fff!important;
}

/* Dream shop merchant tabs need clear boundaries on the white modal. */
#ds-tabs .tb-item{
  border-width:1px!important;
  border-style:solid!important;
  color:#314158!important;
  box-shadow:0 3px 8px rgba(31,41,55,.06)!important;
}
#ds-tabs .tb-item:nth-child(1){background:#eaf5ff!important;border-color:#72b8ef!important;color:#27658f!important;}
#ds-tabs .tb-item:nth-child(2){background:#eaf8f0!important;border-color:#72c695!important;color:#287048!important;}
#ds-tabs .tb-item:nth-child(3){background:#fff5dc!important;border-color:#dfb757!important;color:#806019!important;}
#ds-tabs .tb-item:hover:not(.active){
  filter:saturate(1.08)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 7px 14px rgba(31,41,55,.12)!important;
}
#ds-tabs .tb-item.active{
  background:#0a84ff!important;
  border-color:#006edb!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(10,132,255,.24)!important;
}
#ds-tabs .tb-item.active:hover{
  background:#0077e6!important;
  border-color:#0064c7!important;
  color:#fff!important;
}