*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --ivory: #F8F5F0;
    --warm-white: #FDFCFA;
    --sage: #8A9E8C;
    --terracotta: #C4714A;
    --charcoal: #2C2C2A;
    --muted: #6B6A64;
    --border: rgba(44,44,42,0.12);
    --display: "Cormorant Garamond", Georgia, serif;
    --body: "DM Sans", system-ui, sans-serif;
  }
  body {
    font-family: var(--body);
    background: var(--warm-white);
    color: var(--charcoal);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  .app { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

  /* HEADER */
  .app-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 1.5rem; border-bottom: 0.5px solid var(--border); margin-bottom: 2.5rem;
  }
  .brand { font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--charcoal); }
  .header-actions { display: flex; gap: 0.75rem; }

  /* BUTTONS */
  .btn {
    font-family: var(--body); font-size: 13px; font-weight: 500; cursor: pointer;
    border-radius: 2px; padding: 0.55rem 1.25rem; border: none; transition: opacity 0.2s;
  }
  .btn:hover { opacity: 0.8; }
  .btn-primary { background: var(--charcoal); color: var(--warm-white); }
  .btn-ghost { background: none; border: 0.5px solid var(--border); color: var(--muted); }
  .btn-sage { background: var(--sage); color: white; }
  .btn-terra { background: var(--terracotta); color: white; }
  .btn-sm { padding: 0.4rem 0.9rem; font-size: 12px; }