:root{
  --bg: #fdf5f1;
  --bg-glow-a: rgba(255,214,224,0.55);
  --bg-glow-b: rgba(212,175,55,0.10);
  --ink: #4a3728;
  --ink-soft: #93796a;
  --ink-faint: #b8a496;
  --rose: #e8b4b8;
  --rose-deep: #c98a90;
  --rose-pale: #ffe1e6;
  --gold: #ad8a1f;
  --gold-bright: #d4af37;
  --card: #ffffff;
  --card-line: #f3e0dd;
  --ok-bg: #e9f2ea;
  --ok: #4f7a5c;
  --busy-bg: #fbecd8;
  --busy: #a9741f;
  --danger-bg: #fbe4e2;
  --danger: #b5514c;
}
/* 讓「所有數字」不管出現在哪個字體的文字裡，都自動套用這個清楚好辨識的字體，
   不會有 1 跟英文 I 分不清楚的問題（中文字、其他符號不受影響）。 */
@font-face{
  font-family:"ClearDigits";
  src:local("Consolas"),local("SF Mono"),local("Menlo"),local("Courier New");
  unicode-range:U+0030-0039;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 60% 40% at 12% 0%, var(--bg-glow-a), transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 15%, var(--bg-glow-b), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:"ClearDigits","DM Sans","Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;
  padding-block:26px 48px;
}
.app{max-width:560px;margin:0 auto;padding-inline:16px;display:flex;flex-direction:column;gap:18px;}
#lanesContainer{display:flex;flex-direction:column;gap:16px;}
.lane-title{display:flex;align-items:center;gap:10px;}
.lane-title .sicon{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--rose-pale);color:var(--rose-deep);
  display:flex;align-items:center;justify-content:center;
}
.lane-title .sicon svg{width:16px;height:16px;}
.buffer-note{font-size:11.5px;color:var(--ink-faint);margin:-8px 0 12px;}
.status-btn-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.status-btn{
  border:1.5px solid var(--card-line);background:#fffdf9;color:var(--ink-soft);
  border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:"ClearDigits","DM Sans",sans-serif;
}
.status-btn.active{background:linear-gradient(135deg,var(--rose),var(--rose-deep));border-color:var(--rose-deep);color:#fff;}
.walkin-toggle{background:none;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0;margin-top:8px;}
.walkin-form{margin-top:10px;padding-top:10px;border-top:1px dashed var(--card-line);}

.cat-checklist{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.cat-check-item{
  display:flex;flex-direction:column;gap:10px;border:1.5px solid var(--card-line);border-radius:14px;
  padding:16px;background:var(--bg);cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.cat-check-item:not(.disabled):active{transform:scale(0.99);}
.cat-check-item.selected{border-color:var(--rose-deep);background:var(--rose-pale);}
.cat-check-item.disabled{opacity:0.55;cursor:not-allowed;}
.cat-check-item .top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cat-check-item .sname{font-weight:700;font-size:16px;color:var(--ink);flex:1;}
.cat-check-item .check-mark{
  width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--card-line);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;background:var(--card);
}
.cat-check-item.selected .check-mark{background:var(--rose-deep);border-color:var(--rose-deep);}
.duration-pick{display:flex;gap:8px;flex-wrap:wrap;}
.duration-pill{
  display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;
  border:1.5px solid var(--card-line);font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;background:#fffdf9;
}
.duration-pill.active{border-color:var(--rose-deep);background:var(--rose-pale);color:var(--rose-deep);}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.brand{display:flex;align-items:center;gap:8px;font-family:"ClearDigits","Cormorant Garamond",serif;font-weight:700;font-size:20px;color:var(--ink);}
.brand .mark{
  width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;
}
.tag-pill{
  display:inline-flex;align-items:center;gap:6px;background:var(--rose-pale);color:var(--gold);
  font-family:"ClearDigits","DM Sans",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:0.4px;
  padding:6px 12px;border-radius:999px;white-space:nowrap;
}

.masthead{text-align:center;display:flex;flex-direction:column;gap:8px;padding-top:4px;}
.masthead h1{
  font-family:"ClearDigits","Cormorant Garamond",serif;font-weight:700;font-size:32px;margin:0;
  color:var(--ink);letter-spacing:0.5px;
}
.masthead h1 .accent{color:var(--rose-deep);}
.masthead p{margin:0;color:var(--ink-soft);font-size:13.5px;}

.card{
  background:var(--card);color:var(--ink);border-radius:22px;
  padding:20px;box-shadow:0 8px 26px rgba(74,55,40,0.07);
  border:1px solid var(--card-line);
}
.card h2{
  font-family:"ClearDigits","Cormorant Garamond",serif;font-weight:700;font-size:18px;margin:0 0 14px;
  color:var(--ink);border-bottom:1.5px solid var(--card-line);padding-bottom:10px;
}

.status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.status-pill{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:700;
}
.status-pill.ok{background:var(--ok-bg);color:var(--ok);}
.status-pill.busy{background:var(--busy-bg);color:var(--busy);}
.status-pill.paused{background:var(--danger-bg);color:var(--danger);}
.timer{
  font-variant-numeric:tabular-nums;font-family:"SF Mono",Consolas,Menlo,monospace;font-weight:700;
  font-size:34px;color:var(--rose-deep);text-align:center;margin:12px 0 2px;
}
.timer-label{text-align:center;font-size:11.5px;color:var(--ink-faint);letter-spacing:1px;text-transform:uppercase;}
.serving-name{text-align:center;font-size:13.5px;color:var(--ink-soft);margin-top:6px;}

.queue-list{display:flex;flex-direction:column;}
.queue-item{
  display:flex;justify-content:space-between;gap:10px;padding:11px 2px;
  border-bottom:1px dashed var(--card-line);font-size:14px;align-items:center;
}
.queue-item:last-child{border-bottom:none;}
.queue-item.mine{color:var(--rose-deep);font-weight:700;}
.queue-pos{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;font-size:12px;font-weight:700;margin-right:8px;
  font-family:"SF Mono",Consolas,Menlo,monospace;font-variant-numeric:tabular-nums;
}
.queue-item.mine .queue-pos{background:var(--gold-bright);}
.queue-meta{color:var(--ink-faint);font-size:12.5px;}
.empty-note{color:var(--ink-faint);font-size:13.5px;text-align:center;padding:10px 0;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;letter-spacing:0.2px;}
.field input, .field select{
  width:100%;padding:11px 12px;border:1.5px solid var(--card-line);border-radius:11px;
  font-size:15px;font-family:inherit;background:var(--bg);color:var(--ink);
}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393796a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.field input:focus, .field select:focus{outline:none;border-color:var(--rose-deep);}

.service-preview{
  display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--card-line);
  border-radius:14px;padding:10px 14px;margin-bottom:14px;
}
.service-preview .sicon{
  width:38px;height:38px;flex:none;border-radius:50%;background:var(--rose-pale);color:var(--rose-deep);
  display:flex;align-items:center;justify-content:center;
}
.service-preview .sicon svg{width:19px;height:19px;}
.service-preview .sname{font-weight:700;font-size:14.5px;color:var(--ink);}
.service-preview .sdur{font-size:12.5px;color:var(--gold);font-weight:700;}

.btn{
  width:100%;padding:13px;border:none;border-radius:999px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:"ClearDigits","DM Sans",sans-serif;
}
.btn-primary{background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;}
.btn-ghost{background:transparent;border:1.5px solid var(--card-line);color:var(--ink-soft);}
.btn-gold{background:linear-gradient(135deg,#e3c76a,var(--gold-bright));color:#4a3728;}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(181,81,76,0.25);}
.btn-row{display:flex;gap:8px;margin-top:4px;}
.btn-row .btn{flex:1;padding:9px;font-size:13px;}

.error-text{color:var(--danger);font-size:13px;margin:-4px 0 12px;}
.success-block{text-align:center;padding:4px 0 4px;}
.success-icon{
  width:54px;height:54px;border-radius:50%;background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;
}
.success-block h3{font-family:"ClearDigits","Cormorant Garamond",serif;font-weight:700;color:var(--ok);margin:0 0 4px;font-size:19px;}
.success-block p{margin:2px 0;color:var(--ink-soft);font-size:13.5px;}
.success-num{font-size:36px;font-weight:700;color:var(--rose-deep);font-family:"SF Mono",Consolas,Menlo,monospace;font-variant-numeric:tabular-nums;}

.admin-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.admin-table{display:flex;flex-direction:column;gap:8px;}
.admin-item{
  border:1px solid var(--card-line);border-radius:14px;padding:11px 13px;
  display:flex;flex-direction:column;gap:6px;background:var(--bg);
}
.admin-item .top-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.admin-item .name{font-weight:700;font-size:14.5px;}
.admin-item .meta{font-size:12.5px;color:var(--ink-soft);}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.login-box{display:flex;flex-direction:column;}
.footnote{text-align:center;font-size:11.5px;color:var(--ink-faint);padding-top:2px;}
.footnote a{color:var(--ink-soft);text-decoration:underline;}