blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul {
    margin:0;
    padding:0
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:400
}
ul {
    list-style:none
}
button,input,select,textarea {
    margin:0
}
html {
    box-sizing:border-box
}
*,::after,::before {
    box-sizing:inherit
}
img,video {
    height:auto;
    max-width:100%
}
iframe {
    border:0
}
table {
    border-collapse:collapse;
    border-spacing:0
}
td,th {
    padding:0
}
td:not([align]),th:not([align]) {
    text-align:inherit
}

/* ===== 2. 全局设置 ===== */
html {
    background-color:#fff;
    font-size:16px;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    min-width:300px;
    overflow-x:hidden;
    overflow-y:scroll;
    text-rendering:optimizeLegibility;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    text-size-adjust:100%
}
article,aside,figure,footer,header,hgroup,section {
    display:block
}
body,button,input,optgroup,select,textarea {
    font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}
code,pre {
    -moz-osx-font-smoothing:auto;
    -webkit-font-smoothing:auto;
    font-family:monospace
}
body {
    color:#4a4a4a;
    font-size:1em;
    font-weight:400;
    line-height:1.5
}
a {
    color:#485fc7;
    cursor:pointer;
    text-decoration:none
}
a strong {
    color:currentColor
}
a:hover {
    color:#363636
}
code {
    background-color:#f5f5f5;
    color:#da1039;
    font-size:.875em;
    font-weight:400;
    padding:.25em .5em .25em
}
hr {
    background-color:#f5f5f5;
    border:none;
    display:block;
    height:2px;
    margin:1.5rem 0
}
img {
    height:auto;
    max-width:100%
}
input[type=checkbox],input[type=radio] {
    vertical-align:baseline
}
small {
    font-size:.875em
}
span {
    font-style:inherit;
    font-weight:inherit
}
strong {
    color:#363636;
    font-weight:700
}
fieldset {
    border:none
}
pre {
    -webkit-overflow-scrolling:touch;
    background-color:#f5f5f5;
    color:#4a4a4a;
    font-size:.875em;
    overflow-x:auto;
    padding:1.25rem 1.5rem;
    white-space:pre;
    word-wrap:normal
}
pre code {
    background-color:transparent;
    color:currentColor;
    font-size:1em;
    padding:0
}
table td,table th {
    vertical-align:top
}
table td:not([align]),table th:not([align]) {
    text-align:inherit
}
table th {
    color:#363636
}


/* ===== 4. 通用工具类（合并重复） ===== */
.button,
.delete,
.file-cta,
.file-name,
.input,
.modal-close,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select select,
.textarea {
    -moz-appearance:none;
    -webkit-appearance:none
}
.button,
.file-cta,
.file-name,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select select,
.textarea {
    align-items:center;
    border:1px solid transparent;
    border-radius:4px;
    box-shadow:none;
    display:inline-flex;
    font-size:1rem;
    height:2.5em;
    justify-content:flex-start;
    line-height:1.5;
    padding:calc(.5em - 1px) calc(.75em - 1px);
    position:relative;
    vertical-align:top
}

.button:active,
.button:focus,
.file-cta:active,
.file-cta:focus,
.file-name:active,
.file-name:focus,
.input:active,
.input:focus,
.is-active.button,
.is-active.file-cta,
.is-active.file-name,
.is-active.input,
.is-active.pagination-ellipsis,
.is-active.pagination-link,
.is-active.pagination-next,
.is-active.pagination-previous,
.is-active.textarea,
.is-focused.button,
.is-focused.file-cta,
.is-focused.file-name,
.is-focused.input,
.is-focused.pagination-ellipsis,
.is-focused.pagination-link,
.is-focused.pagination-next,
.is-focused.pagination-previous,
.is-focused.textarea,
.pagination-ellipsis:active,
.pagination-ellipsis:focus,
.pagination-link:active,
.pagination-link:focus,
.pagination-next:active,
.pagination-next:focus,
.pagination-previous:active,
.pagination-previous:focus,
.select select.is-active,
.select select.is-focused,
.select select:active,
.select select:focus,
.textarea:active,
.textarea:focus {
    outline:0
}

.button[disabled],
.file-cta[disabled],
.file-name[disabled],
.input[disabled],
.pagination-ellipsis[disabled],
.pagination-link[disabled],
.pagination-next[disabled],
.pagination-previous[disabled],
.select fieldset[disabled] select,
.select select[disabled],
.textarea[disabled],
fieldset[disabled] .button,
fieldset[disabled] .file-cta,
fieldset[disabled] .file-name,
fieldset[disabled] .input,
fieldset[disabled] .pagination-ellipsis,
fieldset[disabled] .pagination-link,
fieldset[disabled] .pagination-next,
fieldset[disabled] .pagination-previous,
fieldset[disabled] .select select,
fieldset[disabled] .textarea {
    cursor:not-allowed
}

.breadcrumb,
.button,
.delete,
.file,
.is-unselectable,
.modal-close,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.tabs {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

.delete,
.modal-close {
    background-color:rgba(10,10,10,.2);
    border:none;
    border-radius:9999px;
    cursor:pointer;
    display:inline-block;
    flex-grow:0;
    flex-shrink:0;
    font-size:0;
    height:20px;
    max-height:20px;
    max-width:20px;
    min-height:20px;
    min-width:20px;
    outline:0;
    pointer-events:auto;
    position:relative;
    vertical-align:top;
    width:20px
}

.delete::after,
.delete::before,
.modal-close::after,
.modal-close::before {
    background-color:#fff;
    content:"";
    display:block;
    left:50%;
    position:absolute;
    top:50%;
    transform:translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin:center center
}

.delete::before,
.modal-close::before {
    height:2px;
    width:50%
}

.delete::after,
.modal-close::after {
    height:50%;
    width:2px
}

.delete:focus,
.delete:hover,
.modal-close:focus,
.modal-close:hover {
    background-color:rgba(10,10,10,.3)
}

.delete:active,
.modal-close:active {
    background-color:rgba(10,10,10,.4)
}

/* ===== 5. 尺寸工具类（合并） ===== */
.is-small.delete,
.is-small.modal-close {
    height:16px;
    max-height:16px;
    max-width:16px;
    min-height:16px;
    min-width:16px;
    width:16px
}

.is-medium.delete,
.is-medium.modal-close {
    height:24px;
    max-height:24px;
    max-width:24px;
    min-height:24px;
    min-width:24px;
    width:24px
}

.is-large.delete,
.is-large.modal-close {
    height:32px;
    max-height:32px;
    max-width:32px;
    min-height:32px;
    min-width:32px;
    width:32px
}

.button.is-loading::after,
.control.is-loading::after,
.loader,
.select.is-loading::after {
    -webkit-animation:spinAround .5s infinite linear;
    animation:spinAround .5s infinite linear;
    border:2px solid #dbdbdb;
    border-radius:9999px;
    border-right-color:transparent;
    border-top-color:transparent;
    content:"";
    display:block;
    height:1em;
    position:relative;
    width:1em
}

/* ===== 6. 布局和容器 ===== */
.block:not(:last-child),
.box:not(:last-child),
.breadcrumb:not(:last-child),
.content:not(:last-child),
.level:not(:last-child),
.message:not(:last-child),
.notification:not(:last-child),
.pagination:not(:last-child),
.progress:not(:last-child),
.subtitle:not(:last-child),
.table-container:not(:last-child),
.table:not(:last-child),
.tabs:not(:last-child),
.title:not(:last-child) {
    margin-bottom:1.5rem
}

.hero-video,
.image.is-16by9 .has-ratio,
.image.is-16by9 img,
.image.is-1by1 .has-ratio,
.image.is-1by1 img,
.image.is-1by2 .has-ratio,
.image.is-1by2 img,
.image.is-1by3 .has-ratio,
.image.is-1by3 img,
.image.is-2by1 .has-ratio,
.image.is-2by1 img,
.image.is-2by3 .has-ratio,
.image.is-2by3 img,
.image.is-3by1 .has-ratio,
.image.is-3by1 img,
.image.is-3by2 .has-ratio,
.image.is-3by2 img,
.image.is-3by4 .has-ratio,
.image.is-3by4 img,
.image.is-3by5 .has-ratio,
.image.is-3by5 img,
.image.is-4by3 .has-ratio,
.image.is-4by3 img,
.image.is-4by5 .has-ratio,
.image.is-4by5 img,
.image.is-5by3 .has-ratio,
.image.is-5by3 img,
.image.is-5by4 .has-ratio,
.image.is-5by4 img,
.image.is-9by16 .has-ratio,
.image.is-9by16 img,
.image.is-square .has-ratio,
.image.is-square img,
.is-overlay,
.modal,
.modal-background {
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0
}

.navbar-burger {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    background:0 0;
    border:none;
    color:currentColor;
    font-family:inherit;
    font-size:1em;
    margin:0;
    padding:0
}

.navbar-link:not(.is-arrowless)::after,
.select:not(.is-multiple):not(.is-loading)::after {
    border:3px solid transparent;
    border-radius:2px;
    border-right:0;
    border-top:0;
    content:" ";
    display:block;
    height:.625em;
    margin-top:-.4375em;
    pointer-events:none;
    position:absolute;
    top:50%;
    transform:rotate(-45deg);
    transform-origin:center;
    width:.625em
}

/* ===== 7. 组件 - 按类别分组 ===== */

/* 7.1 Box */
.box {
    background-color:#fff;
    border-radius:6px;
    box-shadow:0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
    color:#4a4a4a;
    display:block;
    padding:1.25rem
}

a.box:focus,
a.box:hover {
    box-shadow:0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px #485fc7
}

a.box:active {
    box-shadow:inset 0 1px 2px rgba(10,10,10,.2),0 0 0 1px #485fc7
}

/* 7.2 Button（基础样式）*/
.button {
    background-color:#fff;
    border-color:#dbdbdb;
    border-width:1px;
    color:#363636;
    cursor:pointer;
    justify-content:center;
    padding:calc(.5em - 1px) 1em;
    text-align:center;
    white-space:nowrap
}

.button strong {
    color:inherit
}

.button .icon,
.button .icon.is-large,
.button .icon.is-medium,
.button .icon.is-small {
    height:1.5em;
    width:1.5em
}

.button .icon:first-child:not(:last-child) {
    margin-left:calc(-.5em - 1px);
    margin-right:.25em
}

.button .icon:last-child:not(:first-child) {
    margin-left:.25em;
    margin-right:calc(-.5em - 1px)
}

.button .icon:first-child:last-child {
    margin-left:calc(-.5em - 1px);
    margin-right:calc(-.5em - 1px)
}

/* 按钮状态 */
.button.is-hovered,
.button:hover {
    border-color:#b5b5b5;
    color:#363636
}

.button.is-focused,
.button:focus {
    border-color:#485fc7;
    color:#363636
}

.button.is-focused:not(:active),
.button:focus:not(:active) {
    box-shadow:0 0 0 .125em rgba(72,95,199,.25)
}

.button.is-active,
.button:active {
    border-color:#4a4a4a;
    color:#363636
}

/* 按钮变体 - 使用统一的模板减少重复 */
[class*="button.is-"] {
    border-color:transparent
}

.button.is-text {
    background-color:transparent;
    border-color:transparent;
    color:#4a4a4a;
    text-decoration:underline
}

.button.is-text.is-focused,
.button.is-text.is-hovered,
.button.is-text:focus,
.button.is-text:hover {
    background-color:#f5f5f5;
    color:#363636
}

.button.is-text.is-active,
.button.is-text:active {
    background-color:#e8e8e8;
    color:#363636
}

.button.is-text[disabled],
fieldset[disabled] .button.is-text {
    background-color:transparent;
    border-color:transparent;
    box-shadow:none
}

.button.is-ghost {
    background:0 0;
    border-color:transparent;
    color:#485fc7;
    text-decoration:none
}

.button.is-ghost.is-hovered,
.button.is-ghost:hover {
    color:#485fc7;
    text-decoration:underline
}

/* ===== 8. 颜色系统 - 合并重复的颜色定义 ===== */

/* 8.1 白色系 */
.button.is-white,
.notification.is-white,
.tag.is-white {
    background-color:#fff;
    color:#0a0a0a
}

/* 8.2 黑色系 */
.button.is-black,
.notification.is-black,
.tag.is-black {
    background-color:#0a0a0a;
    color:#fff
}

/* 8.3 浅色系 */
.button.is-light,
.notification.is-light,
.tag.is-light {
    background-color:#f5f5f5;
    color:rgba(0,0,0,.7)
}

/* 8.4 深色系 */
.button.is-dark,
.notification.is-dark,
.tag.is-dark {
    background-color:#363636;
    color:#fff
}

/* 8.5 主色系 */
.button.is-primary,
.notification.is-primary,
.tag.is-primary {
    background-color:#00d1b2;
    color:#fff
}

.button.is-primary.is-light,
.notification.is-primary.is-light,
.tag.is-primary.is-light {
    background-color:#ebfffc;
    color:#00947e
}

/* 8.6 链接色 */
.button.is-link,
.notification.is-link,
.tag.is-link {
    background-color:#485fc7;
    color:#fff
}

.button.is-link.is-light,
.notification.is-link.is-light,
.tag.is-link.is-light {
    background-color:#eff1fa;
    color:#3850b7
}

/* 8.7 信息色 */
.button.is-info,
.notification.is-info,
.tag.is-info {
    background-color:#3e8ed0;
    color:#fff
}

.button.is-info.is-light,
.notification.is-info.is-light,
.tag.is-info.is-light {
    background-color:#eff5fb;
    color:#296fa8
}

/* 8.8 成功色 */
.button.is-success,
.notification.is-success,
.tag.is-success {
    background-color:#48c78e;
    color:#fff
}

.button.is-success.is-light,
.notification.is-success.is-light,
.tag.is-success.is-light {
    background-color:#effaf5;
    color:#257953
}

/* 8.9 警告色 */
.button.is-warning,
.notification.is-warning,
.tag.is-warning {
    background-color:#ffe08a;
    color:rgba(0,0,0,.7)
}

.button.is-warning.is-light,
.notification.is-warning.is-light,
.tag.is-warning.is-light {
    background-color:#fffaeb;
    color:#946c00
}

/* 8.10 危险色 */
.button.is-danger,
.notification.is-danger,
.tag.is-danger {
    background-color:#f14668;
    color:#fff
}

.button.is-danger.is-light,
.notification.is-danger.is-light,
.tag.is-danger.is-light {
    background-color:#feecf0;
    color:#cc0f35
}

/* ===== 9. 尺寸类 - 合并重复 ===== */

/* 9.1 按钮尺寸 */
.button.is-small {
    font-size:.75rem
}

.button.is-small:not(.is-rounded) {
    border-radius:2px
}

.button.is-normal {
    font-size:1rem
}

.button.is-medium {
    font-size:1.25rem
}

.button.is-large {
    font-size:1.5rem
}

/* 9.2 图标尺寸 */
.icon {
    align-items:center;
    display:inline-flex;
    justify-content:center;
    height:1.5rem;
    width:1.5rem
}

.icon.is-small {
    height:1rem;
    width:1rem
}

.icon.is-medium {
    height:2rem;
    width:2rem
}

.icon.is-large {
    height:3rem;
    width:3rem
}

/* ===== 10. 表单元素（合并相似规则） ===== */
.input,
.select select,
.textarea {
    background-color:#fff;
    border-color:#dbdbdb;
    border-radius:4px;
    color:#363636
}

.input::-moz-placeholder,
.select select::-moz-placeholder,
.textarea::-moz-placeholder {
    color:rgba(54,54,54,.3)
}

.input::-webkit-input-placeholder,
.select select::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder {
    color:rgba(54,54,54,.3)
}

.input:-moz-placeholder,
.select select:-moz-placeholder,
.textarea:-moz-placeholder {
    color:rgba(54,54,54,.3)
}

.input:-ms-input-placeholder,
.select select:-ms-input-placeholder,
.textarea:-ms-input-placeholder {
    color:rgba(54,54,54,.3)
}

.input:hover,
.is-hovered.input,
.is-hovered.textarea,
.select select.is-hovered,
.select select:hover,
.textarea:hover {
    border-color:#b5b5b5
}

.input:active,
.input:focus,
.is-active.input,
.is-active.textarea,
.is-focused.input,
.is-focused.textarea,
.select select.is-active,
.select select.is-focused,
.select select:active,
.select select:focus,
.textarea:active,
.textarea:focus {
    border-color:#485fc7;
    box-shadow:0 0 0 .125em rgba(72,95,199,.25)
}

.input[disabled],
.select fieldset[disabled] select,
.select select[disabled],
.textarea[disabled],
fieldset[disabled] .input,
fieldset[disabled] .select select,
fieldset[disabled] .textarea {
    background-color:#f5f5f5;
    border-color:#f5f5f5;
    box-shadow:none;
    color:#7a7a7a
}

.input[disabled]::-moz-placeholder,
.select fieldset[disabled] select::-moz-placeholder,
.select select[disabled]::-moz-placeholder,
.textarea[disabled]::-moz-placeholder,
fieldset[disabled] .input::-moz-placeholder,
fieldset[disabled] .select select::-moz-placeholder,
fieldset[disabled] .textarea::-moz-placeholder {
    color:rgba(122,122,122,.3)
}

.input[disabled]::-webkit-input-placeholder,
.select fieldset[disabled] select::-webkit-input-placeholder,
.select select[disabled]::-webkit-input-placeholder,
.textarea[disabled]::-webkit-input-placeholder,
fieldset[disabled] .input::-webkit-input-placeholder,
fieldset[disabled] .select select::-webkit-input-placeholder,
fieldset[disabled] .textarea::-webkit-input-placeholder {
    color:rgba(122,122,122,.3)
}

.input[disabled]:-moz-placeholder,
.select fieldset[disabled] select:-moz-placeholder,
.select select[disabled]:-moz-placeholder,
.textarea[disabled]:-moz-placeholder,
fieldset[disabled] .input:-moz-placeholder,
fieldset[disabled] .select select:-moz-placeholder,
fieldset[disabled] .textarea:-moz-placeholder {
    color:rgba(122,122,122,.3)
}

.input[disabled]:-ms-input-placeholder,
.select fieldset[disabled] select:-ms-input-placeholder,
.select select[disabled]:-ms-input-placeholder,
.textarea[disabled]:-ms-input-placeholder,
fieldset[disabled] .input:-ms-input-placeholder,
fieldset[disabled] .select select:-ms-input-placeholder,
fieldset[disabled] .textarea:-ms-input-placeholder {
    color:rgba(122,122,122,.3)
}

.input,
.textarea {
    box-shadow:inset 0 .0625em .125em rgba(10,10,10,.05);
    max-width:100%;
    width:100%
}

.input[readonly],
.textarea[readonly] {
    box-shadow:none
}

/* ===== 11. 网格系统（简化重复定义） ===== */
.column {
    display:block;
    flex-basis:0;
    flex-grow:1;
    flex-shrink:1;
    padding:.75rem
}

.columns {
    margin-left:-.75rem;
    margin-right:-.75rem;
    margin-top:-.75rem
}

.columns:last-child {
    margin-bottom:-.75rem
}

.columns:not(:last-child) {
    margin-bottom:calc(1.5rem - .75rem)
}

.columns.is-mobile {
    display:flex
}


.columns.is-vcentered {
    align-items:center
}

/* ===== 12. 响应式工具类（合并重复的媒体查询） ===== */

/* 12.1 显示/隐藏工具 */
.is-hidden {
    display:none!important
}

.is-sr-only {
    border:none!important;
    clip:rect(0,0,0,0)!important;
    height:.01em!important;
    overflow:hidden!important;
    padding:0!important;
    position:absolute!important;
    white-space:nowrap!important;
    width:.01em!important
}

/* 12.2 显示类 */
.is-block {
    display:block!important
}

.is-flex {
    display:flex!important
}

.is-inline {
    display:inline!important
}

.is-inline-block {
    display:inline-block!important
}

.is-inline-flex {
    display:inline-flex!important
}

/* 12.3 响应式断点 */
@media screen and (max-width:768px) {
    .is-hidden-mobile {
        display:none!important
    }
    .is-block-mobile {
        display:block!important
    }
    .is-flex-mobile {
        display:flex!important
    }
    .is-inline-mobile {
        display:inline!important
    }
    .is-inline-block-mobile {
        display:inline-block!important
    }
    .is-inline-flex-mobile {
        display:inline-flex!important
    }
}

@media screen and (min-width:769px),print {
    .is-hidden-tablet {
        display:none!important
    }
    .is-block-tablet {
        display:block!important
    }
    .is-flex-tablet {
        display:flex!important
    }
    .is-inline-tablet {
        display:inline!important
    }
    .is-inline-block-tablet {
        display:inline-block!important
    }
    .is-inline-flex-tablet {
        display:inline-flex!important
    }
}

@media screen and (min-width:1024px) {
    .is-hidden-desktop {
        display:none!important
    }
    .is-block-desktop {
        display:block!important
    }
    .is-flex-desktop {
        display:flex!important
    }
    .is-inline-desktop {
        display:inline!important
    }
    .is-inline-block-desktop {
        display:inline-block!important
    }
    .is-inline-flex-desktop {
        display:inline-flex!important
    }
}

/* ===== 13. 其他组件（简化版） ===== */

/* 13.1 容器 */
.container {
    flex-grow:1;
    margin:0 auto;
    position:relative;
    width:auto
}

.container.is-fluid {
    max-width:none!important;
    padding-left:32px;
    padding-right:32px;
    width:100%
}

@media screen and (min-width:1024px) {
    .container {
        max-width:960px
    }
}

@media screen and (min-width:1216px) {
    .container:not(.is-max-desktop) {
        max-width:1152px
    }
}

@media screen and (min-width:1408px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width:1344px
    }
}

/* 13.2 卡片 */
.card {
    background-color:#fff;
    border-radius:.25rem;
    box-shadow:0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
    color:#4a4a4a;
    max-width:100%;
    position:relative
}

/* 13.3 模态框 */
.modal {
    align-items:center;
    display:none;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    position:fixed;
    z-index:40
}

.modal.is-active {
    display:flex
}



/* 13.4 导航栏 */
.navbar {
    background-color:#fff;
    min-height:3.25rem;
    position:relative;
    z-index:30
}

/* 13.5 页脚 */
.footer {
    background-color:#fafafa;
    padding:3rem 1.5rem 6rem
}

/* 13.6 通知 */
.notification {
    background-color:#f5f5f5;
    border-radius:4px;
    position:relative;
    padding:1.25rem 2.5rem 1.25rem 1.5rem
}

/* ===== 14. 媒体查询合并（将所有相似的响应式规则合并） ===== */

/* 14.1 按钮响应式 */
@media screen and (max-width:768px) {
    .button.is-responsive.is-small {
        font-size:.5625rem
    }
    .button.is-responsive,
    .button.is-responsive.is-normal {
        font-size:.65625rem
    }
    .button.is-responsive.is-medium {
        font-size:.75rem
    }
    .button.is-responsive.is-large {
        font-size:1rem
    }
}

@media screen and (min-width:769px) and (max-width:1023px) {
    .button.is-responsive.is-small {
        font-size:.65625rem
    }
    .button.is-responsive,
    .button.is-responsive.is-normal {
        font-size:.75rem
    }
    .button.is-responsive.is-medium {
        font-size:1rem
    }
    .button.is-responsive.is-large {
        font-size:1.25rem
    }
}

/* 14.2 网格响应式（简化大量重复的列宽定义） */
.columns.is-mobile>.column.is-1 { flex:none;width:8.33333% }
.columns.is-mobile>.column.is-2 { flex:none;width:16.66667% }
.columns.is-mobile>.column.is-3 { flex:none;width:25% }
.columns.is-mobile>.column.is-4 { flex:none;width:33.33333% }
.columns.is-mobile>.column.is-5 { flex:none;width:41.66667% }
.columns.is-mobile>.column.is-6 { flex:none;width:50% }
.columns.is-mobile>.column.is-7 { flex:none;width:58.33333% }
.columns.is-mobile>.column.is-8 { flex:none;width:66.66667% }
.columns.is-mobile>.column.is-9 { flex:none;width:75% }
.columns.is-mobile>.column.is-10 { flex:none;width:83.33333% }
.columns.is-mobile>.column.is-11 { flex:none;width:91.66667% }
.columns.is-mobile>.column.is-12 { flex:none;width:100% }

/* 使用通用模式简化偏移量定义 */
.columns.is-mobile>.column.is-offset-1 { margin-left:8.33333% }
.columns.is-mobile>.column.is-offset-2 { margin-left:16.66667% }
.columns.is-mobile>.column.is-offset-3 { margin-left:25% }
.columns.is-mobile>.column.is-offset-4 { margin-left:33.33333% }
.columns.is-mobile>.column.is-offset-5 { margin-left:41.66667% }
.columns.is-mobile>.column.is-offset-6 { margin-left:50% }
.columns.is-mobile>.column.is-offset-7 { margin-left:58.33333% }
.columns.is-mobile>.column.is-offset-8 { margin-left:66.66667% }
.columns.is-mobile>.column.is-offset-9 { margin-left:75% }
.columns.is-mobile>.column.is-offset-10 { margin-left:83.33333% }
.columns.is-mobile>.column.is-offset-11 { margin-left:91.66667% }
.columns.is-mobile>.column.is-offset-12 { margin-left:100% }

/* ===== 15. 特殊状态类 ===== */
.is-loading {
    position:relative
}

.is-loading::after {
    -webkit-animation:spinAround .5s infinite linear;
    animation:spinAround .5s infinite linear;
    border:2px solid #dbdbdb;
    border-radius:9999px;
    border-right-color:transparent;
    border-top-color:transparent;
    content:"";
    display:block;
    height:1em;
    position:absolute;
    width:1em
}

.is-disabled,
[disabled] {
    cursor:not-allowed;
    opacity:.5
}

.is-active {
    background-color:#485fc7;
    color:#fff
}

.is-selected {
    background-color:#00d1b2;
    color:#fff
}





.color-input-wrapper { position: relative; width: 100%;height: 100%; border: none !important; 
outline: none !important;}
.color-input { 
width: 100%; height: 100%; cursor: pointer; border: none !important; 
outline: none !important; 
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background: #3eede7; 
transition: background-color 0.3s ease;
border-radius: 0 !important;
-webkit-tap-highlight-color: transparent;
}
input[type="color"],
input[type="color"]::-webkit-color-swatch-wrapper,
input[type="color"]::-webkit-color-swatch,
input[type="color"]::-moz-color-swatch,
input[type="color"]::-moz-focus-inner {
border-radius: 0 !important;
border: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="color"] {
-webkit-appearance: none;
appearance: none;
border: none;
outline: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
border: none;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 0;
}
}








.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.modal.is-active {
    display: flex; /* 改为 flex，只作为容器 */
    justify-content: center;
    align-items: center;
}

/* 确保模态框容器背景透明 */
.modal.is-active {
    background-color: transparent !important;
}

/* 移除.modal-background的默认背景色 */
.modal-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 完全透明 */
    background-color: transparent;
}


/* 弹窗样式 - 关键改动 */
.modal-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    overflow: hidden;
    z-index: 101;
}




/* 通用弹窗结构 */
.modal-card-head {
    background-color: #f5f5f5;
    padding: 1rem;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    touch-action: none;
    position: relative;
}

.modal-card-body {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-card-foot {
    background-color: #f5f5f5;
    padding: 1rem;
    border-top: 1px solid #dbdbdb;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.modal-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #363636;
    margin: 0;
}

.delete {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    padding: 0;
}

.delete::before,
.delete::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 2px;
    background-color: #363636;
    transform-origin: center;
}

.delete::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.delete::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 3-3-1 布局样式 */
.option-group {
    margin-bottom: 1.5rem;
}

.option-group:last-child {
    margin-bottom: 0;
}

.option-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.option-row:last-child {
    margin-bottom: 0;
}

/* 第一行：3个项目 */
.option-row:nth-child(1) .option-item {
    flex: 1;
    min-width: calc(33.333% - 0.67rem);
}

/* 第二行：3个项目 */
.option-row:nth-child(2) .option-item {
    flex: 1;
    min-width: calc(33.333% - 0.67rem);
}
/* 第三行：3个项目 */
.option-row:nth-child(3) .option-item {
    flex: 1;
    min-width: calc(33.333% - 0.67rem);
    justify-content: center;

}

/* 第四行：1个项目（居中） */
.option-row:nth-child(4) {
    justify-content: center;
    text-align: center;
}

.option-row:nth-child(4) .option-item {
    flex: none;
    width: auto;
}

.help {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 500;
        text-align: center;

}

/* 表单控件样式 */
.input.is-small,
.select.is-small select {
    width: 100%;
    font-size: 0.875rem;
    height: 2.25em;
    padding: 0.375em 0.75em;
    border: 1px solid #dbdbdb;
    background-color: #fff;
    color: #363636;
}

.input.is-small:focus,
.select.is-small select:focus {
    border-color: #485fc7;
    outline: none;
    box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}

.select.is-small {
    position: relative;
    display: block;
}

input[type="color"].is-small {
    width: 100%;
    height: 2.25em;
    padding: 0.125em;
    border: 1px solid #dbdbdb;
    cursor: pointer;
}

input[type="range"].is-small {
    width: 100%;
    cursor: pointer;
}

input[type="checkbox"].is-small {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #363636;
}

/* 按钮样式 */
.button {
padding: 10px 12px;
    font-size: 1rem;
    cursor: pointer;
}

.button.is-success {
    background-color: #48c78e;
    color: white;
    border-color: #48c78e;
}


.android-color-preview, .android-advanced-picker {border-radius: 4px;}

.darw {
    text-align: center;
}

/* 画布样式 */
#canvas-id {
    display: block;
    margin: 0 auto;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 0 20px #ccc;
}





    /* 新增：控制面板切换按钮样式 */
    .panel-toggle-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        margin-left: 8px;
        transition: all 0.3s ease;
    }
    
    .panel-toggle-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }














.unified-b-right-quarter:hover {
    border-color: rgba(255,255,100,0.9) !important;
}



@keyframes colorPickingPulse {
    0% { box-shadow: 0 0 10px rgba(255,100,100,0.5); }
    50% { box-shadow: 0 0 25px rgba(255,100,100,0.8); }
    100% { box-shadow: 0 0 10px rgba(255,100,100,0.5); }
}


/* 颜色确认区点击效果 */
.unified-b-right-quarter, .unified-touch-circle:active {
    transform: translate(-50%, -50%) scale(0.95);
    background: rgba(100,255,255,0.5) !important;
}


/* 颜色确认区点击效果 */
.unified-b-left-quarter:active {
    transform: translate(-50%, -50%) scale(0.95);
}


/* 在现有CSS中添加显示圈样式 */
/* 显示圈容器 - 确保正方形 */
.unified-display-circle {
    aspect-ratio: 1 / 1 !important; /* 保持正方形宽高比 */
}

/* 显示圈画布 - 填满容器 */
#unified-display-canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* 保持内容比例 */
}


/* 开关样式 */
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

#spectrum-toggle:checked + .toggle-slider {
    background-color: #48bb78;
}

#spectrum-toggle:checked + .toggle-slider:before {
    transform: translateX(30px);
}

/* 7环一体效果 */
.unified-touch-circle {
    transition: all 0.3s ease;
}

.unified-touch-circle:hover {
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 0 30px rgba(255,255,255,0.2);
    transform: translate(-50%, -50%) scale(1.02);
}





@keyframes pulse {
    0% { box-shadow: 0 0 5px rgba(255,0,0,0.8); }
    50% { box-shadow: 0 0 20px rgba(255,0,0,0.8); }
    100% { box-shadow: 0 0 5px rgba(255,0,0,0.8); }
}



@keyframes colorPulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}


/* 左上1/4扇形颜色预览 */
.unified-b-left-quarter, .unified-b-right-quarter, .unified-touch-circle {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* 按钮效果 */
#tool-controls button {
    transition: all 0.2s ease;
}

#tool-controls button:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}



/* 在现有style标签中添加性能优化CSS */
/* 硬件加速和优化 */
#unified-display-canvas,
#spectrum-canvas-c {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0); /* 启用GPU加速 */
    will-change: transform;
    backface-visibility: hidden;
}

/* 减少重绘区域 */
#unified-tool-container {
    contain: layout paint style;
}

/* 优化动画性能 */
.unified-b-right-quarter.color-picking-active {
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}


/* 确保组合盘的所有触摸区域都能正确响应 */
#unified-tool-container,
.unified-touch-circle,
.unified-b-right-quarter,
.unified-b-left-quarter {
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
}



.has-text-centered {
        align-items: center;
    justify-content: center;
}



.bn {
display: grid;box-sizing: border-box;
            grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr);
            justify-content: space-between;
        
        }

        .bt1 {
            justify-self: start;
        }
        
        .bt2 {
            justify-self: center;
        }
        
        .bt3 {
            justify-self: center;
        }
        
        .bt4 {
            justify-self: end;
        }
        


.bn1 {
    padding: 10px 12px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #666;
    transition: all 0.3s;
    width: 100%;
    border-radius: 0px;
    max-width: 120px;
}

.bn1.active {
    background: #007bff;
    color: white;
}



/* 桌面端（≥1280px）：可拖动弹窗 */
@media screen and (min-width: 1280px) {
.bn {
width: auto;
gap:8px;
}

        .bt2 {
            justify-self: center;
            margin-left: 50px;
            margin-right: 35px;
        }
        
        .bt3 {
            justify-self: center;
            margin-left: 35px;

            margin-right: 50px;
        }


}

/* 桌面端（≥768px）：可拖动弹窗 */
@media screen and (min-width: 768px) {
.bn {
gap:4px;
}



    .modal.is-active,
    .modal.is-active .modal-background {
        background-color: transparent !important;
    }

    .modal-card {
        position: fixed; /* 使用 fixed */
        width: 400px;
        height: 400px;
        /* 初始居中 */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    


}






/* 移动端（<768px）*/
@media (max-width: 767px) {
.bn {
width: 100%;
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 确保真正等宽 */
    gap:0.2em;

}

.bn1 {
    padding: 10px 12px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #666;
    transition: all 0.3s;
    border-radius: 0px;
}

.bn1.active {
    background: #007bff;
    color: white;
}




    .modal-card {
    touch-action: none;
        position: fixed;
        width: 90vw;
        height: 70vh;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }
.modal-card.dragging .delete {
        opacity: 0.7;
        transform: scale(0.95);
    }
    
    .modal.is-active .modal-background {
        background-color: transparent !important;   /* 模态框背景透明 */
    }


    #tool-controls {
        bottom: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: calc(100% - 20px);
        padding: 15px;
        font-size: 14px;
    }
    
    .tool-notification {
        font-size: 13px;
        padding: 10px 20px;
        max-width: 90%;
        white-space: normal;
        text-align: center;
    }
    
    #unified-tool-container {
        transform-origin: center;
    }
    
    
    
    


    
    /* 移动端光谱圆盘 */
    #spectrum-wheel-c {
        touch-action: none; /* 防止页面滚动 */
    }
    
    /* 移动端按钮调整 */
    .panel-toggle-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    
    /* 增加触摸区域大小 */
    .unified-touch-circle {
        border-width: 5px !important;
    }
    
        /* 确保触摸事件能穿透到上层 */
    .unified-touch-circle:hover {
        pointer-events: auto !important;
    }
}

/* 滑块样式 */
input[type="range"] {
    -webkit-appearance: none;
        width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    appearance: none;
    background: rgba(210,210,210,0.4);
    border-radius: 5px;
    height: 8px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

/* 模式指示器 */
#mode-indicator {
    animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

/* 绘画状态指示 */
.painting-active {
    background: rgba(72,187,120,0.3) !important;
    border-color: rgba(72,187,120,0.8) !important;
}

.color-picking-active {
    background: rgba(255,100,100,0.3) !important;
    border-color: rgba(255,100,100,0.8) !important;
}




/* ===== 3. 动画 ===== */
@-webkit-keyframes spinAround {
    from {
        transform:rotate(0)
    }
    to {
        transform:rotate(359deg)
    }
}
@keyframes spinAround {
    from {
        transform:rotate(0)
    }
    to {
        transform:rotate(359deg)
    }
}
@-webkit-keyframes moveIndeterminate {
    from {
        background-position:200% 0
    }
    to {
        background-position:-200% 0
    }
}
@keyframes moveIndeterminate {
    from {
        background-position:200% 0
    }
    to {
        background-position:-200% 0
    }
}