/* =========================================================
   阿易说 · 名字风物签「一名两岸」
   暗底鎏金 / 宣纸名帖 / 克制留白 / 1rem = 100px @750
   ========================================================= */

.nm-body {
    background-color: #120b06;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 8%, rgba(231,194,122,0.55), transparent),
        radial-gradient(1px 1px at 38% 19%, rgba(255,255,255,0.40), transparent),
        radial-gradient(1.5px 1.5px at 68% 12%, rgba(231,194,122,0.44), transparent),
        radial-gradient(1px 1px at 88% 36%, rgba(255,255,255,0.32), transparent),
        radial-gradient(1.5px 1.5px at 20% 62%, rgba(231,194,122,0.30), transparent),
        radial-gradient(120px 130px at 50% 6%, rgba(231,194,122,0.07), transparent),
        linear-gradient(180deg, #1a0f08 0%, #120b06 55%, #0c0704 100%);
    background-attachment: fixed;
    padding-bottom: 0.4rem;
}

.nm-app { position: relative; min-height: 12rem; padding-top: 1.1rem; }

/* ---------- 视图切换 ---------- */
.nm-view { display: none; -webkit-animation: nmFade .55s ease both; animation: nmFade .55s ease both; }
.nm-view.active { display: block; }
@keyframes nmFade { from { opacity: 0; transform: translateY(.16rem); } to { opacity: 1; transform: none; } }

/* ---------- 通用 ---------- */
.nm-btn {
    display: block; box-sizing: border-box; width: 100%;
    font-size: .30rem; letter-spacing: .06em; text-align: center;
    padding: .24rem .2rem; border-radius: .08rem; cursor: pointer;
    font-family: inherit; -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .25s ease, box-shadow .25s ease;
    border: none;
}
.nm-btn:active { transform: scale(.975); }
.nm-btn-gold {
    color: #241710; font-weight: bold;
    background: linear-gradient(135deg, #e7c27a 0%, #d9b06a 55%, #c39451 100%);
    box-shadow: 0 .06rem .28rem rgba(217,176,106,.24), inset 0 1px 0 rgba(255,255,255,.35);
}
.nm-btn-ghost {
    color: #e7c27a; background: rgba(217,176,106,.06);
    border: 1px solid rgba(217,176,106,.45);
}
.nm-btn-ghost:active { background: rgba(217,176,106,.16); }
.nm-btn.sm { font-size: .23rem; padding: .18rem .1rem; }
.nm-mini {
    font-family: inherit; font-size: .21rem; color: #e7c27a;
    background: rgba(217,176,106,.09); border: 1px solid rgba(217,176,106,.38);
    border-radius: .06rem; padding: .13rem .16rem; cursor: pointer;
}
.nm-mini.ghost { color: #a8895f; background: none; border-color: rgba(217,176,106,.22); }
.nm-disclaimer {
    font-size: .19rem; color: #7d6245; text-align: center;
    line-height: 1.7; padding: .32rem .4rem .2rem;
}
.nm-sec-hd {
    font-size: .23rem; letter-spacing: .22em; color: #c9a970;
    text-align: center; margin: .46rem .4rem .22rem;
}
.nm-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .1rem .4rem .3rem;
}
.nm-back {
    font-family: inherit; font-size: .23rem; color: #a8895f;
    background: none; border: none; padding: .1rem 0; cursor: pointer;
}
.nm-topbar-title { font-size: .24rem; letter-spacing: .3em; color: #c9a970; }

/* ---------- 1. 封面 ---------- */
.nm-cover-art { position: relative; width: 100%; overflow: hidden; }
.nm-cover-art > img:first-child { width: 100%; display: block; opacity: .92; }
.nm-cover-badge {
    position: absolute; width: 2.05rem; height: 2.05rem;
    left: 50%; top: 46%; transform: translate(-50%, -50%);
    border-radius: 50%; box-shadow: 0 0 .5rem rgba(0,0,0,.55);
}
.nm-cover-art::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.1rem;
    background: linear-gradient(180deg, rgba(18,11,6,0), rgba(18,11,6,.76) 58%, #120b06 100%);
    pointer-events: none;
}
.nm-cover-copy { position: relative; margin-top: -1.0rem; padding: 0 .6rem; z-index: 2; text-align: center; }
.nm-cover-sub { font-size: .21rem; letter-spacing: .32em; color: #c9a970; margin-bottom: .24rem; }
.nm-cover-title {
    font-size: .70rem; letter-spacing: .16em; color: #f3e4c0;
    font-family: "Songti SC", "SimSun", serif; line-height: 1.25;
    text-shadow: 0 .04rem .3rem rgba(231,194,122,.22);
}
.nm-cover-line {
    font-size: .25rem; color: #e7c27a; letter-spacing: .08em;
    margin: .22rem 0 .28rem; line-height: 1.6;
}
.nm-cover-desc { font-size: .22rem; color: #a8895f; line-height: 1.9; margin-bottom: .46rem; }
.nm-cover-btns { display: flex; flex-direction: column; gap: .2rem; padding: 0 .3rem; }

/* ---------- 2. 输入 ---------- */
.nm-dirs { display: flex; gap: .14rem; padding: .1rem .36rem .34rem; }
.nm-dir {
    flex: 1 1 0; min-width: 0; box-sizing: border-box;
    background: rgba(217,176,106,.045); border: 1px solid rgba(217,176,106,.22);
    border-radius: .1rem; padding: .22rem .08rem; cursor: pointer;
    font-family: inherit; text-align: center; color: #a8895f;
}
.nm-dir b { display: block; font-size: .22rem; font-weight: 500; color: #c9a970; margin-bottom: .1rem; white-space: nowrap; }
.nm-dir span { display: block; font-size: .17rem; line-height: 1.5; }
.nm-dir.active { border-color: rgba(231,194,122,.8); background: rgba(231,194,122,.11); box-shadow: inset 0 0 .2rem rgba(231,194,122,.08); }
.nm-dir.active b { color: #f3e4c0; }

.nm-field { padding: .16rem .4rem; }
.nm-field label { display: block; font-size: .21rem; color: #a8895f; letter-spacing: .1em; margin-bottom: .14rem; }
.nm-field input {
    box-sizing: border-box; width: 100%; font-family: inherit; font-size: .34rem;
    color: #f3e4c0; background: rgba(0,0,0,.24);
    border: 1px solid rgba(217,176,106,.38); border-radius: .08rem;
    padding: .22rem .24rem; outline: none; letter-spacing: .06em;
}
.nm-field input:focus { border-color: #e7c27a; }
.nm-field input::placeholder { color: #6d5338; font-size: .27rem; letter-spacing: 0; }

.nm-usage { display: flex; align-items: center; flex-wrap: wrap; gap: .12rem; padding: .26rem .4rem .1rem; }
.nm-usage-label { font-size: .20rem; color: #7d6245; margin-right: .06rem; }
.nm-usage-t {
    font-family: inherit; font-size: .20rem; color: #a8895f;
    background: none; border: 1px solid rgba(217,176,106,.24);
    border-radius: .3rem; padding: .09rem .2rem; cursor: pointer;
}
.nm-usage-t.active { color: #241710; background: #d9b06a; border-color: #d9b06a; }
.nm-submit { margin: .36rem .4rem .1rem; width: calc(100% - .8rem); }
.nm-err { min-height: .32rem; font-size: .20rem; color: #d98b73; text-align: center; padding: .04rem .4rem; }

.nm-desk-toggle {
    display: flex; align-items: center; gap: .14rem; width: calc(100% - .8rem);
    margin: .18rem .4rem 0; padding: .2rem .22rem; box-sizing: border-box;
    font-family: inherit; font-size: .22rem; color: #a8895f;
    background: rgba(217,176,106,.045); border: 1px solid rgba(217,176,106,.2);
    border-radius: .08rem; cursor: pointer; text-align: left;
}
.nm-desk-dot { width: .1rem; height: .1rem; border-radius: 50%; background: #5d4830; flex: none; }
.nm-desk-dot.on { background: #e7c27a; box-shadow: 0 0 .12rem rgba(231,194,122,.7); }
.nm-desk-arrow { margin-left: auto; font-size: .3rem; transition: transform .25s ease; }
.nm-desk-toggle.open .nm-desk-arrow { transform: rotate(90deg); }
.nm-desk { display: none; margin: .12rem .4rem 0; padding: .26rem .24rem; box-sizing: border-box;
    background: rgba(0,0,0,.22); border: 1px solid rgba(217,176,106,.18); border-radius: .08rem; }
.nm-desk.open { display: block; }
.nm-desk-note { font-size: .19rem; color: #8d704d; line-height: 1.8; margin: 0 0 .2rem; }
.nm-desk-warn { font-size: .19rem; color: #c79b6a; line-height: 1.7; padding: .16rem .18rem;
    background: rgba(217,176,106,.07); border-left: 2px solid rgba(217,176,106,.5); margin-bottom: .22rem; }
.nm-switch { display: flex; align-items: center; gap: .14rem; font-size: .22rem; color: #e7c27a; margin-bottom: .2rem; }
.nm-switch input { width: .32rem; height: .32rem; accent-color: #d9b06a; }
.nm-desk-row { display: flex; align-items: center; gap: .14rem; margin-bottom: .16rem; }
.nm-desk-row label { width: 1.7rem; flex: none; font-size: .19rem; color: #a8895f; }
.nm-desk-row input, .nm-desk-row select {
    flex: 1 1 0; min-width: 0; box-sizing: border-box; font-family: inherit;
    font-size: .20rem; color: #f3e4c0; background: rgba(0,0,0,.3);
    border: 1px solid rgba(217,176,106,.28); border-radius: .06rem; padding: .14rem .14rem; outline: none;
}
.nm-desk-row select option { background: #1a1008; color: #f3e4c0; }
.nm-desk-actions { display: flex; flex-wrap: wrap; gap: .12rem; margin: .22rem 0 .1rem; }
.nm-desk-hint { font-size: .18rem; color: #7d6245; line-height: 1.7; margin-top: .12rem; }
.nm-desk-presets { display: flex; flex-wrap: wrap; gap: .1rem; margin-top: .16rem; }
.nm-desk-presets button { font-family: inherit; font-size: .18rem; color: #8d704d;
    background: none; border: 1px solid rgba(217,176,106,.18); border-radius: .3rem;
    padding: .08rem .16rem; cursor: pointer; }

/* ---------- 3. 落墨 ---------- */
.nm-ink-line { font-size: .23rem; color: #c9a970; text-align: center; letter-spacing: .1em; padding: .1rem .5rem .36rem; }
.nm-ink-chars { display: flex; flex-wrap: wrap; justify-content: center; gap: .18rem; padding: 0 .4rem; }
.nm-ink-char {
    width: 1.5rem; min-height: 2.1rem; box-sizing: border-box; text-align: center;
    background: linear-gradient(160deg, rgba(239,228,204,.10), rgba(239,228,204,.03));
    border: 1px solid rgba(217,176,106,.32); border-radius: .08rem;
    padding: .18rem .08rem; -webkit-animation: nmInk .75s ease both; animation: nmInk .75s ease both;
}
.nm-ink-char .c { display: block; font-size: .62rem; color: #f3e4c0; font-family: "Songti SC", "SimSun", serif; line-height: 1.2; }
.nm-ink-char .t { display: block; font-size: .17rem; color: #c9a970; margin-top: .1rem; }
.nm-ink-char .f { display: block; font-size: .16rem; color: #8d704d; line-height: 1.5; margin-top: .08rem; }
.nm-ink-char.latin { width: auto; min-width: 2.2rem; padding: .28rem .2rem; }
.nm-ink-char.latin .c { font-size: .34rem; letter-spacing: .04em; }
.nm-ink-char.blank { border-style: dashed; opacity: .65; }
@keyframes nmInk {
    from { opacity: 0; transform: translateY(.24rem) scale(.94); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
.nm-ink-wait { display: none; text-align: center; padding: .6rem .5rem .3rem; }
.nm-ink-wait.on { display: block; }
.nm-ink-lamp { display: flex; justify-content: center; gap: .12rem; margin-bottom: .26rem; }
.nm-ink-lamp i { width: .1rem; height: .1rem; border-radius: 50%; background: #e7c27a;
    -webkit-animation: nmBlink 1.2s infinite ease-in-out; animation: nmBlink 1.2s infinite ease-in-out; }
.nm-ink-lamp i:nth-child(2) { animation-delay: .2s; -webkit-animation-delay: .2s; }
.nm-ink-lamp i:nth-child(3) { animation-delay: .4s; -webkit-animation-delay: .4s; }
@keyframes nmBlink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
.nm-ink-wait-t { font-size: .23rem; color: #c9a970; margin-bottom: .12rem; }
.nm-ink-wait-s { font-size: .19rem; color: #7d6245; margin-bottom: .3rem; }

/* ---------- 4. 名帖（宣纸） ---------- */
.nm-paper {
    position: relative; box-sizing: border-box; width: calc(100% - .8rem);
    margin: .14rem .4rem .1rem; min-height: 4.5rem;
    background-color: #ece0c6;
    background-image:
        radial-gradient(1px 1px at 18% 24%, rgba(120,90,50,.16), transparent),
        radial-gradient(1px 1px at 72% 62%, rgba(120,90,50,.13), transparent),
        linear-gradient(150deg, #f2e8d2 0%, #e8dabd 52%, #e2d2b2 100%);
    border: 1px solid rgba(120,90,50,.32); border-radius: .05rem;
    box-shadow: 0 .12rem .42rem rgba(0,0,0,.5), inset 0 0 .5rem rgba(120,90,50,.10);
    padding: .42rem .4rem; display: flex; overflow: hidden;
}
.nm-paper-corner { position: absolute; width: .26rem; height: .26rem; border: 1px solid rgba(150,110,60,.55); }
.nm-paper-corner.tl { left: .12rem; top: .12rem; border-right: none; border-bottom: none; }
.nm-paper-corner.tr { right: .12rem; top: .12rem; border-left: none; border-bottom: none; }
.nm-paper-corner.bl { left: .12rem; bottom: .12rem; border-right: none; border-top: none; }
.nm-paper-corner.br { right: .12rem; bottom: .12rem; border-left: none; border-top: none; }
.nm-paper-vert {
    writing-mode: vertical-rl; text-orientation: upright;
    font-family: "Songti SC", "SimSun", serif; font-size: .52rem;
    color: #2a1a10; letter-spacing: .18em; line-height: 1.5;
    border-right: 1px solid rgba(120,90,50,.28); padding-right: .28rem;
    min-width: 1.1rem; max-height: 3.5rem;
}
.nm-paper-side { flex: 1 1 0; padding-left: .3rem; padding-top: .1rem; min-width: 0; }
.nm-paper-sub { font-size: .18rem; letter-spacing: .24em; color: #8a6a42; margin-bottom: .24rem; }
.nm-paper-name { font-family: "Songti SC", "SimSun", serif; font-size: .46rem; color: #2a1a10; line-height: 1.3; word-break: break-word; }
.nm-paper-en { font-family: Georgia, "Times New Roman", serif; font-size: .34rem; color: #6b4a2a; margin-top: .16rem; line-height: 1.35; word-break: break-word; }
.nm-paper-poem { font-size: .21rem; color: #7a5c38; line-height: 1.8; margin-top: .38rem; }
.nm-paper-poem em { display: block; font-style: italic; font-family: Georgia, serif; color: #8a6a42; }
.nm-seal {
    position: absolute; right: .34rem; bottom: .34rem;
    width: .78rem; height: .78rem; box-sizing: border-box;
    background: #a5392a; border: 2px solid #8e2c20; border-radius: .05rem;
    color: #f6e7cf; font-family: "Songti SC", "SimSun", serif; font-size: .42rem;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-6deg); box-shadow: 0 .03rem .1rem rgba(80,20,10,.28);
    -webkit-animation: nmStamp .5s cubic-bezier(.2,1.6,.4,1) both; animation: nmStamp .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes nmStamp { from { opacity: 0; transform: rotate(-6deg) scale(1.7); } to { opacity: .95; transform: rotate(-6deg) scale(1); } }

.nm-opening { font-size: .25rem; color: #e6d3b0; line-height: 2; padding: .4rem .5rem .16rem; }
.nm-source-tag { font-size: .18rem; color: #7d6245; text-align: center; padding: 0 .5rem .1rem; }
.nm-picks { display: flex; flex-direction: column; gap: .16rem; padding: 0 .4rem; }
.nm-pick {
    position: relative; text-align: left; box-sizing: border-box; width: 100%;
    background: rgba(239,228,204,.05); border: 1px solid rgba(217,176,106,.24);
    border-radius: .08rem; padding: .22rem .26rem; cursor: pointer; font-family: inherit;
}
.nm-pick.on { border-color: #e7c27a; background: rgba(231,194,122,.10); }
.nm-pick-k { font-size: .17rem; color: #a8895f; letter-spacing: .16em; }
.nm-pick-n { font-size: .32rem; color: #f3e4c0; margin: .08rem 0 .1rem; font-family: Georgia, "Songti SC", serif; }
.nm-pick-r { font-size: .20rem; color: #b99a70; line-height: 1.8; }
.nm-pick-mark { position: absolute; right: .22rem; top: .22rem; font-size: .18rem; color: #e7c27a; }

.nm-tea { display: flex; align-items: center; gap: .24rem; margin: .4rem .4rem 0; padding: .22rem;
    background: rgba(217,176,106,.045); border: 1px solid rgba(217,176,106,.2); border-radius: .1rem; }
.nm-tea img { width: 1.1rem; height: 1.1rem; border-radius: 50%; object-fit: cover; flex: none;
    border: 1px solid rgba(231,194,122,.4); }
.nm-tea-txt { min-width: 0; }
.nm-tea-k { font-size: .17rem; color: #8d704d; letter-spacing: .2em; }
.nm-tea-n { font-size: .25rem; color: #e7c27a; margin: .08rem 0; }
.nm-tea-l { font-size: .19rem; color: #a8895f; line-height: 1.6; }
.nm-closing { font-size: .22rem; color: #a8895f; line-height: 1.9; padding: .4rem .5rem .2rem; }
.nm-actions { padding: .2rem .4rem .1rem; }
.nm-actions-row { display: flex; gap: .14rem; margin-top: .16rem; }
.nm-actions-row .nm-btn { flex: 1 1 0; }

/* ---------- 名帖弹层 ---------- */
.nm-modal { display: none; position: fixed; inset: 0; z-index: 9999; }
.nm-modal.open { display: block; }
.nm-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.nm-modal-box {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: min(86vw, 4.2rem); box-sizing: border-box; padding: .24rem;
    background: #1a1008; border: 1px solid rgba(231,194,122,.4); border-radius: .14rem;
    max-height: 92vh; overflow-y: auto;
}
.nm-modal-hd { display: flex; align-items: center; justify-content: space-between;
    font-size: .24rem; color: #e7c27a; margin-bottom: .18rem; }
.nm-modal-hd button { font-size: .36rem; color: #a8895f; background: none; border: none; cursor: pointer; line-height: 1; }
.nm-modal-canvas canvas { display: block; width: 100%; height: auto; border-radius: .08rem; }
.nm-modal-btns { display: flex; gap: .12rem; margin-top: .2rem; }
.nm-modal-btns .nm-btn { flex: 1 1 0; }
.nm-modal-tip { font-size: .17rem; color: #7d6245; text-align: center; margin-top: .16rem; line-height: 1.6; }

@media (max-width: 360px) {
    .nm-cover-title { font-size: .60rem; }
    .nm-dir b { font-size: .19rem; }
    .nm-paper-vert { font-size: .44rem; }
}