/* 香港姓名生成頁：沿用共用 mac 材質與變數 */
.namegen-app { padding: 32px; color: var(--label); max-width: 820px; margin: 0 auto; }
.namegen-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.namegen-heading-row h2 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.namegen-heading-row .mac-segmented > button { min-width: 52px; }
.namegen-muted { color: var(--label-2); font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }

.namegen-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 36px 24px 32px; text-align: center; border: 1px solid var(--separator); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: 0 16px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); }
.namegen-card::before { content: ""; position: absolute; width: 360px; height: 160px; left: 50%; top: -132px; transform: translateX(-50%); border-radius: 50%; background: rgba(41,151,255,.14); filter: blur(44px); pointer-events: none; }
.namegen-chinese { position: relative; margin: 0; font-size: clamp(38px, 6vw, 52px); line-height: 1.08; font-weight: 650; letter-spacing: .055em; color: #fff; }
.namegen-romanised { position: relative; margin-top: 12px; font-size: clamp(18px, 3vw, 23px); line-height: 1.15; font-weight: 520; letter-spacing: -.02em; color: var(--label-2); }
.namegen-english { position: relative; margin-top: 14px; }
.namegen-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-soft); font-size: 13px; font-weight: 600; }

.namegen-actions { display: grid; grid-template-columns: 1fr 156px; gap: 10px; margin-top: 12px; }
.namegen-actions .mac-btn { min-height: 48px; border-radius: 14px; font-size: 14px; }
.namegen-actions .ico, .namegen-batch-tools .ico { width: 16px; height: 16px; }
.namegen-hint { margin-top: 10px; }

.namegen-batch { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--separator); }
.namegen-batch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.namegen-batch-bar h3 { font-size: 15px; font-weight: 600; }
.namegen-batch-tools { display: flex; align-items: center; gap: 8px; }
.namegen-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--separator); border-radius: 16px; background: var(--fill-1); }
.namegen-list li + li { border-top: 1px solid var(--separator); }
.namegen-row { width: 100%; min-height: 54px; display: grid; grid-template-columns: 34px minmax(80px, .7fr) minmax(0, 1.3fr) 16px; align-items: center; gap: 12px; padding: 0 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background-color .14s ease; }
.namegen-row:hover { background: var(--fill-1); }
.namegen-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.namegen-index { color: var(--label-3, rgba(255,255,255,.4)); font-size: 10px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.namegen-row-cn { font-size: 16px; font-weight: 650; letter-spacing: .02em; }
.namegen-row-en { justify-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-2); font-size: 13px; }
.namegen-row-copy { width: 14px; height: 14px; color: var(--label-2); opacity: 0; transition: opacity .14s ease; }
.namegen-row:hover .namegen-row-copy, .namegen-row:focus-visible .namegen-row-copy { opacity: 1; }

@media (max-width: 639px) {
    .namegen-main { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
}
@media (max-width: 680px) {
    .namegen-app { padding: 20px 14px; }
    .namegen-heading-row h2 { font-size: 23px; }
    .namegen-card { min-height: 184px; padding: 30px 14px 26px; border-radius: 19px; }
    .namegen-actions { grid-template-columns: 1fr 112px; }
    .namegen-batch-tools { width: 100%; justify-content: space-between; }
    .namegen-row { grid-template-columns: 28px 1fr; gap: 4px 8px; min-height: 62px; padding: 9px 12px; }
    .namegen-row-en { grid-column: 2; justify-self: start; max-width: 100%; }
    .namegen-row-copy { display: none; }
}