@media screen {
  :root {
    --dd-accent: #e5483f;
    --dd-ink: #20252b;
    --dd-line: #dfe4ea;
    --dd-panel: #ffffff;
    --dd-canvas: #eef1f4;
  }

  body {
    color: var(--dd-ink);
    background: var(--dd-canvas);
  }

  .header.noprint {
    height: 64px;
    padding: 0 24px;
    background: #25282c;
    border-bottom: 1px solid #15171a;
    box-shadow: 0 2px 10px rgba(20, 25, 31, 0.2);
  }

  .header.noprint .name {
    min-width: 166px;
    padding-right: 22px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .header.noprint .nav-box {
    display: flex;
    align-items: stretch;
    gap: 4px;
  }

  .header.noprint .nav {
    position: relative;
    min-width: 116px;
    padding: 0 20px;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .header.noprint .nav:hover {
    background: #34383d;
  }

  .header.noprint .nav.active {
    background: var(--dd-accent);
  }

  .header.noprint .nav.active::after {
    position: absolute;
    right: 24px;
    bottom: 0;
    left: 24px;
    height: 3px;
    background: #fff;
    content: "";
  }

  .edit-cont,
  .cont-box {
    background: var(--dd-canvas);
  }

  .tool-left.noprint,
  .tool-right.noprint {
    background: var(--dd-panel);
  }

  .tool-left.noprint {
    border-right: 1px solid var(--dd-line);
    box-shadow: 2px 0 10px rgba(28, 36, 44, 0.04);
  }

  .tool-right.noprint {
    border-left: 1px solid var(--dd-line);
    box-shadow: -2px 0 10px rgba(28, 36, 44, 0.04);
  }

  .temp-list .temp-item {
    padding: 8px 6px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  }

  .temp-list .temp-item:hover {
    background: #f7f9fb;
    border-color: var(--dd-line);
  }

  .temp-list .temp-item-active {
    background: #fff7f6;
    border-color: #f1aaa5;
    box-shadow: 0 2px 8px rgba(153, 49, 42, 0.1);
  }

  .temp-list .temp-img {
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7dde4;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(26, 34, 42, 0.1);
  }

  .temp-list .temp-title {
    margin-top: 8px;
    color: #333a42;
    font-weight: 500;
  }

  .tool-right .tool-title {
    color: #252b32;
    font-weight: 700;
  }

  .tool-right .ivu-input,
  .tool-right .ivu-select-selection,
  .tool-right .ivu-input-number,
  .tool-right .family-item {
    border-color: #d5dbe2;
    border-radius: 5px;
  }

  .tool-right .family-item:hover {
    border-color: #8eb9e9;
    background: #f4f9ff;
  }

  .tool-right .family-item-active {
    color: #1e69b5;
    border-color: #2d8cf0;
    background: #edf6ff;
  }

  .tool-right .ivu-btn-primary {
    border-color: #287dcc;
    background: #287dcc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(25, 96, 164, 0.18);
  }

  .tool-right .ivu-btn-primary:hover {
    border-color: #176dbd;
    background: #176dbd;
  }

  .zitie-page-box > .zi-wrap {
    box-shadow: 0 3px 14px rgba(29, 37, 45, 0.16);
  }
}