/* ------------------------ 微课实战页：前端(play_challenges) + 后端(play_alg) ------------------------ */

html, body { min-width: 1200px; height: 100%; }
code { margin: 0 5px; padding: 2px 4px; background-color: #f9f2f4; border-radius: 4px; font-size: 90%; color: #c7254e; }



/* ======= 滚动条样式优化：仅支持 webkit ======= */
#play-main .sider::-webkit-scrollbar,
#codecamp-rules .tabs-content .tabs-panel::-webkit-scrollbar,
.codecamp-result-js::-webkit-scrollbar,
.codecamp-result-backend::-webkit-scrollbar { width: 7px; background-color: #fff; }

#play-main .sider::-webkit-scrollbar-thumb,
#codecamp-rules .tabs-content .tabs-panel::-webkit-scrollbar-thumb,
.codecamp-result-js::-webkit-scrollbar-thumb,
.codecamp-result-backend::-webkit-scrollbar-thumb { background-color: #dadae4; border-radius: 6px; }



/* ======= header：为了展示头部的 box-shadow ======= */
#course_header { position: relative; z-index: 9; }




/* ======= Main ======= */
#play-main { position: relative; height: calc(100vh - 48px - 55px); }
/* @media (max-width: 1199px) {
    #play-main { height: auto; padding: 48px 0 55px; }
} */


/* sider */
#play-main .sider { overflow-x: hidden; box-sizing: content-box; position: absolute; top: 0; left: -59px; z-index: 8; width: 0; height: 100%; background-color: #fff; -webkit-transition: width .28s ease-in-out; transition: width .28s ease-in-out; }
#play-main.opensider .sider { width: 340px; border-right: 1px solid #e8e8e8; }
#play-main .sider-inner { width: 340px; }
#play-main .sider-left{left: -60px;}

/* 实战规则 */
#codecamp-rules { overflow-x: hidden; }
#codecamp-rules, .codecamp-rules-wrap { height: 100%; }
.codecamp-rules-wrap { min-width: 400px; }

#codecamp-rules .tabs-bar { background-color: #dbe7f9; font-size: 15px; }
#codecamp-rules .tabs-bar > .tab-wrap { padding: 0 6%; }
#codecamp-rules .tabs-bar .tab { box-sizing: border-box; height: 48px; line-height: 48px; font-weight: 600; color: #31285d; cursor: pointer; transition: color .4s; }
#codecamp-rules .tabs-bar .tab.on { border-bottom: 2px solid #675f8f; }

#codecamp-rules .tabs-content { overflow: hidden; height: calc(100% - 48px); }
#codecamp-rules .tabs-content > .tabs-panel-container { height: 100%; }
#codecamp-rules .tabs-content > .tabs-panel-container.two { width: 200%; height: 100%; }
#codecamp-rules .tabs-content > .tabs-panel-container.three { width: 300%; height: 100%; }
#codecamp-rules .tabs-content .tabs-panel { overflow-y: auto; height: 100%; padding: 25px 3%; }

.codecamp-rules-detail .title { font-size: 22px; font-weight: 600; line-height: 1; }
.codecamp-rules-detail hr { height: 1px; margin: 20px 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); border: none; }
.codecamp-rules-detail .cell + .cell { margin-top: 24px; }
.codecamp-rules-detail .cell-title { margin-bottom: 8px; font-size: 20px; color: #3091f2; }

.codecamp-rules-validate {
    margin-left: -15px;
}
.codecamp-rules-validate .validate-icon { font-size: 26px; }
.codecamp-rules-validate .validate-icon > .i-icon { vertical-align: baseline; }
.codecamp-rules-validate .validate-icon > .i-icon-delete { color: #d9534f; }
.codecamp-rules-validate .validate-icon > .i-icon-correct { color: #4CAF50; }
.codecamp-rules-validate .validate-word { margin-top: 8px; font-size: 15px; }

.codecamp-rules-solutions .cell + .cell { margin-top: 24px; }
.codecamp-rules-solutions .cell-title { margin-bottom: 8px; font-size: 20px; color: #3091f2; }



/* ↓↓↓↓↓↓↓ 代码编辑区 与 运行结果区 ↓↓↓↓↓↓↓ */
.codecamp-editor-and-result { height: 100%; }

/* 左右布局 */
.left-and-right #codecamp-editor,
.left-and-right #codecamp-result { height: 100%; }

/* 上下布局 */
.up-and-down #codecamp-editor { height: 70%; }
.up-and-down #codecamp-result { height: 30%; }


.codecamp-editor-top, .codecamp-editor-bottom, .codecamp-result-top { height: 48px; line-height: 48px; font-size: 15px; font-weight: 600; }
.codecamp-editor-top .i-icon, .codecamp-editor-bottom .i-icon, .codecamp-result-top .i-icon { vertical-align: baseline; }

/* 实战代码编辑区 */
.codecamp-editor-top, .codecamp-editor-bottom { background-color: #2d3143; color: #ddd; }
.codecamp-editor-top { padding: 0 18px; font-weight: normal; }
.codecamp-editor-top .zoom { cursor: pointer; }

.codecamp-editor-top .select { height: 32px; margin: 8px 12px; padding: 0 8px; font-size: 14px; border: 2px solid #dcdee2; border-radius: 4px; cursor: pointer; -webkit-transition: border-color .24s ease; transition: border-color .24s ease; }
.codecamp-editor-top .select:hover, .codecamp-editor-top .select:focus { border-color: #57a3f3; }
#code-langs-select { width: 100px; }

.codecamp-editor-area { position: relative; height: calc(100% - 48px - 48px); }

.codecamp-editor-bottom .icon { margin-right: 4px; }
.codecamp-editor-bottom .codecamp-btn { cursor: pointer; transition: background-color .4s; }
.codecamp-editor-bottom .codecamp-btn:hover { background-color: #4e39ff; }
.codecamp-editor-bottom .codecamp-btn > a { display: block; color: #ddd; }
.codecamp-editor-bottom .codecamp-btn-run { background-color: #4b35ef; }

.codecamp-editor-dragbar { z-index: 99; position: absolute; top: 0; left: 0; bottom: 0; width: 8px; background-color: transparent; cursor: col-resize; }

.pick-answer { width: 16.666666%; }

/* ace 代码编辑元素 */
#code-editor { height: 100%; }


/* 实战运行结果 */
.codecamp-result-top { padding: 0 18px; color: #31285d; background-color: #dbe7f9; }
.codecamp-result-top .switch-btn { padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: all 0.24s; }
.codecamp-result-top .switch-btn.active { color: #ddd; background-color: #4b35ef; }
.codecamp-result-area { height: calc(100% - 48px); }


/* html运行 */
.codecamp-result-layout-center { position: relative; overflow-x: hidden; height: 100%; text-align: center; }
.codecamp-result-layout-center::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.codecamp-result-layout-center .codecamp-result-iphone { position: relative; display: inline-block; padding: 15px 0; vertical-align: middle; }
.codecamp-result-layout-center .codecamp-result-iphone > .iphone-img { width: 300px; }
.codecamp-result-layout-center .codecamp-result-iphone > iframe { position: absolute; top: 85px; left: 22px; box-sizing: border-box; width: 257px; height: 459px; padding: 8px 5px; border: none; }

/* js运行 */
.codecamp-result-js { overflow-y: auto; box-sizing: border-box; height: 100%; padding: 12px 18px; }
.codecamp-main-loen .codecamp-result-js {
    padding: 0;
}
.codecamp-result-js > .js-tip { margin-bottom: 12px; }
.codecamp-result-top .js-tip { font-weight: normal; font-size: 12px;}

/* 后端语言运行 */
.codecamp-result-backend { overflow: auto; height: 100%; padding: 12px 18px; font-size: 14px; }

.codecamp-result-backend .status-tag { display: inline-block; height: 32px; padding: 0 12px; line-height: 30px; border: 1px solid #e8eaec; border-radius: 4px; }
.codecamp-result-backend .status-tag > span { vertical-align: middle; }
.codecamp-result-backend .status-tag .dot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background-color: #2d8cf0; }

.codecamp-result-backend .stdout { margin-top: 12px; }
#code-stdout { overflow-x: hidden; height: 120px; }


/* ↓↓↓↓↓↓↓ modal ↓↓↓↓↓↓↓ */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; overflow-x: hidden; overflow-y: auto; }

.modal-dialog { width: 600px; margin: 30px auto 0; box-shadow: 0 5px 15px rgba(0, 0, 0, .5); }
.modal-dialog > .modal-header { position: relative; background-color: #4caf50; border-radius: 6px 6px 0 0; color: #eee; font-size: 30px; line-height: 80px; }
.modal-dialog > .modal-header > .close { position: absolute; top: 20px; right: 20px; font-size: 40px; line-height: 1; opacity: .2; cursor: pointer; }
.modal-dialog > .modal-header > .close:hover { color: #fff; opacity: .5; }
.modal-dialog > .modal-header > .close > .icon { vertical-align: bottom; }

.modal-dialog > .modal-body { padding: 15px; background-color: #fff; }
.modal-dialog > .modal-body > .modal-body-content { font-size: 22px; font-weight: 500; }
.modal-dialog > .modal-body > .modal-body-content > p { margin-top: 20px; }
.modal-dialog > .modal-body > .modal-body-btns { margin-top: 20px; }
.modal-dialog > .modal-body .modal-btn { padding: 8px 0; border: 1px solid transparent; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.2s ease-in-out; }
.modal-dialog > .modal-body .modal-btn + .modal-btn { margin-top: 5px; }
.modal-dialog > .modal-body .modal-btn-wraning { color: #f0ad4e; border-color: #eea236;}
.modal-dialog > .modal-body .modal-btn-wraning:hover { background-color: #f0ad4e; border-color: #d58512; color: #eee; }
.modal-dialog > .modal-body .modal-btn-success { color: #4caf50; border-color: #449d48; }
.modal-dialog > .modal-body .modal-btn-success:hover { background-color: #4caf50; border-color: #327334; color: #eee; }

#complete-modal .modal-body-content { height: 214px; line-height: 214px; font-size: 130px; color: #4dae51;}

/* 遮罩层 */
.modal-backdrop { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 998; background-color: rgba(0, 0, 0, .5); }


/* ↓↓↓↓↓↓↓ 动画效果 ↓↓↓↓↓↓↓ */
.animation {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
            animation-fill-mode: both;
}
.fast-animation {
    -webkit-animation-duration: .5s;
       -moz-animation-duration: .5s;
            animation-duration: .5s;
}

/* 淡入 */
.fadeIn {
    -webkit-animation-name: fadeIn;
       -moz-animation-name: fadeIn;
            animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 淡入 + 升起 */
.fadeInUp {
    -webkit-animation-name: fadeInUp;
       -moz-animation-name: fadeInUp;
            animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(100%); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInUp {
    0% { opacity: 0; -moz-transform: translateY(100%); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 放大 + 掉落 */
.zoomInDown {
    -webkit-animation-name: zoomInDown;
       -moz-animation-name: zoomInDown;
            animation-name: zoomInDown;
}
@-webkit-keyframes zoomInDown {
    0% { opacity: 0; -webkit-transform: translateY(-1000px) scale3d(.1, .1, .1); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
    60% { opacity: 1; -webkit-transform: translateY(60px) scale3d(.475, .475, .475); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
    100% { -webkit-transform: translateY(0) scale3d(1, 1, 1); }
}
@-moz-keyframes zoomInDown {
    0% { opacity: 0; -moz-transform: translateY(-1000px) scale3d(.1, .1, .1); -moz-animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
    60% { opacity: 1; -moz-transform: translateY(60px) scale3d(.475, .475, .475); -moz-animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
    100% { -moz-transform: translateY(0) scale3d(1, 1, 1); }
}
@keyframes zoomInDown {
    0% { opacity: 0; transform: translateY(-1000px) scale3d(.1, .1, .1); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
    60% { opacity: 1; transform: translateY(60px) scale3d(.475, .475, .475); animation-timing-function: cubic-bezier(.175, .885, .32, 1); }
    100% { transform: translateY(0) scale3d(1, 1, 1); }
}
.help-wechat-qrcode{
    text-align:center
}

.help-wechat-tip{
    text-align:center;
    font-weight:bold;
    font-size: larger;
    

}

.rich-text img {
    width: auto;
    max-width: 1000px;
}

/* 偷看答案提示 */
.toPeekAnswer-tip-mask { position: fixed; top: 0px; left: 0px; background-color: rgba(000,000,000,0.8); z-index: 1200; opacity: 0; width: 100%; height: 100%; }
.toPeekAnswer-tip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 16px; max-width: 524px; padding: 26px 68px 45px; height: auto; }
.toPeekAnswer-tip .toPeekAnswer-tip-title { position: relative; text-align: center; }
.toPeekAnswer-tip .toPeekAnswer-tip-title h1 { color: #3e3e3e; font-size: 26px; font-weight: normal; }
.toPeekAnswer-tip .toPeekAnswer-tip-title i { position: absolute; color: #CCCCCC; cursor: pointer; top: -7px; right: -50px; font-size: 28px; }
.toPeekAnswer-tip .toPeekAnswer-tip-title i:hover { color: #a6a6a6; }
.toPeekAnswer-tip .toPeekAnswer-tip-main { font-size: 20px; margin: 20px 0 30px; text-align: justify; }
.toPeekAnswer-tip .toPeekAnswer-tip-footer { display: flex; justify-content: space-between; align-items: center; display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; }
.toPeekAnswer-tip .toPeekAnswer-tip-footer .toPeekAnswer-tip-confirm, .toPeekAnswer-tip .toPeekAnswer-tip-footer .toPeekAnswer-tip-cancel { border-radius: 4px; padding: 8px 0; width: 130px; text-align: center; cursor: pointer; transition: all 0.14s linear; font-size: 18px; }
.toPeekAnswer-tip .toPeekAnswer-tip-footer .toPeekAnswer-tip-confirm { background: #fff; border: 1px solid #597EF7; color: #597EF7; }
.toPeekAnswer-tip .toPeekAnswer-tip-footer .toPeekAnswer-tip-cancel { background: #597EF7; border: 1px solid #597EF7; color: #fff; }
.toPeekAnswer-tip .toPeekAnswer-tip-footer .toPeekAnswer-tip-confirm:hover { background: #597EF7; color: #fff; }
.toPeekAnswer-tip .toPeekAnswer-tip-footer .toPeekAnswer-tip-cancel:hover { background: #3c68f6; border: 1px solid #3c68f6; }

/* 复制成功提示 */
.copytip-success { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.4); border-radius: 4px; font-size: 16px; z-index: 9999; opacity: 0; }
.copytip-success .copytip-wrap { display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; padding: 15px 15px 15px 30px; color: #f5f5f5; }
.copytip-success .copytip-wrap i { font-size: 18px; padding-right: 10px;}

/* ↓↓↓↓↓↓↓ response ↓↓↓↓↓↓↓ */
/* @media (max-width: 1199px) {
    #codecamp-rules > .dragbar, #submitButton > .shortcut { display: none; }

    .feedback-Box-content { width: auto !important; max-width: 662px; margin: 10px; }
    .feedback-text { width: 100%; max-width: 600px; }
}
@media (max-width: 767px) {
    .modal-dialog { width: auto; margin: 10px; }
} */