* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background: #12141a; color: #e8ebf2; font-family: -apple-system, "PingFang TC", "Noto Sans TC", sans-serif; min-height: 100vh; }
#app { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; padding: 10px 2px 18px; }
.topbar h1 { font-size: 26px; font-weight: 800; }
.pre { font-size: 14px; color: #8b93a7; margin-right: 6px; font-weight: 600; }
.grad { background: linear-gradient(90deg, #f59e0b, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cta { width: 100%; padding: 22px 18px; border: none; border-radius: 18px; font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 24px rgba(245,158,11,.25); cursor: pointer; }
.cta:active { transform: scale(.98); }
.cta:disabled { opacity: .6; }
.cta-sub { text-align: center; font-size: 13px; color: #8b93a7; margin-top: 10px; }
.hidden { display: none !important; }

#drawArea { margin-top: 20px; }
#cards { display: flex; gap: 10px; }
.dish-card { flex: 1; background: #1c1f28; border: 1px solid #2a2f3d; border-radius: 16px; padding: 18px 8px; text-align: center; min-width: 0; }
.dish-card.winner { background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(249,115,22,.08)); border-color: rgba(245,158,11,.5); }
.dish-card.shuffling { opacity: .75; }
.dish-emoji { font-size: 40px; }
.dish-name { font-size: 15px; font-weight: 700; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner .dish-emoji { font-size: 52px; }
.winner .dish-name { font-size: 17px; }
.dish-cat { font-size: 11px; color: #8b93a7; margin-top: 4px; }
.redraw { width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 12px; background: #1c1f28; color: #e8ebf2; font-size: 15px; font-weight: 600; cursor: pointer; }

.sec-title { font-size: 15px; font-weight: 700; margin: 26px 0 10px; color: #c9cfdb; }
.cnt { font-size: 12px; color: #8b93a7; font-weight: 400; margin-left: 6px; }
.addrow { display: flex; gap: 8px; }
.addrow input { flex: 1; background: #1c1f28; border: 1px solid #2a2f3d; border-radius: 12px; padding: 12px 14px; color: #e8ebf2; font-size: 16px; }
.addrow input:focus { outline: none; border-color: #f59e0b; }
.btn-add { padding: 0 18px; border: none; border-radius: 12px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }

.dish-row { display: flex; align-items: center; gap: 8px; background: #1c1f28; border: 1px solid #2a2f3d; border-radius: 10px; padding: 10px 14px; margin-bottom: 6px; }
.dr-emoji { font-size: 18px; }
.dr-name { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-del { background: none; border: none; color: #6b7280; font-size: 14px; cursor: pointer; padding: 4px; }

#toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #f59e0b; color: #12141a; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 12px; z-index: 200; }