@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

.hilo-app{
  --wine-950:#1e0a13; --wine-900:#2a0e1c; --wine-800:#3d1526; --wine-700:#54203a;
  --gold:#c9a46a; --gold-soft:#e2c495; --rose:#d98e8e; --cream:#f3e7da; --cream-dim:#c9b8ae;
  --line:rgba(243,231,218,0.14);
  background:var(--wine-950); color:var(--cream); font-family:'Inter',sans-serif;
  border-radius:22px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.28);
  max-width:1180px; margin:20px auto; line-height:1.4;
}
.hilo-app *{box-sizing:border-box;}
.hilo-app ::selection{background:var(--gold); color:var(--wine-950);}

.hilo-app .topbar{
  display:flex; align-items:center; justify-content:space-between; padding:20px 32px;
  border-bottom:1px solid var(--line); background:rgba(30,10,19,0.9);
}
.hilo-app .brand{display:flex; align-items:center; gap:10px; font-family:'Playfair Display',serif; font-size:20px;}
.hilo-app .brand .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold);}
.hilo-app .brand small{display:block; font-family:'Inter'; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); font-weight:500;}
.hilo-app .topbar .cta{background:var(--gold); color:var(--wine-950); border:none; padding:10px 20px; border-radius:100px; font-weight:600; font-size:13px; cursor:pointer; font-family:'Inter';}
.hilo-app .topbar .cta:hover{filter:brightness(1.06);}

.hilo-app .wrap{display:grid; grid-template-columns:400px 1fr;}
@media (max-width:980px){
  .hilo-app .wrap{grid-template-columns:1fr;}
  .hilo-app .editor{order:2; border-right:none; border-top:1px solid var(--line); max-height:none;}
  .hilo-app .previewcol{order:1;}
}

.hilo-app .editor{border-right:1px solid var(--line); padding:30px 28px 60px; max-height:820px; overflow-y:auto;}
.hilo-app .editor::-webkit-scrollbar{width:8px;}
.hilo-app .editor::-webkit-scrollbar-thumb{background:var(--wine-700); border-radius:10px;}

.hilo-app .step-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; margin:0 0 6px;}
.hilo-app .section-title{font-family:'Playfair Display',serif; font-size:21px; margin:0 0 20px; font-weight:600;}
.hilo-app .field{margin-bottom:16px;}
.hilo-app .field label{display:block; font-size:12.5px; color:var(--cream-dim); margin-bottom:6px; font-weight:500;}
.hilo-app .field input[type=text], .hilo-app .field input[type=date], .hilo-app .field input[type=url], .hilo-app .field textarea{
  width:100%; background:var(--wine-900); border:1px solid var(--line); color:var(--cream);
  padding:11px 13px; border-radius:10px; font-family:'Inter'; font-size:14px; outline:none;
}
.hilo-app .field input:focus, .hilo-app .field textarea:focus{border-color:var(--gold); background:var(--wine-800);}
.hilo-app .field textarea{resize:vertical; min-height:100px; line-height:1.5; font-family:'Cormorant Garamond',serif; font-size:17px;}
.hilo-app .field .hint{font-size:11.5px; color:var(--cream-dim); margin-top:5px; opacity:.75;}
.hilo-app .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.hilo-app .divider{height:1px; background:var(--line); margin:26px 0;}

.hilo-app .photo-drop{border:1.5px dashed var(--line); border-radius:14px; padding:20px; text-align:center; cursor:pointer; display:block;}
.hilo-app .photo-drop:hover{border-color:var(--gold); background:rgba(201,164,106,0.05);}
.hilo-app .photo-drop input{display:none;}
.hilo-app .photo-drop .icon{font-size:20px; margin-bottom:5px;}
.hilo-app .photo-drop p{margin:0; font-size:13px; color:var(--cream-dim);}
.hilo-app .thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px;}
.hilo-app .thumb{position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden;}
.hilo-app .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.hilo-app .thumb button{position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:11px; cursor:pointer;}

.hilo-app .moment-add{display:grid; grid-template-columns:110px 1fr auto; gap:8px; align-items:start;}
.hilo-app .moment-add input{background:var(--wine-900); border:1px solid var(--line); color:var(--cream); padding:11px; border-radius:10px; font-family:'Inter'; font-size:13px; width:100%;}
.hilo-app .moment-add button{background:var(--wine-800); border:1px solid var(--line); color:var(--gold-soft); width:40px; height:40px; border-radius:10px; font-size:18px; cursor:pointer;}
.hilo-app .moment-add button:hover{border-color:var(--gold);}
.hilo-app .moments-list{margin-top:12px; display:flex; flex-direction:column; gap:8px;}
.hilo-app .moment-item{display:flex; gap:10px; align-items:flex-start; background:var(--wine-900); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:13px;}
.hilo-app .moment-item .md{color:var(--gold-soft); font-weight:600; white-space:nowrap; font-size:12px; padding-top:1px;}
.hilo-app .moment-item .mt{flex:1; color:var(--cream); line-height:1.4;}
.hilo-app .moment-item .mx{background:none; border:none; color:var(--cream-dim); cursor:pointer; font-size:13px;}

.hilo-app .hilo-generate-btn{width:100%; padding:13px; font-size:14px;}
.hilo-app .hilo-error{color:var(--rose); font-size:12.5px; margin-top:10px; min-height:14px;}

.hilo-app .previewcol{display:flex; flex-direction:column; align-items:center; padding:36px 22px 60px; background:radial-gradient(ellipse at 20% 0%, rgba(217,142,142,0.08), transparent 55%), radial-gradient(ellipse at 85% 30%, rgba(201,164,106,0.09), transparent 50%), var(--wine-950);}
.hilo-app .preview-label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:16px; font-weight:600;}

.hilo-app .page-frame{width:100%; max-width:440px; background:linear-gradient(180deg,var(--wine-900),var(--wine-950) 70%); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,0.45); position:relative; overflow:hidden; min-height:600px;}
.hilo-app .envelope{position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:linear-gradient(160deg,var(--wine-800),var(--wine-950)); transition:transform .7s cubic-bezier(.7,0,.2,1), opacity .6s ease; cursor:pointer;}
.hilo-app .envelope.opened{transform:translateY(-100%); opacity:0; pointer-events:none;}
.hilo-app .seal{width:58px; height:58px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 60%, #a3813f); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:20px; color:var(--wine-950); box-shadow:0 8px 22px rgba(0,0,0,0.4);}
.hilo-app .envelope .env-names{font-family:'Playfair Display',serif; font-style:italic; font-size:20px; text-align:center; padding:0 30px;}
.hilo-app .envelope .env-tap{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); border:1px solid var(--line); padding:8px 16px; border-radius:100px;}

.hilo-app .pg-content{padding:40px 26px 36px;}
.hilo-app .pg-hero{text-align:center; margin-bottom:30px;}
.hilo-app .pg-eyebrow{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; margin-bottom:12px;}
.hilo-app .pg-names{font-family:'Playfair Display',serif; font-size:30px; font-weight:600; line-height:1.15; margin-bottom:8px;}
.hilo-app .pg-since{font-size:12px; color:var(--cream-dim); margin-bottom:16px;}
.hilo-app .pg-counter{display:inline-block; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:9px 20px; color:var(--rose);}

.hilo-app .pg-letter{font-family:'Cormorant Garamond',serif; font-size:18px; line-height:1.75; color:var(--cream); white-space:pre-wrap; text-align:left; margin:0 0 36px; padding:24px 22px; background:var(--wine-900); border:1px solid var(--line); border-radius:14px; position:relative;}
.hilo-app .pg-letter::before{content:'\201C'; position:absolute; top:-6px; left:14px; font-family:'Playfair Display',serif; font-size:48px; color:var(--gold); opacity:.5;}

.hilo-app .pg-section-label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; margin-bottom:14px;}
.hilo-app .pg-gallery{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:36px;}
.hilo-app .pg-gallery img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px;}
.hilo-app .pg-gallery .g-wide{grid-column:1/3; aspect-ratio:16/9;}

.hilo-app .pg-timeline{margin-bottom:36px; position:relative; padding-left:20px;}
.hilo-app .pg-timeline::before{content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line);}
.hilo-app .tl-item{position:relative; padding-bottom:20px;}
.hilo-app .tl-item:last-child{padding-bottom:0;}
.hilo-app .tl-item::before{content:''; position:absolute; left:-20px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--wine-900);}
.hilo-app .tl-date{font-size:11px; color:var(--gold-soft); font-weight:600; letter-spacing:.03em; margin-bottom:3px;}
.hilo-app .tl-text{font-family:'Cormorant Garamond',serif; font-size:16px; line-height:1.5; color:var(--cream);}

.hilo-app .pg-music{margin-bottom:36px;}
.hilo-app .pg-music iframe{width:100%; height:80px; border-radius:12px; border:none;}
.hilo-app .pg-music-empty{font-size:13px; color:var(--cream-dim); font-style:italic;}

.hilo-app .pg-sign{text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--rose); margin-bottom:6px;}
.hilo-app .pg-footer{text-align:center; font-size:10px; color:var(--cream-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:26px; opacity:.6;}

.hilo-app .share-panel{width:100%; max-width:440px; margin-top:24px; background:var(--wine-900); border:1px solid var(--line); border-radius:20px; padding:24px; display:none;}
.hilo-app .share-panel.show{display:block;}
.hilo-app .share-panel h3{font-family:'Playfair Display',serif; margin:0 0 6px; font-size:18px;}
.hilo-app .share-panel p.sub{font-size:12.5px; color:var(--cream-dim); margin:0 0 18px; line-height:1.5;}
.hilo-app .share-body{display:flex; gap:18px; align-items:center;}
.hilo-app .qr-box{background:#fff; padding:10px; border-radius:12px; flex-shrink:0;}
.hilo-app .share-actions{flex:1; display:flex; flex-direction:column; gap:10px;}
.hilo-app .share-actions button{border:1px solid var(--line); background:var(--wine-800); color:var(--cream); padding:10px 14px; border-radius:10px; font-size:13px; cursor:pointer; font-family:'Inter'; width:100%;}
.hilo-app .share-actions button:hover{border-color:var(--gold);}
.hilo-app .share-actions button.primary{background:var(--gold); color:var(--wine-950); border:none; font-weight:600;}

@media (max-width:520px){
  .hilo-app .topbar{padding:16px 18px;}
  .hilo-app .editor{padding:22px 18px 50px;}
  .hilo-app .share-body{flex-direction:column;}
}