/* PRL 文献库 · 浅色纸张风格 —— 极简 DOI 直达页 */
:root {
  --bg: #f6f6f3;
  --panel: #ffffff;
  --ink: #161a24;
  --accent: #d97b13;
  --accent-strong: #c26d0c;
  --muted: #7c8698;
  --faint: #99a3b3;
  --divider: #e7e9ed;
  --shadow: rgba(31, 38, 54, .10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
  background:
    radial-gradient(760px 460px at 50% 38%, rgba(217, 123, 19, .06), transparent 65%),
    radial-gradient(1000px 600px at 50% 120%, rgba(37, 99, 235, .05), transparent 60%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 噪点纹理层 */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px;
  animation: fade-in .7s ease both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 品牌行：极轻 */
.brand {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  animation: fade-in .7s .08s ease both;
}

.brand-dot { color: var(--accent); }

/* 大输入框：唯一主角 */
.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(700px, 94vw);
  min-height: 96px;
  background: var(--panel);
  border-radius: 18px;
  padding: 12px 14px 12px 24px;
  border: 1px solid var(--divider);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, .6) inset,
    0 24px 60px var(--shadow);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  animation: bar-in .8s .16s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes bar-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

.bar-prefix {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  padding-right: 16px;
  border-right: 1px solid var(--divider);
  user-select: none;
}

#doi-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  caret-color: var(--accent);
  padding: 8px 0;
}

#doi-input::placeholder { color: #aeb6c4; }

#submit-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0 34px;
  min-height: 68px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

#submit-btn:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(217, 123, 19, .30);
}

#submit-btn:active { transform: translateY(1px) scale(.985); }

/* 聚焦：琥珀色光环 */
.bar:focus-within {
  border-color: rgba(217, 123, 19, .45);
  box-shadow:
    0 0 0 3px rgba(217, 123, 19, .18),
    0 0 34px rgba(217, 123, 19, .18),
    0 24px 60px var(--shadow);
}

/* 底部统计行：极轻 */
.foot {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
  animation: fade-in .7s .3s ease both;
}

.foot #total { color: var(--accent); font-weight: 600; }

@media (max-width: 560px) {
  .bar { flex-wrap: wrap; min-height: 0; padding: 16px; border-radius: 16px; }
  .bar-prefix { border-right: none; padding: 0 0 10px; }
  #doi-input { font-size: 18px; width: 100%; }
  #submit-btn { width: 100%; min-height: 56px; }
}