@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&family=Caveat:wght@500;600;700&display=swap');

:root{
  --navy:#1C2B3A;
  --paper:#EFE6D3;
  --paper-soft:#FAF6EC;
  --brass:#B8863F;
  --forest:#3F5844;
  --ink:#2B2620;
  --line:#D8CBAA;
  --muted:#8a8071;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  min-height:100vh;
}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;color:var(--navy);}
.hand{font-family:'Caveat',cursive;}

.shell{max-width:1040px;margin:0 auto;padding:36px 28px 90px;}

/* TOP BAR */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:44px;}
.logo{
  font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--navy);
  display:flex;align-items:center;gap:8px;
}
.logo .seal{
  width:22px;height:22px;border-radius:50%;background:var(--brass);
  color:var(--paper-soft);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.save-note{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.save-dot{width:6px;height:6px;border-radius:50%;background:var(--forest);opacity:0;transition:opacity .3s;}
.save-dot.show{opacity:1;}

/* LAYOUT */
.layout{display:grid;grid-template-columns:230px 1fr;gap:52px;}

/* SIDEBAR STEPS */
.stepper{border-left:2px solid var(--line);padding-left:22px;}
.stepper .group-label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 12px;
}
.stepper .group-label:not(:first-child){margin-top:26px;}
.s-item{
  display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;
  color:var(--muted);position:relative;cursor:pointer;transition:color .2s;
}
.s-item::before{
  content:'';position:absolute;left:-27px;width:9px;height:9px;border-radius:50%;
  background:var(--line);transition:background .2s, box-shadow .2s;
}
.s-item.done{color:var(--ink);}
.s-item.done::before{background:var(--forest);}
.s-item.active{color:var(--navy);font-weight:600;}
.s-item.active::before{background:var(--brass);box-shadow:0 0 0 4px rgba(184,134,63,.18);}
.s-item .check{color:var(--forest);font-size:12px;}

/* MAIN */
.progress-line{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:18px;}
.progress-bar{height:3px;background:var(--line);border-radius:2px;margin-bottom:36px;overflow:hidden;}
.progress-bar span{display:block;height:100%;width:10%;background:var(--brass);transition:width .5s cubic-bezier(.22,1,.36,1);}

.q-card{
  background:var(--paper-soft);border:1px solid var(--line);
  padding:44px 46px;box-shadow:0 16px 34px rgba(28,43,58,.08);
  min-height:320px;display:flex;flex-direction:column;
  animation:fadeIn .4s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.q-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);font-weight:600;margin-bottom:14px;}
.q-card h2{font-size:27px;line-height:1.28;margin-bottom:10px;max-width:520px;}
.q-hint{font-size:13.5px;color:var(--muted);margin-bottom:26px;max-width:460px;}
.q-hint::before{content:'💡 ';}

textarea, input[type="text"]{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  font-family:'Caveat',cursive;font-size:22px;line-height:1.4;color:var(--ink);
  padding:6px 2px 16px;outline:none;transition:border-color .2s;
}
textarea{min-height:120px;resize:none;}
textarea:focus, input[type="text"]:focus{border-color:var(--brass);}
textarea::placeholder, input::placeholder{color:#b7ab92;font-family:'Caveat',cursive;font-size:22px;}
.char-count{font-size:11.5px;color:var(--muted);text-align:right;margin-top:8px;}

.field-wrap{flex:1;}

/* MOOD CHIPS */
.mood-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.mood-chip{
  border:1px solid var(--line);padding:10px 18px;border-radius:24px;
  font-size:14px;color:var(--ink);cursor:pointer;transition:.15s;background:var(--paper-soft);
}
.mood-chip:hover{border-color:var(--brass);}
.mood-chip.picked{background:var(--forest);color:var(--paper-soft);border-color:var(--forest);}

/* PHOTO UPLOAD */
.upload-box{
  border:1.5px dashed var(--line);border-radius:6px;padding:36px;text-align:center;
  cursor:pointer;transition:.2s;
}
.upload-box:hover, .upload-box.drag{border-color:var(--brass);background:rgba(184,134,63,.05);}
.upload-box p{font-size:13.5px;color:var(--muted);}
.upload-box .icon{font-size:26px;margin-bottom:10px;}
.thumb-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.thumb{
  width:86px;height:86px;border-radius:4px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#8a9b83,#c9b48f);
  box-shadow:0 6px 14px rgba(28,43,58,.15);
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb .rm{
  position:absolute;top:3px;right:3px;width:18px;height:18px;background:rgba(28,43,58,.75);
  color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}

/* AUDIO RECORDER */
.rec-panel{display:flex;align-items:center;gap:16px;}
.rec-btn{
  width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--paper-soft);
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;
  transition:.2s;flex-shrink:0;
}
.rec-btn.recording{background:#c0554c;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,85,76,.35);}50%{box-shadow:0 0 0 10px rgba(192,85,76,0);}}
.rec-info{font-size:13px;color:var(--muted);}
.rec-info .time{font-family:'Fraunces',serif;color:var(--ink);font-size:16px;font-weight:600;}
.skip-note{margin-top:18px;font-size:12.5px;color:var(--muted);}
.skip-note a{color:var(--forest);font-weight:600;border-bottom:1px solid var(--forest);}

/* REVIEW */
.review-list{display:flex;flex-direction:column;gap:0;}
.review-row{
  display:flex;justify-content:space-between;gap:20px;padding:16px 0;
  border-top:1px solid var(--line);
}
.review-row:first-child{border-top:none;}
.review-q{font-size:12.5px;color:var(--muted);max-width:220px;}
.review-a{flex:1;font-family:'Caveat',cursive;font-size:19px;color:var(--ink);}
.review-edit{font-size:12px;color:var(--forest);font-weight:600;cursor:pointer;white-space:nowrap;align-self:flex-start;}

/* NAV BUTTONS */
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:34px;}
.btn-back{font-size:14px;color:var(--muted);font-weight:500;cursor:pointer;background:none;border:none;font-family:inherit;}
.btn-back:disabled{opacity:0;pointer-events:none;}
.btn-next{
  background:var(--navy);color:var(--paper-soft);padding:13px 30px;border-radius:2px;
  font-weight:600;font-size:14.5px;cursor:pointer;border:none;font-family:'Work Sans',sans-serif;
  transition:.15s;
}
.btn-next:hover{background:var(--brass);}
.btn-next:disabled{opacity:.4;cursor:not-allowed;}

/* SUCCESS OVERLAY */
.overlay{
  position:fixed;inset:0;background:var(--navy);color:var(--paper-soft);
  display:none;align-items:center;justify-content:center;text-align:center;
  flex-direction:column;padding:40px;z-index:200;
}
.overlay.show{display:flex;}
.overlay .seal-big{
  width:60px;height:60px;border-radius:50%;border:2px solid var(--brass);color:var(--brass);
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;
  font-size:14px;font-weight:700;margin-bottom:26px;
}
.overlay h2{color:var(--paper-soft);font-size:30px;margin-bottom:14px;max-width:440px;}
.overlay p{color:#c3cbd2;font-size:15px;max-width:380px;margin-bottom:30px;}
.overlay .btn-primary{
  background:var(--brass);color:var(--paper-soft);padding:15px 30px;border-radius:2px;
  font-weight:600;font-size:15px;
}

@media(max-width:760px){
  .layout{grid-template-columns:1fr;}
  .stepper{display:none;}
  .q-card{padding:30px 26px;}
}