/* calendar.css — ปฏิทิน (calendar.js). A premium Thai-Chinese almanac look: deep lacquer-red header, pink folder tabs
   for the months, warm grey paper, navy weekday headers, heavy condensed day numbers, green activity tiles.
   Colours are explicit so the page reads the same in light and dark system themes (like the rest of the app). */
.nc { --r: #A5001B; --r2: #C8102E; --rk: #8E0016; --pk: #F7D0D5; --pkt: #E58792; --bg: #F2EDEA; --navy: #1F2D6B; --ink: #26262B; --mut: #7C7068; --gr: #E3F3E6; --grt: #3B9A55;
  margin: 0 -18px; background: var(--bg); min-height: 100vh; color: var(--ink); font-family: 'Sarabun', sans-serif; text-align: left; }
body.on-cal .appbar { display: none; }


/* slim brand bar + header */
.nc-top { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px 6px; background: var(--r); color: #FFF4E6; }
.nc-top img { width: 28px; height: 28px; border-radius: 50%; background: #FBF1DD; padding: 2px; }
.nc-top span { font: 500 21px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: .2px; }
.nc-head { position: sticky; top: 0; z-index: 5; background: var(--r); padding: 4px 0 0; box-shadow: 0 6px 12px -10px rgba(80, 0, 10, .6); }
.nc-bar { display: flex; align-items: center; gap: 8px; padding: 4px 14px 10px; color: #fff; }
.nc-sp { flex: 1; }
.nc-year, .nc-back { display: flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 0 4px; border: 0; background: none; color: #fff; font: 700 22px/1 'Kanit', sans-serif; cursor: pointer; }
.nc-year b { font: 500 22px/1 'Kanit', sans-serif; margin-right: 4px; }
.nc-y2 { font-size: 18px; letter-spacing: .5px; opacity: .78; }
.nc-back span { font-size: 18px; }
.nc-era { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.nc-era button { min-height: 30px; padding: 0 9px; border: 0; border-radius: 999px; background: none; color: #FFE3E6; font: 500 12.5px 'Kanit', sans-serif; cursor: pointer; }
.nc-era button[aria-pressed="true"] { background: #fff; color: var(--r); }
.nc-today { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: #fff; color: var(--r); font: 500 14px 'Kanit', sans-serif; box-shadow: 0 2px 6px rgba(70, 0, 10, .25); cursor: pointer; }
.nc-today svg { width: 17px; height: 17px; }
.nc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 4px; }
.nc-tab { min-height: 46px; border: 0; border-radius: 13px 13px 0 0; background: var(--pk); color: var(--pkt); font: 700 19px/1 'Kanit', sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.nc-tab.is-on { background: var(--bg); color: var(--rk); cursor: default; }
.nc-body { padding: 10px 12px 26px; }
.nc.is-year .nc-head { background: var(--bg); box-shadow: none; }
.nc.is-year .nc-bar { color: var(--r); }
.nc.is-year .nc-back { color: var(--r); }
.nc.is-year .nc-era { background: #E5D9D5; }
.nc.is-year .nc-era button { color: var(--rk); }
.nc.is-year .nc-era button[aria-pressed="true"] { background: var(--r); color: #fff; }

/* toolbar: view switch + filter menu */
.nc-tool { display: flex; gap: 8px; align-items: stretch; margin: 2px 0 12px; }
.nc-views { display: flex; padding: 4px; gap: 2px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(60, 30, 20, .08); }
.nc-views button { display: grid; place-items: center; width: 50px; min-height: 38px; border: 0; border-radius: 7px; background: none; color: #A39890; cursor: pointer; }
.nc-views button svg { width: 22px; height: 22px; }
.nc-views button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nc-views button[aria-pressed="true"] { background: #E2283D; color: #fff; }
.nc-filter { position: relative; flex: 1; min-width: 0; }
.nc-fbtn { display: flex; align-items: center; gap: 7px; width: 100%; height: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 10px; background: #fff; color: var(--rk); font: 600 14.5px 'Kanit', sans-serif; box-shadow: 0 1px 3px rgba(60, 30, 20, .08); cursor: pointer; }
.nc-fbtn > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.nc-fbtn > span i svg { width: 18px; height: 18px; display: block; }
.nc-fbtn small { font: 500 12px 'Kanit', sans-serif; color: var(--mut); }
.nc-ck { color: #C04556; display: grid; }
.nc-ck svg { width: 22px; height: 22px; }
.nc-chev svg { width: 20px; height: 20px; color: #6B6460; display: block; }
.nc-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: min(280px, 86vw); padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(40, 10, 10, .22); }
.nc-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; color: var(--rk); font: 600 15px 'Kanit', sans-serif; cursor: pointer; }
.nc-menu button:hover { background: #FBF3F3; }
.nc-menu button small { display: block; font: 400 11.5px 'Sarabun', sans-serif; color: var(--mut); }
.nc-fi svg { width: 22px; height: 22px; display: block; }
.nc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #D7263D; }
.nc-fi.nc-dot { width: 12px; height: 12px; margin: 0 5px; }

/* day view */
.nc-week { background: transparent; }
.nc-wl, .nc-wd { display: grid; grid-template-columns: 22px repeat(7, 1fr) 22px; align-items: center; text-align: center; }
.nc-wl { grid-template-columns: 22px repeat(7, 1fr) 22px; }
.nc-wl::before, .nc-wl::after { content: ""; }
.nc-wl span { font: 500 18px 'Oswald', 'Kanit', sans-serif; color: var(--r2); padding: 2px 0 6px; }
.nc-wc { justify-self: center; width: 42px; height: 42px; border: 2px solid #D33447; border-radius: 50%; background: #fff; color: var(--rk); font: 600 17px 'Oswald', sans-serif; cursor: pointer; }
.nc-wc.is-sel { background: var(--r); border-color: var(--r); color: #fff; }
.nc-wc.is-today:not(.is-sel) { box-shadow: 0 0 0 3px #F6C9CF; }
.nc-warr { min-height: 42px; border: 0; background: none; color: #C9A6A8; font: 24px Georgia, serif; cursor: pointer; padding: 0; }
.nc-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 2px; }
.nc-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #EDE2DE; color: var(--navy); font: 600 14.5px 'Kanit', sans-serif; }
.nc-pills svg { width: 18px; height: 18px; }
.nc-tear { margin: 12px 4px 0; background: #fff; box-shadow: 0 6px 16px -8px rgba(80, 30, 20, .25); }
.nc-tear .nc-th { background: var(--r); color: #fff; text-align: center; padding: 11px 10px; font: 700 23px/1.1 'Kanit', sans-serif; letter-spacing: .3px; }
.nc-tbody { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) 40px; align-items: center; gap: 4px; padding: 18px 16px 12px; }
.nc-cor { position: absolute; width: 22px; height: 22px; line-height: 0; }
.nc-cor svg { width: 22px; height: 22px; }
.nc-cor.tl { left: 6px; top: 6px; }
.nc-cor.tr { right: 6px; top: 6px; transform: scaleX(-1); }
.nc-cor.bl { left: 6px; bottom: 4px; transform: scaleY(-1); }
.nc-cor.br { right: 6px; bottom: 4px; transform: scale(-1, -1); }
.nc-lun { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--navy); }
.nc-lun svg { width: 22px; height: 22px; margin-bottom: 6px; }
.nc-lun b { font: 700 17px/1.25 'Kanit', sans-serif; }
.nc-lun small { display: block; font: 500 11px 'Kanit', sans-serif; text-align: center; }
.nc-mid { text-align: center; }
.nc-wday { font: 700 24px/1.2 'Kanit', sans-serif; color: var(--navy); }
.nc-big { font: 600 128px/1 'Oswald', sans-serif; color: var(--r); letter-spacing: -4px; margin: 4px 0 2px; }
.nc-big.is-ink { color: var(--r); }
.nc-flagtag, .nc-kalatag { display: inline-flex; align-items: center; gap: 4px; margin: 2px 3px; padding: 3px 9px; border-radius: 999px; font: 500 12px 'Kanit', sans-serif; }
.nc-flagtag { background: #FBE7E9; color: var(--rk); }
.nc-kalatag { background: #ECEAEA; color: #3A3A40; }
.nc-flagtag svg, .nc-kalatag svg { width: 14px; height: 14px; }
.nc-cnv { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--navy); font: 600 22px/1.15 'Noto Serif SC', 'Songti SC', 'SimSun', serif; }
.nc-tear .nc-tf { margin: 0 16px; border-top: 1px solid #E8DEDA; }
.nc-tfoot { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 4px 8px; width: 100%; padding: 12px 0 16px; border: 0; background: none; text-align: left; cursor: pointer; }
.nc-gz { display: flex; align-items: center; gap: 7px; font: 600 18px 'Kanit', sans-serif; color: var(--ink); }
.nc-gz i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #FBEDEE; color: var(--r2); }
.nc-gz i svg { width: 17px; height: 17px; }
.nc-gz b { font: 500 16px serif; color: var(--ink); }
.nc-fort { grid-column: 1; font: 15px/1.6 'Sarabun', sans-serif; color: #3D3734; }
.nc-more { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid #D9A0A7; border-radius: 50%; color: var(--r2); }
.nc-more svg { width: 18px; height: 18px; }
.nc-tfoot[aria-expanded="true"] .nc-more { transform: rotate(180deg); }
.nc-xtra { padding: 0 0 14px; font: 14px/1.7 'Sarabun', sans-serif; color: #4F4642; }
.nc-xtra p { margin: 0; }
.nc-card { margin: 12px 4px 0; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(60, 30, 20, .06); }
.nc-acts h4 { margin: 0 0 10px; font: 700 18px 'Kanit', sans-serif; color: var(--ink); }
.nc-act { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; }
.nc-act > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: var(--gr); color: var(--grt); }
.nc-act > i svg { width: 30px; height: 30px; }
.nc-act b { display: block; font: 600 16px 'Kanit', sans-serif; color: var(--ink); }
.nc-act span { display: block; font: 15px/1.5 'Sarabun', sans-serif; color: #3D3734; }
.nc-empty { margin: 0; font: 14px 'Sarabun', sans-serif; color: var(--mut); }
.nc-full { display: block; width: calc(100% - 8px); margin: 12px 4px 0; min-height: 48px; border: 1px solid #E4C7CB; border-radius: 10px; background: #fff; color: var(--r); font: 600 15px 'Kanit', sans-serif; cursor: pointer; }

/* notes */
.nc-note { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 0 0 6px; border: 0; border-bottom: 1px solid #EBC9CD; background: none; color: #847B76; font: 15px 'Sarabun', sans-serif; text-align: left; cursor: pointer; }
.nc-note svg { width: 22px; height: 22px; flex: none; }
.nc-note span { min-width: 0; overflow-wrap: anywhere; }
.nc-note-edit textarea { width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px; border: 1px solid #DCC3C6; border-radius: 8px; font: 15px/1.5 'Sarabun', sans-serif; color: var(--ink); background: #FFFDFC; resize: vertical; }
.nc-note-btns { display: flex; gap: 8px; margin-top: 8px; }
.nc-note-btns button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--r); color: #fff; font: 500 14px 'Kanit', sans-serif; cursor: pointer; }
.nc-note-btns .is-ghost { background: #F1E8E6; color: var(--rk); }
.nc-note-btns .is-del { margin-left: auto; background: none; color: #A1564F; }

/* week list */
.nc-list { display: flex; flex-direction: column; gap: 10px; }
.nc-band { margin: 4px -12px -2px; padding: 6px 16px; background: #F8D7DA; color: var(--rk); font: 600 14px 'Kanit', sans-serif; text-align: center; }
.nc-li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; padding: 14px 14px 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(60, 30, 20, .06); scroll-margin: 140px; }
.nc-li.is-sel { box-shadow: 0 0 0 2px #E2283D; }
.nc-li-l { display: flex; flex-direction: column; align-items: center; }
.nc-li-w { font: 600 15px 'Kanit', sans-serif; color: var(--navy); }
.nc-li-n { position: relative; font: 600 62px/1.02 'Oswald', sans-serif; color: var(--r); letter-spacing: -2px; }
.nc-li-n.is-ink, .nc-gn.is-ink { color: #26262B; }
.nc-sup { position: absolute; right: -14px; top: 2px; line-height: 0; }
.nc-sup svg { width: 15px; height: 15px; }
.nc-mk { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 18px; }
.nc-mk i { line-height: 0; }
.nc-mk svg { width: 17px; height: 17px; }
.nc-li-r p { margin: 0; }
.nc-li-t { font: 600 15px 'Kanit', sans-serif; color: var(--rk); }
.nc-li-c { font: 500 14.5px 'Kanit', sans-serif; color: var(--rk); margin-top: 2px !important; }
.nc-li-e { font: 14px/1.5 'Sarabun', sans-serif; color: #2F2B29; margin-top: 6px !important; }
.nc-chips { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.nc-chips > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--gr); color: var(--grt); }
.nc-chips > i svg { width: 20px; height: 20px; }
.nc-go { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: #C24B5B; cursor: pointer; }
.nc-go svg { width: 26px; height: 26px; }
.nc-li-note { grid-column: 1 / -1; margin-top: 6px; }

/* month grid */
.nc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 -12px; background: #fff; }
.nc-gh { padding: 8px 0; background: var(--navy); color: #fff; text-align: center; font: 600 15px 'Kanit', sans-serif; border-right: 1px solid rgba(255, 255, 255, .25); }
.nc-gh.is-we { background: var(--r2); }
.nc-gc { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 84px; padding: 8px 1px 4px; border: 0; border-right: 1px solid #F0E8E5; border-bottom: 1px solid #F0E8E5; background: #fff; cursor: pointer; overflow: hidden; }
.nc-gc.is-empty { background: #FBF8F7; cursor: default; }
.nc-gc.is-sel { box-shadow: inset 0 0 0 2.5px #D7263D; border-radius: 3px; z-index: 1; }
.nc-gc.is-today .nc-gn { text-decoration: underline 3px #F2B8BF; text-underline-offset: 3px; }
.nc-gn { position: relative; font: 600 31px/1.05 'Oswald', sans-serif; color: var(--r); letter-spacing: -1px; }
.nc-gn .nc-sup { right: -11px; top: 0; }
.nc-gn .nc-sup svg { width: 12px; height: 12px; }
.nc-gev { max-width: 100%; padding: 0 2px; font: 500 9.5px/1.2 'Kanit', sans-serif; color: var(--r2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-gev::before { content: "• "; }
.nc-gc .nc-mk { margin-top: auto; gap: 1px; }
.nc-gc .nc-mk svg { width: 14px; height: 14px; }
.nc-sel { margin: 12px 4px 0; padding: 4px 14px 6px; border-radius: 12px; background: #fff; }
.nc-sel h4 { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font: 700 18px 'Kanit', sans-serif; color: var(--rk); }
.nc-sel h4 svg { width: 22px; height: 22px; color: var(--r2); flex: none; }
.nc-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 0; border: 0; border-top: 1px solid #F0E8E5; background: none; font: 500 16px 'Kanit', sans-serif; color: var(--ink); text-align: left; }
.nc-row > i { display: grid; place-items: center; width: 22px; line-height: 0; }
.nc-row > i svg { width: 20px; height: 20px; }
.nc-row b { font: 500 16px serif; }
.nc-row-go { cursor: pointer; }
.nc-row-go > i { margin-left: auto; color: #C24B5B; width: 28px; }
.nc-row-go > i svg { width: 24px; height: 24px; }

/* year view */
.nc-ynav { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.nc-ynav > button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: var(--rk); font: 500 14px 'Kanit', sans-serif; cursor: pointer; }
.nc-ysel { flex: 1; }
.nc-ysel select { width: 100%; min-height: 40px !important; padding: 4px 10px !important; border-radius: 999px !important; border: 1px solid #E2D2CE !important; font: 500 15px 'Kanit', sans-serif !important; color: var(--rk) !important; background: #fff !important; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nc-ytitle { margin: 6px 4px 10px; font: 700 28px/1.2 'Kanit', sans-serif; color: var(--r); }
.nc-ytitle small { font-size: 26px; margin-left: 6px; }
.nc-ygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.nc-ym { display: flex; flex-direction: column; justify-content: flex-start; align-self: start; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; }
.nc-ymh { display: block; padding: 4px 0; border-radius: 9px; background: #E7DFDC; color: #B6AAA6; font: 700 15px 'Kanit', sans-serif; }
.nc-ymh.is-on { background: var(--r); color: #fff; }
.nc-ymg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; margin-top: 8px; }
.nc-ymg i { font: 500 10.5px/1.6 'Sarabun', sans-serif; font-style: normal; color: #2E2A28; }
.nc-ymg i.is-red { color: var(--r2); }
.nc-ymg i.is-now { background: var(--r); color: #fff; border-radius: 50%; }
.nc-yhint { margin: 18px 4px 0; font: 13px 'Sarabun', sans-serif; color: var(--mut); text-align: center; }
.nc-foot { margin: 22px 6px 0; font: 12px/1.6 'Sarabun', sans-serif; color: var(--mut); text-align: center; }

/* seven tabs in the bottom bar */
body.cal-nav7 nav.tab button { font-size: 11px; min-width: 0; padding-left: 0; padding-right: 0; letter-spacing: -.1px; }
body.cal-nav7 nav.tab button svg { width: 19px; height: 19px; }

@media (max-width: 360px) {
  .nc-tab { font-size: 16px; }
  .nc-year, .nc-y2 { font-size: 19px; }
  .nc-era button { padding: 0 7px; }
  .nc-today { padding: 0 10px; }
  .nc-big { font-size: 112px; }
  .nc-wc { width: 36px; height: 36px; font-size: 15px; }
  .nc-li { grid-template-columns: 78px minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .nc { margin: 0; border-radius: 0 0 12px 12px; overflow: hidden; }
  body.on-cal .appbar { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .nc * { transition: none !important; } }
.nc-open { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 4px; padding: 13px 14px; border: 1px solid #C9A86C; border-radius: 8px; background: #8B1922; color: #F8EACD; text-align: left; cursor: pointer; }
.nc-open span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F8EACD; color: #8B1922; flex: none; }
.nc-open span svg { width: 20px; height: 20px; }
.nc-open b { flex: 1; font: 600 16px 'Kanit', sans-serif; }
.nc-open small { display: block; font: 400 12px 'Sarabun', sans-serif; color: #E9CFA4; }
.nc-open i { font: 26px Georgia, serif; font-style: normal; color: #E9CFA4; }
.nc-disc { margin: 8px 0 0; font: 12px 'Sarabun', sans-serif; color: var(--mut); }

/* personal days */
.nc-whos { display: flex; align-items: center; gap: 6px; margin: -2px 0 12px; overflow-x: auto; scrollbar-width: none; }
.nc-whos::-webkit-scrollbar { display: none; }
.nc-who-l { flex: none; font: 600 14px 'Kanit', sans-serif; color: #2E7D4A; }
.nc-whos button { flex: none; min-height: 34px; padding: 0 14px; border: 1px solid #CFE6D5; border-radius: 999px; background: #fff; color: #2E7D4A; font: 500 14px 'Kanit', sans-serif; cursor: pointer; }
.nc-whos button[aria-pressed="true"] { background: #2E9E5B; border-color: #2E9E5B; color: #fff; }
.nc-who-cta { display: flex; align-items: center; gap: 10px; width: 100%; margin: -2px 0 12px; padding: 10px 12px; border: 1px dashed #9CCBAA; border-radius: 10px; background: #F1F9F3; color: #2E7D4A; font: 500 14px 'Kanit', sans-serif; text-align: left; cursor: pointer; }
.nc-who-cta svg { width: 20px; height: 20px; flex: none; }
.nc-who-cta span { flex: 1; }
.nc-who-cta i { font: 22px Georgia, serif; font-style: normal; }
.nc-me { position: absolute; left: 3px; top: 3px; padding: 0 5px; border-radius: 6px; background: #2E9E5B; color: #fff; font: 600 10px/16px 'Kanit', sans-serif; font-style: normal; }
.nc-me.is-c { background: #8E8A88; }
.nc-gc.is-good { background: #F0F9F2; }
.nc-gc.is-clash { background: #F4F2F1; }
.nc-gc.is-clash .nc-gn { opacity: .55; }
.nc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 4px 0; font: 13px 'Sarabun', sans-serif; color: #5C5450; }
.nc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nc-legend .nc-me { position: static; }
.nc-metag { display: inline-flex; align-items: center; gap: 4px; margin: 2px 3px; padding: 3px 10px; border-radius: 999px; font: 500 12.5px 'Kanit', sans-serif; }
.nc-metag svg { width: 14px; height: 14px; }
.nc-metag.is-good, .nc-meline.is-good { background: #E6F5EA; color: #23703F; }
.nc-metag.is-clash, .nc-meline.is-clash { background: #EFEDEC; color: #5C5450; }
.nc-meline { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 9px; border-radius: 8px; font: 500 13px 'Kanit', sans-serif; }
.nc-meline svg { width: 14px; height: 14px; }
.nc-row .nc-meline { margin: 0; }

/* tear-off */
.nc-tearbar { display: flex; align-items: center; gap: 8px; margin: 10px 4px 0; }
.nc-tearbar button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: var(--rk); font: 500 14px 'Kanit', sans-serif; cursor: pointer; box-shadow: 0 1px 3px rgba(60, 30, 20, .08); }
.nc-tearbar span { flex: 1; text-align: center; font: 12.5px 'Sarabun', sans-serif; color: var(--mut); }
.nc-tearbar .nc-snd { display: grid; place-items: center; width: 38px; padding: 0; color: #9A8E88; }
.nc-tearbar .nc-snd svg { width: 20px; height: 20px; }
.nc-tearbar .nc-snd[aria-pressed="true"] { color: var(--r2); }
.nc-tearing { position: absolute; z-index: 4; margin: 0 !important; pointer-events: none; transform-origin: 85% 0;
  clip-path: polygon(0 7px, 4% 2px, 8% 8px, 12% 3px, 17% 9px, 22% 2px, 27% 7px, 32% 1px, 37% 8px, 42% 3px, 47% 9px, 52% 2px, 57% 7px, 62% 1px, 67% 8px, 72% 3px, 77% 9px, 82% 2px, 87% 7px, 92% 2px, 96% 8px, 100% 3px, 100% 100%, 0 100%);
  animation: ncTear .62s cubic-bezier(.5, .05, .7, .4) forwards; }
@keyframes ncTear {
  0% { transform: none; opacity: 1; }
  22% { transform: translateY(4px) rotate(1.2deg); }
  100% { transform: translate(60px, -115%) rotate(16deg); opacity: 0; }
}
.nc-drop { animation: ncDrop .32s ease-out; }
@keyframes ncDrop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* share button */
.nc-share { display: flex; align-items: center; gap: 12px; width: calc(100% - 8px); margin: 10px 4px 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--r); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(120, 0, 20, .6); }
.nc-share svg { width: 26px; height: 26px; flex: none; }
.nc-share span { font: 600 16px 'Kanit', sans-serif; }
.nc-share small { display: block; font: 400 12.5px 'Sarabun', sans-serif; color: #FFD9DE; }