/* ===== Reset & base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: 'Inter', system-ui, sans-serif; background: #fdfdfd; color: #2b2b2b; }
h1, h2, h3 { font-family: 'Poppins', sans-serif; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* ===== Layout ===== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.card { background: #fff; border-radius: 14px; padding: 1.25rem 1.25rem 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.site-header, .site-footer { padding: 1rem 0; }
.site-header .brand { display: flex; align-items: center; gap: 0.8rem; }
.site-header .logo { font-size: 2rem; }
.subtitle { color: #667085; font-size: 0.95rem; }
.toolbar { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }

/* ===== Fields ===== */
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.label { font-weight: 600; font-size: 0.9rem; color: #374151; }
input, select, textarea {
  padding: 0.55rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 0.96rem;
  outline: none; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(196,181,253,0.25); }
textarea { resize: vertical; min-height: 84px; }
.section-title { margin: 0.6rem 0 0.4rem; font-size: 1rem; color: #444; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: 0.6rem 1rem; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; font-weight: 600; }
.btn.primary { border: none; color: #fff; background: linear-gradient(135deg, #f9a8d4, #a5b4fc); }
.btn.ghost { background: transparent; }
.btn:hover { filter: brightness(0.97); }
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }

/* ===== Surat preview ===== */
.surat { white-space: pre-wrap; font-family: 'Times New Roman', serif; font-size: 1rem; line-height: 1.7; min-height: 320px; background: #fff; border-radius: 10px; padding: 1rem; border: 1px dashed #e5e7eb; }
.skeleton {
  background: repeating-linear-gradient(-45deg, #f7f7f7, #f7f7f7 12px, #f0f0f0 12px, #f0f0f0 24px);
  color: transparent;
}

/* ===== Chips ===== */
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; }
.chip-label { font-size: .9rem; color: #475569; }

/* ===== Toast ===== */
#toast { position: fixed; bottom: 18px; right: 18px; background: #111827; color: #fff; padding: 0.7rem 1rem; border-radius: 10px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .25s, transform .25s; }
#toast.show { opacity: 1; transform: translateY(0); }

/* ===== Background pastel ===== */
.bg-gradient { position: fixed; inset: 0; background: linear-gradient(120deg, #fce7f3, #e0e7ff); z-index: -1; animation: gradientMove 10s ease-in-out infinite alternate; }
@keyframes gradientMove { from { background-position: left; } to { background-position: right; } }

/* ===== Animations ===== */
.animate-in { animation: fadeInUp .5s ease both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .grid { grid-template-columns: 1fr; }
  .toolbar { justify-content: flex-start; }
  .split { grid-template-columns: 1fr; }
}