:root{
  color-scheme:light;
  --ink:#243730;
  --muted:#73817a;
  --green:#176c53;
  --green-dark:#105340;
  --mint:#eaf4ee;
  --line:#e4eae6;
  --paper:#fff;
  --canvas:#f6f8f7;
  --danger:#a33c36;
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-synthesis:none;
  font-size:14px}
*{
  box-sizing:border-box}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  line-height:1.6}
button,input,textarea{
  font:inherit}
button,a,input,textarea,summary{
  -webkit-tap-highlight-color:transparent}
button{
  cursor:pointer}
button:disabled{
  cursor:not-allowed;
  opacity:.45}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid #8fc8ac;
  outline-offset:3px}
a{
  color:inherit}
.skip-link{
  position:fixed;
  top:-80px;
  left:20px;
  z-index:10;
  background:white;
  padding:12px}
.skip-link:focus{
  top:12px}
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line)}
.topbar-inner{
  max-width:1180px;
  margin:auto;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:16px;
  font-weight:650;
  letter-spacing:.03em}
.brand-divider{
  color:#bcc7c0;
  margin:0 9px;
  font-weight:400}
.brand-type{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted)}
.privacy-pill{
  display:flex;
  align-items:center;
  gap:8px;
  background:#edf7f0;
  color:var(--green);
  padding:6px 12px;
  border-radius:20px;
  font-size:12px}
.status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2d9672;
  flex-shrink:0}
.shell{
  max-width:1180px;
  padding:36px 28px 22px;
  margin:auto}
.intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0 0 28px}
.eyebrow{
  margin:0 0 8px;
  color:#788a7f;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em}
h1{
  font-size:30px;
  letter-spacing:-.035em;
  line-height:1.4;
  margin:0 0 10px;
  font-weight:650}
.intro-text{
  margin:0;
  color:var(--muted);
  font-size:13px}
.intro-note{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:#4d6657;
  white-space:nowrap}
.intro-note small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px}
.shield{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:38px;
  background:#e9f1eb;
  border-radius:14px 14px 18px 18px;
  color:#417d59;
  font-weight:700}
.file-panel{
  display:flex;
  align-items:center;
  gap:18px;
  background:linear-gradient(100deg,#f0f8f2,#fff);
  border:1px dashed #9cbaa8;
  border-radius:12px;
  padding:26px 28px;
  margin-bottom:24px;
  transition:border-color .15s,box-shadow .15s}
.file-panel.dragging{
  border-color:var(--green);
  box-shadow:0 0 0 4px #dceee2}
.file-symbol{
  display:flex;
  align-items:center;
  justify-content:center;
  width:66px;
  height:68px;
  background:#e3f1e7;
  border-radius:12px;
  flex-shrink:0}
.file-description{
  flex:1;
  min-width:0}
.file-description h2{
  font-size:15px;
  font-weight:650;
  margin:0 0 5px;
  overflow-wrap:anywhere}
.file-description p{
  font-size:12px;
  color:var(--muted);
  margin:0}
.file-tags{
  font-size:11px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:#598568;
  margin-top:6px}
.file-tags[hidden]{
  display:none}
.file-tags span{
  color:#b5c7bb}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:40px;
  border:1px solid transparent;
  border-radius:7px;
  padding:9px 17px;
  line-height:1.4;
  font-size:12px;
  font-weight:550;
  white-space:nowrap;
  transition:background .15s,transform .15s}
.button:not(:disabled):active{
  transform:translateY(1px)}
.button-primary{
  background:var(--green);
  color:#fff}
.button-primary:not(:disabled):hover{
  background:var(--green-dark)}
.button-dark{
  background:#243d32;
  color:#fff}
.button-dark:not(:disabled):hover{
  background:#162d23}
.button-ghost{
  background:transparent;
  color:#7a867f}
.button-ghost:not(:disabled):hover{
  background:#f0f4f1;
  color:#355440}
.editor-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 18px #2a423403;
  margin-bottom:18px}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 28px 17px}
.section-heading .eyebrow{
  font-size:9px;
  margin-bottom:4px}
.section-heading h2{
  font-size:18px;
  margin:0;
  font-weight:650}
.count-badge{
  font-size:11px;
  color:#7a8b80;
  background:#f1f5f2;
  border:1px solid #e5eee7;
  padding:3px 10px;
  border-radius:20px}
.editor-note{
  display:flex;
  gap:8px;
  margin:0 28px 22px;
  color:#708077;
  font-size:14px}
.editor-note>span{
  color:#7b9a87;
  font-size:17px}
.empty-state{
  text-align:center;
  padding:34px 20px 48px;
  border-top:1px solid #f0f3f1}
.empty-mark{
  font-size:36px;
  color:#9cb4a4;
  line-height:1;
  display:inline-block;
  background:#f0f5f1;
  width:60px;
  height:60px;
  padding:10px;
  border-radius:16px;
  transform:rotate(-5deg);
  margin-bottom:14px}
.empty-state h3{
  font-size:14px;
  font-weight:550;
  margin:0 0 6px}
.empty-state p{
  font-size:12px;
  color:#8a968e;
  margin:0}
.table-heading,.field-row{
  display:grid;
  grid-template-columns:20% 31% 49%}
.table-heading{
  background:#f6f8f6;
  font-size:14px;
  color:#7e8b82;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:10px 28px;
  gap:0}
.group-heading{
  margin:0;
  padding:18px 28px 8px;
  color:#74877a;
  font-size:13px;
  font-weight:650;
  letter-spacing:.06em}
.group-heading.time-group{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap}
.group-heading small{
  font-size:12.5px;
  letter-spacing:0;
  font-weight:400;
  color:#8a968d}
.field-row{
  padding:15px 28px;
  border-bottom:1px solid #f0f3f0;
  align-items:start;
  min-height:94px}
.field-row:last-child{
  border-bottom:0;
  margin-bottom:12px}
.field-name{
  font-size:15px;
  font-weight:550;
  padding-top:8px}
.original-cell{
  padding:8px 24px 0 0;
  font-size:15px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#7e8a82;
  min-width:0}
.original-cell.is-missing{
  color:#a7b0a9;
  font-size:14px}
.original-cell.time-value{
  font:13.75px/1.8 "SFMono-Regular",Consolas,monospace;
  padding-top:10px}
.edit-cell{
  min-width:0}
.input-wrap{
  display:flex;
  position:relative;
  align-items:stretch}
.field-input{
  display:block;
  width:100%;
  min-width:0;
  background:#fcfdfc;
  border:1px solid #dce5de;
  border-radius:6px;
  padding:8px 11px;
  font-size:15px;
  line-height:1.5;
  color:#2f4637;
  transition:border-color .15s,background .15s;
  resize:vertical}
.field-input:hover{
  border-color:#b3c9bb}
.field-input:focus{
  outline:0;
  border-color:#418967;
  box-shadow:0 0 0 3px #e5f1e8;
  background:#fff}
.field-input:disabled{
  color:#98a39b;
  background:#f5f6f5;
  text-decoration:line-through;
  opacity:.7}
.field-input[aria-invalid="true"]{
  border-color:#b9584d}
.field-input.time-input{
  font:15px/1.5 "SFMono-Regular",Consolas,monospace;
  padding-right:42px}
.time-steppers{
  position:absolute;
  right:4px;
  top:3px;
  bottom:3px;
  display:flex;
  flex-direction:column;
  width:28px;
  border-left:1px solid #e1e9e2}
.time-steppers button{
  flex:1;
  border:0;
  background:transparent;
  color:#7e9283;
  font-size:10px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
  border-radius:3px}
.time-steppers button:hover{
  background:#e5f0e8;
  color:var(--green)}
.field-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:25px;
  margin-top:4px}
.delete-label{
  font-size:12.5px;
  color:#9aa49d;
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer}
.delete-label input{
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--green)}
.reset-field{
  border:0;
  background:none;
  color:#9aaba0;
  font-size:12.5px;
  padding:2px 0;
  margin-left:auto;
  line-height:1.5}
.reset-field:hover{
  color:var(--green)}
.field-hint{
  font-size:12.5px;
  color:#a1ada4;
  min-height:15px}
.field-row.changed{
  background:#f9fcf9}
.field-row.changed .field-name::after{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  background:#6ca483;
  border-radius:50%;
  margin-left:7px;
  vertical-align:middle}
.readonly-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  margin-bottom:22px;
  overflow:hidden}
.readonly-card summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 24px;
  font-size:15px;
  font-weight:550}
.readonly-card summary::-webkit-details-marker{
  display:none}
.readonly-card summary>div{
  display:flex;
  gap:9px;
  align-items:center}
.lock-icon{
  font-size:19px;
  color:#8b9b90}
.readonly-card summary small{
  color:#8f9d93;
  font-size:12.5px;
  font-weight:400;
  background:#f0f4f1;
  border-radius:4px;
  padding:2px 5px;
  margin-left:6px}
.details-hint{
  color:#91a096;
  font-size:14px;
  font-weight:400}
.chevron{
  display:inline-block;
  font-size:14px;
  margin-left:8px;
  transition:transform .2s}
.readonly-card[open] .chevron{
  transform:rotate(180deg)}
.readonly-body{
  border-top:1px solid var(--line);
  padding:16px 24px 22px;
  font-size:15px}
.muted{
  color:var(--muted);
  font-size:11px}
.readonly-group{
  font-size:14px;
  color:#53725d;
  margin:20px 0 10px}
.readonly-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid #edf1ed;
  font-size:14px}
.readonly-body .muted{
  font-size:14px}
.readonly-row>span{
  min-width:0;
  overflow-wrap:anywhere}
.readonly-value{
  min-width:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#6e8174}
.readonly-value small{
  display:block;
  font-size:12.5px;
  color:#a0aca3;
  margin-top:3px}
.privacy-footer{
  display:flex;
  align-items:center;
  gap:12px;
  color:#8b9c90;
  margin:0 0 26px;
  padding:0 4px}
.privacy-footer>span:first-child{
  font-size:23px;
  color:#9bb7a3}
.privacy-footer p{
  font-size:11px;
  margin:0}
.privacy-footer p span{
  font-size:10px;
  display:block;
  color:#a2ada6;
  margin-top:3px}
.version{
  font-size:10px;
  margin-left:auto;
  color:#a8b1ab}
.action-bar{
  position:sticky;
  bottom:14px;
  z-index:3;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  background:#ffffffed;
  backdrop-filter:blur(10px);
  border:1px solid #dde6df;
  border-radius:10px;
  padding:15px 20px;
  box-shadow:0 8px 30px #223b2910}
.action-status{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0}
.action-status .status-dot{
  background:#b1bcb4}
.action-status .status-dot.active{
  background:#d49d49}
.action-status .status-dot.saved{
  background:#2d9672}
.action-status strong{
  display:block;
  font-size:11px;
  font-weight:600}
.action-status div>span{
  display:block;
  color:#98a49b;
  font-size:10px;
  margin-top:1px}
.action-buttons{
  display:flex;
  gap:8px;
  align-items:center}
.message{
  padding:13px 17px;
  margin:0 0 18px;
  border:1px solid #d4e8da;
  border-radius:8px;
  background:#eff8f1;
  color:#3e7150;
  font-size:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.message.error{
  color:var(--danger);
  border-color:#edd1ca;
  background:#fff6f2}
.message.info{
  color:#667b6d;
  background:#f0f5f1}
.busy{
  opacity:.7;
  pointer-events:none}
[hidden]{
  display:none!important}
@media(prefers-reduced-motion:reduce){
  *{
  transition:none!important;
  scroll-behavior:auto!important}
}
@media(min-width:1500px){
  .shell{
  padding-top:50px}
.intro{
  margin-bottom:34px}
}
@media(max-width:760px){
  .topbar-inner{
  height:66px;
  padding:0 18px}
.shell{
  padding:24px 16px 16px}
.intro{
  gap:15px;
  align-items:start}
.intro-note{
  display:none}
h1{
  font-size:25px}
.intro-text{
  font-size:12px}
.file-panel{
  padding:20px;
  gap:12px;
  flex-wrap:wrap}
.file-symbol{
  width:50px;
  height:54px}
.file-description{
  flex:1;
  min-width:180px}
.file-panel .button{
  width:100%;
  margin-top:6px}
.section-heading{
  padding:20px 20px 14px}
.editor-note{
  margin:0 20px 18px;
  font-size:13px}
.table-heading{
  display:none}
.group-heading{
  padding:17px 20px 9px;
  border-top:1px solid var(--line)}
.field-row{
  grid-template-columns:1fr 1fr;
  padding:13px 20px;
  gap:0 14px}
.field-name{
  padding:0 0 7px;
  grid-column:1;
  font-size:15px}
.original-cell{
  grid-column:2;
  grid-row:1;
  text-align:right;
  padding:0 0 7px;
  font-size:13px}
.original-cell.time-value{
  padding-top:0;
  font-size:13px}
.original-cell::before{
  content:"原值 · ";
  color:#a7b2aa;
  font-size:11px}
.edit-cell{
  grid-column:1/-1}
.field-input{
  font-size:16px}
.field-options{
  min-height:24px}
.delete-label,.reset-field{
  font-size:14px}
.privacy-footer{
  align-items:start;
  padding:0}
.privacy-footer p span{
  max-width:275px}
.action-bar{
  flex-wrap:wrap;
  gap:12px;
  padding:13px 14px;
  bottom:8px}
.action-status{
  width:100%}
.action-buttons{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr 1.45fr;
  gap:6px}
.action-buttons .button{
  padding:9px 8px;
  min-height:41px;
  font-size:11px}
.readonly-card summary{
  padding:15px 18px}
.readonly-body{
  padding:14px 18px 18px}
.readonly-row{
  grid-template-columns:110px 1fr}
.brand{
  font-size:14px;
  gap:8px}
.brand-divider{
  margin:0 5px}
.brand-type{
  font-size:10px}
.privacy-pill{
  padding:5px 9px;
  font-size:10px}
}
@media(max-width:360px){
  .brand-type,.brand-divider{
  display:none}
.file-description{
  min-width:140px}
.action-buttons{
  grid-template-columns:1fr 1.6fr}
.action-buttons #clear-file{
  grid-column:1/-1;
  min-height:30px}
.readonly-row{
  grid-template-columns:1fr;
  gap:2px}
}

