:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #392733;
  background: #f8f5f2;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --plum: #4b2d40;
  --plum-deep: #382232;
  --gold: #c5a871;
  --ink: #392733;
  --muted: #62555c;
  --border: #e7dfdc;
  --surface: #fff;
  --soft: #f3ecea;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: #f8f5f2;
}

.site-header {
  background: linear-gradient(118deg, #392333 0%, #54354a 55%, #4b2d40 100%);
  color: #fff;
  border-bottom: 1px solid rgba(197, 168, 113, .55);
}

.brand-wrap {
  width: min(100% - 40px, 980px);
  min-height: 174px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 0 19px;
  text-align: center;
}

.brand-logo {
  display: block;
  width: min(250px, 68vw);
  height: 92px;
  object-fit: contain;
  border-radius: 0;
}

.brand-fallback {
  color: #e0c98f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  letter-spacing: 4px;
}

.brand-wrap p {
  margin: 7px 0 0;
  color: #f1e8eb;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .2px;
}

.install-card {
  width: min(100% - 32px, 876px);
  margin: 16px auto 0;
  padding: 15px 18px;
  color: var(--plum);
  background: #fff;
  border: 1px solid #e9dfd8;
  border-radius: 16px;
  box-shadow: 0 5px 18px rgba(60, 38, 51, .045);
}

.install-copy strong { font-size: 16px; }
.install-copy p { margin: 4px 0 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.install-card button { margin: 4px 0; }
.install-card details { margin-top: 8px; }
.install-card summary { min-height: 42px; padding: 10px 0 4px; color: var(--plum); font-weight: 650; cursor: pointer; }
.install-steps { padding: 2px 2px 0; }
.install-steps p { margin: 7px 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

main {
  width: min(100%, 920px);
  min-height: calc(100vh - 244px);
  margin: 0 auto;
  padding: 28px 22px 54px;
}

#app { width: 100%; }

h1, h2 {
  color: var(--plum);
  font-weight: 650;
  letter-spacing: -.25px;
}

h1 {
  margin: 8px 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 4vw, 34px);
  line-height: 1.2;
}

h2 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.35;
}

p {
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.card {
  margin: 14px 0;
  padding: 24px;
  overflow-wrap: anywhere;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 7px 24px rgba(60, 38, 51, .045);
}

.auth-card {
  width: min(100%, 590px);
  margin: 4px auto 18px;
  padding: clamp(22px, 4vw, 34px);
}

.auth-card h2 { font-family: Georgia, "Times New Roman", serif; font-size: 25px; }

.help-card {
  width: min(100%, 590px);
  margin: 16px auto;
  background: #fcfaf9;
}

label {
  display: block;
  margin: 15px 0 7px;
  color: #493342;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
}

input, select, textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  padding: 13px 14px;
  color: #342530;
  background: #fff;
  border: 1px solid #cbbcc1;
  border-radius: 12px;
  outline: none;
  font: inherit;
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: #805b73;
  box-shadow: 0 0 0 3px rgba(128, 91, 115, .15);
}

input[type="checkbox"] {
  display: inline-block;
  width: 22px;
  min-height: 22px;
  height: 22px;
  margin: 0 10px 0 0;
  padding: 0;
  accent-color: var(--plum);
  vertical-align: middle;
}

label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  min-height: 42px;
  margin: 14px 0 6px;
  color: #463740;
  font-weight: 500;
}

label:has(input[type="checkbox"]) input { flex: 0 0 22px; margin-top: 1px; }

textarea { min-height: 132px; resize: vertical; }

button {
  min-height: 48px;
  margin: 9px 7px 0 0;
  padding: 12px 18px;
  color: #fff;
  background: var(--plum);
  border: 1px solid var(--plum);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

button:hover:not(:disabled) {
  background: var(--plum-deep);
  box-shadow: 0 4px 12px rgba(56, 34, 50, .15);
}

button:active:not(:disabled) { transform: translateY(1px); }

button:focus-visible { outline: 3px solid #c5a871; outline-offset: 2px; }

button.secondary {
  color: #4b2d40;
  background: #f3ecea;
  border-color: #d8c9cf;
}

button.secondary:hover:not(:disabled) { background: #eadde1; }

button:disabled { opacity: .55; cursor: not-allowed; }

nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 18px 0 20px;
  padding: 8px;
  background: #eee7e6;
  border: 1px solid #e5dcd9;
  border-radius: 16px;
}

nav button { width: 100%; min-height: 46px; margin: 0; padding: 10px 12px; }

.muted { color: var(--muted); font-size: 14px; }

#error {
  margin: 0 auto 16px;
  padding: 15px 17px;
  color: #672c22;
  background: #fff0eb;
  border: 1px solid #e8c5ba;
  border-radius: 13px;
  font-size: 15px;
  line-height: 1.55;
}

canvas {
  display: block;
  width: 100%;
  height: 190px;
  margin: 12px 0;
  background: #fff;
  border: 1px solid #cbbcc1;
  border-radius: 12px;
  touch-action: none;
}

img:not(.brand-logo) { max-width: 100%; border-radius: 12px; }

footer {
  padding: 24px 18px 30px;
  color: #5f5158;
  background: #f2edeb;
  border-top: 1px solid #e7dfdc;
  font-size: 14px;
  text-align: center;
}

footer span { padding: 0 5px; color: #9b8052; }

a { color: #4b2d40; }

@media (max-width: 560px) {
  .brand-wrap { min-height: 150px; padding: 17px 0 15px; }
  .brand-logo { width: min(218px, 70vw); height: 78px; }
  .brand-wrap p { font-size: 14px; }
  main { min-height: calc(100vh - 220px); padding: 20px 15px 38px; }
  .card { padding: 19px; border-radius: 16px; }
  .auth-card { padding: 22px 19px; }
  h2 { font-size: 20px; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 7px; }
  nav button { min-height: 48px; padding: 10px 8px; font-size: 14px; }
  button { margin-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 0.7.6: calmer, easier-to-scan client portal */
.welcome-title { margin: 20px 0 14px; font-size: clamp(28px, 5vw, 36px); }
nav { position: sticky; top: 0; z-index: 5; grid-template-columns: repeat(4,minmax(0,1fr)); box-shadow: 0 5px 18px rgba(60,38,51,.06); }
nav button { min-height: 52px; font-weight: 650; }
nav button:not(.secondary) { box-shadow: 0 3px 10px rgba(60,38,51,.1); }
.card { padding: clamp(20px,4vw,28px); }
.card p { color: #51454c; }
@media(max-width:520px){ nav { gap: 5px; padding: 5px; } nav button { min-height: 48px; padding: 9px 5px; font-size: 14px; } .welcome-title { margin-top: 16px; } }