@font-face { font-family: "Noto Sans Thai"; src: url(fonts/NotoSansThai-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans Thai"; src: url(fonts/NotoSansThai-Bold.ttf) format("truetype"); font-weight: 600 700; font-display: swap; }

/* All colours live here. Calm cool palette chosen by Bro! (mockup v1): no orange tones. */
:root {
  --bg: #F5F7FA; --card: #FFFFFF; --navy: #1F3A5F; --navy-soft: #E7EDF5; --ink: #26303D; --muted: #6B7684;
  --line: #E3E8EE; --soft: #CBD3DC; --heart: #8FA9C8;
  --sad: #5B8DEF; --sad-t: #EAF1FE; --sad-d: #2F62C4;
  --mad: #E5675F; --mad-t: #FDECEA; --mad-d: #B24B44;
  --scared: #9479D1; --scared-t: #F2EDFB; --scared-d: #5E45A6;
  --joy: #E9B53C; --joy-t: #FDF5E2; --joy-d: #8A6512;
  --power: #3FA7B5; --power-t: #E3F4F6; --power-d: #217782;
  --peace: #4FB386; --peace-t: #E6F6EE; --peace-d: #2E7D5B;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: "Noto Sans Thai", -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
textarea, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.app { max-width: 520px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.appbar { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 10px; }
.appbar .name { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.15; }
.appbar .tag { font-size: 12.5px; color: var(--muted); }
.icon-btn { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; }
.back { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -10px; }
.view { flex: 1; padding: 6px 20px calc(110px + var(--safe-b)); }
h1 { font-size: 25px; font-weight: 700; line-height: 1.3; }
.sub { font-size: 15px; color: var(--muted); margin-top: 2px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border-radius: 16px;
  background: var(--navy); color: #fff; font-size: 17px; font-weight: 600; padding: 0 16px; }
.btn.ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.btn:disabled { background: #A9B4C2; cursor: default; }  /* solid, so nothing shows through when it floats */
.btn.danger { background: #fff; color: var(--mad-d); border: 1.5px solid var(--mad-t); }
.link { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* write */
.input { margin-top: 14px; width: 100%; min-height: 0; height: 28vh; resize: none; background: #fff; border: 1.5px solid var(--soft);
  border-radius: 18px; padding: 14px 16px; font-size: 16.5px; line-height: 1.65; outline: none; display: block; }
.input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px var(--navy-soft); }
.count { text-align: right; font-size: 12.5px; color: #9AA4B0; margin-top: 4px; }
.hint { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; font-size: 14px; }
.write-go { margin-top: 16px; position: sticky; bottom: calc(80px + var(--safe-b)); z-index: 5; box-shadow: 0 0 0 10px var(--bg); }

/* result */
.risk { background: #fff; border: 1.5px solid var(--sad); border-radius: 18px; padding: 14px 16px; margin: 8px 0 4px; }
.risk b { display: block; font-size: 16px; color: var(--navy); }
.risk p { font-size: 14px; color: #4B5563; margin-top: 4px; }
.risk a { display: inline-flex; margin-top: 10px; background: var(--navy); color: #fff; border-radius: 12px; padding: 8px 14px;
  font-weight: 600; text-decoration: none; }
.emo { display: flex; gap: 12px; align-items: flex-start; border-radius: 18px; padding: 13px 14px; margin-top: 10px;
  border: 1.5px solid var(--line); background: #fff; width: 100%; text-align: left; }
.emo .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; }
.emo .path { font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.emo .path i { font-style: normal; color: var(--muted); font-weight: 400; margin: 0 3px; }
.emo .why { font-size: 13.5px; color: #4B5563; line-height: 1.5; margin-top: 3px; }
.emo .why b { font-weight: 600; color: var(--ink); }
.check { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--soft); background: #fff; margin-top: 2px;
  display: grid; place-items: center; }
.check svg { opacity: 0; }
.emo.on .check { border: none; background: var(--c); }
.emo.on .check svg { opacity: 1; }
.emo.on { background: var(--t); border-color: var(--c); }
.result-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.wheelbox { display: flex; align-items: center; gap: 14px; margin-top: 12px; background: #fff; border-radius: 18px; padding: 10px 14px;
  border: 1px solid var(--line); }
.wheelbox p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.wheelbox p b { color: var(--ink); font-weight: 600; }
.actions { position: fixed; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, transparent);
  padding: 16px 20px calc(16px + var(--safe-b)); }
.actions .row { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.loading { text-align: center; padding: 70px 0 20px; color: var(--muted); }
.spinner { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid var(--navy-soft); border-top-color: var(--navy);
  animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--navy-soft); } }
.error { background: var(--mad-t); color: var(--mad-d); border-radius: 14px; padding: 10px 14px; font-size: 14px; margin-top: 12px; }

/* bottom sheet */
.scrim { position: fixed; inset: 0; background: rgba(20, 30, 45, .38); z-index: 20; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; background: #fff; border-radius: 28px 28px 0 0;
  max-height: 88vh; overflow-y: auto; padding: 10px 20px calc(24px + var(--safe-b)); max-width: 520px; margin: 0 auto; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--soft); margin: 0 auto 12px; }
.sheet h2 { font-size: 21px; font-weight: 700; }
.crumb { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14.5px; flex-wrap: wrap; min-height: 30px; }
.crumb .c { padding: 4px 11px; border-radius: 14px; font-weight: 600; }
.crumb .c.empty { border: 1.5px dashed var(--soft); color: #9AA4B0; font-weight: 400; }
.lvl { font-size: 13px; color: var(--muted); margin-top: 16px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.pick { border-radius: 14px; padding: 10px 6px; text-align: center; font-size: 15px; border: 1.5px solid var(--line); background: #fff; min-height: 46px; }
.pick small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.pick.on { border-width: 2px; font-weight: 700; }
.sheet .btn { margin-top: 18px; }
.sheet .btn.sticky { position: sticky; bottom: 0; box-shadow: 0 -12px 16px #fff; }

/* history */
.month { font-size: 15px; font-weight: 700; margin: 18px 0 4px; }
.entry { display: flex; gap: 12px; background: #fff; border-radius: 16px; padding: 12px; margin-top: 8px; border: 1px solid var(--line);
  width: 100%; text-align: left; }
.day { flex: none; width: 50px; text-align: center; background: var(--bg); border-radius: 12px; padding: 6px 0; align-self: flex-start; }
.day b { display: block; font-size: 19px; color: var(--navy); line-height: 1.2; }
.day span { font-size: 11.5px; color: var(--muted); }
.entry .t { font-size: 12px; color: var(--muted); }
.entry .x { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.tg { font-size: 12.5px; padding: 2px 9px; border-radius: 10px; font-weight: 600; }
.export { display: flex; align-items: center; gap: 12px; margin-top: 14px; border: 1.5px solid var(--navy); border-radius: 16px;
  padding: 12px 14px; background: #fff; width: 100%; text-align: left; }
.export b { font-size: 16px; color: var(--navy); }
.export span { display: block; font-size: 12.5px; color: var(--muted); }
.empty-state { text-align: center; color: var(--muted); padding: 50px 10px; }
.full { white-space: pre-wrap; font-size: 15.5px; line-height: 1.65; margin-top: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); flex: 1; }
.field input { border: 1.5px solid var(--soft); border-radius: 12px; padding: 10px; color: var(--ink); background: #fff; }

/* tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); display: flex;
  justify-content: space-around; padding: 8px 0 calc(8px + var(--safe-b)); z-index: 10; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12.5px; color: #9AA4B0; width: 120px; }
.tab .ic { width: 48px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
.tab.on { color: var(--navy); font-weight: 600; }
.tab.on .ic { background: var(--navy-soft); }

/* login */
.login { max-width: 360px; margin: 0 auto; padding: 18vh 24px 40px; text-align: center; }
.login h1 { margin-top: 14px; color: var(--navy); }
.login form { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.login input { border: 1.5px solid var(--soft); border-radius: 14px; padding: 14px; font-size: 17px; text-align: center; background: #fff; }
.small { font-size: 13px; color: var(--muted); margin-top: 18px; }

/* print / export */
.ptable { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; background: #fff; }
.ptable th, .ptable td { border: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.ptable th { background: var(--navy-soft); color: var(--navy); }
.ptable th:nth-child(1) { width: 22%; } .ptable th:nth-child(2) { width: 46%; }
@media print {
  .noprint, .tabbar { display: none !important; }
  body { background: #fff; }
  .view { padding: 0; }
  .ptable { font-size: 11pt; }
  .ptable tr { break-inside: avoid; }
}

.when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--muted); }
.when label { display: flex; align-items: center; gap: 8px; }
.when input { border: 1.5px solid var(--soft); border-radius: 12px; padding: 6px 10px; background: #fff; color: var(--ink); font-size: 15px; }