:root {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #173e38;
  background: #eff6f3;
  font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: 2rem; }
button, input, select, textarea { font: inherit; }
.shell { max-width: 1180px; margin: auto; background: #fff; border: 1px solid #d9e7e2; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 70px rgba(22, 61, 54, .1); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 470px; }
.intro { padding: 2rem 3rem 3rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #0b5f55; color: #fff; font-size: 1.25rem; }
.brand strong, .brand small { display: block; }
.brand small { margin-top: .2rem; color: #71837f; font-size: .75rem; }
.hero { margin-top: 5rem; }
.eyebrow { display: inline-block; padding: .4rem .8rem; border-radius: 999px; background: #e9f3ef; color: #38655d; font-size: .875rem; }
.hero h1, .admin-content h1, .standalone h1 { color: #153b35; letter-spacing: -.04em; }
.hero h1 { max-width: 590px; margin: 1rem 0; font-size: 3.25rem; line-height: 1.12; }
.hero p, .sub { color: #637a74; line-height: 1.75; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 0; margin: 4rem 0 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: .6rem; padding: 1rem; border-radius: 12px; background: #f5f9f7; color: #3d5e57; font-size: .875rem; }
.steps b { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0b5f55; }
.panel { padding: 2rem; background: #fbfdfc; border-left: 1px solid #e1ebe7; }
.panel h2, .admin-grid h2, .lower-grid h2 { margin: 0 0 1.25rem; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; color: #294943; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid #cbdad6; border-radius: 12px; background: #fff; color: #173e38; }
input, select { height: 50px; padding: 0 .9rem; }
textarea { padding: .85rem; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(11, 95, 85, .12); border-color: #0b5f55; }
.form-grid { display: grid; gap: 1rem; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.interval-grid { grid-template-columns: 1fr 140px; }
.preview { padding: .9rem 1rem; border: 1px solid #d8e4df; border-radius: 12px; background: #f2f8f5; }
.preview strong, .preview p, .preview small { display: block; }
.preview p { margin: .35rem 0; color: #294943; line-height: 1.6; }
.preview small { color: #71837f; }
button { min-height: 50px; padding: 0 1rem; border: 1px solid #0b5f55; border-radius: 12px; background: #0b5f55; color: #fff; font-weight: 700; cursor: pointer; }
button:hover { background: #084d45; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary { border-color: #cbdad6; background: #fff; color: #294943; }
button.secondary:hover { background: #f2f8f5; }
button.small { min-height: 36px; padding: 0 .7rem; border-radius: 9px; font-size: .8rem; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.message { min-height: 1.4rem; margin: 0; color: #b42318; font-size: .875rem; line-height: 1.5; }
.message.success { color: #0b5f55; }
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid #e1ebe7; }
.back { padding: .65rem 1rem; border: 1px solid #cbdad6; border-radius: 12px; color: #294943; text-decoration: none; }
.admin-content { padding: 2.5rem; }
.admin-content h1 { margin: 0; font-size: 2rem; }
.sub { margin: .5rem 0 1.75rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stats article { padding: 1.25rem; border: 1px solid #dce7e3; border-radius: 14px; }
.stats strong, .stats span { display: block; }
.stats strong { font-size: 1.75rem; }
.stats span { margin-top: .35rem; color: #71837f; font-size: .875rem; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; }
.form-section { padding-left: 2rem; border-left: 1px solid #e1ebe7; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.table-wrap { overflow: auto; border: 1px solid #dce7e3; border-radius: 14px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem; border-bottom: 1px solid #e6efec; text-align: left; vertical-align: top; white-space: nowrap; }
th { color: #637a74; font-size: .8rem; }
td { font-size: .86rem; }
.actions { display: flex; gap: .4rem; }
.actions button:last-child { border-color: #b42318; background: #fff; color: #b42318; }
.actions button:last-child:hover { background: #fff1f0; }
.empty { margin: 0; padding: 2rem; color: #71837f; text-align: center; }
.lower-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e1ebe7; }
.card-section { min-width: 0; }
.card-section hr { height: 1px; margin: 1.5rem 0; border: 0; background: #e1ebe7; }
.log-table { max-height: 430px; }
.compact-shell { max-width: 520px; margin-top: 8vh; }
.standalone { border: 0; }
.standalone h1 { margin-top: 2.5rem; }
.standalone button { width: 100%; margin: 1rem 0; }
[hidden] { display: none !important; }

@media (max-width: 980px) {
  body { padding: 1rem; }
  .split, .admin-grid, .lower-grid { grid-template-columns: 1fr; }
  .panel, .form-section { border-left: 0; border-top: 1px solid #e1ebe7; }
  .form-section { padding: 2rem 0 0; }
  .intro { padding: 1.5rem; }
  .hero { margin-top: 3rem; }
  .hero h1 { font-size: 2.5rem; }
  .steps { margin-top: 2.5rem; }
}
@media (max-width: 560px) {
  body { padding: .5rem; }
  .shell { border-radius: 20px; }
  .form-grid.two, .interval-grid, .steps, .stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  .admin-header { padding: 1rem; }
  .admin-content { padding: 1.25rem; }
  .admin-header .brand small { display: none; }
  .actions { flex-wrap: wrap; }
}