@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#16242F;
  --paper:#F4EFE6;
  --foam:#FFFFFF;
  --tide:#1F6F6B;
  --tide-dark:#154F4C;
  --coral:#E85D3D;
  --muted:#6B7280;
  --line: rgba(22,36,47,0.12);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;min-height:100vh;}
.app{max-width:520px;margin:0 auto;padding:40px 20px 60px;}
.app.wide{max-width:720px;}

.topbar{display:flex;align-items:center;gap:10px;margin-bottom:26px;}
.brand-mark{width:28px;height:28px;flex-shrink:0;}
.brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:-0.01em;}

.wave-divider{width:100%;height:18px;margin:6px 0 24px;overflow:hidden;}
.wave-divider svg{width:100%;height:100%;display:block;}
.wave-path{stroke:var(--tide);stroke-width:2.5;fill:none;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.1s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

.card{background:var(--foam);border-radius:18px;border:1px solid var(--line);padding:36px 30px;box-shadow:0 1px 2px rgba(22,36,47,0.04);}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tide);font-weight:600;margin-bottom:10px;}
h1.headline{font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:26px;line-height:1.25;margin:0 0 6px;color:var(--ink);}
.sub{color:var(--muted);font-size:14.5px;margin:0 0 24px;line-height:1.5;}

.stars{display:flex;gap:10px;justify-content:center;margin:8px 0 30px;}
.star-btn{background:none;border:none;cursor:pointer;padding:4px;transition:transform .15s;}
.star-btn:hover{transform:translateY(-2px);}
.star-btn svg{width:42px;height:42px;}
.star-btn .fill{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;transition:fill .15s, stroke .15s;}
.star-btn.selected .fill,.star-btn.hovered .fill{fill:var(--coral);stroke:var(--coral);}

textarea, input[type=text], input[type=password], input[type=url], input[type=email]{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);background:var(--paper);
  resize:vertical;outline:none;
}
textarea:focus,input:focus{border-color:var(--tide);}
label.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 6px;}
.field{margin-bottom:18px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:10px;padding:13px 22px;font-size:14.5px;font-weight:600;cursor:pointer;width:100%;font-family:'Inter',sans-serif;transition:opacity .15s, transform .1s;text-decoration:none;}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--tide);color:var(--foam);}
.btn-primary:hover{background:var(--tide-dark);}
.btn-coral{background:var(--coral);color:var(--foam);}
.btn-coral:hover{opacity:.9;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--muted);}

.thankyou{text-align:center;padding:20px 0;}
.thankyou .icon{width:50px;height:50px;margin:0 auto 18px;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px;}
.stat-card{background:var(--foam);border:1px solid var(--line);border-radius:14px;padding:18px;}
.stat-num{font-family:'Fraunces',serif;font-size:28px;font-weight:600;color:var(--ink);}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px;}
.section-title{font-family:'Fraunces',serif;font-style:italic;font-size:17px;margin:30px 0 14px;color:var(--ink);}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.bar-label{width:34px;font-size:12px;color:var(--muted);flex-shrink:0;}
.bar-track{flex:1;height:9px;background:var(--paper);border-radius:5px;overflow:hidden;}
.bar-fill{height:100%;background:var(--tide);border-radius:5px;}
.bar-count{width:22px;text-align:right;font-size:12px;color:var(--muted);}

.feedback-item{border-bottom:1px solid var(--line);padding:14px 0;}
.feedback-item:last-child{border-bottom:none;}
.feedback-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.feedback-stars{color:var(--coral);font-size:13px;letter-spacing:1px;}
.feedback-date{font-size:11.5px;color:var(--muted);}
.feedback-text{font-size:14px;line-height:1.5;color:var(--ink);}
.empty-state{text-align:center;color:var(--muted);font-size:13.5px;padding:20px 0;}

.error-text{color:var(--coral);font-size:13px;margin:-8px 0 14px;}
.link-inline{color:var(--tide);cursor:pointer;text-decoration:underline;background:none;border:none;font:inherit;padding:0;}
.footer-note{font-size:12px;color:var(--muted);text-align:center;margin-top:26px;line-height:1.6;}
.top-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
.slug-box{background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--muted);margin-bottom:24px;word-break:break-all;}
.slug-box strong{color:var(--ink);}
a{color:var(--tide);}