:root{
  --ground:#FFF6EF; --surface:#FFFFFF; --surface-2:#FFEBDC;
  --ink:#2A1508; --muted:#85644F; --line:#F3D9C6;
  --accent:#FF6A13; --accent-ink:#FFFFFF; --accent-deep:#C2410C; --accent-soft:#FFE1CC;
  --bad:#D8432F;
  --shadow:0 1px 2px rgba(120,50,10,.06),0 14px 34px -14px rgba(194,65,12,.25);
  --display:"Bai Jamjuree","Anuphan",system-ui,sans-serif;
  --body:"Anuphan",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#150E09; --surface:#1F150E; --surface-2:#2B1C11;
    --ink:#FBEDE3; --muted:#C09C84; --line:#3A2717;
    --accent:#FF7F2E; --accent-ink:#1A0C03; --accent-deep:#FFA66B; --accent-soft:#3D2210;
    --bad:#F06A55;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 36px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  padding-inline:16px;padding-block:calc(20px + env(safe-area-inset-top,0px)) calc(48px + env(safe-area-inset-bottom,0px));min-height:100vh;
  background-image:radial-gradient(900px 440px at 100% -10%,var(--accent-soft),transparent 70%),radial-gradient(700px 380px at -10% 110%,var(--accent-soft),transparent 70%);
  background-repeat:no-repeat;background-attachment:fixed}
.wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
h1,h2{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.2}
h1 em{font-style:normal;color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px}
.mark{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 200deg,var(--accent),#FFB347,var(--accent));box-shadow:inset 0 0 0 4px var(--ground),0 0 0 2px var(--accent)}

.btn{border:0;border-radius:999px;padding:14px 30px;font-weight:600;font-size:17px;display:inline-flex;align-items:center;gap:10px;transition:transform .15s,opacity .15s}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 22px -10px var(--accent)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn svg{width:18px;height:18px}
.err{color:var(--bad);font-size:14px;margin:0}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--ground);padding:12px 22px;border-radius:999px;font-weight:600;transition:all .3s;pointer-events:none;z-index:10}
.toast.on{opacity:1;transform:translate(-50%,0)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);padding:clamp(22px,5vw,40px);display:flex;flex-direction:column;gap:20px}
[hidden]{display:none!important}

/* send */
.send{max-width:620px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.send h1{font-size:clamp(30px,6.5vw,44px);font-weight:700}
.lead{margin:-8px 0 0;color:var(--muted)}
.field{position:relative}
textarea{width:100%;min-height:170px;resize:none;border:2px solid var(--line);border-radius:22px;padding:18px 18px 34px;font:inherit;font-size:19px;line-height:1.5;color:var(--ink);background:var(--ground);transition:border-color .15s}
textarea:focus{border-color:var(--accent);outline:none}
.count{position:absolute;right:16px;bottom:12px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.count.over{color:var(--bad)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hint{font-size:13px;color:var(--muted)}
.mine{display:flex;flex-direction:column;gap:10px}
.mine h2{font-size:15px;font-weight:600;color:var(--muted)}
.mine ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mine li{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;overflow-wrap:anywhere}
.mine li time{flex:none;font-size:12px;color:var(--muted)}

/* wall */
.whead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.whead h1{font-size:clamp(30px,5vw,52px);font-weight:700}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;background:var(--surface);border:1px solid var(--line);padding:8px 14px;border-radius:999px;color:var(--ink);font-weight:500}
button.chip:hover{border-color:var(--accent)}
.chip b{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}
.live i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:ping 1.8s infinite}
.live.off i{background:var(--bad);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.board{columns:4 260px;column-gap:16px}
.note{break-inside:avoid;margin:0 0 16px;border-radius:24px;padding:20px 22px 16px;position:relative;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.note p{margin:0;font-family:var(--display);font-weight:500;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.note.s p{font-size:26px}
.note.m p{font-size:21px}
.note.l p{font-size:17px;font-family:var(--body)}
.note footer{display:flex;font-size:12.5px;opacity:.75}
.note footer time{margin-left:auto}
.v0{background:linear-gradient(150deg,#FF8A3D,#FF5A0A);color:#fff}
.v1{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.v2{background:#FFD8B8;color:#3A1A06}
.v3{background:#7A2A0A;color:#FFE7D6}
.v4{background:var(--accent-soft);color:var(--ink)}
.note.new{animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.85) translateY(12px);opacity:.001}100%{transform:none;opacity:1}}
.del{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.18);color:inherit;display:grid;place-items:center;opacity:0;transition:opacity .15s;font-size:16px;line-height:1}
.note:hover .del,.del:focus-visible{opacity:1}
.waiting{border:2px dashed var(--line);border-radius:30px;padding:clamp(40px,8vw,90px) 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.waiting .dots{display:flex;gap:8px}
.waiting .dots span{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:bounce 1.2s infinite}
.waiting .dots span:nth-child(2){animation-delay:.15s}.waiting .dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-10px);opacity:1}}
.waiting h2{font-size:clamp(22px,4vw,30px)}
.waiting p{margin:0;color:var(--muted);max-width:46ch}
.waiting code{background:var(--surface);border:1px solid var(--line);padding:2px 10px;border-radius:8px;font-size:15px;color:var(--accent-deep);overflow-wrap:anywhere}
.login{max-width:440px;margin:8vh auto 0}
.login input{width:100%;border:2px solid var(--line);border-radius:16px;padding:14px 16px;font:inherit;font-size:18px;background:var(--ground);color:var(--ink)}
.login input:focus{border-color:var(--accent);outline:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:520px){.hint{display:none}}