/* Nanomster Club · 方向 A（会员卡）样式
   ------------------------------------------------------------------
   · 只用 nm- 前缀，不覆盖任何既有类名。
   · 颜色尽量走 styles.css / themes.css 的 --friend-* 变量，所以 warm / classic
     两套主题都能跟着变；只有卡面本身是固定的深色，那是卡片该有的样子。
   · 同一份样式给两个地方用：profile 页的入口卡（.nm-entry）和 Club 主页（.nm-page）。
   ------------------------------------------------------------------ */

:root {
  --nm-ink: #402738;
  --nm-muted: #79626b;
  --nm-line: #ecdac1;
  --nm-surface: #fffdf7;
  --nm-cream: #fff8ea;
  --nm-sand: #f1e8db;
  --nm-brick: #b7482b;
  --nm-brick-deep: #a53e26;
  --nm-honey: #f9d590;
  --nm-honey-soft: #f9e4bb;
  --nm-good: #2c6a4e;
  --nm-good-soft: #e2efe7;
  --nm-wait: #8a5a1f;
  --nm-wait-soft: #f5ebd9;
}
html[data-theme="classic"] {
  --nm-ink: #1a1a2e;
  --nm-muted: #777993;
  --nm-line: rgba(184, 193, 222, .45);
  --nm-surface: #ffffff;
  --nm-cream: #f5f7fc;
  --nm-sand: #eef1f9;
}

/* ================= 会员卡卡面 ================= */
.nm-card {
  --nm-foil: #f0c264;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 18px;
  color: #ffeed2;
  background: linear-gradient(145deg, #4a2b3c 0%, #2f1c29 58%, #7a3620 100%);
  box-shadow: 0 18px 38px -18px rgba(64, 32, 24, .55);
  text-align: left;
}
.nm-card::after {
  content: "";
  position: absolute;
  width: 190px; height: 190px;
  right: -72px; top: -66px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
}
.nm-t-bronze  { --nm-foil: #d79a68; }
.nm-t-silver  { --nm-foil: #d3dae3; }
.nm-t-gold    { --nm-foil: #f0c264; }
.nm-t-plat    { --nm-foil: #e2eaf2; }
.nm-t-diamond { --nm-foil: #a8d3ff; }
.nm-t-black   { --nm-foil: #cfd3da; background: linear-gradient(145deg, #2b2730 0%, #16131a 60%, #3d2a24 100%); }
.nm-t-partner { --nm-foil: #f5d87a; background: linear-gradient(145deg, #241d13 0%, #14110d 55%, #5a4318 100%); }

.nm-card-brand {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .2em; color: var(--nm-foil);
}
.nm-card-tier {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 2px;
  font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  color: #ffedcf;
}
.nm-card-tier em { font-style: normal; font-size: 22px; }
.nm-card-holder { font-size: 10.5px; letter-spacing: .04em; color: #e0c3b7; }
.nm-card-no {
  margin-top: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; letter-spacing: .18em; color: var(--nm-foil);
  overflow-wrap: anywhere;
}
.nm-card-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: 12px;
  font-size: 9px; letter-spacing: .08em; color: #cfae9f;
}
.nm-card-title {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #ffedcf;
}

/* 卡面上的小进度条 */
.nm-card .nm-track { background: rgba(255, 237, 207, .22); }
.nm-card .nm-track i { background: var(--nm-foil); }

/* ================= 通用零件 ================= */
.nm-track { height: 7px; border-radius: 999px; background: #e8dccd; overflow: hidden; }
.nm-track i { display: block; height: 100%; border-radius: 999px; background: var(--nm-brick); transition: width .5s ease; }
@media (prefers-reduced-motion: reduce) { .nm-track i { transition: none; } }

.nm-panel {
  background: var(--nm-surface);
  border: 1px solid var(--nm-line);
  border-radius: 18px;
  padding: 16px;
  color: var(--nm-ink);
}
.nm-eyebrow {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em;
  color: var(--nm-brick-deep);
}
.nm-row { display: flex; align-items: center; gap: 10px; }
.nm-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nm-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--nm-sand); color: var(--nm-brick-deep);
  white-space: nowrap;
}
.nm-chip-live { background: var(--nm-good-soft); color: var(--nm-good); }
.nm-chip-soon { background: var(--nm-wait-soft); color: var(--nm-wait); }
.nm-chip-lock { background: rgba(125, 110, 115, .12); color: var(--nm-muted); }
.nm-honest { display: block; font-size: 11px; line-height: 1.6; color: var(--nm-muted); }

.nm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 20px;
  border: 0; border-radius: 13px;
  background: var(--nm-brick); color: #fff9ef;
  font: 700 13.5px inherit; font-family: inherit;
  cursor: pointer; text-decoration: none;
}
.nm-btn-ghost { background: var(--nm-sand); color: var(--nm-brick-deep); }
.nm-btn:disabled { opacity: .45; cursor: not-allowed; }
.nm-btn:focus-visible, .nm-page a:focus-visible, .nm-entry a:focus-visible {
  outline: 3px solid var(--nm-brick); outline-offset: 3px;
}

/* ================= 成长值 ================= */
.nm-progress { display: grid; gap: 10px; }
.nm-progress-head b { font-size: 13px; font-weight: 700; }
.nm-breakdown { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-breakdown span {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--nm-sand); color: var(--nm-muted);
}
.nm-ladder { display: flex; flex-wrap: wrap; gap: 7px; }
.nm-step {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: var(--nm-sand); opacity: .4;
}
.nm-step.on { opacity: 1; background: var(--nm-honey-soft); }
.nm-step.nm-lock { filter: grayscale(1); }

/* ================= 徽章 ================= */
.nm-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.nm-badge {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 11px 6px;
  border: 1px dashed var(--nm-line); border-radius: 14px;
  background: var(--nm-cream);
}
.nm-badge i { font-style: normal; font-size: 21px; filter: grayscale(1); opacity: .35; }
.nm-badge b { font-size: 11px; font-weight: 700; color: var(--nm-muted); }
.nm-badge small { font-size: 9.5px; line-height: 1.4; color: var(--nm-muted); }
.nm-badge.on { border-style: solid; border-color: var(--nm-brick); background: var(--nm-honey-soft); }
.nm-badge.on i { filter: none; opacity: 1; }
.nm-badge.on b { color: var(--nm-ink); }

/* ================= 权益 ================= */
.nm-perk {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--nm-line);
}
.nm-perk:last-child { border-bottom: 0; }
.nm-perk-ic {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; font-size: 13px;
  background: var(--nm-honey-soft);
}
.nm-perk-copy { min-width: 0; flex: 1; }
.nm-perk-copy b { display: block; font-size: 13px; font-weight: 700; }
.nm-perk-copy small { display: block; font-size: 11.5px; line-height: 1.55; color: var(--nm-muted); margin-top: 2px; }
.nm-perk-locked { opacity: .55; }
.nm-perk-locked .nm-perk-ic { background: rgba(125, 110, 115, .12); }

/* ================= profile 页入口卡 ================= */
.nm-entry { margin: 14px 0; display: grid; gap: 10px; }
.nm-entry a.nm-card { display: block; color: #ffeed2; text-decoration: none; }
.nm-entry-cta {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--nm-foil); white-space: nowrap;
}
.nm-entry-strip {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-top: 12px;
}

/* ================= Club 主页 ================= */
.nm-page { max-width: 640px; margin: 0 auto; padding: 0 16px 120px; display: grid; gap: 14px; }
.nm-nav {
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px;
}
.nm-nav a, .nm-nav button {
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--nm-muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.nm-nav img { width: 128px; max-width: 34%; }
.nm-page h1 { font-size: 20px; letter-spacing: -.02em; margin: 0; }
.nm-page h2 { font-size: 16px; letter-spacing: -.02em; margin: 0; }
.nm-page p { margin: 0; }
.nm-invite-code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: .14em;
  color: var(--nm-brick-deep); margin: 10px 0 4px;
  overflow-wrap: anywhere;
}
.nm-invite-actions { display: flex; gap: 9px; }
.nm-invite-actions .nm-btn { flex: 1; }
.nm-invite-actions .nm-btn-ghost { flex: 0 0 auto; padding-inline: 16px; }
.nm-invite a { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--nm-brick-deep); }
.nm-link-quiet { border: 0; background: none; color: var(--nm-brick-deep); font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 0; }

.nm-bind label { display: block; font-size: 11.5px; color: var(--nm-muted); margin: 10px 0; }
.nm-bind-row { display: flex; gap: 9px; flex-wrap: wrap; }
.nm-bind input {
  flex: 1; min-width: 0;
  border: 1px solid var(--nm-line); border-radius: 12px;
  background: var(--nm-surface); color: var(--nm-ink);
  padding: 12px;
  font: 700 16px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.nm-bind p { font-size: 11.5px; color: var(--nm-muted); margin-top: 10px; }

.nm-foot {
  text-align: center; padding: 26px 0;
  font-size: 10px; letter-spacing: .1em; line-height: 2.2; color: var(--nm-muted);
}
.nm-foot a { color: inherit; }

@media (max-width: 380px) {
  .nm-card { padding: 15px; }
  .nm-card-tier { font-size: 23px; }
  .nm-badges { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

/* Review: readable mobile text and keyboard targets. */
.nm-card-brand{font-size:10px;letter-spacing:.1em}.nm-card-holder,.nm-card-foot{font-size:12px}.nm-card-title,.nm-eyebrow,.nm-chip,.nm-badge small{font-size:11px}
.nm-nav a,.nm-nav button{min-height:44px;display:inline-flex;align-items:center}
.nm-card-brand>span,.nm-entry-strip>span{min-width:0;overflow-wrap:anywhere}
.nm-badge{position:relative}.nm-perk-locked{opacity:.8}
.nm-page{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
.nm-preview-notice{padding:10px 16px;background:#e8f0ee;color:#245647;font:12px/1.5 sans-serif;text-align:center}

/* Nanomster native visual direction · review 3 */
:root{--nm-ink:var(--friend-text,#402638);--nm-muted:var(--friend-muted,#806c71);--nm-line:var(--friend-line,rgba(171,113,53,.18));--nm-brick:var(--friend-purple,#a74319);--nm-brick-deep:var(--friend-purple,#a74319);--nm-surface:rgba(255,255,255,.82)}
.nm-page{max-width:680px;gap:20px;padding:0 20px calc(140px + env(safe-area-inset-bottom))}
.nm-nav{max-width:680px;padding:12px 20px;min-height:68px}.nm-nav img{width:136px}.nm-nav button{background:var(--nm-surface);padding:0 12px;border:1px solid var(--nm-line);border-radius:16px}
.nm-welcome{padding:12px 2px 0}.nm-welcome h1{font-size:30px;line-height:1.18;font-weight:800;letter-spacing:-1px;color:var(--nm-ink)}.nm-welcome p{font-size:14px;color:var(--nm-muted);margin-top:9px;line-height:1.6}
.nm-card{--nm-foil:#98501e;border:1px solid #ffe2a7;border-radius:28px;padding:24px;background:linear-gradient(120deg,#fff1c9 0%,#ffe2a0 60%,#ffd28b 100%);color:var(--nm-ink);box-shadow:0 12px 32px rgba(174,115,42,.09);isolation:isolate}
.nm-card::after{width:240px;height:240px;right:-65px;top:-100px;border:24px solid rgba(255,255,255,.23);z-index:-1}
.nm-card-brand{font-size:11px;letter-spacing:.1em;color:#86502a;font-weight:800;padding-right:0}
.nm-card-tier{font-size:29px;color:#402638;margin:25px 0 8px;max-width:72%;line-height:1.2}.nm-card-tier em{display:none}
.nm-card-holder{font-size:13px;letter-spacing:0;color:#805d45;max-width:65%;line-height:1.55}
.nm-card-no{font-size:15px;color:#805126;margin-top:20px;letter-spacing:.12em}
.nm-card-foot{font-size:12px;color:#805d45;border-top:1px solid #bd8a3828;padding-top:14px;margin-top:18px;letter-spacing:0;align-items:center}
.nm-card-title{background:#ffffff8f;border:1px solid #ffffffc7;color:#805126;font-size:11px;line-height:1.4;padding:6px 10px;max-width:65%}
.nm-mascot{position:absolute;right:15px;top:51px;width:114px;height:114px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 10px #bf87351a)}
.nm-panel{border-radius:24px;border:1px solid var(--nm-line);padding:20px;background:var(--nm-surface);box-shadow:var(--friend-shadow,0 12px 34px rgba(118,72,32,.06))}
.nm-eyebrow{font-size:15px;font-weight:800;letter-spacing:0;color:var(--nm-ink)}
.nm-progress-head b{font-size:14px}.nm-progress{gap:15px}.nm-chip{background:var(--nm-cream);font-size:11px;color:var(--nm-muted);border:1px solid var(--nm-line);padding:5px 9px}
.nm-track{height:8px;background:#f5ecd9}.nm-track i,.nm-card .nm-track i{background:linear-gradient(90deg,#ffce58,#f3a432)}
.nm-step{width:34px;height:34px;background:var(--nm-cream)}.nm-step.on{background:#fff0c9}.nm-ladder{justify-content:space-between;gap:5px}
.nm-breakdown span{background:var(--nm-cream);font-size:11px;padding:5px 9px}.nm-honest{font-size:12px;line-height:1.65;color:var(--nm-muted)}
.nm-badges{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.nm-badge{border:0;border-radius:20px;background:var(--nm-cream);padding:15px 6px;gap:7px}.nm-badge i{font-size:26px;opacity:.5}.nm-badge.on{background:linear-gradient(145deg,#fff2ce,#ffe6b7);border:1px solid #f6dbab}.nm-badge b{font-size:12px}.nm-badge small{font-size:10px}
.nm-perk{padding:16px 0;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--nm-line)}.nm-perk-ic{width:36px;height:36px;border-radius:13px;background:var(--nm-cream);font-size:18px}.nm-perk-copy b{font-size:14px}.nm-perk-copy small{font-size:12px}.nm-perk>.nm-chip{margin-left:48px}.nm-perk-copy{flex-basis:calc(100% - 48px)}
.nm-chip-live{background:#edf6ee;color:#447356;border-color:#d7e8d8}.nm-chip-soon{background:#fff4d9;color:#8c622b}.nm-perk-locked{opacity:1}.nm-chip-lock{background:#f3f1ed;color:#817b73}
.nm-btn{background:linear-gradient(135deg,#ffd366,#ffb846);color:#402638;box-shadow:0 5px 16px #b17b2914;font-size:14px;font-weight:750;border-radius:16px;min-height:48px}.nm-btn-ghost{background:var(--nm-cream);color:var(--nm-brick);box-shadow:none;border:1px solid var(--nm-line)}
.nm-invite-code{font-size:26px;margin:18px 0 8px}.nm-bind input{background:var(--nm-cream);border-radius:16px}.nm-bind label{line-height:1.65}.nm-foot{letter-spacing:.04em}
.nm-entry a.nm-card{color:var(--nm-ink)}.nm-entry .nm-card{padding:20px}.nm-entry .nm-card-tier{font-size:25px;margin:10px 0 6px;max-width:100%}.nm-entry .nm-card-holder{max-width:100%}.nm-entry-cta{color:#965125;background:#fff9ec9e;padding:9px 12px;border-radius:13px;font-size:11px}.nm-entry .nm-card-foot{margin-top:12px}.nm-entry>.nm-honest{padding:0 5px;font-size:11px}
html[data-theme="classic"] .nm-card{background:linear-gradient(125deg,#f1edff,#e1e5ff 65%,#d5eeff);border-color:#dddaf5;--nm-foil:#655baf}html[data-theme="classic"] .nm-card-brand,html[data-theme="classic"] .nm-card-holder,html[data-theme="classic"] .nm-card-no,html[data-theme="classic"] .nm-card-foot,html[data-theme="classic"] .nm-entry-cta{color:#655b91}html[data-theme="classic"] .nm-card-tier{color:#302845}html[data-theme="classic"] .nm-card-title{color:#655b91}html[data-theme="classic"] .nm-badge.on,html[data-theme="classic"] .nm-step.on{background:#ede9ff;border-color:#ddd6ff}html[data-theme="classic"] .nm-btn:not(.nm-btn-ghost),html[data-theme="classic"] .nm-track i{background:linear-gradient(135deg,#8974f0,#68b8ef);color:white}
@media(min-width:560px){.nm-perk{flex-wrap:nowrap}.nm-perk-copy{flex-basis:auto}.nm-perk>.nm-chip{margin-left:0}.nm-badges{grid-template-columns:repeat(3,minmax(0,1fr))}.nm-mascot{width:145px;height:145px;right:30px;top:40px}}
@media(max-width:380px){.nm-page{padding-left:14px;padding-right:14px}.nm-card{padding:20px}.nm-panel{padding:17px}.nm-card-tier{font-size:26px}.nm-mascot{width:95px;height:95px;right:12px;top:61px}.nm-card-brand{font-size:10px}.nm-card-foot{gap:7px}.nm-entry-strip{flex-wrap:wrap}.nm-entry .nm-card-brand{flex-wrap:wrap}}

/* Original supplied expressions, displayed as a sprite without redrawing artwork. */
.nm-expression{display:block;background-image:url("nanomster-expressions.png");background-size:300% 300%;background-repeat:no-repeat;mix-blend-mode:multiply;filter:none}
.nm-expression-cool{background-position:0% 50%}
.nm-expression-happy{background-position:50% 0%;width:86px;height:86px;float:right;margin:-7px -6px 4px 10px}
.nm-invite>.nm-row-between{display:block;min-height:65px}.nm-invite>.nm-row-between>.nm-chip{display:inline-block;margin-top:10px}

#nmClubEntry{grid-template-columns:minmax(0,1fr);width:100%;min-width:0}#nmClubEntry>.nm-card,#nmClubEntry>.nm-honest{grid-column:1 / -1}