: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;
  }
}

.shoji{

  position:relative;
  width:220px;
  height:140px;

  border-radius:12px;

  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 34px,
      #a17b5b 34px,
      #a17b5b 36px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      #a17b5b 26px,
      #a17b5b 28px
    ),
    linear-gradient(
      180deg,
      #fdf9f0,
      #f4ecde
    );

  box-shadow:
    0 10px 24px rgba(0,0,0,.12);

}

.shoji{
  position:relative;
  width:150px;
  height:90px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.12);
}

.sakura-bg{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,180,200,.8),
      transparent 10%
    ),
    radial-gradient(
      circle at 70% 40%,
      rgba(255,180,200,.7),
      transparent 8%
    ),
    linear-gradient(
      180deg,
      #fffaf5,
      #f7efe4
    );
}

.shoji-left,
.shoji-right{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  z-index:3;

  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 24px,
      #a17b5b 24px,
      #a17b5b 26px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 20px,
      #a17b5b 20px,
      #a17b5b 22px
    ),
    linear-gradient(
      180deg,
      rgba(253,249,240,.96),
      rgba(244,236,222,.96)
    );

  transition:
    transform .65s ease;
}

.shoji-left{
  left:0;
  border-right:2px solid #8b6b52;
}

.shoji-right{
  right:0;
  border-left:2px solid #8b6b52;
}

body.working-mode .shoji-left{
  transform:translateX(-75px);
}

body.working-mode .shoji-right{
  transform:translateX(75px);
}


@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;
}

.shoji-left{
  left:0;
  border-right:2px solid #8b6b52;
}

.shoji-right{
  right:0;
  border-left:2px solid #8b6b52;
}

body.working-mode .shoji-left{
  border-right:none;
}

body.working-mode .shoji-right{
  border-left:none;
}

.shoji-handle{

  position:absolute;

  top:50%;
  left:50%;

  width:22px;
  height:22px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:#8b6b52;

  z-index:10;

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.3);

}

.sakura-bg{

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,180,200,.8),
      transparent 10%
    ),

    radial-gradient(
      circle at 70% 40%,
      rgba(255,180,200,.7),
      transparent 8%
    ),

    linear-gradient(
      180deg,
      #fffaf5,
      #f7efe4
    );

}

body.working-mode .shoji-left{
  transform:translateX(-60px);
}

body.working-mode .shoji-right{
  transform:translateX(60px);
}

.sakura-bg{

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,180,200,.8),
      transparent 10%
    ),

    radial-gradient(
      circle at 70% 40%,
      rgba(255,180,200,.7),
      transparent 8%
    ),

    linear-gradient(
      180deg,
      #fffaf5,
      #f7efe4
    );

}

body.working-mode .shoji-left{
  transform:translateX(-60px);
}

body.working-mode .shoji-right{
  transform:translateX(60px);
}

.fusuma-scene{

  width:100%;

  display:flex;

  justify-content:center !important;

  align-items:center;

  margin:10px auto 18px;

}

.welcome-text{

  font-size:13px;

  color:#6d4c41;

  font-weight:600;

  opacity:0;

  transition:.8s;

}

body.working-mode .welcome-text{

  opacity:1;

}

.sakura-bg{

  position:absolute;

  inset:0;

  z-index:1;

  background:

    radial-gradient(
      circle at 15% 20%,
      rgba(255,180,200,.85),
      transparent 8%
    ),

    radial-gradient(
      circle at 70% 30%,
      rgba(255,180,200,.7),
      transparent 6%
    ),

    radial-gradient(
      circle at 55% 70%,
      rgba(255,200,220,.8),
      transparent 7%
    ),

    linear-gradient(
      180deg,
      #fffaf5,
      #f7efe4
    );

}

.sakura-bg{

  position:absolute;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

}

.welcome-text{

  text-align:center;

  line-height:1.8;

  font-size:12px;

  color:#6d4c41;

  font-weight:600;

  opacity:0;

  transition:.8s;

}

.tea-message{

  position:absolute;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;

  color:#6d4c41;

  font-size:12px;

  font-weight:600;

  opacity:0;

  transition:.6s;

  z-index:2;

}

body.break-mode .tea-message{

  opacity:1;

}

body.break-mode .welcome-text{

  opacity:0;

}

.tea-cup{

  position:absolute;

  top:22px;

  left:50%;

  transform:translateX(-50%);

  font-size:26px;

  opacity:0;

  transition:.6s;

  z-index:2;

}

body.break-mode .tea-cup{

  opacity:1;

}

.tea-cup{

  position:absolute;

  top:18px;

  left:50%;

  transform:translateX(-50%);

  font-size:24px;

  opacity:0;

  transition:.6s;

  z-index:2;

}

.tea-message{

  position:absolute;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;

  line-height:1.8;

  color:#6d4c41;

  font-size:12px;

  opacity:0;

  transition:.6s;

  z-index:2;

}

body.break-mode .tea-cup,
body.break-mode .tea-message{

  opacity:1;

}

body.break-mode .welcome-text{

  opacity:0;

}

.tea-icon{
  position:relative;
  top:8px;
}

.welcome-text{
  position:relative;
  top:-4px;
}