:root {
  --sg-ink: #101b12;
  --sg-muted: #717971;
  --sg-green: #5c9b54;
  --sg-green-dark: #477e42;
  --sg-line: #b9ceb4;
  --sg-panel: rgba(255, 255, 252, 0.90);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #eaf2e4;
}

body.sg-home,
body.sg-view {
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  color: var(--sg-ink) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif !important;
  background:
    radial-gradient(circle at 50% 11%, rgba(255,255,255,.98) 0 7%, rgba(255,255,255,.60) 22%, transparent 46%),
    radial-gradient(circle at 8% 90%, rgba(255,255,255,.48), transparent 34%),
    linear-gradient(145deg, #eef5e9 0%, #e5efdd 100%) !important;
  background-attachment: fixed !important;
}

/* 独立品牌栏，不再依赖 MicroBin 原生 #nav */
.sg-topbar {
  position: absolute !important;
  z-index: 80 !important;
  top: 17px !important;
  left: 46px !important;
  right: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 56px !important;
  pointer-events: none !important;
}

.sg-logo,
.sg-language {
  pointer-events: auto !important;
}

.sg-logo {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  text-decoration: none !important;
  background: rgba(250,253,247,.88) !important;
  border: 1px solid rgba(94,126,86,.11) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 34px rgba(75,108,68,.12), inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) !important;
}

.sg-logo svg {
  display: block !important;
  width: 35px !important;
  height: 35px !important;
}

.sg-language {
  min-width: 116px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 21px !important;
  border: 1px solid rgba(94,126,86,.13) !important;
  border-radius: 999px !important;
  color: #5d675d !important;
  background: rgba(255,255,252,.80) !important;
  box-shadow: 0 12px 32px rgba(75,108,68,.09), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter: blur(18px) !important;
  font: 650 15px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
  cursor: pointer !important;
}

.sg-language:hover {
  background: rgba(255,255,255,.95) !important;
  transform: translateY(-1px) !important;
}

/* 首页 */
body.sg-home {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 20px 26px !important;
  overflow-x: hidden !important;
}

body.sg-home > #nav,
body.sg-home > br,
body.sg-home #pasta-form > br:first-child,
body.sg-home #pasta-form + br,
body.sg-home #pasta-form + br + br {
  display: none !important;
}

.sg-hero {
  width: 100% !important;
  margin: clamp(146px, 17vh, 174px) auto 30px !important;
  color: var(--sg-ink) !important;
  text-align: center !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(50px, 6.2vw, 88px) !important;
  font-weight: 850 !important;
  line-height: .94 !important;
  letter-spacing: -.038em !important;
  white-space: nowrap !important;
}

#pasta-form {
  position: relative !important;
  width: min(958px, calc(100vw - 40px)) !important;
  margin: 0 auto !important;
  padding: 43px 40px 36px !important;
  background: var(--sg-panel) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  border-radius: 38px !important;
  box-shadow: 0 35px 72px rgba(73,108,66,.13), inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(18px) !important;
}

.sg-field-title {
  margin: 0 0 14px !important;
  color: #162019 !important;
  font-size: 19px !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
}

#settings,
#pasta-form > label:not([for]),
#file-select,
#buttons > div:not(:last-child) {
  display: none !important;
}

#content-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 390px !important;
  height: 390px !important;
  margin: 0 0 28px !important;
  padding: 27px 25px !important;
  resize: vertical !important;
  border: 2px solid var(--sg-line) !important;
  border-radius: 27px !important;
  outline: none !important;
  color: #263027 !important;
  background: rgba(255,255,255,.80) !important;
  box-shadow: 0 0 0 7px rgba(113,153,101,.10), inset 0 1px 2px rgba(56,76,52,.04) !important;
  font: 450 17px/1.62 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

#content-input::placeholder {
  color: var(--sg-muted) !important;
  opacity: 1 !important;
  white-space: pre-line !important;
}

#content-input:focus {
  border-color: #91b78a !important;
  box-shadow: 0 0 0 7px rgba(96,149,84,.14), 0 16px 35px rgba(72,108,65,.08) !important;
}

#buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

#buttons > div:last-child {
  display: block !important;
  width: auto !important;
  grid-column: auto !important;
}

#submit-button {
  width: auto !important;
  min-width: 190px !important;
  height: 58px !important;
  margin: 0 auto !important;
  padding: 0 29px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #57934f, #64a45a) !important;
  box-shadow: 0 13px 28px rgba(74,126,67,.22) !important;
  font: 720 17px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
  cursor: pointer !important;
}

#submit-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(.97) !important;
  box-shadow: 0 16px 30px rgba(74,126,67,.25) !important;
}

#submit-button:disabled {
  opacity: .68 !important;
  cursor: wait !important;
  transform: none !important;
}

/* 分享查看页：重新组织为品牌标题 + 操作栏 + 内容卡片 */
body.sg-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 100vh !important;
  padding: 0 20px 28px !important;
  overflow-x: hidden !important;
}

/* MicroBin 原生导航在查看页不再参与布局 */
body.sg-view > #nav,
body.sg-view > br {
  display: none !important;
}

.sg-view-shell {
  width: min(1040px, calc(100vw - 40px)) !important;
  margin: clamp(132px, 16vh, 166px) auto 0 !important;
}

.sg-view-hero {
  margin: 0 0 28px !important;
  color: var(--sg-ink) !important;
  text-align: center !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(45px, 5.7vw, 78px) !important;
  font-weight: 850 !important;
  line-height: .96 !important;
  letter-spacing: -.038em !important;
  white-space: nowrap !important;
}

.sg-view-card {
  width: 100% !important;
  padding: 28px !important;
  background: var(--sg-panel) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 34px !important;
  box-shadow: 0 32px 68px rgba(73,108,66,.13), inset 0 1px 0 rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px) !important;
}

.sg-view-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px 28px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid rgba(93,128,85,.13) !important;
}

.sg-view-actions-left,
.sg-view-actions-right {
  position: static !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sg-view-actions-right {
  justify-content: flex-end !important;
  margin-left: auto !important;
}

/* 查看页按钮的公共尺寸与结构 */
.sg-view-actions button,
.sg-view-actions .small-button {
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  font: 680 14px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

/* 复制链接等主要按钮继续使用深绿色 */
.sg-view-actions button:not(#copy-text-button),
.sg-view-actions .small-button:not(#copy-text-button) {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #57934f, #64a45a) !important;
  box-shadow: 0 10px 22px rgba(74,126,67,.18) !important;
}

/* 复制文本按钮：淡绿色、低存在感 */
.sg-view-actions #copy-text-button {
  border: 1px solid rgba(92,155,84,.22) !important;
  color: rgba(71,126,66,.82) !important;
  background: rgba(92,155,84,.12) !important;
  box-shadow: 0 8px 18px rgba(74,126,67,.07) !important;
}

/* 主要按钮悬停 */
.sg-view-actions button:not(#copy-text-button):hover,
.sg-view-actions .small-button:not(#copy-text-button):hover {
  transform: translateY(-1px) !important;
  filter: brightness(.97) !important;
  box-shadow: 0 13px 25px rgba(74,126,67,.23) !important;
}

/* 复制文本按钮悬停 */
.sg-view-actions #copy-text-button:hover {
  transform: translateY(-1px) !important;
  color: #477e42 !important;
  background: rgba(92,155,84,.19) !important;
  border-color: rgba(92,155,84,.32) !important;
  box-shadow: 0 10px 20px rgba(74,126,67,.10) !important;
}

.sg-view-actions a {
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  color: #477e42 !important;
  text-decoration: none !important;
  font: 650 15px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
  white-space: nowrap !important;
}

.sg-view-actions a:hover {
  color: #315f2d !important;
  text-decoration: none !important;
}

/* 右侧的分享 ID 做成轻量标签 */
.sg-view-actions-right > a:first-child {
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(84,133,75,.17) !important;
  border-radius: 999px !important;
  background: rgba(92,155,84,.08) !important;
}

.sg-view-actions-right > a:first-child i {
  color: #477e42 !important;
  font-style: normal !important;
  font-weight: 720 !important;
}

.sg-view-content {
  width: 100% !important;
  margin: 24px 0 0 !important;
}

.sg-view-content > div {
  clear: none !important;
}

body.sg-view .sg-view-content pre {
  width: 100% !important;
  min-height: 90px !important;
  margin: 0 !important;
  padding: 20px 0 !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: 21px !important;
  background: #22323e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.sg-view .sg-view-content pre code {
  display: block !important;
  min-height: 50px !important;
  padding: 0 22px !important;
  color: #ffd08a !important;
  background: transparent !important;
  font: 500 16px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

/* MicroBin 的逐行代码结构 */
body.sg-view .sg-view-content code-line {
  display: block !important;
  min-height: 28px !important;
}

body.sg-view .sg-view-content code-line::before {
  color: rgba(218,229,235,.48) !important;
}

/* 页脚：无分割线、下移、低透明度 */
.sg-footer {
  width: 100% !important;
  margin: 84px auto 0 !important;
  padding: 0 24px 24px !important;
  border: 0 !important;
  border-top: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: rgba(20,32,22,.30) !important;
  background: transparent !important;
  text-align: center !important;
  font: 400 13px/1.7 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.sg-footer::before,
.sg-footer::after {
  display: none !important;
  content: none !important;
}

body.sg-view .sg-footer {
  margin-top: auto !important;
  padding-top: 72px !important;
}

@media (max-width: 700px) {
  .sg-topbar {
    top: 14px !important;
    left: 18px !important;
    right: 18px !important;
    height: 50px !important;
  }

  .sg-logo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }

  .sg-logo svg {
    width: 31px !important;
    height: 31px !important;
  }

  .sg-language {
    min-width: 104px !important;
    height: 49px !important;
    padding: 0 17px !important;
    font-size: 14px !important;
  }

  body.sg-home {
    padding: 0 13px 22px !important;
  }

  .sg-hero {
    margin-top: 116px !important;
    margin-bottom: 25px !important;
    font-size: clamp(36px, 11vw, 56px) !important;
    letter-spacing: -.035em !important;
  }

  #pasta-form {
    width: 100% !important;
    padding: 35px 20px 23px !important;
    border-radius: 29px !important;
  }

  .sg-field-title {
    font-size: 17px !important;
  }

  #content-input {
    min-height: 330px !important;
    height: 330px !important;
    padding: 22px 20px !important;
    border-radius: 22px !important;
    font-size: 15px !important;
  }

  #submit-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
  }

  #buttons > div:last-child {
    width: 100% !important;
  }

  body.sg-view {
    padding: 0 13px 22px !important;
  }

  .sg-view-shell {
    width: 100% !important;
    margin-top: 112px !important;
  }

  .sg-view-hero {
    margin-bottom: 24px !important;
    font-size: clamp(34px, 10vw, 52px) !important;
    letter-spacing: -.034em !important;
  }

  .sg-view-card {
    padding: 20px !important;
    border-radius: 28px !important;
  }

  .sg-view-actions {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-bottom: 18px !important;
  }

  .sg-view-actions-left,
  .sg-view-actions-right {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  .sg-view-actions button,
  .sg-view-actions .small-button {
    min-height: 40px !important;
  }

  body.sg-view .sg-view-content pre {
    padding: 16px 0 !important;
    border-radius: 18px !important;
  }

  body.sg-view .sg-view-content pre code {
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  .sg-footer {
    margin-top: 64px !important;
    padding-bottom: 18px !important;
    font-size: 12px !important;
    color: rgba(20,32,22,.27) !important;
  }
}

@media (max-height: 820px) and (min-width: 701px) {
  .sg-hero {
    margin-top: 112px !important;
    margin-bottom: 24px !important;
    font-size: clamp(48px, 5.6vw, 76px) !important;
  }

  #pasta-form {
    padding-top: 34px !important;
    padding-bottom: 29px !important;
  }

  #content-input {
    min-height: 300px !important;
    height: 300px !important;
    margin-bottom: 24px !important;
  }
}