:root {
  --ui-bg: #edf3f9;
  --ui-panel: #ffffff;
  --ui-panel-soft: #f7faff;
  --ui-ink: #17263a;
  --ui-subtle: #5f7187;
  --ui-muted: #8797aa;
  --ui-line: #dce6f0;
  --ui-blue: #2477ed;
  --ui-cyan: #0eabb1;
  --ui-violet: #7759df;
  --ui-orange: #ed8135;
  --ui-pink: #e24d80;
  --ui-red: #e74d67;
  --ui-shadow: 0 14px 34px rgba(38, 65, 97, .08);
}

/* 用户协议更新卡片与阅读弹窗 */
.cer-agreement-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
  padding: 22px 24px;
  border: 1px solid #dce6f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(38, 65, 97, .08);
}
.cer-agreement-card.is-pending { border-color: #8bb7ff; }
.cer-agreement-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #2477ed; background: #edf4ff; font-size: 22px; flex: 0 0 auto; }
.cer-agreement-copy { min-width: 0; flex: 1; }
.cer-agreement-title { display: flex; align-items: center; gap: 10px; color: #17263a; font-size: 17px; }
.cer-agreement-title span { padding: 3px 8px; border-radius: 99px; color: #2477ed; background: #edf4ff; font-size: 11px; font-weight: 700; }
.cer-agreement-copy p { margin: 5px 0 3px; color: #5f7187; font-size: 13px; }
.cer-agreement-copy small { color: #8797aa; font-size: 12px; }
.cer-agreement-open, .cer-agreement-confirm { border: 0; border-radius: 999px; padding: 11px 22px; color: #fff; background: #2477ed; font-size: 14px; font-weight: 700; cursor: pointer; }
.cer-agreement-open:hover, .cer-agreement-confirm:hover { background: #1765d2; }
.cer-agreement-modal { position: fixed; z-index: 1000; inset: 0; display: none; align-items: center; justify-content: center; padding: 22px; }
.cer-agreement-modal.is-visible { display: flex; }
.cer-agreement-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .58); }
.cer-agreement-dialog { position: relative; z-index: 1; width: min(860px, 100%); max-height: min(800px, calc(100vh - 44px)); overflow: auto; padding: 34px 38px 28px; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(16, 24, 40, .24); }
.cer-agreement-dialog h2 { margin: 0 0 10px; color: #202124; font-size: 30px; }
.cer-agreement-close { position: absolute; top: 12px; right: 18px; border: 0; color: #697586; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; }
.cer-agreement-download { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 16px; }
.cer-agreement-document { height: min(480px, 55vh); overflow: auto; border: 1px solid #d6dce5; border-radius: 10px; padding: 16px; background: #eef1f5; }
.cer-agreement-hint { margin: 18px 0 14px; color: #4f5d70; font-size: 15px; }
.cer-agreement-actions { display: flex; gap: 14px; margin-top: 18px; }
.cer-agreement-actions button { flex: 1; min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.cer-agreement-cancel { border: 1px solid #2477ed; color: #2477ed; background: #fff; }
.cer-agreement-actions .cer-agreement-confirm { border: 1px solid #2477ed; }
.cer-agreement-lock { overflow: hidden; }
@media (max-width: 640px) {
  .cer-agreement-card { align-items: flex-start; padding: 16px; gap: 12px; }
  .cer-agreement-open { align-self: center; padding: 9px 13px; white-space: nowrap; font-size: 12px; }
  .cer-agreement-title { font-size: 15px; }
  .cer-agreement-dialog { padding: 28px 18px 18px; border-radius: 18px; }
  .cer-agreement-dialog h2 { font-size: 24px; }
}

html,
body,
body.cer-app.cer-ui-shell {
  min-width: 0;
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body.cer-app.cer-ui-shell,
body.wap_body.cer-app.cer-ui-shell {
  color: var(--ui-ink);
  background: var(--ui-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

body.cer-app.cer-ui-shell *,
body.wap_body.cer-app.cer-ui-shell * {
  box-sizing: border-box;
}

body.cer-app.cer-ui-shell a,
body.cer-app.cer-ui-shell button,
body.cer-app.cer-ui-shell input,
body.cer-app.cer-ui-shell select,
body.cer-app.cer-ui-shell textarea,
body.wap_body.cer-app.cer-ui-shell a,
body.wap_body.cer-app.cer-ui-shell button,
body.wap_body.cer-app.cer-ui-shell input,
body.wap_body.cer-app.cer-ui-shell select,
body.wap_body.cer-app.cer-ui-shell textarea {
  -webkit-tap-highlight-color: transparent;
}

body.cer-app.cer-ui-shell a,
body.wap_body.cer-app.cer-ui-shell a {
  color: var(--ui-blue);
}

body.cer-app.cer-ui-shell button,
body.cer-app.cer-ui-shell input[type="button"],
body.cer-app.cer-ui-shell input[type="submit"],
body.wap_body.cer-app.cer-ui-shell button,
body.wap_body.cer-app.cer-ui-shell input[type="button"],
body.wap_body.cer-app.cer-ui-shell input[type="submit"] {
  cursor: pointer;
}

body.cer-app.cer-ui-shell .cer-main {
  min-height: 100vh;
  margin-left: 238px;
  padding: 0 0 44px;
  background: var(--ui-bg);
}

body.cer-app.cer-ui-shell .cer-side {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 238px;
  flex-direction: column;
  padding: 22px 12px 16px;
  color: #fff;
  background: #0f141b;
  border-right: 1px solid #202b38;
}

body.cer-app.cer-ui-shell .cer-side-brand {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 9px 17px;
  border-bottom: 1px solid #283340;
  color: #f6f9fd !important;
  font-size: 16px;
  font-weight: 850;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-side-brand img {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  object-fit: cover;
}

body.cer-app.cer-ui-shell .cer-side-nav {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

body.cer-app.cer-ui-shell .cer-side-nav a {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 13px;
  padding: 0 12px;
  border-radius: 10px;
  color: #9ba9b9 !important;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}

body.cer-app.cer-ui-shell .cer-side-nav a i {
  width: 18px;
  color: #7f8b9b;
  font-size: 15px;
  text-align: center;
}

body.cer-app.cer-ui-shell .cer-side-nav a:hover,
body.cer-app.cer-ui-shell .cer-side-nav a.active {
  color: #fff !important;
  background: var(--ui-blue);
  box-shadow: 0 8px 18px rgba(36, 119, 237, .24);
}

body.cer-app.cer-ui-shell .cer-side-nav a:hover i,
body.cer-app.cer-ui-shell .cer-side-nav a.active i {
  color: #fff;
}

body.cer-app.cer-ui-shell .cer-side-bottom {
  display: grid;
  gap: 14px;
  margin-top: auto;
}

body.cer-app.cer-ui-shell .cer-side-add {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  color: #3da1ff !important;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-side-user {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 10px 8px;
  border-top: 1px solid #283340;
  color: #fff !important;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-side-user img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

body.cer-app.cer-ui-shell .cer-side-user span {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

body.cer-app.cer-ui-shell .cer-side-user strong,
body.cer-app.cer-ui-shell .cer-side-user em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-side-user strong {
  color: #f5f8fc;
  font-size: 12px;
}

body.cer-app.cer-ui-shell .cer-side-user em {
  color: #8290a0;
  font-size: 10px;
  font-style: normal;
}

body.cer-app.cer-ui-shell .cer-mobile-head {
  display: none;
}

body.cer-app.cer-ui-shell .footer {
  margin-left: 238px;
  padding: 24px 20px 30px;
  color: #8290a0;
  background: transparent;
  text-align: center;
}

body.cer-app.cer-ui-shell .footer .copyright {
  margin: 0;
  color: #8290a0;
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-default-tabbar-shell {
  display: none;
}

body.cer-app.cer-ui-shell .btn,
body.cer-app.cer-ui-shell button,
body.cer-app.cer-ui-shell input[type="button"],
body.cer-app.cer-ui-shell input[type="submit"] {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 800;
}

body.cer-app.cer-ui-shell .form-control,
body.cer-app.cer-ui-shell select,
body.cer-app.cer-ui-shell textarea {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  color: var(--ui-ink);
  background: #f8fafd;
  box-shadow: none;
}

body.cer-app.cer-ui-shell .form-control:focus,
body.cer-app.cer-ui-shell select:focus,
body.cer-app.cer-ui-shell textarea:focus {
  border-color: #83b4f3;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(36, 119, 237, .12);
}

body.cer-app.cer-ui-shell .panel {
  color: var(--ui-ink);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-panel);
  box-shadow: var(--ui-shadow);
}

body.cer-app.cer-ui-shell .panel-heading,
body.cer-app.cer-ui-shell .panel-body,
body.cer-app.cer-ui-shell .panel-footer {
  border-color: var(--ui-line);
  background: transparent;
}

body.cer-app.cer-ui-shell .panel-heading {
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .panel-body {
  color: var(--ui-subtle);
}

body.cer-app.cer-ui-shell .layui-layer,
body.cer-app.cer-ui-shell .layui-layer-dialog,
body.cer-app.cer-ui-shell .layui-layer-page,
body.cer-app.cer-ui-shell .nbaDialog {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(18, 36, 57, .22);
}

body.cer-app.cer-ui-shell .layui-layer-title {
  height: 48px;
  padding: 0 17px;
  color: var(--ui-ink);
  background: #f7faff;
  border-bottom: 1px solid var(--ui-line);
  font-size: 14px;
  font-weight: 850;
  line-height: 48px;
}

body.cer-app.cer-ui-shell .layui-layer-setwin {
  top: 16px;
  right: 14px;
}

body.cer-app.cer-ui-shell .layui-layer-setwin a {
  color: #556b83;
}

body.cer-app.cer-ui-shell .layui-layer-content {
  color: var(--ui-subtle);
}

body.cer-app.cer-ui-shell .layui-layer-btn {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--ui-line);
  background: #fbfcfe;
}

body.cer-app.cer-ui-shell .layui-layer-btn a {
  min-width: 72px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--ui-blue);
  font-weight: 800;
  line-height: 34px;
}

body.cer-app.cer-ui-shell .layui-layer-btn .layui-layer-btn1 {
  color: #52657c;
  background: #e9eff6;
}

/* Shared workspace blocks. */
body.cer-app.cer-ui-shell .cer-workspace,
body.cer-app.cer-ui-shell .cer-kami-workspace {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 0 52px;
}

body.cer-app.cer-ui-shell .cer-kami-workspace {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
}

body.cer-app.cer-ui-shell .cer-work-hero {
  position: relative;
  display: flex;
  min-height: 166px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  padding: 28px 30px;
  border-radius: 20px;
  color: #fff;
  background: #1b4d78;
  box-shadow: 0 18px 38px rgba(31, 75, 118, .16);
}

body.cer-app.cer-ui-shell .cer-work-hero::after {
  position: absolute;
  right: -35px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  border: 24px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  content: "";
}

body.cer-app.cer-ui-shell .cer-account-hero { background: #176b91; }
body.cer-app.cer-ui-shell .cer-tool-hero { background: #5d49a8; }
body.cer-app.cer-ui-shell .cer-kami-hero { background: #c66530; }
body.cer-app.cer-ui-shell .cer-agent-hero { background: #087e7d; }

body.cer-app.cer-ui-shell .cer-work-hero-copy,
body.cer-app.cer-ui-shell .cer-work-hero-actions,
body.cer-app.cer-ui-shell .cer-hero-badge,
body.cer-app.cer-ui-shell .cer-agent-domain,
body.cer-app.cer-ui-shell .cer-kami-count {
  position: relative;
  z-index: 1;
}

body.cer-app.cer-ui-shell .cer-work-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .75);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

body.cer-app.cer-ui-shell .cer-work-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
}

body.cer-app.cer-ui-shell .cer-work-hero p {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}

body.cer-app.cer-ui-shell .cer-work-hero-actions {
  display: flex;
  gap: 8px;
}

body.cer-app.cer-ui-shell .cer-primary-action,
body.cer-app.cer-ui-shell .cer-secondary-action,
body.cer-app.cer-ui-shell .cer-quiet-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-primary-action {
  color: #fff !important;
  background: var(--ui-blue);
  box-shadow: 0 8px 18px rgba(36, 119, 237, .22);
}

body.cer-app.cer-ui-shell .cer-secondary-action {
  color: #53677e !important;
  background: #e8eff6;
}

body.cer-app.cer-ui-shell .cer-quiet-action {
  color: #fff !important;
  background: rgba(255, 255, 255, .14);
}

body.cer-app.cer-ui-shell .cer-hero-badge,
body.cer-app.cer-ui-shell .cer-agent-domain {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 11px;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .1);
  font-size: 12px;
  font-weight: 800;
}

body.cer-app.cer-ui-shell .cer-agent-domain {
  display: grid;
  min-height: 0;
  gap: 3px;
  padding: 10px 13px;
}

body.cer-app.cer-ui-shell .cer-agent-domain > span {
  color: rgba(255, 255, 255, .63);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-agent-domain button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-notice-strip,
body.cer-app.cer-ui-shell .cer-agent-overview,
body.cer-app.cer-ui-shell .cer-section-card,
body.cer-app.cer-ui-shell .cer-work-card,
body.cer-app.cer-ui-shell .cer-kami-toolbar-shell {
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-panel);
  box-shadow: var(--ui-shadow);
}

body.cer-app.cer-ui-shell .cer-notice-strip,
body.cer-app.cer-ui-shell .cer-agent-overview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 17px;
}

body.cer-app.cer-ui-shell .cer-notice-strip {
  border-left: 4px solid var(--ui-violet);
}

body.cer-app.cer-ui-shell .cer-notice-strip > i {
  color: var(--ui-violet);
  font-size: 19px;
}

body.cer-app.cer-ui-shell .cer-notice-strip > div {
  display: grid;
  gap: 3px;
}

body.cer-app.cer-ui-shell .cer-notice-strip strong,
body.cer-app.cer-ui-shell .cer-agent-overview strong {
  color: var(--ui-ink);
  font-size: 13px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-notice-strip span,
body.cer-app.cer-ui-shell .cer-agent-overview p {
  margin: 0;
  color: var(--ui-subtle);
  font-size: 12px;
}

body.cer-app.cer-ui-shell .cer-agent-overview {
  justify-content: space-between;
}

body.cer-app.cer-ui-shell .cer-overview-copy {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.cer-app.cer-ui-shell .cer-overview-icon {
  color: var(--ui-cyan);
  font-size: 21px;
}

body.cer-app.cer-ui-shell .cer-overview-actions {
  display: flex;
  gap: 7px;
}

body.cer-app.cer-ui-shell .cer-overview-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-link-orange { color: #a34c15 !important; background: #fff0e5; }
body.cer-app.cer-ui-shell .cer-link-pink { color: #a33261 !important; background: #ffeaf2; }

body.cer-app.cer-ui-shell .cer-section-card {
  margin-top: 14px;
  padding: 20px;
}

body.cer-app.cer-ui-shell .cer-section-blue { border-top: 4px solid var(--ui-blue); }
body.cer-app.cer-ui-shell .cer-section-cyan { border-top: 4px solid var(--ui-cyan); }
body.cer-app.cer-ui-shell .cer-section-orange { border-top: 4px solid var(--ui-orange); }
body.cer-app.cer-ui-shell .cer-section-pink { border-top: 4px solid var(--ui-pink); }

body.cer-app.cer-ui-shell .cer-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

body.cer-app.cer-ui-shell .cer-section-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: var(--ui-blue);
}

body.cer-app.cer-ui-shell .cer-section-cyan .cer-section-icon { background: var(--ui-cyan); }
body.cer-app.cer-ui-shell .cer-section-orange .cer-section-icon { background: var(--ui-orange); }
body.cer-app.cer-ui-shell .cer-section-pink .cer-section-icon { background: var(--ui-pink); }

body.cer-app.cer-ui-shell .cer-section-heading h2 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-section-heading p {
  margin: 3px 0 0;
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 16px;
}

body.cer-app.cer-ui-shell .cer-field-wide,
body.cer-app.cer-ui-shell .cer-form-divider {
  grid-column: 1 / -1;
}

body.cer-app.cer-ui-shell .cer-field label,
body.cer-app.cer-ui-shell .cer-config-form > form .form-group > label,
body.cer-app.cer-ui-shell .cer-config-form .form-group > label {
  display: block;
  margin: 0 0 6px;
  color: #43566e !important;
  font-size: 11px;
  font-weight: 850;
  text-align: left;
}

body.cer-app.cer-ui-shell .cer-field small,
body.cer-app.cer-ui-shell .cer-config-form small {
  display: block;
  margin-top: 5px;
  color: var(--ui-muted);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-upload-field {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.cer-app.cer-ui-shell .cer-upload-field .form-control {
  min-width: 0;
  flex: 1;
}

body.cer-app.cer-ui-shell .cer-upload-field img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  object-fit: cover;
}

body.cer-app.cer-ui-shell .cer-upload-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--ui-orange);
  font-size: 11px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-permission-grid,
body.cer-app.cer-ui-shell .cer-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

body.cer-app.cer-ui-shell .cer-permission-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #f1d8e3;
  border-radius: 12px;
  background: #fff8fb;
}

body.cer-app.cer-ui-shell .cer-permission-item > span {
  color: #a63764;
  font-size: 12px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-permission-item label,
body.cer-app.cer-ui-shell .cer-check-grid label {
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* Account center. */
body.cer-app.cer-ui-shell .cer-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

body.cer-app.cer-ui-shell .cer-account-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}

body.cer-app.cer-ui-shell .cer-account-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.cer-app.cer-ui-shell .cer-account-avatar {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #fff;
  background: var(--ui-cyan);
  font-size: 19px;
}

body.cer-app.cer-ui-shell .cer-account-heading {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

body.cer-app.cer-ui-shell .cer-account-heading strong {
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-account-heading span {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-icon-action {
  display: inline-flex;
  width: 32px;
  height: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
}

body.cer-app.cer-ui-shell .cer-danger-action {
  color: var(--ui-red);
  background: #fff0f3;
}

body.cer-app.cer-ui-shell .cer-account-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #f5f8fc;
}

body.cer-app.cer-ui-shell .cer-account-identity .cer-label {
  flex: 0 0 auto;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-account-identity b {
  overflow: hidden;
  color: #40556f;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-account-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

body.cer-app.cer-ui-shell .cer-metric {
  display: grid;
  gap: 4px;
  padding: 9px;
  border-radius: 10px;
}

body.cer-app.cer-ui-shell .cer-metric span {
  color: #466079;
  font-size: 10px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-metric strong {
  color: var(--ui-ink);
  font-size: 19px;
  line-height: 1;
}

body.cer-app.cer-ui-shell .cer-metric-blue { background: #e8f2ff; }
body.cer-app.cer-ui-shell .cer-metric-cyan { background: #e4f8f6; }
body.cer-app.cer-ui-shell .cer-metric-purple { background: #f0ebff; }

body.cer-app.cer-ui-shell .cer-account-switches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

body.cer-app.cer-ui-shell .cer-switch-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  color: #536980;
  background: #fff;
  font-size: 10px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-switch-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-switch-item i {
  margin-right: 3px;
  color: var(--ui-cyan);
}

body.cer-app.cer-ui-shell .cer-account-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

body.cer-app.cer-ui-shell .cer-mini-action,
body.cer-app.cer-ui-shell .cer-icon-label {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-mini-blue,
body.cer-app.cer-ui-shell .cer-download-action { color: #1b63c1; background: #e8f2ff; }
body.cer-app.cer-ui-shell .cer-mini-cyan,
body.cer-app.cer-ui-shell .cer-file-action { color: #087b82; background: #e4f8f6; }
body.cer-app.cer-ui-shell .cer-mini-purple { color: #6047bb; background: #f0ebff; }
body.cer-app.cer-ui-shell .cer-mini-orange { color: #ad5a21; background: #fff0e3; }

body.cer-app.cer-ui-shell .cer-account-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #edf1f5;
}

body.cer-app.cer-ui-shell .cer-account-remark {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  color: var(--ui-subtle);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
}

body.cer-app.cer-ui-shell .cer-account-remark span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-account-downloads {
  display: flex;
  gap: 5px;
}

body.cer-app.cer-ui-shell .cer-empty-state {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ui-muted);
  font-size: 11px;
}

/* Agent editor. */
body.cer-app.cer-ui-shell .cer-agent-intro {
  display: none;
}

body.cer-app.cer-ui-shell .cer-agent-editor {
  margin-top: 14px;
  overflow: visible;
}

body.cer-app.cer-ui-shell .cer-agent-editor > .panel-body {
  padding: 0 20px 20px;
}

body.cer-app.cer-ui-shell .cer-agent-tabs {
  width: auto;
  margin: 0 -20px 18px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--ui-line);
  background: #f7faff;
}

body.cer-app.cer-ui-shell .cer-tabs-scroll {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

body.cer-app.cer-ui-shell .cer-tabs-scroll::-webkit-scrollbar {
  display: none;
}

body.cer-app.cer-ui-shell .cer-agent-tabs .bton {
  display: inline-flex;
  width: auto;
  min-width: max-content;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  color: #60748b;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  line-height: 34px;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-agent-tabs .bton.actived,
body.cer-app.cer-ui-shell .cer-agent-tabs .bton:hover {
  color: #fff;
  background: var(--ui-cyan);
  border-color: var(--ui-cyan);
}

body.cer-app.cer-ui-shell .cer-agent-tabs .cer-agent-add {
  color: #a9501a;
  background: #fff0e3;
  border-color: #f1bf91;
}

body.cer-app.cer-ui-shell .cer-agent-form > form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

body.cer-app.cer-ui-shell .cer-agent-form > form > .form-group {
  min-width: 0;
  margin: 0;
  padding: 6px 0;
}

body.cer-app.cer-ui-shell .cer-agent-form > form > .form-group > label,
body.cer-app.cer-ui-shell .cer-agent-form > form > .form-group > [class*="col-"] {
  width: 100%;
  float: none;
  padding: 0;
  text-align: left;
}

body.cer-app.cer-ui-shell .cer-agent-form > form > .form-group:nth-child(5),
body.cer-app.cer-ui-shell .cer-agent-form > form > #d-background_url,
body.cer-app.cer-ui-shell .cer-agent-form > form > #d-icon_url,
body.cer-app.cer-ui-shell .cer-agent-form > form > #d-app,
body.cer-app.cer-ui-shell .cer-agent-form > form > #d-notice,
body.cer-app.cer-ui-shell .cer-agent-form > form > #d-bottom_html,
body.cer-app.cer-ui-shell .cer-agent-form > form > .cer-form-divider,
body.cer-app.cer-ui-shell .cer-agent-form > form > .layer-footer {
  grid-column: 1 / -1;
}

body.cer-app.cer-ui-shell .cer-form-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px 0 3px;
  padding-top: 13px;
  border-top: 1px solid var(--ui-line);
}

body.cer-app.cer-ui-shell .cer-form-divider:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.cer-app.cer-ui-shell .cer-form-divider > i {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  background: var(--ui-cyan);
}

body.cer-app.cer-ui-shell .cer-form-divider:nth-of-type(2) > i { background: var(--ui-orange); }
body.cer-app.cer-ui-shell .cer-form-divider > span { display: grid; gap: 1px; }
body.cer-app.cer-ui-shell .cer-form-divider strong { color: var(--ui-ink); font-size: 12px; }
body.cer-app.cer-ui-shell .cer-form-divider small { color: var(--ui-muted); font-size: 10px; }

body.cer-app.cer-ui-shell .cer-agent-form > form > .layer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-line);
}

/* Kami table and paylist. */
body.cer-app.cer-ui-shell .cer-kami-count {
  display: grid;
  min-width: 100px;
  justify-items: center;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
}

body.cer-app.cer-ui-shell .cer-kami-count i { color: #ffe0a8; }
body.cer-app.cer-ui-shell .cer-kami-count span,
body.cer-app.cer-ui-shell .cer-kami-count small { color: rgba(255, 255, 255, .74); font-size: 10px; }
body.cer-app.cer-ui-shell .cer-kami-count strong { color: #fff; font-size: 22px; line-height: 1.1; }

body.cer-app.cer-ui-shell .cer-kami-toolbar-shell {
  margin-top: 14px;
  padding: 12px 14px;
}

body.cer-app.cer-ui-shell .cer-kami-workspace #item_info_toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0;
}

body.cer-app.cer-ui-shell .cer-kami-workspace #item_info_toolbar .btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-kami-workspace #btnAddDept { background: var(--ui-orange); }
body.cer-app.cer-ui-shell .cer-kami-workspace #btnEditDept { background: var(--ui-cyan); }
body.cer-app.cer-ui-shell .cer-kami-workspace .bootstrap-table { margin-top: 13px; }
body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-toolbar { margin-bottom: 9px; }
body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-toolbar .search input {
  min-height: 36px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  color: var(--ui-ink);
  background: #f8fafd;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-toolbar .columns .btn,
body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-toolbar .refresh {
  min-height: 36px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  color: #536980;
  background: #fff;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-container {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: #fff;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .table {
  min-width: 0;
  margin: 0;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .table > thead > tr > th {
  padding: 10px 8px;
  color: #526981;
  background: #f3f7fb;
  border-color: var(--ui-line);
  font-size: 11px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .table > tbody > tr > td {
  padding: 9px 8px;
  color: #334b65;
  background: #fff;
  border-color: #edf1f5;
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .table > tbody > tr:hover > td {
  background: #f7fbff;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .label {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 7px;
  color: #34506c;
  background: #eaf2fa;
  font-size: 10px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-pay-page {
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .cer-pay-page .inc-exp-container {
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}

body.cer-app.cer-ui-shell .cer-pay-page .inc-exp-container > div {
  border-color: var(--ui-line);
}

body.cer-app.cer-ui-shell .cer-pay-page h4,
body.cer-app.cer-ui-shell .cer-pay-page .memo,
body.cer-app.cer-ui-shell .cer-pay-page .balance {
  color: #40556e;
}

body.cer-app.cer-ui-shell .cer-pay-page .time {
  color: #8796a8;
}

body.cer-app.cer-ui-shell .cer-pay-page .list li {
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(38, 65, 97, .04);
}

/* Shared content primitives previously supplied by the disabled page skin. */
body.cer-app.cer-ui-shell .JabiSysBg {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: #fff;
}

body.cer-app.cer-ui-shell .JabiSysLeft {
  display: flex;
  min-width: 0;
  max-width: 75%;
  align-items: center;
  gap: 10px;
}

body.cer-app.cer-ui-shell .JabiSysIcon {
  display: block;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 11px;
  object-fit: cover;
}

body.cer-app.cer-ui-shell .JabiSysTxt,
body.cer-app.cer-ui-shell .JabiSysTxt1 {
  min-width: 0;
}

body.cer-app.cer-ui-shell .JabiSysTitle,
body.cer-app.cer-ui-shell .JabiSysDes,
body.cer-app.cer-ui-shell .JabiSysDes1 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .JabiSysTitle {
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .JabiSysDes,
body.cer-app.cer-ui-shell .JabiSysDes1 {
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .JabiSysRight,
body.cer-app.cer-ui-shell .JabiSysRight2 {
  display: inline-flex;
  min-width: 86px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--ui-blue);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

body.cer-app.cer-ui-shell .JabiSysRight2 {
  color: #087b82;
  background: #e4f8f6;
}

/* Device and signing pages. */
body.cer-app.cer-ui-shell .cer-work-page {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 52px;
}

body.cer-app.cer-ui-shell .cer-work-page .cer-work-toolbar,
body.cer-app.cer-ui-shell .cer-sign-console,
body.cer-app.cer-ui-shell .cer-app-item,
body.cer-app.cer-ui-shell .cer-device-card,
body.cer-app.cer-ui-shell .cer-user-page .cer-card {
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  color: var(--ui-ink);
  background: #fff;
  box-shadow: var(--ui-shadow);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-work-toolbar {
  border-top: 4px solid var(--ui-blue);
}

body.cer-app.cer-ui-shell .cer-sign-console {
  border-top: 4px solid var(--ui-violet);
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item {
  border-left: 4px solid var(--ui-cyan);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-toolbar-actions,
body.cer-app.cer-ui-shell .cer-sign-work .cer-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn,
body.cer-app.cer-ui-shell .cer-sign-work .custom-btn {
  display: inline-flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--ui-blue);
  font-size: 11px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-sign-work .custom-btn-success { background: var(--ui-cyan); }
body.cer-app.cer-ui-shell .cer-sign-work .custom-btn-info { background: var(--ui-violet); }
body.cer-app.cer-ui-shell .cer-sign-work .custom-btn-default { color: #52677f; background: #edf2f7; }

body.cer-app.cer-ui-shell .cer-sign-console-head strong,
body.cer-app.cer-ui-shell .cer-app-item .JabiSysTitle,
body.cer-app.cer-ui-shell .cer-device-card .JabiSysTitle {
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .cer-sign-toolbar-desc,
body.cer-app.cer-ui-shell .cer-app-item .JabiSysDes,
body.cer-app.cer-ui-shell .cer-device-card .JabiSysDes {
  color: var(--ui-subtle);
}

body.cer-app.cer-ui-shell .cer-sign-console .custom-input {
  min-height: 44px;
  color: #f6f9fd;
  background: #121923;
  border-color: #2d3b4b;
}

body.cer-app.cer-ui-shell .cer-sign-console .custom-input::placeholder {
  color: #9aaabd;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box,
body.cer-app.cer-ui-shell .cer-device-work .cer-filter-panel,
body.cer-app.cer-ui-shell .cer-warning-note {
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  color: var(--ui-subtle);
  background: #f8fafd;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-filter-panel label {
  color: #43576e;
}

body.cer-app.cer-ui-shell .cer-app-item .JabiSysIcon {
  border-radius: 11px;
}

body.cer-app.cer-ui-shell .cer-app-delete {
  border: 0;
  color: var(--ui-red);
  background: transparent;
}

body.cer-app.cer-ui-shell .cer-sign-install {
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--ui-blue);
}

body.cer-app.cer-ui-shell .cer-device-card-actions .btn,
body.cer-app.cer-ui-shell .cer-device-icon-btn {
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  color: #526980;
  background: #f7faff;
}

/* Device and signing cards use one predictable card contract. */
body.cer-app.cer-ui-shell .cer-device-list,
body.cer-app.cer-ui-shell .cer-app-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

body.cer-app.cer-ui-shell .cer-device-card,
body.cer-app.cer-ui-shell .cer-app-item {
  display: flex !important;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px;
}

body.cer-app.cer-ui-shell .cer-device-card .JabiSysLeft,
body.cer-app.cer-ui-shell .cer-app-item .JabiSysLeft {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  align-items: flex-start;
}

body.cer-app.cer-ui-shell .cer-device-card .JabiSysTxt,
body.cer-app.cer-ui-shell .cer-app-item .JabiSysTxt1 {
  width: 100%;
  min-width: 0;
}

body.cer-app.cer-ui-shell .cer-device-card .JabiSysTitle,
body.cer-app.cer-ui-shell .cer-app-item .JabiSysTitle {
  overflow-wrap: anywhere;
  white-space: normal;
}

body.cer-app.cer-ui-shell .cer-device-card .JabiSysDes,
body.cer-app.cer-ui-shell .cer-app-item .JabiSysDes {
  overflow-wrap: anywhere;
  line-height: 1.65;
  white-space: normal;
}

body.cer-app.cer-ui-shell .cer-device-card-actions,
body.cer-app.cer-ui-shell .cer-app-actions {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 12px;
}

body.cer-app.cer-ui-shell .cer-device-card-actions {
  grid-template-columns: minmax(0, 1fr);
}

body.cer-app.cer-ui-shell .cer-app-actions {
  grid-template-columns: minmax(0, 1fr);
}

body.cer-app.cer-ui-shell .cer-device-download,
body.cer-app.cer-ui-shell .cer-sign-install {
  display: flex !important;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 10px;
  box-sizing: border-box;
}

body.cer-app.cer-ui-shell .cer-device-small-actions {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
}

body.cer-app.cer-ui-shell .cer-device-icon-btn {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-device-icon-btn i {
  flex: 0 0 auto;
}

body.cer-app.cer-ui-shell .cer-device-icon-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.cer-app.cer-ui-shell .cer-device-danger {
  color: var(--ui-red) !important;
  background: #fff1f2 !important;
}

body.cer-app.cer-ui-shell .cer-device-remark {
  color: #ad5a21 !important;
  background: #fff0e3 !important;
}

body.cer-app.cer-ui-shell .cer-app-delete {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  min-height: 32px;
  padding: 0;
}

/* Profile page. */
body.cer-app.cer-ui-shell .cer-user-page {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 52px;
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .cer-user-page .cer-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-eyebrow {
  margin: 0 0 7px;
  color: #9aabc0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

body.cer-app.cer-ui-shell .cer-user-page h1,
body.cer-app.cer-ui-shell .cer-user-page h2 {
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .cer-user-page h1 {
  margin: 0;
  font-size: 29px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-page-head p,
body.cer-app.cer-ui-shell .cer-user-page .cer-card p {
  color: var(--ui-subtle);
}

body.cer-app.cer-ui-shell .cer-user-page .cer-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-card {
  padding: 20px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-card-head h2 {
  margin: 0;
  font-size: 17px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-card-head p {
  margin: 4px 0 0;
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-user-avatar img {
  width: 62px;
  height: 62px;
  border-radius: 17px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-profile h2 {
  margin: 0;
  font-size: 19px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-profile p {
  margin: 3px 0 7px;
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-user-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #087d83;
  background: #e4f8f6;
  font-size: 10px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-user-actions {
  display: flex;
  gap: 7px;
  margin-top: 18px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-user-actions .btn {
  color: #52677e;
  background: #edf2f7;
  border: 0;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-account-stats > div {
  padding: 13px;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: #f7faff;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-account-stats span {
  display: block;
  color: var(--ui-subtle);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-account-stats strong {
  display: block;
  margin-top: 5px;
  color: var(--ui-ink);
  font-size: 22px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-info-list {
  margin: 15px 0 0;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-info-list > div {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--ui-line);
}

body.cer-app.cer-ui-shell .cer-user-page .cer-info-list > div:last-child {
  border-bottom: 0;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-info-list dt {
  color: var(--ui-subtle);
  font-size: 12px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-info-list dd {
  margin: 0;
  color: var(--ui-ink);
  font-size: 12px;
}

body.cer-app.cer-ui-shell .cer-user-page .cer-logout-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.cer-app.cer-ui-shell .cer-user-page .btn-danger {
  border: 0;
  color: #fff;
  background: var(--ui-red);
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-side {
    display: none;
  }

  body.cer-app.cer-ui-shell .cer-main {
    min-height: 100vh;
    margin-left: 0;
    padding-bottom: 72px;
  }

  body.cer-app.cer-ui-shell .cer-mobile-head {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    color: var(--ui-ink);
    background: #fff;
    border-bottom: 1px solid var(--ui-line);
  }

  body.cer-app.cer-ui-shell .cer-mobile-head .cer-side-brand {
    min-height: 0;
    padding: 0;
    border: 0;
    color: var(--ui-ink) !important;
    font-size: 13px;
  }

  body.cer-app.cer-ui-shell .cer-mobile-head > strong {
    overflow: hidden;
    color: var(--ui-subtle);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.cer-app.cer-ui-shell .footer {
    display: none;
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell {
    display: block;
    height: 0;
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .cer-tabbar {
    position: fixed;
    z-index: 500;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    width: 100%;
    height: 62px;
    padding: 4px 4px max(4px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--ui-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 24px rgba(36, 65, 98, .1);
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .wap_footer-items {
    display: flex;
    min-width: 0;
    height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #7e8da0;
    text-decoration: none;
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .wap_footer-items i {
    color: #8f9daf;
    font-size: 18px;
    line-height: 20px;
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .wap_footer-items .navtxt {
    color: #687b91;
    font-size: 9px;
    font-weight: 850;
    line-height: 13px;
    white-space: nowrap;
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .wap_footer-items.active i,
  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .wap_footer-items.active .navtxt {
    color: var(--ui-blue);
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .cer-tabbar-add {
    height: 62px;
    margin-top: -20px;
  }

  body.cer-app.cer-ui-shell .cer-default-tabbar-shell .cer-tabbar-add > div:first-child {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 13px;
    color: #fff;
    background: var(--ui-blue);
    box-shadow: 0 8px 16px rgba(36, 119, 237, .26);
    font-size: 20px;
  }

  body.cer-app.cer-ui-shell .cer-workspace,
  body.cer-app.cer-ui-shell .cer-kami-workspace,
  body.cer-app.cer-ui-shell .cer-work-page,
  body.cer-app.cer-ui-shell .cer-user-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 9px 82px;
  }

  body.cer-app.cer-ui-shell .JabiSysBg {
    display: grid;
    gap: 8px;
    padding: 10px;
  }

  body.cer-app.cer-ui-shell .JabiSysLeft {
    max-width: 100%;
  }

  body.cer-app.cer-ui-shell .JabiSysRight,
  body.cer-app.cer-ui-shell .JabiSysRight2 {
    width: 100%;
    min-height: 34px;
  }

  body.cer-app.cer-ui-shell .cer-device-list,
  body.cer-app.cer-ui-shell .cer-app-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin-top: 9px;
  }

  body.cer-app.cer-ui-shell .cer-device-card,
  body.cer-app.cer-ui-shell .cer-app-item {
    width: 100%;
    padding: 12px;
    border-radius: 15px;
  }

  body.cer-app.cer-ui-shell .cer-device-card .JabiSysIcon,
  body.cer-app.cer-ui-shell .cer-app-item .JabiSysIcon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  body.cer-app.cer-ui-shell .cer-device-card .JabiSysTitle,
  body.cer-app.cer-ui-shell .cer-app-item .JabiSysTitle {
    font-size: 14px;
    line-height: 1.35;
  }

  body.cer-app.cer-ui-shell .cer-device-card .JabiSysDes,
  body.cer-app.cer-ui-shell .cer-app-item .JabiSysDes {
    font-size: 11px;
    line-height: 1.6;
  }

  body.cer-app.cer-ui-shell .cer-device-card-actions,
  body.cer-app.cer-ui-shell .cer-app-actions {
    margin-top: 10px;
  }

  body.cer-app.cer-ui-shell .cer-device-download,
  body.cer-app.cer-ui-shell .cer-sign-install {
    min-height: 39px;
    font-size: 11px;
  }

  body.cer-app.cer-ui-shell .cer-device-small-actions {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 5px;
  }

  body.cer-app.cer-ui-shell .cer-device-icon-btn {
    min-height: 34px;
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-app-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cer-app.cer-ui-shell .cer-app-delete {
    width: 34px;
  }

  body.cer-app.cer-ui-shell .cer-work-hero {
    min-height: 132px;
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 19px 16px;
    border-radius: 16px;
  }

  body.cer-app.cer-ui-shell .cer-work-hero h1 {
    font-size: 25px;
  }

  body.cer-app.cer-ui-shell .cer-work-hero p {
    margin-top: 6px;
    font-size: 11px;
  }

  body.cer-app.cer-ui-shell .cer-work-kicker {
    margin-bottom: 6px;
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-work-hero-actions {
    width: 100%;
  }

  body.cer-app.cer-ui-shell .cer-work-hero-actions > * {
    flex: 1;
  }

  body.cer-app.cer-ui-shell .cer-primary-action,
  body.cer-app.cer-ui-shell .cer-secondary-action,
  body.cer-app.cer-ui-shell .cer-quiet-action {
    min-height: 34px;
    padding: 0 9px;
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-agent-domain,
  body.cer-app.cer-ui-shell .cer-hero-badge {
    align-self: stretch;
    min-height: 34px;
  }

  body.cer-app.cer-ui-shell .cer-notice-strip,
  body.cer-app.cer-ui-shell .cer-agent-overview {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 9px;
    padding: 11px 12px;
    border-radius: 12px;
  }

  body.cer-app.cer-ui-shell .cer-notice-strip span,
  body.cer-app.cer-ui-shell .cer-agent-overview p {
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-overview-actions {
    width: 100%;
  }

  body.cer-app.cer-ui-shell .cer-overview-link {
    flex: 1;
    justify-content: center;
    min-height: 31px;
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-section-card {
    margin-top: 9px;
    padding: 13px;
    border-radius: 13px;
  }

  body.cer-app.cer-ui-shell .cer-section-heading {
    margin-bottom: 11px;
  }

  body.cer-app.cer-ui-shell .cer-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
  }

  body.cer-app.cer-ui-shell .cer-section-heading h2 {
    font-size: 14px;
  }

  body.cer-app.cer-ui-shell .cer-section-heading p {
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-form-grid,
  body.cer-app.cer-ui-shell .cer-permission-grid,
  body.cer-app.cer-ui-shell .cer-account-grid,
  body.cer-app.cer-ui-shell .cer-user-page .cer-user-grid {
    grid-template-columns: 1fr;
  }

  body.cer-app.cer-ui-shell .cer-field-wide {
    grid-column: auto;
  }

  body.cer-app.cer-ui-shell .cer-field .form-control,
  body.cer-app.cer-ui-shell .cer-config-form .form-group .form-control {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 11px;
  }

  body.cer-app.cer-ui-shell .cer-upload-field {
    gap: 5px;
  }

  body.cer-app.cer-ui-shell .cer-upload-field img {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  body.cer-app.cer-ui-shell .cer-upload-button {
    min-height: 36px;
    padding: 0 8px;
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-form-footer {
    margin-top: 10px;
  }

  body.cer-app.cer-ui-shell .cer-form-footer > * {
    flex: 1;
    min-height: 36px;
  }

  body.cer-app.cer-ui-shell .cer-agent-editor {
    margin-top: 9px;
    border-radius: 13px;
  }

  body.cer-app.cer-ui-shell .cer-agent-editor > .panel-body {
    padding: 0 13px 13px;
  }

  body.cer-app.cer-ui-shell .cer-agent-tabs {
    margin: 0 -13px 11px;
    padding: 9px 13px;
  }

  body.cer-app.cer-ui-shell .cer-agent-tabs .bton {
    min-height: 31px;
    padding: 0 9px;
    font-size: 10px;
    line-height: 31px;
  }

  body.cer-app.cer-ui-shell .cer-agent-form > form {
    display: block;
  }

  body.cer-app.cer-ui-shell .cer-agent-form > form > .form-group {
    padding: 4px 0;
  }

  body.cer-app.cer-ui-shell .cer-agent-form > form > .layer-footer {
    display: flex;
    gap: 7px;
  }

  body.cer-app.cer-ui-shell .cer-agent-form > form > .layer-footer .btn {
    flex: 1;
    min-height: 36px;
  }

  body.cer-app.cer-ui-shell .cer-kami-count {
    position: absolute;
    right: 13px;
    bottom: 13px;
    min-width: 70px;
    padding: 7px 9px;
  }

  body.cer-app.cer-ui-shell .cer-kami-count strong {
    font-size: 18px;
  }

  body.cer-app.cer-ui-shell .cer-kami-toolbar-shell {
    margin-top: 9px;
    padding: 8px;
    border-radius: 12px;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace #item_info_toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace #item_info_toolbar .btn {
    min-width: 0;
    min-height: 32px;
    justify-content: center;
    padding: 0 7px;
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-toolbar .search {
    width: 100%;
    margin: 0;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-toolbar .search input {
    width: 100%;
    min-height: 32px;
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace .fixed-table-container {
    overflow: visible;
    border: 0;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace .table {
    min-width: 0;
  }

  body.cer-app.cer-ui-shell .cer-account-card {
    padding: 13px;
    border-radius: 13px;
  }

  body.cer-app.cer-ui-shell .cer-account-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 16px;
  }

  body.cer-app.cer-ui-shell .cer-account-heading strong {
    font-size: 13px;
  }

  body.cer-app.cer-ui-shell .cer-account-heading span {
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-account-identity {
    margin-top: 10px;
  }

  body.cer-app.cer-ui-shell .cer-metric {
    padding: 8px;
  }

  body.cer-app.cer-ui-shell .cer-metric strong {
    font-size: 17px;
  }

  body.cer-app.cer-ui-shell .cer-switch-item {
    padding: 6px;
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-mini-action,
  body.cer-app.cer-ui-shell .cer-icon-label {
    min-height: 28px;
    padding: 0 7px;
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-page-head .btn {
    width: 100%;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-card {
    padding: 14px;
    border-radius: 13px;
  }

  body.cer-app.cer-ui-shell .cer-user-page h1 {
    font-size: 24px;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-account-stats {
    gap: 6px;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-account-stats > div {
    padding: 10px;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-account-stats strong {
    font-size: 18px;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-logout-card {
    align-items: flex-start;
    flex-direction: column;
  }

  body.cer-app.cer-ui-shell .cer-user-page .cer-logout-card .btn {
    width: 100%;
  }
}

/* Pages using the standalone public shell do not include the authenticated
   navigation, so keep them on the same new visual foundation. */
body.cer-public-shell {
  min-height: 100vh;
  color: var(--ui-ink);
  background:
    radial-gradient(circle at 9% 8%, rgba(36, 119, 237, .12), transparent 26rem),
    radial-gradient(circle at 92% 88%, rgba(226, 77, 128, .1), transparent 25rem),
    var(--ui-bg);
}

body.cer-public-shell .cer-brand-mark {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui-blue), var(--ui-violet));
  font-size: 22px;
  font-weight: 900;
}

body.cer-public-shell .cer-public-intro .cer-eyebrow {
  color: var(--ui-blue);
}

body.cer-public-shell .cer-public-primary:hover,
body.cer-public-shell .cer-public-submit:hover {
  color: #fff;
  background: #155fc4;
}

@media (max-width: 767px) {
  body.cer-public-shell .cer-public {
    width: min(100% - 22px, 520px);
    min-height: 100vh;
    padding: 24px 0 30px;
  }

  body.cer-public-shell .cer-public-intro {
    margin-bottom: 20px;
  }

  body.cer-public-shell .cer-public-intro h1 {
    margin-top: 15px;
    font-size: 40px;
  }

  body.cer-public-shell .cer-public-card {
    padding: 17px;
    border-radius: 14px;
  }
}

/* The sidenav include owns the document body on legacy pages. Scope these
   offsets to direct children so the default layout is never double-shifted. */
@media (min-width: 768px) {
  body.cer-app.cer-ui-shell > .cer-work-page,
  body.cer-app.cer-ui-shell > .cer-workspace,
  body.cer-app.cer-ui-shell > .cer-kami-workspace,
  body.cer-app.cer-ui-shell > .cer-user-page {
    width: min(1180px, calc(100% - 286px));
    margin-left: 260px;
    margin-right: 26px;
  }

  body.cer-app.cer-ui-shell > .cer-kami-workspace {
    width: min(1320px, calc(100% - 286px));
  }
}

/* Public shell compatibility for the existing template slots. The visual system
   stays new; these rules only give the shared slots a real layout. */
body.cer-app.cer-ui-shell .content-lg {
  display: block;
  min-height: 0;
}

body.cer-app.cer-ui-shell .content-sm {
  display: none;
}

body.cer-app.cer-ui-shell .content-lg .cer-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

/* Home workspace. */
body.cer-app.cer-ui-shell .cer-home {
  display: flex;
  width: min(1160px, calc(100% - 282px));
  min-height: 100vh;
  flex-direction: column;
  gap: 14px;
  margin-left: 238px;
  padding: 28px 22px 56px;
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .cer-mobile-hero {
  position: relative;
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 26px 30px;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(120deg, #176b91 0%, #2477ed 54%, #7659dc 100%);
  box-shadow: 0 16px 34px rgba(34, 83, 145, .18);
}

body.cer-app.cer-ui-shell .cer-mobile-hero::after {
  position: absolute;
  right: -74px;
  bottom: -115px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255, 255, 255, .05), 0 0 0 44px rgba(255, 255, 255, .04);
  content: "";
}

body.cer-app.cer-ui-shell .cer-mobile-hero > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 68%;
}

body.cer-app.cer-ui-shell .cer-mobile-hero p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
}

body.cer-app.cer-ui-shell .cer-mobile-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.08;
}

body.cer-app.cer-ui-shell .cer-mobile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

body.cer-app.cer-ui-shell .cer-mobile-tags span {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .1);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-mobile-cta {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  margin-top: 17px;
  padding: 0 15px;
  border-radius: 9px;
  color: #183a55 !important;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-hero-art {
  position: relative;
  z-index: 1;
  display: flex;
  width: 190px;
  height: 140px;
  flex: 0 0 190px;
  align-items: center;
  justify-content: center;
}

body.cer-app.cer-ui-shell .cer-hero-phone {
  position: absolute;
  width: 74px;
  height: 125px;
  border: 5px solid rgba(255, 255, 255, .88);
  border-radius: 19px;
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 18px 25px rgba(8, 39, 85, .18);
  transform: rotate(9deg) translate(21px, 3px);
}

body.cer-app.cer-ui-shell .cer-hero-phone::before {
  position: absolute;
  top: 9px;
  right: 21px;
  left: 21px;
  height: 4px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .75);
  content: "";
}

body.cer-app.cer-ui-shell .cer-hero-paper {
  position: absolute;
  width: 91px;
  height: 112px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 12px;
  background: rgba(255, 255, 255, .22);
  transform: rotate(-13deg) translate(-25px, 6px);
}

body.cer-app.cer-ui-shell .cer-hero-paper::before,
body.cer-app.cer-ui-shell .cer-hero-paper::after {
  position: absolute;
  right: 15px;
  left: 15px;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .62);
  content: "";
}

body.cer-app.cer-ui-shell .cer-hero-paper::before { top: 31px; }
body.cer-app.cer-ui-shell .cer-hero-paper::after { top: 49px; right: 28px; }

body.cer-app.cer-ui-shell .cer-hero-art > i {
  position: relative;
  z-index: 3;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 4px solid #2477ed;
  border-radius: 50%;
  color: #2477ed;
  background: #fff;
  font-size: 15px;
  transform: translate(20px, 37px);
}

body.cer-app.cer-ui-shell .cer-notice,
body.cer-app.cer-ui-shell .cer-welcome-card,
body.cer-app.cer-ui-shell .cer-metric-row,
body.cer-app.cer-ui-shell .cer-token-card {
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-panel);
  box-shadow: 0 8px 22px rgba(38, 65, 97, .045);
}

body.cer-app.cer-ui-shell .cer-notice {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 0 14px;
  color: var(--ui-subtle);
  font-size: 12px;
}

body.cer-app.cer-ui-shell .cer-notice > i,
body.cer-app.cer-ui-shell .cer-notice > strong {
  color: var(--ui-orange);
}

body.cer-app.cer-ui-shell .cer-notice-scroll {
  min-width: 0;
  flex: 1;
  height: 25px;
  overflow: hidden;
}

body.cer-app.cer-ui-shell .cer-notice .zx_contents {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 25px;
}

body.cer-app.cer-ui-shell .cer-notice .zx_contents li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-welcome-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 100px;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
}

body.cer-app.cer-ui-shell .cer-user-face {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 3px solid #e2efff;
  border-radius: 16px;
  background: #eaf3ff;
}

body.cer-app.cer-ui-shell .cer-user-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cer-app.cer-ui-shell .cer-welcome-card p {
  margin: 0 0 3px;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

body.cer-app.cer-ui-shell .cer-welcome-card h2 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 22px;
  line-height: 1.15;
}

body.cer-app.cer-ui-shell .cer-welcome-card span {
  display: block;
  margin-top: 6px;
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-charge-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 9px;
  color: #fff !important;
  background: var(--ui-orange);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 9px;
}

body.cer-app.cer-ui-shell .cer-metric-row > div {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 0;
  gap: 0 9px;
  padding: 8px 17px;
  border-right: 1px solid var(--ui-line);
}

body.cer-app.cer-ui-shell .cer-metric-row > div:last-child {
  border-right: 0;
}

body.cer-app.cer-ui-shell .cer-metric-row span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--ui-blue);
  background: #e8f2ff;
}

body.cer-app.cer-ui-shell .cer-metric-row > div:nth-child(2) span {
  color: var(--ui-orange);
  background: #fff0df;
}

body.cer-app.cer-ui-shell .cer-metric-row > div:nth-child(3) span {
  color: var(--ui-violet);
  background: #f0ebff;
}

body.cer-app.cer-ui-shell .cer-metric-row strong {
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 19px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-metric-row p {
  margin: 4px 0 0;
  color: var(--ui-subtle);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-token-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 17px;
}

body.cer-app.cer-ui-shell .cer-token-card strong {
  color: var(--ui-ink);
  font-size: 12px;
}

body.cer-app.cer-ui-shell .cer-token-card p {
  display: inline;
  margin: 0 0 0 8px;
  color: var(--ui-muted);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-token-actions {
  display: flex;
  min-width: 0;
  gap: 6px;
}

body.cer-app.cer-ui-shell .cer-token-actions #c-ktoken {
  width: min(320px, 30vw);
  min-width: 0;
  overflow: hidden;
  color: var(--ui-cyan) !important;
  background: #f3fbfb !important;
  border-color: #c8e9e6 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-token-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  background: var(--ui-cyan) !important;
  border-color: var(--ui-cyan) !important;
}

body.cer-app.cer-ui-shell .cer-cashback {
  padding: 10px 14px;
  border: 1px solid #cbe8bd;
  border-radius: 11px;
  color: #4e7b37;
  background: #f1faec;
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-core-section h3 {
  margin: 2px 0 8px;
  color: var(--ui-ink);
  font-size: 15px;
}

body.cer-app.cer-ui-shell .cer-core-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

body.cer-app.cer-ui-shell .cer-core-grid > a,
body.cer-app.cer-ui-shell .cer-resource-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  color: var(--ui-ink) !important;
  background: var(--ui-panel);
  box-shadow: 0 7px 17px rgba(38, 65, 97, .04);
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-core-grid > a {
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 68px;
  gap: 2px 8px;
  padding: 10px 11px;
}

body.cer-app.cer-ui-shell .cer-core-grid > a:hover,
body.cer-app.cer-ui-shell .cer-resource-card:hover {
  border-color: #a9cafa;
  box-shadow: 0 10px 20px rgba(36, 119, 237, .1);
}

body.cer-app.cer-ui-shell .cer-core-grid > a i {
  display: inline-flex;
  width: 29px;
  height: 29px;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--ui-blue);
  background: #e8f2ff;
}

body.cer-app.cer-ui-shell .cer-core-grid > a:nth-child(2n) i {
  color: var(--ui-orange);
  background: #fff0df;
}

body.cer-app.cer-ui-shell .cer-core-grid > a:nth-child(3n) i {
  color: var(--ui-cyan);
  background: #e4f8f6;
}

body.cer-app.cer-ui-shell .cer-core-grid > a strong {
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-core-grid > a span {
  overflow: hidden;
  color: var(--ui-subtle);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

body.cer-app.cer-ui-shell .cer-resource-card {
  min-height: 78px;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
}

body.cer-app.cer-ui-shell .cer-resource-card.cer-resource-large {
  grid-column: span 2;
}

body.cer-app.cer-ui-shell .cer-resource-card > i {
  color: var(--ui-violet);
  font-size: 17px;
}

body.cer-app.cer-ui-shell .cer-resource-card small {
  color: var(--ui-orange);
  font-size: 9px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-resource-card strong {
  color: var(--ui-ink);
  font-size: 13px;
}

body.cer-app.cer-ui-shell .cer-resource-card span {
  color: var(--ui-subtle);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-resource-card em {
  width: fit-content;
  margin-top: 3px;
  padding: 4px 8px;
  border-radius: 7px;
  color: #fff;
  background: var(--ui-blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

/* Prevent a cached legacy home banner from becoming a full-page image while
   the browser is refreshing the new home template. */
body.cer-app.cer-ui-shell .cer-home .top-img {
  display: none !important;
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .content-lg {
    display: none !important;
  }

  body.cer-app.cer-ui-shell .content-sm {
    display: block !important;
  }

  body.cer-app.cer-ui-shell .cer-home {
    width: 100%;
    min-height: 0;
    gap: 9px;
    margin: 0;
    padding: 9px 9px 86px;
  }

  body.cer-app.cer-ui-shell .cer-mobile-hero {
    min-height: 270px;
    align-items: flex-start;
    padding: 24px 20px;
    border-radius: 20px;
  }

  body.cer-app.cer-ui-shell .cer-mobile-hero > div:first-child {
    max-width: 78%;
  }

  body.cer-app.cer-ui-shell .cer-mobile-hero h1 {
    font-size: 29px;
  }

  body.cer-app.cer-ui-shell .cer-hero-art {
    position: absolute;
    right: -19px;
    bottom: 0;
    transform: scale(.8);
    transform-origin: right bottom;
  }

  body.cer-app.cer-ui-shell .cer-notice {
    min-height: 38px;
    padding: 0 11px;
    font-size: 11px;
  }

  body.cer-app.cer-ui-shell .cer-welcome-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 82px;
    gap: 10px;
    padding: 12px;
  }

  body.cer-app.cer-ui-shell .cer-user-face {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  body.cer-app.cer-ui-shell .cer-welcome-card h2 {
    font-size: 18px;
  }

  body.cer-app.cer-ui-shell .cer-welcome-card span {
    margin-top: 4px;
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-charge-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 34px;
  }

  body.cer-app.cer-ui-shell .cer-metric-row {
    gap: 4px;
    padding: 6px;
  }

  body.cer-app.cer-ui-shell .cer-metric-row > div {
    display: flex;
    min-height: 58px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    border-right: 0;
  }

  body.cer-app.cer-ui-shell .cer-metric-row span {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }

  body.cer-app.cer-ui-shell .cer-metric-row strong {
    max-width: 100%;
    font-size: 15px;
  }

  body.cer-app.cer-ui-shell .cer-metric-row p {
    margin: 0;
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-token-card {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 11px;
  }

  body.cer-app.cer-ui-shell .cer-token-card p {
    display: block;
    margin: 3px 0 0;
  }

  body.cer-app.cer-ui-shell .cer-token-actions {
    width: 100%;
  }

  body.cer-app.cer-ui-shell .cer-token-actions #c-ktoken {
    flex: 1;
    width: auto;
  }

  body.cer-app.cer-ui-shell .cer-core-section h3 {
    font-size: 14px;
  }

  body.cer-app.cer-ui-shell .cer-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body.cer-app.cer-ui-shell .cer-core-grid > a {
    min-height: 61px;
    padding: 8px;
  }

  body.cer-app.cer-ui-shell .cer-core-grid > a strong {
    font-size: 11px;
  }

  body.cer-app.cer-ui-shell .cer-core-grid > a span {
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body.cer-app.cer-ui-shell .cer-resource-card,
  body.cer-app.cer-ui-shell .cer-resource-card.cer-resource-large {
    grid-column: auto;
    min-height: 74px;
    padding: 10px;
  }

  body.cer-app.cer-ui-shell .cer-resource-card.cer-resource-large {
    grid-column: 1 / -1;
  }

  body.cer-app.cer-ui-shell .cer-resource-card strong {
    font-size: 12px;
  }

  body.cer-app.cer-ui-shell .cer-resource-card span {
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .content-sm .wap_footer.cer-tabbar {
    position: fixed;
    z-index: 500;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    width: 100%;
    min-height: 64px;
    padding: 5px 4px max(5px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--ui-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 24px rgba(36, 65, 98, .1);
  }

  body.cer-app.cer-ui-shell .content-sm .wap_footer-items {
    display: flex;
    min-width: 0;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    color: #8191a3;
    text-decoration: none;
  }

  body.cer-app.cer-ui-shell .content-sm .wap_footer-items i {
    color: #8a9aac;
    font-size: 18px;
    line-height: 20px;
  }

  body.cer-app.cer-ui-shell .content-sm .wap_footer-items .navtxt {
    overflow: hidden;
    color: #687b91;
    font-size: 9px;
    font-weight: 850;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.cer-app.cer-ui-shell .content-sm .wap_footer-items.active i,
  body.cer-app.cer-ui-shell .content-sm .wap_footer-items.active .navtxt {
    color: var(--ui-blue);
  }

  body.cer-app.cer-ui-shell .content-sm .wap_footer-items.cer-tabbar-add {
    height: 62px;
    margin-top: -19px;
  }

  body.cer-app.cer-ui-shell .content-sm .cer-tabbar-add > div:first-child {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 13px;
    color: #fff;
    background: var(--ui-blue);
    box-shadow: 0 8px 16px rgba(36, 119, 237, .26);
    font-size: 18px;
  }
}

/* Compact shell pass: legacy navigation slots must never create a blank
   spacer above the actual page content. */
body.cer-app.cer-ui-shell.wap_body,
body.wap_body.cer-app.cer-ui-shell {
  margin: 0 !important;
  padding: 0 !important;
}

body.cer-app.cer-ui-shell > .content-lg,
body.cer-app.cer-ui-shell > .content-sm {
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cer-app.cer-ui-shell > .content-lg .cer-side,
body.cer-app.cer-ui-shell > .content-sm .wap_footer {
  position: fixed !important;
}

body.cer-app.cer-ui-shell .cer-work-page,
body.cer-app.cer-ui-shell .cer-workspace,
body.cer-app.cer-ui-shell .cer-kami-workspace,
body.cer-app.cer-ui-shell .cer-user-page {
  margin-top: 0 !important;
}

/* Device page: keep the controls and the count row in one compact toolbar. */
body.cer-app.cer-ui-shell .cer-device-work .cer-work-toolbar {
  display: grid;
  gap: 10px;
  padding: 12px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(1) {
  background: var(--ui-blue);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(2) {
  background: var(--ui-cyan);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(3) {
  background: var(--ui-violet);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(4) {
  background: var(--ui-orange);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn {
  border: 0;
  box-shadow: 0 6px 14px rgba(36, 65, 98, .12);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:hover,
body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:focus {
  color: #fff;
  filter: brightness(1.04);
  box-shadow: 0 8px 18px rgba(36, 65, 98, .18);
  transform: translateY(-1px);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 11px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box > div:first-child {
  min-width: 0;
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box > div:first-child strong {
  margin: 0 5px 0 4px;
  color: var(--ui-ink);
  font-size: 12px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box > div:first-child span {
  color: var(--ui-muted);
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action {
  display: flex;
  min-width: 174px;
  gap: 6px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action .form-control {
  width: 84px;
  min-height: 34px;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action .btn {
  min-height: 34px;
  padding: 0 13px;
}

body.cer-app.cer-ui-shell .cer-work-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-work-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.cer-app.cer-ui-shell .cer-work-stats i {
  color: var(--ui-blue);
}

body.cer-app.cer-ui-shell .cer-work-stats b {
  color: var(--ui-ink);
  font-size: 13px;
}

body.cer-app.cer-ui-shell .cer-device-loading {
  min-height: 32px;
  margin: 8px 0 0;
  padding: 0 10px;
  color: var(--ui-muted);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-device-list,
body.cer-app.cer-ui-shell .cer-app-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

body.cer-app.cer-ui-shell .cer-device-card,
body.cer-app.cer-ui-shell .cer-app-item {
  padding: 12px;
}

/* Put the main certificate action beside the device information. The
   secondary actions remain in a compact full-width row underneath. */
body.cer-app.cer-ui-shell .cer-device-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-auto-rows: auto;
  align-items: start;
  gap: 8px 9px;
}

body.cer-app.cer-ui-shell .cer-device-card .JabiSysLeft {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  align-self: start;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-card-actions {
  display: contents !important;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-download {
  grid-column: 2;
  grid-row: 1;
  width: 44px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border-radius: 11px;
  font-size: 0;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-download i {
  font-size: 15px;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-small-actions {
  grid-column: 1 / -1;
  grid-row: 2;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-icon-btn {
  min-height: 32px;
}

body.cer-app.cer-ui-shell .cer-device-remark-line {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 25px;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 0 9px;
  border-radius: 999px;
  color: #9b4f18;
  background: #fff3e8;
  font-size: 10px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-device-remark-line i {
  flex: 0 0 auto;
  color: var(--ui-orange);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-device-remark-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-device-loading {
  display: none !important;
  min-height: 0;
  margin: 0;
  padding: 0;
}

body.cer-app.cer-ui-shell .cer-device-loading.is-visible {
  display: flex !important;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  margin: 7px 0 0;
  padding: 0 3px;
  color: var(--ui-muted);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-load-more {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0;
  padding: 0 4px;
}

body.cer-app.cer-ui-shell .cer-load-more > div,
body.cer-app.cer-ui-shell .cer-load-more > a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

body.cer-app.cer-ui-shell .cer-more-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  color: var(--ui-subtle) !important;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 5px 14px rgba(38, 65, 97, .05);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .cer-more-link i {
  color: var(--ui-blue);
  font-size: 13px;
}

body.cer-app.cer-ui-shell .cer-more-load {
  color: #fff !important;
  background: var(--ui-blue);
  border-color: var(--ui-blue);
  box-shadow: 0 7px 16px rgba(36, 119, 237, .18);
}

body.cer-app.cer-ui-shell .cer-more-load i {
  color: #fff;
}

body.cer-app.cer-ui-shell .cer-more-empty {
  color: var(--ui-muted) !important;
  background: rgba(255, 255, 255, .5);
  box-shadow: none;
}

body.cer-app.cer-ui-shell .cer-more-empty i {
  color: #8fa1b4;
}

/* Sign page: the heading, history and actions share one toolbar row. */
body.cer-app.cer-ui-shell .cer-sign-console {
  padding: 12px;
}

body.cer-app.cer-ui-shell .cer-sign-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

body.cer-app.cer-ui-shell .cer-sign-console-head > div:first-child {
  min-width: 0;
}

body.cer-app.cer-ui-shell .cer-sign-console-head strong {
  display: block;
  font-size: 16px;
  line-height: 1.25;
}

body.cer-app.cer-ui-shell .cer-sign-console-head .cer-toolbar-actions {
  flex: 0 0 auto;
  align-items: center;
}

body.cer-app.cer-ui-shell .cer-sign-console .custom-input {
  min-height: 40px;
  color: var(--ui-ink);
  background: #f7faff;
  border: 1px solid var(--ui-line);
}

body.cer-app.cer-ui-shell .cer-sign-console .custom-input::placeholder {
  color: var(--ui-muted);
}

body.cer-app.cer-ui-shell .cer-kami-toolbar-shell {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.cer-app.cer-ui-shell .cer-kami-workspace #item_info_toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.cer-app.cer-ui-shell .cer-kami-workspace .bootstrap-table {
  margin-top: 7px;
}

@media (min-width: 768px) and (max-width: 1100px) {
  body.cer-app.cer-ui-shell .cer-device-list,
  body.cer-app.cer-ui-shell .cer-app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-work-page,
  body.cer-app.cer-ui-shell .cer-workspace,
  body.cer-app.cer-ui-shell .cer-kami-workspace,
  body.cer-app.cer-ui-shell .cer-user-page {
    padding-top: 6px !important;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-work-toolbar {
    gap: 8px;
    padding: 9px;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-toolbar-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn {
    min-height: 34px;
    padding: 0 4px;
    font-size: 0;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn i {
    font-size: 14px;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px 9px;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box > div:first-child {
    line-height: 1.35;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-box > div:first-child span {
    display: block;
    margin: 2px 0 0 21px;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action {
    width: 100%;
    min-width: 0;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action .form-control {
    flex: 1;
    width: auto;
  }

  body.cer-app.cer-ui-shell .cer-work-stats {
    gap: 7px;
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-work-stats b {
    font-size: 12px;
  }

  body.cer-app.cer-ui-shell .cer-device-loading {
    min-height: 25px;
    margin-top: 6px;
    padding: 0 3px;
  }

  body.cer-app.cer-ui-shell .cer-device-list,
  body.cer-app.cer-ui-shell .cer-app-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 7px;
  }

  body.cer-app.cer-ui-shell .cer-device-card,
  body.cer-app.cer-ui-shell .cer-app-item {
    padding: 10px;
    border-radius: 13px;
  }

  body.cer-app.cer-ui-shell .cer-app-actions {
    margin-top: 8px;
  }

  body.cer-app.cer-ui-shell .cer-sign-install {
    min-height: 35px;
  }

  body.cer-app.cer-ui-shell .cer-device-card {
    grid-template-columns: minmax(0, 1fr) 39px;
    gap: 7px 7px;
  }

  body.cer-app.cer-ui-shell .cer-device-card .cer-device-download {
    width: 39px;
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
  }

  body.cer-app.cer-ui-shell .cer-device-card .cer-device-download i {
    font-size: 14px;
  }

  body.cer-app.cer-ui-shell .cer-device-small-actions {
    gap: 4px;
  }

  body.cer-app.cer-ui-shell .cer-device-icon-btn {
    min-height: 31px;
    padding: 0 3px;
    font-size: 0;
  }

  body.cer-app.cer-ui-shell .cer-device-icon-btn i {
    font-size: 13px;
  }

  body.cer-app.cer-ui-shell .cer-device-remark-line {
    min-height: 22px;
    margin-top: 5px;
    padding: 0 7px;
    font-size: 9px;
  }

  body.cer-app.cer-ui-shell .cer-sign-console {
    padding: 10px;
  }

  body.cer-app.cer-ui-shell .cer-sign-console-head {
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
  }

  body.cer-app.cer-ui-shell .cer-sign-console-head strong {
    font-size: 15px;
  }

  body.cer-app.cer-ui-shell .cer-sign-console-head .cer-toolbar-actions {
    gap: 4px;
  }

  body.cer-app.cer-ui-shell .cer-sign-console-head .custom-btn {
    min-height: 34px;
    margin: 0;
    padding: 0 8px;
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-sign-console-head .cer-sign-history {
    width: 34px;
    padding: 0;
  }

  body.cer-app.cer-ui-shell .cer-sign-console .custom-input {
    min-height: 38px;
    font-size: 12px;
  }

  body.cer-app.cer-ui-shell .cer-kami-toolbar-shell {
    margin-top: 7px;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace #item_info_toolbar {
    gap: 5px;
  }

  body.cer-app.cer-ui-shell .cer-kami-workspace #item_info_toolbar .btn {
    min-height: 31px;
  }

  body.cer-app.cer-ui-shell .cer-load-more {
    min-height: 36px;
    margin-top: 8px;
  }

  body.cer-app.cer-ui-shell .cer-more-link {
    min-height: 31px;
    padding: 0 11px;
    font-size: 10px;
  }
}

/* Signing cards use the same compact action rail as device cards. */
body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-auto-rows: auto;
  align-items: start;
  gap: 8px 9px;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item .JabiSysLeft {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  align-self: start;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-actions {
  display: contents !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install {
  display: inline-flex !important;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0;
  border-radius: 11px;
  font-size: 0;
  line-height: 1 !important;
  text-align: center;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install i {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  line-height: 1 !important;
  font-size: 15px;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete {
  top: 9px;
  right: 9px;
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item {
    grid-template-columns: minmax(0, 1fr) 39px;
    gap: 7px;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install {
    align-self: center;
    width: 39px;
    height: 39px;
    min-height: 39px;
    border-radius: 10px;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install i {
    font-size: 14px;
  }
}

/* Final signing-card positioning: keep actions anchored to the card itself. */
body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item {
  position: relative !important;
  display: block !important;
  min-height: 78px;
  padding-right: 70px !important;
  box-sizing: border-box;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item .JabiSysLeft {
  display: flex !important;
  width: 100%;
  max-width: none !important;
  min-width: 0;
  align-items: center;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-actions {
  position: static !important;
  display: contents !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  z-index: 3;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box;
  line-height: 1 !important;
  text-align: center !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install i {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install span {
  display: none !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 4;
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  line-height: 1 !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete i {
  margin: 0 !important;
  line-height: 1 !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item:has(.cer-app-delete) {
  min-height: 78px;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item:has(.cer-app-delete) .cer-sign-install {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item {
    min-height: 70px;
    padding-right: 55px !important;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install {
    right: 9px !important;
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    min-height: 39px !important;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-sign-install i {
    font-size: 14px !important;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete {
    top: 6px !important;
    right: 6px !important;
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item:has(.cer-app-delete) {
    min-height: 70px;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-app-item:has(.cer-app-delete) .cer-sign-install {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* Device page final polish: home-style action cards and perfectly centered icon buttons. */
body.cer-app.cer-ui-shell .cer-device-work .cer-work-toolbar {
  border-top: 0 !important;
  padding: 13px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .94) !important;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-toolbar-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn {
  position: relative;
  display: grid !important;
  min-height: 70px !important;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center !important;
  justify-content: start !important;
  gap: 11px !important;
  overflow: hidden;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  color: var(--ui-ink) !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(48, 79, 118, .08) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn::after {
  content: "";
  display: block;
  min-width: 0;
  color: var(--ui-subtle);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(1)::after { content: "新增 UDID"; }
body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(2)::after { content: "导入证书"; }
body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(3)::after { content: "快速筛选"; }
body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(4)::after { content: "批量处理"; }

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn i {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  grid-row: 1 / span 2;
  place-items: center !important;
  margin: 0 !important;
  border-radius: 14px;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(1) i { background: var(--ui-blue); }
body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(2) i { background: var(--ui-cyan); }
body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(3) i { background: var(--ui-violet); }
body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn:nth-child(4) i { background: var(--ui-orange); }

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action .btn,
body.cer-app.cer-ui-shell .cer-device-card .cer-device-download,
body.cer-app.cer-ui-shell .cer-device-card .cer-device-icon-btn {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action .btn {
  min-width: 60px;
  height: 34px;
  min-height: 34px;
  padding: 0 12px !important;
  border: 0;
  border-radius: 12px;
  color: #fff !important;
  background: var(--ui-orange) !important;
  font-size: 13px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-download {
  align-self: center !important;
  justify-self: end !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  line-height: 1 !important;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-download i,
body.cer-app.cer-ui-shell .cer-device-card .cer-device-icon-btn i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transform: none !important;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-download span {
  display: none !important;
}

body.cer-app.cer-ui-shell .cer-device-card .cer-device-icon-btn {
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
}

/* Sign page close button: true floating X in the extreme corner. */
body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete {
  top: -4px !important;
  right: -4px !important;
  z-index: 8;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f04468 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete span {
  display: block !important;
  margin: -2px 0 0 !important;
  color: #f04468 !important;
  font-size: 27px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete i {
  display: none !important;
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-device-work .cer-work-toolbar {
    padding: 10px !important;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn {
    min-height: 58px !important;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px !important;
    padding: 8px 10px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn::after {
    font-size: 10px;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-device-toolbar-btn i {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px;
    font-size: 16px !important;
  }

  body.cer-app.cer-ui-shell .cer-device-work .cer-reuse-action .btn {
    min-width: 58px;
    height: 38px;
    min-height: 38px;
  }

  body.cer-app.cer-ui-shell .cer-device-card .cer-device-download {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    min-height: 39px !important;
  }

  body.cer-app.cer-ui-shell .cer-device-card .cer-device-download i,
  body.cer-app.cer-ui-shell .cer-device-card .cer-device-icon-btn i {
    font-size: 14px !important;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete {
    top: -4px !important;
    right: -4px !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
  }

  body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete span {
    font-size: 26px !important;
    line-height: 22px !important;
  }
}

/* Home secondary links use the same compact feature-card contract as the
   primary management links above. */
body.cer-app.cer-ui-shell .cer-home .cer-resource-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

body.cer-app.cer-ui-shell .cer-home .cer-resource-card,
body.cer-app.cer-ui-shell .cer-home .cer-resource-card.cer-resource-large {
  display: grid;
  grid-column: auto !important;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 68px;
  gap: 2px 8px;
  padding: 10px 11px;
}

body.cer-app.cer-ui-shell .cer-home .cer-resource-card > i {
  display: inline-flex;
  width: 29px;
  height: 29px;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 9px;
  color: var(--ui-violet);
  background: #eee9ff;
  font-size: 14px;
}

body.cer-app.cer-ui-shell .cer-home .cer-resource-card:nth-child(2n) > i {
  color: var(--ui-orange);
  background: #fff0df;
}

body.cer-app.cer-ui-shell .cer-home .cer-resource-card:nth-child(3n) > i {
  color: var(--ui-cyan);
  background: #e4f8f6;
}

body.cer-app.cer-ui-shell .cer-home .cer-resource-card small,
body.cer-app.cer-ui-shell .cer-home .cer-resource-card em {
  display: none;
}

body.cer-app.cer-ui-shell .cer-home .cer-resource-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-home .cer-resource-card span {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-subtle);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-sign-work .cer-app-delete img {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  object-fit: contain;
}

body.cer-app.cer-ui-shell .cer-login-brand-image,
body.cer-public-shell .cer-public-brand-image {
  width: 42px;
  height: 42px;
  padding: 3px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

/* Recharge sheet used by the home page tc() action. */
body.cer-app.cer-ui-shell .layui-layer .cer-recharge-panel {
  padding: 2px 2px 4px;
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-total {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #d9e8fb;
  border-radius: 11px;
  color: #315d91;
  background: #f2f7fd;
  font-size: 12px;
  font-weight: 800;
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-option {
  display: grid;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid #c9ddfb;
  border-radius: 10px;
  color: #216bd1;
  background: #f4f8ff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-option:hover,
body.cer-app.cer-ui-shell .layui-layer .cer-recharge-option:focus {
  color: #fff;
  background: var(--ui-blue);
  border-color: var(--ui-blue);
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-custom {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--ui-subtle);
  font-size: 12px;
  font-weight: 750;
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-custom .form-control {
  min-height: 38px;
  background: #f8fafd;
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 12px;
  color: var(--ui-subtle);
  font-size: 12px;
  font-weight: 750;
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-method label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--ui-ink);
  font-weight: 750;
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-method input {
  margin: 0;
  accent-color: var(--ui-blue);
}

body.cer-app.cer-ui-shell .layui-layer .cer-recharge-submit {
  display: grid;
  min-height: 40px;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--ui-blue);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .layui-layer .cer-recharge-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-home .cer-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body.cer-app.cer-ui-shell .cer-home .cer-resource-card,
  body.cer-app.cer-ui-shell .cer-home .cer-resource-card.cer-resource-large {
    min-height: 61px;
    gap: 2px 7px;
    padding: 8px;
  }

  body.cer-app.cer-ui-shell .cer-home .cer-resource-card > i {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: 13px;
  }

  body.cer-app.cer-ui-shell .cer-home .cer-resource-card strong {
    font-size: 11px;
  }

  body.cer-app.cer-ui-shell .cer-home .cer-resource-card span {
    font-size: 9px;
  }
}

/* Desktop sidebar themes are stored in localStorage by the shared layout. */
body.cer-app.cer-ui-shell .cer-theme-picker {
  position: relative;
  min-width: 0;
}

body.cer-app.cer-ui-shell .cer-theme-toggle {
  display: inline-flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  color: #9ba9b9;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

body.cer-app.cer-ui-shell .cer-theme-toggle:hover,
body.cer-app.cer-ui-shell .cer-theme-picker.is-open .cer-theme-toggle {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

body.cer-app.cer-ui-shell .cer-theme-toggle i {
  width: 16px;
  color: #79b9ff;
  text-align: center;
}

body.cer-app.cer-ui-shell .cer-theme-swatches {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 7px);
  left: 0;
  display: none;
  grid-template-columns: repeat(5, 24px);
  gap: 7px;
  padding: 9px;
  border: 1px solid #dce6f0;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

body.cer-app.cer-ui-shell .cer-theme-picker.is-open .cer-theme-swatches {
  display: grid;
}

body.cer-app.cer-ui-shell .cer-theme-swatch {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

body.cer-app.cer-ui-shell .cer-theme-swatch.active {
  border-color: #17263a;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2477ed;
}

body.cer-app.cer-ui-shell .cer-theme-ocean { background: #2477ed; }
body.cer-app.cer-ui-shell .cer-theme-forest { background: #1c9b6c; }
body.cer-app.cer-ui-shell .cer-theme-violet { background: #7958d8; }
body.cer-app.cer-ui-shell .cer-theme-coral { background: #ef6a57; }
body.cer-app.cer-ui-shell .cer-theme-slate { background: #64748b; }

body.cer-app.cer-ui-shell[data-sidebar-theme="ocean"] .cer-side {
  background: #0f141b;
  border-right-color: #202b38;
}

body.cer-app.cer-ui-shell[data-sidebar-theme="ocean"] .cer-side-nav a:hover,
body.cer-app.cer-ui-shell[data-sidebar-theme="ocean"] .cer-side-nav a.active {
  background: #2477ed;
}

body.cer-app.cer-ui-shell[data-sidebar-theme="forest"] .cer-side {
  background: #10211c;
  border-right-color: #203e34;
}

body.cer-app.cer-ui-shell[data-sidebar-theme="forest"] .cer-side-nav a:hover,
body.cer-app.cer-ui-shell[data-sidebar-theme="forest"] .cer-side-nav a.active {
  background: #1c9b6c;
  box-shadow: 0 8px 18px rgba(28, 155, 108, .25);
}

body.cer-app.cer-ui-shell[data-sidebar-theme="violet"] .cer-side {
  background: #19152b;
  border-right-color: #30264e;
}

body.cer-app.cer-ui-shell[data-sidebar-theme="violet"] .cer-side-nav a:hover,
body.cer-app.cer-ui-shell[data-sidebar-theme="violet"] .cer-side-nav a.active {
  background: #7958d8;
  box-shadow: 0 8px 18px rgba(121, 88, 216, .28);
}

body.cer-app.cer-ui-shell[data-sidebar-theme="coral"] .cer-side {
  background: #261719;
  border-right-color: #4a2829;
}

body.cer-app.cer-ui-shell[data-sidebar-theme="coral"] .cer-side-nav a:hover,
body.cer-app.cer-ui-shell[data-sidebar-theme="coral"] .cer-side-nav a.active {
  background: #ef6a57;
  box-shadow: 0 8px 18px rgba(239, 106, 87, .25);
}

body.cer-app.cer-ui-shell[data-sidebar-theme="slate"] .cer-side {
  background: #202733;
  border-right-color: #354254;
}

body.cer-app.cer-ui-shell[data-sidebar-theme="slate"] .cer-side-nav a:hover,
body.cer-app.cer-ui-shell[data-sidebar-theme="slate"] .cer-side-nav a.active {
  background: #64748b;
  box-shadow: 0 8px 18px rgba(100, 116, 139, .28);
}

body.cer-app.cer-ui-shell[data-sidebar-theme="forest"] .cer-side-brand,
body.cer-app.cer-ui-shell[data-sidebar-theme="violet"] .cer-side-brand,
body.cer-app.cer-ui-shell[data-sidebar-theme="coral"] .cer-side-brand,
body.cer-app.cer-ui-shell[data-sidebar-theme="slate"] .cer-side-brand {
  border-bottom-color: rgba(255, 255, 255, .14);
}

body.cer-app.cer-ui-shell .cer-side-brand img {
  width: 34px;
  height: 34px;
  padding: 2px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}

/* Profile editing uses the same compact workspace contract as the account page. */
body.cer-app.cer-ui-shell .cer-profile-page {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 52px;
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-page-head h1 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 29px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-page-head p {
  color: var(--ui-subtle);
}

body.cer-app.cer-ui-shell .cer-profile-back {
  color: #52677e;
  background: #fff;
  border: 1px solid var(--ui-line);
}

body.cer-app.cer-ui-shell .cer-profile-editor {
  display: grid;
  gap: 14px;
}

body.cer-app.cer-ui-shell .cer-profile-editor-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 14px;
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-card-head h2 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-card-head p {
  margin: 4px 0 0;
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-profile-page .cer-card-head-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--ui-blue);
  background: #e8f2ff;
  font-size: 13px;
}

body.cer-app.cer-ui-shell .cer-avatar-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

body.cer-app.cer-ui-shell .cer-avatar-card .cer-card-head {
  width: 100%;
}

body.cer-app.cer-ui-shell .cer-profile-avatar-container {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 4px 0 12px;
}

body.cer-app.cer-ui-shell .cer-profile-avatar {
  display: block;
  width: 112px;
  height: 112px;
  border: 5px solid #edf3f9;
  border-radius: 50%;
  object-fit: cover;
}

body.cer-app.cer-ui-shell .cer-avatar-upload {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--ui-blue);
}

body.cer-app.cer-ui-shell .cer-avatar-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-avatar-tip {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: 10px;
}

body.cer-app.cer-ui-shell .cer-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.cer-app.cer-ui-shell .cer-profile-contact-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.cer-app.cer-ui-shell .cer-profile-field {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
  color: var(--ui-subtle);
  font-size: 11px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-profile-field .form-control {
  width: 100%;
  min-width: 0;
  color: var(--ui-ink);
  background: #f8fafd;
}

body.cer-app.cer-ui-shell .cer-profile-input-action {
  display: flex;
  min-width: 0;
  gap: 6px;
}

body.cer-app.cer-ui-shell .cer-profile-input-action .form-control {
  flex: 1 1 auto;
}

body.cer-app.cer-ui-shell .cer-profile-input-action .btn {
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  color: #276dc2;
  background: #e8f2ff;
  font-size: 11px;
  white-space: nowrap;
}

body.cer-app.cer-ui-shell .cer-profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.cer-app.cer-ui-shell .cer-profile-form-actions .btn {
  min-width: 92px;
}

@media (min-width: 768px) {
  body.cer-app.cer-ui-shell > .cer-profile-page {
    width: min(1180px, calc(100% - 286px));
    margin-left: 260px;
    margin-right: 26px;
  }
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-profile-page {
    width: calc(100% - 24px);
    padding: 8px 0 36px;
  }

  body.cer-app.cer-ui-shell .cer-profile-page .cer-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  body.cer-app.cer-ui-shell .cer-profile-page .cer-page-head h1 {
    font-size: 24px;
  }

  body.cer-app.cer-ui-shell .cer-profile-back {
    width: 100%;
  }

  body.cer-app.cer-ui-shell .cer-profile-editor-grid,
  body.cer-app.cer-ui-shell .cer-profile-fields,
  body.cer-app.cer-ui-shell .cer-profile-contact-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cer-app.cer-ui-shell .cer-profile-page .cer-card {
    padding: 14px;
    border-radius: 13px;
  }

  body.cer-app.cer-ui-shell .cer-profile-input-action .btn span {
    display: none;
  }

  body.cer-app.cer-ui-shell .cer-profile-input-action .btn {
    width: 40px;
    padding: 0;
  }

  body.cer-app.cer-ui-shell .cer-profile-form-actions {
    justify-content: stretch;
  }

  body.cer-app.cer-ui-shell .cer-profile-form-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Password editing uses the same focused workspace style as profile editing. */
body.cer-app.cer-ui-shell .cer-password-page {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 52px;
  color: var(--ui-ink);
}

body.cer-app.cer-ui-shell .cer-password-page .cer-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

body.cer-app.cer-ui-shell .cer-password-page .cer-page-head h1 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 29px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-password-page .cer-page-head p {
  color: var(--ui-subtle);
}

body.cer-app.cer-ui-shell .cer-password-back {
  color: #52677e;
  background: #fff;
  border: 1px solid var(--ui-line);
}

body.cer-app.cer-ui-shell .cer-password-card {
  max-width: 760px;
  padding: 24px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}

body.cer-app.cer-ui-shell .cer-password-card .cer-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

body.cer-app.cer-ui-shell .cer-password-card .cer-card-head h2 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 900;
}

body.cer-app.cer-ui-shell .cer-password-card .cer-card-head p {
  margin: 4px 0 0;
  color: var(--ui-subtle);
  font-size: 11px;
}

body.cer-app.cer-ui-shell .cer-password-card .cer-card-head-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--ui-violet);
  background: #f0ebff;
  font-size: 13px;
}

body.cer-app.cer-ui-shell .cer-password-form {
  display: grid;
  max-width: 620px;
  gap: 14px;
}

body.cer-app.cer-ui-shell .cer-password-field {
  display: grid;
  min-width: 0;
  gap: 7px;
  margin: 0;
  color: var(--ui-subtle);
  font-size: 12px;
  font-weight: 850;
}

body.cer-app.cer-ui-shell .cer-password-input {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: #f8fafd;
}

body.cer-app.cer-ui-shell .cer-password-input:focus-within {
  border-color: #83b4f3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(36, 119, 237, .12);
}

body.cer-app.cer-ui-shell .cer-password-input > i {
  width: 16px;
  color: var(--ui-violet);
  text-align: center;
}

body.cer-app.cer-ui-shell .cer-password-input input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ui-ink);
  background: transparent;
  box-shadow: none;
}

body.cer-app.cer-ui-shell .cer-password-input input::placeholder {
  color: var(--ui-muted);
}

body.cer-app.cer-ui-shell .cer-password-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

body.cer-app.cer-ui-shell .cer-password-form-actions .btn {
  min-width: 92px;
}

@media (min-width: 768px) {
  body.cer-app.cer-ui-shell > .cer-password-page {
    width: min(900px, calc(100% - 286px));
    margin-left: 260px;
    margin-right: 26px;
  }
}

/* Keep desktop device cards readable: no more than three cards per row. */
@media (min-width: 768px) {
  body.cer-app.cer-ui-shell .cer-device-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.cer-app.cer-ui-shell .cer-password-page {
    width: calc(100% - 24px);
    padding: 8px 0 36px;
  }

  body.cer-app.cer-ui-shell .cer-password-page .cer-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  body.cer-app.cer-ui-shell .cer-password-page .cer-page-head h1 {
    font-size: 24px;
  }

  body.cer-app.cer-ui-shell .cer-password-back {
    width: 100%;
  }

  body.cer-app.cer-ui-shell .cer-password-card {
    padding: 14px;
    border-radius: 13px;
  }

  body.cer-app.cer-ui-shell .cer-password-form-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}
.cer-agreement-pdf-loading, .cer-agreement-pdf-error { display: flex; min-height: 180px; align-items: center; justify-content: center; color: #697586; font-size: 14px; text-align: center; }
.cer-agreement-pdf-page { display: block; max-width: 100%; margin: 0 auto 14px; background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .12); }