:root{
  --nav:#14273f;
  --nav-deep:#0e1e33;
  --bg:#eef3f8;
  --surface:#fff;
  --ink:#142438;
  --muted:#62758c;
  --accent:#177e89;
  --accent-hover:#116873;
  --accent-soft:#e9f5f5;
  --line:#d9e3ee;
  --danger:#b44040;
  --danger-soft:#fff0ef;
  --green:#247a55;
  --amber:#9b6518;
  --shadow:0 6px 28px #14243809;
  --mono:Consolas,"SFMono-Regular",Menlo,monospace;
  font-family:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
  font-size:14px;
  line-height:1.6
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
button,input,textarea,select{
  font:inherit
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:disabled{
  cursor:not-allowed;
  opacity:.5
}
a{
  color:var(--accent);
  text-decoration:none
}
a:hover{
  text-decoration:underline
}
h1,h2,h3,p{
  margin:0
}
h1{
  font-size:25px;
  line-height:1.4;
  letter-spacing:-.4px
}
h2{
  font-size:18px
}
h3{
  font-size:15px
}
small{
  font-size:12px
}
svg{
  flex-shrink:0
}
.icon{
  width:20px;
  height:20px;
  vertical-align:middle
}
[hidden]{
  display:none!important
}
:focus-visible{
  outline:3px solid #3fa6b6;
  outline-offset:3px
}
::selection{
  background:#b7e3e7
}
.muted,.hint{
  color:var(--muted)
}
.hint{
  font-size:12px;
  line-height:1.7
}
.mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums
}
.nowrap{
  white-space:nowrap
}
.break{
  overflow-wrap:anywhere
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link{
  position:fixed;
  left:230px;
  top:-60px;
  z-index:100;
  background:var(--surface);
  padding:10px 16px
}
.skip-link:focus{
  top:8px
}
.shell{
  display:grid;
  grid-template-columns:218px minmax(0,1fr);
  min-height:100vh
}
.sidebar{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  padding:26px 16px;
  background:linear-gradient(170deg,var(--nav),var(--nav-deep));
  color:#d5e2f1;
  display:flex;
  flex-direction:column;
  z-index:20
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  font-size:19px;
  font-weight:650;
  letter-spacing:.3px;
  padding:0 9px 28px
}
.brand:hover{
  text-decoration:none
}
.brand small{
  display:block;
  color:#8da6c2;
  font-size:11px;
  letter-spacing:2px;
  font-weight:400;
  margin-top:3px
}
.brand-symbol{
  display:grid;
  place-items:center;
  width:36px;
  height:40px;
  border:1px solid #77c9d45c;
  border-radius:11px;
  color:#83d3dc;
  font-size:31px;
  line-height:1
}
.nav-caption{
  font-size:11px;
  color:#8099b6;
  letter-spacing:2px;
  margin:6px 14px 12px
}
.sidebar nav{
  display:grid;
  gap:7px
}
.sidebar nav a{
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 15px;
  border-radius:8px;
  color:#afc3dc;
  font-size:13px
}
.sidebar nav a:hover{
  background:#ffffff08;
  text-decoration:none;
  color:#fff
}
.sidebar nav a.active{
  background:#2d657554;
  color:#a2eef1;
  box-shadow:inset 3px 0 #55c0cc
}
.sidebar nav .icon{
  width:19px;
  height:19px
}
.sidebar-foot{
  margin-top:auto;
  padding:22px 12px 0;
  border-top:1px solid #ffffff13;
  font-size:11px;
  color:#bbd0e4
}
.sidebar-foot p{
  margin-top:9px;
  color:#7790ac;
  font-size:11px;
  line-height:1.9
}
.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#68bdc7;
  margin-right:7px;
  vertical-align:2px
}
.main-shell{
  min-width:0
}
.topbar{
  height:74px;
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:16px;
  background:#ffffffd9;
  border-bottom:1px solid var(--line)
}
.breadcrumb{
  font-size:11px;
  color:var(--muted);
  display:block;
  line-height:1.4
}
.topbar strong{
  font-size:14px;
  font-weight:600
}
.session-info{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size:12px;
  color:var(--muted)
}
.page{
  padding:28px 32px 40px;
  max-width:1780px;
  margin:0 auto;
  min-width:0
}
.page-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:23px
}
.page-heading p{
  margin-top:5px;
  color:var(--muted);
  font-size:13px
}
.heading-actions,.inline-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.eyebrow{
  font-size:10px;
  color:var(--accent);
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:5px;
  text-transform:uppercase
}
.mobile-menu{
  display:none!important
}
.button,.icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent;
  border-radius:7px;
  min-height:37px;
  padding:8px 14px;
  line-height:1.3;
  font-size:12px;
  font-weight:550;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:background .15s,border-color .15s
}
.button:hover,.icon-button:hover{
  text-decoration:none;
  background:#f2f6fa
}
.button-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.button-primary:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover)
}
.button-secondary{
  border-color:var(--line);
  background:#fff
}
.button-quiet{
  color:var(--muted);
  background:transparent
}
.button-danger{
  color:var(--danger);
  border-color:#e7c7c5
}
.button-danger:hover{
  background:var(--danger-soft)
}
.button-small{
  min-height:31px;
  padding:6px 10px;
  font-size:11px
}
.icon-button{
  width:32px;
  min-height:32px;
  padding:5px;
  color:var(--muted);
  flex-shrink:0
}
.link-button{
  padding:0;
  border:0;
  background:none;
  color:var(--accent);
  font-size:12px;
  cursor:pointer
}
.button .icon{
  width:16px;
  height:16px
}
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:var(--shadow);
  min-width:0
}
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:17px 20px;
  border-bottom:1px solid var(--line)
}
.panel-body{
  padding:20px
}
.toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:15px 18px;
  border-bottom:1px solid var(--line)
}
.toolbar input{
  min-width:150px;
  flex:1
}
.toolbar select{
  width:auto;
  min-width:125px
}
.search-input{
  position:relative;
  flex:1;
  min-width:180px
}
.search-input input{
  width:100%;
  padding-left:36px
}
.search-input>.icon{
  position:absolute;
  top:11px;
  left:11px;
  width:16px;
  height:16px;
  color:var(--muted)
}
input:not([type=checkbox]):not([type=radio]),textarea,select{
  min-width:0;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 11px;
  color:var(--ink);
  background:#fff;
  font-size:12px;
  line-height:1.5
}
input::placeholder,textarea::placeholder{
  color:#92a1b3
}
textarea{
  resize:vertical
}
input[type=checkbox],input[type=radio]{
  accent-color:var(--accent);
  width:15px;
  height:15px;
  flex-shrink:0
}
label.field{
  display:grid;
  gap:7px;
  font-size:12px;
  min-width:0
}
.field>span,.field>label{
  font-weight:550
}
.field>input,.field>textarea,.field>select{
  width:100%
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.form-stack{
  display:grid;
  gap:18px
}
.full-width{
  grid-column:1/-1
}
.check-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px
}
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-top:20px
}
.form-section{
  margin-bottom:25px
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:13px
}
.section-heading h3{
  font-weight:650
}
.section-heading p{
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}
.store-checks{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:8px
}
.check-card{
  display:flex;
  align-items:flex-start;
  gap:9px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:10px;
  font-size:12px;
  cursor:pointer
}
.check-card:has(input:checked){
  border-color:#84b9bf;
  background:var(--accent-soft)
}
.check-card small{
  display:block;
  font-size:10px;
  color:var(--muted);
  font-family:var(--mono);
  overflow-wrap:anywhere
}
.check-card input{
  margin-top:3px
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:4px;
  padding:2px 7px;
  background:#f0f4f8;
  color:#5a6d83;
  font-size:10px;
  font-weight:500;
  white-space:nowrap
}
.tag.good{
  background:#eaf5ee;
  color:var(--green)
}
.tag.warning{
  background:#fcf2df;
  color:var(--amber)
}
.tag.error{
  background:var(--danger-soft);
  color:var(--danger)
}
.tag.accent{
  background:var(--accent-soft);
  color:var(--accent)
}
.loading-state,.empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:180px;
  padding:30px;
  color:var(--muted);
  font-size:13px
}
.empty-state{
  flex-direction:column;
  text-align:center;
  gap:8px
}
.empty-state>.icon{
  width:30px;
  height:30px;
  color:#8da4bb;
  margin-bottom:4px
}
.empty-state strong{
  font-size:14px;
  color:var(--ink);
  font-weight:550
}
.empty-state p{
  max-width:420px;
  font-size:12px
}
.spinner{
  width:15px;
  height:15px;
  border:2px solid #c7dbe0;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}
.alert{
  font-size:12px;
  line-height:1.8;
  border:1px solid #bcd9dd;
  border-radius:7px;
  padding:10px 13px;
  background:var(--accent-soft);
  margin-bottom:15px;
  overflow-wrap:anywhere
}
.alert.error{
  color:var(--danger);
  background:var(--danger-soft);
  border-color:#edd0cd
}
.alert:empty{
  display:none
}
.notices{
  position:fixed;
  right:25px;
  bottom:24px;
  display:grid;
  gap:8px;
  z-index:100;
  max-width:min(460px,calc(100vw - 30px))
}
.notice{
  background:var(--nav);
  color:#fff;
  padding:11px 18px;
  border-radius:8px;
  box-shadow:0 6px 30px #14243825;
  font-size:12px;
  overflow-wrap:anywhere
}
.notice.error{
  background:#913c3c
}
.pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px
}
.pagination>div{
  display:flex;
  gap:7px
}
.table-wrap{
  overflow:auto
}
table{
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  text-align:left
}
th{
  padding:12px 18px;
  color:var(--muted);
  font-size:11px;
  font-weight:550;
  background:#f8fafc;
  border-bottom:1px solid var(--line);
  white-space:nowrap
}
td{
  padding:15px 18px;
  border-bottom:1px solid #e7edf4;
  vertical-align:top
}
tr:last-child td{
  border-bottom:0
}
.row-title{
  font-weight:600;
  color:var(--ink)
}
.row-subtitle{
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}
.record-row{
  cursor:pointer
}
.record-row:hover{
  background:#f8fbfd
}
.scenarios-layout{
  display:grid;
  grid-template-columns:minmax(285px,360px) minmax(0,1fr);
  gap:20px;
  align-items:start
}
.scenario-list{
  overflow:hidden
}
.scenario-list .toolbar{
  padding:13px;
  gap:8px
}
.scenario-list .toolbar select{
  min-width:0;
  flex:1;
  width:calc(50% - 4px)
}
.scenario-list .search-input{
  flex-basis:100%;
  min-width:0
}
.scenario-row{
  display:block;
  width:100%;
  padding:17px 18px;
  text-align:left;
  border:0;
  border-bottom:1px solid #e9eef4;
  background:#fff;
  cursor:pointer
}
.scenario-row:hover{
  background:#f9fbfd
}
.scenario-row.selected{
  background:#edf6f7;
  box-shadow:inset 3px 0 var(--accent)
}
.scenario-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.scenario-row h3{
  font-size:13px;
  overflow-wrap:anywhere
}
.scenario-meta{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:7px;
  color:var(--muted);
  font-size:10px
}
.scenario-words{
  margin-top:10px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  max-height:46px;
  overflow:hidden
}
.scenario-word{
  font-size:10px;
  color:#58758e;
  background:#f2f6fa;
  border-radius:4px;
  padding:2px 6px
}
.scenario-summary{
  color:var(--muted);
  font-size:11px;
  margin-top:8px;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden
}
.scenario-list .pagination{
  padding:12px;
  font-size:10px
}
.scenario-list .pagination .button{
  padding:6px
}
.editor-shell{
  overflow:hidden
}
.editor-top{
  padding:19px 22px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.editor-top h2{
  font-size:17px
}
.editor-top .hint{
  margin-top:3px
}
.editor-content{
  padding:22px
}
.editor-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,.7fr);
  gap:23px;
  align-items:start
}
.editor-fields{
  min-width:0
}
.reply-preview{
  position:sticky;
  top:20px;
  background:#f4f7fb;
  border:1px solid var(--line);
  border-radius:8px;
  padding:15px;
  min-width:0
}
.reply-preview h3{
  font-size:12px;
  margin-bottom:5px
}
.reply-preview>.hint{
  font-size:10px;
  margin-bottom:15px
}
.preview-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:15px
}
.preview-step{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:8px;
  position:relative
}
.preview-step:not(:last-child):before{
  content:"";
  position:absolute;
  left:9px;
  top:25px;
  bottom:-13px;
  width:1px;
  background:#d2dee9
}
.step-order{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dce9ef;
  color:#427d88;
  font:10px var(--mono);
  z-index:1
}
.preview-message{
  background:#fff;
  border:1px solid #dfe8f0;
  border-radius:0 8px 8px 8px;
  padding:11px;
  box-shadow:0 2px 5px #14243803;
  min-width:0
}
.message-kind{
  font-size:9px;
  text-transform:uppercase;
  color:#8b9db0;
  letter-spacing:.6px;
  display:block;
  margin-bottom:5px
}
.message-text{
  font-size:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.8
}
.message-image{
  max-width:100%;
  max-height:220px;
  object-fit:contain;
  border-radius:5px;
  display:block
}
.media-placeholder,.card-preview{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  color:var(--muted);
  min-height:45px
}
.card-preview{
  flex-wrap:wrap
}
.card-preview span{
  flex-basis:100%;
  font-size:10px;
  overflow-wrap:anywhere
}
.card-preview strong{
  color:var(--ink);
  font-size:12px
}
.group-card{
  border:1px solid var(--line);
  border-radius:7px;
  padding:12px;
  margin-bottom:10px;
  background:#fff
}
.group-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:9px
}
.group-card-head select{
  font-size:11px;
  padding:5px 7px
}
.group-card textarea{
  width:100%;
  min-height:66px;
  font-size:12px
}
.group-card .hint{
  font-size:10px;
  margin-top:5px
}
.or-divider{
  text-align:center;
  font-size:10px;
  letter-spacing:1px;
  color:#8398ad;
  padding:0 0 8px
}
.reply-editor{
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:12px;
  overflow:hidden;
  background:#fff
}
.reply-editor-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-bottom:1px solid #e5edf3;
  background:#f8fafc
}
.reply-editor-head .step-order{
  background:#e0eef0
}
.reply-editor-head strong{
  font-size:12px
}
.reply-editor-head .inline-actions{
  margin-left:auto;
  gap:2px
}
.reply-editor-body{
  padding:13px;
  display:grid;
  gap:12px
}
.reply-editor textarea{
  width:100%;
  min-height:90px
}
.reply-add{
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.reply-add .button{
  font-size:10px
}
.action-help{
  font-size:10px;
  color:var(--muted);
  line-height:1.8
}
.radio-row,.check-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:11px
}
.radio-row label,.check-row label{
  display:flex;
  align-items:center;
  gap:5px
}
.video-binding{
  padding:11px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:11px
}
.video-binding strong{
  display:block;
  margin-bottom:5px
}
.video-binding .mono{
  font-size:10px;
  overflow-wrap:anywhere
}
.goods-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 60px auto;
  gap:7px;
  align-items:end
}
.goods-line .icon-button{
  margin-bottom:1px
}
.goods-line input{
  width:100%;
  padding:7px;
  font-size:11px
}
.goods-line .field{
  font-size:10px;
  gap:4px
}
.preview-form{
  display:grid;
  gap:12px
}
.preview-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);
  gap:22px;
  align-items:start
}
.preview-result .preview-steps{
  padding:20px
}
.result-heading{
  padding:18px 20px;
  border-bottom:1px solid var(--line)
}
.result-heading p{
  font-size:12px;
  color:var(--muted);
  margin-top:7px
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(315px,1fr));
  gap:16px
}
.device-card{
  padding:19px;
  display:grid;
  gap:15px
}
.device-head{
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:12px
}
.device-head h3{
  font-size:14px
}
.credential-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px
}
.credential{
  display:block;
  width:100%;
  padding:10px 11px;
  background:#f4f7fa;
  border:1px solid #e0e8f0;
  border-radius:6px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.8;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-all;
  user-select:all;
  color:var(--ink)
}
.device-stores{
  display:flex;
  gap:5px;
  flex-wrap:wrap
}
.device-footer{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:12px
}
.account-list{
  display:grid;
  gap:8px;
  margin-top:15px
}
.account-item{
  padding:11px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px
}
.account-item p{
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:13px
}
.media-card{
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
  background:#fff;
  min-width:0
}
.media-card img{
  width:100%;
  height:125px;
  object-fit:contain;
  background:#f4f7fa;
  border-radius:5px;
  display:block
}
.media-card strong{
  display:block;
  font-size:11px;
  margin-top:8px;
  overflow-wrap:anywhere;
  font-weight:550
}
.media-card small{
  font-size:10px;
  color:var(--muted)
}
button.media-card{
  text-align:left;
  cursor:pointer
}
button.media-card:hover{
  border-color:var(--accent);
  background:#f4fbfb
}
.upload-zone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:20px;
  border:1px dashed #a7c4d2;
  border-radius:9px;
  background:#f6fafc;
  margin-bottom:20px
}
.upload-zone p{
  font-size:12px;
  color:var(--muted);
  margin-top:3px
}
.upload-progress{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  margin-bottom:14px
}
progress{
  accent-color:var(--accent);
  height:8px;
  flex:1
}
.material-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:17px;
  flex-wrap:wrap
}
.material-toolbar select{
  min-width:200px
}
.record-detail{
  display:grid;
  gap:20px
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}
.detail-grid dt{
  font-size:10px;
  color:var(--muted)
}
.detail-grid dd{
  margin:3px 0 0;
  font-size:12px;
  overflow-wrap:anywhere
}
.record-input{
  padding:14px;
  border-radius:7px;
  background:#f5f8fb;
  white-space:pre-wrap;
  font-size:12px;
  overflow-wrap:anywhere
}
.step-result{
  padding:13px;
  border:1px solid var(--line);
  border-radius:7px;
  margin-top:10px
}
.step-result-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px
}
.step-result p{
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}
.step-history{
  list-style:none;
  padding:0 0 0 13px;
  margin:13px 0 0 9px;
  border-left:1px solid var(--line);
  display:grid;
  gap:15px;
}
.step-history-phase{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px 12px;
  position:relative;
  font-size:11px;
}
.step-history-phase:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  position:absolute;
  left:-17px;
  top:7px;
}
.step-history-phase time{
  font:10px var(--mono);
  color:var(--muted);
}
.raw-data{
  margin-top:10px
}
summary{
  cursor:pointer;
  font-size:11px;
  color:var(--accent)
}
pre{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:11px/1.7 var(--mono);
  background:#f4f7fa;
  padding:12px;
  border-radius:6px;
  max-height:330px;
  overflow:auto
}
.tab-row{
  display:flex;
  gap:15px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px
}
.tab-row button{
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-size:12px;
  padding:10px 3px
}
.tab-row button.active{
  color:var(--accent);
  border-color:var(--accent)
}
.dialog{
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  width:min(560px,calc(100vw - 32px));
  max-height:90vh;
  color:var(--ink);
  background:#fff;
  box-shadow:0 22px 80px #0e1e3340;
  overflow:auto
}
.dialog-wide{
  width:min(920px,calc(100vw - 32px))
}
.dialog::backdrop{
  background:#14243865;
  backdrop-filter:blur(3px)
}
.dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 21px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#fff;
  z-index:2
}
.dialog-header h2{
  font-size:16px
}
.dialog-body{
  padding:21px
}
.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  background:radial-gradient(ellipse at 12% 20%,#dbeaf1,transparent 55%),var(--bg)
}
.login-panel{
  width:min(410px,100%);
  padding:36px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 20px 70px #1424380a
}
.login-panel .brand{
  color:var(--ink);
  padding:0 0 28px
}
.login-panel .brand small{
  color:var(--muted)
}
.login-panel .brand-symbol{
  background:var(--nav);
  color:#a2eef1
}
.login-panel h1{
  font-size:22px
}
.login-panel>p{
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
  margin-bottom:24px
}
.login-panel .button-primary{
  width:100%;
  margin-top:5px
}
.login-footnote{
  font-size:10px;
  color:var(--muted);
  text-align:center;
  margin-top:23px
}
@media(min-width:1700px){
  .scenarios-layout{
    grid-template-columns:375px minmax(0,1fr)
  }
  .editor-grid{
    grid-template-columns:minmax(0,1fr) 310px
  }
}
@media(max-width:1250px){
  .shell{
    grid-template-columns:190px minmax(0,1fr)
  }
  .sidebar{
    padding:24px 12px
  }
  .brand{
    font-size:17px;
    padding-left:4px;
    gap:9px
  }
  .page{
    padding:24px
  }
  .topbar{
    padding:0 24px
  }
  .scenarios-layout{
    grid-template-columns:285px minmax(0,1fr);
    gap:15px
  }
  .editor-grid{
    grid-template-columns:minmax(0,1fr)
  }
  .reply-preview{
    position:static
  }
  .reply-preview .preview-steps{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr))
  }
  .preview-step:not(:last-child):before{
    display:none
  }
  .editor-content{
    padding:18px
  }
  .cards-grid{
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
  }
}
@media(max-width:900px){
  .shell{
    grid-template-columns:1fr
  }
  .sidebar{
    position:fixed;
    width:218px;
    inset:0 auto 0 0;
    transform:translateX(-100%);
    transition:transform .18s;
    box-shadow:10px 0 35px #14243830
  }
  .shell.menu-open .sidebar{
    transform:translateX(0)
  }
  .mobile-menu{
    display:inline-flex!important
  }
  .page{
    padding:23px 18px
  }
  .topbar{
    height:66px;
    padding:0 18px
  }
  .session-info{
    gap:9px
  }
  .page-heading{
    align-items:flex-start
  }
  .page-heading h1{
    font-size:22px
  }
  .preview-grid{
    grid-template-columns:1fr
  }
  .scenarios-layout{
    grid-template-columns:280px minmax(0,1fr)
  }
  .form-grid{
    grid-template-columns:1fr
  }
  .editor-top{
    padding:16px
  }
  .editor-top .inline-actions{
    gap:4px
  }
  .editor-top .button{
    padding:7px 9px
  }
  .skip-link{
    left:15px
  }
}
@media(max-width:680px){
  .scenarios-layout{
    grid-template-columns:1fr
  }
  .scenario-list{
    max-height:420px;
    overflow:auto
  }
  .editor-shell{
    min-width:0
  }
  .page-heading{
    gap:13px;
    flex-wrap:wrap
  }
  .page-heading p{
    font-size:12px
  }
  .heading-actions{
    width:100%
  }
  .form-grid,.detail-grid{
    grid-template-columns:1fr
  }
  .toolbar{
    gap:8px;
    padding:12px
  }
  .toolbar select{
    flex:1;
    min-width:110px
  }
  .toolbar input{
    min-width:100px
  }
  .cards-grid{
    grid-template-columns:1fr
  }
  .upload-zone{
    align-items:flex-start;
    flex-direction:column
  }
  .editor-content{
    padding:15px
  }
  .goods-line{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .goods-line .icon-button{
    justify-self:end
  }
  .record-row td{
    padding:12px
  }
  .panel-body{
    padding:16px
  }
  .dialog-body{
    padding:16px
  }
  .session-info>span{
    width:100%;
    text-align:right;
    overflow-wrap:anywhere
  }
  .topbar{
    height:auto;
    min-height:74px;
    padding-top:10px;
    padding-bottom:10px;
  }
  .session-info{
    gap:4px 8px;
  }
  .credential{
    font-size:11px
  }
  .login-panel{
    padding:27px
  }
  .page{
    padding:20px 13px
  }
  .preview-result .preview-steps{
    padding:15px
  }
}
.editor-fieldset{
  padding:0;
  margin:0;
  min-width:0;
  border:0
}
.page-number{
  width:80px
}
.record-text-summary{
  max-width:420px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden
}
.dialog .preview-steps{
  margin-top:14px
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}