:root {
  --dcai-orange: #ff5a1f;
  --dcai-orange-deep: #f13b13;
  --dcai-blue: #1b57f0;
  --dcai-violet: #4b24f5;
  --dcai-ink: #101010;
  --dcai-muted: #5e6472;
  --dcai-line: #e8eaf0;
  --dcai-surface: #ffffff;
  --dcai-soft: #f5f7ff;
  --dcai-radius: 20px;
  --dcai-page-padding: clamp(16px, 5.13vw, 32px);
}

* { box-sizing: border-box; }

.dcai-shell {
  min-width: 0;
  min-height: 100dvh;
  color: var(--dcai-ink);
  background: var(--dcai-surface);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-x: clip;
}

.dcai-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--dcai-page-padding) 0;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(16,16,16,.08);
}

.dcai-brand { display: inline-flex; align-items: center; min-width: 0; color: var(--dcai-ink); font-size: 20px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.dcai-brand-mark { display: grid; width: 36px; height: 36px; margin-right: 9px; color: #fff; background: var(--dcai-orange); border-radius: 10px; place-items: center; }

.dcai-primary-action, .dcai-secondary-action, .dcai-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dcai-primary-action { padding: 10px 18px; color: #fff; background: linear-gradient(100deg, var(--dcai-orange), var(--dcai-orange-deep)); box-shadow: 0 8px 20px rgba(241,59,19,.22); }
.dcai-secondary-action { padding: 10px 18px; color: var(--dcai-blue); background: var(--dcai-soft); }
.dcai-icon-action { padding: 8px; color: var(--dcai-ink); background: transparent; }
.dcai-primary-action:active, .dcai-secondary-action:active, .dcai-icon-action:active { transform: scale(.98); }
.dcai-primary-action:focus-visible, .dcai-secondary-action:focus-visible, .dcai-icon-action:focus-visible { outline: 3px solid rgba(27,87,240,.35); outline-offset: 2px; }

.dcai-content { width: min(100%, 1180px); margin: 0 auto; padding: 24px var(--dcai-page-padding) calc(100px + env(safe-area-inset-bottom)); }
.dcai-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--dcai-line); border-radius: var(--dcai-radius); }
.dcai-stepper { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin: 0 0 22px; }
.dcai-stepper-item { min-width: 0; color: var(--dcai-muted); font-size: 12px; font-weight: 700; text-align: center; }
.dcai-stepper-index { display: grid; width: 28px; height: 28px; margin: 0 auto 6px; color: var(--dcai-muted); background: #f0f1f4; border-radius: 50%; place-items: center; }
.dcai-stepper-item[aria-current="step"] { color: var(--dcai-blue); }
.dcai-stepper-item[aria-current="step"] .dcai-stepper-index { color: #fff; background: var(--dcai-blue); }

.dcai-bottom-action { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: flex; gap: 10px; padding: 12px var(--dcai-page-padding) calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--dcai-line); backdrop-filter: blur(12px); }
.dcai-bottom-action .dcai-primary-action, .dcai-bottom-action .dcai-secondary-action { flex: 1; min-height: 52px; }

@media (min-width: 768px) {
  .dcai-topbar { padding-right: max(32px, calc((100vw - 1180px) / 2)); padding-left: max(32px, calc((100vw - 1180px) / 2)); }
  .dcai-content { padding-top: 40px; }
  .dcai-bottom-action { padding-right: max(32px, calc((100vw - 780px) / 2)); padding-left: max(32px, calc((100vw - 780px) / 2)); }
}

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