/* Make hidden always work (fixes your issue) */
[hidden]{ display:none !important; }

:root{
  /* Theme */
  --bg: #fce5cd;             /* required */
  --ink: #2b241f;
  --muted: rgba(43,36,31,.62);

  /* Surfaces */
  --paper: rgba(255,255,255,.78);
  --paper2: rgba(255,255,255,.88);
  --stroke: rgba(43,36,31,.12);

  /* Accents (rose–gold, subtle) */
  --rose: #d86b8d;
  --gold: #e2b15f;

  /* Shape & depth */
  --r: 22px;
  --r2: 16px;
  --shadow: 0 18px 45px rgba(80,40,30,.12);
  --shadow2: 0 10px 26px rgba(80,40,30,.10);
  --inset: inset 0 1px 0 rgba(255,255,255,.65);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Ysabeau Infant", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);

  /* Elegant peach background */
  background:
    radial-gradient(900px 650px at 14% 10%, rgba(216,107,141,.18), transparent 60%),
    radial-gradient(900px 700px at 86% 12%, rgba(226,177,95,.22), transparent 62%),
    radial-gradient(900px 800px at 50% 92%, rgba(255,255,255,.18), transparent 68%),
    var(--bg);

  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px;
}

/* Ensure controls inherit the font */
input, button{ font-family:inherit; }

.wrap{
  width:min(760px, 100%);
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Header */
.top{
  display:flex;
  align-items:flex-end;
  justify-content:center;   /* CENTER */
  text-align:center;
  gap:12px;
  position: relative;
}

.title{
  font-weight:900;
  font-size:26px;
  letter-spacing:.2px;
  line-height:1.05;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.sub{
  margin-top:6px;
  font-size:15.5px;
  font-weight:450;
  color:var(--muted);
}

.strong{ font-weight:850; }

.pill{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  font-size:13px;
  color: rgba(43,36,31,.72);
  white-space:nowrap;
}

/* Card */
.card{
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:18px;
  backdrop-filter: blur(10px);
}

/* Controls */
.controls{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.field{ display:flex; flex-direction:column; gap:6px; }

label{
  font-size:13px;
  color: rgba(43,36,31,.58);
  font-weight:700;
}

input{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(43,36,31,.16);
  border-radius: 14px;
  padding: 11px 12px;
  font-size:16px;
  font-weight:650;
  color: var(--ink);
  width: 170px;
  box-shadow: var(--inset), 0 8px 18px rgba(80,40,30,.06);
}

input::placeholder{ color: rgba(43,36,31,.40); }

input:focus{
  outline:none;
  border-color: rgba(216,107,141,.55);
  box-shadow:
    0 0 0 5px rgba(216,107,141,.16),
    var(--inset),
    0 12px 26px rgba(80,40,30,.10);
}

/* Buttons */
.btn{
  border-radius: 16px;
  padding: 12px 16px;
  font-size:15.5px;
  font-weight:900;
  cursor:pointer;
  border: 1px solid rgba(43,36,31,.14);
  background: rgba(255,255,255,.88);
  color: rgba(43,36,31,.92);
  box-shadow: 0 10px 24px rgba(80,40,30,.10);
  transition: transform .06s ease, filter .14s ease, box-shadow .14s ease;
}

.btn:hover{ filter: brightness(1.02); box-shadow: 0 12px 28px rgba(80,40,30,.12); }
.btn:active{ transform: translateY(1px); }

.btn-primary{
  border: none;
  color: white;
  min-width: 220px;
  padding: 14px 22px;
  font-size:17px;
  background: linear-gradient(180deg, var(--rose), var(--gold));
  box-shadow: 0 18px 44px rgba(216,107,141,.26);
}

.btn-ghost{
  background: rgba(255,255,255,.84);
}

/* ===== DISPLAY — Zen centered ===== */

.display{
  border-radius: var(--r2);
  border: 1px solid rgba(43,36,31,.12);
  background: var(--paper2);
  box-shadow: var(--inset);
  padding: 26px 22px;

  /* center everything */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.knum{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
}

.line{
  margin:0;
  max-width: 620px;   /* giữ dòng đẹp khi dài */
  font-size: 23px;
  line-height: 1.7;
  font-weight: 850;
}

.num{
  font-size:38px;
  font-weight:1000;
  letter-spacing:.2px;
  color: #b24a6d;
}

.meta{
  font-size:13px;
  font-weight:700;
  color: rgba(43,36,31,.58);
}

.helper{
  margin-top:10px;
  text-align:center;
  color: rgba(43,36,31,.58);
  font-size:13px;
  font-weight:650;
}

.helper kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  background: rgba(43,36,31,.08);
  border: 1px solid rgba(43,36,31,.16);
  padding: 2px 7px;
  border-radius: 10px;
  margin: 0 2px;
}

/* Hint */
.hintToggle{
  display:flex;
  justify-content:center;
}

.hintBody{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.wide{
  width:100%;
}

.full{
  white-space: pre-wrap;
  font-size:16.5px;
  line-height:1.68;
  border: 1px solid rgba(43,36,31,.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--inset);
}

/* ===== Zen floating hint ===== */

/* Khi đóng */
.card.hint-collapsed{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Căn nút ra giữa khi đóng */
.card.hint-collapsed .hintToggle{
  justify-content: center;
}
#status:empty{ display:none; }

/* Mobile polish */
@media (max-width: 520px){
  input{ width: 100%; }
  .btn-primary{ min-width: 100%; }
}