:root {
  --color-primary: #171717;
  --color-on-primary: #fff;
  --color-accent: #a16207;
  --color-accent-soft: #fff7e6;
  --color-background: #f7f7f5;
  --color-surface: #fff;
  --color-foreground: #171717;
  --color-muted: #5f6368;
  --color-border: #deded9;
  --color-error: #b42318;
  --color-success: #167455;
  --color-ring: #171717;
  --shadow-card: 0 24px 70px rgba(23, 23, 23, .08);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--color-background); }

body {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--color-foreground);
  background: radial-gradient(circle at 50% 0, rgba(161, 98, 7, .08), transparent 34rem), var(--color-background);
  font: 16px/1.6 Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a, label { touch-action: manipulation; }
a { color: inherit; }
[v-cloak] { display: none; }

.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 9px 14px;
  border-radius: 8px;
  color: var(--color-on-primary);
  background: var(--color-primary);
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }
.site-header { width: min(100% - 40px, 960px); min-height: 76px; margin-inline: auto; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-foreground); font-weight: 760; letter-spacing: .04em; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--color-on-primary); background: var(--color-primary); font-size: 15px; }
.page-shell { width: min(100% - 40px, 680px); margin: clamp(36px, 8vh, 92px) auto 64px; }
.intro { margin-bottom: 32px; text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--color-accent); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.intro h1 { margin: 0; font-size: clamp(38px, 8vw, 58px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.intro > p:last-child { margin: 14px 0 0; color: var(--color-muted); }

.creator { padding: clamp(24px, 5vw, 38px); border: 1px solid rgba(23, 23, 23, .1); border-radius: 22px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.creator-form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; }
.field label, .duration-field legend { font-size: 14px; font-weight: 700; }
.field input { width: 100%; min-height: 54px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 11px; outline: 0; color: var(--color-foreground); background: var(--color-surface); transition: border-color .16s ease, box-shadow .16s ease; }
.field input::placeholder { color: #8b8d91; }
.field input:hover { border-color: #aaa9a3; }
.field input:focus { border-color: var(--color-ring); box-shadow: 0 0 0 3px rgba(23, 23, 23, .12); }
.field input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }
.field-error, .request-error { margin: 0; color: var(--color-error); font-size: 14px; }

.duration-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.duration-field legend { margin-bottom: 8px; }
.duration-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.duration-options label { position: relative; min-height: 50px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 11px; color: var(--color-muted); background: var(--color-surface); font-weight: 650; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.duration-options label:hover { border-color: #aaa9a3; }
.duration-options label.is-selected { color: var(--color-accent); border-color: #d7a54b; background: var(--color-accent-soft); }
.duration-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.duration-options label:has(input:focus-visible) { outline: 3px solid rgba(23, 23, 23, .18); outline-offset: 2px; }

.submit-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border: 0; border-radius: 11px; color: var(--color-on-primary); background: var(--color-primary); font-weight: 700; cursor: pointer; transition: background .16s ease, opacity .16s ease, transform .12s ease; }
.submit-button:hover:not(:disabled) { background: #303030; }
.submit-button:active:not(:disabled) { transform: scale(.985); }
.submit-button:focus-visible, .result-link button:focus-visible, .result-link a:focus-visible, .brand:focus-visible { outline: 3px solid rgba(23, 23, 23, .2); outline-offset: 3px; }
.submit-button:disabled { opacity: .52; cursor: wait; }
.spinner { width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.request-error { padding: 11px 13px; border-radius: 9px; background: #fff1f0; }
.noscript-message { margin-top: 16px; text-align: center; }

.result-card { margin-top: 26px; padding: 20px; border: 1px solid rgba(22, 116, 85, .22); border-radius: 14px; outline: 0; background: #f2fbf7; }
.result-card:focus-visible { box-shadow: 0 0 0 3px rgba(22, 116, 85, .16); }
.result-heading { display: flex; align-items: center; gap: 12px; }
.success-mark { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--color-success); }
.success-mark svg { width: 19px; height: 19px; }
.result-heading div { min-width: 0; display: grid; }
.result-heading strong { font-size: 15px; }
.result-heading span { color: #4d6b60; font-size: 13px; }
.result-link { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding: 7px 7px 7px 13px; border: 1px solid rgba(22, 116, 85, .2); border-radius: 10px; background: var(--color-surface); }
.result-link a { min-width: 0; overflow: hidden; color: #125c45; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.result-link button { min-width: 68px; min-height: 40px; border: 0; border-radius: 8px; color: #fff; background: var(--color-success); font-weight: 650; cursor: pointer; }
.result-link button:hover { background: #105e44; }
.result-card > p { margin: 10px 0 0; color: #4d6b60; font-size: 12px; font-variant-numeric: tabular-nums; }
.site-footer { padding: 0 20px 28px; color: #717174; font-size: 12px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .site-header { width: min(100% - 28px, 960px); min-height: 66px; }
  .page-shell { width: min(100% - 28px, 680px); margin: 28px auto 46px; }
  .intro { margin-bottom: 24px; }
  .intro h1 { font-size: 40px; }
  .creator { padding: 22px 18px; border-radius: 17px; }
  .duration-options { gap: 8px; }
  .result-link { grid-template-columns: 1fr; padding: 12px; }
  .result-link a { overflow-wrap: anywhere; white-space: normal; }
  .result-link button { width: 100%; }
}

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