/* 返事をする人: the fictional chat app 「ことづて」 (one quiet night theme).
   Class names are prefixed (mk-, ti-, ch-, sc-, pic-) so they never collide with css/kit.css. */
:root {
  --bg: #0e0f12;
  --app: #16181c;
  --app2: #1f2227;
  --line: #2a2e35;
  --ink: #e8e4dc;
  --dim: #8e939b;
  --other: #e3e0d9;
  --other-ink: #1b1c1f;
  --me: #3b6e5e;
  --me-ink: #f2f7f4;
  --accent: #7fb09d;
  --warn: #d49a72;
  --red: #c0584c;
  --panel: #1b1d22;
  --gut: 16px;
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--ink); font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; font-size: calc(15px * var(--fs, 1)); }
body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; margin: 0; }
button { color: inherit; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 0.8em; }

/* ---- the phone-width column (full screen on phones, centred on PCs) ---- */
#stage { position: fixed; inset: 0; margin: 0 auto; max-width: 480px; background: var(--app); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 560px) {
  #stage { top: 2vh; bottom: 2vh; border-radius: 22px; border: 1px solid #262a30; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
  body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #1b1e24 0%, var(--bg) 70%); }
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---- title ---- */
#title { overflow-y: auto; overflow-x: hidden; background: var(--bg); }
.ti-art { position: absolute; inset: 0 0 auto 0; height: 56%; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); background: linear-gradient(180deg, #1f1c18, var(--bg)); background-size: cover; background-position: center 45%; }
.ti-box { position: relative; padding: 24vh var(--gut) 28px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; box-sizing: border-box; }
@media (min-width: 560px) { .ti-box { padding-top: 20vh; } }
.ti-kicker { margin: 0; color: #b0aca4; font-size: 0.82em; letter-spacing: 0.2em; }
.ti-logo { margin: 0; font-family: 'Zen Old Mincho', serif; font-weight: 900; font-size: 2.7em; letter-spacing: 0.12em; line-height: 1.15; color: #f2eee6; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85); }
.ti-lead { margin: 0 0 4px; font-family: 'Zen Old Mincho', serif; font-size: 1.1em; line-height: 1.9; color: #ddd8ce; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
.ti-story { padding: 10px 12px; border-left: 2px solid #5d6a62; color: #c9cbc8; font-size: 0.88em; line-height: 1.85; background: rgba(20, 22, 26, 0.72); }
.ti-story p { margin: 0; }
.ti-story p + p { margin-top: 6px; }
.ti-story b { color: #f0ebe2; }
.ti-cast { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ti-cast li { display: grid; grid-template-columns: 34px auto 1fr; align-items: center; gap: 4px 10px; font-size: 0.86em; }
.ti-cast li small { grid-column: 2 / 4; color: #a3a7ad; line-height: 1.5; }
.ti-cast li .mk-av { grid-row: span 2; }
.ti-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ti-btn { font: inherit; font-weight: 700; font-size: 1.05em; padding: 14px; border-radius: 14px; border: 1px solid #3a4048; background: #1e2227; cursor: pointer; width: 100%; }
.ti-btn.primary { background: var(--me); border-color: var(--me); color: #fff; }
.ti-btn:hover { filter: brightness(1.12); }
.ti-info { margin: 4px 0 0; color: var(--dim); font-size: 0.82em; text-align: center; }
.ti-row { display: flex; gap: 10px; }
.ti-link { flex: 1; font: inherit; padding: 10px; border-radius: 12px; border: 1px solid #2d3239; background: transparent; color: #c8ccd1; cursor: pointer; }
.ti-link:disabled { opacity: 0.35; cursor: default; }
.ti-points { margin: 6px 0 0; padding-left: 1.2em; color: #aab0b6; font-size: 0.84em; line-height: 1.8; }
.ti-notice { margin: 4px 0 0; padding: 10px 12px; border: 1px solid #2a2f35; border-radius: 10px; color: #90969d; font-size: 0.76em; line-height: 1.7; }
.ti-loading { color: var(--dim); font-size: 0.85em; }

/* avatars: everyone has a picture; 「母」 has none (a dashed empty circle) */
.mk-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #3b4047 center/cover; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #e2e4e7; font-size: 0.85em; }
.mk-av.void { background: transparent; border: 1.5px dashed #6a7079; box-sizing: border-box; }
.mk-av.sp { visibility: hidden; height: 1px; }
.grp-av { flex: none; width: 36px; height: 36px; border-radius: 12px; background: #2b3a34 center/cover; position: relative; }
.grp-av::after { content: ""; position: absolute; inset: 9px; border-radius: 4px; background: #b9d0c4; -webkit-mask: url("../assets/favicon.svg") center/contain no-repeat; mask: url("../assets/favicon.svg") center/contain no-repeat; opacity: 0.85; }
.grp-av.one { border-radius: 50%; }
.grp-av.one::after { display: none; }

/* ---- chat ---- */
#chat { background: var(--app); }
.ch-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; background: #1a1c21; border-bottom: 1px solid var(--line); z-index: 2; }
.ch-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font: inherit; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.ch-title { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ch-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-title b.blank { color: transparent; }
.ch-title small { color: var(--dim); font-size: 0.74em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-speed { flex: none; font: inherit; font-size: 0.74em; padding: 6px 10px; border-radius: 20px; border: 1px solid #353b43; background: #22262c; cursor: pointer; white-space: nowrap; }
.ch-menu { flex: none; font: inherit; font-size: 1.35em; background: none; border: none; cursor: pointer; padding: 4px 8px; color: #cbd0d5; }
.ch-date { position: absolute; top: 60px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 1; }
.ch-date span { margin-top: 6px; padding: 3px 12px; border-radius: 20px; background: rgba(38, 42, 48, 0.86); color: #b7bcc3; font-size: 0.74em; backdrop-filter: blur(4px); }
.ch-log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 34px 12px 18px; display: flex; flex-direction: column; gap: 3px; -webkit-overflow-scrolling: touch; }
.newpill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 140px; z-index: 3; font: inherit; font-size: 0.82em; padding: 7px 14px; border-radius: 20px; border: none; background: var(--me); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); cursor: pointer; }

.mk-day { display: flex; justify-content: center; margin: 12px 0 6px; }
.mk-day span { padding: 4px 14px; border-radius: 20px; background: #262a30; color: #d8dce0; font-size: 0.76em; text-align: center; }
.mk-day em { font-style: normal; margin-left: 8px; color: #a8b6ae; }
.mk-day.later { margin-top: 26px; }
.mk-thread { display: flex; justify-content: center; margin: 4px 0 8px; }
.mk-thread span { font-size: 0.72em; color: #a8b6ae; border: 1px solid #34413b; padding: 3px 12px; border-radius: 12px; }

.mk-row { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; animation: mk-in 0.22s ease-out; }
.lowstim .mk-row { animation: none; }
@keyframes mk-in { from { opacity: 0; transform: translateY(6px); } }
.mk-row.left { padding-right: 30px; margin-top: 9px; }
.mk-row.left.cont { margin-top: 2px; }
.mk-row.right { justify-content: flex-end; padding-left: 44px; margin-top: 9px; align-items: flex-end; }
.mk-col { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.mk-name { font-size: 0.74em; color: #aab0b6; margin: 0 0 3px 2px; min-height: 1.2em; }
.mk-row.mother .mk-name, .mk-row.as-mother .mk-name { color: #d6cfc0; }
.mk-line { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.mk-bub { padding: 8px 12px; border-radius: 16px; line-height: 1.6; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 0.97em; background: var(--other); color: var(--other-ink); border-top-left-radius: 4px; }
.mk-row.cont .mk-bub { border-top-left-radius: 16px; }
.mk-bub.mother { background: #2a2c30; color: #e9e3d6; border: 1px solid #45484e; }
.mk-bub.nobody { background: transparent; color: #a4a9b0; border: 1.5px dashed #555b63; }
.mk-bub.me { background: var(--me); color: var(--me-ink); border-radius: 16px; border-bottom-right-radius: 4px; }
.mk-row.as-mother .mk-col { align-items: flex-end; }
.mk-row.as-mother .mk-bub.me { background: #2a2c30; color: #e9e3d6; border: 1px solid #45484e; }
.mk-bub.swapped { animation: mk-swap 0.9s steps(3); }
@keyframes mk-swap { 0% { opacity: 0.1; } 40% { opacity: 1; } 60% { opacity: 0.2; } 100% { opacity: 1; } }
.mk-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.66em; color: #7e858d; white-space: nowrap; line-height: 1.35; }
.mk-row.left .mk-meta { align-items: flex-start; }
.mk-meta .fail { color: var(--red); }
.qicon { align-self: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #6c6a63; color: #d6cfc0; font-size: 0.8em; display: inline-flex; align-items: center; justify-content: center; animation: q-blink 1.6s ease-in-out infinite; }
.lowstim .qicon { animation: none; }
@keyframes q-blink { 50% { opacity: 0.25; } }
.mk-sys { display: flex; justify-content: center; margin: 8px 0; text-align: center; }
.mk-sys span { color: #a6abb2; font-size: 0.78em; padding: 4px 12px; border-radius: 12px; background: #1f2227; max-width: 92%; line-height: 1.6; }
.mk-endmark { display: flex; justify-content: center; margin: 22px 0 6px; }
.mk-endmark span { font-family: 'Zen Old Mincho', serif; color: #9a9fa6; font-size: 0.8em; letter-spacing: 0.12em; padding: 2px 14px; border-top: 1px solid #2e3239; border-bottom: 1px solid #2e3239; text-align: center; }
.mk-cap { font-size: 0.68em; color: var(--dim); margin: 3px 0 0 2px; }

/* typing indicator */
.typing-bub { display: inline-flex; gap: 4px; align-items: center; background: #2b2f35 !important; color: #b0b6bd; padding: 11px 13px; }
.typing-bub i { width: 6px; height: 6px; border-radius: 50%; background: #9aa1a8; animation: mk-dot 1.1s infinite; }
.typing-bub i:nth-child(2) { animation-delay: 0.15s; }
.typing-bub i:nth-child(3) { animation-delay: 0.3s; }
.typing-bub .t-lab { font-size: 0.8em; }
@keyframes mk-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.lowstim .typing-bub i { animation: none; opacity: 0.7; }

/* ---- pictures: phone photos and screenshots ---- */
.mk-photo { width: min(220px, 58vw); }
.pic { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #0f1012; cursor: zoom-in; border: 1px solid #2c3036; container-type: inline-size; }
.pic.photo { aspect-ratio: 4 / 3; }
.pic.shot { aspect-ratio: 3 / 4; background: #f4f4f1; }
.mk-photo:has(.shot) { width: min(180px, 50vw); }
.pic-img { position: absolute; inset: 0; background: #24262a center/cover no-repeat; }
.pic-img.fallback { background: radial-gradient(ellipse at 40% 45%, #4a3e30 0 30%, #1b1c1e 70%); }
.pic-hand { position: absolute; left: 44%; top: 45%; transform: translate(-50%, -50%) rotate(-7deg); font-family: 'Yomogi', cursive; font-size: 6.4cqw; line-height: 1.45; color: rgba(34, 44, 78, 0.78); filter: blur(0.25px); text-align: left; white-space: nowrap; mix-blend-mode: multiply; pointer-events: none; }

/* the fictional app in a screenshot (scaled with the picture) */
.sc { position: absolute; inset: 0; text-align: left; display: flex; flex-direction: column; background: #f3f3f0; color: #1d1f22; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 4.1cqw; line-height: 1.45; }
.sc-status { display: flex; justify-content: space-between; padding: 1.6cqw 4cqw 1cqw; font-size: 0.72em; color: #3c3f44; }
.sc-head { display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 3cqw; background: #e6e9e7; border-bottom: 0.3cqw solid #d4d8d5; }
.sc-head b { font-size: 1.02em; }
.sc-head em { font-style: normal; color: #6b7076; font-size: 0.86em; }
.sc-back, .sc-dots { color: #59606a; }
.sc-dots { margin-left: auto; }
.sc-body { flex: 1; overflow: hidden; padding: 2cqw 3cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.sc-day { display: flex; justify-content: center; margin: 1cqw 0; }
.sc-day span { font-size: 0.74em; color: #50555b; background: #e0e3e1; padding: 0.6cqw 3cqw; border-radius: 4cqw; }
.sc-row { display: flex; gap: 2cqw; align-items: flex-start; }
.sc-row.r { justify-content: flex-end; align-items: flex-end; }
.sc-av { flex: none; width: 8cqw; height: 8cqw; border-radius: 50%; background: #b9bec2 center/cover; }
.sc-av.blank { background: transparent; border: 0.4cqw dashed #8a9097; box-sizing: border-box; }
.sc-c { min-width: 0; }
.sc-c small { display: block; font-size: 0.7em; color: #5b6168; margin-bottom: 0.4cqw; }
.sc-line { display: flex; align-items: flex-end; gap: 1.4cqw; }
.sc-b { margin: 0; padding: 1.8cqw 2.8cqw; border-radius: 3.4cqw; border-top-left-radius: 1cqw; background: #fff; border: 0.25cqw solid #dfe2e0; }
.sc-b.me { background: #cfe6dc; border-color: #b9d6c9; border-radius: 3.4cqw; border-bottom-right-radius: 1cqw; max-width: 74%; }
.sc-meta { font-size: 0.6em; color: #7a8086; white-space: nowrap; text-align: right; }
.sc-foot { padding: 2cqw 3cqw 3cqw; border-top: 0.3cqw solid #dcdfdd; }
.sc-field { display: block; padding: 1.6cqw 3cqw; border-radius: 4cqw; background: #e4e7e5; color: #8d9297; font-size: 0.8em; }
.sc.large { font-size: 5.2cqw; } /* 孝一's phone: large text setting */
.sc.last .sc-body { justify-content: center; gap: 5cqw; }
.sc.last .sc-b { font-size: 1.25em; }
.sc.last .sc-day span { font-size: 0.66em; }
.sc.y1999 .sc-day span { background: #e9dcc4; color: #6b4e22; }
.sc.mine { background: #eef1f0; }
.sc-quote { margin: 3cqw 0 0 10cqw; padding: 2cqw 3cqw; border-left: 1cqw solid #8aa69a; background: #e8ece9; border-radius: 1.2cqw; }
.sq-lab { font-size: 0.66em; color: #4c6b5e; font-weight: 700; }
.sq-who { font-size: 0.7em; color: #5d6268; }
.sq-who .smudge { filter: blur(0.9cqw); color: #3a3e44; }
.sc-quote p { margin: 1cqw 0 0; }
.sc-menu { margin: 1cqw 0 0 10cqw; display: flex; flex-wrap: wrap; gap: 1.4cqw; font-size: 0.7em; }
.sc-menu span { padding: 0.8cqw 2cqw; border-radius: 2cqw; background: #2a2d31; color: #e6e6e6; }
.sc-menu span.on { background: #3b6e5e; }

/* viewer */
#viewer { position: fixed; inset: 0; z-index: 20; background: rgba(5, 6, 8, 0.93); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
.v-box { position: relative; width: min(960px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; }
.v-box .pic { cursor: default; border-radius: 8px; }
.v-box .pic.photo { width: min(100%, calc(70vh * 4 / 3)); }
.v-box .pic.shot { width: min(100%, calc(70vh * 3 / 4), 440px); }
.cmp { display: flex; gap: 10px; width: 100%; justify-content: center; }
.cmp > div { flex: 1; max-width: min(340px, calc(64vh * 3 / 4)); display: flex; flex-direction: column; gap: 4px; text-align: center; font-size: 0.82em; color: #cfd3d8; }
.cmp .pic.shot { width: 100%; }
.v-close { position: sticky; top: 0; align-self: flex-end; font-size: 26px; background: none; border: none; color: #ddd; cursor: pointer; padding: 0 10px; line-height: 1; }
.v-cap { display: flex; flex-direction: column; gap: 2px; font-size: 0.86em; color: #bcc1c7; text-align: center; max-width: 560px; }
.v-box .v-back { margin: 0; background: #24282e; border: 1px solid #3a4048; color: var(--ink); }
@media (max-width: 600px) { .cmp { flex-direction: column; align-items: center; } .cmp > div { width: 100%; max-width: 360px; } }

/* ---- foot: compose / choices ---- */
.ch-foot { flex: none; background: #1a1c21; border-top: 1px solid var(--line); padding: 8px var(--gut) calc(10px + env(safe-area-inset-bottom)); max-height: 64%; overflow-y: auto; }
.mk-compose { display: flex; align-items: center; gap: 8px; }
.mk-compose + .mk-compose { margin-top: 8px; }
.cp-field { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 20px; background: var(--app2); color: #646a72; font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-field.draft { color: #d9dcdf; }
.cp-field.ghost { color: rgba(233, 227, 214, 0.38); }
.cp-note { color: var(--warn); }
.cp-send { font: inherit; font-size: 0.82em; padding: 8px 12px; border-radius: 16px; border: 1px solid #3a4048; background: #22262c; color: #747a82; }
.mk-compose .btn.ghost { border-color: #3a4048; color: #c3c8cd; background: transparent; white-space: nowrap; margin: 0; }
.mk-compose.end { justify-content: space-between; }
.cp-end { font-family: 'Zen Old Mincho', serif; color: #cfcabf; letter-spacing: 0.06em; font-size: 0.92em; }
.mk-compose .btn.primary { background: var(--me); border-color: var(--me); color: #fff; margin: 0; }
.mk-choices { display: flex; flex-direction: column; gap: 8px; animation: mk-up 0.25s ease-out; }
@keyframes mk-up { from { opacity: 0; transform: translateY(10px); } }
.lowstim .mk-choices { animation: none; }
.ch-prompt { margin: 0 2px; color: #a9afb6; font-size: 0.78em; line-height: 1.6; display: flex; gap: 10px; flex-wrap: wrap; }
.ch-prompt b { color: #cfd4d9; letter-spacing: 0.1em; }
.ch-note { margin: 0 2px; color: var(--warn); font-size: 0.78em; }
.mk-choices.important .ch-prompt b { color: #e6c9a6; }
.mk-choice { font: inherit; text-align: left; padding: 11px 14px; border-radius: 14px; border: 1px solid #3a434c; background: #22282f; color: #eceef0; cursor: pointer; line-height: 1.55; min-height: 46px; font-size: 0.95em; }
.mk-choice:hover:not(:disabled) { border-color: var(--accent); background: #26302d; }
.mk-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-choice:disabled { opacity: 0.45; cursor: default; }
.mk-choice.picked { opacity: 1; background: var(--me); border-color: var(--me); }
.mk-choice.op { background: transparent; border-style: dashed; color: #d5d9dd; }
.op-tag { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; font-size: 0.72em; color: #a9c7b9; border: 1px solid #44584f; vertical-align: 1px; }

/* E10: the talk goes quiet around 「母」 */
body.e10 #chat .ch-log > .mk-row:not(.mother), body.e10 #chat .ch-log > .mk-day { opacity: 0.35; transition: opacity 2.4s; }
body.lowstim.e10 #chat .ch-log > * { transition: none; }

/* ---- windows (kit) in the night theme ---- */
.win-wrap { background: rgba(5, 6, 8, 0.66); }
.win { background: var(--panel); border-color: #2d3238; color: var(--ink); max-width: calc(100vw - 24px); box-sizing: border-box; }
.win-head, .win-foot { border-color: #2d3238; }
.win-title { color: #f0ece4; }
.win-sub, .win-x { color: var(--dim); }
.win-foot { flex-wrap: wrap; }
.win .btn { background: #24282e; border-color: #3a4048; color: var(--ink); }
.win .btn:hover:not(:disabled) { background: #2b3037; }
.win .btn.primary { background: var(--me); border-color: var(--me); color: #fff; }
.win .btn.danger { background: #8a3a32; border-color: #8a3a32; color: #fff; }
.hj-confirm .win { width: min(380px, 94vw); }
.cf-text { margin: 4px 0; line-height: 1.7; font-size: 0.92em; color: #cfd3d7; }
.mk-endwin .win { width: min(520px, 96vw); }
.end-no { display: block; font-size: 0.66em; letter-spacing: 0.3em; color: var(--dim); font-weight: 500; }
.mk-endwin .win-title { font-family: 'Zen Old Mincho', serif; font-size: 1.5em; }
.end-theme { margin: 4px 0; font-family: 'Zen Old Mincho', serif; font-size: 1.05em; }
.end-loss { margin: 0 0 10px; color: #adb2b8; font-size: 0.9em; }
.end-progress { font-size: 0.9em; color: #cdd1d5; }
.end-progress .new { margin-left: 8px; font-size: 0.75em; padding: 1px 7px; border-radius: 8px; background: var(--me); color: #fff; }
.end-dots { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 12px; }
.end-dots span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68em; border: 1px solid #3a4048; color: #5c626a; }
.end-dots span.on { background: #e3ded3; color: #16181c; border-color: #e3ded3; font-weight: 700; }
.share-text { background: #131518; border-color: #2d3238; color: #cdd1d5; }
.share-buttons button { background: #24282e; border-color: #3a4048; color: var(--ink); }
.share-note { color: #d6b48a; }
.mk-menu { display: flex; flex-direction: column; gap: 8px; }
.mk-mi { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid #343a41; background: #21252a; cursor: pointer; }
.mk-mi span { font-size: 0.8em; color: var(--dim); }
.mk-mi:disabled { opacity: 0.45; cursor: default; }
.mem-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mem-list li { display: flex; align-items: center; gap: 10px; }
.mem-list small { color: var(--dim); font-size: 0.78em; margin-left: auto; text-align: right; }
.mk-settings .st-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #272b31; flex-wrap: wrap; }
.mk-seg { display: inline-flex; border: 1px solid #3a4048; border-radius: 10px; overflow: hidden; }
.mk-seg button { font: inherit; font-size: 0.86em; padding: 7px 11px; border: none; background: #20242a; cursor: pointer; }
.mk-seg button + button { border-left: 1px solid #3a4048; }
.mk-seg button.on { background: var(--me); color: #fff; }
.hb-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.hb-tab { font: inherit; padding: 6px 12px; border-radius: 20px; border: 1px solid #3a4048; background: #20242a; color: var(--ink); cursor: pointer; }
.hb-tab.on { background: #e3ded3; color: #16181c; border-color: #e3ded3; }
.hb-tab .cnt { margin-left: 6px; font-size: 0.8em; opacity: 0.7; }
.rec-ends { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.rec-end { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px dashed #343a41; color: #6e747c; }
.rec-end.got { border-style: solid; border-color: #4b535c; background: #21252a; color: var(--ink); }
.rec-end .no { font-size: 0.7em; letter-spacing: 0.2em; color: var(--dim); }
.rec-end b { font-family: 'Zen Old Mincho', serif; }
.rec-end small { font-size: 0.76em; color: var(--dim); }
.rec-map { display: flex; flex-direction: column; gap: 12px; }
.mp-common { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mp-node { display: inline-flex; flex-direction: column; padding: 4px 8px; border-radius: 8px; border: 1px solid #343a41; font-size: 0.78em; color: #6e747c; }
.mp-node small { font-size: 0.78em; }
.mp-node.seen { color: var(--ink); border-color: #4b535c; background: #21252a; }
.mp-arrow { font-style: normal; color: #4b535c; font-size: 0.8em; }
.mp-early { margin: 0; font-size: 0.78em; color: var(--dim); }
.mp-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mp-route { border: 1px solid #343a41; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; color: #6e747c; }
.mp-route.seen { color: var(--ink); border-color: #4b535c; }
.mp-rhead { font-size: 0.72em; color: var(--dim); }
.mp-rhead b { display: block; font-size: 1.25em; color: inherit; }
.mp-end { font-size: 0.74em; padding: 4px 8px; border-radius: 6px; border: 1px dashed #343a41; }
.mp-end span { display: block; font-size: 1.15em; font-family: 'Zen Old Mincho', serif; }
.mp-end.got { border-style: solid; background: #e3ded3; color: #16181c; }
.rec-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.rec-ph { font: inherit; padding: 0; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--dim); font-size: 0.76em; }
.rec-ph .pic { pointer-events: none; }
.br-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.br-row { font: inherit; text-align: left; display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 0 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid #343a41; background: #21252a; cursor: pointer; }
.br-row .no { grid-row: span 2; color: var(--dim); font-size: 0.8em; align-self: center; }
.br-row small { color: var(--dim); font-size: 0.76em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-row:hover { border-color: var(--accent); }

@media (max-width: 380px) {
  .ti-logo { font-size: 2.3em; }
  .ch-speed { padding: 6px 8px; }
  .mk-row.left { padding-right: 12px; }
  .mk-row.right { padding-left: 28px; }
  .mk-seg button { padding: 7px 8px; }
}