/* Chant Dee web design system v1.1.0 · shared by landing and future guides. */
:root {
  --cd-indigo: #3730a3;
  --cd-indigo-deep: #211b64;
  --cd-lime: #c6f24e;
  --cd-lime-ink: #1e1b4b;
  --cd-canvas: #f8f8fd;
  --cd-paper: #ffffff;
  --cd-lavender: #eeecf7;
  --cd-ink: #16152e;
  --cd-muted: #5d5e78;
  --cd-line: #ded9ef;
  --cd-success: #04673a;
  --cd-success-bg: #e7fac0;
  --cd-pending: #6b4b08;
  --cd-pending-bg: #fff0c7;
  --cd-error: #8c291b;
  --cd-error-bg: #fff0ed;
  --cd-font: 'Noto Sans Thai', sans-serif;
  --cd-space-1: 4px;
  --cd-space-2: 8px;
  --cd-space-3: 12px;
  --cd-space-4: 16px;
  --cd-space-6: 24px;
  --cd-space-8: 32px;
  --cd-space-12: 48px;
  --cd-space-16: 64px;
  --cd-radius-sm: 8px;
  --cd-radius-md: 12px;
  --cd-radius-lg: 20px;
  --cd-radius-xl: 28px;
  --cd-shadow-card: 0 12px 36px #211b6410;
  --cd-shadow-lift: 0 18px 44px #211b6420;
  --cd-ease: cubic-bezier(.22, 1, .36, 1);
  --cd-duration-fast: 180ms;
  --cd-duration-reveal: 650ms;
  --cd-content-max: 1160px;
}
/* Reusable guide patterns. No framework or JavaScript dependency. */
.cd-guide {font: 16px/1.8 var(--cd-font); color: var(--cd-ink); background: var(--cd-canvas);}
.cd-guide-shell {width:min(900px,calc(100% - 40px));margin:0 auto;padding:48px 0;}
.cd-step {display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:24px;background:var(--cd-paper);border:1px solid var(--cd-line);border-radius:var(--cd-radius-lg);margin-block:16px;}
.cd-step-number {display:grid;place-items:center;width:36px;height:36px;background:var(--cd-lime);color:var(--cd-lime-ink);border-radius:50%;font-weight:700;}
.cd-step h3 {font-size:21px;margin:0 0 10px;line-height:1.5;}
.cd-step p {margin:0;color:var(--cd-muted);}
.cd-callout {border:1px solid var(--cd-line);border-left:4px solid var(--cd-indigo);background:var(--cd-lavender);color:var(--cd-indigo-deep);padding:16px 20px;border-radius:var(--cd-radius-md);margin-block:16px;}
.cd-callout--pending {background:var(--cd-pending-bg);border-color:#e8cd86;color:var(--cd-pending);}
.cd-callout--success {background:var(--cd-success-bg);border-color:#a9cb7b;color:var(--cd-success);}
.cd-callout--error {background:var(--cd-error-bg);border-color:#e9baaf;color:var(--cd-error);}
.cd-figure {margin:24px 0;padding:12px;border:1px solid var(--cd-line);border-radius:var(--cd-radius-lg);background:var(--cd-paper);}
.cd-figure img {display:block;width:100%;height:auto;border-radius:var(--cd-radius-sm);}
.cd-figure figcaption {font-size:12px;color:var(--cd-muted);margin-top:10px;}
.cd-breadcrumb {font-size:13px;color:var(--cd-muted);margin-bottom:24px;}
.cd-breadcrumb a {color:var(--cd-indigo);text-underline-offset:4px;}
.cd-button {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:var(--cd-radius-md);font:600 15px/1.5 var(--cd-font);text-decoration:none;cursor:pointer;background:var(--cd-indigo);color:white;transition:transform var(--cd-duration-fast) var(--cd-ease),box-shadow var(--cd-duration-fast) var(--cd-ease);}
.cd-button--secondary {background:transparent;border-color:#b4add5;color:var(--cd-indigo);}
.cd-button--finish {background:var(--cd-lime);color:var(--cd-lime-ink);}
.cd-button:focus-visible {outline:3px solid #8375ed;outline-offset:4px;}
.cd-button:disabled {opacity:.65;cursor:not-allowed;}
@media(hover:hover){.cd-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:var(--cd-shadow-card);}}
@media(max-width:760px){.cd-guide-shell{padding-block:28px;}.cd-step{padding:18px;gap:12px;}.cd-step h3{font-size:18px;}}
@media(prefers-reduced-motion:reduce){.cd-button{transition:none;}.cd-button:not(:disabled):hover{transform:none;}}