/* Pipi Authorization Center V3 anime-tech theme. */
:root {
    --pipi-night: #11162f;
    --pipi-night-2: #182044;
    --pipi-night-3: #222b56;
    --pipi-ink: #19213f;
    --pipi-muted: #7781a6;
    --pipi-paper: #f8f9ff;
    --pipi-paper-2: #eef1fb;
    --pipi-line: rgba(32, 47, 96, .12);
    --pipi-cyan: #57d7e4;
    --pipi-blue: #6585ff;
    --pipi-pink: #ff78a8;
    --pipi-pink-dark: #e95b91;
    --pipi-yellow: #ffd66e;
    --pipi-green: #72e0b5;
    --pipi-danger: #ff6e7c;
    --pipi-shadow: 0 26px 80px rgba(9, 14, 39, .28);
    --pipi-mx: 0px;
    --pipi-my: 0px;
}

body.pipi-public *,
body.pipi-login *,
body.pipi-admin * {
    box-sizing: border-box;
    letter-spacing: 0;
}

body.pipi-public,
body.login-body.pipi-login {
    min-height: 100vh;
    margin: 0;
    color: #f7f8ff;
    background: var(--pipi-night);
    font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

body.pipi-public a,
body.pipi-login a,
body.pipi-admin a {
    text-decoration: none;
}

body.pipi-public button,
body.pipi-public input,
body.pipi-login button,
body.pipi-login input,
body.pipi-admin button,
body.pipi-admin input,
body.pipi-admin textarea,
body.pipi-admin select {
    font: inherit;
}

body.pipi-public button,
body.pipi-login button,
body.pipi-admin button {
    cursor: pointer;
}

body.pipi-public,
body.login-body.pipi-login,
body.pipi-dialog-page {
    position: relative;
    overflow-x: hidden;
    background-color: var(--pipi-night);
    background-image:
        linear-gradient(rgba(101, 133, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101, 133, 255, .06) 1px, transparent 1px),
        url("../img/chart-texture.jpg");
    background-position:
        var(--pipi-mx) var(--pipi-my),
        calc(var(--pipi-mx) * -1) calc(var(--pipi-my) * -1),
        left bottom;
    background-repeat: repeat, repeat, repeat-x;
    background-size: 42px 42px, 42px 42px, auto;
}

body.pipi-query-page:after,
body.login-body.pipi-login:after {
    position: fixed;
    z-index: 0;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 12%;
    pointer-events: none;
    background: rgba(87, 215, 228, .06);
    border-top: 1px solid rgba(87, 215, 228, .18);
    border-bottom: 1px solid rgba(87, 215, 228, .08);
    content: "";
    transform: skewY(-5deg);
    animation: pipi-scan 12s ease-in-out infinite;
}

.pipi-public-shell,
.pipi-login-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.pipi-public-topbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 22px 34px;
}

.pipi-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
    font-family: Georgia, "Microsoft YaHei", serif;
    font-size: 18px;
    white-space: nowrap;
}

.pipi-brand-mark,
.pipi-admin-brand-mark {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 8px 8px 8px 3px;
    background: var(--pipi-pink);
    color: #fff;
    box-shadow: 0 0 26px rgba(255, 120, 168, .25);
}

.pipi-brand small {
    display: block;
    margin-top: 2px;
    color: var(--pipi-cyan);
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 9px;
}

.pipi-public-nav {
    display: flex;
    gap: 7px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(16, 22, 49, .82);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .18);
}

.pipi-public-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 6px;
    color: #98a4cf;
    font-size: 12px;
    transition: background .2s ease, color .2s ease;
}

.pipi-public-nav a:hover,
.pipi-public-nav a.is-active {
    background: rgba(101, 133, 255, .2);
    color: #fff;
}

.pipi-online {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #aeb8d9;
    font-family: Consolas, monospace;
    font-size: 11px;
    white-space: nowrap;
}

.pipi-online i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pipi-green);
    box-shadow: 0 0 0 5px rgba(114, 224, 181, .1), 0 0 18px var(--pipi-green);
}

.pipi-public-stage {
    width: min(100%, 1380px);
    min-height: calc(100vh - 150px);
    margin: 0 auto;
    padding: 0 34px 36px;
}

.pipi-home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
    align-items: center;
    gap: 56px;
    min-height: 680px;
}

.pipi-kicker {
    margin: 0 0 14px;
    color: var(--pipi-cyan);
    font-family: Consolas, monospace;
    font-size: 11px;
}

.pipi-public-copy h1,
.pipi-selfhelp-copy h1,
.pipi-login-visual h1 {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Microsoft YaHei", serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.08;
}

.pipi-public-copy h1 span,
.pipi-selfhelp-copy h1 span,
.pipi-login-visual h1 span {
    color: var(--pipi-pink);
}

.pipi-lead,
.pipi-login-visual > p {
    margin: 17px 0 0;
    color: #aeb8d9;
    font-size: 14px;
    line-height: 1.8;
}

.pipi-query-panel,
.pipi-selfhelp-panel,
.pipi-login-card {
    position: relative;
    margin-top: 34px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(15, 22, 51, .72);
    box-shadow: var(--pipi-shadow);
}

.pipi-query-inner,
.pipi-login-card-inner {
    padding: 25px;
    border: 1px solid rgba(87, 215, 228, .14);
    border-radius: 6px;
    background: rgba(26, 35, 78, .88);
}

.pipi-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #dfe4ff;
    font-size: 12px;
}

.pipi-field-label span {
    color: var(--pipi-cyan);
    font-family: Consolas, monospace;
    font-size: 10px;
}

.pipi-query-row {
    display: flex;
    gap: 10px;
}

.pipi-query-row input,
.pipi-input-group input,
.pipi-login-input input {
    width: 100%;
    min-width: 0;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    outline: 0;
    background: rgba(8, 13, 34, .62);
    color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pipi-query-row input {
    padding: 0 15px;
}

.pipi-query-row input::placeholder,
.pipi-input-group input::placeholder,
.pipi-login-input input::placeholder {
    color: #707da8;
}

.pipi-query-row input:focus,
.pipi-input-group input:focus,
.pipi-login-input input:focus {
    border-color: var(--pipi-cyan);
    box-shadow: 0 0 0 3px rgba(87, 215, 228, .12);
}

.pipi-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: var(--pipi-pink);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(255, 120, 168, .2);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pipi-action-button:hover,
.pipi-action-button:focus {
    background: var(--pipi-pink-dark);
    color: #fff;
    transform: translateY(-2px);
}

.pipi-action-button:focus {
    outline: 2px solid var(--pipi-cyan);
    outline-offset: 2px;
}

.pipi-query-row .pipi-action-button {
    flex: 0 0 132px;
}

.pipi-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px;
    color: #8290bd;
    font-size: 11px;
}

.pipi-panel-foot a {
    color: var(--pipi-cyan);
}

.pipi-action-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.pipi-action-strip > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(23, 31, 69, .72);
    color: #fff;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.pipi-action-strip > a:hover {
    border-color: rgba(87, 215, 228, .44);
    background: rgba(34, 43, 86, .92);
    transform: translateY(-2px);
}

.pipi-action-strip i {
    width: 30px;
    color: var(--pipi-yellow);
    font-size: 20px;
    text-align: center;
}

.pipi-action-strip strong,
.pipi-action-strip small {
    display: block;
}

.pipi-action-strip strong {
    font-size: 13px;
}

.pipi-action-strip small {
    margin-top: 4px;
    color: #8793bf;
    font-size: 10px;
}

.pipi-character-zone {
    position: relative;
    min-height: 510px;
    transform: translate3d(calc(var(--pipi-mx) * .18), calc(var(--pipi-my) * .18), 0);
    transition: transform .5s ease;
}

.pipi-character-zone:before {
    position: absolute;
    top: 8%;
    right: 7%;
    width: 84%;
    height: 68%;
    border: 1px solid rgba(87, 215, 228, .22);
    border-radius: 45% 55% 42% 58%;
    content: "";
    transform: rotate(-8deg);
    box-shadow: 0 0 70px rgba(87, 215, 228, .1);
}

.pipi-orbit-line {
    position: absolute;
    top: 25%;
    right: 2%;
    width: 96%;
    height: 160px;
    border: 1px solid rgba(255, 120, 168, .42);
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-24deg);
}

.pipi-orbit-line:after {
    position: absolute;
    top: -4px;
    right: 20%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pipi-yellow);
    box-shadow: 0 0 16px var(--pipi-yellow);
    content: "";
}

.pipi-operator {
    position: absolute;
    top: 9%;
    left: 17%;
    width: 220px;
    height: 330px;
    filter: drop-shadow(0 25px 26px rgba(0, 0, 0, .28));
    transform: rotate(-4deg);
}

.pipi-operator-hair {
    position: absolute;
    top: 15px;
    left: 38px;
    width: 150px;
    height: 160px;
    border-radius: 52% 48% 46% 54%;
    background: #6b78df;
    transform: rotate(6deg);
}

.pipi-operator-hair:before,
.pipi-operator-hair:after {
    position: absolute;
    bottom: -34px;
    width: 48px;
    height: 96px;
    border-radius: 50%;
    background: #5363c7;
    content: "";
}

.pipi-operator-hair:before {
    left: -21px;
    transform: rotate(19deg);
}

.pipi-operator-hair:after {
    right: -19px;
    transform: rotate(-16deg);
}

.pipi-operator-face {
    position: absolute;
    z-index: 2;
    top: 67px;
    left: 63px;
    width: 102px;
    height: 118px;
    border: 3px solid #f3b6aa;
    border-radius: 46% 46% 50% 50%;
    background: #ffd2c3;
}

.pipi-operator-face:before,
.pipi-operator-face:after {
    position: absolute;
    top: 48px;
    width: 12px;
    height: 17px;
    border-bottom: 3px solid #26315d;
    border-radius: 50%;
    content: "";
}

.pipi-operator-face:before {
    left: 24px;
}

.pipi-operator-face:after {
    right: 24px;
}

.pipi-operator-bang {
    position: absolute;
    z-index: 3;
    top: 55px;
    left: 73px;
    width: 42px;
    height: 75px;
    border-radius: 8px 3px 42px 9px;
    background: #7d8af1;
    transform: rotate(20deg);
}

.pipi-operator-neck {
    position: absolute;
    top: 168px;
    left: 93px;
    width: 43px;
    height: 32px;
    background: #f3b6aa;
}

.pipi-operator-body {
    position: absolute;
    z-index: 1;
    top: 184px;
    left: 36px;
    width: 170px;
    height: 140px;
    border: 3px solid #26315d;
    border-radius: 45px 45px 16px 16px;
    background: #f7f8ff;
    box-shadow: inset 0 -26px var(--pipi-pink);
}

.pipi-operator-body:before {
    position: absolute;
    top: 17px;
    left: 66px;
    width: 34px;
    height: 34px;
    border: 4px solid var(--pipi-cyan);
    border-radius: 50%;
    color: var(--pipi-pink);
    content: "✦";
    font-size: 18px;
    line-height: 27px;
    text-align: center;
}

.pipi-terminal {
    position: absolute;
    right: 1%;
    bottom: 4%;
    width: 310px;
    padding: 12px;
    border: 1px solid rgba(87, 215, 228, .5);
    border-radius: 8px;
    background: rgba(14, 22, 53, .92);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .28), 0 0 40px rgba(87, 215, 228, .1);
    transform: rotate(4deg);
}

.pipi-terminal-bar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #8d9bc9;
    font-family: Consolas, monospace;
    font-size: 10px;
}

.pipi-terminal-body {
    display: grid;
    grid-template-columns: 1fr 82px;
    gap: 14px;
    align-items: center;
    padding: 14px 4px 4px;
}

.pipi-terminal-body strong,
.pipi-terminal-body span {
    display: block;
}

.pipi-terminal-body strong {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
}

.pipi-terminal-body span {
    color: var(--pipi-cyan);
    font-family: Consolas, monospace;
    font-size: 10px;
}

.pipi-terminal-ring {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid var(--pipi-pink);
    border-radius: 50%;
    color: var(--pipi-pink);
    font-family: Consolas, monospace;
    font-size: 12px;
    box-shadow: 0 0 0 8px rgba(255, 120, 168, .07), 0 0 0 16px rgba(255, 120, 168, .03);
}

.pipi-result-outlet {
    min-height: 1px;
}

.pipi-public-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(100% - 68px, 1312px);
    margin: 0 auto;
    padding: 18px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #7785b4;
    font-size: 11px;
}

.pipi-public-footer a {
    margin-left: 18px;
    color: #aeb8d9;
}

/* Self-service page */
.pipi-selfhelp-stage {
    display: flex;
    align-items: center;
}

.pipi-selfhelp-layout {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(430px, 1.15fr);
    align-items: center;
    gap: 70px;
    width: 100%;
    min-height: 650px;
}

.pipi-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 520px;
    margin-top: 24px;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #aeb8d9;
    font-size: 12px;
    line-height: 1.8;
}

.pipi-notice i {
    margin-top: 4px;
    color: var(--pipi-yellow);
}

.pipi-mini-terminal {
    display: grid;
    gap: 8px;
    max-width: 410px;
    margin-top: 28px;
}

.pipi-mini-terminal > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 13px;
    border-left: 2px solid var(--pipi-blue);
    background: rgba(23, 31, 69, .72);
    color: #8894c0;
    font-family: Consolas, monospace;
    font-size: 10px;
}

.pipi-mini-terminal strong {
    color: var(--pipi-green);
    font-weight: 400;
}

.pipi-selfhelp-panel {
    margin: 0;
}

.pipi-selfhelp-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.pipi-input-group {
    display: block;
    margin: 0;
}

.pipi-input-group > span {
    display: block;
    margin-bottom: 7px;
    color: #aeb8d9;
    font-size: 11px;
}

.pipi-input-group > span i {
    width: 18px;
    color: var(--pipi-cyan);
}

.pipi-input-group input {
    padding: 0 13px;
}

.pipi-submit-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 50px;
    margin-top: 3px;
}

/* Login */
body.login-body.pipi-login {
    display: block;
    padding: 0 !important;
}

.pipi-login-topbar {
    width: min(100%, 1380px);
}

.pipi-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    color: #aeb8d9;
    font-size: 12px;
}

.pipi-back-link:hover {
    border-color: rgba(87, 215, 228, .44);
    color: #fff;
}

.pipi-login-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr);
    align-items: center;
    gap: 70px;
    width: min(100%, 1312px);
    min-height: calc(100vh - 94px);
    margin: 0 auto;
    padding: 0 34px 34px;
}

.pipi-login-visual {
    position: relative;
    min-height: 620px;
    padding-top: 48px;
}

.pipi-login-visual .pipi-character-zone {
    min-height: 390px;
    margin-top: 6px;
}

.pipi-login-visual .pipi-operator {
    top: 12%;
    left: 25%;
    transform: scale(1.05) rotate(5deg);
}

.pipi-login-visual .pipi-terminal {
    right: 3%;
    bottom: 2%;
}

.pipi-login-card {
    width: 100%;
    max-width: 480px;
    margin: 0 0 0 auto;
}

.pipi-login-card-inner {
    padding: 34px;
    border-color: rgba(255, 120, 168, .19);
    background: rgba(32, 41, 88, .88);
}

.pipi-login-card h2 {
    margin: 11px 0 7px;
    color: #fff;
    font-family: Georgia, "Microsoft YaHei", serif;
    font-size: 30px;
    font-weight: 400;
}

.pipi-login-card p {
    margin: 0 0 24px;
    color: #aab5d8;
    font-size: 12px;
    line-height: 1.8;
}

.pipi-login-input {
    position: relative;
    display: block;
    margin: 12px 0 0;
}

.pipi-login-input > i {
    position: absolute;
    z-index: 1;
    top: 17px;
    left: 15px;
    color: var(--pipi-cyan);
}

.pipi-login-input input {
    padding: 0 14px 0 43px;
}

.pipi-input-status {
    display: block;
    min-height: 20px;
    padding: 4px 0 0 4px;
    color: #91a0cc;
    font-size: 11px;
}

.pipi-input-status img {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}

.pipi-input-status font {
    color: inherit !important;
}

.pipi-login-button {
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
}

.pipi-login-button[disabled],
.pipi-action-button[disabled] {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}

.pipi-login-foot {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 17px;
    color: #7785b6;
    font-size: 11px;
}

.pipi-login-foot span i {
    color: var(--pipi-green);
}

.pipi-login-foot a {
    color: var(--pipi-cyan);
}

/* Layer dialog contract */
body.pipi-public .layui-layer-shade,
body.pipi-login .layui-layer-shade,
body.pipi-admin .layui-layer-shade,
body.pipi-dialog-page .layui-layer-shade {
    background-color: rgba(8, 11, 29, .82) !important;
}

body.pipi-public .layui-layer,
body.pipi-login .layui-layer,
body.pipi-admin .layui-layer,
body.pipi-dialog-page .layui-layer {
    width: calc(100vw - 28px) !important;
    min-width: 280px !important;
    max-width: 420px !important;
    overflow: hidden;
    border: 1px solid rgba(87, 215, 228, .45) !important;
    border-radius: 8px !important;
    background: #19234b !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42), 0 0 34px rgba(87, 215, 228, .08) !important;
    animation: pipi-dialog-in .32s ease both;
}

body.pipi-public .layui-layer:before,
body.pipi-login .layui-layer:before,
body.pipi-admin .layui-layer:before,
body.pipi-dialog-page .layui-layer:before {
    display: block;
    height: 3px;
    background: var(--pipi-pink);
    content: "";
}

body.pipi-public .layui-layer-content,
body.pipi-login .layui-layer-content,
body.pipi-admin .layui-layer-content,
body.pipi-dialog-page .layui-layer-content {
    min-height: 86px;
    padding: 32px 28px 20px !important;
    background: transparent !important;
    color: #e7ebff !important;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

body.pipi-public .layui-layer-content > div,
body.pipi-login .layui-layer-content > div,
body.pipi-admin .layui-layer-content > div,
body.pipi-dialog-page .layui-layer-content > div {
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

.pipi-dialog-message {
    position: relative;
    padding-left: 54px !important;
}

.pipi-dialog-message:before {
    position: absolute;
    top: -7px;
    left: 0;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px 8px 8px 3px;
    background: rgba(255, 110, 124, .16);
    color: var(--pipi-danger);
    content: "!";
    font-family: Georgia, serif;
    font-size: 20px;
}

.pipi-dialog-message.is-success:before {
    background: rgba(114, 224, 181, .14);
    color: var(--pipi-green);
    content: "✓";
}

body.pipi-public .layui-layer-btn,
body.pipi-login .layui-layer-btn,
body.pipi-admin .layui-layer-btn,
body.pipi-dialog-page .layui-layer-btn {
    padding: 0 28px 24px !important;
    background: transparent !important;
    text-align: right;
}

body.pipi-public .layui-layer-btn a,
body.pipi-login .layui-layer-btn a,
body.pipi-admin .layui-layer-btn a,
body.pipi-dialog-page .layui-layer-btn a {
    height: 39px;
    margin: 0 !important;
    padding: 0 22px;
    border: 0 !important;
    border-radius: 6px;
    background: var(--pipi-pink) !important;
    color: #fff !important;
    font-weight: 700;
    line-height: 39px;
}

/* Admin workspace */
body.pipi-admin {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--pipi-paper-2);
    color: var(--pipi-ink);
    font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

body.pipi-admin .header.white-bg {
    height: 68px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: var(--pipi-night-2);
    box-shadow: 0 6px 24px rgba(9, 14, 39, .14);
}

body.pipi-admin .sidebar-toggle-box {
    height: 68px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

body.pipi-admin .sidebar-toggle-box .fa-bars {
    margin-top: 24px;
    color: #dce2ff;
}

body.pipi-admin .logo,
body.pipi-admin .logo:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 68px;
    margin-top: 0;
    color: #fff;
    font-family: Georgia, "Microsoft YaHei", serif;
    font-size: 18px;
    font-weight: 400;
}

body.pipi-admin .logo small {
    display: block;
    color: var(--pipi-cyan);
    font-family: Consolas, monospace;
    font-size: 8px;
}

body.pipi-admin .top-menu {
    margin-top: 14px;
}

body.pipi-admin .top-menu > li > a {
    min-height: 39px;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, .05) !important;
}

body.pipi-admin .top-menu .username,
body.pipi-admin .top-menu .caret {
    color: #dce2ff;
}

body.pipi-admin .pipi-admin-user-mark {
    display: inline-grid;
    width: 25px;
    height: 25px;
    margin-right: 7px;
    place-items: center;
    border-radius: 6px;
    background: var(--pipi-pink);
    color: #fff;
}

body.pipi-admin #sidebar {
    top: 68px;
    width: 220px;
    background: var(--pipi-night);
}

body.pipi-admin #main-content {
    margin-left: 220px;
    background: var(--pipi-paper-2);
}

body.pipi-admin .sidebar-menu {
    padding: 16px 10px 84px;
}

body.pipi-admin ul.sidebar-menu li {
    margin-bottom: 3px;
}

body.pipi-admin ul.sidebar-menu li a {
    min-height: 42px;
    padding: 12px 10px;
    border-radius: 6px;
    color: #aeb8d9;
    transition: color .2s ease, background .2s ease;
}

body.pipi-admin ul.sidebar-menu li a:hover,
body.pipi-admin ul.sidebar-menu li a.active,
body.pipi-admin ul.sidebar-menu li a:focus {
    background: rgba(101, 133, 255, .2);
    color: #fff;
}

body.pipi-admin ul.sidebar-menu li a i {
    width: 20px;
    color: #7d8fdb;
    text-align: center;
}

body.pipi-admin ul.sidebar-menu li a.active i,
body.pipi-admin ul.sidebar-menu li a:hover i {
    color: var(--pipi-pink);
}

body.pipi-admin ul.sidebar-menu li ul.sub {
    margin: 4px 0 6px;
    padding: 4px 0 4px 18px;
    background: transparent;
}

body.pipi-admin ul.sidebar-menu li ul.sub li a {
    min-height: 34px;
    padding: 8px 10px;
    color: #7f8bb6;
    font-size: 12px;
}

body.pipi-admin .wrapper {
    min-height: calc(100vh - 68px);
    padding: 24px 26px 86px;
    background-image: url("../img/chart-texture.jpg");
    background-position: left bottom;
    background-repeat: repeat-x;
}

body.pipi-admin .panel {
    overflow: hidden;
    border: 1px solid var(--pipi-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(25, 33, 63, .06);
}

body.pipi-admin .panel-heading,
body.pipi-admin .progress-panel {
    min-height: 48px;
    padding: 14px 17px;
    border-bottom: 1px solid var(--pipi-line);
    background: #fff;
    color: var(--pipi-ink);
    font-family: Georgia, "Microsoft YaHei", serif;
    font-size: 15px;
}

body.pipi-admin .progress-panel .task-progress h1 {
    margin: 0;
    color: var(--pipi-ink);
    font-size: 17px;
    font-weight: 700;
}

body.pipi-admin .progress-panel .task-progress p {
    margin: 4px 0 0;
    color: var(--pipi-muted);
    font-size: 11px;
}

body.pipi-admin .panel-body {
    padding: 18px;
}

body.pipi-admin .state-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

body.pipi-admin .state-overview > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}

body.pipi-admin .state-overview .panel {
    position: relative;
    min-height: 116px;
    margin: 0;
}

body.pipi-admin .state-overview .symbol {
    display: grid;
    width: 58px;
    height: 100%;
    min-height: 116px;
    float: left;
    place-items: center;
    border-radius: 0;
    background: var(--pipi-night-3) !important;
    color: var(--pipi-cyan);
}

body.pipi-admin .state-overview .symbol.red {
    color: var(--pipi-pink);
}

body.pipi-admin .state-overview .symbol.blue {
    color: var(--pipi-yellow);
}

body.pipi-admin .state-overview .symbol i {
    font-size: 21px;
}

body.pipi-admin .state-overview .value {
    margin-left: 58px;
    padding: 19px 16px;
    text-align: left;
}

body.pipi-admin .state-overview .value h1 {
    margin: 0;
    color: var(--pipi-ink);
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
}

body.pipi-admin .state-overview .value p {
    margin-top: 7px;
    color: var(--pipi-muted);
    font-size: 11px;
}

body.pipi-admin .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.pipi-admin .table {
    margin-bottom: 0;
    color: #556184;
    font-size: 12px;
}

body.pipi-admin .table > thead > tr > th,
body.pipi-admin .table > tbody > tr:first-child > td,
body.pipi-admin .table > tbody > tr:first-child > th {
    border-bottom: 1px solid var(--pipi-line);
    background: var(--pipi-paper-2);
    color: var(--pipi-ink);
    font-weight: 700;
}

body.pipi-admin .table > thead > tr > th,
body.pipi-admin .table > tbody > tr > td,
body.pipi-admin .table > tbody > tr > th {
    padding: 12px 11px;
    border-color: rgba(25, 33, 63, .07);
    vertical-align: middle;
    white-space: nowrap;
}

body.pipi-admin .table > tbody > tr:hover > td {
    background: rgba(101, 133, 255, .05);
}

body.pipi-admin .label {
    display: inline-block;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 14px;
}

body.pipi-admin .label-success {
    background: #2f9e7d;
}

body.pipi-admin .form-control {
    min-height: 42px;
    border: 1px solid var(--pipi-line);
    border-radius: 6px;
    box-shadow: none;
    color: var(--pipi-ink);
}

body.pipi-admin textarea.form-control {
    min-height: 100px;
}

body.pipi-admin .form-control:focus {
    border-color: var(--pipi-blue);
    box-shadow: 0 0 0 3px rgba(101, 133, 255, .1);
}

body.pipi-admin .help-block {
    color: var(--pipi-muted);
    font-size: 11px;
}

body.pipi-admin .btn {
    border-radius: 6px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

body.pipi-admin .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(25, 33, 63, .12);
}

body.pipi-admin .btn-info,
body.pipi-admin .btn-primary {
    border-color: var(--pipi-blue);
    background: var(--pipi-blue);
}

body.pipi-admin .btn-danger,
body.pipi-admin .btn-warning {
    border-color: var(--pipi-pink-dark);
    background: var(--pipi-pink-dark);
}

body.pipi-admin .btn-success {
    border-color: #2f9e7d;
    background: #2f9e7d;
}

body.pipi-admin .pagination > li > a,
body.pipi-admin .pagination > li > span {
    border-color: var(--pipi-line);
    color: #6070a1;
}

body.pipi-admin .pagination > .active > a,
body.pipi-admin .pagination > li > a:hover {
    border-color: var(--pipi-blue);
    background: var(--pipi-blue);
    color: #fff;
}

body.pipi-admin .dropdown-menu {
    border: 1px solid var(--pipi-line);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(9, 14, 39, .18);
}

body.pipi-admin .site-footer {
    height: 46px;
    padding: 14px 0;
    background: var(--pipi-night-2);
    color: #8c98c2;
    font-size: 11px;
}

body.pipi-admin .go-top {
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
}

/* Encryption tool */
body.pipi-admin .pipi-encoded-upload,
body.pipi-admin .pipi-progress-meta,
body.pipi-admin .pipi-encoded-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

body.pipi-admin .pipi-encoded-upload input[type="file"] {
    min-width: 250px;
    max-width: 100%;
    padding: 8px;
    border: 1px dashed rgba(101, 133, 255, .38);
    border-radius: 6px;
    background: var(--pipi-paper-2);
}

body.pipi-admin .pipi-encoded-upload .help-block {
    flex: 1 1 100%;
    margin: 0;
}

body.pipi-admin .pipi-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

body.pipi-admin .pipi-file-preview:empty {
    display: none;
}

body.pipi-admin .pipi-file-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(101, 133, 255, .22);
    border-radius: 4px;
    background: rgba(101, 133, 255, .07);
    color: var(--pipi-ink);
    font-size: 12px;
}

body.pipi-admin .pipi-upload-status {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 3px solid var(--pipi-blue);
    background: var(--pipi-paper-2);
}

body.pipi-admin .pipi-progress-meta {
    justify-content: space-between;
    color: var(--pipi-ink);
    font-size: 13px;
}

body.pipi-admin .pipi-progress-meta strong {
    color: var(--pipi-blue);
    font-variant-numeric: tabular-nums;
}

body.pipi-admin .pipi-progress-track {
    height: 8px;
    margin: 10px 0 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #dce1f1;
}

body.pipi-admin .pipi-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--pipi-blue);
    transition: width .2s ease;
}

body.pipi-admin .pipi-upload-detail,
body.pipi-admin .pipi-toolbar-hint {
    color: var(--pipi-muted);
    font-size: 12px;
}

body.pipi-admin .pipi-upload-error {
    color: var(--pipi-danger);
}

body.pipi-admin .pipi-file-check {
    width: 38px;
    text-align: center;
}

body.pipi-admin .pipi-file-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
}

body.pipi-admin .pipi-encoded-toolbar {
    margin-top: 16px;
}

body.pipi-admin .pipi-download-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

body.pipi-admin .pipi-encoded-toolbar .btn:disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* Security tool page layout */
body.pipi-admin .pipi-admin-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--pipi-line);
}

body.pipi-admin .pipi-admin-page-head h1 {
    margin: 0;
    color: var(--pipi-ink);
    font-family: Georgia, "Microsoft YaHei", serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
}

body.pipi-admin .pipi-admin-eyebrow {
    margin: 0 0 5px;
    color: var(--pipi-blue);
    font-family: Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0;
}

body.pipi-admin .pipi-admin-page-code {
    padding-left: 10px;
    border-left: 2px solid var(--pipi-cyan);
    color: var(--pipi-muted);
    font-family: Consolas, monospace;
    font-size: 10px;
    white-space: nowrap;
}

body.pipi-admin .pipi-encoded-page .state-overview,
body.pipi-admin .pipi-safe-page .state-overview {
    display: none;
}

body.pipi-admin .pipi-encoded-page .row,
body.pipi-admin .pipi-safe-page .row {
    margin-right: 0;
    margin-left: 0;
}

body.pipi-admin .pipi-encoded-page .row > [class*="col-"],
body.pipi-admin .pipi-safe-page .row > [class*="col-"] {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

body.pipi-admin .pipi-encoded-panel,
body.pipi-admin .pipi-safe-panel {
    margin-bottom: 0;
}

body.pipi-admin .pipi-encoded-panel + .pipi-encoded-panel,
body.pipi-admin .pipi-safe-panel + .pipi-safe-panel {
    margin-top: 18px;
}

body.pipi-admin .pipi-encoded-panel .panel-heading,
body.pipi-admin .pipi-safe-panel .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.pipi-admin .pipi-encoded-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    white-space: normal !important;
}

body.pipi-admin .pipi-encoded-actions .btn {
    margin: 0;
}

body.pipi-admin .pipi-encoded-page .table {
    min-width: 760px;
}

body.pipi-admin .pipi-encoded-toolbar {
    padding-top: 2px;
}

body.pipi-admin .pipi-encoded-toolbar .pipi-download-form {
    margin-left: auto;
}

body.pipi-admin .pipi-code-viewer {
    min-height: 520px;
    padding: 16px;
    border-color: #28345f;
    background: #11162f;
    color: #dce2ff;
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 12px;
    line-height: 1.65;
    resize: vertical;
    tab-size: 4;
}

body.pipi-admin .pipi-code-viewer:focus {
    border-color: var(--pipi-cyan);
    box-shadow: 0 0 0 3px rgba(87, 215, 228, .12);
}

@keyframes pipi-scan {
    0%, 16% {
        transform: translateY(-12vh) skewY(-5deg);
    }
    76%, 100% {
        transform: translateY(960vh) skewY(-5deg);
    }
}

@keyframes pipi-dialog-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 980px) {
    .pipi-online {
        display: none;
    }

    .pipi-home-layout,
    .pipi-selfhelp-layout,
    .pipi-login-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pipi-home-layout {
        padding-top: 30px;
    }

    .pipi-character-zone {
        min-height: 410px;
    }

    .pipi-home-layout > .pipi-character-zone {
        order: -1;
    }

    .pipi-operator {
        left: 28%;
        transform: scale(.82) rotate(-4deg);
        transform-origin: top left;
    }

    .pipi-login-visual {
        min-height: 540px;
    }

    .pipi-login-card {
        margin: 0 auto;
    }

    body.pipi-admin .state-overview {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .pipi-public-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 18px 8px;
    }

    .pipi-public-nav {
        width: 100%;
    }

    .pipi-public-nav a {
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 0 8px;
    }

    .pipi-public-stage {
        min-height: 0;
        padding: 0 18px 28px;
    }

    .pipi-home-layout,
    .pipi-selfhelp-layout {
        min-height: 0;
        padding-top: 22px;
    }

    .pipi-public-copy h1,
    .pipi-selfhelp-copy h1,
    .pipi-login-visual h1 {
        font-size: 40px;
    }

    .pipi-query-inner,
    .pipi-login-card-inner {
        padding: 20px;
    }

    .pipi-query-row,
    .pipi-panel-foot,
    .pipi-login-foot {
        align-items: stretch;
        flex-direction: column;
    }

    .pipi-query-row .pipi-action-button {
        width: 100%;
        flex-basis: auto;
    }

    .pipi-action-strip,
    .pipi-selfhelp-form {
        grid-template-columns: 1fr;
    }

    .pipi-submit-button {
        grid-column: auto;
    }

    .pipi-character-zone {
        min-height: 355px;
    }

    .pipi-operator {
        left: 10%;
        transform: scale(.7) rotate(-4deg);
    }

    .pipi-terminal {
        right: -3%;
        bottom: 3%;
        transform: scale(.78) rotate(4deg);
        transform-origin: bottom right;
    }

    .pipi-public-footer {
        align-items: flex-start;
        flex-direction: column;
        width: calc(100% - 36px);
    }

    .pipi-login-topbar .pipi-back-link {
        order: 3;
    }

    .pipi-login-layout {
        min-height: 0;
        padding: 20px 18px 30px;
    }

    .pipi-login-visual {
        min-height: 455px;
        padding-top: 0;
    }

    .pipi-login-visual .pipi-operator {
        left: 10%;
        transform: scale(.7) rotate(5deg);
    }

    body.pipi-admin #main-content {
        margin-left: 0;
    }

    body.pipi-admin .wrapper {
        padding: 18px 14px 80px;
    }

    body.pipi-admin .state-overview {
        grid-template-columns: 1fr;
    }

    body.pipi-admin .state-overview .panel {
        min-height: 94px;
    }

    body.pipi-admin .state-overview .symbol {
        min-height: 94px;
    }

    body.pipi-admin .panel-body {
        padding: 14px;
    }

    body.pipi-admin .pipi-encoded-upload input[type="file"] {
        width: 100%;
        min-width: 0;
    }

    body.pipi-admin .pipi-admin-page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body.pipi-admin .pipi-admin-page-head h1 {
        font-size: 21px;
    }

    body.pipi-admin .pipi-admin-page-code {
        padding-left: 8px;
    }

    body.pipi-admin .pipi-encoded-page .table {
        min-width: 700px;
    }

    body.pipi-admin .pipi-encoded-toolbar .pipi-download-form {
        margin-left: 0;
    }

    body.pipi-admin .pipi-code-viewer {
        min-height: 360px;
    }

    body.pipi-admin .pipi-encoded-upload .btn,
    body.pipi-admin .pipi-download-form,
    body.pipi-admin .pipi-download-form .btn,
    body.pipi-admin #encoded-batch-encode {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.pipi-query-page:after,
    body.login-body.pipi-login:after {
        animation: none;
    }

    .pipi-character-zone,
    .pipi-action-button,
    .pipi-action-strip > a,
    body.pipi-admin .btn {
        transition: none;
    }
}