/**
 * Night Letters · Frontend CSS · v0.3.0
 *
 * X.1.1：HTML 原檔 CSS 移植版（Hero + Form 核心對齊）
 * 來源：nightmurmur_night_letters.html
 *
 * 留 X.1.2 做：完整錄音介面（waveform / playback bar）
 * 留 X.1.3 做：starfield / 月亮 cursor / carousel / podcast 視覺
 */

.nm-night-letters-page {
    --bone: #0F1419;
    --bone-2: #1A1F2E;
    --bone-3: #242B3D;
    --linen: rgba(168,181,201,.14);
    --linen-2: rgba(168,181,201,.22);
    --mist: #8A92A2;
    --mist-soft: #6A727F;
    --twilight: #E8EBF0;
    --twilight-2: #C8CFD8;
    --plum: #8A7AAA;
    --plum-hi: #9C8CBC;
    --plum-deep: #6E608A;
    --bronze: #A8B5C9;
    --bronze-hi: #BFC8D6;
    --ff-cn: 'Noto Sans TC', sans-serif;
    --ff-en: 'DM Sans', sans-serif;
    --ff-d: 'Newsreader','Noto Serif TC',serif;
    --ff-num: 'Cormorant Garamond','Noto Serif TC',serif;
    --ff-m: 'Space Mono', monospace;
    --ease-moon: cubic-bezier(0.22,1,0.36,1);
    --max: 760px;
    font-family: var(--ff-cn);
    background: var(--bone);
    color: var(--twilight);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background .6s var(--ease-moon), color .6s var(--ease-moon);
}
.nm-night-letters-page.lang-en { font-family: var(--ff-en); }
.nm-night-letters-page * { margin: 0; padding: 0; box-sizing: border-box; }
.nm-night-letters-page input, .nm-night-letters-page textarea { cursor: text; }
.nm-night-letters-page.lang-zh .en-show,
.nm-night-letters-page.lang-en .zh-show { display: none; }

/* ═══════════════════════════════════════════════════════════════
   STARFIELD（星空 · 細小白點滿版背景）
═══════════════════════════════════════════════════════════════ */
.nm-night-letters-page .nl-starfield {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background-repeat: repeat;
    background-size: 800px 800px;
    background-image:
        radial-gradient(.9px .9px at 14% 12%, rgba(232,235,240,.55), transparent 50%),
        radial-gradient(.6px .6px at 23% 36%, rgba(232,235,240,.4),  transparent 50%),
        radial-gradient(.9px .9px at 31% 58%, rgba(232,235,240,.55), transparent 50%),
        radial-gradient(.5px .5px at 38% 22%, rgba(232,235,240,.35), transparent 50%),
        radial-gradient(1.1px 1.1px at 47% 78%, rgba(232,235,240,.65), transparent 50%),
        radial-gradient(.6px .6px at 55% 14%, rgba(232,235,240,.45), transparent 50%),
        radial-gradient(.8px .8px at 62% 44%, rgba(232,235,240,.55), transparent 50%),
        radial-gradient(.5px .5px at 70% 67%, rgba(232,235,240,.35), transparent 50%),
        radial-gradient(.9px .9px at 78% 26%, rgba(232,235,240,.55), transparent 50%),
        radial-gradient(.6px .6px at 85% 53%, rgba(232,235,240,.4),  transparent 50%),
        radial-gradient(.7px .7px at 92% 81%, rgba(232,235,240,.45), transparent 50%),
        radial-gradient(.5px .5px at 8%  71%, rgba(232,235,240,.35), transparent 50%),
        radial-gradient(.4px .4px at 17% 86%, rgba(232,235,240,.3),  transparent 50%),
        radial-gradient(.8px .8px at 50% 94%, rgba(232,235,240,.5),  transparent 50%),
        radial-gradient(.6px .6px at 88% 10%, rgba(232,235,240,.4),  transparent 50%);
}

/* MOON GLOW（左上紫光 + 右下銅光）*/
.nm-night-letters-page::before,
.nm-night-letters-page::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
}
.nm-night-letters-page::before {
    top: -15%; left: -10%;
    width: 60vw; height: 60vh;
    background: radial-gradient(circle, rgba(138,122,170,.16) 0%, transparent 60%);
}
.nm-night-letters-page::after {
    bottom: -15%; right: -10%;
    width: 60vw; height: 60vh;
    background: radial-gradient(circle, rgba(168,181,201,.12) 0%, transparent 55%);
}


/* ═══════════════════════════════════════════════════════════════
   MOON CURSOR（dot + halo 雙層）
═══════════════════════════════════════════════════════════════ */
.nm-night-letters-page.has-moon-cursor { cursor: none; }
.nm-night-letters-page.has-moon-cursor input,
.nm-night-letters-page.has-moon-cursor textarea,
.nm-night-letters-page.has-moon-cursor select { cursor: text !important; }
.nm-night-letters-page.has-moon-cursor button,
.nm-night-letters-page.has-moon-cursor a,
.nm-night-letters-page.has-moon-cursor label { cursor: none; }

.nl-moon-cursor-dot, .nl-moon-cursor-halo {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.nl-moon-cursor-dot {
    width: 6px; height: 6px;
    z-index: 99999;
    background: rgba(232,235,240,.92);
    mix-blend-mode: difference;
}
.nl-moon-cursor-halo {
    width: 28px; height: 28px;
    z-index: 99998;
    border: 1px solid rgba(168,181,201,.5);
    background: radial-gradient(circle, rgba(168,181,201,.10) 0%, transparent 70%);
    transition: width .35s var(--ease-moon), height .35s var(--ease-moon), border-color .35s var(--ease-moon);
}
.nl-moon-cursor-halo.is-hover {
    width: 44px; height: 44px;
    border-color: rgba(168,181,201,.85);
    background: radial-gradient(circle, rgba(168,181,201,.18) 0%, transparent 70%);
}
@media (hover: none) {
    .nm-night-letters-page.has-moon-cursor, .nm-night-letters-page.has-moon-cursor * { cursor: auto; }
    .nl-moon-cursor-dot, .nl-moon-cursor-halo { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE（右上 fixed button）
═══════════════════════════════════════════════════════════════ */
.nl-theme-toggle {
    position: fixed; top: 20px; right: 20px;
    z-index: 100;
    background: transparent;
    border: 1px solid var(--linen);
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .25s, background .25s;
    padding: 0;
}
.nl-theme-toggle:hover {
    border-color: var(--plum);
    background: var(--linen);
}
.nl-theme-toggle svg { width: 14px; height: 14px; color: var(--mist); transition: color .25s; }
.nl-theme-toggle:hover svg { color: var(--plum); }
.nm-night-letters-page[data-theme="dark"]  .nl-theme-toggle .sun-i  { display: none; }
.nm-night-letters-page[data-theme="light"] .nl-theme-toggle .moon-i { display: none; }


/* ═══════════════════════════════════════════════════════════════
   CAROUSEL（horizontal scroll snap + arrows + dots）
═══════════════════════════════════════════════════════════════ */
.nl-carousel-section {
    position: relative; z-index: 2;
    padding: 100px 0;
    overflow: hidden;
}
.nl-carousel-header {
    max-width: var(--max);
    margin: 0 auto 50px;
    text-align: center;
    padding: 0 32px;
}
.nl-carousel-header-inner {
    border-top: 1px solid var(--linen);
    padding-top: 70px;
}
.nl-carousel-eyebrow {
    font-family: var(--ff-m);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: .32em;
    color: var(--bronze);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.nl-carousel-title {
    font-family: var(--ff-d);
    font-style: italic; font-weight: 300;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.25;
    letter-spacing: -.018em;
    color: var(--twilight);
    margin-bottom: 14px;
}
.nl-carousel-sub {
    font-family: var(--ff-d);
    font-style: italic; font-weight: 300;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--mist);
}
.nl-track-wrap {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 calc((100vw - 720px) / 2);
}
@media (max-width: 880px) { .nl-track-wrap { padding: 0 20px; } }

.nl-track {
    display: flex; gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 8px;
    scroll-behavior: smooth;
}
.nl-track::-webkit-scrollbar { display: none; }

.nl-letter {
    flex: 0 0 720px;
    max-width: 720px;
    scroll-snap-align: center;
    background: var(--bone-2);
    padding: 44px 40px 40px;
    position: relative;
    box-shadow:
        inset 0 0 0 1px rgba(168,181,201,.06),
        0 0 0 1px rgba(168,181,201,.04),
        0 0 32px rgba(168,181,201,.08),
        0 0 56px rgba(138,122,170,.06),
        0 6px 20px rgba(0,0,0,.18);
    transition: box-shadow .6s var(--ease-moon);
}
@media (max-width: 880px) {
    .nl-letter { flex: 0 0 calc(100vw - 80px); padding: 32px 24px 28px; }
}

.nl-letter-meta {
    font-family: var(--ff-m);
    font-size: 10px; font-weight: 500;
    letter-spacing: .22em;
    color: var(--bronze);
    text-transform: uppercase;
    margin-bottom: 28px;
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center;
}
.nl-letter-meta .dot { color: var(--mist); opacity: .5; }
.nl-letter-no { color: var(--plum); }
.nl-letter-body {
    font-family: var(--ff-d);
    font-style: italic; font-weight: 300;
    font-size: 17.5px;
    line-height: 1.85;
    color: var(--twilight);
    margin-bottom: 32px;
}
.nl-letter-body p { margin-bottom: 8px; }
.nl-letter-body p:last-child { margin-bottom: 0; }
.nl-letter-divider {
    height: 1px;
    background: var(--linen);
    width: 36px;
    margin-bottom: 22px;
}
.nl-letter-reply-label {
    font-family: var(--ff-m);
    font-size: 9.5px; font-weight: 500;
    letter-spacing: .28em;
    color: var(--mist);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.nl-letter-reply {
    font-family: var(--ff-d);
    font-style: italic; font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--bronze);
}
.nl-letter-podcast {
    margin-top: 24px; padding-top: 18px;
    border-top: 1px dashed var(--linen);
    font-family: var(--ff-m);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: .14em;
    color: var(--plum);
    text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
}
.nl-letter-podcast::before { content: '🎧'; font-size: 13px; letter-spacing: 0; }

.nl-carousel-controls {
    max-width: var(--max);
    margin: 36px auto 0;
    padding: 0 32px;
    display: flex; justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; gap: 18px;
}
.nl-arrows { display: flex; gap: 10px; }
.nl-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--linen-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .25s ease;
}
.nl-arrow:hover { border-color: var(--plum); background: var(--linen); }
.nl-arrow:disabled { opacity: .3; cursor: not-allowed; }
.nl-arrow svg { width: 16px; height: 16px; color: var(--twilight); }
.nl-dots { display: flex; gap: 8px; align-items: center; }
.nl-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--linen-2);
    cursor: pointer;
    border: none; padding: 0;
    transition: all .3s ease;
}
.nl-dot.active { background: var(--plum); width: 24px; border-radius: 4px; }
.nl-see-all {
    font-family: var(--ff-m);
    font-size: 10px; font-weight: 500;
    letter-spacing: .22em;
    color: var(--mist);
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s ease;
    display: flex; align-items: center; gap: 8px;
}
.nl-see-all:hover { color: var(--plum); }


/* ═══════════════════════════════════════════════════════════════
   PODCAST 完整版（深色獨立區段 + stat box + 雙 CTA）
═══════════════════════════════════════════════════════════════ */
.nl-podcast-section {
    position: relative; z-index: 2;
    padding: 100px 32px 120px;
    background: #0F141C;
    color: #E8EBF0;
    text-align: center;
}
.nl-podcast-inner { max-width: var(--max); margin: 0 auto; }
.nl-podcast-meta {
    font-family: var(--ff-m);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: .32em;
    color: #A8B5C9;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.nl-podcast-title {
    font-family: var(--ff-d);
    font-style: italic; font-weight: 300;
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #E8EBF0;
    margin-bottom: 22px;
}
.nl-podcast-sub {
    font-family: var(--ff-cn);
    font-size: 15.5px;
    line-height: 1.85;
    color: #8A92A2;
    font-weight: 300;
    max-width: 42ch;
    margin: 0 auto 38px;
}
.lang-en .nl-podcast-sub { font-family: var(--ff-en); max-width: 52ch; }
.nl-podcast-stat {
    display: inline-flex; gap: 18px;
    padding: 12px 24px;
    border: 1px solid rgba(168,181,201,.18);
    margin-bottom: 32px;
    font-family: var(--ff-m);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: .22em;
    color: #A8B5C9;
    text-transform: uppercase;
}
.nl-podcast-stat .dot { opacity: .5; }
.nl-podcast-cta {
    display: flex; gap: 18px;
    justify-content: center; flex-wrap: wrap;
}
.nl-podcast-section .btn.ghost {
    color: #E8EBF0;
    border-color: rgba(168,181,201,.3);
}
.nl-podcast-section .btn.ghost:hover {
    border-color: #8A7AAA; color: #8A7AAA;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME（[data-theme="light"] 覆寫）
═══════════════════════════════════════════════════════════════ */
.nm-night-letters-page[data-theme="light"] {
    --bone: #D4D4E8;
    --bone-2: #C7C7DD;
    --bone-3: #BABAD2;
    --linen: #ABABC5;
    --linen-2: #9595B5;
    --mist: #5E6478;
    --mist-soft: #7C8298;
    --twilight: #1A2030;
    --twilight-2: #2A3142;
    --plum: #5C6182;
    --plum-hi: #6D729A;
    --plum-deep: #4A4E6E;
    --bronze: #5E6478;
    --bronze-hi: #7A8190;
}
.nm-night-letters-page[data-theme="light"] .nl-starfield {
    background-image:
        radial-gradient(1.4px 1.4px at 14% 12%, rgba(255,255,255,1), transparent 50%),
        radial-gradient(1px 1px at 23% 36%, rgba(255,255,255,.85), transparent 50%),
        radial-gradient(1.4px 1.4px at 31% 58%, rgba(255,255,255,1), transparent 50%),
        radial-gradient(.9px .9px at 38% 22%, rgba(255,255,255,.75), transparent 50%),
        radial-gradient(1.6px 1.6px at 47% 78%, rgba(255,255,255,1), transparent 50%),
        radial-gradient(1px 1px at 55% 14%, rgba(255,255,255,.85), transparent 50%),
        radial-gradient(1.3px 1.3px at 62% 44%, rgba(255,255,255,.95), transparent 50%),
        radial-gradient(.9px .9px at 70% 67%, rgba(255,255,255,.75), transparent 50%),
        radial-gradient(1.4px 1.4px at 78% 26%, rgba(255,255,255,1), transparent 50%),
        radial-gradient(1px 1px at 85% 53%, rgba(255,255,255,.8), transparent 50%),
        radial-gradient(1.2px 1.2px at 92% 81%, rgba(255,255,255,.9), transparent 50%);
}
.nm-night-letters-page[data-theme="light"]::before { opacity: .045; mix-blend-mode: multiply; }
.nm-night-letters-page[data-theme="light"]::after {
    background: radial-gradient(circle, rgba(92,97,130,.16) 0%, transparent 60%);
}
.nm-night-letters-page[data-theme="light"] .nl-podcast-section {
    background: #0F141C; color: #E8EBF0;
}
.nm-night-letters-page[data-theme="light"] .nl-moon-cursor-dot {
    background: rgba(26,32,48,.88);
    mix-blend-mode: normal;
}
.nm-night-letters-page[data-theme="light"] .nl-moon-cursor-halo {
    border-color: rgba(92,97,130,.4);
    background: radial-gradient(circle, rgba(92,97,130,.07) 0%, transparent 70%);
}
.nm-night-letters-page[data-theme="light"] .nl-moon-cursor-halo.is-hover {
    border-color: rgba(92,97,130,.85);
    background: radial-gradient(circle, rgba(92,97,130,.14) 0%, transparent 70%);
}
.nm-night-letters-page[data-theme="light"] .nl-hero-moon::before {
    background: radial-gradient(circle, rgba(92,97,130,.22) 0%, transparent 70%);
}
.nm-night-letters-page[data-theme="light"] .btn.pri { color: var(--twilight); }
.nm-night-letters-page[data-theme="light"] .btn.pri:hover { color: var(--twilight); }

/* HERO */
.nl-hero { position: relative; z-index: 2; min-height: calc(100vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 90px 32px 50px; text-align: center; }
.nl-hero-moon { width: 64px; height: 64px; margin-bottom: 28px; position: relative; animation: moonReveal 1.2s var(--ease-moon) both; }
.nl-hero-moon::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(168,181,201,.2) 0%, transparent 70%); animation: halo-breath 5s ease-in-out infinite; }
.nl-hero-moon svg { width: 100%; height: 100%; display: block; }
@keyframes moonReveal { 0% { opacity: 0; filter: blur(8px); transform: translateY(12px); } 60% { opacity: .7; filter: blur(2px); transform: translateY(2px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes halo-breath { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
.nl-hero-eyebrow { font-family: var(--ff-m); font-size: 10.5px; font-weight: 500; letter-spacing: .32em; color: var(--bronze); text-transform: uppercase; margin-bottom: 20px; animation: moonReveal .9s var(--ease-moon) .2s both; }
.nl-hero-title { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: clamp(36px, 5.6vw, 64px); line-height: 1.14; letter-spacing: -.02em; color: var(--twilight); max-width: 18ch; margin-bottom: 24px; animation: moonReveal .9s var(--ease-moon) .35s both; }
.lang-en .nl-hero-title { max-width: 22ch; }
.nl-hero-sub { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--mist); max-width: 32ch; margin-bottom: 44px; animation: moonReveal .9s var(--ease-moon) .5s both; }
.lang-en .nl-hero-sub { max-width: 40ch; }
.nl-hero-ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; animation: moonReveal .9s var(--ease-moon) .65s both; }
.nl-hero-stats { margin-top: 48px; font-family: var(--ff-m); font-size: 10px; letter-spacing: .28em; color: var(--mist); text-transform: uppercase; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; animation: moonReveal .9s var(--ease-moon) .8s both; }
.nl-hero-stats .dot { opacity: .4; }

/* BUTTONS */
.nm-night-letters-page .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font-family: var(--ff-d); font-style: italic; font-weight: 400; font-size: 16px; text-decoration: none; letter-spacing: -.01em; border: 1px solid transparent; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease; }
.nm-night-letters-page .btn.pri { background: var(--plum); color: var(--bone); border-color: var(--plum); }
.nm-night-letters-page .btn.pri:hover { background: var(--plum-hi); border-color: var(--plum-hi); transform: translateY(-1px); }
.nm-night-letters-page .btn.pri:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.nm-night-letters-page .btn.ghost { background: transparent; color: var(--twilight); border-color: var(--linen-2); }
.nm-night-letters-page .btn.ghost:hover { border-color: var(--plum); color: var(--plum); }

/* WRITE / FORM */
.nl-write { position: relative; z-index: 2; padding: 80px 32px 100px; }
.nl-write-inner { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--linen); padding-top: 70px; }
.nl-write-intro { text-align: center; margin-bottom: 48px; }
.nl-write-eyebrow { font-family: var(--ff-m); font-size: 10.5px; font-weight: 500; letter-spacing: .32em; color: var(--bronze); text-transform: uppercase; margin-bottom: 18px; }
.nl-write-title { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.25; letter-spacing: -.02em; color: var(--twilight); margin-bottom: 16px; }
.nl-write-sub { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--mist); max-width: 34ch; margin: 0 auto; }
.lang-en .nl-write-sub { max-width: 42ch; }

/* MODE SWITCH */
.nl-mode-switch { display: flex; justify-content: center; margin-bottom: 38px; animation: moonReveal .8s var(--ease-moon) both; }
.nl-mode-track { display: flex; background: var(--bone-2); border: 1px solid var(--linen); border-radius: 999px; padding: 5px; position: relative; gap: 0; }
.nl-mode-btn { background: transparent; border: none; padding: 11px 26px; font-family: var(--ff-d); font-style: italic; font-weight: 400; font-size: 15px; color: var(--mist); cursor: pointer; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; border-radius: 999px; transition: color .35s ease; position: relative; z-index: 2; white-space: nowrap; }
.nl-mode-btn.active { color: var(--twilight); }
.nl-mode-btn svg { width: 14px; height: 14px; opacity: .7; transition: opacity .35s ease; }
.nl-mode-btn.active svg { opacity: 1; }
.nl-mode-indicator { position: absolute; top: 5px; bottom: 5px; background: var(--linen); border-radius: 999px; transition: transform .45s var(--ease-moon), width .45s var(--ease-moon); z-index: 1; left: 5px; }

/* PROMPTS */
.nl-prompts-label { font-family: var(--ff-m); font-size: 10px; font-weight: 500; letter-spacing: .24em; color: var(--mist); text-transform: uppercase; margin-bottom: 14px; text-align: center; }
.nl-prompts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.nl-prompt { background: transparent; border: 1px solid var(--linen); color: var(--bronze); padding: 9px 16px; font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 14px; line-height: 1.5; cursor: pointer; border-radius: 999px; transition: all .25s ease; }
.nl-prompt:hover { border-color: var(--plum); color: var(--plum); }

/* WRITE AREA */
.nl-write-area { background: var(--bone-2); border: 1px solid var(--linen); padding: 30px; margin-bottom: 40px; transition: border-color .35s ease, box-shadow .6s var(--ease-moon); }
.nl-write-area:focus-within { border-color: var(--plum); box-shadow: 0 0 0 1px var(--plum), 0 0 30px rgba(138,122,170,.15); }
.nl-write-textarea { width: 100%; background: transparent; border: none; outline: none; resize: vertical; min-height: 300px; font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 17.5px; line-height: 1.85; color: var(--twilight); cursor: text; }
.lang-en .nl-write-textarea { font-size: 17px; }
.nl-write-textarea::placeholder { color: var(--mist); opacity: .55; font-style: italic; }
.nl-write-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-family: var(--ff-m); font-size: 10px; letter-spacing: .18em; color: var(--mist); text-transform: uppercase; }

/* VOICE 簡化版 */
.nl-voice { display: none; flex-direction: column; align-items: center; padding: 48px 24px 32px; background: var(--bone-2); border: 1px solid var(--linen); margin-bottom: 40px; transition: border-color .35s ease, background .35s ease; }
.nl-voice.is-active { display: flex; }
.nl-voice.is-recording { border-color: var(--plum); box-shadow: 0 0 0 1px var(--plum), 0 0 40px rgba(138,122,170,.18); }
.nl-rec-btn-wrap { position: relative; margin-bottom: 24px; }
.nl-rec-btn { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--plum-hi) 0%, var(--plum) 55%, var(--plum-deep) 100%); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--bone); transition: transform .35s var(--ease-moon), box-shadow .35s var(--ease-moon); position: relative; z-index: 2; box-shadow: 0 0 0 1px rgba(168,181,201,.1), 0 0 32px rgba(138,122,170,.3), 0 0 64px rgba(138,122,170,.18), 0 12px 28px rgba(0,0,0,.32); }
.nl-rec-btn:hover { transform: scale(1.04); }
.nl-rec-btn svg { width: 34px; height: 34px; }
.nl-rec-btn::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(168,181,201,.25) 0%, transparent 70%); z-index: -1; animation: halo-breath 4s ease-in-out infinite; }
.nl-voice.is-recording .nl-rec-btn { background: radial-gradient(circle at 35% 30%, #D87070 0%, #B85050 55%, #8B3838 100%); animation: rec-pulse 1.6s ease-in-out infinite; }
.nl-voice.is-recording .nl-rec-btn svg { display: none; }
.nl-voice.is-recording .nl-rec-btn::after { content: ''; width: 32px; height: 32px; background: var(--bone); border-radius: 4px; }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(216,112,112,.3), 0 0 44px rgba(216,112,112,.5), 0 12px 28px rgba(0,0,0,.32); } 50% { box-shadow: 0 0 0 1px rgba(216,112,112,.5), 0 0 64px rgba(216,112,112,.7), 0 12px 28px rgba(0,0,0,.32); } }
.nl-rec-label { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 17px; color: var(--twilight); margin-bottom: 8px; text-align: center; line-height: 1.45; }
.nl-rec-hint { font-family: var(--ff-m); font-size: 10px; letter-spacing: .24em; color: var(--mist); text-transform: uppercase; text-align: center; margin-bottom: 8px; }
.nl-timer { font-family: var(--ff-num); font-weight: 400; font-size: 32px; color: var(--twilight); letter-spacing: .04em; margin-top: 14px; font-variant-numeric: tabular-nums; }
.nl-timer-max { font-family: var(--ff-m); font-size: 10px; letter-spacing: .22em; color: var(--mist); text-transform: uppercase; margin-top: 4px; }
.nl-rec-playback { width: 100%; max-width: 480px; margin-top: 24px; }

/* === Voice · Stage container（3-stage 切換）=== */
.nl-voice-stage { width: 100%; display: flex; flex-direction: column; align-items: center; }
.nl-voice-stage[hidden] { display: none !important; }

/* === Waveform（即時音量 bars）=== */
.nl-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 48px; margin-top: 18px; width: 100%; max-width: 380px; }
.nl-wave-bar { width: 3px; background: var(--plum); border-radius: 2px; transition: height .08s ease-out; min-height: 4px; }
.nl-voice.is-recording .nl-wave-bar { background: #D87070; }

/* === Playback Bar（pill 形 + 進度）=== */
.nl-playback { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.nl-playback-bar { display: flex; align-items: center; gap: 16px; width: 100%; background: var(--bone); border: 1px solid var(--linen); padding: 14px 18px; border-radius: 999px; }
.nl-play-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--plum); border: none; color: var(--bone); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .25s ease; padding: 0; }
.nl-play-btn:hover { background: var(--plum-hi); }
.nl-play-btn svg { width: 14px; height: 14px; }
.nl-play-progress { flex: 1; height: 3px; background: var(--linen); border-radius: 2px; position: relative; cursor: pointer; }
.nl-play-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--plum); border-radius: 2px; width: 0%; transition: width .1s linear; }
.nl-play-time { font-family: var(--ff-m); font-size: 11px; color: var(--mist); letter-spacing: .08em; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

/* === Voice Actions（重錄 / 刪除）=== */
.nl-voice-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.nl-voice-action { background: transparent; border: 1px solid var(--linen-2); padding: 9px 18px; font-family: var(--ff-m); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; color: var(--mist); text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .25s ease; }
.nl-voice-action:hover { border-color: var(--plum); color: var(--plum); }
.nl-voice-action svg { width: 12px; height: 12px; }

/* === Voice Supplementary Note（補一段文字）=== */
.nl-voice-note { width: 100%; max-width: 520px; margin-top: 32px; border-top: 1px solid var(--linen); padding-top: 24px; }
.nl-voice-note-label { font-family: var(--ff-m); font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--mist); text-transform: uppercase; margin-bottom: 10px; text-align: center; }
.nl-voice-note textarea { width: 100%; background: transparent; border: 1px solid var(--linen); padding: 14px 16px; font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--twilight); min-height: 80px; resize: vertical; outline: none; transition: border-color .25s ease; }
.nl-voice-note textarea:focus { border-color: var(--plum); }
.nl-voice-note textarea::placeholder { color: var(--mist); opacity: .5; font-style: italic; }

/* === Voice Denied（權限被拒）=== */
.nl-voice-denied { display: none; padding: 36px 24px; text-align: center; background: var(--bone-2); border: 1px solid var(--linen); margin-bottom: 40px; }
.nl-voice-denied.is-visible { display: block; }
.nl-voice-denied-icon { width: 42px; height: 42px; margin: 0 auto 18px; color: var(--bronze); opacity: .7; }
.nl-voice-denied-icon svg { width: 100%; height: 100%; }
.nl-voice-denied-title { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 19px; color: var(--twilight); margin-bottom: 10px; }
.nl-voice-denied-desc { font-family: var(--ff-cn); font-size: 13.5px; line-height: 1.7; color: var(--mist); }
.lang-en .nl-voice-denied-desc { font-family: var(--ff-en); }

/* SIGNATURE */
.nl-sig { display: grid; grid-template-columns: 1.2fr 1fr 1.8fr; gap: 14px; margin-bottom: 40px; }
.nl-sig-field { display: flex; flex-direction: column; gap: 8px; }
.nl-sig-field label { font-family: var(--ff-m); font-size: 9.5px; font-weight: 500; letter-spacing: .22em; color: var(--mist); text-transform: uppercase; }
.nl-sig-field input, .nl-sig-field select { background: transparent; border: none; border-bottom: 1px solid var(--linen); padding: 10px 0; font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 16px; color: var(--twilight); transition: border-color .25s ease; }
.nl-sig-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4 L6 8 L9 4' stroke='%238A92A2' fill='none' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 12px; padding-right: 20px; }
.nl-sig-field input:focus, .nl-sig-field select:focus { outline: none; border-bottom-color: var(--plum); }
.nl-sig-field input::placeholder { color: var(--mist); opacity: .5; font-style: italic; }

/* CONSENT / TIERS */
.nl-consent-label { font-family: var(--ff-m); font-size: 10.5px; font-weight: 500; letter-spacing: .28em; color: var(--bronze); text-transform: uppercase; margin-bottom: 20px; text-align: center; }
.nl-consent-intro { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--twilight); text-align: center; margin-bottom: 32px; max-width: 30ch; margin-left: auto; margin-right: auto; }
.lang-en .nl-consent-intro { max-width: 38ch; }
.nl-consent { display: flex; flex-direction: column; gap: 12px; margin-bottom: 44px; }
.nl-tier { background: var(--bone-2); border: 1px solid var(--linen); padding: 22px 24px; cursor: pointer; transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease; display: flex; gap: 18px; align-items: flex-start; position: relative; }
.nl-tier:hover { border-color: var(--linen-2); transform: translateX(2px); }
.nl-tier.is-checked { border-color: var(--plum); background: linear-gradient(135deg, var(--bone-2) 0%, rgba(138,122,170,.06) 100%); box-shadow: 0 0 0 1px var(--plum), 0 0 24px rgba(138,122,170,.18); }
.nl-tier-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linen-2); position: relative; flex-shrink: 0; margin-top: 2px; transition: border-color .25s ease; }
.nl-tier.is-checked .nl-tier-radio { border-color: var(--plum); }
.nl-tier-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--plum); transform: scale(0); opacity: 0; transition: transform .25s var(--ease-moon), opacity .25s var(--ease-moon); }
.nl-tier.is-checked .nl-tier-radio::after { transform: scale(1); opacity: 1; }
.nl-tier-content { flex: 1; }
.nl-tier-no { font-family: var(--ff-m); font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--bronze); text-transform: uppercase; margin-bottom: 4px; }
.nl-tier-title { font-family: var(--ff-d); font-style: italic; font-weight: 400; font-size: 17.5px; color: var(--twilight); margin-bottom: 6px; letter-spacing: -.01em; }
.nl-tier-desc { font-family: var(--ff-cn); font-size: 13.5px; line-height: 1.65; color: var(--mist); font-weight: 300; }
.lang-en .nl-tier-desc { font-family: var(--ff-en); }

/* EMAIL FIELD */
.nl-email-field { margin-bottom: 32px; display: none; flex-direction: column; gap: 8px; }
.nl-email-field.is-visible { display: flex; }
.nl-email-field label { font-family: var(--ff-m); font-size: 9.5px; font-weight: 500; letter-spacing: .22em; color: var(--mist); text-transform: uppercase; }
.nl-email-field .hint { text-transform: none; letter-spacing: 0; color: var(--bronze); opacity: .6; margin-left: 8px; font-family: var(--ff-cn); }
.nl-email-field input { background: transparent; border: none; border-bottom: 1px solid var(--linen); padding: 10px 0; font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 16px; color: var(--twilight); }
.nl-email-field input:focus { outline: none; border-bottom-color: var(--plum); }

/* SUBMIT */
.nl-submit-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.nl-submit-note { font-family: var(--ff-d); font-style: italic; font-size: 13.5px; color: var(--mist); text-align: center; margin-top: 18px; }
.nl-error { color: #D87070; font-family: var(--ff-cn); font-size: 13px; text-align: center; margin-top: 16px; display: none; }
.nl-error.is-visible { display: block; }

/* CAROUSEL / PODCAST 簡化版 */
.nl-carousel-section, .nl-podcast-section { padding: 80px 32px; }
.nl-carousel-title, .nl-podcast-title { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 32px; color: var(--twilight); text-align: center; margin: 0 0 48px; }
.nl-carousel-letters { max-width: 720px; margin: 0 auto; display: grid; gap: 24px; }
.nl-carousel-item { background: var(--bone-2); padding: 32px; border: 1px solid var(--linen); }
.nl-carousel-content { font-family: var(--ff-d); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.85; color: var(--twilight); margin-bottom: 20px; }
.nl-carousel-meta { font-family: var(--ff-m); font-size: 10px; letter-spacing: .22em; color: var(--bronze); text-transform: uppercase; }
.nl-podcast-section { text-align: center; }
.nl-podcast-inner { max-width: var(--max); margin: 0 auto; }
.nl-podcast-eyebrow { font-family: var(--ff-m); font-size: 11px; letter-spacing: .28em; color: var(--plum); text-transform: uppercase; margin-bottom: 20px; }
.nl-podcast-desc { font-family: var(--ff-cn); font-size: 15px; line-height: 1.8; color: var(--mist); max-width: 42ch; margin: 0 auto 32px; }
.nl-podcast-platforms { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.nl-podcast-platform { color: var(--bronze); font-family: var(--ff-m); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.nl-podcast-platform:hover { color: var(--plum); }

/* MOBILE */
@media (max-width: 720px) {
    .nl-hero { padding: 80px 20px 40px; }
    .nl-hero-ctas { flex-direction: column; width: 100%; max-width: 280px; gap: 12px; }
    .nl-hero-ctas .btn { width: 100%; }
    .nl-write-area { padding: 24px 22px; }
    .nl-write-textarea { font-size: 16.5px; min-height: 260px; }
    .nl-sig { grid-template-columns: 1fr; gap: 18px; }
    .nl-tier { padding: 18px 20px; gap: 14px; }
    .nl-tier-title { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .nm-night-letters-page *, .nm-night-letters-page *::before, .nm-night-letters-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ═══════════════════════════════════════════════════════════════
   淺色模式（v0.6.3）
   
   主題用 <html data-theme="light"> 切換。
   外掛 CSS 自己定義變數時，覆蓋成淺色版。
═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .nm-night-letters-page {
    --bone:       #DEE1E6;
    --bone-2:     #D8DBE1;
    --bone-3:     #D2D5DC;
    --linen:      #C2C6CE;
    --linen-2:    #B0B4BE;
    --mist:       #5E6478;
    --mist-soft:  #8990A0;
    --twilight:   #1A2030;
    --twilight-2: #2A3142;
    --plum:       #5C6182;
    --plum-hi:    #6D729A;
    --plum-deep:  #4A4E6E;
    --bronze:     #5E6478;
    --bronze-hi:  #7A8190;
}


/* ─── Starfield 在淺色模式：把白點改成淡灰點，星空仍在但收斂 ─── */
[data-theme="light"] .nm-night-letters-page .nl-starfield {
    opacity: 0.45;
    filter: invert(0.85) brightness(0.7);
}


/* ─── Moon glow 在淺色模式：降低光暈強度（避免過亮） ─── */
[data-theme="light"] .nm-night-letters-page .moon-glow,
[data-theme="light"] .nm-night-letters-page [class*="-glow"] {
    --glow-strength: 0.25;
}


/* ─── 月亮 cursor 在淺色模式：紫色變深紫 ─── */
[data-theme="light"] .nm-night-letters-page .moon-cursor {
    background: radial-gradient(circle, var(--plum-deep) 0%, transparent 70%);
    mix-blend-mode: multiply;
}


/* ─── Carousel / Podcast 區塊邊框在淺色模式：更明確 ─── */
[data-theme="light"] .nm-night-letters-page .nl-carousel-item,
[data-theme="light"] .nm-night-letters-page .nl-podcast-card {
    border-color: var(--linen);
    box-shadow: 0 2px 12px rgba(26, 32, 48, 0.06);
}


/* ─── Form 區塊在淺色模式：input 邊框更明確 ─── */
[data-theme="light"] .nm-night-letters-page input,
[data-theme="light"] .nm-night-letters-page textarea,
[data-theme="light"] .nm-night-letters-page select {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--linen);
}

[data-theme="light"] .nm-night-letters-page input:focus,
[data-theme="light"] .nm-night-letters-page textarea:focus,
[data-theme="light"] .nm-night-letters-page select:focus {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--plum);
}


/* ─── Tier 按鈕在淺色模式 ─── */
[data-theme="light"] .nm-night-letters-page .nl-tier:hover {
    background: rgba(92, 97, 130, 0.06);
}

[data-theme="light"] .nm-night-letters-page .nl-tier.is-selected {
    background: rgba(92, 97, 130, 0.12);
    box-shadow: 0 0 0 1px var(--plum);
}


/* ─── 平滑過渡（切換深淺色時） ─── */
.nm-night-letters-page,
.nm-night-letters-page * {
    transition: background-color .5s var(--ease-moon),
                color .5s var(--ease-moon),
                border-color .5s var(--ease-moon);
}


/* ═══════════════════════════════════════════════════════════════
   v0.7.2：1:1 加碼 checkbox（夜信頁，獨立於 tier 1-3）
═══════════════════════════════════════════════════════════════ */

.nm-night-letters-page .nl-oneonone {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid var(--linen-2);
    border-radius: 10px;
    background: rgba(15, 20, 25, 0.4);
    cursor: pointer;
    transition: all .3s var(--ease-moon);
}

.nm-night-letters-page .nl-oneonone:hover {
    border-color: var(--bronze);
    background: rgba(168, 181, 201, 0.06);
}

.nm-night-letters-page .nl-oneonone input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nm-night-letters-page .nl-oneonone-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 1.5px solid var(--linen-2);
    border-radius: 5px;
    background: rgba(15, 20, 25, 0.5);
    position: relative;
    transition: all .2s ease;
}

.nm-night-letters-page .nl-oneonone input:checked ~ .nl-oneonone-box {
    background: var(--plum);
    border-color: var(--plum);
}

.nm-night-letters-page .nl-oneonone input:checked ~ .nl-oneonone-box::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.nm-night-letters-page .nl-oneonone-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.nm-night-letters-page .nl-oneonone-no {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--plum);
    margin-bottom: 2px;
}

.nm-night-letters-page .nl-oneonone-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--twilight);
    line-height: 1.4;
}

.nm-night-letters-page .nl-oneonone-desc {
    font-size: 13px;
    color: var(--mist);
    line-height: 1.6;
}

/* 勾選後外框也高亮 */
.nm-night-letters-page .nl-oneonone:has(input:checked) {
    border-color: var(--plum);
    background: rgba(138, 122, 170, 0.08);
    box-shadow: 0 0 0 1px var(--plum);
}

/* 淺色模式 */
[data-theme="light"] .nm-night-letters-page .nl-oneonone {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .nm-night-letters-page .nl-oneonone:hover {
    background: rgba(92, 97, 130, 0.05);
}

[data-theme="light"] .nm-night-letters-page .nl-oneonone:has(input:checked) {
    background: rgba(92, 97, 130, 0.1);
}

[data-theme="light"] .nm-night-letters-page .nl-oneonone-box {
    background: rgba(255, 255, 255, 0.7);
}


/* ═══════════════════════════════════════════════════════════════
   v0.8.2：表單間距改善 + 字數計數 + 法律 disclaimer
═══════════════════════════════════════════════════════════════ */

/* 加碼框獨立後給足下方間距 */
.nm-night-letters-page .nl-oneonone {
    margin-bottom: 32px;
}

/* email 欄位上方間距 */
.nm-night-letters-page .nl-email-field {
    margin-top: 24px;
}

/* submit 上方間距（拉開 email 跟按鈕） */
.nm-night-letters-page .nl-submit-row {
    margin-top: 36px;
}

/* 字數計數靠右、變色提示 */
.nm-night-letters-page .nl-write-count {
    font-variant-numeric: tabular-nums;
    color: var(--mist);
    transition: color .3s ease;
}

.nm-night-letters-page .nl-write-count.is-warning {
    color: #D4A862;  /* 接近上限：琥珀色 */
}

.nm-night-letters-page .nl-write-count.is-danger {
    color: #C97070;  /* 已達上限：紅 */
    font-weight: 500;
}

/* 法律 disclaimer */
.nm-night-letters-page .nl-legal-disclaimer {
    max-width: 560px;
    margin: 28px auto 0;
    text-align: center;
    font-family: var(--ff-m);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: .02em;
    color: var(--mist);
    opacity: .65;
    font-style: italic;
}

.nm-night-letters-page .nl-legal-disclaimer p {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.7;
}

.nm-night-letters-page .nl-legal-disclaimer p:last-child {
    margin-bottom: 0;
}

.nm-night-letters-page .nl-legal-links {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid rgba(168, 181, 201, .12);
}

.nm-night-letters-page .nl-legal-disclaimer a {
    color: var(--mist);
    text-decoration: underline;
    text-decoration-color: rgba(168, 181, 201, .35);
    text-underline-offset: 3px;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.nm-night-letters-page .nl-legal-disclaimer a:hover {
    color: var(--plum);
    text-decoration-color: var(--plum);
}

/* 淺色模式 */
[data-theme="light"] .nm-night-letters-page .nl-legal-disclaimer {
    opacity: .55;
}

[data-theme="light"] .nm-night-letters-page .nl-legal-links {
    border-top-color: rgba(92, 97, 130, .15);
}

/* ── v0.11.0：貓頭鷹 coming soon 卡（不可選）── */
.nl-tier.is-disabled { opacity: .45; pointer-events: none; cursor: default; }
.nl-tier.is-disabled .nl-tier-radio { border-style: dashed; }


/* ═══════════════════════════════════════════════════════════════
   v0.15.3 · 同意勾選（送出按鈕上方）
═══════════════════════════════════════════════════════════════ */
.nl-agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 18px;
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.65;
    opacity: .8;
    transition: opacity .2s ease;
}
.nl-agree:hover { opacity: 1; }

.nl-agree input[type="checkbox"] {
    flex: none;
    margin-top: 2px;
    width: 14px;
    height: 14px;
    accent-color: #8A7AAA;
    cursor: pointer;
}

.nl-agree a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* FAB 版本再縮一點 */
.nm-fab-agree { font-size: 12px; gap: 8px; margin: 2px 0 14px; }

/* v0.15.11 · 審核說明（輸入框下方）*/
.nl-review-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.75;
    opacity: .58;
}