:root{
  --bg:#F5F7F1;
  --card:#FFFFFF;
  --ink:#1E2E28;
  --ink-soft:#5B6B62;
  --hairline:#DEE5D9;
  --thread-calm:#9BB09F;
  --thread-warm:#E0932C;
  --thread-hot:#D9647F;
  --amber:#E0932C;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  padding-bottom:40px;
}
.wrap{max-width:520px; margin:0 auto; padding:0 16px;}
header{padding:28px 0 18px; text-align:center;}
header h1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:30px;
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
header p{margin:0; color:var(--ink-soft); font-size:14px;}
.tabbar{
  display:flex;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:4px;
  margin-bottom:20px;
  gap:4px;
}
.tabbar button{
  flex:1; border:none; background:transparent;
  padding:10px 8px; font-family:'Inter',sans-serif;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  border-radius:9px; cursor:pointer;
}
.tabbar button.active{background:var(--ink); color:#fff;}
.card{
  background:var(--card); border:1px solid var(--hairline);
  border-radius:14px; padding:16px; margin-bottom:14px;
}
.name-gate{text-align:center; padding:32px 20px;}
.name-gate h2{font-family:'Fraunces',serif; font-weight:500; font-size:20px; margin:0 0 6px;}
.name-gate p{color:var(--ink-soft); font-size:14px; margin:0 0 18px;}
input[type=text]{
  width:100%; padding:11px 13px; border:1px solid var(--hairline);
  border-radius:10px; font-family:'Inter',sans-serif; font-size:15px;
  background:#fff; color:var(--ink);
}
input:focus{outline:2px solid var(--amber); outline-offset:1px;}
.btn{
  display:inline-block; border:none; border-radius:10px; padding:11px 18px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; cursor:pointer;
}
.btn-primary{background:var(--ink); color:#fff; width:100%; margin-top:12px;}
.section-label{
  font-size:12px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-soft); font-weight:600; margin:22px 0 10px;
}
.preset-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.preset-btn{
  background:#fff; border:1px solid var(--hairline); border-radius:12px;
  padding:12px 10px; text-align:left; font-family:'Inter',sans-serif;
  font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer; line-height:1.3;
}
.preset-btn:active{transform:scale(0.97);}
.preset-btn .emoji{font-size:18px; display:block; margin-bottom:4px;}
.custom-row{display:flex; gap:8px; margin-top:10px;}
.custom-row input{flex:1;}
.custom-row button{background:var(--amber); color:#fff; border:none; border-radius:10px; padding:0 16px; font-weight:600; font-size:14px;}
.feed{position:relative; padding-left:22px; margin-top:6px;}
.thread-line{
  position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(to bottom, var(--thread-calm), var(--thread-warm) 60%, var(--thread-hot));
  border-radius:2px;
}
.update{position:relative; margin-bottom:16px;}
.update-dot{
  position:absolute; left:-22px; top:4px; width:12px; height:12px;
  border-radius:50%; background:var(--amber); border:2px solid var(--bg);
}
.update-card{background:var(--card); border:1px solid var(--hairline); border-radius:14px; padding:14px 16px;}
.update-msg{font-size:15.5px; font-weight:500; line-height:1.4; margin:0;}
.update-time{font-size:12px; color:var(--ink-soft); margin-top:4px;}
.update-actions{margin-top:8px; display:flex; align-items:center; gap:10px;}
.link-btn{background:none; border:none; color:var(--ink-soft); font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0;}
.comment-box{margin-top:10px; display:none;}
.comment-box.open{display:block;}
.comment-list{margin:8px 0 0; padding:0; list-style:none;}
.comment-item{font-size:13px; padding:6px 0; border-top:1px solid var(--hairline);}
.comment-input-row{display:flex; gap:6px; margin-top:8px;}
.comment-input-row input{flex:1; padding:8px 10px; font-size:13.5px;}
.comment-input-row button{background:var(--ink); color:#fff; border:none; border-radius:8px; padding:0 14px; font-size:13px; font-weight:600;}
.empty{text-align:center; color:var(--ink-soft); font-size:14px; padding:30px 10px;}
.inbox-item{padding:10px 0; border-bottom:1px solid var(--hairline);}
.inbox-item:last-child{border-bottom:none;}
.inbox-name{font-weight:600; font-size:13.5px;}
.inbox-context{font-size:11.5px; color:var(--ink-soft); margin:1px 0 4px;}
.inbox-text{font-size:14px;}
.lock-row{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap;}
.lock-row button{background:none; border:none; color:var(--ink-soft); font-size:12.5px; text-decoration:underline; cursor:pointer;}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:20px;
  font-size:13.5px; font-weight:500; opacity:0; transition:opacity .25s; pointer-events:none;
}
.toast.show{opacity:1;}
.loading{text-align:center; color:var(--ink-soft); font-size:14px; padding:30px;}

.pet{
  position:fixed;
  bottom:10px;
  left:0;
  font-size:32px;
  z-index:999;
  animation:walk 18s linear infinite;
  pointer-events:none;
}
@keyframes walk{
  0%{ left:-40px; transform:scaleX(1); }
  49%{ transform:scaleX(1); }
  50%{ left:calc(100% - 40px); transform:scaleX(-1); }
  99%{ transform:scaleX(-1); }
  100%{ left:-40px; transform:scaleX(1); }
}