/* ============================
   simple pink one
   ============================ */

/* variables */
:root{
  --pink-25:#fff7fa;
  --pink-50:#fff4f7;
  --pink-100:#ffe9f0;
  --pink-200:#ffd3e2;
  --pink-300:#ffbed3;
  --pink-400:#ff9fbe;
  --pink-500:#ff86ae;
  --rose-600:#e35d88;
  --ink:#4b2b3b;
  --ink-soft:#6e4b5a;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(235, 124, 155, 0.18);
  --radius:18px;
}

/* Global Reset-ish thing */
*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  color:var(--ink);
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1200px 800px at 10% 0%, var(--pink-50), transparent),
              radial-gradient(1200px 800px at 100% 20%, var(--pink-200), transparent),
              linear-gradient(135deg, var(--pink-50), var(--pink-200));
}

/* pg shell */
.page{
  max-width:1100px;
  margin:0 auto;
  padding:2rem 1rem 4rem;
}

/* hder */
.header{ text-align:center; margin-bottom:1.5rem; }
.title{
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--ink);
  margin:0 0 .25rem 0;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
}
.subtitle{ margin:0; color:var(--ink-soft); }
.highlight{
  background:linear-gradient(90deg, #ffd3e2 0, #fff4f7 100%);
  padding:.1rem .4rem; border-radius:.6rem;
}

/* layout */
.content{ display:block; }
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1rem;
}

/* cards */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem;
  animation: pop-in .24s ease-out;
}
.input-card{ margin-bottom:1.25rem; border:1px solid var(--pink-200); }
@keyframes pop-in {
  from{ transform:translateY(4px); opacity:.0; }
  to{ transform:translateY(0); opacity:1; }
}

.card-title{
  font-family:"Playfair Display", serif;
  font-size:1.1rem;
  margin:0 0 .8rem 0;
  color:var(--ink);
}

/* formelements */
.label{ display:block; font-weight:600; margin-bottom:.5rem; }
.label.tiny{ font-size:.78rem; color:var(--ink-soft); margin-bottom:.25rem; }

.textarea{
  width:100%;
  min-height:160px;
  resize:vertical;
  border:1px solid var(--pink-300);
  border-radius:16px;
  padding:1rem;
  font-size:.95rem;
  background:var(--pink-50);
  outline:none;
}
.textarea:focus{
  border-color:var(--rose-600);
  box-shadow:0 0 0 3px rgba(227,93,136,0.15);
}

/* actions */
.actions{ display:flex; gap:.6rem; margin-top:.75rem; flex-wrap:wrap; }
.btn{
  border:none;
  border-radius:999px;
  padding:.7rem 1.1rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .04s ease, box-shadow .18s ease, opacity .18s ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }
.primary{
  color:white;
  background:linear-gradient(135deg, var(--rose-600), var(--pink-500));
  box-shadow:0 8px 20px rgba(227,93,136,0.25);
}
.ghost{
  background:var(--pink-100);
  color:var(--ink);
  border:1px solid var(--pink-300);
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ui text (small) */
.hint{ margin:.6rem 0 0 0; font-size:.85rem; color:var(--ink-soft); }

/* alerts */
.error-box{
  margin-top:.7rem;
  padding:.75rem 1rem;
  border-radius:12px;
  background:#fff0f3;
  border:1px solid #ffc7d5;
  color:#7f1436;
}

/* pills nlists */
.pill{
  display:inline-block;
  padding:.45rem .7rem;
  border-radius:999px;
  background:var(--pink-100);
  border:1px solid var(--pink-300);
  font-size:.92rem;
  word-break:break-all;
}
.pill.big{ font-size:1rem; padding:.6rem .9rem; }

.list{
  list-style:none; margin:.25rem 0 0 0; padding:0;
  display:flex; flex-direction:column; gap:.35rem;
}
.list .pill{ max-width:100%; }

/* empties // notes */
.empty{
  margin-top:.25rem;
  font-size:.93rem;
  color:#7c4f5f;
  background:#fff7fa;
  border:1px dashed #f8c6d7;
  border-radius:12px;
  padding:.6rem .8rem;
}
.empty.warn{ background:#fff2f5; border-color:#ffb8ca; color:#8a2348; }
.note{ margin:-.15rem 0 .6rem 0; font-size:.9rem; color:var(--ink-soft); }

/* locations section */
.locations .loc-row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:.6rem;
  align-items:start;
  margin-bottom:.5rem;
}
.loc-label{ font-weight:600; color:var(--ink-soft); }

/* NameID value + format block */
.nameid-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.8rem;
  align-items:start;
}
@media (max-width: 560px){
  .nameid-wrap{ grid-template-columns: 1fr; }
}

/* tble */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--pink-200);
}
.table th, .table td{
  text-align:left;
  padding:.6rem .7rem;
  vertical-align:top;
}
.table thead th{
  background:linear-gradient(180deg, #ffe9f0, #ffd3e2);
  font-weight:700;
}
.table tbody tr:nth-child(odd) td{ background:#fff; }
.table tbody tr:nth-child(even) td{ background:#fff8fb; }

/* fter */
.footer{
  text-align:center;
  margin-top:1.5rem;
  color:var(--ink-soft);
}

/* utility */
.hidden{ display:none !important; }

/*  visibility for keyboard  */
:focus-visible{
  outline:3px solid rgba(227,93,136,.25);
  outline-offset:2px;
  border-radius:10px;
}