:root{
  color-scheme:light;
  --bg:#f5f5f7;
  --bg2:#f1f2f5;
  --panel:rgba(255,255,255,.88);
  --panel2:#f7f8fa;
  --panel3:#eef0f4;
  --line:#d8dbe2;
  --line2:#c9ced8;
  --ink:#1d1d1f;
  --ink2:#535862;
  --muted:#8b909a;
  --accent:#007aff;
  --accent2:#0a84ff;
  --accent-soft:#e7f1ff;
  --accent-ink:#0067d6;
  --gold:#ffcc33;
  --ok:#34c759;
  --warn:#ff9f0a;
  --danger:#ff3b30;
  --radius:8px;
  --radius-sm:8px;
  --shadow:0 18px 54px rgba(29,29,31,.16);
}

*{scrollbar-color:#c4c8d0 transparent}
html,body{background:var(--bg)}
body{
  font-family:Arial,sans-serif;
  color:var(--ink);
  font-size:13px;
  letter-spacing:0;
  background:#f5f5f7;
  background-image:none;
}

.app{
  background:linear-gradient(180deg,#fbfbfd 0%,#f5f5f7 42%,#f1f2f5 100%);
}

.titlebar{
  height:58px;
  padding:0 18px;
  gap:12px;
  background:rgba(251,251,253,.82);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}

.titlebar .logo{
  width:30px;
  height:30px;
  border-radius:8px;
  background:#ff3b30;
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 7px 18px rgba(255,59,48,.22);
}

.titlebar h1{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:0;
  color:var(--ink);
}

.titlebar .sub{
  color:var(--muted);
  font-size:12px;
}

.titlebar .badge{
  border-radius:8px;
  padding:3px 8px;
  color:#1d1d1f;
  background:#f4d35e;
  font-size:11px;
  font-weight:700;
}

.template-control{
  margin-left:8px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

select,
.template-control select{
  height:30px;
  padding:0 30px 0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  background:#fff;
  font:600 12px/1 Arial,sans-serif;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
}

.month-grp input[type="month"]{
  width:116px;
  height:27px;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  background:#fff;
  font:650 11.5px/1 Arial,sans-serif;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
}

.month-grp input[type="month"]:focus{
  outline:none;
  box-shadow:0 0 0 1px #007aff,0 0 0 4px rgba(0,122,255,.14);
}

.titlebar .meta{
  color:var(--ink2);
  font-size:12px;
  font-weight:600;
}

.work{
  background:var(--bg);
}

.left{
  width:clamp(520px,42vw,600px);
  min-width:500px;
  max-width:none;
  border-right:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
}

.right{
  background:#eceef2;
}

.toolbar{
  padding:10px 14px;
  gap:8px;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
}

.toolbar[style]{
  border-top:none!important;
  padding-top:8px!important;
  background:rgba(250,250,252,.78)!important;
}

.grp{
  gap:6px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.grp .gl{
  margin:0 4px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.5px;
  font-weight:700;
}

.btn{
  min-height:30px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:12px;
  font-weight:650;
  letter-spacing:0;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
  transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s,color .16s;
}

.btn:hover{
  background:#f7f8fa;
  border-color:#b9bec9;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
  box-shadow:0 1px 1px rgba(0,0,0,.03);
}

.btn.sm{
  min-height:27px;
  padding:0 9px;
  font-size:11.5px;
}

.btn.icon{
  width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  font-size:16px;
}

.btn.primary,
#pdfall{
  color:#fff;
  background:#007aff;
  border-color:#007aff;
  box-shadow:0 8px 18px rgba(0,122,255,.18);
}

.btn.primary:hover,
#pdfall:hover{
  background:#006ee6;
  border-color:#006ee6;
}

.btn.ghost{
  background:#f6f7f9;
  border-color:transparent;
  color:var(--ink2);
}

.btn.ghost:hover{
  background:#eceef3;
  color:var(--ink);
}

.btn.link{
  background:#f6faff;
  border-color:#dcecff;
  color:var(--accent-ink);
}

.btn.link:hover{
  background:#eaf4ff;
  border-color:#b9d8ff;
}

.btn.import,
label[for="xlsxin"],
#adj_saveall{
  color:#fff!important;
  background:#34c759!important;
  border-color:#34c759!important;
  box-shadow:0 8px 18px rgba(52,199,89,.16)!important;
}

#delrec{
  color:#c81e1e;
}

.toggle{
  width:38px;
  height:22px;
  background:#d8dbe2;
  border:1px solid #c8ccd5;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}

.toggle:after{
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}

.toggle.on{
  background:#34c759;
  border-color:#34c759;
}

.toggle.on:after{
  left:18px;
}

.tlabel{
  color:var(--ink2);
  font-size:12px;
}

.formtabs{
  display:none!important;
}

.form{
  padding:16px 16px 34px;
  background:#f5f5f7;
}

.form::-webkit-scrollbar,
.canvaswrap::-webkit-scrollbar,
.records::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.form::-webkit-scrollbar-thumb,
.canvaswrap::-webkit-scrollbar-thumb,
.records::-webkit-scrollbar-thumb{
  background:#c7cbd3;
  border:3px solid transparent;
  border-radius:8px;
  background-clip:content-box;
}

.section{
  margin:0 0 18px;
  padding:0 0 18px;
  border-bottom:1px solid var(--line);
}

.section:last-child{
  border-bottom:none;
}

.section h2{
  margin:0 0 12px;
  padding:0;
  border:0;
  color:var(--ink);
  font-size:12px;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  font-weight:760;
}

.section h2:before{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#007aff;
}

.grid2{
  gap:10px;
}

.field{
  margin:0;
}

.field label{
  margin-bottom:5px;
  color:var(--ink2);
  font-size:11.5px;
  font-weight:650;
}

.field input,
.field textarea,
.field select{
  min-height:34px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.03);
  transition:box-shadow .16s,border-color .16s,background-color .16s;
}

.field textarea{
  min-height:58px;
  line-height:1.45;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#a8adb7;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.template-control select:focus{
  outline:none;
  border-color:transparent;
  box-shadow:0 0 0 1px #007aff,0 0 0 4px rgba(0,122,255,.14);
}

.field.over input,
.field.over textarea{
  border-color:transparent;
  background:#fffaf0;
  box-shadow:0 0 0 1px rgba(255,159,10,.58),0 0 0 4px rgba(255,159,10,.12);
}

.pvbar{
  min-height:50px;
  padding:9px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(251,251,253,.86);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}

.hint{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.zoomgrp{
  gap:7px;
}

.canvaswrap{
  padding:26px;
  background:#e9ebef;
  background-image:linear-gradient(180deg,#f2f3f6 0%,#e6e8ed 100%);
}

#stage{
  margin:auto;
}

#cv{
  border-radius:3px;
  box-shadow:0 24px 80px rgba(29,29,31,.22),0 0 0 1px rgba(0,0,0,.08);
}

.records{
  max-height:96px;
  padding:10px 14px;
  gap:7px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.84);
}

.records .rlabel{
  color:var(--muted);
  font-size:10.5px;
}

.records .chip{
  padding:5px 10px;
  border:1px solid #d9dce3;
  border-radius:8px;
  background:#fff;
  color:var(--ink2);
  font-size:11.5px;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
}

.records .chip:hover{
  border-color:#b9bec9;
  color:var(--ink);
}

.records .chip.active{
  border-color:#007aff;
  background:#007aff;
  color:#fff;
}

#adjust{
  right:18px;
  top:68px;
  width:280px;
  padding:16px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:8px;
  background:rgba(255,255,255,.92);
  box-shadow:0 24px 70px rgba(29,29,31,.2);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}

#adjust h3{
  color:var(--ink);
  font-size:14px;
}

#adjust .sub{
  color:var(--muted);
}

#adjust .row label{
  color:var(--ink2);
  font-weight:650;
}

#adjust input[type=range]{
  accent-color:#007aff;
}

#adjust .val{
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.selbox{
  border:2px solid #007aff;
  background:rgba(0,122,255,.12);
  border-radius:3px;
}

.movehint{
  left:18px;
  bottom:18px;
  padding:8px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
  background:rgba(255,255,255,.9);
  color:var(--ink2);
  box-shadow:0 12px 34px rgba(29,29,31,.14);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}

#namemodal{
  background:rgba(245,245,247,.62)!important;
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
}

.dbmodal{
  position:fixed;
  inset:0;
  z-index:110;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(245,245,247,.62);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
}

.dbmodal.open{
  display:flex;
}

.dbpanel{
  width:min(900px,96vw);
  max-height:min(720px,92vh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.1);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 30px 80px rgba(29,29,31,.22);
}

.dbhead{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--line);
}

.dbhead h3{
  margin:0;
  color:var(--ink);
  font-size:15px;
  font-weight:760;
}

.dbhead .icon{
  margin-left:auto;
  font-size:18px;
}

.dbsub,
.dbfoot{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.dbtools{
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) auto;
  gap:10px;
  align-items:center;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  background:#fbfbfd;
}

.dbseg{
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f0f1f4;
}

.dbseg button{
  min-height:28px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--ink2);
  font:700 12px/1 Arial,sans-serif;
  cursor:pointer;
}

.dbseg button.active{
  color:var(--ink);
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.dbseg span{
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

#db_search{
  min-height:34px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font:600 13px/1 Arial,sans-serif;
  box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.03);
}

#db_search:focus{
  outline:none;
  box-shadow:0 0 0 1px #007aff,0 0 0 4px rgba(0,122,255,.14);
}

.dbbody{
  display:grid;
  grid-template-columns:minmax(280px,38%) 1fr;
  min-height:360px;
  overflow:hidden;
}

.dblist{
  overflow:auto;
  padding:10px;
  border-right:1px solid var(--line);
  background:#f5f5f7;
}

.dblist::-webkit-scrollbar,
.dbdetail::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.dblist::-webkit-scrollbar-thumb,
.dbdetail::-webkit-scrollbar-thumb{
  background:#c7cbd3;
  border:3px solid transparent;
  border-radius:8px;
  background-clip:content-box;
}

.dbitem{
  width:100%;
  display:block;
  margin:0 0 7px;
  padding:10px 11px;
  border:1px solid #d9dce3;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
}

.dbitem:hover{
  border-color:#b9bec9;
}

.dbitem.active{
  border-color:#007aff;
  box-shadow:0 0 0 1px #007aff,0 6px 18px rgba(0,122,255,.12);
}

.dbitem strong{
  display:block;
  margin-bottom:4px;
  overflow:hidden;
  color:var(--ink);
  font-size:13px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dbitem span{
  display:block;
  overflow:hidden;
  color:var(--muted);
  font-size:11.5px;
  font-weight:650;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dbdetail{
  overflow:auto;
  padding:16px 18px;
  background:#fff;
}

.dbempty{
  display:grid;
  place-items:center;
  min-height:240px;
  padding:24px;
  color:var(--muted);
  text-align:center;
  font-size:13px;
  font-weight:650;
  line-height:1.45;
}

.dbtitle{
  margin:0 0 14px;
  color:var(--ink);
  font-size:15px;
  font-weight:760;
  line-height:1.3;
}

.dbkv{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:8px 12px;
  margin:0 0 14px;
}

.dbkv dt{
  color:var(--muted);
  font-size:11.5px;
  font-weight:760;
}

.dbkv dd{
  margin:0;
  min-width:0;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:pre-wrap;
  word-break:break-word;
}

.dbpreview{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8f9fb;
  color:var(--ink2);
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  white-space:pre-wrap;
}

.dbfoot{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-top:1px solid var(--line);
  background:#fbfbfd;
}

.dbfoot span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dbfoot .btn{
  margin-left:auto;
}

#namemodal > div{
  width:520px!important;
  max-width:92vw!important;
  padding:18px!important;
  border:1px solid rgba(0,0,0,.1)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 30px 80px rgba(29,29,31,.22)!important;
}

#namemodal h3{
  color:var(--ink);
  font-size:15px!important;
}

#nm_list{
  gap:8px!important;
}

#nm_list .btn{
  justify-content:flex-start;
  min-height:34px;
}

input[type=file]{
  display:none;
}

@media (max-width:960px){
  .app{
    height:auto;
    min-height:100vh;
    overflow:auto;
  }

  .titlebar{
    height:auto;
    min-height:58px;
    flex-wrap:wrap;
    padding:10px 12px;
  }

  .work{
    flex-direction:column;
    overflow:visible;
  }

  .left{
    width:100%;
    min-width:0;
    border-right:none;
    border-bottom:1px solid var(--line);
  }

  .right{
    min-height:70vh;
  }

  .toolbar,
  .pvbar{
    align-items:flex-start;
  }

  .zoomgrp{
    margin-left:0;
  }

  .canvaswrap{
    padding:16px;
  }

  .dbmodal{
    padding:10px;
    align-items:stretch;
  }

  .dbpanel{
    width:100%;
    max-height:calc(100vh - 20px);
  }

  .dbtools{
    grid-template-columns:1fr;
  }

  .dbseg{
    width:100%;
  }

  .dbseg button{
    flex:1;
  }

  .dbbody{
    grid-template-columns:1fr;
    min-height:0;
  }

  .dblist{
    max-height:260px;
    border-right:none;
    border-bottom:1px solid var(--line);
  }

  .dbfoot{
    align-items:stretch;
    flex-direction:column;
  }

  .dbfoot .btn{
    width:100%;
    margin-left:0;
    justify-content:center;
  }
}