:root{
  --theme-color:#6d4c41;
  --accent-color:#6d4c41;
  --bg-color:#f5f0e8;
  --card-color:#fffdf8;
  --text-color:#3f3328;
  --sub-color:#8a7768;
  --nav-color:#6d4c41;
}

body{
  font-family:'Shippori Mincho', serif;
  background:
    linear-gradient(
      180deg,
      #faf6ef 0%,
      #f1e8dc 100%
    );
  color:var(--text-color);
}

.hero{
  background:
    radial-gradient(
      circle at top,
      rgba(109,76,65,.10),
      transparent 64%
    );
}

#storeName{
  color:var(--text-color);
  letter-spacing:.12em;
  font-weight:600;
}

.sub,
.greeting-text,
#liveDate,
.staff-name-display{
  color:var(--sub-color);
}

.card,
.settings-card,
.summary-box,
.salary-main-card,
.salary-mini-card{
  background:rgba(255,253,248,.96);
  border:1px solid rgba(109,76,65,.14);
  box-shadow:
    0 10px 26px rgba(60,40,20,.08);
}

.status-box{
  background:rgba(109,76,65,.07);
  color:var(--text-color);
}

.action-btn{
  background:#f3eadf;
  color:var(--text-color);
  border:1px solid rgba(109,76,65,.12);
}

.action-btn.in{
  background:#7a5a45;
  color:#fff;
}

.action-btn.out{
  background:#5a4638;
  color:#fff;
}

.action-btn.break,
.action-btn.end{
  background:#e7d8c8;
  color:#4a372d;
}

.summary-head,
.salary-title,
.settings-section-title{
  color:var(--theme-color);
}

.summary-label,
.mini-label,
.status-sub,
.setting-save-result{
  color:var(--sub-color);
}

.summary-value,
.mini-value,
.salary-amount,
.status-main-time{
  color:var(--text-color);
}

.bottom-nav{
  background:#f8f1e7 !important;
  border-top:1px solid #d8c7b8 !important;
  box-shadow:
    0 -8px 24px rgba(60,40,20,.10) !important;
}

.nav-item{
  color:var(--sub-color);
}

.nav-item.active{
  color:var(--theme-color);
  font-weight:700;
}

.login-btn,
.settings-save-btn,
.admin-btn{
  background:linear-gradient(
    135deg,
    #7a5a45,
    #5a4638
  );
  color:#fff;
}

input,
select{
  color:var(--text-color);
}

input[type="password"],
.setting-field input,
#settingTheme{
  background:rgba(255,253,248,.96);
  border:1px solid rgba(109,76,65,.18);
  color:var(--text-color);
}

input:focus,
select:focus{
  outline:none;
  border-color:var(--theme-color);
  box-shadow:
    0 0 0 3px rgba(109,76,65,.14);
}

.color-setting-row,
.switch-row{
  background:rgba(255,253,248,.78);
  border:1px solid rgba(109,76,65,.14);
  color:var(--text-color);
}

.switch-ui{
  background:#d8c7b8;
}

.switch-row input:checked + .switch-ui{
  background:var(--theme-color);
}

.toast-message{
  background:rgba(63,51,40,.94);
  color:#fffdf8;
}

.coffee-scene{
  display:none;
}

.footer-brand{
  color:var(--sub-color);
}

@keyframes lanternGlow{

  0%{
    opacity:.6;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:.6;
  }
}

.fusuma-scene{
  display:flex;
  justify-content:center;
  margin:8px auto 12px;
}

.fusuma{
  position:relative;
  width:180px;
  height:110px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:
    0 10px 24px rgba(60,40,20,.10);
}

.fusuma-left,
.fusuma-right{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background:
    linear-gradient(
      180deg,
      #efe4d2,
      #e4d5bf
    );
  border:1px solid #cdb79d;
}

.fusuma-left{
  left:0;
}

.fusuma-right{
  right:0;
}

.fusuma-circle{
  position:absolute;
  top:50%;
  left:50%;
  width:44px;
  height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#8b6b52;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.25);
}

body.working-mode .fusuma-left{
  transform:translateX(-12px);
  transition:.5s;
}

body.working-mode .fusuma-right{
  transform:translateX(12px);
  transition:.5s;
}

@keyframes lanternAura{
  0%{
    opacity:.35;
    transform:scale(.96);
  }

  50%{
    opacity:.8;
    transform:scale(1.06);
  }

  100%{
    opacity:.35;
    transform:scale(.96);
  }
}


.hero{
  padding-bottom:18px !important;
}

.card{
  margin:-4px auto 0;
}

.fusuma{
  width:200px !important;
  height:120px !important;
  background:blue !important;
}

.fusuma-scene{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  height:160px !important;
  background:red !important;
  margin:20px auto !important;
  position:relative !important;
  z-index:9999 !important;
}