:root {
  color-scheme: dark;
}

html {
  scrollbar-color: #a3e635 #0a0c08;
  scrollbar-width: thin;
}

body {
  background-color: #070806 !important;
  color: #f3f7eb !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(163, 230, 53, .62), transparent);
  pointer-events: none;
}

.wrap {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 34px !important;
}

.step,
.panel,
.group,
.card,
.kpi,
.frow,
.drop,
details.naming,
.drawer,
select,
input,
textarea,
.btn,
.btn-primary,
.btn-ghost,
.mini-copy,
.copyall,
.chip,
.namebox,
.err,
.sec-note {
  border-radius: 8px !important;
}

.step,
.panel,
.group {
  border-color: #2d3523 !important;
  background: #10140f !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

.brand .logo,
.logo .mark {
  border-radius: 8px !important;
}

.sub,
.panel .sub,
.hint,
.note {
  color: #a5af94 !important;
}

.btn,
.btn-primary {
  box-shadow: 0 0 20px rgba(163, 230, 53, .22) !important;
}

.btn.ghost,
.btn-ghost,
.copyall,
.mini-copy {
  border-color: #354024 !important;
}

header {
  border-bottom-color: #262d20 !important;
}

table,
.files {
  max-width: 100%;
}

html[data-hypic-tool] .brand,
html[data-hypic-tool="copy"] header .logo {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
  min-width: 0 !important;
}

html[data-hypic-tool="copy"] header .logo {
  flex: 1 1 auto !important;
}

html[data-hypic-tool="daily"] .brand .logo,
html[data-hypic-tool="copy"] .logo .mark {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  object-fit: cover !important;
  box-shadow:
    0 0 0 1px rgba(163, 230, 53, .16),
    0 0 22px rgba(163, 230, 53, .32) !important;
}

html[data-hypic-tool="daily"] .brand h1,
html[data-hypic-tool="copy"] .logo .name {
  margin: 0 !important;
  color: #f3f7eb !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  min-width: 0 !important;
}

html[data-hypic-tool="copy"] .logo .name small {
  display: block !important;
  max-width: 720px !important;
  margin-top: 8px !important;
  color: #a5af94 !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

html[data-hypic-tool="daily"] .sub {
  max-width: 760px !important;
  margin: 4px 0 18px 52px !important;
  color: #a5af94 !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html[data-hypic-tool="daily"] .step,
html[data-hypic-tool="copy"] .panel,
html[data-hypic-tool="copy"] .group {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  padding: 18px !important;
  border: 1px solid #2d3523 !important;
  border-radius: 8px !important;
}

html[data-hypic-tool="daily"] .step + .step,
html[data-hypic-tool="copy"] .panel + .panel {
  margin-top: 16px !important;
}

html[data-hypic-tool="daily"] .step h2,
html[data-hypic-tool="copy"] .panel h2,
html[data-hypic-tool="copy"] .seg-title b {
  margin-bottom: 12px !important;
  color: #f3f7eb !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html[data-hypic-tool="daily"] p,
html[data-hypic-tool="copy"] p,
html[data-hypic-tool="daily"] td,
html[data-hypic-tool="copy"] td,
html[data-hypic-tool="daily"] th,
html[data-hypic-tool="copy"] th,
html[data-hypic-tool="daily"] li,
html[data-hypic-tool="copy"] li {
  letter-spacing: 0 !important;
}

html[data-hypic-tool="daily"] .step h2 .n {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(163, 230, 53, .24) !important;
}

html[data-hypic-tool] select,
html[data-hypic-tool] input,
html[data-hypic-tool] textarea {
  min-height: 42px !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  background: #080a07 !important;
}

html[data-hypic-tool="copy"] .switch {
  gap: 6px !important;
  align-items: center !important;
}

html[data-hypic-tool="copy"] .switch input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: grid !important;
  place-content: center !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 14px !important;
  border: 1px solid #4a5a2a !important;
  border-radius: 4px !important;
  background: #080a07 !important;
  box-shadow: none !important;
}

html[data-hypic-tool="copy"] .switch input[type="checkbox"]:checked {
  border-color: #a3e635 !important;
  background: #a3e635 !important;
  box-shadow: 0 0 10px rgba(163, 230, 53, .22) !important;
}

html[data-hypic-tool="copy"] .switch input[type="checkbox"]:checked::after {
  content: "";
  width: 4px;
  height: 7px;
  border: solid #11170d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

html[data-hypic-tool] label,
html[data-hypic-tool] .hint,
html[data-hypic-tool] .note,
html[data-hypic-tool] .dim,
html[data-hypic-tool] .panel .sub {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html[data-hypic-tool] label,
html[data-hypic-tool] .fld {
  color: #a5af94 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html[data-hypic-tool] .dim,
html[data-hypic-tool] .hint,
html[data-hypic-tool] .note {
  font-weight: 500 !important;
}

html[data-hypic-tool="daily"] .drop {
  display: grid !important;
  place-items: center !important;
  min-height: 104px !important;
  padding: 24px 18px !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  background: #0b0e09 !important;
}

html[data-hypic-tool="daily"] .files {
  gap: 8px !important;
  margin-top: 12px !important;
}

html[data-hypic-tool="daily"] .frow,
html[data-hypic-tool="daily"] .card,
html[data-hypic-tool="daily"] .kpi,
html[data-hypic-tool="copy"] .namebox,
html[data-hypic-tool="copy"] details.naming {
  border-width: 1px !important;
  background: #0b0e09 !important;
}

html[data-hypic-tool] .btn,
html[data-hypic-tool] .btn-primary,
html[data-hypic-tool] .btn-ghost,
html[data-hypic-tool] .copyall,
html[data-hypic-tool] .mini-copy {
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html[data-hypic-tool="copy"] .chip {
  padding: 8px 12px !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

html[data-hypic-tool="copy"] .chips {
  gap: 8px !important;
}

html[data-hypic-tool="copy"] .grid {
  gap: 12px !important;
}

html[data-hypic-tool="daily"] #hist {
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

html[data-hypic-tool="daily"] #hist .files {
  max-height: none;
}

html[data-hypic-tool="copy"] body {
  min-height: auto !important;
}

html[data-hypic-tool="copy"] header {
  position: static !important;
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
}

html[data-hypic-tool="copy"] header .bar {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 18px 0 8px !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

html[data-hypic-tool="copy"] .wrap {
  padding-top: 10px !important;
  padding-bottom: 28px !important;
}

html[data-hypic-tool="copy"] .panel {
  margin-top: 14px !important;
  padding: 18px !important;
}

html[data-hypic-tool="copy"] .panel .sub {
  margin-bottom: 12px !important;
}

html[data-hypic-tool="copy"] .empty {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

html[data-hypic-tool="copy"] .footnote {
  display: none !important;
}

@media (max-width: 760px) {
  .wrap {
    width: min(100% - 20px, 1120px) !important;
    padding-top: 18px !important;
  }

  .step,
  .panel,
  .group {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}