* {
    margin: 0;
    padding: 0;
    font-family: '思源黑体', 'Microsoft YaHei', sans-serif;
}

:root {
    --text-primary: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --text-placeholder: #a8abb2;

    --border-coler: #AAAAAA;
    --box-shadow: 0 2px 16px rgba(128, 128, 128, 0.35);

    --page-bgcolor: #FAFAFA;
    --input-bgcolor: #FFFFFF;
    --input-color: var(--text-primary);

    --checkbox-corner-marker-color: rgba(255, 255, 255, 0.5);

    font-size: var(--font-size-base);
}

.scheme-dark-only {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not(.prefers-color-scheme-light) {
        --text-primary: #BEC1C6;
        --text-regular: #9C9EA6;
        --text-secondary: #747780;
        --text-placeholder: #5B5E66;
    
        --border-coler: #666666;
        --box-shadow: 0 2px 16px rgba(128, 128, 128, 0.35);
    
        --page-bgcolor: #1E2129;
        --input-bgcolor: #333740;
        --input-color: var(--text-primary);

        --checkbox-corner-marker-color: rgba(30, 33, 41, 0.5);
    }

    .scheme-dark-only {
        display: block;
    }

    .scheme-light-only {
        display: none;
    }
}

.prefers-color-scheme-dark {
    --text-primary: #BEC1C6;
    --text-regular: #9C9EA6;
    --text-secondary: #747780;
    --text-placeholder: #5B5E66;

    --border-coler: #666666;
    --box-shadow: 0 2px 16px rgba(128, 128, 128, 0.35);

    --page-bgcolor: #1E2129;
    --input-bgcolor: #333740;
    --input-color: var(--text-primary);

    --checkbox-corner-marker-color: rgba(30, 33, 41, 0.5);
}

.prefers-color-scheme-dark .scheme-light-only {
    display: none;
}

.prefers-color-scheme-dark .scheme-dark-only {
    display: block;
}

body {
    overflow-y: scroll;
    background-color: var(--page-bgcolor);
}

main {
    width: min(1000px, calc(100vw - 32px));
    margin: 0 auto;
}

kbd {
    display: inline-flex;
    background-color: #000000;
    border-radius: 4px;
    color: #FFFFFF;
    min-width: 1em;
    height: 1.5em;
    padding: 0 0.25em;
    align-items: center;
    justify-content: center;
    border: #888888 1px solid;
    border-bottom: #888888 4px solid;
    opacity: 1;
    transition: opacity .15s;
}

kbd.accessible-key {
    pointer-events: none;
}

textarea.code,
input.code {
    font-family: Monaco, Consolas,'Lucida Console', 'Courier New', serif;
}

.tabpage-nav {
    border-bottom: var(--border-coler) 1px solid;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--font-size-middle);
    --corner-marker-color: rgba(0, 0, 0, 0.25);
    background-image: var(--corner-marker);
    background-color: var(--page-bgcolor);
    position: sticky;
    top: 0;
    z-index: 100;
}

.tabpage-centent .tabpage-nav {
    position: unset;
    top: unset;
}

.tabpage-nav-item {
    flex: 1 0 80px;
    border: unset;
    border-bottom: transparent 4px solid;
    background-color: unset;
    font-size: var(--font-size-middle);
    padding: 0.5em 1em;
    cursor: pointer;
    display: inline-block;
    color: var(--text-secondary);
    transition: color .3s, border .3s;
}

.tabpage-nav-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabpage-nav-item[aria-selected="true"] {
    border-bottom: var(--color-general-dark) 4px solid;
    color: var(--text-primary);
}

.tabpage-nav-item.fh-effect-flicker {
    animation: fh-effect-flicker .3s ease-out 1;
}

@keyframes fh-effect-flicker {
    0% {
        background-color: var(--color-general-glass);
        box-shadow: 0 0 0 0 var(--color-general-glass);
        filter: brightness(1.3);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 16px transparent;
        filter: brightness(1);
    }
}



.fh-button.hide,
.tabpage-panel.hide,
.tabpage-nav-item.hide,
.collapse-content.hide,
.print-speed-change.hide,
#log-message-mark.hide,
.echo-live-client-state.hide,
.history-message-item .sent.hide,
.palette-page.hide {
    display: none;
}

.tabpage-panel-title {
    font-size: 0;
}

.echo-editor-form label,
.echo-editor-form textarea {
    display: block;
}

.echo-editor-form label {
    padding: 0.25em 0;
    color: var(--text-regular);
}

.echo-editor-form textarea {
    resize: vertical;
    width: 100%;
    min-height: 100px;
    font-size: var(--font-size-middle);
    box-sizing: border-box;
    padding: 0.5em;
    border: unset;
    border-bottom: var(--border-coler) 1px solid;
    outline: none;
    background-color: var(--input-bgcolor);
    transition: border .3s;
    color: var(--input-color);
}

.echo-editor-form textarea:focus {
    border-bottom: var(--color-general) 1px solid;
}

.editor-container {
    background-color: var(--page-bgcolor);
}

.editor-container.webscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.editor-container.webscreen #ptext-content {
    resize: none;
    height: calc(100vh - 68px);
}

.editor-controller-bottom {
    padding: 16px 0;
    margin-top: -1px;
    border-top: var(--border-coler) 1px solid;
    position: sticky;
    bottom: 0;
    background-color: var(--page-bgcolor);
}

.editor-controller-bottom>* {
    flex: 1;
    margin: 0;
}

.editor-controller-bottom>*+* {
    margin-left: 16px;
}

.editor-controller {
    display: flex;
    padding: 8px 0 0 0;
    opacity: 1;
    flex-wrap: wrap;
}

.editor-controller.disabled {
    pointer-events: none;
    opacity: 0;
}

.editor-controller+label {
    opacity: 0;
    pointer-events: none;
    margin: 0 2px;
    height: 24px;
    line-height: 24px;
    margin-top: -32px;
}

.editor-controller.disabled+label{
    opacity: 1;
    pointer-events: all;
}

.editor-controller .fh-icon-button>svg {
    width: 28px;
    height: 28px;
}

.editor-bottom-bar {
    text-align: right;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-size: var(--font-size-small);
}

#output-content {
    height: 50vh;
}

.collapse-title {
    border-top: var(--border-coler) 1px solid;
    border-bottom: var(--border-coler) 1px solid;
    display: flex;
}

.collapse+.collapse>.collapse-title {
    border-top: unset;
}

.collapse-content {
    border-bottom: var(--border-coler) 1px solid;
}

.collapse-title button {
    flex: 1;
}

.checkbox {
    display: flex;
    background-color: transparent;
    border: unset;
    padding: 0.5em;
    box-sizing: border-box;
    cursor: pointer;
    font-size: var(--font-size-middle);
    text-align: left;
    align-items: center;
    color: var(--text-regular);
}

.checkbox .icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    box-sizing: border-box;
    border: var(--color-general-dark) 1px solid;
    margin-right: 0.5em;
    --corner-marker-color: var(--color-general-dark);
    background-image: var(--corner-marker);
}

.checkbox .text {
    position: relative;
    top: -0.05em;
}

.checkbox:hover .icon {
    background-color: var(--color-general-glass);
}

.checkbox.selected .icon {
    --corner-marker-color: var(--checkbox-corner-marker-color);
    background-color: var(--color-general-dark);
    border: unset;
}

.checkbox:hover {
    filter: brightness(1.15);
}

.checkbox:active {
    transition: filter 0s, background-color 0s, box-shadow var(--animation-speed-button-switch);
    filter: brightness(0.85);
}

.echo-editor-form-row {
    display: flex;
    padding: 0.5em;
    align-items: flex-start;
}

.echo-editor-form-row>label {
    width: 200px;
}

@media screen and (max-width: 760px) {
    .echo-editor-form-row>label {
        width: 150px;
    }
}

@media screen and (max-width: 450px) {
    .echo-editor-form-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

.echo-editor-form-row>input {
    flex: 1;
}

.echo-editor-form-checkbox-list {
    width: calc(100% - 200px);
    margin-left: 200px;
}

@media screen and (max-width: 760px) {
    .echo-editor-form-checkbox-list {
        width: calc(100% - 150px);
        margin-left: 150px;
    }
}

@media screen and (max-width: 450px) {
    .echo-editor-form-checkbox-list {
        width: 100%;
        margin-left: 0;
    }
}

.echo-editor-form-input-tip {
    padding-bottom: 0.5em;
    padding-left: 1em;
    color: var(--text-secondary);
    display: block;
    font-size: var(--font-size-small);
}

input[type=number],
input[type=text],
input[type=password] {
    width: 100%;
    font-size: var(--font-size-middle);
    box-sizing: border-box;
    padding: 0.25em 0.5em;
    border: unset;
    border-bottom: var(--border-coler) 1px solid;
    outline: none;
    background-color: var(--input-bgcolor);
    transition: border .3s;
    height: 32px;
    color: var(--input-color);
}

input[type=number]:focus,
input[type=text]:focus,
input[type=password]:focus {
    border-bottom: var(--color-general) 1px solid;
}

input[type=number]:out-of-range,
input[type=text]:out-of-range {
    border-bottom: var(--color-danger) 1px solid;
}

select {
    width: 100%;
    font-size: var(--font-size-middle);
    box-sizing: border-box;
    padding: 0.25em 0.5em;
    border: unset;
    border-bottom: var(--border-coler) 1px solid;
    outline: none;
    background-color: var(--input-bgcolor);
    transition: border .3s;
    cursor: pointer;
    color: var(--input-color);
    height: 32px;
}

select:focus {
    border-bottom: var(--color-general) 1px solid;
}



.editor-text {
    display: flex;
}

.editor-text-item {
    flex: 2;
    margin-right: 16px;
}

.editor-text-list {
    flex: 1;
}

.editor-text-controller {
    display: flex;
    align-items: center;
}

.editor-text-controller .checkbox {
    display: inline-flex;
}

.editor-text-list-item {
    display: flex;
    align-items: center;
    border-bottom: var(--border-coler) 1px solid;
    padding: 0.25em 0;
    justify-content: space-between;
}

.editor-text-list-item .index {
    margin-right: 0.25em;
    color: var(--text-secondary);
}

.editor-text-list-item .text {
    width: 180px;
    height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.editor-text-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#editor-log {
    background-color: var(--input-bgcolor);
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 80px);
    overflow-y: scroll;
    font-family: Monaco, Consolas, 'Lucida Console', 'Courier New', serif;
    padding: 8px;
    color: var(--text-primary);
}

#editor-log>div>span {
    font-family: Monaco, Consolas, 'Lucida Console', 'Courier New', serif;
}

#editor-log .log-item {
    padding-left: 14.2em;
    text-indent: -14.2em;
}

#editor-log .log-type-dbug {
    color: var(--text-placeholder);
}

#editor-log .log-type-tips {
    color: var(--color-general-dark);
}

#editor-log .log-type-done {
    color: var(--color-safe-dark);
}

#editor-log .log-type-warn {
    color: var(--color-warn-dark);
}

#editor-log .log-type-erro {
    color: var(--color-danger-dark);
}

#editor-log .log-type-info i {
    color: var(--text-placeholder);
}

#log-message-mark {
    background-color: var(--color-danger-dark);
    color: #FFF;
    font-size: var(--font-size-extra-small);
    padding: 0 4px;
    display: inline-block;
    min-width: var(--font-size-extra-small);
    border-radius: 8px;
    position: relative;
    top: -4px;
}

@media screen and (max-width: 760px) {
    #editor-log {
        font-size: var(--font-size-small);
    }

    #editor-log .log-item {
        padding-left: 0;
        text-indent: 0;
    }
}

@media screen and (max-width: 450px) {
    #editor-log {
        font-size: var(--font-size-extra-small);
    }

    #editor-log .log-item {
        padding-left: 0;
        text-indent: 0;
    }
}

.echo-live-client-state {
    margin-bottom: 8px;
}

.echo-live-client-state-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.echo-live-client-state-block {
    flex: 1;
    min-width: calc(10em + 48px);
    display: flex;
    flex-direction: column;
    background-color: var(--input-bgcolor);
    cursor: pointer;
    border: none;
    font-size: var(--font-size-middle);
    align-items: stretch;
    color: var(--text-primary);
}

.echo-live-client-state-block:active {
    filter: brightness(0.9);
}

/* .echo-live-client-state-block.state-active {
    background-color: var(--color-safe-dark);
}

.echo-live-client-state-block.state-sleep {
    background-color: var(--color-danger-dark);
} */

.echo-live-client-state-block .client-info {
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.echo-live-client-state-block.echo-state-play .client-info {
    background-image: url(../image/editor/bg-echo-state-play.svg);
    background-size: 2rem;
    animation: echo-live-client-state-block-bg-echo-state-play 1s linear 0s infinite;
}

@keyframes echo-live-client-state-block-bg-echo-state-play {
    0% { background-position: 0rem 0rem; }
    100% { background-position: 0rem 2rem; }
}

.echo-live-client-state-block .client-info .client-icon {
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.echo-live-client-state-block .client-info .client-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
}

.echo-live-client-state-block .client-info .client-name {
    flex: 1;
    text-align: center;
}

.echo-live-client-state-block .state-color-block {
    height: 8px;
    box-sizing: border-box;
    background-color: #EEEEEE;
}

.echo-live-client-state-block.state-active .state-color-block {
    background-color: var(--color-safe-dark);
}

.echo-live-client-state-block.state-sleep .state-color-block {
    background-color: var(--color-danger-dark);
}



#history-message-list {
    min-height: calc(100vh - 200px);
}

.history-message-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: var(--border-coler) 1px solid;
    background-color: transparent;
    transition: background-color .3s;
}

.history-message-item:hover {
    background-color: var(--input-bgcolor);
}

.history-message-item .content {
    flex: 1;
}

.history-message-item .content .username {
    color: var(--text-regular);
    word-break: break-word;
}

.history-message-item .content .message {
    color: var(--text-primary);
    padding-left: 1em;
    padding-bottom: 4px;
    word-break: break-word;
}

.history-message-item .content .length {
    color: var(--text-secondary);
    padding-left: 1em;
}

.history-message-item .content .time {
    color: var(--text-secondary);
    font-size: var(--font-size-extra-small);
}

.history-message-item .action {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media screen and (max-width: 450px) {
    .history-message-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-message-item .content .time {
        display: flex;
        flex-direction: column;
    }

    .history-message-item .action {
        margin-top: 8px;
        width: 100%;
    }

    .history-message-item .action>button {
        flex: 1;
    }
}


/* 悬浮框 */
.fh-popups {
    --popups-pos-left: 0px;
    --popups-pos-top: 0px;
    --popups-width-min: unset;
    --popups-width-max: unset;
    --popups-height-min: unset;
    --popups-height-max: unset;

    position: absolute;
    display: block;
    box-sizing: border-box;
    background-color: var(--input-bgcolor);
    z-index: 2000;
    left: var(--popups-pos-left);
    top: var(--popups-pos-top);
    min-width: min(var(--popups-width-min), calc(100vw - 32px));
    max-width: min(var(--popups-width-max), calc(100vw - 32px));
    min-height: var(--popups-height-min);
    max-height: var(--popups-height-max);
    border: var(--border-coler) 1px solid;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    opacity: 1;
    transition: opacity .3s;
}

.fh-popups.hide {
    opacity: 0;
    pointer-events: none;
}

#popups-palette {
    --ex-height: 0px;
    min-height: calc(var(--popups-height-min) + var(--ex-height));
    max-height: calc(var(--popups-height-max) + var(--ex-height));
    display: flex;
    flex-direction: column;
    background-color: var(--page-bgcolor);
}

#popups-palette.color-contrast-enable {
    --ex-height: 60px;
}

#popups-palette .popups-palette-header {
    padding: 8px;
    border-bottom: var(--border-coler) 1px solid;
}

#popups-palette .popups-palette-select-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

#popups-palette:not(:focus-within) .popups-palette-select-content kbd {
    opacity: 0.15;
}

#popups-palette .popups-palette-content {
    padding: 8px;
    flex: 1;
    overflow-y: scroll;
}

#popups-palette .palette-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#popups-palette .palette-group {
    margin-top: 8px;
    margin-bottom: 4px;
    color: var(--text-regular);
    font-size: var(--font-size-small);
    border-bottom: var(--border-coler) 1px solid;
}

#popups-palette .color-box {
    --color: transparent;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAGklEQVQImQXBAQEAAAgCIPt/TTcRHGxL2oIHemcNxGayu3QAAAAASUVORK5CYII=");
    image-rendering: pixelated;
    background-size: 100%;
    border: var(--border-coler) 1px solid;
    cursor: pointer;
    transition: transform .15s;
    outline: none;
}

#popups-palette .color-box:hover,
#popups-palette .color-box:focus-visible {
    transform: scale(1.15);
}

#popups-palette .color-box:active {
    transform: scale(1);
    transition: transform 0s;
}

#popups-palette .color-box .color {
    width: 100%;
    height: 100%;
    background-color: var(--color);
}

#popups-palette .popups-palette-accessible {
    display: none;
    /* display: flex; */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 0 16px;
    box-sizing: border-box;
    max-height: 48px;
    min-height: 48px;
    border-top: var(--border-coler) 1px solid;
}

#popups-palette .popups-palette-color-contrast {
    min-height: 60px;
    max-height: 60px;
    box-sizing: border-box;
    display: none;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    padding: 8px;
    gap: 8px;
    border-bottom: var(--border-coler) 1px solid;
}

#popups-palette.color-contrast-enable .popups-palette-color-contrast {
    display: flex;
}

#popups-palette .popups-palette-color-contrast .diff-dashboard {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    border: var(--border-coler) 1px solid;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAGklEQVQImQXBAQEAAAgCIPt/TTcRHGxL2oIHemcNxGayu3QAAAAASUVORK5CYII=");
    image-rendering: pixelated;
    background-size: 12px;
}

#popups-palette .popups-palette-color-contrast .diff-dashboard>div {
    --bg-color: unset;
    --fg-color: unset;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#popups-palette .popups-palette-color-contrast .diff-dashboard .diff-bg {
    background-color: var(--bg-color);
    color: var(--fg-color);
}

#popups-palette .popups-palette-color-contrast .diff-dashboard .diff-fg {
    background-color: var(--fg-color);
}

#popups-palette .popups-palette-color-contrast .diff-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#popups-palette .popups-palette-color-contrast .diff-result-content:not(.hide) {
    --size: 44px;
    height: var(--size);
    width: var(--size);
    color: var(--color-safe-dark);
    fill: var(--color-safe-dark);
    font-size: var(--font-size-small);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: calc(var(--size) / 2);
    border: var(--color-safe-dark) 1px solid;
}

#popups-palette .diff-result-box.state-ok .diff-result-content.fail,
#popups-palette .diff-result-box.state-fail .diff-result-content.ok {
    display: none;
}

#popups-palette .popups-palette-color-contrast .diff-result-content.fail {
    background-color: var(--color-danger-dark);
    border: var(--color-danger-dark) 1px solid;
    fill: #FFFFFF;
    color: #FFFFFF;
}

#popups-palette .popups-palette-color-contrast .diff-result-content .icon {
    --size: 16px;
    height: var(--size);
    width: var(--size);
}

.popups-palette-accessible {
    color: var(--text-regular);
}