:root{
  --bg:#05070c;
  --bg-soft:#080e17;
  --panel:rgba(10,16,26,.78);
  --panel-solid:#0a111c;
  --line:rgba(255,255,255,.095);
  --line-strong:rgba(255,255,255,.16);
  --text:#f5f7fb;
  --muted:#a8b3c3;
  --muted2:#718095;
  --gold:#f3d996;
  --gold-soft:#fff1c7;
  --blue:#cfe8ff;
  --danger:#eaa1a1;
  --shadow:0 28px 90px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
  "Noto Sans KR","Malgun Gothic",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,textarea,input{font:inherit}
button{color:inherit}
button:focus-visible,textarea:focus-visible,input:focus-visible{
  outline:2px solid rgba(243,217,150,.8);outline-offset:3px;
}
.app-shell{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 5%,rgba(75,131,184,.10),transparent 34%),
    linear-gradient(180deg,#04070c 0%,#07101a 48%,#03060a 100%);
}
.sky{position:fixed;inset:0;z-index:-5;pointer-events:none;overflow:hidden}
.stars{position:absolute;inset:-80px;opacity:.62}
.stars-a{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.35px),
    radial-gradient(circle,rgba(202,225,255,.54) 0 .8px,transparent 1.2px);
  background-size:97px 97px,149px 149px;
  background-position:0 0,37px 51px;
  animation:starDrift 70s linear infinite;
}
.stars-b{
  opacity:.23;
  background-image:radial-gradient(circle,rgba(243,217,150,.88) 0 1px,transparent 1.5px);
  background-size:257px 257px;
  background-position:90px 31px;
  animation:twinkle 5.5s ease-in-out infinite alternate;
}
.glow{position:absolute;border-radius:50%;filter:blur(30px)}
.glow-top{
  width:75vw;height:46vw;left:50%;top:-27vw;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(116,184,238,.18),rgba(68,115,158,.07) 42%,transparent 70%);
}
.glow-bottom{
  width:95vw;height:44vw;left:50%;bottom:-34vw;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(239,214,153,.11),rgba(60,104,145,.05) 42%,transparent 70%);
}
.meteor{
  position:absolute;left:78%;top:18%;width:110px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88));
  transform:rotate(-24deg);
  filter:drop-shadow(0 0 5px rgba(207,232,255,.8));
  animation:meteor 14s ease-in-out infinite 4s;
}
.topbar{
  width:min(1160px,calc(100% - 36px));
  margin:0 auto;
  min-height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:relative;z-index:10;
}
.brand{
  border:0;background:none;padding:8px 4px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:650;letter-spacing:.06em;
}
.brand-dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--gold-soft);
  box-shadow:0 0 12px rgba(243,217,150,.5),0 0 34px rgba(190,222,255,.23);
}
.top-actions{display:flex;align-items:center;gap:10px}
.visitor-count{font-size:11px;color:var(--muted2)}
.all-link{font-size:11px;color:var(--muted2);text-decoration:none;transition:color .2s ease}
.all-link:hover{color:var(--text);text-decoration:none}
.pill-btn{
  min-width:54px;border:1px solid var(--line);background:rgba(255,255,255,.035);
  padding:7px 11px;border-radius:999px;cursor:pointer;transition:.2s ease;
}
.pill-btn:hover{background:rgba(255,255,255,.075);transform:translateY(-1px)}
main{
  flex:1;
  width:min(1000px,calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-areas:"stack";
  align-items:center;
  padding:42px 0 88px;
}
.screen{
  grid-area:stack;
  display:none;
  width:100%;
  min-height:500px;
  align-items:center;
  justify-content:center;
}
.screen.active{display:flex;animation:screenIn .38s ease both}
.hero{text-align:center;width:min(780px,100%);margin:auto}
.eyebrow,.step-label{
  color:#aeb9c8;font-size:12px;letter-spacing:.085em;text-transform:uppercase;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:999px;padding:8px 12px;
  background:rgba(255,255,255,.025);
}
.tiny-light{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(243,217,150,.72)}
.hero h1{
  margin:28px 0 18px;
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1.04;
  font-size:clamp(46px,7.6vw,82px);
}
.warm{color:#fff2ca;text-shadow:0 0 32px rgba(243,217,150,.12)}
.lead{
  max-width:650px;margin:0 auto;color:var(--muted);
  line-height:1.82;font-size:clamp(15px,2vw,18px);word-break:keep-all;
}
.lead.compact{max-width:520px}
.principles{
  margin:27px auto 30px;
  display:flex;justify-content:center;gap:9px;flex-wrap:wrap;
  color:#758397;font-size:12px;
}
.sep{color:#3f4b5b}
.primary-btn,.secondary-btn,.kind-btn{
  border-radius:999px;cursor:pointer;transition:.2s ease;
}
.primary-btn{
  border:1px solid rgba(255,241,199,.24);
  background:linear-gradient(180deg,#f7e8bb,#e5ca83);
  color:#15130d;
  min-height:50px;
  padding:0 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:15px;
  font-weight:700;
  box-shadow:0 10px 36px rgba(215,178,88,.12);
}
.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.primary-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.primary-btn.full{width:100%;margin-top:18px}
.text-btn,.footer-link,.report-btn,.back-btn{
  border:0;background:none;cursor:pointer;
}
.text-btn{display:block;margin:18px auto 0;color:#758397;font-size:12px;padding:8px}
.text-btn:hover,.footer-link:hover{color:#c8d1dd}
.panel{
  width:min(680px,100%);
  margin:auto;
  border:1px solid var(--line);
  border-radius:28px;
  padding:34px 36px;
  background:linear-gradient(180deg,rgba(12,19,30,.82),rgba(7,12,20,.75));
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
  position:relative;
}
.panel.narrow{width:min(640px,100%)}
.back-btn{
  position:absolute;left:23px;top:22px;
  width:40px;height:40px;border-radius:50%;
  color:#aab6c6;font-size:27px;
  line-height:1;
}
.back-btn:hover{background:rgba(255,255,255,.05);color:#fff}
.step-label{text-align:center;margin:0 0 16px;color:#778599}
.panel h2{
  margin:0 auto;text-align:center;max-width:570px;
  font-size:clamp(25px,4vw,36px);line-height:1.35;letter-spacing:-.035em;word-break:keep-all;
}
.sub{
  margin:11px auto 26px;text-align:center;color:var(--muted);line-height:1.65;
  font-size:14px;word-break:keep-all;
}
.mood-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mood-card{
  min-height:100px;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.026);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:10px;padding:20px;cursor:pointer;text-align:left;transition:.2s ease;
}
.mood-card:hover{
  transform:translateY(-2px);
  border-color:rgba(243,217,150,.25);
  background:rgba(243,217,150,.055);
}
.mood-symbol{color:var(--gold);font-size:20px}
.selected-mood{
  width:max-content;max-width:100%;margin:0 auto 12px;
  color:#d7c99e;font-size:12px;padding:6px 10px;border-radius:999px;
  background:rgba(243,217,150,.055);border:1px solid rgba(243,217,150,.10);
}
form{margin-top:25px}
.field-label{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:13px;color:#d8dee8;font-weight:650;
}
.field-label.second{margin-top:18px}
.optional{font-size:10px;color:#718095;font-weight:500}
.textarea-wrap{position:relative}
textarea{
  resize:vertical;width:100%;border:1px solid var(--line);
  background:rgba(0,0,0,.15);color:#f1f4f8;border-radius:16px;
  padding:15px 16px 32px;line-height:1.65;min-height:132px;
  transition:.2s ease;
}
.textarea-wrap.small textarea{min-height:92px}
textarea::placeholder{color:#59677a}
textarea:focus{border-color:rgba(243,217,150,.28);background:rgba(0,0,0,.22)}
.counter{position:absolute;right:13px;bottom:10px;font-size:10px;color:#607086}
.counter b{font-weight:500}
.consent-row{
  margin-top:17px;display:flex;align-items:flex-start;gap:10px;
  color:#8895a7;font-size:11px;line-height:1.55;cursor:pointer;
}
.consent-row input{margin-top:2px;accent-color:#d8bd78}
.form-error{min-height:18px;margin:9px 0 0;color:var(--danger);font-size:12px;text-align:center}
.privacy-mini{
  margin:14px auto 0;color:#5f6c7d;font-size:10px;line-height:1.55;text-align:center;max-width:530px;
}
.encounter-panel{text-align:center}
.encounter-orbit{
  width:82px;height:40px;position:relative;margin:4px auto 13px;
}
.orbit-dot{
  position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translateY(-50%);
}
.orbit-a{left:9px;background:#d2e9ff;box-shadow:0 0 20px rgba(181,221,255,.34)}
.orbit-b{right:9px;background:#ffe9a9;box-shadow:0 0 20px rgba(243,217,150,.35)}
.orbit-line{position:absolute;left:23px;right:23px;top:50%;height:1px;background:linear-gradient(90deg,#bfe0ff,#f4d98f);opacity:.45}
.encounter-kicker{margin:0 0 18px;color:#c4ceda;font-size:13px}
.encounter-card{
  text-align:left;border-radius:21px;border:1px solid var(--line);
  padding:24px;background:rgba(255,255,255,.026);
}
.encounter-meta{display:flex;gap:7px;color:#6d7c90;font-size:10px;margin-bottom:15px}
.encounter-question{color:#8997a9;font-size:12px;line-height:1.65;margin:0 0 10px}
.encounter-answer{
  color:#f1f4f8;font-size:clamp(18px,3.5vw,24px);line-height:1.65;
  margin:0;letter-spacing:-.02em;white-space:pre-wrap;overflow-wrap:anywhere;
}
.gift-box{
  margin-top:22px;padding-top:17px;border-top:1px solid var(--line);
}
.gift-label{color:#b9a879;font-size:10px;letter-spacing:.04em}
.gift-box p{margin:7px 0 0;color:#e9ddb9;line-height:1.65;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.encounter-actions{display:flex;justify-content:center;align-items:center;gap:14px;margin:18px 0 0}
.kind-btn{
  min-height:42px;padding:0 15px;border:1px solid rgba(243,217,150,.16);
  background:rgba(243,217,150,.05);color:#e8d9ae;
}
.kind-btn:hover{background:rgba(243,217,150,.09)}
.kind-btn.sent{opacity:.65;cursor:default}
.kind-icon{margin-right:6px}
.report-btn{font-size:11px;color:#596779;padding:8px}
.report-btn:hover{color:#a98585}
.after-note{
  margin:15px auto 0;color:#b8c4d2;font-size:12px;line-height:1.6;
  animation:screenIn .25s ease both;
}
.secondary-btn{
  margin-top:25px;min-height:45px;padding:0 18px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  color:#cad2dd;
}
.secondary-btn:hover{background:rgba(255,255,255,.07)}
.finish-hero h2{
  margin:17px auto 16px;font-size:clamp(29px,5vw,48px);line-height:1.35;letter-spacing:-.04em;
}
.final-light{
  font-size:34px;color:var(--gold);margin-bottom:18px;
  text-shadow:0 0 20px rgba(243,217,150,.5);
  animation:breathe 3.5s ease-in-out infinite;
}
.finish-hero .primary-btn{margin-top:27px;min-width:130px}
.footer{
  width:min(1160px,calc(100% - 36px));margin:0 auto;
  min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;
  color:#4f5d70;font-size:10px;position:relative;z-index:5;
}
.footer-link{padding:6px;color:#5c697a}
.modal{
  width:min(560px,calc(100% - 28px));border:1px solid var(--line-strong);
  border-radius:22px;background:#0a111c;color:var(--text);padding:0;
  box-shadow:0 30px 100px rgba(0,0,0,.68);
}
.modal::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(7px)}
.modal-inner{padding:28px;position:relative}
.modal-close{
  position:absolute;right:15px;top:13px;width:34px;height:34px;
  border:0;background:none;color:#738195;font-size:25px;cursor:pointer;
}
.modal h3{margin:0 32px 16px 0;font-size:22px}
.modal p,.modal li{color:#a8b3c3;font-size:13px;line-height:1.75}
.modal ul{padding-left:20px;margin-bottom:0}
.noscript{position:fixed;inset:auto 16px 16px;background:#fff;color:#111;padding:12px;border-radius:10px;z-index:100}
@keyframes screenIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes twinkle{from{opacity:.14}to{opacity:.33}}
@keyframes starDrift{from{transform:translateY(0)}to{transform:translateY(97px)}}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.74}50%{transform:scale(1.08);opacity:1}}
@keyframes meteor{
  0%,74%,100%{opacity:0;transform:translate(0,0) rotate(-24deg)}
  77%{opacity:.9}
  86%{opacity:0;transform:translate(-280px,140px) rotate(-24deg)}
}
@media(max-width:680px){
  .topbar{width:calc(100% - 26px);min-height:61px}
  .brand{font-size:13px}
  .visitor-count{display:none!important}
  .all-link{display:none}
  main{width:calc(100% - 24px);padding:28px 0 70px}
  .screen{min-height:520px}
  .hero h1{font-size:clamp(42px,13vw,62px);margin-top:23px}
  .lead{font-size:15px;line-height:1.72}
  .principles{margin-top:22px}
  .panel{padding:29px 18px 24px;border-radius:22px}
  .back-btn{left:10px;top:10px}
  .panel h2{font-size:27px;padding:0 18px}
  .sub{margin-bottom:22px}
  .mood-grid{grid-template-columns:1fr}
  .mood-card{min-height:74px;flex-direction:row;align-items:center;padding:16px 17px}
  .encounter-card{padding:20px 17px}
  .footer{width:calc(100% - 24px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
}


.my-entries-btn{
  margin-top:3px;
  color:#9c8e68;
}
.my-entries-btn:hover{color:#ead9a6}
.reach-note{
  width:max-content;
  max-width:min(520px,100%);
  margin:20px auto 0;
  padding:10px 14px;
  border:1px solid rgba(243,217,150,.12);
  border-radius:999px;
  background:rgba(243,217,150,.045);
  color:#cfbf91;
  font-size:12px;
  line-height:1.5;
}
.mine-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:min(58vh,520px);
  overflow:auto;
  padding-right:3px;
}
.mine-item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 15px;
  background:rgba(255,255,255,.025);
}
.mine-answer{
  margin:0;
  color:#e7ecf3!important;
  font-size:13px!important;
  line-height:1.65!important;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.mine-reach{
  margin:8px 0 0!important;
  color:#b8a97d!important;
  font-size:11px!important;
  line-height:1.5!important;
}


.mine-field-label{
  display:block;
  margin:0 0 5px;
  color:#718095;
  font-size:9px;
  letter-spacing:.04em;
}
.mine-gift-label{
  margin-top:11px;
  padding-top:11px;
  border-top:1px solid var(--line);
}
.mine-gift{
  margin:0;
  color:#e5d9b8;
  font-size:12px;
  line-height:1.65;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.mine-item-footer{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mine-item-footer .mine-reach{margin:0!important}
.mine-edit-btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:#aab5c3;
  border-radius:999px;
  padding:6px 10px;
  font-size:10px;
  cursor:pointer;
}
.mine-edit-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.mine-editor-label{
  display:block;
  margin:14px 0 7px;
  color:#cfd7e1;
  font-size:12px;
  font-weight:650;
}
.mine-editor-textarea{
  width:100%;
  resize:vertical;
  border:1px solid var(--line);
  background:rgba(0,0,0,.17);
  color:#f1f4f8;
  border-radius:14px;
  padding:13px 14px;
  line-height:1.65;
}
.mine-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:15px;
}
.mine-editor-actions .primary-btn,
.mine-editor-actions .secondary-btn{
  margin:0;
  min-height:42px;
}

/* ===== 2026-08 bright human-centered theme ===== */
:root{
  --bg:#f8f5ef;
  --bg-soft:#f3ede5;
  --panel:rgba(255,253,249,.92);
  --panel-solid:#fffdf9;
  --line:rgba(91,70,52,.13);
  --line-strong:rgba(91,70,52,.21);
  --text:#44372f;
  --muted:#82766d;
  --muted2:#9a8d82;
  --gold:#bd8f4d;
  --gold-soft:#ead6ae;
  --blue:#90acbd;
  --danger:#b85f5f;
  --shadow:0 26px 80px rgba(99,77,55,.12);
}
html,body{background:var(--bg);color:var(--text)}
button:focus-visible,textarea:focus-visible,input:focus-visible{outline-color:rgba(189,143,77,.68)}
.app-shell{
  background:
    radial-gradient(circle at 8% 13%,rgba(255,255,255,.96),transparent 28%),
    radial-gradient(circle at 92% 15%,rgba(225,207,183,.38),transparent 28%),
    linear-gradient(180deg,#fbfaf7 0%,#f8f4ed 58%,#f1ebe2 100%);
}
.sky{overflow:hidden}
.stars,.glow,.meteor{display:none}
.sky::before,.sky::after{
  content:"";position:absolute;top:4%;width:min(39vw,560px);height:min(36vw,500px);
  background-repeat:no-repeat;background-size:cover;background-position:center;
  opacity:.17;filter:saturate(.8);pointer-events:none;
}
.sky::before{
  left:-5%;background-image:url("warm-left.webp");
  -webkit-mask-image:linear-gradient(90deg,#000 0 55%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 55%,transparent 100%);
}
.sky::after{
  right:-4%;background-image:url("warm-human.webp");
  -webkit-mask-image:linear-gradient(270deg,#000 0 58%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0 58%,transparent 100%);
}
.topbar{border-bottom:1px solid rgba(91,70,52,.08)}
.brand{font-family:Georgia,"Noto Serif KR","Batang",serif;color:#40342d}
.brand-dot{background:#c89a56;box-shadow:0 0 0 5px rgba(200,154,86,.10)}
.visitor-count{color:#9b8d82}
.all-link{color:#9a8c82;text-decoration:none}
.all-link:hover{color:#6f5a49;text-decoration:none}
.pill-btn{border-color:var(--line);background:rgba(255,255,255,.68);color:#5a4b40;box-shadow:0 6px 18px rgba(95,73,53,.05)}
.pill-btn:hover{background:#fff;border-color:rgba(91,70,52,.20)}
.eyebrow,.step-label{color:#9d7d58}
.eyebrow{border-color:var(--line);background:rgba(255,255,255,.70)}
.tiny-light{background:#bd8f4d;box-shadow:0 0 0 4px rgba(189,143,77,.10)}
.hero h1,.panel h2,.finish-hero h2{color:#40332b;font-family:Georgia,"Noto Serif KR","Nanum Myeongjo","Batang",serif}
.warm{color:#9b6f36;text-shadow:none}
.lead,.sub{color:#81756c}
.principles{color:#9c8f84}
.sep{color:#c3b7ac}
.primary-btn{
  border-color:rgba(166,120,60,.18);background:linear-gradient(180deg,#e4c995,#cfaa68);
  color:#35291f;box-shadow:0 10px 26px rgba(159,116,59,.13);
}
.text-btn,.footer-link{color:#93867b}
.text-btn:hover,.footer-link:hover{color:#5c4c40}
.panel{
  border-color:var(--line);background:rgba(255,253,249,.92);
  box-shadow:var(--shadow);backdrop-filter:blur(18px);
}
.back-btn{color:#8e8177}
.back-btn:hover{background:rgba(109,83,58,.06);color:#493c33}
.step-label{color:#a2825d}
.mood-card{
  border-color:var(--line);background:rgba(255,255,255,.72);color:#514239;
  box-shadow:0 7px 20px rgba(94,72,50,.03);
}
.mood-card:hover{border-color:rgba(178,132,72,.27);background:#f7ecdc}
.mood-symbol{color:#b8894b}
.selected-mood{color:#966d39;background:#f7ecdc;border-color:rgba(178,132,72,.13)}
.field-label{color:#5a493c}
.optional{color:#9b8d82}
textarea{
  border-color:var(--line);background:rgba(255,255,255,.83);color:#493c33;
  box-shadow:inset 0 1px 2px rgba(92,70,50,.03);
}
textarea::placeholder{color:#aaa097}
textarea:focus{border-color:rgba(178,132,72,.38);background:#fff}
.counter{color:#a1958b}
.consent-row{color:#92867c}
.consent-row input{accent-color:#b98c4e}
.privacy-mini{color:#a09489}
.encounter-kicker{color:#75695f}
.encounter-card{border-color:var(--line);background:rgba(255,255,255,.78);box-shadow:0 12px 32px rgba(94,72,50,.04)}
.encounter-meta{color:#9b8d82}
.encounter-question{color:#877a70}
.encounter-answer{color:#4b3d33}
.gift-box{border-top-color:var(--line)}
.gift-label{color:#9b7543}
.gift-box p{color:#7d6038}
.kind-btn{border-color:rgba(178,132,72,.18);background:#f7ecdc;color:#87602e}
.kind-btn:hover{background:#f2e2ca}
.report-btn{color:#9e8f84}
.report-btn:hover{color:#a35d5d}
.after-note{color:#7e7268}
.secondary-btn{border-color:var(--line);background:rgba(255,255,255,.76);color:#74675e}
.secondary-btn:hover{background:#fff}
.final-light{color:#b8894b;text-shadow:0 0 22px rgba(189,143,77,.16)}
.footer{color:#aaa097}
.footer-link{color:#9b8d82}
.modal{border-color:var(--line-strong);background:#fffdf9;color:#44372f;box-shadow:0 28px 90px rgba(78,60,43,.20)}
.modal::backdrop{background:rgba(78,66,55,.28);backdrop-filter:blur(5px)}
.modal-close{color:#9d8f84}
.modal p,.modal li{color:#786c63}
.my-entries-btn{color:#9d7440}
.my-entries-btn:hover{color:#714d27}
.reach-note{border-color:rgba(178,132,72,.16);background:rgba(246,235,218,.76);color:#98723f}

/* Light-theme safety for later dynamic screens */
.app-shell .my-post-card,.app-shell .entry-card,.app-shell .history-card{
  border-color:var(--line)!important;background:rgba(255,255,255,.78)!important;color:#4d4037!important;
}
.app-shell input{
  border-color:var(--line);background:rgba(255,255,255,.83);color:#493c33;
}
.app-shell input::placeholder{color:#aaa097}

@media(max-width:680px){
  .sky::before{width:68vw;height:48vw;opacity:.09}
  .sky::after{width:72vw;height:50vw;opacity:.13}
  main{padding-top:26px}
  .panel{background:rgba(255,253,249,.95)}
}

/* ===== Similar / different heart ===== */
.relation-switch{
  width:max-content;max-width:100%;margin:0 auto 14px;padding:4px;
  display:flex;gap:4px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.68);
}
.relation-switch button{
  border:0;background:transparent;color:#8d8075;border-radius:999px;padding:8px 12px;
  font:inherit;font-size:11px;cursor:pointer;transition:.18s ease;
}
.relation-switch button:hover{color:#5d4c40;background:rgba(244,233,216,.58)}
.relation-switch button.active{background:#f1e1ca;color:#865f31;box-shadow:0 3px 12px rgba(117,84,47,.08)}
.relation-switch button:disabled{opacity:.55;cursor:wait}
@media(max-width:480px){.relation-switch{width:100%}.relation-switch button{flex:1;padding-left:7px;padding-right:7px}}
.relation-switch[hidden]{display:none!important}