@font-face{font-family:'Printed Moments';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/printedmoments.woff) format('woff');}
  :root {
    --rose: #A3535F; --rose-d: #84404A; --cream: #FFF5E1; --blush: #F7E1D7; --paper: #FCF5EF; --white: #FFFFFF;
    --choc: #3A2B25; --ink: #191210; --mut: #5E4B40; --line: #E8D2C4; --gold: #C99A6B;
    --serif: 'Minerva Modern', Georgia, serif; --sans: 'Mulish', 'Segoe UI', sans-serif; --mono: 'Inconsolata', Consolas, monospace; --hand: 'Printed Moments', 'Segoe Script', cursive;
    --shine: linear-gradient(110deg, #A3535F 0%, #C9807A 28%, #F0CFA8 50%, #C9807A 72%, #A3535F 100%);
  }
  * { box-sizing: border-box; }
  html, body { background: var(--paper); color: var(--ink); }
  body { font-family: var(--sans); font-size: 18px; letter-spacing: .2px; line-height: 1.65; margin: 0; overflow-x: hidden; }

  /* ---------- header ---------- */
  header { background: var(--blush); text-align: center; padding: 22px 16px 22px; }
  header .logo { width: 220px; max-width: 64%; height: auto; display: block; margin: 0 auto; position: relative; z-index: 1; }
  header .tag { font-family: var(--hand); font-size: 30px; line-height: 1.25; color: var(--rose); margin: 6px 0 0; position: relative; z-index: 1; }
  @keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
  .saved { text-align: center; font-size: 15.5px; color: var(--mut); padding: 8px 16px 0; }
  .saved b { color: var(--rose-d); }

  /* ---------- rooms ---------- */
  .rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1140px; margin: 0 auto; padding: 18px 16px 0; }
  .room { background: var(--white); border: 1.5px solid var(--line); border-radius: 22px; padding: 18px 12px 16px; cursor: pointer; font-family: var(--sans); color: var(--ink); text-align: center; line-height: 1.3; transition: transform .2s ease, border-color .2s ease; }
  .room:hover { transform: translateY(-3px); border-color: var(--rose); }
  .room .ic { display: block; width: 92px; height: 92px; margin: 0 auto 8px; border-radius: 50%; background: var(--blush); padding: 8px; transition: transform .25s ease; }
  .room .ic svg { width: 100%; height: 100%; display: block; }
  .room:hover .ic { transform: rotate(-6deg) scale(1.05); }
  .room .d { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--rose-d); }
  .room .n { display: block; font-family: var(--serif); font-size: 21px; color: var(--choc); margin: 2px 0; }
  .room .s { display: block; font-size: 15px; color: var(--mut); }
  .room[aria-current=true] { border-color: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); background: var(--cream); }
  .room[aria-current=true] .ic { background: var(--white); }
  .big2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1140px; margin: 0 auto; padding: 22px 16px 0; }
  .bigbtn { border: none; cursor: pointer; border-radius: 999px; padding: 16px 22px; font-family: var(--sans); text-align: center; line-height: 1.3; transition: transform .2s ease; }
  .bigbtn:hover { transform: translateY(-2px); }
  .bigbtn .n { display: block; font-family: var(--serif); font-size: 23px; }
  .bigbtn .s { display: block; font-size: 15px; }
  .bigbtn.page { background: var(--rose); color: var(--cream); }
  .bigbtn.glow { background: linear-gradient(110deg, #F2C9BC 0%, #F8DDC0 30%, #FDF0D8 50%, #F8DDC0 70%, #F2C9BC 100%); background-size: 220% 100%; color: var(--choc); border: 2px solid var(--rose); animation: shimmer 5s linear infinite; box-shadow: 0 4px 16px rgba(201, 128, 122, .35); }
  .bigbtn.glow .n { font-weight: 400; } .bigbtn.glow .s { color: var(--choc); }
  .bigbtn[aria-current=true] { outline: 3px solid var(--choc); outline-offset: 3px; }
  @keyframes shimmer { 0% { background-position: 220% 0; } 100% { background-position: 0 0; } }
  button:focus-visible { outline: 3px solid var(--choc); outline-offset: 3px; }

  /* ---------- chat + notes ---------- */
  main { max-width: 1140px; margin: 0 auto; padding: 26px 16px 60px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
  .panel { background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
  .head { padding: 22px 26px 16px; border-bottom: 1px dashed var(--line); }
  .head .k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 2px; font-size: 14.5px; color: var(--rose-d); margin: 0; }
  .head h1 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.15; color: var(--choc); margin: 2px 0 6px; }
  .head p { margin: 0; color: var(--mut); font-size: 17px; }
  .chat { padding: 22px 26px 8px; min-height: 280px; }
  .row { display: flex; gap: 10px; align-items: flex-end; margin: 0 0 14px; }
  .row.you { justify-content: flex-end; }
  .av { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--blush); padding: 4px; }
  .av svg { width: 100%; height: 100%; display: block; }
  .msg { max-width: 84%; padding: 14px 18px; white-space: pre-line; border-radius: 22px 22px 22px 6px; background: var(--blush); }
  .row.you .msg { background: var(--cream); border: 1px solid var(--line); border-radius: 22px 22px 6px 22px; }
  .msg.carry { background: var(--white); border: 2px dashed var(--rose); }
  .msg .who { display: block; font-family: var(--mono); font-size: 13.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rose-d); margin-bottom: 2px; }
  .compose { display: flex; gap: 10px; padding: 12px 26px 24px; align-items: center; flex-wrap: wrap; }
  button.cta { background: var(--rose); color: var(--cream); border: none; border-radius: 999px; cursor: pointer; font-family: var(--mono); font-weight: 500; font-size: 16px; letter-spacing: 2.2px; text-transform: uppercase; padding: 15px 24px; transition: transform .15s ease; }
  button.cta:hover { background: var(--rose-d); transform: translateY(-1px); }
  button.cta:disabled { background: #C9A9AE; cursor: default; transform: none; }
  button.ghost { background: var(--white); border: 1.5px solid var(--choc); border-radius: 999px; color: var(--choc); cursor: pointer; font-family: var(--mono); font-size: 14.5px; letter-spacing: 1.6px; text-transform: uppercase; padding: 12px 18px; }
  button.ghost:hover { background: var(--cream); }
  .notes { background: var(--cream); padding: 30px 24px 22px; position: relative; overflow: visible; }
  .notes::before { content: ''; position: absolute; top: -13px; left: 50%; width: 120px; height: 28px; margin-left: -60px; background: rgba(163, 83, 95, .32); transform: rotate(-3deg); }
  .notes h2 { font-family: var(--hand); font-weight: 400; font-size: 42px; line-height: 1.3; color: var(--rose-d); margin: 0 0 16px; }
  .notes .sub { font-size: 16px; color: var(--mut); margin: 0 0 12px; }
  .note { border-top: 1px dashed #DFC6A9; padding: 11px 0; }
  .note .l { font-family: var(--mono); font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rose-d); }
  .note .v { font-size: 17px; white-space: pre-line; }
  .note.new .v { background: linear-gradient(transparent 55%, #F5C9C2 55%); display: inline; }
  .note .from { font-size: 14.5px; color: var(--mut); display: block; }
  .note .from u { cursor: pointer; }
  .empty { color: var(--mut); font-size: 16.5px; font-style: italic; }
  .chip { display: inline-block; font-size: 14.5px; background: var(--white); border: 1px solid #DFC6A9; border-radius: 999px; padding: 3px 12px; color: var(--mut); margin-bottom: 8px; }

  /* ---------- my sales page ---------- */
  .wide { grid-column: 1 / -1; }
  .sec { border-top: 1px dashed var(--line); padding: 18px 26px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
  .sec .l { font-family: var(--mono); font-size: 14.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rose-d); }
  .sec .l small { display: block; color: var(--mut); letter-spacing: .3px; text-transform: none; font-family: var(--sans); font-size: 15px; margin-top: 3px; }
  .sec .c { white-space: pre-line; }
  .sec .c.todo { color: var(--mut); font-style: italic; }
  .sec .c .big { font-family: var(--serif); font-size: 30px; line-height: 1.2; color: var(--choc); display: block; }
  .bar { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 26px 24px; align-items: center; border-top: 1px dashed var(--line); }
  .bar .hint { flex-basis: 100%; font-size: 15.5px; color: var(--mut); margin: 0; }

  /* ---------- glow-up checklist ---------- */
  .glowhero { background: radial-gradient(ellipse at 50% 0%, #FBE3D3 0%, var(--blush) 55%, #F3D2C8 100%); text-align: center; padding: 38px 22px 34px; position: relative; overflow: hidden; }
  .glowhero .k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 3px; font-size: 15px; color: var(--rose-d); margin: 0; }
  .glowhero h1 { font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 1.08; margin: 6px 0 4px; background: linear-gradient(110deg, #84404A 0%, #A3535F 30%, #9A5A3A 50%, #A3535F 70%, #84404A 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
  .glowhero .hand { font-family: var(--hand); font-size: 40px; line-height: 1.3; color: var(--rose); transform: rotate(-2deg); margin: 4px 0 30px; }
  .glowhero p.lead { max-width: 60ch; margin: 0 auto 6px; font-size: 18px; }
  .ring { --pct: 82; width: 230px; height: 230px; border-radius: 50%; margin: 22px auto 14px; display: grid; place-items: center; background: conic-gradient(from -90deg, #A3535F, #E8B79A, #F3D9B1 calc(var(--pct) * 1%), #F6E7DF 0); box-shadow: 0 10px 34px rgba(163, 83, 95, .35), inset 0 0 0 1px rgba(255,255,255,.6); position: relative; }
  .ring::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: var(--white); }
  .ring .num { position: relative; font-family: var(--serif); font-size: 78px; line-height: 1; color: var(--choc); }
  .ring .of { position: relative; display: block; font-family: var(--mono); font-size: 14.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--rose-d); text-align: center; }
  .spark { position: absolute; color: #D9A08B; animation: twinkle 2.6s ease-in-out infinite; }
  .verdict { font-family: var(--serif); font-size: 28px; line-height: 1.25; color: var(--choc); max-width: 26ch; margin: 0 auto; text-wrap: balance; }
  .gitem { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 16px 26px; border-top: 1px dashed var(--line); align-items: start; }
  .gitem .no { font-family: var(--serif); font-size: 26px; color: var(--rose); line-height: 1.2; }
  .gitem .t { font-weight: 700; }
  .gitem .q { color: var(--mut); font-size: 16.5px; }
  .gitem .fb { margin-top: 8px; background: var(--cream); border-radius: 16px; padding: 12px 16px; }
  .gitem .fb button { margin-top: 10px; }
  .pips { display: flex; gap: 5px; padding-top: 6px; }
  .pip { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--rose); }
  .pip.on { background: var(--rose); } .gitem.top .pip.on { background: var(--shine); background-size: 300% 100%; border-color: #C9807A; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  footer { text-align: center; font-family: var(--mono); font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mut); padding: 0 16px 44px; }
  footer .stampo { width: 120px; height: 120px; margin: 0 auto 16px; transform: rotate(-6deg); background: var(--rose); -webkit-mask: url(/assets/stamp.png) center / contain no-repeat; mask: url(/assets/stamp.png) center / contain no-repeat; }
  @media (max-width: 900px) {
    .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    main { grid-template-columns: minmax(0, 1fr); }
    .sec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .head h1 { font-size: 30px; } .glowhero h1 { font-size: 38px; }
    .notes { transform: none; }
    .gitem { grid-template-columns: 34px minmax(0, 1fr); } .gitem .pips { grid-column: 2; padding-top: 0; }
  }
  @media (max-width: 520px) {
    .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .big2 { grid-template-columns: minmax(0, 1fr); }
    .chat, .head, .compose, .sec, .bar, .gitem { padding-left: 16px; padding-right: 16px; }
    .msg { max-width: 100%; } .av { width: 36px; height: 36px; padding: 3px; }
    .ring { width: 190px; height: 190px; } .ring .num { font-size: 62px; }
    header .tag { font-size: 25px; } .glowhero .hand { font-size: 32px; }
  }
  @media (prefers-reduced-motion: reduce) { .star, .spark, .bigbtn.glow, .glowhero h1 { animation: none; } .room, .room img, .bigbtn, button.cta { transition: none; } }

/* ---------- real-app additions (not in the mockup) ---------- */
[hidden] { display: none !important; }
a { color: var(--rose-d); }
.partybar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; padding: 10px 16px 0; font-size: 16px; color: var(--mut); }
.partybar select { font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; max-width: 280px; }
.linkbtn { background: none; border: none; padding: 0; font: inherit; font-size: 15.5px; color: var(--rose-d); text-decoration: underline; cursor: pointer; }
.compose textarea { flex: 1 1 260px; min-height: 54px; max-height: 260px; resize: vertical; border: 1.5px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); padding: 14px 18px; font-family: var(--sans); font-size: 17px; line-height: 1.5; }
.compose textarea:focus, .edit textarea:focus, .login input:focus, .partybar select:focus { outline: 3px solid var(--rose); outline-offset: 1px; }
.compose .hint { flex-basis: 100%; margin: 0; font-size: 14.5px; color: var(--mut); }
.msg strong { font-weight: 700; }
.dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); animation: bob 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.edit textarea { width: 100%; min-height: 110px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--white); resize: vertical; }
.edit .btns { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
button.small { font-size: 13.5px; padding: 9px 15px; letter-spacing: 1.6px; }
.sec .tools { margin-top: 8px; }
.sec.fresh .c { background: linear-gradient(transparent 60%, #F9DAD4 60%); }
.login { max-width: 560px; margin: 40px auto 60px; padding: 0 16px; }
.login .panel { padding: 34px 30px; text-align: center; }
.login h1 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.15; color: var(--choc); margin: 0 0 10px; }
.login p { margin: 0 0 16px; }
.login input { width: 100%; font-family: var(--sans); font-size: 18px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); margin-bottom: 12px; text-align: center; }
.login .msgline { min-height: 1.6em; color: var(--rose-d); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--choc); color: var(--cream); padding: 12px 20px; border-radius: 999px; font-size: 16px; z-index: 50; max-width: calc(100vw - 32px); box-shadow: 0 6px 20px rgba(58,43,37,.3); }
.glowempty { padding: 26px; text-align: center; }
.glowempty p { max-width: 54ch; margin: 0 auto 16px; }
.loading { text-align: center; padding: 60px 16px; color: var(--mut); font-size: 18px; }
.gitem .fb { white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .8; } }
@media print { .demo, header, .saved, .partybar, .rooms, .big2, .compose, .bar, footer, .tools { display: none !important; } }

/* ---------- chat stays in one window: messages scroll inside it, the reply box never moves ---------- */
.chatpanel { display: flex; flex-direction: column; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); position: sticky; top: 12px; }
.chatpanel .head, .chatpanel .compose { flex: none; }
.chatpanel .chat { flex: 1 1 auto; min-height: 200px; overflow-y: auto; position: relative; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rose) transparent; }
.chatpanel .compose { border-top: 1px dashed var(--line); padding-top: 14px; padding-bottom: 18px; }
@media (max-width: 900px) { .chatpanel { position: static; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } }
@media (max-width: 520px), (max-height: 760px) { .chatpanel .head { padding-top: 14px; padding-bottom: 10px; } .chatpanel .head p:not(.k) { display: none; } .chatpanel .compose .hint { display: none; } .chatpanel .compose { padding-bottom: 14px; } }
.chatpanel { scroll-margin: 12px 0; }