:root {

  --brand: #0a9d6b;
  --brand-grad: #14b886;
  --brand-deep: #087f55;
  --brand-border: #bfe5d4;
  --brand-soft: rgba(10, 157, 107, .12);
  --brand-rgb: 10, 157, 107;

  --user-bubble-a: #14b886;
  --user-bubble-b: #0a9d6b;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: #f4f5f7;
  color: #222;
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.hidden { display: none !important; }

.cap-box { display: flex; align-items: stretch; gap: 8px; }

.cap-box .inp { flex: 1 1 auto; min-width: 0; margin: 0 !important; height: 48px; letter-spacing: 5px; font-weight: 600; }
.cap-img {
  flex: 0 0 auto; width: 118px; height: 48px; border-radius: 12px; cursor: pointer;
  border: 1px solid #e3e7ea; background: #f7f9fb; display: block; object-fit: cover;
}
.cap-img:active { opacity: .8; }
.cap-refresh {
  flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid #e3e7ea; background: #fff;
  border-radius: 12px; color: #8a929b; cursor: pointer; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cap-refresh:hover { color: var(--brand); border-color: var(--brand); }
.hide { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  padding: 0 14px; height: 38px;
  font-size: 14px; font-weight: 500;
  background: #fff; color: #333; border-color: #ddd;
  transition: opacity .15s, background .15s, transform .05s;
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-deep); }
.btn-ghost { background: #fff; color: #666; border-color: #e0e0e0; }
.btn-danger { background: #fdecec; color: #e64545; border-color: #f5c6c6; }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 6px; background: #fff; border: 1px solid #e0e0e0; color: #555; }
.btn-xs:hover { color: var(--brand); border-color: var(--brand); }
.btn-danger.btn-xs { background: #fdecec; color: #e64545; border-color: #f5c6c6; }
.btn-danger.btn-xs:hover { background: #f8d7d7; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: transparent;
  border-radius: 8px; font-size: 20px; color: #333;
}
.icon-btn:hover { background: rgba(0,0,0,.05); }

.inp {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid #e0e0e0; border-radius: 8px;
  font-size: 14px; background: #fff; color: #222; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea.inp { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select.inp { appearance: auto; }

.card {
  background: #fff; border-radius: 12px; padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  margin-bottom: 16px;
}
.card-title {
  font-size: 15px; font-weight: 600; margin-bottom: 14px; color: #222;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f1f1f1; font-size: 13px; }
.table th { color: #888; font-weight: 500; background: #fafafa; white-space: nowrap; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafafa; }
.td-preview { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; }
.td-empty { color: #999; text-align: center; padding: 30px 0; }
.td-ops { white-space: nowrap; }
.td-ops .btn { margin-right: 4px; }
.lnk { color: var(--brand); }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; line-height: 1.6;
}
.tag-active { background: #e8f7ee; color: #16a34a; }
.tag-disabled { background: #f2f2f2; color: #999; }
.tag-online { background: #e8f7ee; color: #16a34a; }
.tag-off { background: #f2f2f2; color: #777; }
.tag-admin { background: var(--brand-soft); color: var(--brand-deep); }
.tag-staff { background: #eef2ff; color: #4f46e5; }
.tag-waiting { background: #fff4e5; color: #f59e0b; }
.tag-active-s { background: #e8f7ee; color: #16a34a; }
.tag-closed { background: #f2f2f2; color: #888; }

.modal-mask {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal {
  width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
}
.modal-head {
  padding: 14px 18px; font-size: 15px; font-weight: 600;
  border-bottom: 1px solid #f1f1f1; display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-foot {
  padding: 12px 18px; border-top: 1px solid #f1f1f1;
  display: flex; justify-content: flex-end; gap: 10px;
}

.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; }
.form-row .inp { margin-bottom: 0; }
.form-tip { font-size: 12px; color: #aaa; margin-top: 4px; }

.switch-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: #444; }
.switch-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-row .sw {
  position: relative; width: 44px; height: 26px; flex: 0 0 auto;
  background: #ddd; border-radius: 13px; transition: background .2s;
}
.switch-row .sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch-row input:checked + .sw { background: var(--brand); }
.switch-row input:checked + .sw::after { transform: translateX(18px); }
.switch-row.big .sw { width: 48px; height: 28px; }
.switch-row.big .sw::after { width: 22px; height: 22px; }
.switch-row.big input:checked + .sw::after { transform: translateX(20px); }

.switch-row,
label.switch-row,
.form-row .switch-row,
.form-row label.switch-row,
.st-row .switch-row,
.st-row label.switch-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap;
  gap: 10px !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}
.switch-row > .sw,
.switch-row .sw {
  flex: 0 0 auto !important;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

.switch-row > span:not(.sw) { flex: 1 1 auto; min-width: 0; }

.switch-row input[type="checkbox"],
.switch-row input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none;
}

.ks-toast {
  position: fixed; left: 50%; bottom: 15%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.78); color: #fff;
  padding: 10px 18px; border-radius: 8px; font-size: 13px;
  z-index: 3000; max-width: 82vw; text-align: center;
}
.ks-toast-err { background: rgba(215,60,60,.92); }
.ks-toast-ok { background: rgba(22,163,74,.92); }

.loading { padding: 60px 0; text-align: center; color: #999; }
.empty { padding: 60px 20px; text-align: center; color: #999; }
.list-empty { padding: 30px 10px; text-align: center; color: #aaa; font-size: 13px; }

.login-page {

  height: var(--app-h, 100vh); display: flex;
  padding: 20px; position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;

  background:
    radial-gradient(760px 420px at 12% -6%, rgba(var(--brand-rgb, 7, 193, 96), .13), transparent 60%),
    radial-gradient(680px 460px at 96% 108%, rgba(25, 137, 250, .09), transparent 60%),
    #eef2f0;
}
.login-page::before { display: none; }
.login-page > .login-shell, .login-page > .login-card { margin: auto; }
.login-card {
  width: 100%; background: #fff;
  border-radius: 22px; padding: 44px 40px 36px; position: relative; z-index: 1;
  box-shadow: 0 30px 70px rgba(18,38,28,.13), 0 3px 10px rgba(18,38,28,.05);
  border: 1px solid #e3eae6;
}

.login-shell {
  position: relative; z-index: 1;
  display: block; width: 100%; max-width: 396px;
  background: none; box-shadow: none; border: none; border-radius: 0;
  min-height: 0; overflow: visible;
}
.login-foot { margin-top: 18px; text-align: center; font-size: 12px; color: #a7b0b8; }

.inp-wrap { position: relative; }

.inp-wrap .inp { margin: 0 !important; }
.inp-wrap > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: #9aa3ad; pointer-events: none; display: block;
  transition: color .15s;
}
.inp-wrap:focus-within > svg { color: var(--brand); }
.inp-wrap .inp { padding-left: 42px !important; width: 100%; }

.login-head { text-align: center; margin-bottom: 22px; }
.login-card .login-logo { justify-content: center; font-size: 23px; }
.login-card .login-sub { margin: 10px 0 0; }
.login-card .login-form .form-row label { color: #666; font-size: 13px; }
@media (max-width: 780px) {
  .login-shell { max-width: 396px; }
  .login-card { padding: 32px 24px 28px; }
}
.login-logo {
  font-size: 22px; font-weight: 700; color: #1d2129;
  text-align: center; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.login-logo .login-logo-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; box-shadow: 0 6px 14px var(--brand-soft);
}
.login-logo .login-logo-ico svg { width: 20px; height: 20px; display: block; }
.login-sub { text-align: center; color: #8a949e; font-size: 13px; margin: 12px 0 30px; }
.login-form .inp { margin-bottom: 14px; height: 48px; font-size: 16px; background: #f8fafb; border-radius: 12px; }
.login-form .inp:focus { background: #fff; }
.login-form .btn { height: 48px; font-size: 15px; border-radius: 12px; }
.login-tip { margin-top: 18px; text-align: center; font-size: 12px; color: #a0a8b1; line-height: 1.8; }
.login-tip a { color: var(--brand); font-weight: 500; }
.login-foot {
  margin-top: 26px; padding-top: 16px; border-top: 1px dashed #e8edf0;
  text-align: center; font-size: 11px; color: #b6bec7;
}

.page-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar-tip { font-size: 12px; color: #aaa; }

.quote-blue { color: #2B7FFF; font-weight: 600; cursor: pointer; word-break: break-all; }
.quote-blue:hover { text-decoration: underline; }
.quote-blue:active { opacity: .65; }
.chat-link { color: #2B7FFF; text-decoration: underline; word-break: break-all; }
.chat-link:hover { opacity: .85; }

:root { --app-h: 100vh; }
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

.form-row.sound-setting-row { width:100%; min-width:0; }
.form-row.sound-setting-row label.switch-row.big { display:flex !important; width:100%; max-width:100%; flex-wrap:nowrap !important; align-items:center !important; box-sizing:border-box; min-width:0; }
.form-row.sound-setting-row .switch-label-text { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.st-row > label.switch-row { flex:0 0 auto; width:44px; min-width:44px; justify-content:flex-end; flex-wrap:nowrap !important; }
.st-row .st-info { min-width:0; flex:1 1 auto; }

:root {

  --c-success: var(--brand);
  --c-warning: #ff9f0a;
  --c-danger: #fa5151;
  --c-info: #2f6fed;
  --c-purple: #8b5cf6;

  --t-1: #101828;
  --t-2: #475467;
  --t-3: #98a2b3;
  --t-4: #c4cad4;
  --b-1: #e8ebf0;
  --b-2: #f1f3f6;
  --bg-page: #f4f6f9;
  --bg-card: #ffffff;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sh-2: 0 12px 32px -8px rgba(16, 24, 40, .18);
  --gap: 16px;
}

.db-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--gap); flex-wrap: wrap; }
.db-title { font-size: 18px; font-weight: 700; color: var(--t-1); display: flex; align-items: center; gap: 10px; }
.db-title::before { content: ''; width: 4px; height: 18px; border-radius: 2px; background: var(--brand); }
.db-sub { font-size: 12px; color: var(--t-3); }
.db-refresh {
  margin-left: auto; border: 1px solid var(--b-1); background: var(--bg-card); color: var(--t-2);
  border-radius: var(--r-sm); font-size: 12px; padding: 5px 12px; cursor: pointer; transition: all .15s ease;
}
.db-refresh:hover { color: var(--brand); border-color: var(--brand); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.kpi {
  position: relative; background: var(--bg-card); border: 1px solid var(--b-1); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 16px 18px 14px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.kpi-label { font-size: 13px; color: var(--t-3); display: flex; align-items: center; gap: 6px; }
.kpi-label i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kpi-val { font-size: 30px; font-weight: 700; color: var(--t-1); line-height: 1.25; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.kpi-val small { font-size: 13px; font-weight: 500; color: var(--t-3); margin-left: 4px; letter-spacing: 0; }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 10px; min-height: 34px; }
.kpi-cmp { font-size: 12px; color: var(--t-3); line-height: 1.7; }
.spark { width: 96px; height: 34px; flex: 0 0 auto; }
.kpi.is-hot .kpi-val { color: var(--c-danger); }

.kd { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: 999px; line-height: 20px; font-variant-numeric: tabular-nums; }
.kd i { font-style: normal; font-size: 9px; }
.kd-good { color: #07a354; background: rgba(var(--brand-rgb, 7, 193, 96), .10); }
.kd-bad { color: #f5222d; background: rgba(250, 81, 81, .10); }
.kd-flat { color: var(--t-3); background: var(--b-2); font-weight: 500; }

.db-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.db-card { background: var(--bg-card); border: 1px solid var(--b-1); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 18px 14px; min-width: 0; }
.db-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.db-card-title { font-size: 15px; font-weight: 600; color: var(--t-1); }
.db-card-sub { font-size: 12px; color: var(--t-3); margin-left: auto; }
.chart-box { width: 100%; }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--t-2); margin: 2px 0 6px; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend i.lg-cmp { background: #d6dae0; }
.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.c-grid { stroke: #eceef1; stroke-width: 1; stroke-dasharray: 3 4; }
.c-axis { fill: var(--t-3); font-size: 11px; }
.c-cursor { stroke: #c9cdd4; stroke-width: 1; stroke-dasharray: 4 3; }
.c-bar-cmp { fill: #dfe3e8; }
.chart-tip {
  position: absolute; z-index: 3; pointer-events: none; background: rgba(31, 35, 41, .92); color: #fff;
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; line-height: 1.8; min-width: 110px; box-shadow: var(--sh-2);
}
.chart-tip b { display: block; font-weight: 600; margin-bottom: 2px; }
.chart-tip div { display: flex; align-items: center; gap: 6px; }
.chart-tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chart-tip em { margin-left: auto; padding-left: 14px; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }

.donut-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; padding: 6px 0; }
.donut-svg { width: 150px; height: 150px; flex: 0 0 auto; }
.donut-num { font-size: 22px; font-weight: 700; fill: var(--t-1); }
.donut-lab { font-size: 11px; fill: var(--t-3); }
.donut-legend { list-style: none; flex: 1 1 130px; min-width: 130px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t-2); padding: 6px 0; border-bottom: 1px dashed var(--b-2); }
.donut-legend li:last-child { border-bottom: none; }
.donut-legend i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.donut-legend span { flex: 1; }
.donut-legend b { color: var(--t-1); font-variant-numeric: tabular-nums; }
.donut-legend em { font-style: normal; color: var(--t-3); font-size: 12px; min-width: 44px; text-align: right; }

.rank { list-style: none; }
.rank li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--b-2); }
.rank li:last-child { border-bottom: none; }
.rank-no { width: 20px; height: 20px; border-radius: 6px; background: var(--b-2); color: var(--t-3); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rank li:nth-child(1) .rank-no { background: #ffe9a8; color: #ad6800; }
.rank li:nth-child(2) .rank-no { background: #e6e9ee; color: #5b6573; }
.rank li:nth-child(3) .rank-no { background: #ffd9bf; color: #b4540a; }
.rank-main { flex: 1; min-width: 0; }
.rank-name { font-size: 13px; color: var(--t-1); display: flex; align-items: center; gap: 6px; }
.rank-name .dot { width: 7px; height: 7px; border-radius: 50%; background: #c9cdd4; flex: 0 0 auto; }
.rank-name .dot.on { background: var(--c-success); }
.rank-name .dot.busy { background: var(--c-warning); }
.rank-bar { height: 5px; border-radius: 3px; background: var(--b-2); margin-top: 6px; overflow: hidden; }
.rank-bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--c-success)); }
.rank-num { text-align: right; font-size: 12px; color: var(--t-3); line-height: 1.5; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.rank-num b { display: block; font-size: 15px; color: var(--t-1); }
.db-empty { text-align: center; color: var(--t-4); font-size: 13px; padding: 28px 0; }

@media (max-width: 900px) {
  .db-row { grid-template-columns: minmax(0, 1fr); }
  .kpi-val { font-size: 26px; }
}
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px 11px; }
  .kpi-val { font-size: 24px; }
  .spark { width: 64px; }
  .donut-svg { width: 130px; height: 130px; }
}

.tbl-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; }
.tbl-search input {
  flex: 1 1 auto; max-width: 320px; height: 34px; border: 1px solid var(--b-1); border-radius: var(--r-md);
  padding: 0 12px 0 34px; font-size: 13px; color: var(--t-1); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b8bcc4' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>") no-repeat 11px center;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.tbl-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft, rgba(var(--brand-rgb, 7, 193, 96), .12)); }
.tbl-search .tbl-count { font-size: 12px; color: var(--t-3); white-space: nowrap; }
tr.tbl-nomatch td { text-align: center; color: var(--t-4); padding: 26px 0; }

:root {
  --chart-2: #2f6fed;
  --login-g1: #eefbf4;
  --login-g3: #e8f4ee;
}
html[data-theme="a"] {

  --brand: #0a9d6b; --brand-grad: #14b886; --brand-deep: #087f55; --brand-rgb: 10, 157, 107;
  --brand-weak: #e6f5ee; --brand-weak2: #f2faf6; --brand-border: #bfe5d4; --brand-soft: rgba(10, 157, 107, .12);
  --bg: #f4f5f7; --line: #e8ebef;
  --chart-2: #2f6fed;
  --login-g1: #eefbf4; --login-g3: #e8f4ee;
  --user-bubble-a: #14b886; --user-bubble-b: #0a9d6b;
}
html[data-theme="b"] {

  --brand: #4263eb; --brand-grad: #5c7cfa; --brand-deep: #364fc7; --brand-rgb: 66, 99, 235;
  --brand-weak: #edf2ff; --brand-weak2: #f5f8ff; --brand-border: #c5d0fa; --brand-soft: rgba(66, 99, 235, .14);
  --bg: #f4f6fb; --line: #e6eaf3;
  --chart-2: #0ea5a4;
  --login-g1: #eef2ff; --login-g3: #e5ebfd;
  --user-bubble-a: #5c7cfa; --user-bubble-b: #4263eb;
}
html[data-theme="c"] {

  --bg: #f3f5f8; --line: #e6eaf0;
  --sb-accent: #3ddc9f; --sb-accent-rgb: 61, 220, 159;
}

.theme-btn {
  width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, #e6e8ec); background: #fff; color: #4e5969; border-radius: 9px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.theme-btn:hover { color: var(--brand); border-color: var(--brand); }
.theme-btn:active { transform: scale(.92); }
.theme-pop {
  position: fixed; z-index: 99990; width: 268px; background: #fff; border: 1px solid #ebedf0; border-radius: 14px;
  box-shadow: 0 12px 36px rgba(31, 35, 41, .18); padding: 12px; display: none; transform-origin: top right;
}
.theme-pop.show { display: block; animation: theme-pop-in .16s ease; }
@keyframes theme-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.theme-pop-title { font-size: 13px; font-weight: 600; color: #1f2329; padding: 2px 4px 10px; }
.theme-opt {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin-bottom: 6px;
  border: 1.5px solid #ebedf0; background: #fff; border-radius: 11px; cursor: pointer; text-align: left;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.theme-opt:last-child { margin-bottom: 0; }
.theme-opt:hover { background: #f7f8fa; }
.theme-opt:active { transform: scale(.985); }
.theme-opt.on { border-color: var(--brand); background: rgba(var(--brand-rgb), .06); }
.theme-prev { position: relative; width: 52px; height: 38px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; border: 1px solid #e3e6ea; background: #f3f5f8; }
.theme-prev i { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; }
.theme-prev b { position: absolute; left: 22px; top: 8px; width: 24px; height: 6px; border-radius: 3px; }
.theme-prev::after { content: ''; position: absolute; left: 22px; top: 19px; width: 24px; height: 10px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px #e8ebef; }
.tp-a i { background: #fff; border-right: 1px solid #e3e6ea; } .tp-a b { background: #0a9d6b; }
.tp-b i { background: #fff; border-right: 1px solid #e3e6ea; } .tp-b b { background: #2f6fed; }
.tp-c i { background: #161e27; } .tp-c b { background: #3ddc9f; }
.theme-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #1f2329; display: flex; flex-direction: column; gap: 2px; }
.theme-name small { font-size: 11px; font-weight: 400; color: #8f959e; }
.theme-ck { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; line-height: 18px; text-align: center; opacity: 0; transform: scale(.6); transition: all .15s ease; flex: 0 0 auto; }
.theme-opt.on .theme-ck { opacity: 1; transform: none; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-weight: 600; }
strong, b { font-weight: 600; }
.kpi-val, .donut-num { font-weight: 600; }
.db-title { font-weight: 600; }
.ls-title { font-weight: 700; }
.rm-head h2 { font-weight: 600; }

.login-head { margin-bottom: 24px; }
.login-sub { margin-bottom: 22px; }
.login-head .login-sub { margin-bottom: 0; }

.pw-eye {
  position: absolute; right: 8px; width: 32px; height: 32px; border: none; background: transparent; color: #98a2b3;
  border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.pw-eye:hover { color: var(--brand); background: rgba(var(--brand-rgb), .08); }
input.has-eye { padding-right: 44px !important; }

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; background-color: #fff;
  background-image:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(31, 35, 41, .14), rgba(31, 35, 41, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(31, 35, 41, .14), rgba(31, 35, 41, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-wrap .table { min-width: 620px; }
.table-wrap .table th, .table-wrap .table td { white-space: nowrap; }
.table-wrap .table td.td-wrap, .table-wrap .table td.td-preview { white-space: normal; min-width: 140px; }

.av-fallback { background: linear-gradient(135deg, var(--brand-grad, var(--brand)), var(--brand-deep)) !important; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

.st-sec { font-size: 12px; font-weight: 600; color: var(--t-3, #8f959e); letter-spacing: 1px; margin: 22px 0 6px; text-transform: none; }
.st-sec:first-child { margin-top: 2px; }
.st-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--b-2, #f2f3f5); cursor: pointer; margin: 0 !important; }
.st-item:last-of-type { border-bottom: none; }
.st-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-txt b { font-size: 15px; font-weight: 500; color: var(--t-1, #1f2329); line-height: 1.4; }
.st-txt small { font-size: 12px; color: var(--t-3, #8f959e); line-height: 1.6; }
.st-item input[type="checkbox"] { display: none; }
.st-sw { width: 46px; height: 26px; border-radius: 13px; background: #d9dce1; position: relative; flex: 0 0 auto; transition: background .2s ease; }
.st-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.st-item input:checked + .st-sw { background: var(--brand); }
.st-item input:checked + .st-sw::after { transform: translateX(20px); }
.st-item input:disabled + .st-sw { opacity: .6; }
.st-field { margin: 14px 0 0; }
.st-field > label { display: block; font-size: 14px; font-weight: 500; color: var(--t-1, #1f2329); margin-bottom: 4px; }
.st-field > .st-help { font-size: 12px; color: var(--t-3, #8f959e); line-height: 1.6; margin-bottom: 8px; }

html .sidebar { background: #fff; border-right: 1px solid var(--b-1); box-shadow: none; }
html .side-brand {
  display: flex; align-items: center; gap: 12px; padding: 22px 18px 16px; background: transparent; color: var(--t-1);
  border-bottom: none; position: relative; overflow: visible;
}
html .side-brand::after { display: none; }
html .side-brand-mark, html .s5-logo-ico {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 600;
  background: linear-gradient(135deg, var(--brand-grad, var(--brand)) 0%, var(--brand-deep) 100%);
  box-shadow: 0 6px 14px -4px rgba(var(--brand-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html .side-brand-txt { min-width: 0; }
html .side-brand-logo { font-size: 15px; font-weight: 600; color: var(--t-1); letter-spacing: .2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .side-brand small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--t-3); opacity: 1; }
html .side-nav { padding: 4px 12px 12px; }
html .nav-group { padding: 18px 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; color: var(--t-4); }
html .nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; margin: 2px 0;
  border-radius: 12px; color: var(--t-2); font-size: 14.5px; font-weight: 500;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
html .nav-item:hover { background: #f5f7fa; color: var(--t-1); }
html .nav-item.active {
  background: rgba(var(--brand-rgb), .09); color: var(--brand-deep); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .12);
}
html .nav-item.active::before { display: none; }
html .nav-item .ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #98a2b3; transition: color .16s ease; }
html .nav-item:hover .ico { color: var(--t-2); }
html .nav-item.active .ico { color: var(--brand); }

html .side-bottom { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--b-1); background: #fff; }
html .side-me { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 14px; background: #f6f8fa; }
html .side-avatar, html .s5-me-av {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-grad, var(--brand)) 0%, var(--brand-deep) 100%); color: #fff; font-size: 14px; font-weight: 600; box-shadow: none;
  overflow: hidden;
}
html .side-info { min-width: 0; }
html .side-name { font-size: 13px; font-weight: 600; color: var(--t-1); line-height: 1.3; }
html .side-role { font-size: 11px; color: var(--t-3); margin-top: 1px; }
html .btn-logout, html .s5-logout.s5-logout-ico {
  width: 38px; height: 38px; flex: 0 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--b-1); border-radius: 12px; background: #fff; color: var(--t-3); cursor: pointer; margin: 0;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .1s ease;
}
html .btn-logout:hover, html .s5-logout.s5-logout-ico:hover { color: var(--c-danger); border-color: #f4c9c9; background: #fff6f6; }
html .btn-logout:active, html .s5-logout.s5-logout-ico:active { transform: scale(.93); }

html .s5-nav { background: #fff; border-right: 1px solid var(--b-1); color: var(--t-2); }
html .s5-logo { display: flex; align-items: center; gap: 12px; padding: 22px 18px 16px; border-bottom: none; }
html .s5-logo-txt { font-size: 15px; font-weight: 600; color: var(--t-1); line-height: 1.3; }
html .s5-logo-txt small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--t-3); }
html .s5-nav-group { padding: 18px 22px 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; color: var(--t-4); }
html .s5-nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 42px; margin: 2px 12px; padding: 0 12px; width: calc(100% - 24px); box-sizing: border-box;
  border-radius: 12px; color: var(--t-2); font-size: 14.5px; font-weight: 500;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
html .s5-nav-item:hover { background: #f5f7fa; color: var(--t-1); }
html .s5-nav-item.active { background: rgba(var(--brand-rgb), .09); color: var(--brand-deep); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .12); }
html .s5-nav-item.active::before { display: none; }
html .s5-nav-item .s5-ico { color: #98a2b3; transition: color .16s ease; }
html .s5-nav-item:hover .s5-ico { color: var(--t-2); }
html .s5-nav-item.active .s5-ico { color: var(--brand); }
html .s5-nav-foot { padding: 12px; border-top: 1px solid var(--b-1); background: #fff; }
html .s5-tool-btn { height: 34px; border-radius: 10px; background: #f6f8fa; border: 1px solid transparent; color: var(--t-2); font-size: 12.5px; font-weight: 500; }
html .s5-tool-btn:hover { background: #eef1f5; }
html .s5-me { display: flex; align-items: center; gap: 10px; padding: 7px 9px; margin-top: 8px; border-radius: 14px; background: #f6f8fa; }
html .s5-me-name { font-size: 13px; font-weight: 600; color: var(--t-1); }
html .s5-me .theme-btn { width: 32px; height: 32px; border-radius: 10px; }
html .s5-me .s5-logout-ico { width: 32px; height: 32px; border-radius: 10px; }

html .topbar, html .s5-mobilebar {
  background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--b-1); box-shadow: none;
}

@media (max-width: 900px) {
  html .s5-mobilebar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .97); }
}
html .topbar .page-title, html .s5-mobiletitle { font-size: 17px; font-weight: 600; color: var(--t-1); letter-spacing: 0; }
html .menu-toggle, html .s5-burger {
  position: relative; width: 38px; height: 38px; font-size: 0; border: 1px solid var(--b-1); border-radius: 12px; background: #fff; color: var(--t-2); cursor: pointer; padding: 0;
}
html .menu-toggle::before, html .s5-burger::before {
  content: ''; position: absolute; left: 11px; top: 14px; width: 14px; height: 2px; border-radius: 2px; background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}
html .topbar-link, html .theme-btn { border: 1px solid var(--b-1); border-radius: 12px; background: #fff; color: var(--t-2); font-weight: 500; }
html .topbar-link:hover, html .theme-btn:hover { color: var(--brand); border-color: rgba(var(--brand-rgb), .4); }
html .theme-btn { width: 38px; height: 38px; }

html .wb-list { background: #fff; }
html .wb-tabs {
  display: flex; gap: 4px; margin: 12px 14px 8px; padding: 4px; background: #eef1f5; border: none; border-radius: 14px;
}
html .wb-tabs .tab {
  flex: 1 1 0; height: 34px; padding: 0 6px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: none !important; border-radius: 11px; background: transparent !important; color: var(--t-3); font-size: 13px; font-weight: 500;
  box-shadow: none !important; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
html .wb-tabs .tab::after { display: none !important; }
html .wb-tabs .tab.active { background: #fff !important; color: var(--t-1); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06) !important; }
html .wb-counter {
  min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  background: #dfe4ea; color: #5b6572; font-size: 11px; font-weight: 600; line-height: 1;
}
html .wb-tabs .tab.active .wb-counter { background: rgba(var(--brand-rgb), .14); color: var(--brand-deep); }
html .wb-counter.hot, html .wb-tabs .tab.active .wb-counter.hot { background: var(--c-danger); color: #fff; }

.wb-search { position: relative; padding: 2px 14px 8px; }
.wb-search input {
  width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid transparent; border-radius: 12px; background: #f4f6f9; color: var(--t-1); font-size: 13.5px; outline: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>");
  background-repeat: no-repeat; background-position: 12px center;
}
.wb-search input:focus { background-color: #fff; border-color: rgba(var(--brand-rgb), .45); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }

html .wb-items { padding: 2px 10px 14px; }
html .item {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin: 3px 0;
  border: 1px solid transparent; border-radius: 16px; background: transparent; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
html .item:hover { background: #f6f8fa; }
html .item:active { transform: scale(.992); }
html .item.active { background: rgba(var(--brand-rgb), .07); border-color: rgba(var(--brand-rgb), .18); box-shadow: none; }
html .item.st-waiting, html .item.st-waiting.active { box-shadow: none; }
html .item.st-waiting .item-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 159, 10, .55); }
html .item-avatar {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--av1, #8fa0b8), var(--av2, #6b7c97)); color: #fff; font-size: 17px; font-weight: 600; overflow: hidden;
}
html .item-main { flex: 1 1 auto; min-width: 0; }
html .item-name { display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 15px; font-weight: 600; color: var(--t-1); line-height: 1.35; }
html .item-name-txt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .item.has-unread .item-name { color: var(--t-1); }
html .item-time { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--t-4); }
html .item.has-unread .item-time { color: var(--brand); font-weight: 500; }

html .item-last { margin-top: 3px; font-size: 13px; color: var(--t-3); line-height: 1.5; display: flex; align-items: center; gap: 8px; }
html .item-last-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .item.has-unread .item-last { color: var(--t-2); }
html .item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html .item-link, html .item-geo {
  display: inline-flex; align-items: center; max-width: 100%; height: 20px; padding: 0 8px; border-radius: 7px;
  background: #f1f4f8; color: var(--t-3); font-size: 11px; font-weight: 400; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html .item-geo { background: rgba(var(--brand-rgb), .08); color: var(--brand-deep); }

html .item-avatar-wrap { position: relative; flex: 0 0 auto; }
html .item .badge, html .item .wb-badge {
  position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 19px; height: 19px; padding: 0 5px; margin: 0; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; background: #fa5151; color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
  box-shadow: 0 1px 3px rgba(250, 81, 81, .35);
}
html .list-empty { padding: 56px 24px; text-align: center; color: var(--t-3); font-size: 13px; line-height: 1.9; }
html .list-empty::before {
  content: ''; display: block; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background-color: #f1f4f8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23b4bcc8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/></svg>");
  background-repeat: no-repeat; background-position: center;
}

.theme-pop { width: 280px; border-radius: 18px; padding: 14px; box-shadow: 0 18px 48px -12px rgba(16, 24, 40, .28); }
.theme-pop-title { font-size: 13px; font-weight: 600; color: #101828; padding: 0 4px 12px; }
.theme-opt { border-radius: 14px; padding: 10px 12px; border: 1.5px solid #eef0f4; }
.theme-opt.on { border-color: var(--brand); background: rgba(var(--brand-rgb), .05); }
.theme-prev { width: 56px; height: 40px; border-radius: 10px; }
.tp-a i { background: #fff; } .tp-a b { background: #0a9d6b; }
.tp-b i { background: #fff; } .tp-b b { background: #4263eb; }
.tp-c i { background: linear-gradient(180deg, #0c1424, #101b32); } .tp-c b { background: #3ddc9f; }

html[data-theme="c"] .sidebar, html[data-theme="c"] .s5-nav {
  background: linear-gradient(180deg, #0c1424 0%, #101b32 100%); border-right-color: #0a101d; color: #9fb0c8;
}
html[data-theme="c"] .side-brand-logo, html[data-theme="c"] .s5-logo-txt { color: #f1f5f9; }
html[data-theme="c"] .side-brand small, html[data-theme="c"] .s5-logo-txt small { color: #6f7f9a; }
html[data-theme="c"] .side-brand-mark, html[data-theme="c"] .s5-logo-ico {
  background: linear-gradient(135deg, #3ddc9f 0%, #0a9d6b 100%); box-shadow: 0 8px 18px -6px rgba(var(--sb-accent-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .4);
}
html[data-theme="c"] .nav-group, html[data-theme="c"] .s5-nav-group { color: #4d5b75; }
html[data-theme="c"] .nav-item, html[data-theme="c"] .s5-nav-item { color: #9fb0c8; }
html[data-theme="c"] .nav-item:hover, html[data-theme="c"] .s5-nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
html[data-theme="c"] .nav-item.active, html[data-theme="c"] .s5-nav-item.active {
  background: linear-gradient(90deg, rgba(var(--sb-accent-rgb), .22), rgba(var(--sb-accent-rgb), .07)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
html[data-theme="c"] .nav-item .ico, html[data-theme="c"] .s5-nav-item .s5-ico { color: #6f7f9a; }
html[data-theme="c"] .nav-item:hover .ico, html[data-theme="c"] .s5-nav-item:hover .s5-ico { color: #cbd5e1; }
html[data-theme="c"] .nav-item.active .ico, html[data-theme="c"] .s5-nav-item.active .s5-ico { color: var(--sb-accent); }
html[data-theme="c"] .side-bottom, html[data-theme="c"] .s5-nav-foot { background: transparent; border-top-color: rgba(255, 255, 255, .07); }
html[data-theme="c"] .side-me, html[data-theme="c"] .s5-me { background: rgba(255, 255, 255, .05); }
html[data-theme="c"] .side-name, html[data-theme="c"] .s5-me-name { color: #e8eef7; }
html[data-theme="c"] .side-role { color: #6f7f9a; }
html[data-theme="c"] .side-avatar, html[data-theme="c"] .s5-me-av { background: linear-gradient(135deg, #3ddc9f, #0a9d6b); }
html[data-theme="c"] .btn-logout, html[data-theme="c"] .s5-logout.s5-logout-ico,
html[data-theme="c"] .s5-me .theme-btn, html[data-theme="c"] .s5-tool-btn {
  background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); color: #9fb0c8;
}
html[data-theme="c"] .btn-logout:hover, html[data-theme="c"] .s5-logout.s5-logout-ico:hover { background: rgba(250, 81, 81, .14); border-color: rgba(250, 81, 81, .35); color: #ff8c8c; }
html[data-theme="c"] .s5-me .theme-btn:hover, html[data-theme="c"] .s5-tool-btn:hover { color: #fff; border-color: rgba(var(--sb-accent-rgb), .5); }

@media (prefers-reduced-motion: reduce) {
  html .item, html .nav-item, html .s5-nav-item, html .wb-tabs .tab { transition: none !important; }
}

.nt-mask {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(17, 21, 25, .48); display: flex; align-items: center; justify-content: center;
  padding: 18px; opacity: 0; transition: opacity .24s ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.nt-mask.show { opacity: 1; }
.nt-mask.bye { opacity: 0; }
.nt-modal {
  width: 100%; max-width: 430px; max-height: 84vh; overflow-y: auto;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .30);
  display: flex; flex-direction: column;
  transform: translateY(24px) scale(.965); opacity: 0;
  transition: transform .34s cubic-bezier(.21, 1.02, .55, 1.12), opacity .24s ease;
}
.nt-mask.show .nt-modal { transform: none; opacity: 1; }
.nt-mask.bye .nt-modal { transform: translateY(12px) scale(.97); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.nt-mhead {
  padding: 16px 18px 12px; display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: #1d2129;
}
.nt-mhead .nt-bell {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.nt-mcount { margin-left: auto; font-size: 12px; font-weight: 500; color: #8a949e; }
.nt-mbody { padding: 2px 18px 8px; overflow-y: auto; }
.nt-pop-item { padding: 10px 0 12px; opacity: 0; transform: translateY(10px); animation: ntItemIn .32s ease forwards; }
.nt-pop-item + .nt-pop-item { border-top: 1px dashed #e8ecef; }
.nt-pop-title { font-size: 15px; font-weight: 600; color: #1d2129; line-height: 1.45; }
.nt-pop-time { font-size: 12px; color: #a0a8b1; margin-top: 3px; }
.nt-pop-content { margin-top: 7px; font-size: 14px; line-height: 1.7; color: #3c434a; white-space: pre-wrap; word-break: break-word; }
.nt-mfoot { padding: 12px 18px 16px; }
.nt-mfoot .btn { width: 100%; height: 46px; font-size: 15px; border-radius: 12px; }
@keyframes ntItemIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nt-mask, .nt-modal, .nt-pop-item { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}