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

/* ===== base ===== */

body{
  font-family:'Shippori Mincho', serif;
  background:var(--bg-color);
  color:var(--text-color);
}

.hero{
  padding-bottom:18px !important;
  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,
.summary-label,
.mini-label,
.status-sub,
.setting-save-result,
.footer-brand{
  color:var(--sub-color);
}

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

.card,
.settings-card,
.summary-box,
.salary-main-card,
.salary-mini-card{
  background:var(--card-color);
}

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

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

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

/* ===== buttons ===== */

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

.action-btn.in{
background:var(--theme-color);
}

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

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

.login-btn,
.settings-save-btn,
.admin-btn{
background:var(--theme-color);
  color:#fff;
}

/* ===== forms ===== */

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

/* ===== nav / toast ===== */

.bottom-nav{
  background:var(--card-color) !important;
}

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

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

.toast-message{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translateX(-50%) translateY(12px);
}

.coffee-scene{
  display:none;
}

/* ===== shoji scene ===== */

.fusuma-scene{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px auto 18px;
  text-align:center;
  pointer-events:none;
}

.shoji{
  position:relative;
  display:block;
  width:150px;
  min-width:150px;
  max-width:150px;
  height:90px;
  margin:0 auto;
  overflow:hidden;
  flex-shrink:0;
  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);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  isolation:isolate;
}

.sakura-bg{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  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
    );
}

.shoji-left,
.shoji-right{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  z-index:3;
  opacity:1;
  visibility:visible;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  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,
body.break-mode .shoji-left{
  transform:translateX(-82%);
  border-right:none;
}

body.working-mode .shoji-right,
body.break-mode .shoji-right{
  transform:translateX(82%);
  border-left:none;
}

/* ===== shoji messages ===== */

.welcome-text{
  position:relative;
  top:-4px;
  width:100%;
  text-align:center;
  line-height:1.8;
  font-size:12px;
  color:#6d4c41;
  font-weight:600;
  opacity:0;
  transition:.8s;
}

body.working-mode .welcome-text{
  opacity:1;
}

.tea-cup{
  position:absolute;
  top:26px;
  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;
  font-weight:600;
  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;
}

/* ===== button safety ===== */

.button-grid,
.action-btn{
  position:relative;
  z-index:5;
  pointer-events:auto;
}