/* Urgency Diffuser — modern, meditative */
:root {
  --bg: #4f4846;        /* main background */
  --card: rgba(255,255,255,0.04);
  --fg: #ffffff;        /* main text/accent */
  --muted: #c8c3b5;
  --border: rgba(255,255,255,0.15);
  --accent: #a49e87; /* accent remains, text white */
  --accent-contrast: #4f4846;

  --radius: 14px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --container-w: 720px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;

  /* Add subtle texture via SVG noise overlay */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>  <filter id='n'>    <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>    <feColorMatrix type='saturate' values='0'/>    <feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 .04 .06 .04 0 0 0'/></feComponentTransfer>  </filter>  <rect width='100%%' height='100%%' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 220px 220px;
  background-attachment: fixed;
}

.container { max-width: var(--container-w); margin: 0 auto; padding: var(--space-6) var(--space-4); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  backdrop-filter: blur(8px) saturate(120%);
}

.title {
  margin: 0 0 var(--space-2);
  font-size: 2.2rem;
  font-weight: 300; /* thinner */
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.subtitle {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: 1.1rem;
  text-align: center;
}

.label { display: inline-block; margin-bottom: var(--space-2); font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #333333; color: #ffffff;
  color: var(--fg);
}
.textarea { resize: vertical; min-height: 180px; }

.btn {
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 10px 18px;
  background: #333333; color: #ffffff;
  color: var(--accent);
  cursor: pointer;
}
.btn.primary { margin-top: 16px; background: var(--accent); color: var(--accent-contrast); }
.link-btn { border-radius: 999px; background: var(--accent); color: var(--accent-contrast); text-decoration: none; padding: 10px 18px; }

.success { margin: var(--space-4) 0 var(--space-2); color: var(--accent); }

.footnote { margin-top: var(--space-4); color: var(--muted); font-size: 0.95rem; text-align: center; }

.error {
  margin: var(--space-3) 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(200,0,0,0.1);
  border: 1px solid rgba(200,0,0,0.3);
  color: #ffbaba;
}

.countdown { margin-top: var(--space-2); font-size: 2rem; font-weight: 400; text-align: center; }
.note-out { margin-top: var(--space-4); white-space: pre-wrap; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }


.select {
  background-color: rgba(255,255,255,0.06) !important;
  color: #f2f2f2 !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select option { color: #111; background: #fff; }
.select:focus { outline: 2px solid transparent; box-shadow: 0 0 0 3px rgba(164,158,135,0.35); }

#sealBtn { margin-top: var(--space-4); }