:root{font-family:system-ui,-apple-system,sans-serif;color:#171717;background:#f7f7f5;--surface:#fff;--muted:#70706c;--border:#e4e4df;--shadow:0 18px 50px rgba(20,20,18,.07);--success:#1f7a4c;--success-soft:#e8f6ee}*{box-sizing:border-box}body{margin:0;background:#f7f7f5}.app-shell{max-width:1040px;margin:auto;padding:28px}.sender-shell{max-width:980px}.topbar,.brand-block,.topbar-actions,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand-block{justify-content:flex-start}.brand-mark{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:#171717;color:#fff;font-weight:900}.eyebrow{margin:0 0 5px;font-size:.76rem;font-weight:850;letter-spacing:.16em;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0}.hero-panel,.receiver-summary,.push-card,.admin-summary{background:#fff;border:1px solid var(--border);border-radius:28px;padding:28px;box-shadow:var(--shadow);margin:20px 0}.centered-hero{text-align:center}.hero-copy,.receiver-summary p,.push-card p,.admin-summary p{color:var(--muted);line-height:1.5}.request-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,360px));gap:20px}.centered-grid{justify-content:center;max-width:760px;margin:auto}.request-button{border:0;border-radius:28px;min-height:280px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;box-shadow:var(--shadow);text-align:left}.request-button.coffee{background:#f3e9e2;color:#6f4e37}.request-button.water{background:#e8f2ff;color:#2674d9}.request-button[disabled]{opacity:.45}.icon{font-size:3rem}.button-title{font-size:2rem;font-weight:900}.button-subtitle{font-weight:700;opacity:.7}.status-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:20px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow)}.centered-status{max-width:760px;margin:20px auto}.status-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--success-soft);color:var(--success);font-weight:900}.status-copy{display:grid;gap:3px}.status-label{font-size:.72rem;font-weight:850;letter-spacing:.14em;color:var(--muted)}.language-switch{display:flex;padding:3px;background:#e9e9e5;border-radius:14px}.language-option{border:0;background:transparent;border-radius:11px;padding:9px 12px;font-weight:800}.language-option.active{background:#fff}.secondary,.primary,.text-button,.action-button{min-height:46px;border-radius:14px;padding:10px 16px;font-weight:800;border:1px solid var(--border)}.primary{background:#171717;color:#fff}.secondary{background:#fff}.text-button{background:transparent;border:0;color:#2674d9}.receiver-summary,.push-card,.admin-summary{display:flex;align-items:center;justify-content:space-between;gap:20px}.count-card{min-width:100px;min-height:100px;border-radius:24px;background:#171717;color:#fff;display:grid;place-items:center;align-content:center}.count-card span{font-size:2.2rem;font-weight:900}.receiver-list,.history-list{display:grid;gap:14px}.request-card,.history-card,.admin-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:20px}.request-card{display:grid;grid-template-columns:1fr auto;gap:16px}.request-title{font-size:1.2rem;font-weight:900}.request-meta{color:var(--muted)}.status-badge{display:inline-block;border-radius:999px;padding:7px 10px;background:#fff5db;margin-top:8px}.history{margin-top:30px}.history-card{display:flex;justify-content:space-between}.empty{text-align:center;color:var(--muted);padding:28px}.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.field{display:grid;gap:8px;margin-top:14px}.field input{min-height:48px;border:1px solid #d8d8d2;border-radius:14px;padding:10px 12px;font-size:16px}.save-bar{position:sticky;bottom:12px;margin-top:18px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:14px;display:flex;justify-content:space-between}.pin-input{display:block;width:180px;margin:18px auto;min-height:60px;text-align:center;font-size:2rem;letter-spacing:.25em}.pin-error{color:#a23a3a}.dialog-actions{display:flex;gap:10px;justify-content:center}dialog{border:0;border-radius:24px;padding:28px;max-width:420px;width:calc(100% - 32px);text-align:center}dialog::backdrop{background:rgba(0,0,0,.4)}@media(max-width:700px){.request-grid,.admin-grid{grid-template-columns:1fr}.request-button{min-height:160px;flex-direction:row;align-items:center}.receiver-summary,.push-card,.admin-summary{flex-direction:column;align-items:flex-start}.request-card{grid-template-columns:1fr}.topbar{align-items:flex-start}}
.item-svg{width:64px;height:64px;display:block}
.request-button .icon .item-svg{width:76px;height:76px}
.item-icon{width:48px;height:48px;border-radius:14px;background:#f1f1ee;display:grid;place-items:center;flex:0 0 auto}
.item-icon .item-svg{width:32px;height:32px}
.history-label{display:flex;align-items:center;gap:10px}
.history-icon{width:32px;height:32px;display:grid;place-items:center}
.history-icon .item-svg{width:26px;height:26px}

.emoji-icon{
  display:inline-grid;
  place-items:center;
  width:76px;
  height:76px;
  font-size:58px;
  line-height:1;
}
.item-icon .emoji-icon{
  width:32px;
  height:32px;
  font-size:27px;
}
.history-icon .emoji-icon{
  width:26px;
  height:26px;
  font-size:22px;
}

/* Emoji icon sizing update: centered and slightly larger */
.request-button .icon{
  display:grid;
  place-items:center;
  align-self:center;
}
.request-button .emoji-icon{
  width:88px;
  height:88px;
  font-size:68px;
  text-align:center;
  line-height:1;
}
.item-icon,.history-icon{
  place-items:center;
}
.item-icon .emoji-icon{
  width:36px;
  height:36px;
  font-size:30px;
}
.history-icon .emoji-icon{
  width:30px;
  height:30px;
  font-size:25px;
}

/* Fully center sender request button contents */
.request-button{
  align-items:center;
  text-align:center;
}
.request-button > span:last-child{
  width:100%;
  text-align:center;
}
@media(max-width:700px){
  .request-button{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:10px;
  }
}

/* Center the complete icon + label group vertically and horizontally */
.request-button{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:10px;
}
.request-button .icon{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
  padding:0;
  width:100%;
}
.request-button .emoji-icon{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
}
.request-button > span:last-child{
  display:block;
  width:100%;
  margin:0;
  text-align:center;
}

/* User-supplied vector icons: same approved centered footprint */
.request-button .user-vector-icon{
  display:block;
  width:88px;
  height:88px;
  object-fit:contain;
  margin:0 auto;
}
.item-icon .user-vector-icon{
  width:36px;
  height:36px;
}
.history-icon .user-vector-icon{
  width:30px;
  height:30px;
}

/* Hot Water visual treatment: match the red vector icon */
.request-button.water{
  background:#fff1f1;
  border-color:#e7a3a6;
  color:#b91f27;
}
.request-button.water:hover:not(:disabled){
  background:#ffe7e8;
  border-color:#d96b70;
}
.request-button.water .button-title,
.request-button.water .button-subtitle{
  color:#b91f27;
}
.request-button.water:focus-visible{
  outline-color:#b91f27;
}
/* Keep supplied vector artwork comfortably inside its footprint */
.request-button.water .user-vector-icon{
  width:82px;
  height:82px;
  object-fit:contain;
  overflow:visible;
}