:root{
  --bg0:#f2f5fa;
  --bg1:#eef2f8;
  --panel:rgba(253,254,255,.92);
  --panel2:rgba(253,254,255,.96);
  --text:#111827;
  --muted:#6b7280;
  --border:#e5eaf3;
  --shadow:0 10px 26px rgba(17,24,39,.10);

  --primary:#00549F;
  --primary2:#16a34a;
  --danger:#dc2626;
  --warning:#d97706;
  --info:#2563eb;

  --radius:16px;
  --radius-sm:12px;
  --ring:0 0 0 3px rgba(0,84,159,.18);
  --card-stack-gap:4px;
  --section-stack-gap:4px;
  --block-gap:12px;
  --list-search-field-width:240px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(980px 520px at 18% 10%, rgba(0,84,159,.12), transparent 62%),
    radial-gradient(860px 520px at 86% 16%, rgba(22,163,74,.07), transparent 60%),
    radial-gradient(980px 620px at 50% 92%, rgba(2,132,199,.06), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

a{color:inherit;text-decoration:none}
.cell-link,
.cell-link:visited{
  color:var(--info);
  text-decoration:none;
  transition:color .16s ease, text-decoration-color .16s ease;
}
.cell-link:hover,
.cell-link:focus-visible{
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cell-link:active{
  color:#0f4aa1;
}
button,input,select,textarea{font:inherit}

/* Layout */
.pro-shell{height:100vh;height:100dvh;display:flex;overflow:hidden}
.pro-sidebar{
  position:relative;
  width:244px;
  padding:16px 10px 14px;
  border-right:1px solid var(--border);
  background:
    radial-gradient(300px 230px at 18% 0%, rgba(219,234,254,.24), transparent 74%),
    radial-gradient(340px 250px at 100% 18%, rgba(186,230,253,.16), transparent 76%),
    linear-gradient(180deg, #2b8ad3 0%, #227bc2 56%, #1d6eae 100%);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.06),
    12px 0 26px rgba(28,90,145,.08);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.pro-sidebar::before{
  content:"";
  position:absolute;
  inset:10px 8px;
  border-radius:22px;
  border:none;
  background:transparent;
  pointer-events:none;
}
.pro-sidebar::after{
  content:"";
  position:absolute;
  right:-54px;
  bottom:52px;
  width:170px;
  height:170px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(191,219,254,.16), transparent 70%);
  pointer-events:none;
}
.pro-brand{
  position:relative;
  z-index:1;
  display:flex;align-items:center;gap:12px;
  margin:2px 2px 6px;
  padding:12px 10px 12px;
  border-radius:18px;
  border:none;
  background:transparent;
  box-shadow:none;
}
.pro-logo{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(191,219,254,.70));
  box-shadow:0 12px 30px rgba(0,84,159,.28);
  background-image:url("/pro/logo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.pro-brand-title{font-weight:800;font-size:16px;letter-spacing:.35px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.pro-brand-sub{color:rgba(255,255,255,.76);font-size:12px;margin-top:2px}

.pro-nav{
  position:relative;
  z-index:1;
  margin-top:2px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
  overflow:auto;
  padding:2px 4px 2px;
}
.pro-nav{-ms-overflow-style:none;scrollbar-width:none}
.pro-nav::-webkit-scrollbar{width:0;height:0}
.pro-nav-group{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pro-nav-group-hd{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  position:relative;
  padding:10px 12px;
  border-radius:10px;
  border:none;
  color:rgba(255,255,255,.88);
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  text-align:left;
  font:inherit;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:color .18s ease;
}
.pro-nav-group-hd:hover{
  background:transparent;
}
.pro-nav-group-hd.active{
  background:transparent;
  color:rgba(255,255,255,.76);
}
.pro-nav-group-hd.active .pro-nav-icon{
  background:rgba(255,255,255,.14);
  color:#ffffff;
}
.pro-nav-group-hd:focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.20);
}
.pro-nav-group-hd.indent{padding-left:32px}
.pro-nav-group-title{font-weight:700;letter-spacing:.1px;font-size:16px;color:inherit}
.pro-nav-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.pro-nav-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
  font-size:10px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.pro-nav-icon.leaf{
  width:16px;
  height:16px;
  border-radius:5px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  font-size:9px;
}
.pro-nav-toggle{
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.84);
  line-height:1;
  transition:opacity .18s ease, transform .18s ease;
}
.pro-nav-toggle::before{
  content:"";
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .18s ease, border-color .18s ease;
}
.pro-nav-group[data-collapsed="0"] .pro-nav-toggle::before{transform:rotate(225deg) translateY(-1px)}
.pro-nav-group-hd:hover .pro-nav-toggle,
.pro-nav-group-hd.active .pro-nav-toggle{color:rgba(255,255,255,.84)}
.pro-nav-children{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0 0 2px 8px;
  padding:1px 0 1px 12px;
}
.pro-nav-children::before{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  width:0;
  background:transparent;
}
.pro-nav a{
  display:flex;align-items:center;justify-content:space-between;
  position:relative;
  padding:9px 12px;
  border-radius:10px;
  border:none;
  color:rgba(255,255,255,.82);
  background:transparent;
  box-shadow:none;
  transition:color .18s ease;
  font-size:15.5px;
  font-weight:500;
}
.pro-nav > a{
  font-size:16px;
  font-weight:700;
}
.pro-nav a:hover{
  background:transparent;
}
.pro-nav a.active{
  color:#f6fbff;
  background:transparent;
  font-weight:700;
}
.pro-nav a.active .pro-nav-icon{
  background:rgba(255,255,255,.14);
  color:#f6fbff;
}
.pro-nav a.indent{padding-left:28px}
.pro-nav a.indent{font-size:15px;font-weight:500;color:rgba(255,255,255,.72)}
.pro-nav a.indent.active{color:#f6fbff;font-weight:700}
.pro-nav .desc{color:rgba(255,255,255,.70);font-size:12px;margin-top:2px}
.pro-nav .left{display:flex;flex-direction:column}
.pro-nav .badge{
  font-size:12px;
  color:rgba(255,255,255,.90);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  padding:4px 8px;border-radius:999px
}
.pro-sidebar .muted{color:rgba(255,255,255,.74)}

.pro-main{flex:1;min-width:0;padding:18px;display:flex;flex-direction:column;min-height:0}
.pro-topbar{
  position:relative;
  z-index:40;
  overflow:visible;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}
.pro-title{
  flex:1;
  min-width:0;
  font-weight:800;
  letter-spacing:.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pro-userline{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  margin-left:auto;
}
.pro-icon-btn{
  position:relative;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(253,254,255,.92);
  color:rgba(17,24,39,.76);
  cursor:pointer;
  transition:all .2s ease;
}
.pro-icon-btn:hover{
  color:var(--brand);
  border-color:rgba(37,99,235,.28);
  box-shadow:0 8px 18px rgba(37,99,235,.12);
}
.pro-icon-btn svg{width:20px;height:20px;display:block;fill:currentColor}
.pro-bell-badge{
  position:absolute;
  top:-4px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  box-shadow:0 6px 14px rgba(239,68,68,.28);
}
.pro-pill{
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(253,254,255,.92);
  color:rgba(17,24,39,.86);
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pro-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.08);
  background:rgba(253,254,255,.92);
  object-fit:cover;
  box-shadow:0 8px 18px rgba(17,24,39,.08);
  flex:0 0 auto;
}
.pro-account{
  position:relative;
  display:flex;
  align-items:center;
}
.pro-account-trigger{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}
.pro-account-caret{
  color:rgba(17,24,39,.55);
  font-size:12px;
  line-height:1;
}
.pro-account-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:160px;
  padding:8px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  background:rgba(253,254,255,.98);
  box-shadow:0 18px 40px rgba(17,24,39,.16);
  display:none;
  z-index:60;
}
.pro-account.open .pro-account-menu{display:block}
.pro-account-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:rgba(17,24,39,.86);
  cursor:pointer;
  text-align:left;
}
.pro-account-item:hover{background:rgba(0,84,159,.06)}
.pro-account-item.danger{color:#dc2626}
.pro-account-item.danger:hover{background:rgba(220,38,38,.08)}
.pro-content{margin-top:4px;flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:auto}
.pro-content{-ms-overflow-style:none;scrollbar-width:none}
.pro-content::-webkit-scrollbar{width:0;height:0}

/* List layout: 搜索区 -> 操作区 -> 列表 -> 分页固定底部 */
.list-card{display:flex;flex-direction:column;flex:1;min-height:0}
.list-card > .row{order:1}
.list-card .list-search-row{row-gap:12px}
.list-card .list-search-row > .field{
  flex:0 0 min(var(--list-search-field-width), 100%) !important;
  width:min(var(--list-search-field-width), 100%) !important;
  min-width:min(var(--list-search-field-width), 100%) !important;
  max-width:100%;
}
.list-card .list-search-row > .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.list-card .list-search-row > .field > select{width:100% !important}
.list-card > .card-hd{order:2;margin-top:10px}
.list-card > .card-hd .card-title,
.list-card > .card-hd .card-sub{display:none}
.list-card > .table-wrap{order:3;flex:1;min-height:0;margin-top:6px}
.list-card > .pager{order:4;margin-top:auto;padding-top:12px;border-top:none}
@supports selector(.x:has(*)){
  .list-card > .card-hd:not(:has(.btn)):not(:has(.btn-group)):not(:has(select)){display:none;margin-top:0}
  /* 全局：把“查询/重置”从搜索行搬到 card-hd 时，避免先在搜索行闪一下 */
  .list-card:has(.card-hd) .row button[id$="-search"],
  .list-card:has(.card-hd) .row button[id$="-reset"]{visibility:hidden}
}

/* 固定分页到卡片底部（不改变页面既有结构） */
@media (max-width: 768px){
  .list-card .list-search-row > .field{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:100% !important;
  }
}

.fixed-pager-card{display:flex;flex-direction:column;flex:1;min-height:0}
.fixed-pager-card > .table-wrap{flex:1;min-height:0}
.fixed-pager-card > .pager{margin-top:auto;padding-top:12px;border-top:1px solid rgba(17,24,39,.08)}

/* Cards / Sections */
.card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--panel);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  min-width:0;
  padding:14px;
}
.card + .card{margin-top:var(--card-stack-gap) !important}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-hd-right{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-left:auto}
.card-title{
  font-weight:800;
  font-size:16px;
  line-height:1.4;
  letter-spacing:.1px;
  color:rgba(17,24,39,.9);
}
.card-sub{color:var(--muted);font-size:12px;margin-top:4px}
.report-detail-section{
  margin-top:var(--section-stack-gap);
  padding-top:var(--block-gap);
  border-top:1px solid rgba(17,24,39,.08);
}
.report-detail-section-title{
  display:block;
  font-weight:800;
  font-size:15px;
  line-height:1.4;
  letter-spacing:.08px;
  color:rgba(17,24,39,.84);
  padding-bottom:10px;
  border-bottom:1px solid rgba(17,24,39,.08);
}
.section-title-inline{
  display:block;
  font-weight:700;
  font-size:15px;
  line-height:1.4;
  letter-spacing:.08px;
  color:rgba(17,24,39,.84);
  padding-bottom:10px;
  border-bottom:1px solid rgba(17,24,39,.08);
}
.form-section-group{
  margin-top:var(--section-stack-gap);
}
.subtable-section-title{
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  color:rgba(17,24,39,.86);
}
.section-block-title{
  margin-top:12px;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  color:rgba(17,24,39,.84);
}
.report-detail-action-box{
  margin-top:6px;
  padding:14px 14px 12px;
  border:1px solid rgba(59,130,246,.24);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(239,246,255,.96), rgba(247,250,255,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 20px rgba(59,130,246,.08);
}
.report-detail-action-box .report-detail-section-title{
  margin-bottom:10px;
  color:rgba(29,78,216,.92);
}
.report-detail-soft-section{
  border-top-color:rgba(17,24,39,.06);
}
.report-detail-soft-table{
  border:none;
  border-radius:0;
  background:transparent;
  margin-top:8px;
}
.report-detail-soft-table table{
  background:transparent;
}
.report-detail-soft-table thead th{
  background:rgba(243,246,251,.72);
}
.report-detail-soft-records{
  margin-top:12px;
  padding:0;
  border:none;
  box-shadow:none;
  background:transparent;
}
.report-detail-soft-records .card-hd{
  padding-top:12px;
  border-top:1px solid rgba(17,24,39,.06);
}
.report-detail-soft-records .card-title{
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  color:rgba(17,24,39,.86);
}
.report-detail-soft-table-compact table{
  font-size:inherit;
}
.report-detail-soft-table-compact thead th,
.report-detail-soft-table-compact tbody td{
  padding-top:8px;
  padding-bottom:8px;
}
.muted{color:var(--muted)}
.danger-text{color:var(--danger)}
.info-text{color:var(--info)}
.ok-text{color:var(--primary2)}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(253,254,255,.92);
  font-size:inherit;
  line-height:inherit;
  font-weight:800;
  color:rgba(17,24,39,.78);
  white-space:nowrap;
}
.tag.warn{
  border-color:rgba(217,119,6,.25);
  background:rgba(217,119,6,.08);
  color:rgba(180,83,9,.95);
}
.tag.danger{
  border-color:rgba(220,38,38,.25);
  background:rgba(220,38,38,.08);
  color:rgba(185,28,28,.95);
}
.tag.ok{
  border-color:rgba(22,163,74,.22);
  background:rgba(34,197,94,.10);
  color:rgba(21,128,61,.95);
}
.tag.info{
  border-color:rgba(2,132,199,.22);
  background:rgba(2,132,199,.08);
  color:rgba(3,105,161,.95);
}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  padding:9px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(253,254,255,.92);
  color:rgba(17,24,39,.86);
  cursor:pointer;
  user-select:none;
}
.tab:hover{border-color:rgba(0,84,159,.20)}
.tab.active{
  background:linear-gradient(135deg, rgba(0,84,159,.12), rgba(2,132,199,.05));
  border-color:rgba(0,84,159,.20);
}

/* Form controls */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row + .row{margin-top:10px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--muted)}
.form-grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}
.form-grid-4 + .form-grid-4{margin-top:12px}
.form-grid-4 > .field,
.form-grid-field{min-width:0}
.form-grid-4 > .field > input,
.form-grid-4 > .field > select,
.form-grid-4 > .field > textarea,
.form-grid-field > input,
.form-grid-field > select,
.form-grid-field > textarea{
  width:100%;
  min-width:0;
}
.form-grid-4 > .field > label,
.form-grid-field > label{
  line-height:1.4;
  white-space:normal;
  word-break:break-word;
}
.form-span-1{grid-column:span 1}
.form-span-2{grid-column:span 2}
.form-span-4{grid-column:1 / -1}
.form-size-s{min-width:150px}
.form-size-m{min-width:200px}
.form-size-l{min-width:260px}
@media (max-width: 960px){
  .form-grid-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .form-grid-4{grid-template-columns:1fr}
  .form-span-2{grid-column:1 / -1}
}

input,select,textarea{
  background:rgba(253,254,255,.92);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:9px 10px;
  outline:none;
}
.list-card > .row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.list-card > .row select{
  height:40px;
  min-height:40px;
}
select.select-placeholder{color:#9ca3af}
select option{color:var(--text)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{box-shadow:var(--ring);border-color:rgba(0,84,159,.28)}
select[multiple]{min-width:280px;min-height:220px}
.field > input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field > input[disabled]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field > textarea[readonly],
.field > textarea[disabled],
.field > select[disabled],
body.pro-detail-page input[readonly],
body.pro-detail-page input[disabled],
body.pro-detail-page textarea[readonly],
body.pro-detail-page textarea[disabled],
body.pro-detail-page select[disabled],
.readonly-display[readonly],
.readonly-display[disabled],
textarea.readonly-display[readonly],
textarea.readonly-display[disabled],
select.readonly-display[disabled]{
  background:rgba(243,246,251,.72);
  color:rgba(17,24,39,.84);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  caret-color:transparent;
  cursor:default;
}
.field > input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
.field > input[disabled]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
.field > textarea[readonly]:focus,
.field > textarea[disabled]:focus,
.field > select[disabled]:focus,
.readonly-display[readonly]:focus,
.readonly-display[disabled]:focus,
textarea.readonly-display[readonly]:focus,
textarea.readonly-display[disabled]:focus,
select.readonly-display[disabled]:focus{
  box-shadow:none;
  border-color:var(--border);
}
.field-link-value{
  min-height:40px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(243,246,251,.72);
  color:rgba(17,24,39,.84);
  display:flex;
  align-items:center;
  line-height:1.5;
  word-break:break-all;
}

.btn{
  border:1px solid var(--border);
  background:rgba(253,254,255,.92);
  color:rgba(17,24,39,.88);
  padding:11.8px 15px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  min-height:45.6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
}
.btn:hover{border-color:rgba(0,84,159,.20)}
.btn.primary{
  color:#fff;
  background:linear-gradient(180deg, #00549F, #003F7A);
  border-color:rgba(0,84,159,.35);
  box-shadow:0 10px 26px rgba(0,84,159,.18);
}
.btn.primary:hover{
  filter:brightness(1.03);
  border-color:rgba(0,84,159,.45);
}
.btn.primary:active{transform:translateY(1px)}
.btn.danger{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.18)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.tone-blue{
  color:#2563eb;
  background:#eff6ff;
  border-color:#bfdbfe;
  box-shadow:none;
}
.btn.tone-blue:hover{background:#dbeafe;border-color:#93c5fd}
.btn.tone-green{
  color:#16a34a;
  background:#f0fdf4;
  border-color:#bbf7d0;
  box-shadow:none;
}
.btn.tone-green:hover{background:#dcfce7;border-color:#86efac}
.btn.tone-red{
  color:#ef4444;
  background:#fef2f2;
  border-color:#fecaca;
  box-shadow:none;
}
.btn.tone-red:hover{background:#fee2e2;border-color:#fca5a5}
.btn.tone-slate{
  color:#475569;
  background:#f8fafc;
  border-color:#cbd5e1;
  box-shadow:none;
}
.btn.tone-slate:hover{background:#f1f5f9;border-color:#94a3b8}
.btn.tone-amber{
  color:#d97706;
  background:#fffbeb;
  border-color:#fde68a;
  box-shadow:none;
}
.btn.tone-amber:hover{background:#fef3c7;border-color:#fcd34d}
.btn.tone-cyan{
  color:#0891b2;
  background:#ecfeff;
  border-color:#a5f3fc;
  box-shadow:none;
}
.btn.tone-cyan:hover{background:#cffafe;border-color:#67e8f9}
.btn.tone-indigo{
  color:#4f46e5;
  background:#eef2ff;
  border-color:#c7d2fe;
  box-shadow:none;
}
.btn.tone-indigo:hover{background:#e0e7ff;border-color:#a5b4fc}
.btn.tone-approval{
  color:#0f766e;
  background:#f0fdfa;
  border-color:#99f6e4;
  box-shadow:none;
}
.btn.tone-approval:hover{background:#ccfbf1;border-color:#5eead4}
.btn.wf-reassign-btn{
  color:#4338ca;
  background:#eef2ff;
  border-color:#a5b4fc;
  box-shadow:0 6px 16px rgba(99,102,241,.12);
}
.btn.wf-reassign-btn:hover{
  background:#e0e7ff;
  border-color:#818cf8;
}
.btn.wf-activate-btn{
  color:#0f766e;
  background:#ecfeff;
  border-color:#67e8f9;
  box-shadow:0 6px 16px rgba(6,182,212,.14);
}
.btn.wf-activate-btn:hover{
  background:#cffafe;
  border-color:#22d3ee;
}

.btn-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* Table */
.table-wrap{margin-top:12px;overflow:auto;border-radius:14px;border:1px solid rgba(17,24,39,.08)}
table{width:100%;border-collapse:collapse;background:rgba(253,254,255,.70)}
th,td{padding:10px;border-bottom:1px solid rgba(17,24,39,.08);text-align:left;vertical-align:top}
th{color:rgba(17,24,39,.62);font-weight:700;font-size:15px}
thead th{position:sticky;top:0;background:rgba(243,246,251,.98);backdrop-filter:blur(10px)}
tr:hover td{background:rgba(0,84,159,.03)}
body.pro-detail-page tr:hover td{background:transparent}
.list-card tbody tr{height:56.6px}
.list-card tbody td{
  vertical-align:middle;
  white-space:nowrap;
  line-height:20px;
  height:56.6px;
  padding-top:0;
  padding-bottom:0;
  font-size:15px;
}
.list-card tbody td:not(.cell-actions){
  overflow:hidden;
  text-overflow:ellipsis;
}
.table-empty-row td{text-align:center;vertical-align:middle}
.table-empty-row:hover td{background:transparent}
.table-empty-row.borderless td{border-bottom:none;pointer-events:none;background:transparent}
.row-middle td{vertical-align:middle}
.cell-text-middle{height:34px;line-height:20px}
.subtable-compact input,
.subtable-compact select{
  padding:6px 10px;
  min-height:34px;
}
.subtable-compact td{padding-top:8px;padding-bottom:8px}
.subtable-compact th,
.subtable-compact td{overflow:hidden}
.subtable-compact th{
  vertical-align:middle;
  font-size:13px;
  font-weight:600;
  color:rgba(17,24,39,.72);
}
.subtable-compact .center{text-align:center}
.subtable-compact .th-check{
  display:flex;
  align-items:center;
  justify-content:center;
}
.subtable-compact .th-check input{margin:0}
.subtable-compact .product-cell-select{
  width:100%;
  max-width:100%;
}
.subtable-scrollbar{
  height:16px;
  padding:3px 0 1px;
  scrollbar-width:thin;
  scrollbar-color:rgba(120,134,156,.52) rgba(203,213,225,.18);
}
.subtable-scrollbar::-webkit-scrollbar{
  height:12px;
}
.subtable-scrollbar::-webkit-scrollbar-track{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.88));
  box-shadow:
    inset 0 0 0 1px rgba(148,163,184,.14),
    inset 0 1px 2px rgba(148,163,184,.10);
}
.subtable-scrollbar::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
  background:linear-gradient(180deg, rgba(148,163,184,.78), rgba(120,134,156,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 1px 2px rgba(15,23,42,.06);
  transition:background .18s ease, box-shadow .18s ease;
}
.subtable-scrollbar::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(120,134,156,.88), rgba(100,116,139,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 1px 3px rgba(15,23,42,.10);
}
.subtable-scrollbar::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg, rgba(100,116,139,.92), rgba(71,85,105,.96));
}
.contract-items-table{table-layout:fixed}
.nowrap{white-space:nowrap}
.ellipsis{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.list-card tbody .ellipsis{vertical-align:middle}
.workflow-comment-cell{width:320px;max-width:320px}
.workflow-comment-cell .ellipsis{max-width:320px;vertical-align:middle}
.td-roles{max-width:240px;width:240px}
.cell-actions{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;height:56.6px}
.workbench-table{table-layout:fixed}
.workbench-task-table{min-width:1330px}
.workbench-notify-table{min-width:1280px}
.workbench-table td .cell-link,
.workbench-table td .wb-cell-link{
  display:block;
  width:100%;
  max-width:100%;
  vertical-align:middle;
}
.workbench-table td .ellipsis,
.workbench-table td .wb-cell-ellipsis{
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}
.workbench-task-table td.wb-col-task-code{
  width:180px;
  max-width:180px;
}
.workbench-task-table th.wb-col-task-type,
.workbench-task-table td.wb-col-task-type{
  width:160px;
  max-width:160px;
}
.workbench-task-table th.wb-col-task-code,
.workbench-task-table td.wb-col-task-code{
  width:180px;
  max-width:180px;
}
.workbench-task-table th.wb-col-task-step,
.workbench-task-table td.wb-col-task-step{
  width:180px;
  max-width:180px;
}
.workbench-task-table th.wb-col-task-role,
.workbench-task-table td.wb-col-task-role{
  width:160px;
  max-width:160px;
}
.workbench-task-table th.wb-col-task-user,
.workbench-task-table td.wb-col-task-user{
  width:130px;
  max-width:130px;
}
.workbench-task-table th.wb-col-task-status,
.workbench-task-table td.wb-col-task-status{
  width:130px;
  max-width:130px;
}
.workbench-task-table th.wb-col-task-time,
.workbench-task-table td.wb-col-task-time{
  width:170px;
  max-width:170px;
}
.workbench-task-table th.wb-col-task-actions,
.workbench-task-table td.wb-col-task-actions{
  width:240px;
  max-width:240px;
}
.workbench-notify-table th.wb-col-notify-source,
.workbench-notify-table td.wb-col-notify-source{
  width:120px;
  max-width:120px;
}
.workbench-notify-table th.wb-col-notify-code,
.workbench-notify-table td.wb-col-notify-code{
  width:160px;
  max-width:160px;
}
.workbench-notify-table th.wb-col-notify-title,
.workbench-notify-table td.wb-col-notify-title{
  width:260px;
  max-width:260px;
}
.workbench-notify-table th.wb-col-notify-content,
.workbench-notify-table td.wb-col-notify-content{
  width:420px;
  max-width:420px;
}
.workbench-notify-table th.wb-col-notify-time,
.workbench-notify-table td.wb-col-notify-time{
  width:170px;
  max-width:170px;
}
.workbench-notify-table th.wb-col-notify-actions,
.workbench-notify-table td.wb-col-notify-actions{
  width:150px;
  max-width:150px;
}

/* Pagination */
.pager{display:flex;align-items:center;justify-content:flex-end;margin-top:12px;gap:10px;flex-wrap:wrap}
.pager .info{color:var(--muted)}
.pro-pager{flex-wrap:wrap}
.pro-pager-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pro-pager-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pro-pager-page{min-width:36px;text-align:center}
.pro-pager-page.active{
  background:linear-gradient(180deg, #00549F, #003F7A);
  border-color:rgba(0,84,159,.35);
  color:#fff;
}
.pro-pager-dots{color:var(--muted);padding:0 2px}
.pro-pager-size{min-width:110px}
.pro-pager-jump{
  width:36px;
  min-width:36px;
  text-align:center;
  padding:9px 10px;
  background:transparent;
}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(15,23,42,.18);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  z-index:9999;
}
.modal{
  width:min(980px, 96vw);
  max-height:min(86vh, 860px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(253,254,255,.98);
  box-shadow:0 30px 90px rgba(17,24,39,.18);
  padding:14px;
}
.modal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-title{font-weight:900}
.modal-actions{display:flex;gap:8px;align-items:center}
.modal-bd{margin-top:10px}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  top:14px;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  transform:translateX(-50%);
  z-index:10000;
  width:max-content;
  max-width:min(920px, 92vw);
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(253,254,255,.98);
  backdrop-filter:blur(10px);
  box-shadow:none;
}
.toast .t{
  font-weight:700;
  line-height:1.45;
  white-space:normal;
  word-break:break-word;
}
.toast .m{color:rgba(17,24,39,.68);margin-top:2px;font-size:12px}
.toast.ok{
  border-color:rgba(22,163,74,.30);
  background:rgba(240,253,244,.98);
  color:#166534;
  box-shadow:none;
}
.toast.err{
  border-color:rgba(220,38,38,.30);
  background:rgba(254,242,242,.98);
  color:#b91c1c;
  box-shadow:none;
}
.toast.warn{
  border-color:rgba(217,119,6,.30);
  background:rgba(255,247,237,.98);
  color:#b45309;
  box-shadow:none;
}

/* Login */
.login-wrap{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:20px 18px;
  background:
    radial-gradient(860px 520px at 16% 22%, rgba(0,84,159,.14), transparent 62%),
    radial-gradient(780px 520px at 86% 18%, rgba(22,163,74,.09), transparent 60%),
    radial-gradient(980px 620px at 50% 90%, rgba(2,132,199,.07), transparent 62%);
}
.login-card{
  width:min(520px, 96vw);
  border-radius:20px;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(253,254,255,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 30px 90px rgba(17,24,39,.16);
  padding:22px 22px 18px;
}
.login-hd{display:flex;align-items:center;gap:14px}
.login-hd-text{min-width:0}
.login-logo{
  width:64px;height:64px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(0,84,159,.20), rgba(2,132,199,.10));
  border:1px solid rgba(17,24,39,.10);
  box-shadow:0 14px 34px rgba(17,24,39,.14);
  background-image:url("/pro/logo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.login-title{font-weight:950;font-size:18px;letter-spacing:.2px}
.login-sub{color:rgba(17,24,39,.58);font-size:12px;margin-top:6px}
.login-form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.login-actions{margin-top:12px}
.login-btn{width:100%}
.login-foot{margin-top:10px;color:rgba(17,24,39,.52);font-size:12px;text-align:center}
.captcha-wrap{display:flex;gap:10px;align-items:center}
.captcha-wrap input{flex:1;min-width:140px}
.captcha-img{
  width:120px;height:40px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.captcha-img:active{transform:scale(.98)}

@media (max-width: 520px){
  .login-card{padding:18px 16px 14px;border-radius:18px}
  .login-logo{width:56px;height:56px;border-radius:14px}
}

@media (max-width: 980px){
  .pro-sidebar{width:224px}
}
@media (max-width: 860px){
  .pro-shell{flex-direction:column}
  .pro-sidebar{
    width:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
    padding-bottom:10px;
  }
  .pro-sidebar::before{inset:8px 8px 6px}
  .pro-main{padding:14px}
  .pro-topbar{border-radius:18px}
}