/* ——— Sakura Lanterns: Colorful, clean ——— */
:root{
    --text: #3d3550;
    --muted: #6d6280;
    --primary: #7a9bff;
    --accent: #ffb86b;
    --card: rgba(255,255,255,0.65);
    --glass: rgba(255,255,255,0.50);
    --border: rgba(20,16,30,0.10);
    --shadow: 0 14px 36px rgba(84,60,90,0.18);
  }
  
  *{ box-sizing: border-box }
  html, body{ height:100% }
  body{
    margin:0;
    font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:
      radial-gradient(50% 120% at 50% -20%, #ffeef7 0, #fff9fd 40%, #fff 70%) fixed;
  }
  
  .wrap{ min-height:100%; display:flex; flex-direction:column }
  
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; position:sticky; top:0; z-index:10;
    backdrop-filter: blur(10px);
    background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.25));
    border-bottom:1px solid var(--border);
  }
  .brand{ font-weight:600; letter-spacing:.3px }
  
  /* tightened spacing (margin reduced since banner removed) */
  .card{
    width:min(860px, 92vw); margin:18px auto; padding:22px 20px;
    background:var(--card); border:1px solid var(--border); border-radius:18px;
    box-shadow:var(--shadow);
  }
  .glass{ backdrop-filter: blur(10px) }
  .card h1{ margin:0 0 6px; font-weight:600 }
  .muted{ color:var(--muted); margin:.25rem 0 0 }
  
  .grid{ display:grid; gap:14px; grid-template-columns:1fr }
  .row{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr) }
  label{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted) }
  input, textarea, select, button{
    border-radius:14px; border:1px solid var(--border);
    background:rgba(255,255,255,.75); color:var(--text);
    padding:12px 14px; font:inherit
  }
  textarea{ resize:vertical }
  button{ cursor:pointer; transition: transform .06s ease }
  button:active{ transform: translateY(1px) }
  button.primary{ background:linear-gradient(135deg,#87a1ff,#b3c0ff); border:none; color:#1f2440 }
  button.accent{ background:linear-gradient(135deg,#ffd7a1,#ffb879); border:none; color:#4a2b00 }
  button.ghost{ background:transparent; border:1px solid var(--border) }
  button.small{ font-size:14px; padding:8px 12px }
  .actions{ display:flex; gap:12px; margin-top:6px }
  .actions.center{ justify-content:center }
  .right{ text-align:right }
  
  /* ——— Stage / animated sky ——— */
  .stage{
    position:relative; flex:1; height:72vh; margin:16px auto 26px;
    width:min(1100px, 96vw); border-radius:18px; overflow:hidden;
    border:1px solid var(--border); background:#fff;
    box-shadow:var(--shadow)
  }
  .sky{ position:absolute; inset:0; overflow:hidden; }
  .sky-grad, .sky-glow, .sky-stars{ position:absolute; inset:0; pointer-events:none }
  .sky-grad{
    background:
      radial-gradient(1200px 700px at 50% 100%, #ffe7f0, #ffdff2 40%, #f2f0ff 70%, #f7fbff 100%);
    animation: hue 18s linear infinite alternate
  }
  .sky-glow{
    background:
      radial-gradient(600px 260px at 50% 110%, rgba(255,190,140,.45), rgba(255,190,140,0) 70%),
      radial-gradient(800px 300px at 50% 120%, rgba(160,190,255,.28), rgba(160,190,255,0) 70%);
    mix-blend-mode: soft-light;
    animation: floatY 10s ease-in-out infinite alternate
  }
  .sky-stars{
    background:
      radial-gradient(2px 2px at 30% 40%, rgba(255,255,255,.85), transparent 60%),
      radial-gradient(2px 2px at 70% 30%, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(1.5px 1.5px at 60% 65%, rgba(255,255,255,.7), transparent 60%),
      radial-gradient(1.5px 1.5px at 20% 75%, rgba(255,255,255,.6), transparent 60%);
    opacity:.7;
    animation: twinkle 4s ease-in-out infinite alternate
  }
  
  @keyframes hue { from{ filter:hue-rotate(-8deg) } to{ filter:hue-rotate(8deg) } }
  @keyframes floatY { from{ transform: translateY(0) } to{ transform: translateY(-10px) } }
  @keyframes twinkle { from{ opacity:.5 } to{ opacity:.9 } }
  
  /* ——— Lanterns ——— */
  .lantern{
    position:absolute; bottom:-140px; width:52px; height:72px;
    border-radius: 14px 14px 16px 16px / 18px 18px 12px 12px;
    box-shadow:
      inset 0 -16px 28px rgba(0,0,0,.08),
      0 10px 26px rgba(156,125,160,.22),
      0 0 14px rgba(255,210,170,.25);
    animation: floatUp var(--dur) linear forwards, flicker 2.6s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  .lantern:after{
    content:""; position:absolute; inset:8px; border-radius:inherit;
    background: radial-gradient(22px 18px at 50% 80%, rgba(255,255,255,.95), rgba(255,255,255,.25) 70%, rgba(255,255,255,0) 100%);
    filter: blur(.6px);
  }
  @keyframes floatUp {
    from { transform: translateY(0) translateX(0) scale(1); opacity:.95 }
    to   { transform: translateY(-112vh) translateX(var(--drift)) scale(1.05); opacity:1 }
  }
  @keyframes flicker {
    0%,100%{ filter:brightness(1) }
    45%{ filter:brightness(1.08) }
    60%{ filter:brightness(.96) }
  }
  
  /* richer colors */
  .lantern.peach{ background: linear-gradient(#ffd6a5, #ffad86) }
  .lantern.blush{ background: linear-gradient(#ffcce5, #ff92c0) }
  .lantern.sage{  background: linear-gradient(#c9f3dc, #98e2be) }
  .lantern.lilac{ background: linear-gradient(#e6d8ff, #c3a5ff) }
  .lantern.pearl{ background: linear-gradient(#ffffff, #f0f4ff) }
  
  /* ——— Particles ——— */
  .particle{
    position:absolute; opacity:.9; will-change: transform, opacity;
    animation: floatUp var(--p-dur) linear forwards;
  }
  .p-stars{ width:2px; height:2px; border-radius:999px; background:#fff; filter: blur(.4px) }
  .p-sparks{ width:5px; height:5px; border-radius:999px; background:#ffd19d; box-shadow: 0 0 10px #ffd19d }
  .p-petals{
    width:12px; height:8px; background:#ffdbe7; border-radius: 80% 20% 80% 20%;
    transform: rotate(15deg); box-shadow: 0 2px 6px rgba(255,170,193,.28); filter: blur(.2px)
  }
  
  /* ——— Message card ——— */
  .message-card{
    position:absolute; inset:auto 16px 16px 16px;
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:16px; padding:14px 16px; backdrop-filter: blur(12px);
    box-shadow:var(--shadow)
  }
  .message-card p{ font-size:18px; margin:6px 0 }
  .tofrom{ color:var(--muted); font-size:14px }
  
  /* ——— Themes ——— */
  .theme-sakura .sky-grad{
    background: radial-gradient(900px 520px at 50% 100%, #ffe6f2 0%, #ffdff4 40%, #f2f0ff 72%, #f7fbff 100%);
  }
  .theme-aurora .sky-grad{
    background: conic-gradient(from 220deg, #fef6ff, #dff6ff, #e6fff3, #fff2f2, #fef6ff);
  }
  .theme-peach .sky-grad{
    background: radial-gradient(900px 520px at 50% 100%, #fff2e3, #ffe6f0 45%, #fff3ff 100%);
  }
  .theme-lilac .sky-grad{
    background: radial-gradient(900px 520px at 50% 100%, #eee9ff, #ffe7f6 50%, #f6f3ff 100%);
  }
  
  .footer{
    width:min(1100px,96vw); margin: 10px auto 34px; color:var(--muted); display:flex; justify-content:center
  }
  a{ color:var(--primary); text-decoration:none }
  .hidden{ display:none !important }
  
  @media (max-width: 720px){
    .row{ grid-template-columns:1fr }
    .message-card p{ font-size:16px }
  }