:root {
  font-family: Inter, "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  color: #18333e;
  background: #e9f5f8;
  --cyan: #18a7c5;
  --cyan-dark: #087f9b;
  --navy: #163c4b;
  --line: #cae2e9;
  --muted: #6d8791;
  --danger: #cd5151;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: linear-gradient(180deg, #f9fdfe 0, #e9f5f8 55%, #e4f1f4 100%); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; background: rgba(246,252,253,.86); box-shadow: 0 0 3rem rgba(10,69,87,.12); }
.topbar { min-height: calc(76px + env(safe-area-inset-top)); display: flex; align-items: center; gap: .7rem; padding: calc(.65rem + env(safe-area-inset-top)) 1rem .65rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.topbar img { border-radius: 20%; }
.topbar div { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.topbar small, .screen-heading small, .section-heading small, .active-character small, .dialog small { color: var(--cyan-dark); font: 800 .62rem/1.1 ui-monospace, monospace; letter-spacing: .12em; }
.topbar strong { margin-top: .2rem; color: var(--navy); font-size: 1rem; }
.connection { padding: .28rem .42rem; border: 1px solid #badde5; color: #617c86; background: #eff9fb; font-size: .58rem; font-weight: 800; }
.connection.online { color: #147258; border-color: #9cd9c5; background: #ebfaf5; }
.screen { min-height: calc(100dvh - 76px); padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)); }
.state-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.state-screen h1 { margin: .8rem 0 .4rem; color: var(--navy); font-size: 1.35rem; }
.state-screen p { max-width: 22rem; margin: 0 0 1.4rem; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.loader { display: flex; gap: .35rem; }
.loader i { width: .58rem; height: .58rem; background: var(--cyan); animation: bounce .7s infinite alternate; }
.loader i:nth-child(2) { animation-delay: .16s; }.loader i:nth-child(3) { animation-delay: .32s; }
.hero-mark { width: 7rem; height: 7rem; display: grid; place-items: center; margin-bottom: 1.2rem; border: 1px solid #bfe2e9; background: #fff; box-shadow: 0 .8rem 2rem rgba(24,126,153,.13); }
.hero-mark img { width: 5.3rem; height: 5.3rem; }
.discord-button { width: 100%; min-height: 3.4rem; display: flex; align-items: center; justify-content: center; gap: .55rem; border-radius: .3rem; color: #fff; background: #5865f2; box-shadow: 0 .5rem 1rem rgba(88,101,242,.25); font-size: .92rem; font-weight: 900; text-decoration: none; }
.discord-logo { font-size: 1.25rem; }
.security-note { margin-top: .9rem; color: #78909a; font-size: .65rem; }
.screen-heading, .section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: .75rem; }
.screen-heading h1, .section-heading h1 { margin: .22rem 0 0; color: var(--navy); font-size: 1.3rem; }
.icon-button { width: 2.5rem; height: 2.5rem; border: 1px solid #a9d8e3; color: var(--cyan-dark); background: #fff; font-size: 1.25rem; }
.user-strip, .active-character { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border-left: .25rem solid var(--cyan); background: #fff; box-shadow: 0 .2rem .7rem rgba(28,89,107,.07); }
.user-strip strong { display: block; color: var(--navy); font-size: .82rem; }.user-strip span { color: var(--muted); font-size: .65rem; }
.guide { color: var(--muted); font-size: .7rem; line-height: 1.6; }
.character-list, .nearby-list { display: flex; flex-direction: column; gap: .55rem; }
.character-card, .player-card { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid #cee3e9; border-left: .22rem solid #a9bac0; color: var(--navy); background: #fff; text-align: left; box-shadow: 0 .18rem .5rem rgba(28,89,107,.05); }
.character-card.online { border-left-color: #21b884; }.character-card:disabled { opacity: .58; cursor: not-allowed; }
.character-card strong, .player-card strong { display: block; font-size: .85rem; }.character-card small, .player-card small { display: block; margin-top: .28rem; color: var(--muted); font-size: .64rem; }
.status { padding: .3rem .45rem; color: #687d85; background: #edf2f4; font-size: .58rem; font-weight: 900; }.online .status { color: #147258; background: #e5f8f1; }
.text-button { width: 100%; margin-top: 1rem; padding: .7rem; border: 0; color: #69828c; background: transparent; font-size: .7rem; font-weight: 800; }
.active-character { margin-bottom: 1.1rem; }.active-character div { display: flex; min-width: 0; flex-direction: column; }.active-character strong { margin: .25rem 0 .15rem; }.active-character span { color: var(--muted); font-size: .65rem; }.active-character button { padding: .48rem .68rem; border: 1px solid #a7d6e0; color: var(--cyan-dark); background: #f5fcfd; font-size: .66rem; font-weight: 900; }
.section-heading > span { padding: .3rem .42rem; border: 1px solid #c7dfe5; color: #5f7a84; background: #fff; font: 800 .6rem/1 ui-monospace, monospace; }
.scan-button { width: 100%; min-height: 2.7rem; margin-bottom: .6rem; border: 1px solid #83cfdf; color: var(--cyan-dark); background: #fff; font-size: .72rem; font-weight: 900; }
.player-card.selected { border-color: var(--cyan); border-left-color: var(--cyan); background: #effafd; box-shadow: inset 0 0 0 1px #9bddE9; }.player-card b { color: var(--cyan-dark); font: 900 .66rem/1 ui-monospace, monospace; }
.empty { padding: 1.7rem .8rem; border: 2px dashed #c6dee5; color: #789099; background: rgba(255,255,255,.55); text-align: center; font-size: .7rem; line-height: 1.6; }
.invoice-form { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #bedde5; }
.invoice-form label { display: block; margin-bottom: .7rem; }.invoice-form label > span { display: block; margin-bottom: .38rem; color: #536f7a; font-size: .68rem; font-weight: 900; }
.money-input { display: flex; align-items: center; border: 1px solid #aed4de; background: #fff; }.money-input b { padding-left: .8rem; color: var(--cyan-dark); font-size: 1.1rem; }.money-input input, .invoice-form input[type=text] { width: 100%; min-height: 3rem; border: 0; outline: 0; color: var(--navy); background: #fff; font-size: 1rem; font-weight: 850; }.money-input input { padding: .55rem .75rem .55rem .4rem; }.invoice-form input[type=text] { padding: .65rem .75rem; border: 1px solid #aed4de; font-size: .78rem; }
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: -.2rem 0 .85rem; }.quick-amounts button { min-height: 2rem; padding: .2rem; border: 1px solid #b6dce5; color: var(--cyan-dark); background: #f6fcfd; font-size: .6rem; font-weight: 900; }
.invoice-summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .8rem 0; padding: .72rem; border-left: .22rem solid var(--cyan); background: #fff; }.invoice-summary span { color: var(--muted); font-size: .65rem; }.invoice-summary strong { overflow: hidden; color: var(--navy); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.send-button { width: 100%; min-height: 3.35rem; border: 0; border-radius: .2rem; color: #fff; background: var(--cyan); box-shadow: 0 .45rem 1rem rgba(24,167,197,.22); font-size: .8rem; font-weight: 950; }.send-button:disabled { background: #a7cbd3; box-shadow: none; cursor: not-allowed; }
.dialog { width: min(calc(100% - 2rem), 440px); padding: 0; border: 0; color: var(--navy); background: #fff; box-shadow: 0 1.4rem 4rem rgba(7,54,69,.35); }.dialog::backdrop { background: rgba(15,48,59,.62); backdrop-filter: blur(4px); }.dialog form { padding: 1.1rem; border-top: .3rem solid var(--cyan); }.dialog h2 { margin: .35rem 0 1rem; }.dialog dl { margin: 0; }.dialog dl div { display: grid; grid-template-columns: 5rem 1fr; padding: .55rem 0; border-bottom: 1px dashed #cfdee2; }.dialog dt { color: var(--muted); font-size: .68rem; }.dialog dd { margin: 0; overflow-wrap: anywhere; font-size: .78rem; font-weight: 850; }.dialog-actions { display: grid; grid-template-columns: 1fr 1.7fr; gap: .5rem; margin-top: 1rem; }.dialog-actions button { min-height: 2.8rem; border: 1px solid #b7d5dc; font-size: .72rem; font-weight: 900; }.cancel-button { color: #647d86; background: #fff; }.confirm-button { color: #fff; border-color: var(--cyan) !important; background: var(--cyan); }
.toast { position: fixed; z-index: 20; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 1rem; max-width: 480px; margin: auto; padding: .8rem; border: 1px solid #91d5e3; color: #12677b; background: #f2fcfe; box-shadow: 0 .8rem 2rem rgba(7,68,86,.22); font-size: .72rem; font-weight: 850; text-align: center; }.toast.error { color: #9f3e3e; border-color: #e6aaaa; background: #fff5f5; }
.install-button { position: fixed; z-index: 10; right: .8rem; bottom: calc(.8rem + env(safe-area-inset-bottom)); padding: .55rem .7rem; border: 1px solid #82cad9; color: var(--cyan-dark); background: #fff; box-shadow: 0 .4rem 1rem rgba(10,77,97,.18); font-size: .62rem; font-weight: 900; }
@keyframes bounce { to { transform: translateY(-.45rem); background: var(--cyan-dark); } }
@media (min-width: 700px) { body { padding: 1.5rem 0; }.shell { min-height: calc(100dvh - 3rem); border-radius: .7rem; overflow: hidden; }.screen { min-height: calc(100dvh - 79px - 3rem); } }