/* --- Base --- */
:root{
  --bg-1: #0e1020;
  --bg-2: #0a0c18;
  --glass: 255 255 255 / 10%;
  --line: 255 255 255 / 16%;
  --ink: #e9f1ff;
  --ink-dim: #c9d6f7;
  --accent: #c7afff;
  --accent-2: #a8ffe6;
  --focus: #ffd7a8;
}

*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink);
  background: radial-gradient(1200px 700px at 70% -10%, #2b1c55 0%, transparent 60%),
              radial-gradient(900px 600px at -10% 30%, #0c3a3d 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-2), var(--bg-1));
  line-height: 1.5;
}

/* Starry, dreamy backdrop */
.sky{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1 }
.stars, .nebula{ position:absolute; inset:0 }
.stars{
  background-image:
    radial-gradient(2px 2px at 10% 20%, #ffffffb8 50%, transparent 52%),
    radial-gradient(1px 1px at 30% 80%, #ffffff80 50%, transparent 52%),
    radial-gradient(2px 2px at 70% 50%, #ffffffa8 50%, transparent 52%),
    radial-gradient(1px 1px at 85% 15%, #ffffff80 50%, transparent 52%),
    radial-gradient(1px 1px at 55% 70%, #ffffff80 50%, transparent 52%);
  animation: twinkle 8s linear infinite;
  opacity:.7;
}
.nebula{
  background: radial-gradient(60vw 50vh at 80% 20%, rgba(167,132,255,.18), transparent 60%),
              radial-gradient(50vw 45vh at 20% 70%, rgba(130,255,220,.12), transparent 60%);
  filter: blur(30px);
  animation: drift 40s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes drift{ 0%{transform:translateY(0)} 50%{transform:translateY(-2vh)} 100%{transform:translateY(0)} }

/* Layout */
.wrap{
  max-width: 980px;
  margin: min(8vh,6rem) auto 8vh;
  padding: 0 1.2rem;
}
.card{
  background: color-mix(in oklab, white 8%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgb(var(--line));
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.heading{
  padding: 1.6rem 1.4rem;
  text-align: center;
}
.heading h1{
  font-family: "Marcellus", serif;
  font-weight: 400;
  letter-spacing:.3px;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin:0 0 .25rem;
}
.heading h1 span{ color: var(--accent) }
.heading p{
  color: var(--ink-dim);
  margin:0;
}

/* Form */
.dream-form{ padding: 1.2rem }
.grid{
  display:grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px dashed rgb(var(--line));
}

.cell{
  border-right: 1px dashed rgb(var(--line));
  border-bottom: 1px dashed rgb(var(--line));
  padding: .9rem;
  min-height: 110px;
  position: relative;
}
.cell:last-child,
.cell:nth-last-child(2),
.cell:nth-last-child(3){ border-bottom: 0 }
.cell:nth-child(3n){ border-right: 0 } /* last column */

.corner{
  background: linear-gradient(135deg, rgba(199,175,255,.18), rgba(168,255,230,.12));
  border-right: 1px dashed rgb(var(--line));
  display:flex; align-items:center; justify-content:center;
  min-height: 70px;
}
.colhead{
  text-align:center;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color: var(--accent-2);
  background: linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.06));
  min-height: 70px;
}

.rowhead{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:flex; flex-direction:column; justify-content:center;
}
.rowhead .rowtitle{
  font-weight:700;
  color: var(--accent);
  font-size: 1.05rem;
}
.rowhead small{
  opacity:.8; color: var(--ink-dim); font-size:.85rem;
  margin-top:.25rem;
}

textarea, input[type="text"], input[type="date"]{
  width: 100%;
  padding: .85rem .9rem;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ink);
  resize: vertical;
  min-height: 90px;
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) inset;
  transition: box-shadow .25s ease, border-color .25s ease, transform .08s ease;
}
input[type="text"], input[type="date"]{ min-height: auto }
textarea::placeholder, input::placeholder{ color: #bcd0ffb0 }
textarea:focus, input:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(255,215,168,.25), 0 6px 18px rgba(0,0,0,.25) inset;
  transform: translateY(-1px);
}

.meta{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap: 1rem;
  margin: 1.2rem 0 0.4rem;
}
.meta .full{ grid-column: 1 / -1 }
.meta-field label{
  display:block; margin: .2rem 0 .5rem; color: var(--ink-dim); font-weight:500
}

.actions{
  display:flex; gap:.8rem; justify-content:flex-end;
  padding: .8rem .2rem .2rem;
}
button{
  appearance: none;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color: var(--ink);
  padding: .8rem 1rem;
  border-radius: 12px;
  font-weight:700; letter-spacing:.2px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .25s ease, border-color .25s ease;
}
button:hover{ border-color: var(--accent) }
button:active{ transform: translateY(1px) }
button.primary{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(199,175,255,.35), transparent 50%),
    radial-gradient(120% 100% at 100% 0%, rgba(168,255,230,.28), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.28);
}
button.ghost{
  background: transparent;
  border-color: rgba(255,255,255,.2);
}

.tiny-note{
  color: var(--ink-dim);
  text-align:center;
  margin:.9rem 0 0;
  font-size:.9rem;
  opacity:.9;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Responsiveness */
@media (max-width: 860px){
  .grid{ grid-template-columns: 160px 1fr 1fr }
}
@media (max-width: 680px){
  .grid{ grid-template-columns: 1fr; }
  .corner{ display:none }
  .colhead{ display:none }
  .cell{ border-right: 0 }
  .rowhead{ border-top: 1px dashed rgb(var(--line)); }
  .rowhead + .cell, .rowhead + .cell + .cell{ border-top: 0 }
  .rowhead .rowtitle{ font-size: 1.1rem }
  .meta{ grid-template-columns: 1fr }
}

/* Print (for pretty PDF export) */
@media print{
  body{ background:#fff; color:#111 }
  .sky, .tiny-note{ display:none !important }
  .wrap{ margin:0; max-width:none }
  .card{ box-shadow:none; border:1px solid #ccc; }
  .cell{ border-color:#ddd }
  .colhead{ color:#111; background:#f7f7f7 }
  textarea, input{ background:#fff; color:#111; border-color:#bbb; box-shadow:none }
}

